/*
 * Werkgebied-specifieke overrides.
 * Gedeelde styling staat in style.css; houd dit bestand bewust klein.
 */

.hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg,
          rgba(2,6,23,.93) 0%,
          rgba(2,6,23,.78) 31%,
          rgba(2,6,23,.45) 55%,
          rgba(2,6,23,.12) 100%
        ),
        linear-gradient(180deg,
          rgba(2,6,23,.10) 0%,
          rgba(2,6,23,.26) 48%,
          rgba(2,6,23,.78) 100%
        ),
        url("/images/loodgieter-bedrijfsbus.webp") center center / cover no-repeat;
      transform:scale(1.012);
    }

.hero::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 28% 42%, rgba(14,165,233,.12), transparent 34%),
        linear-gradient(90deg, rgba(2,6,23,.30), transparent 60%);
      pointer-events:none;
    }

.site-header.is-scrolled .logo img{
      height:68px;
    }

.next-placeholder{
      background:#f7fafd;
      color:#0f172a;
      padding:80px 20px;
      text-align:center;
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

.hero::before{
      background:
        linear-gradient(90deg, rgba(15,23,42,.90) 0%, rgba(15,23,42,.70) 48%, rgba(15,23,42,.30) 100%),
        url("/images/loodgieter-bedrijfsbus.webp") right center / cover no-repeat;
      transform:none;
    }

.hero-btn.whatsapp{
      background:#22c55e;
      box-shadow:0 10px 24px rgba(34,197,94,.20);
    }

.service-feature::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, rgba(15,23,42,.70), rgba(15,23,42,.50), rgba(15,23,42,.20));
      pointer-events:none;
    }

.about-title{
      margin:0 0 24px;
      color:#0f172a;
      font-size:36px;
      line-height:1.18;
      font-weight:700;
      letter-spacing:-.035em;
    }

.about-lead{
      margin:0 0 24px;
      color:#64748b;
      font-size:18px;
      line-height:1.625;
      font-weight:400;
    }

.about-text{
      margin:0 0 40px;
      color:#64748b;
      font-size:16px;
      line-height:1.625;
      font-weight:400;
    }

.about-usps{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:20px;
    }

.about-usp{
      display:flex;
      flex-direction:column;
      gap:12px;
    }

.about-usp-icon{
      width:40px;
      height:40px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
      border-radius:12px;
      background:#f0f9ff;
      color:#0284c7;
    }

.about-usp-icon svg{
      width:20px;
      height:20px;
      stroke:currentColor;
    }

.about-usp strong{
      display:block;
      margin-bottom:4px;
      color:#0f172a;
      font-size:14px;
      line-height:1.35;
      font-weight:600;
    }

.about-usp span{
      display:block;
      color:#64748b;
      font-size:12px;
      line-height:1.625;
      font-weight:400;
    }

@media(max-width:640px){
.about-title{
        font-size:30px;
      }
}

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

.footer-column h4{
      margin:0 0 20px;
      color:#fff;
      font-size:14px;
      line-height:1.35;
      font-weight:600;
    }

@media(max-width:640px){
.werkspot-rating-line{
        justify-content:flex-start;
      }
}

.werkspot-rating-line{
      display:flex !important;
      align-items:baseline !important;
      justify-content:flex-end !important;
      gap:0 !important;
      white-space:nowrap !important;
    }

.werkspot-rating-line strong,
    .werkspot-rating-line span{
      display:inline-block !important;
      white-space:nowrap !important;
    }

.werkspot-rating-line span{
      margin-left:3px !important;
    }

header,
    body > header,
    .fixed.top-0,
    .site-header{
      position:fixed !important;
      z-index:999999 !important;
      isolation:isolate;
    }

main,
    section,
    .service-card,
    .services-card,
    .services-feature,
    .form-card,
    .btn{
      z-index:auto !important;
    }

.service-card,
    .services-card,
    .services-feature,
    .form-card,
    form{
      position:relative;
    }