/* ============================================
   STYLE.CSS — Premium Multi-Variant
   Geen generieke patronen. Elk detail intentioneel.
   ============================================ *//* ═══════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════ */


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  background: var(--color-primary);
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-primary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}/* Custom scrollbar */


::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-alt); }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-primary) 55%, transparent); }

main {
  background: var(--color-primary);
  isolation: isolate;
}

section {
  background-color: var(--color-primary);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
::selection { background: color-mix(in srgb, var(--color-accent) 25%, transparent); }/* ─ Zichtbare focus voor toetsenbordnavigatie ─ */


:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }/* â"€ Skip link â"€ */


.skip-link {
  position: absolute; top: -100%; left: 1rem;
  background: var(--color-accent); color: var(--color-primary);
  padding: 0.5rem 1rem; border-radius: 6px; font-weight: 700; z-index: 9999;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }/* â"€ Container â"€ */


.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 3rem);
}/* ═══════════════════════════════════════════════
   TYPOGRAFIE
═══════════════════════════════════════════════ */


h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.1;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}/* Dramatisch grootte-verschil tussen levels */


h1 {
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
  text-wrap: balance;
}
h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h3 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
h4 { font-size: 1rem; font-weight: 600; letter-spacing: 0; }

p { margin-bottom: 1.1rem; line-height: 1.75; }
p:last-child { margin-bottom: 0; }/* Accent tekst — highlight met gradient */


.text-accent { color: var(--color-accent); }
.text-gradient {
  background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, white));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}/* ═══════════════════════════════════════════════
   BUTTONS — Pill-shaped, premium feel
═══════════════════════════════════════════════ */


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.58rem;
  padding: 0.82rem 1.8rem;
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 700;
  border-radius: 99px;
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.22s cubic-bezier(0.16,1,0.3,1),
              background 0.22s ease,
              color 0.22s ease,
              border-color 0.22s ease;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
}/* Shimmer layer op hover */

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.55s ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { transform: translateX(100%); }
}/* Accent button — de primaire call to action */


.btn--accent {
  background: var(--color-accent);
  color: var(--color-primary);
  border-color: transparent;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--color-accent) 26%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--color-accent) 88%, black);
    box-shadow: 0 16px 38px color-mix(in srgb, var(--color-accent) 34%, transparent);
  }
}/* Primary — donkere achtergrond, lichte tekst */


.btn--primary {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  box-shadow: 0 2px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
  }
}/* Ghost — transparant op donkere achtergrond */


.btn--ghost {
  background: linear-gradient(135deg, rgba(255,255,255,0.105), rgba(255,255,255,0.035));
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 10px 28px rgba(0,0,0,0.18);
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.055));
    border-color: color-mix(in srgb, var(--color-accent) 34%, rgba(255,255,255,0.2));
    color: white;
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      0 14px 34px rgba(0,0,0,0.28),
      0 0 24px color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
}/* Outline — op lichte achtergrond */


.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .btn--outline:hover {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
    transform: translateY(-2px);
  }
}

.btn--lg { padding: 0.95rem 1.95rem; font-size: 0.9rem; min-height: 3.2rem; }
.btn--sm { padding: 0.5rem 1.1rem; font-size: 0.8rem; }/* Fysieke "pressed" feedback — wint van hover-transforms */


.btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.09s;
}
.section-label--light { color: rgba(255,255,255,0.45); }
.section-label--light::before { background: rgba(255,255,255,0.3); }

.section-header {
  margin-bottom: var(--space-lg);
}
.section-header--center { text-align: center; }
.section-header--light h2 { color: white; }
.section-subtitle {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 56ch;
  margin-top: 1rem;
  text-wrap: pretty;
}
.section-header--center .section-subtitle { margin-inline: auto; }
.section-subtitle--light { color: rgba(255,255,255,0.48); }/* --muted = synoniem voor --light, voor gebruik op donkere secties */

.section-subtitle--muted { color: rgba(255,255,255,0.48); }
.section-footer { text-align: center; margin-top: var(--space-lg); }/* em in hero h1 — cursief + accent accent voor typografisch drama */


.page-hero h1 em{
  font-style: italic;
  color: var(--color-accent);
  font-style: italic;
}/* ═══════════════════════════════════════════════
   REVEAL ANIMATIES — Spring curves, stagger
═══════════════════════════════════════════════ */


.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.52s cubic-bezier(0.16,1,0.3,1),
              transform 0.52s cubic-bezier(0.16,1,0.3,1);
  will-change: auto;
}
/* Zonder JavaScript zet niets ooit .is-visible, en dan blijft alles met
   .reveal op opacity:0 hangen — inclusief de kop van de hero. Het
   vlaggetje .js komt uit een klein script in de head; ontbreekt het, dan
   staat de inhoud er gewoon meteen. Deze regel wint van de richtings-
   varianten (.reveal--left enzovoort) door de hogere specificiteit, dus
   die zetten hun transform niet alsnog terug. */
html:not(.js) .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.reveal:not(.is-visible) { will-change: transform, opacity; }
.reveal.is-visible { opacity: 1; transform: none; will-change: auto; }/* Richtings- en schaalvarianten — zelfde observer, andere binnenkomst */


.reveal--left  { transform: translateX(-22px); }
.reveal--right { transform: translateX(22px); }
.reveal--scale {
  transform: scale(0.94) translateY(10px);
  transition-duration: 0.9s;
}

.stagger-1 { transition-delay: 0.04s; }
.stagger-2 { transition-delay: 0.08s; }
.stagger-3 { transition-delay: 0.12s; }
.stagger-4 { transition-delay: 0.16s; }
.stagger-5 { transition-delay: 0.20s; }
.stagger-6 { transition-delay: 0.24s; }
.stagger-7 { transition-delay: 0.28s; }
.stagger-8 { transition-delay: 0.32s; }

/* Zwevende deco-shapes (werden al gerefereerd, keyframes ontbraken) */
@keyframes floatA {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}
@keyframes floatB {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(-1.5deg); }
}/* ═══════════════════════════════════════════════
   NAVIGATIE — Full-width glassmorphism
═══════════════════════════════════════════════ */


.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background 0.4s cubic-bezier(0.16,1,0.3,1),
              backdrop-filter 0.4s ease,
              box-shadow 0.4s ease;
}

.nav-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 72px;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 3rem);
  position: relative;
}/* Transparant op hero */


.site-nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}/* Donker glassmorphism na scrollen */


.site-nav.is-scrolled {
  background: color-mix(in srgb, var(--color-primary) 92%, transparent);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 10px 30px rgba(0,0,0,0.26);
}/* Logo — helemaal links in grid kolom 1 */


.nav-logo {
  display: flex;
  align-items: center;
  justify-self: start;
}
.nav-logo img {
  height: 34px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  transition: filter 0.4s ease, opacity 0.4s ease;
  opacity: 0.92;
}
.site-nav.is-scrolled .nav-logo img {
  filter: none;
  opacity: 1;
}/* Links — gecentreerd (grid kolom 2) */


.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2.1rem);
  justify-self: center;
}
.nav-links a {
  font-family: var(--font-heading);
  font-size: 0.94rem;
  font-weight: 600;
  color: rgba(255,255,255,0.86);
  transition: color 0.2s, text-shadow 0.2s;
  letter-spacing: 0.01em;
  position: relative;
  text-shadow: 0 1px 14px rgba(0,0,0,0.55);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--color-accent);
  transition: width 0.28s cubic-bezier(0.16,1,0.3,1);
}
.nav-links a:hover { color: white; text-shadow: 0 1px 18px rgba(0,0,0,0.72); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { width: 100%; }
.nav-links a[aria-current="page"] { color: var(--color-accent); }/* Na scroll: witte links (donkere nav bg) */


.site-nav.is-scrolled .nav-links a { color: rgba(255,255,255,0.65); }
.site-nav.is-scrolled .nav-links a:hover { color: white; }
.site-nav.is-scrolled .nav-links a[aria-current="page"] { color: var(--color-accent); }
.site-nav.is-scrolled .nav-toggle-bar { background: white; }/* btn--accent in nav altijd leesbaar — ook op de actieve (aria-current) pagina */


/* Nav CTA: omlijnde offerte-knop (outline) i.p.v. volledig gevuld, rechte hoeken */
.nav-links .btn--accent,
.nav-links .btn--accent[aria-current="page"],
.site-nav.is-scrolled .nav-links .btn--accent,
.site-nav.is-scrolled .nav-links .btn--accent[aria-current="page"] {
  background: none;
  border: 1.5px solid var(--color-accent);
  border-radius: 8px;
  color: var(--color-accent);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .nav-links .btn--accent:hover {
    background: var(--color-accent);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-accent) 32%, transparent);
  }
}/* Geen underline-streepje onder de nav CTA button */


.nav-links .btn--accent[aria-current="page"]::after,
.nav-links .btn--accent:hover::after {
  width: 0;
}

/* Offerte-knop helemaal rechts in de nav-balk */
.nav-links > li:last-child {
  position: absolute;
  right: clamp(1.5rem, 5vw, 3rem);
  top: 50%;
  transform: translateY(-50%);
}/* Hamburger */


.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  grid-column: 3;       /* altijd kolom 3, ook als nav-links hidden is */
  align-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.1);
  transition: background 0.2s;
  justify-self: end;
}
.nav-toggle:hover { background: rgba(255,255,255,0.15); }
.site-nav.is-scrolled .nav-toggle {
  background: color-mix(in srgb, var(--color-primary) 7%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.nav-toggle-bar {
  display: block;
  width: 18px; height: 1.5px;
  background: white;
  border-radius: 2px;
  transition: background 0.3s cubic-bezier(0.16,1,0.3,1);
  transform-origin: center;
}
.nav-toggle-bar + .nav-toggle-bar { margin-top: 5px; }/* Drawer heeft een eigen sluitknop — verberg de hamburger als het menu open is */

.nav-toggle.is-open { opacity: 0; pointer-events: none; }/* Mobile drawer — fullscreen premium overlay *//* ── Mobile drawer — links inschuivend paneel ── */



.nav-drawer {
  display: none;
  position: fixed; inset: 0;
  z-index: 1100;          /* boven de site-nav (z 1000) zodat de sluitknop klikbaar is */
  background: rgba(4, 8, 14, 0);
  transition: background 0.45s ease;
  overflow: hidden;
  pointer-events: none;   /* gesloten: laat kliks door naar de pagina */
}
.nav-drawer.is-open { background: rgba(4, 8, 14, 0.55); backdrop-filter: blur(2px); pointer-events: auto; }

.nav-drawer__panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(86vw, 360px);
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 5vw, 1.9rem) clamp(1.3rem, 4.5vw, 1.7rem) clamp(1.5rem, 5vw, 2rem);
  background:
    radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 55%),
    color-mix(in srgb, var(--color-primary) 92%, #000);
  border-right: 1px solid rgba(255,255,255,0.07);
  box-shadow: 30px 0 80px rgba(0,0,0,0.5);
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
  overflow-y: auto;
  scrollbar-width: none;
}
.nav-drawer__panel::-webkit-scrollbar { display: none; }
.nav-drawer.is-open .nav-drawer__panel { transform: translateX(0); }/* Head: logo + tagline links, sluitknop rechts */


.nav-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.6rem, 5vw, 2.2rem);
}
.nav-drawer__brand { display: block; text-decoration: none; }
.nav-drawer__brand img {
  display: block;
  max-height: 38px; max-width: 160px;
  width: auto; height: auto;
}
.nav-drawer__brand--text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  color: #fff;
}
.nav-drawer__tagline {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.nav-drawer__close {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.nav-drawer__close svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .nav-drawer__close:hover { background: rgba(255,255,255,0.1); color: #fff; transform: rotate(90deg); }
}/* Menu-items: icoonblok + label + chevron */


.nav-drawer__links {
  display: flex;
  flex-direction: column;
}
.nav-drawer__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.25rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1),
              transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.nav-drawer__link:last-child { border-bottom: none; }
.nav-drawer__link-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  color: var(--color-accent);
  transition: background 0.2s, transform 0.2s;
}
.nav-drawer__link-icon svg { width: 22px; height: 22px; }
.nav-drawer__link-label {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
.nav-drawer__link-chev {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.32);
  transition: transform 0.2s, color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .nav-drawer__link:hover .nav-drawer__link-icon { background: color-mix(in srgb, var(--color-accent) 16%, transparent); transform: scale(1.04); }
  .nav-drawer__link:hover .nav-drawer__link-chev { color: var(--color-accent); transform: translateX(3px); }
}
.nav-drawer__link[aria-current="page"] .nav-drawer__link-chev { color: var(--color-accent); }/* Stagger-in */


.nav-drawer.is-open .nav-drawer__link { opacity: 1; transform: translateX(0); }
.nav-drawer.is-open .nav-drawer__link:nth-child(1) { transition-delay: 0.10s; }
.nav-drawer.is-open .nav-drawer__link:nth-child(2) { transition-delay: 0.16s; }
.nav-drawer.is-open .nav-drawer__link:nth-child(3) { transition-delay: 0.22s; }
.nav-drawer.is-open .nav-drawer__link:nth-child(4) { transition-delay: 0.28s; }
.nav-drawer.is-open .nav-drawer__link:nth-child(5) { transition-delay: 0.34s; }/* CTA-pill */


.nav-drawer__cta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: clamp(1.5rem, 5vw, 2rem) 0 0;
  padding: 1.05rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 70%, #0a6e84));
  color: var(--color-primary);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 0 36px color-mix(in srgb, var(--color-accent) 38%, transparent),
              0 10px 28px rgba(0,0,0,0.32);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1),
              transform 0.45s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.25s;
}
.nav-drawer.is-open .nav-drawer__cta { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.nav-drawer__cta svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-drawer__cta span { flex: 1; }
.nav-drawer__cta-arrow { transition: transform 0.2s; }
@media (hover: hover) and (pointer: fine) {
  .nav-drawer__cta:hover .nav-drawer__cta-arrow { transform: translateX(4px); }
}/* Hulp-kaart onderaan */


.nav-drawer__help {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: auto;
  padding: clamp(1.1rem, 4vw, 1.4rem);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.nav-drawer__help-body { min-width: 0; }
.nav-drawer__help-body strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}
.nav-drawer__help-body > span {
  display: block;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.75rem;
}
.nav-drawer__help-socials { display: flex; justify-content: center; gap: 0.5rem; }
.nav-drawer__help-socials a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.75);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.nav-drawer__help-socials a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}
.nav-drawer__help-socials svg { width: 17px; height: 17px; }/* ══════════════════════════════════════════════
   HERO — 2-kolom: content links, afbeelding rechts
══════════════════════════════════════════════ */


.hero {
  height: 100vh;
  height: 100svh;
  position: relative;
  background: var(--dark-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 72px;
}/* Noise grain */


.hero-noise {
  position: absolute; inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  z-index: 2;
}/* Hero gebruikt volledige breedte — geen gecentreerde max-width */


.hero > .container {
  max-width: 100%;
  margin-inline-start: 0;
  padding-inline-start: clamp(2.75rem, 7vw, 8.6rem);
  padding-inline-end: clamp(1rem, 3vw, 4rem);
}/* Vignette onderaan — alleen voor dark hero varianten */



.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 130px;
  background: linear-gradient(to bottom, transparent,
    color-mix(in srgb, var(--dark-bg) 55%, transparent));
  pointer-events: none;
  z-index: 3;
}
@keyframes scrollDrop {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  35% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  70% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
  100% { opacity: 0; }
}/* ════════════════════════════════════════════════
   HERO VARIANT 2 — Cinematic Proof
════════════════════════════════════════════════ */



.hero--av {
  isolation: isolate;
}
.hero-av__overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.14) 72px, transparent 140px),
    radial-gradient(ellipse at 72% 36%, color-mix(in srgb, var(--color-accent) 16%, transparent) 0%, transparent 36%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--color-primary) 78%, transparent) 0%,
      color-mix(in srgb, var(--color-primary) 54%, transparent) 28%,
      color-mix(in srgb, var(--color-primary) 14%, transparent) 58%,
      transparent 78%),
    linear-gradient(180deg, rgba(0,0,0,0.48), transparent 34%, rgba(0,0,0,0.36));
  z-index: 1;
}

.hero-bg--ambient {
  opacity: 0.34;
  filter: saturate(0.92) contrast(1.02);
}
.hero-av__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
  padding: 0.46rem 0.9rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.075);
  border: 1px solid color-mix(in srgb, var(--color-accent) 34%, rgba(255,255,255,0.14));
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  color: color-mix(in srgb, var(--color-accent) 68%, white);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(0.66rem, 0.75vw, 0.74rem);
  letter-spacing: 0.14em;
  margin-bottom: clamp(0.9rem, 1.7vh, 1.25rem);
  width: fit-content;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 34px rgba(0,0,0,0.18);
}
.hero-av__badge svg { color: var(--color-accent); flex-shrink: 0; }
.hero-av__hl {
  font-size: clamp(3.15rem, 5.8vw, 6.35rem) !important;
  max-width: 12.5ch;
  line-height: 0.93;
}
.hero-av__actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1.05rem;
}
.hero-av__btn-primary,
.hero-av__btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem;
  min-width: min(15.75rem, 100%);
  min-height: 3.35rem;
  padding: 0.82rem 0.82rem 0.82rem 1.28rem;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(.16,1,.3,1), box-shadow 0.28s, background 0.25s, border-color 0.25s;
}
.hero-av__btn-primary {
  background:
    radial-gradient(circle at 28% 12%, rgba(255,255,255,0.5), transparent 24%),
    linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 88%, white), var(--color-accent) 54%, color-mix(in srgb, var(--color-accent) 72%, black));
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-accent) 50%, white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.46), 0 18px 46px color-mix(in srgb, var(--color-accent) 30%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .hero-av__btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.56), 0 26px 58px color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
}
.hero-av__btn-secondary {
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045));
  color: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 12px 32px rgba(0,0,0,0.22);
}
@media (hover: hover) and (pointer: fine) {
  .hero-av__btn-secondary:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255,255,255,0.17), rgba(255,255,255,0.06));
    border-color: color-mix(in srgb, var(--color-accent) 34%, rgba(255,255,255,0.22));
    color: #fff;
  }
}
.hero-av__btn-arrow {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.22s, transform 0.22s;
}
.hero-av__btn-primary .hero-av__btn-arrow { background: rgba(0,0,0,0.16); }
.hero-av__btn-secondary .hero-av__btn-arrow { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.14); }
@media (hover: hover) and (pointer: fine) {
  .hero-av__btn-primary:hover .hero-av__btn-arrow,
  .hero-av__btn-secondary:hover .hero-av__btn-arrow { transform: translateX(3px); }
}
.hero-av__trust {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: linear-gradient(0deg, rgba(0,0,0,0.42), rgba(0,0,0,0.14) 72%, transparent);
}
.hero-av__trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0.2rem 0 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.hero-av__trust-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.9rem clamp(0.8rem, 1.5vw, 1.25rem);
  border-right: 1px solid rgba(255,255,255,0.08);
  transition: background 0.25s, border-color 0.25s;
}
.hero-av__trust-card:last-child { border-right: 0; }
.hero-av__trust-card:hover { background: rgba(255,255,255,0.055); }
.hero-av__trust-icon {
  width: 2.1rem;
  height: 2.1rem;
  background: color-mix(in srgb, var(--color-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 24%, rgba(255,255,255,0.08));
  border-radius: 0.66rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
}
.hero-av__trust-icon svg { width: 1rem; height: 1rem; }
.hero-av__trust-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(0.82rem, 0.95vw, 0.98rem);
  color: #fff;
  line-height: 1.12;
}
.hero-av__trust-label {
  font-size: clamp(0.62rem, 0.72vw, 0.72rem);
  color: rgba(255,255,255,0.54);
  margin-top: 0.16rem;
  line-height: 1.28;
}
@media (max-width: 980px) {
  .hero-av__trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-av__trust-card:nth-child(2) { border-right: 0; }
}
@media (max-width: 640px) {
  .hero-av__trust { position: relative; background: var(--color-primary); }
  .hero-av__trust-grid { padding: 0.8rem 0 1.2rem; }
  .hero-av__actions { flex-direction: column; }
  .hero-av__btn-primary,
  .hero-av__btn-secondary { width: 100%; }
}

@keyframes bento-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }/* ════════════════════════════════════════════════
   HERO VARIANT 3 — Editorial Split
════════════════════════════════════════════════ */

.hero--split {
  position: relative;
  height: 100svh;
  display: flex;
  overflow: hidden;
  background: var(--color-primary);
}
.hero-split__image {
  position: absolute;
  right: clamp(1rem, 2.6vw, 2.8rem);
  top: calc(72px + clamp(1rem, 2vh, 2rem));
  bottom: clamp(5.8rem, 10vh, 7.2rem);
  width: min(45vw, 42rem);
  overflow: hidden;
  background: var(--color-primary);
  border-radius: 1.2rem;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 28px 70px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08);
  z-index: 1;
}
.hero-split__image img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  filter: saturate(1.04) contrast(1.04);
}
.hero-split__image-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 75% 20%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 42%),
    linear-gradient(180deg, transparent 48%, rgba(0,0,0,0.5));
  z-index: 1;
  pointer-events: none;
}
.hero-split__content {
  position: relative;
  z-index: 2;
  width: 56%;
  height: 100%;
  background:
    linear-gradient(90deg, var(--color-primary) 78%, color-mix(in srgb, var(--color-primary) 82%, transparent));
  display: flex;
  align-items: center;
  padding-top: 72px;
}
.hero-split__inner {
  position: relative;
  padding: 0 clamp(2rem, 5.8vw, 6rem);
  max-width: 720px;
}
.hero-split__decor-num {
  position: absolute;
  top: -0.42em;
  right: 0;
  font-family: var(--font-heading);
  font-size: clamp(7rem, 13vw, 16rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(255,255,255,0.035);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.hero-split__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(1rem, 2vh, 1.55rem);
}
.hero-split__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent);
  flex-shrink: 0;
  animation: bento-pulse 2.5s ease-in-out infinite;
}
.hero-split__category {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.48);
}
.hero-split__hl {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: clamp(3.15rem, 5.9vw, 7rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: #fff;
  margin-bottom: clamp(1rem, 2vh, 1.35rem);
}
.hero-split__hl em {
  font-style: normal;
  color: var(--color-accent);
}
.hero-split__sub {
  font-size: clamp(0.94rem, 1.15vw, 1.08rem);
  line-height: 1.62;
  color: rgba(255,255,255,0.65);
  max-width: 48ch;
  margin-bottom: clamp(1.4rem, 2.8vh, 2rem);
}
.hero-split__actions {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.2rem);
  flex-wrap: wrap;
}
.hero-split__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,0.42), transparent 24%),
    linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 88%, white), var(--color-accent));
  color: var(--color-primary);
  padding: 0.9rem 1.35rem;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 6px 24px color-mix(in srgb, var(--color-accent) 50%, transparent);
  transition: transform 0.28s cubic-bezier(.16,1,.3,1), box-shadow 0.28s;
}
@media (hover: hover) and (pointer: fine) {
  .hero-split__btn-primary:hover {
    transform: translateY(-3px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.3),
      0 14px 38px color-mix(in srgb, var(--color-accent) 62%, transparent);
  }
}
.hero-split__btn-text {
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.66);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(255,255,255,0.2);
  padding-bottom: 2px;
  transition: color 0.22s, border-color 0.22s;
}
.hero-split__btn-text:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
.hero-split__statbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: stretch;
  background: color-mix(in srgb, var(--color-primary) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.hero-split__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.9rem clamp(1rem, 2.5vw, 2rem);
}
.hero-split__stat-div {
  width: 1px;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
  align-self: stretch;
}
.hero-split__stat-num {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}
.hero-split__stat-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.3;
  letter-spacing: 0.02em;
}
@media (max-width: 960px) {
  .hero--split { flex-direction: column; height: auto; min-height: 100svh; }
  .hero-split__content { width: 100%; height: auto; min-height: 58svh; padding-bottom: 2rem; }
  .hero-split__image { position: relative; right: auto; top: auto; bottom: auto; width: auto; height: 45vw; min-height: 220px; margin: 0 clamp(1rem, 4vw, 2rem) 1rem; }
  .hero-split__statbar { position: relative; }
  .hero-split__decor-num { display: none; }
}
@media (max-width: 640px) {
  .hero-split__statbar { flex-wrap: wrap; }
  .hero-split__stat { min-width: 50%; }
  .hero-split__stat-div:nth-child(4) { display: none; }
}/* ════════════════════════════════════════════════
   HERO VARIANT 5 — Agency Frame
════════════════════════════════════════════════ */


.hero--frame {
  min-height: 100svh;
  height: 100svh;
  padding: clamp(5.1rem, 8vh, 6.4rem) clamp(1rem, 1.6vw, 1.6rem) clamp(1rem, 1.8vh, 1.6rem);
  background: #050507;
}
.hero-frame__shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: clamp(1rem, 1.5vw, 1.35rem);
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--color-primary);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 24px 90px rgba(0,0,0,0.42);
}
.hero-frame__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.12) 84px, transparent 150px),
    radial-gradient(ellipse at 70% 42%, color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 34%),
    linear-gradient(90deg, rgba(6,6,10,0.9) 0%, rgba(6,6,10,0.74) 38%, rgba(6,6,10,0.28) 72%, rgba(6,6,10,0.74) 100%),
    linear-gradient(180deg, rgba(5,5,8,0.24), rgba(5,5,8,0.72));
}
.hero-frame__content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(360px, 0.72fr) minmax(420px, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 5rem);
  padding: clamp(3.2rem, 7vh, 5.8rem) clamp(2rem, 8vw, 7.8rem) clamp(4.8rem, 9vh, 6.6rem);
}
.hero-frame__copy {
  max-width: 620px;
}
.hero-frame__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  color: rgba(255,255,255,0.84);
  background: color-mix(in srgb, var(--color-accent) 10%, rgba(255,255,255,0.055));
  border: 1px solid color-mix(in srgb, var(--color-accent) 38%, rgba(255,255,255,0.1));
  font-size: 0.82rem;
  line-height: 1.2;
  margin-bottom: clamp(1.4rem, 3vh, 2.4rem);
  backdrop-filter: blur(14px);
}
.hero-frame__badge span { color: var(--color-accent); }
.hero-frame__hl {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5.2vw, 5.55rem);
  font-weight: 760;
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: rgba(255,255,255,0.88);
  margin: 0 0 clamp(1rem, 2vh, 1.35rem);
  max-width: 12.5ch;
}
.hero-frame__hl em,
.hero-frame__hl .accent {
  color: #fff;
  font-style: normal;
}
.hero-frame__sub {
  color: rgba(255,255,255,0.72);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.65;
  max-width: 42ch;
  margin: 0 0 clamp(1.8rem, 3.5vh, 2.65rem);
}
.hero-frame__actions {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.8rem);
  flex-wrap: wrap;
}
.hero-frame__btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.9rem 2.1rem;
  border-radius: 0.55rem;
  background: #fff;
  color: #0b0b10;
  font-weight: 800;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65), 0 0 0 2px color-mix(in srgb, var(--color-accent) 50%, transparent), 0 16px 38px rgba(0,0,0,0.28);
  transition: transform 0.25s cubic-bezier(.16,1,.3,1), box-shadow 0.25s;
}
@media (hover: hover) and (pointer: fine) {
  .hero-frame__btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8), 0 0 0 2px color-mix(in srgb, var(--color-accent) 70%, transparent), 0 22px 52px rgba(0,0,0,0.36);
  }
}
.hero-frame__btn-text {
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s, transform 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .hero-frame__btn-text:hover {
    color: #fff;
    transform: translateX(3px);
  }
}
.hero-frame__visual {
  position: relative;
  min-height: min(50vh, 28rem);
}
.hero-frame__beam {
  position: absolute;
  left: 18%;
  top: 42%;
  width: 48%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), rgba(255,255,255,0.85), transparent);
  box-shadow: 0 0 36px color-mix(in srgb, var(--color-accent) 80%, transparent);
  transform: rotate(-28deg);
}
.hero-frame__panel {
  position: absolute;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035));
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 18px 48px rgba(0,0,0,0.28);
}
.hero-frame__panel--main {
  right: 24%;
  top: 9%;
  width: clamp(6rem, 11vw, 9rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: rotate(7deg);
}
.hero-frame__panel--main img {
  max-width: 62%;
  max-height: 62%;
  object-fit: contain;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--color-accent) 55%, transparent));
}
.hero-frame__panel--main span {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 900;
}
.hero-frame__panel--chart {
  left: 6%;
  bottom: 12%;
  width: clamp(13rem, 24vw, 24rem);
  min-height: 7rem;
  padding: 1.05rem 1.15rem;
  transform: rotate(7deg);
}
.hero-frame__panel--chart strong {
  display: block;
  color: #fff;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1;
  margin-bottom: 0.38rem;
}
.hero-frame__panel--chart span {
  color: rgba(255,255,255,0.54);
  font-size: 0.8rem;
}
.hero-frame__panel--chart::after {
  content: "";
  display: block;
  height: 3.25rem;
  margin-top: 0.75rem;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.16) 7%, transparent 7% 14%, rgba(255,255,255,0.24) 14% 21%, transparent 21% 28%, rgba(255,255,255,0.2) 28% 35%, transparent 35% 42%, rgba(255,255,255,0.32) 42% 49%, transparent 49% 56%, rgba(255,255,255,0.24) 56% 63%, transparent 63% 70%, rgba(255,255,255,0.34) 70% 77%, transparent 77% 84%, rgba(255,255,255,0.45) 84% 91%, transparent 91%);
  mask-image: linear-gradient(to top, #000 65%, transparent);
}
.hero-frame__panel--stack {
  right: 3%;
  bottom: 22%;
  width: clamp(13rem, 18vw, 17rem);
  padding: 1rem;
  display: grid;
  gap: 0.5rem;
  transform: rotate(5deg);
}
.hero-frame__panel--stack span {
  color: rgba(255,255,255,0.58);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 0.45rem;
  font-size: 0.78rem;
}
.hero-frame__proof {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: clamp(1.1rem, 2.2vh, 1.6rem);
  display: flex;
  justify-content: center;
  gap: clamp(1.4rem, 5vw, 5rem);
  padding-inline: 2rem;
  color: rgba(255,255,255,0.34);
  font-weight: 800;
  font-size: clamp(0.7rem, 0.9vw, 0.86rem);
  white-space: nowrap;
  overflow: hidden;
}/* ════════════════════════════════════════════════
   HERO VARIANT 6 — Product Stage
════════════════════════════════════════════════ */


.hero--stage {
  height: 100svh;
  min-height: 100svh;
  padding: clamp(5rem, 8vh, 6.2rem) clamp(1rem, 1.2vw, 1.25rem) clamp(1rem, 1.2vw, 1.25rem);
  background: #f7f7f8;
  border-radius: 0;
}
.hero-stage__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.05) 120px, transparent 240px),
    linear-gradient(90deg, rgba(8,8,14,0.68) 0%, rgba(8,8,14,0.5) 34%, rgba(8,8,14,0.12) 58%, rgba(8,8,14,0.05) 100%);
}
.hero-stage__nav-plate {
  position: absolute;
  z-index: 5;
  left: clamp(2.4rem, 7.5vw, 7rem);
  right: clamp(2.4rem, 7.5vw, 7rem);
  top: clamp(5.9rem, 9.2vh, 7.2rem);
  height: clamp(4.4rem, 8.5vh, 6.6rem);
  border-radius: 1rem;
  background: rgba(4,4,7,0.74);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 22px 58px rgba(0,0,0,0.28);
  display: flex;
  align-items: center;
  padding-inline: clamp(1.4rem, 3vw, 2.4rem);
  pointer-events: none;
}
.hero-stage__nav-plate img {
  height: 2.05rem;
  max-width: 10rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.hero-stage__nav-plate span {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.4rem;
}
.hero-stage__content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
  padding: clamp(5.8rem, 13vh, 9rem) clamp(3rem, 7.5vw, 7rem) clamp(3rem, 7vh, 5rem);
}
.hero-stage__copy {
  max-width: min(43rem, 48vw);
}
.hero-stage__hl {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 7.5vw, 8.6rem);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.06em;
  color: #fff;
  margin: 0 0 clamp(1rem, 2vh, 1.35rem);
  text-shadow: 0 18px 60px rgba(0,0,0,0.22);
}
.hero-stage__hl em,
.hero-stage__hl .accent {
  color: #fff;
  font-style: normal;
}
.hero-stage__sub {
  max-width: 34rem;
  color: rgba(255,255,255,0.62);
  font-size: clamp(1.05rem, 1.45vw, 1.32rem);
  line-height: 1.55;
  font-weight: 650;
  margin: 0 0 clamp(1.7rem, 3.6vh, 2.5rem);
}
.hero-stage__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.hero-stage__btn-primary,
.hero-stage__btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.65rem;
  padding: 0.95rem 1.85rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: 850;
  transition: transform 0.24s cubic-bezier(.16,1,.3,1), box-shadow 0.24s, background 0.24s;
}
.hero-stage__btn-primary {
  background: var(--color-accent);
  color: var(--color-primary);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--color-accent) 24%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .hero-stage__btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 46px color-mix(in srgb, var(--color-accent) 32%, transparent);
  }
}
.hero-stage__btn-secondary {
  background: rgba(16,16,25,0.72);
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
}
@media (hover: hover) and (pointer: fine) {
  .hero-stage__btn-secondary:hover {
    transform: translateY(-2px);
    background: rgba(24,24,34,0.86);
    color: #fff;
  }
}/* ════════════════════════════════════════════════
   HERO VARIANT 4 — Brush Mascot (donker)
   HERO VARIANT 8 — Brush Mascot Light (zelfde layout)
════════════════════════════════════════════════ */


.hero--brush {
  --brush-paper: #141110;
  --brush-ink: #ffffff;
  --brush-muted: rgba(255,255,255,0.62);
  --brush-line: rgba(255,255,255,0.1);
  --brush-glass: color-mix(in srgb, var(--brush-paper) 62%, transparent);
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 760px;
  padding-top: 72px;
  background: var(--brush-paper);
  color: var(--brush-ink);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero-brush__image {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-brush__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;
}

.hero-brush__image-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      var(--brush-paper) 0%,
      color-mix(in srgb, var(--brush-paper) 86%, transparent) 28%,
      color-mix(in srgb, var(--brush-paper) 40%, transparent) 46%,
      transparent 64%
    ),
    linear-gradient(180deg, transparent 76%, color-mix(in srgb, var(--brush-paper) 88%, transparent) 100%);
}

.hero--brush::after {
  background: linear-gradient(to bottom, transparent,
    color-mix(in srgb, var(--brush-paper) 65%, transparent));
}

.hero.hero--brush > .container.hero-brush__inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding: clamp(1rem, 4vh, 3rem) clamp(3rem, 5.4vw, 6rem);
  padding-bottom: clamp(6.5rem, 12vh, 8.5rem);
}

.hero-brush__copy {
  max-width: min(46rem, 54%);
}

.hero-brush__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: clamp(1.2rem, 2.4vh, 2rem);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.hero-brush__headline {
  max-width: 15ch;
  margin: 0 0 clamp(1.1rem, 2.2vh, 1.7rem);
  color: var(--brush-ink);
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 4.2vw, 5rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.hero-brush__headline em,
.hero-brush__headline .accent {
  position: relative;
  z-index: 1;
  font-style: normal;
  color: var(--color-accent);
}

.hero-brush__dot {
  color: var(--color-accent);
}

.hero-brush__sub {
  max-width: 34rem;
  margin: 0 0 clamp(1.6rem, 3.2vh, 2.4rem);
  color: var(--brush-muted);
  font-size: clamp(0.98rem, 1.12vw, 1.08rem);
  line-height: 1.7;
}

.hero-brush__actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 3vh, 2.2rem);
}

.hero-brush__btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: clamp(0.78rem, 0.9vw, 0.86rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.26s cubic-bezier(0.16,1,0.3,1), box-shadow 0.26s ease, border-color 0.26s ease, background 0.26s ease;
}

.hero-brush__btn--primary {
  gap: 0.65rem;
  padding: 1rem 1.85rem;
  border-radius: 0.9rem;
  background: var(--color-accent);
  color: var(--color-primary);
  box-shadow: 0 12px 38px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .hero-brush__btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
}

.hero-brush__btn-icon {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}

.hero-brush__btn-icon svg { width: 100%; height: 100%; }

.hero-brush__btn--ghost {
  gap: 0.65rem;
  padding: 1rem 1.6rem;
  border-radius: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--brush-ink) 26%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--brush-ink) 88%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .hero-brush__btn--ghost:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent);
    color: var(--brush-ink);
  }
}/* Glassen rating-kaart onder de knoppen */


.hero-brush__ratingcard {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.3rem, 2.4vw, 2.2rem);
  flex-wrap: wrap;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--brush-ink) 4%, transparent);
  border: 1px solid var(--brush-line);
  backdrop-filter: blur(10px);
}

.hero-brush__ratingcard > div {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.hero-brush__ratingcard > i {
  flex: 0 0 auto;
  width: 1px;
  height: 2.4rem;
  background: var(--brush-line);
}

.hero-brush__stars {
  color: var(--color-accent);
  font-size: 1rem;
  letter-spacing: 0.12em;
}
.hero-brush__stat-body .hero-brush__stat-stars {
  color: var(--color-accent);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  vertical-align: middle;
}

.hero-brush__ratingcard-body strong {
  display: block;
  color: var(--brush-ink);
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 780;
  line-height: 1.25;
}

.hero-brush__ratingcard-body strong em {
  font-style: normal;
  color: var(--color-accent);
}

.hero-brush__ratingcard-body small {
  display: block;
  margin-top: 0.15rem;
  color: var(--brush-muted);
  font-size: 0.78rem;
  line-height: 1.2;
}

.hero-brush__check {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  color: var(--color-accent);
}/* Rating-rij met avatars onder de knoppen */


.hero-brush__rating {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.hero-brush__rating-avatars {
  display: flex;
  flex: 0 0 auto;
}

.hero-brush__rating-avatars img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brush-paper);
  margin-left: -0.6rem;
}

.hero-brush__rating-avatars img:first-child {
  margin-left: 0;
}

.hero-brush__rating-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.85rem;
  color: var(--brush-muted);
  line-height: 1.3;
}

.hero-brush__rating-body strong {
  color: var(--brush-ink);
  font-weight: 780;
}

.hero-brush__rating-body em {
  font-style: normal;
  color: var(--color-accent);
}/* Open stats-rij onderaan */


.hero-brush__stats {
  position: absolute;
  z-index: 4;
  left: 0; right: 0;
  bottom: clamp(1rem, 2.6vh, 2rem);
  padding: 0 clamp(3rem, 5.4vw, 6rem);
}

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

.hero-brush__stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem clamp(1rem, 2.2vw, 2rem);
  border-right: 1px solid var(--brush-line);
}

.hero-brush__stat:first-child { padding-left: 0; }
.hero-brush__stat:last-child { border-right: 0; }

.hero-brush__stat-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.hero-brush__stat-icon svg {
  width: 1.85rem;
  height: 1.85rem;
  color: var(--color-accent);
}

.hero-brush__stat-body {
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
}

.hero-brush__stat-body strong {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1.4vw, 1.45rem);
  font-weight: 870;
  color: var(--brush-ink);
  line-height: 1.05;
}

.hero-brush__stat-body > span {
  display: block;
  font-size: 0.8rem;
  color: var(--brush-muted);
  line-height: 1.2;
}/* USP-variant van de stats-rij: iconen in ring, titel + subtekst */


.hero-brush__stats--usp .hero-brush__stats-grid {
  border-top: 1px solid var(--brush-line);
  padding-top: 0.5rem;
}

.hero-brush__stats--usp .hero-brush__stat-icon {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 50%, transparent);
}

.hero-brush__stats--usp .hero-brush__stat-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.hero-brush__stats--usp .hero-brush__stat-body strong {
  font-size: clamp(0.92rem, 1.05vw, 1.02rem);
  font-weight: 780;
  line-height: 1.25;
}/* Hero sw-wrap: sync achtergrond met actief variant — voorkomt donkere gap aan de onderkant */


[data-sw-section="hero"] {
  background: #141110;
}/* Donkere stats-balk onderaan */


.hero-edit__stats {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: clamp(1.2rem, 3vh, 2.4rem);
  width: min(88rem, calc(100% - 5rem));
  margin-inline: auto;
}

.hero-edit__stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 1.1rem;
  background: color-mix(in srgb, var(--color-primary) 82%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 28px 64px color-mix(in srgb, var(--edit-ink) 22%, transparent);
  overflow: hidden;
}

.hero-edit__stat {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 1.35rem clamp(1.1rem, 2.2vw, 2rem);
  border-right: 1px solid rgba(255,255,255,0.08);
}

.hero-edit__stat:last-child {
  border-right: 0;
}

.hero-edit__stat-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.hero-edit__stat-icon svg {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--color-accent);
}

.hero-edit__stat-body strong {
  display: block;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.3vw, 1.3rem);
  font-weight: 850;
  line-height: 1.1;
}

.hero-edit__stat-body small {
  display: block;
  margin-top: 0.14rem;
  color: rgba(255,255,255,0.62);
  font-size: 0.82rem;
  line-height: 1.25;
}

@media (max-width: 1024px) {

  .hero-edit__stats {
    position: static;
    width: auto;
    margin: 2.2rem clamp(1.35rem, 4vw, 3rem) 2rem;
  }

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

  .hero-edit__stat:nth-child(2n) {
    border-right: 0;
  }

  .hero-edit__stat:nth-child(n+3) {
    border-top: 1px solid rgba(255,255,255,0.08);
  }
}

@media (max-width: 720px) {

  .hero-edit__stats {
    margin-inline: 1.35rem;
  }

  .hero-edit__stat {
    padding: 1.05rem 1rem;
  }
}

@media (max-width: 1024px) {
  .hero-frame__content {
    grid-template-columns: 1fr;
    padding-bottom: 5.4rem;
  }
  .hero-frame__visual {
    display: none;
  }
  .hero-stage__copy {
    max-width: 72vw;
  }

  .hero--brush {
    min-height: 820px;
  }

  .hero.hero--brush > .container.hero-brush__inner {
    padding-inline-start: clamp(2.2rem, 5vw, 4rem);
  }

  .hero-brush__copy {
    max-width: 55vw;
  }

  .hero-brush__headline {
    font-size: clamp(2.4rem, 4.8vw, 3.8rem);
  }

  .hero-brush__stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 0.9rem;
    background: var(--brush-glass);
    border: 1px solid var(--brush-line);
  }

  .hero-brush__stat:first-child {
    padding-left: clamp(1rem, 2.2vw, 2rem);
  }

  .hero-brush__stat:nth-child(2n) {
    border-right: 0;
  }

  .hero-brush__stat:nth-child(n+3) {
    border-top: 1px solid var(--brush-line);
  }
}

@media (max-width: 720px) {
  .hero--frame,
  .hero--stage {
    height: auto;
    min-height: 100svh;
    padding-inline: 0.75rem;
  }
  .hero-frame__shell {
    min-height: calc(100svh - 6rem);
  }
  .hero-frame__content {
    padding: 5.2rem 1.25rem 6rem;
  }
  .hero-frame__hl {
    font-size: clamp(2.65rem, 13vw, 4.2rem);
  }
  .hero-frame__actions,
  .hero-stage__actions {
    align-items: stretch;
    flex-direction: column;
  }
  .hero-frame__btn-primary,
  .hero-frame__btn-text,
  .hero-stage__btn-primary,
  .hero-stage__btn-secondary {
    width: 100%;
    justify-content: center;
  }
  .hero-frame__proof {
    justify-content: flex-start;
    gap: 1.4rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
  }
  .hero-stage__nav-plate {
    left: 1.35rem;
    right: 1.35rem;
    height: 4.3rem;
  }
  .hero-stage__content {
    padding: 9rem 1.6rem 3rem;
    min-height: calc(100svh - 5rem);
  }
  .hero-stage__copy {
    max-width: 100%;
  }
  .hero-stage__hl {
    font-size: clamp(3.25rem, 15vw, 5rem);
  }

  .hero--brush {
    height: auto;
    min-height: 100svh;
    padding-top: 68px;
  }/* Op mobiel: image bovenaan, content eronder */

  
  .hero-brush__image {
    width: 100%;
    height: 48%;
    top: 0;
    bottom: auto;
  }

  .hero-brush__image img {
    object-position: 100% center;
  }

  .hero-brush__image-fade {
    background: linear-gradient(0deg,
      var(--brush-paper) 0%,
      var(--brush-paper) 5%,
      color-mix(in srgb, var(--brush-paper) 58%, transparent) 32%,
      transparent 68%
    );
  }

  .hero.hero--brush > .container.hero-brush__inner {
    min-height: calc(100svh - 68px);
    padding: clamp(1.5rem, calc(28vh - 150px), 6.1rem) 1.35rem 12rem;
    align-items: flex-start;
  }

  .hero-brush__copy {
    max-width: 100%;
  }

  .hero-brush__badge {
    margin-bottom: 1.1rem;
    font-size: 0.62rem;
  }

  .hero-brush__headline {
    font-size: clamp(2.8rem, 13vw, 4.1rem);
  }

  .hero-brush__sub {
    font-size: clamp(1rem, 4vw, 1.18rem);
  }

  .hero-brush__actions {
    align-items: stretch;
    flex-direction: column;
    gap: 0.85rem;
  }

  .hero-brush__btn,
  .hero-brush__btn--primary,
  .hero-brush__btn--ghost {
    width: 100%;
    justify-content: center;
  }

  .hero-brush__ratingcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1rem;
    text-align: center;
  }

  .hero-brush__ratingcard > div {
    justify-content: center;
  }

  .hero-brush__ratingcard > i {
    display: none;
  }

  .hero-brush__stats {
    padding: 0 0.75rem;
  }

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

  .hero-brush__stat {
    padding: 0.85rem 1rem;
  }

  .hero-brush__stat:first-child {
    padding-left: 1rem;
  }

  .hero-brush__stat:nth-child(2n) {
    border-right: 0;
  }

  .hero-brush__stat:nth-child(n+3) {
    border-top: 1px solid var(--brush-line);
  }
}/* Responsive */


@media (max-width: 1100px) {
  .hero > .container {
    padding-inline-start: clamp(2.4rem, 6vw, 5.8rem);
  }
}
@media (max-width: 768px) {
  .hero {
    height: auto;
    min-height: 100svh;
  }
}

@media (max-width: 640px) {
  .hero > .container {
    padding-inline: clamp(1.15rem, 5vw, 1.6rem);
  }
}

@media (min-width: 769px) and (max-height: 760px) {
  .nav-inner { height: 66px; }
  .hero {
    padding-top: 66px;
  }
}/* ═══════════════════════════════════════════════
   SERVICES — Dark glassmorphism
═══════════════════════════════════════════════ *//* ══════════════════════════════════════════════
   DIENSTEN — Infinite carousel
══════════════════════════════════════════════ */



.services-section {
  background: var(--color-primary);
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 100svh;
  padding: clamp(3.1rem, 5vh, 4.5rem) 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.services-section::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.services-section::after {
  content: '';
  position: absolute;
  bottom: -30%; left: 50%; transform: translateX(-50%);
  width: 70%; height: 70%;
  background: radial-gradient(ellipse,
    color-mix(in srgb, var(--color-accent) 7%, transparent) 0%,
    transparent 70%);
  pointer-events: none;
}

.carousel-outer {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.1rem, 2vh, 1.7rem);
  overflow: hidden;
}
.carousel-outer::before,
.carousel-outer::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; width: 80px;
  z-index: 2; pointer-events: none;
}
.carousel-outer::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-primary), transparent);
}
.carousel-outer::after {
  right: 0;
  background: linear-gradient(-90deg, var(--color-primary), transparent);
}

.carousel-track {
  display: flex;
  gap: clamp(0.85rem, 1.3vw, 1.1rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.65rem 0.85rem 1.05rem;
  cursor: grab;
  user-select: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.is-dragging { cursor: grabbing; }

.service-card {
  flex: 0 0 clamp(230px, 20vw, 270px);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: clamp(1.25rem, 1.8vw, 1.65rem);
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 1rem;
  color: white;
  transition: background 0.3s ease,
              border-color 0.3s ease,
              transform 0.4s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-6px);
    box-shadow: 0 24px 52px rgba(0,0,0,0.4),
                0 0 0 1px rgba(255,255,255,0.06);
  }
}
.service-card:hover::before { opacity: 1; }

.service-card-icon { font-size: 2rem; line-height: 1; }
.service-card-title {
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 700;
  color: rgba(255,255,255,0.9);
  line-height: 1.25; letter-spacing: -0.01em;
  margin: 0;
}
.service-card-desc {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.68;
  flex: 1;
  margin: 0;
}

.services-section .section-header {
  margin-bottom: clamp(1rem, 2vh, 1.5rem);
}

.services-section .section-header h2 {
  font-size: clamp(1.9rem, 3.8vw, 3.15rem);
}

.services-section .section-subtitle {
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
  line-height: 1.5;
}/* Homepage services: behalve carousel tonen varianten 2-6 categorieen. */


.svc-home-cat {
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(3rem, 5.2vh, 4.6rem) 0;
  box-sizing: border-box;
  overflow: hidden;
}
.svc-home-cat > .container {
  width: 100%;
}
.svc-home-cat .svc-a__head,
.svc-home-cat .svc-b__head,
.svc-home-cat .svc-process__head {
  margin-bottom: clamp(1.5rem, 3vh, 2.35rem);
  padding-bottom: clamp(0.75rem, 1.5vh, 1.1rem);
}
.svc-home-cat .svc-a__head h2,
.svc-home-cat .svc-b__head-left h2,
.svc-home-cat .svc-process__head h2,
.svc-home-cat .svc-proof__intro h2 {
  font-size: clamp(1.85rem, 3.7vw, 3.05rem);
}
.svc-home-cat .svc-a__grid,
.svc-home-cat .svc-b__grid,
.svc-home-cat .svc-process__rail,
.svc-home-cat .svc-proof__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.65rem, 1.2vw, 0.95rem);
}
.svc-home-cat .svc-a__grid {
  border-radius: 14px;
}
.svc-home-cat .svc-a__card {
  min-height: clamp(20rem, 42vh, 25rem);
  padding: clamp(1.35rem, 2vw, 1.9rem);
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 0 !important;
}
.svc-home-cat .svc-a__card:last-child { border-right: 0 !important; }
.svc-home-cat .svc-a__card:nth-child(3n) { border-right: 1px solid rgba(255,255,255,0.06); }
.svc-home-cat .svc-a__num { font-size: clamp(4.2rem, 7vw, 6rem); }
.svc-home-cat .svc-a__icon,
.svc-home-cat .svc-b__icon,
.svc-home-cat .svc-process__icon,
.svc-home-cat .svc-proof__icon {
  font-size: 1.45rem;
}
.svc-home-cat .svc-a__title,
.svc-home-cat .svc-b__title,
.svc-home-cat .svc-process__body h3,
.svc-home-cat .svc-proof__row h3 {
  font-size: clamp(1.05rem, 1.35vw, 1.34rem);
  text-transform: none;
  letter-spacing: -0.01em;
}
.svc-home-cat .svc-a__desc,
.svc-home-cat .svc-b__desc,
.svc-home-cat .svc-process__body p,
.svc-home-cat .svc-proof__row p {
  font-size: clamp(0.82rem, 0.9vw, 0.9rem);
  line-height: 1.55;
}
.svc-cat-list {
  list-style: none;
  display: grid;
  gap: 0.3rem;
  margin: 0.7rem 0 0;
  padding: 0;
}
.svc-cat-list li {
  position: relative;
  padding-left: 0.9rem;
  color: rgba(255,255,255,0.58);
  font-size: clamp(0.72rem, 0.82vw, 0.8rem);
  line-height: 1.25;
}
.svc-cat-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}
.svc-cat-list--light li,
.svc-cat-list--process li {
  color: var(--color-text-muted);
}
.svc-cat-list--proof li {
  color: rgba(255,255,255,0.55);
}
.svc-home-cat .svc-b__card {
  min-height: clamp(16.8rem, 34vh, 20.5rem);
  padding: clamp(1.05rem, 1.55vw, 1.45rem);
}
@media (hover: hover) and (pointer: fine) {
  .svc-home-cat .svc-b__card--featured,
  .svc-home-cat .svc-b__card--featured.is-visible,
  .svc-home-cat .svc-b__card--featured:hover,
  .svc-home-cat .svc-b__card--featured.is-visible:hover {
    transform: none;
  }
}
.svc-home-cat .svc-process__item {
  display: block;
}
.svc-home-cat .svc-process__marker {
  justify-content: flex-start;
  padding: 0 0 0.85rem;
}
.svc-home-cat .svc-process__marker::before {
  display: none;
}
.svc-home-cat .svc-process__body {
  grid-template-columns: 1fr;
  align-items: start;
  min-height: clamp(16.8rem, 34vh, 20.5rem);
}
.svc-home-cat .svc-process__link {
  justify-self: start;
  margin-top: auto;
}
.svc-home-cat .svc-proof__layout {
  display: block;
}
.svc-home-cat .svc-proof__intro {
  position: static;
  max-width: 760px;
  margin-bottom: clamp(1.5rem, 3vh, 2.35rem);
}
.svc-home-cat .svc-proof__intro p,
.svc-home-cat .svc-proof__stats {
  display: none;
}
.svc-home-cat .svc-proof__row {
  grid-template-columns: 1fr;
  align-items: start;
  min-height: clamp(16.8rem, 34vh, 20.5rem);
}
.svc-home-cat .svc-proof__row a {
  margin-top: auto;
}
.svc-section-action {
  display: flex;
  justify-content: center;
  margin-top: clamp(0.75rem, 1.8vh, 1.2rem);
}
.svc-section-link--dark {
  color: var(--color-accent);
  background: transparent;
  border-color: var(--color-accent);
}
.svc-section-link--dark:hover {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

@media (max-width: 1100px) {
  .svc-home-cat {
    height: auto;
    min-height: 100svh;
  }
  .svc-home-cat .svc-a__grid,
  .svc-home-cat .svc-b__grid,
  .svc-home-cat .svc-process__rail,
  .svc-home-cat .svc-proof__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .svc-home-cat .svc-a__card {
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
}

@media (max-width: 640px) {
  .svc-home-cat {
    display: block;
    height: auto;
    min-height: 0;
    padding: clamp(3.5rem, 12vw, 4.5rem) 0;
  }
  .svc-home-cat .svc-a__grid,
  .svc-home-cat .svc-b__grid,
  .svc-home-cat .svc-process__rail,
  .svc-home-cat .svc-proof__list{
    grid-template-columns: 1fr;
  }
  .svc-section-action{
    justify-content: center;
  }
}/* ══════════════════════════════════════════════════════
   DIENSTEN STIJL 2 — Editorial dark grid
══════════════════════════════════════════════════════ */


.svc-a {
  background: var(--color-primary);
  padding: 6rem 0;
  position: relative;
}
.svc-a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.svc-a::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .04;
  background-image:
    radial-gradient(circle at 15% 20%, var(--color-accent), transparent 40%),
    radial-gradient(circle at 85% 80%, var(--color-accent), transparent 40%);
}
.svc-a__head {
  display: grid; grid-template-columns: 1fr auto; gap: 48px;
  align-items: end; margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.svc-a__head--solo {
  grid-template-columns: 1fr;
}
.svc-a__head h2 {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  line-height: 1.02; letter-spacing: -.02em;
  color: #fff; margin: 0;
}
.svc-a__head h2 em { font-style: italic; color: var(--color-accent); font-weight: 400; }
.svc-a__head-right {
  max-width: 380px; color: rgba(255,255,255,.55);
  font-size: 1rem; line-height: 1.65;
}
.svc-a__head-right .count {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-heading); font-size: .7rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--color-accent);
  margin-bottom: 14px;
}
.svc-a__head-right .count::before {
  content: ""; width: 24px; height: 1.5px; background: var(--color-accent);
}
.svc-a__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.015);
}
.svc-a__card {
  position: relative;
  padding: 36px 30px 32px;
  min-height: 300px;
  display: flex; flex-direction: column;
  border-right: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background .35s ease;
  overflow: hidden;
}
.svc-a__card:nth-child(3n) { border-right: none; }
.svc-a__card:nth-last-child(-n+3) { border-bottom: none; }
.svc-a__card:hover { background: rgba(255,255,255,0.03); }
@media (hover: hover) and (pointer: fine) {
  .svc-a__card:hover .svc-a__num { color: var(--color-accent); -webkit-text-stroke-color: var(--color-accent); transform: translate(-8px, 4px); }
  .svc-a__card:hover .svc-a__corner { transform: scale(2.2); opacity: .85; }
  .svc-a__card:hover .svc-a__arrow { transform: translate(6px, -6px); color: var(--color-accent); }
}
.svc-a__num {
  position: absolute; top: 18px; right: 24px;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 7rem; line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.18);
  letter-spacing: -.04em;
  transition: color .35s, transform .35s, -webkit-text-stroke-color .35s;
  pointer-events: none;
}
.svc-a__icon {
  width: 64px; height: 64px; border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 18%, transparent), color-mix(in srgb, var(--color-accent) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  display: grid; place-items: center;
  color: var(--color-accent);
  margin-bottom: 32px;
  position: relative; z-index: 2;
}
.svc-a__icon svg { width: 28px; height: 28px; }
.svc-a__title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.45rem; line-height: 1.15;
  color: #fff; letter-spacing: .01em;
  margin: 0 0 14px; text-transform: uppercase;
  max-width: 18ch; position: relative; z-index: 2;
}
.svc-a__desc {
  font-size: .92rem; line-height: 1.6;
  color: rgba(255,255,255,0.5);
  margin: 0; flex: 1; position: relative; z-index: 2;
}
.svc-a__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px dashed rgba(255,255,255,0.10);
  position: relative; z-index: 2;
}
.svc-a__cat {
  font-family: var(--font-heading); font-weight: 700;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.svc-a__arrow {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: grid; place-items: center;
  color: rgba(255,255,255,0.65);
  transition: transform .35s, color .35s;
}
.svc-a__arrow svg { width: 14px; height: 14px; }
.svc-a__arrow--link { text-decoration: none; flex-shrink: 0; }
.svc-a__cta-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 700;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-accent); text-decoration: none;
  transition: gap .25s cubic-bezier(.16,1,.3,1), color .25s;
}
.svc-a__cta-link svg { flex-shrink: 0; color: var(--color-accent); transition: transform .25s cubic-bezier(.16,1,.3,1); }
.svc-a__cta-link:hover { gap: 12px; }
@media (hover: hover) and (pointer: fine) {
  .svc-a__cta-link:hover svg { transform: translate(4px, -4px); }
}
.svc-a__corner {
  position: absolute; left: -30px; bottom: -30px;
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--color-accent);
  opacity: .45;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .35s;
  z-index: 1; filter: blur(.3px);
}
.svc-a__footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 48px; padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
  gap: 24px;
}
.svc-a__footer-text { font-size: .95rem; color: rgba(255,255,255,0.5); }
.svc-a__footer-text b { color: #fff; font-weight: 600; }
.svc-a__cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--color-accent); color: var(--color-primary);
  padding: 14px 24px; border-radius: 999px;
  font-family: var(--font-heading); font-weight: 700;
  font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--color-accent) 50%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .svc-a__cta:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--color-accent) 60%, transparent); }
}
@media (max-width: 1100px) {
  .svc-a__grid { grid-template-columns: repeat(2, 1fr); }
  .svc-a__card { border-right: 1px solid rgba(255,255,255,0.06) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
  .svc-a__card:nth-child(2n) { border-right: none !important; }
  .svc-a__card:nth-last-child(-n+2) { border-bottom: none !important; }
  .svc-a__head { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .svc-a__grid { grid-template-columns: 1fr; }
  .svc-a__card { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
  .svc-a__card:last-child { border-bottom: none !important; }
  .svc-a__num { font-size: 5rem; }
  .svc-a__footer { flex-direction: column; align-items: stretch; }
}/* ══════════════════════════════════════════════════════
   DIENSTEN STIJL 3 — Featured light grid
══════════════════════════════════════════════════════ */


.svc-b {
  background: var(--light-bg);
  padding: 6rem 0;
  position: relative;
}
.svc-b__head {
  display: grid; grid-template-columns: 1fr auto;
  align-items: flex-start; gap: 48px;
  margin-bottom: 56px;
}
.svc-b__head-left { max-width: 600px; }
.svc-b__label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-heading);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 1rem;
}
.svc-b__label::before {
  content: ""; display: block; width: 20px; height: 1.5px;
  background: var(--color-accent); flex-shrink: 0;
}
.svc-b__head-left h2 {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  line-height: 1.02; letter-spacing: -.02em;
  color: var(--color-primary); margin: 0 0 14px;
}
.svc-b__head-left h2 em { font-style: italic; color: var(--color-accent); font-weight: 400; }
.svc-b__head-left p {
  font-size: 1.02rem; line-height: 1.65;
  color: var(--color-text-muted); max-width: 52ch; margin: 0;
}
.svc-b__head-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--color-primary); color: #fff;
  padding: 14px 26px; border-radius: 999px;
  font-family: var(--font-heading); font-weight: 700;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; flex-shrink: 0;
  transition: transform .25s, background .25s, color .25s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px -12px rgba(0,0,0,.35);
}
@media (hover: hover) and (pointer: fine) {
  .svc-b__head-cta:hover { transform: translateY(-2px); background: var(--color-accent); color: var(--color-primary); }
}
.svc-b__head-cta svg { transition: transform .25s; }
@media (hover: hover) and (pointer: fine) {
  .svc-b__head-cta:hover svg { transform: translateX(3px); }
}
.svc-b__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.svc-b__card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 32px 28px 28px;
  display: flex; flex-direction: column;
  min-height: 260px;
  position: relative;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s;
  text-decoration: none; color: inherit;
}
@media (hover: hover) and (pointer: fine) {
  .svc-b__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px -20px rgba(0,0,0,0.12);
    border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
}
.svc-b__card:hover .svc-b__more { color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) {
  .svc-b__card:hover .svc-b__more svg { transform: translateX(4px); }
}
.svc-b__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  color: var(--color-primary);
  margin-bottom: 22px;
}
.svc-b__icon svg { width: 28px; height: 28px; }
.svc-b__title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.3rem; line-height: 1.15;
  color: var(--color-primary); margin: 0 0 12px;
  letter-spacing: -.005em;
}
.svc-b__desc {
  font-size: .92rem; line-height: 1.6;
  color: var(--color-text-muted); margin: 0; flex: 1;
}
.svc-b__more {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 700;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-accent); margin-top: 22px;
  padding: 0.52rem 1rem;
  border: 1.5px solid var(--color-accent);
  border-radius: 999px;
  background: transparent;
  text-decoration: none;
  transition: color .25s, background .25s;
}
.svc-b__more:hover {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.svc-b__more svg { width: 12px; height: 12px; transition: transform .25s; }
.svc-b__card--featured {
  background: var(--color-primary);
  border-color: var(--color-primary);
  overflow: hidden;
  transform: rotate(-2deg);
  transform-origin: bottom center;
  z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
  .svc-b__card--featured:hover,
  .svc-b__card--featured.is-visible:hover {
    transform: rotate(-2deg) translateY(-6px);
  }
}
.svc-b__card--featured.is-visible {
  transform: rotate(-2deg);
}
.svc-b__card--featured::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 60%),
    radial-gradient(40% 60% at 0% 100%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 60%);
  pointer-events: none;
}
.svc-b__card--featured .svc-b__icon {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 20%, transparent), color-mix(in srgb, var(--color-accent) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  border-radius: 10px; color: var(--color-accent);
}
.svc-b__card--featured .svc-b__title { color: #fff; }
.svc-b__card--featured .svc-b__desc { color: rgba(255,255,255,0.62); }
.svc-b__card--featured .svc-b__more { color: var(--color-accent); }
.svc-b__badge {
  position: absolute; top: 18px; right: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-accent); color: var(--color-primary);
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-heading); font-weight: 700;
  font-size: .65rem; letter-spacing: .14em; text-transform: uppercase;
  z-index: 2;
}
.svc-b__badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary);
}
.svc-b__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid rgba(0,0,0,0.08);
  gap: 20px;
}
.svc-b__foot-text { font-size: .95rem; color: var(--color-text-muted); }
.svc-b__foot-text b { color: var(--color-primary); font-weight: 600; }
.svc-b__foot-link {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--color-primary); font-family: var(--font-heading);
  font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; padding-bottom: 4px;
  border-bottom: 1.5px solid var(--color-primary);
  transition: color .25s, border-color .25s;
}
.svc-b__foot-link:hover { color: var(--color-accent); border-color: var(--color-accent); }
@media (max-width: 1100px) {
  .svc-b__grid { grid-template-columns: repeat(2, 1fr); }
  .svc-b__head { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .svc-b__grid { grid-template-columns: 1fr; }
  .svc-b__foot { flex-direction: column; align-items: flex-start; }
}/* ══════════════════════════════════════════════════════
   DIENSTEN homepage skin — Light grid volgens mockup
   (gescoped op .svc-home-cat zodat de dienstenpagina
    de originele svc-b stijl behoudt)
══════════════════════════════════════════════════════ */


.svc-home-cat.svc-b {
  --svcb-bg: var(--light-bg);
  background: var(--svcb-bg);
  padding: clamp(1.8rem, 3.4vh, 2.8rem) 0;
}

.svc-home-cat.svc-b .svc-b__head {
  margin-bottom: clamp(1rem, 2.2vh, 1.7rem);
  padding-bottom: 0;
}

.svc-home-cat.svc-b .svc-b__card {
  min-height: clamp(14.5rem, 28vh, 18rem);
}/* Decoratieve open cirkels */


.svc-home-cat .svc-b__deco {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
  pointer-events: none;
}
.svc-home-cat .svc-b__deco--tr {
  top: -8rem;
  right: -8rem;
  width: 24rem;
  height: 24rem;
}
.svc-home-cat .svc-b__deco--bl {
  bottom: -11rem;
  left: -11rem;
  width: 28rem;
  height: 28rem;
  border-color: color-mix(in srgb, var(--color-accent) 13%, transparent);
}/* Header: links eyebrow + titel met swoosh, rechts USP-badge */


.svc-home-cat .svc-b__head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  text-align: left;
}
.svc-home-cat .svc-b__label {
  gap: 0.85rem;
  letter-spacing: 0.26em;
  margin-bottom: 0.7rem;
}
.svc-home-cat .svc-b__label::before {
  display: none;
}
.svc-home-cat .svc-b__label i {
  display: block;
  width: 2.6rem;
  height: 1px;
  background: color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.svc-home-cat .svc-b__head h2 {
  margin: 0 0 0.7rem;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.025em;
}/* Gouden swoosh onder de titel */

.svc-home-cat .svc-b__head h2::after {
  content: "";
  display: block;
  width: clamp(7rem, 9vw, 10rem);
  height: 0.7rem;
  margin-top: 0.3rem;
  margin-left: 36%;
  border-bottom: 3px solid var(--color-accent);
  border-radius: 50%;
  transform: rotate(-1.5deg);
}
.svc-home-cat .svc-b__head p {
  max-width: 52ch;
  margin: 0;
}

/* "Bekijk alle diensten" — zelfde onderstreepte tekstlink-stijl als .prw__all (donkere variant) */
.svc-b__all {
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.25);
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 0.26s ease, color 0.26s ease;
}
.svc-b__all span { transition: transform 0.24s ease; }
@media (hover: hover) and (pointer: fine) {
  .svc-b__all:hover { border-color: var(--color-accent); color: var(--color-accent); }
  .svc-b__all:hover span { transform: translateX(3px); }
}

/* Mobiel: header gecentreerd, lijn voor het label weg */
@media (max-width: 640px) {
  .svc-home-cat .svc-b__head { display: block; text-align: center; }
  .svc-home-cat .svc-b__head-left { max-width: 100%; }
  .svc-home-cat .svc-b__label { justify-content: center; gap: 0; }
  .svc-home-cat .svc-b__label i { display: none; }
  .svc-home-cat .svc-b__head h2::after { margin-left: auto; margin-right: auto; }
  .svc-home-cat .svc-b__head p { margin-inline: auto; }
  .svc-b__all { margin-top: 1.2rem; }
}/* Genummerde rail boven de kaarten */



.svc-home-cat .svc-b__gridwrap {
  position: relative;
  padding-top: 3.6rem;
}
.svc-home-cat .svc-b__gridwrap::before {
  content: "";
  position: absolute;
  top: 1.3rem;
  left: 0;
  right: 0;
  border-top: 1.5px dashed rgba(0,0,0,0.16);
}
.svc-home-cat .svc-b__num {
  position: absolute;
  top: -3.45rem;
  left: 0.35rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 60%, transparent);
  background: var(--svcb-bg, #fcfbf8);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
}/* Witte kaarten */


.svc-home-cat .svc-b__card {
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  box-shadow: 0 14px 36px -22px rgba(0,0,0,0.14);
}
.svc-home-cat .svc-b__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-accent) 13%, #fff);
  border: 1px solid color-mix(in srgb, var(--color-accent) 26%, transparent);
  color: color-mix(in srgb, var(--color-accent) 82%, var(--color-primary));
  box-shadow: 0 8px 18px -8px rgba(0,0,0,0.18);
  margin-bottom: 0.85rem;
}
.svc-home-cat .svc-b__icon svg {
  width: 22px;
  height: 22px;
}
.svc-home-cat.svc-b .svc-b__title {
  margin-bottom: 8px;
}
.svc-home-cat.svc-b .svc-b__more {
  margin-top: 14px;
}
.svc-home-cat.svc-b .svc-cat-list {
  margin-top: 0.6rem;
}/* Bullets als accentkleurige check-cirkels (light + dark) */


.svc-home-cat.svc-b .svc-cat-list li {
  padding-left: 1.5rem;
}
.svc-home-cat.svc-b .svc-cat-list li::before {
  top: 0.12em;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  background: transparent;
}
.svc-home-cat.svc-b .svc-cat-list li::after {
  content: "";
  position: absolute;
  left: 0.27rem;
  top: calc(0.12em + 0.27rem);
  width: 0.36rem;
  height: 0.2rem;
  border-left: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  transform: rotate(-45deg);
}
.svc-home-cat.svc-b .svc-section-action {
  margin-top: clamp(1.7rem, 3.6vh, 2.8rem);
}
.svc-home-cat .svc-b__desc {
  flex: 0 0 auto;
}
.svc-home-cat .svc-cat-list--light {
  flex: 1;
  align-content: start;
}
.svc-home-cat .svc-b__more {
  color: color-mix(in srgb, var(--color-primary) 88%, #000);
  font-size: 0.74rem;
}/* Donkere pill-knop onderaan */


.svc-b__allbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 2.1rem;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.26s cubic-bezier(0.16,1,0.3,1), background 0.26s ease;
}
@media (hover: hover) and (pointer: fine) {
  .svc-b__allbtn:hover {
    transform: translateY(-3px);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
}
.svc-b__allbtn span {
  transition: transform 0.22s cubic-bezier(.16,1,.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .svc-b__allbtn:hover span {
    transform: translateX(3px);
  }
}

@media (max-width: 1100px) {
  .svc-home-cat .svc-b__gridwrap {
    padding-top: 0;
  }
  .svc-home-cat .svc-b__gridwrap::before {
    display: none;
  }
  .svc-home-cat .svc-b__num {
    position: static;
    margin-bottom: 0.7rem;
  }
  .svc-home-cat .svc-b__head {
    flex-direction: column;
    align-items: flex-start;
  }
}/* ═══════════════════════════════════════════════
   PROJECTEN — Masonry premium grid
═══════════════════════════════════════════════ */


.projects-preview {
  padding: var(--space-lg) 0 var(--space-xl);
  background: var(--color-bg);
  position: relative;
}/* Subtiele textuur achtergrond */


.projects-preview::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--color-accent) 3%, transparent), transparent 50%),
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--color-primary) 3%, transparent), transparent 50%);
  pointer-events: none;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: var(--space-lg);
  position: relative;
}
.project-card--featured { grid-column: auto; }
.project-card--featured .gallery { aspect-ratio: 4/3; }

.project-card {
  background: var(--color-surface);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06),
              0 0 0 1px rgba(0,0,0,0.04);
  transition: box-shadow 0.4s cubic-bezier(0.16,1,0.3,1),
              transform 0.4s cubic-bezier(0.16,1,0.3,1);
  display: flex; flex-direction: column;
}
@media (hover: hover) and (pointer: fine) {
  .project-card:hover {
    box-shadow: 0 24px 56px rgba(0,0,0,0.14),
                0 0 0 1px color-mix(in srgb, var(--color-accent) 15%, transparent);
    transform: translateY(-6px);
  }
}
.project-card.is-hidden { display: none; }/* Gallery */


.gallery {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--color-bg-alt);
}
.gallery-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.gallery-slide { flex: 0 0 100%; height: 100%; }
.gallery-slide img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.7s ease;
}
@media (hover: hover) and (pointer: fine) {
  .project-card:hover .gallery-slide:first-child img { transform: scale(1.05); }
}

.gallery-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--color-bg-alt), color-mix(in srgb, var(--color-accent) 8%, var(--color-bg-alt)));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 4rem; font-weight: 800;
  color: var(--color-text-muted); opacity: 0.2;
}

.gallery-prev,
.gallery-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.55); color: white;
  border: none; width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s, transform 0.2s;
  cursor: pointer; z-index: 2;
}
.gallery-prev { left: 0.85rem; }
.gallery-next { right: 0.85rem; }
.gallery:hover .gallery-prev,
.gallery:hover .gallery-next { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .gallery-prev:hover,
  .gallery-next:hover { background: rgba(0,0,0,0.8); transform: translateY(-50%) scale(1.1); }
}

.gallery-dots {
  position: absolute;
  bottom: 0.75rem; left: 0; right: 0;
  display: flex; justify-content: center;
  gap: 0.4rem; z-index: 2;
}
.gallery-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none; cursor: pointer;
  transition: background 0.2s, transform 0.2s; padding: 0;
}
.gallery-dot.is-active { background: white; transform: scale(1.4); }

.project-card-body {
  padding: 1.35rem 1.6rem 1.65rem;
  flex: 1;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.project-card-category {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-accent);
  gap: 0.35rem;
  width: fit-content;
}
.project-card-category::before {
  content: '';
  display: block;
  width: 12px; height: 1px;
  background: var(--color-accent);
}
.project-card-title {
  font-family: var(--font-heading);
  font-size: 1.05rem; font-weight: 700;
  color: var(--color-text);
  line-height: 1.25; letter-spacing: -0.01em;
  margin-top: 0.2rem;
}
.project-card-desc {
  font-size: 0.84rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}/* ══════════════════════════════════════════════
   SECTION AVATAR FLOAT — tussen secties, transparante PNG
══════════════════════════════════════════════ */


.section-avatar-float {
  position: relative;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 20;
}
.section-avatar-img {
  position: absolute;
  bottom: 20px;
  width: auto;
  height: 220px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.22));
  opacity: 0.88;
}
.section-avatar-float--left .section-avatar-img {
  left: clamp(1rem, 5vw, 5rem);
}
.section-avatar-float--right .section-avatar-img {
  right: clamp(1rem, 5vw, 5rem);
}/* Diensten-avatar niet tonen op mobiel */

@media (max-width: 768px) {
  .section-avatar-float--services {
    display: none !important;
  }
}
@media (max-width: 640px) {
  .section-avatar-img { height: 130px; }
}

/* Avatar variant animaties */
@keyframes avatarFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes avatarPoint {
  0%, 90%, 100% { transform: translateY(0) rotate(0deg); }
  45%            { transform: translateY(-4px) rotate(-3deg); }
}
@keyframes avatarWork {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%       { transform: translateY(-3px) scaleY(0.98); }
}
.section-avatar-img--idle     { animation: none; }
.section-avatar-img--pointing { animation: none; }
.section-avatar-img--working  { animation: none; }
.section-avatar-img--flipped  { transform: scaleX(-1); }/* ══════════════════════════════════════════════
   PROJECT POPOVER — hover beschrijving
══════════════════════════════════════════════ */


.proj-popover {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  max-width: 280px;
  padding: 1.15rem 1.35rem;
  border-radius: 16px;
  background: rgba(8, 12, 22, 0.90);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.40),
    0 0 0 1px rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity;
}
.proj-popover.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.proj-popover-cat {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.proj-popover-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: white;
  line-height: 1.3;
  display: block;
}
.proj-popover-desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.6;
  margin: 0;
}
.proj-popover-cta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-top: 0.25rem;
  letter-spacing: 0.02em;
}/* project gallery items zijn links */


.project-gallery-item {
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.about-avatar-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  animation: avatarDotPulse 2.5s ease-in-out infinite;
}
@keyframes avatarDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(74,222,128,0); }
}/* --- RECHTS: glassmorphism stats panel --- */


.about-stats-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.about-identity-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 99px;
  padding: 0.5rem 1.1rem 0.5rem 0.5rem;
  width: fit-content;
  backdrop-filter: blur(10px);
  transition: background 0.2s, border-color 0.2s;
}
.about-identity-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
}
.about-identity-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.about-identity-info {
  display: flex; flex-direction: column; gap: 0.08rem;
  font-size: 0.82rem;
}
.about-identity-info strong { color: white; font-weight: 700; }
.about-identity-info span { color: rgba(255,255,255,0.42); font-size: 0.75rem; }/* ==============================================
   PAGE HERO - alle inner pagina's
============================================== */


.page-hero {
  background: var(--color-primary);
  padding: calc(70px + var(--space-2xl)) 0 var(--space-xl);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 60% 0%,
    color-mix(in srgb, var(--color-accent) 14%, transparent) 0%,
    transparent 70%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-eyebrow {
  display: block;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 1rem;
}
.page-hero h1 { color: white; margin-bottom: 1rem; }
.page-hero-lead {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: rgba(255,255,255,0.52);
  max-width: 56ch; line-height: 1.7; margin: 0;
}/* ── Hero met gegenereerde achtergrondafbeelding (zoals diensten/projecten) ── *//* Dubbele class voor extra specificiteit: de basisregels (.page-hero /
   .quote-hero) staan verderop in dit bestand en resetten via de
   background-shorthand anders de size/position naar auto (= ingezoomd). */



.page-hero.page-hero--img,
.quote-hero.quote-hero--img {
  background-size: cover;
  background-position: right 20%;
}
.page-hero--img .page-hero-lead,
.quote-hero--img .quote-hero-sub {
  color: rgba(255,255,255,0.62);
}

/* Op deze twee pagina's liep de kop over de volle breedte door, tot in het
   deel waar de waas al bijna weg is en de foto fel wordt. Diensten en
   projecten hebben daar .dnt-hero__content voor; hier ontbrak zo'n
   begrenzing, waardoor de h1 op sommige breedtes tot 3,14:1 zakte. Zelfde
   kolombreedte als de andere paginakoppen houdt de tekst in het donker.
   Onder 820px ligt de waas over de volle breedte en is dit niet nodig. */
@media (min-width: 821px) {
  .page-hero--img h1,
  .page-hero--img .page-hero-lead,
  .quote-hero--img h1,
  .quote-hero--img .quote-hero-sub {
    max-width: clamp(380px, 52%, 620px);
  }
}/* ==============================================
   DIENSTEN PAGE — premium redesign
============================================== */


.diensten-section { padding: var(--space-2xl) 0; background: var(--color-bg); }/* ── Hero decoratieve elementen ── */


.services-hero { overflow: hidden; }
.services-hero-deco {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.services-hero-ring {
  position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  width: 480px; height: 480px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-accent) 16%, transparent);
  animation: floatA 9s ease-in-out infinite;
}
.services-hero-ring::before {
  content: '';
  position: absolute; inset: 48px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-accent) 9%, transparent);
}
.services-hero-dot {
  position: absolute; right: 16%; top: 28%;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent); opacity: 0.65;
  animation: floatB 6s ease-in-out infinite;
}/* ── Featured Service — groot blok ── */


.dienst-featured {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3.5rem;
  align-items: center;
  background: var(--color-primary);
  border-radius: var(--border-radius-xl, 24px);
  padding: 3.5rem 4rem;
  position: relative; overflow: hidden;
  margin-bottom: 1.25rem;
}
.dienst-featured::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 90% at 85% 50%,
    color-mix(in srgb, var(--color-accent) 16%, transparent) 0%,
    transparent 65%);
  pointer-events: none;
}
.dienst-featured::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.025)'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  pointer-events: none;
}
.dienst-featured-content { position: relative; z-index: 1; }
.dienst-featured-label {
  display: inline-flex; align-items: center;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  margin-bottom: 1.25rem;
}
.dienst-featured-title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 700;
  color: white;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 1rem;
}
.dienst-featured-desc {
  color: rgba(255,255,255,0.58);
  font-size: 1rem; line-height: 1.72;
  max-width: 52ch; margin: 0 0 2rem;
}
.dienst-featured-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.88rem; font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: var(--border-radius, 8px);
  transition: gap 0.28s cubic-bezier(0.16,1,0.3,1),
              background 0.25s,
              border-color 0.25s;
}
.dienst-featured-cta:hover {
  gap: 0.85rem;
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
}
.dienst-featured-visual {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
}
.dienst-featured-visual-inner {
  position: relative;
  width: 220px; height: 220px;
  display: flex; align-items: center; justify-content: center;
}
.dienst-featured-glow {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--color-accent) 28%, transparent) 0%,
    transparent 70%);
  filter: blur(28px);
  animation: floatA 8s ease-in-out infinite;
}
.dienst-featured-icon-large {
  font-size: 5rem; position: relative; z-index: 1;
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--color-accent) 45%, transparent));
  animation: floatB 9s ease-in-out infinite;
}/* ── Secundaire diensten — 2 col ── */


.diensten-secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.dienst-secondary-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border, rgba(0,0,0,0.07));
  border-radius: var(--border-radius-lg, 20px);
  padding: 2.25rem 2rem;
  display: flex; flex-direction: column; gap: 0.9rem;
  position: relative; overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.35s,
              border-color 0.25s;
}
.dienst-secondary-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .dienst-secondary-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    border-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
  .dienst-secondary-card:hover::after { transform: scaleX(1); }
}
.dienst-secondary-header {
  display: flex; align-items: flex-start; justify-content: space-between;
}
.dienst-secondary-num {
  font-size: 3.2rem; font-weight: 800;
  color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  line-height: 1;
  font-family: var(--font-heading);
  letter-spacing: -0.04em;
  user-select: none;
}/* ── Standaard kaartjes grid ── */


.diensten-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.dienst-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border, rgba(0,0,0,0.07));
  border-radius: var(--border-radius-lg, 20px);
  padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  transition: border-color 0.25s,
              transform 0.35s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.35s;
  position: relative; overflow: hidden;
}
.dienst-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-accent) 65%, transparent),
    transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .dienst-card:hover {
    border-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.1);
  }
  .dienst-card:hover::before { transform: scaleX(1); }
}/* ── Gedeeld: icoon + cta ── */


.dienst-card-icon {
  font-size: 1.6rem;
  width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-radius: var(--border-radius, 12px);
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .dienst-card:hover .dienst-card-icon,
  .dienst-secondary-card:hover .dienst-card-icon {
    transform: scale(1.12) rotate(-4deg);
  }
}
.dienst-card-title {
  font-size: 1.05rem; font-weight: 700;
  color: var(--color-text); margin: 0; line-height: 1.3;
}
.dienst-card-desc {
  font-size: 0.875rem; color: var(--color-text-muted);
  line-height: 1.65; margin: 0; flex: 1;
}
.dienst-card-cta {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.82rem; font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
  margin-top: 0.5rem;
  transition: gap 0.25s cubic-bezier(0.16,1,0.3,1), opacity 0.2s;
}
.dienst-card-cta:hover { gap: 0.65rem; opacity: 0.8; }/* ── Premium CTA sectie ── */


.diensten-cta {
  background: var(--color-primary);
  padding: var(--space-2xl) 0;
  position: relative; overflow: hidden;
}
.diensten-cta::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 120% at 0% 50%,
      color-mix(in srgb, var(--color-accent) 13%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 35% 70% at 100% 50%,
      color-mix(in srgb, var(--color-accent) 6%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.diensten-cta .container { position: relative; z-index: 1; }
.diensten-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding: 3rem 3.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--border-radius-xl, 24px);
  backdrop-filter: blur(12px);
}
.diensten-cta-eyebrow {
  display: block;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 0.65rem;
}
.diensten-cta-text h2 {
  color: white; margin: 0 0 0.65rem;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
}
.diensten-cta-text p {
  color: rgba(255,255,255,0.52);
  margin: 0; max-width: 46ch; font-size: 0.95rem; line-height: 1.65;
}
.diensten-cta-actions {
  display: flex; flex-direction: column; gap: 1rem;
  align-items: flex-start; flex-shrink: 0;
}
.diensten-cta-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  white-space: nowrap;
  transition: gap 0.28s cubic-bezier(0.16,1,0.3,1) !important;
}
.diensten-cta-btn:hover { gap: 0.9rem !important; }
.diensten-cta-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.875rem; font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, gap 0.25s cubic-bezier(0.16,1,0.3,1);
}
.diensten-cta-link:hover { color: rgba(255,255,255,0.88); gap: 0.65rem; }/* ── Hero — ghost getal + stat ── */


.projects-hero { overflow: hidden; }
.projects-hero-ghost {
  position: absolute; right: -2%; bottom: -20%;
  font-family: var(--font-heading);
  font-size: clamp(8rem, 20vw, 18rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  color: color-mix(in srgb, var(--color-accent) 7%, transparent);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.projects-hero-meta {
  display: flex; gap: 2rem;
  margin-top: 2rem; flex-wrap: wrap;
}
.projects-hero-stat {
  display: flex; align-items: baseline; gap: 0.4rem;
  font-size: 0.82rem; color: rgba(255,255,255,0.45);
}
.projects-hero-stat strong {
  font-family: var(--font-heading);
  font-size: 1.5rem; font-weight: 700;
  color: white; line-height: 1;
}/* ── Filter bar — dnt-tabs stijl ── */


.filter-bar {
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem;
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
  width: fit-content;
  margin: 0 auto;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s, background 0.18s;
}
.filter-tab--dark       { color: rgba(255,255,255,0.48); }
.filter-tab--dark:hover { color: rgba(255,255,255,0.82); }
.filter-tab--light       { color: rgba(0,0,0,0.45); }
.filter-tab--light:hover { color: rgba(0,0,0,0.78); }
.filter-tab.is-active {
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent);
}/* ── Grid — asymmetrisch met featured ── */


.projects-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}/* Featured = eerste kaart, spans 2 kolommen */


.project-card--featured {
  grid-column: span 2;
}
.project-card--featured .gallery {
  aspect-ratio: 16 / 9;
}/* ── Project card — image-first met expand accordion ── */


.projects-full-grid .project-card {
  position: relative;
  border-radius: var(--border-radius-lg, 20px);
  overflow: visible;            /* expand panel mag buiten de visual */
  cursor: pointer;
  background: transparent;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.4s cubic-bezier(0.16,1,0.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .projects-full-grid .project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 64px rgba(0,0,0,0.16);
  }
}
.projects-full-grid .project-card.is-hidden { display: none; }/* Visueel blok: eigen overflow + border-radius */


.project-card-visual {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-lg, 20px);
  background: var(--color-bg-alt);
  transition: border-radius 0.38s cubic-bezier(0.16,1,0.3,1);
}/* Als expand open: onderste hoeken wegsnijden voor naadloze aansluiting */

.project-card.is-expanded .project-card-visual {
  border-radius: var(--border-radius-lg, 20px) var(--border-radius-lg, 20px) 0 0;
}/* Gallery vult het visuele blok */


.projects-full-grid .gallery {
  aspect-ratio: 4 / 3;
  position: relative; overflow: hidden;
  background: var(--color-bg-alt);
}
.projects-full-grid .gallery-slide img {
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .projects-full-grid .project-card:hover .gallery-slide img {
    transform: scale(1.07);
  }
}/* Categorie badge — altijd zichtbaar linksboven */


.projects-full-grid .project-card-category {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 4;
  display: inline-flex; align-items: center;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: white;
  background: rgba(0,0,0,0.52);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 0.28rem 0.75rem;
  border-radius: 100px;
  transition: background 0.25s;
}
.projects-full-grid .project-card-category::before { display: none; }/* Hover overlay — schuift omhoog bij hover */


.project-card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.90) 0%,
    rgba(0,0,0,0.55) 55%,
    transparent 100%
  );
  padding: 2rem 1.75rem 1.5rem;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.16,1,0.3,1),
              opacity 0.32s cubic-bezier(0.16,1,0.3,1);
  z-index: 3;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .project-card:hover .project-card-overlay,
  .project-card.is-expanded .project-card-overlay {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}/* Titel in overlay */


.projects-full-grid .project-card-title {
  font-family: var(--font-heading);
  font-size: 1.05rem; font-weight: 700;
  color: white; line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}
.project-card--featured .project-card-title { font-size: 1.35rem; }/* Toggle knop — "Meer info" / "Sluiten" */


.project-card-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.8rem; font-weight: 700;
  color: var(--color-accent);
  background: none; border: none; cursor: pointer; padding: 0;
  transition: gap 0.25s cubic-bezier(0.16,1,0.3,1), opacity 0.2s;
}
.project-card-toggle:hover { gap: 0.62rem; opacity: 0.85; }
.toggle-chevron {
  flex-shrink: 0;
  transition: transform 0.38s cubic-bezier(0.16,1,0.3,1);
}
.project-card.is-expanded .toggle-chevron { transform: rotate(180deg); }/* Accordion expand panel */


.project-card-expand {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border, rgba(0,0,0,0.08));
  border-top: none;
  border-radius: 0 0 var(--border-radius-lg, 20px) var(--border-radius-lg, 20px);
  padding: 0 1.5rem;
  transition: max-height 0.42s cubic-bezier(0.16,1,0.3,1),
              opacity 0.3s cubic-bezier(0.16,1,0.3,1),
              padding 0.42s cubic-bezier(0.16,1,0.3,1);
}
.project-card.is-expanded .project-card-expand {
  max-height: 240px;
  opacity: 1;
  padding: 1.15rem 1.5rem 1.4rem;
}
.project-card-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}/* Touch devices: overlay altijd zichtbaar (geen hover) */


@media (hover: none) {
  .project-card-overlay {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.82) 0%,
      rgba(0,0,0,0.4) 60%,
      transparent 100%
    );
  }
}/* Lege staat */


.projects-empty {
  text-align: center; padding: 5rem 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 1.5rem;
}
.projects-empty p {
  color: var(--color-text-muted);
  font-size: 1.05rem; max-width: 40ch;
}/* ==============================================
   CONTACT PAGE — premium redesign
============================================== *//* ── Contact hero decoratieve variant ── */




.contact-hero { overflow: hidden; }
.contact-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.contact-hero-glow {
  position: absolute;
  width: 50vw; height: 50vw;
  top: -25%; right: -5%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--color-accent) 14%, transparent) 0%,
    transparent 65%);
  filter: blur(80px);
  border-radius: 50%;
}
.contact-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 65% 50%, black 20%, transparent 100%);
}/* Hero trust badges */


.contact-hero-badges {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-top: 1.75rem;
}
.contact-hero-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 99px;
  padding: 0.38rem 0.85rem;
  font-size: 0.78rem; font-weight: 600;
  color: rgba(255,255,255,0.75);
}
.contact-hero-badge svg { color: var(--color-accent); flex-shrink: 0; }/* ── Layout ── */


.contact-section { padding: var(--space-2xl) 0; background: var(--dark-bg); }
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
}/* ── Info kaart ── */


.contact-info-card {
  background: var(--color-bg-alt);
  border-radius: var(--border-radius-lg, 20px);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: 1.5rem;
  border: 1px solid var(--color-border, rgba(0,0,0,0.07));
  height: 100%;
  position: relative; overflow: hidden;
}/* Subtiele accentlijn bovenaan info card */

.contact-info-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-accent) 60%, transparent),
    transparent);
}/* ── Form wrapper ── */


.contact-form-wrapper {
  background: var(--color-bg-alt);
  border-radius: var(--border-radius-lg, 20px);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--color-border, rgba(0,0,0,0.07));
  height: 100%;
}
.contact-form-header { margin-bottom: 1.5rem; }/* ── Heading binnen kaarten (h3 ipv h2 voor proportie) ── */


.contact-card-heading {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.015em;
  margin: 0 0 0.4rem;
}
.contact-card-intro p,
.contact-form-header p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}
.contact-card-intro { display: flex; flex-direction: column; gap: 0.35rem; }/* ── Avatar blok ── */


.contact-avatar-block {
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: 1.25rem; gap: 0.5rem;
  border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.07));
  text-align: center;
}
.contact-avatar {
  height: 140px; width: auto;
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.14));
  animation: avatarFloat 4s ease-in-out infinite;
}
.contact-avatar-name { display: flex; flex-direction: column; gap: 0.2rem; }
.contact-avatar-name strong { font-size: 0.95rem; font-weight: 700; color: var(--color-text); }
.contact-avatar-name span { font-size: 0.8rem; color: var(--color-text-muted); }/* ── Contact info rijen ── */


.contact-info-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--border-radius, 12px);
  transition: background 0.2s;
}
.contact-info-item:hover {
  background: color-mix(in srgb, var(--color-accent) 5%, transparent);
}
.contact-info-icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--border-radius, 10px);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .contact-info-item:hover .contact-info-icon {
    background: color-mix(in srgb, var(--color-accent) 16%, transparent);
    transform: scale(1.08);
  }
}
.contact-info-detail { display: flex; flex-direction: column; gap: 0.2rem; }
.contact-info-detail strong {
  font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-text-muted);
  font-weight: 700;
}
.contact-info-detail a,
.contact-info-detail span {
  font-size: 0.95rem; color: var(--color-text);
  line-height: 1.4;
}
.contact-info-detail a:hover { color: var(--color-accent); }/* ── Submit knop ── */


.contact-submit-btn {
  gap: 0.6rem;
  transition: gap 0.28s cubic-bezier(0.16,1,0.3,1),
              transform 0.22s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.22s !important;
}
.contact-submit-btn:hover { gap: 0.9rem !important; }/* ==============================================
   QUOTE PAGE — Premium redesign
============================================== *//* Hero */




.quote-hero {
  background: var(--color-primary);
  padding: calc(70px + var(--space-xl)) 0 var(--space-xl);
  position: relative; overflow: hidden;
}
.quote-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.quote-hero-glow {
  position: absolute; border-radius: 50%; filter: blur(100px);
}
.quote-hero-glow--1 {
  width: 60vw; height: 60vw; top: -30%; right: -10%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--color-accent) 18%, transparent) 0%, transparent 65%);
}
.quote-hero-glow--2 {
  width: 40vw; height: 40vw; bottom: -20%; left: 5%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--color-accent) 8%, transparent) 0%, transparent 70%);
}
.quote-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 80% at 60% 50%, black 20%, transparent 100%);
}
.quote-hero-inner {
  position: relative; z-index: 1;
  max-width: 680px;
}
.quote-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  color: white; letter-spacing: -0.03em;
  line-height: 1.1; margin: 0.75rem 0 1rem;
  text-wrap: balance;
}
.quote-hero-sub {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: rgba(255,255,255,0.55);
  line-height: 1.7; margin-bottom: 1.75rem;
  max-width: 52ch;
}
.quote-trust-row {
  display: flex; flex-wrap: wrap; gap: 0.65rem;
}
.quote-trust-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 99px;
  padding: 0.38rem 0.85rem;
  font-size: 0.78rem; font-weight: 600;
  color: rgba(255,255,255,0.75);
}
.quote-trust-badge svg { color: var(--color-accent); flex-shrink: 0; }/* Layout */


.quote-section { padding: var(--space-2xl) 0; background: var(--dark-bg); }
.quote-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }/* Step indicator */


.quote-steps {
  display: flex; align-items: center; gap: 0;
  margin-bottom: 1.75rem;
}
.quote-step {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted);
}
.quote-step--active { color: var(--color-accent); }
.quote-step-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-bg-alt);
  border: 2px solid var(--color-border, rgba(0,0,0,0.1));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.quote-step--active .quote-step-num {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}
.quote-step-divider {
  flex: 1; height: 1px;
  background: var(--color-border, rgba(0,0,0,0.1));
  margin: 0 0.75rem;
}/* Form card */


.quote-form-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border, rgba(0,0,0,0.07));
  border-radius: 24px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}/* Submit button — altijd goud + donkere tekst */


.btn--quote-submit {
  margin-top: 1.25rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-accent) 100%, #fff 10%) 0%,
    var(--color-accent) 100%);
  color: var(--color-primary) !important;
  border: none;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-accent) 50%, transparent),
    0 8px 28px color-mix(in srgb, var(--color-accent) 40%, transparent);
  font-weight: 800;
  padding: 1rem 2.5rem;
  font-size: 1rem;
}
@media (hover: hover) and (pointer: fine) {
  .btn--quote-submit:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-accent) 70%, transparent),
      0 16px 40px color-mix(in srgb, var(--color-accent) 55%, transparent);
    filter: brightness(1.05);
  }
}
.form-submit-note {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.76rem; color: var(--color-text-muted);
  margin: 0; margin-top: 0.75rem;
}
.form-submit-note svg { flex-shrink: 0; color: var(--color-accent); }/* Sidebar */


.quote-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: calc(70px + 2rem); }

.quote-sidebar-card {
  border-radius: 20px;
  padding: 1.75rem;
}
.quote-sidebar-card--glass {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border, rgba(0,0,0,0.07));
}
.quote-sidebar-card--dark {
  background: var(--dark-bg);
  display: flex; flex-direction: column; gap: 0.85rem;
}
.quote-sidebar-card-header { margin-bottom: 1.1rem; }
.quote-sidebar-label {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--color-accent);
}
.quote-phone-icon {
  width: 44px; height: 44px; border-radius: 14px;
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.quote-sidebar-card--dark h3 { color: white; font-size: 1.05rem; margin: 0; }
.quote-sidebar-card--dark p { color: rgba(255,255,255,0.52); font-size: 0.85rem; margin: 0; }

.why-us-list { display: flex; flex-direction: column; gap: 0.75rem; list-style: none; padding: 0; margin: 0; }
.why-us-item { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9rem; color: var(--color-text-muted); }
.why-us-check {
  color: var(--color-accent); flex-shrink: 0; font-weight: 700;
  width: 20px; height: 20px;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-top: 0.1rem;
}

.phone-cta-number {
  display: block; font-family: var(--font-heading);
  font-size: 1.6rem; font-weight: 800;
  color: white; letter-spacing: -0.02em; text-decoration: none; transition: color 0.2s;
}
.phone-cta-number:hover { color: var(--color-accent); }/* Mini avatar in sidebar */


.quote-avatar-block {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  padding: 1.25rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border, rgba(0,0,0,0.07));
  border-radius: 20px;
  text-align: center;
}
.quote-avatar-img {
  height: 120px; width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.12));
}
.quote-avatar-caption {
  font-size: 0.78rem; font-weight: 600;
  color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center;
}/* ==============================================
   FORMULIEREN — quote + contact forms
============================================== */


.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.03em;
  margin-top: 0.85rem;
}
.form-control {
  width: 100%;
  padding: 0.85rem 1.1rem;
  font-family: var(--font-body);
  font-size: 1rem; /* iOS fix: prevents auto-zoom on focus */
  color: var(--color-text);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border, rgba(0,0,0,0.12));
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.form-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.form-control:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border, rgba(0,0,0,0.12)));
}
textarea.form-control { resize: vertical; min-height: 130px; line-height: 1.6; }
select.form-control { cursor: pointer; }
.form-control::placeholder { color: var(--color-text-muted); opacity: 0.6; }
.form-submit { margin-top: 0.5rem; }
.honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; height: 0; overflow: hidden; }/* Footer — originele builder layout */


.site-footer {
  background: var(--color-primary);
  color: rgba(255,255,255,0.72);
  padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(1.25rem, 2.5vw, 2rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}

.footer-brand-col > a {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.2rem;
}

.footer-brand-col img {
  width: auto;
  height: 40px;
  object-fit: contain;
  background: transparent;
}

.footer-brand-col span {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
}

.footer-tagline {
  max-width: 28rem;
  color: rgba(255,255,255,0.62);
  font-size: 0.98rem;
  line-height: 1.7;
}

.footer-col h4 {
  margin: 0 0 1rem;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-col ul {
  display: grid;
  gap: 0.68rem;
}

.footer-col a,
.footer-col span {
  display: block;
  color: rgba(255,255,255,0.62);
  font-style: normal;
  font-size: 0.94rem;
  line-height: 1.5;
  transition: color 0.18s ease;
}

.footer-col a:hover {
  color: #fff;
}

.footer-social {
  display: grid;
  gap: 0.72rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.footer-social svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--color-accent);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.48);
  font-size: 0.88rem;
}

.footer-bottom a {
  color: var(--color-accent);
}

.footer-bottom a:hover {
  color: #fff;
}

@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
  }
}/* ═══════════════════════════════════════════════
   RESPONSIVE — Tablet (max 1024px)
═══════════════════════════════════════════════ */


@media (max-width: 1024px) {
  h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
  h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }/* Tablet: keep FAQ inline links comfortably tappable */

  
  .faq-blue__header a,
  .faq-blue__answer a,
  .faq-blue__contact a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .hero-inner { grid-template-columns: 1fr; }
  .hero { padding-bottom: 0; }
  .hero-visual { display: none; }

  .about-grid,
  .over-grid { grid-template-columns: 1fr; }
  .about-metrics { grid-template-columns: repeat(2, 1fr); }
  .about-avatar-showcase { min-height: 33rem; }
  .about-avatar-note { width: min(15rem, 48%); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer-brand-col { grid-column: 1 / -1; }

  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .projects-full-grid { grid-template-columns: repeat(2, 1fr); }
  .project-card--featured { grid-column: span 2; }
  .project-card--featured .gallery { aspect-ratio: 16/9; }
  .projects-hero-ghost { font-size: clamp(6rem, 15vw, 12rem); }

  .quote-layout { grid-template-columns: 1fr; }

  .diensten-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .dienst-featured {
    grid-template-columns: 1fr;
    padding: 2.5rem 2rem;
    gap: 2rem;
  }
  .dienst-featured-visual { justify-content: flex-start; }
  .dienst-featured-visual-inner { width: 160px; height: 160px; }
  .dienst-featured-icon-large { font-size: 3.5rem; }
  .diensten-cta-inner { flex-direction: column; align-items: flex-start; padding: 2.5rem 2rem; gap: 2rem; }/* Contact — stack op tablet */

  
  .contact-layout { grid-template-columns: 1fr; }
  .contact-info-card, .contact-form-wrapper { height: auto; }
  .contact-hero-grid { display: none; }/* Quote — sidebar niet sticky op tablet */

  
  .quote-sidebar { position: static; }
}/* ═══════════════════════════════════════════════
   RESPONSIVE — Mobile (max 768px)
═══════════════════════════════════════════════ */


@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-drawer { display: flex; }/* Mobile tap targets: keep key actions >= 44px high */

  
  .skip-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: 0.6rem;
  }
  .nav-logo,
  .nav-toggle{
    min-height: 44px;
  }
  .nav-toggle {
    width: 44px;
    height: 44px;
  }
  .svc-b__more,
  .projects-premium__link,
  .footer-col a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
  }
  .footer-bottom a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
  }/* Inner pages: tabs + links should remain finger-friendly */

  
  .dnt-tab,
  .prj-vis .dnt-tab,
  .prj-vis__link,
  .phone-cta-number,
  .contact-info-detail a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav-drawer__help-socials a {
    width: 44px;
    height: 44px;
  }/* Hero bg: mascot rechts, inhoud links — focus op 68% horizontaal */

  
  .hero-generated-bg{ object-position: 68% center; }/* Services carousel mobiel -- center snap met peek */

  
  .carousel-track { padding: 0.5rem 10vw 1.5rem; }
  .service-card { flex: 0 0 76vw; scroll-snap-align: center; }

  .form-row { grid-template-columns: 1fr; }

  /* Footer compacter op mobiel: 2 kolommen naast elkaar, minder witruimte */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.4rem; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-col h4 { margin-bottom: 0.7rem; }
  .footer-col ul { gap: 0.35rem; }
  .footer-col a { min-height: 0; min-width: 0; padding-block: 0.25rem; }
  .footer-social { gap: 0.35rem; }

  .projects-grid { grid-template-columns: 1fr; }
  .projects-full-grid { grid-template-columns: 1fr; }
  .project-card--featured { grid-column: auto; }
  .project-card--featured .gallery { aspect-ratio: 4/3; }
  .projects-hero-ghost { display: none; }

  .values-grid { grid-template-columns: 1fr; }
  .diensten-group-items { grid-template-columns: 1fr; }
  .diensten-cards-grid { grid-template-columns: 1fr; }
  .diensten-secondary { grid-template-columns: 1fr; }
  .dienst-featured { grid-template-columns: 1fr; padding: 2rem 1.5rem; }
  .services-hero-ring { display: none; }
  .diensten-cta-inner { padding: 2rem 1.5rem; gap: 1.5rem; }
  .diensten-cta-actions { width: 100%; }
  .diensten-cta-btn { width: 100%; justify-content: center; }
  .filter-bar { gap: 0.4rem; }
  .filter-tab { padding: 0.45rem 1rem; font-size: 0.78rem; }/* Contact mobiel */

  
  .contact-hero-badges { gap: 0.4rem; }
  .contact-hero-badge { font-size: 0.73rem; padding: 0.3rem 0.7rem; }
  .contact-info-item { padding: 0.65rem 0.75rem; }/* Floating avatars — kleiner op mobiel */

  
  .section-avatar-float { display: block; }
  .section-avatar-img { height: 110px; opacity: 0.7; }
  .section-avatar-float--left .section-avatar-img { left: 0.5rem; }
  .section-avatar-float--right .section-avatar-img { right: 0.5rem; }/* Quote pagina mobiel */

  
  .quote-hero { padding: 5rem 0 3rem; }
  .quote-hero-title { font-size: clamp(1.8rem, 8vw, 2.8rem); }
  .quote-trust-row { flex-wrap: wrap; gap: 0.5rem; }
  .quote-steps { gap: 0.4rem; overflow-x: auto; padding-bottom: 0.25rem; }
  .quote-step-label { font-size: 0.7rem; }
  .quote-section { padding: var(--space-xl) 0; }
  .quote-sidebar { position: static; }
}/* Home mobile swipe: toon 1 kaart per keer voor actieve varianten */


@media (max-width: 768px) {
  [data-sw-section="services"] .container,
  [data-sw-section="projects"] .container,
  [data-sw-section="reviews"] .container {
    padding-left: clamp(1.05rem, 4.6vw, 1.35rem);
    padding-right: clamp(0.78rem, 3vw, 1rem);
  }
  [data-sw-section="services"] .svc-cards,
  [data-sw-section="reviews"] .rvw__grid{
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.9rem;
    padding: 0 0.2rem 0.45rem 0.75rem;
    margin: 0;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
  }
  [data-sw-section="services"] .svc-cards::-webkit-scrollbar,
  [data-sw-section="reviews"] .rvw__grid::-webkit-scrollbar{
    display: none;
  }
  [data-sw-section="services"] .svc-card,
  [data-sw-section="reviews"] .rvw__card {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
  }

  [data-sw-section="reviews"] .rvw__stage {
    padding: 0;
  }

  [data-sw-section="reviews"] .rvw__card p {
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  .sw-swipe-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.62rem;
    margin-bottom: 0.1rem;
    min-height: 1.15rem;
  }

  .sw-swipe-dot {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid color-mix(in srgb, #ffffff 55%, rgba(0,0,0,0.2));
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary, #10151d) 34%, #ffffff 66%);
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease, width 0.18s ease;
    padding: 0;
    opacity: 0.95;
  }

  .sw-swipe-dot.is-active {
    width: 1.28rem;
    background: color-mix(in srgb, var(--color-accent) 86%, white 14%);
    transform: scale(1.02);
  }

  .dnt-tabs,
  .prj-vis .dnt-tabs{
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    justify-content: flex-start;
    gap: 0.38rem;
    padding: 0.32rem;
    border-radius: 13px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .dnt-tab,
  .prj-vis .dnt-tab{
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0.62rem 0.95rem;
    font-size: 0.82rem;
    border-radius: 10px;
    scroll-snap-align: start;
  }
}

@media (max-width: 480px) {/* Quote stap-indicator: verberg dividers, items wrappen */

  
  .quote-step-divider { display: none; }
  .quote-steps { flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
  .quote-step-num { width: 26px; height: 26px; font-size: 0.75rem; }
  .quote-trust-row { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .quote-trust-badge { font-size: 0.75rem; }
  .phone-cta-number { font-size: 1.3rem; }
}/* ==============================================
   MOBILE HERO — vaste stijl (niet kiesbaar)
============================================== */


.hero-mobile-one {
  display: none;
}

@media (max-width: 767px) {

  .hero-mobile-one + [data-sw-section="hero"] {
    display: none !important;
  }

  /* Eén doorlopende sectie: fotozone bovenin (__visual) vloeit via de shade
     over in dezelfde donkere achtergrond waar diensten-teaser en actiebalk
     op staan — geen aparte "blokken" na elkaar. min-height:100svh + de foto
     op flex:1 zorgt dat de hele sectie altijd precies één scherm vult, op elke
     toestelhoogte, zonder te scrollen en zonder korter dan het scherm te zijn. */
  .hero-mobile-one {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 100svh;
    background: rgb(9, 12, 16);
    color: #fff;
    /* De vaste WhatsApp-bubbel is 50px met 1.25rem inspringing. Door die
       hoogte hier als onderruimte vrij te houden, zweeft de bubbel over de
       donkere onderrand in plaats van over de knoppen. */
    padding-bottom: calc(1.25rem + 50px + 0.65rem);
  }

  .hero-mobile-one__visual {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 260px;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(5rem, 16vh, 7.25rem) 0 clamp(1.5rem, 4vh, 2.25rem);
    overflow: hidden;
  }

  /* Full-bleed achtergrondfoto — geen losse kader-card */
  .hero-mobile-one__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  /* Stond op 68%: dan valt het logo op de rug van de man precies achter
     "zonder gedoe" en vechten twee dingen om dezelfde plek. Op 58% staat
     hij ernaast — het merk blijft leesbaar, de kop staat op een rustig
     vlak. */
  .hero-mobile-one__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 28%;
    filter: saturate(1.06) contrast(1.03);
  }

  /* Het verloop liep op percentages van de fotozone. Die zone is op een
     korte telefoon veel lager, waardoor het donkere deel onder de kop
     vandaan schoof: op 320x568 haalde de kop nog maar 2,73:1 tegen de
     foto. Nu zijn de stops in pixels vanaf de ónderkant gemeten, precies
     waar de tekst staat, dus het donkere vlak ligt op elke toestelhoogte
     op dezelfde plek onder de tekst. De laatste stop houdt de bovenkant
     donker genoeg voor logo en hamburgerknop. */
  .hero-mobile-one__shade {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(90% 46% at 82% 0%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 55%),
      linear-gradient(to top,
        rgba(6, 9, 13, 0.90) 0,
        rgba(6, 9, 13, 0.82) 150px,
        rgba(6, 9, 13, 0.56) 250px,
        rgba(6, 9, 13, 0.20) 330px,
        rgba(6, 9, 13, 0.40) 100%);
  }

  .hero-mobile-one__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }

  /* Editorial serif — bewuste uitzondering op --font-heading (Archivo) voor
     een verfijnd, minder "AI-template" hero-moment. Pairt met DM Sans body. */
  /* De ondergrens stond op 2.7rem; op een 320px-toestel liep de kop
     daarmee over drie regels van samen 136px, terwijl de hele sectie in
     568px moet passen. 2.3rem houdt dezelfde verhouding maar kost een
     regel minder ruimte waar die het krapst is. */
  .hero-mobile-one__title {
    margin: 0;
    max-width: min(10ch, 90%);
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(2.3rem, 12.5vw, 3.6rem);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  }

  .hero-mobile-one__title em {
    font-style: normal;
    color: var(--color-accent);
  }

  .hero-mobile-one__dot {
    color: var(--color-accent);
  }

  /* 78% breed maakte hier op 320px vier regels van. Met 92% past dezelfde
     zin in twee regels en blijft de regellengte ruim onder de 30 tekens
     die je voor comfortabel lezen wilt. */
  .hero-mobile-one__sub {
    margin: 0;
    max-width: min(30ch, 92%);
    font-size: clamp(0.95rem, 4vw, 1.1rem);
    line-height: 1.5;
    color: rgba(233, 238, 244, 0.92);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
  }

  /* Actiebalk onder de diensten-cards.

     Stond eerder op padding-right: 5.25rem om de vaste WhatsApp-bubbel te
     ontwijken. Dat maakte de rij zichtbaar scheef én kneep de knoppen zo
     ver samen dat "Vraag offerte aan" op 320px afkapte. De bubbel wordt nu
     ontweken met ruimte ónder de rij (padding-bottom op .hero-mobile-one),
     zodat de knoppen zelf de volle breedte houden. */
  .hm-actions {
    display: flex;
    gap: 0.6rem;
    padding: 0 clamp(1.1rem, 5vw, 1.6rem);
    margin-top: 0.85rem;
  }

  .hm-actions__btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 0.55rem;
    border-radius: 0.9rem;
    font-size: clamp(0.78rem, 3.4vw, 0.9rem);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.003em;
    text-align: center;
    line-height: 1.15;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, border-color 0.2s ease;
  }


  .hm-actions__btn:active {
    transform: translateY(1px) scale(0.98);
  }

  .hm-actions__btn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
  }

  .hm-actions__btn--primary {
    background: var(--color-accent);
    color: var(--color-primary);
    box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--color-accent) 65%, transparent);
  }

  .hm-actions__btn--secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .hm-actions__btn--secondary:active {
    background: rgba(255, 255, 255, 0.12);
  }

}

@media (min-width: 768px) {
  .hero-mobile-one {
    display: none !important;
  }
}

/* ── Mobiele diensten-teaser: 3 fotokaarten direct onder de hero ── */
.hm-svc { display: none; }
.hm-proof { display: none; }

@media (max-width: 767px) {
  .hm-svc {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.7rem;
    padding: 0 clamp(1.1rem, 5vw, 1.6rem);
  }

  /* 3/4 gaf op 320px een kaart van 85x114 waar een icoon, een pijl, een
     kop én een onderregel in moesten. Vierkant is korter, laat de foto
     beter zien en maakt ruimte in een sectie die precies één scherm hoog
     moet blijven. */
  .hm-svc__card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1 / 1;
    border-radius: 1rem;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    display: block;
  }

  .hm-svc__card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
  }

  .hm-svc__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6,9,13,0.05) 0%, rgba(6,9,13,0.35) 55%, rgba(6,9,13,0.88) 100%);
  }

  /* Icoonbadge, pijlbadge en onderregel gaan uit. In een kaart van 85px
     breed stonden vier dingen tegelijk om aandacht te vragen, en op 320px
     kapte "Badkamers" af terwijl "Stijlvol & functioneel" over twee regels
     buiten de kaart liep. Wat overblijft is wat de bezoeker nodig heeft:
     een foto en één woord. De markup blijft staan, dus terugzetten is
     één regel CSS. */
  .hm-svc__icon,
  .hm-svc__arrow,
  .hm-svc__body small {
    display: none;
  }

  .hm-svc__body {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.7rem;
    display: block;
    text-align: center;
  }

  .hm-svc__body strong {
    font-size: clamp(0.88rem, 3.6vw, 1rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    letter-spacing: 0.002em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
  }

  /* De glazen pijlbadge rechtsboven is vervallen (zie de hide-regel
     hierboven). Dat een kaart aantikbaar is, blijkt nu uit de kaart zelf:
     hij zakt in bij aanraken en het accent licht op langs de rand. */
  .hm-svc__card {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s ease;
  }

  .hm-svc__card:active {
    transform: scale(0.975);
    box-shadow: inset 0 0 0 2px var(--color-accent);
  }

  /* ── Proof + WhatsApp-balk ── */
  /* Eén compacte, gecentreerde balk: avatars + sterren + cijfer + projecten */
  .hm-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.1rem clamp(1.1rem, 5vw, 1.6rem) 0;
    padding: 0.8rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: color-mix(in srgb, var(--color-primary) 92%, black);
    font-size: 0.82rem;
    color: rgba(233, 238, 244, 0.85);
  }

  .hm-proof__avatars {
    display: flex;
    flex-shrink: 0;
  }

  .hm-proof__avatars img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--color-primary);
  }

  .hm-proof__avatars img + img {
    margin-left: -8px;
  }

  .hm-proof__stars {
    color: var(--color-accent);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
  }

  .hm-proof strong {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
  }

  .hm-proof__divider {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
  }
}

@media (min-width: 768px) {
  .hm-svc,
  .hm-proof {
    display: none !important;
  }
}

/* ==============================================
   PREFERS-REDUCED-MOTION
============================================== */


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }/* Snap positional/scale motion instantly, but keep opacity/color transitions
     running at their authored speed — they aid comprehension of state changes. */
  
  *, *::before, *::after {
    transition-property: opacity, color, background, background-color, border-color, box-shadow, filter !important;
  }
  .reveal { opacity: 1; transform: none; }
  .section-avatar-img,
  .contact-avatar{ animation: none !important; transform: none !important; }
}/* ══════════════════════════════════════════════
   MASCOT BREAK — statisch tussen secties
══════════════════════════════════════════════ */


.mascot-break {
  padding: 1.5rem 0;
  position: relative;
  overflow: visible;
}

.mascot-break-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.2rem);
  max-width: 780px;
  padding: 1.45rem 1.45rem 1.1rem;
  border-radius: 1.75rem;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.96) 0%,
      rgba(247,249,253,0.92) 100%);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow:
    0 24px 60px rgba(19, 29, 46, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.88);
}
.mascot-break-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--color-accent) 8%, transparent) 0%,
      transparent 38%,
      transparent 100%);
  pointer-events: none;
}

.mascot-break--right .mascot-break-inner {
  flex-direction: row-reverse;
  margin-left: auto;
}

.mascot-break-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 30rem;
}
.mascot-break-kicker {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.mascot-break-title {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0;
}
.mascot-break-copy {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--color-text-muted);
}

.mascot-break-img {
  position: relative;
  z-index: 1;
  width: auto;
  height: 220px;
  object-fit: contain;
  object-position: bottom center;
  flex-shrink: 0;
  filter: drop-shadow(0 22px 34px rgba(9,15,26,0.18));
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1),
              filter 0.45s ease;
}

@media (hover: hover) and (pointer: fine) {
  .mascot-break-inner:hover .mascot-break-img {
    transform: translateY(-8px);
    filter: drop-shadow(0 26px 44px rgba(9,15,26,0.22));
  }
}

@media (max-width: 768px) {
  .mascot-break-inner {
    padding: 1.25rem;
    border-radius: 1.35rem;
    flex-direction: column;
    align-items: flex-start;
  }
  .mascot-break--right .mascot-break-inner { flex-direction: column; }
  .mascot-break-img { height: 150px; }
  .mascot-break-copy { font-size: 0.88rem; }
}/* ══════════════════════════════════════════════
   WHATSAPP CHAT KNOP
══════════════════════════════════════════════ */


.whatsapp-float {
  position: fixed;
  bottom: clamp(1.6rem, 2.5vw, 2.6rem);
  right: clamp(1.4rem, 2.5vw, 2.5rem);
  z-index: 9000;
  width: clamp(58px, 5vw, 72px);
  height: clamp(58px, 5vw, 72px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,0.28), transparent 28%),
    linear-gradient(145deg, #2eea72, #18c75d);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 18px 46px rgba(37,211,102,0.42), 0 0 0 8px rgba(37,211,102,0.08), 0 4px 12px rgba(0,0,0,0.22);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.25s ease;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp-float:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 24px 62px rgba(37,211,102,0.55), 0 0 0 10px rgba(37,211,102,0.1), 0 4px 12px rgba(0,0,0,0.18);
  }
}

@media (max-width: 768px) {
  .whatsapp-float { bottom: 1.25rem; right: 1.25rem; width: 50px; height: 50px; }
}/* ══════════════════════════════════════════════
   PROJECTS GALLERY — Editorial homepage grid
══════════════════════════════════════════════ */


.projects-gallery {
  display: grid;
  grid-auto-rows: 280px;
  gap: 0.5rem;
  margin-top: var(--space-lg);
  grid-template-columns: 2fr 1fr 1fr; /* default = 5 items */
}
.projects-gallery--1 { grid-template-columns: 1fr; grid-auto-rows: 420px; }
.projects-gallery--2 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 340px; }
.projects-gallery--3 { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; }
.projects-gallery--4 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 280px; }
.projects-gallery--5 { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 280px; }

.project-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  background: var(--color-surface);
}

.project-gallery-item--large {
  grid-row: span 2;
}

.project-gallery-img {
  width: 100%; height: 100%;
  position: absolute; inset: 0;
}

.project-gallery-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
}

@media (hover: hover) and (pointer: fine) {
  .project-gallery-item:hover .project-gallery-img img {
    transform: scale(1.06);
  }
}

.gallery-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-accent) 15%, var(--color-primary)) 0%,
    var(--color-primary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-family: var(--font-heading);
  font-weight: 900;
  color: rgba(255,255,255,0.15);
}/* Overlay — schuift omhoog op hover */


.project-gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.3) 50%,
    transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 1.15rem;
  transition: background 0.35s ease;
}

.project-gallery-item:hover .project-gallery-overlay {
  background: linear-gradient(to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.5) 60%,
    rgba(0,0,0,0.1) 100%);
}

.project-gallery-num {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--color-accent) 80%, transparent);
  align-self: flex-start;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
}

@media (hover: hover) and (pointer: fine) {
  .project-gallery-item:hover .project-gallery-num {
    opacity: 1;
    transform: translateY(0);
  }
}

.project-gallery-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transform: translateY(8px);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}

@media (hover: hover) and (pointer: fine) {
  .project-gallery-item:hover .project-gallery-info {
    transform: translateY(0);
  }
}

.project-gallery-cat {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.project-gallery-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: white;
  line-height: 1.25;
  margin: 0;
}

.project-gallery-item--large .project-gallery-title {
  font-size: 1.3rem;
}/* Accent border flash op hover */


.project-gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--color-accent);
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.project-gallery-item:hover::after {
  opacity: 0.6;
}

@media (max-width: 1024px) {
  .projects-gallery { grid-template-columns: 2fr 1fr; grid-auto-rows: 220px; }
  .project-gallery-item:nth-child(n+4) { display: none; }
}

@media (max-width: 640px) {
  .projects-gallery { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .project-gallery-item--large { grid-row: span 1; }
  .project-gallery-item:nth-child(n+4) { display: none; }
  .diensten-cards-grid { grid-template-columns: 1fr; }
}/* Premium recent projects */


.projects-premium {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  min-height: 760px;
  display: flex;
  align-items: center;
  padding: clamp(1.8rem, 3vh, 2.8rem) 0;
  /* Volgt de dark-bg picker; donkere randen via color-mix voor dezelfde diepte */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--dark-bg) 55%, #000) 0%,
      var(--dark-bg) 46%,
      color-mix(in srgb, var(--dark-bg) 55%, #000) 100%);
  color: #fff;
}

.projects-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(120deg, rgba(201,166,93,0.10) 0%, transparent 34%, transparent 68%, rgba(201,166,93,0.05) 100%);
  background-size: 110px 110px, 110px 110px, auto;
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  opacity: 0.42;
}

.projects-premium::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.24) 0%, transparent 20%, transparent 74%, rgba(0,0,0,0.34) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.28) 0%, transparent 24%, transparent 76%, rgba(0,0,0,0.34) 100%);
}

.projects-premium__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.projects-premium__header {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.74fr);
  align-items: start;
  gap: clamp(2rem, 7vw, 7rem);
  margin-bottom: clamp(1.5rem, 3vh, 2.4rem);
}

.projects-premium__badge,
.projects-premium__all,
.projects-premium__link {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.projects-premium__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: clamp(0.85rem, 1.6vw, 1.25rem);
  color: var(--color-accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
}

.projects-premium__badge i {
  display: block;
  width: 2.6rem;
  height: 1px;
  background: color-mix(in srgb, var(--color-accent) 55%, transparent);
}

.projects-premium__title h2 {
  max-width: none;
  margin: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 4vw, 3.9rem);
  font-weight: 920;
  line-height: 1.0;
  letter-spacing: -0.01em;
}

.projects-premium__title h2 em {
  display: block;
  margin-top: 0.08em;
  color: var(--color-accent);
  font-style: normal;
}/* Gouden swoosh onder de accentregel */


.projects-premium__title h2 em::after {
  content: "";
  display: block;
  width: min(72%, 15rem);
  height: 0.55rem;
  margin-top: 0.18em;
  margin-left: 26%;
  border-bottom: 3px solid var(--color-accent);
  border-radius: 50%;
  transform: rotate(-1deg);
}/* USP-rij onder de headline */


.projects-premium__usps {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: clamp(1.2rem, 2.4vh, 1.9rem) 0 0;
  padding: 0;
  list-style: none;
}

.projects-premium__usps li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  padding-right: clamp(0.9rem, 1.6vw, 1.6rem);
  margin-right: clamp(0.9rem, 1.6vw, 1.6rem);
  border-right: 1px solid rgba(255,255,255,0.12);
}

.projects-premium__usps li:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: 0;
}

.projects-premium__usps svg {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-accent);
}

.projects-premium__usps span {
  max-width: 10ch;
  color: rgba(255,255,255,0.86);
  font-family: var(--font-heading);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.45;
}

.projects-premium__intro {
  padding-bottom: 0.35rem;
}

.projects-premium__intro p {
  max-width: 42ch;
  margin: 0 0 1.25rem;
  color: rgba(255,255,255,0.62);
  font-size: clamp(0.92rem, 1.05vw, 1.02rem);
  line-height: 1.55;
}

.projects-premium__all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-height: 3.15rem;
  padding: 0 1.55rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 76%, transparent);
  border-radius: 999px;
  background: rgba(7,9,11,0.52);
  color: color-mix(in srgb, var(--color-accent) 92%, white);
  font-size: 0.82rem;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 20px 52px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}

@media (hover: hover) and (pointer: fine) {
  .projects-premium__all:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--color-accent) 96%, white);
    background: rgba(201,166,93,0.10);
    box-shadow: 0 24px 70px rgba(0,0,0,0.36), 0 0 34px color-mix(in srgb, var(--color-accent) 16%, transparent);
  }
}

.projects-premium__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.25vw, 1.18rem);
  align-items: stretch;
}

.projects-premium__card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 0.95rem;
  background: linear-gradient(180deg, rgba(20,23,25,0.96) 0%, rgba(9,11,13,0.98) 100%);
  box-shadow: 0 26px 70px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.045);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.34s ease, box-shadow 0.34s ease;
}

.projects-premium__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 34%, transparent 72%, rgba(201,166,93,0.08));
  opacity: 0;
  transition: opacity 0.34s ease;
}

@media (hover: hover) and (pointer: fine) {
  .projects-premium__card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--color-accent) 42%, rgba(255,255,255,0.1));
    box-shadow: 0 34px 86px rgba(0,0,0,0.44), 0 0 36px color-mix(in srgb, var(--color-accent) 11%, transparent);
  }
}

.projects-premium__card:hover::after {
  opacity: 1;
}

.projects-premium__media {
  position: relative;
  height: clamp(11rem, 21vh, 14.5rem);
  flex: 0 0 auto;
  overflow: hidden;
  background: #121416;
}

.projects-premium__media img,
.projects-premium__media .gallery-placeholder {
  width: 100%;
  height: 100%;
}

.projects-premium__media img {
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(1.08) brightness(0.88);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), filter 0.55s ease;
}

.projects-premium__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(5,7,9,0.82) 100%);
}

@media (hover: hover) and (pointer: fine) {
  .projects-premium__card:hover .projects-premium__media img {
    transform: scale(1.045);
    filter: saturate(1) contrast(1.08) brightness(0.96);
  }
}/* Nummer-badge half over de onderrand van de foto */


.projects-premium__num {
  position: absolute;
  left: 1.05rem;
  bottom: -1.25rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 56%, transparent);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(20,21,20,0.96), rgba(8,9,10,0.99));
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  box-shadow: 0 14px 30px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08);
}

.projects-premium__body {
  position: relative;
  z-index: 1;
  min-height: 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: 1.65rem 1.12rem 1.05rem;
}

.projects-premium__cat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.48rem;
  color: color-mix(in srgb, var(--color-accent) 92%, white);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.projects-premium__body h3 {
  margin: 0 0 0.48rem;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.02rem, 1.15vw, 1.18rem);
  font-weight: 820;
  line-height: 1.18;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.projects-premium__body p {
  margin: 0;
  color: rgba(255,255,255,0.56);
  font-size: clamp(0.82rem, 0.92vw, 0.9rem);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.projects-premium__link {
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
  margin-top: 0;
  padding-top: 0.95rem;
  color: color-mix(in srgb, var(--color-accent) 90%, white);
  font-size: 0.76rem;
  font-weight: 850;
  text-decoration: none;
  transition: gap 0.22s ease, color 0.22s ease;
}

.projects-premium__link:hover {
  gap: 0.8rem;
  color: #fff;
}

.projects-premium__cat svg {
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  color: var(--color-accent);
}/* Decoratieve paginatie-indicator onder de grid */


.projects-premium__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: clamp(1.3rem, 2.6vh, 2.1rem);
}

.projects-premium__dots span {
  display: block;
  width: 1.7rem;
  height: 0.42rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
}

.projects-premium__dots span.is-on {
  background: color-mix(in srgb, var(--color-accent) 78%, transparent);
}

.projects-premium__dots i {
  display: block;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
}

.projects-premium__trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(1.6rem, 2.6vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--color-accent) 24%, rgba(255,255,255,0.12));
  border-radius: 0.9rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  box-shadow: 0 24px 72px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(14px);
}

.projects-premium__trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.05rem;
  min-width: 0;
  padding: 1.45rem 1.25rem;
  border-right: 1px solid rgba(255,255,255,0.10);
}

.projects-premium__trust-item:last-child {
  border-right: 0;
}

.projects-premium__trust-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  color: var(--color-accent);
}

.projects-premium__trust-icon svg {
  width: 2.45rem;
  height: 2.45rem;
  stroke-width: 1.6;
}

.projects-premium__trust-item strong {
  display: block;
  margin-bottom: 0.14rem;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(0.96rem, 1.25vw, 1.15rem);
  font-weight: 850;
  line-height: 1.18;
  letter-spacing: 0;
}

.projects-premium__trust-item span {
  display: block;
  color: rgba(255,255,255,0.58);
  font-size: 0.92rem;
  line-height: 1.35;
}

@media (max-width: 1180px) {
  .projects-premium__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .projects-premium__media {
    height: clamp(12rem, 24vw, 16rem);
  }
}

@media (max-width: 820px) {
  .projects-premium {
    height: auto;
    min-height: 100svh;
    padding: 4rem 0;
  }

  .projects-premium__header {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.5rem;
  }

  .projects-premium__title h2 {
    max-width: 12ch;
    font-size: clamp(2.7rem, 11vw, 4.2rem);
  }

  .projects-premium__intro p {
    margin-bottom: 1.4rem;
  }

  .projects-premium__usps {
    row-gap: 0.85rem;
  }

  .projects-premium__usps li {
    padding-right: 0.9rem;
    margin-right: 0.9rem;
  }

  .projects-premium__usps li:nth-child(2n) {
    border-right: 0;
  }
}

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

  .projects-premium__media {
    height: auto;
    aspect-ratio: 1.18 / 1;
  }

  .projects-premium__body {
    min-height: auto;
  }
}

.projects-blue__all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 3.8rem;
  padding: 0 1.65rem;
  border: 1px solid color-mix(in srgb, var(--projects-blue) 78%, transparent);
  border-radius: 0.7rem;
  background: rgba(2,8,13,0.66);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 48px rgba(0,0,0,0.25);
  transition: transform 0.24s, background 0.24s, box-shadow 0.24s;
}

.projects-blue__all span{
  color: var(--projects-blue);
  font-size: 1.35em;
}

@media (hover: hover) and (pointer: fine) {
  .projects-blue__all:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--projects-blue) 10%, transparent);
    box-shadow: 0 22px 62px rgba(0,0,0,0.36), 0 0 28px color-mix(in srgb, var(--projects-blue) 12%, transparent);
  }
}

.projects-edit__row-thumb-ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  font-family: var(--font-heading);
  font-weight: 900;
}/* ==============================================
   REVIEWS — Swipeable carousel
============================================== */


.reviews-premium {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(1.5rem, 2.5vw, 2.5rem) 0;
  background: linear-gradient(180deg, #030608 0%, #070a0d 48%, #030507 100%);
  color: #fff;
}

.reviews-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 9%, transparent) 0%, transparent 28%, transparent 70%, color-mix(in srgb, var(--color-accent) 4%, transparent) 100%);
  background-size: 120px 120px, 120px 120px, auto;
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  opacity: 0.34;
}

.reviews-premium::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.36), transparent 22%, transparent 74%, rgba(0,0,0,0.36)),
    linear-gradient(90deg, rgba(0,0,0,0.26), transparent 18%, transparent 82%, rgba(0,0,0,0.26));
}

.reviews-premium__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.reviews-premium__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 920px;
  margin: 0 auto clamp(1rem, 2.5vw, 2rem);
  text-align: center;
}

.reviews-premium__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.15rem;
  padding: 0.72rem 1.45rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 54%, transparent);
  border-radius: 0.85rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 10%, transparent), rgba(255,255,255,0.015));
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 16px 46px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.06);
}

.reviews-premium__badge svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--color-accent);
}

.reviews-premium__header h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: 0;
}

.reviews-premium__header h2 em {
  color: color-mix(in srgb, var(--color-accent) 88%, white);
  font-style: normal;
}

.reviews-premium__header p {
  max-width: 62ch;
  margin: 0.65rem 0 0.9rem;
  color: rgba(255,255,255,0.63);
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.55;
}

.reviews-premium__rating {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.32rem;
}

.reviews-premium__stars {
  color: var(--color-accent);
  font-size: clamp(1.65rem, 2.6vw, 2.2rem);
  letter-spacing: 0.08em;
  line-height: 1;
}

.reviews-premium__rating strong {
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  font-weight: 900;
  line-height: 1;
}

.reviews-premium__rating small {
  grid-column: 1 / -1;
  color: rgba(255,255,255,0.62);
  font-size: 1rem;
  line-height: 1.3;
}

.reviews-premium__stage {
  position: relative;
  padding: 0 4rem;
}

.reviews-premium__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.55vw, 1.45rem);
}

.reviews-premium__card {
  min-height: clamp(10rem, 16vh, 14rem);
  padding: clamp(1.55rem, 2.1vw, 2rem);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 0.95rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.018) 44%, rgba(0,0,0,0.10)),
    rgba(10,12,14,0.82);
  box-shadow: 0 26px 72px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.055);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.32s ease, box-shadow 0.32s ease;
}

@media (hover: hover) and (pointer: fine) {
  .reviews-premium__card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--color-accent) 40%, rgba(255,255,255,0.12));
    box-shadow: 0 34px 86px rgba(0,0,0,0.44), 0 0 34px color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
}

.reviews-premium__quote {
  display: block;
  height: 2.65rem;
  color: var(--color-accent);
  font-family: Georgia, serif;
  font-size: 4.2rem;
  font-weight: 700;
  line-height: 0.85;
  opacity: 0.95;
}

.reviews-premium__card p {
  flex: 1;
  margin: 0.9rem 0 1.6rem;
  color: rgba(255,255,255,0.84);
  font-size: clamp(0.96rem, 1.08vw, 1.05rem);
  line-height: 1.72;
}

.reviews-premium__card-stars {
  display: flex;
  gap: 0.34rem;
  margin-bottom: 1.65rem;
}

.reviews-premium__card-stars svg {
  color: rgba(255,255,255,0.18);
}

.reviews-premium__card-stars svg.is-filled {
  color: var(--color-accent);
}

.reviews-premium__author {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.reviews-premium__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3.35rem;
  height: 3.35rem;
  border: 2px solid rgba(255,255,255,0.78);
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 38%, #fff), #1c2328 64%, #080a0c);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}

.reviews-premium__author strong {
  display: block;
  color: color-mix(in srgb, var(--color-accent) 86%, white);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.2;
}

.reviews-premium__author small {
  display: block;
  margin-top: 0.18rem;
  color: rgba(255,255,255,0.62);
  font-size: 0.86rem;
  line-height: 1.35;
}

.reviews-premium__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.7rem;
  height: 3.7rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 48%, transparent);
  border-radius: 999px;
  background: rgba(8,10,12,0.78);
  color: var(--color-accent);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 18px 44px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.05);
  transform: translateY(-50%);
  transition: transform 0.24s ease, background 0.24s ease, border-color 0.24s ease;
}

@media (hover: hover) and (pointer: fine) {
  .reviews-premium__arrow:hover {
    transform: translateY(-50%) scale(1.05);
    border-color: color-mix(in srgb, var(--color-accent) 84%, white);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
}

.reviews-premium__arrow--prev { left: 0; }
.reviews-premium__arrow--next { right: 0; }

.reviews-premium .container { width: 100%; }

.reviews-premium__proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(210px, 0.95fr);
  align-items: center;
  margin: clamp(1rem, 2vw, 1.8rem) 4rem 0;
  border: 1px solid color-mix(in srgb, var(--color-accent) 32%, rgba(255,255,255,0.12));
  border-radius: 0.9rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  box-shadow: 0 26px 76px rgba(0,0,0,0.32), 0 0 38px color-mix(in srgb, var(--color-accent) 9%, transparent), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(14px);
}

.reviews-premium__proof-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  align-items: center;
  min-width: 0;
  padding: 1.45rem 1.6rem;
}

.reviews-premium__proof-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 3.15rem;
  height: 3.15rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 48%, transparent);
  border-radius: 999px;
  color: var(--color-accent);
  background: rgba(7,8,9,0.45);
}

.reviews-premium__proof-icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.reviews-premium__proof-item strong {
  display: block;
  overflow-wrap: anywhere;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 920;
  line-height: 1.08;
  letter-spacing: 0;
}

.reviews-premium__proof-item span:last-child {
  color: rgba(255,255,255,0.62);
  font-size: 0.92rem;
  line-height: 1.28;
}

.reviews-premium__cta {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.95rem;
  padding: 1.45rem 1.6rem;
  border-left: 1px solid rgba(255,255,255,0.12);
}

.reviews-premium__cta p {
  max-width: 17ch;
  margin: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 760;
  line-height: 1.35;
}

.reviews-premium__cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 2.7rem;
  padding: 0 1.2rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, white);
  border-radius: 0.42rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 86%, white), color-mix(in srgb, var(--color-accent) 72%, #5b4319));
  color: #111;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 16px 38px color-mix(in srgb, var(--color-accent) 22%, transparent);
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}

@media (hover: hover) and (pointer: fine) {
  .reviews-premium__cta a:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 48px color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
}

@media (max-width: 1240px) {
  .reviews-premium__stage {
    padding: 0;
  }

  .reviews-premium__arrow {
    display: none;
  }

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

  .reviews-premium__proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: 0;
    margin-right: 0;
  }

  .reviews-premium__cta {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255,255,255,0.12);
    border-left: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (max-width: 720px) {
  .reviews-premium {
    padding: 4rem 0;
  }

  .reviews-premium__header h2 {
    font-size: clamp(2.65rem, 12vw, 4.1rem);
  }

  .reviews-premium__rating {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 0.45rem;
  }

  .reviews-premium__grid,
  .reviews-premium__proof {
    grid-template-columns: 1fr;
  }

  .reviews-premium__card {
    min-height: auto;
  }

  .reviews-premium__proof-item + .reviews-premium__proof-item,
  .reviews-premium__cta {
    border-top: 1px solid rgba(255,255,255,0.12);
  }

  .reviews-premium__cta {
    align-items: stretch;
    flex-direction: column;
  }

  .reviews-premium__cta p {
    max-width: none;
  }
}/* Reviews platform proof */


.reviews-platform {
  --review-blue: var(--color-accent);
  --review-gold: color-mix(in srgb, var(--color-accent) 90%, white);
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  padding: clamp(3rem, 5.4vw, 4.8rem) 0;
  background:
    radial-gradient(circle at 78% 44%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 34%),
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 30%),
    var(--dark-bg);
  color: #fff;
}

.reviews-platform::before {
  content: "W";
  position: absolute;
  right: 3vw;
  top: 3vh;
  color: rgba(255,255,255,0.035);
  font-family: var(--font-heading);
  font-size: clamp(18rem, 36vw, 38rem);
  font-weight: 950;
  line-height: 0.8;
  transform: skewX(-10deg);
  pointer-events: none;
}

.reviews-platform::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.46) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.14), transparent 38%, rgba(0,0,0,0.24));
}

.reviews-platform__inner {
  position: relative;
  z-index: 1;
}

.reviews-platform__header {
  max-width: 720px;
  margin-bottom: clamp(1rem, 2vw, 1.8rem);
}

.reviews-platform__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
  color: var(--review-blue);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.reviews-platform__eyebrow::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--review-blue);
  box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 78%, transparent);
}

.reviews-platform__header h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.reviews-platform__header h2 span {
  color: var(--review-blue);
}

.reviews-platform__header > p {
  margin: 1.05rem 0 1.35rem;
  color: rgba(255,255,255,0.82);
  font-size: clamp(0.98rem, 1.25vw, 1.18rem);
}

.reviews-platform__rating {
  display: inline-grid;
  grid-template-columns: auto auto auto auto;
  align-items: center;
  gap: 1rem;
}

.reviews-platform__rating > span {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid var(--review-blue);
  border-radius: 999px;
  color: var(--review-blue);
  background: color-mix(in srgb, var(--color-accent) 5%, transparent);
}

.reviews-platform__rating svg {
  width: 1.25rem;
  height: 1.25rem;
}

.reviews-platform__rating strong {
  color: #fff;
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.reviews-platform__rating i {
  width: 1px;
  height: 1.7rem;
  background: rgba(255,255,255,0.38);
}

.reviews-platform__rating small {
  color: rgba(255,255,255,0.82);
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  font-style: normal;
}

.reviews-platform__stage {
  position: relative;
  padding: 0 clamp(3.2rem, 5vw, 4.2rem);
}

.reviews-platform__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.1fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(1.2rem, 2.3vw, 2.1rem);
}

.reviews-platform__card {
  min-height: clamp(14rem, 26vh, 20rem);
  padding: clamp(1.25rem, 2vw, 1.8rem);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 1rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.062), rgba(255,255,255,0.022)),
    rgba(6,16,25,0.76);
  box-shadow: 0 26px 76px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.045);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
}

.reviews-platform__card.is-featured {
  min-height: clamp(16rem, 30vh, 22rem);
  border-color: color-mix(in srgb, var(--color-accent) 48%, transparent);
  box-shadow: 0 34px 90px rgba(0,0,0,0.42), 0 18px 58px color-mix(in srgb, var(--color-accent) 16%, transparent), inset 0 1px 0 rgba(255,255,255,0.055);
}

.reviews-platform__card-head {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
}

.reviews-platform__quote {
  color: var(--review-blue);
  font-family: Georgia, serif;
  font-size: clamp(2.5rem, 3.8vw, 3.6rem);
  font-weight: 800;
  line-height: 0.65;
}

.reviews-platform__stars {
  display: flex;
  gap: 0.28rem;
}

.reviews-platform__stars svg {
  width: clamp(1.15rem, 1.7vw, 1.45rem);
  height: clamp(1.15rem, 1.7vw, 1.45rem);
  color: rgba(255,255,255,0.18);
}

.reviews-platform__stars svg.is-filled {
  color: var(--review-gold);
}

.reviews-platform__card > p {
  flex: 1;
  margin: 0;
  color: rgba(255,255,255,0.88);
  font-size: clamp(0.94rem, 1.18vw, 1.08rem);
  line-height: 1.72;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reviews-platform__card footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.4rem, 2.2vw, 2rem);
  padding-top: clamp(1.1rem, 1.8vw, 1.5rem);
  border-top: 1px solid rgba(255,255,255,0.10);
}

.reviews-platform__avatar {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 72%, #fff), #8b6f3b);
  color: #07111b;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}

.reviews-platform__card footer strong {
  display: block;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(0.95rem, 1.2vw, 1.12rem);
  line-height: 1.2;
}

.reviews-platform__card footer small {
  display: block;
  margin-top: 0.28rem;
  color: color-mix(in srgb, var(--color-accent) 78%, white);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reviews-platform__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 44%, transparent);
  border-radius: 999px;
  background: rgba(4,10,16,0.72);
  color: var(--color-accent);
  font-size: 1.75rem;
  cursor: pointer;
  transform: translateY(-50%);
}
.reviews-platform__arrow span { margin-bottom: 4px; }
.reviews-platform__arrow.is-disabled {
  opacity: 0.28;
  cursor: not-allowed;
  pointer-events: none;
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4);
}

.reviews-platform__arrow--prev { left: 0; }
.reviews-platform__arrow--next { right: 0; }

.reviews-platform__sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: clamp(1rem, 1.8vw, 1.6rem) clamp(3.2rem, 5vw, 4.2rem) 0;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 1rem;
  background: rgba(5,14,22,0.66);
  box-shadow: 0 26px 76px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.045);
  backdrop-filter: blur(14px);
}

.reviews-platform__source {
  display: grid;
  grid-template-columns: 3.3rem minmax(0, auto);
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.25rem, 2vw, 1.7rem);
  border-right: 1px solid rgba(255,255,255,0.12);
}

.reviews-platform__source:last-child {
  border-right: 0;
}

.reviews-platform__source > span {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 999px;
  font-size: 1.7rem;
  font-weight: 900;
}

.reviews-platform__source--google > span {
  background: conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
  color: #fff;
}

.reviews-platform__source--trust > span {
  color: #00b67a;
}

.reviews-platform__source--werkspot > span {
  background: #ff6b35;
  color: #07111b;
}

.reviews-platform__source strong {
  display: block;
  color: #fff;
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  font-weight: 650;
}

.reviews-platform__source p {
  margin: 0.18rem 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 750;
}

.reviews-platform__source em {
  color: var(--review-blue);
  font-style: normal;
}

.reviews-platform__source small {
  color: rgba(255,255,255,0.66);
  font-size: 0.86rem;
}

@media (max-width: 1120px) {
  .reviews-platform {
    height: auto;
    min-height: 0;
  }
  .reviews-platform__stage {
    padding: 0;
  }
  .reviews-platform__arrow {
    display: none;
  }
  .reviews-platform__grid {
    grid-template-columns: 1fr;
  }
  .reviews-platform__sources {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 760px) {
  .reviews-platform__rating {
    grid-template-columns: auto auto;
  }
  .reviews-platform__rating i {
    display: none;
  }
  .reviews-platform__rating small {
    grid-column: 1 / -1;
  }
  .reviews-platform__sources {
    grid-template-columns: 1fr;
  }
  .reviews-platform__source {
    justify-content: start;
    border-right: 0;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .reviews-platform__source:first-child {
    border-top: 0;
  }
}/* ══════════════════════════════════════════════
   REVIEWS — LIGHT / DARK VARIANT MODIFIERS
══════════════════════════════════════════════ *//* ── Style 1 White (reviews-premium--light) ── */





.reviews-premium--light {
  background: var(--color-bg);
  color: var(--color-text);
}
.reviews-premium--light::before {
  background-image: radial-gradient(ellipse 70% 60% at 50% 50%, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent);
}
.reviews-premium--light .reviews-premium__header h2 {
  color: var(--color-text);
}
.reviews-premium--light .reviews-premium__header h2 em {
  color: var(--color-accent);
}
.reviews-premium--light .reviews-premium__header p {
  color: var(--color-text-muted);
}
.reviews-premium--light .reviews-premium__badge {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.reviews-premium--light .reviews-premium__rating strong {
  color: var(--color-text);
}
.reviews-premium--light .reviews-premium__rating small {
  color: var(--color-text-muted);
}
.reviews-premium--light .reviews-premium__card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  color: var(--color-text);
}
.reviews-premium--light .reviews-premium__card::before { opacity: 0; }
.reviews-premium--light .reviews-premium__quote {
  color: color-mix(in srgb, var(--color-accent) 25%, transparent);
}
.reviews-premium--light .reviews-premium__card p {
  color: var(--color-text-muted);
}
.reviews-premium--light .reviews-premium__card-stars svg { color: rgba(0,0,0,0.18); }
.reviews-premium--light .reviews-premium__card-stars svg.is-filled { color: var(--color-accent); }
.reviews-premium--light .reviews-premium__author strong {
  color: var(--color-text);
}
.reviews-premium--light .reviews-premium__author small {
  color: var(--color-text-muted);
}
.reviews-premium--light .reviews-premium__avatar {
  background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, var(--color-primary)));
  color: var(--color-primary);
}
.reviews-premium--light .reviews-premium__arrow {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
  color: var(--color-text);
}
.reviews-premium--light .reviews-premium__arrow:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-color: var(--color-accent);
  color: var(--color-accent);
}/* ── Style 2 Dark (reviews-carousel--dark) ── */


.reviews-carousel--dark {
  background: var(--dark-bg);
  color: #fff;
}
.reviews-carousel--dark .section-header h2 {
  color: #fff;
}
.reviews-carousel--dark .reviews-carousel-outer::before,
.reviews-carousel--dark .reviews-carousel-outer::after {
  background: linear-gradient(90deg, var(--dark-bg), transparent);
}
.reviews-carousel--dark .reviews-carousel-outer::after {
  background: linear-gradient(90deg, transparent, var(--dark-bg));
}
.reviews-carousel--dark .review-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  color: #fff;
}
.reviews-carousel--dark .review-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.reviews-carousel--dark .review-star { color: rgba(255,255,255,0.2); }
.reviews-carousel--dark .review-star--filled { color: var(--color-accent); }
.reviews-carousel--dark .review-text { color: rgba(255,255,255,0.82); }
.reviews-carousel--dark .review-name { color: #fff; }
.reviews-carousel--dark .review-platform-name,
.reviews-carousel--dark .review-platform-link { color: color-mix(in srgb, var(--color-accent) 80%, white); }
.reviews-carousel--dark .review-avatar {
  background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, var(--color-primary)));
  color: var(--color-primary);
}
.reviews-carousel--dark .reviews-dots span {
  background: rgba(255,255,255,0.25);
}
.reviews-carousel--dark .reviews-dots span.is-active {
  background: var(--color-accent);
}/* ── Reviews platform light variant ── */


.reviews-platform--light {
  background:
    radial-gradient(circle at 78% 44%, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 34%),
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--color-accent) 4%, transparent), transparent 30%),
    var(--light-bg);
  color: var(--color-primary);
}
.reviews-platform--light::before {
  color: color-mix(in srgb, var(--color-primary) 5%, transparent);
}
.reviews-platform--light::after {
  background: none;
}
.reviews-platform--light .reviews-platform__eyebrow {
  color: color-mix(in srgb, var(--color-accent) 85%, var(--color-primary));
}
.reviews-platform--light .reviews-platform__eyebrow::before {
  background: var(--color-accent);
  box-shadow: none;
}
.reviews-platform--light .reviews-platform__header h2 {
  color: var(--color-primary);
}
.reviews-platform--light .reviews-platform__header h2 span {
  color: var(--color-accent);
}
.reviews-platform--light .reviews-platform__header > p,
.reviews-platform--light .reviews-platform__header p {
  color: color-mix(in srgb, var(--color-primary) 58%, transparent);
}
.reviews-platform--light .reviews-platform__rating > span,
.reviews-platform--light .reviews-platform__rating span {
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  color: var(--color-accent);
}
.reviews-platform--light .reviews-platform__rating strong {
  color: var(--color-primary);
}
.reviews-platform--light .reviews-platform__rating i {
  background: rgba(0,0,0,0.18);
}
.reviews-platform--light .reviews-platform__rating small {
  color: color-mix(in srgb, var(--color-primary) 58%, transparent);
}
.reviews-platform--light .reviews-platform__card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 8px 32px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.8);
  backdrop-filter: none;
  color: var(--color-primary);
}
.reviews-platform--light .reviews-platform__card.is-featured {
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  box-shadow: 0 16px 48px rgba(0,0,0,0.1), 0 0 32px color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.reviews-platform--light .reviews-platform__quote {
  color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.reviews-platform--light .reviews-platform__stars svg { color: rgba(0,0,0,0.1); }
.reviews-platform--light .reviews-platform__stars svg.is-filled { color: var(--color-accent); }
.reviews-platform--light .reviews-platform__card > p,
.reviews-platform--light .reviews-platform__card p {
  color: color-mix(in srgb, var(--color-primary) 65%, transparent);
}
.reviews-platform--light .reviews-platform__card footer {
  border-top-color: rgba(0,0,0,0.07);
}
.reviews-platform--light .reviews-platform__card footer strong { color: var(--color-primary); }
.reviews-platform--light .reviews-platform__card footer small {
  color: color-mix(in srgb, var(--color-accent) 80%, var(--color-primary));
}
.reviews-platform--light .reviews-platform__avatar {
  background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, var(--color-primary)));
  color: #fff;
}
.reviews-platform--light .reviews-platform__arrow {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
  color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.reviews-platform--light .reviews-platform__arrow:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.reviews-platform--light .reviews-platform__sources {
  background: #fff;
  border-color: rgba(0,0,0,0.07);
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
  backdrop-filter: none;
}
.reviews-platform--light .reviews-platform__source {
  border-right-color: rgba(0,0,0,0.07);
}
.reviews-platform--light .reviews-platform__source strong { color: var(--color-primary); }
.reviews-platform--light .reviews-platform__source p { color: var(--color-primary); }
.reviews-platform--light .reviews-platform__source em { color: var(--color-accent); }
.reviews-platform--light .reviews-platform__source small { color: color-mix(in srgb, var(--color-primary) 52%, transparent); }
@media (max-width: 760px) {
  .reviews-platform--light .reviews-platform__source {
    border-top-color: rgba(0,0,0,0.07);
  }
}/* ══════════════════════════════════════════════
   REVIEWS — STYLE 3: Testimonial kaarten
══════════════════════════════════════════════ */


.reviews-testimonial {
  background: var(--dark-bg);
  color: #fff;
  padding: clamp(4rem, 7vw, 6.5rem) 0;
  position: relative;
  overflow: hidden;
}

.reviews-testimonial__inner {
  position: relative;
  z-index: 1;
}

.reviews-testimonial__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.reviews-testimonial__header {
  max-width: 560px;
}

.reviews-testimonial__eyebrow {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: var(--color-accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.reviews-testimonial__header h2 {
  margin: 0 0 0.65rem;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.reviews-testimonial__header h2 span {
  color: var(--color-accent);
}

.reviews-testimonial__header p {
  margin: 0;
  color: rgba(255,255,255,0.6);
  font-size: clamp(0.92rem, 1.1vw, 1rem);
  line-height: 1.65;
}

.reviews-testimonial__nav {
  display: flex;
  gap: 0.55rem;
  flex-shrink: 0;
}

.reviews-testimonial__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.14);
  color: #fff;
  cursor: pointer;
  font-size: 1.05rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .reviews-testimonial__arrow:hover {
    background: var(--color-accent);
    transform: scale(1.08);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--color-accent) 45%, transparent);
  }
}

.reviews-testimonial__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.reviews-testimonial__card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: clamp(1.25rem, 2vw, 1.6rem);
  border-radius: 14px;
  background:
    linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)) padding-box,
    linear-gradient(145deg, rgba(255,255,255,0.07) 0%, color-mix(in srgb, var(--color-accent) 72%, transparent) 100%) border-box;
  border: 1.5px solid transparent;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .reviews-testimonial__card:hover {
    background:
      linear-gradient(rgba(255,255,255,0.095), rgba(255,255,255,0.095)) padding-box,
      linear-gradient(145deg, rgba(255,255,255,0.1) 0%, var(--color-accent) 100%) border-box;
    box-shadow: 0 6px 28px color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
}

.reviews-testimonial__card-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.reviews-testimonial__avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
}

.reviews-testimonial__card:nth-child(5n+1) .reviews-testimonial__avatar { background: #f59e0b; color: #fff; }
.reviews-testimonial__card:nth-child(5n+2) .reviews-testimonial__avatar { background: #10b981; color: #fff; }
.reviews-testimonial__card:nth-child(5n+3) .reviews-testimonial__avatar { background: #f43f5e; color: #fff; }
.reviews-testimonial__card:nth-child(5n+4) .reviews-testimonial__avatar { background: #6366f1; color: #fff; }
.reviews-testimonial__card:nth-child(5n+5) .reviews-testimonial__avatar { background: #0ea5e9; color: #fff; }

.reviews-testimonial__author strong {
  display: block;
  color: #fff;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.3;
}

.reviews-testimonial__author small {
  display: block;
  margin-top: 0.2rem;
  color: rgba(255,255,255,0.52);
  font-size: 0.8rem;
}

.reviews-testimonial__stars {
  display: flex;
  align-items: center;
  gap: 0.22rem;
  margin-bottom: 0.85rem;
}

.reviews-testimonial__stars svg {
  color: rgba(255,255,255,0.2);
}

.reviews-testimonial__stars svg.is-filled {
  color: #f59e0b;
}

.reviews-testimonial__star-label {
  margin-left: 0.35rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.8rem;
}

.reviews-testimonial__divider {
  border: none;
  border-top: 1.5px dashed rgba(255,255,255,0.13);
  margin: 0 0 1rem;
}

.reviews-testimonial__card > p {
  flex: 1;
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: clamp(0.88rem, 1.05vw, 0.95rem);
  line-height: 1.75;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
}/* Light mode */


.reviews-testimonial--light {
  background: var(--light-bg);
  color: var(--color-text);
}

.reviews-testimonial--light .reviews-testimonial__eyebrow {
  background: #ffe4e0;
  color: #d94f38;
}

.reviews-testimonial--light .reviews-testimonial__header h2 {
  color: var(--color-text);
}

.reviews-testimonial--light .reviews-testimonial__header h2 span {
  color: var(--color-accent);
}

.reviews-testimonial--light .reviews-testimonial__header p {
  color: var(--color-text-muted);
}

.reviews-testimonial--light .reviews-testimonial__arrow {
  background: #1a1a1a;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
}

@media (hover: hover) and (pointer: fine) {
  .reviews-testimonial--light .reviews-testimonial__arrow:hover {
    background: var(--color-accent);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
}

.reviews-testimonial--light .reviews-testimonial__card {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(145deg, #e4e6e9 0%, color-mix(in srgb, var(--color-accent) 65%, transparent) 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

@media (hover: hover) and (pointer: fine) {
  .reviews-testimonial--light .reviews-testimonial__card:hover {
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(145deg, #d0d2d6 0%, var(--color-accent) 100%) border-box;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  }
}

.reviews-testimonial--light .reviews-testimonial__author strong {
  color: var(--color-text);
}

.reviews-testimonial--light .reviews-testimonial__author small {
  color: var(--color-text-muted);
}

.reviews-testimonial--light .reviews-testimonial__stars svg {
  color: #e5e5e5;
}

.reviews-testimonial--light .reviews-testimonial__star-label {
  color: var(--color-text-muted);
}

.reviews-testimonial--light .reviews-testimonial__divider {
  border-top-color: #e8e8e8;
}

.reviews-testimonial--light .reviews-testimonial__card > p {
  color: var(--color-text-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
}

@media (max-width: 1024px) {
  .reviews-testimonial__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .reviews-testimonial__top {
    flex-direction: column;
    align-items: flex-start;
  }
  .reviews-testimonial__grid {
    grid-template-columns: 1fr;
  }
}/* ══════════════════════════════════════════════
   SERVICES EXTRA VARIANTS — Process + proof list
══════════════════════════════════════════════ */


.svc-process {
  background: var(--color-primary);
  color: #fff;
  padding: clamp(4.25rem, 7vw, 7rem) 0;
  position: relative;
  overflow: hidden;
}
.svc-process--page { background: var(--color-bg); color: var(--color-text); }
.svc-process::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 34%),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: auto, 72px 72px, 72px 72px;
  pointer-events: none;
}
.svc-process .container,
.svc-proof .container { position: relative; z-index: 1; }
.svc-process__head {
  max-width: 760px;
  margin-bottom: clamp(2.25rem, 4vw, 4rem);
}
.svc-process__label,
.svc-proof__label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.svc-process__label::before,
.svc-proof__label::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
}
.svc-process__head h2,
.svc-proof__intro h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: inherit;
  margin: 0 0 1rem;
}
.svc-process__head p,
.svc-proof__intro p {
  color: rgba(255,255,255,0.6);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 58ch;
  margin: 0;
}
.svc-process--page .svc-process__head p { color: var(--color-text-muted); }
.svc-process__rail { display: grid; gap: 1rem; }
.svc-process__item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
}
.svc-process__marker {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 1.1rem;
}
.svc-process__marker::before {
  content: "";
  position: absolute;
  top: 3.25rem;
  bottom: -1rem;
  width: 1px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 55%, transparent), transparent);
}
.svc-process__item:last-child .svc-process__marker::before { display: none; }
.svc-process__marker span {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 34%, transparent);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  position: relative;
  z-index: 1;
}
.svc-process__body {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  padding: clamp(1rem, 2vw, 1.45rem);
  box-shadow: 0 18px 45px -32px rgba(0,0,0,0.55);
  backdrop-filter: blur(14px) saturate(1.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.18);
  transition: transform 0.32s cubic-bezier(.16,1,.3,1), border-color 0.25s, box-shadow 0.32s;
}
@media (hover: hover) and (pointer: fine) {
  .svc-process__body:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
    box-shadow: 0 24px 58px -34px rgba(0,0,0,0.42);
  }
}
.svc-process--page .svc-process__body {
  background: rgba(255,255,255,0.82);
  border-color: rgba(0,0,0,0.065);
  box-shadow: 0 18px 45px -32px rgba(0,0,0,0.35);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.svc-process__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: color-mix(in srgb, var(--color-accent) 14%, #fff);
}
.svc-process__icon svg { width: 26px; height: 26px; }
.svc-process__body h3 {
  font-family: var(--font-heading);
  color: #fff;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.18;
  margin: 0 0 0.35rem;
}
.svc-process--page .svc-process__body h3 { color: var(--color-primary); }
.svc-process__body p {
  color: rgba(255,255,255,0.58);
  font-size: 0.9rem;
  line-height: 1.58;
  margin: 0;
}
.svc-process--page .svc-process__body p { color: var(--color-text-muted); }
.svc-process__link {
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 0.72rem 1rem;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.22s, color 0.22s, border-color 0.22s, transform 0.22s;
}
@media (hover: hover) and (pointer: fine) {
  .svc-process__link:hover {
    background: var(--color-accent);
    color: var(--color-primary);
    border-color: var(--color-accent);
    transform: translateX(2px);
  }
}
.svc-process--page .svc-process__link {
  color: var(--color-primary);
  border-color: rgba(0,0,0,0.1);
}
.svc-process--page .svc-process__link:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.svc-proof {
  background: var(--color-primary);
  padding: clamp(4.25rem, 7vw, 7rem) 0;
  position: relative;
  overflow: hidden;
}
.svc-proof::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 25%, color-mix(in srgb, var(--color-accent) 17%, transparent), transparent 34%),
    radial-gradient(circle at 100% 80%, rgba(255,255,255,0.07), transparent 32%);
  pointer-events: none;
}
.svc-proof__layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.svc-proof__intro { position: sticky; top: 110px; }
.svc-proof__intro h2 { color: #fff; }
.svc-proof__intro p { color: rgba(255,255,255,0.58); }
.svc-proof__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 2rem;
}
.svc-proof__stats div {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.045);
  border-radius: 16px;
  padding: 1rem;
}
.svc-proof__stats strong {
  display: block;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.45rem;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.svc-proof__stats span {
  color: rgba(255,255,255,0.52);
  font-size: 0.8rem;
  line-height: 1.35;
}
.svc-proof__list { display: grid; gap: 0.75rem; }
.svc-proof__row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 42px;
  gap: 1rem;
  align-items: center;
  padding: clamp(1rem, 2vw, 1.35rem);
  border-radius: 18px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.3s cubic-bezier(.16,1,.3,1), background 0.25s, border-color 0.25s;
}
@media (hover: hover) and (pointer: fine) {
  .svc-proof__row:hover {
    transform: translateX(5px);
    background: rgba(255,255,255,0.085);
    border-color: color-mix(in srgb, var(--color-accent) 34%, transparent);
  }
}
.svc-proof__icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 26%, transparent);
}
.svc-proof__icon svg { width: 25px; height: 25px; }
.svc-proof__row h3 {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.06rem;
  line-height: 1.22;
  margin: 0 0 0.32rem;
}
.svc-proof__row p {
  color: rgba(255,255,255,0.52);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}
.svc-proof__row a {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--color-accent);
  border: 1px solid rgba(255,255,255,0.12);
  transition: background 0.22s, color 0.22s, transform 0.22s;
}
@media (hover: hover) and (pointer: fine) {
  .svc-proof__row a:hover {
    background: var(--color-accent);
    color: var(--color-primary);
    transform: translateX(2px);
  }
}
.svc-proof__row a svg { width: 18px; height: 18px; }/* ══════════════════════════════════════════════
   PROJECT PAGE EXTRA VARIANTS
══════════════════════════════════════════════ */


.projects-page-section--cases {
  background:
    radial-gradient(ellipse at 18% 12%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 36%),
    radial-gradient(ellipse at 88% 82%, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent 30%),
    var(--dark-bg);
}
.projects-case-page-grid { display: grid; gap: 1rem; }
.projects-case-page-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: stretch;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 22px;
  padding: 0.85rem;
  box-shadow: 0 22px 70px -52px rgba(0,0,0,0.38);
  transition: transform 0.34s cubic-bezier(.16,1,.3,1), box-shadow 0.34s;
}
@media (hover: hover) and (pointer: fine) {
  .projects-case-page-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 82px -54px rgba(0,0,0,0.48);
  }
}
.projects-case-page-media {
  position: relative;
  min-height: 260px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.projects-case-page-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(.16,1,.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .projects-case-page-card:hover .projects-case-page-media img { transform: scale(1.045); }
}
.projects-case-page-media span {
  position: absolute;
  left: 1rem;
  top: 1rem;
  border-radius: 999px;
  padding: 0.38rem 0.8rem;
  color: #fff;
  background: rgba(0,0,0,0.52);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.projects-case-page-body {
  align-self: center;
  padding: clamp(1rem, 3vw, 2rem) clamp(0.5rem, 2vw, 1.25rem);
}
.projects-case-page-kicker{
  display: inline-flex;
  color: var(--color-accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.projects-case-page-body h2{
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: clamp(1.55rem, 3vw, 2.55rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
}
.projects-case-page-body p{
  color: var(--color-text-muted);
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 0;
}
.filter-tab--light {
  border-color: rgba(0,0,0,0.14);
  color: rgba(0,0,0,0.55);
}
.filter-tab--light:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.filter-tab--light.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}/* ==============================================
   PRJ-VIS — Photo card grid (stijl 4/5)
   ============================================== */


.prj-vis { padding: clamp(3rem, 5.5vw, 5rem) 0 clamp(3.5rem, 6vw, 5.5rem); }
.prj-vis--light { background: var(--light-bg); }

.prj-vis__head {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.75rem, 3.5vw, 2.75rem);
  text-align: center;
}
.prj-vis__head-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.prj-vis__head-label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent); flex-shrink: 0;
}
.prj-vis--light .prj-vis__head-label { background: rgba(0,0,0,0.05); color: var(--color-primary); }
.prj-vis__head-h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 0.85rem;
}
.prj-vis--light .prj-vis__head-h2 { color: var(--color-primary); }
.prj-vis__head-sub {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto;
}
.prj-vis--light .prj-vis__head-sub { color: rgba(0,0,0,0.5); }/* Filter tabs — losse pills met icoon (mockup) */


.prj-vis .dnt-tabs {
  background: transparent;
  border: none;
  padding: 0;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.prj-vis .dnt-tab {
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  font-size: 0.83rem;
  font-weight: 600;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.prj-vis .dnt-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.prj-vis--light .dnt-tab {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  color: var(--color-primary);
}
.prj-vis--light .dnt-tab:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); color: var(--color-primary); }
.prj-vis--light .dnt-tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}/* Card grid — witte kaart, beeld boven, tekst eronder */


.prj-vis__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.prj-vis__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s, border-color 0.4s;
}
.prj-vis--light .prj-vis__card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
@media (hover: hover) and (pointer: fine) {
  .prj-vis__card:hover { transform: translateY(-5px); }
  .prj-vis--light .prj-vis__card:hover {
    box-shadow: 0 26px 54px -22px rgba(0,0,0,0.22);
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
}
.prj-vis__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}
.prj-vis__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(.16,1,.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .prj-vis__card:hover .prj-vis__img { transform: scale(1.05); }
}
.prj-vis__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
}
.prj-vis__badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.6);
  color: #fff;
  backdrop-filter: blur(6px);
}
.prj-vis__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.3rem 1.4rem 1.4rem;
}
.prj-vis__title {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.22;
  margin: 0 0 0.55rem;
  -webkit-font-smoothing: antialiased;
}
.prj-vis--light .prj-vis__title { color: var(--color-primary); }
.prj-vis__desc {
  font-size: 0.86rem;
  line-height: 1.55;
  margin: 0 0 1.15rem;
}
.prj-vis--light .prj-vis__desc { color: var(--color-text-muted); }
.prj-vis__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.prj-vis__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.2s, color 0.2s;
}
.prj-vis--light .prj-vis__link { color: var(--color-primary); }
.prj-vis__link:hover { gap: 0.7rem; color: var(--color-accent); }
.prj-vis__link svg { width: 14px; height: 8px; }

@media (max-width: 980px) {
  .prj-vis__grid { grid-template-columns: repeat(2, 1fr); }
  .prj-vis__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 620px) {
  .prj-vis__grid { grid-template-columns: 1fr; }
  .prj-vis__media { aspect-ratio: 3 / 2; min-height: 230px; }
}/* ==============================================
   PRJ-GRID — Card grid met header stats (Style 3)
   ============================================== */


.prj-grid { padding: clamp(3rem, 5.5vw, 5rem) 0 clamp(3.5rem, 6vw, 5.5rem); }
.prj-grid--dark  { background: var(--color-primary); }
.prj-grid--light { background: #f5f5f3; }/* Header: label + title left, stats right */


.prj-grid__head {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.prj-grid__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.55rem;
}
.prj-grid__h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0 0 0.6rem;
  -webkit-font-smoothing: antialiased;
}
.prj-grid--dark  .prj-grid__h2 { color: #fff; }
.prj-grid--light .prj-grid__h2 { color: var(--color-primary); }
.prj-grid__sub {
  font-size: 0.9rem;
  line-height: 1.65;
  max-width: 42ch;
  margin: 0;
}
.prj-grid--dark  .prj-grid__sub { color: rgba(255,255,255,0.45); }
.prj-grid--light .prj-grid__sub { color: rgba(0,0,0,0.45); }/* Stats block */


.prj-grid__stats {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  flex-shrink: 0;
  align-items: flex-start;
}
.prj-grid__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}
.prj-grid__stat-icon {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  margin-bottom: 0.35rem;
}
.prj-grid__stat-val {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.prj-grid--dark  .prj-grid__stat-val { color: #fff; }
.prj-grid--light .prj-grid__stat-val { color: var(--color-primary); }
.prj-grid__stat-label {
  font-size: 0.72rem;
  line-height: 1.35;
}
.prj-grid--dark  .prj-grid__stat-label { color: rgba(255,255,255,0.4); }
.prj-grid--light .prj-grid__stat-label { color: rgba(0,0,0,0.4); }/* Filter bar — dnt-tabs stijl */


.prj-grid__bar {
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem;
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
  width: fit-content;
  margin: 0 auto clamp(1.25rem, 2.5vw, 2rem);
}
.prj-grid__bar::-webkit-scrollbar { display: none; }
.prj-grid--dark .prj-grid__bar {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
}
.prj-grid--light .prj-grid__bar {
  border: 1px solid rgba(0,0,0,0.09);
  background: rgba(255,255,255,0.86);
}
.prj-grid__tab {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s, background 0.18s;
}
.prj-grid--dark .prj-grid__tab       { color: rgba(255,255,255,0.48); }
.prj-grid--dark .prj-grid__tab:hover { color: rgba(255,255,255,0.82); }
.prj-grid--light .prj-grid__tab       { color: rgba(0,0,0,0.45); }
.prj-grid--light .prj-grid__tab:hover { color: rgba(0,0,0,0.78); }
.prj-grid__tab.is-active {
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent);
}/* Card grid */


.prj-grid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}/* Card */


.prj-grid__card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 16px -4px rgba(0,0,0,0.14);
  transition: transform 0.32s cubic-bezier(.16,1,.3,1), box-shadow 0.32s;
}
@media (hover: hover) and (pointer: fine) {
  .prj-grid__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 48px -10px rgba(0,0,0,0.28);
  }
}/* Image area */


.prj-grid__img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: rgba(128,128,128,0.1);
}
.prj-grid__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(.16,1,.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .prj-grid__card:hover .prj-grid__img img { transform: scale(1.06); }
}
.prj-grid__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-family: var(--font-heading);
  color: rgba(0,0,0,0.1);
}/* Category badge */


.prj-grid__badge {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  background: rgba(8,8,12,0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.65rem 0.28rem 0.55rem;
  border-radius: 999px;
}
.prj-grid__badge svg { width: 10px; height: 10px; flex-shrink: 0; }/* Card footer */


.prj-grid__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem 0.9rem 1.05rem;
  background: #fff;
}
.prj-grid__foot-info { min-width: 0; }
.prj-grid__title {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: #0d0d0d;
  line-height: 1.3;
  margin: 0 0 0.22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.prj-grid__loc {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.72rem;
  color: rgba(0,0,0,0.42);
}
.prj-grid__loc svg { width: 11px; height: 11px; flex-shrink: 0; color: var(--color-accent); }/* Arrow button */


.prj-grid__arrow {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent);
  border: none;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(.16,1,.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .prj-grid__card:hover .prj-grid__arrow { transform: scale(1.12); }
}
.prj-grid__arrow svg { width: 14px; height: 14px; }/* CTA bar */


.prj-grid__cta {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 1.5rem;
  border-radius: 14px;
}
.prj-grid--dark  .prj-grid__cta {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.prj-grid--light .prj-grid__cta {
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.07);
}
.prj-grid__cta-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.prj-grid__cta-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.prj-grid--dark  .prj-grid__cta-icon { color: var(--color-accent); }
.prj-grid--light .prj-grid__cta-icon { color: var(--color-accent); }
.prj-grid__cta-left strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
}
.prj-grid--dark  .prj-grid__cta-left strong { color: #fff; }
.prj-grid--light .prj-grid__cta-left strong { color: var(--color-primary); }
.prj-grid__cta-left span {
  display: block;
  font-size: 0.78rem;
  margin-top: 0.1rem;
}
.prj-grid--dark  .prj-grid__cta-left span { color: rgba(255,255,255,0.42); }
.prj-grid--light .prj-grid__cta-left span { color: rgba(0,0,0,0.42); }
.prj-grid__cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.35rem;
  border-radius: 10px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.2s;
}
.prj-grid__cta-btn:hover { opacity: 0.88; }/* Clickable cards */


.prj-grid__card { cursor: pointer; }/* Responsive */


@media (max-width: 900px) {
  .prj-grid__head { grid-template-columns: 1fr; }
  .prj-grid__stats { flex-wrap: wrap; gap: 1rem 1.75rem; }
  .prj-grid__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .prj-grid__grid { grid-template-columns: 1fr; }
  .prj-grid__cta { flex-direction: column; align-items: flex-start; }
  .prj-grid__cta-btn { width: 100%; justify-content: center; }
}/* ==============================================
   PRJ-AGO — Agency 2-col (DIEGO stijl, stijl 8/9)
   ============================================== */


.prj-ago { padding: clamp(3rem, 5.5vw, 5rem) 0 clamp(3.5rem, 6vw, 5.5rem); }
.prj-ago--dark  { background: var(--color-primary); }
.prj-ago--light { background: #fff; }/* Heading */


.prj-ago__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.prj-ago__h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
.prj-ago--dark  .prj-ago__h2 { color: #fff; }
.prj-ago--light .prj-ago__h2 { color: #0d0d0d; }/* Filter bar */


.prj-ago__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
}
.prj-ago__tab {
  padding: 0.4rem 1.05rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.prj-ago--dark .prj-ago__tab {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.55);
}
.prj-ago--dark .prj-ago__tab.is-active,
.prj-ago--dark .prj-ago__tab:hover {
  background: #fff;
  border-color: #fff;
  color: var(--color-primary);
}
.prj-ago--light .prj-ago__tab {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.16);
  color: rgba(0,0,0,0.5);
}
.prj-ago--light .prj-ago__tab.is-active,
.prj-ago--light .prj-ago__tab:hover {
  background: #0d0d0d;
  border-color: #0d0d0d;
  color: #fff;
}/* Grid */


.prj-ago__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
}
.prj-ago__card { display: flex; flex-direction: column; }
.prj-ago__media {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(128,128,128,0.1);
  margin-bottom: 0.85rem;
}
.prj-ago__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s cubic-bezier(.16,1,.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .prj-ago__card:hover .prj-ago__media img { transform: scale(1.04); }
}
.prj-ago__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 700;
}
.prj-ago--dark  .prj-ago__placeholder { color: rgba(255,255,255,0.12); }
.prj-ago--light .prj-ago__placeholder { color: rgba(0,0,0,0.1); }/* Info below image */


.prj-ago__info { display: flex; flex-direction: column; gap: 0.35rem; }
.prj-ago__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid;
  padding-bottom: 0.55rem;
}
.prj-ago--dark  .prj-ago__top { border-color: rgba(255,255,255,0.1); }
.prj-ago--light .prj-ago__top { border-color: rgba(0,0,0,0.1); }
.prj-ago__title {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
.prj-ago--dark  .prj-ago__title { color: #fff; }
.prj-ago--light .prj-ago__title { color: #0d0d0d; }
.prj-ago__tags {
  font-size: 0.75rem;
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}
.prj-ago--dark  .prj-ago__tags { color: rgba(255,255,255,0.4); }
.prj-ago--light .prj-ago__tags { color: rgba(0,0,0,0.4); }
.prj-ago__desc {
  font-size: 0.83rem;
  line-height: 1.6;
  margin: 0;
}
.prj-ago--dark  .prj-ago__desc { color: rgba(255,255,255,0.45); }
.prj-ago--light .prj-ago__desc { color: rgba(0,0,0,0.5); }/* ==============================================
   PROJECT MODAL
   ============================================== */


.proj-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.proj-modal.is-open { opacity: 1; pointer-events: auto; }
.proj-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 12, 0.68);
  backdrop-filter: blur(10px);
}/* Card */


.proj-modal__card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  width: 100%;
  max-width: 920px;
  height: 80vh;
  max-height: 80vh;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 32px 80px -16px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.06);
  transform: scale(0.95) translateY(12px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.proj-modal.is-open .proj-modal__card { transform: scale(1) translateY(0); }/* Close button */


.proj-modal__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 20;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.1);
  color: #111;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.14);
  transition: background 0.18s, transform 0.18s;
}
@media (hover: hover) and (pointer: fine) {
  .proj-modal__close:hover { background: #fff; transform: scale(1.1); }
}/* ── Left panel: gallery ── */


.proj-modal__gallery {
  display: flex;
  flex-direction: column;
  background: #111;
  min-height: 0;
  overflow: hidden;
}
.proj-modal__main {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.proj-modal__track {
  display: flex;
  height: 100%;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}
.proj-modal__slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.proj-modal__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.proj-modal__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-weight: 700;
  color: rgba(255,255,255,0.1);
}/* Counter */


.proj-modal__counter {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 5;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}/* Prev / Next */


.proj-modal__prev,
.proj-modal__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: background 0.18s;
  z-index: 5;
}
.proj-modal__prev { left: 0.75rem; }
.proj-modal__next { right: 0.75rem; }
.proj-modal__prev:hover,
.proj-modal__next:hover { background: rgba(255,255,255,0.22); }/* Thumbnail strip */


.proj-modal__thumbs {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 0.75rem;
  background: #fff;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.proj-modal__thumbs::-webkit-scrollbar { display: none; }
.proj-modal__thumb {
  flex: 0 0 52px;
  height: 68px;
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  padding: 0;
  transition: border-color 0.18s;
}
.proj-modal__thumb.is-active { border-color: #000; }
.proj-modal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }/* ── Right panel: info ── */


.proj-modal__info {
  display: flex;
  flex-direction: column;
  background: #fafaf8;
  min-height: 0;
  overflow: hidden;
}
.proj-modal__info-scroll {
  flex: 1;
  overflow-y: auto;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  min-height: 0;
}
.proj-modal__cat {
  display: inline-block;
  color: var(--color-accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.65rem;
}
.proj-modal__title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 0.9rem;
  -webkit-font-smoothing: antialiased;
}
.proj-modal__desc {
  color: rgba(0,0,0,0.58);
  font-size: 0.9rem;
  line-height: 1.75;
  margin: 0 0 1.5rem;
}/* Meta rows */


.proj-modal__meta { border-top: 1px solid rgba(0,0,0,0.08); }
.proj-modal__meta-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.proj-modal__meta-icon {
  display: flex;
  align-items: center;
  color: var(--color-accent);
}
.proj-modal__meta-icon svg { width: 16px; height: 16px; }
.proj-modal__meta-label {
  font-size: 0.82rem;
  color: rgba(0,0,0,0.45);
}
.proj-modal__meta-value {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary);
  text-align: right;
}/* CTA bar */


.proj-modal__cta-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, var(--color-accent) 7%, #fafaf8);
  border-top: 1px solid rgba(0,0,0,0.07);
  flex-shrink: 0;
}
.proj-modal__cta-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
  min-width: 0;
}
.proj-modal__cta-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-accent);
}
.proj-modal__cta-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.proj-modal__cta-text strong {
  font-size: 0.82rem;
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proj-modal__cta-text span {
  font-size: 0.72rem;
  color: rgba(0,0,0,0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proj-modal__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.18s;
  flex-shrink: 0;
}
.proj-modal__cta-btn:hover { opacity: 0.85; }
.proj-modal__cta-btn svg { flex-shrink: 0; }/* Clickable cards */
.prj-vis__card,
.prj-edi__card { cursor: pointer; }/* Mobile */


@media (max-width: 640px) {
  .proj-modal { padding: 0; align-items: flex-end; }
  .proj-modal__card {
    grid-template-columns: 1fr;
    grid-template-rows: 56vw 1fr;
    height: 90vh;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
    max-width: 100%;
  }
  .proj-modal__info-scroll { padding: 1.1rem 1.1rem 0.5rem; }
  .proj-modal__title { font-size: 1.25rem; }
  .proj-modal__cta-bar { padding: 0.85rem 1rem; flex-wrap: wrap; gap: 0.6rem; }
  .proj-modal__cta-left { flex: 1 1 100%; }
  .proj-modal__cta-btn { width: 100%; justify-content: center; }
}

@media (max-width: 900px) {
  .svc-process__item,
  .svc-process__body,
  .svc-proof__layout,
  .projects-case-page-card{
    grid-template-columns: 1fr;
  }
  .svc-process__marker {
    justify-content: flex-start;
    padding-top: 0;
  }
  .svc-process__marker::before { display: none; }
  .svc-process__body {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .svc-process__link {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .svc-proof__intro { position: static; }
  .projects-case-page-media { min-height: 220px; }
}
@media (max-width: 560px) {
  .svc-process__body,
  .svc-proof__row {
    grid-template-columns: 1fr;
  }
  .svc-proof__row a { width: 100%; }
  .svc-proof__stats { grid-template-columns: 1fr; }
  .prj-vis__grid,
  .prj-ago__grid  { grid-template-columns: 1fr; }
  .prj-edi__grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .prj-edi__grid  { grid-template-columns: 1fr; }
}/* ==============================================
   HOMEPAGE SECTION STYLE VARIANTS
============================================== */


.projects-preview--cases {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  min-height: 700px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 10% 14%, color-mix(in srgb, var(--color-accent) 13%, transparent), transparent 30%),
    linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 92%, #101820) 0%, #050709 58%, color-mix(in srgb, var(--color-primary) 78%, #000) 100%);
  color: #fff;
  padding: clamp(2.2rem, 3.6vh, 3.4rem) 0;
}
.projects-preview--cases::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.026) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.28;
  mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 82%, transparent 100%);
}
.projects-preview--cases .container {
  position: relative;
  z-index: 1;
}
.projects-preview--cases .section-header {
  max-width: 760px;
  margin-bottom: clamp(1.3rem, 2.5vw, 2rem);
}
.projects-preview--cases .section-header--cases {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.projects-cases__all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex: 0 0 auto;
  min-height: 3.4rem;
  padding: 0 1.55rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 70%, transparent);
  border-radius: 0.7rem;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.26s cubic-bezier(0.16,1,0.3,1), background 0.26s ease, box-shadow 0.26s ease;
}
.projects-cases__all span {
  color: var(--color-accent);
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .projects-cases__all:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    box-shadow: 0 18px 44px rgba(0,0,0,0.3), 0 0 24px color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
  .projects-cases__all:hover span {
    transform: translateX(3px);
  }
}
@media (max-width: 640px) {
  .projects-preview--cases .section-header--cases {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
  }
}
.projects-preview--cases .section-header h2 {
  color: #fff;
  font-size: clamp(2.2rem, 4.2vw, 4.1rem);
  line-height: 0.98;
}
.projects-preview--cases .section-subtitle {
  color: rgba(255,255,255,0.58);
}
.projects-case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.95rem, 1.65vw, 1.35rem);
  margin-top: 0;
  align-items: stretch;
}
.projects-case-card {
  display: flex;
  flex-direction: column;
  min-height: clamp(20rem, 46vh, 26rem);
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.028));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 80px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.32s cubic-bezier(.16,1,.3,1), border-color 0.28s, box-shadow 0.32s;
}
@media (hover: hover) and (pointer: fine) {
  .projects-case-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--color-accent) 38%, rgba(255,255,255,0.13));
    box-shadow: 0 34px 90px rgba(0,0,0,0.42), 0 0 34px color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
}
.projects-case-media {
  height: clamp(14rem, 29vh, 17.5rem);
  flex: 0 0 auto;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
.projects-case-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.08) brightness(0.86);
  transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .projects-case-card:hover .projects-case-media img {
    transform: scale(1.045);
    filter: saturate(1) contrast(1.08) brightness(0.95);
  }
}
.projects-case-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.15rem, 1.8vw, 1.55rem);
}
.projects-case-kicker {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent) 88%, white);
}
.projects-case-body h3 {
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  line-height: 1.08;
  margin-bottom: 0.55rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.projects-case-body p {
  color: rgba(255,255,255,0.58);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.projects-preview--proof {
  background: var(--color-primary);
  color: white;
  padding: clamp(4rem, 8vw, 6rem) 0;
}
.projects-proof-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) 1.4fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.projects-proof-head h2 { color: white; }
.projects-proof-list { border-top: 1px solid rgba(255,255,255,0.12); }
.projects-proof-item {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.projects-proof-item span {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 800;
}
.projects-proof-item h3 {
  color: white;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
}
.projects-proof-item p {
  color: rgba(255,255,255,0.5);
  font-size: 0.82rem;
  margin: 0;
}
.about-section--proof {
  height: 100svh;
  min-height: 600px;
  padding: 0;
  display: flex;
  align-items: center;
}
.about-proof-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.about-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.7rem, 1.2vw, 1rem);
}
.about-proof-stat {
  padding: clamp(0.95rem, 1.8vw, 1.2rem);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.055);
}
.about-proof-stat strong {
  display: block;
  color: white;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.1vw, 1.95rem);
  line-height: 1;
}
.about-proof-stat span {
  display: block;
  margin-top: 0.45rem;
  color: rgba(255,255,255,0.52);
  font-size: 0.8rem;
}/* About mascot proof */


.abt {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.8rem, 4vh, 3rem) 0;
  background: #141110;
  color: #fff;
}

.abt__glow {
  position: absolute;
  top: -10%;
  right: 12%;
  width: 40vw;
  height: 40vw;
  max-width: 640px;
  max-height: 640px;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 62%);
  filter: blur(30px);
}

.abt__inner { position: relative; z-index: 1; }

.abt__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.abt__eyebrow i {
  display: block;
  width: 2.6rem;
  height: 1px;
  background: color-mix(in srgb, var(--color-accent) 55%, transparent);
}

/* ── Bovenblok: copy / mascotte / paneel ── */
.abt__top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr) minmax(0, 0.95fr);
  grid-template-areas:
    "copy media panel"
    "usps media panel";
  align-items: start;
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  margin-bottom: clamp(1.4rem, 3vh, 2.2rem);
}

.abt__copy { grid-area: copy; align-self: end; max-width: 30rem; }
.abt__media { grid-area: media; }
.abt__panel { grid-area: panel; }
.abt__usps { grid-area: usps; align-self: start; }

.abt__copy h2 {
  margin: 0 0 1.1rem;
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.4vw, 3.1rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
}

.abt__copy h2 em { font-style: normal; color: var(--color-accent); }

.abt__copy p {
  margin: 0 0 0.85rem;
  color: rgba(255,255,255,0.62);
  font-size: 0.94rem;
  line-height: 1.6;
}

.abt__sign { margin: 1.2rem 0; }

.abt__sign-name {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1;
}

.abt__sign-role {
  display: block;
  margin-top: 0.35rem;
  color: rgba(255,255,255,0.55);
  font-size: 0.8rem;
}

.abt__usps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.3rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.09);
}

.abt__usp { display: flex; flex-direction: column; gap: 0.55rem; }

.abt__usp-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.abt__usp-icon svg { width: 1.1rem; height: 1.1rem; color: var(--color-accent); }
.abt__usp strong { display: block; color: #fff; font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; }
.abt__usp small { display: block; margin-top: 0.15rem; color: rgba(255,255,255,0.5); font-size: 0.75rem; line-height: 1.35; }

/* ── Mascotte ── */
.abt__media {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.abt__media-avatar {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.55));
}

/* ── Rechter statistiekenpaneel ── */
.abt__panel {
  align-self: center;
  display: flex;
  flex-direction: column;
  padding: 0.4rem clamp(1.3rem, 1.8vw, 1.8rem);
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
}

.abt__panel-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.abt__panel-row:last-child { border-bottom: 0; }

.abt__panel-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 38%, transparent);
}

.abt__panel-icon svg { width: 1.3rem; height: 1.3rem; color: var(--color-accent); }
.abt__panel-row strong { display: block; color: #fff; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; line-height: 1.2; }
.abt__panel-row small { display: block; margin-top: 0.25rem; color: rgba(255,255,255,0.52); font-size: 0.82rem; line-height: 1.4; }

/* ── Procesblok onderaan ── */
.abt__proc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.45fr);
  align-items: center;
  gap: clamp(1.8rem, 3.5vw, 3.5rem);
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.6rem, 3vw, 2.6rem);
  border-radius: 1.4rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
}

.abt__proc-head h3 {
  margin: 0 0 1.2rem;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.3vw, 2.15rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
}

.abt__proc-head h3 em { font-style: normal; color: var(--color-accent); }

.abt__proc-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  color: var(--color-accent);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 0.26s ease, color 0.26s ease, transform 0.26s ease;
}

.abt__proc-cta:hover { background: var(--color-accent); color: var(--color-primary); transform: translateY(-2px); }

.abt__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.8rem);
  margin: 0;
  padding: 1.2rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.abt__step { position: relative; }

.abt__step-num {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-accent);
}

.abt__step-num::before {
  content: "";
  position: absolute;
  top: -1.2rem;
  left: 0;
  width: 1.6rem;
  height: 2px;
  background: var(--color-accent);
}

.abt__step-icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  margin-bottom: 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
}

.abt__step-icon svg { width: 1.2rem; height: 1.2rem; color: var(--color-accent); }
.abt__step strong { display: block; margin-bottom: 0.35rem; color: #fff; font-family: var(--font-heading); font-size: 0.98rem; font-weight: 700; }
.abt__step p { margin: 0; color: rgba(255,255,255,0.55); font-size: 0.82rem; line-height: 1.45; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .abt__top { grid-template-columns: 1fr 1fr; }
  .abt__panel { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; padding: 0.4rem 1.5rem; }
  .abt__panel-row { flex: 1 1 45%; border-bottom: 0; }
  .abt__proc { grid-template-columns: 1fr; }
  .abt__steps { border-top: 0; padding-top: 0; }
}

@media (max-width: 760px) {
  /* Geen geforceerde volledige-schermhoogte/centrering meer op mobiel; alles gecentreerd */
  .abt {
    min-height: 0;
    justify-content: flex-start;
    padding: clamp(2.8rem, 8vh, 4rem) 0;
  }
  .abt__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-template-areas: none;
    gap: 1.5rem;
  }

  .abt__copy { order: 1; max-width: 100%; align-self: stretch; text-align: center; }
  .abt__eyebrow { justify-content: center; gap: 0; }
  .abt__eyebrow i { display: none; }
  .abt__sign { text-align: center; }

  /* Avatar tussen signature en USP's — kleiner en gecentreerd */
  .abt__media { order: 2; min-height: 0; margin: 0; }
  .abt__media-avatar { height: auto; max-height: 12rem; }

  .abt__usps { display: none; }

  .abt__panel { display: none; }

  /* Procesblok compacter en gecentreerd (2×2 i.p.v. losse rijen) */
  .abt__proc { text-align: center; }
  .abt__steps { grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; }
  .abt__step { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .abt__step-num { margin-bottom: 0.4rem; }
  .abt__step-num::before { display: none; }
  .abt__step-icon { margin-bottom: 0.6rem; }
}
/* About light mascot */



.about-light {
  --about-blue: var(--color-accent);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(2.25rem, 4vw, 3.5rem) 0;
  background:
    radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--color-accent) 9%, transparent), transparent 28%),
    radial-gradient(circle at 18% 86%, color-mix(in srgb, var(--color-accent) 6%, transparent), transparent 28%),
    linear-gradient(135deg, #fbf8f4 0%, #f6f2ee 58%, #fbf9f6 100%);
  color: #132032;
}

.about-light__inner {
  position: relative;
}

.about-light__main {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.82fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.about-light__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: clamp(0.85rem, 1.4vw, 1.2rem);
  color: var(--about-blue);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.about-light__eyebrow::after {
  content: "";
  width: 1.8rem;
  height: 1px;
  background: color-mix(in srgb, var(--color-accent) 42%, transparent);
}

.about-light__copy h2 {
  max-width: 15ch;
  margin: 0 0 clamp(0.8rem, 1.25vw, 1.05rem);
  color: #142033;
  font-family: var(--font-heading);
  font-size: clamp(2.55rem, 4.15vw, 4rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0;
}

.about-light__copy h2 strong,
.about-light__copy h2 em,
.about-light__copy h2 span {
  color: var(--about-blue);
  font-style: normal;
}

.about-light__copy p {
  max-width: 56ch;
  margin: 0 0 clamp(1rem, 1.7vw, 1.35rem);
  color: rgba(19,32,50,0.72);
  font-size: clamp(0.94rem, 1.05vw, 1.02rem);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.about-light__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.55rem, 0.85vw, 0.75rem);
  margin-bottom: clamp(1rem, 1.65vw, 1.45rem);
}

.about-light__card {
  min-height: clamp(11.8rem, 22vh, 15rem);
  padding: clamp(1rem, 1.45vw, 1.25rem);
  border: 1px solid rgba(17,32,50,0.06);
  border-radius: 0.85rem;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 20px 46px rgba(34,28,20,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
  backdrop-filter: blur(12px);
}

.about-light__card > span {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: #f2f1f0;
  color: var(--about-blue);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.about-light__card svg {
  width: 1.45rem;
  height: 1.45rem;
}

.about-light__card h3 {
  margin: 0 0 0.8rem;
  color: #152235;
  font-family: var(--font-body);
  font-size: clamp(0.88rem, 0.95vw, 1rem);
  font-weight: 800;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.about-light__card p {
  margin: 0;
  color: rgba(19,32,50,0.66);
  font-size: clamp(0.76rem, 0.85vw, 0.84rem);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.about-light__card::after {
  content: "";
  display: block;
  width: 2.15rem;
  height: 2px;
  margin-top: 0.95rem;
  background: var(--about-blue);
}

.about-light__actions {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.about-light__cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.25rem;
  padding: 0 1.6rem;
  border-radius: 0.8rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 95%, white), color-mix(in srgb, var(--color-accent) 78%, #000));
  color: var(--color-primary);
  font-weight: 800;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.about-light__social {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.about-light__social span {
  display: block;
  width: 2rem;
  height: 2rem;
  margin-left: -0.5rem;
  border-radius: 999px;
  border: 2px solid #fff;
  background:
    radial-gradient(circle at 50% 35%, #d9a17c 0 19%, transparent 20%),
    radial-gradient(circle at 50% 100%, #1f2937 0 40%, transparent 41%),
    #f5f5f5;
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.about-light__social span:first-child {
  margin-left: 0;
}

.about-light__social p {
  margin: 0;
  color: rgba(19,32,50,0.82);
  font-size: 0.86rem;
  line-height: 1.35;
  -webkit-line-clamp: unset;
}

.about-light__visual {
  position: relative;
}

.about-light__panel {
  position: relative;
  min-height: clamp(30rem, 62vh, 43rem);
  border-radius: 1.4rem;
  background:
    radial-gradient(circle at 30% 35%, rgba(255,255,255,0.1), transparent 24%),
    linear-gradient(145deg, #172332, #101923 66%, #0b1118);
  overflow: hidden;
  box-shadow: 0 34px 90px rgba(27,35,45,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
}

.about-light__panel::before {
  content: "W";
  position: absolute;
  right: -0.08em;
  bottom: -0.28em;
  color: rgba(255,255,255,0.045);
  font-family: var(--font-heading);
  font-size: clamp(18rem, 28vw, 32rem);
  font-weight: 900;
  line-height: 1;
}

.about-light__dots {
  position: absolute;
  top: 2.1rem;
  right: 2.5rem;
  width: 6.2rem;
  height: 5.2rem;
  background-image: radial-gradient(var(--about-blue) 1.5px, transparent 1.5px);
  background-size: 1.15rem 1.15rem;
  opacity: 0.85;
}

.about-light__panel > img {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -1.5rem;
  transform: translateX(-50%);
  width: min(92%, clamp(300px, 35vw, 560px));
  height: auto;
  filter: drop-shadow(0 30px 70px rgba(0,0,0,0.4));
}

.about-light__floating {
  position: absolute;
  z-index: 2;
  left: -1.35rem;
  bottom: clamp(2.1rem, 4vw, 4rem);
  width: clamp(7.6rem, 10vw, 9.4rem);
  padding: 1.25rem 1rem;
  border-radius: 1rem;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 24px 60px rgba(20,28,38,0.18);
  text-align: center;
}

.about-light__floating > span {
  position: absolute;
  left: 50%;
  top: -1.45rem;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 999px;
  background: var(--about-blue);
  color: #fff;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--color-accent) 28%, transparent);
}

.about-light__floating svg {
  width: 1.35rem;
  height: 1.35rem;
}

.about-light__floating p {
  margin: 1.1rem 0 0.35rem;
  color: rgba(19,32,50,0.72);
  font-size: 0.78rem;
  -webkit-line-clamp: unset;
}

.about-light__floating strong {
  display: block;
  color: var(--about-blue);
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1;
}

.about-light__floating small {
  display: block;
  color: #142033;
  font-size: 0.9rem;
  line-height: 1.25;
}

.about-light__floating::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  margin: 1rem auto 0;
  background: var(--about-blue);
}

.about-light__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
  border-radius: 1rem;
  background: rgba(255,255,255,0.84);
  border: 1px solid rgba(17,32,50,0.06);
  box-shadow: 0 24px 70px rgba(34,28,20,0.09), inset 0 1px 0 rgba(255,255,255,0.92);
  overflow: hidden;
}

.about-light__stats div {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
  padding: clamp(1rem, 1.7vw, 1.35rem) clamp(1rem, 2vw, 1.65rem);
  border-right: 1px solid rgba(19,32,50,0.12);
}

.about-light__stats div:last-child {
  border-right: 0;
}

.about-light__stats svg {
  grid-row: span 2;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.58rem;
  border-radius: 999px;
  background: #f5f3f1;
  color: var(--about-blue);
}

.about-light__stats strong {
  color: #142033;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.2vw, 2.2rem);
  line-height: 1;
}

.about-light__stats span {
  color: rgba(19,32,50,0.68);
  font-size: 0.92rem;
}

@media (max-width: 1120px) {
  .about-light {
    height: auto;
    min-height: 100vh;
  }
  .about-light__main {
    grid-template-columns: 1fr;
  }
  .about-light__panel {
    min-height: 31rem;
  }
  .about-light__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-light__stats div:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 760px) {
  .about-light__cards,
  .about-light__stats {
    grid-template-columns: 1fr;
  }
  .about-light__actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .about-light__floating {
    left: 1rem;
  }
  .about-light__stats div {
    border-right: 0;
    border-top: 1px solid rgba(19,32,50,0.1);
  }
  .about-light__stats div:first-child {
    border-top: 0;
  }
}
.about-timeline-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 5rem);
}
.about-timeline-list { border-left: 1px solid rgba(255,255,255,0.12); }
.about-timeline-item {
  position: relative;
  padding: 0 0 2rem 1.5rem;
}
.about-timeline-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 0.25rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--color-accent) 60%, transparent);
}
.about-timeline-item span {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.72rem;
}
.about-timeline-item h3 {
  color: white;
  margin: 0.35rem 0;
}
.about-timeline-item p {
  color: rgba(255,255,255,0.56);
  max-width: 46ch;
}
@media (max-width: 900px) {
  .projects-preview--cases {
    height: auto;
    min-height: 100svh;
  }
  .projects-case-grid {
    grid-template-columns: 1fr;
  }
  .projects-proof-layout,
  .about-proof-layout,
  .about-timeline-layout {
    grid-template-columns: 1fr;
  }
  .projects-proof-item {
    grid-template-columns: 2.5rem 1fr;
  }
  .projects-proof-item p {
    grid-column: 2;
  }
}/* Dots indicator */


.reviews-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
}

.reviews-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  transition: width 0.35s cubic-bezier(0.16,1,0.3,1),
              background 0.3s ease;
  cursor: pointer;
  border: none;
  padding: 0;
}
.reviews-dot.is-active {
  width: 20px;
  border-radius: 3px;
  background: var(--color-accent);
}

@media (max-width: 768px) {
  .reviews-carousel-track { padding: 0.5rem 10vw 1.5rem; }
  .review-card { flex: 0 0 76vw; max-width: none; scroll-snap-align: center; }
  .reviews-carousel-outer::before,
  .reviews-carousel-outer::after { display: none; }
}/* ═══════════════════════════════════════════
   FAQ SECTION VARIANTS
═══════════════════════════════════════════ */


.faq-blue {
  --faq-blue: var(--color-accent);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(3rem, 5vw, 5rem) 0;
  background:
    radial-gradient(circle at 9% 18%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 34%),
    radial-gradient(circle at 92% 84%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 30%),
    var(--dark-bg);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.faq-blue::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(circle at 50% 45%, black, transparent 76%);
  opacity: 0.45;
  pointer-events: none;
}

.faq-blue__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.8rem, 3vw, 2.8rem);
}

.faq-blue__header {
  max-width: 36rem;
}

.faq-blue__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: clamp(1.4rem, 2.3vw, 2rem);
  color: var(--faq-blue);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.faq-blue__eyebrow::before {
  content: "";
  width: 2.1rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.faq-blue__header h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5.8vw, 5.15rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-shadow: 0 20px 70px rgba(0,0,0,0.45);
}

.faq-blue__header p {
  max-width: 34rem;
  margin: clamp(1.1rem, 1.8vw, 1.45rem) 0 0;
  color: rgba(255,255,255,0.72);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.55;
}

.faq-blue__header a {
  color: var(--faq-blue);
  text-decoration: none;
  transition: color 0.2s;
}

.faq-blue__header a:hover {
  color: #fff;
}

.faq-blue__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem clamp(1rem, 2.2vw, 1.8rem);
  align-items: start;
}

.faq-blue__item {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 1.05rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    rgba(7,18,31,0.76);
  box-shadow: 0 20px 60px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  transition: border-color 0.24s, box-shadow 0.24s, transform 0.24s;
}

@media (hover: hover) and (pointer: fine) {
  .faq-blue__item:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.2);
  }
}

.faq-blue__item.is-open {
  border-color: color-mix(in srgb, var(--faq-blue) 70%, rgba(255,255,255,0.12));
  box-shadow: 0 26px 80px rgba(0,0,0,0.28), 0 0 34px color-mix(in srgb, var(--color-accent) 13%, transparent), inset 0 1px 0 rgba(255,255,255,0.05);
}

.faq-blue__question {
  width: 100%;
  min-height: clamp(4.3rem, 7vh, 5.7rem);
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) 1.8rem;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem clamp(1.1rem, 1.9vw, 1.6rem);
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.faq-blue__question strong {
  font-size: clamp(1rem, 1.2vw, 1.16rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.faq-blue__icon,
.faq-blue__plus {
  position: relative;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
}

.faq-blue__icon {
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--faq-blue);
  background: rgba(255,255,255,0.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.faq-blue__icon::before,
.faq-blue__icon::after,
.faq-blue__plus::before,
.faq-blue__plus::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 999px;
}

.faq-blue__icon::before,
.faq-blue__plus::before {
  width: 1rem;
  height: 2px;
}

.faq-blue__icon::after {
  width: 2px;
  height: 1rem;
  transition: transform 0.22s cubic-bezier(.16,1,.3,1), opacity 0.22s;
}

.faq-blue__plus {
  justify-self: end;
  width: 1.6rem;
  height: 1.6rem;
  color: rgba(255,255,255,0.88);
}

.faq-blue__plus::after {
  width: 2px;
  height: 1rem;
  transition: transform 0.22s cubic-bezier(.16,1,.3,1), opacity 0.22s;
}

.faq-blue__item.is-open .faq-blue__icon {
  border-color: var(--faq-blue);
  color: var(--faq-blue);
  box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 18%, transparent), inset 0 1px 0 rgba(255,255,255,0.08);
}

.faq-blue__item.is-open .faq-blue__icon::after {
  transform: rotate(90deg) scaleY(0);
  opacity: 0;
}

.faq-blue__item.is-open .faq-blue__plus::after {
  transform: rotate(90deg) scaleY(0);
  opacity: 0;
}

.faq-blue__answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.32s cubic-bezier(0.16,1,0.3,1), opacity 0.24s ease;
}
.faq-blue__item.is-open .faq-blue__answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-blue__answer p {
  min-height: 0;
  overflow: hidden;
  max-width: 38rem;
  margin: -0.25rem 0 0;
  padding: 0 clamp(1.1rem, 1.9vw, 1.6rem) clamp(1.25rem, 1.8vw, 1.6rem) calc(clamp(1.1rem, 1.9vw, 1.6rem) + 3.2rem);
  color: rgba(255,255,255,0.72);
  font-size: clamp(0.96rem, 1.1vw, 1.08rem);
  line-height: 1.65;
}

.faq-blue__contact {
  width: min(64rem, 82%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.35rem;
  padding: clamp(1.25rem, 2vw, 1.55rem) clamp(1.5rem, 2.6vw, 2rem);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 1.05rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.052), rgba(255,255,255,0.018)),
    rgba(7,18,31,0.74);
  box-shadow: 0 24px 70px rgba(0,0,0,0.24);
}

.faq-blue__contact-icon {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 999px;
  color: var(--faq-blue);
  border: 1px solid color-mix(in srgb, var(--faq-blue) 55%, rgba(255,255,255,0.16));
  background: color-mix(in srgb, var(--faq-blue) 8%, transparent);
}

.faq-blue__contact-icon svg {
  width: 1.55rem;
  height: 1.55rem;
}

.faq-blue__contact strong {
  display: block;
  color: #fff;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.faq-blue__contact p {
  margin: 0.25rem 0 0;
  color: rgba(255,255,255,0.68);
}

.faq-blue__contact a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--faq-blue);
  font-size: 1.05rem;
  font-weight: 760;
  text-decoration: none;
  white-space: nowrap;
  transition: gap 0.22s, color 0.22s;
}

.faq-blue__contact a:hover {
  gap: 1.35rem;
  color: #fff;
}

@media (max-width: 1100px) {
  .faq-blue {
    min-height: 0;
    padding: clamp(4rem, 8vw, 6rem) 0;
  }
  .faq-blue__grid {
    grid-template-columns: 1fr;
  }
  .faq-blue__contact {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .faq-blue__header { max-width: 100%; text-align: center; }
  .faq-blue__eyebrow { justify-content: center; gap: 0; }
  .faq-blue__eyebrow::before { display: none; }
  .faq-blue__question {
    grid-template-columns: minmax(0, 1fr) 1.7rem;
  }
  .faq-blue__icon {
    display: none;
  }
  .faq-blue__answer p {
    padding-left: clamp(1.1rem, 1.9vw, 1.6rem);
  }
  .faq-blue__contact {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .faq-blue__contact a {
    justify-self: start;
  }
}/* ── faq-blue light modifier ── */


.faq-blue.faq-blue--light {
  background:
    radial-gradient(circle at 9% 18%, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 34%),
    radial-gradient(circle at 92% 84%, color-mix(in srgb, var(--color-accent) 4%, transparent), transparent 30%),
    var(--light-bg);
  color: var(--color-primary);
}
.faq-blue--light::before { display: none; }
.faq-blue--light .faq-blue__header h2 { color: var(--color-primary); text-shadow: none; }
.faq-blue--light .faq-blue__header p   { color: rgba(0,0,0,0.62); }
.faq-blue--light .faq-blue__header a   { color: var(--color-accent); }
.faq-blue--light .faq-blue__header a:hover { color: var(--color-primary); }
.faq-blue--light .faq-blue__item {
  border-color: rgba(0,0,0,0.09);
  background: rgba(255,255,255,0.88);
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.faq-blue--light .faq-blue__item:hover { border-color: rgba(0,0,0,0.16); }
.faq-blue--light .faq-blue__item.is-open {
  border-color: color-mix(in srgb, var(--color-accent) 50%, rgba(0,0,0,0.09));
  box-shadow: 0 10px 36px rgba(0,0,0,0.1), 0 0 24px color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.faq-blue--light .faq-blue__question { color: var(--color-primary); }
.faq-blue--light .faq-blue__icon {
  border-color: rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.03);
  box-shadow: none;
}
.faq-blue--light .faq-blue__plus { color: rgba(0,0,0,0.65); }
.faq-blue--light .faq-blue__answer p { color: rgba(0,0,0,0.62); }
.faq-blue--light .faq-blue__contact {
  border-color: rgba(0,0,0,0.09);
  background: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,0.07);
}
.faq-blue--light .faq-blue__contact strong { color: var(--color-primary); }
.faq-blue--light .faq-blue__contact p      { color: rgba(0,0,0,0.62); }
.faq-blue--light .faq-blue__contact a      { color: var(--color-accent); }
.faq-blue--light .faq-blue__contact a:hover { color: var(--color-primary); }/* ═══════════════════════════════════════════
   CTA SECTION VARIANTS — Compact pre-footer band
═══════════════════════════════════════════ *//* ── Variant 1: Dark bar ── */




.cta-frame {
  --cta-blue: var(--color-accent);
  padding: clamp(2.5rem, 4.5vw, 4rem) 0;
  background:
    radial-gradient(circle at 72% 50%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 38%),
    var(--dark-bg);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.cta-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
  opacity: 0.4;
  pointer-events: none;
}

.cta-frame__box {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.cta-frame__left {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cta-frame__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--color-accent);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cta-frame__eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.cta-frame h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.cta-frame p {
  max-width: 52ch;
  margin: 0;
  color: rgba(255,255,255,0.62);
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  line-height: 1.55;
}

.cta-frame__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  flex-shrink: 0;
}

.cta-frame__button {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  white-space: nowrap;
  min-height: 3rem;
  padding: 0 1.55rem;
  border-radius: 0.6rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 95%, white), color-mix(in srgb, var(--color-accent) 80%, #000));
  color: var(--color-primary);
  font-size: 0.92rem;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 12px 36px color-mix(in srgb, var(--color-accent) 28%, transparent);
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s;
}

@media (hover: hover) and (pointer: fine) {
  .cta-frame__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--color-accent) 38%, transparent);
  }
}

.cta-frame__button svg {
  width: 1.1rem;
  height: 1.1rem;
}

.cta-frame__button span { font-size: inherit; font-weight: 400; }

.cta-frame__proof {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.cta-frame__proof span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(255,255,255,0.52);
  font-size: 0.8rem;
  white-space: nowrap;
}

.cta-frame__proof svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-accent);
  flex-shrink: 0;
}/* ── cta-frame light modifier ── */


.cta-frame.cta-frame--light {
  background: var(--light-bg);
  color: var(--color-primary);
}
.cta-frame--light::before { display: none; }
.cta-frame--light .cta-frame__eyebrow { color: var(--color-accent); }
.cta-frame--light h2 { color: var(--color-primary); }
.cta-frame--light p  { color: rgba(0,0,0,0.58); }
.cta-frame--light .cta-frame__proof span { color: rgba(0,0,0,0.48); }/* ── Variant 2: Light banner ── */


.cta-split {
  --cta-blue: var(--color-accent);
  padding: clamp(2.5rem, 4.5vw, 4rem) 0;
  background: var(--light-bg);
  position: relative;
}

.cta-split::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--color-accent) 50%, transparent) 20%,
    var(--color-accent) 50%,
    color-mix(in srgb, var(--color-accent) 50%, transparent) 80%,
    transparent);
}

.cta-split .container { width: 100%; }

.cta-split__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.8rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.8rem);
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,0.07);
  background: #fff;
  box-shadow: 0 8px 36px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
}

.cta-split__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
  color: var(--color-accent);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cta-split__eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 50%, transparent);
}

.cta-split h2 {
  max-width: 18ch;
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.cta-split p {
  max-width: 54ch;
  margin: 0.5rem 0 0;
  color: var(--color-text-muted);
  font-size: clamp(0.88rem, 1vw, 0.98rem);
  line-height: 1.55;
}

.cta-split__button {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 3rem;
  padding: 0 1.55rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: 0.92rem;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--color-accent) 22%, transparent);
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s;
}

@media (hover: hover) and (pointer: fine) {
  .cta-split__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--color-accent) 32%, transparent);
  }
}

@media (max-width: 760px) {
  .cta-frame__box,
  .cta-split__box {
    grid-template-columns: 1fr;
  }
  .cta-frame__right {
    align-items: flex-start;
  }
  .cta-frame__proof {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}/* ── cta-split dark modifier ── */


.cta-split.cta-split--dark {
  background: var(--dark-bg);
}
.cta-split--dark .cta-split__box {
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 8px 36px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
}
.cta-split--dark h2 { color: #fff; }
.cta-split--dark p  { color: rgba(255,255,255,0.62); }/* ══════════════════════════════════════════════════════
   Quote page — light variant overrides
══════════════════════════════════════════════════════ */


.quote-section--light {
  background: var(--light-bg);
}
.quote-section--light .quote-steps {}
.quote-section--light .quote-step-num {
  background: rgba(0,0,0,0.07);
  color: var(--color-primary);
}
.quote-section--light .quote-step--active .quote-step-num {
  background: var(--color-accent);
  color: var(--color-primary);
}
.quote-section--light .quote-step-label { color: rgba(0,0,0,0.55); }
.quote-section--light .quote-step--active .quote-step-label { color: var(--color-primary); }
.quote-section--light .quote-step-divider { background: rgba(0,0,0,0.1); }
.quote-section--light .quote-avatar-block {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}
.quote-section--light .quote-form-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
.quote-section--light .form-label { color: var(--color-primary); }
.quote-section--light .form-control {
  background: #fff;
  border-color: rgba(0,0,0,0.15);
  color: var(--color-primary);
}
.quote-section--light .form-control::placeholder { color: rgba(0,0,0,0.3); }
.quote-section--light .form-control:focus { border-color: var(--color-accent); }
.quote-section--light .form-submit-note { color: rgba(0,0,0,0.4); }
.quote-section--light .quote-sidebar-card--glass {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.quote-section--light .quote-sidebar-label { color: var(--color-primary); }
.quote-section--light .why-us-item { color: rgba(0,0,0,0.7); }
.quote-section--light .why-us-check { background: color-mix(in srgb, var(--color-accent) 15%, transparent); color: var(--color-accent); }
.quote-section--light .quote-sidebar-card--dark {
  background: var(--dark-bg);
}
.quote-section--light .quote-avatar-caption { color: rgba(0,0,0,0.5); }
.quote-section--dark .why-us-item { color: rgba(255,255,255,0.7); }
.quote-section--dark .quote-avatar-caption { color: rgba(255,255,255,0.6); }/* ══════════════════════════════════════════════════════
   Contact page — light variant overrides
══════════════════════════════════════════════════════ */


.contact-section--light {
  background: var(--light-bg);
}
.contact-section--light .contact-info-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
.contact-section--light .contact-card-heading { color: var(--color-primary); }
.contact-section--light .contact-info-item p,
.contact-section--light .contact-info-item span { color: rgba(0,0,0,0.6); }
.contact-section--light .contact-info-item strong { color: var(--color-primary); }
.contact-section--light .contact-info-item a { color: var(--color-accent); }
.contact-section--light .contact-info-icon {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
}
.contact-section--light .contact-avatar-name strong { color: var(--color-primary); }
.contact-section--light .contact-avatar-name span { color: rgba(0,0,0,0.5); }
.contact-section--light .contact-form-wrapper {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  border-radius: 20px;
  padding: 2rem;
}
.contact-section--light .contact-form-header h3 { color: var(--color-primary); }
.contact-section--light .contact-form-header p { color: rgba(0,0,0,0.5); }
.contact-section--light .form-label { color: var(--color-primary); }
.contact-section--light .form-control {
  background: #fff;
  border-color: rgba(0,0,0,0.15);
  color: var(--color-primary);
}
.contact-section--light .form-control::placeholder { color: rgba(0,0,0,0.3); }
.contact-section--light .form-control:focus { border-color: var(--color-accent); }/* ═══════════════════════════════════════════
   CTA — Card style
═══════════════════════════════════════════ */


.cta-card {
  padding: clamp(2.5rem, 4.5vw, 4rem) 0;
  /* Mengelmoes van primary + accent — onderscheidt de CTA duidelijk van de footer */
  background:
    radial-gradient(ellipse at 82% 0%, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent 55%),
    radial-gradient(ellipse at 8% 100%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 50%),
    linear-gradient(120deg,
      color-mix(in srgb, var(--color-accent) 28%, var(--color-primary)) 0%,
      var(--color-primary) 48%,
      color-mix(in srgb, var(--color-accent) 18%, var(--color-primary)) 100%);
  border-top: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
}

.cta-card__inner {
  position: relative;
  overflow: hidden;
  border-radius: 1.35rem;
  display: grid;
  grid-template-columns: min(46%, 500px) 1fr;
  grid-template-rows: 1fr auto;
  min-height: 180px;
  background: var(--color-primary);
}/* Dark frosted left panel with accent border */


.cta-card__inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: min(46%, 500px);
  background: rgba(4, 10, 18, 0.60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-right: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  box-shadow: inset -24px 0 48px color-mix(in srgb, var(--color-accent) 10%, transparent);
  z-index: 2;
}

.cta-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  z-index: 0;
}

.cta-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(4,12,20,0.42) 0%, rgba(4,12,20,0.08) 55%, transparent 100%);
  z-index: 1;
}

.cta-card__copy {
  grid-column: 1;
  position: relative;
  z-index: 3;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.75rem, 3.5vw, 2.75rem) 1rem;
}

.cta-card__copy h2 {
  margin: 0 0 0.7rem;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.cta-card__copy p {
  margin: 0;
  color: rgba(255,255,255,0.64);
  font-size: clamp(0.88rem, 1vw, 0.98rem);
  line-height: 1.65;
  max-width: 38ch;
}

.cta-card__widget {
  grid-column: 1;
  position: relative;
  z-index: 3;
  padding: 0.75rem clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 1.75rem);
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: block;
}

.cta-card__widget-label,
.cta-card__widget-sub {
  display: none;
}

.cta-card__button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.35rem;
  border-radius: 0.65rem;
  background: #fff;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.93rem;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
}

@media (hover: hover) and (pointer: fine) {
  .cta-card__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.36);
    border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  }
}

.cta-card__button-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.45rem;
  background: var(--color-primary);
  color: #fff;
  flex-shrink: 0;
}

.cta-card__button-icon svg {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 640px) {
  .cta-card__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .cta-card__inner::before {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  }
}/* ═══════════════════════════════════════════
   CTA — Proof stats variant
═══════════════════════════════════════════ */


.cta-stats {
  padding: clamp(2.5rem, 4.5vw, 4rem) 0;
  background: var(--dark-bg);
  position: relative;
  overflow: hidden;
}

.cta-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black, transparent);
  opacity: 0.38;
  pointer-events: none;
}

.cta-stats__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.8rem, 3vw, 2.8rem) clamp(1.5rem, 3vw, 2.8rem);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 82% 44%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,0.048), rgba(255,255,255,0.016));
  box-shadow: 0 28px 80px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(14px);
}

.cta-stats__items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.cta-stats__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.9rem;
  align-items: center;
  padding: 1rem 1.4rem;
  border-right: 1px solid rgba(255,255,255,0.1);
}

.cta-stats__item:last-child {
  border-right: 0;
}

.cta-stats__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 44%, transparent);
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.cta-stats__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.cta-stats__item strong {
  display: block;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
  font-weight: 920;
  line-height: 1.08;
}

.cta-stats__item span {
  color: rgba(255,255,255,0.58);
  font-size: 0.82rem;
  line-height: 1.28;
}

.cta-stats__cta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.85rem;
  padding-left: clamp(1rem, 2vw, 2rem);
  border-left: 1px solid rgba(255,255,255,0.1);
}

.cta-stats__cta p {
  margin: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  font-weight: 760;
  line-height: 1.35;
  text-align: right;
  max-width: 18ch;
}

.cta-stats__button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
  min-height: 2.85rem;
  padding: 0 1.4rem;
  border-radius: 0.55rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 95%, white), color-mix(in srgb, var(--color-accent) 80%, #000));
  color: var(--color-primary);
  font-size: 0.88rem;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 10px 32px color-mix(in srgb, var(--color-accent) 26%, transparent);
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s;
}

@media (hover: hover) and (pointer: fine) {
  .cta-stats__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 44px color-mix(in srgb, var(--color-accent) 36%, transparent);
  }
}

@media (max-width: 1100px) {
  .cta-stats__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cta-stats__item:nth-child(2) { border-right: 0; }
  .cta-stats__item:nth-child(1),
  .cta-stats__item:nth-child(2) {
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
}

@media (max-width: 760px) {
  .cta-stats__inner {
    grid-template-columns: 1fr;
  }
  .cta-stats__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cta-stats__cta {
    align-items: flex-start;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1.2rem;
  }
  .cta-stats__cta p { text-align: left; }
}/* ── cta-stats light modifier ── */


.cta-stats.cta-stats--light {
  background: var(--light-bg);
}
.cta-stats--light::before { display: none; }
.cta-stats--light .cta-stats__inner {
  border-color: rgba(0,0,0,0.08);
  background:
    radial-gradient(circle at 82% 44%, color-mix(in srgb, var(--color-accent) 6%, transparent), transparent 30%),
    #fff;
  box-shadow: 0 8px 36px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: none;
}
.cta-stats--light .cta-stats__item strong { color: var(--color-primary); }
.cta-stats--light .cta-stats__item span   { color: rgba(0,0,0,0.55); }
.cta-stats--light .cta-stats__item { border-right-color: rgba(0,0,0,0.09); }
.cta-stats--light .cta-stats__cta  { border-left-color: rgba(0,0,0,0.09); }
.cta-stats--light .cta-stats__cta p { color: var(--color-primary); }
@media (max-width: 760px) {
  .cta-stats--light .cta-stats__cta { border-top-color: rgba(0,0,0,0.09); }
}
@media (max-width: 1100px) {
  .cta-stats--light .cta-stats__item:nth-child(1),
  .cta-stats--light .cta-stats__item:nth-child(2) { border-bottom-color: rgba(0,0,0,0.09); }
}/* ==============================================
   DIENSTEN PAGINA — hero intro + grid sectie
============================================== *//* ── Sectie 1: Intro hero met achtergrond afbeelding ── */




.dnt-hero {
  position: relative;
  background: var(--color-primary);
  background-size: cover;
  background-position: right 20%;
  padding: clamp(4rem, 7vw, 6rem) 0 clamp(3rem, 5.5vw, 5rem);
  overflow: hidden;
}
/* Deze waas lag eerder over de hele foto in --color-primary (#262424).
   Dat is een warm grijs, geen zwart, en de laatste stop was nog altijd
   rgba(0,0,0,.18) — er bleef dus overal een grijze film liggen en de foto
   oogde vaal. Nu een bijna-zwarte waas die naar rechts naar nul zakt, zoals
   de paginakoppen van TKA Electro: links donker genoeg voor de tekst, rechts
   de foto zoals hij is. De kleur is een donkere versie van --color-primary,
   dus hij blijft warm en past bij het merk. */
.dnt-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(13, 11, 11, 0.96)  0%,
    rgba(13, 11, 11, 0.91) 26%,
    rgba(13, 11, 11, 0.64) 46%,
    rgba(13, 11, 11, 0.18) 66%,
    rgba(13, 11, 11, 0)    82%
  );
  pointer-events: none;
}

/* Op mobiel en tablet is de tekstkolom zo breed als het scherm, dus een
   verloop van links naar rechts laat de tekst rechts op de kale foto
   vallen. Op de offertepagina zakte de h1 daardoor naar 3,14:1 op 768px.
   Onder 820px dus een waas over de volle breedte, zwaarder naar onderen. */
@media (max-width: 820px) {
  .dnt-hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(13, 11, 11, 0.82)  0%,
      rgba(13, 11, 11, 0.72) 30%,
      rgba(13, 11, 11, 0.82) 68%,
      rgba(13, 11, 11, 0.94) 100%
    );
  }
}

.dnt-hero .container { position: relative; z-index: 1; }
.dnt-hero__content { max-width: clamp(380px, 50%, 600px); }
.dnt-hero__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.9rem;
}
.dnt-hero h1 {
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 4.8vw, 4.8rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin: 0 0 1.1rem;
  font-feature-settings: "kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing: antialiased;
}
.dnt-hero h1 em { font-style: italic; color: var(--color-accent); }
.dnt-hero > .container p,
.dnt-hero__content > p {
  color: rgba(255,255,255,0.54);
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.72;
  margin: 0;
}
.dnt-hero__usps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.5rem;
  margin-top: 2rem;
}
.dnt-hero__usp {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: rgba(255,255,255,0.75);
  font-size: 0.87rem;
  line-height: 1.45;
}
.dnt-hero__usp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  color: var(--color-accent);
  flex-shrink: 0;
}
.dnt-hero__usp-icon svg { width: 13px; height: 13px; }
@media (max-width: 768px) {
  .dnt-hero__content { max-width: 100%; }
  .dnt-hero__usps { gap: 0.7rem 0.9rem; }
}/* Tabs */


.dnt-tabs {
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem;
  border-radius: 16px;
  width: fit-content;
  margin-inline: auto;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 1.75rem;
}
.dnt-tabs::-webkit-scrollbar { display: none; }
.prj-grid--dark .dnt-tabs {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
}
.prj-grid--light .dnt-tabs {
  border: 1px solid rgba(0,0,0,0.09);
  background: rgba(255,255,255,0.86);
}
.dnt-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0.72rem 1.2rem;
  border-radius: 11px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.18s, background 0.18s;
}
.prj-grid--dark .dnt-tab         { color: rgba(255,255,255,0.48); }
.prj-grid--dark .dnt-tab:hover { color: rgba(255,255,255,0.82); }
.prj-grid--light .dnt-tab         { color: rgba(0,0,0,0.45); }
.prj-grid--light .dnt-tab:hover { color: rgba(0,0,0,0.78); }
.dnt-tab.is-active {
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent);
}
.dnt-tab__star { width: 14px; height: 14px; }/* CTA banner */


.dnt-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: clamp(1.6rem, 2.8vw, 2.2rem) clamp(1.6rem, 2.8vw, 2.4rem);
  border-radius: 22px;
}
.dnt-cta--light {
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-accent) 5%, transparent),
    var(--light-bg));
}
.dnt-cta--light h3 { color: var(--color-primary); }
.dnt-cta--light p  { color: rgba(0,0,0,0.5); }

.dnt-cta h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 1.9vw, 1.9rem);
  letter-spacing: -0.025em;
  margin: 0 0 0.35rem;
  -webkit-font-smoothing: antialiased;
}
.dnt-cta p { font-size: 0.9rem; margin: 0; }
.dnt-cta__btn {
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.dnt-cta__btn svg { width: 13px; height: 13px; }
@media (max-width: 680px)  {
  .dnt-cta { flex-direction: column; align-items: flex-start; }
}/* ── [verouderd] svc-main — niet meer gebruikt ── */


.svc-main {
  position: relative;
  background: var(--color-primary);
  background-size: cover;
  background-position: center right;
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(3rem, 5vw, 4.5rem);
  overflow: hidden;
}/* Gradient overlay: donker links → transparant rechts (dark mode) */


.svc-main__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.svc-main--dark .svc-main__overlay {
  background: linear-gradient(
    100deg,
    var(--color-primary)                             0%,
    var(--color-primary)                            28%,
    color-mix(in srgb, var(--color-primary) 82%, transparent) 48%,
    color-mix(in srgb, var(--color-primary) 42%, transparent) 68%,
    rgba(0,0,0,0.22)                               100%
  );
}
.svc-main--light .svc-main__overlay { display: none; }

.svc-main__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.svc-main--dark .svc-main__deco {
  background: radial-gradient(ellipse at 82% 10%,
    color-mix(in srgb, var(--color-accent) 11%, transparent),
    transparent 46%);
}
.svc-main--light .svc-main__deco {
  background: radial-gradient(ellipse at 80% 5%,
    color-mix(in srgb, var(--color-accent) 7%, transparent),
    transparent 50%);
}/* Light mode background */


.svc-main--light {
  background: var(--color-bg, #f8f7f4);
}
.svc-main .container { position: relative; z-index: 1; }
.svc-main__header {
  display: block;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.svc-main__intro {
  max-width: clamp(420px, 52%, 620px);
}/* ── Dark text ── */


.svc-main__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1rem;
}
.svc-main__intro h1 {
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
  font-feature-settings: "kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing: antialiased;
}
.svc-main__intro h1 em {
  font-style: italic;
  color: var(--color-accent);
}
.svc-main__intro > p {
  color: rgba(255,255,255,0.52);
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.72;
  max-width: 520px;
  margin: 0;
}
.svc-main__usps {
  display: flex;
  gap: 1.75rem;
  margin-top: 2.25rem;
  flex-wrap: wrap;
}
.svc-main__usp {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255,255,255,0.75);
  font-size: 0.88rem;
}
.svc-main__usp-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  color: var(--color-accent);
  flex-shrink: 0;
}
.svc-main__usp-check svg { width: 14px; height: 14px; }
.svc-main__hero-img {
  position: relative;
  height: clamp(300px, 38vw, 460px);
  border-radius: 20px;
  overflow: hidden;
}
.svc-main__hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.svc-main__hero-img-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    var(--color-primary) 0%,
    color-mix(in srgb, var(--color-primary) 25%, transparent) 38%,
    transparent 55%
  );
}
.svc-main__tabs {
  display: flex;
  gap: 0.6rem;
  padding: 0.45rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 2rem;
}
.svc-main__tabs::-webkit-scrollbar { display: none; }
.svc-main__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  color: rgba(255,255,255,0.52);
  padding: 0.75rem 1.25rem;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.87rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.18s, background 0.18s;
}
.svc-main__tab:hover { color: rgba(255,255,255,0.82); }
.svc-main__tab.is-active {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--color-accent);
}
.svc-main__tab-star { width: 15px; height: 15px; }
.svc-main__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  align-items: stretch;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.svc-main__card {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.038),
    rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: 1.85rem 1.85rem 1.65rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.28s, border-color 0.28s, box-shadow 0.28s;
  transition-timing-function: cubic-bezier(0.16,1,0.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .svc-main__card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
    box-shadow: 0 24px 52px -16px rgba(0,0,0,0.48);
  }
}
.svc-main__card-icon {
  width: 2.4rem;
  height: 2.4rem;
  color: var(--color-accent);
  margin-bottom: 1.15rem;
  flex-shrink: 0;
}
.svc-main__card h3 {
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.35vw, 1.45rem);
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin: 0 0 0.75rem;
  -webkit-font-smoothing: antialiased;
}
.svc-main__card p {
  color: rgba(255,255,255,0.48);
  font-size: 0.87rem;
  line-height: 1.7;
  margin: 0 0 1.4rem;
  flex: 1;
}
.svc-main__card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.22s cubic-bezier(0.16,1,0.3,1);
}
.svc-main__card-link:hover { gap: 0.65rem; }
.svc-main__card-link svg { width: 15px; height: 15px; flex-shrink: 0; }
.svc-main__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-accent) 8%, transparent),
    rgba(255,255,255,0.02)
  );
}
.svc-main__cta h3 {
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2vw, 2rem);
  letter-spacing: -0.025em;
  margin: 0 0 0.4rem;
  -webkit-font-smoothing: antialiased;
}
.svc-main__cta p {
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
  margin: 0;
}
.svc-main__cta-btn {
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.svc-main__cta-btn svg { width: 14px; height: 14px; }
@media (max-width: 1024px) {
  .svc-main__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 840px) {
  .svc-main__intro { max-width: 100%; }
  .svc-main__cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .svc-main__grid { grid-template-columns: 1fr; }
  .svc-main__usps { gap: 1rem; }
  .svc-main__card { border-radius: 16px; padding: 1.4rem; }
}/* ── Light mode overrides ── */


.svc-main--light .svc-main__eyebrow { color: var(--color-accent); }
.svc-main--light .svc-main__intro h1 { color: var(--color-primary); }
.svc-main--light .svc-main__intro > p { color: rgba(0,0,0,0.54); }
.svc-main--light .svc-main__usp { color: rgba(0,0,0,0.7); }
.svc-main--light .svc-main__usp-check {
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  color: var(--color-accent);
}
.svc-main--light .svc-main__tabs {
  border-color: rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.7);
}
.svc-main--light .svc-main__tab { color: rgba(0,0,0,0.45); }
.svc-main--light .svc-main__tab:hover { color: rgba(0,0,0,0.75); }
.svc-main--light .svc-main__tab.is-active {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
}
.svc-main--light .svc-main__card {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
@media (hover: hover) and (pointer: fine) {
  .svc-main--light .svc-main__card:hover {
    border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
    box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  }
}
.svc-main--light .svc-main__card h3 { color: var(--color-primary); }
.svc-main--light .svc-main__card p  { color: rgba(0,0,0,0.5); }
.svc-main--light .svc-main__card-link { color: var(--color-accent); }
.svc-main--light .svc-main__cta {
  border-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-accent) 6%, transparent),
    rgba(255,255,255,0.6));
}
.svc-main--light .svc-main__cta h3 { color: var(--color-primary); }
.svc-main--light .svc-main__cta p  { color: rgba(0,0,0,0.5); }/* ── [verouderd — niet meer gebruikt] compact hero fallback ── */


.svc-hero-compact {
  position: relative;
  min-height: clamp(220px, 30vh, 340px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--color-primary);
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
}
.svc-hero-compact__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.28;
}
.svc-hero-compact__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    var(--color-primary) 38%,
    color-mix(in srgb, var(--color-primary) 55%, transparent) 100%);
}
.svc-hero-compact__noise {
  position: absolute;
  inset: 0;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.svc-hero-compact .container {
  position: relative;
  z-index: 1;
}
.svc-hero-compact__content {
  max-width: 640px;
}
.svc-hero-compact__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.8rem;
}
.svc-hero-compact h1 {
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0 0 0.85rem;
  font-feature-settings: "kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing: antialiased;
}
.svc-hero-compact h1 em {
  font-style: italic;
  color: var(--color-accent);
}
.svc-hero-compact p {
  color: rgba(255,255,255,0.56);
  font-size: clamp(0.9rem, 1.1vw, 1.02rem);
  line-height: 1.68;
  margin: 0;
}
.svc-hero-compact__cats {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}
.svc-hero-compact__cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
}/* ── Category page layout ── */


.svc-cat-page {
  background: var(--color-primary);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}
.svc-cat-page__layout {
  display: grid;
  grid-template-columns: 268px 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}/* ── Sidebar ── */


.svc-cat-sidebar {
  position: sticky;
  top: calc(var(--nav-height, 72px) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.svc-cat-sidebar__heading {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin: 0 0 0.75rem 0.2rem;
}
.svc-cat-sidebar__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.72rem 0.9rem;
  border-radius: 11px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s, transform 0.22s;
  transition-timing-function: cubic-bezier(0.16,1,0.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .svc-cat-sidebar__item:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.09);
    transform: translateX(2px);
  }
}
.svc-cat-sidebar__item.is-active {
  background: color-mix(in srgb, var(--color-accent) 11%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
}
.svc-cat-sidebar__item.is-active .svc-cat-sidebar__label { color: var(--color-accent); }
.svc-cat-sidebar__item.is-active .svc-cat-sidebar__arrow { color: var(--color-accent); }
.svc-cat-sidebar__icon {
  font-size: 1.2rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  flex-shrink: 0;
}
.svc-cat-sidebar__item.is-active .svc-cat-sidebar__icon {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
}
.svc-cat-sidebar__meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
}
.svc-cat-sidebar__label {
  color: rgba(255,255,255,0.8);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svc-cat-sidebar__count {
  color: rgba(255,255,255,0.35);
  font-size: 0.7rem;
}
.svc-cat-sidebar__arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.2);
  transition: color 0.2s, transform 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .svc-cat-sidebar__item:hover .svc-cat-sidebar__arrow { transform: translateX(2px); }
}/* ── Category group ── */


.svc-cat-group {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  scroll-margin-top: calc(var(--nav-height, 72px) + 2rem);
}
.svc-cat-group:last-child { margin-bottom: 0; }
.svc-cat-group__head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.svc-cat-group__icon-wrap {
  font-size: 1.4rem;
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
  border-radius: 10px;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.svc-cat-group__head h2 {
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.3rem;
  -webkit-font-smoothing: antialiased;
}
.svc-cat-group__head p {
  color: rgba(255,255,255,0.45);
  font-size: 0.85rem;
  line-height: 1.65;
  margin: 0;
}/* ── Service cards grid ── */


.svc-cat-group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.9rem;
  align-items: stretch;
}
.svc-cat-group__grid--fallback {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}/* ── Service card ── */


.svc-cat-card {
  position: relative;
  padding: 1.2rem 1.3rem 1.1rem;
  background: rgba(255,255,255,0.032);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 13px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  transition: border-color 0.22s, background 0.22s, transform 0.22s, box-shadow 0.22s;
  transition-timing-function: cubic-bezier(0.16,1,0.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .svc-cat-card:hover {
    background: rgba(255,255,255,0.055);
    border-color: color-mix(in srgb, var(--color-accent) 32%, transparent);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px -16px rgba(0,0,0,0.45);
  }
}
.svc-cat-card__icon {
  width: 2.1rem;
  height: 2.1rem;
  color: var(--color-accent);
  margin-bottom: 0.8rem;
  flex-shrink: 0;
}
.svc-cat-card h3 {
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(0.88rem, 0.95vw, 1rem);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 0.45rem;
  -webkit-font-smoothing: antialiased;
}
.svc-cat-card p {
  color: rgba(255,255,255,0.46);
  font-size: 0.77rem;
  line-height: 1.65;
  margin: 0;
  flex: 1;
}
.svc-cat-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.85rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: gap 0.22s cubic-bezier(0.16,1,0.3,1);
}
.svc-cat-card__link:hover { gap: 0.6rem; }
.svc-cat-card__link svg { width: 12px; height: 12px; flex-shrink: 0; }/* ── Responsive ── */


@media (max-width: 960px) {
  .svc-cat-page__layout {
    grid-template-columns: 1fr;
  }
  .svc-cat-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .svc-cat-sidebar__heading { display: none; }
  .svc-cat-sidebar__item {
    flex: 0 1 auto;
    padding: 0.55rem 0.85rem;
    gap: 0.5rem;
  }
  .svc-cat-sidebar__count,
  .svc-cat-sidebar__arrow { display: none; }
  .svc-cat-sidebar__item:hover { transform: none; }
  .svc-cat-sidebar__label { font-size: 0.82rem; }
}
@media (max-width: 540px) {
  .svc-hero-compact__cats { display: none; }
  .svc-cat-group__grid { grid-template-columns: 1fr; }
  .svc-cat-sidebar__item { min-width: calc(50% - 0.25rem); }
}
.filter-tab--dark {
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.55);
}
.filter-tab--dark:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.filter-tab--dark.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}/* ── projects pagina secties — padding + overflow ── */
.projects-page-section--cases{
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}/* ==============================================
   OVER PAGINA — sections, grid, waarden, CTA
============================================== */


.over-section {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--color-bg);
}
.over-grid {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.over-text h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--color-primary);
  margin: 0 0 1.4rem;
}
.over-text p {
  color: var(--color-text-muted);
  font-size: clamp(0.97rem, 1.1vw, 1.05rem);
  line-height: 1.75;
  margin-bottom: 0.95rem;
}
.over-text p:last-child { margin-bottom: 0; }
.over-text p[style] { margin-top: 1.25rem; }
.over-image {
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-bg-alt);
  display: flex;
  align-items: stretch;
}
.over-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-xl);
}
.about-placeholder {
  width: 100%;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 60% 30%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 60%),
    color-mix(in srgb, var(--color-primary) 5%, var(--color-bg-alt));
}
.about-placeholder-initials {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 10vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  color: color-mix(in srgb, var(--color-primary) 14%, transparent);
  line-height: 1;
  user-select: none;
}/* ── Waarden sectie ── */


.values-section {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--color-bg-alt);
}
.values-section .section-header { max-width: 52ch; }
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.1rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.value-card {
  background: var(--color-bg);
  border-radius: var(--border-radius-lg);
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.28s cubic-bezier(0.16,1,0.3,1),
              transform 0.28s cubic-bezier(0.16,1,0.3,1);
}
@media (hover: hover) and (pointer: fine) {
  .value-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
  }
}
.value-card-icon {
  font-size: 1.65rem;
  line-height: 1;
  margin-bottom: 1.1rem;
}
.value-card h3 {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 0.55rem;
  letter-spacing: -0.01em;
}
.value-card p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
}/* ── Over pagina CTA sectie ── */


.cta-section {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--color-primary);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-section::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at 50% 0%,
    color-mix(in srgb, var(--color-accent) 14%, transparent) 0%,
    transparent 70%);
}
.cta-section .container { position: relative; z-index: 1; }
.cta-section h2 {
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 auto 1rem;
  max-width: 22ch;
}
.cta-section p {
  color: rgba(255,255,255,0.52);
  font-size: clamp(0.96rem, 1.1vw, 1.05rem);
  line-height: 1.7;
  max-width: 48ch;
  margin: 0 auto 2.25rem;
}/* ── Responsive over pagina ── */


@media (max-width: 860px) {
  .over-grid { grid-template-columns: 1fr; gap: 2rem; }
  .over-image { aspect-ratio: 3 / 2; }
  .about-placeholder { min-height: 240px; }
}/* ==============================================
   CONTACT WIDGET — WhatsApp / bellen keuzemenu
============================================== */

/* ── Toggle knop ── */
.contact-widget {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9998;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 0.75rem;
}
.contact-toggle {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  cursor: pointer;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.18);
  transition: transform 0.26s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.26s cubic-bezier(0.16,1,0.3,1);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .contact-toggle:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 14px 38px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2);
  }
}
.contact-toggle-avatar {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  display: block;
  transition: opacity 0.2s;
}
.contact-widget.is-open .contact-toggle-avatar { opacity: 0; }
.contact-toggle-icon { transition: opacity 0.18s, transform 0.22s; }
.contact-toggle-icon--close {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
}
.contact-widget.is-open .contact-toggle-icon--close { opacity: 1; }
.contact-widget.is-open .contact-toggle-icon--msg   { opacity: 0; }
.contact-toggle-pulse {
  position: absolute;
  bottom: 3px; right: 3px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #2fcc71;
  border: 2px solid var(--color-primary);
  z-index: 1;
}
.contact-toggle-pulse::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: rgba(47, 204, 113, 0.35);
  animation: contact-ripple 2s ease-out infinite;
}
@keyframes contact-ripple {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2);   opacity: 0; }
}

/* ── Contact paneel ── */
.contact-panel {
  width: min(340px, calc(100vw - 3rem));
  background: var(--color-bg, #fff);
  border-radius: 20px;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.18),
    0 4px 16px rgba(0,0,0,0.1),
    0 0 0 1px rgba(0,0,0,0.05);
  display: none;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(0.9) translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1),
              opacity 0.22s ease;
}
.contact-panel.is-visible {
  display: flex;
}
.contact-widget.is-open .contact-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ── Header ── */
.contact-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  background: var(--color-primary);
  flex-shrink: 0;
}
.contact-panel-header-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.contact-panel-avatar {
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 22%, rgba(255,255,255,0.14));
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 40%, rgba(255,255,255,0.2));
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  overflow: hidden;
}
.contact-panel-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  display: block;
}
.contact-panel-company {
  display: block;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-panel-status {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
}
.contact-panel-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2fcc71;
  flex-shrink: 0;
  animation: contact-dot-breathe 2.5s ease-in-out infinite;
}
@keyframes contact-dot-breathe {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
.contact-panel-close {
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 50%;
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s;
}
.contact-panel-close:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* ── Keuze-opties ── */
.contact-panel-body {
  padding: 1.1rem 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.contact-panel-intro {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--color-text-muted, #666);
}
.contact-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.contact-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--color-border, rgba(0,0,0,0.08));
  background: var(--color-bg-alt, #f7f7f7);
  text-decoration: none;
  color: var(--color-text, #1a1a1a);
  transition: transform 0.18s cubic-bezier(0.16,1,0.3,1),
              border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
@media (hover: hover) and (pointer: fine) {
  .contact-option:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  }
}
.contact-option-icon {
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-option--whatsapp .contact-option-icon {
  background: rgba(37, 211, 102, 0.14);
  color: #25d366;
}
.contact-option--call .contact-option-icon {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  color: var(--color-accent);
}
.contact-option-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.contact-option-text strong {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.contact-option-text small {
  font-size: 0.78rem;
  color: var(--color-text-muted, #777);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-option-arrow {
  color: var(--color-text-muted, #999);
  flex-shrink: 0;
  transition: transform 0.18s;
}
.contact-option:hover .contact-option-arrow { transform: translateX(3px); }

/* ── Responsive ── */
@media (max-width: 480px) {
  .contact-widget { bottom: 1rem; right: 1rem; }
  .contact-panel { width: calc(100vw - 2rem); }
}
@keyframes swTourCardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes swTourFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes swTourPop {
  0%   { opacity: 0; transform: translateY(16px) scale(0.55) rotate(-8deg); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.06) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes swTourFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -5px; }
}/* ═══════════════════════════════════════════
   PREMIUM MICRO-INTERACTIES
═══════════════════════════════════════════ *//* Card-lift — universeel op kaart-typen die nu statisch zijn.
   Entrance (reveal) en hover delen dezelfde spring-curve. */
.svc-b__card:not(.svc-b__card--featured),
.quote-sidebar-card,
.value-card,
.prj-vis__card,
.projects-premium__card{
  transition:
    opacity 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    background 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .svc-b__card:not(.svc-b__card--featured):hover,
  .quote-sidebar-card:hover,
  .value-card:hover,
  .prj-vis__card:hover,
  .projects-premium__card:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 42px -18px rgba(0, 0, 0, 0.42);
    border-color: color-mix(in srgb, var(--color-accent) 38%, transparent);
  }
}/* Afbeelding-zoom binnen projectkaarten */


.prj-vis__card,
.projects-premium__card{
  overflow: hidden;
}
.prj-vis__card img,
.projects-premium__card img{
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .prj-vis__card:hover img,
  .projects-premium__card:hover img{
    transform: scale(1.05);
  }
}/* Formulier-focus: accent-ring + label kleurt mee */


.form-control {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.form-control:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.form-label { transition: color 0.25s ease; }
.form-group:focus-within .form-label { color: var(--color-accent); }/* Footer: links schuiven, socials liften */


.footer-col a {
  display: inline-block;
  transition: color 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .footer-col a:hover { transform: translateX(3px); }
}
.footer-social a {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .footer-social a:hover { transform: translateY(-2px) scale(1.1); }
}

/* ═══ Hero page-load orchestratie: cinematische zoom-settle ═══
   Eén hoog-impact moment: de hero-achtergrond komt tot rust terwijl
   de content-kolom gestaggerd binnenkomt (.hero-bg heeft overflow:hidden). */
@keyframes heroSettle {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
/* ════════════════════════════════════════════════
   PROJECTEN — Recent werk (redesign naar mockup)
════════════════════════════════════════════════ */

.prw {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 9vh, 7rem) 0;
  background: #1b1918;
  color: #fff;
}

.prw__inner { position: relative; z-index: 1; }

.prw__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(1.8rem, 3.5vh, 2.6rem);
}

.prw__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.9rem;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.prw__eyebrow i {
  display: block;
  width: 2.6rem;
  height: 1px;
  background: color-mix(in srgb, var(--color-accent) 55%, transparent);
}

.prw__head h2 {
  margin: 0 0 0.85rem;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: #fff;
}

.prw__head p {
  margin: 0;
  color: rgba(255,255,255,0.6);
  font-size: 0.98rem;
  line-height: 1.65;
}

.prw__all {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color 0.26s ease, color 0.26s ease;
}

.prw__all:hover { border-color: var(--color-accent); color: var(--color-accent); }

.prw__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.55fr) minmax(0, 0.55fr);
  gap: 1.4rem;
}

.prw__card {
  position: relative;
  overflow: hidden;
  border-radius: 0.9rem;
  background: #232020;
}

/* Featured kaart — tekst over de foto */
.prw__card--feature {
  grid-row: 1 / 3;
  min-height: 560px;
}

.prw__card--feature > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.prw__card--feature:hover > img { transform: scale(1.04); }

.prw__feature-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.08) 30%, rgba(12,10,9,0.82) 78%, rgba(12,10,9,0.94) 100%);
}

.prw__feature-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
}

/* Kleine kaarten — foto boven, tekst op donker vlak */
.prw__card--small { display: flex; flex-direction: column; }

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

.prw__card--small .prw__media { aspect-ratio: 16 / 10; }

.prw__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.prw__card:hover .prw__media img { transform: scale(1.05); }

.prw__body { padding: 1.15rem 1.3rem 1.3rem; }

/* Brede kaart — foto links, tekst rechts */
.prw__card--wide {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.prw__card--wide .prw__media { height: 100%; min-height: 230px; }

.prw__card--wide .prw__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.prw__cat {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.55rem;
  color: rgba(255,255,255,0.72);
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.prw__cat i {
  display: block;
  width: 1.8rem;
  height: 1px;
  background: rgba(255,255,255,0.3);
}

.prw__card h3 {
  margin: 0 0 0.75rem;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #fff;
}

.prw__card--feature h3 { font-size: clamp(1.7rem, 2.4vw, 2.4rem); }

.prw__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1rem;
  color: rgba(255,255,255,0.58);
  font-size: 0.8rem;
}

.prw__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }

.prw__meta svg { width: 0.95rem; height: 0.95rem; }

.prw__case {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.26s ease, border-color 0.26s ease, gap 0.26s ease;
}

.prw__case:hover { color: var(--color-accent); border-color: var(--color-accent); gap: 0.8rem; }

/* USP-strip onder het grid */
.prw__usps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1.4rem;
  padding: 1.35rem 0.6rem;
  border-radius: 0.9rem;
  background: #232020;
}

.prw__usp {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.2rem 1.5rem;
  border-right: 1px solid rgba(255,255,255,0.07);
}

.prw__usp:last-child { border-right: 0; }

.prw__usp-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 50%, transparent);
}

.prw__usp-icon svg { width: 1.25rem; height: 1.25rem; color: var(--color-accent); }

.prw__usp-body strong {
  display: block;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
}

.prw__usp-body > span {
  display: block;
  margin-top: 0.18rem;
  color: rgba(255,255,255,0.55);
  font-size: 0.79rem;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .prw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prw__card--feature { grid-row: auto; grid-column: 1 / -1; min-height: 420px; }
  .prw__card--wide { grid-column: 1 / -1; }
  .prw__usps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
  .prw__usp:nth-child(2n) { border-right: 0; }
}

@media (max-width: 720px) {
  .prw__head { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
  .prw__eyebrow { gap: 0; }
  .prw__eyebrow i { display: none; }

  /* Kaarten swipebaar op mobiel (net als services/reviews) */
  .prw__grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.9rem;
    scrollbar-width: none;
    padding-bottom: 0.4rem;
    touch-action: pan-x pan-y;
  }
  .prw__grid::-webkit-scrollbar { display: none; }
  .prw__card,
  .prw__card--feature,
  .prw__card--wide {
    flex: 0 0 100%;
    min-width: 100%;
    grid-row: auto;
    grid-column: auto;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  /* Alle kaarten hetzelfde: foto boven, tekst eronder */
  .prw__card--feature > img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }
  .prw__card--feature .prw__feature-overlay { display: none; }
  .prw__card--feature .prw__feature-content { position: static; padding: 1.15rem 1.3rem 1.3rem; }
  .prw__card--small .prw__media,
  .prw__card--wide .prw__media { width: 100%; aspect-ratio: 16 / 10; min-height: 0; }

  .prw__usps { grid-template-columns: 1fr; padding: 1rem 0.9rem; }
  .prw__usp { border-right: 0; padding: 0.7rem 0.5rem; }
  .prw__usp + .prw__usp { border-top: 1px solid rgba(255,255,255,0.07); }
}

/* ════════════════════════════════════════════════
   REVIEWS — Klantervaringen (redesign naar mockup)
════════════════════════════════════════════════ */

.rvw {
  position: relative;
  padding: clamp(4.5rem, 9vh, 7.5rem) 0;
  background: var(--light-bg);
  color: var(--color-primary);
  overflow: hidden;
}

.rvw__inner { position: relative; z-index: 1; }

.rvw__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
  margin-bottom: clamp(2.2rem, 4vh, 3.2rem);
}

.rvw__head-copy { max-width: 34rem; }

.rvw__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.9rem;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.rvw__eyebrow i {
  display: block;
  width: 2.2rem;
  height: 1px;
  background: color-mix(in srgb, var(--color-accent) 55%, transparent);
}

.rvw__head h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.1rem, 3.4vw, 3.1rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--color-primary);
}

.rvw__head h2 em {
  font-style: italic;
  font-weight: 600;
  color: var(--color-accent);
}

.rvw__head-copy > p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

.rvw__rating {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 0.3rem;
}

.rvw__rating-score strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}

.rvw__stars {
  display: block;
  margin: 0.4rem 0;
  color: var(--color-accent);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
}

.rvw__rating-score small {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.rvw__rating-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 2.8rem;
  background: rgba(0,0,0,0.1);
}

.rvw__rating-badge {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.rvw__rating-badge-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 999px;
  background: var(--color-accent-10);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.rvw__rating-badge-icon svg { width: 1.1rem; height: 1.1rem; color: var(--color-accent); }

.rvw__rating-badge span:last-child {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.rvw__rating-badge strong { color: var(--color-primary); font-weight: 700; }

.rvw__stage { position: relative; padding: 0 clamp(3rem, 5vw, 4rem); }

.rvw__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.rvw__card {
  position: relative;
  overflow: hidden;
  min-height: 22rem;
  border-radius: 1.2rem;
  background: #fff;
  box-shadow: 0 18px 48px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.05);
}

.rvw__card-text {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.8rem 1.7rem 1.7rem;
}

.rvw__quote {
  display: block;
  margin-bottom: 0.5rem;
  color: color-mix(in srgb, var(--color-accent) 75%, transparent);
  font-family: Georgia, serif;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 0.6;
}

.rvw__stars-row { display: flex; gap: 0.22rem; margin-bottom: 1rem; }
.rvw__stars-row svg { width: 1.05rem; height: 1.05rem; color: rgba(0,0,0,0.12); }
.rvw__stars-row svg.is-filled { color: var(--color-accent); }

.rvw__card p {
  flex: 1;
  margin: 0 0 1.1rem;
  color: var(--color-text);
  font-size: 0.93rem;
  line-height: 1.62;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rvw__card footer {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(0,0,0,0.07);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.rvw__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 35%, #fff);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.95rem;
}

.rvw__card footer strong { display: block; color: var(--color-primary); font-size: 0.88rem; font-weight: 700; }
.rvw__card footer small { display: block; margin-top: 0.1rem; color: var(--color-text-muted); font-size: 0.76rem; }

.rvw__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 14px 34px rgba(0,0,0,0.08);
  color: var(--color-primary);
  font-size: 1.2rem;
  cursor: pointer;
  transform: translateY(-50%);
  transition: box-shadow 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}

.rvw__arrow:hover { border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 18px 42px rgba(0,0,0,0.12); }
.rvw__arrow--prev { left: 0; }
.rvw__arrow--next { right: 0; }
.rvw__arrow.is-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

.rvw__dots { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1.6rem; }

.rvw__dot {
  appearance: none;
  border: 0;
  padding: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.15);
  cursor: pointer;
  transition: width 0.24s ease, background 0.24s ease;
}

.rvw__dot.is-active { width: 1.6rem; background: var(--color-accent); }

.rvw__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2.4rem, 4vh, 3.2rem);
  padding: 1.3rem 0.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}

.rvw__stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.3rem 1.4rem;
  border-right: 1px solid rgba(0,0,0,0.08);
}

.rvw__stat:last-child { border-right: 0; }

.rvw__stat-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 999px;
  background: var(--color-accent-10);
}

.rvw__stat-icon svg { width: 1.25rem; height: 1.25rem; color: var(--color-accent); }

.rvw__stat-body strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}

.rvw__stat-body span {
  display: block;
  margin-top: 0.22rem;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

@media (max-width: 1120px) {
  .rvw__head { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .rvw__rating { width: 100%; }
  .rvw__stage { padding: 0; }
  .rvw__arrow { display: none; }
  .rvw__dots { display: none; }
  .rvw__grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .rvw__card { min-height: 20rem; }
  .rvw__card p { -webkit-line-clamp: unset; overflow: visible; }
  .rvw__stats { grid-template-columns: 1fr; }
  .rvw__stat { border-right: 0; justify-content: center; }
  .rvw__stat-body { text-align: center; }
  .rvw__stat + .rvw__stat { border-top: 1px solid rgba(0,0,0,0.08); }
}

@media (max-width: 760px) {
  .rvw__head { align-items: center; text-align: center; }
  .rvw__head-copy { max-width: 100%; }
  .rvw__eyebrow { gap: 0; }
  .rvw__eyebrow i { display: none; }
  .rvw__rating { flex-wrap: wrap; justify-content: center; gap: 1rem; }
  .rvw__card { min-height: 0; }
  .rvw__card-text { padding: 1.5rem 1.4rem 1.4rem; }
  .rvw__stats { display: none; }
}

/* ════════════════════════════════════════════════
   DIENSTEN — Beeldkaarten grid (diensten.html)
════════════════════════════════════════════════ */

.dsv {
  padding: clamp(3.5rem, 7vh, 6rem) 0;
  background: var(--light-bg);
  color: var(--color-primary);
}

.dsv__head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto clamp(2.2rem, 4vh, 3.2rem);
}

.dsv__eyebrow {
  display: inline-block;
  margin-bottom: 0.85rem;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.dsv__head h2 {
  margin: 0 0 0.9rem;
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-primary);
}

.dsv__head p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* ── Grid: rij 1 = 3 kaarten, rij 2 = 2 brede kaarten ── */
.dsv__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

.dsv__card {
  position: relative;
  grid-column: span 2;
  overflow: hidden;
  border-radius: 1rem;
  min-height: 22rem;
  display: flex;
  isolation: isolate;
  box-shadow: 0 20px 50px rgba(0,0,0,0.14);
}

.dsv__card--wide { grid-column: span 3; min-height: 19rem; }

.dsv__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.dsv__card:hover .dsv__card-img { transform: scale(1.05); }

.dsv__card-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(15,13,12,0.15) 0%,
    rgba(15,13,12,0.35) 42%,
    rgba(15,13,12,0.82) 78%,
    rgba(15,13,12,0.94) 100%);
}

.dsv__card-body {
  margin-top: auto;
  width: 100%;
  padding: clamp(1.3rem, 2vw, 1.9rem);
  color: #fff;
}

.dsv__card-icon {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  margin-bottom: 1.1rem;
  border-radius: 0.85rem;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.dsv__card-icon svg { width: 1.5rem; height: 1.5rem; color: var(--color-primary); }

.dsv__card-body h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}

.dsv__card-body > p {
  margin: 0 0 1.3rem;
  max-width: 34ch;
  color: rgba(255,255,255,0.82);
  font-size: 0.9rem;
  line-height: 1.5;
}

.dsv__card-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.dsv__card--wide .dsv__card-foot { justify-content: space-between; }

.dsv__card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  transition: gap 0.24s ease, color 0.24s ease;
}

.dsv__card-link span { color: var(--color-accent); transition: transform 0.24s ease; }
.dsv__card-link:hover { color: var(--color-accent); }
.dsv__card-link:hover span { transform: translateX(3px); }

.dsv__card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 1.35rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}

.dsv__card-btn span { transition: transform 0.24s ease; }
.dsv__card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.28);
  background: color-mix(in srgb, var(--color-accent) 88%, black);
}
.dsv__card-btn:hover span { transform: translateX(3px); }

/* ── Onderste CTA-balk ── */
.dsv__cta {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
  flex-wrap: wrap;
  margin-top: clamp(1.4rem, 2.5vh, 2rem);
  padding: clamp(1.5rem, 2.5vw, 2.2rem) clamp(1.6rem, 3vw, 2.6rem);
  border-radius: 1.2rem;
  background: #ece8e2;
  color: var(--color-primary);
}

.dsv__cta-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 999px;
  background: var(--color-primary);
}

.dsv__cta-icon svg { width: 1.5rem; height: 1.5rem; color: #fff; }

.dsv__cta-copy { flex: 1 1 16rem; }

.dsv__cta-copy h3 {
  margin: 0 0 0.35rem;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 800;
  color: var(--color-primary);
}

.dsv__cta-copy p { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.5; }

.dsv__cta-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1.7rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  transition: transform 0.24s ease, background 0.24s ease;
}

.dsv__cta-btn span { transition: transform 0.24s ease; }
.dsv__cta-btn:hover { transform: translateY(-2px); background: #000; }
.dsv__cta-btn:hover span { transform: translateX(3px); }

.dsv__cta-trust {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.2rem;
  padding-top: 1.3rem;
  margin-top: 0.3rem;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.dsv__cta-trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}

.dsv__cta-trust svg { width: 1.1rem; height: 1.1rem; color: var(--color-accent); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .dsv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dsv__card { grid-column: span 1; min-height: 20rem; }
  .dsv__card--wide { grid-column: span 2; }
}

@media (max-width: 620px) {
  .dsv__grid { grid-template-columns: 1fr; }
  .dsv__card,
  .dsv__card--wide { grid-column: span 1; min-height: 18rem; }
  .dsv__card-foot { justify-content: flex-start; }
  .dsv__card--wide .dsv__card-foot { justify-content: flex-start; }

  /* CTA: compacte, gecentreerde kaart op mobiel */
  .dsv__cta { flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; }
  .dsv__cta-icon { width: 3.2rem; height: 3.2rem; }
  .dsv__cta-copy { flex: 0 0 auto; }
  .dsv__cta-btn { width: 100%; justify-content: center; padding-block: 1rem; }
  .dsv__cta-trust {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.2rem;
  }
}

/* ════════════════════════════════════════════════
   PROJECTEN — Grid + filters + CTA (projects.html)
════════════════════════════════════════════════ */

.pjx {
  padding: clamp(2.5rem, 5vh, 4rem) 0 clamp(1.5rem, 3vh, 2.5rem);
  background: var(--light-bg);
  color: var(--color-primary);
}

/* ── Filter pills ── */
.pjx__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: clamp(1.8rem, 3.5vh, 2.6rem);
}

.pjx__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.35rem;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.24s ease, color 0.24s ease, border-color 0.24s ease, transform 0.24s ease;
}

.pjx__tab svg { width: 1.05rem; height: 1.05rem; }

.pjx__tab:hover { transform: translateY(-1px); border-color: rgba(0,0,0,0.2); }

.pjx__tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ── Grid: rij 1 = 2 brede kaarten, rij 2 = 3 kaarten ── */
.pjx__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

.pjx__card {
  position: relative;
  grid-column: span 2;
  overflow: hidden;
  border-radius: 1rem;
  min-height: 21rem;
  display: flex;
  isolation: isolate;
  cursor: pointer;
}

.pjx__card--wide { grid-column: span 3; min-height: 19rem; }

.pjx__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.pjx__card:hover .pjx__card-img { transform: scale(1.05); }

.pjx__card-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(15,13,12,0.12) 0%,
    rgba(15,13,12,0.32) 42%,
    rgba(15,13,12,0.82) 80%,
    rgba(15,13,12,0.94) 100%);
}

.pjx__card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  padding: 0.4rem 0.85rem;
  border-radius: 0.5rem;
  background: rgba(15,13,12,0.82);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pjx__card-body {
  margin-top: auto;
  width: 100%;
  padding: clamp(1.3rem, 2vw, 1.8rem);
  color: #fff;
}

.pjx__card-body h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #fff;
}

.pjx__card-body > p {
  margin: 0 0 1.1rem;
  max-width: 40ch;
  color: rgba(255,255,255,0.82);
  font-size: 0.9rem;
  line-height: 1.5;
}

.pjx__card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
}

.pjx__card-link span { color: var(--color-accent); transition: transform 0.24s ease; }
.pjx__card:hover .pjx__card-link { color: var(--color-accent); }
.pjx__card:hover .pjx__card-link span { transform: translateX(3px); }

.pjx__card:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* ── Lichte CTA-balk ── */
.pjx-cta { margin-top: -1px; padding: calc(clamp(2rem, 4vh, 3.5rem) + 1px) 0 clamp(3rem, 6vh, 5rem); background: var(--light-bg); position: relative; }

.pjx-cta__bar {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  flex-wrap: wrap;
  padding: clamp(1.6rem, 2.6vw, 2.2rem) clamp(1.6rem, 3vw, 2.6rem);
  border-radius: 1.2rem;
  background: #ece8e2;
  color: var(--color-primary);
}

.pjx-cta__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 999px;
  background: var(--color-primary);
}

.pjx-cta__icon svg { width: 1.5rem; height: 1.5rem; color: #fff; }

.pjx-cta__copy { flex: 1 1 16rem; }

.pjx-cta__copy h2 {
  margin: 0 0 0.35rem;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  font-weight: 800;
  color: var(--color-primary);
}

.pjx-cta__copy p { margin: 0; color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.5; }

.pjx-cta__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1.7rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  transition: transform 0.24s ease, background 0.24s ease;
}

.pjx-cta__btn span { transition: transform 0.24s ease; }
.pjx-cta__btn:hover { transform: translateY(-2px); background: #000; }
.pjx-cta__btn:hover span { transform: translateX(3px); }

.pjx-cta__trust {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.2rem;
  padding-top: 1.3rem;
  margin-top: 0.3rem;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.pjx-cta__trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.pjx-cta__trust svg { width: 1.1rem; height: 1.1rem; color: var(--color-accent); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .pjx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pjx__card,
  .pjx__card--wide { grid-column: span 1; min-height: 19rem; }
}

@media (max-width: 620px) {
  .pjx__grid { grid-template-columns: 1fr; }
  .pjx__card,
  .pjx__card--wide { grid-column: span 1; min-height: 17rem; }
  .pjx__tabs { flex-wrap: wrap; justify-content: center; }

  /* CTA: compacte, gecentreerde kaart op mobiel */
  .pjx-cta__bar { flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; }
  .pjx-cta__icon { width: 3.2rem; height: 3.2rem; }
  .pjx-cta__copy { flex: 0 0 auto; }
  .pjx-cta__btn { width: 100%; justify-content: center; padding-block: 1rem; }
  .pjx-cta__trust {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.2rem;
  }
}

/* ════════════════════════════════════════════════
   HOMEPAGE DIENSTEN — premium beeldkaarten (svc-cards)
════════════════════════════════════════════════ */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.5vw, 1.4rem);
}
.svc-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  min-height: 24rem;
  display: flex;
  isolation: isolate;
  box-shadow: 0 20px 50px rgba(0,0,0,0.14);
}
.svc-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.svc-card:hover .svc-card__img { transform: scale(1.05); }
.svc-card__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(15,13,12,0.12) 0%,
    rgba(15,13,12,0.4) 44%,
    rgba(15,13,12,0.85) 80%,
    rgba(15,13,12,0.95) 100%);
}
.svc-card__body {
  margin-top: auto;
  width: 100%;
  padding: clamp(1.3rem, 1.8vw, 1.7rem);
  color: #fff;
}
.svc-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 0.8rem;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.svc-card__icon svg { width: 1.45rem; height: 1.45rem; color: var(--color-primary); }
.svc-card__body h3 {
  margin: 0 0 0.45rem;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}
.svc-card__body p {
  margin: 0 0 1.1rem;
  color: rgba(255,255,255,0.82);
  font-size: 0.88rem;
  line-height: 1.5;
}
.svc-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.svc-card__link span { color: var(--color-accent); transition: transform 0.24s ease; }
.svc-card:hover .svc-card__link { color: var(--color-accent); }
.svc-card:hover .svc-card__link span { transform: translateX(3px); }

@media (max-width: 1024px) {
  .svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}