:root {
  color-scheme: light;
  --red-800: #8f0000;
  --red-700: #b70100;
  --red-600: #d41414;
  --ink: #14171d;
  --ink-soft: #242a33;
  --muted: #5b6573;
  --line: #dde3ea;
  --paper: #ffffff;
  --soft: #f6f8fb;
  --soft-blue: #e8f1fb;
  --soft-yellow: #fff4cf;
  --green: #0c6b54;
  --shadow: 0 22px 60px rgba(21, 28, 38, 0.11);
  --shadow-tight: 0 12px 28px rgba(21, 28, 38, 0.1);
  --shadow-header: 0 12px 28px rgba(21, 28, 38, 0.08);
  --radius: 8px;
  --max: 1180px;
  --wide: 1320px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  font-family: "Aptos Display", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(246, 248, 251, 0.7), rgba(255, 255, 255, 0) 22rem),
    var(--paper);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

main#inhoud {
    overflow: hidden;
}

.page-shell {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 0.75rem;
  z-index: 99;
  transform: translateY(-160%);
  background: var(--ink);
  color: white;
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(221, 227, 234, 0.42);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
  transition: background 420ms var(--ease-out), border-color 420ms var(--ease-out),
              box-shadow 420ms var(--ease-out);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: rgba(221, 227, 234, 0.92);
  box-shadow: var(--shadow-header);
}

.nav-shell {
  width: min(100% - 2rem, var(--wide));
  margin: 0 auto;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transition: min-height 360ms var(--ease-out);
}

.site-header.is-scrolled .nav-shell {
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  font-weight: 850;
  line-height: 1.05;
}

.brand img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  transition: transform 350ms ease;
}

.brand:hover img {
  transform: translateY(-2px) scale(1.04);
}

.brand span {
  max-width: 18rem;
  color: var(--red-700);
  font-size: 1.28rem;
  letter-spacing: 0;
}

.site-menu {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-weight: 760;
}

.site-menu a {
  position: relative;
  text-decoration: none;
  color: #26313d;
}

.site-menu a:not(.nav-phone) {
  transition: color 280ms var(--ease-out);
}

.site-menu a:not(.nav-phone)::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.45rem;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--red-700);
  content: "";
  transition: transform 380ms var(--ease-out);
}

.site-menu a:hover,
.site-menu a[aria-current] {
  color: var(--red-700);
}

.site-menu a:hover::after,
.site-menu a[aria-current]::after {
  transform: scaleX(1);
}

.site-menu .nav-phone {
  background: var(--red-700);
  color: white;
  padding: 0.78rem 1.05rem;
  border-radius: var(--radius);
  box-shadow: 0 16px 32px rgba(183, 1, 0, 0.2);
  transition: transform 320ms var(--ease-out), background 320ms var(--ease-out),
              box-shadow 320ms var(--ease-out);
}

.nav-item.has-submenu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.has-submenu > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.has-submenu > a .caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-top: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 360ms var(--ease-out);
}

.has-submenu:hover > a .caret,
.has-submenu:focus-within > a .caret,
.has-submenu.is-open > a .caret {
  transform: rotate(180deg);
}

.submenu {
  position: absolute;
  top: 100%;
  left: -0.6rem;
  min-width: 340px;
  padding: 1rem 0.6rem 0.6rem;
  display: grid;
  gap: 0.15rem;
  border: 1px solid rgba(221, 227, 234, 0.92);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out),
              visibility 0s linear 380ms;
  z-index: 5;
}

.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu,
.has-submenu.is-open .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out),
              visibility 0s linear 0s;
}

.submenu a {
  position: relative;
  display: grid;
  gap: 0.1rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: background 260ms var(--ease-out), transform 260ms var(--ease-out),
              color 260ms var(--ease-out);
}

.submenu a::after {
  display: none !important;
}

.submenu a:hover,
.submenu a:focus-visible {
  background: rgba(183, 1, 0, 0.07);
  transform: translateX(3px);
  color: var(--red-700);
}

.submenu strong {
  font-weight: 850;
  color: inherit;
  line-height: 1.2;
}

.submenu span {
  color: var(--muted);
  font-size: 0.84rem;
}

.submenu a:hover span,
.submenu a:focus-visible span {
  color: rgba(183, 1, 0, 0.72);
}

.site-menu .nav-phone:hover {
  color: white;
  background: var(--red-800);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(183, 1, 0, 0.26);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  cursor: pointer;
}

.menu-lines,
.menu-lines::before,
.menu-lines::after {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--ink);
  content: "";
}

.menu-lines::before {
  transform: translateY(-7px);
}

.menu-lines::after {
  transform: translateY(5px);
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero-home {
  min-height: 82svh;
  display: flex;
  align-items: center;
  isolation: isolate;
}

.hero-image,
.hero-overlay,
.hero-ambient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-image {
  object-fit: cover;
  object-position: center 32%;
  transform: scale(1.06);
  will-change: transform;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(8, 11, 16, 0.82), rgba(8, 11, 16, 0.56) 42%, rgba(8, 11, 16, 0.16)),
    linear-gradient(0deg, rgba(8, 11, 16, 0.56), rgba(8, 11, 16, 0.04) 55%);
}

.hero-ambient {
  z-index: 0;
  background:
    radial-gradient(ellipse at 16% 28%, rgba(212, 20, 20, 0.32), transparent 34%),
    linear-gradient(115deg, transparent 0 62%, rgba(255, 244, 207, 0.1) 62% 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(100% - 2rem, var(--wide));
  margin: 0 auto;
  padding: 5rem 0;
  color: white;
}

.eyebrow {
  margin: 0 0 0.72rem;
  color: var(--red-700);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero .eyebrow,
.cta-band .eyebrow {
  color: #ffdf7a;
}

/* Lange Nederlandse samenstellingen ("cameraonderzoek", "condensatieketels")
   moeten kunnen afbreken. Met word-break: keep-all bleven ze op smalle
   schermen doorlopen tot buiten hun container, en omdat body en
   .page-shell overflow-x: hidden hebben, werd die tekst stil afgeknipt
   in plaats van scrollbaar. */
h1,
h2,
h3,
p,
li,
th,
td,
summary,
blockquote,
figcaption {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  -webkit-hyphens: none;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.04;
}

h1 {
  max-width: 980px;
  font-size: clamp(3rem, 5.3vw, 5.8rem);
  font-weight: 900;
  letter-spacing: 0;
}

h2 {
  font-size: clamp(2.1rem, 3.7vw, 4.25rem);
  font-weight: 900;
  letter-spacing: 0;
}

h3 {
  font-size: 1.22rem;
  font-weight: 850;
}

.hero-copy {
  max-width: 720px;
  margin: 1.35rem 0 0;
  font-size: clamp(1rem, 1.4vw, 1.24rem);
  color: rgba(255, 255, 255, 0.9);
}

.hero-actions,
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.8rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.9rem 1.18rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
  transition: transform 360ms var(--ease-out), background 320ms var(--ease-out),
              box-shadow 360ms var(--ease-out), color 320ms var(--ease-out);
  will-change: transform;
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(-1px) scale(0.985);
  transition-duration: 120ms;
}

.button-primary {
  background: var(--red-700);
  color: white;
  box-shadow: 0 16px 30px rgba(183, 1, 0, 0.22);
}

.button-primary:hover {
  background: var(--red-800);
}

.button-light {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
}

.button-light:hover,
.button-outline:hover {
  background: var(--soft-yellow);
}

.button-outline {
  border-color: var(--line);
  background: white;
  color: var(--ink);
}

.hero-side-note {
  position: absolute;
  right: max(1rem, calc((100vw - var(--wide)) / 2));
  bottom: 2rem;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.84rem;
  font-weight: 800;
}

.hero-side-note span {
  padding: 0.55rem 0.68rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
}

.js-enabled [data-animate="hero"] .hero-content {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
}

.js-enabled [data-animate="hero"].is-loaded .hero-content {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 1100ms var(--ease-out), transform 1200ms var(--ease-out),
              filter 1100ms var(--ease-out);
}

.js-enabled [data-animate="hero"] .hero-content .hero-panel > * {
  opacity: 0;
  transform: translateY(18px);
}

.js-enabled [data-animate="hero"].is-loaded .hero-content .hero-panel > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}

.js-enabled [data-animate="hero"].is-loaded .hero-content .hero-panel > *:nth-child(1) { transition-delay: 80ms; }
.js-enabled [data-animate="hero"].is-loaded .hero-content .hero-panel > *:nth-child(2) { transition-delay: 180ms; }
.js-enabled [data-animate="hero"].is-loaded .hero-content .hero-panel > *:nth-child(3) { transition-delay: 280ms; }
.js-enabled [data-animate="hero"].is-loaded .hero-content .hero-panel > *:nth-child(4) { transition-delay: 380ms; }

.js-enabled [data-animate="hero"] .hero-side-note span {
  opacity: 0;
  transform: translateY(10px);
}

.js-enabled [data-animate="hero"].is-loaded .hero-side-note span {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

.js-enabled [data-animate="hero"].is-loaded .hero-side-note span:nth-child(1) { transition-delay: 500ms; }
.js-enabled [data-animate="hero"].is-loaded .hero-side-note span:nth-child(2) { transition-delay: 580ms; }
.js-enabled [data-animate="hero"].is-loaded .hero-side-note span:nth-child(3) { transition-delay: 660ms; }
.js-enabled [data-animate="hero"].is-loaded .hero-side-note span:nth-child(4) { transition-delay: 740ms; }

.section {
  width: min(100% - 2rem, var(--max));
  margin: 0 auto;
  padding: 7rem 0;
}

.chapter {
  position: relative;
}

.section-heading {
  max-width: 820px;
  margin-bottom: 2.2rem;
}

.section-heading h2,
.page-hero h1 {
  color: var(--ink);
}

.service-intro {
  padding-top: 5rem;
}

.service-grid,
.bento-grid {
  display: grid;
  gap: 1rem;
  grid-auto-flow: dense;
}

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

.service-grid-wide {
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
}

.bento-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(230px, auto);
}

.service-card,
.bento-card {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: 0.82rem;
  padding: 1.3rem;
  border: 1px solid rgba(221, 227, 234, 0.92);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-tight);
  overflow: hidden;
  transform-style: preserve-3d;
}

.service-card::before,
.bento-card::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(183, 1, 0, 0.08), transparent 34%),
    linear-gradient(315deg, rgba(12, 107, 84, 0.08), transparent 32%);
  opacity: 0;
  content: "";
  transition: opacity 500ms var(--ease-out);
}

.service-card > *,
.bento-card > * {
  position: relative;
  z-index: 1;
}

.service-card:hover::before,
.bento-card:hover::before {
  opacity: 1;
}

.tilt-card {
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transition: transform 480ms var(--ease-out), box-shadow 480ms var(--ease-out),
              border-color 480ms var(--ease-out);
  will-change: transform;
}

.tilt-card:hover {
  --lift: -6px;
  border-color: rgba(183, 1, 0, 0.24);
  box-shadow: var(--shadow);
}

.service-card img {
  width: 88px;
  height: 76px;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

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

.service-card h2,
.service-card h3 {
  font-size: 1.16rem;
}

.service-card p,
.bento-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

.service-card a,
.inline-link {
  position: relative;
  margin-top: auto;
  color: var(--red-700);
  font-weight: 850;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.22em;
  transition: color 280ms var(--ease-out), letter-spacing 320ms var(--ease-out);
}

.service-card a:hover,
.inline-link:hover {
  color: var(--red-800);
  letter-spacing: 0.005em;
}

.bento-large {
  grid-column: span 2;
  grid-row: span 2;
  justify-content: space-between;
  background: #20262f;
  min-height: 480px;
}

.bento-large h3 {
  max-width: 580px;
  font-size: clamp(2rem, 3.2vw, 3.35rem);
}

.bento-large p {
  max-width: 620px;
  margin-top: 1rem;
  color: var(--red-700);
  font-size: 1.06rem;
  font-weight: bold;
}

.bento-media {
  position: relative;
  margin-top: 1.5rem;
  min-height: 210px;
  border-radius: var(--radius);
  overflow: hidden;
}

.bento-media img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
  filter: grayscale(0.1) contrast(1.06);
  transition: transform 900ms ease, filter 900ms ease;
}

.bento-large:hover .bento-media img {
  transform: scale(1.06);
  filter: grayscale(0) contrast(1.12);
}

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 5rem;
}

.text-stack p {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 1.08rem;
}

.word-reveal {
  display: inline-block;
  opacity: 0.32;
  transform: translateY(6px);
  filter: blur(2px);
  transition: opacity 540ms var(--ease-out), transform 540ms var(--ease-out),
              filter 540ms var(--ease-out);
}

.word-reveal.is-on {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.8rem;
  /* Is een <ul>: de lijstopmaak weghalen, de rasteropmaak behouden. */
  padding: 0;
  list-style: none;
}

.proof-grid > li {
  padding: 1.05rem;
  border: 1px solid rgba(183, 1, 0, 0.16);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fff5f5, white);
}

.proof-grid strong {
  display: block;
  font-size: 1.12rem;
}

.proof-grid span {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.process-section {
  padding-top: 8rem;
}

.accordion-strip {
  display: flex;
  min-height: 340px;
  gap: 0.8rem;
}

.accordion-panel {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  padding: 1.25rem;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(20, 23, 29, 0.08), rgba(20, 23, 29, 0.88)),
    url("Assets/EddyEnGlennSquare.jpg") center/cover;
  color: white;
  overflow: hidden;
  transition: flex 720ms var(--ease-out), filter 720ms var(--ease-out);
}

.accordion-panel:nth-child(2) {
  background-image:
    linear-gradient(180deg, rgba(20, 23, 29, 0.08), rgba(20, 23, 29, 0.88)),
    url("Assets/CameraInspection09-web.jpg");
}

.accordion-panel:nth-child(3) {
  background-image:
    linear-gradient(180deg, rgba(20, 23, 29, 0.08), rgba(20, 23, 29, 0.88)),
    url("Assets/schuppen.webp");
}

.accordion-panel:nth-child(4) {
  background-image:
    linear-gradient(180deg, rgba(20, 23, 29, 0.08), rgba(20, 23, 29, 0.88)),
    url("Assets/DSCN0029-small.webp");
}

.accordion-panel:hover,
.accordion-panel:focus-within {
  flex: 2.35 1 0;
  filter: contrast(1.08);
}

.accordion-panel span {
  font-size: clamp(1.45rem, 2.2vw, 2.3rem);
  font-weight: 900;
}

.accordion-panel p {
  max-width: 24rem;
  margin: 0.75rem 0 0;
  color: rgba(255, 255, 255, 0.82);
}

.work-area {
  padding-top: 7rem;
}

.work-area p {
  max-width: 880px;
  margin: 0;
  color: var(--muted);
  font-size: 1.08rem;
}

.cta-band {
  width: min(100% - 2rem, var(--max));
  margin: 0 auto 7rem;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: 2rem;
  align-items: center;
  padding: 2.2rem;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, #20262f, #15171d 58%, #2b1010),
    #20262f;
  color: white;
  box-shadow: var(--shadow);
}

.cta-band p {
  margin: 0.75rem 0 0;
  color: rgba(255, 255, 255, 0.78);
}

.page-hero {
  position: relative;
  width: min(100% - 2rem, var(--wide));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.66fr);
  gap: 4rem;
  align-items: end;
  padding: 7rem 0 4rem;
}

.page-hero::before {
  position: absolute;
  inset: 1.6rem 0 auto auto;
  width: min(38vw, 520px);
  height: 180px;
  background:
    linear-gradient(90deg, transparent, rgba(183, 1, 0, 0.09)),
    repeating-linear-gradient(90deg, rgba(20, 23, 29, 0.08) 0 1px, transparent 1px 18px);
  content: "";
  pointer-events: none;
}

.page-hero > * {
  position: relative;
  z-index: 1;
}

.page-hero-dynamic {
  background: radial-gradient(ellipse at 0% 60%, rgba(183, 1, 0, 0.04), transparent 52%);
}

.page-hero h1 {
  max-width: 940px;
}

.page-hero p:last-child {
  margin: 0;
  margin-top: 10%;
  color: var(--muted);
  font-size: 1.08rem;
  align-self: center;
}

.service-overview {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.detail-list {
  width: min(100% - 2rem, var(--max));
  margin: 0 auto;
  padding: 1rem 0 7rem;
}

.detail-section {
  display: grid;
  grid-template-columns: minmax(240px, 0.42fr) minmax(0, 0.78fr);
  gap: 3.4rem;
  align-items: center;
  padding: 4.2rem 0;
  border-top: 1px solid var(--line);
}

.detail-section:last-child {
  border-bottom: 1px solid var(--line);
}

.detail-section-reverse {
  grid-template-columns: minmax(0, 0.78fr) minmax(240px, 0.42fr);
}

.detail-section-reverse .detail-content {
  order: 1;
}

.detail-section-reverse .detail-media {
  order: 2;
}

.detail-media {
  min-height: 286px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--soft), white);
  overflow: hidden;
  box-shadow: var(--shadow-tight);
}

.logo-media,
.badge-media {
  display: grid;
  place-items: center;
  padding: 2rem;
}

.logo-media img {
  max-height: 190px;
  object-fit: contain;
}

.wide-logo img {
  width: min(100%, 330px);
  max-height: 170px;
}

.badge-media {
  background:
    linear-gradient(135deg, var(--soft-blue), white);
}

.badge-media span {
  color: var(--green);
  font-size: 3rem;
  font-weight: 950;
}

.gallery-media {
  display: grid;
  gap: 0.65rem;
  background: transparent;
  box-shadow: none;
}

.gallery-media img {
  width: 100%;
  height: 100%;
  min-height: 168px;
  object-fit: cover;
  border-radius: var(--radius);
  filter: grayscale(0.08) contrast(1.08);
  transition: transform 760ms ease, filter 760ms ease;
}

.gallery-media img:hover {
  transform: scale(1.04);
  filter: grayscale(0) contrast(1.14);
}

.detail-content p {
  color: var(--muted);
  font-size: 1.03rem;
}

.check-list {
  display: grid;
  gap: 0.55rem;
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 1.65rem;
  color: #2c3541;
}

.check-list li::before {
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 0.95rem;
  height: 0.95rem;
  background: var(--green);
  content: "";
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin: 1.4rem 0;
}

.mini-grid div {
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--soft);
}

.mini-grid h3 {
  font-size: 1rem;
}

.mini-grid p {
  margin: 0.45rem 0 0;
  font-size: 0.92rem;
}

.contact-hero {
  padding-bottom: 4.75rem;
}

.contact-layout {
  width: min(100% - 2rem, var(--max));
  margin: 0 auto 7rem;
  display: grid;
  grid-template-columns: minmax(270px, 0.44fr) minmax(0, 0.9fr);
  gap: 2rem;
  align-items: start;
}

.contact-details,
.contact-form-panel {
  border: 1px solid rgba(221, 227, 234, 0.92);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.contact-details {
  padding: 1.6rem;
}

.contact-logo {
  width: 100px;
  height: 92px;
  object-fit: contain;
  margin-bottom: 1rem;
}

.contact-details h2 {
  font-size: 1.45rem;
}

.contact-details address,
.contact-details p {
  margin: 1.2rem 0 0;
  color: var(--muted);
  font-style: normal;
}

.contact-details strong,
.contact-form-panel label span {
  display: block;
  color: var(--ink);
  font-weight: 850;
}

.contact-details .button {
  width: 100%;
  margin-top: 1.5rem;
}

.contact-form-panel {
  padding: 2.1rem;
}

.contact-form-panel h2 {
  font-size: clamp(1.9rem, 3vw, 3rem);
}

form {
  display: grid;
  gap: 1.15rem;
  margin-top: 1.5rem;
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.form-grid .form-full {
  grid-column: 1 / -1;
}

/* Honeypot-veld tegen spam: onzichtbaar voor mensen, wel in de DOM voor bots. */
.cf-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cf-progress,
.cf-status {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  font-weight: 760;
}

.cf-progress {
  color: var(--muted);
}

.cf-status.is-error {
  color: var(--red-700);
}

.cf-noscript p {
  margin: 0.2rem 0 0;
  color: var(--red-700);
  font-weight: 760;
}

.cf-done {
  padding: 0.5rem 0;
}

.cf-done h3 {
  color: var(--green);
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.cf-done p {
  margin: 0;
  color: var(--muted);
}

label {
  display: grid;
  gap: 0.45rem;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--ink);
  font: inherit;
  padding: 0.88rem 0.95rem;
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

textarea {
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(183, 1, 0, 0.38);
  background: white;
  box-shadow: 0 0 0 4px rgba(183, 1, 0, 0.07);
}

input:focus,
select:focus,
textarea:focus,
.button:focus-visible,
.menu-toggle:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(212, 20, 20, 0.28);
  outline-offset: 3px;
}

.site-footer {
  background:
    linear-gradient(180deg, #f1f4f8, #eef2f6);
  border-top: 1px solid var(--line);
}

.footer-grid {
  width: min(100% - 2rem, var(--max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(160px, 0.7fr) minmax(220px, 0.7fr);
  gap: 2rem;
  padding: 4rem 0;
}

/* Kolommen als flexkolom, zodat de logo's onderaan kunnen uitlijnen. */
.footer-grid > div {
  display: flex;
  flex-direction: column;
}

/* Merklogo's linksonder in de eerste kolom. */
.footer-brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  margin-top: auto;      /* duwt de logo's naar de onderkant van de kolom */
  padding-top: 1.8rem;
}
.footer-brands img {
  height: 50px;
  width: auto;
  object-fit: contain;
}

.footer-logo {
  width: 72px;
  height: 66px;
  object-fit: contain;
  margin-bottom: 0.75rem;
}

.footer-cerga {
  align-self: flex-start;   /* behoudt zijn x-positie (links in de Contact-kolom) */
  width: 190px;
  max-width: 100%;
  height: auto;
  margin-top: auto;         /* zakt naar onder, op dezelfde hoogte als de merklogo's */
  padding-top: 1.8rem;
}

.site-footer h2,
.site-footer h3 {
  margin-bottom: 0.7rem;
  font-size: 1rem;
}

.site-footer p,
.site-footer address {
  margin: 0;
  color: var(--muted);
  font-style: normal;
}

.site-footer a {
  display: block;
  width: fit-content;
  color: var(--muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--red-700);
}

.footer-bottom {
  width: min(100% - 2rem, var(--max));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.js-enabled [data-animate="stagger"] > *,
.js-enabled .detail-section,
.js-enabled .contact-details,
.js-enabled .contact-form-panel,
.js-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(38px) scale(0.985);
  filter: blur(4px);
}

.js-enabled [data-animate="stagger"] > *.is-visible,
.js-enabled .detail-section.is-visible,
.js-enabled .contact-details.is-visible,
.js-enabled .contact-form-panel.is-visible,
.js-enabled [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition: opacity 900ms var(--ease-out), transform 1000ms var(--ease-out),
              filter 900ms var(--ease-out);
}

.js-enabled .detail-section .detail-media,
.js-enabled .detail-section .detail-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--ease-out) 120ms, transform 900ms var(--ease-out) 120ms;
}

.js-enabled .detail-section .detail-content {
  transition-delay: 220ms;
}

.js-enabled .detail-section.is-visible .detail-media,
.js-enabled .detail-section.is-visible .detail-content {
  opacity: 1;
  transform: translateY(0);
}

.feature-section {
  width: min(100% - 2rem, var(--max));
  margin: 0 auto;
  padding: 5rem 0;
}

.feature-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 2.2rem;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.5rem;
  border: 1px solid rgba(221, 227, 234, 0.92);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-tight);
  transition: transform 480ms var(--ease-out), box-shadow 480ms var(--ease-out),
              border-color 480ms var(--ease-out);
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(183, 1, 0, 0.22);
  box-shadow: var(--shadow);
}

.feature-card .feature-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--red-700), var(--red-800));
  color: white;
  font-weight: 900;
  font-size: 0.95rem;
  box-shadow: 0 10px 22px rgba(183, 1, 0, 0.22);
}

.feature-card h3 {
  font-size: 1.16rem;
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

.process-steps {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 2.2rem;
  counter-reset: step;
}

.process-step {
  position: relative;
  padding: 1.5rem 1.4rem 1.4rem;
  border: 1px solid rgba(221, 227, 234, 0.92);
  border-radius: var(--radius);
  background: linear-gradient(180deg, white, var(--soft));
  box-shadow: var(--shadow-tight);
  overflow: hidden;
  transition: transform 480ms var(--ease-out), box-shadow 480ms var(--ease-out);
}

.process-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.process-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -12px;
  right: 1rem;
  color: rgba(183, 1, 0, 0.12);
  font-weight: 950;
  font-size: 4.5rem;
  line-height: 1;
  pointer-events: none;
}

.process-step h3 {
  margin-bottom: 0.45rem;
  font-size: 1.1rem;
}

.process-step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
}

.faq-list {
  display: grid;
  gap: 0.8rem;
  margin-top: 2rem;
}

details.faq-item {
  padding: 1.15rem 1.3rem;
  border: 1px solid rgba(221, 227, 234, 0.92);
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow-tight);
  transition: border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out),
              background 320ms var(--ease-out);
}

details.faq-item[open] {
  background: linear-gradient(180deg, #fff8f8, white);
  border-color: rgba(183, 1, 0, 0.22);
  box-shadow: var(--shadow);
}

details.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-weight: 850;
  color: var(--ink);
}

details.faq-item summary::-webkit-details-marker {
  display: none;
}

details.faq-item summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(183, 1, 0, 0.1);
  color: var(--red-700);
  font-weight: 900;
  transition: transform 380ms var(--ease-out), background 380ms var(--ease-out);
}

details.faq-item[open] summary::after {
  content: "−";
  transform: rotate(180deg);
  background: var(--red-700);
  color: white;
}

details.faq-item p {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.related-services {
  width: min(100% - 2rem, var(--max));
  margin: 0 auto;
  padding: 4rem 0 5rem;
}

.related-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 1.5rem;
}

.related-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 1px solid rgba(221, 227, 234, 0.92);
  border-radius: var(--radius);
  background: white;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-tight);
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out),
              border-color 420ms var(--ease-out);
}

.related-card:hover {
  transform: translateY(-4px);
  border-color: rgba(183, 1, 0, 0.24);
  box-shadow: var(--shadow);
}

.related-card span {
  color: var(--red-700);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.related-card strong {
  font-size: 1.05rem;
  font-weight: 850;
}

.related-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  margin: 2.5rem 0 0;
  padding: 1.6rem 1.8rem;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 244, 207, 0.7), white);
  border: 1px solid rgba(183, 1, 0, 0.18);
}

.callout p {
  margin: 0;
  color: var(--ink);
  font-weight: 760;
  font-size: 1.05rem;
}

.callout .button {
  white-space: nowrap;
}

.brand-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.4rem 0 0;
}

.brand-row span {
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 760;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

.scroll-progress::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--scroll, 0%);
  background: linear-gradient(90deg, var(--red-700), var(--red-600));
  transition: width 120ms linear;
  box-shadow: 0 0 12px rgba(183, 1, 0, 0.45);
}

@media (max-width: 1160px) {
  .service-grid,
  .service-grid-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 900px) {
  .nav-shell {
    min-height: 64px;
  }

  .brand span {
    max-width: 12rem;
    font-size: 1.06rem;
  }

  .brand img {
    width: 42px;
    height: 42px;
  }

  .menu-toggle {
    display: block;
  }

  .site-menu {
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: calc(100% + 0.55rem);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: white;
    box-shadow: var(--shadow);
    /* Het uitgeklapte menu is ongeveer 580px hoog. Op kortere toestellen
       (bv. 320x568) viel de belknop onderaan buiten beeld, en omdat het
       menu meebeweegt met de sticky header kwam hij ook niet in beeld
       door te scrollen. Vandaar een maximumhoogte met eigen scroll. */
    max-height: calc(100svh - 5.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Terugval voor browsers zonder svh-eenheid. */
  @supports not (height: 1svh) {
    .site-menu {
      max-height: calc(100vh - 5.5rem);
    }
  }

  .site-menu.is-open {
    display: flex;
  }

  .site-menu a {
    padding: 0.8rem;
    border-radius: var(--radius);
  }

  .site-menu a::after {
    display: none;
  }

  .site-menu .nav-phone {
    text-align: center;
  }

  .nav-item.has-submenu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .has-submenu > a .caret {
    display: none;
  }

  .submenu {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0.3rem 0 0.4rem 0.7rem;
    margin: 0.1rem 0 0.2rem;
    border: none;
    background: transparent;
    box-shadow: none;
    transition: none;
    border-left: 2px solid rgba(183, 1, 0, 0.16);
  }

  /* Tikdoel van minstens 44px hoog (19px regelhoogte + 2 x 0.8rem). */
  .submenu a {
    padding: 0.8rem 0.7rem;
  }

  .submenu span {
    display: none;
  }

  .hero-home {
    min-height: 76svh;
  }

  .hero-content {
    padding: 3.5rem 0;
  }

  .hero-side-note {
    display: none;
  }

  h1 {
    font-size: clamp(2.35rem, 8vw, 4.2rem);
  }

  h2 {
    font-size: clamp(1.9rem, 7vw, 3rem);
  }

  .hero-copy {
    font-size: 1rem;
  }

  .section {
    padding: 4.75rem 0;
  }

  .split-section,
  .page-hero,
  .detail-section,
  .contact-layout,
  .cta-band {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }

  .page-hero {
    padding: 4rem 0 2.5rem;
  }

  .proof-grid,
  .mini-grid,
  .form-grid,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bento-large {
    grid-column: span 2;
  }

  .detail-section {
    padding: 3rem 0;
  }

  .detail-media {
    min-height: 220px;
  }

  .gallery-media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: none;
  }

  .callout {
    grid-template-columns: minmax(0, 1fr);
  }

  .accordion-strip {
    flex-direction: column;
    min-height: auto;
  }

  .accordion-panel {
    min-height: 190px;
  }

  .accordion-panel:hover,
  .accordion-panel:focus-within {
    flex: 1 1 auto;
  }

  .cta-band {
    align-items: stretch;
    margin-bottom: 4.5rem;
  }

  .cta-actions {
    margin-top: 0;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  h1 {
    font-size: 2.28rem;
  }

  .page-hero h1 {
    font-size: 2.08rem;
  }

  .page-hero p:last-child {
    font-size: 1rem;
  }

  .service-grid,
  .service-grid-wide,
  .bento-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bento-large {
    grid-column: span 1;
    grid-row: span 1;
    min-height: auto;
  }

  .bento-media img {
    min-height: 190px;
  }

  .hero-overlay {
    background:
      linear-gradient(90deg, rgba(8, 11, 16, 0.84), rgba(8, 11, 16, 0.38)),
      linear-gradient(0deg, rgba(8, 11, 16, 0.58), rgba(8, 11, 16, 0));
  }

  .button,
  .hero-actions a,
  .cta-actions a {
    width: 100%;
  }

  .gallery-media {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form-panel {
    padding: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   PAGINA-TINT · "Rood blok"
   ============================================================ */
:root {
  --page-bg: linear-gradient(180deg, #fdf3f0, #f8e6e1);
  --band-1-bg: #fbe9e4;
  --card-bg: #fffdfc;
  --card-border: rgba(183, 1, 0, 0.24);
  --card-hover-border: rgba(183, 1, 0, 0.5);
  --proof-bg: linear-gradient(135deg, #fdece9, #fff6e2);
  --proof-border: rgba(183, 1, 0, 0.26);
}

body { background: #f8e6e1; }
.page-shell { background: var(--page-bg); }

/* Kaarten en proefblokken meelaten kleuren met de tint */
.bento-card,
.feature-card,
.related-card,
.contact-details,
.contact-form-panel {
  background: var(--card-bg);
  border-color: var(--card-border);
}
.bento-card:hover,
.feature-card:hover,
.related-card:hover {
  border-color: var(--card-hover-border);
}
.proof-grid div {
  background: var(--proof-bg);
  border-color: var(--proof-border);
}

/* ============================================================
   SCHUINE VLAKKEN
   De bandkleur zit op een schuingezette ::before-slab, zodat de
   sectieranden als diagonalen lezen.
   ============================================================ */
.band { width: 100%; }
.band-1 { --band-bg: var(--band-1-bg); }
.band-2 { --band-bg: linear-gradient(160deg, #c40402, #9c0100); }

.band {
  position: relative;
  background: transparent;
  z-index: 0;
}
.band > * {
  position: relative;
  z-index: 1;
}
.band::before {
  content: "";
  position: absolute;
  z-index: 0;
  background: var(--band-bg, transparent);
  left: 0;
  right: 0;
  top: -2.6vw;
  bottom: -2.6vw;
  transform: skewY(-3deg);
}

/* Bovenste band onder de hero en onderste band boven de footer wat
   extra lucht geven, zodat de uitstekende slab bewust oogt. */
.band:first-of-type { padding-top: 2.6vw; }
.band:last-of-type { padding-bottom: 2.6vw; }

/* Twee opeenvolgende rode banden (bv. een rode sectie gevolgd door de rode
   CTA-band) als één doorlopend rood vlak laten lezen. De twee schuine slabs
   overlappen elkaar al; enkel de gradient-reset gaf een subtiele diagonale
   naad. Voor zo'n paar gebruiken we een vlakke vulling, zodat de overlap
   volledig egaal is. De donkere CTA-box blijft er bovenop drijven. */
.band-2:has(+ .band-2)::before,
.band-2 + .band-2::before {
  background: #a90201;
}

/* ============================================================
   TEKST OP HET RODE VLAK
   Alleen tekst op sectieniveau herkleuren — nooit tekst die in
   een witte kaart staat.
   ============================================================ */
.band-2 h2 { color: #ffffff; }
.band-2 .work-area > p,
.band-2 .text-stack > p { color: rgba(255, 255, 255, 0.88); }
.band-2 .eyebrow { color: #ffd25a; }

/* Overige sectie-tekst die rechtstreeks op de rode slab valt
   (intro-alinea's, detail-content op Services). Kaarten houden hun
   eigen lichte achtergrond, dus die blijven ongemoeid. !important
   overrulet enkele inline color:var(--muted)-stijlen in de markup. */
.band-2 > section > p,
.band-2 .brand-head-text p,
.band-2 .section-heading p,
.band-2 .detail-content p,
.band-2 .detail-content li {
  color: rgba(255, 255, 255, 0.9) !important;
}
.band-2 .detail-content h2 { color: #ffffff; }
.band-2 .detail-content .inline-link { color: #ffd25a; }
.band-2 .detail-content .inline-link:hover { color: #ffe08a; }
.band-2 .detail-content .check-list li::before { background: #ffd25a; }
.band-2 .mini-grid p {  color: var(--muted) !important;
}

/* ============================================================
   HERO — dekkend tekstpaneel
   ============================================================ */
.hero-home .hero-overlay {
  background:
    linear-gradient(90deg, rgba(8, 11, 16, 0.5), rgba(8, 11, 16, 0.14) 46%, rgba(8, 11, 16, 0) 68%),
    linear-gradient(0deg, rgba(8, 11, 16, 0.32), rgba(8, 11, 16, 0) 55%);
}
.hero-home .hero-panel {
  max-width: min(640px, 48vw);
  padding: 2.1rem 2.3rem 2.4rem;
  background: #14171d;
  border-left: 5px solid var(--red-700);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(8, 11, 16, 0.5);
}
.hero-home .hero-panel h1 {
  font-size: clamp(2.4rem, 3.4vw, 3.75rem);
}
.hero-home .hero-panel .hero-copy {
  color: rgba(255, 255, 255, 0.92);
}
@media (max-width: 900px) {
  .hero-home .hero-panel {
    max-width: 100%;
    padding: 1.5rem 1.5rem 1.7rem;
  }
}

/* ============================================================
   PRINT — geen rode vlakken afdrukken
   ============================================================ */
@media print {
  .band::before { display: none; }
  .band-2 h2,
  .band-2 p,
  .band-2 li,
  .band-2 .eyebrow,
  .band-2 > section > p,
  .band-2 .brand-head-text p,
  .band-2 .section-heading p,
  .band-2 .detail-content p,
  .band-2 .detail-content li,
  .band-2 .detail-content h2,
  .band-2 .detail-content .inline-link {
    color: #14171d !important;
  }
}

/* ============================================================
   SERVICES · dienstenlijst als afwisselende banden
   Elke dienst zit in een eigen .band (rood/licht). De losse
   .detail-list per dienst hoeft dan geen eigen randen of grote
   onderpadding meer — de bandkleur scheidt de diensten al.
   (detail-single scoped, zodat gemeentepagina's ongemoeid blijven.)
   ============================================================ */
.detail-single {
  padding-block: 0;
}
.detail-single .detail-section {
  border: 0;
  padding: 3.6rem 0;
}

/* ============================================================
   KETELS · merklogo's in een wit paneel met rode rand
   ============================================================ */
.brand-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  width: min(100%, 380px);
  margin: 1.6rem 0 0;
  padding: 1.6rem 1.9rem;
  background: #fffdfc;
  border: 3px solid var(--red-700);
  border-radius: 14px;
  box-shadow: var(--shadow-tight);
}
.brand-logos img {
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: contain;
}

/* Logopaneel naast de tekst (titel/intro/pills links, logo's rechts) */
.brand-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem;
  align-items: center;
}
.brand-head .brand-logos {
  width: min(100%, 420px);
  margin: 0;
}
@media (max-width: 900px) {
  .brand-head {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   BENTO · afbeeldingenslideshow (crossfade, CSS-only)
   ============================================================ */
.bento-slideshow {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: #14171d;
  box-shadow: var(--shadow-tight);
  align-self: stretch;   /* vul de celhoogte = dezelfde hoogte als de titelkaart */
  min-height: 230px;
}
.bento-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: bento-slideshow 30s infinite;
}
.bento-slideshow img:nth-child(1) { animation-delay: 0s; }
.bento-slideshow img:nth-child(2) { animation-delay: 8s; }
.bento-slideshow img:nth-child(3) { animation-delay: 16s; }
.bento-slideshow img:nth-child(4) { animation-delay: 24s; }
.bento-slideshow img:nth-child(5) { animation-delay: 32s; }

@keyframes bento-slideshow {
  0%   { opacity: 0; }
  5%   { opacity: 1; }   /* infaden */
  25%  { opacity: 1; }   /* blijft vol tot het volgende beeld al ingefade is */
  30%  { opacity: 0; }   /* pas dan uitfaden -> overlap, geen zwart gat */
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bento-slideshow img { animation: none; opacity: 0; }
  .bento-slideshow img:first-child { opacity: 1; }
}

/* ============================================================
   BENTO · brede introkaart + drie kaarten eronder
   Gebruikt op: hvac, ketels, sanitair, projecten, rookonderzoek.

   Deze indeling stond eerder als inline style="" in de HTML. Inline
   styles winnen het van media queries, waardoor het raster ook op een
   telefoon drie kolommen bleef: drie kaarten van 65px breed, met
   afgekapte woorden. Daarom staat de indeling nu hier, met breekpunten.
   ============================================================ */
.bento-intro-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* De brede introkaart: kolom 1-2 van de bovenste rij. */
.bento-intro-grid > .bento-intro {
  grid-column: 1 / 3;
  grid-row: 1;
  min-height: 0;
}

/* Beeld of slideshow rechts van de introkaart. */
.bento-intro-grid > .bento-aside {
  grid-column: 3;
  grid-row: 1;
}

/* Losse afbeelding als aside (ketels), gecentreerd in zijn cel. */
.bento-intro-grid > .bento-aside-img {
  max-height: 350px;
  place-self: center;
}

/* De drie gelijke kaarten in de tweede rij. */
.bento-intro-grid > .bento-item {
  grid-row: 2;
}

/* Tablet en kleiner: introkaart en aside over de volle breedte,
   de drie kaarten in twee kolommen. */
@media (max-width: 900px) {
  .bento-intro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento-intro-grid > .bento-intro,
  .bento-intro-grid > .bento-aside {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .bento-intro-grid > .bento-item {
    grid-column: auto;
    grid-row: auto;
  }

  .bento-intro-grid > .bento-aside-img {
    max-height: 260px;
    justify-self: center;
  }
}

/* Telefoon: alles onder elkaar. */
@media (max-width: 620px) {
  .bento-intro-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   JURIDISCHE ELEMENTEN · privacylink, CERGA-nummer, tekstpagina
   ============================================================ */

/* Korte privacymelding onder het contactformulier. */
.cf-privacy {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.cf-privacy a {
  color: var(--red-700);
  font-weight: 800;
  text-underline-offset: 0.18em;
}

/* Registratienummer onder het CERGA-logo in de footer. */
.footer-cerga-nr {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Tekstpagina's zoals de privacyverklaring. */
.legal-page {
  width: min(100% - 2rem, 760px);
  margin: 0 auto;
  padding: 3rem 0 5rem;
}

.legal-page h2 {
  margin-top: 2.6rem;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1.2;
}

.legal-page h3 {
  margin-top: 1.6rem;
  font-size: 1.05rem;
}

.legal-page p,
.legal-page li {
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.legal-page ul {
  padding-left: 1.25rem;
}

.legal-page li {
  margin: 0.35rem 0;
}

.legal-page a {
  color: var(--red-700);
  font-weight: 750;
  text-underline-offset: 0.18em;
}

.legal-page table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.96rem;
}

.legal-page th,
.legal-page td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal-page th {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.legal-note {
  margin: 1.5rem 0 0;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  background: var(--soft);
  border: 1px solid var(--line);
  font-size: 0.94rem;
  color: var(--ink-soft);
}

/* Juridische links onderaan de footer. */
.footer-legal a {
  display: inline-block;
  padding: 0.45rem 0;
}

/* Titel van tekstpagina's. "Privacyverklaring" is een lang woord zonder
   spatie: bij de grootste en de kleinste lettergroottes paste het niet op
   een regel en brak het midden in het woord af. Daarom iets terughoudender
   schalen. Moet het toch breken, dan gebeurt dat op de zachte afbreekstreep
   die in de HTML staat (Privacy&shy;verklaring), dus netjes na "Privacy". */
.page-hero h1.legal-title {
  font-size: clamp(1.8rem, 4.6vw, 4.2rem);
}

/* Koppen bevatten de langste Nederlandse samenstellingen ("verwarmingsketels",
   "Ontstoppingsdienst"). Zonder afbreekregels braken die op smalle schermen en
   op zeer brede schermen midden in het woord. Laat de browser ze afbreken
   volgens Nederlandse regels: lang="nl-BE" staat op elke pagina, dus er komt
   een koppelteken op een correct punt.
   hyphenate-limit-chars beperkt dit tot woorden van minstens 10 letters, met
   minstens 5 letters voor en 4 na het koppelteken, zodat korte woorden met rust
   gelaten worden. Browsers zonder Nederlands afbreekwoordenboek vallen terug op
   overflow-wrap: break-word hierboven, dus er loopt nooit iets buiten beeld. */
h1,
h2,
h3 {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 10 5 4;
  -webkit-hyphenate-limit-before: 5;
  -webkit-hyphenate-limit-after: 4;
}

/* ============================================================
   HVAC · titel als drie regels binnen één <h1>
   Stond eerder als drie afzonderlijke <h1>-elementen met hetzelfde
   id="page-title": ongeldige HTML, en aria-labelledby verwees daardoor
   alleen naar "Heating".
   ============================================================ */
.hvac-title {
  display: grid;
  gap: 0.1em;
}

.hvac-initial {
  color: var(--red-800);
}

/* ── Cookiebanner ───────────────────────────────────────────────────────────
   Beide knoppen zijn bewust identiek: de GBA verbiedt sturing via kleur,
   lettergrootte of plaatsing. Wijzig dat niet zonder juridisch advies. */
.cookie-bar {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 70;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  max-width: 58rem;
  margin-inline: auto;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow);
  font-size: 0.88rem;
  line-height: 1.45;
}

.cookie-bar p {
  margin: 0;
  flex: 1 1 24rem;
}

.cookie-actions {
  display: flex;
  gap: 0.55rem;
  flex: 0 0 auto;
}

.cookie-bar button {
  /* Vaste, identieke breedte: geen enkel visueel verschil tussen de twee keuzes. */
  width: 8.5rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid #333;
  border-radius: var(--radius);
  background: white;
  color: #111;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.cookie-bar button:hover {
  background: #f2f2f2;
}

.cookie-bar button:focus-visible {
  outline: 2px solid #b70100;
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .cookie-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  /* In kolomrichting werkt flex-basis op de hoogte: terugzetten naar auto,
     anders krijgt de tekst 24rem hoogte en wordt de balk beeldvullend. */
  .cookie-bar p {
    flex: 0 1 auto;
  }

  /* Alleen optillen wanneer de vaste belbalk aanwezig is. */
  .cookie-bar.above-call-bar {
    bottom: 5.4rem;
  }

  .cookie-actions {
    justify-content: stretch;
  }

  .cookie-bar button {
    flex: 1 1 0;
    width: auto;
  }
}

.legal-page .legal-updated {
  margin-bottom: 1.6rem;
  font-size: 0.86rem;
  opacity: 0.72;
}

/* ── Vaste belbalk op mobiel ────────────────────────────────────────────────
   28% van het advertentieverkeer is mobiel, en daar zit de belknop in het
   ingeklapte hamburgermenu. Deze balk staat altijd in beeld. */
.call-bar { display: none; }

@media (max-width: 900px) {
  .call-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
    background: #b70100;
    color: #fff;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
  }
  .call-bar strong { font-size: 1.06rem; letter-spacing: 0.01em; }
  .call-bar span   { font-size: 0.8rem; opacity: 0.92; }
  .call-bar:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }

  /* Zodat de balk de footer niet bedekt. */
  body { padding-bottom: 4.5rem; }
}

/* Toelichting onder de belknoppen in de hero. */
.page-hero .hero-note {
  margin: 0.7rem 0 0;
  font-size: 0.88rem;
  opacity: 0.78;
}