/* ============================================
   CSS Custom Properties
   ============================================ */
:root {
  --sbvz-primary: hsl(134, 75%, 43%);
  --sbvz-primary-rgb: 27, 192, 66;
  --sbvz-primary-light: hsl(134, 75%, 78%);
  --sbvz-primary-dark: hsl(134, 75%, 33%);
  --sbvz-accent: hsl(164, 65%, 48%);
  --sbvz-text: #0f172a;
  --sbvz-text-light: #71717a;
  --sbvz-bg: #f9fafb;
  --sbvz-bg-alt: #f5f5f5;
  --sbvz-surface: #f5f5f5;
  --sbvz-border: #e2e8f0;
  --sbvz-font-heading: 'Outfit', sans-serif;
  --sbvz-font-body: 'Outfit', sans-serif;
  --sbvz-radius: 4px;
  --sbvz-shadow: none;
  --sbvz-shadow-lg: none;
  --sbvz-max-width: 1200px;
  --sbvz-section-spacing: 80px;
}

/* ============================================
   Animations
   ============================================ */
.sbvz-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.sbvz-fade-in.sbvz-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes sbvz-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--sbvz-primary-rgb), 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(var(--sbvz-primary-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--sbvz-primary-rgb), 0); }
}

/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sbvz-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--sbvz-text);
  background: var(--sbvz-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--sbvz-primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--sbvz-primary-dark); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sbvz-font-heading);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
  color: var(--sbvz-text);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4rem); letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 24px; }
h2 { font-size: clamp(2rem, 4vw + 1rem, 3rem); letter-spacing: -0.02em; }
h3 { font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem); }
h4 { font-size: clamp(1.25rem, 2vw + 0.5rem, 1.5rem); }

p { margin-bottom: 16px; font-size: clamp(1rem, 1vw + 0.5rem, 1.125rem); color: var(--sbvz-text-light); }
img { max-width: 100%; height: auto; display: block; }

/* ============================================
   Layout
   ============================================ */
.sbvz-container {
  max-width: var(--sbvz-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.sbvz-section {
  padding: var(--sbvz-section-spacing) 0;
}

.sbvz-section-alt {
  padding: var(--sbvz-section-spacing) 0;
  background: var(--sbvz-bg-alt);
}

/* ============================================
   Utilities
   ============================================ */
.sbvz-mt-8 { margin-top: 2rem !important; }
.sbvz-mb-0 { margin-bottom: 0 !important; }

/* ============================================
   Buttons
   ============================================ */
.sbvz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--sbvz-font-body);
  border: 2px solid var(--sbvz-primary);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  min-height: 52px;
}

.sbvz-btn-primary {
  background: var(--sbvz-primary);
  color: #fff;
  border-color: var(--sbvz-primary);
}
.sbvz-btn-primary:hover {
  background: var(--sbvz-primary-dark);
  border-color: var(--sbvz-primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--sbvz-primary-rgb), 0.25);
}

.sbvz-btn-outline {
  background: transparent;
  color: var(--sbvz-primary);
  border-color: var(--sbvz-primary);
}
.sbvz-btn-outline:hover {
  background: var(--sbvz-primary);
  color: #fff;
}

.sbvz-btn-white {
  background: #fff;
  color: var(--sbvz-primary);
  border-color: #fff;
}
.sbvz-btn-white:hover {
  background: var(--sbvz-primary-light);
  border-color: var(--sbvz-primary-light);
  transform: translateY(-2px);
}

.sbvz-btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.sbvz-btn-outline-white:hover {
  background: #fff;
  color: var(--sbvz-primary);
}

/* ============================================
   Header — Top Bar (optional contact strip above the header, toggled by
   design.headerBanner — not sticky, scrolls away with the page)
   ============================================ */
.sbvz-topbar {
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  padding: 8px 0;
}
.sbvz-topbar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.sbvz-topbar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
}
.sbvz-topbar-item:hover { color: #fff; }
.sbvz-topbar-item svg {
  width: 14px;
  height: 14px;
  color: var(--sbvz-primary);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .sbvz-topbar-item span { display: none; }
}

/* ============================================
   Header
   ============================================ */
.sbvz-header {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sbvz-border);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  height: 80px;
  display: flex;
  align-items: center;
}

.sbvz-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: var(--sbvz-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.sbvz-logo {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sbvz-text);
  letter-spacing: -0.02em;
}

.sbvz-nav {
  display: flex;
  gap: 32px;
  align-items: center;
}

.sbvz-nav a {
  color: var(--sbvz-text);
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.2s;
}
.sbvz-nav a:hover { color: var(--sbvz-primary); }

.sbvz-header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.sbvz-header-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--sbvz-text);
}
.sbvz-header-phone svg {
  color: var(--sbvz-primary);
  width: 20px;
  height: 20px;
}

.sbvz-header-btn {
  padding: 10px 20px;
  min-height: 44px;
  font-size: 0.95rem;
}

.sbvz-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.sbvz-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--sbvz-text);
  margin: 5px 0;
  transition: all 0.3s;
}

/* ============================================
   Header — Centered variant: single row, 3 grid columns (logo | nav | actions)
   — the nav sits genuinely centered in the middle column regardless of how
   wide the logo/actions columns are, distinct from headerLeftLogo's nav-
   directly-after-logo layout. Confirmed live: the previous 2-row version
   (logo/actions row, then a SEPARATE row for just "Nos services / Zones")
   left that second row mostly empty — a couple of short links stranded
   alone on their own nearly-blank line.
   ============================================ */
.sbvz-header-centered {
  height: auto;
  padding: 16px 0;
}
.sbvz-header-inner-3col {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.sbvz-nav-centered {
  justify-content: center;
}
/* No mobile override needed for the grid itself: .nav already goes display:none by
   default on mobile (below, shown only via .open), so the middle "auto 1fr auto"
   column just collapses to empty content — logo and actions still land correctly in
   the outer two columns without redefining the track count. */

/* ============================================
   Dropdown Menu
   ============================================ */
.sbvz-dropdown {
  position: relative;
}

.sbvz-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sbvz-text);
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--sbvz-font-body);
  padding: 10px 0;
  transition: color 0.2s;
}
.sbvz-dropdown-toggle:hover { color: var(--sbvz-primary); }

/* Bridge to prevent gap between toggle and menu */
.sbvz-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
  background: transparent;
  z-index: 10;
  display: none;
}
.sbvz-dropdown:hover::after { display: block; }

.sbvz-dropdown-arrow {
  font-size: 0.75rem;
  transition: transform 0.2s;
  opacity: 0.5;
}

.sbvz-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--sbvz-border);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  padding: 12px;
  z-index: 200;
  margin-top: 0; /* Remove gap */
}

.sbvz-dropdown:hover .sbvz-dropdown-menu,
.sbvz-dropdown.open .sbvz-dropdown-menu {
  display: flex;
  flex-direction: column;
}

.sbvz-dropdown-menu a {
  display: block;
  padding: 12px 16px;
  color: var(--sbvz-text);
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s;
  border-radius: 6px;
}
.sbvz-dropdown-menu a:hover {
  background: var(--sbvz-bg-alt);
  color: var(--sbvz-primary);
  padding-left: 20px;
}

/* ============================================
    Hero Section
   ============================================ */
.sbvz-hero {
  position: relative;
  text-align: center;
  padding: 100px 24px;
  background: var(--sbvz-surface);
  color: var(--sbvz-text);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 550px;
}
.sbvz-hero p {
  color: var(--sbvz-text-light);
}

.sbvz-hero-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.sbvz-hero-img {
  color: #fff;
}
.sbvz-hero-img h1, .sbvz-hero-img p {
  color: #fff;
}

.sbvz-hero-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.sbvz-hero h1 {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.sbvz-hero-img h1 { color: #fff; }

.sbvz-hero p {
  font-size: 1.25rem;
  margin-bottom: 2.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255,255,255,0.9);
}
.sbvz-hero:not(.sbvz-hero-img) h1 { color: var(--sbvz-text); }
.sbvz-hero:not(.sbvz-hero-img) p { color: var(--sbvz-text-light); }
.sbvz-hero-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

/* ============================================
   Hero — Split variant (text left, image right, no overlay)
   ============================================ */
.sbvz-hero-split {
  text-align: left;
  background: var(--sbvz-bg-alt);
  min-height: auto;
  padding: 80px 24px;
}
.sbvz-hero-split-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.sbvz-hero-split-text h1,
.sbvz-hero-split-text p {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.sbvz-hero-split-text .sbvz-hero-actions { justify-content: flex-start; }
.sbvz-hero-split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--sbvz-radius);
  box-shadow: var(--sbvz-shadow-lg);
}
@media (max-width: 992px) {
  .sbvz-hero-split-grid { grid-template-columns: 1fr; }
  .sbvz-hero-split-media { order: -1; }
}

/* ============================================
   Hero — Gradient overlay variant (bottom-aligned text over a dark scrim)
   ============================================ */
.sbvz-hero-gradient {
  align-items: flex-end;
  padding-bottom: 80px;
}
.sbvz-hero-gradient-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.15) 65%);
  z-index: 1;
}
.sbvz-hero-gradient-content { text-align: left; }
.sbvz-hero-gradient-content h1,
.sbvz-hero-gradient-content p {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 700px;
}
.sbvz-hero-gradient-content .sbvz-hero-actions { justify-content: flex-start; }

/* ============================================
   Services Grid
   ============================================ */
  /* ============================================
     Services Grid & Icons
     ============================================ */
  .sbvz-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  
  .sbvz-service-card-icon {
    background: #ffffff;
    border: 1px solid var(--sbvz-border);
    border-radius: 20px;
    padding: 40px;
    transition: all 0.3s ease;
    text-align: left;
    display: block;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
  }
  .sbvz-service-card-icon:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05);
    border-color: var(--sbvz-primary);
  }
  
  .sbvz-service-icon {
    width: 60px;
    height: 60px;
    background: var(--sbvz-bg-alt);
    color: var(--sbvz-primary);
    border-radius: 50%; /* Flat Circular Design */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 24px;
    transition: all 0.3s ease;
  }
  .sbvz-service-icon svg { width: 32px; height: 32px; }
  .sbvz-service-card-icon:hover .sbvz-service-icon {
    background: var(--sbvz-primary);
    color: #ffffff;
    transform: scale(1.1);
  }
  
  .sbvz-service-card-icon h3 { font-size: 1.25rem; margin-bottom: 12px; color: var(--sbvz-text); }
  .sbvz-service-card-icon p { font-size: 0.95rem; line-height: 1.6; color: var(--sbvz-text); opacity: 0.9; }

  .sbvz-service-card {
    background: #ffffff;
    border: 1px solid var(--sbvz-border);
    border-radius: 20px;
    padding: 32px;
    transition: all 0.3s ease;
    display: block;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
  }
  .sbvz-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05);
    border-color: var(--sbvz-primary);
  }
  .sbvz-service-card h3 { font-size: 1.25rem; margin-bottom: 12px; color: var(--sbvz-text); }
  .sbvz-service-card p { font-size: 1rem; line-height: 1.6; color: var(--sbvz-text); opacity: 0.9; }
  .sbvz-service-img { margin: -32px -32px 24px -32px; border-radius: 20px 20px 0 0; overflow: hidden; }

/* Benefits Section - Graphic Cards */
.sbvz-benefits-section {
  padding: 80px 0;
}

.sbvz-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.sbvz-benefit-card {
  background: var(--sbvz-primary); /* Color applied to card */
  padding: 40px;
  border-radius: var(--sbvz-radius);
  text-align: center;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Soft shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sbvz-benefit-card:hover { 
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.sbvz-benefit-card h3 {
  color: #ffffff;
  font-size: 1.25rem;
  margin-bottom: 16px;
}

.sbvz-benefit-card p {
  color: rgba(255, 255, 255, 0.9);
}

.sbvz-benefit-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2); /* Translucent */
  color: #ffffff;
  border-radius: 16px;
}
.sbvz-benefit-icon svg { width: 32px; height: 32px; stroke-width: 2.5; }

  /* ============================================
     FAQ Accordion
     ============================================ */
/* FAQ Accordion */
.sbvz-faq-item {
  border: 1px solid var(--sbvz-border);
  border-radius: 12px;
  margin-bottom: 16px;
  background: var(--sbvz-bg);
  overflow: hidden;
}

.sbvz-faq-question {
  width: 100%;
  padding: 24px;
  text-align: left;
  background: none;
  border: none;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sbvz-text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}
.sbvz-faq-question:hover { background: rgba(0,0,0,0.02); }

.sbvz-faq-icon {
  transition: transform 0.3s ease;
  color: var(--sbvz-primary);
  display: flex;
  align-items: center;
}
.sbvz-faq-icon svg { width: 20px; height: 20px; }

.sbvz-faq-item.sbvz-active .sbvz-faq-icon { transform: rotate(45deg); }

.sbvz-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out, padding-bottom 0.3s ease-out;
  padding: 0 24px;
}

.sbvz-faq-answer-inner {
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.3s, opacity 0.3s ease-out;
}

.sbvz-faq-item.sbvz-active .sbvz-faq-answer {
  grid-template-rows: 1fr;
  padding-bottom: 24px;
}

.sbvz-faq-item.sbvz-active .sbvz-faq-answer-inner {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s 0s, opacity 0.3s ease-out;
}

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

  /* ============================================
     Contact Form Premium
     ============================================ */
  .sbvz-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
  }
  
  .sbvz-contact-info h2 { margin-bottom: 20px; }
  .sbvz-contact-info p { margin-bottom: 40px; }
  
  .sbvz-footer-col-about p {
    margin-bottom: 12px;
    opacity: 0.8;
  }
  
  .sbvz-contact-details {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  
  .sbvz-contact-item {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  .sbvz-contact-icon {
    width: 48px;
    height: 48px;
    background: var(--sbvz-bg-alt);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--sbvz-primary);
  }
  
  .sbvz-contact-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.5;
    margin-bottom: 4px;
  }
  
  .sbvz-contact-info a {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sbvz-text);
  }

  .sbvz-contact-form {
    background: #ffffff;
    padding: 50px;
    border-radius: 24px;
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0,0,0,0.03);
  }
  
  .sbvz-form-group { margin-bottom: 24px; }
  .sbvz-form-group label { 
    display: block; 
    margin-bottom: 8px; 
    font-size: 0.85rem; 
    font-weight: 600; 
    color: var(--sbvz-text); 
    opacity: 0.7;
  }
  
  .sbvz-form-group input, .sbvz-form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border-radius: 10px;
    border: 1px solid var(--sbvz-border);
    background: #fbfbfb;
    font-size: 1rem;
    transition: all 0.2s;
  }
  .sbvz-form-group input:focus, .sbvz-form-group textarea:focus {
    border-color: var(--sbvz-primary);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(var(--sbvz-primary-rgb), 0.1);
  }

  .sbvz-form-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 24px;
  }
  .sbvz-form-consent input[type="checkbox"] {
    margin-top: 4px;
    flex-shrink: 0;
    accent-color: var(--sbvz-primary);
  }
  .sbvz-form-consent label {
    color: var(--sbvz-text-light);
    line-height: 1.5;
  }
  .sbvz-form-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: var(--sbvz-radius);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  /* ============================================
   Content & Split Layout
   ============================================ */
.sbvz-content {
  max-width: var(--sbvz-max-width);
  margin: 0 auto;
}

.sbvz-content-hero-img {
  margin-bottom: 40px;
  border-radius: var(--sbvz-radius);
  overflow: hidden;
  box-shadow: var(--sbvz-shadow-lg);
}

.sbvz-content-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: center;
}

.sbvz-content-split-img img {
  border-radius: 20px;
  box-shadow: var(--sbvz-shadow-lg);
}

.sbvz-content-floated-img {
  float: right;
  margin: 0 0 2rem 3rem;
  border-radius: var(--sbvz-radius);
  box-shadow: var(--sbvz-shadow-lg);
  max-width: 34%;
}

.sbvz-content-floated-img-left {
  float: left;
  margin: 0 3rem 2rem 0;
  border-radius: var(--sbvz-radius);
  box-shadow: var(--sbvz-shadow-lg);
  max-width: 34%;
}

/* A 1:1 crop is proportionally taller than the 3:2 default at the same rendered width —
   confirmed live: a square floated image regularly outlasted the 1-2 short paragraphs meant
   to frame it, leaving a stretch of blank column beneath the text before the next (float-
   clearing) heading. Capping the square variant narrower keeps its height in the same
   ballpark as a typical short paragraph instead. */
.sbvz-content-floated-img.sbvz-img-cover-1-1,
.sbvz-content-floated-img-left.sbvz-img-cover-1-1 {
  max-width: 26%;
}

@media (max-width: 992px) {
  .sbvz-content-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .sbvz-content-split-img { order: -1; }
  
  .sbvz-content-floated-img, .sbvz-content-floated-img-left {
    float: none;
    margin: 0 0 2rem 0;
    max-width: 100%;
    width: 100%;
    display: block;
  }
}
  /* clear:both — confirmed live: a floated content image (see injectUIEnhancements in
     assembler.ts) stays active for however tall it is (up to 350px for a square crop),
     spanning across whatever headings/paragraphs happen to render in that vertical range.
     A paragraph re-wrapping from the narrow column to full width mid-text reads fine (a
     common magazine-style pattern), but a SHORT, BOLD heading doing the same looks broken —
     its first line renders narrow beside the still-active float, then the line it wraps to
     lands past the float's bottom edge and jumps to the full container width. Headings
     always clearing the float guarantees they render as one full-width block instead.
     Confirmed live: "<h3>Déchetterie de Nogent-sur-Oise : horaires et types d'objets
     acceptés</h3>" split exactly like this, several elements after its nearest floated
     image — not even the paragraph immediately following it. */
  .sbvz-content h2 { margin-top: 4rem; margin-bottom: 2rem; clear: both; }
  .sbvz-content h3 { margin-top: 3rem; margin-bottom: 1.5rem; clear: both; }
  .sbvz-content p { margin-bottom: 1.5rem; color: var(--sbvz-text); opacity: 0.8; }
  .sbvz-content ul, .sbvz-content ol { padding-left: 1.5rem; margin-bottom: 2rem; }
  .sbvz-content li { margin-bottom: 1rem; }
  .sbvz-content blockquote {
    border-left: 4px solid var(--sbvz-primary);
    padding-left: 1.5rem;
    margin: 2rem 0;
    color: var(--sbvz-text);
    opacity: 0.8;
    font-style: italic;
  }

  .sbvz-highlight-box {
    background: var(--sbvz-bg-alt);
    border-left: 4px solid var(--sbvz-primary);
    padding: 40px;
    margin: 48px 0;
    border-radius: 0 12px 12px 0;
  }
  .sbvz-highlight-box h4 { margin-top: 0; color: var(--sbvz-primary); }

  /* ============================================
     Zone Grid
     ============================================ */
  .sbvz-zone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 48px;
  }
  
  .sbvz-zone-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--sbvz-border);
    padding: 24px;
    border-radius: var(--sbvz-radius);
    text-decoration: none;
    color: var(--sbvz-text);
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  }
  
  .sbvz-zone-card:hover {
    border-color: var(--sbvz-primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .sbvz-zone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--sbvz-primary-light);
    color: var(--sbvz-primary);
    border-radius: 50%;
    flex-shrink: 0;
  }
  
  .sbvz-zone-icon svg {
    width: 24px;
    height: 24px;
  }

  /* ============================================
     Process Steps
     ============================================ */
  .sbvz-process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 60px;
    position: relative;
  }

  /* Background line connecting steps (hidden on mobile) */
  @media (min-width: 1024px) {
    .sbvz-process-grid::before {
      content: '';
      position: absolute;
      top: 32px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--sbvz-border);
      z-index: 0;
    }
  }

  .sbvz-process-step {
    position: relative;
    z-index: 1;
    text-align: center;
    background: #fff;
    padding: 32px;
    border-radius: 16px;
    border: 1px solid var(--sbvz-border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
  }

  .sbvz-process-step:hover {
    transform: translateY(-5px);
  }

  .sbvz-process-badge {
    width: 64px;
    height: 64px;
    background: var(--sbvz-primary);
    color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 auto 24px auto;
    border: 4px solid #fff;
    box-shadow: 0 0 0 2px var(--sbvz-primary-light);
  }

  .sbvz-process-title {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: var(--sbvz-primary-dark);
  }

  .sbvz-process-desc {
    color: var(--sbvz-text-light);
    line-height: 1.6;
    margin: 0;
  }

  /* ============================================
     Process — Numbered Line variant: icon + title per column, a single
     connecting line with a numbered circle marker under each, description
     below.

     4 real grid rows (icon/title/marker/desc), one column per step, every
     piece placed at an explicit grid-column (inline style, set in
     processNumberedLine()) — same fix applied to the zigzag variant after a
     live bug there: a guessed pixel offset for the connecting line
     (top:108px, assuming a roughly consistent icon+title height across
     columns) can silently drift out of sync with the real layout. With a
     real grid row instead, the marker row's height — and so the line's
     position — comes from actual layout (CSS Grid sizes a row to its
     tallest cell across ALL columns automatically), never a guess.
     ============================================ */
  .sbvz-process-numbered-line {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    column-gap: 32px;
    margin-top: 56px;
    position: relative;
  }
  .sbvz-process-numbered-line-track {
    /* Explicit row+column placement (not auto-placement) — see the file-level note above
       on why this is safe to span all columns without perturbing anything else. */
    grid-row: 3;
    grid-column: 1 / -1;
    align-self: center;
    height: 2px;
    background: var(--sbvz-border);
    z-index: 0;
  }
  .sbvz-process-numbered-line-step { display: contents; }
  .sbvz-process-numbered-line-icon {
    grid-row: 1;
    justify-self: center;
    color: var(--sbvz-primary);
    margin-bottom: 16px;
  }
  .sbvz-process-numbered-line-icon svg { width: 32px; height: 32px; }
  .sbvz-process-numbered-line .sbvz-process-title {
    grid-row: 2;
    justify-self: center;
    text-align: center;
    margin-bottom: 24px;
  }
  .sbvz-process-numbered-line-marker {
    grid-row: 3;
    justify-self: center;
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sbvz-bg);
    border: 2px solid var(--sbvz-primary);
    color: var(--sbvz-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    margin-bottom: 20px;
  }
  .sbvz-process-numbered-line .sbvz-process-desc {
    grid-row: 4;
    justify-self: center;
    text-align: center;
    font-size: 0.9rem;
  }
  @media (max-width: 900px) {
    /* Explicit grid-column pins each step to a fixed track — on a narrow screen that would
       force all N columns to coexist side by side (overflow) instead of wrapping, unlike
       the old auto-fit/minmax version this replaced. Same mobile fallback as zigzag: stack
       instead. */
    .sbvz-process-numbered-line { display: flex; flex-direction: column; gap: 40px; }
    .sbvz-process-numbered-line-track { display: none; }
    .sbvz-process-numbered-line-step { display: flex; flex-direction: column; align-items: center; }
  }

  /* ============================================
     Process — Connected Icons variant: bordered row of cards (icon badge
     instead of a number), separated by circular arrow connectors
     ============================================ */
  .sbvz-process-connected {
    display: flex;
    align-items: stretch;
    margin-top: 48px;
    border: 1px solid var(--sbvz-border);
    border-radius: var(--sbvz-radius);
    background: var(--sbvz-bg);
    overflow: hidden;
  }
  .sbvz-process-connected-step {
    flex: 1;
    min-width: 180px;
    padding: 32px 24px;
    text-align: center;
  }
  .sbvz-process-connected-step:not(:last-child) { border-right: 1px solid var(--sbvz-border); }
  .sbvz-process-connected-icon {
    width: 56px;
    height: 56px;
    background: var(--sbvz-primary-light);
    color: var(--sbvz-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
  }
  .sbvz-process-connected-icon svg { width: 28px; height: 28px; }
  .sbvz-process-connected-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sbvz-text);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    margin: 0 -16px;
    z-index: 1;
    box-shadow: 0 0 0 4px var(--sbvz-bg);
  }
  .sbvz-process-connected-arrow svg { width: 16px; height: 16px; }
  @media (max-width: 768px) {
    .sbvz-process-connected { flex-direction: column; }
    .sbvz-process-connected-step:not(:last-child) { border-right: none; border-bottom: 1px solid var(--sbvz-border); }
    .sbvz-process-connected-arrow { display: none; }
  }

  /* ============================================
     Process — Zigzag Timeline variant: horizontal frieze, content
     alternating above/below a central line, icon badges sitting on the
     line. Every step's content and icon are grid items of the SAME parent
     grid (.process-zigzag-step uses display:contents) — the row (1/2/3) is
     set here by class, but the COLUMN is set inline per step
     (grid-column:N in processZigzagTimeline()), not left to auto-placement.
     Confirmed live: auto-placement doesn't reliably give each step its own
     column — with only a row fixed per item, the algorithm can slot a later
     step's content back into an earlier step's column whenever a cell
     happens to be free there (e.g. step 2's "down" content landing in step
     1's column instead of its own), visually merging unrelated steps into
     the same position instead of spreading one per column left to right.
     ============================================ */
  .sbvz-process-zigzag {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto auto auto;
    grid-auto-columns: 1fr;
    column-gap: 24px;
    margin: 64px 0 40px 0;
  }
  .sbvz-process-zigzag-line {
    /* position:absolute takes it out of grid auto-placement entirely (per spec, an
       absolutely-positioned grid item doesn't consume the auto-placement cursor), so it
       can't shift the icon/content cells even though it's a direct grid-container child.
       top:50% assumes row 1 and row 3 (the "up"/"down" content) come out close to the
       same height, which holds for the normal case of similarly short step text. */
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: var(--sbvz-primary-light);
    z-index: 0;
  }
  .sbvz-process-zigzag-step { display: contents; }
  .sbvz-process-zigzag-content { text-align: center; }
  .sbvz-process-zigzag-step-up .sbvz-process-zigzag-content { grid-row: 1; align-self: end; padding-bottom: 28px; }
  .sbvz-process-zigzag-step-down .sbvz-process-zigzag-content { grid-row: 3; align-self: start; padding-top: 28px; }
  .sbvz-process-zigzag-icon {
    grid-row: 2;
    justify-self: center;
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    background: var(--sbvz-primary);
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--sbvz-bg);
    box-shadow: 0 0 0 1px var(--sbvz-border);
  }
  .sbvz-process-zigzag-icon svg { width: 22px; height: 22px; }
  /* Confirmed live: alternating content above/below the line reads misleadingly —
     scanning the top row first (e.g. step 1 and step 3, both "up") before ever looking
     down at step 2 makes the sequence look wrong even though the actual left-to-right
     order along the line is correct. This explicit number removes the ambiguity
     regardless of how a reader's eye happens to scan the layout. */
  .sbvz-process-zigzag-number {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sbvz-bg);
    color: var(--sbvz-primary);
    border: 2px solid var(--sbvz-primary);
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media (max-width: 900px) {
    .sbvz-process-zigzag { display: flex; flex-direction: column; gap: 32px; margin: 40px 0; }
    .sbvz-process-zigzag-line { display: none; }
    .sbvz-process-zigzag-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .sbvz-process-zigzag-content { order: 2; padding: 16px 0 0 0 !important; }
    .sbvz-process-zigzag-icon { order: 1; }
  }

  /* ============================================
     Process — Numbered Cards variant: big "01." style number, icon + title
     inline, description — no per-card CTA (a process step isn't a distinct
     destination the way a service is)
     ============================================ */
  .sbvz-process-numbered-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 48px;
  }
  .sbvz-process-numbered-card {
    background: var(--sbvz-bg);
    border: 1px solid var(--sbvz-border);
    border-radius: var(--sbvz-radius);
    padding: 28px;
  }
  .sbvz-process-numbered-card-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--sbvz-text);
    margin-bottom: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sbvz-border);
  }
  .sbvz-process-numbered-card-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
  .sbvz-process-numbered-card-heading svg { width: 20px; height: 20px; color: var(--sbvz-primary); flex-shrink: 0; }
  .sbvz-process-numbered-card-heading .sbvz-process-title { margin: 0; }
  .sbvz-process-numbered-cards .sbvz-process-desc { font-size: 0.95rem; }

  /* ============================================
     FAQ — Two Column variant (reuses .faq-item/.faq-question/.faq-answer
     styling and the JS toggle logic unchanged — only this wrapper is new)

     Two independent flex columns, each with its own fixed subset of items
     (split in faqAccordionTwoCol(), not here) — NOT the CSS "columns"
     property. That was tried first (to balance the FAQ's always-odd 5-item
     count without a stranded lone item in a strict grid), but confirmed
     live: multi-column reflows its whole balance whenever ANY item's height
     changes, so opening one accordion answer visibly disturbed/opened items
     in the other column as a side effect. Two flex children never share
     layout like that — each column's height is entirely its own.
     ============================================ */
  .sbvz-faq-two-col {
    display: flex;
    align-items: flex-start;
    gap: 0 24px;
  }
  .sbvz-faq-two-col .sbvz-faq-col {
    flex: 1 1 0;
    min-width: 0;
  }
  @media (max-width: 768px) {
    .sbvz-faq-two-col { flex-direction: column; }
  }

  /* ============================================
     FAQ — Numbered Cards variant (static, no accordion)
     ============================================ */
  .sbvz-faq-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 24px;
  }
  .sbvz-faq-numbered-card {
    background: #fff;
    border: 1px solid var(--sbvz-border);
    border-radius: var(--sbvz-radius);
    padding: 28px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  }
  .sbvz-faq-numbered-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    background: var(--sbvz-primary-light);
    color: var(--sbvz-primary);
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.95rem;
    margin-bottom: 16px;
  }
  .sbvz-faq-numbered-card h3 { font-size: 1.1rem; margin-bottom: 10px; color: var(--sbvz-text); }
  .sbvz-faq-numbered-card p { color: var(--sbvz-text-light); line-height: 1.6; margin: 0; }

  /* ============================================
     Zone — Pills variant
     ============================================ */
  .sbvz-zone-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
  }
  .sbvz-zone-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--sbvz-border);
    padding: 10px 18px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--sbvz-text);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
  }
  .sbvz-zone-pill svg { width: 16px; height: 16px; color: var(--sbvz-primary); }
  .sbvz-zone-pill:hover {
    background: var(--sbvz-primary);
    border-color: var(--sbvz-primary);
    color: #fff;
  }
  .sbvz-zone-pill:hover svg { color: #fff; }

  /* ============================================
     Zone — Photo Cards variant
     ============================================ */
  .sbvz-zone-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 48px;
  }
  .sbvz-zone-photo-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 160px;
    border-radius: var(--sbvz-radius);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
  }
  .sbvz-zone-photo-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
  }
  .sbvz-zone-photo-card:hover { transform: translateY(-4px); }
  .sbvz-zone-photo-card-label {
    position: relative;
    z-index: 1;
    color: #fff;
    font-weight: 700;
    padding: 16px;
  }
  .sbvz-zone-photo-card-noimg {
    background: var(--sbvz-bg-alt);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    padding: 24px;
  }
  .sbvz-zone-photo-card-noimg::before { content: none; }
  .sbvz-zone-photo-card-noimg .sbvz-zone-photo-card-label { color: var(--sbvz-text); padding: 0; }

  /* ============================================
     Zone — Icon Box variant: bordered grid of icon + name cards. No
     description per card (a zone has none in the data model — see
     zoneIconBox()).
     ============================================ */
  .sbvz-zone-icon-box-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 48px;
  }
  .sbvz-zone-icon-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    background: var(--sbvz-bg);
    border: 1px solid var(--sbvz-border);
    border-radius: var(--sbvz-radius);
    text-decoration: none;
    color: var(--sbvz-text);
    font-weight: 600;
    transition: border-color 0.2s, transform 0.2s;
  }
  .sbvz-zone-icon-box:hover { border-color: var(--sbvz-primary); transform: translateY(-2px); }
  .sbvz-zone-icon-box-icon { color: var(--sbvz-primary); flex-shrink: 0; display: flex; }
  .sbvz-zone-icon-box-icon svg { width: 24px; height: 24px; }

  /* ============================================
     Testimonials — base (cards-grid) + Quote Stack + Compact List variants
     ============================================ */
  .sbvz-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 32px;
  }
  .sbvz-testimonial-card {
    background: #fff;
    border: 1px solid var(--sbvz-border);
    border-radius: var(--sbvz-radius);
    padding: 28px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  }
  .sbvz-testimonial-stars { color: #f59e0b; letter-spacing: 2px; margin-bottom: 12px; }
  .sbvz-testimonial-text { color: var(--sbvz-text); line-height: 1.6; margin-bottom: 16px; font-style: italic; }
  .sbvz-testimonial-author { font-weight: 700; color: var(--sbvz-text); }

  .sbvz-testimonial-stack {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 32px;
  }
  .sbvz-testimonial-stack-item { text-align: center; }
  .sbvz-testimonial-stack-mark {
    font-size: 3rem;
    line-height: 1;
    color: var(--sbvz-primary-light);
    font-weight: 800;
    margin-bottom: 8px;
  }
  .sbvz-testimonial-stack-text {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--sbvz-text);
    margin-bottom: 16px;
  }
  .sbvz-testimonial-stack-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--sbvz-text-light);
    font-size: 0.9rem;
  }

  .sbvz-testimonial-compact-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 24px;
  }
  .sbvz-testimonial-compact-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--sbvz-border);
  }
  .sbvz-testimonial-compact-item:last-child { border-bottom: none; }
  .sbvz-testimonial-compact-item .sbvz-testimonial-stars { margin-bottom: 0; flex-shrink: 0; font-size: 0.85rem; }
  .sbvz-testimonial-compact-item p { color: var(--sbvz-text-light); line-height: 1.5; margin: 0; }

  /* ============================================
     Benefits — Numbered List + Split Image variants
     ============================================ */
  .sbvz-benefits-numbered-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 700px;
    margin: 0 auto;
  }
  .sbvz-benefit-numbered-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }
  .sbvz-benefit-numbered-badge {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sbvz-primary-light);
    color: var(--sbvz-primary);
    border-radius: 12px;
    font-weight: 800;
  }
  .sbvz-benefit-numbered-badge svg { width: 22px; height: 22px; }
  .sbvz-benefit-numbered-item h3 { font-size: 1.1rem; margin-bottom: 6px; color: var(--sbvz-text); }
  .sbvz-benefit-numbered-item p { color: var(--sbvz-text-light); line-height: 1.6; margin: 0; }

  .sbvz-benefits-split {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 48px;
    align-items: center;
  }
  .sbvz-benefits-split-img {
    width: 100%;
    height: 100%;
    max-height: 480px;
    border-radius: var(--sbvz-radius);
    object-fit: cover;
  }
  .sbvz-benefits-split-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .sbvz-benefits-split-list .sbvz-benefit-icon {
    background: var(--sbvz-primary-light);
    color: var(--sbvz-primary);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
  }
  .sbvz-benefits-split-list .sbvz-benefit-icon svg { width: 24px; height: 24px; }
  .sbvz-benefits-split-list .sbvz-benefit-numbered-item h3 { color: var(--sbvz-text); }
  @media (max-width: 768px) {
    .sbvz-benefits-split { grid-template-columns: 1fr; }
  }

  /* ============================================
     Services — List Detailed variant
     ============================================ */
  .sbvz-services-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 32px;
  }
  .sbvz-service-list-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 8px;
    border-bottom: 1px solid var(--sbvz-border);
    text-decoration: none;
    transition: background 0.2s ease;
  }
  .sbvz-service-list-row:last-child { border-bottom: none; }
  .sbvz-service-list-row:hover { background: var(--sbvz-bg-alt); }
  .sbvz-service-list-text { flex: 1; }
  .sbvz-service-list-text h3 { font-size: 1.1rem; margin-bottom: 4px; color: var(--sbvz-text); }
  .sbvz-service-list-text p { color: var(--sbvz-text-light); line-height: 1.5; margin: 0; }
  .sbvz-service-list-arrow { color: var(--sbvz-primary); flex-shrink: 0; }
  .sbvz-service-list-arrow svg { width: 20px; height: 20px; }

  /* ============================================
     Footer - 3 Columns Fix
     ============================================ */
  .sbvz-footer {
    background: #1a1a1a;
    color: #ffffff;
    padding: 80px 0 40px;
  }
  
  .sbvz-footer p {
    color: rgba(255, 255, 255, 0.95);
  }
  .sbvz-footer a {
    color: rgba(255, 255, 255, 0.95);
  }
  
  .sbvz-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
  }

  /* Narrower grid columns need this to let long link text wrap/truncate instead of
     overflowing — a plain grid item defaults to min-width:auto, sized by its content. */
  .sbvz-footer-col-about, .sbvz-footer-col-links { min-width: 0; }

  .sbvz-footer-logo {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 24px;
    color: #ffffff;
  }

  .sbvz-footer-contact-link {
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none;
  }
  .sbvz-footer-contact-link:hover {
    text-decoration: underline;
  }

  .sbvz-footer-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 24px;
    color: #ffffff;
  }
  
  .sbvz-footer-links { list-style: none; padding: 0; margin: 0; }
  .sbvz-footer-links li { margin-bottom: 12px; }
  .sbvz-footer-links a { 
    color: rgba(255, 255, 255, 0.7); 
    font-weight: 500; 
    text-decoration: none;
    transition: color 0.2s;
  }
  .sbvz-footer-links a:hover { 
    opacity: 1; 
    color: #ffffff; 
    text-decoration: underline;
  }

  .sbvz-footer-bottom {
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
  }

  /* ============================================
     Footer — Minimal variant (single row, no columns)
     ============================================ */
  .sbvz-footer-minimal {
    padding: 40px 0;
  }
  .sbvz-footer-minimal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
  }
  .sbvz-footer-links-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
  }
  .sbvz-footer-links-inline li { margin-bottom: 0; }
  .sbvz-footer-minimal .sbvz-footer-bottom {
    padding-top: 20px;
  }

  /* ============================================
     Mobile Sticky Action Bar (call + devis)
     ============================================ */
  .sbvz-mobile-action-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.12);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sbvz-mobile-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
  }
  .sbvz-mobile-action-call {
    background: #ffffff;
    color: var(--sbvz-primary);
    border-top: 1px solid var(--sbvz-border);
    border-right: 1px solid var(--sbvz-border);
  }
  .sbvz-mobile-action-call svg {
    width: 20px;
    height: 20px;
  }
  .sbvz-mobile-action-quote {
    background: var(--sbvz-primary);
    color: #ffffff;
  }
  @media (max-width: 768px) {
    .sbvz-mobile-action-bar { display: flex; }
    /* Room for the sticky bar so it never covers the footer's last links. */
    body { padding-bottom: 60px; }
  }

  /* ============================================
     Responsive
     ============================================ */
  @media (max-width: 1024px) {
    .sbvz-footer-grid { grid-template-columns: 1fr 1fr; }
    .sbvz-services-grid { grid-template-columns: repeat(2, 1fr); }
    .sbvz-benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .sbvz-contact-grid { grid-template-columns: 1fr; gap: 40px; }
  }
  
  @media (max-width: 768px) {
    /* Header & Mobile Menu */
    .sbvz-hamburger { display: block; }
    .sbvz-header-actions { gap: 12px; }
    .sbvz-header-phone span { display: none; } /* Hide phone text, keep icon */
    .sbvz-header-btn { display: none; } /* Hide heavy CTA on mobile header */
    
    .sbvz-nav {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #ffffff;
      flex-direction: column;
      padding: 0;
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
      display: none;
      border-top: 1px solid var(--sbvz-border);
      gap: 0;
    }
    .sbvz-nav.open {
      display: flex;
    }
    .sbvz-nav a {
      padding: 16px 24px;
      border-bottom: 1px solid var(--sbvz-border);
      width: 100%;
    }

    /* Mobile Dropdown Fixes */
    .sbvz-dropdown {
      width: 100%;
    }
    .sbvz-dropdown-toggle {
      width: 100%;
      padding: 16px 24px;
      justify-content: space-between;
      border-bottom: 1px solid var(--sbvz-border);
    }
    .sbvz-dropdown-menu {
      position: static !important;
      box-shadow: none !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 0 0 0 24px !important; /* Indent submenu items inside */
      background: transparent !important;
      min-width: unset !important;
    }
    .sbvz-dropdown:hover .sbvz-dropdown-menu,
    .sbvz-dropdown.open .sbvz-dropdown-menu {
      border-bottom: 1px solid var(--sbvz-border);
    }
    .sbvz-dropdown-menu a {
      border-bottom: none !important;
      padding: 12px 16px !important;
      font-size: 0.95rem;
    }
    
    /* Typographic & Spacing Scaling */
    h1 { font-size: 2.5rem; line-height: 1.2; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }
    
    .sbvz-hero { padding: 80px 0; }
    .sbvz-hero h1 { font-size: 2.5rem; }
    .sbvz-hero p { font-size: 1.125rem; }
    .sbvz-section { padding: 60px 0; }
  }

  @media (max-width: 640px) {
    .sbvz-footer-grid { grid-template-columns: 1fr; }
    .sbvz-services-grid { grid-template-columns: 1fr; }
    .sbvz-benefits-grid { grid-template-columns: 1fr; }
    .sbvz-footer { padding: 40px 0 20px; }
    .sbvz-contact-form { padding: 30px; }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    .sbvz-hero h1 { font-size: 2rem; }
  }

  /* ============================================
     Utility Classes (Performance & Mobile CWV)
     ============================================ */
  .sbvz-z-relative { position: relative; z-index: 2; }
  .sbvz-intro-text { max-width: 800px; margin: 0 auto 48px auto; text-align: center; font-size: 1.125rem; }
  .sbvz-section-title { text-align: center; margin-bottom: 40px; }
  .sbvz-section-header { text-align: center; margin-bottom: 40px; }
  .sbvz-section-header h2 { margin-bottom: 12px; }
  .sbvz-subtitle { color: var(--sbvz-text-light); font-size: 1.125rem; max-width: 600px; margin: 0 auto; }
  .sbvz-img-cover { width: 100%; object-fit: cover; }
  .sbvz-img-cover-16-10 { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
  .sbvz-img-cover-3-2 { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
  .sbvz-img-cover-1-1 { aspect-ratio: 1/1; object-fit: cover; width: 100%; }
  .sbvz-clear-both { clear: both; }
  .sbvz-font-semibold { font-weight: 600; color: var(--sbvz-text); }
  .sbvz-flex-center-wrap { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
  .sbvz-w-full { width: 100%; }
  .sbvz-text-sm-m0 { margin: 0; font-size: 0.875rem; }
  .sbvz-m-0 { margin: 0; }
  .sbvz-no-underline { text-decoration: none !important; }
  .sbvz-text-underline-white { color: #fff !important; text-decoration: underline !important; }
  .sbvz-btn-sm { padding: 8px 20px; min-height: auto; font-size: 0.9rem; }

  /* ============================================
     Blog Grid & Cards Styling
     ============================================ */
  .sbvz-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 40px;
  }
  @media (max-width: 1024px) {
    .sbvz-blog-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .sbvz-blog-grid { grid-template-columns: 1fr; }
  }

  .sbvz-blog-card {
    background: #ffffff;
    border: 1px solid var(--sbvz-border);
    border-radius: var(--sbvz-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .sbvz-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.1);
  }
  .sbvz-blog-card-link {
    display: block;
    overflow: hidden;
  }
  .sbvz-blog-card-media {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--sbvz-surface);
  }
  .sbvz-blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  .sbvz-blog-card:hover .sbvz-blog-card-media img {
    transform: scale(1.05);
  }
  .sbvz-blog-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .sbvz-blog-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--sbvz-text-light);
    margin-bottom: 12px;
  }
  .sbvz-blog-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sbvz-blog-card-title a {
    color: var(--sbvz-text);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .sbvz-blog-card-title a:hover {
    color: var(--sbvz-primary);
  }
  .sbvz-blog-card-excerpt {
    font-size: 0.925rem;
    color: var(--sbvz-text-light);
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
  }
  .sbvz-blog-card-btn {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sbvz-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    transition: gap 0.2s ease;
  }
  .sbvz-blog-card-btn:hover {
    gap: 8px;
  }

  /* ============================================
     Article Figure, Tables & Callouts
     ============================================ */
  .sbvz-article-figure {
    margin: 32px 0;
    text-align: center;
  }
  .sbvz-article-figure img {
    border-radius: var(--sbvz-radius);
    max-width: 100%;
    height: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
  .sbvz-figcaption {
    font-size: 0.85rem;
    color: var(--sbvz-text-light);
    margin-top: 8px;
    font-style: italic;
  }

  .sbvz-article-body a {
    color: var(--sbvz-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease;
  }
  .sbvz-article-body a:hover {
    opacity: 0.8;
  }

  .callout {
    background: #eff6ff;
    border-left: 4px solid var(--sbvz-primary);
    padding: 16px 20px;
    border-radius: 0 var(--sbvz-radius) var(--sbvz-radius) 0;
    margin: 24px 0;
    font-size: 0.95rem;
    color: #1e3a8a;
  }

  .sbvz-article-body table, .sbvz-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 0.925rem;
  }
  .sbvz-article-body th, .sbvz-article-body td, .sbvz-content th, .sbvz-content td {
    padding: 12px 16px;
    border: 1px solid var(--sbvz-border);
    text-align: left;
  }
  .sbvz-article-body th, .sbvz-content th {
    background: var(--sbvz-surface);
    font-weight: 600;
    color: var(--sbvz-text);
  }

  .sbvz-article-cta-box {
    background: var(--sbvz-surface);
    border: 1px solid var(--sbvz-border);
    border-radius: var(--sbvz-radius);
    padding: 32px;
    text-align: center;
  }
  .sbvz-article-cta-box h3 {
    margin-top: 0;
    margin-bottom: 8px;
  }
  .sbvz-article-cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
  }
  .sbvz-article-cta-phone {
    font-size: 0.95rem;
    color: var(--sbvz-text);
    margin: 0;
  }
  .sbvz-article-cta-phone a {
    color: var(--sbvz-primary);
    text-decoration: none;
  }