/* ===========================================
   KFX ROOFING - BLUE SMOKE THEME
   Design System v1.4
   Last Updated: November 29, 2025
   =========================================== */

/* ===========================================
   DESIGN TOKENS (CSS Custom Properties)
   =========================================== */

:root {
  /* ----- PRIMARY COLORS ----- */
  --bs-primary-blue: #118df0;
  --bs-primary-blue-bright: #3BA3F5;
  --bs-primary-blue-dark: #0a6bc4;
  --bs-primary-blue-glow: rgba(17, 141, 240, 0.4);

  /* ----- BACKGROUND COLORS ----- */
  --bs-bg-dark: #050a15;
  --bs-bg-section: #0a1628;
  --bs-bg-card: rgba(255, 255, 255, 0.05);

  /* ----- OVERLAY GRADIENT ----- */
  --bs-overlay: linear-gradient(180deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(15, 23, 42, 0.6) 40%,
    rgba(0, 0, 0, 0.75) 100%);

  /* ----- GLASS EFFECTS ----- */
  --bs-glass-bg: rgba(255, 255, 255, 0.05);
  --bs-glass-bg-hover: rgba(255, 255, 255, 0.08);
  --bs-glass-border: rgba(255, 255, 255, 0.1);
  --bs-glass-border-blue: rgba(17, 141, 240, 0.25);
  --bs-glass-blur: 20px;
  --bs-glass-blur-light: 10px;

  /* ----- TEXT COLORS ----- */
  --bs-text-white: #ffffff;
  --bs-text-light: rgba(255, 255, 255, 0.9);
  --bs-text-muted: rgba(255, 255, 255, 0.5);
  --bs-text-accent: #118df0;

  /* ----- SHADOWS & GLOWS ----- */
  --bs-shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.3);
  --bs-shadow-glow: 0 0 30px rgba(17, 141, 240, 0.2);
  --bs-shadow-badge: 0 0 30px rgba(17, 141, 240, 0.2), 0 8px 32px rgba(0, 0, 0, 0.4);
  --bs-shadow-button: 0 4px 15px rgba(17, 141, 240, 0.4);

  /* ----- TYPOGRAPHY ----- */
  --bs-font-heading: 'Roboto Condensed', sans-serif;
  --bs-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Weights */
  --bs-weight-normal: 400;
  --bs-weight-medium: 500;
  --bs-weight-semibold: 600;
  --bs-weight-bold: 700;

  /* Heading Sizes (Mobile First) */
  --bs-h1-size: 2.25rem;
  --bs-h2-size: 1.75rem;
  --bs-h3-size: 1.25rem;
  --bs-h4-size: 1.1rem;

  /* Text Sizes */
  --bs-text-lg: 1.1rem;
  --bs-text-base: 1rem;
  --bs-text-sm: 0.875rem;
  --bs-text-xs: 0.75rem;

  /* ----- SPACING ----- */
  --bs-space-xs: 0.5rem;   /* 8px */
  --bs-space-sm: 1rem;     /* 16px */
  --bs-space-md: 1.5rem;   /* 24px */
  --bs-space-lg: 2rem;     /* 32px */
  --bs-space-xl: 3rem;     /* 48px */
  --bs-space-2xl: 4rem;    /* 64px */
  --bs-space-3xl: 6rem;    /* 96px */

  /* ----- BORDER RADIUS ----- */
  --bs-radius-none: 0;
  --bs-radius-xs: 4px;
  --bs-radius-sm: 8px;
  --bs-radius-md: 12px;
  --bs-radius-lg: 14px;
  --bs-radius-xl: 20px;
  --bs-radius-full: 50px;

  /* ----- TRANSITIONS ----- */
  --bs-transition-fast: 0.2s ease;
  --bs-transition-base: 0.3s ease;
  --bs-transition-slow: 0.5s ease;

  /* ----- CONTAINER WIDTHS ----- */
  --bs-container-sm: 540px;
  --bs-container-md: 720px;
  --bs-container-lg: 960px;
  --bs-container-xl: 1140px;
  --bs-container-2xl: 1320px;
}

/* ===========================================
   BASE RESETS & GLOBAL STYLES
   =========================================== */

/* Box sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* HTML & Body base */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--bs-font-body);
  font-size: var(--bs-text-base);
  line-height: 1.6;
  color: var(--bs-text-light);
  background-color: var(--bs-bg-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove default list styles */
ul,
ol {
  list-style: none;
}

/* Links base */
a {
  color: inherit;
  text-decoration: none;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Buttons reset */
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: transparent;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--bs-font-heading);
  font-weight: var(--bs-weight-bold);
  line-height: 1.2;
  color: var(--bs-text-white);
}

/* Paragraphs */
p {
  margin-bottom: 1rem;
}

/* Main content area */
.site-main {
  background-color: var(--bs-bg-dark);
}

/* Home page */
.home-page {
  background-color: var(--bs-bg-dark);
}

/* ===========================================
   RESPONSIVE TYPOGRAPHY
   =========================================== */

/* Tablet (768px+) */
@media (min-width: 768px) {
  :root {
    --bs-h1-size: 2.75rem;
    --bs-h2-size: 2rem;
    --bs-h3-size: 1.35rem;
    --bs-text-lg: 1.2rem;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  :root {
    --bs-h1-size: 3.5rem;
    --bs-h2-size: 2.5rem;
    --bs-h3-size: 1.5rem;
    --bs-text-lg: 1.35rem;
  }
}

/* ===========================================
   BASE ELEMENT STYLES
   =========================================== */

/* Apply Blue Smoke body styles */
.bs-theme {
  background-color: var(--bs-bg-dark);
  color: var(--bs-text-white);
  font-family: var(--bs-font-body);
}

/* Blue Smoke Headings */
.bs-theme h1,
.bs-theme h2,
.bs-theme h3,
.bs-theme h4,
.bs-theme h5,
.bs-theme h6,
.bs-h1, .bs-h2, .bs-h3, .bs-h4 {
  font-family: var(--bs-font-heading);
  font-weight: var(--bs-weight-bold);
  color: var(--bs-text-white);
  line-height: 1.2;
  margin: 0;
}

.bs-h1 { font-size: var(--bs-h1-size); }
.bs-h2 { font-size: var(--bs-h2-size); }
.bs-h3 { font-size: var(--bs-h3-size); }
.bs-h4 { font-size: var(--bs-h4-size); }

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* ----- TEXT UTILITIES ----- */
.bs-text-white { color: var(--bs-text-white); }
.bs-text-light { color: var(--bs-text-light); }
.bs-text-muted { color: var(--bs-text-muted); }
.bs-text-accent { color: var(--bs-text-accent); }
.bs-text-center { text-align: center; }
.bs-text-left { text-align: left; }
.bs-text-right { text-align: right; }

/* ----- BACKGROUND UTILITIES ----- */
.bs-bg-dark { background-color: var(--bs-bg-dark); }
.bs-bg-section { background-color: var(--bs-bg-section); }
.bs-bg-glass {
  background: var(--bs-glass-bg);
  backdrop-filter: blur(var(--bs-glass-blur));
  -webkit-backdrop-filter: blur(var(--bs-glass-blur));
}

/* ----- SPACING UTILITIES ----- */
.bs-p-xs { padding: var(--bs-space-xs); }
.bs-p-sm { padding: var(--bs-space-sm); }
.bs-p-md { padding: var(--bs-space-md); }
.bs-p-lg { padding: var(--bs-space-lg); }
.bs-p-xl { padding: var(--bs-space-xl); }

.bs-m-xs { margin: var(--bs-space-xs); }
.bs-m-sm { margin: var(--bs-space-sm); }
.bs-m-md { margin: var(--bs-space-md); }
.bs-m-lg { margin: var(--bs-space-lg); }
.bs-m-xl { margin: var(--bs-space-xl); }

.bs-mb-sm { margin-bottom: var(--bs-space-sm); }
.bs-mb-md { margin-bottom: var(--bs-space-md); }
.bs-mb-lg { margin-bottom: var(--bs-space-lg); }
.bs-mb-xl { margin-bottom: var(--bs-space-xl); }

.bs-mt-sm { margin-top: var(--bs-space-sm); }
.bs-mt-md { margin-top: var(--bs-space-md); }
.bs-mt-lg { margin-top: var(--bs-space-lg); }
.bs-mt-xl { margin-top: var(--bs-space-xl); }

/* ----- GAP UTILITIES ----- */
.bs-gap-xs { gap: var(--bs-space-xs); }
.bs-gap-sm { gap: var(--bs-space-sm); }
.bs-gap-md { gap: var(--bs-space-md); }
.bs-gap-lg { gap: var(--bs-space-lg); }
.bs-gap-xl { gap: var(--bs-space-xl); }

/* ===========================================
   LAYOUT COMPONENTS
   =========================================== */

/* ----- CONTAINER ----- */
.bs-container {
  width: 100%;
  max-width: var(--bs-container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bs-space-sm);
  padding-right: var(--bs-space-sm);
}

@media (min-width: 768px) {
  .bs-container {
    padding-left: var(--bs-space-md);
    padding-right: var(--bs-space-md);
  }
}

/* ----- SECTION PADDING ----- */
.bs-section {
  padding-top: var(--bs-space-xl);
  padding-bottom: var(--bs-space-xl);
}

@media (min-width: 768px) {
  .bs-section {
    padding-top: var(--bs-space-2xl);
    padding-bottom: var(--bs-space-2xl);
  }
}

@media (min-width: 1024px) {
  .bs-section {
    padding-top: var(--bs-space-3xl);
    padding-bottom: var(--bs-space-3xl);
  }
}

/* ----- SECTION HEADER ----- */
.bs-section-header {
  text-align: center;
  margin-bottom: var(--bs-space-xl);
}

.bs-section-header h2 {
  font-family: var(--bs-font-heading);
  font-size: var(--bs-h2-size);
  font-weight: var(--bs-weight-bold);
  color: var(--bs-text-white);
  margin-bottom: var(--bs-space-sm);
}

.bs-section-header p {
  font-size: var(--bs-text-lg);
  color: var(--bs-text-muted);
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

/* ----- GRID SYSTEM ----- */
.bs-grid {
  display: grid;
  gap: var(--bs-space-md);
}

.bs-grid-cols-1 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .bs-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .bs-grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .bs-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .bs-grid { gap: var(--bs-space-md); }
}

@media (min-width: 1024px) {
  .bs-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .bs-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .bs-grid { gap: var(--bs-space-lg); }
}

/* ----- FLEX UTILITIES ----- */
.bs-flex { display: flex; }
.bs-flex-col { flex-direction: column; }
.bs-flex-wrap { flex-wrap: wrap; }
.bs-items-center { align-items: center; }
.bs-justify-center { justify-content: center; }
.bs-justify-between { justify-content: space-between; }

/* ===========================================
   GLASS MORPHISM COMPONENTS
   =========================================== */

/* ----- GLASS CARD ----- */
.bs-glass-card {
  background: var(--bs-glass-bg);
  backdrop-filter: blur(var(--bs-glass-blur));
  -webkit-backdrop-filter: blur(var(--bs-glass-blur));
  border: 1px solid var(--bs-glass-border);
  padding: var(--bs-space-md);
  transition: all var(--bs-transition-base);
}

.bs-glass-card:hover {
  background: var(--bs-glass-bg-hover);
  border-color: var(--bs-glass-border-blue);
  box-shadow: var(--bs-shadow-glow);
}

/* ----- GLASS BADGE ----- */
.bs-glass-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bs-space-sm);
  background: var(--bs-glass-bg);
  backdrop-filter: blur(var(--bs-glass-blur));
  -webkit-backdrop-filter: blur(var(--bs-glass-blur));
  border: 1px solid var(--bs-glass-border);
  padding: var(--bs-space-sm) var(--bs-space-md);
  box-shadow: var(--bs-shadow-badge);
}

.bs-glass-badge-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 141, 240, 0.15);
  border-radius: var(--bs-radius-sm);
  color: var(--bs-primary-blue);
}

.bs-glass-badge-text {
  display: flex;
  flex-direction: column;
}

.bs-glass-badge-title {
  font-size: var(--bs-text-sm);
  font-weight: var(--bs-weight-semibold);
  color: var(--bs-text-white);
}

.bs-glass-badge-subtitle {
  font-size: var(--bs-text-xs);
  color: var(--bs-text-muted);
}

/* ===========================================
   BUTTON COMPONENTS
   =========================================== */

/* ----- BASE BUTTON ----- */
.bs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bs-space-xs);
  padding: 0.875rem 1.75rem;
  font-family: var(--bs-font-body);
  font-size: var(--bs-text-base);
  font-weight: var(--bs-weight-semibold);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--bs-transition-base);
}

/* ----- PRIMARY BUTTON (Gradient) ----- */
.bs-btn-primary {
  background: linear-gradient(135deg, var(--bs-primary-blue) 0%, var(--bs-primary-blue-dark) 100%);
  color: var(--bs-text-white);
  box-shadow: var(--bs-shadow-button);
}

.bs-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(17, 141, 240, 0.5);
}

/* ----- SECONDARY BUTTON (Glass) ----- */
.bs-btn-secondary {
  background: var(--bs-glass-bg);
  backdrop-filter: blur(var(--bs-glass-blur-light));
  -webkit-backdrop-filter: blur(var(--bs-glass-blur-light));
  border: 1px solid var(--bs-glass-border);
  color: var(--bs-text-white);
}

.bs-btn-secondary:hover {
  background: var(--bs-glass-bg-hover);
  border-color: var(--bs-glass-border-blue);
}

/* ----- BUTTON GROUP ----- */
.bs-btn-group {
  display: flex;
  flex-direction: column;
  gap: var(--bs-space-sm);
  width: 100%;
}

.bs-btn-group .bs-btn {
  width: 100%;
  justify-content: center;
}

@media (min-width: 768px) {
  .bs-btn-group {
    flex-direction: row;
    width: auto;
  }

  .bs-btn-group .bs-btn {
    width: auto;
  }
}

/* ----- GLOBAL BUTTON CLASSES (Non-prefixed) ----- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--bs-primary-blue) 0%, var(--bs-primary-blue-dark) 100%);
  color: var(--bs-text-white);
  font-family: var(--bs-font-heading);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  /* Square corners per Blue Smoke design */
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(17, 141, 240, 0.4);
  color: var(--bs-text-white);
}

.btn-primary svg {
  transition: transform 0.2s ease;
}

.btn-primary:hover svg {
  transform: translateX(4px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--bs-text-white);
  font-family: var(--bs-font-heading);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(17, 141, 240, 0.4);
  color: var(--bs-primary-blue);
}

.btn-secondary svg {
  transition: transform 0.2s ease;
}

.btn-secondary:hover svg {
  transform: translateX(4px);
}

/* Button Sizes */
.btn-lg {
  padding: 1.15rem 2.5rem;
  font-size: 1.1rem;
}

.btn-sm {
  padding: 0.65rem 1.25rem;
  font-size: 0.9rem;
}

/* ===========================================
   ACCESSIBILITY
   =========================================== */

/* Skip to Content Link (A11y) */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bs-primary-blue);
  color: #fff;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  z-index: 9999;
  transition: top 0.3s ease;
}

.skip-to-content:focus {
  top: 0.5rem;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ===========================================
   HEADER STYLES (Option A: Glass Morphic Dark)
   Blue Smoke Theme - Applied to existing classes
   =========================================== */

/* ----- SITE HEADER WRAPPER ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

@keyframes headerSlideDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header scroll state - enhanced glass effect */
.site-header.scrolled .header-top {
  background: rgba(5, 10, 21, 0.98);
}

.site-header.scrolled .main-nav {
  background: rgba(5, 10, 21, 0.98);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

/* ----- TOP BAR ----- */
.site-header .header-top {
  background: rgba(5, 10, 21, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0.5rem 0;
}

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

/* ----- SOCIAL ICONS ----- */
.site-header .header-social {
  display: flex;
  gap: 0.75rem;
}

.site-header .header-social a {
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

.site-header .header-social a:hover {
  color: var(--bs-primary-blue);
  transform: translateY(-2px);
}

.site-header .header-social svg {
  width: 16px;
  height: 16px;
  transition: filter 0.3s ease;
}

.site-header .header-social a:hover svg {
  filter: drop-shadow(0 0 8px rgba(17, 141, 240, 0.6));
}

/* ----- HEADER CONTACT (Phone + CTA) ----- */
.site-header .header-contact {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.site-header .header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bs-text-white);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: var(--bs-radius-sm);
  transition: all 0.2s ease;
}

.site-header .header-phone svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.site-header .header-phone:hover {
  color: var(--bs-primary-blue);
  background: rgba(59, 130, 246, 0.1);
}

.site-header .header-phone:hover svg {
  transform: scale(1.1);
}

/* ----- HEADER CTA BUTTON ----- */
.site-header .header-cta-btn {
  background: var(--bs-primary-blue-dark, #0a6bc4);
  color: var(--bs-text-white);
  padding: 0.5rem 1.25rem;
  border-radius: var(--bs-radius-sm);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.site-header .header-cta-btn:hover {
  background: var(--bs-primary-blue);
  transform: translateY(-1px);
}

/* ----- MAIN NAV ----- */
.site-header .main-nav {
  background: rgba(10, 22, 40, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.site-header .nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ----- LOGO / BRAND ----- */
.site-header .nav-brand {
  padding: 0.75rem 0;
}

.site-header .brand-logo-link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.site-header .brand-name {
  font-family: var(--bs-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bs-text-white);
  letter-spacing: 0.02em;
}

/* KFX accent color */
.site-header .brand-name .brand-accent {
  color: var(--bs-primary-blue);
}

.site-header .brand-tagline {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Custom logo image */
.site-header .custom-logo-link img,
.site-header .header-logo-img {
  max-height: 50px;
  width: auto;
}

/* ----- NAV MENU WRAPPER ----- */
.site-header .nav-menu {
  display: none;
  align-items: center;
  height: 100%;
}

@media (min-width: 768px) {
  .site-header .nav-menu {
    display: flex;
  }
}

/* ----- NAV MENU LIST (UL) ----- */
.site-header .nav-menu-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  height: 100%;
}

/* Menu item (LI) */
.site-header .nav-menu-list > .menu-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Nav links (top level) */
.site-header .nav-menu-list > .menu-item > .nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  transition: color 0.3s ease;
  height: 100%;
}

/* Animated underline */
.site-header .nav-menu-list > .menu-item > .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--bs-primary-blue);
  transition: all 0.3s ease;
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(17, 141, 240, 0.5);
}

.site-header .nav-menu-list > .menu-item > .nav-link:hover::after {
  width: 80%;
}

.site-header .nav-menu-list > .menu-item > .nav-link:hover {
  color: var(--bs-text-white);
}

/* Active page indicator */
.site-header .nav-menu-list > .menu-item.current-menu-item > .nav-link,
.site-header .nav-menu-list > .menu-item.current-menu-ancestor > .nav-link,
.site-header .nav-menu-list > .menu-item.current-page-ancestor > .nav-link,
.site-header .nav-menu-list > .menu-item > .nav-link.active {
  color: var(--bs-text-white);
}

.site-header .nav-menu-list > .menu-item.current-menu-item > .nav-link::after,
.site-header .nav-menu-list > .menu-item.current-menu-ancestor > .nav-link::after,
.site-header .nav-menu-list > .menu-item.current-page-ancestor > .nav-link::after,
.site-header .nav-menu-list > .menu-item > .nav-link.active::after {
  width: 80%;
}

/* Dropdown chevron */
.site-header .nav-menu-list .nav-chevron {
  color: var(--bs-primary-blue);
  width: 12px;
  height: 12px;
  transition: transform 0.3s ease, filter 0.3s ease;
  flex-shrink: 0;
}

.site-header .nav-menu-list .menu-item-has-children:hover > .nav-link .nav-chevron {
  transform: rotate(180deg);
  filter: drop-shadow(0 0 6px rgba(17, 141, 240, 0.8));
}

/* ----- DROPDOWN MENU (SUB-MENU) ----- */
.site-header .nav-menu-list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: rgba(10, 22, 40, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
  z-index: 1000;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header .nav-menu-list .menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Sub-menu items */
.site-header .nav-menu-list .sub-menu .menu-item {
  margin: 0;
  display: block;
}

.site-header .nav-menu-list .sub-menu .nav-link {
  display: block;
  padding: 0.75rem 1.25rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.site-header .nav-menu-list .sub-menu .menu-item:last-child .nav-link {
  border-bottom: none;
}

.site-header .nav-menu-list .sub-menu .nav-link:hover {
  background: rgba(17, 141, 240, 0.15);
  color: var(--bs-text-white);
  padding-left: 1.5rem;
}

/* ----- MEGA MENU (Service Areas) ----- */
.site-header .nav-menu-list .menu-item-mega {
  position: static;
}

.site-header .mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(10, 22, 40, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(17, 141, 240, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  z-index: 1000;
}

.site-header .nav-menu-list .menu-item-mega:hover > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-header .mega-menu-inner {
  max-width: var(--bs-container-xl);
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
}

/* Roofing mega menu - 4 columns centered with more room */
.site-header .mega-menu-roofing .mega-menu-inner {
  grid-template-columns: repeat(4, minmax(180px, 220px));
  justify-content: center;
  gap: 3rem;
  padding: 2.5rem 3rem;
}

/* Service Areas mega menu - 5 columns centered */
.site-header .mega-menu-service-areas .mega-menu-inner {
  grid-template-columns: repeat(5, minmax(140px, 180px));
  justify-content: center;
  gap: 2rem;
}

.site-header .mega-menu-column {
  min-width: 0;
}

.site-header .mega-menu-heading {
  display: block;
  color: var(--bs-primary-blue);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(17, 141, 240, 0.2);
}

.site-header .mega-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header .mega-menu-list .menu-item {
  margin: 0;
}

.site-header .mega-menu-link {
  display: block;
  padding: 0.4rem 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.site-header .mega-menu-link:hover {
  color: var(--bs-text-white);
  padding-left: 0.5rem;
}

.site-header .mega-menu-list .menu-item.current-menu-item .mega-menu-link,
.site-header .mega-menu-link.active {
  color: var(--bs-primary-blue);
}

.site-header .mega-menu-footer {
  grid-column: 1 / -1;
  text-align: center;
  padding-top: 1.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-header .mega-menu-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bs-primary-blue);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.site-header .mega-menu-view-all:hover {
  color: var(--bs-primary-blue-bright);
}

.site-header .mega-menu-view-all svg {
  transition: transform 0.2s ease;
}

.site-header .mega-menu-view-all:hover svg {
  transform: translateX(4px);
}

/* ----- MOBILE MENU TOGGLE ----- */
.site-header .mobile-menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.site-header .mobile-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--bs-text-white);
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .site-header .mobile-menu-toggle {
    display: none;
  }
}

/* Mobile menu toggle active state */
.site-header .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.site-header .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.site-header .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ----- MOBILE MENU (Active State) ----- */
@media (max-width: 767px) {
  /* Ensure header stays on top when menu is open */
  .site-header .main-nav {
    position: relative;
    z-index: 1001;
  }

  .site-header .nav-menu {
    position: fixed;
    top: 56px; /* Below the nav bar */
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - 56px);
    background: rgba(5, 10, 21, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 1rem 1rem 6rem; /* Bottom padding for CTA bar */
    display: none;
    overflow-y: auto;
    z-index: 999;
  }

  .site-header .nav-menu.active {
    display: flex;
  }

  .site-header .nav-menu-list {
    flex-direction: column;
    width: 100%;
  }

  .site-header .nav-menu-list > .menu-item {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
  }

  .site-header .nav-menu-list > .menu-item > .nav-link {
    width: 100%;
    padding: 1rem 1.5rem;
    border-bottom: none;
    border-left: 3px solid transparent;
    margin-bottom: 0;
    height: auto;
  }

  .site-header .nav-menu-list > .menu-item.current-menu-item > .nav-link,
  .site-header .nav-menu-list > .menu-item.current-menu-ancestor > .nav-link {
    border-bottom: none;
    border-left-color: var(--bs-primary-blue);
    background: rgba(17, 141, 240, 0.1);
  }

  .site-header .nav-menu-list .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    box-shadow: none;
    padding-left: 1rem;
    width: 100%;
  }

  .site-header .nav-menu-list .sub-menu .nav-link {
    padding-left: 2rem;
  }

  .site-header .nav-menu-list .sub-menu .nav-link:hover {
    padding-left: 2.25rem;
  }

  /* Mobile dropdown - closed by default */
  .site-header .nav-menu-list .sub-menu {
    display: none;
  }

  /* Mobile dropdown - open state */
  .site-header .nav-menu-list .sub-menu.mobile-open {
    display: block;
  }

  /* Chevron rotation on mobile */
  .site-header .nav-menu-list .menu-item-has-children.mobile-open > .nav-link .nav-chevron {
    transform: rotate(180deg);
  }

  /* ----- MEGA MENU MOBILE ----- */
  .site-header .mega-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    box-shadow: none;
    display: none;
  }

  .site-header .nav-menu-list .menu-item-mega.mobile-open > .mega-menu {
    display: block;
  }

  /* Service Areas mobile - simplified dropdown */
  /* Show only first 2 counties, hide the rest */
  .site-header .mega-menu-service-areas .mega-menu-column:nth-child(n+3) {
    display: none;
  }

  /* Limit cities shown per county on mobile */
  .site-header .mega-menu-service-areas .mega-menu-list li:nth-child(n+5) {
    display: none;
  }

  /* Ensure View All link is prominent */
  .site-header .mega-menu-service-areas .mega-menu-footer {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .site-header .mega-menu-inner {
    padding: 1rem;
    display: block;
  }

  .site-header .mega-menu-column {
    margin-bottom: 1.5rem;
  }

  .site-header .mega-menu-column:last-of-type {
    margin-bottom: 0;
  }

  .site-header .mega-menu-heading {
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
  }

  .site-header .mega-menu-link {
    padding: 0.35rem 0 0.35rem 0.75rem;
    font-size: 0.85rem;
  }

  .site-header .mega-menu-footer {
    padding-top: 1rem;
    margin-top: 1rem;
  }

  .site-header .mega-menu-view-all {
    font-size: 0.85rem;
  }
}

/* ----- RESPONSIVE: Hide top bar on mobile ----- */
@media (max-width: 767px) {
  .site-header .header-top {
    display: none;
  }
}

/* ===========================================
   FOOTER STYLES (Blue Smoke Dark Theme)
   Applied to existing .footer-clean classes
   Key: NO border-radius - all square corners
   =========================================== */

/* ----- MAIN FOOTER ----- */
.footer-clean {
  background: var(--bs-bg-dark);
  border-top: 1px solid rgba(17, 141, 240, 0.3);
  /* NO border-radius - square corners */
}

.footer-clean .footer-main-clean {
  padding: 3rem 0 2rem;
}

/* ----- FOOTER GRID ----- */
.footer-clean .footer-grid-clean {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .footer-clean .footer-grid-clean {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
  }
}

@media (min-width: 1024px) {
  .footer-clean .footer-grid-clean {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

/* ----- FOOTER COLUMNS ----- */
.footer-clean .footer-col-clean {
  /* Base column styling */
}

.footer-clean .footer-col-large {
  /* Large column (company info) */
}

/* ----- FOOTER HEADINGS ----- */
.footer-clean h3 {
  font-family: var(--bs-font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--bs-text-white);
  margin-bottom: 1.25rem;
}

.footer-clean .footer-heading {
  color: var(--bs-primary-blue);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.25rem;
}

/* ----- FOOTER DESCRIPTION ----- */
.footer-clean .footer-description {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* ----- FOOTER BADGES ----- */
.footer-clean .footer-badges-clean {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.footer-clean .badge-clean {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.4rem 0.75rem;
  /* NO border-radius - square */
}

/* ----- FOOTER LINK LISTS ----- */
.footer-clean .footer-list-clean {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-clean .footer-list-clean li {
  margin-bottom: 0.25rem;
}

.footer-clean .footer-list-clean a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
  padding: 0.5rem 0;
  min-height: 44px;
  line-height: 1.5;
}

.footer-clean .footer-list-clean a:hover {
  color: var(--bs-primary-blue);
}

/* ----- FOOTER CONTACT ----- */
.footer-clean .footer-contact-clean {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-clean .footer-contact-clean li {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.footer-clean .footer-contact-clean strong {
  color: var(--bs-primary-blue);
  font-weight: 600;
  display: block;
  margin-bottom: 0.25rem;
}

.footer-clean .footer-contact-clean a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-clean .footer-contact-clean a:hover {
  color: var(--bs-primary-blue);
}

.footer-clean .emergency-text {
  color: var(--bs-primary-blue);
  font-weight: 500;
}

/* ----- CERTIFICATIONS BAR ----- */
.footer-clean .footer-certifications {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 0;
  margin-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-clean .cert-item {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  font-weight: 500;
}

.footer-clean .cert-divider {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.75rem;
}

/* ----- FOOTER BOTTOM ----- */
.footer-clean .footer-bottom-clean {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  /* NO border-radius */
}

.footer-clean .footer-bottom-flex {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 0;
  text-align: center;
}

@media (min-width: 768px) {
  .footer-clean .footer-bottom-flex {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
}

.footer-clean .footer-bottom-clean p {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  margin: 0;
}

.footer-clean .footer-legal {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .footer-clean .footer-legal {
    justify-content: flex-end;
    gap: 1.5rem;
  }
}

.footer-clean .footer-legal a {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-clean .footer-legal a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.footer-clean .footer-legal span {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.75rem;
}

@media (min-width: 768px) {
  .footer-clean .footer-legal span {
    display: none;
  }
}

/* ----- FOOTER SOCIAL ICONS ----- */
.footer-clean .footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.footer-clean .footer-social a {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* NO border-radius - square icons */
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
}

.footer-clean .footer-social a:hover {
  background: rgba(17, 141, 240, 0.15);
  border-color: rgba(17, 141, 240, 0.3);
  color: var(--bs-primary-blue);
}

.footer-clean .footer-social svg {
  width: 20px;
  height: 20px;
}

/* Footer Logo */
.footer-clean .footer-logo {
  margin-top: 1.5rem;
}

.footer-clean .footer-logo img {
  max-width: 140px;
  height: auto;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.footer-clean .footer-logo a:hover img {
  opacity: 1;
}

/* Brand column - align description with list items in other columns */
.footer-clean .footer-col-brand {
  padding-top: calc(0.8rem * 1.4 + 1.25rem); /* h4 line-height + margin-bottom */
}

/* ===========================================
   HERO STYLES (Blue Smoke Dark Theme)
   Supports .hero-home and .hero-blue-smoke classes
   =========================================== */

/* ----- HERO SECTION ----- */
.hero-home,
.hero-blue-smoke {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg,
    var(--bs-bg-dark) 0%,
    #0a1628 50%,
    #050a15 100%);
}

/* ----- HERO BACKGROUND (via CSS variable) ----- */
.hero-blue-smoke::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Ken Burns animation variant */
.hero-blue-smoke--ken-burns::before {
  inset: -5%; /* Slight overflow to prevent edges showing during animation */
  width: 110%;
  height: 110%;
  animation: kenBurns 25s ease-in-out infinite;
}

/* Legacy .hero-background div support (deprecated) */
.hero-home .hero-background,
.hero-blue-smoke .hero-background {
  position: absolute;
  inset: 0;
  background-image: url('../img/hero-roofing.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Dark Smoke Overlay */
.hero-home .hero-overlay,
.hero-blue-smoke .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(15, 23, 42, 0.6) 40%,
    rgba(0, 0, 0, 0.75) 100%);
  z-index: 1;
}

/* ----- HERO CONTENT ----- */
.hero-home .hero-content,
.hero-blue-smoke .hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 1050px;
  padding: 3rem 2rem;
}

/* ----- HERO BADGES (Glass Morphic with Blue Glow) ----- */
.hero-home .hero-badges,
.hero-blue-smoke .hero-badges {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .hero-home .hero-badges,
  .hero-blue-smoke .hero-badges {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
  }
}

.hero-home .hero-badge,
.hero-blue-smoke .hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(17, 141, 240, 0.25);
  border-radius: var(--bs-radius-lg);
  color: var(--bs-text-white);
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow:
    0 0 30px rgba(17, 141, 240, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: badgeFadeIn 0.5s ease-out both, badgeGlow 3s ease-in-out infinite;
}

/* Badge icon */
.hero-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--bs-blue-glow);
}

.hero-badge__icon svg {
  width: 100%;
  height: 100%;
}

.hero-home .hero-badge:nth-child(2),
.hero-blue-smoke .hero-badge:nth-child(2) {
  animation-delay: 0.5s;
}

.hero-home .hero-badge:nth-child(3),
.hero-blue-smoke .hero-badge:nth-child(3) {
  animation-delay: 1s;
}

/* ----- HERO TITLE ----- */
.hero-home h1,
.hero-blue-smoke h1 {
  font-family: var(--bs-font-heading);
  font-size: var(--bs-h1-size);
  font-weight: 700;
  color: var(--bs-text-white);
  line-height: 1.1;
  margin-bottom: 1.25rem;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  letter-spacing: -0.01em;
}

/* ----- HERO SUBTITLE ----- */
.hero-home .hero-subtitle,
.hero-blue-smoke .hero-subtitle,
.hero-home .hero-subheadline,
.hero-blue-smoke .hero-subheadline {
  font-size: var(--bs-text-lg);
  font-weight: 500;
  color: var(--bs-primary-blue);
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

/* ----- HERO BUTTONS (Glass Morphic) ----- */
.hero-home .hero-buttons,
.hero-blue-smoke .hero-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .hero-home .hero-buttons,
  .hero-blue-smoke .hero-buttons {
    flex-direction: row;
    gap: 1.25rem;
  }
}

/* Primary Button (Blue Gradient) */
.hero-home .btn-orange,
.hero-home .btn-primary,
.hero-blue-smoke .btn-orange,
.hero-blue-smoke .btn-primary {
  background: linear-gradient(135deg, rgba(17, 141, 240, 0.87) 0%, rgba(17, 141, 240, 0.6) 100%);
  box-shadow:
    0 8px 32px rgba(17, 141, 240, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--bs-text-white);
  padding: 1.15rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: var(--bs-radius-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  text-decoration: none;
}

.hero-home .btn-orange:hover,
.hero-home .btn-primary:hover,
.hero-blue-smoke .btn-orange:hover,
.hero-blue-smoke .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 40px rgba(17, 141, 240, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Secondary Button (Glass) */
.hero-home .btn-secondary,
.hero-home .btn-white,
.hero-blue-smoke .btn-secondary,
.hero-blue-smoke .btn-white {
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--bs-text-white);
  padding: 1.15rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: var(--bs-radius-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-home .btn-secondary:hover,
.hero-home .btn-white:hover,
.hero-blue-smoke .btn-secondary:hover,
.hero-blue-smoke .btn-white:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.hero-home .btn-secondary svg,
.hero-home .btn-white svg,
.hero-blue-smoke .btn-secondary svg,
.hero-blue-smoke .btn-white svg {
  width: 20px;
  height: 20px;
}

/* ----- HERO TRUST BAR ----- */
.hero-home .hero-trust,
.hero-blue-smoke .hero-trust,
.hero-home .hero-trust-bar,
.hero-blue-smoke .hero-trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.hero-home .hero-rating,
.hero-blue-smoke .hero-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-home .hero-rating .stars,
.hero-blue-smoke .hero-rating .stars {
  display: flex;
  gap: 0.15rem;
}

.hero-home .hero-rating .stars svg,
.hero-blue-smoke .hero-rating .stars svg {
  color: #fbbf24;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
}

.hero-home .hero-trust-divider,
.hero-blue-smoke .hero-trust-divider,
.hero-home .trust-divider,
.hero-blue-smoke .trust-divider {
  color: rgba(255, 255, 255, 0.3);
}

/* Trust Bar Link (when link is set in Site Settings) */
.hero-home .hero-trust-bar__link,
.hero-blue-smoke .hero-trust-bar__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

.hero-home .hero-trust-bar__link:hover,
.hero-blue-smoke .hero-trust-bar__link:hover {
  color: rgba(255, 255, 255, 0.95);
}

.hero-home .hero-trust-bar__link:hover .stars svg,
.hero-blue-smoke .hero-trust-bar__link:hover .stars svg {
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8));
}

/* ===========================================
   HERO HOME WITH FORM (Homepage)
   Two-column layout with contact form
   =========================================== */

/* Hero Home - Homepage hero with integrated form
   ================================================ */

/* Badge Fade-In Animation */
@keyframes badgeFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ken Burns - Slow zoom/pan on background */
@keyframes kenBurns {
    0% {
        transform: scale(1) translate(0, 0);
    }
    50% {
        transform: scale(1.08) translate(-1%, -1%);
    }
    100% {
        transform: scale(1) translate(0, 0);
    }
}

.hero-home {
    position: relative;
    min-height: auto;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--bs-bg-dark);
    padding: 4rem 0;
}

@media (min-width: 1024px) {
    .hero-home {
        padding: 5rem 0;
    }
}

@media (min-width: 1280px) {
    .hero-home {
        padding: 6rem 0;
    }
}

/* Background Image (via CSS variable) */
.hero-home::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Ken Burns animation for hero-home (when modifier class present) */
.hero-home.hero-blue-smoke--ken-burns::before {
    inset: -5%; /* Slight overflow to prevent edges showing during animation */
    width: 110%;
    height: 110%;
    animation: kenBurns 25s ease-in-out infinite;
}

/* Dark Smoke Overlay - radial vignette darker in center for text contrast */
.hero-home__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(5, 10, 21, 0.8) 0%, transparent 70%),
        linear-gradient(135deg,
            rgba(5, 10, 21, 0.7) 0%,
            rgba(10, 22, 40, 0.6) 50%,
            rgba(5, 10, 21, 0.7) 100%);
    z-index: 1;
}

/* Content Container - Single Column Centered */
.hero-home__container {
    position: relative;
    z-index: 10;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .hero-home__container {
        padding: 3rem 2rem;
    }
}

@media (min-width: 1280px) {
    .hero-home__container {
        max-width: 1000px;
        padding: 4rem 2rem;
    }
}

/* Content */
.hero-home__content {
    text-align: center;
}

/* Headline */
.hero-home__headline {
    font-family: var(--bs-font-heading);
    color: var(--bs-text-white);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1.5rem 0;
}

/* Subheadline */
.hero-home__subheadline {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.125rem;
    line-height: 1.7;
    margin: 0 auto 2rem;
    max-width: 600px;
}

/* Hero CTA Buttons */
.hero-home__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.hero-home__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--bs-radius-sm);
    transition: all 0.3s ease;
}

.hero-home__cta svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Phone Button - Ghost/Outline Style */
.hero-home__cta--phone {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.hero-home__cta--phone:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* Primary CTA - Solid Blue */
.hero-home__cta--primary {
    background: var(--bs-primary-blue);
    color: #fff;
    border: 2px solid transparent;
    box-shadow: 0 4px 14px var(--bs-primary-blue-glow);
}

.hero-home__cta--primary:hover {
    background: var(--bs-primary-blue-bright);
    box-shadow: 0 6px 20px var(--bs-primary-blue-glow);
    transform: translateY(-2px);
    color: #fff;
}

/* Mobile: Stack buttons */
@media (max-width: 480px) {
    .hero-home__ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-home__cta {
        justify-content: center;
    }
}

/* Trust Badges - Inline Centered */
.hero-home__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .hero-home__badges {
        gap: 1rem;
    }
}

/* Individual Badge */
.hero-home__badge {
    position: relative;
    background: rgba(5, 15, 30, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--bs-radius-sm);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    animation: badgeFadeIn 0.5s ease-out both;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.hero-home__badge:hover {
    border-color: rgba(17, 141, 240, 0.4);
    background: rgba(10, 25, 45, 0.8);
}

.hero-home__badge-icon {
    width: 28px;
    height: 28px;
    color: var(--bs-primary-blue);
    flex-shrink: 0;
}

.hero-home__badge-icon svg {
    width: 100%;
    height: 100%;
}

.hero-home__badge-text {
    min-width: 0;
}

.hero-home__badge-title {
    color: var(--bs-text-white);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.125rem;
}

.hero-home__badge-subtitle {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
}


/* ===========================================
   GENERIC HERO UTILITY CLASSES (bs- prefix)
   =========================================== */

.bs-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bs-hero-compact {
  min-height: auto;
  padding: var(--bs-space-3xl) 0;
}

/* ----- HERO BACKGROUND ----- */
.bs-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.bs-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bs-overlay);
}

/* ----- HERO CONTENT ----- */
.bs-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  padding: var(--bs-space-lg);
}

/* ----- HERO LABEL ----- */
.bs-hero-label {
  display: inline-flex;
  align-items: center;
  gap: var(--bs-space-xs);
  background: var(--bs-glass-bg);
  border: 1px solid var(--bs-glass-border);
  padding: 0.5rem 1rem;
  border-radius: var(--bs-radius-full);
  margin-bottom: var(--bs-space-md);
  font-size: var(--bs-text-xs);
  font-weight: var(--bs-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-text-light);
}

.bs-hero-label::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--bs-primary-blue);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--bs-primary-blue);
}

/* ----- HERO TITLE ----- */
.bs-hero-title {
  font-family: var(--bs-font-heading);
  font-size: var(--bs-h1-size);
  font-weight: var(--bs-weight-bold);
  color: var(--bs-text-white);
  line-height: 1.1;
  margin-bottom: var(--bs-space-md);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* ----- HERO SUBTITLE ----- */
.bs-hero-subtitle {
  font-size: var(--bs-text-lg);
  font-weight: var(--bs-weight-medium);
  color: var(--bs-primary-blue);
  margin-bottom: var(--bs-space-lg);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

/* ----- HERO BADGES ----- */
.bs-hero-badges {
  display: flex;
  flex-direction: column;
  gap: var(--bs-space-sm);
  margin-bottom: var(--bs-space-lg);
}

@media (min-width: 768px) {
  .bs-hero-badges {
    flex-direction: row;
    justify-content: center;
    gap: var(--bs-space-md);
  }
}

/* ===========================================
   HIDE/SHOW UTILITIES
   =========================================== */

.bs-hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .bs-hide-mobile {
    display: block;
  }
}

.bs-show-mobile {
  display: block;
}

@media (min-width: 768px) {
  .bs-show-mobile {
    display: none;
  }
}

/* ===========================================
   SECTION HEADER STYLES (Blue Smoke)
   =========================================== */

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h2 {
  font-family: var(--bs-font-heading);
  font-weight: 700;
  font-size: 2.5rem;
  color: var(--bs-text-white);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.section-header .section-subtitle {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Section Label - Global Style (JOB-102)
   Consistent label above section headings */
.section-label {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: rgba(17, 141, 240, 0.25);
  border: 1px solid rgba(17, 141, 240, 0.5);
  border-radius: var(--bs-radius-xs);
  color: var(--bs-primary-blue-bright, #3BA3F5);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}

/* ===========================================
   SERVICES SECTION (Blue Smoke)
   =========================================== */

.services-section {
  background: var(--bs-bg-section);
  padding: 5rem 0;
}

/* ----- SERVICE CARDS (Blue Smoke Design) ----- */
/* Reference: kfx-blue-smoke-cards.jsx - ServiceCardsSection */

/* Services Grid - 3 column, 2rem gap */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

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

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

/* Service Card */
.card-service {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  /* NO border-radius - square corners */
}

.card-service:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(17, 141, 240, 0.3);
  transform: translateY(-4px);
}

/* Service Card Image Area (200px) */
.card-service-image {
  height: 200px;
  background: linear-gradient(135deg, rgba(17, 141, 240, 0.2) 0%, rgba(10, 22, 40, 0.8) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.card-service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder styling */
.card-service-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-service-placeholder svg {
  width: 64px;
  height: 64px;
  color: rgba(17, 141, 240, 0.5);
}

.image-placeholder-label {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Service Card Content */
.card-service-content {
  padding: 1.5rem;
}

.card-service-content h3 {
  font-family: var(--bs-font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--bs-text-white);
  margin-bottom: 0.75rem;
}

.card-service-content p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

/* Full Card Link */
.card-service-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.card-service-link:hover {
  color: inherit;
}

/* Image zoom on hover */
.card-service-image img {
  transition: transform 0.4s ease;
}

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

/* Legacy support for old .card.service-card structure */
.card.service-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2rem 1.5rem;
  transition: all 0.3s ease;
}

.card.service-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(17, 141, 240, 0.3);
  transform: translateY(-4px);
}

/* ===========================================
   WHY US SECTION (Blue Smoke)
   =========================================== */

.why-us-section {
  background: var(--bs-bg-dark);
  padding: 5rem 0;
}

.why-us-section.bg-light {
  background: var(--bs-bg-dark);
}

/* Why Us Items */
.why-us-item {
  padding: 1.5rem;
}

.why-us-item .why-us-icon {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, rgba(17, 141, 240, 0.15) 0%, rgba(17, 141, 240, 0.05) 100%);
  border: 1px solid rgba(17, 141, 240, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  /* NO border-radius */
}

.why-us-item .why-us-icon svg {
  color: var(--bs-primary-blue);
}

.why-us-item h4 {
  font-family: var(--bs-font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--bs-text-white);
  margin-bottom: 0.75rem;
}

.why-us-item p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin: 0;
}

/* Certifications Bar */
.certifications-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cert-badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  padding: 0.6rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  /* NO border-radius */
}

/* Why Card (2-column layout) */
.why-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2rem;
  display: flex;
  gap: 1.5rem;
  transition: all 0.3s ease;
  /* NO border-radius */
}

.why-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(17, 141, 240, 0.3);
}

.why-card-icon {
  width: 64px;
  height: 64px;
  min-width: 64px;
  background: linear-gradient(135deg, rgba(17, 141, 240, 0.2) 0%, rgba(17, 141, 240, 0.1) 100%);
  border: 1px solid rgba(17, 141, 240, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  /* NO border-radius */
}

.why-card-icon svg {
  color: var(--bs-primary-blue);
}

.why-card-content h3 {
  font-family: var(--bs-font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--bs-text-white);
  margin-bottom: 0.5rem;
}

.why-card-content p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.why-highlight {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bs-primary-blue);
}

/* Trust Badges Row */
.trust-badges-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.trust-badge svg {
  color: var(--bs-primary-blue);
}

@media (max-width: 768px) {
  .why-card {
    flex-direction: column;
    text-align: center;
  }

  .why-card-icon {
    margin: 0 auto;
  }

  .trust-badges-row {
    display: none; /* Hide on mobile - redundant with other trust signals */
  }
}

/* ===========================================
   REVIEWS SECTION (Blue Smoke Design)
   Reference: kfx-blue-smoke-cards.jsx - ReviewCardsSection
   =========================================== */

.reviews-section {
  background: var(--bs-bg-section);
  padding: 5rem 0;
}

/* Reviews Grid - 3 column, 2rem gap */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

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

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

/* Review Card - Equal height with flexbox */
.card-review {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2rem;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  /* NO border-radius */
}

.card-review:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(17, 141, 240, 0.3);
}

/* Quote Icon */
.card-review-quote {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 40px;
  height: 40px;
  color: var(--bs-primary-blue);
  opacity: 0.3;
}

.card-review-quote svg {
  width: 100%;
  height: 100%;
}

/* Review Stars - matches city testimonial style */
.card-review-stars {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  color: #fbbf24;
}

.card-review-stars svg {
  filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.3));
}

/* Review Body - Contains text and toggle */
.card-review-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 2rem;
}

/* Long review with overflow - collapsed state */
.card-review-body.has-overflow {
  position: relative;
}

.card-review-body.has-overflow .card-review-text {
  max-height: 225px;
  overflow: hidden;
  position: relative;
}

/* Fade gradient for truncated text */
.card-review-body.has-overflow:not(.is-expanded) .card-review-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(transparent, rgba(10, 22, 40, 0.95));
  pointer-events: none;
}

/* Expanded state */
.card-review-body.has-overflow.is-expanded .card-review-text {
  max-height: none;
}

.card-review-body.has-overflow.is-expanded .card-review-text::after {
  display: none;
}

/* Read More Toggle Button */
.card-review-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: var(--bs-primary-blue);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  transition: color 0.2s ease;
}

.card-review-toggle:hover {
  color: var(--bs-primary-blue-light, #3aa4f7);
}

.card-review-toggle svg {
  transition: transform 0.2s ease;
}

/* Review Text - matches city testimonial style */
.card-review-text {
  font-size: 0.9375rem;
  color: var(--bs-text-muted);
  line-height: 1.7;
  font-style: normal;
  margin: 0;
}

/* Review Footer (Author + Location + Source) - matches city testimonial style */
.card-review-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.card-review-author-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.card-review-author {
  font-family: var(--bs-font-heading);
  font-weight: var(--bs-weight-semibold);
  font-size: 1rem;
  color: var(--bs-text-white);
}

.card-review-location {
  font-size: 0.875rem;
  color: var(--bs-text-muted);
}

.card-review-source {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.card-review-source svg {
  display: block;
  flex-shrink: 0;
}

.card-review-source-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.card-review:hover .card-review-source {
  opacity: 1;
}

/* Legacy support for old .card.review-card structure */
.card.review-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2rem;
  position: relative;
  transition: all 0.3s ease;
}

.card.review-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(17, 141, 240, 0.3);
}

.review-card .review-stars {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  color: #ffa500;
}

.review-card .review-text {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 1.5rem;
}

.review-card .review-author {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.review-card .author-name {
  font-weight: 600;
  color: var(--bs-text-white);
  font-size: 0.95rem;
}

.review-card .author-source {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}

/* ===========================================
   AFFILIATIONS SECTION (Blue Smoke)
   Chamber memberships, certifications, badges
   JOB-059: Updated with white logo containers
   =========================================== */

.affiliations-section {
  padding: 4rem 0;
}

.affiliations-section.bg-light {
  background: var(--bs-bg-section);
}

.affiliations-section.bg-dark {
  background: var(--bs-bg-dark);
}

/* Featured Affiliations - Horizontal Card with Description */
.affiliations-featured {
  margin-bottom: 2rem;
}

.affiliation-card--featured {
  background: linear-gradient(135deg, rgba(17, 141, 240, 0.08) 0%, rgba(17, 141, 240, 0.03) 100%);
  border: 1px solid rgba(17, 141, 240, 0.4);
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.3s ease;
}

.affiliation-card--featured:hover {
  border-color: rgba(17, 141, 240, 0.7);
  box-shadow: 0 8px 32px rgba(17, 141, 240, 0.2);
}

.affiliation-card--featured .affiliation-link {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Featured Logo Container - Larger */
.affiliation-logo-container--featured {
  width: 120px;
  height: 120px;
  background: #ffffff;
  border-radius: var(--bs-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  flex-shrink: 0;
}

.affiliation-card--featured .affiliation-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Featured Content */
.affiliation-card--featured .affiliation-content {
  flex: 1;
}

.affiliation-card--featured .affiliation-name {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: #fff;
  margin-bottom: 0.5rem;
  display: block;
}

.affiliation-card--featured .affiliation-description {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin: 0;
}

/* Regular Affiliations Grid - Configurable columns */
.affiliations-grid {
  display: grid;
  gap: 1rem;
}

.affiliations-grid--3-col {
  grid-template-columns: repeat(3, 1fr);
}

.affiliations-grid--4-col {
  grid-template-columns: repeat(4, 1fr);
}

.affiliations-grid--5-col {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1024px) {
  .affiliations-grid--4-col,
  .affiliations-grid--5-col {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .affiliations-grid--3-col,
  .affiliations-grid--4-col,
  .affiliations-grid--5-col {
    grid-template-columns: repeat(2, 1fr);
  }

  .affiliation-card--featured {
    flex-direction: column;
    text-align: center;
  }

  .affiliation-card--featured .affiliation-link {
    flex-direction: column;
  }

  .affiliation-logo-container--featured {
    width: 100px;
    height: 100px;
  }
}

/* Standard Affiliation Card */
.affiliation-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
}

.affiliation-card:hover {
  border-color: rgba(17, 141, 240, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(17, 141, 240, 0.15);
}

.affiliation-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Standard Logo Container - White background */
.affiliation-logo-container {
  width: 100%;
  height: 70px;
  background: #ffffff;
  border-radius: var(--bs-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}

.affiliation-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.affiliation-name {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  text-align: center;
}

/* Light background variant */
.affiliations-section.bg-light .affiliation-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.affiliations-section.bg-light .affiliation-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(17, 141, 240, 0.5);
}

.affiliations-section.bg-light .affiliation-card--featured {
  background: linear-gradient(135deg, rgba(17, 141, 240, 0.06) 0%, rgba(17, 141, 240, 0.02) 100%);
}

/* ===========================================
   AFFILIATIONS COMPACT STRIP (Auto-Scrolling Marquee)
   Streamlined certification display with continuous scroll
   =========================================== */

.affiliations-compact {
    padding: 40px 0 32px;
    overflow: hidden;
}

/* Header - Centered */
.affiliations-compact-header {
    text-align: center;
    margin-bottom: 24px;
}

.affiliations-compact-label {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}

.affiliations-compact-subtext {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    margin: 0;
}

/* Scroll Wrapper - Full Width with Fade Edges */
.affiliations-scroll-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* Scrolling Track */
.affiliations-scroll-track {
    display: flex;
    align-items: center;
    gap: 24px;
    width: max-content;
    animation: affiliations-scroll 30s linear infinite;
}

.affiliations-scroll-track:hover {
    animation-play-state: paused;
}

@keyframes affiliations-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Logo Pills - Larger */
.affiliations-compact-pill {
    background: #ffffff;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    min-width: 120px;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
}

.affiliations-compact-pill:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.affiliations-compact-pill img {
    max-height: 36px;
    max-width: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.affiliations-compact-pill .affiliations-compact-text {
    color: #0a1628;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Link - Centered Below */
.affiliations-compact-more-wrap {
    text-align: center;
    margin: 28px 0 0;
}

/* Responsive */
@media (max-width: 768px) {
    .affiliations-compact {
        padding: 32px 0 24px;
    }

    .affiliations-scroll-track {
        gap: 16px;
        animation-duration: 20s;
    }

    .affiliations-compact-pill {
        padding: 10px 16px;
        min-height: 48px;
        min-width: 100px;
    }

    .affiliations-compact-pill img {
        max-height: 28px;
        max-width: 100px;
    }
}

/* ===========================================
   LOCAL AFFILIATIONS (City Pages)
   Subtle badge strip for city-specific affiliations
   =========================================== */

.local-affiliations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: rgba(17, 141, 240, 0.08);
  border: 1px solid rgba(17, 141, 240, 0.2);
  border-radius: var(--bs-radius-md);
  margin-bottom: 1.5rem;
}

.local-affiliations-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--bs-text-sm);
  font-weight: var(--bs-weight-medium);
  color: var(--bs-text-light);
  white-space: nowrap;
}

.local-affiliations-icon {
  color: var(--bs-primary-blue);
  flex-shrink: 0;
}

.local-affiliations-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.local-affiliation-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--bs-radius-sm);
  padding: 0.5rem 0.75rem;
  transition: var(--bs-transition-fast);
}

.local-affiliation-badge:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(17, 141, 240, 0.3);
}

.local-affiliation-badge a {
  display: flex;
  align-items: center;
}

.local-affiliation-logo {
  max-height: 28px;
  max-width: 100px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: var(--bs-transition-fast);
}

.local-affiliation-badge:hover .local-affiliation-logo {
  filter: none;
  opacity: 1;
}

.local-affiliation-name {
  font-size: var(--bs-text-xs);
  font-weight: var(--bs-weight-medium);
  color: var(--bs-text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Inline layout (default) */
.local-affiliations-inline {
  flex-direction: row;
}

/* Badges layout - centered badges */
.local-affiliations-badges {
  flex-direction: column;
  text-align: center;
}

.local-affiliations-badges .local-affiliations-label {
  justify-content: center;
  margin-bottom: 0.5rem;
}

.local-affiliations-badges .local-affiliations-list {
  justify-content: center;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .local-affiliations {
    flex-direction: column;
    text-align: center;
  }

  .local-affiliations-label {
    justify-content: center;
    margin-bottom: 0.25rem;
  }

  .local-affiliations-list {
    justify-content: center;
  }
}

/* ===========================================
   AFFILIATIONS FEATURED (Glass Bar with Featured Partner)
   Compact strip with one prominent partner + inline badges
   Based on: kfx-blue-smoke-certified-trusted-section-compact.jsx
   =========================================== */

.affiliations-featured {
    padding: 48px 0 40px;
}

.affiliations-featured-headline {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin: 0 0 24px;
    letter-spacing: -0.01em;
}

/* Glass Bar Container */
.affiliations-featured-bar {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--bs-radius-md, 8px);
    padding: 20px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* Featured Partner (Prominent) */
.affiliations-featured-primary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    background: rgba(17, 141, 240, 0.1);
    border: 1px solid rgba(17, 141, 240, 0.25);
    border-radius: var(--bs-radius-sm, 6px);
}

.affiliations-featured-logo {
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
}

.affiliations-featured-logo img {
    max-height: 36px;
    max-width: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.affiliations-featured-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.affiliations-featured-name {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.affiliations-featured-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 400;
}

/* Separator */
.affiliations-featured-separator {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

/* Additional Partner Badges (Inline) */
.affiliations-featured-badges {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.affiliations-featured-badge {
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.affiliations-featured-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.affiliations-featured-badge img {
    max-height: 28px;
    max-width: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.affiliations-featured-badge-text {
    color: #0a1628;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Link */
.affiliations-featured-link-wrap {
    text-align: center;
    margin: 24px 0 0;
}

.affiliations-featured-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.affiliations-featured-link:hover {
    color: var(--bs-primary-blue, #118df0);
}

.affiliations-featured-link svg {
    transition: transform 0.2s ease;
}

.affiliations-featured-link:hover svg {
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 768px) {
    .affiliations-featured {
        padding: 36px 0 32px;
    }

    .affiliations-featured-bar {
        padding: 16px 20px;
        gap: 16px;
        flex-direction: column;
    }

    .affiliations-featured-primary {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
    }

    .affiliations-featured-separator {
        width: 80%;
        height: 1px;
    }

    .affiliations-featured-badges {
        justify-content: center;
    }

    .affiliations-featured-badge {
        padding: 6px 12px;
        min-height: 40px;
    }

    .affiliations-featured-badge img {
        max-height: 24px;
        max-width: 80px;
    }
}

/* ===========================================
   AFFILIATIONS TIERED (Option B - Featured 4 Grid)
   4-column card grid + secondary text line
   Based on: kfx-blue-smoke-certified-trusted-section-compact.jsx
   =========================================== */

.affiliations-tiered {
    padding: 60px 0;
}

.affiliations-tiered-header {
    text-align: center;
    margin-bottom: 32px;
}

.affiliations-tiered-headline {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.affiliations-tiered-subtext {
    color: rgba(255, 255, 255, 0.5);
    font-size: 15px;
    margin: 0;
}

/* Featured Grid - 4 columns */
.affiliations-tiered-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* Individual Card */
.affiliations-tiered-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--bs-radius-sm, 6px);
    padding: 24px 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.affiliations-tiered-card:hover {
    border-color: rgba(17, 141, 240, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.affiliations-tiered-card-link {
    text-decoration: none;
    display: block;
}

/* Logo Container */
.affiliations-tiered-logo {
    background: #ffffff;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
}

.affiliations-tiered-logo img {
    max-height: 40px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Card Text */
.affiliations-tiered-name {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
    line-height: 1.3;
}

.affiliations-tiered-subtitle {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
}

/* Secondary Line (Tier 2) */
.affiliations-tiered-secondary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

.affiliations-tiered-secondary-prefix {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

.affiliations-tiered-secondary-name {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 16px;
}

.affiliations-tiered-secondary-name::before {
    content: '✓';
    color: #22c55e;
    font-weight: 700;
    font-size: 11px;
}

.affiliations-tiered-secondary-dot {
    display: none;
}

/* bg-section variant (slightly lighter navy - still dark theme) */
.affiliations-tiered.bg-section .affiliations-tiered-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.affiliations-tiered.bg-section .affiliations-tiered-card:hover {
    border-color: rgba(17, 141, 240, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.affiliations-tiered.bg-section .affiliations-tiered-secondary {
    border-top-color: rgba(255, 255, 255, 0.06);
}

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

@media (max-width: 576px) {
    .affiliations-tiered {
        padding: 40px 0;
    }

    .affiliations-tiered-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .affiliations-tiered-card {
        padding: 20px 16px;
    }

    .affiliations-tiered-logo {
        height: 48px;
        padding: 10px;
    }

    .affiliations-tiered-secondary {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }

    .affiliations-tiered-secondary-dot {
        display: none;
    }
}

/* ===========================================
   MANUFACTURERS SECTION
   Roofing material brands and certifications
   JOB-059: Updated with white logo containers
   =========================================== */

.manufacturers-section {
  padding: 4rem 0;
}

.manufacturers-section.bg-light {
  background: var(--bs-bg-section);
}

.manufacturers-section.bg-dark {
  background: var(--bs-bg-dark);
}

/* Featured Manufacturers - Horizontal Card with Certification */
.manufacturers-featured {
  margin-bottom: 2rem;
}

.manufacturer-card--featured {
  background: linear-gradient(135deg, rgba(17, 141, 240, 0.08) 0%, rgba(17, 141, 240, 0.03) 100%);
  border: 1px solid rgba(17, 141, 240, 0.4);
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.3s ease;
}

.manufacturer-card--featured:hover {
  border-color: rgba(17, 141, 240, 0.7);
  box-shadow: 0 8px 32px rgba(17, 141, 240, 0.2);
}

.manufacturer-card--featured .manufacturer-link {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Featured Logo Container - Larger */
.manufacturer-logo-container--featured {
  width: 120px;
  height: 120px;
  background: #ffffff;
  border-radius: var(--bs-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  flex-shrink: 0;
}

.manufacturer-card--featured .manufacturer-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Featured Content */
.manufacturer-card--featured .manufacturer-content {
  flex: 1;
}

.manufacturer-card--featured .manufacturer-name {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: #fff;
  margin-bottom: 0.5rem;
  display: block;
}

.manufacturer-card--featured .manufacturer-certification {
  font-size: 0.9rem;
  color: var(--bs-primary-blue);
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  background: none;
  padding: 0;
  border-radius: 0;
  text-transform: none;
  letter-spacing: normal;
}

/* Regular Manufacturers Grid - Configurable columns */
.manufacturers-grid {
  display: grid;
  gap: 1rem;
}

.manufacturers-grid--3-col {
  grid-template-columns: repeat(3, 1fr);
}

.manufacturers-grid--4-col {
  grid-template-columns: repeat(4, 1fr);
}

.manufacturers-grid--5-col {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1024px) {
  .manufacturers-grid--4-col,
  .manufacturers-grid--5-col {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .manufacturers-grid--3-col,
  .manufacturers-grid--4-col,
  .manufacturers-grid--5-col {
    grid-template-columns: repeat(2, 1fr);
  }

  .manufacturer-card--featured {
    flex-direction: column;
    text-align: center;
  }

  .manufacturer-card--featured .manufacturer-link {
    flex-direction: column;
  }

  .manufacturer-logo-container--featured {
    width: 100px;
    height: 100px;
  }
}

/* Standard Manufacturer Card */
.manufacturer-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
}

.manufacturer-card:hover {
  border-color: rgba(17, 141, 240, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(17, 141, 240, 0.15);
}

.manufacturer-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Standard Logo Container - White background */
.manufacturer-logo-container {
  width: 100%;
  height: 70px;
  background: #ffffff;
  border-radius: var(--bs-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}

.manufacturer-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.manufacturer-name {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  text-align: center;
}

/* Certification badge for non-featured cards */
.manufacturer-certification {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--bs-primary-blue);
  text-align: center;
}

/* ===========================================
   SERVICE AREAS SECTION (Blue Smoke)
   =========================================== */

.service-areas-section {
  padding: 5rem 0;
  /* JOB-141 fix: Removed hardcoded background - now uses dynamic bg-section/bg-dark classes */
}

/* Areas Grid */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

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

@media (min-width: 768px) {
  .areas-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .areas-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Area Links (Compact City Cards) */
.area-link {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
  font-family: var(--bs-font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--bs-text-white);
  border-radius: var(--bs-radius-sm);
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 480px) {
  .area-link {
    white-space: normal;
    padding: 0.875rem 1rem;
  }
}

.area-link:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(17, 141, 240, 0.4);
  color: var(--bs-primary-blue);
}

/* Area Link with Map Pin Icon (optional) */
.area-link::before {
  content: '';
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23118df0' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* HQ Badge for headquarters location */
.hq-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-primary-blue);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.4rem;
  border-radius: var(--bs-radius-xs);
  margin-left: 0.5rem;
  flex-shrink: 0;
}

.area-link--hq {
  background: rgba(17, 141, 240, 0.1);
  border-color: rgba(17, 141, 240, 0.3);
}

/* ===========================================
   CTA STRIP (Blue Smoke Design)
   Reference: kfx-blue-smoke-cta-faq.jsx
   =========================================== */

/* Full CTA Strip with Glow Orbs */
.cta-strip {
  position: relative;
  padding: 5rem 1.5rem;
  background: linear-gradient(135deg, #0a1628 0%, #050a15 50%, #0a1628 100%);
  overflow: hidden;
}

/* Glow Orbs */
.cta-glow-orb {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(17, 141, 240, 0.2) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

.cta-glow-orb--top {
  top: -50%;
  left: 10%;
}

.cta-glow-orb--bottom {
  bottom: -50%;
  right: 10%;
  background: radial-gradient(circle, rgba(17, 141, 240, 0.15) 0%, transparent 70%);
}

/* Blue Accent Lines */
.cta-blue-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--bs-primary-blue) 50%, transparent 100%);
}

.cta-blue-line--top {
  top: 0;
}

.cta-blue-line--bottom {
  bottom: 0;
}

/* CTA Content */
.cta-strip .cta-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

/* Label Badge */
.cta-label {
  display: inline-block;
  background: rgba(17, 141, 240, 0.2);
  border: 1px solid rgba(17, 141, 240, 0.4);
  border-radius: var(--bs-radius-xs);
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bs-primary-blue);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}

/* Headline */
.cta-strip h2 {
  font-family: var(--bs-font-heading);
  font-weight: 700;
  font-size: 2.75rem;
  color: var(--bs-text-white);
  margin-bottom: 1rem;
  line-height: 1.2;
}

/* Subtext */
.cta-strip .cta-subtext {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 auto 2.5rem;
  max-width: 600px;
  line-height: 1.7;
}

/* Buttons Container */
.cta-strip .cta-buttons,
.cta-strip-compact .cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

/* Primary CTA Button (Blue Gradient) */
.btn-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--bs-primary-blue) 0%, var(--bs-primary-blue-dark) 100%);
  padding: 1rem 2rem;
  color: var(--bs-text-white);
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(17, 141, 240, 0.5);
  transition: all 0.3s ease;
  border-radius: var(--bs-radius-sm);
}

.btn-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(17, 141, 240, 0.6);
  color: var(--bs-text-white);
}

.btn-cta-primary.btn-cta-lg {
  padding: 1.25rem 3rem;
  font-size: 1.15rem;
  box-shadow: 0 4px 30px rgba(17, 141, 240, 0.4);
}

/* Secondary CTA Button (Glass Morphism) */
.btn-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 1rem 2rem;
  color: var(--bs-text-white);
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: var(--bs-radius-sm);
}

.btn-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--bs-text-white);
}

/* Outline CTA Button (Blue Border) */
.btn-cta-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 2px solid var(--bs-primary-blue);
  padding: 1rem 1.75rem;
  color: var(--bs-primary-blue);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s ease;
  border-radius: var(--bs-radius-sm);
}

.btn-cta-outline:hover {
  background: rgba(17, 141, 240, 0.1);
  color: var(--bs-primary-blue);
}

/* CTA Note */
.cta-strip .cta-note {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1.5rem 0;
}

/* Trust Badges */
.cta-badges {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.cta-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.cta-badge svg {
  color: var(--bs-primary-blue);
}

/* Compact CTA Strip */
.cta-strip-compact {
  background: #0a1628;
  padding: 4rem 1.5rem;
  border-top: 1px solid rgba(17, 141, 240, 0.3);
  border-bottom: 1px solid rgba(17, 141, 240, 0.3);
}

.cta-compact-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3rem;
}

.cta-compact-content h2 {
  font-family: var(--bs-font-heading);
  font-weight: 700;
  font-size: 2rem;
  color: var(--bs-text-white);
  margin-bottom: 0.5rem;
}

.cta-compact-content p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.cta-strip-compact .cta-buttons {
  margin-bottom: 0;
}

/* Minimal CTA Strip */
.cta-strip-minimal {
  position: relative;
  padding: 6rem 1.5rem;
  background: linear-gradient(135deg, rgba(17, 141, 240, 0.15) 0%, #050a15 50%, rgba(17, 141, 240, 0.1) 100%);
}

.cta-strip-minimal .cta-content {
  max-width: 700px;
  margin: 0 auto;
}

.cta-strip-minimal h2 {
  font-family: var(--bs-font-heading);
  font-weight: 700;
  font-size: 3rem;
  color: var(--bs-text-white);
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.cta-strip-minimal .cta-subtext {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

/* CTA Strip Responsive */
@media (max-width: 768px) {
  .cta-strip {
    padding: 3rem 1rem;
  }

  .cta-strip h2 {
    font-size: 1.75rem;
  }

  .cta-strip .cta-subtext {
    font-size: 1rem;
  }

  .cta-strip .cta-buttons,
  .cta-strip-compact .cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .btn-cta-primary,
  .btn-cta-secondary,
  .btn-cta-outline {
    width: 100%;
    justify-content: center;
  }

  .cta-badges {
    flex-direction: column;
    gap: 0.75rem;
  }

  .cta-glow-orb {
    display: none;
  }

  .cta-compact-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.5rem;
  }

  .cta-strip-compact .cta-buttons {
    justify-content: center;
  }

  .cta-strip-minimal h2 {
    font-size: 2rem;
  }

  .cta-strip-minimal .cta-subtext {
    font-size: 1rem;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .cta-strip {
    padding: 4rem 1.5rem;
  }

  .cta-strip h2 {
    font-size: 2.25rem;
  }

  .cta-strip .cta-subtext {
    font-size: 1.1rem;
  }
}

/* Legacy support for old .cta-section class */
.cta-section {
  position: relative;
  padding: 5rem 0;
  overflow: hidden;
}

.cta-section .cta-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}

.cta-section h2 {
  font-family: var(--bs-font-heading);
  font-weight: 700;
  font-size: 2.5rem;
  color: var(--bs-text-white);
  margin-bottom: 1rem;
}

.cta-section p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2rem;
  line-height: 1.7;
}

.cta-section .cta-note {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* ===========================================
   PROCESS SECTION (Blue Smoke)
   =========================================== */

.process-section {
  background: var(--bs-bg-dark);
  padding: 5rem 0;
}

/* ===========================================
   PROCESS CARDS (Blue Smoke)
   For use with process/steps sections
   =========================================== */

.card-process {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  /* NO border-radius */
}

.card-process:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(17, 141, 240, 0.3);
}

.card-process-number {
  font-family: var(--bs-font-heading);
  font-weight: 700;
  font-size: 3rem;
  color: var(--bs-primary-blue);
  opacity: 1;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.card-process h3 {
  font-family: var(--bs-font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--bs-text-white);
  margin-bottom: 0.75rem;
}

.card-process p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin: 0;
}

/* Process Grid - 4 column layout */
.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .process-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Process Connector Line */
.process-connector {
  display: none;
}

@media (min-width: 1024px) {
  .process-connector {
    display: block;
    position: absolute;
    top: 3.5rem;
    right: -0.75rem;
    width: 1.5rem;
    height: 2px;
    background: var(--bs-primary-blue);
    z-index: 1;
  }
}

/* ===========================================
   FEATURED PROJECTS (Blue Smoke)
   Design Reference: kfx-blue-smoke-project-gallery.jsx
   =========================================== */

.projects-section {
  background: var(--bs-bg-dark);
}

.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Project Card */
.project-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.project-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(17, 141, 240, 0.3);
  transform: translateY(-4px);
}

/* Project Card Image */
.project-card-image {
  height: 220px;
  background: linear-gradient(135deg, rgba(17, 141, 240, 0.15) 0%, rgba(10, 22, 40, 0.9) 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.project-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-placeholder {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.8rem;
}

/* Project Badges */
.project-badge {
  position: absolute;
  padding: 0.35rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.project-badge--featured {
  top: 1rem;
  left: 1rem;
  background: var(--bs-primary-blue);
  color: #fff;
}

.project-badge--type {
  top: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-weight: 600;
  text-transform: capitalize;
}

/* Expand Button */
.project-expand {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.project-expand:hover {
  background: var(--bs-primary-blue);
}

/* Project Card Content */
.project-card-content {
  padding: 1.5rem;
}

/* Project Meta */
.project-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.project-meta-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.project-meta-item svg {
  color: var(--bs-primary-blue);
}

/* Project Title */
.project-title {
  font-family: var(--bs-font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--bs-text-white);
  margin-bottom: 0.75rem;
}

/* Project Description */
.project-description {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Project Tags */
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.project-tag {
  background: rgba(17, 141, 240, 0.15);
  border: 1px solid rgba(17, 141, 240, 0.3);
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  color: var(--bs-primary-blue);
}

/* Project Stats */
.project-stats {
  display: flex;
  gap: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

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

.project-stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bs-text-white);
}

.project-stat-value--highlight {
  color: var(--bs-primary-blue);
}

.project-stat-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

/* Outline Button */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: transparent;
  border: 2px solid var(--bs-primary-blue);
  color: var(--bs-primary-blue);
  font-family: var(--bs-font-heading);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: var(--bs-primary-blue);
  color: var(--bs-text-white);
}

.btn-outline svg {
  transition: transform 0.2s ease;
}

.btn-outline:hover svg {
  transform: translateX(4px);
}

/* ===========================================
   CITY CARDS DETAILED (Blue Smoke)
   For detailed service area cards
   =========================================== */

.card-city {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  /* NO border-radius */
}

.card-city:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(17, 141, 240, 0.3);
}

.card-city-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(17, 141, 240, 0.2) 0%, rgba(17, 141, 240, 0.1) 100%);
  border: 1px solid rgba(17, 141, 240, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* NO border-radius */
}

.card-city-icon svg {
  width: 24px;
  height: 24px;
  color: var(--bs-primary-blue);
}

.card-city h3 {
  font-family: var(--bs-font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--bs-text-white);
  margin-bottom: 0.25rem;
}

.card-city p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* ===========================================
   GRID UTILITIES (Blue Smoke)
   =========================================== */

.grid {
  display: grid;
  gap: 1.5rem;
}

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

.grid-cols-3 {
  grid-template-columns: repeat(1, 1fr);
}

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

@media (min-width: 768px) {
  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gap-sm { gap: 0.75rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }
.gap-xl { gap: 2rem; }

/* ===========================================
   SPACING & LAYOUT UTILITIES
   =========================================== */

.section-padding {
  padding: 5rem 0;
}

.mb-xl { margin-bottom: 3rem; }
.mb-lg { margin-bottom: 2rem; }
.mb-md { margin-bottom: 1.5rem; }
.mt-xl { margin-top: 3rem; }
.mt-lg { margin-top: 2rem; }
.mt-md { margin-top: 1.5rem; }

.text-center { text-align: center; }

/* Background Utilities */
.bg-dark { background-color: var(--bs-bg-dark); }
.bg-section { background-color: var(--bs-bg-section); }

/* JOB-141: Allow explicit bg classes to override section defaults */
.bg-dark.services-section,
.bg-dark.process-section,
.bg-dark.reviews-section,
.bg-dark.projects-section,
.bg-dark.why-us-section,
.bg-dark.warranty-section,
.bg-dark.service-areas-section { background: var(--bs-bg-dark) !important; }

.bg-section.services-section,
.bg-section.process-section,
.bg-section.reviews-section,
.bg-section.projects-section,
.bg-section.why-us-section,
.bg-section.warranty-section,
.bg-section.service-areas-section { background: var(--bs-bg-section) !important; }

/* ===========================================
   HOMEPAGE SECTION BACKGROUNDS
   JOB-141: Removed hardcoded !important rules
   Now using dynamic alternation via kfx_get_next_bg()
   Background classes (bg-section, bg-dark) are passed to templates
   =========================================== */

/* ===========================================
   ABOUT PREVIEW SECTION STYLES
   Two-column layout with image and content
   =========================================== */

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

/* Image Column */
.about-preview-image {
  position: relative;
}

.about-preview-image-wrapper {
  position: relative;
  display: inline-block;
}

.about-preview-image-wrapper img {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: cover;
  border: 2px solid rgba(17, 141, 240, 0.3);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(17, 141, 240, 0.1);
}

/* Decorative accent behind image */
.about-preview-accent {
  position: absolute;
  top: 20px;
  left: 20px;
  right: -20px;
  bottom: -20px;
  border: 2px solid rgba(17, 141, 240, 0.2);
  z-index: -1;
}

/* Content Column */
.about-preview-content {
  max-width: 540px;
}

.about-preview-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--bs-primary-blue);
  margin-bottom: 1rem;
}

.about-preview-content h2 {
  font-family: var(--bs-font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--bs-text-white);
  margin: 0 0 1.5rem 0;
  line-height: 1.2;
}

.about-preview-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 2rem 0;
}

.about-preview-content .btn-secondary {
  margin-top: 0.5rem;
}

/* Placeholder styling */
.about-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 4/3;
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.3);
  gap: 1rem;
}

.about-preview-placeholder svg {
  opacity: 0.5;
}

.about-preview-placeholder span {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* Mobile Responsive */
@media (max-width: 968px) {
  .about-preview-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }

  .about-preview-image {
    order: -1;
  }

  .about-preview-image-wrapper {
    margin: 0 auto;
  }

  .about-preview-image-wrapper img {
    max-width: 400px;
  }

  .about-preview-accent {
    top: 15px;
    left: 15px;
    right: -15px;
    bottom: -15px;
  }

  .about-preview-content {
    max-width: 100%;
  }

  .about-preview-content h2 {
    font-size: 1.875rem;
  }

  .about-preview-content .btn-secondary {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  /* Hide image on mobile, keep content only */
  .about-preview-image {
    display: none;
  }

  .about-preview-grid {
    gap: 0;
  }

  .about-preview-content h2 {
    font-size: 1.5rem;
  }

  .about-preview-content p {
    font-size: 0.95rem;
  }
}

/* JOB-141: Service Areas, Blog Preview, Service Hub section backgrounds
   Now controlled via dynamic kfx_get_next_bg() alternation
   Background classes (bg-section, bg-dark) are passed to templates */

/* Base Card (Glass Morphism) */
.card {
  background: var(--bs-glass-bg);
  backdrop-filter: blur(var(--bs-glass-blur-light));
  -webkit-backdrop-filter: blur(var(--bs-glass-blur-light));
  border: 1px solid var(--bs-glass-border);
  border-radius: var(--bs-radius-lg, 14px);
  padding: var(--bs-space-md, 1.5rem);
  transition: all var(--bs-transition-base, 0.3s ease);
}

.card:hover {
  background: var(--bs-glass-bg-hover);
  border-color: var(--bs-glass-border-blue);
  box-shadow: var(--bs-shadow-glow);
}

/* Container */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Button Group */
.btn-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .btn-group {
    flex-direction: row;
    justify-content: center;
  }
}

/* Button Block */
.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

/* ===========================================
   FORM STYLES (Blue Smoke)
   =========================================== */

/* ----- FORM CONTAINER ----- */
.bs-form,
.wpcf7-form,
.contact-form {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2rem;
  /* NO border-radius */
}

/* ----- FORM LABELS ----- */
.bs-form label,
.wpcf7-form label,
.contact-form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bs-text-white);
  margin-bottom: 0.5rem;
}

/* ----- FORM INPUTS ----- */
.bs-form input[type="text"],
.bs-form input[type="email"],
.bs-form input[type="tel"],
.bs-form input[type="url"],
.bs-form input[type="password"],
.bs-form input[type="number"],
.bs-form input[type="date"],
.bs-form select,
.bs-form textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--bs-text-white);
  font-family: var(--bs-font-body);
  font-size: 1rem;
  transition: all 0.2s ease;
  /* NO border-radius */
}

.bs-form input:focus,
.bs-form select:focus,
.bs-form textarea:focus,
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus,
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--bs-primary-blue);
  background: rgba(17, 141, 240, 0.1);
  box-shadow: 0 0 0 3px rgba(17, 141, 240, 0.2);
}

.bs-form input::placeholder,
.bs-form textarea::placeholder,
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* ----- TEXTAREA ----- */
.bs-form textarea,
.wpcf7-form textarea,
.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

/* ----- SELECT DROPDOWN ----- */
.bs-form select,
.wpcf7-form select,
.contact-form select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23118df0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* ----- FORM GROUP ----- */
.form-group,
.wpcf7-form-control-wrap {
  margin-bottom: 1.25rem;
}

/* ----- FORM ROW (Two columns) ----- */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ----- SUBMIT BUTTON ----- */
.bs-form button[type="submit"],
.bs-form input[type="submit"],
.wpcf7-form input[type="submit"],
.wpcf7-submit,
.contact-form button[type="submit"],
.contact-form input[type="submit"] {
  background: linear-gradient(135deg, var(--bs-primary-blue) 0%, var(--bs-primary-blue-dark) 100%);
  border: none;
  color: var(--bs-text-white);
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  /* NO border-radius */
}

.bs-form button[type="submit"]:hover,
.bs-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:hover,
.wpcf7-submit:hover,
.contact-form button[type="submit"]:hover,
.contact-form input[type="submit"]:hover {
  box-shadow: 0 4px 20px rgba(17, 141, 240, 0.4);
  transform: translateY(-2px);
}

/* ----- FORM VALIDATION ----- */
.wpcf7-not-valid {
  border-color: #ef4444 !important;
}

.wpcf7-not-valid-tip {
  color: #ef4444;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.wpcf7-response-output {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(17, 141, 240, 0.1);
  border: 1px solid rgba(17, 141, 240, 0.3);
  color: var(--bs-text-white);
  font-size: 0.95rem;
}

.wpcf7-mail-sent-ok {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

/* ----- CHECKBOX & RADIO ----- */
.bs-form input[type="checkbox"],
.bs-form input[type="radio"],
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  margin-right: 0.5rem;
  appearance: none;
  position: relative;
}

.bs-form input[type="checkbox"]:checked,
.wpcf7-form input[type="checkbox"]:checked {
  background: var(--bs-primary-blue);
  border-color: var(--bs-primary-blue);
}

.bs-form input[type="checkbox"]:checked::after,
.wpcf7-form input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ===========================================
   GENERAL PAGE CONTENT STYLES
   =========================================== */

/* ----- PAGE CONTENT AREA ----- */
.page-content,
.entry-content,
.site-main {
  background: var(--bs-bg-section);
}

/* ----- PROSE / ARTICLE TEXT ----- */
.entry-content h2,
.page-content h2 {
  font-family: var(--bs-font-heading);
  font-weight: 700;
  font-size: 2rem;
  color: var(--bs-text-white);
  margin: 2rem 0 1rem;
}

.entry-content h3,
.page-content h3 {
  font-family: var(--bs-font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--bs-text-white);
  margin: 1.75rem 0 0.75rem;
}

.entry-content h4,
.page-content h4 {
  font-family: var(--bs-font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--bs-text-white);
  margin: 1.5rem 0 0.75rem;
}

.entry-content p,
.page-content p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.entry-content ul,
.entry-content ol,
.page-content ul,
.page-content ol {
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 1.5rem 1.5rem;
  line-height: 1.7;
}

.entry-content li,
.page-content li {
  margin-bottom: 0.5rem;
}

.entry-content a,
.page-content a {
  color: var(--bs-primary-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

.entry-content a:hover,
.page-content a:hover {
  color: var(--bs-text-white);
  text-decoration: underline;
}

/* ----- BLOCKQUOTE ----- */
.entry-content blockquote,
.page-content blockquote {
  background: rgba(17, 141, 240, 0.1);
  border-left: 4px solid var(--bs-primary-blue);
  padding: 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
}

/* ----- TABLES ----- */
.entry-content table,
.page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.entry-content th,
.page-content th {
  background: rgba(17, 141, 240, 0.2);
  color: var(--bs-text-white);
  font-weight: 600;
  padding: 0.75rem 1rem;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.entry-content td,
.page-content td {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.entry-content tr:nth-child(even) td,
.page-content tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

/* ===========================================
   SECONDARY BUTTON STYLES (Generic)
   =========================================== */

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--bs-text-white);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(17, 141, 240, 0.3);
  color: var(--bs-primary-blue);
}

/* ===========================================
   LOADING SPINNER
   =========================================== */

.spinner,
.wpcf7-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(17, 141, 240, 0.2);
  border-top-color: var(--bs-primary-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===========================================
   TEAM SECTION (Blue Smoke)
   =========================================== */

.team-section {
  padding: 5rem 0;
}

.team-grid-cpt {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .team-grid-cpt {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .team-grid-cpt {
    grid-template-columns: repeat(3, 1fr);
  }
}

.team-grid-cpt .team-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.team-grid-cpt .team-card:hover {
  border-color: rgba(17, 141, 240, 0.3);
}

.team-grid-cpt .team-photo {
  height: 280px;
  background: linear-gradient(135deg, rgba(17, 141, 240, 0.15) 0%, rgba(10, 22, 40, 0.9) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.team-grid-cpt .team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.team-grid-cpt .team-photo .photo-placeholder {
  color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.team-grid-cpt .experience-badge {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: var(--bs-primary-blue);
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}

.team-grid-cpt .team-content {
  padding: 1.5rem;
}

.team-grid-cpt .team-content h3 {
  font-family: var(--bs-font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--bs-text-white);
  margin: 0 0 0.25rem;
}

.team-grid-cpt .team-title {
  font-size: 0.9rem;
  color: var(--bs-primary-blue);
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.team-grid-cpt .team-specialty {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1rem;
}

.team-grid-cpt .team-bio {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.team-grid-cpt .team-certs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.team-grid-cpt .cert-badge {
  background: rgba(17, 141, 240, 0.15);
  border: 1px solid rgba(17, 141, 240, 0.3);
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  color: var(--bs-primary-blue);
  font-weight: 600;
}

.team-grid-cpt .team-fun-fact {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.team-grid-cpt .team-fun-fact::before {
  content: '\01F4A1 ';
}

/* ===========================================
   FAQ SECTION (Global - matches service-single.php)
   =========================================== */

/* FAQ List Container */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* FAQ Item */
.faq-list .faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.faq-list .faq-item:hover {
  background: rgba(17, 141, 240, 0.05);
  border-color: rgba(17, 141, 240, 0.2);
}

.faq-list .faq-item.active {
  background: rgba(17, 141, 240, 0.08);
  border-color: rgba(17, 141, 240, 0.4);
}

/* FAQ Question Button */
.faq-list .faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  transition: color 0.3s ease;
}

.faq-list .faq-question:hover {
  color: var(--bs-primary-blue, #118df0);
}

.faq-list .faq-item.active .faq-question {
  color: var(--bs-primary-blue, #118df0);
}

/* FAQ Icon */
.faq-list .faq-icon {
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-left: 16px;
}

.faq-list .faq-item.active .faq-icon {
  color: var(--bs-primary-blue, #118df0);
  transform: rotate(180deg);
}

/* FAQ Answer - Hidden by default */
.faq-list .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-list .faq-item.active .faq-answer {
  max-height: 500px;
}

/* FAQ Answer Inner */
.faq-list .faq-answer-inner {
  padding: 0 24px 24px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}

.faq-list .faq-answer-inner p {
  margin: 0;
}

/* FAQ CTA */
.faq-cta {
  margin-top: 3rem;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.faq-cta p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
}

.faq-cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.faq-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bs-primary-blue, #118df0);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.faq-cta-link:hover {
  opacity: 0.8;
  color: var(--bs-primary-blue, #118df0);
}

.faq-cta-link svg {
  flex-shrink: 0;
}

.faq-cta-divider {
  color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
  .faq-cta-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }

  .faq-cta-divider {
    display: none;
  }
}

/* Two Column Layout */
.faq-list--two-col {
  max-width: 1280px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  .faq-list--two-col {
    grid-template-columns: 1fr;
  }

  .faq-list .faq-question {
    padding: 16px;
    font-size: 1rem;
  }

  .faq-list .faq-answer-inner {
    padding: 0 16px 16px;
    font-size: 0.95rem;
  }
}

/* ===========================================
   BREADCRUMBS (Global Component)
   =========================================== */

/* KFX Breadcrumbs - Blue Smoke Theme */
.kfx-breadcrumbs-wrapper {
    padding: 1rem 0;
    background: rgba(17, 141, 240, 0.05);
    border-bottom: 1px solid rgba(17, 141, 240, 0.1);
}

.kfx-breadcrumbs__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}

.kfx-breadcrumbs__item {
    display: flex;
    align-items: center;
}

/* Separator via CSS ::after on non-last items */
.kfx-breadcrumbs__item:not(.kfx-breadcrumbs__item--current)::after {
    content: '\203A';
    display: inline-block;
    margin: 0 0.5rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.25rem;
    line-height: 1;
}

.kfx-breadcrumbs__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #118df0;
    text-decoration: none;
    transition: color 0.2s ease;
}

.kfx-breadcrumbs__link:hover {
    color: #4aa8f5;
    text-decoration: underline;
}

.kfx-breadcrumbs__home-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.kfx-breadcrumbs__current {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    .kfx-breadcrumbs-wrapper {
        padding: 0.75rem 0;
    }

    .kfx-breadcrumbs__list {
        font-size: 0.8rem;
    }

    .kfx-breadcrumbs__item:not(.kfx-breadcrumbs__item--current)::after {
        margin: 0 0.35rem;
        font-size: 1rem;
    }

    .kfx-breadcrumbs__home-icon {
        width: 14px;
        height: 14px;
    }
}

/* ===========================================
   HERO COMPACT (Interior Pages)
   =========================================== */

.hero-compact {
    position: relative;
    padding: 6rem 0 4rem;
    background: var(--bs-bg-dark, #050a15);
    overflow: hidden;
    min-height: 280px;
    display: flex;
    align-items: center;
}

/* Background Image (via CSS variable, same pattern as hero-blue-smoke) */
.hero-compact::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    z-index: 0;
}

/* Ken Burns animation variant */
.hero-compact--ken-burns::before {
    inset: -5%;
    width: 110%;
    height: 110%;
    animation: kenBurns 25s ease-in-out infinite;
}

/* Overlay */
.hero-compact__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(5, 10, 21, 0.7) 0%,
        rgba(5, 10, 21, 0.9) 100%
    );
    z-index: 1;
}

/* Content */
.hero-compact .container {
    position: relative;
    z-index: 10;
    text-align: center;
}

.hero-compact__content {
    max-width: 800px;
    margin: 0 auto;
}

/* Breadcrumb */
.hero-compact__breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.hero-compact__breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.hero-compact__breadcrumb a:hover {
    color: var(--bs-primary-blue, #118df0);
}

.hero-compact__breadcrumb svg {
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.hero-compact__breadcrumb span {
    color: var(--bs-primary-blue, #118df0);
    font-weight: 500;
}

/* Title */
.hero-compact__title {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.2;
    color: var(--bs-text-white, #ffffff);
    margin: 0 0 1rem;
}

/* Subtitle */
.hero-compact__subtitle {
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    max-width: 600px;
}

/* Glow effect on title */
.hero-compact__title::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(17, 141, 240, 0.15) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
}

/* ===========================================
   HERO FULL (Homepage / Landing Pages)
   =========================================== */

.hero-full {
    position: relative;
    min-height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--bs-bg-dark, #050a15);
}

/* Background Image */
.hero-full__background {
    position: absolute;
    inset: -20px;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
}

/* Dark Smoke Overlay */
.hero-full__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(15, 23, 42, 0.6) 40%,
        rgba(0, 0, 0, 0.75) 100%
    );
    z-index: 1;
}

/* Particle Container */
.hero-full__particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* Particle Source Glow */
.hero-full__particle-source {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 200px;
    background: radial-gradient(ellipse, rgba(17, 141, 240, 0.25) 0%, rgba(17, 141, 240, 0.1) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(40px);
    z-index: 2;
    animation: particlePulse 4s ease-in-out infinite;
}

/* Content Container */
.hero-full__content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 3rem 2rem;
    max-width: 1050px;
    width: 100%;
    margin: 0 auto;
}

/* Label Pill */
.hero-full__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--bs-radius-full);
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.hero-full__label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bs-primary-blue, #118df0);
    box-shadow: 0 0 10px var(--bs-primary-blue, #118df0);
}

/* Headline */
.hero-full__headline {
    color: #ffffff;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 1.25rem;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.01em;
}

/* Subheadline - Primary Blue */
.hero-full__subheadline {
    color: var(--bs-primary-blue, #118df0);
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 500;
    margin: 0 auto 2.5rem;
    max-width: 700px;
    line-height: 1.55;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4), 0 0 30px rgba(17, 141, 240, 0.2);
}

/* Badges Grid */
.hero-full__badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2.75rem;
}

@media (max-width: 768px) {
    .hero-full__badges {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Individual Badge */
.hero-full__badge {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(17, 141, 240, 0.25);
    border-radius: var(--bs-radius-lg);
    box-shadow:
        0 0 30px rgba(17, 141, 240, 0.2),
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: badgeGlow 3s ease-in-out infinite;
}

.hero-full__badge-glow {
    position: absolute;
    inset: -10px;
    background: radial-gradient(ellipse at center, rgba(17, 141, 240, 0.15) 0%, transparent 70%);
    border-radius: var(--bs-radius-xl);
    z-index: -1;
    filter: blur(10px);
}

.hero-full__badge-icon {
    color: var(--bs-primary-blue, #118df0);
    flex-shrink: 0;
    filter: drop-shadow(0 0 10px rgba(17, 141, 240, 0.6));
}

.hero-full__badge-text {
    text-align: left;
}

.hero-full__badge-title {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.hero-full__badge-subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    margin-top: 3px;
}

/* CTA Buttons */
.hero-full__buttons {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-full__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.15rem 2.5rem;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: var(--bs-radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.01em;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-decoration: none;
}

.hero-full__btn--primary {
    background: linear-gradient(135deg, rgba(17, 141, 240, 0.87) 0%, rgba(17, 141, 240, 0.6) 100%);
    box-shadow:
        0 8px 32px rgba(17, 141, 240, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.hero-full__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 40px rgba(17, 141, 240, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.hero-full__btn--secondary {
    background: rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.hero-full__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .hero-full__btn {
        padding: 1rem 1.75rem;
        font-size: 1rem;
        width: 100%;
        justify-content: center;
    }
}

/* Hero Full Animations */
@keyframes badgeGlow {
    0%, 100% {
        box-shadow:
            0 0 30px rgba(17, 141, 240, 0.2),
            0 8px 32px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    50% {
        box-shadow:
            0 0 45px rgba(17, 141, 240, 0.35),
            0 8px 32px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
}

@keyframes particlePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.3); }
}

@keyframes floatDown {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    70% {
        opacity: 0.4;
    }
    100% {
        transform: translateY(350px) translateX(var(--drift, 0px));
        opacity: 0;
    }
}

@keyframes floatParticle {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100px) translateX(20px); opacity: 0; }
}

/* ===========================================
   SERVICE INTRO SECTION
   =========================================== */

.service-intro {
    background: var(--bs-bg-section, #0a1628);
    position: relative;
    overflow: hidden;
}

/* Subtle background texture */
.service-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(17, 141, 240, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.service-intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

@media (min-width: 1024px) {
    .service-intro-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

/* Title */
.service-intro-title {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--bs-text-white, #fff);
    margin: 0 0 1.5rem;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .service-intro-title {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .service-intro-title {
        font-size: 2.5rem;
    }
}

/* Description Text */
.service-intro-text {
    color: var(--bs-text-light, rgba(255, 255, 255, 0.9));
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.service-intro-text p {
    margin-bottom: 1rem;
}

.service-intro-text p:last-child {
    margin-bottom: 0;
}

/* Service Intro Text - Enhanced Typography */
.service-intro-text h2 {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bs-text-white, #fff);
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--bs-primary-blue, #118df0);
}

.service-intro-text h2:first-child {
    margin-top: 0;
}

.service-intro-text h3 {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-text-white, #fff);
    margin: 2rem 0 0.75rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--bs-primary-blue, #118df0);
}

.service-intro-text strong {
    color: var(--bs-text-white, #fff);
    font-weight: 600;
}

.service-intro-text ul,
.service-intro-text ol {
    padding-left: 0;
    margin: 1.25rem 0;
    list-style: none;
}

.service-intro-text li {
    margin-bottom: 0.6rem;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.7;
}

.service-intro-text ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    background: var(--bs-primary-blue, #118df0);
    border-radius: 50%;
}

.service-intro-text ol {
    counter-reset: list-counter;
}

.service-intro-text ol li {
    counter-increment: list-counter;
}

.service-intro-text ol li::before {
    content: counter(list-counter) ".";
    position: absolute;
    left: 0;
    color: var(--bs-primary-blue, #118df0);
    font-weight: 600;
}

.service-intro-text a {
    color: var(--bs-primary-blue, #118df0);
    text-decoration: underline;
    text-decoration-color: rgba(17, 141, 240, 0.4);
    text-underline-offset: 2px;
}

.service-intro-text a:hover {
    color: var(--bs-primary-blue-bright, #3da5ff);
}

/* Hide image placeholder when empty - convert to single column */
.service-intro-grid:has(.service-image-placeholder) {
    grid-template-columns: 1fr;
}

.service-intro-grid:has(.service-image-placeholder) .service-image-placeholder {
    display: none;
}

/* Highlights Card - Glass Morphism */
.service-highlights-card {
    background: var(--bs-glass-bg, rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--bs-glass-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--bs-radius-lg, 14px);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.highlights-heading {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 1rem;
}

.service-highlights {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .service-highlights {
        grid-template-columns: repeat(2, 1fr);
    }
}

.service-highlights li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--bs-text-white, #fff);
    font-size: 0.95rem;
    font-weight: 500;
}

/* Blue Glow Icon */
.highlight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: rgba(17, 141, 240, 0.15);
    border-radius: 50%;
    color: var(--bs-primary-blue, #118df0);
    box-shadow: 0 0 15px rgba(17, 141, 240, 0.3);
}

.highlight-icon svg {
    width: 14px;
    height: 14px;
}

/* CTA Buttons */
.service-intro-cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .service-intro-cta {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.service-intro-cta .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: linear-gradient(135deg, var(--bs-primary-blue, #118df0) 0%, var(--bs-primary-blue-dark, #0a6bc4) 100%);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: 0;
    box-shadow: var(--bs-shadow-button, 0 4px 15px rgba(17, 141, 240, 0.4));
    transition: all var(--bs-transition-base, 0.3s ease);
}

.service-intro-cta .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(17, 141, 240, 0.5);
}

.service-intro-cta .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: var(--bs-glass-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--bs-glass-border, rgba(255, 255, 255, 0.15));
    color: var(--bs-text-white, #fff);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0;
    transition: all var(--bs-transition-base, 0.3s ease);
}

.service-intro-cta .btn-secondary:hover {
    background: var(--bs-glass-bg-hover, rgba(255, 255, 255, 0.1));
    border-color: rgba(17, 141, 240, 0.3);
    color: var(--bs-primary-blue, #118df0);
}

/* Image Column */
.service-intro-image {
    position: relative;
}

.intro-image-wrapper {
    position: relative;
    border-radius: var(--bs-radius-lg, 14px);
    overflow: hidden;
    box-shadow: var(--bs-shadow-soft, 0 8px 32px rgba(0, 0, 0, 0.3));
}

.intro-image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 300px;
    object-fit: cover;
}

@media (min-width: 1024px) {
    .intro-image-wrapper img {
        min-height: 400px;
    }
}

/* Blue corner accents */
.image-accent {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 3px solid var(--bs-primary-blue, #118df0);
    pointer-events: none;
}

.image-accent-tl {
    top: -3px;
    left: -3px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: var(--bs-radius-lg, 14px);
}

.image-accent-br {
    bottom: -3px;
    right: -3px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: var(--bs-radius-lg, 14px);
}

/* Image Placeholder */
.service-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 300px;
    background: var(--bs-glass-bg, rgba(255, 255, 255, 0.05));
    border: 2px dashed var(--bs-glass-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--bs-radius-lg, 14px);
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.5));
    font-size: 0.9rem;
}

.service-image-placeholder svg {
    opacity: 0.5;
}

@media (min-width: 1024px) {
    .service-image-placeholder {
        min-height: 400px;
    }
}

/* ===========================================
   SERVICE TYPES SECTION
   =========================================== */

.service-types-section {
    position: relative;
    overflow: hidden;
}

.service-types-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.15;
    pointer-events: none;
}

.service-types-glow--left {
    top: -200px;
    left: -200px;
    background: var(--bs-primary-blue, #118df0);
}

.service-types-glow--right {
    bottom: -200px;
    right: -200px;
    background: var(--bs-primary-blue, #118df0);
}

.service-types-grid {
    position: relative;
    z-index: 1;
}

/* Service Type Card - Blue Smoke Design (square corners) */
.service-type-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0; /* Square corners per design spec */
    text-decoration: none;
    display: block;
    overflow: hidden;
    transition: all 0.3s ease;
}

.service-type-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(17, 141, 240, 0.3);
    transform: translateY(-4px);
}

.service-type-card.has-image {
    padding: 0;
}

.service-type-image {
    position: relative;
    height: 200px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

.service-type-card:hover .service-type-image img {
    transform: scale(1.05);
}

.service-type-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 10, 21, 0.6) 0%, transparent 60%);
}

.service-type-content {
    padding: 1.5rem;
}

.service-type-card h3 {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    color: #fff;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.service-type-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

/* Service Type Icon (shown when no image) */
.service-type-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(17, 141, 240, 0.2) 0%, rgba(17, 141, 240, 0.1) 100%);
    border: 1px solid rgba(17, 141, 240, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.service-type-icon svg {
    width: 28px;
    height: 28px;
    color: var(--bs-primary-blue, #118df0);
}

/* Service Type Link */
.service-type-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-primary-blue, #118df0);
    font-size: 0.9rem;
    font-weight: 600;
    transition: gap 0.2s ease;
}

.service-type-card:hover .service-type-link {
    gap: 0.75rem;
}

.service-type-link svg {
    transition: transform 0.2s ease;
}

/* ===========================================
   SERVICE SINGLE PAGE
   =========================================== */

.service-single-page .section-padding {
    padding: 80px 0;
}

/* Section Header */
.service-single-page .section-header {
    margin-bottom: 48px;
}

.service-single-page .section-header h2 {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--bs-text-white, #fff);
    margin: 0 0 16px;
    line-height: 1.2;
}

.service-single-page .section-subtext {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Glass Card Base */
.service-single-page .card-glass {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.service-single-page .card-glass:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(17, 141, 240, 0.3);
    transform: translateY(-4px);
}

/* Content Wrapper - Enhanced Typography */
.service-single-page .content-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

/* H2 - Major Section Headers */
.service-single-page .content-wrapper h2 {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--bs-text-white, #fff);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--bs-primary-blue, #118df0);
    letter-spacing: -0.01em;
}

.service-single-page .content-wrapper h2:first-child {
    margin-top: 0;
}

/* H3 - Subsection Headers */
.service-single-page .content-wrapper h3 {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--bs-text-white, #fff);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-left: 1rem;
    border-left: 3px solid var(--bs-primary-blue, #118df0);
}

/* "What this solves" intro pattern */
.service-single-page .content-wrapper h3 + p strong:first-child {
    display: block;
    color: var(--bs-primary-blue, #118df0);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.service-single-page .content-wrapper p {
    font-size: 1.125rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.25rem;
}

/* Strong/Bold text */
.service-single-page .content-wrapper p strong {
    color: var(--bs-text-white, #fff);
    font-weight: 600;
}

/* Lists - Enhanced styling */
.service-single-page .content-wrapper ul,
.service-single-page .content-wrapper ol {
    color: rgba(255, 255, 255, 0.8);
    padding-left: 0;
    margin: 1.5rem 0;
    list-style: none;
}

.service-single-page .content-wrapper li {
    margin-bottom: 0.75rem;
    padding-left: 1.75rem;
    position: relative;
    line-height: 1.7;
}

.service-single-page .content-wrapper ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    background: var(--bs-primary-blue, #118df0);
    border-radius: 50%;
}

.service-single-page .content-wrapper ol {
    counter-reset: list-counter;
}

.service-single-page .content-wrapper ol li {
    counter-increment: list-counter;
}

.service-single-page .content-wrapper ol li::before {
    content: counter(list-counter) ".";
    position: absolute;
    left: 0;
    color: var(--bs-primary-blue, #118df0);
    font-weight: 600;
}

/* Bold items in lists */
.service-single-page .content-wrapper li strong {
    color: var(--bs-text-white, #fff);
}

/* Links */
.service-single-page .content-wrapper a {
    color: var(--bs-primary-blue, #118df0);
    text-decoration: underline;
    text-decoration-color: rgba(17, 141, 240, 0.4);
    text-underline-offset: 2px;
    transition: all 0.2s ease;
}

.service-single-page .content-wrapper a:hover {
    color: var(--bs-primary-blue-bright, #3da5ff);
    text-decoration-color: var(--bs-primary-blue-bright, #3da5ff);
}

/* Benefits Grid */
.service-single-page .benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 1024px) {
    .service-single-page .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .service-single-page .benefits-grid {
        grid-template-columns: 1fr;
    }
}

.service-single-page .benefit-card {
    padding: 32px;
    text-align: center;
}

.service-single-page .benefit-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(17, 141, 240, 0.2) 0%, rgba(17, 141, 240, 0.1) 100%);
    border: 1px solid rgba(17, 141, 240, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--bs-primary-blue, #118df0);
}

.service-single-page .benefit-card h3 {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-text-white, #fff);
    margin: 0 0 12px;
}

.service-single-page .benefit-card p {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
}

/* Process Grid */
.service-single-page .process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 1024px) {
    .service-single-page .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .service-single-page .process-grid {
        grid-template-columns: 1fr;
    }
}

.service-single-page .process-card {
    padding: 32px 24px;
    text-align: center;
    position: relative;
}

.service-single-page .process-number {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-weight: 700;
    font-size: 3rem;
    color: var(--bs-primary-blue, #118df0);
    opacity: 0.3;
    line-height: 1;
    margin-bottom: 12px;
}

.service-single-page .process-card h3 {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bs-text-white, #fff);
    margin: 0 0 12px;
}

.service-single-page .process-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
}

.service-single-page .process-connector {
    position: absolute;
    top: 3.5rem;
    right: -12px;
    width: 24px;
    height: 2px;
    background: linear-gradient(90deg, rgba(17, 141, 240, 0.5) 0%, transparent 100%);
    z-index: 1;
}

@media (max-width: 1024px) {
    .service-single-page .process-connector {
        display: none;
    }
}

/* Gallery Grid */
.service-single-page .gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1024px) {
    .service-single-page .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .service-single-page .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.service-single-page .gallery-item {
    margin: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.service-single-page .gallery-item a {
    display: block;
    position: relative;
}

.service-single-page .gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.service-single-page .gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17, 141, 240, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
}

.service-single-page .gallery-item:hover .gallery-overlay {
    opacity: 1;
}

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

.service-single-page .gallery-item figcaption {
    background: var(--bs-bg-dark, #050a15);
    color: rgba(255, 255, 255, 0.7);
    padding: 12px;
    font-size: 0.875rem;
}

/* Services Grid (Related Services) */
.service-single-page .services-grid {
    display: grid;
    gap: 24px;
}

.service-single-page .services-grid.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    .service-single-page .services-grid.columns-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .service-single-page .services-grid {
        grid-template-columns: 1fr;
    }
}

/* Service Card */
.service-single-page .service-card {
    overflow: hidden;
}

.service-single-page .service-card-image {
    height: 200px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.service-single-page .service-card-image .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.service-single-page .service-card:hover .card-img {
    transform: scale(1.05);
}

.service-single-page .service-card-content {
    padding: 24px;
}

.service-single-page .service-card-title {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 12px;
}

.service-single-page .service-card-title a {
    color: var(--bs-text-white, #fff);
    text-decoration: none;
    transition: color 0.2s ease;
}

.service-single-page .service-card-title a:hover {
    color: var(--bs-primary-blue, #118df0);
}

.service-single-page .service-card-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 16px;
    line-height: 1.6;
}

.service-single-page .service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bs-primary-blue, #118df0);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.service-single-page .service-card-link:hover {
    gap: 12px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .service-single-page .section-padding {
        padding: 60px 0;
    }

    .service-single-page .section-header h2 {
        font-size: 2rem;
    }

    .service-single-page .section-subtext {
        font-size: 1rem;
    }

    .service-single-page .benefit-card,
    .service-single-page .process-card {
        padding: 24px;
    }
}

@media (max-width: 768px) {
    .service-single-page .section-padding {
        padding: 48px 0;
    }

    .service-single-page .section-header {
        margin-bottom: 32px;
    }

    .service-single-page .section-header h2 {
        font-size: 1.75rem;
    }
}

/* ===========================================
   PROJECT CARDS
   =========================================== */

.project-card {
    background: var(--bs-glass-bg);
    border: 1px solid var(--bs-glass-border);
    overflow: hidden;
    transition: all var(--bs-transition-base);
}

.project-card:hover {
    border-color: var(--bs-glass-border-blue);
    box-shadow: var(--bs-shadow-soft);
}

.project-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.project-card-image {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(17, 141, 240, 0.1) 0%, rgba(10, 22, 40, 0.95) 100%);
}

.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

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

.project-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.2);
    font-size: var(--bs-text-xs);
    letter-spacing: 0.05em;
}

.project-card-type-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.6rem;
    background: rgba(0, 0, 0, 0.6);
    color: var(--bs-text-white);
    font-size: 0.7rem;
    font-weight: var(--bs-weight-semibold);
    text-transform: capitalize;
}

.project-card-type-badge--right {
    left: auto;
    right: 0.75rem;
}

.project-card-work-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.25rem 0.6rem;
    background: var(--bs-primary-blue);
    color: var(--bs-text-white);
    font-size: 0.7rem;
    font-weight: var(--bs-weight-semibold);
    text-transform: capitalize;
}

.project-card-featured-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.6rem;
    background: var(--bs-primary-blue-dark, #0a6bc4);
    color: var(--bs-text-white);
    font-size: 0.7rem;
    font-weight: var(--bs-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.project-card-content {
    padding: 1.25rem;
}

.project-card-location {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--bs-text-muted);
    font-size: var(--bs-text-xs);
    margin-bottom: var(--bs-space-xs);
}

.project-card-location svg {
    flex-shrink: 0;
    color: var(--bs-primary-blue);
}

.project-card-title {
    font-family: var(--bs-font-heading);
    font-size: 1.1rem;
    font-weight: var(--bs-weight-bold);
    color: var(--bs-text-white);
    margin: 0 0 var(--bs-space-xs);
    line-height: 1.3;
}

.project-card-meta {
    display: flex;
    align-items: center;
    gap: var(--bs-space-xs);
    font-size: 0.8rem;
    color: var(--bs-text-muted);
}

.project-card-meta .meta-separator {
    color: rgba(255, 255, 255, 0.3);
}

/* ===========================================
   KFX IMAGE SYSTEM - Placeholders & Pictures
   =========================================== */

/* Placeholder Container */
.kfx-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(17, 141, 240, 0.08) 0%, rgba(10, 22, 40, 0.95) 100%);
    color: rgba(255, 255, 255, 0.25);
    aspect-ratio: 3/2;
    width: 100%;
    border: 1px solid var(--bs-glass-border);
}

.kfx-placeholder--square {
    aspect-ratio: 1/1;
}

.kfx-placeholder--hero {
    aspect-ratio: 16/9;
}

.kfx-placeholder__icon {
    margin-bottom: var(--bs-space-xs);
    opacity: 0.6;
}

.kfx-placeholder__icon svg {
    width: 48px;
    height: 48px;
    stroke-width: 1;
}

.kfx-placeholder__label {
    font-size: var(--bs-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.5;
}

/* Picture Container */
.kfx-picture {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.kfx-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--bs-transition-slow);
}

/* Hover effect for linked images */
a:hover .kfx-picture img,
.kfx-picture:hover img {
    transform: scale(1.05);
}

/* ===========================================
   NEIGHBORHOODS GRID
   Blue Smoke City Cards Compact Style
   =========================================== */

.area-neighborhoods {
    background: var(--bs-bg-dark);
}

/* Grid: 2 → 3 → 4 columns responsive */
.neighborhoods-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 576px) {
    .neighborhoods-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .neighborhoods-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Neighborhood Card - Compact City Card Style */
.neighborhood-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--bs-radius-sm);
    color: var(--bs-text-white);
    text-decoration: none;
    transition: all 0.3s ease;
}

.neighborhood-card:hover,
a.neighborhood-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(17, 141, 240, 0.4);
}

.neighborhood-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--bs-primary-blue);
}

.neighborhood-name {
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-weight-semibold);
    font-size: 1rem;
    color: #fff;
}

/* ===========================================
   LOCAL DETAILS SECTION
   Service Area local housing, weather, permits
   =========================================== */

.local-details {
    background: var(--bs-bg-section);
}

/* City Quick Facts Card */
.city-quick-facts {
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
}

.quick-facts-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-facts-header svg {
    width: 24px;
    height: 24px;
    color: var(--bs-primary-blue);
}

.quick-facts-header h3 {
    font-family: var(--bs-font-heading);
    font-size: 1.25rem;
    font-weight: var(--bs-weight-bold);
    color: var(--bs-text-white);
    margin: 0;
}

.quick-facts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 2rem;
}

@media (min-width: 768px) {
    .quick-facts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .quick-facts-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.quick-fact {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.quick-fact-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.quick-fact-value {
    font-family: var(--bs-font-heading);
    font-size: 1.125rem;
    font-weight: var(--bs-weight-bold);
    color: var(--bs-text-white);
}

.local-details-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .local-details-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .local-details-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.local-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.local-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--bs-radius-md);
    background: rgba(17, 141, 240, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.local-card-icon svg {
    width: 24px;
    height: 24px;
    color: var(--bs-primary-blue);
}

.local-card h3 {
    font-family: var(--bs-font-heading);
    font-size: 1.125rem;
    font-weight: var(--bs-weight-bold);
    color: var(--bs-text-white);
    margin: 0;
}

.local-card p {
    font-size: 0.9375rem;
    color: var(--bs-text-muted);
    line-height: 1.6;
    margin: 0;
}

.local-card p strong {
    color: var(--bs-text-white);
    font-weight: var(--bs-weight-semibold);
}

/* ===========================================
   CITY GALLERY SECTION
   Service Area project photos grid
   =========================================== */

.city-gallery {
    background: var(--bs-bg-dark);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

.gallery-item {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--bs-radius-md);
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

/* ===========================================
   CITY TESTIMONIALS SECTION
   Service Area featured reviews
   =========================================== */

.city-testimonials {
    background: var(--bs-bg-section);
}

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

@media (min-width: 768px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.testimonial-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.testimonial-rating {
    display: flex;
    gap: 0.25rem;
    color: #fbbf24;
}

.testimonial-rating svg {
    width: 16px;
    height: 16px;
}

.testimonial-text {
    font-size: 0.9375rem;
    color: var(--bs-text-muted);
    line-height: 1.7;
    margin: 0;
    font-style: normal;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.author-name {
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-weight-semibold);
    font-size: 1rem;
    color: var(--bs-text-white);
}

.author-meta {
    font-size: 0.875rem;
    color: var(--bs-text-muted);
}

/* ===========================================
   BLOG PREVIEW SECTION (Homepage)
   Matches: kfx-blue-smoke-blog.jsx Standard Grid Cards
   =========================================== */

/* Section Container */
.blog-preview-section {
    padding: 5rem 0;
}

.blog-preview-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.blog-preview-section .section-header h2 {
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-weight-bold);
    font-size: 2.5rem;
    color: var(--bs-text-white);
    margin: 0 0 1rem 0;
}

.blog-preview-section .section-subtitle {
    font-family: var(--bs-font-heading);
    font-size: 1.125rem;
    color: var(--bs-text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Blog Grid - 3 columns */
.blog-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Blog Card - Glass Morphism */
.blog-preview-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.blog-preview-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(17, 141, 240, 0.1);
}

/* Card Image */
.blog-preview-card-image {
    display: block;
    position: relative;
    height: 200px;
    background: #0d1f35;
    overflow: hidden;
}

.blog-preview-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(17, 141, 240, 0.2) 0%, transparent 100%);
    pointer-events: none;
}

.blog-preview-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-preview-card:hover .blog-preview-card-image img {
    transform: scale(1.05);
}

/* Placeholder for missing images */
.blog-preview-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    background: linear-gradient(135deg, rgba(17, 141, 240, 0.1) 0%, #0d1f35 100%);
}

.blog-preview-placeholder svg {
    opacity: 0.5;
}

/* Card Content */
.blog-preview-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Meta (Date + Category) */
.blog-preview-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
}

.blog-preview-meta time {
    color: rgba(255, 255, 255, 0.4);
}

.blog-preview-category {
    display: inline-block;
    background: rgba(17, 141, 240, 0.2);
    color: var(--bs-primary);
    padding: 0.25rem 0.5rem;
    font-family: var(--bs-font-heading);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Title */
.blog-preview-card-content h3 {
    font-family: var(--bs-font-heading);
    font-weight: var(--bs-weight-bold);
    font-size: 1.125rem;
    line-height: 1.4;
    margin: 0 0 0.75rem 0;
}

.blog-preview-card-content h3 a {
    color: var(--bs-text-white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-preview-card:hover .blog-preview-card-content h3 a {
    color: var(--bs-primary);
}

/* Excerpt */
.blog-preview-card-content p {
    color: var(--bs-text-muted);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 0 1rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Read More Link */
.blog-preview-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-primary);
    font-family: var(--bs-font-heading);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.blog-preview-link:hover {
    color: var(--bs-primary-bright);
    gap: 0.75rem;
}

.blog-preview-link svg {
    transition: transform 0.3s ease;
}

.blog-preview-link:hover svg {
    transform: translateX(4px);
}

/* CTA Button */
.blog-preview-section .text-center.mt-xl {
    margin-top: 3rem;
}

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

    .blog-preview-section .section-header h2 {
        font-size: 2rem;
    }
}

/* Responsive: Mobile */
@media (max-width: 640px) {
    .blog-preview-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .blog-preview-section .section-header h2 {
        font-size: 1.75rem;
    }

    .blog-preview-section .section-subtitle {
        font-size: 1rem;
    }

    .blog-preview-card-image {
        height: 180px;
    }

    .blog-preview-card-content {
        padding: 1.25rem;
    }
}

/* ===========================================
   MOBILE HOMEPAGE OPTIMIZATION (JOB-060)
   Hide non-essential sections below 768px
   =========================================== */

/* Sticky Mobile CTA Bar - Hidden on desktop */
.sticky-mobile-cta {
    display: none;
}

@media (max-width: 767px) {
    /* =========================================
       SECTION HIDING - Homepage Only
       ========================================= */

    /* Hide Featured Projects on mobile */
    .home .projects-section {
        display: none;
    }

    /* Hide Blog Preview on mobile */
    .home .blog-preview-section {
        display: none;
    }

    /* Hide Service Areas on mobile */
    .home .service-areas-section {
        display: none;
    }

    /* Hide Community Affiliations (3rd affiliations strip) on mobile */
    .home .affiliations-section[data-affiliation-types*="community"] {
        display: none;
    }

    /* Hide Hero Badges on mobile - sticky CTA bar handles conversion */
    .home .hero-home__badges {
        display: none;
    }

    /* Hide Featured badges on project cards - reduces clutter on mobile */
    .project-card-featured-badge {
        display: none;
    }

    /* =========================================
       STICKY MOBILE CTA BAR
       ========================================= */

    .sticky-mobile-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        padding: 0.75rem 1rem;
        background: rgba(5, 10, 21, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        gap: 0.75rem;
    }

    .sticky-mobile-cta__call {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.875rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9rem;
        font-family: 'Inter', sans-serif;
        min-height: 48px;
    }

    .sticky-mobile-cta__call:hover {
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
    }

    .sticky-mobile-cta__call svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .sticky-mobile-cta__estimate {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.875rem;
        background: linear-gradient(135deg, #118df0 0%, #0a6bc4 100%);
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9rem;
        font-family: 'Inter', sans-serif;
        box-shadow: 0 4px 15px rgba(17, 141, 240, 0.3);
        min-height: 48px;
    }

    .sticky-mobile-cta__estimate:hover {
        background: linear-gradient(135deg, #3BA3F5 0%, #118df0 100%);
        color: #fff;
    }

    /* Add bottom padding to body for sticky bar */
    body {
        padding-bottom: 70px;
    }

    /* =========================================
       MOBILE SECTION FINE-TUNING
       ========================================= */

    /* Hero: Typography adjustments per JSX mockup */
    .hero-home__headline {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .hero-home__subheadline {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1.75rem;
    }

    /* Section Headers: Reduce size on mobile per JSX mockup */
    .section-header h2,
    .section-headline {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        line-height: 1.2;
    }

    .section-subtitle,
    .section-subtext {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .section-header {
        margin-bottom: 1.5rem;
    }

    /* Hero: Full-width buttons on mobile */
    .hero-home .hero-buttons {
        width: 100%;
    }

    .hero-home .hero-buttons .btn-primary,
    .hero-home .hero-buttons .btn-secondary,
    .hero-home .hero-buttons .btn-orange,
    .hero-home .hero-buttons .btn-white {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    /* Services: Clean glass cards on mobile */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .card-service {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Hide the full image area on mobile */
    .card-service-image {
        display: none;
    }

    /* Content area styling */
    .card-service-content {
        flex: 1;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .card-service-content h3 {
        font-size: 1.1rem;
        margin-bottom: 0;
        color: var(--bs-primary-blue);
    }

    .card-service-content p {
        font-size: 0.875rem;
        margin-bottom: 0;
        color: rgba(255, 255, 255, 0.6);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Add chevron arrow to indicate clickable */
    .card-service-link {
        position: relative;
    }

    .card-service-link::after {
        content: '';
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        border-right: 2px solid rgba(255, 255, 255, 0.4);
        border-bottom: 2px solid rgba(255, 255, 255, 0.4);
        transform: translateY(-50%) rotate(-45deg);
    }

    .card-service-content {
        padding-right: 1.5rem; /* Make room for chevron */
    }

    /* Hide placeholder label on mobile */
    .image-placeholder-label {
        display: none;
    }

    /* Why Choose Us: Keep 2x2 grid on mobile */
    .why-us-section .grid.grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .why-card {
        padding: 1rem;
    }

    /* Reviews: Single column, 3 max already handled */
    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Trust Badges / Affiliations: Tighter grid */
    .affiliations-grid--3-col {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .affiliations-grid--4-col {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    /* Section padding reduction on mobile */
    .section-padding {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    /* Ensure all CTA buttons meet touch target requirements */
    .btn-primary,
    .btn-secondary,
    .btn-outline {
        min-height: 48px;
    }
}

/* ===========================================
   WARRANTY SECTION (Blue Smoke)
   =========================================== */

.warranty-section {
    background: var(--bs-bg-dark);
    padding: 5rem 0;
}

.warranty-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.warranty-section .section-header h2 {
    font-family: var(--bs-font-heading);
    font-size: var(--bs-h2-size);
    font-weight: 700;
    color: var(--bs-text-white);
    margin-bottom: 1rem;
}

.warranty-section .section-subtitle {
    font-size: 1.1rem;
    color: var(--bs-text-muted);
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Warranty Cards Grid */
.warranty-section .grid-cols-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .warranty-section .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .warranty-section .grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Warranty Card */
.warranty-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* NO border-radius - square corners */
}

.warranty-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(17, 141, 240, 0.3);
    transform: translateY(-4px);
}

/* Warranty Icon */
.warranty-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(17, 141, 240, 0.2) 0%, rgba(17, 141, 240, 0.1) 100%);
    border: 1px solid rgba(17, 141, 240, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    /* NO border-radius - square corners */
}

.warranty-icon svg {
    width: 32px;
    height: 32px;
    color: var(--bs-primary-blue);
}

/* Warranty Years Display */
.warranty-years {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    min-height: 2.5rem; /* Consistent height for alignment */
}

.warranty-years .years-number {
    font-family: var(--bs-font-heading);
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--bs-primary-blue);
    line-height: 1;
}

.warranty-years .years-suffix {
    font-size: 1rem;
    color: var(--bs-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* Warranty Card Title */
.warranty-card h3 {
    font-family: var(--bs-font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--bs-text-white);
    margin-bottom: 0.75rem;
}

/* Warranty Card Description */
.warranty-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin: 0;
}

/* Certifications Section */
.warranty-certifications {
    margin-top: 3rem;
    text-align: center;
}

.warranty-certifications .cert-label {
    font-size: 0.9rem;
    color: var(--bs-text-muted);
    margin-bottom: 1.25rem;
}

.warranty-certifications .cert-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.5rem;
}

.warranty-certifications .cert-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--bs-text-light);
    transition: all 0.3s ease;
    /* NO border-radius */
}

.warranty-certifications .cert-badge:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(17, 141, 240, 0.3);
}

.warranty-certifications .cert-badge svg {
    width: 16px;
    height: 16px;
    color: #22c55e; /* Green checkmark */
    flex-shrink: 0;
}

/* Warranty Fine Print */
.warranty-note {
    margin-top: 2.5rem;
    text-align: center;
}

.warranty-note p {
    margin: 0;
}

.warranty-note small {
    font-size: 0.8rem;
    color: var(--bs-text-muted);
    opacity: 0.7;
}

/* Warranty Mobile Adjustments */
@media (max-width: 767px) {
    .warranty-section {
        padding: 3rem 0;
    }

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

    .warranty-card {
        padding: 1.5rem 1.25rem;
    }

    .warranty-icon {
        width: 56px;
        height: 56px;
    }

    .warranty-icon svg {
        width: 28px;
        height: 28px;
    }

    .warranty-years .years-number {
        font-size: 2rem;
    }

    .warranty-years .years-suffix {
        font-size: 0.875rem;
    }

    .warranty-certifications {
        margin-top: 2rem;
    }

    .warranty-certifications .cert-badges {
        gap: 0.5rem;
    }

    .warranty-certifications .cert-badge {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* ===========================================
   SERVICE FLEXIBLE CONTENT SECTIONS (JOB-120)
   =========================================== */

/* ----------------------------------------
   Flex Accordion (Signs You Need)
   ---------------------------------------- */
.svc-flex-accordion .flex-accordion-list {
    max-width: 900px;
    margin: 0 auto;
}

.flex-accordion-item {
    background: var(--bs-glass-bg);
    border: 1px solid var(--bs-glass-border);
    margin-bottom: 12px;
    overflow: hidden;
}

.flex-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--bs-text-white);
    transition: background 0.3s ease;
}

.flex-accordion-trigger:hover {
    background: var(--bs-glass-bg-hover);
}

.flex-accordion-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(17, 141, 240, 0.2) 0%, rgba(17, 141, 240, 0.1) 100%);
    border: 1px solid rgba(17, 141, 240, 0.3);
    color: var(--bs-primary-blue);
}

.flex-accordion-icon svg {
    transition: transform 0.3s ease;
}

.flex-accordion-item.active .flex-accordion-icon svg {
    transform: rotate(45deg);
}

.flex-accordion-title {
    flex: 1;
    font-family: var(--bs-font-heading);
    font-size: 1.1rem;
    font-weight: 600;
}

.flex-accordion-chevron {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
}

.flex-accordion-item.active .flex-accordion-chevron {
    transform: rotate(180deg);
}

.flex-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.flex-accordion-item.active .flex-accordion-content {
    max-height: 500px;
}

.flex-accordion-content-inner {
    padding: 0 24px 24px 72px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

.flex-accordion-content-inner p {
    margin-bottom: 0.75rem;
}

.flex-accordion-content-inner p:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------
   Flex Icon List (Weather/Regional)
   ---------------------------------------- */
.flex-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 1024px) {
    .flex-icon-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .flex-icon-grid {
        grid-template-columns: 1fr;
    }
}

.flex-icon-card {
    padding: 32px 24px;
    text-align: center;
    background: var(--bs-glass-bg);
    border: 1px solid var(--bs-glass-border);
    transition: all 0.3s ease;
}

.flex-icon-card:hover {
    background: var(--bs-glass-bg-hover);
    border-color: rgba(17, 141, 240, 0.3);
    transform: translateY(-4px);
}

.flex-icon-card-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(17, 141, 240, 0.15) 0%, rgba(17, 141, 240, 0.05) 100%);
    border: 1px solid rgba(17, 141, 240, 0.25);
    border-radius: 50%;
    color: var(--bs-primary-blue);
}

.flex-icon-card h3 {
    font-family: var(--bs-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bs-text-white);
    margin: 0 0 12px;
}

.flex-icon-card-text {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.flex-icon-card-text p {
    margin-bottom: 0.5rem;
}

.flex-icon-card-text p:last-child {
    margin-bottom: 0;
}

.flex-icon-card-text ul,
.flex-icon-card-text ol {
    text-align: left;
    padding-left: 1.25rem;
    margin: 0.5rem 0;
}

.flex-icon-card-text li {
    margin-bottom: 0.25rem;
    list-style: disc;
}

/* ----------------------------------------
   Flex Comparison (Decision Helper)
   ---------------------------------------- */
.flex-comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .flex-comparison-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.flex-comparison-column {
    padding: 32px;
    background: var(--bs-glass-bg);
    border: 1px solid var(--bs-glass-border);
}

.flex-comparison-column--left {
    border-left: 3px solid var(--bs-primary-blue);
}

.flex-comparison-column--right {
    border-left: 3px solid #10b981;
}

.flex-comparison-column-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--bs-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-text-white);
    margin: 0 0 24px;
}

.flex-comparison-column--left .flex-comparison-column-title svg {
    color: var(--bs-primary-blue);
}

.flex-comparison-column--right .flex-comparison-column-title svg {
    color: #10b981;
}

.flex-comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.flex-comparison-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.flex-comparison-list li:last-child {
    border-bottom: none;
}

.flex-comparison-list li svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.flex-comparison-column--left .flex-comparison-list li svg {
    color: var(--bs-primary-blue);
}

.flex-comparison-column--right .flex-comparison-list li svg {
    color: #10b981;
}

.flex-comparison-footer {
    text-align: center;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.flex-comparison-footer p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
}

/* ----------------------------------------
   Flex Callout (Info Box)
   ---------------------------------------- */
.flex-callout-box {
    display: flex;
    gap: 24px;
    padding: 32px;
    max-width: 900px;
    margin: 0 auto;
    background: var(--bs-glass-bg);
    border: 1px solid var(--bs-glass-border);
    border-left: 4px solid var(--bs-primary-blue);
}

.flex-callout-box--info {
    border-left-color: var(--bs-primary-blue);
}

.flex-callout-box--warning {
    border-left-color: #f59e0b;
}

.flex-callout-box--trust {
    border-left-color: #10b981;
}

.flex-callout-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(17, 141, 240, 0.15) 0%, rgba(17, 141, 240, 0.05) 100%);
    border-radius: 50%;
}

.flex-callout-box--info .flex-callout-icon {
    color: var(--bs-primary-blue);
    background: linear-gradient(135deg, rgba(17, 141, 240, 0.15) 0%, rgba(17, 141, 240, 0.05) 100%);
}

.flex-callout-box--warning .flex-callout-icon {
    color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.flex-callout-box--trust .flex-callout-icon {
    color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.flex-callout-content {
    flex: 1;
}

.flex-callout-content h3 {
    font-family: var(--bs-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bs-text-white);
    margin: 0 0 16px;
}

.flex-callout-text {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
}

.flex-callout-text p {
    margin-bottom: 0.75rem;
}

.flex-callout-text p:last-child {
    margin-bottom: 0;
}

.flex-callout-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 12px 24px;
    background: var(--bs-primary-blue);
    color: white;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.flex-callout-cta:hover {
    background: var(--bs-primary-blue-bright);
    transform: translateX(4px);
}

@media (max-width: 600px) {
    .flex-callout-box {
        flex-direction: column;
        text-align: center;
    }

    .flex-callout-icon {
        margin: 0 auto;
    }
}

/* ----------------------------------------
   Flex Proof Points (Why Choose)
   ---------------------------------------- */
.flex-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

@media (max-width: 900px) {
    .flex-proof-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .flex-proof-grid {
        grid-template-columns: 1fr;
    }
}

.flex-proof-card {
    padding: 32px 24px;
    background: var(--bs-glass-bg);
    border: 1px solid var(--bs-glass-border);
    transition: all 0.3s ease;
}

.flex-proof-card:hover {
    background: var(--bs-glass-bg-hover);
    border-color: rgba(17, 141, 240, 0.3);
    transform: translateY(-4px);
}

.flex-proof-number {
    font-family: var(--bs-font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--bs-primary-blue);
    opacity: 0.3;
    line-height: 1;
    margin-bottom: 12px;
}

.flex-proof-card h3 {
    font-family: var(--bs-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bs-text-white);
    margin: 0 0 12px;
}

.flex-proof-card p {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
}

.flex-proof-quote {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    background: var(--bs-glass-bg);
    border: 1px solid var(--bs-glass-border);
    border-left: 4px solid var(--bs-primary-blue);
    text-align: center;
}

.flex-proof-quote-icon {
    position: absolute;
    top: 24px;
    left: 24px;
    color: var(--bs-primary-blue);
}

.flex-proof-quote p {
    font-size: 1.25rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin: 0 0 20px;
}

.flex-proof-quote cite {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-style: normal;
    color: rgba(255, 255, 255, 0.6);
}

.flex-proof-quote cite svg {
    color: #fbbf24;
}

/* ----------------------------------------
   Flex Rich Text (General Content)
   ---------------------------------------- */
.svc-flex-rich-text .content-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.svc-flex-rich-text .content-wrapper h2,
.svc-flex-rich-text .content-wrapper h3 {
    font-family: var(--bs-font-heading);
    color: var(--bs-text-white);
    margin: 2rem 0 1rem;
}

.svc-flex-rich-text .content-wrapper h2 {
    font-size: 1.75rem;
}

.svc-flex-rich-text .content-wrapper h3 {
    font-size: 1.35rem;
}

.svc-flex-rich-text .content-wrapper p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin-bottom: 1.25rem;
}

.svc-flex-rich-text .content-wrapper ul,
.svc-flex-rich-text .content-wrapper ol {
    color: rgba(255, 255, 255, 0.8);
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}

.svc-flex-rich-text .content-wrapper li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
    list-style: disc;
}

.svc-flex-rich-text .content-wrapper ol li {
    list-style: decimal;
}

.svc-flex-rich-text .content-wrapper a {
    color: var(--bs-primary-blue);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.svc-flex-rich-text .content-wrapper a:hover {
    color: var(--bs-primary-blue-bright);
}

/* ===========================================
   SERVICE SINGLE - INTRO SECTION (JOB-122)
   2-column layout with Quick Facts sidebar
   Based on: kfx-blue-smoke-roof-repair.jsx
   =========================================== */

.svc-intro {
    background: var(--bs-bg-section, #0a1628);
}

/* Grid Layout */
.svc-intro-grid {
    display: grid;
    gap: 48px;
    align-items: start;
}

.svc-intro-grid.has-sidebar {
    grid-template-columns: 1fr 380px;
}

.svc-intro-grid.no-sidebar {
    grid-template-columns: 1fr;
    max-width: 800px;
}

/* Content Column */
.svc-intro-content {
    /* Container for prose + insight box */
}

.svc-intro-text {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--bs-text-light, rgba(255, 255, 255, 0.9));
}

.svc-intro-text p {
    margin-bottom: 1.25rem;
}

.svc-intro-text p:last-child {
    margin-bottom: 0;
}

.svc-intro-text strong {
    color: var(--bs-text-white, #ffffff);
    font-weight: 600;
}

/* Industries We Serve - Icon Grid (JOB-132)
   Styles h3 + ul pattern within intro content as 4x2 icon grid
   Design reference: docs/design-reference/kfx-blue-smoke-industries-section.jsx */
.svc-intro-text h3 {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--bs-text-white, #ffffff);
    margin: 2.5rem 0 1.25rem 0;
}

.svc-intro-text h3 + ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.svc-intro-text h3 + ul li {
    background: var(--bs-glass-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--bs-glass-border, rgba(255, 255, 255, 0.08));
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.625rem;
    transition: all 0.2s ease;
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-text-white, #ffffff);
    line-height: 1.3;
}

.svc-intro-text h3 + ul li:hover {
    border-color: var(--bs-primary-blue, #118df0);
    background: rgba(17, 141, 240, 0.08);
}

/* Icon circles using ::before pseudo-element */
.svc-intro-text h3 + ul li::before {
    content: '';
    width: 40px;
    height: 40px;
    background: rgba(17, 141, 240, 0.1);
    border: 1px solid var(--bs-primary-blue, #118df0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Default building icon using CSS mask */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cpath d='M8 6h.01'/%3E%3Cpath d='M16 6h.01'/%3E%3Cpath d='M12 6h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cpath d='M8 6h.01'/%3E%3Cpath d='M16 6h.01'/%3E%3Cpath d='M12 6h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3C/svg%3E");
    mask-size: 20px 20px;
    -webkit-mask-size: 20px 20px;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: var(--bs-primary-blue, #118df0);
}

/* Responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 991px) {
    .svc-intro-text h3 + ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .svc-intro-text h3 + ul {
        grid-template-columns: 1fr;
    }

    .svc-intro-text h3 + ul li {
        flex-direction: row;
        text-align: left;
        padding: 0.875rem 1rem;
    }

    .svc-intro-text h3 + ul li::before {
        width: 32px;
        height: 32px;
        mask-size: 16px 16px;
        -webkit-mask-size: 16px 16px;
    }
}

/* Key Insight Callout */
.svc-intro-insight {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--bs-glass-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--bs-primary-blue, #118df0);
}

.svc-intro-insight p {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--bs-text-white, #ffffff);
    margin: 0;
    line-height: 1.6;
}

.svc-intro-insight .insight-label {
    color: var(--bs-primary-blue, #118df0);
    margin-right: 0.25rem;
}

/* Quick Facts Sidebar */
.svc-intro-sidebar {
    /* Container for sticky behavior if needed later */
}

.quick-facts-card {
    padding: 1.5rem;
    box-shadow: 0 0 30px rgba(17, 141, 240, 0.15);
}

.quick-facts-heading {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--bs-text-white, #ffffff);
    margin: 0 0 1.25rem 0;
}

.quick-facts-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.quick-facts-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bs-glass-border, rgba(255, 255, 255, 0.08));
}

.quick-facts-item.last {
    border-bottom: none;
}

.quick-facts-label {
    font-size: 0.875rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
}

.quick-facts-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-text-white, #ffffff);
}

.quick-facts-cta {
    margin-top: 1.5rem;
}

.btn-full {
    width: 100%;
    justify-content: center;
}

/* Responsive: Tablet */
@media (max-width: 1024px) {
    .svc-intro-grid.has-sidebar {
        grid-template-columns: 1fr 320px;
        gap: 32px;
    }
}

/* Responsive: Mobile */
@media (max-width: 768px) {
    .svc-intro-grid.has-sidebar {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .svc-intro-sidebar {
        order: -1; /* Sidebar first on mobile */
    }

    .quick-facts-card {
        max-width: 100%;
    }

    .svc-intro-text {
        font-size: 1rem;
    }
}

/* ===========================================
   SERVICE SINGLE - INTRO LIST (JOB-142)
   Configurable list component: Industries We Serve, Services Include, etc.
   Based on: kfx-blue-smoke-industries-section.jsx
   =========================================== */

.svc-intro-list {
    margin-top: 2.5rem;
}

.svc-intro-list__headline {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--bs-text-white, #ffffff);
    margin: 0 0 1.25rem 0;
}

/* ===========================================
   STYLE A: Icon Grid (4x2)
   =========================================== */
.svc-intro-list--icon-grid .svc-intro-list__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.svc-intro-list__grid-item {
    background: var(--bs-glass-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--bs-glass-border, rgba(255, 255, 255, 0.08));
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.svc-intro-list__grid-item:hover {
    border-color: var(--bs-primary-blue, #118df0);
    background: rgba(17, 141, 240, 0.08);
}

.svc-intro-list__grid-icon {
    width: 40px;
    height: 40px;
    background: rgba(17, 141, 240, 0.1);
    border: 1px solid var(--bs-primary-blue, #118df0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.svc-intro-list__grid-icon svg {
    color: var(--bs-primary-blue, #118df0);
}

.svc-intro-list__grid-title {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-text-white, #ffffff);
    line-height: 1.3;
}

/* Icon Grid Responsive */
@media (max-width: 991px) {
    .svc-intro-list--icon-grid .svc-intro-list__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .svc-intro-list--icon-grid .svc-intro-list__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .svc-intro-list--icon-grid .svc-intro-list__grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .svc-intro-list__grid-item {
        padding: 0.75rem;
    }

    .svc-intro-list__grid-icon {
        width: 32px;
        height: 32px;
    }

    .svc-intro-list__grid-icon svg {
        width: 16px;
        height: 16px;
    }
}

/* ===========================================
   STYLE B: Two-Column Checklist
   =========================================== */
.svc-intro-list--two-column .svc-intro-list__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 32px;
    padding: 1.5rem;
}

.svc-intro-list__column {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.svc-intro-list__check-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.svc-intro-list__check-icon {
    flex-shrink: 0;
    color: var(--bs-primary-blue, #118df0);
    display: flex;
    align-items: center;
}

.svc-intro-list__check-text {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 0.875rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
}

/* Two-Column Responsive */
@media (max-width: 575px) {
    .svc-intro-list--two-column .svc-intro-list__columns {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ===========================================
   STYLE D: Compact Cards (2x4)
   =========================================== */
.svc-intro-list--compact-cards .svc-intro-list__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.svc-intro-list__card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bs-glass-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--bs-glass-border, rgba(255, 255, 255, 0.08));
    transition: border-color 0.2s ease;
}

.svc-intro-list__card:hover {
    border-color: var(--bs-primary-blue, #118df0);
}

.svc-intro-list__card-icon {
    width: 36px;
    height: 36px;
    background: rgba(17, 141, 240, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.svc-intro-list__card-icon svg {
    color: var(--bs-primary-blue, #118df0);
    width: 18px;
    height: 18px;
}

.svc-intro-list__card-content {
    display: flex;
    flex-direction: column;
}

.svc-intro-list__card-title {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-text-white, #ffffff);
    line-height: 1.2;
}

.svc-intro-list__card-desc {
    font-size: 0.75rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
    margin-top: 2px;
}

/* Compact Cards Responsive */
@media (max-width: 767px) {
    .svc-intro-list--compact-cards .svc-intro-list__cards {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   SERVICE SINGLE - SIGNS GRID (JOB-122 Phase 2)
   2-column card grid with exterior/interior signs
   Based on: kfx-blue-smoke-roof-repair.jsx SignsSection
   =========================================== */

.svc-signs {
    background: var(--bs-bg-dark, #050a15);
}

/* Section Header */
.svc-signs-header {
    margin-bottom: 2rem;
}

.svc-signs-header .section-headline {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-weight: 700;
    font-size: 2rem;
    color: var(--bs-text-white, #ffffff);
    margin: 0 0 0.75rem 0;
}

.svc-signs-header .section-subtitle {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 1rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
    margin: 0;
    max-width: 700px;
    line-height: 1.6;
}

/* 2-Column Grid */
.svc-signs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Card Styling */
.svc-signs-card {
    padding: 1.5rem;
}

.svc-signs-card-title {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--bs-text-white, #ffffff);
    margin: 0 0 1.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.svc-signs-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary-blue, #118df0);
}

.svc-signs-card-icon-warning {
    color: var(--bs-accent-orange, #f97316);
}

/* Signs List */
.svc-signs-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-signs-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bs-glass-border, rgba(255, 255, 255, 0.08));
}

.svc-signs-item.last {
    border-bottom: none;
}

/* Exterior Signs - title + description */
.svc-signs-list-exterior .svc-signs-item-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--bs-text-white, #ffffff);
    margin-bottom: 0.25rem;
}

.svc-signs-list-exterior .svc-signs-item-desc {
    font-size: 0.8125rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
}

/* Secondary Signs (JOB-128) - title + description format, same as Exterior */
.svc-signs-list-secondary .svc-signs-item-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--bs-text-white, #ffffff);
    margin-bottom: 0.25rem;
}

.svc-signs-list-secondary .svc-signs-item-desc {
    font-size: 0.8125rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
}

/* Icon-enabled items (JOB-132) - for repurposed Signs section */
.svc-signs-item-with-icon {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.svc-signs-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(17, 141, 240, 0.1);
    border-radius: 8px;
    color: var(--bs-primary-blue, #118df0);
}

.svc-signs-item-icon svg {
    width: 20px;
    height: 20px;
}

.svc-signs-item-content {
    flex: 1;
    min-width: 0;
}

/* Card with icons - no card title header, items have individual icons */
.svc-signs-card-with-icons .svc-signs-card-title {
    margin-bottom: 1rem;
}

.svc-signs-card-with-icons .svc-signs-item {
    padding: 1rem 0;
}

.svc-signs-card-with-icons .svc-signs-item:first-child {
    padding-top: 0;
}

/* Interior Signs - checklist style */
.svc-signs-list-interior .svc-signs-item-check {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
}

.svc-signs-check-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bs-accent-orange, #f97316);
}

/* Climate Advisory Callout */
.svc-signs-callout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.svc-signs-callout-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: linear-gradient(135deg, var(--bs-primary-blue, #118df0) 0%, var(--bs-primary-blue-dark, #0a6bc4) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.svc-signs-callout-content {
    flex: 1;
}

.svc-signs-callout-title {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-weight: 700;
    font-size: 1rem;
    color: var(--bs-text-white, #ffffff);
    margin: 0 0 0.5rem 0;
}

.svc-signs-callout-text {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 0.875rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
    margin: 0;
    line-height: 1.6;
}

/* Responsive: Tablet */
@media (max-width: 1024px) {
    .svc-signs-grid {
        gap: 1.5rem;
    }
}

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

    .svc-signs-header .section-headline {
        font-size: 1.75rem;
    }

    .svc-signs-callout {
        flex-direction: column;
        align-items: flex-start;
    }

    .svc-signs-callout-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .svc-signs-callout-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* ===========================================
   SERVICE SINGLE: Process Cards (JOB-122 Phase 3)
   2x2 grid with detailed steps, checkmarks, footer notes
   =========================================== */

.svc-process-section {
    background: var(--bs-bg-dark, #050a15);
    padding: 5rem 0;
}

.svc-process-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Section Header */
.svc-process-header {
    text-align: center;
    margin-bottom: 3rem;
}

.svc-process-header h2 {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-weight: 700;
    font-size: 2rem;
    color: var(--bs-text-white, #ffffff);
    margin: 0 0 1rem 0;
}

.svc-process-header p {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 1.0625rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
    margin: 0 auto;
    max-width: 700px;
    line-height: 1.6;
}

/* 2x2 Grid */
.svc-process-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* Process Card */
.svc-process-card {
    background: var(--bs-glass-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--bs-glass-border, rgba(255, 255, 255, 0.08));
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

/* Card Header */
.svc-process-card-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.svc-process-card-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: linear-gradient(135deg, var(--bs-primary-blue, #118df0) 0%, var(--bs-primary-blue-dark, #0a6bc4) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    position: relative;
}

.svc-process-card-icon svg {
    width: 22px;
    height: 22px;
}

.svc-process-card-number {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: var(--bs-bg-dark, #050a15);
    border: 2px solid var(--bs-primary-blue, #118df0);
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bs-font-body, 'Inter', sans-serif);
}

.svc-process-card-header h3 {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--bs-text-white, #ffffff);
    margin: 0;
    line-height: 1.3;
}

/* Intro Text */
.svc-process-card-intro {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 0.875rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

/* Detail Items */
.svc-process-card-details {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
    flex: 1;
}

.svc-process-card-details li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.svc-process-card-details li:last-child {
    margin-bottom: 0;
}

.svc-process-check {
    color: var(--bs-accent-green, #22c55e);
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.svc-process-check svg {
    width: 14px;
    height: 14px;
}

.svc-process-card-details li span:last-child {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 0.8125rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
    line-height: 1.4;
}

/* Footer Note */
.svc-process-card-footer {
    padding: 0.75rem;
    background: rgba(17, 141, 240, 0.06);
    border-left: 2px solid var(--bs-primary-blue, #118df0);
    margin-top: auto;
}

.svc-process-card-footer p {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 0.75rem;
    color: var(--bs-primary-blue-light, #4aa8f4);
    margin: 0;
    line-height: 1.5;
    font-style: italic;
}

/* Testimonial */
.svc-process-testimonial {
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--bs-primary-blue, #118df0);
}

.svc-process-testimonial blockquote {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 1.125rem;
    font-style: italic;
    color: var(--bs-text-white, #ffffff);
    margin: 0;
    line-height: 1.6;
    quotes: "\201C" "\201D";
}

.svc-process-testimonial blockquote::before {
    content: open-quote;
}

.svc-process-testimonial blockquote::after {
    content: close-quote;
}

.svc-process-testimonial cite {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
    font-style: normal;
}

/* Responsive: Tablet */
@media (max-width: 1024px) {
    .svc-process-grid {
        gap: 1.25rem;
    }

    .svc-process-card {
        padding: 1.25rem;
    }
}

/* Responsive: Mobile */
@media (max-width: 768px) {
    .svc-process-section {
        padding: 3.5rem 0;
    }

    .svc-process-header h2 {
        font-size: 1.75rem;
    }

    .svc-process-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .svc-process-card-header h3 {
        font-size: 1.125rem;
    }

    .svc-process-testimonial {
        padding: 1.25rem;
    }

    .svc-process-testimonial blockquote {
        font-size: 1rem;
    }
}

/* ===========================================
   Service Single - Repair Types Tabs (JOB-122 Phase 4)
   Tabbed interface for repair type categories
   =========================================== */

.svc-repair-types-section {
    padding: 5rem 0;
    background: var(--bs-bg-section, #0a1628);
}

/* Section Header */
.svc-repair-types-header {
    margin-bottom: 2.5rem;
}

.svc-repair-types-header h2 {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-weight: 700;
    font-size: 2rem;
    color: var(--bs-text-white, #ffffff);
    margin: 0 0 0.75rem 0;
    line-height: 1.2;
}

.svc-repair-types-header p {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 1rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
    margin: 0;
    line-height: 1.5;
}

/* Tab Navigation */
.svc-repair-types-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--bs-glass-border, rgba(255, 255, 255, 0.08));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.svc-repair-types-tabs::-webkit-scrollbar {
    display: none;
}

.svc-repair-types-tab {
    padding: 0.75rem 0.875rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.svc-repair-types-tab:hover {
    color: var(--bs-text-white, #ffffff);
    background: var(--bs-glass-bg, rgba(255, 255, 255, 0.03));
}

.svc-repair-types-tab--active {
    background: var(--bs-glass-bg, rgba(255, 255, 255, 0.03));
    border-bottom-color: var(--bs-primary-blue, #118df0);
    color: var(--bs-text-white, #ffffff);
}

.svc-repair-types-tab--emergency.svc-repair-types-tab--active {
    border-bottom-color: var(--bs-accent-orange, #f97316);
}

/* Tab Icon */
.svc-repair-types-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary-blue, #118df0);
}

.svc-repair-types-tab-icon--emergency {
    color: var(--bs-accent-orange, #f97316);
}

.svc-repair-types-tab-icon svg {
    width: 16px;
    height: 16px;
}

/* Tab Panels Container */
.svc-repair-types-panels {
    background: var(--bs-glass-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--bs-glass-border, rgba(255, 255, 255, 0.08));
    border-top: none;
}

/* Individual Panel */
.svc-repair-types-panel {
    display: none;
    padding: 2rem;
}

.svc-repair-types-panel--active {
    display: block;
}

/* Emergency Panel - orange border on the container */
.svc-repair-types-panel--emergency.svc-repair-types-panel--active {
    border: 1px solid var(--bs-accent-orange, #f97316);
    margin: -1px;
}

/* Panel Grid - 2-column when image present */
.svc-repair-types-panel-grid {
    display: block;
}

.svc-repair-types-panel--has-image .svc-repair-types-panel-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: start;
}

/* Content column takes full width when no image */
.svc-repair-types-panel-content {
    min-width: 0;
}

/* Image column */
.svc-repair-types-panel-image {
    position: relative;
}

.svc-repair-types-panel-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--bs-radius-sm, 6px);
}

/* Gradient fade overlay on edges */
.svc-repair-types-panel-image::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--bs-radius-sm, 6px);
    background: radial-gradient(
        ellipse at center,
        transparent 50%,
        rgba(15, 23, 42, 0.4) 85%,
        rgba(15, 23, 42, 0.8) 100%
    );
    pointer-events: none;
}

/* Emergency variant - orange-tinted fade */
.svc-repair-types-panel--emergency .svc-repair-types-panel-image::after {
    background: radial-gradient(
        ellipse at center,
        transparent 50%,
        rgba(30, 20, 15, 0.4) 85%,
        rgba(30, 20, 15, 0.8) 100%
    );
}

/* Responsive: stack on tablet and below */
@media (max-width: 900px) {
    .svc-repair-types-panel--has-image .svc-repair-types-panel-grid {
        grid-template-columns: 1fr;
    }

    .svc-repair-types-panel-image {
        order: -1;
        margin-bottom: 1.5rem;
    }

    .svc-repair-types-panel-image img {
        max-width: 400px;
    }
}

/* Panel Title */
.svc-repair-types-panel-title {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--bs-text-white, #ffffff);
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

/* Micro Intro Badge */
.svc-repair-types-micro-intro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 0.875rem;
    background: rgba(17, 141, 240, 0.15);
    margin-bottom: 0.75rem;
}

.svc-repair-types-micro-intro--emergency {
    background: rgba(249, 115, 22, 0.15);
}

.svc-repair-types-micro-intro-label {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-primary-blue, #118df0);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.svc-repair-types-micro-intro--emergency .svc-repair-types-micro-intro-label {
    color: var(--bs-accent-orange, #f97316);
}

/* Micro Intro Text */
.svc-repair-types-micro-intro-text {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--bs-text-white, #ffffff);
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

/* Panel Content - WYSIWYG Styling */
.svc-repair-types-content {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
}

.svc-repair-types-content p {
    font-size: 0.9375rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
    margin: 0 0 1rem 0;
    line-height: 1.7;
}

.svc-repair-types-content p:last-child {
    margin-bottom: 0;
}

.svc-repair-types-content strong {
    color: var(--bs-text-white, #ffffff);
    font-weight: 600;
}

/* Links with external icon */
.svc-repair-types-content a {
    color: var(--bs-primary-blue, #118df0);
    text-decoration: none;
    transition: color 0.2s ease;
}

.svc-repair-types-content a:hover {
    color: var(--bs-primary-blue-light, #4aa8f4);
    text-decoration: underline;
}

.svc-repair-types-content a[href^="http"]::after,
.svc-repair-types-content a[href^="/"]::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23118df0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Bullet Lists */
.svc-repair-types-content ul {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
}

.svc-repair-types-content ul li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.625rem;
    font-size: 0.875rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
    line-height: 1.5;
}

.svc-repair-types-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25rem;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Emergency tab: orange checkmarks */
.svc-repair-types-content--emergency ul li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}

/* Blockquotes - Highlight List Items (blue left border) */
.svc-repair-types-content blockquote {
    margin: 0 0 1rem 0;
    padding: 0.875rem 1.125rem;
    background: rgba(17, 141, 240, 0.05);
    border-left: 3px solid var(--bs-primary-blue, #118df0);
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 0.875rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
    line-height: 1.6;
}

.svc-repair-types-content blockquote:last-of-type {
    margin-bottom: 1.25rem;
}

.svc-repair-types-content blockquote p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.svc-repair-types-content blockquote strong {
    color: var(--bs-text-white, #ffffff);
    font-weight: 600;
}

/* Emergency tab: orange border for blockquotes */
.svc-repair-types-content--emergency blockquote {
    background: rgba(249, 115, 22, 0.05);
    border-left-color: var(--bs-accent-orange, #f97316);
}

/* =============================================
   Callout Box - Consistent Global Styling
   Used for info callouts (blue) and emergency (orange)
   ============================================= */

/* Base callout styles - shared between all variants */
.svc-repair-types-callout,
.svc-repair-types-emergency-cta {
    margin-top: 1.5rem;
    padding: 1.125rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--bs-font-body, 'Inter', sans-serif);
}

/* Info Callout (Blue) - AlertTriangle icon, text only */
.svc-repair-types-callout {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--bs-primary-blue, #118df0);
}

.svc-repair-types-callout svg {
    color: var(--bs-primary-blue, #118df0);
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.svc-repair-types-callout p {
    font-size: 0.9375rem;
    color: var(--bs-text-white, #ffffff);
    margin: 0;
    line-height: 1.5;
    font-weight: 500;
}

/* Emergency Callout (Orange) - same styling, different color */
.svc-repair-types-callout--emergency {
    background: rgba(249, 115, 22, 0.1);
    border-color: var(--bs-accent-orange, #f97316);
}

.svc-repair-types-callout--emergency svg {
    color: var(--bs-accent-orange, #f97316);
}

/* Emergency CTA Bar (Orange) - Phone icon + button */
.svc-repair-types-emergency-cta {
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid var(--bs-accent-orange, #f97316);
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.svc-repair-types-emergency-cta-text {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.svc-repair-types-emergency-cta-text svg {
    color: var(--bs-accent-orange, #f97316);
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.svc-repair-types-emergency-cta-text span {
    font-size: 0.9375rem;
    color: var(--bs-text-white, #ffffff);
    font-weight: 500;
}

.svc-repair-types-emergency-cta-btn {
    padding: 0.625rem 1.5rem;
    background: var(--bs-accent-orange, #f97316);
    color: #ffffff;
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s ease;
}

.svc-repair-types-emergency-cta-btn:hover {
    background: #ea580c;
    color: #ffffff;
}

.svc-repair-types-emergency-cta-btn svg {
    width: 16px;
    height: 16px;
}

/* Responsive: Tablet */
@media (max-width: 1024px) {
    .svc-repair-types-section {
        padding: 4rem 0;
    }

    .svc-repair-types-header h2 {
        font-size: 1.75rem;
    }

    .svc-repair-types-panel {
        padding: 1.5rem;
    }

    .svc-repair-types-panel-title {
        font-size: 1.375rem;
    }
}

/* Responsive: Mobile */
@media (max-width: 768px) {
    .svc-repair-types-section {
        padding: 3.5rem 0;
    }

    .svc-repair-types-header h2 {
        font-size: 1.5rem;
    }

    .svc-repair-types-tabs {
        gap: 2px;
    }

    .svc-repair-types-tab {
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
    }

    .svc-repair-types-tab-icon svg {
        width: 14px;
        height: 14px;
    }

    .svc-repair-types-panel {
        padding: 1.25rem;
    }

    .svc-repair-types-panel-title {
        font-size: 1.25rem;
    }

    .svc-repair-types-micro-intro-text {
        font-size: 1rem;
    }

    .svc-repair-types-content p {
        font-size: 0.875rem;
    }

    .svc-repair-types-emergency-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .svc-repair-types-emergency-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Section Callout (JOB-128) - Styled callout box pattern (blue theme) */
.svc-repair-types-section-callout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    margin-top: 2rem;
    background: linear-gradient(135deg, rgba(17, 141, 240, 0.08) 0%, rgba(17, 141, 240, 0.03) 100%);
    border: 1px solid rgba(17, 141, 240, 0.25);
    border-left: 4px solid #118df0;
    border-radius: 0.5rem;
}

.svc-repair-types-section-callout-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 141, 240, 0.15);
    border-radius: 50%;
    color: #118df0;
}

.svc-repair-types-section-callout-icon svg {
    width: 24px;
    height: 24px;
}

.svc-repair-types-section-callout-content {
    flex: 1;
    min-width: 0;
}

.svc-repair-types-section-callout-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    color: #fff;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.svc-repair-types-section-callout-text {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 0.75rem;
    line-height: 1.6;
}

.svc-repair-types-section-callout-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #118df0;
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}

.svc-repair-types-section-callout-link:hover {
    color: #3BA3F5;
    gap: 0.75rem;
}

.svc-repair-types-section-callout-link svg {
    transition: transform 0.2s ease;
}

.svc-repair-types-section-callout-link:hover svg {
    transform: translateX(2px);
}

/* Repair Types Section Callout Mobile */
@media (max-width: 575px) {
    .svc-repair-types-section-callout {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
        padding: 1.25rem;
    }

    .svc-repair-types-section-callout-icon {
        width: 40px;
        height: 40px;
    }

    .svc-repair-types-section-callout-icon svg {
        width: 20px;
        height: 20px;
    }

    .svc-repair-types-section-callout-title {
        font-size: 1rem;
    }

    .svc-repair-types-section-callout-text {
        font-size: 0.875rem;
    }

    .svc-repair-types-section-callout-link {
        justify-content: center;
    }
}

/* ===========================================
   WEATHER ACCORDION SECTION (JOB-122 Phase 5)
   Accordion-style weather impact section
   =========================================== */

.svc-weather-section {
    background: var(--bs-bg-section, #0a1628);
    padding: 5rem 0;
}

/* Section Headline */
.svc-weather-headline {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-weight: 700;
    font-size: 2rem;
    color: var(--bs-text-white, #ffffff);
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

/* Quick Takeaway Box */
.svc-weather-takeaway {
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--bs-primary-blue, #118df0);
    margin-bottom: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.svc-weather-takeaway-icon {
    width: 40px;
    height: 40px;
    background: var(--bs-primary-blue, #118df0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.svc-weather-takeaway-icon svg {
    color: #ffffff;
    width: 20px;
    height: 20px;
}

.svc-weather-takeaway-content {
    flex: 1;
}

.svc-weather-takeaway-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-primary-blue, #118df0);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.375rem;
}

.svc-weather-takeaway p {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 0.9375rem;
    color: var(--bs-text-white, #ffffff);
    margin: 0;
    line-height: 1.6;
}

/* Intro Text */
.svc-weather-intro {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 1rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
    margin: 0 0 2rem 0;
    line-height: 1.7;
}

/* Accordion Container */
.svc-weather-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Accordion Item */
.svc-weather-item {
    background: var(--bs-glass-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--bs-glass-border, rgba(255, 255, 255, 0.08));
    transition: border-color 0.2s ease;
}

.svc-weather-item--expanded {
    border-color: rgba(255, 255, 255, 0.15);
}

/* Accordion Header/Button */
.svc-weather-item-header {
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
}

/* Icon Container */
.svc-weather-item-icon {
    width: 48px;
    height: 48px;
    background: rgba(17, 141, 240, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.svc-weather-item--expanded .svc-weather-item-icon {
    background: linear-gradient(135deg, var(--bs-primary-blue, #118df0) 0%, var(--bs-primary-blue-dark, #0a6bc4) 100%);
}

.svc-weather-item-icon svg {
    color: var(--bs-primary-blue, #118df0);
    transition: color 0.2s ease;
}

.svc-weather-item--expanded .svc-weather-item-icon svg {
    color: #ffffff;
}

/* Title Wrapper */
.svc-weather-item-title-wrap {
    flex: 1;
    min-width: 0;
}

.svc-weather-item-title {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--bs-text-white, #ffffff);
    margin: 0;
    line-height: 1.3;
}

.svc-weather-item-preview {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
    font-size: 0.875rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
    margin: 0.25rem 0 0 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 500px;
}

/* Hide preview when expanded */
.svc-weather-item--expanded .svc-weather-item-preview {
    display: none;
}

/* Chevron */
.svc-weather-item-chevron {
    flex-shrink: 0;
    color: var(--bs-primary-blue, #118df0);
    transition: transform 0.2s ease;
}

.svc-weather-item--expanded .svc-weather-item-chevron {
    transform: rotate(180deg);
}

.svc-weather-item-chevron svg {
    width: 24px;
    height: 24px;
}

/* Accordion Panel */
.svc-weather-item-panel {
    padding: 0 1.5rem 1.5rem;
    padding-left: 5.5rem; /* Align with title (1.5rem + 48px icon + 1rem gap) */
}

/* Content Styling */
.svc-weather-item-content {
    font-family: var(--bs-font-body, 'Inter', sans-serif);
}

.svc-weather-item-content p {
    font-size: 0.9375rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
    margin: 0 0 1rem 0;
    line-height: 1.7;
}

.svc-weather-item-content p:last-child {
    margin-bottom: 0;
}

/* Bullet Lists */
.svc-weather-item-content ul {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
}

.svc-weather-item-content li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
    line-height: 1.5;
}

.svc-weather-item-content li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.375rem;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23118df0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Tip Box (Blockquotes) - Blue left border */
.svc-weather-item-content blockquote {
    padding: 1rem;
    background: rgba(17, 141, 240, 0.1);
    border-left: 3px solid var(--bs-primary-blue, #118df0);
    margin: 1rem 0;
}

.svc-weather-item-content blockquote p {
    font-size: 0.875rem;
    color: var(--bs-primary-blue-light, #4aa8f4);
    margin: 0;
    line-height: 1.5;
    font-weight: 600;
}

/* Important Box - Orange styling for "Important:" text */
.svc-weather-item-content p strong:first-child {
    color: var(--bs-text-white, #ffffff);
}

/* Bold text styling */
.svc-weather-item-content strong {
    color: var(--bs-text-white, #ffffff);
    font-weight: 600;
}

/* Responsive: Tablet */
@media (max-width: 1024px) {
    .svc-weather-section {
        padding: 4rem 0;
    }

    .svc-weather-headline {
        font-size: 1.75rem;
    }

    .svc-weather-item-panel {
        padding-left: 1.5rem;
    }
}

/* Responsive: Mobile */
@media (max-width: 768px) {
    .svc-weather-section {
        padding: 3.5rem 0;
    }

    .svc-weather-headline {
        font-size: 1.5rem;
    }

    .svc-weather-takeaway {
        flex-direction: column;
        gap: 0.75rem;
    }

    .svc-weather-takeaway-icon {
        width: 36px;
        height: 36px;
    }

    .svc-weather-item-header {
        padding: 1rem;
        gap: 0.75rem;
    }

    .svc-weather-item-icon {
        width: 40px;
        height: 40px;
    }

    .svc-weather-item-icon svg {
        width: 18px;
        height: 18px;
    }

    .svc-weather-item-title {
        font-size: 1rem;
    }

    .svc-weather-item-preview {
        display: none;
    }

    .svc-weather-item-panel {
        padding: 0 1rem 1rem;
    }

    .svc-weather-item-content p {
        font-size: 0.875rem;
    }
}

/* Weather Section Callout (JOB-128)
   Insurance/storm damage info callout box */
.svc-weather-callout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    margin-top: 2rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.03) 100%);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-left: 4px solid #22c55e;
    border-radius: 0.5rem;
}

.svc-weather-callout-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 50%;
    color: #22c55e;
}

.svc-weather-callout-icon svg {
    width: 24px;
    height: 24px;
}

.svc-weather-callout-content {
    flex: 1;
    min-width: 0;
}

.svc-weather-callout-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    color: #fff;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.svc-weather-callout-text {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 0.75rem;
    line-height: 1.6;
}

.svc-weather-callout-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #22c55e;
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}

.svc-weather-callout-link:hover {
    color: #4ade80;
    gap: 0.75rem;
}

.svc-weather-callout-link svg {
    transition: transform 0.2s ease;
}

.svc-weather-callout-link:hover svg {
    transform: translateX(2px);
}

/* Weather Callout Mobile */
@media (max-width: 575px) {
    .svc-weather-callout {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
        padding: 1.25rem;
    }

    .svc-weather-callout-icon {
        width: 40px;
        height: 40px;
    }

    .svc-weather-callout-icon svg {
        width: 20px;
        height: 20px;
    }

    .svc-weather-callout-title {
        font-size: 1rem;
    }

    .svc-weather-callout-text {
        font-size: 0.875rem;
    }

    .svc-weather-callout-link {
        justify-content: center;
    }
}

/* ===========================================
   REPAIR VS REPLACE WIDGET (JOB-122 Phase 5.5)
   Interactive quiz + comparison cards for repair/replacement decisions
   =========================================== */

.svc-rvr-section {
    background: var(--bs-bg-dark, #050a15);
    padding: 5rem 0;
}

/* Section Headline */
.svc-rvr-headline {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: #fff;
    margin: 0 0 1rem;
}

/* Fast Guidance Box */
.svc-rvr-fast-guidance {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--bs-primary, #118df0);
    margin-bottom: 2rem;
}

.svc-rvr-fast-guidance-icon {
    width: 40px;
    height: 40px;
    background: var(--bs-primary, #118df0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.svc-rvr-fast-guidance-icon svg {
    color: #fff;
}

.svc-rvr-fast-guidance-content {
    flex: 1;
}

.svc-rvr-fast-guidance-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-primary, #118df0);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.375rem;
}

.svc-rvr-fast-guidance-content p {
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    color: #fff;
    margin: 0;
    line-height: 1.6;
}

/* Intro Text */
.svc-rvr-intro {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 2rem;
    line-height: 1.7;
}

/* Tab Switcher */
.svc-rvr-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.svc-rvr-tab {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1.125rem 1.75rem;
    background: rgba(255, 255, 255, 0.02);
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

.svc-rvr-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
}

.svc-rvr-tab--active {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border-bottom-color: var(--bs-primary, #118df0);
    box-shadow: 0 -2px 10px rgba(17, 141, 240, 0.1);
}

.svc-rvr-tab-icon {
    font-size: 1.125rem;
}

/* Panels */
.svc-rvr-panel {
    min-height: 400px;
}

.svc-rvr-comparison-panel--no-tabs {
    min-height: auto;
}

/* Quiz Panel */
.svc-rvr-quiz-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
}

/* Quiz Progress */
.svc-rvr-quiz-progress {
    margin-bottom: 2rem;
}

.svc-rvr-quiz-progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.svc-rvr-quiz-progress-text {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
}

.svc-rvr-quiz-progress-percent {
    font-size: 0.8125rem;
    color: var(--bs-primary, #118df0);
}

.svc-rvr-quiz-progress-bar {
    height: 6px;
    background: var(--bs-bg-dark, #050a15);
    overflow: hidden;
}

.svc-rvr-quiz-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--bs-primary, #118df0) 0%, #4aa8f4 100%);
    transition: width 0.3s ease;
}

/* Quiz Question */
.svc-rvr-quiz-question {
    animation: svcRvrFadeIn 0.3s ease;
}

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

.svc-rvr-quiz-question-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.svc-rvr-quiz-question-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--bs-primary, #118df0) 0%, #0a6bc4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.svc-rvr-quiz-question-icon svg {
    color: #fff;
}

.svc-rvr-quiz-question-text {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #fff;
    margin: 0;
}

/* Quiz Options */
.svc-rvr-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.svc-rvr-quiz-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--bs-bg-dark, #050a15);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.9375rem;
    font-family: 'Inter', sans-serif;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.svc-rvr-quiz-option:hover {
    border-color: var(--bs-primary, #118df0);
    background: rgba(17, 141, 240, 0.1);
}

.svc-rvr-quiz-option--selected {
    border-color: var(--bs-primary, #118df0);
    background: rgba(17, 141, 240, 0.15);
    pointer-events: none;
}

.svc-rvr-quiz-option-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--bs-primary, #118df0);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-primary, #118df0);
    flex-shrink: 0;
}

.svc-rvr-quiz-option-label {
    flex: 1;
}

/* Quiz Results */
.svc-rvr-quiz-results {
    text-align: center;
    animation: svcRvrFadeIn 0.3s ease;
}

.svc-rvr-quiz-result-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svc-rvr-quiz-results[data-recommendation="repair"] .svc-rvr-quiz-result-icon {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.svc-rvr-quiz-results[data-recommendation="replace"] .svc-rvr-quiz-result-icon {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.svc-rvr-quiz-results[data-recommendation="inspection"] .svc-rvr-quiz-result-icon {
    background: linear-gradient(135deg, var(--bs-primary, #118df0) 0%, #0a6bc4 100%);
}

.svc-rvr-quiz-result-icon svg {
    color: #fff;
}

.svc-rvr-quiz-result-headline {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    color: #fff;
    margin: 0 0 0.75rem;
}

.svc-rvr-quiz-result-confidence {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.svc-rvr-quiz-result-confidence--high {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.svc-rvr-quiz-result-confidence--moderate {
    background: rgba(17, 141, 240, 0.15);
    color: var(--bs-primary, #118df0);
}

.svc-rvr-quiz-result-confidence--assessment {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.svc-rvr-quiz-result-text {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 auto 2rem;
    max-width: 600px;
    line-height: 1.7;
}

/* Quiz Indicator Bar */
.svc-rvr-quiz-indicator {
    margin-bottom: 2rem;
}

.svc-rvr-quiz-indicator-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.svc-rvr-quiz-indicator-repair {
    color: #22c55e;
}

.svc-rvr-quiz-indicator-replace {
    color: #f97316;
}

.svc-rvr-quiz-indicator-bar {
    height: 12px;
    background: linear-gradient(90deg, #22c55e 0%, var(--bs-primary, #118df0) 50%, #f97316 100%);
    position: relative;
}

.svc-rvr-quiz-indicator-marker {
    position: absolute;
    top: -4px;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 3px solid var(--bs-bg-dark, #050a15);
    transform: translateX(-50%);
    transition: left 0.5s ease;
}

/* Quiz Result CTAs */
.svc-rvr-quiz-result-ctas {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Comparison Grid */
.svc-rvr-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

/* Comparison Cards */
.svc-rvr-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 1.75rem;
}

.svc-rvr-card--repair {
    border: 2px solid #22c55e;
}

.svc-rvr-card--replace {
    border: 2px solid #f97316;
}

.svc-rvr-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.svc-rvr-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.svc-rvr-card--repair .svc-rvr-card-icon {
    background: rgba(34, 197, 94, 0.15);
    border: 2px solid #22c55e;
}

.svc-rvr-card--repair .svc-rvr-card-icon svg {
    color: #22c55e;
}

.svc-rvr-card--replace .svc-rvr-card-icon {
    background: rgba(249, 115, 22, 0.15);
    border: 2px solid #f97316;
}

.svc-rvr-card--replace .svc-rvr-card-icon svg {
    color: #f97316;
}

.svc-rvr-card-titles {
    flex: 1;
}

.svc-rvr-card-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.svc-rvr-card--repair .svc-rvr-card-label {
    color: #22c55e;
}

.svc-rvr-card--replace .svc-rvr-card-label {
    color: #f97316;
}

.svc-rvr-card-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.375rem;
    color: #fff;
    margin: 0;
}

/* Card List */
.svc-rvr-card-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-rvr-card-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.svc-rvr-card-item:last-child {
    margin-bottom: 0;
}

.svc-rvr-card-item svg {
    flex-shrink: 0;
    margin-top: 0.1875rem;
}

.svc-rvr-card--repair .svc-rvr-card-item svg {
    color: #22c55e;
}

.svc-rvr-card--replace .svc-rvr-card-item svg {
    color: #f97316;
}

.svc-rvr-card-item span {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

/* Evaluation Section */
.svc-rvr-evaluation {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.75rem;
    margin-bottom: 2rem;
}

.svc-rvr-evaluation-headline {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    color: #fff;
    margin: 0 0 1.25rem;
}

.svc-rvr-evaluation-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.svc-rvr-evaluation-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.625rem;
}

.svc-rvr-evaluation-icon {
    width: 44px;
    height: 44px;
    background: rgba(17, 141, 240, 0.1);
    border: 1px solid var(--bs-primary, #118df0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.svc-rvr-evaluation-icon svg {
    color: var(--bs-primary, #118df0);
}

.svc-rvr-evaluation-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}

/* CTA Wrap */
.svc-rvr-cta-wrap {
    text-align: center;
}

/* Buttons */
.svc-rvr-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.svc-rvr-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--bs-primary, #118df0) 0%, #0a6bc4 100%);
}

.svc-rvr-btn--primary:hover {
    background: linear-gradient(135deg, #4aa8f4 0%, var(--bs-primary, #118df0) 100%);
    color: #fff;
}

.svc-rvr-btn--secondary {
    color: var(--bs-primary, #118df0);
    background: transparent;
    border: 2px solid var(--bs-primary, #118df0);
}

.svc-rvr-btn--secondary:hover {
    background: rgba(17, 141, 240, 0.1);
    color: var(--bs-primary, #118df0);
}

/* Trust Quote */
.svc-rvr-trust-quote {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 4px solid var(--bs-primary, #118df0);
    margin: 2.5rem 0 0;
}

.svc-rvr-trust-quote p {
    font-family: 'Inter', sans-serif;
    font-size: 1.0625rem;
    font-style: italic;
    color: #fff;
    margin: 0;
    line-height: 1.6;
}

/* ===========================================
   REPAIR VS REPLACE - RESPONSIVE
   =========================================== */

/* Tablet */
@media (max-width: 1024px) {
    .svc-rvr-section {
        padding: 4rem 0;
    }

    .svc-rvr-headline {
        font-size: 1.75rem;
    }

    .svc-rvr-evaluation-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .svc-rvr-section {
        padding: 3.5rem 0;
    }

    .svc-rvr-headline {
        font-size: 1.5rem;
    }

    .svc-rvr-fast-guidance {
        flex-direction: column;
        gap: 0.75rem;
    }

    .svc-rvr-fast-guidance-icon {
        width: 36px;
        height: 36px;
    }

    .svc-rvr-tabs {
        flex-direction: column;
        gap: 0;
    }

    .svc-rvr-tab {
        justify-content: center;
        border-bottom: none;
        border-left: 2px solid transparent;
    }

    .svc-rvr-tab--active {
        border-left-color: var(--bs-primary, #118df0);
        border-bottom-color: transparent;
    }

    .svc-rvr-quiz-panel {
        padding: 1.5rem;
    }

    .svc-rvr-quiz-question-header {
        flex-direction: column;
        text-align: center;
    }

    .svc-rvr-quiz-question-text {
        font-size: 1.25rem;
    }

    .svc-rvr-comparison-grid {
        grid-template-columns: 1fr;
    }

    .svc-rvr-evaluation-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .svc-rvr-evaluation-item:nth-child(5) {
        grid-column: span 2;
    }

    .svc-rvr-quiz-result-ctas {
        flex-direction: column;
    }

    .svc-rvr-btn {
        width: 100%;
        justify-content: center;
    }

    .svc-rvr-card {
        padding: 1.25rem;
    }

    .svc-rvr-card-title {
        font-size: 1.125rem;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .svc-rvr-container {
        padding: 0 1rem;
    }

    .svc-rvr-evaluation-grid {
        grid-template-columns: 1fr;
    }

    .svc-rvr-evaluation-item:nth-child(5) {
        grid-column: auto;
    }

    .svc-rvr-evaluation-item {
        flex-direction: row;
        text-align: left;
        gap: 1rem;
    }
}

/* ===========================================
   WHY CHOOSE KFX SECTION (JOB-122 Phase 6)
   Option 1: Highlight First + Card Grid layout
   =========================================== */

.svc-why-section {
    background: var(--bs-bg-section, #0a1628);
    padding: 5rem 0;
}

/* Section Header */
.svc-why-header {
    margin-bottom: 3rem;
}

.svc-why-headline {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: #fff;
    margin: 0 0 0.75rem;
}

.svc-why-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    max-width: 700px;
    line-height: 1.7;
}

/* Primary Differentiators - Large Feature Cards */
.svc-why-primary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.svc-why-primary-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.svc-why-primary-glow {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(17, 141, 240, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.svc-why-primary-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--bs-primary, #118df0) 0%, #0a6bc4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.svc-why-primary-icon svg {
    color: #fff;
}

.svc-why-primary-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #fff;
    margin: 0 0 0.5rem;
}

.svc-why-primary-subhead {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-primary, #118df0);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.svc-why-primary-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.7;
}

/* Secondary Differentiators - Smaller Cards */
.svc-why-secondary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 3rem;
}

.svc-why-secondary-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.5rem;
}

.svc-why-secondary-icon {
    width: 48px;
    height: 48px;
    background: rgba(17, 141, 240, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.svc-why-secondary-icon svg {
    color: var(--bs-primary, #118df0);
}

.svc-why-secondary-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    color: #fff;
    margin: 0 0 0.5rem;
}

.svc-why-secondary-subhead {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--bs-primary, #118df0);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.svc-why-secondary-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.6;
}

/* Testimonial Card */
.svc-why-testimonial {
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--bs-primary, #118df0);
    position: relative;
}

.svc-why-testimonial-quote-icon {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    opacity: 0.3;
}

.svc-why-testimonial-quote-icon svg {
    color: var(--bs-primary, #118df0);
}

/* Star Rating */
.svc-why-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 1rem;
}

.svc-why-stars svg {
    color: #fbbf24;
}

.svc-why-testimonial-text {
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    font-style: italic;
    color: #fff;
    margin: 0 0 1rem;
    line-height: 1.7;
}

.svc-why-testimonial-attribution {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.svc-why-testimonial-author {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
}

.svc-why-testimonial-source {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Responsive */
@media (max-width: 991px) {
    .svc-why-primary-grid {
        grid-template-columns: 1fr;
    }

    .svc-why-secondary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .svc-why-section {
        padding: 3rem 0;
    }

    .svc-why-headline {
        font-size: 1.75rem;
    }

    .svc-why-secondary-grid {
        grid-template-columns: 1fr;
    }

    .svc-why-testimonial-text {
        font-size: 1rem;
    }

    .svc-why-testimonial-quote-icon {
        display: none;
    }
}

/* ===========================================
   COST BREAKDOWN SECTION (JOB-127)
   =========================================== */
.svc-cost-section {
    background: var(--bs-bg-section, #0a1628);
    padding: 5rem 0;
}

.svc-cost-intro {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

/* Pricing Tiers - 3-column grid */
.svc-cost-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.svc-cost-tier-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.svc-cost-tier-label {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.svc-cost-tier-size {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1rem;
}

.svc-cost-tier-price {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--bs-primary, #118df0);
}

/* Cost Factors - 2-column grid */
.svc-cost-factors {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.svc-cost-factor {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.svc-cost-factor svg {
    flex-shrink: 0;
    color: var(--bs-primary, #118df0);
    margin-top: 2px;
}

.svc-cost-factor-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.svc-cost-factor-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.9375rem;
    color: #fff;
}

.svc-cost-factor-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Guidance Callout */
.svc-cost-guidance {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(17, 141, 240, 0.1);
    border: 1px solid rgba(17, 141, 240, 0.2);
    border-left: 3px solid var(--bs-primary, #118df0);
}

.svc-cost-guidance svg {
    flex-shrink: 0;
    color: var(--bs-primary, #118df0);
    margin-top: 2px;
}

.svc-cost-guidance-content strong {
    display: block;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.svc-cost-guidance-content p {
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.7;
}

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

@media (max-width: 767px) {
    .svc-cost-section {
        padding: 3rem 0;
    }

    .svc-cost-tiers {
        grid-template-columns: 1fr;
    }

    .svc-cost-factors {
        grid-template-columns: 1fr;
    }

    .svc-cost-tier-price {
        font-size: 1.25rem;
    }

    .svc-cost-guidance {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ===========================================
   LIGHTBOX (Gallery Modal)
   =========================================== */

.kfx-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.kfx-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.kfx-lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 21, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.kfx-lightbox-content {
    position: relative;
    max-width: 65vw;
    max-height: 65vh;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.kfx-lightbox.active .kfx-lightbox-content {
    transform: scale(1);
}

.kfx-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: 65vh;
    width: auto;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.kfx-lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 40px;
    height: 40px;
    background: var(--bs-glass-bg);
    border: 1px solid var(--bs-glass-border);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.kfx-lightbox-close:hover {
    background: var(--bs-glass-bg-hover);
    border-color: var(--bs-primary-blue);
}

.kfx-lightbox-close svg {
    width: 20px;
    height: 20px;
    stroke: var(--bs-text-white);
}

.kfx-lightbox-caption {
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--bs-text-muted);
    font-size: 0.875rem;
}

/* Navigation arrows for multiple images */
.kfx-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: var(--bs-glass-bg);
    border: 1px solid var(--bs-glass-border);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.kfx-lightbox-nav:hover {
    background: var(--bs-glass-bg-hover);
    border-color: var(--bs-primary-blue);
}

.kfx-lightbox-nav svg {
    width: 24px;
    height: 24px;
    stroke: var(--bs-text-white);
}

.kfx-lightbox-prev {
    left: 20px;
}

.kfx-lightbox-next {
    right: 20px;
}

.kfx-lightbox-counter {
    position: absolute;
    top: 20px;
    left: 20px;
    color: var(--bs-text-muted);
    font-size: 0.875rem;
    background: var(--bs-glass-bg);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: 1px solid var(--bs-glass-border);
}

/* Hide nav when only one image */
.kfx-lightbox[data-count="1"] .kfx-lightbox-nav,
.kfx-lightbox[data-count="1"] .kfx-lightbox-counter {
    display: none;
}

@media (max-width: 767px) {
    .kfx-lightbox-nav {
        width: 40px;
        height: 40px;
    }

    .kfx-lightbox-prev {
        left: 10px;
    }

    .kfx-lightbox-next {
        right: 10px;
    }

    .kfx-lightbox-close {
        top: -45px;
        right: 0;
    }
}

/* ===========================================
   STORM DATA TABLE (JOB-138)
   =========================================== */

.storm-data-section {
    background: var(--bs-bg-section, #0a1628);
}

/* Stats Grid */
.storm-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 40px;
}

.storm-stat-card {
    background: var(--bs-glass-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--bs-glass-border, rgba(255, 255, 255, 0.08));
    padding: 16px;
    text-align: center;
}

.storm-stat-value {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.storm-stat-label {
    color: var(--bs-text-white, #ffffff);
    font-size: 0.75rem;
    font-weight: 600;
}

.storm-stat-sublabel {
    color: var(--bs-text-subtle, rgba(255, 255, 255, 0.4));
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Stat color variants */
.storm-stat-card.stat-red .storm-stat-value {
    color: #ef4444;
}

.storm-stat-card.stat-orange .storm-stat-value {
    color: #f97316;
}

.storm-stat-card.stat-yellow .storm-stat-value {
    color: #fbbf24;
}

.storm-stat-card.stat-blue .storm-stat-value {
    color: var(--bs-primary-blue, #118df0);
}

.storm-stat-card.stat-cyan .storm-stat-value {
    color: #06b6d4;
}

/* Table Wrapper */
.storm-table-wrapper {
    background: var(--bs-glass-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--bs-glass-border, rgba(255, 255, 255, 0.08));
    overflow: hidden;
    margin-bottom: 20px;
}

/* Data Table */
.storm-data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--bs-font-body, 'Inter', sans-serif);
}

.storm-data-table thead {
    background: rgba(17, 141, 240, 0.1);
}

.storm-data-table th {
    padding: 14px 16px;
    color: var(--bs-primary-blue, #118df0);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid var(--bs-glass-border, rgba(255, 255, 255, 0.08));
}

.storm-data-table tbody tr {
    border-bottom: 1px solid var(--bs-glass-border, rgba(255, 255, 255, 0.08));
    position: relative;
    transition: background 0.2s ease;
}

.storm-data-table tbody tr:last-child {
    border-bottom: none;
}

.storm-data-table tbody tr:hover {
    background: rgba(17, 141, 240, 0.05);
}

/* Severity left border indicator */
.storm-data-table tbody tr::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    transition: width 0.2s ease;
}

.storm-data-table tbody tr:hover::before {
    width: 4px;
}

.storm-data-table tbody tr.severity-catastrophic::before {
    background: #ef4444;
}

.storm-data-table tbody tr.severity-extreme::before {
    background: #f97316;
}

.storm-data-table tbody tr.severity-severe::before {
    background: #fbbf24;
}

.storm-data-table tbody tr.severity-moderate::before {
    background: #06b6d4;
}

.storm-data-table td {
    padding: 16px;
    font-size: 0.8125rem;
    vertical-align: middle;
}

.storm-data-table .storm-date {
    color: var(--bs-text-white, #ffffff);
    font-weight: 500;
    white-space: nowrap;
}

.storm-data-table .storm-type {
    color: var(--bs-text-white, #ffffff);
}

.storm-data-table .storm-areas {
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
}

.storm-data-table .storm-impact {
    color: var(--bs-primary-blue-light, #4aa8f4);
    font-weight: 600;
}

/* Severity Badge */
.severity-badge {
    display: inline-block;
    padding: 5px 10px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.severity-badge.severity-catastrophic {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.severity-badge.severity-extreme {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.severity-badge.severity-severe {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.severity-badge.severity-moderate {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}

/* Source Attribution */
.storm-source {
    font-size: 0.75rem;
    color: var(--bs-text-subtle, rgba(255, 255, 255, 0.4));
    margin: 0 0 32px;
}

/* CTA Callout */
.storm-cta-callout {
    background: linear-gradient(135deg, var(--bs-bg-card, #0d1f35) 0%, rgba(17, 141, 240, 0.1) 100%);
    border: 1px solid rgba(17, 141, 240, 0.3);
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.storm-cta-content h3 {
    font-family: var(--bs-font-heading, 'Roboto Condensed', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-text-white, #ffffff);
    margin: 0 0 8px;
}

.storm-cta-content p {
    font-size: 0.9375rem;
    color: var(--bs-text-muted, rgba(255, 255, 255, 0.6));
    margin: 0;
    line-height: 1.6;
    max-width: 600px;
}

.storm-cta-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.storm-cta-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .storm-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .storm-stats-grid .storm-stat-card:nth-child(4),
    .storm-stats-grid .storm-stat-card:nth-child(5) {
        grid-column: span 1;
    }

    .storm-cta-callout {
        flex-direction: column;
        text-align: center;
    }

    .storm-cta-content p {
        max-width: none;
    }

    .storm-cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .storm-cta-actions .btn {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .storm-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .storm-stats-grid .storm-stat-card:last-child {
        grid-column: span 2;
    }

    .storm-stat-card {
        padding: 12px;
    }

    .storm-stat-value {
        font-size: 1.5rem;
    }

    .storm-table-wrapper {
        overflow-x: auto;
    }

    .storm-data-table {
        min-width: 500px;
    }

    .storm-data-table th,
    .storm-data-table td {
        padding: 12px;
    }

    .storm-data-table .hide-mobile {
        display: none;
    }

    .storm-cta-callout {
        padding: 24px;
    }

    .storm-cta-content h3 {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .storm-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .storm-stat-value {
        font-size: 1.25rem;
    }

    .storm-stat-label {
        font-size: 0.6875rem;
    }
}

/* ===========================================
   WEATHER WIDGET (JOB-139)
   Live NWS weather for Storm Damage page
   =========================================== */

.weather-widget {
    width: 100%;
    background: var(--bg-card, #0d1f35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--font-body, 'Inter', sans-serif);
    overflow: hidden;
}

/* Header */
.weather-widget-header {
    background: rgba(17, 141, 240, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.weather-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.weather-header-icon {
    color: var(--primary-blue, #118df0);
}

.weather-header-title span {
    font-family: var(--font-heading, 'Roboto Condensed', sans-serif);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

.weather-refresh-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s ease;
}

.weather-refresh-btn:hover {
    color: var(--primary-blue, #118df0);
}

.weather-refresh-btn.loading svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Alert Section */
.weather-alert {
    background: var(--alert-bg);
    border-bottom: 1px solid var(--alert-border);
    padding: 14px 16px;
    cursor: pointer;
}

.weather-alert-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.weather-alert-icon-wrap {
    width: 36px;
    height: 36px;
    background: color-mix(in srgb, var(--alert-border) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.weather-alert-icon-wrap svg {
    color: var(--alert-text);
}

.weather-alert-info {
    flex: 1;
    min-width: 0;
}

.weather-alert-event {
    color: var(--alert-text);
    font-size: 13px;
    font-weight: 700;
}

.weather-alert-expires {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.weather-alert-expires svg {
    flex-shrink: 0;
}

.weather-alert-toggle {
    transition: transform 0.2s ease;
    display: flex;
}

.weather-alert-toggle svg {
    color: var(--alert-text);
}

.weather-alert[aria-expanded="true"] .weather-alert-toggle {
    transform: rotate(180deg);
}

/* Alert Expanded Content */
.weather-alert-expanded {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--alert-border) 40%, transparent);
}

.weather-alert-expanded[hidden] {
    display: none;
}

.weather-alert-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    line-height: 1.6;
    margin: 0 0 10px;
}

.weather-alert-instruction {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: color-mix(in srgb, var(--alert-border) 15%, transparent);
    padding: 10px;
}

.weather-alert-instruction svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--alert-text);
}

.weather-alert-instruction p {
    color: var(--alert-text);
    font-size: 11px;
    line-height: 1.5;
    margin: 0;
    font-weight: 600;
}

/* No Alert State */
.weather-no-alert {
    background: rgba(34, 197, 94, 0.1);
    border-bottom: 1px solid rgba(34, 197, 94, 0.3);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.weather-no-alert svg {
    color: #22c55e;
}

.weather-no-alert span {
    color: #22c55e;
    font-size: 13px;
    font-weight: 500;
}

/* Current Conditions */
.weather-current {
    padding: 20px 16px;
}

.weather-current-main {
    display: flex;
    align-items: center;
    gap: 16px;
}

.weather-icon-large {
    flex-shrink: 0;
}

.weather-icon-sun { color: #fbbf24; }
.weather-icon-moon { color: #4aa8f4; }
.weather-icon-cloud { color: rgba(255, 255, 255, 0.6); }
.weather-icon-cloud-sun { color: #fbbf24; }
.weather-icon-cloud-rain { color: #4aa8f4; }
.weather-icon-cloud-lightning { color: #fbbf24; }
.weather-icon-cloud-snow { color: #fff; }
.weather-icon-wind { color: rgba(255, 255, 255, 0.6); }
.weather-icon-thermometer { color: rgba(255, 255, 255, 0.6); }

.weather-temp-wrap {
    flex: 1;
}

.weather-temp {
    font-family: var(--font-heading, 'Roboto Condensed', sans-serif);
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.weather-temp-unit {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 2px;
}

.weather-forecast-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin-top: 4px;
}

/* Weather Details Row */
.weather-details {
    display: flex;
    gap: 20px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.weather-detail {
    display: flex;
    align-items: center;
    gap: 8px;
}

.weather-detail svg {
    color: rgba(255, 255, 255, 0.4);
}

.weather-detail span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

/* Forecast Grid */
.weather-forecast-grid {
    display: grid;
    grid-template-columns: repeat(var(--forecast-cols, 3), 1fr);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.weather-forecast-period {
    padding: 14px 8px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.weather-forecast-period.last {
    border-right: none;
}

.weather-period-name {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.weather-period-icon {
    margin-bottom: 6px;
    display: flex;
    justify-content: center;
}

.weather-period-temp {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

/* CTA Footer */
.weather-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--alert-bg);
    border-top: 1px solid var(--alert-border);
    padding: 14px 16px;
    color: var(--alert-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.2s ease;
}

.weather-cta:hover {
    background: color-mix(in srgb, var(--alert-bg) 80%, var(--alert-border) 20%);
}

.weather-cta svg {
    flex-shrink: 0;
}

/* Update Timestamp */
.weather-updated {
    background: rgba(0, 0, 0, 0.2);
    padding: 8px 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Severity-specific colors */
.weather-alert-extreme {
    --alert-bg: rgba(239, 68, 68, 0.2);
    --alert-border: #ef4444;
    --alert-text: #ef4444;
}

.weather-alert-severe {
    --alert-bg: rgba(249, 115, 22, 0.2);
    --alert-border: #f97316;
    --alert-text: #f97316;
}

.weather-alert-moderate {
    --alert-bg: rgba(251, 191, 36, 0.2);
    --alert-border: #fbbf24;
    --alert-text: #fbbf24;
}

.weather-alert-minor {
    --alert-bg: rgba(34, 197, 94, 0.2);
    --alert-border: #22c55e;
    --alert-text: #22c55e;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .weather-widget {
        max-width: 100%;
    }

    .weather-temp {
        font-size: 32px;
    }

    .weather-temp-unit {
        font-size: 16px;
    }
}

/* ===========================================
   BACK TO TOP BUTTON (JOB-150)
   =========================================== */

.back-to-top {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 48px;
    height: 48px;
    background: #118df0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(17, 141, 240, 0.25);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: #3ba3f5;
    box-shadow: 0 6px 20px rgba(17, 141, 240, 0.4);
    transform: translateY(-2px);
}

.back-to-top:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.back-to-top:active {
    transform: translateY(0);
}

.back-to-top svg {
    color: #fff;
    width: 24px;
    height: 24px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .back-to-top {
        width: 40px;
        height: 40px;
        bottom: 1.5rem;
        left: 1.5rem;
    }

    .back-to-top svg {
        width: 20px;
        height: 20px;
    }
}

/* ===========================================
   WEATHER ALERT BANNER (JOB-151)
   =========================================== */

.weather-alert-banner {
    position: relative;
    z-index: 50; /* Below mobile menu (999) and header (1000) */
    overflow: hidden;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.weather-alert-banner--moderate {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(10, 22, 40, 0.95) 100%);
    border-bottom: 1px solid rgba(245, 158, 11, 0.4);
}

.weather-alert-banner--severe {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(10, 22, 40, 0.95) 100%);
    border-bottom: 1px solid rgba(239, 68, 68, 0.5);
}

.weather-alert-banner__content {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1400px;
    width: 100%;
}

.weather-alert-banner__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.weather-alert-banner--moderate .weather-alert-banner__icon {
    background: rgba(245, 158, 11, 0.25);
    color: #f59e0b;
}

.weather-alert-banner--severe .weather-alert-banner__icon {
    background: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.weather-alert-banner__text {
    flex: 1;
    min-width: 0;
}

.weather-alert-banner__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

.weather-alert-banner--moderate .weather-alert-banner__label {
    color: #f59e0b;
}

.weather-alert-banner--severe .weather-alert-banner__label {
    color: #ef4444;
}

.weather-alert-banner__headline {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
}

.weather-alert-banner__expires {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.25rem;
}

.weather-alert-banner__actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.weather-alert-banner__cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.weather-alert-banner__cta--primary {
    color: #fff;
}

.weather-alert-banner--moderate .weather-alert-banner__cta--primary {
    background: #f59e0b;
}

.weather-alert-banner--severe .weather-alert-banner__cta--primary {
    background: #ef4444;
}

.weather-alert-banner__cta--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.weather-alert-banner__cta--secondary {
    background: transparent;
    color: #fff;
}

.weather-alert-banner--moderate .weather-alert-banner__cta--secondary {
    border: 1px solid #f59e0b;
}

.weather-alert-banner--severe .weather-alert-banner__cta--secondary {
    border: 1px solid #ef4444;
}

.weather-alert-banner__cta--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.weather-alert-banner__dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.3s ease;
}

.weather-alert-banner__dismiss:hover {
    color: #fff;
}

/* Hidden state for dismissed banner */
.weather-alert-banner.is-dismissed {
    display: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .weather-alert-banner {
        padding: 1rem;
    }

    .weather-alert-banner__content {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .weather-alert-banner__icon {
        width: 40px;
        height: 40px;
    }

    .weather-alert-banner__icon svg {
        width: 20px;
        height: 20px;
    }

    .weather-alert-banner__text {
        flex: 1 1 calc(100% - 60px);
    }

    .weather-alert-banner__headline {
        font-size: 0.9rem;
    }

    .weather-alert-banner__expires {
        font-size: 0.75rem;
    }

    .weather-alert-banner__actions {
        width: 100%;
        justify-content: center;
    }

    .weather-alert-banner__cta {
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
    }

    .weather-alert-banner__dismiss {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }
}

/* ===========================================
   EMERGENCY FLOAT BUTTON (JOB-151)
   =========================================== */

.emergency-float-button {
    position: fixed;
    bottom: 2rem;
    left: 5.5rem; /* Position to the right of back-to-top button (2rem + 48px + 1.5rem gap) */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: #ef4444;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
    transition: all 0.3s ease;
}

.emergency-float-button:hover {
    background: #dc2626;
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(239, 68, 68, 0.5);
}

.emergency-float-button:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.emergency-float-button__pulse {
    position: absolute;
    inset: 0;
    background: #ef4444;
    animation: emergencyPulse 2s ease-out infinite;
    z-index: -1;
}

@keyframes emergencyPulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.emergency-float-button__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.emergency-float-button__text {
    white-space: nowrap;
}

/* Extreme severity - extra urgency */
.emergency-float-button--extreme {
    animation: extremeShake 0.5s ease-in-out infinite;
}

@keyframes extremeShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

.emergency-float-button--extreme:hover {
    animation: none;
    transform: translateY(-3px);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .emergency-float-button {
        bottom: 1.5rem;
        left: 5rem; /* Adjusted for smaller back-to-top (40px + gap) */
        padding: 0.75rem 1rem;
        font-size: 0.8rem;
    }

    .emergency-float-button__icon svg {
        width: 20px;
        height: 20px;
    }
}

/* Very small screens - stack above back-to-top */
@media (max-width: 480px) {
    .emergency-float-button {
        left: 1.5rem;
        bottom: 5rem; /* Stack above back-to-top */
    }
}

/* ===========================================
   CHAT WIDGET (JOB-152)
   =========================================== */

.chat-widget {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1001;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Toggle Button */
.chat-widget__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 56px;
    height: 56px;
    padding: 0;
    background: #118df0;
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(17, 141, 240, 0.35);
    transition: all 0.3s ease;
}

.chat-widget__toggle:hover {
    background: #3ba3f5;
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(17, 141, 240, 0.45);
}

.chat-widget__toggle:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.chat-widget__toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.chat-widget__toggle-icon--close {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg);
}

.chat-widget__toggle-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* Toggle state when panel is open */
.chat-widget.is-open .chat-widget__toggle-icon--chat {
    opacity: 0;
    transform: rotate(90deg);
}

.chat-widget.is-open .chat-widget__toggle-icon--close {
    opacity: 1;
    transform: rotate(0);
}

/* Chat Panel */
.chat-widget__panel {
    position: absolute;
    bottom: calc(100% + 1rem);
    right: 0;
    width: 380px;
    max-height: 520px;
    background: rgba(10, 22, 40, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.chat-widget.is-open .chat-widget__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Panel Header */
.chat-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: rgba(17, 141, 240, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chat-widget__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    font-family: 'Roboto Condensed', 'Inter', sans-serif;
}

.chat-widget__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-widget__close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Panel Body */
.chat-widget__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

.chat-widget__intro {
    margin: 0 0 1.25rem 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.chat-widget__intro a {
    color: #118df0;
    text-decoration: none;
}

.chat-widget__intro a:hover {
    text-decoration: underline;
}

/* Honeypot (hidden from users) */
.chat-widget__honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* Form Fields */
.chat-widget__field {
    margin-bottom: 1rem;
}

.chat-widget__label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.chat-widget__label .required {
    color: #ef4444;
}

.chat-widget__input,
.chat-widget__textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.9375rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.chat-widget__input::placeholder,
.chat-widget__textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.chat-widget__input:focus,
.chat-widget__textarea:focus {
    outline: none;
    border-color: #118df0;
    background: rgba(17, 141, 240, 0.1);
    box-shadow: 0 0 0 3px rgba(17, 141, 240, 0.15);
}

.chat-widget__input.is-invalid,
.chat-widget__textarea.is-invalid {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.chat-widget__textarea {
    resize: vertical;
    min-height: 80px;
}

.chat-widget__error {
    display: none;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: #ef4444;
}

.chat-widget__field.has-error .chat-widget__error {
    display: block;
}

/* Submit Button */
.chat-widget__submit {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: #118df0;
    color: #fff;
    border: none;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.chat-widget__submit:hover:not(:disabled) {
    background: #3ba3f5;
    transform: translateY(-1px);
}

.chat-widget__submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.chat-widget__submit-loading {
    display: none;
    align-items: center;
    gap: 0.5rem;
}

.chat-widget__submit.is-loading .chat-widget__submit-text {
    display: none;
}

.chat-widget__submit.is-loading .chat-widget__submit-loading {
    display: flex;
}

.chat-widget__spinner {
    animation: chatSpinner 1s linear infinite;
}

@keyframes chatSpinner {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Success State */
.chat-widget__success,
.chat-widget__error-state {
    text-align: center;
    padding: 2rem 1rem;
}

.chat-widget__success-icon,
.chat-widget__error-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.chat-widget__success-icon svg {
    color: #22c55e;
}

.chat-widget__error-icon svg {
    color: #ef4444;
}

.chat-widget__success-title,
.chat-widget__error-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
}

.chat-widget__success-text,
.chat-widget__error-text {
    margin: 0 0 1.5rem 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.chat-widget__error-text a {
    color: #118df0;
}

.chat-widget__success-close,
.chat-widget__try-again {
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-widget__success-close:hover,
.chat-widget__try-again:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Mobile Styles */
@media (max-width: 768px) {
    .chat-widget {
        bottom: 1.5rem;
        right: 1.5rem;
    }

    .chat-widget__toggle {
        width: 48px;
        height: 48px;
    }

    .chat-widget__toggle svg {
        width: 20px;
        height: 20px;
    }

    .chat-widget__panel {
        width: calc(100vw - 3rem);
        max-width: 380px;
        max-height: 70vh;
    }
}

@media (max-width: 480px) {
    .chat-widget {
        bottom: 1rem;
        right: 1rem;
    }

    .chat-widget__panel {
        position: fixed;
        bottom: 70px;
        right: 1rem;
        left: 1rem;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 90px);
    }

    .chat-widget__body {
        padding: 1rem;
    }
}

/* Accessibility - reduce motion */
@media (prefers-reduced-motion: reduce) {
    .chat-widget__toggle,
    .chat-widget__panel,
    .chat-widget__input,
    .chat-widget__textarea,
    .chat-widget__submit {
        transition: none;
    }

    .chat-widget__spinner {
        animation: none;
    }
}

/* ===========================================
   MOBILE NAVIGATION REDESIGN (JOB-155)
   - Prominent Call Now button in header
   - Improved mobile menu overlay
   - Sticky bottom CTA bar
   =========================================== */

/* ----- MOBILE HEADER ADJUSTMENTS ----- */
@media (max-width: 767px) {
    /* Adjust nav-wrapper for mobile layout */
    .site-header .nav-wrapper {
        padding: 0.5rem 0;
    }

    .site-header .nav-brand {
        padding: 0.25rem 0;
    }

    /* Make logo smaller on mobile */
    .site-header .header-logo-img {
        max-height: 36px;
        width: auto;
    }
}

/* ----- MOBILE MENU ENHANCEMENTS (JOB-155) ----- */
@media (max-width: 767px) {
    /* Larger tap targets */
    .site-header .nav-menu-list > .menu-item > .nav-link {
        padding: 1rem 1.5rem;
        min-height: 52px;
        display: flex;
        align-items: center;
        font-size: 1rem;
        border-left: 3px solid transparent;
    }

    .site-header .nav-menu-list > .menu-item.current-menu-item > .nav-link,
    .site-header .nav-menu-list > .menu-item.current-menu-ancestor > .nav-link {
        border-left-color: var(--bs-primary-blue);
        background: rgba(17, 141, 240, 0.1);
    }

    /* Sub-menu items - larger tap targets */
    .site-header .nav-menu-list .sub-menu .nav-link {
        padding: 0.875rem 1.25rem 0.875rem 2.5rem;
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* Mega menu on mobile - better spacing */
    .site-header .mega-menu-inner {
        padding: 1.25rem;
    }

    .site-header .mega-menu-link {
        padding: 0.625rem 0 0.625rem 0.75rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ----- STICKY BOTTOM CTA BAR ----- */
.mobile-bottom-cta {
    display: none; /* Hidden on desktop */
}

@media (max-width: 767px) {
    .mobile-bottom-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.75rem 1rem;
        background: rgba(5, 10, 21, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        gap: 0.75rem;
        z-index: 100;
    }

    .mobile-bottom-cta-call {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.875rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: var(--bs-text-white);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9rem;
        min-height: 48px;
    }

    .mobile-bottom-cta-call svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .mobile-bottom-cta-call:hover,
    .mobile-bottom-cta-call:active {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.12);
    }

    .mobile-bottom-cta-estimate {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.875rem;
        background: linear-gradient(135deg, var(--bs-primary-blue) 0%, var(--bs-primary-blue-dark) 100%);
        color: var(--bs-text-white);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9rem;
        min-height: 48px;
        box-shadow: 0 4px 15px rgba(17, 141, 240, 0.3);
    }

    .mobile-bottom-cta-estimate:hover,
    .mobile-bottom-cta-estimate:active {
        background: linear-gradient(135deg, var(--bs-primary-blue-bright) 0%, var(--bs-primary-blue) 100%);
    }

    /* Add padding to body/footer to prevent content being hidden behind sticky bar */
    body {
        padding-bottom: 70px;
    }

    /* Adjust other fixed elements to account for bottom bar */
    .chat-widget {
        bottom: 80px !important;
    }

    .chat-widget__panel {
        bottom: 140px !important;
        max-height: calc(100vh - 160px) !important;
    }

    .emergency-float-btn {
        bottom: 80px;
    }

    .back-to-top {
        bottom: 80px;
    }
}

/* ----- MOBILE SIMPLIFIED FOOTER ----- */
.footer-mobile-simple {
    display: none; /* Hidden on desktop */
}

@media (max-width: 767px) {
    /* Hide full footer grid on mobile */
    .footer-main-clean {
        display: none;
    }

    /* Show simplified footer on mobile */
    .footer-mobile-simple {
        display: block;
        padding: 2rem 0;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .footer-mobile-logo {
        display: inline-block;
        margin-bottom: 1rem;
    }

    .footer-mobile-logo img {
        max-height: 40px;
        width: auto;
    }

    .footer-mobile-phone {
        display: block;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--bs-text-white);
        text-decoration: none;
        margin-bottom: 1.5rem;
    }

    .footer-mobile-links {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem 1.5rem;
    }

    .footer-mobile-links a {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        font-size: 0.9rem;
    }

    .footer-mobile-links a:hover {
        color: var(--bs-primary-blue);
    }

    /* Simplify footer bottom on mobile */
    .footer-bottom-clean {
        padding: 1rem 0 5rem; /* Extra padding for sticky bottom CTA */
    }

    .footer-bottom-flex {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .footer-legal {
        justify-content: center;
    }
}

/* Very small screens - adjust bottom CTA */
@media (max-width: 360px) {
    .mobile-bottom-cta {
        padding: 0.625rem 0.75rem;
        gap: 0.5rem;
    }

    .mobile-bottom-cta-call,
    .mobile-bottom-cta-estimate {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
}

/* ===========================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   Hide non-essential sections on mobile to reduce page weight
   =========================================== */
@media (max-width: 767px) {
    /* Hide "Certified & Trusted" section on mobile */
    .affiliations-featured {
        display: none;
    }

    /* Hide "About Preview" section on mobile */
    .about-preview-section {
        display: none;
    }

    /* Show only first 3 projects on mobile (hide 4-6) */
    .projects-grid .project-card:nth-child(n+4) {
        display: none;
    }

    /* Show only first 3 service areas on mobile */
    .areas-grid .area-link:nth-child(n+4) {
        display: none;
    }

    /* Hide emergency float button on mobile - use sticky CTA instead */
    .emergency-float-button {
        display: none !important;
    }

    /* Emergency mode for sticky mobile CTA */
    .sticky-mobile-cta--emergency {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    }

    .sticky-mobile-cta__emergency {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 1rem;
        color: #fff;
        font-weight: 600;
        font-size: 1rem;
        text-decoration: none;
        position: relative;
        overflow: hidden;
    }

    .sticky-mobile-cta__emergency svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .sticky-mobile-cta__emergency-pulse {
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.2);
        animation: emergencyPulse 2s ease-in-out infinite;
    }

    @keyframes emergencyPulse {
        0%, 100% { opacity: 0; }
        50% { opacity: 1; }
    }
}

/* ===========================================
   MATERIALS WE INSTALL BAND (JOB-176)
   Hub-page card grid: template-parts/service-hub/materials-band.php
   =========================================== */

.svc-materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.svc-materials-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.75rem 1.5rem;
}

.svc-materials-card.has-link {
    border-color: var(--bs-glass-border-blue, rgba(17, 141, 240, 0.25));
}

.svc-materials-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
    margin: 0 0 0.6rem;
}

.svc-materials-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin: 0 0 1rem;
}

/* JOB-181: optional spec lines under a material description. */
.svc-materials-highlights {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.svc-materials-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-family: Inter, sans-serif;
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}

.svc-materials-highlights svg {
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: var(--bs-primary-blue);
}

.svc-materials-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: auto;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-primary-blue, #118df0);
    text-decoration: none;
}

.svc-materials-link:hover,
.svc-materials-link:focus {
    color: var(--bs-primary-blue-bright, #3BA3F5);
}

.svc-materials-link svg {
    transition: transform 0.2s ease;
}

.svc-materials-link:hover svg {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .svc-materials-link svg {
        transition: none;
    }
}

/* ===========================================
   INSURANCE / PUBLIC ADJUSTER DISCLAIMER (JOB-180)
   Small print rendered under storm-claim and insurance
   content. Deliberately legible, not hidden - a notice
   nobody can read is not much of a notice.
   =========================================== */
.kfx-insurance-disclaimer {
  max-width: 900px;
  margin: 2.5rem auto 0;
  padding: 1rem 1.25rem;
  border-left: 2px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8125rem;
  line-height: 1.6;
  text-align: left;
}

.kfx-insurance-disclaimer--compact {
  margin-top: 1.25rem;
  padding: 0;
  border-left: 0;
  background: none;
  font-size: 0.75rem;
}

/* ===========================================
   END OF BLUE SMOKE THEME
   =========================================== */

/* ===========================================
   REPAIR TYPES TAB LINK (JOB-183)
   Routes a material tab to its detail page.
   Mirrors .svc-materials-link so the two entry
   points read the same.
   =========================================== */
.svc-repair-types-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-primary-blue, #118df0);
  text-decoration: none;
  transition: gap 0.2s ease;
}

.svc-repair-types-link:hover,
.svc-repair-types-link:focus-visible {
  gap: 0.7rem;
  color: var(--bs-primary-blue-bright, #3BA3F5);
}

@media (prefers-reduced-motion: reduce) {
  .svc-repair-types-link { transition: none; }
  .svc-repair-types-link:hover { gap: 0.45rem; }
}