/* Een lichte, architecturale laag bovenop de gekozen warme huisstijl. */
.site-head {
  background: radial-gradient(ellipse at 12% 0%, #fff, transparent 65%), linear-gradient(180deg, #fffdf8, #f6f0e6);
  border-bottom: 1px solid #d9cdbb;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 #ffffffb3, 0 5px 16px #5d47270b;
}
.site-head .logo { text-shadow: 0 1px 0 #fff; }
.site-head .logo i { box-shadow: inset 0 1px 0 #ffffff60, 0 2px 0 #8a3c0d33; }
.site-head .nav-links { gap: 8px; }
.site-head .nav-links > a:not(.button) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 12px;
  border: 1px solid transparent; border-radius: 9px; white-space: nowrap;
}
.site-head .nav-links > a[aria-current="page"]:not(.button), .site-head .mobile-nav nav > a[aria-current="page"]:not(.button) {
  color: var(--brand-deep); text-decoration: none; border-color: #ddcbb2;
  background: linear-gradient(150deg, #fffaf0, #eee0ca);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #ded0ba, 0 5px 10px #74512308;
}
.site-head .nav-links > .button, .site-head .mobile-nav nav > .button {
  box-shadow: inset 0 1px 0 #ffffff38, 0 3px 0 #843b15, 0 6px 12px #8a3c0d12;
}
.site-head .mobile-nav summary {
  gap: 10px; background: linear-gradient(145deg, #fffefa, #efe5d5);
  border-color: #d9c8ae; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #dfd1ba;
}
.site-head .mobile-nav summary::before {
  content: ""; width: 16px; height: 12px; flex-shrink: 0;
  background: linear-gradient(currentColor 0 2px, transparent 2px 5px, currentColor 5px 7px, transparent 7px 10px, currentColor 10px 12px);
}
.site-head .mobile-nav[open] summary { background: #eee0ca; box-shadow: inset 0 1px 3px #80623f17; }
.site-head .mobile-nav nav {
  background: linear-gradient(150deg, #fffdf8, #f5eddf); border-bottom-color: #d9c8ae;
  box-shadow: inset 0 1px 0 #fff, 0 12px 20px #5d472712;
}
.site-head .mobile-nav nav > a:not(.button) { border: 1px solid transparent; }
@media (hover: hover) and (pointer: fine) {
  .site-head .nav-links > a:not(.button):hover, .site-head .mobile-nav nav > a:not(.button):hover {
    background: #f6ead8; border-color: #e2d0b5;
  }
}
.hero-copy {
  background: radial-gradient(ellipse at var(--pointer-x, 20%) var(--pointer-y, 0%), #fffdf9 0%, #faf7f0 75%);
  border: 1px solid #fffdfac7;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #d8cbb6, 0 22px 48px #26332926;
}
.page-hero {
  background: radial-gradient(ellipse 460px 260px at var(--pointer-x, 80%) var(--pointer-y, 35%), #ead7b836, transparent 80%);
}
.page-hero > .shell { position: relative; }
.page-hero > .shell:has(.site-depth-art) { padding-right: 300px; }
.site-depth-art {
  position: absolute; width: 280px; height: 210px; right: 0; top: 50%;
  transform: translateY(-50%); pointer-events: none;
  filter: drop-shadow(0 12px 12px #7563450c);
}
:is(.page-info, .page-diensten, .page-epc, .page-asbestattest, .page-elektrische-keuring) .content-grid { gap: 22px; }
:is(.page-info, .page-diensten, .page-epc, .page-asbestattest, .page-elektrische-keuring) .content-card {
  min-width: 0; margin-right: 0; padding: 28px; border: 1px solid #e2d8c9;
  border-radius: 12px; background: linear-gradient(145deg, #fffdfa, #f7f1e7);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #e4dacb, 0 15px 28px #4b3d2609;
}
:is(.page-info, .page-diensten, .page-epc, .page-asbestattest, .page-elektrische-keuring) .content-card > .badge {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 24px;
  background: linear-gradient(145deg, #fff7e9, #ead8bd); border: 1px solid #dfc8a6;
  border-radius: 11px; color: var(--brand-deep); font-weight: 750;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #d9c6aa, 0 7px 12px #7d5c2710;
}
.content-card > .attest-icon, .service-index > a > img:first-child {
  width: 52px; height: 52px; padding: 10px; opacity: 1; border-radius: 13px;
  background: linear-gradient(145deg, #fffaf0, #eee1cc); border: 1px solid #e0cfb4;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #dac9ad, 0 9px 14px #70552c0d;
}
.home-calculator, .price-receipt, .gd-result, .vme-deadline, .portal-demo, .news-card {
  box-shadow: inset 0 1px 0 #fff9, 0 3px 0 #e6ddcf, 0 18px 35px #5141270a;
}
.cta {
  background: radial-gradient(ellipse at 15% 0%, #fcf7ea, transparent 70%), linear-gradient(125deg, #eee3d1, #e6dac7);
  box-shadow: inset 0 1px 0 #fffc, 0 3px 0 #d8cbb7, 0 14px 28px #5442260a;
}
.actions > .button:not(.ghost), .cta > .button, .receipt-summary > .button, .calc-submit, .help-chat > .button {
  box-shadow: inset 0 1px 0 #ffffff38, 0 3px 0 #843b15, 0 7px 14px #8a3c0d12;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .site-depth-art, .service-index > a > img:first-child, .news-card { transition: transform .28s ease, box-shadow .28s ease; }
  .page-hero:hover .site-depth-art { transform: translateY(calc(-50% - 3px)) rotate(-1deg); }
  .service-index > a:hover > img:first-child { transform: perspective(400px) translateY(-3px) rotateY(-9deg) rotateZ(-3deg); }
  .news-card:hover { transform: perspective(1100px) translateY(-3px) rotateX(.5deg); box-shadow: 0 4px 0 #e0d3c1, 0 22px 36px #51412714; }
  .actions > .button:not(.ghost):active, .cta > .button:active, .receipt-summary > .button:active, .calc-submit:active,
  .help-chat > .button:active {
    transform: translateY(2px); box-shadow: inset 0 1px 0 #ffffff20, 0 1px 0 #843b15;
  }
}
@media (min-width: 761px) and (max-width: 1060px) {
  .page-hero > .shell:has(.site-depth-art) { padding-right: 220px; }
  .site-depth-art { width: 210px; height: 158px; }
}
@media (max-width: 760px) {
  .page-hero > .shell:has(.site-depth-art) { padding-right: 0; }
  .site-depth-art { display: none; }
  :is(.page-info, .page-diensten, .page-epc, .page-asbestattest, .page-elektrische-keuring) .content-grid { gap: 20px; }
  :is(.page-info, .page-diensten, .page-epc, .page-asbestattest, .page-elektrische-keuring) .content-card { padding: 24px; }
  .hero-copy { box-shadow: inset 0 1px 0 #fff, 0 3px 0 #ded2bf, 0 12px 24px #5141270a; }
}
@media (prefers-reduced-motion: reduce) {
  .site-depth-art, .service-index > a > img:first-child, .news-card { transition: none; }
  .hero-copy, .page-hero { --pointer-x: 35% !important; --pointer-y: 20% !important; }
}

/* Kleine stapnummers moeten ook op de crèmekleurige pagina leesbaar zijn. */
.vme-steps li > span { color: #913C0C; }