/* ============================================================
   SPOED DAK TECHNIEK — Animations, Components & Effects
   animations.css
   ============================================================ */

/* ----------------------------------------
   HERO — Base
   ---------------------------------------- */
.hero {
  min-height: 100dvh;
  background-color: var(--color-dark);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: 80px; /* offset fixed navbar */
}

.hero--page {
  min-height: 60vh;
  justify-content: center;
}

/* Diagonal grid overlay */
.hero__grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(58, 58, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58, 58, 255, 0.07) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: skewY(-10deg) scaleY(1.3);
  transform-origin: 0 0;
  pointer-events: none;
}

/* Hero inner layout */
.hero__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: var(--space-10) var(--space-6);
}

.hero--page .hero__content {
  justify-content: center;
  text-align: center;
  flex: unset;
  padding-block: var(--space-8);
}

.hero__inner {
  max-width: 680px;
}

.hero--page .hero__inner {
  max-width: 720px;
  text-align: center;
}

/* Hero typography */
.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  font-weight: var(--font-weight-extrabold);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin-bottom: var(--space-4);
  text-transform: uppercase;
}

.hero__title-accent {
  color: var(--color-secondary);
  display: block;
}

.hero--page .hero__title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: #ffffff;
  text-transform: none;
  line-height: 1.05;
  margin-bottom: var(--space-3);
}

.hero__subtitle {
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--text-lg);
  max-width: 54ch;
  margin-bottom: var(--space-5);
  line-height: 1.65;
}

.hero--page .hero__subtitle {
  margin: 0 auto var(--space-4);
  font-size: var(--text-md);
}

/* White-outline button (hero only) */
.btn--outline-white {
  background-color: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.38);
  transition: background-color var(--duration-200) var(--ease),
              border-color var(--duration-200) var(--ease),
              transform var(--duration-200) var(--ease);
}
.btn--outline-white:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-1px);
}

/* Witte CTA — voor gebruik op de blauwe spoedbanner, waar een blauwe knop wegvalt */
.btn--white {
  background-color: #ffffff;
  color: var(--color-primary);
  border-color: #ffffff;
  box-shadow: 0 2px 8px rgba(16, 16, 45, 0.20);
}
.btn--white:hover {
  background-color: #F3F4F9;
  border-color: #F3F4F9;
  box-shadow: 0 6px 24px rgba(16, 16, 45, 0.28);
  transform: translateY(-1px);
}
.btn--white:active {
  transform: translateY(1px) scale(0.99);
}

/* Hero stats bar */
.hero__stats {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

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

.hero__stat {
  padding: var(--space-5) var(--space-4);
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.hero__stat:last-child { border-right: none; }

.hero__stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: var(--font-weight-extrabold);
  color: #ffffff;
  line-height: 1;
  margin-bottom: var(--space-1);
}

.hero__stat p {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  max-width: none;
  text-align: center;
}

/* Wave divider (bottom of home hero) */
.hero__wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  line-height: 0;
  z-index: 2;
  pointer-events: none;
}
.hero__wave svg { width: 100%; display: block; }

/* Hero overline */
.hero__overline {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--space-2);
}


/* ----------------------------------------
   SCROLL REVEAL
   ---------------------------------------- */
.reveal,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition:
    opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal       { transform: translateY(28px); }
.reveal-left  { transform: translateX(-42px); }
.reveal-right { transform: translateX(42px); }

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.delay-1 { transition-delay: 100ms; }
.delay-2 { transition-delay: 200ms; }
.delay-3 { transition-delay: 300ms; }
.delay-4 { transition-delay: 400ms; }


/* ----------------------------------------
   TRUST STRIP
   ---------------------------------------- */
.trust-strip {
  border-bottom: 1px solid var(--color-border);
}

.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.trust-strip__item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  border-right: 1px solid var(--color-border);
}
.trust-strip__item:last-child { border-right: none; }

.trust-strip__item i {
  color: var(--color-secondary);
  font-size: 1.2rem;
  flex-shrink: 0;
}


/* ----------------------------------------
   SPLIT SECTION
   ---------------------------------------- */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-6), 8vw, var(--space-12));
  align-items: center;
}


/* ----------------------------------------
   IMAGE PLACEHOLDER
   ---------------------------------------- */
.img-placeholder {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-xl);
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 4rem;
  position: relative;
  overflow: hidden;
}
.img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.12) 0%, transparent 65%);
}

.img-placeholder--circle {
  border-radius: var(--radius-full);
  width: 320px;
  height: 320px;
  min-height: unset;
  margin: 0 auto;
}

.img-placeholder--short { min-height: 260px; }


/* ----------------------------------------
   DIENST CARDS (homepage 4x2 grid)
   ---------------------------------------- */
.diensten__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.dienst-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition:
    transform var(--duration-200) var(--ease),
    box-shadow var(--duration-200) var(--ease),
    border-left-color var(--duration-200) var(--ease);
  cursor: default;
}
.dienst-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-left-color: var(--color-accent);
}

.dienst-card__icon {
  font-size: 1.75rem;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  display: block;
}
.dienst-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-1);
}
.dienst-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: none;
}


/* ----------------------------------------
   NOODREPARATIE BANNER
   ---------------------------------------- */
.nood-banner {
  background-color: var(--color-primary);
  padding-block: clamp(var(--space-8), 8vw, var(--space-12));
}

.nood-banner__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: center;
}

.nood-banner h2 {
  color: #ffffff;
  margin-bottom: var(--space-2);
}

.nood-banner p {
  color: rgba(255, 255, 255, 0.72);
  max-width: 54ch;
}

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

.nood-banner__phone-number {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: var(--font-weight-extrabold);
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  white-space: nowrap;
}

.nood-banner__phone-number i {
  color: var(--color-accent);
  animation: phone-ring 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes phone-ring {
  0%, 50%, 100% { transform: rotate(0deg); }
  10%           { transform: rotate(-18deg); }
  20%           { transform: rotate(18deg); }
  30%           { transform: rotate(-12deg); }
  40%           { transform: rotate(12deg); }
}


/* ----------------------------------------
   PORTFOLIO CARDS (homepage preview)
   ---------------------------------------- */
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.portfolio-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition:
    transform var(--duration-200) var(--ease),
    box-shadow var(--duration-200) var(--ease);
  cursor: pointer;
}
.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.portfolio-card__before,
.portfolio-card__after {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.portfolio-card__before { background-color: #2A2A3A; }
.portfolio-card__after  { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); }

.portfolio-card__label {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  font-size: 0.65rem;
  font-weight: var(--font-weight-semibold);
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.5);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.portfolio-card__icon {
  font-size: 2rem;
  color: rgba(255,255,255,0.4);
}

.portfolio-card__info {
  padding: var(--space-3);
  background: var(--color-background);
}
.portfolio-card__info h4 {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-0-5);
}
.portfolio-card__info p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  max-width: none;
}


/* ----------------------------------------
   REVIEWS
   ---------------------------------------- */
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.review-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--duration-200) var(--ease),
              transform var(--duration-200) var(--ease);
}
.review-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.review-card__quote {
  position: absolute;
  top: var(--space-2);
  left: var(--space-3);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-secondary);
  opacity: 0.12;
  font-family: Georgia, serif;
  user-select: none;
}

.review-card__stars {
  color: #F59E0B;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
  letter-spacing: 2px;
}

.review-card__text {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.72;
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
  font-style: italic;
  max-width: none;
}

.review-card__author {
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-dark);
  display: block;
}
.review-card__location {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}


/* ----------------------------------------
   FAQ ACCORDION
   ---------------------------------------- */
.faq-section {
  background-color: var(--color-dark);
}

.faq-section h2 {
  color: #ffffff;
}

.faq-list {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.faq-item:last-child { border-bottom: none; }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: #ffffff;
  transition: background-color var(--duration-150) var(--ease);
  line-height: 1.4;
}
.faq-question:hover {
  background-color: rgba(255,255,255,0.03);
}
.faq-question i {
  color: var(--color-secondary);
  flex-shrink: 0;
  font-size: 1rem;
  transition: transform var(--duration-300) var(--ease);
}
.faq-item.is-open .faq-question i {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-answer p {
  padding: 0 var(--space-5) var(--space-5);
  color: rgba(255,255,255,0.62);
  font-size: var(--text-base);
  line-height: 1.75;
  max-width: none;
}


/* ----------------------------------------
   CTA — GRAIN TEXTURE
   ---------------------------------------- */
.cta-grain {
  background-color: var(--color-dark);
  position: relative;
  text-align: center;
  overflow: hidden;
}
.cta-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  opacity: 0.055;
  pointer-events: none;
}
.cta-grain > .container { position: relative; z-index: 1; }
.cta-grain h2 { color: #ffffff; margin-bottom: var(--space-2); }
.cta-grain p  {
  color: rgba(255,255,255,0.62);
  margin: 0 auto var(--space-6);
  max-width: 52ch;
  text-align: center;
}


/* ----------------------------------------
   SCROLL-TO-TOP BUTTON
   ---------------------------------------- */
.scroll-top {
  position: fixed;
  bottom: calc(var(--space-5) + 60px + 14px + 60px + 14px);
  right: var(--space-5);
  z-index: var(--z-toast);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--duration-200) var(--ease),
    visibility var(--duration-200) var(--ease),
    transform var(--duration-200) var(--ease),
    background-color var(--duration-150) var(--ease),
    box-shadow var(--duration-150) var(--ease);
  box-shadow: var(--shadow-md);
}
.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-top:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}


/* ----------------------------------------
   CALL BUTTON TOOLTIP
   ---------------------------------------- */
.call-btn::after {
  content: 'Bel Direct';
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background-color: var(--color-dark);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  padding: 5px 10px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-150) var(--ease),
    transform var(--duration-150) var(--ease),
    visibility var(--duration-150) var(--ease);
  pointer-events: none;
}
.call-btn:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}


/* ----------------------------------------
   LIGHTBOX
   ---------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background-color: rgba(10,10,15,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-300) var(--ease),
    visibility var(--duration-300) var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__content {
  max-width: 900px;
  width: 100%;
  transform: scale(0.9);
  transition: transform var(--duration-300) var(--ease);
}
.lightbox.is-open .lightbox__content { transform: scale(1); }

.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.1);
  border: none;
  color: #ffffff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-150) var(--ease);
}
.lightbox__close:hover { background: rgba(255,255,255,0.2); }

.lightbox__placeholder {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8rem;
  color: rgba(255,255,255,0.6);
}
.lightbox__placeholder.lightbox--voor {
  background: #2A2A3A;
}


/* ----------------------------------------
   DAKTYPE CHIPS (diensten page)
   ---------------------------------------- */
.daktype-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-8);
}
.daktype-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-full);
  cursor: default;
  transition:
    background-color var(--duration-150) var(--ease),
    color var(--duration-150) var(--ease);
}
.daktype-chip:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}


/* ----------------------------------------
   DIENST SECTIE (diensten page alternating)
   ---------------------------------------- */
.dienst-sectie {
  padding-block: clamp(var(--space-8), 7vw, var(--space-12));
}

.dienst-sectie__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-6), 8vw, var(--space-12));
  align-items: center;
}

.dienst-sectie__subtitle {
  font-size: var(--text-lg);
  color: var(--color-secondary);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-3);
  display: block;
  max-width: none;
}

.dienst-sectie__content p {
  margin-bottom: var(--space-3);
  max-width: none;
}

.dienst-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  margin-bottom: var(--space-4);
}
.dienst-bullets li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1-5);
  font-size: var(--text-base);
  color: var(--color-text);
}
.dienst-bullets li i {
  color: var(--color-accent-dark);
  margin-top: 3px;
  flex-shrink: 0;
}


/* ----------------------------------------
   ONS WERK PAGE
   ---------------------------------------- */
.werk-categorie {
  padding-block: clamp(var(--space-8), 7vw, var(--space-12));
}

.werk-categorie h2 {
  margin-bottom: var(--space-6);
}

.werk-voor-na {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.werk-kolom-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}
.werk-kolom-label--voor {
  background: rgba(0,0,0,0.06);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.werk-kolom-label--na {
  background: rgba(58, 58, 255,0.08);
  color: var(--color-secondary);
  border: 1px solid rgba(58, 58, 255,0.2);
}

.werk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.werk-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.werk-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition:
    transform var(--duration-200) var(--ease),
    box-shadow var(--duration-200) var(--ease);
}
.werk-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}

.werk-card__image {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  position: relative;
}
.werk-card--voor .werk-card__image {
  background-color: #2A2A3A;
  color: rgba(255,255,255,0.35);
}
.werk-card--na .werk-card__image {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: rgba(255,255,255,0.7);
}

.werk-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--duration-200) var(--ease);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: #ffffff;
}
.werk-card:hover .werk-card__overlay { opacity: 1; }


/* ----------------------------------------
   FEATURE CARDS (over-ons page)
   ---------------------------------------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.feature-card {
  text-align: center;
  padding: var(--space-5) var(--space-3);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: box-shadow var(--duration-200) var(--ease),
              transform var(--duration-200) var(--ease);
}
.feature-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.feature-card__icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background-color: rgba(13, 13, 223,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-3);
  font-size: 1.4rem;
  color: var(--color-primary);
}

.feature-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-1-5);
}

.feature-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 22ch;
  margin: 0 auto;
  text-align: center;
}


/* ----------------------------------------
   CONTACT PAGE
   ---------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-6), 8vw, var(--space-12));
  align-items: start;
}

.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.contact-info__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-lg);
  background-color: rgba(58, 58, 255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  flex-shrink: 0;
  font-size: 1.1rem;
}

.contact-info__text strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: 3px;
}
.contact-info__text a,
.contact-info__text span {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}
.contact-info__text a:hover { color: var(--color-secondary); }

.nood-card {
  background-color: var(--color-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.nood-card h4 {
  color: #ffffff;
  margin-bottom: var(--space-1-5);
}
.nood-card__number {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-1);
}
.nood-card p {
  color: rgba(255,255,255,0.55);
  font-size: var(--text-sm);
  max-width: none;
}

.openingstijden {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
}
.openingstijden h4 { margin-bottom: var(--space-3); }

.openingstijden__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1-5) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.openingstijden__row:last-child { border-bottom: none; }
.openingstijden__row span:last-child { font-weight: var(--font-weight-medium); }

/* Contact form card */
.contact-form-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}

/* Float label */
.float-label {
  position: relative;
  margin-bottom: var(--space-3);
}

.float-label input,
.float-label textarea,
.float-label select {
  padding-top: 1.375rem;
  padding-bottom: 0.5rem;
}

.float-label label {
  position: absolute;
  top: 1rem;
  left: 0.875rem;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  pointer-events: none;
  transition:
    top var(--duration-200) var(--ease),
    font-size var(--duration-200) var(--ease),
    color var(--duration-200) var(--ease);
}

.float-label input:focus ~ label,
.float-label input:not(:placeholder-shown) ~ label,
.float-label textarea:focus ~ label,
.float-label textarea:not(:placeholder-shown) ~ label,
.float-label select:focus ~ label,
.float-label select.has-value ~ label {
  top: 0.35rem;
  font-size: var(--text-xs);
  color: var(--color-secondary);
}

.form-footer-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.form-footer-text span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.form-footer-text i { color: var(--color-accent-dark); }

/* Form success state */
.form-success {
  display: none;
  text-align: center;
  padding: var(--space-8) var(--space-4);
}
.form-success i {
  font-size: 3.5rem;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  display: block;
}
.form-success h3 { margin-bottom: var(--space-1-5); }
.form-success p  { margin: 0 auto; color: var(--color-text-muted); }

/* Utility: centered action */
.center-action {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}


/* ============================================================
   SPOED DAK TECHNIEK — aanvullende componenten
   Toegevoegd bij de ombouw van Bouwservice Mako naar
   Spoed Dak Techniek: echte foto's, dienstpagina's en stappen.
   ============================================================ */

/* ----------------------------------------
   SKIP LINK (toegankelijkheid)
   ---------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-modal);
  padding: var(--space-1-5) var(--space-3);
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 0 0 var(--radius-md) 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}
.skip-link:focus {
  left: 0;
}

/* ----------------------------------------
   FOTOBLOK — vervangt de oude gradient-placeholders
   ---------------------------------------- */
.foto-blok {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
  line-height: 0;
}
.foto-blok img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.foto-blok--hoog img  { aspect-ratio: 4 / 5; }
.foto-blok--breed img { aspect-ratio: 16 / 10; }

/* ----------------------------------------
   FOTOKAART — losse foto met onderschrift
   ---------------------------------------- */
.foto-kaart {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-background);
  transition:
    transform var(--duration-200) var(--ease),
    box-shadow var(--duration-200) var(--ease);
}
.foto-kaart:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}
.foto-kaart img {
  width: 100%;
  height: auto;          /* nodig, anders wint het height-attribuut van de verhouding */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.foto-kaart figcaption {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ----------------------------------------
   DIENSTKAART als link
   ---------------------------------------- */
a.dienst-card {
  display: block;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
a.dienst-card:hover {
  border-left-color: var(--color-accent);
}
.dienst-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}
.dienst-card__link i {
  transition: transform var(--duration-200) var(--ease);
}
a.dienst-card:hover .dienst-card__link i {
  transform: translateX(4px);
}

/* Zes diensten staan het mooist in drie kolommen */
.diensten__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

/* ----------------------------------------
   STAPPEN (werkwijze op de homepage)
   ---------------------------------------- */
.stappen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.stap-kaart {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  position: relative;
}
.stap-nummer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-extrabold);
  margin-bottom: var(--space-3);
}
.stap-kaart h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-1);
}
.stap-kaart p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: none;
}

/* ----------------------------------------
   SIGNAALKAARTEN (dienstpagina's)
   ---------------------------------------- */
.signaal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.signaal-kaart {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.signaal-kaart > i {
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  display: block;
}
.signaal-kaart h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-1);
}
.signaal-kaart p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: none;
}

/* ----------------------------------------
   KRUIMELPAD
   ---------------------------------------- */
.kruimelpad {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-1-5);
  font-size: var(--text-sm);
}
.kruimelpad .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
}
.kruimelpad a {
  color: var(--color-primary);
}
.kruimelpad span[aria-current] {
  color: var(--color-text-muted);
}

/* ----------------------------------------
   WERKKAART met echte foto (ons werk)
   ---------------------------------------- */
.werk-card__foto {
  height: 220px;
  overflow: hidden;
  background-color: var(--color-surface);
}
.werk-card__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-300) var(--ease);
}
.werk-card:hover .werk-card__foto img {
  transform: scale(1.04);
}
.werk-card:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 3px;
}

/* ----------------------------------------
   LIGHTBOX met echte foto
   ---------------------------------------- */
.lightbox__foto {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__foto img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
.lightbox__caption {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  max-width: none;
}

/* ----------------------------------------
   WOORDMERK NAAST HET LOGO
   Het beeldmerk is een rond logo met tekst in de cirkel. Op 50 pixels
   is die tekst onleesbaar, dus zetten we de bedrijfsnaam ernaast.
   ---------------------------------------- */
.navbar__logo,
.footer__logo {
  gap: var(--space-1-5);
}

.navbar__woordmerk,
.footer__woordmerk {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
}

.navbar__woordmerk {
  font-size: 1.35rem;
  color: var(--color-dark);
}
.footer__woordmerk {
  font-size: 1.2rem;
  color: #ffffff;
}

/* Op de homepage staat de balk transparant over de donkere hero */
.navbar--transparent-mode:not(.navbar--scrolled) .navbar__woordmerk {
  color: #ffffff;
}

/* Twee logovarianten: wit-blauw op donker, donker-blauw op wit */
.navbar__logo .logo-licht  { display: none; }
.navbar__logo .logo-donker { display: block; }
.navbar--transparent-mode:not(.navbar--scrolled) .navbar__logo .logo-licht  { display: block; }
.navbar--transparent-mode:not(.navbar--scrolled) .navbar__logo .logo-donker { display: none; }

/* Paginakoppen mogen kleiner dan de titel op de homepage */
.hero--page .hero__title {
  font-size: clamp(2.5rem, 6vw, 4.75rem);
}

/* ----------------------------------------
   TERUGVAL VOOR DE SCROLL-ANIMATIES
   Zonder JavaScript of bij voorkeur voor minder beweging moet alle
   inhoud gewoon zichtbaar zijn in plaats van doorzichtig te blijven.
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* De footer heeft een vierde kolom gekregen voor de diensten */
.footer__grid {
  grid-template-columns: 1.6fr 0.9fr 1fr 1.1fr 1.4fr;
}

/* ----------------------------------------
   MOBIEL MENU
   Antraciet in plaats van blauw, zodat de blauwe offerteknop
   er niet in wegvalt en het beeld rustiger is.
   ---------------------------------------- */
.navbar__overlay {
  background-color: var(--color-dark);
}
.navbar__overlay-links a {
  padding-block: var(--space-1);
}
/* De zwevende belknop hoort niet over het geopende menu heen */
.navbar__overlay.is-open ~ * .call-btn,
body:has(.navbar__overlay.is-open) .call-btn,
body:has(.navbar__overlay.is-open) .wa-btn,
body:has(.navbar__overlay.is-open) .scroll-top {
  opacity: 0;
  pointer-events: none;
}

/* De vergrote foto hoort boven de navigatiebalk en de zwevende knoppen */
.lightbox {
  z-index: 900;
}
body:has(.lightbox.is-open) .navbar,
body:has(.lightbox.is-open) .call-btn,
body:has(.lightbox.is-open) .wa-btn,
body:has(.lightbox.is-open) .scroll-top {
  opacity: 0;
  pointer-events: none;
}

/* ----------------------------------------
   HAMBURGER WIT OP DE DONKERE HERO
   In transparante modus (homepage, voor het scrollen) staat het menu-
   icoon over de donkere hero. Zwart valt daar weg, dus dan wit.
   Zodra de balk wit wordt (gescrold of op subpagina's) blijft het donker.
   ---------------------------------------- */
.navbar--transparent-mode:not(.navbar--scrolled) .navbar__hamburger {
  color: #ffffff;
}

/* ----------------------------------------
   GOLF EN STATISTIEKENBALK — definitieve ruimte
   De golf onderaan de hero schaalde mee met de schermbreedte en werd op
   grote schermen zo hoog dat hij tegen de tekst kwam. Nu heeft hij een
   begrensde hoogte en houdt de statistiekenbalk er op elke breedte ruimte
   onder, zodat de tekst nooit meer in de golf valt.
   ---------------------------------------- */
.hero__wave svg {
  height: clamp(22px, 3vw, 46px);
}
.hero__stats {
  padding-bottom: clamp(5rem, 9vw, 9rem);
}

/* ----------------------------------------
   ZWEVENDE BELKNOP
   Subtiele uitdijende halo (rustiger dan het origineel) plus een duidelijk
   gevuld telefoonicoon in plaats van de dunne omtrek-handset.
   ---------------------------------------- */
.call-btn {
  width: 62px;
  height: 62px;
  background-color: var(--color-accent);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(13, 13, 223, 0.35);
}

/* Zwevende WhatsApp-knop: zelfde formaat als de belknop, bewust zonder puls */
.wa-btn {
  position: fixed;
  bottom: calc(var(--space-5) + 60px + 14px);
  right: var(--space-5);
  z-index: var(--z-toast);
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background-color: #25D366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
  transition: transform var(--duration-200) var(--ease),
              box-shadow var(--duration-200) var(--ease),
              background-color var(--duration-200) var(--ease);
}
.wa-btn i {
  font-size: 30px;
  line-height: 1;
}
.wa-btn:hover {
  transform: translateY(-3px) scale(1.05);
  background-color: #1fbd59;
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.55);
}

.call-btn i {
  font-size: 24px;
  line-height: 1;
}
/* De halo: zachter en kleiner dan het origineel, maar wel weer aanwezig */
.call-btn::before {
  display: block;
  background-color: var(--color-accent);
  animation: call-pulse-subtiel 2.6s ease-out infinite;
}
@keyframes call-pulse-subtiel {
  0%   { transform: scale(1);    opacity: 0.3; }
  70%  { transform: scale(1.38); opacity: 0; }
  100% { transform: scale(1.38); opacity: 0; }
}
.call-btn:hover {
  transform: translateY(-2px) scale(1.05);
  background-color: var(--color-accent-dark);
  box-shadow: 0 12px 30px rgba(13, 13, 223, 0.45);
}