/* ——— Valtex Digital — design tokens (light theme) ——— */
/* vtx-asset-version: 20260705r — bij deploy: styles.css + alle HTML uploaden (bestand ~558 KB) */
:root {
  --bg-deep: #ffffff;
  --bg-root: #f6f8fa;
  --bg-charcoal: #eef1f4;
  --surface: rgba(255, 255, 255, 0.92);
  --border-glass: rgba(0, 140, 140, 0.16);
  --border-glass-strong: rgba(0, 168, 168, 0.28);
  --teal: #009a9a;
  --teal-dim: #007d7d;
  --cyan: #00b8b8;
  /* Primary text on light backgrounds (niet #fff — oude cache op hosting) */
  --text-primary: #1a2329;
  --white: var(--text-primary);
  --text-strong: rgba(26, 35, 41, 0.9);
  --muted: rgba(26, 35, 41, 0.58);
  --text-inverse: #f4f8f8;
  --text-muted-on-dark: rgba(255, 255, 255, 0.76);
  --shadow-soft: rgba(15, 23, 42, 0.08);
  --shadow-card: 0 12px 40px -16px rgba(15, 23, 42, 0.12);
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --radius-btn: 12px;
  --radius-card: 16px;
  --radius-sm: 10px;
  --font-sans: "Montserrat", system-ui, sans-serif;
  --sidebar-w: 0px;
  --menu-rail-w: 78px;
  --header-edge-pad: clamp(1.35rem, 3.2vw, 2.35rem);
  --topbar-h: 68px;
  /* Cap op echte beschikbare breedte: voorkomt horizontale overflow bij resize (max(1200,80%) > viewport) */
  --content-max: min(
    1680px,
    calc(100vw - var(--sidebar-w) - 24px),
    max(1200px, calc((100vw - var(--sidebar-w)) * 0.8))
  );
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

html {
  scroll-behavior: auto;
  background-color: var(--bg-root);
  overscroll-behavior-y: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-deep);
  overflow: visible;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: auto;
  min-height: 100vh;
  min-height: 100svh;
}

/* Alleen voor crawlers / HTML-index: niet tonen, wel in DOM (geen display:none i.v.m. sommige parsers) */
.seo-context {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

main {
  position: relative;
  z-index: 1;
  margin-left: var(--sidebar-w);
  min-width: 0;
  max-width: 100%;
  transition: margin-left 0.35s var(--ease-out);
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* Grain overlay */
.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.grain--off {
  opacity: 0;
}

.particles-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.14;
}

/* ——— Glass ——— */
.glass-panel {
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.65) inset,
    var(--shadow-card),
    0 0 60px -36px rgba(0, 168, 168, 0.12);
}

.glass-panel--topbar {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  margin: 0;
  padding: 0;
  max-width: none;
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 8px 28px -12px var(--shadow-soft);
}

/* Bovenaan pagina: geen glas op de topbar (eerste pixel scroll = weer glas) */
.header__top.glass-panel--topbar.header__top--at-top {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

.glass-panel--inline {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.glass-panel--float {
  padding: 1.5rem;
  max-width: 220px;
  position: absolute;
  right: clamp(1rem, 6vw, 4rem);
  bottom: clamp(5rem, 18vh, 10rem);
}

/* ——— Header + sidebar (Studio Glass–style) ——— */
.header {
  position: relative;
  z-index: 100;
}

.glass-sidebar {
  display: none !important;
}

.sidebar__menu {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0.35rem;
  border: none;
  background: transparent;
  color: rgba(26, 35, 41, 0.88);
  cursor: pointer;
  border-radius: 14px;
  transition: color 0.25s ease;
}

.sidebar__menu:hover,
.sidebar__menu:focus-visible {
  color: var(--teal);
  outline: none;
}

.sidebar__menu-burger {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 24px;
}

.sidebar__menu-burger-line {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.3s var(--ease-out);
}

.sidebar__menu-burger-line--mid {
  width: 62%;
  align-self: flex-end;
}

.sidebar__menu-label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(26, 35, 41, 0.72);
}

.sidebar__social {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.45rem;
}

.sidebar__icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(26, 35, 41, 0.78);
  transition:
    color 0.25s ease,
    filter 0.25s ease,
    transform 0.25s var(--ease-out);
}

.sidebar__icon-svg {
  display: block;
}

.sidebar__icon-link:hover {
  color: var(--teal);
  filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.45));
  transform: scale(1.06);
}

.header__top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  min-height: var(--topbar-h);
  margin-top: -1px;
  padding-top: 1px;
  transition:
    transform 0.5s var(--ease-out),
    opacity 0.4s ease;
}

.header__top.glass-panel--topbar {
  transition:
    transform 0.5s var(--ease-out),
    opacity 0.4s ease,
    background 0.22s ease,
    border-bottom-color 0.22s ease,
    box-shadow 0.22s ease,
    -webkit-backdrop-filter 0.22s ease,
    backdrop-filter 0.22s ease;
}

.header__top.is-hidden {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}

.header__top-inner {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.72rem var(--header-edge-pad);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-height: var(--topbar-h);
  min-width: 0;
  box-sizing: border-box;
}

.header__left {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2.2vw, 1.35rem);
  flex-shrink: 0;
  z-index: 2;
}

.header__menu.sidebar__menu {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  margin-right: 0;
  padding: 0.38rem 0.2rem;
  border-radius: 12px;
  z-index: 2;
}

.header__menu .sidebar__menu-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.24em;
}

.header__brand {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  flex-shrink: 0;
  margin-right: 0;
  z-index: 2;
}

.logo {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.logo--header {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  color: var(--text-primary);
}

.logo__img {
  display: block;
  height: clamp(1.2rem, 2.6vw, 1.55rem);
  width: auto;
  max-width: min(200px, 42vw);
  object-fit: contain;
  object-position: left center;
}

.logo__img--footer {
  height: clamp(1.35rem, 3vw, 1.75rem);
  max-width: 220px;
  margin: 0;
}

.logo__dot {
  color: var(--teal);
  text-shadow: 0 0 24px rgba(0, 255, 255, 0.6);
}

.nav--top {
  display: none;
  position: static;
  transform: none;
  left: auto;
  top: auto;
  z-index: 1;
  gap: clamp(1rem, 1.8vw, 1.65rem);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: auto;
  justify-self: center;
}

.nav--top a {
  font-weight: 600;
  transition: color 0.25s ease;
}

.nav--top a:hover {
  color: var(--teal);
}

@media (min-width: 1100px) and (max-width: 1279px) {
  .nav--top {
    gap: 0.65rem;
    font-size: 0.8125rem;
  }
}

/* Smalle desktop: gecentreerde nav mag wrappen i.p.v. over logo/CTA te vallen */
@media (min-width: 900px) and (max-width: 1199px) {
  .nav--top {
    white-space: normal;
    flex-wrap: wrap;
    justify-content: center;
    max-width: min(36rem, calc(100vw - var(--header-edge-pad) * 2 - 22rem));
    row-gap: 0.28rem;
    column-gap: clamp(0.4rem, 1.1vw, 0.85rem);
    line-height: 1.25;
    text-align: center;
  }
}

.header__actions {
  display: none;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  margin-left: auto;
  z-index: 2;
  justify-self: end;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--muted);
  border: 1px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.icon-btn:hover {
  color: var(--teal);
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(0, 168, 168, 0.08);
}

.btn--header {
  margin-left: 0;
}

.btn--header-cta {
  padding: 0.52rem 1.2rem;
  margin-left: 0;
  line-height: 1.25;
  border-radius: var(--radius-btn);
}

.btn--header-cta__main {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.header__actions .btn--header-cta__main {
  font-weight: 700;
}

@media (min-width: 900px) and (max-width: 1099px) {
  .btn--header-cta {
    padding: 0.48rem 0.95rem;
    margin-left: 0;
  }

  .btn--header-cta__main {
    font-size: 0.75rem;
    letter-spacing: 0.03em;
  }
}

.btn--sm {
  padding: 0.5rem 1.1rem;
  font-size: 0.8125rem;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #1a2329;
  margin: 0 auto;
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}

body.site-chrome--on-dark-hero .nav-toggle span {
  background: #fff;
}

.nav-toggle.is-open span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.nav-toggle.is-open span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

/* Fullscreen menu (mega layout) */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.menu-overlay[hidden] {
  display: none !important;
}

.menu-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 8, 0.82);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  animation: menu-backdrop-in 0.55s var(--ease-out) both;
}

.menu-overlay__shell {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: rgba(255, 255, 255, 0.95);
}

@keyframes menu-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes menu-rail-in {
  from {
    opacity: 0;
    transform: translate3d(-18px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes menu-rail-in-mobile {
  from {
    opacity: 0;
    transform: translate3d(0, -14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes menu-main-in {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes menu-bar-in {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.menu-overlay__body {
  flex: 1;
  display: flex;
  min-height: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.menu-overlay__rail {
  flex-shrink: 0;
  width: var(--menu-rail-w);
  min-width: var(--menu-rail-w);
  max-width: var(--menu-rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.35rem 0.35rem 1.25rem;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  gap: 1.25rem;
  background: rgba(8, 10, 14, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: menu-rail-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.07s both;
}

.menu-overlay__rail-close {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.menu-overlay__rail-close span {
  position: absolute;
  width: 18px;
  height: 2px;
  background: #f4f8f8;
  border-radius: 2px;
}

.menu-overlay__rail-close span:first-child {
  transform: rotate(45deg);
}

.menu-overlay__rail-close span:last-child {
  transform: rotate(-45deg);
}

.menu-overlay__rail-close:hover,
.menu-overlay__rail-close:focus-visible {
  background: rgba(0, 255, 255, 0.12);
  outline: none;
}

.menu-overlay__rail-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  user-select: none;
}

.menu-overlay__rail-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  flex: 1;
  justify-content: center;
}

.menu-overlay__rail-icon {
  display: flex;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s ease;
}

.menu-overlay__rail-icon:hover,
.menu-overlay__rail-icon:focus-visible {
  color: var(--teal);
  outline: none;
}

.menu-overlay__main {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  -webkit-overflow-scrolling: touch;
  animation: menu-main-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both;
}

.menu-overlay__main-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  max-width: var(--content-max);
}

.menu-overlay__logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  transition: opacity 0.2s ease;
}

.menu-overlay__logo-link:hover,
.menu-overlay__logo-link:focus-visible {
  opacity: 0.88;
  outline: none;
}

.menu-overlay__logo-img {
  height: clamp(1.35rem, 2.8vw, 1.65rem);
  width: auto;
  max-width: min(200px, 50vw);
  object-fit: contain;
  object-position: left center;
}

.menu-overlay__pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
}

.menu-overlay__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-btn);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 255, 255, 0.35);
  background: rgba(0, 255, 255, 0.06);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.menu-overlay__pill:hover,
.menu-overlay__pill:focus-visible {
  background: rgba(0, 255, 255, 0.14);
  color: var(--teal);
  border-color: rgba(0, 255, 255, 0.55);
  outline: none;
}

.menu-overlay__mega {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.2vw, 1.65rem) clamp(1.35rem, 2.8vw, 2.35rem);
  align-content: start;
  align-items: start;
  max-width: var(--content-max);
}

/* Geen negatieve link-marges in mega: die trekken tekst visueel in de kolom-gap */
.menu-overlay__mega .menu-overlay__link-lg,
.menu-overlay__mega .menu-overlay__link-sm {
  margin-inline: 0;
}

.menu-overlay__mega-label {
  margin: 0 0 0.35rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(0, 255, 255, 0.55);
}

.menu-overlay__mega-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.menu-overlay__mega-col--primary {
  gap: 0.5rem;
  align-self: start;
}

.menu-overlay__mega-col--services {
  align-self: start;
  min-width: 0;
}

.menu-overlay__mega-col--secondary {
  align-self: start;
}

/* Desktop: brede dienstenkolom + twee secundaire kolommen */
@media (min-width: 900px) {
  .menu-overlay__mega {
    grid-template-columns: minmax(min(100%, 22rem), 1.55fr) minmax(12.5rem, 1.08fr) minmax(10.5rem, 0.88fr);
    max-width: var(--content-max);
  }

  .menu-overlay__mega-col--services .menu-overlay__link-lg {
    white-space: nowrap;
    font-size: clamp(1.02rem, 1.95vw, 1.72rem);
    letter-spacing: 0.1em;
  }

  .menu-overlay__mega > .menu-overlay__mega-col--secondary {
    align-self: center;
    transform: translateY(clamp(0.75rem, 2.2vh, 1.65rem));
  }

  /* Eerste secundaire kolom = 2e nav (na één dienstenkolom) */
  .menu-overlay__mega > .menu-overlay__mega-col--secondary:nth-child(2) {
    position: relative;
    margin-inline-start: clamp(0.85rem, 2vw, 1.85rem);
    padding-inline-start: clamp(0.75rem, 1.6vw, 1.35rem);
  }

  .menu-overlay__mega > .menu-overlay__mega-col--secondary:nth-child(2)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    transform: translateX(calc(-1 * clamp(0.55rem, 1.2vw, 0.95rem)));
    width: 1px;
    height: clamp(10.5rem, 56%, 18.5rem);
    max-height: min(18.5rem, 54vh);
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(255, 255, 255, 0.07) 12%,
      rgba(190, 198, 208, 0.32) 30%,
      rgba(190, 198, 208, 0.32) 70%,
      rgba(255, 255, 255, 0.07) 88%,
      transparent 100%
    );
    pointer-events: none;
  }
}

@media (min-width: 900px) and (max-width: 1180px) {
  .menu-overlay__mega-col--services .menu-overlay__link-lg {
    white-space: normal;
    letter-spacing: 0.08em;
  }
}

.menu-overlay__link-lg {
  font-size: clamp(1.15rem, 2.4vw, 1.85rem);
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.94);
  padding: 0.35rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 8px;
  line-height: 1.35;
  transition: background 0.2s ease;
}

.menu-overlay__link-lg:hover,
.menu-overlay__link-lg:focus-visible {
  background: rgba(0, 255, 255, 0.1);
  outline: none;
}

.menu-overlay__link-sm {
  font-size: clamp(0.84rem, 1.35vw, 0.98rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.72);
  padding: 0.32rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 8px;
  line-height: 1.45;
  transition: background 0.2s ease, color 0.2s ease;
}

.menu-overlay__link-sm:hover,
.menu-overlay__link-sm:focus-visible {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 255, 255, 0.1);
  outline: none;
}

.menu-overlay__bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex-shrink: 0;
  background: rgba(4, 6, 9, 0.55);
  animation: menu-bar-in 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
}

.menu-overlay__bar-cell {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: clamp(1rem, 2.5vw, 1.35rem) clamp(0.85rem, 2vw, 1.25rem);
  text-decoration: none;
  color: inherit;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
  transition: background 0.2s ease;
  min-height: 5.5rem;
}

.menu-overlay__bar-cell:last-child {
  border-right: none;
}

.menu-overlay__bar-cell:hover,
.menu-overlay__bar-cell:focus-visible {
  background: rgba(0, 255, 255, 0.06);
  outline: none;
}

.menu-overlay__bar-cell--hours {
  cursor: default;
  pointer-events: none;
}

.menu-overlay__bar-cell--hours:hover,
.menu-overlay__bar-cell--hours:focus-visible {
  background: transparent;
}

.menu-overlay__bar-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  color: rgba(255, 255, 255, 0.88);
}

.menu-overlay__bar-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: clamp(0.78rem, 1.2vw, 0.875rem);
  font-weight: 500;
  line-height: 1.45;
  word-break: break-word;
}

.menu-overlay__bar-line--muted {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.85em;
}

.menu-overlay__bar-cell--cta {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: clamp(0.65rem, 1.1vw, 0.72rem);
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  text-underline-offset: 0.4rem;
  min-height: 5.5rem;
}

.menu-overlay__bar-cell--cta:hover,
.menu-overlay__bar-cell--cta:focus-visible {
  color: var(--teal);
  text-decoration-color: rgba(0, 255, 255, 0.55);
  background: rgba(0, 255, 255, 0.08);
}

.menu-overlay__bar-cta-arrow {
  display: flex;
  color: var(--teal);
}

@media (prefers-reduced-motion: reduce) {
  .menu-overlay__backdrop,
  .menu-overlay__rail,
  .menu-overlay__main,
  .menu-overlay__bar {
    animation: none;
  }
}

@media (max-width: 899px) {
  /* Eén verticale scroll voor heel het menu (geen geneste scroll in .menu-overlay__main) */
  .menu-overlay__shell {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  .menu-overlay__body {
    flex: 0 0 auto;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
  }

  .menu-overlay__main {
    flex: 0 0 auto;
    overflow: visible;
    min-height: 0;
  }

  .menu-overlay__rail {
    flex-direction: row;
    width: 100%;
    min-width: 0;
    max-width: none;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 1rem;
    animation-name: menu-rail-in-mobile;
    animation-delay: 0.05s;
  }

  .menu-overlay__rail-title {
    writing-mode: horizontal-tb;
    transform: none;
    flex: 1;
    text-align: center;
    letter-spacing: 0.35em;
  }

  .menu-overlay__rail-social {
    flex-direction: row;
    flex: 0 1 auto;
    gap: 0.85rem;
    justify-content: flex-end;
  }

  .menu-overlay__mega {
    grid-template-columns: 1fr;
  }

  .menu-overlay__mega-col--services .menu-overlay__link-lg {
    white-space: normal;
  }

  /* Dubbele contactlinks: e-mail / WhatsApp / social staan al in de rail bovenaan */
  .menu-overlay__mega nav[aria-label="Direct contact"] {
    display: none !important;
  }

  .menu-overlay__link-lg {
    font-size: clamp(1rem, 0.6rem + 2.35vw, 1.4rem);
    letter-spacing: 0.1em;
    line-height: 1.42;
    padding-block: 0.42rem;
  }

  .menu-overlay__link-sm {
    font-size: clamp(0.84rem, 0.52rem + 1.7vw, 1rem);
    line-height: 1.5;
  }

  .menu-overlay__bar {
    grid-template-columns: 1fr 1fr;
  }

  .menu-overlay__bar-cell {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 5rem;
  }

  .menu-overlay__bar-cell:nth-child(2n) {
    border-right: none;
  }

  .menu-overlay__bar-cell:nth-last-child(-n + 2) {
    border-bottom: none;
  }

  .menu-overlay__bar-cell--cta {
    grid-column: 1 / -1;
    min-height: 4.5rem;
  }
}

@media (max-width: 479px) {
  .menu-overlay__mega {
    grid-template-columns: 1fr;
  }

  .menu-overlay__bar {
    grid-template-columns: 1fr;
  }

  .menu-overlay__bar-cell {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .menu-overlay__bar-cell:last-child {
    border-bottom: none;
  }

  .menu-overlay__bar-cell:nth-child(2n) {
    border-right: none;
  }
}

body.menu-open {
  overflow: hidden;
}

@media (min-width: 900px) {
  .nav--top,
  .header__actions,
  .btn--header {
    display: flex;
  }

  .header__top-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: clamp(0.75rem, 2vw, 1.5rem);
  }

  .header__left {
    grid-column: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    width: 100%;
    gap: 0;
    padding-right: clamp(0.75rem, 2vw, 1.35rem);
  }

  .header__menu.sidebar__menu {
    grid-column: 1;
  }

  .header__brand {
    grid-column: 2;
    justify-self: center;
    width: max-content;
  }
  
  .nav--top {
    grid-column: 2;
  }

  .header__actions {
    grid-column: 3;
    margin-left: 0;
  }
}

@media (min-width: 900px) and (max-width: 1049px) {
  .nav--top {
    gap: 0.85rem;
    font-size: 0.8125rem;
  }
}

/* ——— Buttons ——— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.35rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}

/* Alle knoppen / CTA's: minder afgerond (geen pill) */
.btn,
a.btn,
button.btn,
input[type="submit"].btn,
.btn--header-cta,
.btn--phone-cta,
.btn--hero-secondary,
.btn--hero-contact,
.btn--hero-primary,
.home-solution__cta,
.home-services__cta,
.home-crm__cta,
.home-trust__cta,
.home-process__cta,
.home-problems__cta,
.wlm-problems__cta,
.services__more-link,
.home-services__more-toggle,
.page-home .home-crm__panel-toggle,
.form-mode-toggle,
.form-mode-toggle__btn,
.case-page-nav__link,
.wlm-hero__price-float,
.blog-seo-valtex__cta,
.home-solution__chain li {
  border-radius: var(--radius-btn) !important;
}

/* Cards / panels: lichte afronding (niet te rond) */
.home-solution__frame,
.home-solution__frame::before,
.home-solution__chain,
.home-services__card,
.home-services__card-icon,
.home-services__card-badge,
.home-problems__item,
.home-problems__trigger,
.home-crm__card,
.home-trust__frame,
.home-trust__cta,
.home-audit__stats li,
.home-audit__company-card,
.vtx-proof-strip--foot,
.home-close-cta,
.contact-hero__panel,
.contact-tile,
.wlm-pricing__card,
.wlm-chip,
.blog-card,
.blog-card__cat,
.blog-filter {
  border-radius: var(--radius-card) !important;
}

.home-services__card-icon,
.home-services__card-badge,
.wlm-chip,
.blog-card__cat,
.blog-filter {
  border-radius: var(--radius-sm) !important;
}

.btn.btn--header-cta {
  align-items: center;
  justify-content: center;
}

.btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #041210;
  background-color: var(--teal-dim);
  background-image:
    linear-gradient(
      105deg,
      transparent 0%,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0) 62%,
      transparent 100%
    ),
    linear-gradient(135deg, var(--teal) 0%, var(--teal-dim) 100%);
  background-size: 55% 100%, 100% 100%;
  background-position: -80% 0, 0 0;
  background-repeat: no-repeat;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.15) inset,
    0 4px 24px -4px rgba(0, 255, 255, 0.45);
  transition:
    background-position 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}

.btn--primary.btn--header-cta,
.btn--primary.btn--header-cta .btn--header-cta__main {
  color: #041210;
}

.btn--primary.btn--header-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  gap: 0;
  background-color: #00e8e8;
  background-image: linear-gradient(135deg, #8affff 0%, #00ffff 45%, #00d8d8 100%);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  box-shadow:
    0 4px 28px -6px rgba(0, 255, 255, 0.55),
    0 0 40px -12px rgba(0, 255, 255, 0.38);
  outline: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.35s ease;
}

.btn--primary.btn--header-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0) 58%,
    transparent 100%
  );
  transform: translateX(-115%) skewX(-14deg);
  pointer-events: none;
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn--primary.btn--header-cta::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 1.55em;
  height: 1.15em;
  opacity: 0;
  transform: translate(calc(-50% - 1.35em), -50%) scale(0.82);
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23041210' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 7l5 5-5 5'/%3E%3C/svg%3E");
  pointer-events: none;
  transition:
    opacity 0.32s var(--ease-out),
    transform 0.42s var(--ease-out);
}

.btn--primary.btn--header-cta .btn--header-cta__main {
  position: relative;
  z-index: 1;
  display: inline-block;
  pointer-events: none;
  text-decoration: none;
  text-shadow: none;
  -webkit-text-stroke: 0 transparent;
  outline: none;
  border: none;
  box-shadow: none;
  background: transparent;
  transition: opacity 0.28s var(--ease-out);
}

.btn--primary.btn--header-cta:hover,
.btn--primary.btn--header-cta:focus,
.btn--primary.btn--header-cta:focus-visible {
  color: #041210;
  background-image: linear-gradient(135deg, #8affff 0%, #00ffff 45%, #00d8d8 100%);
  background-position: 0 0;
  outline: none;
  text-decoration: none;
  transform: none;
  filter: none;
  box-shadow:
    0 6px 32px -4px rgba(0, 255, 255, 0.65),
    0 0 52px -8px rgba(0, 255, 255, 0.48);
}

.btn--primary.btn--header-cta:hover .btn--header-cta__main,
.btn--primary.btn--header-cta:focus .btn--header-cta__main,
.btn--primary.btn--header-cta:focus-visible .btn--header-cta__main {
  color: #041210;
  opacity: 0;
}

.btn--primary.btn--header-cta:hover::before,
.btn--primary.btn--header-cta:focus-visible::before {
  transform: translateX(115%) skewX(-14deg);
}

.btn--primary.btn--header-cta:hover::after,
.btn--primary.btn--header-cta:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.btn--primary:not(.btn--header-cta):hover,
.btn--primary:not(.btn--header-cta):focus-visible {
  background-position: 180% 0, 0 0;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22) inset,
    0 6px 28px -4px rgba(0, 255, 255, 0.5);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  border: 1px solid var(--border-glass-strong);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(102, 255, 255, 0.35);
}

.btn--lg {
  padding: 0.85rem 1.75rem;
  font-size: 0.95rem;
}

.btn--full {
  width: 100%;
}

.btn--hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1.35rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  border-radius: var(--radius-btn);
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

.btn--hero-secondary:hover,
.btn--hero-secondary:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow: none;
  opacity: 1;
}

.hero--cinema .btn--hero-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.38);
}

.hero--cinema .btn--hero-secondary:hover,
.hero--cinema .btn--hero-secondary:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow: none;
}

.btn--hero-contact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.66rem 1.48rem;
  font-family: inherit;
  font-size: 0.84375rem;
  font-weight: 700;
  border-radius: var(--radius-btn);
  color: #041210;
  background-color: var(--teal-dim);
  background-image:
    linear-gradient(
      105deg,
      transparent 0%,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0) 62%,
      transparent 100%
    ),
    linear-gradient(135deg, var(--teal) 0%, var(--teal-dim) 100%);
  background-size: 55% 100%, 100% 100%;
  background-position: -80% 0, 0 0;
  background-repeat: no-repeat;
  border: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2) inset,
    0 4px 28px -6px rgba(0, 255, 255, 0.55);
  transition:
    background-position 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}

.btn--hero-contact:hover,
.btn--hero-contact:focus-visible {
  background-position: 180% 0, 0 0;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.26) inset,
    0 6px 32px -4px rgba(0, 255, 255, 0.58);
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary,
  .btn--hero-contact {
    transition-duration: 0.01ms;
  }

  .btn--primary.btn--header-cta::before {
    transition: none;
    transform: none;
    opacity: 0;
  }

  .btn--primary.btn--header-cta:hover::before,
  .btn--primary.btn--header-cta:focus-visible::before {
    transform: none;
    opacity: 0;
  }
}

/* ——— Hero (Studio Glass–achtig: één beeld, slider, diagonalen) ——— */
.hero--cinema {
  position: relative;
  z-index: 1;
  /* 100svh = stabiele kleine viewport (minder “spring” bij adresbalk Chrome/Safari) */
  min-height: 100vh;
  min-height: 100svh;
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  isolation: isolate;
}

.hero__viewport {
  position: relative;
  min-height: inherit;
  overflow: visible;
  background: var(--bg-root);
}

.hero__slides--static {
  touch-action: auto;
}

.hero__slides--static .hero__slide-media {
  position: absolute;
  inset: -12px;
  overflow: hidden;
}

.hero__slides--static .hero__slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(5px);
  transform: scale(1.08);
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

@media (max-width: 639px) {
  .hero__slides--static .hero__slide-media img {
    filter: blur(4px);
    transform: scale(1.06);
  }
}

.hero--static-bg .hero__pager--fixed {
  display: none;
}

.hero__slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.hero__slides-track {
  --hero-slide-n: 8;
  --hero-slide-i: 1;
  /* --hero-slide-px = exacte viewportbreedte van .hero__slides (JS) — voorkomt subpixel-spleet */
  display: flex;
  height: 100%;
  width: calc(var(--hero-slide-n) * var(--hero-slide-px, 100%));
  transform: translate3d(calc(-1 * var(--hero-slide-i) * var(--hero-slide-px, 0px)), 0, 0);
  will-change: transform;
  transition: transform 2.35s cubic-bezier(0.38, 0.18, 0.22, 1);
  backface-visibility: hidden;
}

.hero__slides-track--no-transition {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero__slides-track {
    transition-duration: 0.01ms;
  }
}

.hero__slide {
  position: relative;
  flex: 0 0 var(--hero-slide-px, calc(100% / var(--hero-slide-n)));
  width: var(--hero-slide-px, calc(100% / var(--hero-slide-n)));
  min-width: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.hero__slide-media {
  position: absolute;
  inset: -12px;
  overflow: hidden;
}

.hero__slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(5px);
  transform: scale(1.08);
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

@media (max-width: 639px) {
  .hero__slide-media img {
    filter: blur(4px);
    transform: scale(1.06);
  }
}

.hero__gradient-read {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(4, 6, 9, 0.55) 0%,
    rgba(4, 6, 9, 0.12) 32%,
    rgba(4, 6, 9, 0.2) 55%,
    rgba(3, 5, 8, 0.92) 100%
  );
}

/* Extra donkere zone links waar de copy staat — leesbaar op elke slide */
.hero__gradient-read--left {
  z-index: 2;
  background:
    radial-gradient(ellipse 120% 115% at 12% 52%, rgba(2, 4, 8, 0.92) 0%, rgba(2, 4, 8, 0.45) 42%, transparent 68%),
    radial-gradient(ellipse 90% 80% at 28% 58%, rgba(3, 6, 12, 0.55) 0%, transparent 58%),
    linear-gradient(90deg, rgba(2, 4, 7, 0.75) 0%, rgba(2, 4, 7, 0.2) min(48%, 520px), transparent min(62%, 720px));
}

.hero__diagonals {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__diagonal-line {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  padding: calc(var(--topbar-h) + 1rem) clamp(1.25rem, 4vw, 2.5rem) max(3.25rem, env(safe-area-inset-bottom))
    clamp(1.25rem, 4vw, 2.5rem);
  padding-left: calc(var(--sidebar-w) + clamp(0.75rem, 2.5vw, 1.75rem));
  pointer-events: none;
}

.hero__stage-inner {
  pointer-events: auto;
  grid-column: 1;
  justify-self: center;
  width: 100%;
  min-width: 0;
  max-width: min(44rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

@media (min-width: 1000px) {
  .hero__stage-inner {
    max-width: min(66rem, 96%);
  }
}

.hero__copy {
  width: 100%;
  min-width: 0;
  max-width: min(44rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

@media (min-width: 1000px) {
  .hero__copy {
    max-width: min(66rem, 100%);
  }
}

.hero__eyebrow {
  margin: 0 0 0.28rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

.hero__headline {
  position: relative;
  margin: 0 0 0.45rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.1rem, 6vw, 3.65rem);
  line-height: 1.18;
  letter-spacing: 0.022em;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.25);
  overflow: visible;
  padding-top: 0.06em;
  padding-bottom: 0.1em;
  max-width: 100%;
  filter: drop-shadow(0 3px 28px rgba(0, 0, 0, 0.75));
}

/* Eén korte H1 voor crawlers; zichtbare hero-titel staat in .hero__headline */
.hero__h1-seo-only,
.hero__headline .hero__h1-seo {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  font-size: 1px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  text-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
}

.hero__title-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.03em;
  width: 100%;
  line-height: 1.26;
  font-size: 1.03em;
}

.hero__title-line {
  display: block;
  font-weight: 600;
  padding-bottom: 0.05em;
  background: linear-gradient(105deg, #fff 0%, rgba(255, 255, 255, 0.95) 50%, rgba(0, 255, 255, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero__title-line:first-child {
  padding-top: 0.04em;
}

.hero__title-line:last-child {
  padding-bottom: 0.1em;
}

/* Laptop: subregel wrapt onder ~1200px om overlap bij resize te vermijden */
@media (min-width: 900px) and (max-width: 1600px) {
  .hero__headline {
    font-size: clamp(1.72rem, 2.85vw + 0.45rem, 3.05rem);
    letter-spacing: 0.014em;
  }

  .hero__title-line--sub {
    white-space: normal;
    text-wrap: balance;
  }
}

@media (min-width: 1200px) and (max-width: 1600px) {
  .hero__title-line--sub {
    white-space: nowrap;
  }
}

.hero__lede {
  margin: 0 0 0.85rem;
  max-width: 100%;
  font-size: clamp(0.9rem, 1.55vw, 1.03rem);
  font-weight: 400;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.76);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.65);
}

.hero__lede strong {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
}

/* ——— Hero modern (home): checks, dual CTA, proof, device mockups ——— */
.hero__copy.hero__copy--modern,
.hero__copy:has(.hero__headline--modern) {
  max-width: min(39rem, 100%);
}

.hero__headline--modern {
  font-size: clamp(2.3rem, 4.85vw, 3.62rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.hero__headline--modern .hero__title-stack {
  margin: 0;
}

.hero__title-line--modern {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: rgba(255, 255, 255, 0.98);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.98);
  font-weight: 800;
  white-space: normal;
  text-wrap: balance;
}

.hero__accent {
  color: #00ffff;
  -webkit-text-fill-color: #00ffff;
}

.hero__accent--soft {
  color: rgba(120, 255, 255, 0.92);
  -webkit-text-fill-color: rgba(120, 255, 255, 0.92);
}

.hero__lede--modern {
  max-width: 39rem;
  margin-bottom: 0.75rem;
  font-size: clamp(1.06rem, 1.67vw, 1.22rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}

.hero__price-line {
  margin: 0 0 1.25rem;
  max-width: 39rem;
  font-size: clamp(0.92rem, 1.35vw, 1.02rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: rgba(120, 255, 255, 0.88);
}

.hero__checks {
  margin: 0 0 1.45rem;
  padding: 0;
  max-width: 32rem;
}

.hero__checks-marquee {
  width: 100%;
}

.hero__checks-track {
  width: 100%;
}

.hero__checks-group {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1.3rem;
}

.hero__checks-item {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.935rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
}

.hero__checks-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  transform: translateY(-50%);
}

.hero__cta-pair {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem 1.15rem;
  margin-bottom: 1.35rem;
  max-width: 100%;
}

.btn--hero-secondary.btn {
  padding: 0.72rem 1.35rem;
  line-height: 1.25;
  min-height: 0;
  white-space: nowrap;
  transform: none;
}

.btn--hero-secondary.btn:hover,
.btn--hero-secondary.btn:focus-visible {
  transform: none;
}

.btn--hero-primary.btn--header-cta {
  flex-shrink: 0;
  padding: 0.74rem 1.5rem;
}

.btn--hero-primary.btn--header-cta .btn--header-cta__main {
  font-size: 0.875rem;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 34rem;
}

.hero__proof-avatars {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.35rem 0.18rem 0.18rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 28px -10px rgba(0, 255, 255, 0.35);
}

.hero__proof-avatar {
  display: block;
  width: 2.35rem;
  height: 2.35rem;
  margin-left: -0.55rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  border: 2px solid rgba(6, 16, 20, 0.92);
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.55);
  background: #0a1218;
}

.hero__proof-avatar:first-child {
  margin-left: 0;
}

.hero__proof-meta {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

.hero__proof-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.hero__proof-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  color: #ffc94a;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255, 201, 74, 0.35));
}

.hero__proof-stars svg {
  display: block;
  flex-shrink: 0;
}

.hero__proof-score {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1;
}

.hero__proof-score strong {
  font-weight: 800;
  color: #fff;
}

.hero__proof-text {
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.78);
  max-width: 22rem;
}

.hero__proof-text--short {
  display: none;
}

.hero__showcase {
  grid-column: 2;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: min(40rem, 100%);
  pointer-events: none;
  display: none;
}

.hero__device-stack {
  position: relative;
  width: 100%;
  height: clamp(280px, 38vh, 420px);
}

.hero__device {
  margin: 0;
}

.hero__device--laptop {
  position: absolute;
  right: 0;
  top: 50%;
  bottom: auto;
  width: 94%;
  z-index: 1;
  transform: translateY(-50%);
}

.hero__device-bezel--laptop {
  padding: 0.28rem 0.28rem 0.22rem;
  border-radius: 0.62rem 0.62rem 0 0;
  background: linear-gradient(180deg, rgba(28, 32, 38, 0.96) 0%, rgba(12, 14, 18, 0.98) 100%);
  box-shadow:
    0 18px 48px -16px rgba(0, 0, 0, 0.65),
    0 0 0 0.5px rgba(255, 255, 255, 0.1) inset;
}

.hero__device-bezel--laptop .hero__device-screen {
  aspect-ratio: 16 / 10.5;
  border-radius: 0.22rem;
  overflow: hidden;
  background: #0a0e12;
}

.hero__device-base {
  display: block;
  width: 108%;
  height: 0.34rem;
  margin: 0 auto;
  margin-left: -4%;
  border-radius: 0 0 0.45rem 0.45rem;
  background: linear-gradient(180deg, rgba(40, 44, 50, 0.95) 0%, rgba(18, 20, 24, 0.98) 100%);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
}

.hero__device--phone {
  position: absolute;
  left: 0;
  top: 50%;
  bottom: auto;
  width: 28%;
  z-index: 2;
  transform: translate(calc(-5% - 10px), calc(-28% - 2px));
}

.hero__device-bezel--phone {
  position: relative;
  padding: 0.14rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(24, 28, 34, 0.98) 0%, rgba(10, 12, 16, 1) 100%);
  box-shadow:
    0 16px 40px -14px rgba(0, 0, 0, 0.7),
    0 0 0 0.5px rgba(255, 255, 255, 0.12) inset;
}

.hero__device-bezel--phone .hero__device-screen {
  aspect-ratio: 9 / 19;
  border-radius: 0.78rem;
  overflow: hidden;
  background: #0a0e12;
}

.hero__device-screen picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__device-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.hero__device-bezel--laptop .hero__device-screen img {
  height: 108%;
  object-position: center top;
  transform: translateY(-1.5%);
}

/* Cases stack cards */
.hero__cases-fan {
  display: none;
}

.hero__case-card {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border-radius: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #0a1218;
  box-shadow:
    0 14px 32px -16px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(0, 255, 255, 0.05);
}

.hero__case-card picture {
  position: absolute;
  inset: 0;
  display: block;
}

.hero__case-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.hero__case-card__scrim {
  position: absolute;
  inset: auto 0 0;
  height: 52%;
  background: linear-gradient(180deg, transparent 0%, rgba(4, 10, 14, 0.9) 100%);
  pointer-events: none;
}

.hero__case-card__meta {
  position: absolute;
  left: 0.65rem;
  right: 0.5rem;
  bottom: 0.6rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
}

.hero__case-card__tags {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(0, 245, 245, 0.92);
}

.hero__case-card__name {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.15;
}

/* Home: motion video instead of cases fan */
.page-home .hero__device-stack {
  display: none;
}

.page-home .hero__showcase {
  pointer-events: auto;
}

.page-home .hero__cases-fan {
  display: none;
}

.page-home .hero__motion {
  position: relative;
  width: 100%;
  border-radius: 1.05rem;
  overflow: hidden;
  isolation: isolate;
  background: #070b10;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 22px 48px -20px rgba(0, 0, 0, 0.78),
    0 0 28px -12px rgba(0, 255, 255, 0.2);
}

.page-home .hero__motion::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.08) 0%, transparent 42%, rgba(0, 0, 0, 0.18) 100%);
  z-index: 1;
}

.page-home .hero__motion-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center center;
  background: #070b10;
  /* Keep decode on its own layer; avoid constant repaints on mobile */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (max-width: 899px) {
  .page-home .hero__motion::after {
    background: rgba(0, 0, 0, 0.06);
  }

  .page-home .hero__motion-video {
    aspect-ratio: 16 / 9;
    max-height: min(42svh, 18rem);
  }
}

@media (min-width: 900px) {
  .hero__showcase {
    display: block;
  }

  .page-home .hero__showcase {
    max-width: min(44rem, 100%);
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
    transform: none;
    pointer-events: auto;
  }

  .page-home .hero__motion {
    border-radius: 1.15rem;
  }

  .hero__stage-inner {
    max-width: min(36rem, 100%);
  }
}

@media (max-width: 899px) {
  .hero__checks-group {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .page-home .hero__checks-marquee {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      #000 10%,
      #000 90%,
      transparent 100%
    );
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }

  .page-home .hero__checks-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
    --hero-checks-marquee-groups: 2;
    --hero-checks-marquee-duration: 28s;
    animation: hero-checks-marquee var(--hero-checks-marquee-duration) linear infinite;
  }

  .page-home .hero__checks-group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0;
    padding-right: clamp(1.1rem, 4vw, 1.75rem);
  }

  .page-home .hero__checks-item {
    padding-left: 0;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
  }

  .page-home .hero__checks-item::before {
    display: none;
  }

  .page-home .hero__checks-item::after {
    content: "";
    display: inline-block;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: #00ffff;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    margin: 0 clamp(0.85rem, 3.5vw, 1.35rem);
    flex-shrink: 0;
  }

  @keyframes hero-checks-marquee {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(calc(-100% / var(--hero-checks-marquee-groups)), 0, 0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .page-home .hero__checks-track {
      animation: none;
      width: 100%;
      flex-wrap: wrap;
      justify-content: center;
    }

    .page-home .hero__checks-group {
      flex-wrap: wrap;
      justify-content: center;
      padding-right: 0;
    }
  }

  .hero__headline--modern {
    font-size: clamp(1.9rem, 6vw, 2.47rem);
  }

  /* Home toont showcase onder tekst; andere pagina’s verbergen op smal scherm */
  .hero__showcase {
    display: none;
  }

  .page-home .hero__showcase {
    display: block;
    grid-column: auto;
    order: 2;
    align-self: center;
    width: 100%;
    max-width: min(36rem, 100%);
    margin: clamp(1rem, 3.5svh, 2rem) auto clamp(0.75rem, 2.5svh, 1.35rem);
    pointer-events: auto;
  }
}

@media (min-width: 900px) and (max-width: 1600px) {
  .hero__eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.24em;
  }

  .hero__lede {
    font-size: clamp(0.86rem, 1.32vw, 0.98rem);
  }
}

.hero__rating {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem 0.75rem;
  margin: 0 0 1.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero__stars {
  display: inline-flex;
  gap: 0.12rem;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0;
}

.hero__star {
  color: var(--teal);
  text-shadow: 0 0 14px rgba(0, 255, 255, 0.45);
}

.hero__star--partial {
  position: relative;
  display: inline-flex;
  width: 1em;
  height: 1em;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.hero__star-partial-bg {
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(255, 255, 255, 0.18);
  text-shadow: none;
  pointer-events: none;
}

.hero__star-partial-fg {
  position: absolute;
  left: 0;
  top: 0;
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  color: var(--teal);
  text-shadow: 0 0 14px rgba(0, 255, 255, 0.45);
  pointer-events: none;
}

.hero__rating-text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.02em;
}

.hero__rating-score {
  color: var(--teal);
  font-weight: 700;
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem 0.45rem;
  width: 100%;
  max-width: 100%;
}

.hero__cta-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
}

.hero__cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}

.hero__cta-text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
}

.hero__cta-link {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.98);
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 0.15rem;
  width: 100%;
  margin: 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}

.hero__cta-link:hover {
  color: var(--teal);
  border-color: rgba(0, 255, 255, 0.55);
}

.hero__cta-meta {
  display: block;
  width: 100%;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

.hero__cta-meta strong {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.07em;
}

.hero__circle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.95);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: color 0.25s ease, filter 0.25s ease;
}

.hero__circle-btn:hover {
  color: var(--teal);
  filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.5));
}

.hero__circle-btn:focus-visible {
  outline: 2px solid rgba(0, 255, 255, 0.55);
  outline-offset: 4px;
}

/* Gecentreerd op de contentkolom (rechts van sidebar), niet op de volledige hero-breedte */
.hero__partners {
  position: absolute;
  left: calc(var(--sidebar-w) + (100% - var(--sidebar-w)) / 2);
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  max-width: min(92vw, 24rem);
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  pointer-events: none;
  transform: translateX(-50%);
  text-align: center;
}

.hero__partners-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(180, 190, 196, 0.85);
}

.hero__partners-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.85rem;
}

.hero__partners-list li {
  display: flex;
  align-items: center;
  line-height: 0;
}

.hero__partners-icon {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  opacity: 0.9;
}

.hero__partners-icon--code {
  width: 34px;
  height: 34px;
}

/* Hero KPI-strip (test: stats i.p.v. partnerlogo's) */
.hero__stats {
  position: absolute;
  left: calc(var(--sidebar-w) + (100% - var(--sidebar-w)) / 2);
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 5;
  width: max-content;
  max-width: min(94vw, 38rem);
  padding: 0;
  margin: 0;
  pointer-events: none;
  transform: translateX(-50%);
}

.hero__stats-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0.55rem 0.35rem;
  list-style: none;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 40px -22px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
}

@media (min-width: 640px) {
  .hero__stats-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0.65rem 0.45rem;
  }
}

.hero__stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.35rem 0.45rem;
  text-align: center;
}

.hero__stats-item:not(:last-child) {
  border-right: none;
}

@media (min-width: 640px) {
  .hero__stats-item:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }
}

@media (max-width: 639px) {
  .hero__stats-item:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }

  .hero__stats-item:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
    margin-bottom: 0.15rem;
  }

  .hero__stats-item:nth-child(n + 3) {
    padding-top: 0.35rem;
  }
}

.hero__stats-value {
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #00ffff;
  -webkit-text-fill-color: #00ffff;
  white-space: nowrap;
  text-shadow: 0 0 24px rgba(0, 255, 255, 0.45), 0 1px 10px rgba(0, 0, 0, 0.35);
}

.hero__stats-label {
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(220, 235, 238, 0.82);
}

.hero__pager--fixed {
  position: absolute;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.85rem;
  pointer-events: auto;
}

@media (min-width: 900px) {
  .hero__pager--fixed {
    right: clamp(1.25rem, 2.5vw, 2.25rem);
    bottom: clamp(1.5rem, 3vh, 2.25rem);
  }
}

.hero__pager {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}

.hero__pager-count {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.45);
}

.hero__pager-dash {
  letter-spacing: 0.12em;
  opacity: 0.7;
}

.hero__pager-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.hero__pager-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.hero__pager-dot:hover {
  background: rgba(255, 255, 255, 0.45);
}

.hero__pager-dot.is-active {
  background: var(--teal);
  box-shadow: 0 0 16px rgba(0, 255, 255, 0.55);
  transform: scale(1.15);
}

@media (max-width: 899px) {
  .hero--cinema {
    margin-left: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
  }

  .hero__stage {
    grid-template-columns: 1fr;
    padding-top: calc(var(--topbar-h) + 0.55rem);
    padding-left: clamp(1rem, 5vw, 2.5rem);
    padding-right: clamp(1rem, 5vw, 2.5rem);
    align-items: center;
    padding-bottom: max(2.75rem, env(safe-area-inset-bottom));
  }

  .hero__stage-inner {
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
  }

  .hero__headline {
    font-size: clamp(1.48rem, 6.6vw, 2.05rem);
    line-height: 1.14;
    letter-spacing: 0.014em;
    margin-bottom: 0.3rem;
  }

  .hero__title-stack {
    font-size: 1em;
  }

  .hero__eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    margin-bottom: 0.2rem;
  }

  .hero__lede {
    font-size: clamp(0.8rem, 3.5vw, 0.94rem);
    line-height: 1.52;
    margin-bottom: 0.5rem;
  }

  .hero__rating {
    margin-bottom: 0.75rem;
    padding: 0.3rem 0.62rem;
    gap: 0.32rem 0.5rem;
  }

  .hero__rating-text {
    font-size: 0.7rem;
  }

  .hero__stars {
    font-size: 0.8rem;
  }

  .btn--hero-contact {
    padding: 0.5rem 1rem;
    font-size: 0.84rem;
  }

  .hero__cta-link {
    font-size: 0.84rem;
  }

  .hero__cta-meta {
    font-size: 0.65rem;
    letter-spacing: 0.05em;
  }

  .hero__partners-label {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
  }

  .hero__pager-count {
    font-size: 0.65rem;
  }

  .hero__gradient-read--left {
    background:
      radial-gradient(ellipse 140% 100% at 20% 50%, rgba(2, 4, 8, 0.9) 0%, rgba(2, 4, 8, 0.4) 50%, transparent 72%),
      linear-gradient(180deg, rgba(2, 4, 7, 0.65) 0%, transparent 40%, rgba(3, 5, 8, 0.88) 100%);
  }

  .hero__pager--fixed {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    left: clamp(1rem, 4vw, 1.5rem);
    right: clamp(1rem, 4vw, 1.5rem);
    width: auto;
  }

  .hero__pager-dots {
    justify-content: flex-end;
  }

  .hero__partners {
    left: calc(var(--sidebar-w) + (100% - var(--sidebar-w)) / 2);
    transform: translateX(-50%);
    bottom: max(5.35rem, calc(env(safe-area-inset-bottom) + 4.75rem));
    max-width: min(92vw, 22rem);
  }

  .hero__partners-icon {
    width: 26px;
    height: 26px;
  }
}

/* Accent heading gradient (light theme) */
.text-glow {
  background: linear-gradient(120deg, #0a6b6b 0%, var(--cyan) 42%, var(--teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(0, 168, 168, 0.18));
}

/* ——— Sections shared ——— */
.container {
  width: 100%;
  min-width: 0;
  max-width: min(var(--content-max), 100%);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 1.5rem);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.section-head {
  margin-bottom: 3rem;
  max-width: min(52rem, 100%);
}

.section-head--tight {
  margin-bottom: 2rem;
}

.eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--teal);
  margin: 0 0 0.75rem;
}

.section-title {
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--text-primary);
}

.section-lead {
  color: var(--muted);
  margin: 0;
  font-size: 1.05rem;
}

.section-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.section-bg--services {
  background: radial-gradient(
    ellipse 60% 48% at 50% 32%,
    rgba(0, 255, 255, 0.1) 0%,
    transparent 50%
  );
}

/* Als Diensten-gloed, iets breder in de breedte */
.section-bg--portfolio {
  background: radial-gradient(
    ellipse 84% 46% at 50% 32%,
    rgba(0, 255, 255, 0.1) 0%,
    transparent 50%
  );
}

.section-bg--process {
  background: radial-gradient(
    ellipse 48% 40% at 20% 80%,
    rgba(102, 255, 255, 0.05) 0%,
    transparent 38%
  );
}

.section-bg--deliverables {
  display: none;
}

.section-bg--crm {
  background: radial-gradient(
    ellipse 70% 50% at 80% 20%,
    rgba(0, 184, 184, 0.06) 0%,
    transparent 55%
  );
}


/* ——— Home: digitale basis (editorial list na hero) ——— */
.home-deliverables {
  --home-deliverables-muted: rgba(26, 35, 41, 0.7);
  --home-deliverables-line: rgba(26, 35, 41, 0.1);
  position: relative;
  z-index: 1;
  padding: clamp(2.85rem, 6.5vw, 4.75rem) 0 clamp(2.5rem, 5.5vw, 4rem);
  background-color: var(--bg-deep);
  overflow: hidden;
  border-top: 1px solid rgba(0, 140, 140, 0.06);
}

.home-deliverables__head {
  margin-bottom: clamp(0.45rem, 1.2vw, 0.85rem);
  max-width: min(48rem, 100%);
  text-align: left;
}

.home-deliverables__head .eyebrow {
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 0.75rem;
}

.home-deliverables__head .section-title {
  margin-bottom: 0.85rem;
  max-width: min(34rem, 100%);
}

.home-deliverables__lead {
  margin: 0;
  font-size: clamp(0.95rem, 1.25vw, 1.05rem);
  line-height: 1.65;
  color: var(--home-deliverables-muted);
  max-width: min(34rem, 100%);
}

.home-deliverables__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--home-deliverables-line);
}

.home-deliverables__list > li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--home-deliverables-line);
}

.home-deliverables__row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  grid-template-areas:
    "num main arrow"
    "num cat arrow";
  column-gap: 1rem;
  row-gap: 0.35rem;
  align-items: start;
  padding: clamp(1.05rem, 2.4vw, 1.45rem) 0.35rem clamp(1.05rem, 2.4vw, 1.45rem) 0;
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition: background-color 200ms ease;
}

.home-deliverables__num {
  grid-area: num;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: rgba(26, 35, 41, 0.28);
  padding-top: 0.2rem;
  transition: color 200ms ease;
}

.home-deliverables__row-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.home-deliverables__row-title {
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--text-primary);
}

.home-deliverables__row-text {
  font-size: clamp(0.9rem, 1.15vw, 0.98rem);
  line-height: 1.6;
  color: var(--home-deliverables-muted);
  max-width: 36rem;
}

.home-deliverables__row-cat {
  grid-area: cat;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: rgba(26, 35, 41, 0.55);
  padding-top: 0.15rem;
}

.home-deliverables__row-arrow {
  grid-area: arrow;
  justify-self: end;
  align-self: center;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--teal);
  transition: transform 200ms ease, color 200ms ease;
}

.home-deliverables__row:hover,
.home-deliverables__row:focus-visible {
  background-color: rgba(0, 154, 154, 0.035);
}

.home-deliverables__row:hover .home-deliverables__num,
.home-deliverables__row:focus-visible .home-deliverables__num {
  color: var(--teal);
}

.home-deliverables__row:hover .home-deliverables__row-arrow,
.home-deliverables__row:focus-visible .home-deliverables__row-arrow {
  transform: translateX(6px);
  color: var(--teal);
}

.home-deliverables__row:focus-visible {
  outline: 2px solid rgba(0, 154, 154, 0.35);
  outline-offset: 2px;
}

@media (min-width: 900px) {
  .home-deliverables__row {
    grid-template-columns: 4.5rem minmax(11rem, 0.9fr) minmax(0, 1.35fr) minmax(10rem, 0.85fr) 1.75rem;
    grid-template-areas: "num title text cat arrow";
    align-items: center;
    column-gap: clamp(1.25rem, 2.5vw, 2rem);
    padding: clamp(1.2rem, 2.4vw, 1.55rem) 0.5rem clamp(1.2rem, 2.4vw, 1.55rem) 0;
  }

  .home-deliverables__num {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: rgba(26, 35, 41, 0.22);
    padding-top: 0;
  }

  .home-deliverables__row-main {
    display: contents;
  }

  .home-deliverables__row-title {
    grid-area: title;
  }

  .home-deliverables__row-text {
    grid-area: text;
    max-width: none;
  }

  .home-deliverables__row-cat {
    grid-area: cat;
    justify-self: start;
    text-align: left;
    font-size: 0.8125rem;
    padding-top: 0;
  }

  .home-deliverables__row-arrow {
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-deliverables__row,
  .home-deliverables__num,
  .home-deliverables__row-arrow {
    transition: none;
  }

  .home-deliverables__row:hover .home-deliverables__row-arrow,
  .home-deliverables__row:focus-visible .home-deliverables__row-arrow {
    transform: none;
  }
}

.home-deliverables__more {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
}

.home-deliverables__more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--teal);
  text-decoration: none;
  transition: color 0.25s ease, gap 0.25s var(--ease-out);
}

.home-deliverables__more-link:hover,
.home-deliverables__more-link:focus-visible {
  color: var(--teal-dim);
  gap: 0.55rem;
}

.home-deliverables__more-link:focus-visible {
  outline: 2px solid rgba(0, 154, 154, 0.4);
  outline-offset: 3px;
}

/* ——— Home: ons werk (portfolio na digitale basis) ——— */
.home-werk {
  --home-werk-bg: #0a1218;
  --home-werk-muted: rgba(244, 248, 248, 0.62);
  --home-werk-line: rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
  padding: clamp(2.5rem, 5.75vw, 4.25rem) 0 clamp(2.35rem, 5vw, 3.75rem);
  background-color: var(--home-werk-bg);
  color: #f4f8f8;
  overflow: hidden;
}

.home-werk__head {
  margin-bottom: clamp(1.35rem, 3vw, 2rem);
  max-width: min(48rem, 100%);
  text-align: left;
}

.home-werk__eyebrow {
  margin: 0 0 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}

.home-werk__title {
  margin: 0 0 0.75rem;
  max-width: min(48rem, 100%);
  font-size: clamp(1.85rem, 4vw, 2.65rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #f4f8f8;
}

.home-werk__lead {
  margin: 0;
  max-width: min(38rem, 100%);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
  color: var(--home-werk-muted);
}

.home-werk__projects {
  display: flex;
  flex-direction: column;
  gap: clamp(4.5rem, 6vw, 6.25rem);
}

.home-werk__project {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.4vw, 1.5rem);
  align-items: center;
}

.home-werk__copy {
  order: 1;
  min-width: 0;
}

.home-werk__visual {
  order: 2;
  display: block;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.home-werk__num {
  display: block;
  margin-bottom: 0.4rem;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: rgba(0, 184, 184, 0.45);
}

.home-werk__name {
  margin: 0 0 0.35rem;
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fff;
}

.home-werk__meta {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--home-werk-muted);
}

.home-werk__meta-sep {
  margin: 0 0.35rem;
  opacity: 0.55;
}

.home-werk__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin: 0 0 0.85rem;
  padding: 0;
}

.home-werk__tags li {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(244, 248, 248, 0.72);
  border-bottom: 1px solid rgba(0, 154, 154, 0.35);
  padding-bottom: 0.1rem;
}

.home-werk__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--teal);
  text-decoration: none;
  transition: color 200ms ease, gap 200ms ease;
}

.home-werk__link:hover,
.home-werk__link:focus-visible {
  color: var(--cyan);
  gap: 0.6rem;
}

.home-werk__link:focus-visible {
  outline: 2px solid rgba(0, 255, 255, 0.45);
  outline-offset: 3px;
}

.home-werk__link-arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

.home-werk__link:hover .home-werk__link-arrow,
.home-werk__link:focus-visible .home-werk__link-arrow,
.home-werk__project:hover .home-werk__link-arrow,
.home-werk__project:focus-within .home-werk__link-arrow {
  transform: translateX(5px);
}

.home-werk__frame {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #05080c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.75);
}

.home-werk__chrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.7rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.home-werk__chrome span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.home-werk__shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 8.25;
  max-height: min(26rem, 46vh);
  object-fit: cover;
  object-position: top center;
  transform: scale(1);
  transform-origin: center top;
  transition: transform 320ms var(--ease-out);
}

.home-werk__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 776;
  max-height: min(30rem, 56vh);
  object-fit: cover;
  object-position: center center;
  background: #05080c;
}

.home-werk__visual--video {
  cursor: default;
}

.home-werk__project--showcase .home-werk__meta {
  margin-bottom: 0.85rem;
  max-width: 22rem;
}

.home-werk__hook {
  margin: 0 0 1.1rem;
  max-width: 18rem;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: rgba(244, 248, 248, 0.92);
}

.home-werk__visual:hover .home-werk__shot,
.home-werk__visual:focus-visible .home-werk__shot,
.home-werk__project:hover .home-werk__shot,
.home-werk__project:focus-within .home-werk__shot {
  transform: scale(1.015);
}

.home-werk__visual:focus-visible {
  outline: 2px solid rgba(0, 255, 255, 0.45);
  outline-offset: 4px;
  border-radius: 12px;
}

.home-werk__project:hover .home-werk__num,
.home-werk__project:focus-within .home-werk__num {
  color: var(--teal);
}

.home-werk__project:hover .home-werk__link,
.home-werk__project:focus-within .home-werk__link {
  color: var(--cyan);
}

.home-werk__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  margin: clamp(2rem, 4.5vw, 3rem) 0 0;
  padding-top: clamp(1.15rem, 2.4vw, 1.55rem);
  border-top: 1px solid var(--home-werk-line);
}

.home-werk__foot-text {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: rgba(244, 248, 248, 0.9);
}

.home-werk__foot-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  transition: color 200ms ease, gap 200ms ease;
}

.home-werk__foot-link:hover,
.home-werk__foot-link:focus-visible {
  color: var(--cyan);
  gap: 0.6rem;
}

.home-werk__foot-link:focus-visible {
  outline: 2px solid rgba(0, 255, 255, 0.45);
  outline-offset: 3px;
}

.home-werk__foot-link:hover .home-werk__link-arrow,
.home-werk__foot-link:focus-visible .home-werk__link-arrow {
  transform: translateX(5px);
}

@media (min-width: 900px) {
  .home-werk__project {
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
    gap: clamp(1.75rem, 3.5vw, 3rem);
  }

  .home-werk__project--showcase {
    grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr);
  }

  .home-werk__copy {
    order: 1;
  }

  .home-werk__visual {
    order: 2;
  }

  .home-werk__project--flip {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 0.38fr);
  }

  .home-werk__project--flip .home-werk__visual {
    order: 1;
  }

  .home-werk__project--flip .home-werk__copy {
    order: 2;
  }

  .home-werk__foot {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-werk__shot,
  .home-werk__link-arrow,
  .home-werk__link,
  .home-werk__foot-link {
    transition: none;
  }

  .home-werk__visual:hover .home-werk__shot,
  .home-werk__visual:focus-visible .home-werk__shot,
  .home-werk__project:hover .home-werk__shot,
  .home-werk__project:focus-within .home-werk__shot,
  .home-werk__link:hover .home-werk__link-arrow,
  .home-werk__project:hover .home-werk__link-arrow {
    transform: none;
  }
}

/* Compact proof stats — herbruikbaar op diensten, WLM, SEO, reclame, … */
.vtx-proof-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem 0.85rem;
}

.vtx-proof-strip li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.vtx-proof-strip__value {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--teal);
}

.vtx-proof-strip__label {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(26, 35, 41, 0.62);
}

.vtx-proof-strip--foot {
  margin-top: 0.85rem;
  max-width: 28rem;
}

.wlm-problems__foot-main {
  flex: 1 1 16rem;
  min-width: 0;
}

.vtx-proof-strip--trust {
  margin: 0.85rem 0 0.25rem;
  max-width: 22rem;
}

.vtx-proof-strip--quality {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding-top: clamp(1rem, 2.5vw, 1.35rem);
  border-top: 1px solid rgba(0, 140, 140, 0.12);
}

.vtx-proof-strip--hero {
  margin-top: 1rem;
  max-width: 24rem;
}

/* 4 kolommen — brede secties (banner-achtig, quality strips) */
.vtx-proof-strip--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

@media (min-width: 640px) {
  .vtx-proof-strip--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.vtx-proof-strip--trust.vtx-proof-strip--4 {
  max-width: 30rem;
}

.vtx-proof-strip--quality.vtx-proof-strip--4 {
  max-width: none;
}

@media (min-width: 640px) and (max-width: 899px) {
  .vtx-proof-strip--4 .vtx-proof-strip__value {
    font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  }
}

.vtx-proof-strip--on-teal .vtx-proof-strip__value {
  color: #fff;
  text-shadow: 0 0 24px rgba(0, 255, 255, 0.2);
}

.vtx-proof-strip--on-teal .vtx-proof-strip__label {
  color: rgba(230, 248, 248, 0.78);
}

.vtx-proof-strip--on-teal li {
  padding: 0.55rem 0.4rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Trust-blok op teal (WLM, SEO, reclame, CRM, …) — leesbare stats */
.home-trust .vtx-proof-strip {
  gap: 0;
  padding: 0.65rem 0.35rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
}

.home-trust .vtx-proof-strip--trust {
  max-width: min(26rem, 100%);
}

.home-trust .vtx-proof-strip--trust.vtx-proof-strip--4 {
  max-width: min(32rem, 100%);
}

.home-trust .vtx-proof-strip li {
  align-items: center;
  text-align: center;
  padding: 0.4rem 0.5rem;
}

.home-trust .vtx-proof-strip li:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 519px) {
  .home-trust .vtx-proof-strip--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.55rem;
  }

  .home-trust .vtx-proof-strip--4 li {
    border-right: none;
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 0.5rem 0.35rem;
  }

  .home-trust .vtx-proof-strip--4 li:not(:last-child) {
    border-right: none;
  }
}

.home-trust .vtx-proof-strip__value {
  color: #fff;
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.25);
}

.home-trust .vtx-proof-strip__label {
  color: rgba(236, 252, 252, 0.88);
  font-size: 0.68rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .home-deliverables__card,
  .home-deliverables__card:hover {
    transform: none;
  }
}

/* ——— Home: website problemen (teal) ——— */
.home-problems {
  --home-problems-alert: #ff5c5c;
  --home-problems-alert-dim: #e04545;
  position: relative;
  z-index: 1;
  padding: clamp(2.65rem, 6.5vw, 4.35rem) 0;
  overflow: hidden;
  color: var(--text-inverse);
}

.home-problems__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    148deg,
    #005f5f 0%,
    var(--teal-dim) 28%,
    var(--teal) 52%,
    #00a8a8 100%
  );
}

.home-problems__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 12% 18%, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 88% 72%, rgba(0, 255, 255, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 40% 35% at 50% 100%, rgba(0, 40, 40, 0.35) 0%, transparent 55%);
}

.home-problems__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.home-problems__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.15rem);
  margin-bottom: clamp(1.25rem, 3vw, 1.85rem);
}

@media (min-width: 960px) {
  .home-problems__layout {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
    gap: clamp(1.85rem, 4vw, 2.65rem);
    align-items: start;
  }
}

.home-problems__eyebrow {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.home-problems__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: #fff;
  max-width: min(28rem, 100%);
}

.home-problems__title-accent {
  color: var(--home-problems-alert);
  text-decoration: underline;
  text-decoration-color: rgba(255, 120, 120, 0.85);
  text-underline-offset: 0.14em;
  text-decoration-thickness: 2px;
  text-shadow: 0 0 24px rgba(255, 92, 92, 0.35);
}

.home-problems__lead {
  margin: 0 0 0.65rem;
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.9);
  max-width: 32rem;
}

.home-problems__lead strong {
  color: #fff;
  font-weight: 700;
}

.home-problems__note {
  margin: 0 0 1.05rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
  max-width: 26rem;
  font-style: italic;
}

.home-problems__cta-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  margin: 0;
}

.home-problems__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.62rem 1.2rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--teal-dim);
  text-decoration: none;
  background: #fff;
  border: 1px solid transparent;
  box-shadow:
    0 4px 20px -6px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.35) inset;
  transition:
    transform 0.28s var(--ease-out),
    box-shadow 0.28s ease,
    background 0.28s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.home-problems__cta:hover {
  color: #004d4d;
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px -8px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.home-problems__cta--ghost {
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: none;
}

.home-problems__cta--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow: none;
}

.home-problems__cta:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

.home-problems__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 560px) {
  .home-problems__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }
}

.home-problems__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0.7rem 0.85rem 0.7rem 0.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 3px solid var(--home-problems-alert);
  box-shadow:
    0 6px 20px -14px rgba(0, 30, 30, 0.4),
    inset 3px 0 12px -3px rgba(255, 92, 92, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.3s var(--ease-out),
    background 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

.home-problems__item:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 120, 120, 0.35);
  border-left-color: #ff7070;
  box-shadow:
    0 8px 22px -12px rgba(0, 30, 30, 0.45),
    0 0 20px -6px rgba(255, 80, 80, 0.35),
    inset 3px 0 14px -3px rgba(255, 92, 92, 0.3);
}

.home-problems__trigger {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--home-problems-alert) 0%, var(--home-problems-alert-dim) 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 4px 14px -4px rgba(200, 40, 40, 0.65),
    0 0 0 3px rgba(255, 92, 92, 0.2);
}

.home-problems__trigger svg {
  width: 1.05rem;
  height: 1.05rem;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

.home-problems__item:hover .home-problems__trigger {
  box-shadow:
    0 6px 16px -4px rgba(200, 40, 40, 0.7),
    0 0 0 4px rgba(255, 92, 92, 0.28);
}

@media (prefers-reduced-motion: no-preference) {
  .home-problems__trigger {
    animation: home-problems-trigger-pulse 2.8s ease-in-out infinite;
  }

  .home-problems__item:hover .home-problems__trigger {
    animation: none;
  }
}

@keyframes home-problems-trigger-pulse {
  0%,
  100% {
    box-shadow:
      0 4px 14px -4px rgba(200, 40, 40, 0.65),
      0 0 0 3px rgba(255, 92, 92, 0.2);
  }

  50% {
    box-shadow:
      0 4px 14px -4px rgba(200, 40, 40, 0.65),
      0 0 0 7px rgba(255, 92, 92, 0);
  }
}

.home-problems__item-text {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.32;
  color: rgba(255, 255, 255, 0.96);
}

/* Mobiel: één compact rood blok i.p.v. losse kaartjes */
@media (max-width: 899px) {
  .home-problems__layout {
    gap: 1.15rem;
    margin-bottom: 1rem;
  }

  .home-problems__list {
    display: block;
    padding: 0.8rem 0.9rem;
    border-radius: 16px;
    background: linear-gradient(
      135deg,
      rgba(255, 92, 92, 0.24) 0%,
      rgba(224, 69, 69, 0.16) 100%
    );
    border: 1px solid rgba(255, 120, 120, 0.42);
    border-left: 4px solid var(--home-problems-alert);
    box-shadow:
      0 10px 28px -18px rgba(0, 20, 20, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .home-problems__list > li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.11);
  }

  .home-problems__item {
    gap: 0.6rem;
    padding: 0.48rem 0.1rem;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
  }

  .home-problems__item:hover,
  .home-problems__item:focus-within {
    transform: none;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .home-problems__item[data-reveal],
  .home-problems__item[data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .home-problems__trigger {
    width: 1.3rem;
    height: 1.3rem;
    box-shadow: 0 2px 8px -3px rgba(200, 40, 40, 0.55);
    animation: none !important;
  }

  .home-problems__item:hover .home-problems__trigger {
    box-shadow: 0 2px 8px -3px rgba(200, 40, 40, 0.55);
  }

  .home-problems__trigger svg {
    width: 0.7rem;
    height: 0.7rem;
  }

  .home-problems__item-text {
    font-size: 0.78rem;
    line-height: 1.34;
  }
}

.home-problems__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  padding-top: clamp(1.15rem, 2.8vw, 1.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.home-problems__foot-text {
  margin: 0;
  flex: 1 1 16rem;
  font-size: clamp(0.84rem, 1.2vw, 0.9375rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 36rem;
}

.home-problems__foot-text strong {
  color: #fff;
  font-weight: 700;
}

.home-problems__foot-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    gap 0.25s var(--ease-out);
}

.home-problems__foot-link:hover {
  color: #c8ffff;
  border-color: rgba(200, 255, 255, 0.65);
  gap: 0.6rem;
}

.home-problems__foot-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .home-problems__trigger {
    animation: none;
  }

  .home-problems__item,
  .home-problems__item:hover,
  .home-problems__cta,
  .home-problems__cta:hover {
    transform: none;
  }
}

/* ——— Home: verkoopsysteem (solution) ——— */
.home-solution {
  --home-solution-muted: rgba(26, 35, 41, 0.62);
  position: relative;
  z-index: 1;
  padding: clamp(2.25rem, 5vw, 3.25rem) 0;
  background-color: #ffffff;
  overflow: hidden;
}

.home-solution__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  align-items: center;
  max-width: min(58rem, 100%);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .home-solution__layout {
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
    gap: clamp(1.75rem, 4vw, 2.5rem);
  }
}

.home-solution__media {
  margin: 0;
  min-width: 0;
  width: min(12.5rem, 70vw);
  justify-self: center;
}

@media (min-width: 768px) {
  .home-solution__media {
    width: 100%;
    justify-self: stretch;
  }
}

.home-solution__frame {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(0, 140, 140, 0.18);
  box-shadow: 0 16px 36px -22px rgba(0, 80, 80, 0.28);
}

.home-solution__frame::before {
  content: "";
  position: absolute;
  inset: -4px -4px 6px 6px;
  border-radius: calc(var(--radius-card) + 2px);
  border: 1px solid rgba(0, 154, 154, 0.15);
  z-index: -1;
  pointer-events: none;
}

.home-solution__frame picture {
  display: block;
  width: 100%;
  height: 100%;
}

.home-solution__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Indoor portrait: crop empty headroom at top */
  object-position: center 38%;
  display: block;
}

.home-solution__body {
  min-width: 0;
}

.home-solution__eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}

.home-solution__title {
  margin: 0 0 0.55rem;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.14;
  color: var(--text-primary);
}

.home-solution__title-accent {
  color: var(--teal);
  font-weight: 800;
}

.home-solution__kw {
  color: var(--teal);
  font-weight: 700;
}

.home-solution__lead {
  margin: 0 0 0.85rem;
  font-size: clamp(0.9rem, 1.25vw, 0.975rem);
  line-height: 1.55;
  color: var(--home-solution-muted);
}

.home-solution__shift {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
  font-weight: 700;
}

.home-solution__shift-old {
  color: rgba(26, 35, 41, 0.45);
  text-decoration: line-through;
  text-decoration-color: rgba(224, 68, 68, 0.55);
}

.home-solution__shift-arrow {
  color: var(--teal);
  font-weight: 800;
}

.home-solution__shift-new {
  color: var(--teal-dim);
}

.home-solution__chain {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.15rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
}

.home-solution__chain li {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.6rem;
  border-radius: var(--radius-btn);
  background: rgba(0, 184, 184, 0.08);
  border: 1px solid rgba(0, 140, 140, 0.14);
}

.home-solution__chain li:not(:last-child)::after {
  content: "→";
  margin-left: 0.35rem;
  font-weight: 600;
  color: var(--teal);
  opacity: 0.7;
}

/* Mobiel: één regel — Website → SEO → Ads → CRM → Follow-up */
@media (max-width: 899px) {
  .home-solution__chain {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    max-width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.62rem 0.85rem;
    border-radius: var(--radius-card);
    background: linear-gradient(
      135deg,
      rgba(0, 184, 184, 0.1) 0%,
      rgba(0, 140, 140, 0.06) 100%
    );
    border: 1px solid rgba(0, 140, 140, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    scrollbar-width: none;
  }

  .home-solution__chain::-webkit-scrollbar {
    display: none;
  }

  .home-solution__chain li {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    font-size: clamp(0.68rem, 2.8vw, 0.76rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .home-solution__chain li:not(:last-child)::after {
    margin-left: 0;
    margin-right: 0;
    padding: 0 clamp(0.35rem, 2vw, 0.55rem);
    opacity: 0.85;
    font-weight: 700;
  }
}

.home-solution__note {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  line-height: 1.48;
  color: var(--home-solution-muted);
}

.home-solution__cta-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
}

.home-solution__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-btn);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s ease,
    background 0.22s ease,
    border-color 0.22s ease;
}

.home-solution__cta--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--teal) 100%);
  box-shadow: 0 4px 14px -6px rgba(0, 154, 154, 0.45);
}

.home-solution__cta--primary:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(0, 154, 154, 0.5);
}

.home-solution__cta--ghost {
  color: var(--teal-dim);
  background: transparent;
  border: 1px solid rgba(0, 154, 154, 0.32);
}

.home-solution__cta--ghost:hover {
  background: rgba(0, 184, 184, 0.06);
  border-color: rgba(0, 154, 154, 0.45);
}

.home-solution__cta:focus-visible {
  outline: 2px solid rgba(0, 184, 184, 0.55);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .home-solution__cta,
  .home-solution__cta:hover {
    transform: none;
  }
}

/* ——— Home: persoonlijke aanpak (trust) — only homepage ——— */
.page-home .home-solution--approach {
  padding: clamp(2rem, 4.5vw, 2.85rem) 0;
}

.page-home .home-solution--approach .home-solution__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
  max-width: min(64rem, 100%);
  margin: 0 auto;
}

.page-home .home-solution--approach .home-solution__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
}

.page-home .home-solution--approach .home-solution__title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.4rem, 3.1vw, 1.9rem);
  line-height: 1.18;
  max-width: 34ch;
}

.page-home .home-solution--approach .home-solution__lead {
  margin: 0 0 1.1rem;
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  line-height: 1.58;
  max-width: 38rem;
}

.page-home .home-solution--approach .home-solution__media {
  width: min(16rem, 78vw);
  justify-self: start;
  margin: 0 0 1.25rem;
}

.page-home .home-solution--approach .home-solution__frame {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  border: 1px solid rgba(0, 140, 140, 0.14);
  box-shadow:
    0 1px 2px rgba(26, 35, 41, 0.04),
    0 18px 40px -24px rgba(0, 70, 70, 0.32);
}

.page-home .home-solution--approach .home-solution__frame::before {
  display: none;
}

.page-home .home-solution--approach .home-solution__points {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(26, 35, 41, 0.08);
}

.page-home .home-solution--approach .home-solution__point {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.55rem 0.7rem;
  align-items: start;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(26, 35, 41, 0.08);
}

.page-home .home-solution--approach .home-solution__point-num {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--teal);
  line-height: 1.4;
  padding-top: 0.1rem;
}

.page-home .home-solution--approach .home-solution__point-title {
  display: block;
  margin: 0 0 0.2rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  line-height: 1.3;
}

.page-home .home-solution--approach .home-solution__point-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.48;
  color: var(--home-solution-muted);
}

.page-home .home-solution--approach .home-solution__statement {
  margin: 0 0 1.15rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(26, 35, 41, 0.72);
  font-weight: 500;
  max-width: 36rem;
}

.page-home .home-solution--approach .home-solution__cta-wrap {
  gap: 0.65rem 1.15rem;
}

.page-home .home-solution--approach .home-solution__cta--primary {
  background: var(--teal);
  background-image: none;
  box-shadow: 0 6px 18px -10px rgba(0, 122, 122, 0.55);
}

.page-home .home-solution--approach .home-solution__cta--primary:hover {
  background: var(--teal-dim);
  box-shadow: 0 10px 22px -10px rgba(0, 100, 100, 0.5);
}

.page-home .home-solution--approach .home-solution__cta--text {
  padding: 0.35rem 0;
  color: var(--teal-dim);
  background: transparent;
  border: none;
  font-size: 0.8125rem;
  font-weight: 700;
  box-shadow: none;
}

.page-home .home-solution--approach .home-solution__cta--text:hover {
  color: var(--teal);
  transform: none;
  background: transparent;
}

.page-home .home-solution--approach .home-solution__cta--text span {
  display: inline-block;
  transition: transform 0.22s var(--ease-out);
}

.page-home .home-solution--approach .home-solution__cta--text:hover span {
  transform: translateX(3px);
}

@media (min-width: 768px) {
  .page-home .home-solution--approach .home-solution__layout {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    column-gap: clamp(1.75rem, 4vw, 2.75rem);
    row-gap: 0;
    align-items: center;
  }

  .page-home .home-solution--approach .home-solution__media {
    grid-column: 1;
    grid-row: 1 / span 6;
    width: 100%;
    max-width: 19.5rem;
    margin: 0;
    justify-self: stretch;
    align-self: center;
  }

  .page-home .home-solution--approach .home-solution__eyebrow,
  .page-home .home-solution--approach .home-solution__title,
  .page-home .home-solution--approach .home-solution__lead,
  .page-home .home-solution--approach .home-solution__points,
  .page-home .home-solution--approach .home-solution__statement,
  .page-home .home-solution--approach .home-solution__cta-wrap {
    grid-column: 2;
  }

  .page-home .home-solution--approach .home-solution__lead {
    margin-bottom: 1.15rem;
  }

  .page-home .home-solution--approach .home-solution__points {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.35rem;
    row-gap: 0;
    margin-bottom: 1.05rem;
  }

  .page-home .home-solution--approach .home-solution__point {
    padding: 0.8rem 0;
  }

  .page-home .home-solution--approach .home-solution__point:nth-child(odd) {
    padding-right: 0.35rem;
    border-right: 1px solid rgba(26, 35, 41, 0.08);
  }

  .page-home .home-solution--approach .home-solution__point:nth-child(even) {
    padding-left: 0.35rem;
  }

  /* Top row: bottom border only; keep separators tidy */
  .page-home .home-solution--approach .home-solution__point:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(26, 35, 41, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-solution--approach .home-solution__cta--text span,
  .page-home .home-solution--approach .home-solution__cta--text:hover span {
    transform: none;
  }
}

/* ——— Home: editorial growth statement (dark navy) ——— */
.home-services {
  --home-services-bg: #0a1218;
  --home-services-muted: rgba(244, 248, 248, 0.62);
  --home-services-line: rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
  padding: clamp(2.1rem, 4.5vw, 3rem) 0;
  background-color: var(--home-services-bg);
  color: #f4f8f8;
  overflow: hidden;
}

.home-services__compose {
  margin-bottom: clamp(1.35rem, 3vw, 1.75rem);
}

.home-services__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}

.home-services__title {
  margin: 0 0 1rem;
  max-width: 20ch;
  font-size: clamp(1.75rem, 3.8vw, 2.55rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: #f4f8f8;
}

.home-services__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.home-services__main {
  min-width: 0;
  max-width: min(36rem, 100%);
}

.home-services__lead {
  margin: 0 0 0.95rem;
  font-size: clamp(0.95rem, 1.25vw, 1.05rem);
  line-height: 1.62;
  color: var(--home-services-muted);
}

.home-services__expertise {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: rgba(244, 248, 248, 0.52);
}

.home-services__expertise span {
  margin: 0 0.45rem;
  color: var(--teal);
  font-weight: 500;
}

.home-services__aside {
  margin: 0;
  padding: 0.15rem 0 0.15rem 0.95rem;
  border-left: 2px solid var(--teal);
  max-width: 16rem;
}

.home-services__aside-label {
  margin: 0 0 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 248, 248, 0.55);
}

.home-services__aside-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--home-services-muted);
}

.home-services__cta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem 1.5rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--home-services-line);
}

.home-services__cta-question {
  margin: 0;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #f4f8f8;
}

.home-services__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  transition: color 0.22s ease;
}

.home-services__cta-link span {
  display: inline-block;
  transition: transform 0.22s var(--ease-out);
}

.home-services__cta-link:hover,
.home-services__cta-link:focus-visible {
  color: var(--cyan);
}

.home-services__cta-link:hover span,
.home-services__cta-link:focus-visible span {
  transform: translateX(3px);
}

.home-services__cta-link:focus-visible {
  outline: 2px solid rgba(0, 184, 184, 0.55);
  outline-offset: 3px;
}

@media (min-width: 900px) {
  .home-services__body {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(2rem, 6vw, 4.5rem);
  }

  .home-services__aside {
    flex: 0 0 auto;
    margin-bottom: 0.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-services__cta-link span,
  .home-services__cta-link:hover span,
  .home-services__cta-link:focus-visible span {
    transform: none;
  }
}

/* ——— Home: CRM / unieke meerwaarde ——— */
.home-crm {
  --home-crm-muted: rgba(26, 35, 41, 0.62);
  position: relative;
  z-index: 1;
  padding: clamp(2.5rem, 5.5vw, 3.5rem) 0;
  background-color: #ffffff;
  overflow: hidden;
}

.home-crm__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 1.65rem);
  align-items: start;
}

@media (min-width: 960px) {
  .home-crm__layout {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(1.5rem, 3vw, 2rem);
  }
}

.home-crm__intro .eyebrow {
  margin-bottom: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.home-crm__title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.4rem, 2.9vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.14;
  color: var(--text-primary);
}

.home-crm__kw {
  color: var(--teal);
  font-weight: 700;
}

.home-crm__lead {
  margin: 0 0 0.5rem;
  font-size: clamp(0.875rem, 1.2vw, 0.95rem);
  line-height: 1.55;
  color: var(--home-crm-muted);
}

.home-crm__pitch {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--home-crm-muted);
  max-width: 32rem;
}

.home-crm__sectors {
  margin: 0 0 0.65rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--home-crm-muted);
  max-width: 34rem;
}

.home-crm__tagline {
  margin: 0 0 0.95rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
}

.home-crm__tagline span {
  margin: 0 0.15rem;
  opacity: 0.5;
  font-weight: 400;
}

.home-crm__cta-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
}

.home-crm__panel {
  padding: clamp(1rem, 2.2vw, 1.25rem);
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0, 140, 140, 0.14);
  box-shadow:
    0 16px 40px -28px rgba(0, 100, 100, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

.home-crm__panel-label {
  margin: 0 0 0.75rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.home-crm__modules {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem;
}

@media (min-width: 520px) {
  .home-crm__modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
}

.home-crm__module {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0.6rem;
  border-radius: 11px;
  background: rgba(0, 184, 184, 0.04);
  border: 1px solid rgba(0, 140, 140, 0.1);
  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    transform 0.25s var(--ease-out);
}

.home-crm__module:hover {
  background: rgba(0, 184, 184, 0.08);
  border-color: rgba(0, 154, 154, 0.22);
  transform: translateY(-1px);
}

.home-crm__module-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 8px;
  color: var(--teal);
  background: rgba(0, 184, 184, 0.1);
}

.home-crm__module-icon svg {
  width: 0.95rem;
  height: 0.95rem;
}

.home-crm__module-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.home-crm__module-text strong {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

.home-crm__module-text span {
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--home-crm-muted);
}

.home-crm__checks {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0.65rem 0 0;
  border-top: 1px solid rgba(0, 140, 140, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.home-crm__checks li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--home-crm-muted);
}

.home-crm__checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--teal);
}

.home-crm__maatwerk {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 0.8rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(224, 252, 252, 0.7) 0%, rgba(255, 255, 255, 0.95) 100%);
  border: 1px solid rgba(0, 154, 154, 0.2);
  border-left: 3px solid var(--teal);
}

.home-crm__maatwerk-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(145deg, var(--cyan) 0%, var(--teal) 100%);
}

.home-crm__maatwerk-icon svg {
  width: 1rem;
  height: 1rem;
}

.home-crm__maatwerk-body strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-primary);
}

.home-crm__maatwerk-body p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.48;
  color: var(--home-crm-muted);
}

.home-crm__maatwerk-body p strong {
  display: inline;
  font-weight: 700;
  color: var(--text-strong);
}

.home-crm__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s ease,
    background 0.22s ease,
    border-color 0.22s ease;
}

.home-crm__cta--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--teal) 100%);
  box-shadow: 0 4px 14px -6px rgba(0, 154, 154, 0.45);
}

.home-crm__cta--primary:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(0, 154, 154, 0.5);
}

.home-crm__cta--ghost {
  color: var(--teal-dim);
  background: transparent;
  border: 1px solid rgba(0, 154, 154, 0.3);
}

.home-crm__cta--ghost:hover {
  color: #004d4d;
  background: rgba(0, 184, 184, 0.05);
  border-color: rgba(0, 154, 154, 0.45);
}

.home-crm__cta:focus-visible {
  outline: 2px solid rgba(0, 255, 255, 0.55);
  outline-offset: 3px;
}

@media (min-width: 960px) {
  .page-home .home-crm {
    padding: clamp(3.25rem, 6vw, 4.75rem) 0;
  }

  .page-home .home-crm .container {
    max-width: min(calc(var(--content-max) + 4rem), 100%);
    padding-left: clamp(1.25rem, 3vw, 2rem);
    padding-right: clamp(1.25rem, 3vw, 2rem);
  }

  .page-home .home-crm__layout {
    gap: clamp(2rem, 3.5vw, 2.75rem);
    align-items: center;
  }

  .page-home .home-crm__title {
    font-size: clamp(1.65rem, 2.4vw, 2.15rem);
    margin-bottom: 0.75rem;
  }

  .page-home .home-crm__lead {
    font-size: 1.02rem;
    margin-bottom: 0.6rem;
  }

  .page-home .home-crm__pitch,
  .page-home .home-crm__sectors {
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  .page-home .home-crm__tagline {
    font-size: 0.72rem;
    margin-bottom: 1.15rem;
  }

  .page-home .home-crm__panel {
    padding: clamp(1.35rem, 2.5vw, 1.65rem);
    border-radius: 20px;
  }

  .page-home .home-crm__panel-label {
    font-size: 0.72rem;
    margin-bottom: 0.9rem;
  }

  .page-home .home-crm__modules {
    gap: 0.6rem;
    margin-bottom: 1rem;
  }

  .page-home .home-crm__module {
    padding: 0.7rem 0.75rem;
    border-radius: 12px;
  }

  .page-home .home-crm__module-icon {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 9px;
  }

  .page-home .home-crm__module-icon svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .page-home .home-crm__module-text strong {
    font-size: 0.8125rem;
  }

  .page-home .home-crm__module-text span {
    font-size: 0.75rem;
  }

  .page-home .home-crm__checks li {
    font-size: 0.8125rem;
  }

  .page-home .home-crm__maatwerk {
    padding: 0.9rem 1rem;
    gap: 0.85rem;
  }

  .page-home .home-crm__maatwerk-icon {
    width: 2.35rem;
    height: 2.35rem;
  }

  .page-home .home-crm__maatwerk-body strong {
    font-size: 0.875rem;
  }

  .page-home .home-crm__maatwerk-body p {
    font-size: 0.8125rem;
  }

  .page-home .home-crm__cta {
    padding: 0.62rem 1.2rem;
    font-size: 0.84rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-crm__module,
  .home-crm__module:hover,
  .home-crm__cta,
  .home-crm__cta:hover {
    transform: none;
  }
}

.home-crm__panel-expand {
  position: relative;
}

.home-crm__panel-inner {
  overflow: hidden;
  transition:
    max-height 0.45s var(--ease-out),
    -webkit-mask-size 0.35s ease,
    mask-size 0.35s ease;
}

.home-crm__panel-toggle {
  display: none;
}

@media (max-width: 899px) {
  .page-home .home-crm {
    padding: 1.65rem 0 2rem;
  }

  .page-home .home-crm__layout {
    gap: 1rem;
  }

  .page-home .home-crm__intro .eyebrow {
    margin-bottom: 0.35rem;
    font-size: 0.62rem;
  }

  .page-home .home-crm__title {
    font-size: clamp(1.22rem, 5.2vw, 1.45rem);
    margin-bottom: 0.45rem;
    line-height: 1.18;
  }

  .page-home .home-crm__lead {
    font-size: 0.8125rem;
    margin-bottom: 0.35rem;
    line-height: 1.48;
  }

  .page-home .home-crm__pitch,
  .page-home .home-crm__sectors {
    display: none;
  }

  .page-home .home-crm__tagline {
    font-size: 0.62rem;
    margin-bottom: 0.65rem;
    letter-spacing: 0.04em;
  }

  .page-home .home-crm__cta-wrap {
    gap: 0.4rem 0.55rem;
  }

  .page-home .home-crm__cta {
    padding: 0.52rem 0.95rem;
    font-size: 0.78rem;
  }

  .page-home .home-crm__panel {
    padding: 0.85rem 0.9rem 0.75rem;
    border-radius: 14px;
  }

  .page-home .home-crm__panel-label {
    margin-bottom: 0.55rem;
    font-size: 0.62rem;
  }

  .page-home .home-crm__modules {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
  }

  .page-home .home-crm__module {
    padding: 0.45rem 0.5rem;
    border-radius: 9px;
    gap: 0.45rem;
  }

  .page-home .home-crm__module-icon {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 7px;
  }

  .page-home .home-crm__module-icon svg {
    width: 0.85rem;
    height: 0.85rem;
  }

  .page-home .home-crm__module-text strong {
    font-size: 0.72rem;
  }

  .page-home .home-crm__module-text span {
    font-size: 0.64rem;
    line-height: 1.3;
  }

  .page-home .home-crm__checks {
    margin-bottom: 0.65rem;
    padding-top: 0.5rem;
    gap: 0.28rem;
  }

  .page-home .home-crm__checks li {
    font-size: 0.7rem;
    padding-left: 0.85rem;
  }

  .page-home .home-crm__maatwerk {
    padding: 0.65rem 0.7rem;
    gap: 0.6rem;
    border-radius: 10px;
  }

  .page-home .home-crm__maatwerk-icon {
    width: 1.85rem;
    height: 1.85rem;
  }

  .page-home .home-crm__maatwerk-body strong {
    font-size: 0.78rem;
  }

  .page-home .home-crm__maatwerk-body p {
    font-size: 0.7rem;
    line-height: 1.4;
  }

  .page-home .home-crm__panel-inner {
    max-height: 6.5rem;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 100%);
  }

  .page-home .home-crm__panel-expand.is-expanded .home-crm__panel-inner {
    max-height: var(--home-crm-panel-max, 42rem);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .page-home .home-crm__panel-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    margin: 0.55rem 0 0;
    padding: 0.55rem 0.85rem;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--teal);
    background: rgba(0, 184, 184, 0.07);
    border: 1px solid rgba(0, 140, 140, 0.16);
    border-radius: 999px;
    cursor: pointer;
    transition:
      background 0.25s ease,
      border-color 0.25s ease,
      transform 0.25s var(--ease-out);
  }

  .page-home .home-crm__panel-toggle:hover,
  .page-home .home-crm__panel-toggle:focus-visible {
    background: rgba(0, 184, 184, 0.12);
    border-color: rgba(0, 154, 154, 0.28);
    outline: none;
  }

  .page-home .home-crm__panel-toggle:focus-visible {
    box-shadow: 0 0 0 2px rgba(0, 184, 184, 0.35);
  }

  .page-home .home-crm__panel-toggle-icon {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
    transition: transform 0.35s var(--ease-out);
  }

  .page-home .home-crm__panel-expand.is-expanded .home-crm__panel-toggle-icon {
    transform: rotate(180deg);
  }

  .page-home .home-crm__module:hover {
    transform: none;
  }
}

@media (min-width: 900px) {
  .page-home .home-crm__panel-inner {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ——— Home: CRM editorial (compact homepage) ——— */
.page-home .home-crm--editorial {
  padding: clamp(2rem, 4.5vw, 2.85rem) 0;
  background-color: #ffffff;
}

.page-home .home-crm--editorial .container {
  max-width: var(--content-max, 72rem);
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

.home-crm--editorial .section-bg {
  display: none;
}

.home-crm--editorial .home-crm__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
}

.home-crm--editorial .home-crm__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}

.home-crm--editorial .home-crm__title {
  margin: 0 0 0.7rem;
  max-width: 16ch;
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text-primary);
}

.home-crm--editorial .home-crm__lead {
  margin: 0 0 1.15rem;
  max-width: 32rem;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.58;
  color: var(--home-crm-muted);
}

.home-crm--editorial .home-crm__visual {
  min-width: 0;
  margin: 0 0 1.25rem;
  padding: 1.1rem 0 0;
  border-top: 1px solid rgba(26, 35, 41, 0.08);
}

.home-crm--editorial .home-crm__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0 0 1.1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  line-height: 1.4;
}

.home-crm--editorial .home-crm__flow-arrow {
  color: var(--teal);
  font-weight: 600;
}

.home-crm--editorial .home-crm__caps {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem 1rem;
}

.home-crm--editorial .home-crm__caps li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.home-crm--editorial .home-crm__cap-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--teal);
}

.home-crm--editorial .home-crm__cap-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.home-crm--editorial .home-crm__cap-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.3;
}

.home-crm--editorial .home-crm__note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(26, 35, 41, 0.5);
}

.home-crm--editorial .home-crm__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  transition: color 0.22s ease;
}

.home-crm--editorial .home-crm__link span {
  display: inline-block;
  transition: transform 0.22s var(--ease-out);
}

.home-crm--editorial .home-crm__link:hover,
.home-crm--editorial .home-crm__link:focus-visible {
  color: var(--teal-dim);
}

.home-crm--editorial .home-crm__link:hover span,
.home-crm--editorial .home-crm__link:focus-visible span {
  transform: translateX(3px);
}

.home-crm--editorial .home-crm__link:focus-visible {
  outline: 2px solid rgba(0, 184, 184, 0.45);
  outline-offset: 3px;
}

@media (min-width: 640px) {
  .home-crm--editorial .home-crm__caps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
    padding-top: 0.15rem;
    border-top: 1px solid rgba(26, 35, 41, 0.08);
  }

  .home-crm--editorial .home-crm__caps li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding-top: 0.75rem;
  }
}

@media (min-width: 900px) {
  .home-crm--editorial .home-crm__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(2rem, 5vw, 3.5rem);
    row-gap: 0;
    align-items: center;
  }

  .home-crm--editorial .home-crm__eyebrow,
  .home-crm--editorial .home-crm__title,
  .home-crm--editorial .home-crm__lead,
  .home-crm--editorial .home-crm__link {
    grid-column: 1;
  }

  .home-crm--editorial .home-crm__lead {
    margin-bottom: 1.35rem;
  }

  .home-crm--editorial .home-crm__visual {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin: 0;
    padding: 0 0 0 1.5rem;
    border-top: none;
    border-left: 1px solid rgba(26, 35, 41, 0.1);
    align-self: center;
  }

  .home-crm--editorial .home-crm__flow {
    flex-wrap: nowrap;
    font-size: 0.84rem;
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 639px) {
  .home-crm--editorial .home-crm__flow {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .home-crm--editorial .home-crm__flow-arrow {
    transform: rotate(90deg);
    margin-left: 0.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-crm--editorial .home-crm__link span,
  .home-crm--editorial .home-crm__link:hover span,
  .home-crm--editorial .home-crm__link:focus-visible span {
    transform: none;
  }
}

/* ——— Home: persoonlijk vertrouwen (teal + foto) ——— */
.home-trust {
  position: relative;
  z-index: 1;
  padding: clamp(2.35rem, 5vw, 3.25rem) 0;
  overflow: hidden;
  color: var(--text-inverse);
}

.home-trust__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    152deg,
    #005f5f 0%,
    var(--teal-dim) 30%,
    var(--teal) 55%,
    #00a8a8 100%
  );
}

.home-trust__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 45% at 12% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 95% 30%, rgba(0, 255, 255, 0.16) 0%, transparent 50%);
}

.home-trust__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.35rem, 3.5vw, 1.85rem);
  align-items: center;
  max-width: min(58rem, 100%);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .home-trust__layout {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    gap: clamp(1.75rem, 4vw, 2.65rem);
  }
}

.home-trust__media {
  position: relative;
  margin: 0;
  min-width: 0;
  width: min(13.5rem, 78vw);
  justify-self: center;
}

@media (min-width: 768px) {
  .home-trust__media {
    width: 100%;
    justify-self: stretch;
  }
}

.home-trust__frame {
  position: relative;
  border-radius: 16px 16px 16px 5px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 18px 40px -22px rgba(0, 25, 25, 0.55);
}

.home-trust__frame::before {
  content: "";
  position: absolute;
  inset: -5px -5px 8px 8px;
  border-radius: 16px 16px 16px 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: -1;
  pointer-events: none;
}

.home-trust__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, transparent 50%, rgba(0, 40, 40, 0.45) 100%);
  pointer-events: none;
}

.home-trust__frame picture {
  display: block;
  width: 100%;
  height: 100%;
}

.home-trust__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor lower: crop empty sky at top, keep face & body */
  object-position: center 52%;
  display: block;
}

.home-trust__badge {
  position: absolute;
  left: 0.65rem;
  right: 0.65rem;
  bottom: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 9px;
  background: rgba(0, 50, 50, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.home-trust__name {
  font-size: 0.875rem;
  font-weight: 800;
  color: #fff;
}

.home-trust__role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.home-trust__role::before {
  content: "·";
  margin-right: 0.35rem;
  opacity: 0.55;
}

.home-trust__content {
  min-width: 0;
  text-align: center;
}

@media (min-width: 768px) {
  .home-trust__content {
    text-align: left;
    padding-left: clamp(0.5rem, 2vw, 1.25rem);
    border-left: 1px solid rgba(255, 255, 255, 0.18);
  }
}

.home-trust__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.home-trust__title {
  margin: 0 0 0.55rem;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fff;
}

.home-trust__kw {
  color: #fff;
  font-weight: 700;
}

.home-trust__lead {
  margin: 0 0 0.75rem;
  font-size: clamp(0.9rem, 1.35vw, 1rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}

.home-trust__tags {
  list-style: none;
  margin: 0 0 0.65rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 0;
}

@media (min-width: 720px) {
  .home-trust__tags {
    justify-content: flex-start;
  }
}

.home-trust__tags li {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 0;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.9);
  background: none;
  border: none;
}

.home-trust__tags li:not(:last-child)::after {
  content: "·";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 255, 255, 0.55);
}

.home-trust__note {
  margin: 0 0 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.48;
  color: rgba(255, 255, 255, 0.68);
  font-style: italic;
}

.home-trust__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0.85rem 0 0.35rem;
  padding: 0.65rem 0.35rem;
  max-width: min(26rem, 100%);
  list-style: none;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
}

.home-trust__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  text-align: center;
}

.home-trust__stat:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.home-trust__stat-value {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28);
}

.home-trust__stat-label {
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(236, 252, 252, 0.88);
}

@media (min-width: 720px) {
  .home-trust__stats {
    margin-left: 0;
    margin-right: auto;
  }
}

@media (max-width: 479px) {
  .home-trust__stat-value {
    font-size: 1.05rem;
  }

  .home-trust__stat-label {
    font-size: 0.6rem;
  }
}

.home-trust__cta-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 0.6rem;
}

@media (min-width: 720px) {
  .home-trust__cta-wrap {
    justify-content: flex-start;
  }
}

.home-trust__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.58rem 1.15rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--teal-dim);
  text-decoration: none;
  background: #fff;
  border: 1px solid transparent;
  box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.22);
  transition:
    transform 0.28s var(--ease-out),
    box-shadow 0.28s ease,
    background 0.28s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.home-trust__cta:hover {
  color: #004d4d;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.28);
}

.home-trust__cta--ghost {
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

.home-trust__cta--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

.home-trust__cta:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .home-trust__cta,
  .home-trust__cta:hover {
    transform: none;
  }
}

/* ——— Home: cases (wit) ——— */
.home-cases {
  --home-cases-muted: rgba(26, 35, 41, 0.62);
  position: relative;
  z-index: 1;
  padding: clamp(2.35rem, 5vw, 3.25rem) 0;
  background: #ffffff;
}

.home-cases__head {
  margin-bottom: clamp(1.35rem, 3vw, 1.85rem);
  max-width: min(36rem, 100%);
}

.home-cases__eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}

.home-cases__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--text-primary);
}

.home-cases__lead {
  margin: 0;
  font-size: clamp(0.875rem, 1.2vw, 0.95rem);
  line-height: 1.55;
  color: var(--home-cases-muted);
}

.home-cases__kw {
  color: var(--teal);
  font-weight: 700;
}

.home-cases__grid {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

/* Altijd max. 3 nieuwste cases in één rij (desktop) / carousel (mobiel) */
.home-cases__grid > .home-cases__item:nth-child(n + 4) {
  display: none;
}

@media (min-width: 720px) {
  .home-cases__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
  }
}

.home-cases__item {
  min-width: 0;
}

.home-cases__card {
  height: 100%;
  border-radius: 14px;
  border: 1px solid rgba(0, 140, 140, 0.12);
  background: #fff;
  overflow: hidden;
  transition:
    border-color 0.25s ease,
    box-shadow 0.3s ease,
    transform 0.3s var(--ease-out);
}

.home-cases__card:hover {
  border-color: rgba(0, 154, 154, 0.28);
  box-shadow: 0 16px 40px -28px rgba(0, 100, 100, 0.22);
  transform: translateY(-2px);
}

.home-cases__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.home-cases__link:focus-visible {
  outline: 2px solid rgba(0, 184, 184, 0.55);
  outline-offset: 3px;
  border-radius: 14px;
}

.home-cases__visual {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(224, 252, 252, 0.5) 0%, #f4fafa 100%);
}

.home-cases__visual picture {
  display: block;
  width: 100%;
  height: 100%;
}

.home-cases__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.45s var(--ease-out);
}

.home-cases__card:hover .home-cases__thumb {
  transform: scale(1.03);
}

.home-cases__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.35rem;
  padding: 0.85rem 0.9rem 0.95rem;
}

.home-cases__scope {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

.home-cases__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.home-cases__done {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--home-cases-muted);
}

.home-cases__result {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--home-cases-muted);
}

.home-cases__result strong {
  color: var(--text-strong);
  font-weight: 700;
}

.home-cases__btn {
  margin-top: auto;
  padding-top: 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--teal-dim);
}

.home-cases__btn::after {
  content: " →";
}

.home-cases__card:hover .home-cases__btn {
  color: var(--teal);
}

.home-cases__aside {
  margin: 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid rgba(0, 140, 140, 0.1);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--home-cases-muted);
  text-align: center;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

.home-cases__aside strong {
  color: var(--text-strong);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .home-cases__card,
  .home-cases__card:hover,
  .home-cases__thumb,
  .home-cases__card:hover .home-cases__thumb {
    transform: none;
  }
}

/* Mobiel: cases horizontaal scrollen (carousel) */
@media (max-width: 899px) {
  .page-home .home-cases,
  .page--werk .werk-cases {
    overflow: visible;
  }

  .page-home .home-cases__grid,
  .page--werk .werk-cases__grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(0.75rem, 3vw, 1rem);
    margin-left: calc(-1 * clamp(1rem, 4.5vw, 1.35rem));
    margin-right: calc(-1 * clamp(1rem, 4.5vw, 1.35rem));
    padding-left: clamp(1rem, 4.5vw, 1.35rem);
    padding-right: clamp(1rem, 4.5vw, 1.35rem);
    padding-bottom: 0.35rem;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(1rem, 4.5vw, 1.35rem);
    scrollbar-width: none;
  }

  .page-home .home-cases__grid::-webkit-scrollbar,
  .page--werk .werk-cases__grid::-webkit-scrollbar {
    display: none;
  }

  .page-home .home-cases__grid > .home-cases__item,
  .page--werk .werk-cases__grid > .home-cases__item {
    flex: 0 0 min(88vw, 20.5rem);
    max-width: min(88vw, 20.5rem);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 0;
    align-self: stretch;
  }

  .page-home .home-cases__grid .home-cases__card[data-reveal],
  .page-home .home-cases__grid .home-cases__card[data-reveal].is-visible,
  .page--werk .werk-cases__grid .home-cases__card[data-reveal],
  .page--werk .werk-cases__grid .home-cases__card[data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .page-home .home-cases__card,
  .page--werk .werk-cases__grid .home-cases__card {
    height: 100%;
    transform: none;
  }

  .page-home .home-cases__card:hover,
  .page-home .home-cases__card:focus-visible,
  .page--werk .werk-cases__grid .home-cases__card:hover,
  .page--werk .werk-cases__grid .home-cases__card:focus-visible {
    transform: none;
  }

  .page-home .home-cases__card:hover .home-cases__thumb,
  .page--werk .werk-cases__grid .home-cases__card:hover .home-cases__thumb {
    transform: none;
  }
}

/* ——— Home: aanpak / process (teal) ——— */
.home-process {
  position: relative;
  z-index: 1;
  padding: clamp(2.5rem, 5.5vw, 3.5rem) 0;
  overflow: hidden;
  color: var(--text-inverse);
}

.home-process__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    152deg,
    #005f5f 0%,
    var(--teal-dim) 30%,
    var(--teal) 55%,
    #00a8a8 100%
  );
}

.home-process__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 88% 20%, rgba(255, 255, 255, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 8% 75%, rgba(0, 255, 255, 0.16) 0%, transparent 50%);
}

.home-process__head {
  margin-bottom: clamp(1.35rem, 3vw, 1.85rem);
  text-align: center;
  max-width: min(34rem, 100%);
  margin-left: auto;
  margin-right: auto;
}

.home-process__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

.home-process__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: #fff;
}

.home-process__lead {
  margin: 0;
  font-size: clamp(0.875rem, 1.2vw, 0.95rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.home-process__kw {
  color: #fff;
  font-weight: 700;
}

.home-process__steps {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  counter-reset: home-process;
}

@media (min-width: 640px) {
  .home-process__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
}

@media (min-width: 1024px) {
  .home-process__steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.65rem;
  }
}

.home-process__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem 0.8rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  min-height: 100%;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.3s var(--ease-out);
}

.home-process__step:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-2px);
}

.home-process__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--teal-dim);
  background: #fff;
  box-shadow: 0 4px 12px -6px rgba(0, 30, 30, 0.35);
}

.home-process__name {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
}

.home-process__text {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}

.home-process__cta-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem 0.75rem;
}

.home-process__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.58rem 1.15rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    transform 0.28s var(--ease-out),
    box-shadow 0.28s ease,
    background 0.22s ease,
    border-color 0.25s ease;
}

.home-process__cta:not(.home-process__cta--ghost) {
  color: var(--teal-dim);
  background: #fff;
  box-shadow: 0 4px 18px -6px rgba(0, 0, 0, 0.25);
}

.home-process__cta:not(.home-process__cta--ghost):hover {
  color: #004d4d;
  transform: translateY(-1px);
}

.home-process__cta--ghost {
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.38);
}

.home-process__cta--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
}

.home-process__cta:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .home-process__step,
  .home-process__step:hover,
  .home-process__cta,
  .home-process__cta:hover {
    transform: none;
  }
}

/* ——— Home: process timeline (dark navy) ——— */
.home-process--timeline {
  --home-process-bg: #0a1218;
  --home-process-muted: rgba(244, 248, 248, 0.62);
  --home-process-line: rgba(255, 255, 255, 0.12);
  padding: clamp(2.35rem, 5vw, 3.5rem) 0;
  background-color: var(--home-process-bg);
  color: #f4f8f8;
}

.home-process--timeline .home-process__bg {
  display: none;
}

.home-process--timeline .home-process__head {
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  text-align: left;
  max-width: min(40rem, 100%);
  margin-left: 0;
  margin-right: 0;
}

.home-process--timeline .home-process__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--teal);
}

.home-process--timeline .home-process__title {
  margin: 0 0 0.7rem;
  max-width: 18ch;
  font-size: clamp(1.65rem, 3.6vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: #f4f8f8;
}

.home-process--timeline .home-process__lead {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(0.95rem, 1.25vw, 1.05rem);
  line-height: 1.6;
  color: var(--home-process-muted);
}

.home-process--timeline .home-process__steps {
  list-style: none;
  margin: 0 0 clamp(1.5rem, 3.5vw, 2rem);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  counter-reset: none;
  position: relative;
}

.home-process--timeline .home-process__step {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.85rem 1rem;
  align-items: start;
  padding: 0 0 1.35rem 0;
  min-height: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  transform: none;
}

.home-process--timeline .home-process__step:last-child {
  padding-bottom: 0;
}

.home-process--timeline .home-process__step:hover {
  background: transparent;
  border: none;
  transform: none;
}

/* Vertical timeline line (mobile) */
.home-process--timeline .home-process__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 1.35rem;
  bottom: 0;
  width: 1px;
  background: var(--home-process-line);
}

.home-process--timeline .home-process__num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--teal);
  background: transparent;
  box-shadow: none;
  line-height: 1.4;
}

.home-process--timeline .home-process__name {
  margin: 0 0 0.3rem;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #f4f8f8;
}

.home-process--timeline .home-process__text {
  margin: 0;
  max-width: 22rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--home-process-muted);
}

.home-process--timeline .home-process__cta-wrap {
  justify-content: flex-start;
  margin: 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--home-process-line);
}

.home-process--timeline .home-process__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  transition: color 0.22s ease;
}

.home-process--timeline .home-process__cta-link span {
  display: inline-block;
  transition: transform 0.22s var(--ease-out);
}

.home-process--timeline .home-process__cta-link:hover,
.home-process--timeline .home-process__cta-link:focus-visible {
  color: var(--cyan);
}

.home-process--timeline .home-process__cta-link:hover span,
.home-process--timeline .home-process__cta-link:focus-visible span {
  transform: translateX(3px);
}

.home-process--timeline .home-process__cta-link:focus-visible {
  outline: 2px solid rgba(0, 184, 184, 0.55);
  outline-offset: 3px;
}

@media (min-width: 960px) {
  .home-process--timeline .home-process__steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    padding-top: 0.35rem;
  }

  .home-process--timeline .home-process__step {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 1.1rem 0 0;
    border-right: none;
  }

  .home-process--timeline .home-process__step:last-child {
    padding-right: 0;
  }

  .home-process--timeline .home-process__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 1.65rem;
    right: 0;
    top: 0.55rem;
    bottom: auto;
    width: auto;
    height: 1px;
    background: var(--home-process-line);
  }

  .home-process--timeline .home-process__step:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0.35rem;
    top: 0.4rem;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--teal);
    opacity: 0.7;
  }

  .home-process--timeline .home-process__num {
    background-color: var(--home-process-bg);
    padding-right: 0.55rem;
    width: fit-content;
  }

  .home-process--timeline .home-process__body {
    padding-top: 0.15rem;
  }

  .home-process--timeline .home-process__text {
    max-width: none;
    font-size: 0.8125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-process--timeline .home-process__cta-link span,
  .home-process--timeline .home-process__cta-link:hover span,
  .home-process--timeline .home-process__cta-link:focus-visible span {
    transform: none;
  }
}

/* ——— Home: audit + contact (wit) ——— */
.home-audit {
  --home-audit-muted: rgba(26, 35, 41, 0.62);
  position: relative;
  z-index: 1;
  padding: clamp(2.25rem, 5vw, 3.25rem) 0;
  background: linear-gradient(180deg, #f8fbfb 0%, #ffffff 42%, #ffffff 100%);
  border-top: 1px solid rgba(0, 140, 140, 0.1);
}

.home-audit__inner {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2rem);
  align-items: start;
  min-width: 0;
}

@media (min-width: 900px) {
  .home-audit__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 3.25rem);
    row-gap: 1rem;
    align-items: stretch;
  }

  .home-audit__copy {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    transform: none;
    padding-top: 0;
  }

  .home-audit__form-intro {
    grid-column: 2;
    grid-row: 1;
  }

  .home-audit__form-block {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }
}

.home-audit__copy {
  min-width: 0;
}

.home-audit__title-left {
  margin: 0 0 0.65rem;
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.14;
  color: var(--text-primary);
}

.home-audit__title-accent {
  color: var(--teal);
}

.home-audit__kw {
  color: var(--teal);
  font-weight: 700;
}

.home-audit__lead {
  margin: 0 0 0.85rem;
  max-width: 34rem;
  font-size: clamp(0.84rem, 1.15vw, 0.92rem);
  line-height: 1.52;
  color: var(--home-audit-muted);
}

.home-audit__lead strong {
  color: var(--text-strong);
  font-weight: 600;
}

.home-audit__phone-wrap {
  margin: 0 0 0.9rem;
}

.home-audit .btn--phone-cta--light {
  color: var(--teal-dim);
  background:
    linear-gradient(180deg, rgba(0, 184, 184, 0.1) 0%, rgba(0, 184, 184, 0.05) 100%),
    #fff;
  border: 1px solid rgba(0, 140, 140, 0.32);
  box-shadow: 0 6px 20px -14px rgba(0, 90, 90, 0.35);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-audit .btn--phone-cta--light .btn--phone-cta__icon {
  color: var(--teal);
}

.home-audit .btn--phone-cta--light:hover,
.home-audit .btn--phone-cta--light:focus-visible {
  color: #041210;
  background:
    linear-gradient(180deg, rgba(0, 184, 184, 0.14) 0%, rgba(0, 184, 184, 0.07) 100%),
    #fff;
  border-color: rgba(0, 154, 154, 0.48);
  box-shadow:
    0 0 0 1px rgba(0, 184, 184, 0.1),
    0 8px 24px -12px rgba(0, 120, 120, 0.35);
}

.home-audit__stats {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.home-audit__stats li {
  padding: 0.65rem 0.45rem;
  border-radius: 12px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(0, 140, 140, 0.14);
  box-shadow: 0 8px 22px -16px rgba(0, 80, 80, 0.2);
}

.home-audit__stat-value {
  display: block;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 800;
  color: var(--teal-dim);
  line-height: 1.1;
}

.home-audit__stat-label {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.62rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--home-audit-muted);
}

.home-audit__stats--company {
  gap: 0.65rem;
}

.home-audit__stats--company .home-audit__company-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.15rem;
  padding: 0.85rem 0.9rem;
  min-height: 100%;
}

.home-audit__stats--company .home-audit__stat-label {
  margin-top: 0;
  margin-bottom: 0.2rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 90, 90, 0.72);
}

.home-audit__stats--company .home-audit__stat-value {
  font-size: clamp(0.82rem, 1.5vw, 0.95rem);
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}

.home-audit__stats--company .home-audit__stat-value--link {
  color: var(--teal-dim);
  text-decoration: none;
}

.home-audit__stats--company .home-audit__stat-value--link:hover {
  text-decoration: underline;
}

.home-audit__stats--company .home-audit__stat-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--home-audit-muted);
  text-decoration: none;
}

a.home-audit__stat-sub:hover {
  color: var(--teal-dim);
}

@media (max-width: 640px) {
  .home-audit__stats--company {
    grid-template-columns: 1fr;
  }
}

.home-audit__outcomes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.home-audit__outcomes li {
  padding: 0.2rem 0.15rem 0.2rem 0;
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--teal-dim);
  background: transparent;
  border: none;
}

.home-audit__form-intro {
  min-width: 0;
}

.home-audit__form-block {
  min-width: 0;
}

.home-audit__form-title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
}

.home-audit__benefits {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.65rem;
}

.home-audit__benefits li {
  position: relative;
  padding-left: 0.85rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--home-audit-muted);
}

.home-audit__benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--teal);
}

.home-audit__form.cta-form {
  padding: clamp(1rem, 2.5vw, 1.35rem);
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 184, 184, 0.38);
  box-shadow: 0 24px 56px -36px rgba(0, 70, 70, 0.22);
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .cta-form-booking-shell {
  width: 100%;
  min-width: 0;
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .cta-form-booking-shell .form-mode-panel--form {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .form-mode-toggle {
  background: rgba(0, 184, 184, 0.06);
  border: 1px solid rgba(0, 140, 140, 0.14);
  box-shadow: none;
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .form-mode-toggle__btn {
  color: var(--teal-dim);
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .form-mode-toggle__btn:hover,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .form-mode-toggle__btn:focus-visible {
  color: var(--teal-dim);
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .form-mode-toggle__btn.is-active,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .form-mode-toggle__btn.is-active:hover,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .form-mode-toggle__btn.is-active:focus-visible {
  color: #fff;
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .home-audit__form .cta-form__field span {
  color: var(--home-audit-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .home-audit__form input,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .home-audit__form select,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .home-audit__form textarea {
  font-size: 0.9rem;
  padding: 0.72rem 0.9rem;
  border-radius: 11px;
  border: 1px solid rgba(0, 140, 140, 0.2);
  background: #fff;
  color: var(--text-primary);
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .home-audit__form input::placeholder,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .home-audit__form textarea::placeholder {
  color: rgba(26, 35, 41, 0.38);
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .home-audit__form input:focus,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .home-audit__form select:focus,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .home-audit__form textarea:focus {
  border-color: rgba(0, 154, 154, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 184, 184, 0.12);
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .home-audit__form .cta-form__note {
  font-size: 0.7rem;
  color: var(--home-audit-muted);
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .home-audit__form .cta-form__note a {
  color: var(--teal);
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .cta-form-booking-shell .form-mode-panel--book {
  background: #fff;
  border: 1px solid rgba(0, 184, 184, 0.38);
  border-radius: 16px;
  box-shadow: 0 24px 56px -36px rgba(0, 70, 70, 0.22);
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .cta-form-booking-shell .form-mode-panel--book .cta-form__field span,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .cta-form-booking-shell .vtx-meet-step__lead {
  color: var(--home-audit-muted);
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .cta-form-booking-shell .vtx-meet-step__title,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .cta-form-booking-shell .vtx-meet-calnav__label {
  color: var(--text-primary);
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .cta-form-booking-shell .vtx-meet-wizard__progress,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .cta-form-booking-shell .vtx-meet-cal__dow,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .cta-form-booking-shell .vtx-meet-cal__status {
  color: var(--home-audit-muted);
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .cta-form-booking-shell .form-mode-panel--book input,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .cta-form-booking-shell .form-mode-panel--book select,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .cta-form-booking-shell .form-mode-panel--book textarea {
  border: 1px solid rgba(0, 140, 140, 0.2);
  background: #fff;
  color: var(--text-primary);
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .cta-form__flash--success {
  color: #0d5c4a;
  background: rgba(0, 184, 184, 0.1);
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .cta-form__flash--error {
  color: #9f1239;
  background: rgba(255, 92, 92, 0.08);
}

@media (max-width: 559px) {
  .home-audit__benefits {
    grid-template-columns: 1fr;
  }
}

/* ——— Home: project contact (compact conversion) ——— */
:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project {
  padding: clamp(1.85rem, 4vw, 2.65rem) 0;
  background: #ffffff;
  border-top: 1px solid rgba(26, 35, 41, 0.08);
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .container.home-audit__inner {
  max-width: min(1180px, 100%);
  padding-left: clamp(1.75rem, 7vw, 4.5rem);
  padding-right: clamp(1.75rem, 7vw, 4.5rem);
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  align-items: start;
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__title-left {
  margin: 0 0 0.7rem;
  max-width: 16ch;
  font-size: clamp(1.55rem, 3.4vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.14;
  color: var(--text-primary);
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__lead {
  margin: 0 0 1.15rem;
  max-width: 28rem;
  font-size: clamp(0.95rem, 1.25vw, 1.05rem);
  line-height: 1.58;
  color: var(--home-audit-muted);
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__trust {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__trust li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__trust li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal);
  font-weight: 700;
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__direct {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__direct-label {
  font-size: 0.8125rem;
  color: var(--home-audit-muted);
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__phone {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.22s ease;
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__phone:hover,
:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__phone:focus-visible {
  color: var(--teal);
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__phone:focus-visible {
  outline: 2px solid rgba(0, 184, 184, 0.45);
  outline-offset: 3px;
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form-block {
  min-width: 0;
  width: 100%;
  max-width: 40.625rem; /* 650px */
  margin-left: 0;
  margin-right: 0;
  padding: 1.45rem 1.4rem 1.25rem;
  background: #ffffff;
  border: 1px solid rgba(0, 154, 154, 0.18);
  border-radius: 19px;
  box-shadow:
    0 1px 2px rgba(26, 35, 41, 0.03),
    0 14px 36px -28px rgba(0, 90, 90, 0.28);
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form-title {
  margin: 0 0 1.15rem;
  padding: 0 0.1rem;
  font-size: clamp(1.1rem, 1.9vw, 1.28rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text-primary);
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form.cta-form {
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form .cta-form__field {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form .cta-form__field > span {
  display: block;
  margin-bottom: 0.38rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(26, 35, 41, 0.68);
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__label-nowrap {
  white-space: nowrap;
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form .cta-form__optional {
  font-weight: 500;
  color: rgba(26, 35, 41, 0.48);
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form input,
:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form select,
:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form textarea {
  width: 100%;
  font-size: 0.9rem;
  line-height: 1.35;
  min-height: 2.75rem;
  padding: 0.68rem 0.9rem;
  border-radius: 11px;
  border: 1px solid rgba(0, 140, 140, 0.16);
  background: #ffffff;
  color: var(--text-primary);
  box-shadow: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form input::placeholder,
:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form textarea::placeholder {
  color: rgba(26, 35, 41, 0.36);
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form input:focus,
:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form select:focus,
:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form textarea:focus {
  border-color: rgba(0, 154, 154, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 154, 154, 0.12);
  outline: none;
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23009a9a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 0.7rem;
  padding-right: 2.2rem;
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form textarea {
  min-height: 6.25rem;
  max-height: 7rem;
  height: 6.25rem;
  resize: vertical;
  line-height: 1.45;
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__row-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.72rem;
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.2rem;
  min-height: 3rem;
  padding: 0.85rem 1.15rem;
  border: none;
  border-radius: var(--radius-btn, 12px);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--teal);
  background-image: none;
  box-shadow: 0 6px 18px -12px rgba(0, 122, 122, 0.55);
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.22s ease,
    transform 0.22s var(--ease-out, ease),
    box-shadow 0.22s ease;
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__submit:hover,
:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__submit:focus-visible {
  color: #fff;
  background: var(--teal-dim);
  background-image: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(0, 100, 100, 0.5);
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__submit:focus-visible {
  outline: 2px solid rgba(0, 154, 154, 0.45);
  outline-offset: 3px;
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__submit::before,
:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__submit::after {
  display: none;
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .cta-form__reassure {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(26, 35, 41, 0.62);
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form .cta-form__note {
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.45;
  color: rgba(26, 35, 41, 0.4);
}

:is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form .cta-form__note a {
  color: var(--teal);
}

@media (min-width: 900px) {
  :is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__inner {
    grid-template-columns: minmax(0, 22.5rem) minmax(0, 40rem);
    column-gap: clamp(3.5rem, 5vw, 5rem);
    align-items: start;
    justify-content: center;
  }

  :is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__copy {
    max-width: 22.5rem;
    padding-top: 0.15rem;
  }

  :is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form-block {
    max-width: 40rem;
    width: 100%;
    justify-self: stretch;
  }

  :is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__row-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 0.72rem 0.8rem;
    align-items: end;
  }
}

@media (max-width: 899px) {
  :is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__form-block {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 1.3rem 1.15rem 1.15rem;
  }

  :is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__label-nowrap {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__submit,
  :is(.page-home, .page--diensten, .page--waarom-valtex, .page--contact, .page--wlm, .page--crm, .page--reclame, .page--seo) .home-audit--project .home-audit__submit:hover {
    transform: none;
  }
}


/* ——— Home: pricing (wit, editorial, compact) ——— */
.home-pricing {
  --home-pricing-muted: rgba(26, 35, 41, 0.62);
  --home-pricing-line: rgba(26, 35, 41, 0.1);
  position: relative;
  z-index: 1;
  padding: clamp(2.35rem, 5vw, 3.35rem) 0;
  background: #fff;
  color: #1a2329;
  border-top: 1px solid rgba(0, 140, 140, 0.08);
}

.home-pricing__inner {
  max-width: min(68rem, 100%);
}

.home-pricing__head {
  max-width: min(40rem, 100%);
  margin: 0 0 clamp(1.5rem, 3.5vw, 2rem);
}

.home-pricing__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}

.home-pricing__title {
  margin: 0 0 0.7rem;
  max-width: 22ch;
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.18;
  color: #1a2329;
}

.home-pricing__price {
  color: var(--teal);
  font-weight: 800;
}

.home-pricing__lead {
  margin: 0;
  max-width: 38rem;
  font-size: clamp(0.9rem, 1.35vw, 1rem);
  line-height: 1.55;
  color: var(--home-pricing-muted);
}

.home-pricing__points {
  list-style: none;
  margin: 0 0 clamp(1.15rem, 2.5vw, 1.5rem);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--home-pricing-line);
  border-bottom: 1px solid var(--home-pricing-line);
}

.home-pricing__point {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--home-pricing-line);
}

.home-pricing__point:last-child {
  border-bottom: none;
}

.home-pricing__num {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--teal);
}

.home-pricing__point-title {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #1a2329;
}

.home-pricing__point-text {
  margin: 0;
  max-width: 28ch;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--home-pricing-muted);
}

.home-pricing__note {
  margin: 0 0 1.15rem;
  max-width: 36rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(26, 35, 41, 0.52);
}

.home-pricing__cta-wrap {
  margin: 0;
}

.home-pricing__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  transition: color 0.22s ease;
}

.home-pricing__cta span {
  display: inline-block;
  transition: transform 0.22s var(--ease-out);
}

.home-pricing__cta:hover,
.home-pricing__cta:focus-visible {
  color: var(--teal-dim);
}

.home-pricing__cta:hover span,
.home-pricing__cta:focus-visible span {
  transform: translateX(3px);
}

.home-pricing__cta:focus-visible {
  outline: 2px solid rgba(0, 184, 184, 0.45);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .home-pricing__points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .home-pricing__point {
    padding: 1.25rem 1.35rem 1.25rem 0;
    border-bottom: none;
    border-right: 1px solid var(--home-pricing-line);
  }

  .home-pricing__point:first-child {
    padding-left: 0;
  }

  .home-pricing__point:last-child {
    border-right: none;
    padding-right: 0;
    padding-left: 1.35rem;
  }

  .home-pricing__point:nth-child(2) {
    padding-left: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-pricing__cta span,
  .home-pricing__cta:hover span,
  .home-pricing__cta:focus-visible span {
    transform: none;
  }
}


/* ——— Diensten page: editorial redesign (match homepage) ——— */
.page--diensten .ds-hero {
  position: relative;
  z-index: 1;
  padding: calc(var(--topbar-h, 64px) + 2rem) 0 clamp(2.25rem, 5vw, 3.25rem);
  background: #fff;
  color: #1a2329;
  border-bottom: 1px solid rgba(26, 35, 41, 0.08);
}

.page--diensten .ds-hero__inner {
  max-width: min(68rem, 100%);
}

.page--diensten .ds-hero__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  align-items: center;
}

.page--diensten .ds-hero__eyebrow,
.page--diensten .ds-overview__eyebrow,
.page--diensten .ds-website__eyebrow,
.page--diensten .ds-ecosystem__eyebrow,
.page--diensten .ds-partner__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}

.page--diensten .ds-hero__title {
  margin: 0 0 0.85rem;
  max-width: 16ch;
  font-size: clamp(1.85rem, 4.2vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: #1a2329;
}

.page--diensten .ds-hero__lead {
  margin: 0 0 1.35rem;
  max-width: 36rem;
  font-size: clamp(0.95rem, 1.35vw, 1.05rem);
  line-height: 1.58;
  color: rgba(26, 35, 41, 0.62);
}

.page--diensten .ds-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}

.page--diensten .ds-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(26, 35, 41, 0.1);
  background: #fff;
}

.page--diensten .ds-stack li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid rgba(26, 35, 41, 0.08);
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a2329;
}

.page--diensten .ds-stack li:last-child {
  border-bottom: none;
}

.page--diensten .ds-stack__num {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--teal);
}

@media (min-width: 900px) {
  .page--diensten .ds-hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}

/* Overview */
.page--diensten .ds-overview {
  position: relative;
  z-index: 1;
  padding: clamp(2.35rem, 5vw, 3.5rem) 0;
  background: #fff;
  color: #1a2329;
  border-top: 1px solid rgba(26, 35, 41, 0.06);
}

.page--diensten .ds-overview__inner,
.page--diensten .ds-website__inner,
.page--diensten .ds-ecosystem__inner,
.page--diensten .ds-extra__inner,
.page--diensten .ds-partner__inner {
  max-width: min(68rem, 100%);
}

.page--diensten .ds-overview__head {
  max-width: min(40rem, 100%);
  margin: 0 0 clamp(1.5rem, 3.5vw, 2.15rem);
}

.page--diensten .ds-overview__title,
.page--diensten .ds-website__title,
.page--diensten .ds-extra__title,
.page--diensten .ds-partner__title {
  margin: 0 0 0.7rem;
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.18;
  color: #1a2329;
}

.page--diensten .ds-overview__lead,
.page--diensten .ds-website__lead,
.page--diensten .ds-partner__lead {
  margin: 0;
  max-width: 40rem;
  font-size: clamp(0.9rem, 1.35vw, 1rem);
  line-height: 1.55;
  color: rgba(26, 35, 41, 0.62);
}

.page--diensten .ds-overview__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(26, 35, 41, 0.1);
}

.page--diensten .ds-overview__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num name"
    "num text"
    "num link";
  column-gap: 0.85rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(26, 35, 41, 0.1);
}

.page--diensten .ds-overview__num {
  grid-area: num;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--teal);
  padding-top: 0.2rem;
}

.page--diensten .ds-overview__name {
  grid-area: name;
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1a2329;
}

.page--diensten .ds-overview__text {
  grid-area: text;
  margin: 0 0 0.55rem;
  max-width: 34rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(26, 35, 41, 0.62);
}

.page--diensten .ds-overview__link {
  grid-area: link;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  transition: color 0.22s ease;
}

.page--diensten .ds-overview__link span {
  display: inline-block;
  transition: transform 0.22s var(--ease-out);
}

.page--diensten .ds-overview__link:hover,
.page--diensten .ds-overview__link:focus-visible {
  color: var(--teal-dim);
}

.page--diensten .ds-overview__link:hover span,
.page--diensten .ds-overview__link:focus-visible span {
  transform: translateX(3px);
}

.page--diensten .ds-overview__link:focus-visible {
  outline: 2px solid rgba(0, 184, 184, 0.45);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .page--diensten .ds-overview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    border-top: none;
  }

  .page--diensten .ds-overview__item {
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(26, 35, 41, 0.1);
  }
}

@media (min-width: 1100px) {
  .page--diensten .ds-overview__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1.75rem;
  }
}

/* Website feature */
.page--diensten .ds-website {
  position: relative;
  z-index: 1;
  padding: clamp(2.35rem, 5vw, 3.5rem) 0;
  background: #f7f9fa;
  color: #1a2329;
  border-top: 1px solid rgba(26, 35, 41, 0.06);
}

.page--diensten .ds-website__layout {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  align-items: start;
}

.page--diensten .ds-website__title {
  max-width: 22ch;
}

.page--diensten .ds-website__lead {
  margin: 0 0 1.25rem;
}

.page--diensten .ds-website__benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.page--diensten .ds-website__benefits li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1a2329;
}

.page--diensten .ds-website__benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--teal);
}

.page--diensten .ds-website__aside {
  padding: 1.35rem 1.35rem 1.4rem;
  border: 1px solid rgba(26, 35, 41, 0.1);
  background: #fff;
}

.page--diensten .ds-website__price-label {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(26, 35, 41, 0.55);
}

.page--diensten .ds-website__price {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1a2329;
}

.page--diensten .ds-website__price-value {
  display: inline-block;
  margin-left: 0.2rem;
  font-size: clamp(1.55rem, 3vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--teal);
}

.page--diensten .ds-website__price-note {
  margin: 0 0 1.15rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(26, 35, 41, 0.55);
}

.page--diensten .ds-website__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

.page--diensten .ds-website__secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  transition: color 0.22s ease;
}

.page--diensten .ds-website__secondary span {
  display: inline-block;
  transition: transform 0.22s var(--ease-out);
}

.page--diensten .ds-website__secondary:hover,
.page--diensten .ds-website__secondary:focus-visible {
  color: var(--teal-dim);
}

.page--diensten .ds-website__secondary:hover span,
.page--diensten .ds-website__secondary:focus-visible span {
  transform: translateX(3px);
}

@media (min-width: 900px) {
  .page--diensten .ds-website__layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.75fr);
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
  }

  .page--diensten .ds-website__benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
  }
}

/* Ecosystem dark navy */
.page--diensten .ds-ecosystem {
  position: relative;
  z-index: 1;
  padding: clamp(2.5rem, 5.5vw, 3.75rem) 0;
  background: #0a1218;
  color: #f4f8f8;
}

.page--diensten .ds-ecosystem__eyebrow {
  color: var(--teal);
}

.page--diensten .ds-ecosystem__title {
  margin: 0 0 0.7rem;
  max-width: 16ch;
  font-size: clamp(1.55rem, 3.4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #f4f8f8;
}

.page--diensten .ds-ecosystem__lead {
  margin: 0 0 clamp(1.5rem, 3.5vw, 2.15rem);
  max-width: 40rem;
  font-size: clamp(0.9rem, 1.35vw, 1rem);
  line-height: 1.55;
  color: rgba(244, 248, 248, 0.62);
}

.page--diensten .ds-flow {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.35rem;
}

.page--diensten .ds-flow__item {
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
}

.page--diensten .ds-flow__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f4f8f8;
}

.page--diensten .ds-flow__arrow {
  padding: 0 0.15rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--teal);
}

.page--diensten .ds-ecosystem__note {
  margin: 0;
  max-width: 40rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(244, 248, 248, 0.55);
}

@media (min-width: 960px) {
  .page--diensten .ds-flow {
    flex-wrap: nowrap;
    gap: 0.35rem;
  }

  .page--diensten .ds-flow__item {
    flex: 1 1 0;
    text-align: center;
    padding: 0.7rem 0.5rem;
  }
}

/* Additional services rows */
.page--diensten .ds-extra {
  position: relative;
  z-index: 1;
  padding: clamp(2.35rem, 5vw, 3.5rem) 0;
  background: #fff;
  color: #1a2329;
  border-top: 1px solid rgba(26, 35, 41, 0.06);
}

.page--diensten .ds-extra__head {
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
}

.page--diensten .ds-extra__title {
  max-width: 22ch;
}

.page--diensten .ds-extra__list {
  border-top: 1px solid rgba(26, 35, 41, 0.1);
}

.page--diensten .ds-extra__row {
  display: grid;
  gap: 1rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid rgba(26, 35, 41, 0.1);
}

.page--diensten .ds-extra__name {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1a2329;
}

.page--diensten .ds-extra__text {
  margin: 0 0 0.75rem;
  max-width: 40rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(26, 35, 41, 0.62);
}

.page--diensten .ds-extra__benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}

.page--diensten .ds-extra__benefits li {
  position: relative;
  padding-left: 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a2329;
}

.page--diensten .ds-extra__benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--teal);
}

.page--diensten .ds-extra__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  transition: color 0.22s ease;
}

.page--diensten .ds-extra__link span {
  display: inline-block;
  transition: transform 0.22s var(--ease-out);
}

.page--diensten .ds-extra__link:hover,
.page--diensten .ds-extra__link:focus-visible,
.page--diensten .ds-website__secondary:focus-visible {
  color: var(--teal-dim);
}

.page--diensten .ds-extra__link:hover span,
.page--diensten .ds-extra__link:focus-visible span {
  transform: translateX(3px);
}

.page--diensten .ds-extra__link:focus-visible,
.page--diensten .ds-website__secondary:focus-visible {
  outline: 2px solid rgba(0, 184, 184, 0.45);
  outline-offset: 3px;
}

@media (min-width: 800px) {
  .page--diensten .ds-extra__row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 2rem;
    padding: 1.5rem 0;
  }
}

/* Partner why */
.page--diensten .ds-partner {
  position: relative;
  z-index: 1;
  padding: clamp(2.35rem, 5vw, 3.35rem) 0;
  background: #fff;
  color: #1a2329;
  border-top: 1px solid rgba(26, 35, 41, 0.08);
}

.page--diensten .ds-partner__head {
  max-width: min(40rem, 100%);
  margin: 0 0 clamp(1.35rem, 3vw, 1.85rem);
}

.page--diensten .ds-partner__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(26, 35, 41, 0.1);
  border-bottom: 1px solid rgba(26, 35, 41, 0.1);
}

.page--diensten .ds-partner__point {
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(26, 35, 41, 0.1);
}

.page--diensten .ds-partner__point:last-child {
  border-bottom: none;
}

.page--diensten .ds-partner__num {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--teal);
}

.page--diensten .ds-partner__name {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1a2329;
}

.page--diensten .ds-partner__text {
  margin: 0;
  max-width: 28rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(26, 35, 41, 0.62);
}

@media (min-width: 768px) {
  .page--diensten .ds-partner__points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page--diensten .ds-partner__point {
    padding: 1.25rem 1.25rem 1.25rem 0;
    border-bottom: 1px solid rgba(26, 35, 41, 0.1);
  }

  .page--diensten .ds-partner__point:nth-child(odd) {
    padding-right: 1.5rem;
    border-right: 1px solid rgba(26, 35, 41, 0.1);
  }

  .page--diensten .ds-partner__point:nth-child(even) {
    padding-left: 1.5rem;
  }

  .page--diensten .ds-partner__point:nth-child(1),
  .page--diensten .ds-partner__point:nth-child(2) {
    border-bottom: 1px solid rgba(26, 35, 41, 0.1);
  }

  .page--diensten .ds-partner__point:nth-child(3),
  .page--diensten .ds-partner__point:nth-child(4) {
    border-bottom: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page--diensten .ds-overview__link span,
  .page--diensten .ds-overview__link:hover span,
  .page--diensten .ds-extra__link span,
  .page--diensten .ds-extra__link:hover span,
  .page--diensten .ds-website__secondary span,
  .page--diensten .ds-website__secondary:hover span {
    transform: none;
  }
}



/* ——— Diensten hybrid: rich + premium (20261007b) ——— */
.page--diensten #diensten-hero-cinema.diensten-hero {
  min-height: 680px;
  height: auto;
  max-height: 760px;
  overflow: hidden;
}

.page--diensten #diensten-hero-cinema .diensten-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

.page--diensten #diensten-hero-cinema .diensten-hero__visual {
  display: block;
}

.page--diensten #diensten-hero-cinema .diensten-hero__cards--4 {
  min-height: 22rem;
  max-width: 21rem;
}

.page--diensten #diensten-hero-cinema .diensten-hero__card {
  width: min(100%, 16.5rem);
  padding: 0.85rem 1rem;
}

.page--diensten #diensten-hero-cinema .diensten-hero__card--1 {
  top: 0;
  right: 2.25rem;
  z-index: 4;
}

.page--diensten #diensten-hero-cinema .diensten-hero__card--2 {
  top: 4.35rem;
  right: 0;
  z-index: 3;
}

.page--diensten #diensten-hero-cinema .diensten-hero__card--3 {
  top: 8.7rem;
  right: 1.6rem;
  z-index: 2;
}

.page--diensten #diensten-hero-cinema .diensten-hero__card--4 {
  top: 13.05rem;
  right: 0.35rem;
  z-index: 1;
}

.page--diensten #diensten-hero-cinema .diensten-hero__pills {
  display: none;
}

.page--diensten #diensten-hero-cinema .diensten-hero__trust {
  margin-top: 1.35rem;
}

.page--diensten #diensten-hero-cinema .diensten-hero__trust .diensten-hero__stat-value {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}

.page--diensten #diensten-hero-cinema .diensten-hero__trust .diensten-hero__stat-label {
  font-size: 0.72rem;
  color: rgba(190, 205, 215, 0.85);
}

.page--diensten .diensten-quality__float-badge {
  display: none !important;
}

.page--diensten .diensten-quality__steps--caps {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.page--diensten .diensten-quality__steps--caps .diensten-quality__step-value {
  font-size: clamp(0.92rem, 1.6vw, 1.05rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.page--diensten .diensten-quality__steps--caps .diensten-quality__step-label {
  font-size: 0.78rem;
  font-weight: 500;
}

/* Compact service rhythm */
.page--diensten .diensten-svc--compact .diensten-svc-teal__inner,
.page--diensten .diensten-svc--compact .diensten-svc-light__inner,
.page--diensten .diensten-svc-navy__inner,
.page--diensten .diensten-svc-soft__inner {
  padding-top: clamp(1.85rem, 4vw, 2.65rem);
  padding-bottom: clamp(1.85rem, 4vw, 2.65rem);
}

.page--diensten .diensten-svc-teal--web {
  /* keep teal as single strong feature accent */
}

.page--diensten .diensten-svc__text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.15rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: color 0.22s ease;
}

.page--diensten .diensten-svc-light .diensten-svc__text-link,
.page--diensten .diensten-svc-soft .diensten-svc__text-link {
  color: var(--teal);
}

.page--diensten .diensten-svc__text-link:hover,
.page--diensten .diensten-svc__text-link:focus-visible {
  color: #fff;
}

.page--diensten .diensten-svc-light .diensten-svc__text-link:hover,
.page--diensten .diensten-svc-light .diensten-svc__text-link:focus-visible,
.page--diensten .diensten-svc-soft .diensten-svc__text-link:hover,
.page--diensten .diensten-svc-soft .diensten-svc__text-link:focus-visible {
  color: var(--teal-dim);
}

.page--diensten .diensten-svc__text-link span {
  display: inline-block;
  transition: transform 0.22s var(--ease-out);
}

.page--diensten .diensten-svc__text-link:hover span,
.page--diensten .diensten-svc__text-link:focus-visible span {
  transform: translateX(3px);
}

.page--diensten .diensten-svc-teal__actions,
.page--diensten .diensten-svc-light__actions,
.page--diensten .diensten-svc-navy__actions,
.page--diensten .diensten-svc-soft__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.15rem;
}

.page--diensten .diensten-svc-teal__price-value,
.page--diensten .diensten-svc-light__price-value,
.page--diensten .diensten-svc-navy__price-value,
.page--diensten .diensten-svc-soft__price-value {
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
}

.page--diensten .diensten-svc-light__price-label,
.page--diensten .diensten-svc-navy__price-label,
.page--diensten .diensten-svc-soft__price-label {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.72;
}

/* Dark navy service block (Ads) */
.page--diensten .diensten-svc-navy {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  background: #0a1218;
  color: #f4f8f8;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.page--diensten .diensten-svc-navy__inner {
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

.page--diensten .diensten-svc-navy__grid {
  display: grid;
  gap: clamp(1.35rem, 3.5vw, 2.25rem);
  align-items: center;
}

.page--diensten .diensten-svc-navy__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}

.page--diensten .diensten-svc-navy__title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: #f4f8f8;
}

.page--diensten .diensten-svc-navy__lead {
  margin: 0 0 1rem;
  max-width: 36rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(244, 248, 248, 0.68);
}

.page--diensten .diensten-svc-navy__list {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.page--diensten .diensten-svc-navy__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(244, 248, 248, 0.92);
}

.page--diensten .diensten-svc-navy__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--teal);
}

.page--diensten .diensten-svc-navy__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.5rem;
}

.page--diensten .diensten-svc-navy__price-value {
  display: block;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--teal);
}

.page--diensten .diensten-svc-navy__media {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  aspect-ratio: 4 / 3;
}

.page--diensten .diensten-svc-navy__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page--diensten .diensten-svc-navy__media-badge {
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0a1218;
  background: var(--teal);
}

@media (min-width: 900px) {
  .page--diensten .diensten-svc-navy {
    padding-left: var(--sidebar-w);
    padding-right: 1.5rem;
    box-sizing: border-box;
  }

  .page--diensten .diensten-svc-navy__inner {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }

  .page--diensten .diensten-svc-navy__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 4vw, 3rem);
  }
}

/* Soft light-teal audit block */
.page--diensten .diensten-svc-soft {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  background: #f0fafa;
  color: #1a2329;
  border-top: 1px solid rgba(0, 140, 140, 0.1);
}

.page--diensten .diensten-svc-soft__inner {
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

.page--diensten .diensten-svc-soft__grid {
  display: grid;
  gap: clamp(1.35rem, 3.5vw, 2.25rem);
  align-items: center;
}

.page--diensten .diensten-svc-soft__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}

.page--diensten .diensten-svc-soft__title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: #1a2329;
}

.page--diensten .diensten-svc-soft__lead {
  margin: 0 0 1rem;
  max-width: 36rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(26, 35, 41, 0.62);
}

.page--diensten .diensten-svc-soft__list {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.page--diensten .diensten-svc-soft__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a2329;
}

.page--diensten .diensten-svc-soft__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--teal);
}

.page--diensten .diensten-svc-soft__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.5rem;
}

.page--diensten .diensten-svc-soft__price-value {
  display: block;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--teal);
}

.page--diensten .diensten-svc-soft__media {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 140, 140, 0.14);
  aspect-ratio: 4 / 3;
}

.page--diensten .diensten-svc-soft__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page--diensten .diensten-svc-soft__media-badge {
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--teal-dim);
}

@media (min-width: 900px) {
  .page--diensten .diensten-svc-soft {
    padding-left: var(--sidebar-w);
    padding-right: 1.5rem;
    box-sizing: border-box;
  }

  .page--diensten .diensten-svc-soft__inner {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }

  .page--diensten .diensten-svc-soft__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 4vw, 3rem);
  }
}

/* Ecosystem compact between website + CRM */
.page--diensten .ds-ecosystem--compact {
  padding: clamp(2rem, 4.5vw, 2.85rem) 0;
}

.page--diensten .ds-ecosystem--compact .ds-ecosystem__lead {
  margin-bottom: 1.25rem;
}

/* Wider contact on diensten */
.page--diensten .home-audit--diensten-wide .container.home-audit__inner {
  max-width: min(1400px, 100%);
}

@media (min-width: 900px) {
  .page--diensten .home-audit--diensten-wide .home-audit__inner {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.52fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    justify-content: space-between;
  }

  .page--diensten .home-audit--diensten-wide .home-audit__copy {
    max-width: none;
  }

  .page--diensten .home-audit--diensten-wide .home-audit__form-block {
    max-width: none;
  }

  .page--diensten .home-audit--diensten-wide .home-audit__title-left {
    max-width: 14ch;
  }
}

/* Mobile: stack hero cards simply */
@media (max-width: 899px) {
  .page--diensten #diensten-hero-cinema.diensten-hero {
    min-height: 0;
    max-height: none;
    height: auto;
  }

  .page--diensten #diensten-hero-cinema .diensten-hero__cards--4 {
    min-height: 0;
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }

  .page--diensten #diensten-hero-cinema .diensten-hero__card {
    position: relative;
    top: auto !important;
    right: auto !important;
    width: 100%;
    animation: none !important;
  }

  .page--diensten .diensten-svc-navy,
  .page--diensten .diensten-svc-soft {
    margin-left: 0;
    width: 100%;
  }

  .page--diensten .diensten-svc-navy__inner,
  .page--diensten .diensten-svc-soft__inner {
    padding-left: clamp(1rem, 5vw, 1.35rem);
    padding-right: clamp(1rem, 5vw, 1.35rem);
  }

  .page--diensten .diensten-svc-navy__grid,
  .page--diensten .diensten-svc-soft__grid {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
  }

  .page--diensten .diensten-svc-navy__media,
  .page--diensten .diensten-svc-soft__media {
    order: -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page--diensten .diensten-svc__text-link span,
  .page--diensten .diensten-svc__text-link:hover span {
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .page--diensten #diensten-hero-cinema .diensten-hero__card--4 {
    animation: diensten-hero-card-float 6.8s ease-in-out 1.1s infinite;
  }
}



/* ——— Diensten top4 premium polish (20261007c) ——— */
.page--diensten #diensten-hero-cinema .diensten-hero__title {
  font-size: clamp(2.15rem, 5vw, 3.25rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  max-width: min(22rem, 100%);
}

.page--diensten #diensten-hero-cinema .diensten-hero__title-line {
  display: block;
  white-space: nowrap;
}

.page--diensten #diensten-hero-cinema .diensten-hero__title-line--accent {
  color: #66ffff;
}

@media (max-width: 520px) {
  .page--diensten #diensten-hero-cinema .diensten-hero__title-line {
    white-space: normal;
  }
}

.page--diensten #diensten-hero-cinema .diensten-hero__lead {
  max-width: 34rem;
}

.page--diensten #diensten-hero-cinema .diensten-hero__trustline {
  list-style: none;
  margin: 1.45rem 0 0;
  padding: 0.95rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  max-width: 36rem;
}

.page--diensten #diensten-hero-cinema .diensten-hero__trustline li {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding-right: 0.75rem;
}

.page--diensten #diensten-hero-cinema .diensten-hero__trustline strong {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.page--diensten #diensten-hero-cinema .diensten-hero__trustline span {
  font-size: 0.8rem;
  line-height: 1.35;
  color: rgba(200, 214, 222, 0.78);
}

@media (min-width: 640px) {
  .page--diensten #diensten-hero-cinema .diensten-hero__trustline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .page--diensten #diensten-hero-cinema .diensten-hero__trustline li {
    padding: 0 0.95rem;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }

  .page--diensten #diensten-hero-cinema .diensten-hero__trustline li:first-child {
    padding-left: 0;
  }

  .page--diensten #diensten-hero-cinema .diensten-hero__trustline li:last-child {
    border-right: none;
    padding-right: 0;
  }
}

.page--diensten #diensten-hero-cinema .diensten-hero__visual {
  position: relative;
}

.page--diensten #diensten-hero-cinema .diensten-hero__stack {
  position: absolute;
  inset: 1.1rem auto 1.1rem 0.35rem;
  width: 2px;
  z-index: 0;
  pointer-events: none;
}

.page--diensten #diensten-hero-cinema .diensten-hero__stack-line {
  display: block;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 255, 255, 0.05), rgba(0, 220, 220, 0.55), rgba(0, 255, 255, 0.08));
  border-radius: 999px;
}

.page--diensten #diensten-hero-cinema .diensten-hero__cards--connected {
  min-height: 24.5rem;
  max-width: 22.5rem;
}

.page--diensten #diensten-hero-cinema .diensten-hero__cards--connected .diensten-hero__card {
  width: min(100%, 18rem);
  padding: 1.05rem 1.15rem 1.05rem 1.35rem;
  background: rgba(10, 16, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 18px 40px -22px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(0, 255, 255, 0.04) inset;
}

.page--diensten #diensten-hero-cinema .diensten-hero__card-dot {
  position: absolute;
  left: -0.15rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 184, 184, 0.18);
  transform: translate(-50%, -50%);
}

.page--diensten #diensten-hero-cinema .diensten-hero__card--1 { top: 0; right: 2.4rem; }
.page--diensten #diensten-hero-cinema .diensten-hero__card--2 { top: 5.15rem; right: 0.15rem; }
.page--diensten #diensten-hero-cinema .diensten-hero__card--3 { top: 10.3rem; right: 1.8rem; }
.page--diensten #diensten-hero-cinema .diensten-hero__card--4 { top: 15.45rem; right: 0.45rem; }

.page--diensten #diensten-hero-cinema .diensten-hero__scroll {
  display: inline-flex;
}

/* Editorial intro */
.page--diensten .diensten-quality--editorial {
  padding: clamp(3.5rem, 8vw, 5.5rem) 0;
  background: #fff;
}

.page--diensten .diensten-quality--editorial .diensten-quality__inner {
  padding-top: 0;
  padding-bottom: 0;
}

.page--diensten .diensten-quality--editorial .diensten-quality__grid--editorial {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

.page--diensten .diensten-quality--editorial .diensten-quality__visual {
  width: 100%;
}

.page--diensten .diensten-quality--editorial .diensten-quality__photo--main {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(26, 35, 41, 0.08);
  aspect-ratio: 4 / 5;
}

.page--diensten .diensten-quality--editorial .diensten-quality__photo--main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page--diensten .diensten-quality--editorial .diensten-quality__title {
  max-width: 18ch;
}

.page--diensten .diensten-quality--editorial .diensten-quality__lead {
  margin-bottom: 1.35rem;
}

.page--diensten .diensten-quality__rows {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  border-top: 1px solid rgba(26, 35, 41, 0.1);
}

.page--diensten .diensten-quality__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(26, 35, 41, 0.1);
}

.page--diensten .diensten-quality__row-num {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--teal);
  padding-top: 0.15rem;
}

.page--diensten .diensten-quality__row-title {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1a2329;
}

.page--diensten .diensten-quality__row-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(26, 35, 41, 0.62);
}

.page--diensten .diensten-quality__inline-caps {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(26, 35, 41, 0.55);
}

.page--diensten .diensten-quality__inline-caps span {
  margin: 0 0.45rem;
  color: var(--teal);
  font-weight: 700;
}

@media (min-width: 900px) {
  .page--diensten .diensten-quality--editorial .diensten-quality__grid--editorial {
    grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr);
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}

/* Website feature — dark navy (not teal wash) */
.page--diensten .diensten-svc-web {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  padding: clamp(3.5rem, 8vw, 5.25rem) 0;
  background: #0a1218;
  color: #f4f8f8;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.page--diensten .diensten-svc-web__inner {
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

.page--diensten .diensten-svc-web__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  align-items: center;
}

.page--diensten .diensten-svc-web__media {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  aspect-ratio: 4 / 3;
}

.page--diensten .diensten-svc-web__glow {
  position: absolute;
  inset: -18% -12% auto auto;
  width: 55%;
  height: 55%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 200, 200, 0.28) 0%, transparent 70%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}

.page--diensten .diensten-svc-web__media picture,
.page--diensten .diensten-svc-web__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page--diensten .diensten-svc-web__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}

.page--diensten .diensten-svc-web__title {
  margin: 0 0 0.75rem;
  max-width: 14ch;
  font-size: clamp(1.55rem, 3.2vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #f4f8f8;
}

.page--diensten .diensten-svc-web__lead {
  margin: 0 0 1.25rem;
  max-width: 36rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(244, 248, 248, 0.66);
}

.page--diensten .diensten-svc-web__benefits {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem 1.25rem;
}

.page--diensten .diensten-svc-web__benefits li {
  position: relative;
  padding-left: 1.05rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(244, 248, 248, 0.92);
}

.page--diensten .diensten-svc-web__benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--teal);
}

.page--diensten .diensten-svc-web__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}

.page--diensten .diensten-svc-web__price-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(244, 248, 248, 0.55);
}

.page--diensten .diensten-svc-web__price-value {
  display: block;
  margin: 0.15rem 0 0.4rem;
  font-size: clamp(1.65rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--teal);
}

.page--diensten .diensten-svc-web__price-note {
  display: block;
  max-width: 28rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(244, 248, 248, 0.48);
}

.page--diensten .diensten-svc-web__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
}

@media (min-width: 640px) {
  .page--diensten .diensten-svc-web__benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page--diensten .diensten-svc-web {
    padding-left: var(--sidebar-w);
    padding-right: 1.5rem;
    box-sizing: border-box;
  }

  .page--diensten .diensten-svc-web__inner {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }

  .page--diensten .diensten-svc-web__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(2.5rem, 5vw, 4rem);
  }

  .page--diensten .diensten-svc-web__media {
    aspect-ratio: 5 / 4;
  }
}

/* Ecosystem system flow */
.page--diensten .ds-ecosystem--system {
  padding: clamp(3.25rem, 7vw, 4.75rem) 0;
  background: #071016;
  border-top: 1px solid rgba(0, 184, 184, 0.16);
  color: #f4f8f8;
}

.page--diensten .ds-ecosystem--system .ds-ecosystem__head--center {
  max-width: min(42rem, 100%);
  margin: 0 auto clamp(1.75rem, 4vw, 2.35rem);
  text-align: center;
}

.page--diensten .ds-ecosystem--system .ds-ecosystem__title {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.page--diensten .ds-ecosystem--system .ds-ecosystem__lead {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

.page--diensten .ds-system {
  list-style: none;
  margin: 0 auto 1.35rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: min(68rem, 100%);
  position: relative;
}

.page--diensten .ds-system__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num title"
    "node label";
  column-gap: 0.75rem;
  row-gap: 0.2rem;
  padding: 0.95rem 0 0.95rem 0.15rem;
  border-left: 2px solid rgba(0, 184, 184, 0.35);
  margin-left: 0.55rem;
  padding-left: 1.15rem;
}

.page--diensten .ds-system__num {
  grid-area: num;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--teal);
}

.page--diensten .ds-system__node {
  grid-area: node;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.2rem;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(0, 184, 184, 0.14);
  justify-self: start;
}

.page--diensten .ds-system__title {
  grid-area: title;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}

.page--diensten .ds-system__label {
  grid-area: label;
  font-size: 0.78rem;
  color: rgba(244, 248, 248, 0.55);
}

.page--diensten .ds-ecosystem__closing {
  margin: 0 auto;
  max-width: 36rem;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(244, 248, 248, 0.62);
}

@media (min-width: 960px) {
  .page--diensten .ds-system {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    padding-top: 0.35rem;
  }

  .page--diensten .ds-system::before {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    top: 2.15rem;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 184, 184, 0.15), rgba(0, 220, 220, 0.65), rgba(0, 184, 184, 0.15));
    z-index: 0;
  }

  .page--diensten .ds-system__step {
    flex: 1 1 0;
    margin: 0;
    padding: 0 0.45rem;
    border-left: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    z-index: 1;
  }

  .page--diensten .ds-system__num {
    order: 1;
  }

  .page--diensten .ds-system__node {
    order: 2;
    margin: 0.15rem 0 0.25rem;
    justify-self: center;
  }

  .page--diensten .ds-system__title {
    order: 3;
  }

  .page--diensten .ds-system__label {
    order: 4;
  }
}

@media (max-width: 899px) {
  .page--diensten #diensten-hero-cinema .diensten-hero__stack {
    display: none;
  }

  .page--diensten #diensten-hero-cinema .diensten-hero__cards--connected {
    min-height: 0;
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
  }

  .page--diensten #diensten-hero-cinema .diensten-hero__cards--connected .diensten-hero__card {
    position: relative;
    top: auto !important;
    right: auto !important;
    width: 100%;
    padding-left: 1.05rem;
  }

  .page--diensten #diensten-hero-cinema .diensten-hero__card-dot {
    display: none;
  }

  .page--diensten .diensten-svc-web {
    margin-left: 0;
    width: 100%;
  }

  .page--diensten .diensten-svc-web__inner {
    padding-left: clamp(1rem, 5vw, 1.35rem);
    padding-right: clamp(1rem, 5vw, 1.35rem);
  }
}


/* ——— Home: FAQ (teal, compact) ——— */
.home-faq {
  position: relative;
  z-index: 1;
  padding: clamp(2rem, 4.5vw, 2.75rem) 0;
  color: var(--text-inverse);
  overflow: hidden;
}

.home-faq__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(152deg, #005f5f 0%, var(--teal-dim) 32%, var(--teal) 58%, #00a8a8 100%);
}

.home-faq__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 90% 15%, rgba(255, 255, 255, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 10% 80%, rgba(0, 255, 255, 0.14) 0%, transparent 50%);
}

.home-faq__inner {
  position: relative;
  z-index: 1;
  max-width: min(40rem, 100%);
  margin: 0 auto;
}

.home-faq__head {
  margin-bottom: clamp(1rem, 2.5vw, 1.35rem);
  text-align: center;
}

.home-faq__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.home-faq__title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fff;
}

.home-faq__lead {
  margin: 0;
  font-size: clamp(0.82rem, 1.2vw, 0.9rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.home-faq__kw {
  color: #fff;
  font-weight: 700;
}

.home-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.home-faq__item {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.home-faq__item[open] {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

.home-faq__q {
  padding: 0.7rem 0.85rem;
  font-size: clamp(0.82rem, 1.15vw, 0.9rem);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  cursor: pointer;
  list-style: none;
}

.home-faq__q::-webkit-details-marker {
  display: none;
}

.home-faq__q::after {
  content: "+";
  float: right;
  font-size: 1.1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  transition: transform 0.2s ease;
}

.home-faq__item[open] .home-faq__q::after {
  content: "−";
}

.home-faq__a {
  margin: 0;
  padding: 0 0.85rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

/* ——— Home: final CTA (wit, compact) ——— */
.home-close-cta {
  position: relative;
  z-index: 1;
  padding: clamp(2rem, 4.5vw, 2.75rem) 0;
  background: #fff;
  border-top: 1px solid rgba(0, 140, 140, 0.08);
}

.home-close-cta__inner {
  max-width: min(36rem, 100%);
  margin: 0 auto;
  text-align: center;
}

.home-close-cta__title {
  margin: 0 0 0.55rem;
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.18;
  color: var(--text-primary);
}

.home-close-cta__text {
  margin: 0 0 1rem;
  font-size: clamp(0.84rem, 1.2vw, 0.92rem);
  line-height: 1.52;
  color: rgba(26, 35, 41, 0.62);
}

.home-close-cta__kw {
  color: var(--teal);
  font-weight: 700;
}

.home-close-cta__btn.btn--header-cta {
  margin: 0 auto;
}

/* ——— Services (legacy / other pages) ——— */
.services {
  position: relative;
  z-index: 1;
  padding: clamp(4rem, 12vw, 7rem) 0;
  margin-top: 0;
  background-color: var(--bg-deep);
  overflow: hidden;
}

.services__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .services__more {
    align-self: center;
    justify-content: center;
  }
}

.services .section-head {
  margin-left: auto;
  margin-right: auto;
  max-width: min(58rem, 100%);
  text-align: center;
}

.section-lead--services {
  font-size: clamp(0.9rem, 1.65vw, 0.98rem);
  line-height: 1.58;
}

.services .section-head .section-title {
  font-size: clamp(1.62rem, 3.4vw, 2.4rem);
}

.services__grid > li:not(.services__more) {
  display: flex;
  min-height: 0;
  min-width: 0;
}

.services a.service-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.services a.service-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 22px;
}

.services a.service-card h3,
.services a.service-card p {
  text-decoration: none;
}

/* Diensten: zelfde frosted glass als werkwijze + hover (gradient, icon-gloed, cta-dot) */
.services .service-card {
  position: relative;
  isolation: isolate;
  padding: 1.35rem 1.35rem 2.55rem;
  padding-right: 1.5rem;
  text-align: left;
  border-radius: 22px;
  background: rgba(12, 16, 20, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2) inset,
    0 8px 32px -12px rgba(0, 0, 0, 0.45);
  transition:
    transform 0.38s var(--ease-out),
    border-color 0.35s ease,
    box-shadow 0.38s ease,
    background 0.35s ease;
}

.services .service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(
    145deg,
    rgba(0, 255, 255, 0.14) 0%,
    rgba(120, 60, 180, 0.12) 42%,
    rgba(255, 255, 255, 0.04) 100%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

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

.services .service-card__hover-cta {
  z-index: 2;
}

.services .service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 255, 255, 0.32);
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.12) inset,
    0 28px 56px -26px rgba(0, 0, 0, 0.6),
    0 0 56px -18px rgba(0, 255, 255, 0.22),
    0 0 80px -40px rgba(124, 58, 237, 0.15);
}

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

.services .service-card__icon-wrap {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.95rem;
  color: rgba(255, 255, 255, 0.96);
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

.services .service-card:hover .service-card__icon-wrap {
  transform: scale(1.06);
  filter: brightness(1.08);
}

.services .service-card:hover .service-card__icon-wrap--code {
  box-shadow:
    0 8px 28px -4px rgba(29, 78, 216, 0.65),
    0 0 36px -6px rgba(0, 255, 255, 0.45);
}

.services .service-card:hover .service-card__icon-wrap--seo {
  box-shadow:
    0 8px 28px -4px rgba(15, 118, 110, 0.6),
    0 0 36px -6px rgba(0, 255, 255, 0.5);
}

.services .service-card:hover .service-card__icon-wrap--ads {
  box-shadow:
    0 8px 28px -4px rgba(109, 40, 217, 0.55),
    0 0 36px -6px rgba(0, 255, 255, 0.4);
}

.services .service-card:hover .service-card__icon-wrap--landing {
  box-shadow:
    0 8px 28px -4px rgba(190, 18, 60, 0.5),
    0 0 36px -6px rgba(124, 58, 237, 0.45);
}

.services .service-card:hover .service-card__icon-wrap--brand {
  box-shadow:
    0 8px 28px -4px rgba(194, 65, 12, 0.5),
    0 0 36px -6px rgba(0, 255, 255, 0.35);
}

.services .service-card__hover-cta {
  position: absolute;
  bottom: 1.05rem;
  right: 1.05rem;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #2ee6e6 0%, #00b4b4 45%, #009090 100%);
  box-shadow:
    0 4px 18px rgba(0, 255, 255, 0.45),
    0 0 24px -4px rgba(0, 255, 255, 0.35);
  opacity: 0;
  transform: scale(0.82) translate(6px, 4px);
  transition:
    opacity 0.32s ease,
    transform 0.38s var(--ease-out);
  pointer-events: none;
}

.services .service-card__hover-cta svg {
  display: block;
  width: 0.78rem;
  height: 0.78rem;
}

.services .service-card:hover .service-card__hover-cta {
  opacity: 1;
  transform: scale(1) translate(0, 0);
}

.services .service-card__icon-wrap--code {
  background: linear-gradient(135deg, #1d4ed8 0%, #0d9488 100%);
  box-shadow:
    0 6px 20px -6px rgba(29, 78, 216, 0.55),
    0 0 24px -10px rgba(13, 148, 136, 0.35);
}

.services .service-card__icon-wrap--seo {
  background: linear-gradient(135deg, #0f766e 0%, #15803d 100%);
  box-shadow:
    0 6px 20px -6px rgba(15, 118, 110, 0.5),
    0 0 24px -10px rgba(21, 128, 61, 0.35);
}

.services .service-card__icon-wrap--ads {
  background: linear-gradient(135deg, #6d28d9 0%, #2563eb 100%);
  box-shadow:
    0 6px 20px -6px rgba(109, 40, 217, 0.5),
    0 0 24px -10px rgba(37, 99, 235, 0.35);
}

.services .service-card__icon-wrap--landing {
  background: linear-gradient(135deg, #be123c 0%, #7c3aed 100%);
  box-shadow:
    0 6px 20px -6px rgba(190, 18, 60, 0.45),
    0 0 24px -10px rgba(124, 58, 237, 0.35);
}

.services .service-card__icon-wrap--brand {
  background: linear-gradient(135deg, #c2410c 0%, #ca8a04 100%);
  box-shadow:
    0 6px 20px -6px rgba(194, 65, 12, 0.45),
    0 0 24px -10px rgba(202, 138, 4, 0.3);
}

.services .service-card__glyph {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

.services .service-card h3 {
  margin: 0 0 0.45rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.28;
  transition: color 0.32s ease;
}

.services .service-card:hover h3 {
  color: var(--teal);
  text-shadow: none;
}

.services .service-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.services .service-card p strong {
  color: var(--text-strong);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .services .service-card,
  .services .service-card::before,
  .services .service-card h3,
  .services .service-card__icon-wrap,
  .services .service-card__hover-cta {
    transition-duration: 0.01ms;
  }

  .services .service-card:hover {
    transform: none;
  }

  .services .service-card:hover .service-card__hover-cta {
    transform: none;
  }

  .services .service-card:hover .service-card__icon-wrap {
    transform: none;
  }
}

/* Zesde element: geen kaart — link gecentreerd in de cel */
.services__more {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  min-height: 0;
}

.services__more-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  margin: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-dim);
  text-decoration: none;
  cursor: pointer;
  transition:
    color 0.32s var(--ease-out),
    background 0.32s ease,
    border-color 0.32s ease,
    box-shadow 0.38s ease,
    gap 0.32s var(--ease-out),
    transform 0.25s var(--ease-out);
}

.services__more-link:hover {
  color: var(--teal);
  background: rgba(0, 168, 168, 0.08);
  border-color: rgba(0, 168, 168, 0.22);
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.06) inset,
    0 10px 32px -14px rgba(0, 255, 255, 0.35);
  gap: 0.62rem;
}

.services__more-link:active {
  transform: scale(0.98);
}

.services__more-link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 999px;
}

.services__more-arrow {
  flex-shrink: 0;
  opacity: 0.92;
  transition:
    transform 0.38s var(--ease-out),
    opacity 0.3s ease,
    filter 0.35s ease;
}

.services__more-link:hover .services__more-arrow {
  transform: translateX(6px);
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.45));
}

@media (prefers-reduced-motion: reduce) {
  .services__more-link,
  .services__more-arrow {
    transition-duration: 0.01ms;
  }

  .services__more-link:hover {
    gap: 0.5rem;
  }

  .services__more-link:active {
    transform: none;
  }

  .services__more-link:hover .services__more-arrow {
    transform: translateX(4px);
    filter: none;
  }
}

@media (max-width: 999px) {
  .services__more {
    padding-top: 0.5rem;
    justify-content: center;
  }
}

/* ——— Why (twee kolommen, kaarten als referentie + teal hover-gloed) ——— */
.why {
  position: relative;
  padding: clamp(4rem, 10vw, 6rem) 0;
  overflow: hidden;
  background: var(--bg-deep);
}

.why__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .why__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.75rem, 5vw, 4.25rem);
    align-items: center;
  }
}

.why__cta {
  margin: clamp(1.25rem, 3vw, 1.65rem) 0 0;
}

.why__copy {
  min-width: 0;
}

.why__panel {
  position: relative;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.why__panel-inner {
  position: relative;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.why__panel-inner .eyebrow {
  margin: 0 0 1rem;
}

.why__title {
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08em;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.why__title-line {
  display: block;
  color: var(--text-primary);
}

.why__title-performance {
  background: linear-gradient(120deg, #0a6b6b 0%, var(--cyan) 42%, var(--teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.32));
}

.why__text {
  color: var(--muted);
  font-size: clamp(0.92rem, 1.75vw, 1rem);
  line-height: 1.6;
  margin: 0 0 1.45rem;
  max-width: 36rem;
}

.why__text strong {
  color: var(--text-strong);
  font-weight: 600;
}

.why__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 2.75rem);
}

.why__stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: min(100%, 11rem);
}

.why__stat-value {
  font-size: clamp(2.2rem, 4.8vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-primary);
}

.why__stat-label {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
  max-width: 15rem;
}

.why__features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 520px) {
  .why__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

.why__feature {
  margin: 0;
  padding: 1.45rem 1.35rem 1.5rem;
  text-align: left;
  border-radius: 22px;
  background: rgba(12, 16, 20, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2) inset,
    0 8px 32px -12px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition:
    transform 0.32s var(--ease-out),
    border-color 0.28s ease,
    box-shadow 0.32s ease,
    background 0.35s ease;
}

.why__feature:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 255, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.22),
    0 0 36px -8px rgba(0, 255, 255, 0.38),
    0 22px 48px -28px rgba(0, 0, 0, 0.65);
}

.why__feature:focus-within {
  border-color: rgba(0, 255, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.18),
    0 0 32px -10px rgba(0, 255, 255, 0.28),
    0 18px 44px -28px rgba(0, 0, 0, 0.6);
}

.why__feature-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.05rem;
  color: #0a0c0e;
  background: linear-gradient(145deg, #5ffcf0 0%, var(--cyan) 28%, var(--teal) 62%, var(--teal-dim) 100%);
  border: none;
  box-shadow:
    0 6px 22px -4px rgba(0, 255, 255, 0.55),
    0 0 28px -6px rgba(0, 255, 255, 0.35);
}

.why__feature-icon svg {
  width: 1.28rem;
  height: 1.28rem;
}

.why__feature-title {
  margin: 0 0 0.45rem;
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.22;
}

.why__feature-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.52;
  color: var(--muted);
}

.why__feature-text strong {
  color: var(--text-strong);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .why__title-performance {
    filter: none;
  }

  .why__feature {
    transition: none;
  }

  .why__feature:hover {
    transform: none;
  }
}

/* ——— Portfolio (case-cards, 3-koloms) ——— */
.portfolio {
  position: relative;
  z-index: 1;
  padding: clamp(4rem, 10vw, 6rem) 0;
  background-color: var(--bg-deep);
  overflow: hidden;
}

.portfolio__head {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: min(40rem, 100%);
}

.portfolio__head .section-title {
  margin-left: auto;
  margin-right: auto;
}

.portfolio__lead {
  margin: 0.35rem 0 0;
  font-size: clamp(0.95rem, 1.85vw, 1.05rem);
  line-height: 1.58;
  color: var(--muted);
}

.portfolio__grid {
  display: grid;
  gap: 1.35rem;
  grid-template-columns: 1fr;
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}

.portfolio__actions {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

@media (min-width: 900px) {
  .portfolio__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }

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

.portfolio__card {
  margin: 0;
  padding: 0;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(12, 16, 20, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2) inset,
    0 8px 32px -12px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition:
    transform 0.35s var(--ease-out),
    border-color 0.3s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

.portfolio__card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 255, 255, 0.28);
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.06) inset,
    0 0 40px -14px rgba(0, 255, 255, 0.22),
    0 24px 56px -32px rgba(0, 0, 0, 0.65);
}

.portfolio__card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}

.portfolio__card-link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.portfolio__visual {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #121418;
}

.portfolio__visual--lux {
  background: linear-gradient(145deg, #2d1f3d 0%, #5b3a6e 42%, #1a1424 100%);
}

.portfolio__visual--saas {
  background: linear-gradient(145deg, #0f172a 0%, #1e3a5f 50%, #0c1929 100%);
}

.portfolio__visual--brand {
  background: linear-gradient(160deg, #18181b 0%, #3f3f46 45%, #0f1418 100%);
}

.portfolio__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 0.5s var(--ease-out);
}

.portfolio__card:hover .portfolio__thumb {
  transform: scale(1.04);
}

.portfolio__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.35) 100%);
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.portfolio__card:hover .portfolio__visual::after {
  opacity: 0.65;
}

.portfolio__body {
  padding: 1.35rem 1.4rem 1.45rem;
  text-align: left;
}

.portfolio__cat {
  margin: 0 0 0.45rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.portfolio__title {
  margin: 0 0 0.4rem;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.25;
}

.portfolio__excerpt {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.52;
  color: var(--muted);
}

.portfolio__excerpt strong {
  color: var(--text-strong);
  font-weight: 600;
}

.portfolio__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--teal);
  transition: color 0.25s ease;
}

.portfolio__cta-arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}

.portfolio__card:hover .portfolio__cta {
  color: var(--teal);
}

.portfolio__card:hover .portfolio__cta-arrow {
  transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
  .portfolio__card,
  .portfolio__card:hover {
    transform: none;
  }

  .portfolio__thumb,
  .portfolio__card:hover .portfolio__thumb {
    transform: none;
  }

  .portfolio__card:hover .portfolio__cta-arrow {
    transform: none;
  }
}

/* ——— Process ——— */
.process {
  position: relative;
  padding: clamp(4rem, 10vw, 6rem) 0;
}

.process .container {
  position: relative;
  z-index: 1;
}

.process__actions {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* ——— Process (werkwijze): 4 kolommen, volle containerbreedte ——— */
.process-timeline__head.section-head {
  max-width: none;
}

.process-timeline__head {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: none;
}

.process-timeline__head .section-title {
  margin-left: auto;
  margin-right: auto;
  max-width: none;
  font-size: clamp(1.95rem, 4.5vw, 3rem);
  line-height: 1.12;
}

.process-timeline__lead {
  margin: 0.5rem auto 0;
  max-width: min(56rem, 100%);
  font-size: clamp(0.95rem, 1.85vw, 1.05rem);
  line-height: 1.58;
  color: rgba(175, 186, 194, 0.95);
}

.process-timeline__lead strong {
  color: rgba(240, 246, 248, 0.95);
  font-weight: 600;
}

.process-timeline {
  list-style: none;
  margin: clamp(2.25rem, 5vw, 3.25rem) 0 0;
  padding: 0;
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
}

@media (min-width: 640px) {
  .process-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }
}

@media (min-width: 1000px) {
  .process-timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem 1.25rem;
  }
}

.process-timeline__row {
  display: flex;
  min-width: 0;
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}

.process-timeline__row.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.process-timeline__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100%;
  padding: 1.35rem 1.25rem 1.45rem;
  border-radius: 18px;
  /* Experiment: frosted glass — transparant + blur */
  background: rgba(12, 16, 20, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2) inset,
    0 8px 32px -12px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .process-timeline__card,
  .portfolio__card,
  .why__feature,
  .services .service-card,
  .cta-form--glass {
    background: rgba(16, 18, 22, 0.9);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.process-timeline__marker {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  background: rgba(14, 16, 20, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset;
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.process-timeline__num {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(200, 208, 214, 0.65);
  transition: color 0.35s ease;
}

.process-timeline__title {
  margin: 0 0 0.5rem;
  font-size: clamp(0.98rem, 1.35vw, 1.06rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--text-primary);
  transition: color 0.35s ease;
}

.process-timeline__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.58;
  color: var(--muted);
}

.process-timeline__text strong {
  color: var(--text-strong);
  font-weight: 600;
}

.process-timeline__row:hover .process-timeline__marker,
.process-timeline__row:focus-within .process-timeline__marker {
  border-color: rgba(0, 255, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.12) inset,
    0 0 32px -4px rgba(0, 255, 255, 0.38);
}

.process-timeline__row:hover .process-timeline__num,
.process-timeline__row:focus-within .process-timeline__num {
  color: var(--teal);
}

.process-timeline__row:hover .process-timeline__card,
.process-timeline__row:focus-within .process-timeline__card {
  border-color: rgba(0, 255, 255, 0.28);
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.06) inset,
    0 0 40px -14px rgba(0, 255, 255, 0.22);
}

.process-timeline__row:hover .process-timeline__title,
.process-timeline__row:focus-within .process-timeline__title {
  color: var(--teal);
}

@media (prefers-reduced-motion: reduce) {
  .process-timeline__row {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .process-timeline__marker,
  .process-timeline__num,
  .process-timeline__card,
  .process-timeline__title {
    transition-duration: 0.01ms;
  }
}

/* Ankers: vaste topbar bedekt titel niet bij hash-navigatie */
#contact,
#contact-form,
#contact-aanvraag,
#diensten-aanvraag,
#waarom-valtex-aanvraag,
#werk-aanvraag,
#waarom-hero-cinema,
#waarom-hero,
#werk-hero-cinema,
#website-hero,
#website-aanvraag,
#reclame-hero-cinema,
#reclame-aanvraag,
#seo-hero-cinema,
#crm-hero-cinema,
#crm-aanvraag,
#seo-aanvraag {
  scroll-margin-top: calc(var(--topbar-h) + 0.75rem);
}

/* Hero-blokken (alle pagina's behalve home): afgeronde onderhoeken, geen lijn eronder */
.diensten-hero-simple,
.werk-hero-split,
.werk-hero-showcase,
.contact-hero,
.wlm-hero,
.case-story-hero {
  border-bottom-left-radius: clamp(18px, 2.4vw, 28px);
  border-bottom-right-radius: clamp(18px, 2.4vw, 28px);
  border-bottom: none !important;
  overflow: visible;
}

/* ——— CTA ——— */
.cta-section {
  position: relative;
  padding: clamp(4rem, 12vw, 7rem) 0;
  overflow: hidden;
}

.cta-section__glow {
  position: absolute;
  width: min(78vw, 560px);
  height: min(78vw, 560px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 255, 255, 0.12) 0%, transparent 52%);
  pointer-events: none;
}

.cta-section__inner {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .cta-section__inner {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }

  .cta-section__inner.cta-section__inner--quote {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
  }
}

/* Home (alleen index): quote-layout — voorkom dat formulier buiten container schuift op smalle schermen */
.cta-section__inner.cta-section__inner--quote {
  min-width: 0;
}

.cta-section__inner--quote > .cta-form {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.cta-section__inner--quote .cta-form__field,
.cta-section__inner--quote .cta-form__row--2 {
  min-width: 0;
}

.cta-section__inner--quote .cta-form input,
.cta-section__inner--quote .cta-form select,
.cta-section__inner--quote .cta-form textarea {
  max-width: 100%;
}

.cta-section__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.cta-section__title--page {
  font-size: clamp(1.85rem, 3.8vw, 2.65rem);
}

.cta-section__copy p {
  color: var(--muted);
  margin: 0;
  font-size: 1.05rem;
}

.cta-section__lead {
  margin: 0 0 1.5rem;
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.62;
  color: var(--muted);
  max-width: 36rem;
}

.cta-section__copy--quote {
  max-width: min(46rem, 100%);
}

.cta-section__copy--quote .cta-section__title {
  margin-bottom: 1.15rem;
}

.cta-section__page-label {
  margin-bottom: 0.35rem;
}

.cta-section__body {
  margin: 0 0 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cta-section__body p {
  margin: 0;
  font-size: clamp(0.9rem, 1.45vw, 0.98rem);
  line-height: 1.68;
  color: var(--muted);
}

.cta-section__body strong {
  color: var(--text-strong);
  font-weight: 600;
}

.cta-section__body a:not(.btn--phone-cta) {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.cta-section__body a:not(.btn--phone-cta):hover,
.cta-section__body a:not(.btn--phone-cta):focus-visible {
  color: var(--teal);
}

.cta-section__phone-cta-wrap {
  margin: 0.35rem 0 0;
}

.btn--phone-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.52rem 1.05rem;
  font-family: inherit;
  font-size: clamp(0.78rem, 1.35vw, 0.86rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  color: rgba(232, 252, 252, 0.96);
  background:
    linear-gradient(180deg, rgba(0, 255, 255, 0.07) 0%, rgba(0, 255, 255, 0.04) 100%),
    rgba(8, 14, 18, 0.36);
  border: 1px solid rgba(0, 255, 255, 0.42);
  border-radius: var(--radius-btn);
  box-shadow: 0 0 16px rgba(0, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.3s ease,
    transform 0.25s ease;
}

.btn--phone-cta__icon {
  flex-shrink: 0;
  color: rgba(130, 255, 255, 0.96);
  transition: color 0.25s ease, filter 0.3s ease;
}

.btn--phone-cta:hover,
.btn--phone-cta:focus-visible {
  color: rgba(255, 255, 255, 0.99);
  background:
    linear-gradient(180deg, rgba(0, 255, 255, 0.1) 0%, rgba(0, 255, 255, 0.05) 100%),
    rgba(6, 12, 16, 0.48);
  border-color: rgba(0, 255, 255, 0.62);
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.14),
    0 0 28px rgba(0, 255, 255, 0.24);
  transform: translateY(-1px);
}

.btn--phone-cta:hover .btn--phone-cta__icon,
.btn--phone-cta:focus-visible .btn--phone-cta__icon {
  color: var(--teal);
  filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.5));
}

@media (max-width: 899px) {
  .cta-section__phone-cta-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .btn--phone-cta {
    width: 100%;
    max-width: min(22rem, 100%);
  }
}

.cta-section__checklist {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem 1.25rem;
}

@media (min-width: 520px) {
  .cta-section__checklist:not(.cta-section__checklist--minimal) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cta-section__checklist--minimal {
  margin: 0 0 0;
  gap: 0.72rem;
}

.cta-section__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-strong);
}

.cta-section__checklist--minimal li {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
  gap: 0.5rem;
}

.cta-section__check {
  flex-shrink: 0;
  display: flex;
  color: #34d399;
  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.35));
}

.cta-section__checklist--minimal .cta-section__check {
  margin-top: 0.12rem;
  color: rgba(0, 255, 255, 0.55);
  filter: none;
  opacity: 0.9;
}

.cta-section__alt-contact {
  margin: 1.5rem 0 0;
  font-size: 0.8125rem;
  color: rgba(244, 248, 248, 0.48);
}

.cta-section__alt-contact a {
  color: rgba(102, 255, 255, 0.85);
  text-decoration: none;
}

.cta-section__alt-contact a:hover {
  text-decoration: underline;
  color: var(--teal);
}

.page-actions--contact {
  margin-top: 0.5rem;
  padding-bottom: 2rem;
}

.cta-form {
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.cta-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cta-form__field--full {
  grid-column: 1 / -1;
}

.cta-form__field span {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
}

.cta-form input,
.cta-form textarea,
.cta-form select {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border-glass);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cta-form input::placeholder,
.cta-form textarea::placeholder {
  color: rgba(244, 248, 248, 0.3);
}

.cta-form input:focus,
.cta-form textarea:focus,
.cta-form select:focus {
  border-color: rgba(0, 255, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.12);
}

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

.cta-form__submit.btn--header-cta {
  margin-left: 0;
  margin-right: 0;
}

.section-cta-link.btn--header-cta {
  margin-left: 0;
  margin-right: 0;
}

.cta-form__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Offerte-formulier: frosted glass (zelfde taal als cards) */
.cta-form--glass {
  position: relative;
  isolation: isolate;
  padding: clamp(1.35rem, 3.2vw, 1.85rem) clamp(1.25rem, 3vw, 1.95rem);
  border-radius: 22px;
  background: rgba(12, 16, 20, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2) inset,
    0 8px 32px -12px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  gap: 1.05rem 1.15rem;
  transition: background 0.35s ease;
}

/* Alle glass-offerteformulieren: gradient + lichte neon-gloed langs buitenrand (mask) */
.cta-form.cta-form--glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  padding: 2px;
  box-sizing: border-box;
  background: linear-gradient(
    125deg,
    rgba(0, 255, 255, 0.55) 0%,
    rgba(102, 255, 255, 0.2) 32%,
    rgba(0, 204, 204, 0.42) 62%,
    rgba(0, 255, 255, 0.48) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.28));
}

.cta-form.cta-form--glass > * {
  position: relative;
  z-index: 2;
}

.cta-form__row--2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.05rem 1.15rem;
}

.cta-form--glass .cta-form__field span {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(200, 210, 218, 0.88);
}

.cta-form__req {
  color: #f87171;
  text-decoration: none;
  font-weight: 700;
}

.cta-form__optional {
  font-weight: 500;
  color: rgba(160, 174, 186, 0.75);
}

.cta-form--glass input,
.cta-form--glass textarea,
.cta-form--glass select {
  font-size: 0.9375rem;
  padding: 0.78rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #ffffff;
  color: var(--text-primary);
  outline: none;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
}

.cta-form--glass textarea {
  resize: vertical;
  min-height: 6rem;
}

.cta-form--glass input::placeholder,
.cta-form--glass textarea::placeholder {
  color: rgba(26, 35, 41, 0.38);
}

.cta-form--glass select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366ffff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.5rem;
}

.cta-form--glass select option {
  color: #111;
  background: #fff;
}

.cta-form--glass input:focus,
.cta-form--glass textarea:focus,
.cta-form--glass select:focus {
  border-color: rgba(0, 168, 168, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.14);
  background: #ffffff;
}

.cta-form__note--glass {
  text-align: center;
  color: rgba(160, 174, 186, 0.82);
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

.cta-form__note--glass a {
  color: rgba(102, 255, 255, 0.9);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cta-form__note--glass a:hover {
  color: var(--teal);
}

.cta-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.cta-form__flash {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.45;
  text-align: center;
}

.cta-form__flash--success {
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(74, 222, 128, 0.32);
  color: #bbf7d0;
}

.cta-form__flash--error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.32);
  color: #fecaca;
}

@media (max-width: 599px) {
  .cta-form {
    grid-template-columns: 1fr;
  }

  .cta-form__row--2 {
    grid-template-columns: 1fr;
  }
}

/* ——— Footer ——— */
.footer {
  margin-left: var(--sidebar-w);
  transition: margin-left 0.35s var(--ease-out);
  padding: clamp(1.75rem, 4vw, 2.25rem) 0 1rem;
  background: #050708;
  border-top: 1px solid rgba(0, 184, 184, 0.14);
  color: rgba(244, 248, 248, 0.88);
}

.footer__inner {
  text-align: left;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
  padding-bottom: 1.2rem;
}

@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 1.25rem 1.75rem;
    align-items: start;
  }
}

@media (min-width: 900px) {
  .footer__grid {
    grid-template-columns: 1.1fr 1fr 1fr 0.95fr 0.9fr;
  }
}

.footer__col--brand {
  max-width: 280px;
}

.footer__logo {
  display: inline-flex;
  justify-content: flex-start;
  margin-bottom: 0.45rem;
  line-height: 0;
}

.footer__tagline {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(244, 248, 248, 0.55);
}

.footer__heading {
  margin: 0 0 0.55rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 248, 248, 0.38);
}

.footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
}

.footer__nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(244, 248, 248, 0.72);
  transition: color 0.2s ease;
}

.footer__nav a:hover {
  color: var(--teal);
}

.footer__col--seo-locations .footer__heading {
  color: var(--teal);
}

.footer__nav--locations a {
  position: relative;
  padding-right: 0.2rem;
}

.footer__nav--locations a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.06rem;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(95, 226, 217, 0.9), rgba(95, 226, 217, 0));
  transition: width 0.26s ease;
}

.footer__nav--locations a:hover::after {
  width: 100%;
}

.footer__contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.footer__contact-list a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--teal);
  transition: opacity 0.2s ease;
}

.footer__contact-list a:hover {
  opacity: 0.88;
}

.footer__contact-address,
.footer__contact-vat {
  font-size: 0.86rem;
  font-weight: 500;
  color: rgba(244, 248, 248, 0.72);
  line-height: 1.45;
}

.footer__contact-address {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.35rem;
}

.footer__contact-vat {
  margin-top: 0.15rem;
  color: rgba(244, 248, 248, 0.55);
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

.footer__bar {
  padding-top: 0.85rem;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer__copy {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(244, 248, 248, 0.42);
}

/* ——— Internal pages ——— */
.page {
  position: relative;
  z-index: 1;
  margin-left: var(--sidebar-w);
  min-width: 0;
  max-width: 100%;
  min-height: 55vh;
  padding: calc(var(--topbar-h) + 2.5rem) 0 4rem;
  transition: margin-left 0.35s var(--ease-out);
}

.page__inner {
  max-width: min(1150px, 100%);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 1.5rem);
  min-width: 0;
  box-sizing: border-box;
}

.page__inner--wide {
  max-width: min(1320px, 100%);
  min-width: 0;
  box-sizing: border-box;
}

.page--contact {
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  overflow-x: clip;
  isolation: isolate;
}

/* Contactpagina: lichte H1, SEO in bodytekst, ruime witruimte */
.contact-intro {
  position: relative;
  z-index: 1;
  padding: clamp(2.75rem, 7vw, 5rem) 0 clamp(3.25rem, 8vw, 5.75rem);
  text-align: center;
}

.contact-intro__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.1rem, 2.5vw, 1.65rem);
  margin: 0 auto;
  max-width: min(52rem, 100%);
}

.contact-intro__eyebrow {
  margin: 0;
}

.contact-intro__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 3.8vw, 2.35rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.96);
  text-wrap: balance;
}

.contact-intro__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.2vw, 1.35rem);
  width: 100%;
  max-width: min(46rem, 100%);
  margin: 0;
  text-align: center;
}

.contact-intro__lead {
  margin: 0;
  font-size: clamp(0.98rem, 1.75vw, 1.1rem);
  line-height: 1.72;
  color: rgba(200, 210, 218, 0.88);
  text-wrap: pretty;
}

.contact-intro__lead--secondary {
  font-size: clamp(0.93rem, 1.55vw, 1.02rem);
  line-height: 1.7;
  color: rgba(188, 198, 206, 0.86);
}

.contact-intro__lead strong {
  color: rgba(244, 248, 248, 0.95);
  font-weight: 600;
}

.cta-section--contact-only {
  padding-top: clamp(2.75rem, 7.5vw, 4.75rem);
  padding-bottom: clamp(2.75rem, 8vw, 5rem);
}

@media (max-width: 899px) {
  .page--contact .cta-section--contact-only {
    padding-top: clamp(2.25rem, 9vw, 4rem);
  }
}

.contact-form-split {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.75rem);
  align-items: start;
}

@media (min-width: 900px) {
  .contact-form-split {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
    gap: clamp(2.5rem, 5.5vw, 4.5rem);
  }
}

.contact-form-split__aside {
  text-align: left;
}

.contact-benefits__eyebrow {
  margin-bottom: 0.5rem;
}

.contact-benefits__title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.contact-benefits__list {
  margin-bottom: 0;
}

.contact-benefits__figure {
  width: 75%;
  max-width: 75%;
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 12, 16, 0.6);
  box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.55);
}

.contact-benefits__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 22%;
}

.contact-benefits__phone {
  margin: clamp(0.85rem, 2vw, 1.1rem) 0 0;
  width: 75%;
  max-width: 75%;
}

.contact-benefits__phone .btn--phone-cta {
  width: 100%;
}

.contact-form-split__form {
  min-width: 0;
}

.cta-form--contact-wide {
  width: 100%;
  max-width: none;
}

/* Contactpagina: decor alleen mobiel (zelfde sfeer als Waarom Valtex) */
.diensten-page-decor--contact-only {
  display: none;
}

@media (max-width: 899px) {
  .page--contact .diensten-page-decor--contact-only {
    display: block;
  }
}

/* Contact: blur-hero (foto + scrim) — alle breakpoints */
  .page--contact .contact-intro.contact-intro--waarom-mobile {
    position: relative;
    margin-left: 0;
    width: 100%;
    min-height: min(480px, 72svh);
    overflow: hidden;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  }

  .page--contact .contact-intro__media,
  .page--contact .contact-intro__scrim {
    display: block;
  }

  .page--contact .contact-intro__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .page--contact .contact-intro__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    transform: scale(1.12);
    filter: blur(9px) saturate(1.06);
  }

  .page--contact .contact-intro__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(12, 14, 18, 0.7) 0%,
      rgba(12, 14, 18, 0.48) 45%,
      rgba(10, 12, 16, 0.85) 100%
    );
  }

  .page--contact .contact-intro.contact-intro--waarom-mobile .container {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    max-width: min(66rem, 100%);
    margin: 0 auto;
    padding: calc(var(--topbar-h) + 0.35rem) clamp(1rem, 5vw, 1.35rem) clamp(1.35rem, 5vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  }

  .page--contact .contact-intro.contact-intro--waarom-mobile .contact-intro__head {
    gap: clamp(0.95rem, 3vw, 1.35rem);
    max-width: min(66rem, 100%);
  width: 100%;
  align-items: center;
  text-align: center;
}

.page--contact .contact-intro.contact-intro--waarom-mobile .contact-intro__eyebrow {
  width: 100%;
  text-align: center;
}

.page--contact .contact-intro.contact-intro--waarom-mobile .contact-intro__title {
  width: 100%;
  max-width: min(66rem, 100%);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.page--contact .contact-intro.contact-intro--waarom-mobile .contact-intro__copy,
.page--contact .contact-intro.contact-intro--waarom-mobile .contact-intro__lead {
  width: 100%;
  max-width: min(50rem, 100%);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Contact: mobiel — gecentreerde benefits + teamfoto, neon-kader rond formulierblok */
@media (max-width: 899px) {
  .page--contact .contact-form-split {
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 5vw, 2.5rem);
  }

  .page--contact .contact-form-split__aside {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .page--contact .contact-benefits__title {
    margin-left: auto;
    margin-right: auto;
    max-width: 22rem;
  }

  .page--contact .contact-benefits__list {
    width: 100%;
    max-width: min(28rem, 100%);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .page--contact .contact-benefits__list li {
    justify-content: center;
    text-align: center;
  }

  .page--contact .contact-benefits__figure {
    width: min(22rem, 92%);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: clamp(1.35rem, 4vw, 1.85rem);
  }

  .page--contact .contact-benefits__phone {
    display: flex;
    justify-content: center;
    width: min(22rem, 92%);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .page--contact .contact-benefits__phone .btn--phone-cta {
    width: 100%;
    max-width: min(22rem, 100%);
  }

  .page--contact .contact-form-split__form {
    width: 100%;
    max-width: min(36rem, 100%);
    margin-left: auto;
    margin-right: auto;
    padding: clamp(1rem, 3.2vw, 1.35rem);
    border-radius: 22px;
    border: 1px solid rgba(0, 255, 255, 0.45);
    box-shadow:
      0 0 0 1px rgba(0, 255, 255, 0.2),
      0 0 36px rgba(0, 255, 255, 0.12);
    background: rgba(6, 10, 14, 0.28);
    box-sizing: border-box;
  }

  .page--contact .contact-form-split__form > .cta-form.cta-form--glass {
    padding: clamp(1.05rem, 2.8vw, 1.35rem) clamp(1rem, 2.6vw, 1.25rem);
  }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .page--contact .contact-intro__media img {
    filter: blur(5px) saturate(1.03);
    transform: scale(1.05);
  }
}

.contact-channels {
  position: relative;
  z-index: 1;
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2.75rem, 7vw, 4.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(8, 10, 12, 0.5) 0%, rgba(6, 8, 10, 0.15) 100%);
}

.contact-channels__head {
  text-align: center;
  max-width: min(44rem, 100%);
  margin: 0 auto 2.25rem;
}

.contact-channels__title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
}

.contact-channels__lead {
  margin: 0;
  font-size: 1rem;
  line-height: 1.62;
  color: rgba(200, 210, 218, 0.84);
}

.contact-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

@media (min-width: 640px) {
  .contact-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem;
  }
}

.contact-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100%;
  padding: 1.35rem 1.45rem 1.45rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 16, 20, 0.42);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2) inset,
    0 10px 36px -18px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  text-decoration: none;
  color: inherit;
  text-align: left;
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    transform 0.35s var(--ease-out),
    box-shadow 0.35s ease;
}

.contact-tile:hover {
  border-color: rgba(0, 255, 255, 0.28);
  background: rgba(14, 20, 26, 0.52);
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.06) inset,
    0 20px 48px -22px rgba(0, 0, 0, 0.55),
    0 0 40px -16px rgba(0, 255, 255, 0.12);
}

.contact-tile:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.contact-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  margin-bottom: 1rem;
  border-radius: 14px;
  background: rgba(0, 255, 255, 0.1);
  color: rgba(0, 255, 255, 0.92);
}

.contact-tile--whatsapp .contact-tile__icon {
  background: rgba(37, 211, 102, 0.12);
  color: rgba(144, 238, 144, 0.95);
}

.contact-tile--static {
  cursor: default;
}

.contact-tile--static:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(12, 16, 20, 0.42);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2) inset,
    0 10px 36px -18px rgba(0, 0, 0, 0.45);
}

.contact-tile__title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.96);
}

.contact-tile__text {
  margin: 0 0 1.1rem;
  flex: 1 1 auto;
  font-size: 0.9rem;
  line-height: 1.58;
  color: rgba(188, 198, 206, 0.88);
}

.contact-tile__cta {
  margin-top: auto;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(0, 255, 255, 0.92);
  letter-spacing: 0.01em;
}

.contact-tile:hover .contact-tile__cta {
  color: #fff;
}

/* ——— Contact: hero (donker) ——— */
.contact-hero,
#contact-hero-cinema.contact-hero {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  min-height: max(400px, 68vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
  background:
    radial-gradient(ellipse 88% 58% at 12% 0%, rgba(0, 255, 255, 0.11), transparent 54%),
    radial-gradient(ellipse 70% 50% at 92% 88%, rgba(0, 168, 168, 0.09), transparent 50%),
    linear-gradient(168deg, #0c1014 0%, #080b0f 42%, #05080c 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-hero__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, transparent 88%);
}

.contact-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

.contact-hero__wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4.5vw, 2.75rem);
  align-items: center;
  min-width: 0;
  padding-top: calc(var(--topbar-h) + 1.65rem);
  padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

@media (min-width: 900px) {
  .contact-hero__wrap {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 4vw, 3rem);
  }
}

.contact-hero__copy {
  text-align: center;
  max-width: min(36rem, 100%);
  margin-inline: auto;
}

@media (min-width: 900px) {
  .contact-hero__copy {
    text-align: left;
    margin-inline: 0;
  }
}

.contact-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(180, 230, 230, 0.9);
}

.contact-hero__eyebrow-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.55);
  animation: werk-hero-showcase-pulse 2.4s ease-in-out infinite;
}

.contact-hero__title {
  margin: 0 0 0.9rem;
  font-weight: 800;
  font-size: clamp(1.95rem, 5vw, 3.15rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  display: flex;
  flex-direction: column;
  gap: 0.04em;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.35);
}

.contact-hero__title-line {
  display: block;
}

.contact-hero__title-line--accent {
  background: linear-gradient(105deg, #fff 0%, rgba(180, 255, 255, 0.95) 45%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact-hero__lead {
  margin: 0 0 1.25rem;
  max-width: 32rem;
  font-size: clamp(0.98rem, 1.9vw, 1.08rem);
  line-height: 1.62;
  color: rgba(210, 222, 230, 0.88);
}

.contact-hero__lead strong {
  color: rgba(244, 248, 250, 0.95);
  font-weight: 600;
}

.contact-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}

@media (min-width: 900px) {
  .contact-hero__actions {
    justify-content: flex-start;
  }
}

.contact-hero__cta-ghost.btn--ghost {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}

.contact-hero__cta-ghost.btn--ghost:hover,
.contact-hero__cta-ghost.btn--ghost:focus-visible {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.92);
}

.contact-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 auto 1.1rem;
  padding: 0.7rem 0.35rem;
  max-width: min(24rem, 100%);
  list-style: none;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px -20px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
}

@media (min-width: 900px) {
  .contact-hero__stats {
    margin-inline: 0;
  }
}

.contact-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  min-width: 0;
  padding: 0.35rem 0.45rem;
  text-align: center;
}

.contact-hero__stat:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-hero__stat-value {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}

.contact-hero__stat-label {
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(230, 248, 248, 0.72);
}

.contact-hero__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: center;
}

@media (min-width: 900px) {
  .contact-hero__tags {
    justify-content: flex-start;
  }
}

.contact-hero__tags > li {
  display: inline-flex;
  align-items: center;
}

.contact-hero__tags > li:not(:last-child)::after {
  content: "·";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 255, 255, 0.55);
}

.contact-hero__tag {
  display: inline;
  padding: 0;
  border-radius: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(232, 244, 246, 0.88);
  background: none;
  border: none;
}

.contact-hero__panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  max-width: min(26rem, 100%);
  margin-inline: auto;
}

@media (min-width: 520px) {
  .contact-hero__panels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 100%;
  }
}

@media (min-width: 960px) {
  .contact-hero__panels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.contact-hero__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.65);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.contact-hero__panel:hover,
.contact-hero__panel:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(0, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
}

.contact-hero__panel--address {
  cursor: default;
}

.contact-hero__panel--address:hover,
.contact-hero__panel--address:focus-visible,
.contact-hero__panel--contact:hover,
.contact-hero__panel--contact:focus-visible,
.contact-hero__panel--vat:hover,
.contact-hero__panel--vat:focus-visible {
  transform: none;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}

.contact-hero__panel--contact,
.contact-hero__panel--vat {
  cursor: default;
}

a.contact-hero__panel-value,
a.contact-hero__panel-value:link,
a.contact-hero__panel-value:visited {
  color: rgba(255, 255, 255, 0.96);
  text-decoration: none;
}

a.contact-hero__panel-meta--link,
a.contact-hero__panel-meta--link:link,
a.contact-hero__panel-meta--link:visited {
  color: rgba(190, 205, 212, 0.88);
  text-decoration: none;
}

a.contact-hero__panel-value:hover,
a.contact-hero__panel-value:focus-visible,
a.contact-hero__panel-meta--link:hover,
a.contact-hero__panel-meta--link:focus-visible {
  color: rgba(0, 255, 255, 0.95);
}

.contact-hero__panel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-bottom: 0.35rem;
  border-radius: 10px;
  color: rgba(180, 255, 255, 0.95);
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.22);
}

.contact-hero__panel-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(180, 210, 215, 0.85);
}

.contact-hero__panel-value {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.96);
  word-break: break-word;
}

.contact-hero__panel-meta {
  font-size: 0.72rem;
  color: rgba(190, 205, 212, 0.72);
}

@media (max-width: 519px) {
  .contact-hero__panel-value {
    font-size: 0.82rem;
  }
}

.page--contact .contact-about {
  margin-top: -1px;
}

.page--contact .waarom-why__portrait-media img {
  object-position: center 28%;
}

.page--contact .waarom-why__aside {
  max-width: min(17.5rem, 100%);
  width: 100%;
}

.page--contact .waarom-why__portrait {
  width: min(11rem, 52vw);
}

.page--contact .waarom-why__stats {
  gap: 0.55rem;
}

.page--contact .waarom-why__stats li {
  min-height: 3.35rem;
  justify-content: center;
  padding: 0.55rem 0.75rem;
}

.page--contact .waarom-why__stat-label {
  font-size: 0.62rem;
  line-height: 1.25;
}

@media (max-width: 767px) {
  .page--contact .waarom-why__aside {
    max-width: min(20rem, 94vw);
  }

  .page--contact .waarom-why__stats li {
    padding: 0.62rem 0.9rem;
  }
}

.page--contact .contact-about__bento {
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .page--contact .contact-about__bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page--contact .contact-about__bento .waarom-why__tile--wide {
    grid-column: 1 / -1;
  }
}

/* Contact: kanalen op wit */
.contact-channels--light {
  background: #fff;
  border-top: 1px solid rgba(0, 140, 140, 0.1);
  border-bottom: none;
}

.contact-channels--light .contact-channels__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-dim);
  text-align: center;
}

.contact-channels--light .contact-channels__title {
  color: var(--text-primary);
}

.contact-channels--light .contact-channels__lead {
  color: rgba(26, 35, 41, 0.72);
}

.contact-channels--light .contact-channels__lead strong {
  color: var(--text-primary);
  font-weight: 600;
}

.contact-channels--light .contact-tile {
  background: linear-gradient(145deg, #ffffff 0%, #f8fcfc 100%);
  border: 1px solid rgba(0, 140, 140, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 16px 40px -28px rgba(0, 55, 60, 0.22);
}

.contact-channels--light .contact-tile:hover {
  border-color: rgba(0, 154, 154, 0.35);
  background: #fff;
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 22px 48px -24px rgba(0, 100, 110, 0.28);
}

.contact-channels--light .contact-tile__icon {
  background: rgba(0, 184, 184, 0.1);
  color: var(--teal-dim);
  border: 1px solid rgba(0, 140, 140, 0.16);
}

.contact-channels--light .contact-tile--whatsapp .contact-tile__icon {
  background: rgba(37, 211, 102, 0.12);
  color: #128c3e;
  border-color: rgba(37, 211, 102, 0.22);
}

.contact-channels--light .contact-tile__title {
  color: var(--text-primary);
}

.contact-channels--light .contact-tile__text {
  color: rgba(26, 35, 41, 0.68);
}

.contact-channels--light .contact-tile__cta {
  color: var(--teal-dim);
}

.contact-channels--light .contact-tile:hover .contact-tile__cta {
  color: var(--teal);
}

.contact-channels--light .page-actions--contact .btn--ghost {
  color: var(--teal-dim);
  border-color: rgba(0, 140, 140, 0.28);
  background: #fff;
}

.contact-channels--light .page-actions--contact .btn--ghost:hover,
.contact-channels--light .page-actions--contact .btn--ghost:focus-visible {
  color: #fff;
  background: var(--teal-dim);
  border-color: var(--teal-dim);
}

@media (max-width: 899px) {
  .contact-hero,
  #contact-hero-cinema.contact-hero {
    margin-left: 0;
    width: 100%;
    min-height: auto;
  }

  .contact-hero__wrap {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
    padding-top: calc(var(--topbar-h) + 0.85rem);
    padding-bottom: max(1.35rem, env(safe-area-inset-bottom));
    gap: 1rem;
  }

  .contact-hero__copy {
    text-align: center;
  }

  .contact-hero__eyebrow {
    justify-content: center;
  }

  .contact-hero__title {
    align-items: center;
    font-size: clamp(2.05rem, 8.2vw, 2.85rem);
    margin-bottom: 1rem;
  }

  .contact-hero__title-line {
    text-wrap: balance;
  }

  .contact-hero__lead {
    margin-inline: auto;
    font-size: clamp(0.88rem, 3.35vw, 0.98rem);
    line-height: 1.58;
    margin-bottom: 1.35rem;
  }

  .contact-hero__actions {
    justify-content: center;
    margin-bottom: 1.1rem;
  }

  .contact-hero__actions .btn {
    width: 100%;
    max-width: 20rem;
  }

  .contact-hero__stats {
    margin-bottom: 1rem;
  }

  .contact-hero__panels {
    margin-top: 0;
    width: 100%;
  }
}

.page-hero {
  margin-bottom: 2rem;
}

.page-hero__title {
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  color: var(--text-primary);
}

.page-hero__lead {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.62;
  margin: 0;
}

.page-body {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--muted);
}

.page-body h2 {
  font-size: 1.08rem;
  font-weight: 600;
  margin: 2rem 0 0.6rem;
  color: var(--text-primary);
}

.page-body h2:first-child {
  margin-top: 0;
}

.page-body p {
  margin: 0 0 1rem;
}

.page-body ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.page-body a {
  color: var(--teal);
  font-weight: 500;
}

.page-actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.case-hero__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
  margin: 0 0 0.85rem;
}

.case-hero__tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(232, 244, 246, 0.88);
  padding: 0;
  border-radius: 0;
  border: none;
  background: none;
}

.case-hero__tag:not(:last-child)::after {
  content: "·";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 255, 255, 0.55);
}

.case-cover {
  margin: 0 0 2rem;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  aspect-ratio: 16 / 10;
  background: #121418;
}

.case-cover__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page--case-study .page__inner--wide {
  max-width: min(1240px, 100%);
}

.case-story-hero {
  margin-bottom: 1.75rem;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: clamp(360px, 62vh, 560px);
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.case-story-hero__bg-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.case-story-hero__bg-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.03);
  filter: none;
}

@media (max-width: 899px) {
  .case-story-hero__bg-media img {
    transform: scale(1.08);
    filter: blur(8px) saturate(1.06);
  }
}

.case-story-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(4, 8, 12, 0.86) 0%, rgba(4, 8, 12, 0.78) 38%, rgba(4, 8, 12, 0.35) 100%),
    radial-gradient(circle at 18% 46%, rgba(0, 255, 255, 0.12), transparent 50%);
}

.case-story-hero__wrap {
  display: block;
}

.case-story-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 2.1rem);
}

.case-story-hero__copy {
  min-width: 0;
  max-width: min(44rem, 100%);
}

.case-story-hero__crumbs {
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  font-size: 0.8rem;
  color: rgba(186, 199, 209, 0.75);
}

.case-story-hero__crumbs a {
  color: rgba(186, 199, 209, 0.9);
  text-decoration: none;
}

.case-story-hero__crumbs a:hover {
  color: rgba(102, 255, 255, 0.94);
  text-decoration: underline;
}

.case-cover--story {
  margin-bottom: 1.5rem;
}

.case-story-hero__media.case-cover--story {
  margin-bottom: 0;
  display: none;
}

.case-kpi-strip {
  margin: 0 0 2rem;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 760px) {
  .case-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.case-kpi-strip__item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 14, 18, 0.55);
  border-radius: 16px;
  padding: 0.95rem 1rem;
}

.case-kpi-strip__value {
  margin: 0 0 0.2rem;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(102, 255, 255, 0.95);
}

.case-kpi-strip__label {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(218, 228, 234, 0.88);
}

.case-story-split {
  margin: 0 0 4rem;
}

.case-story-split__card {
  display: grid;
  gap: 1rem;
}

@media (min-width: 920px) {
  .case-story-split__card {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
  }
}

.case-story-split__body {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(10, 14, 18, 0.58);
  padding: 1.2rem 1.2rem 1.1rem;
}

.case-story-split__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(102, 255, 255, 0.86);
}

.case-story-split__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: rgba(245, 249, 250, 0.96);
}

.case-story-split__body p {
  margin: 0 0 0.75rem;
  font-size: 0.93rem;
  line-height: 1.62;
  color: rgba(220, 230, 236, 0.88);
}

.case-story-split__body p:last-child {
  margin-bottom: 0;
}

.case-story-split__media {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #101418;
  aspect-ratio: 16 / 10;
}

.case-story-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-solutions {
  margin: 0 0 2.6rem;
}

.case-solutions__title {
  margin: 0 0 1.35rem;
  font-size: clamp(1.42rem, 3.1vw, 2rem);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.98);
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.case-solutions__stack {
  display: grid;
  gap: 0.95rem;
}

.case-solution-row {
  display: grid;
  gap: 0.9rem;
}

@media (min-width: 860px) {
  .case-solution-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 1rem;
  }

  .case-solution-row--media-right .case-solution-row__media {
    order: 2;
  }
}

.case-solution-row__media {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #101418;
  min-height: 220px;
}

.case-solution-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-solutions__item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(8, 12, 16, 0.56);
  padding: 1rem;
  min-height: 100%;
}

.case-solution-row .case-solutions__item {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0.25rem 0.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.case-solutions__item h3 {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  color: rgba(102, 255, 255, 0.94);
}

.case-solutions__item p {
  margin: 0;
  font-size: 0.89rem;
  line-height: 1.55;
  color: rgba(212, 223, 231, 0.86);
}

.case-next {
  border: 1px dashed rgba(102, 255, 255, 0.26);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  background: rgba(0, 24, 28, 0.25);
}

.case-next h2 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  color: rgba(245, 249, 250, 0.95);
}

.case-next p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.56;
  color: rgba(196, 210, 220, 0.86);
}

.case-cta-bottom {
  margin-top: 2rem;
}

.case-page-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin: 2.5rem 0 0;
  padding: 1.1rem 1.25rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(8, 14, 18, 0.72) 0%, rgba(0, 28, 32, 0.38) 100%);
}

.case-page-nav__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(220, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.2s ease;
}

.case-page-nav__back:hover,
.case-page-nav__back:focus-visible {
  color: #fff;
}

.case-page-nav__back svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.case-page-nav__siblings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.case-page-nav__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(180, 200, 210, 0.62);
}

.case-page-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(245, 249, 250, 0.92);
  text-decoration: none;
  border: 1px solid rgba(102, 255, 255, 0.22);
  background: rgba(0, 255, 255, 0.06);
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.case-page-nav__link:hover,
.case-page-nav__link:focus-visible {
  color: #fff;
  border-color: rgba(102, 255, 255, 0.45);
  background: rgba(0, 255, 255, 0.12);
}

.page--case-study .page__inner--diensten-wide + .case-home-audit {
  margin-top: 0;
}

.page--case-study .case-home-audit {
  margin-bottom: 0;
}

.case-solution-row {
  border-radius: 18px;
  padding: 0.35rem;
  transition: background 0.25s ease;
}

.case-solution-row:hover {
  background: rgba(0, 255, 255, 0.03);
}

.case-solution-row__media {
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.case-solution-row:hover .case-solution-row__media {
  border-color: rgba(102, 255, 255, 0.22);
  box-shadow: 0 12px 36px -24px rgba(0, 255, 255, 0.35);
}

.case-kpi-strip__item {
  transition:
    border-color 0.25s ease,
    transform 0.25s ease;
}

.case-kpi-strip__item:hover {
  border-color: rgba(102, 255, 255, 0.28);
  transform: translateY(-2px);
}

/* ——— Case study: premium layout ——— */
.page--case-study .page__inner--diensten-wide:not(.case-band__inner):not(.home-audit__inner) {
  padding-bottom: clamp(2rem, 5vw, 3.25rem);
}

.page--case-study .case-story-hero {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  min-height: clamp(380px, 58vh, 580px);
  box-shadow:
    0 28px 72px -36px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.page--case-study .case-story-hero__scrim {
  background:
    linear-gradient(105deg, rgba(4, 8, 12, 0.92) 0%, rgba(4, 8, 12, 0.72) 42%, rgba(4, 8, 12, 0.28) 100%),
    radial-gradient(circle at 14% 52%, rgba(0, 255, 255, 0.16), transparent 52%);
}

.page--case-study .case-story-hero .page-hero__title {
  font-size: clamp(1.85rem, 4.8vw, 2.85rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 0.85rem;
  color: #fff;
  text-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}

.page--case-study .case-story-hero .page-hero__lead {
  font-size: clamp(0.95rem, 1.8vw, 1.08rem);
  line-height: 1.65;
  color: rgba(220, 232, 238, 0.9);
  max-width: 38rem;
}

.page--case-study .case-story-hero .page-hero__lead strong {
  color: rgba(102, 255, 255, 0.95);
  font-weight: 600;
}

.case-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 0.85rem;
  margin-top: 1.35rem;
}

.case-hero__cta-ghost {
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.case-hero__cta-ghost:hover,
.case-hero__cta-ghost:focus-visible {
  color: #fff !important;
  border-color: rgba(102, 255, 255, 0.55) !important;
  background: rgba(0, 255, 255, 0.1) !important;
}

.page--case-study .case-kpi-strip {
  margin: 0 0 clamp(2.25rem, 4vw, 3rem);
  gap: 1rem;
}

.page--case-study .case-kpi-strip__item {
  position: relative;
  overflow: hidden;
  padding: 1.15rem 1.15rem 1.05rem;
  background: linear-gradient(145deg, rgba(10, 16, 22, 0.82) 0%, rgba(0, 28, 32, 0.42) 100%);
  border-color: rgba(102, 255, 255, 0.14);
  box-shadow: 0 16px 40px -28px rgba(0, 0, 0, 0.55);
}

.page--case-study .case-kpi-strip__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.65), transparent);
}

.page--case-study .case-kpi-strip__value {
  font-size: clamp(1.28rem, 2.4vw, 1.55rem);
}

.page--case-study .case-story-split {
  margin-bottom: clamp(2.75rem, 5vw, 4rem);
}

.page--case-study .case-story-split__card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(8, 14, 18, 0.78) 0%, rgba(0, 24, 28, 0.35) 100%);
  box-shadow: 0 28px 64px -40px rgba(0, 0, 0, 0.65);
}

@media (min-width: 920px) {
  .page--case-study .case-story-split__card {
    gap: 0;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

.page--case-study .case-story-split__body {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: clamp(1.25rem, 2.5vw, 1.65rem);
}

.page--case-study .case-story-split__media {
  border: none;
  border-radius: 0;
  min-height: 100%;
}

.page--case-study .case-story-split__media img {
  transition: transform 0.45s ease;
}

.page--case-study .case-story-split__card:hover .case-story-split__media img {
  transform: scale(1.03);
}

.case-section-head {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.case-section-head__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(102, 255, 255, 0.82);
}

.page--case-study .case-solutions {
  margin-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
}

.page--case-study .case-solutions__title {
  margin: 0;
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
}

.page--case-study .case-solutions__stack {
  gap: 1.15rem;
}

.page--case-study .case-solution-row {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(6, 10, 14, 0.55);
  padding: 0;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.page--case-study .case-solution-row:hover {
  background: rgba(6, 10, 14, 0.55);
  border-color: rgba(102, 255, 255, 0.22);
  box-shadow: 0 20px 48px -32px rgba(0, 255, 255, 0.22);
  transform: translateY(-2px);
}

@media (min-width: 860px) {
  .page--case-study .case-solution-row {
    gap: 0;
  }
}

.page--case-study .case-solution-row__media {
  border: none;
  border-radius: 0;
  min-height: 240px;
}

.page--case-study .case-solution-row .case-solutions__item {
  position: relative;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: clamp(1.15rem, 2.5vw, 1.5rem);
  min-height: 100%;
}

.case-solution-row__step {
  display: block;
  margin-bottom: 0.65rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(102, 255, 255, 0.72);
}

.page--case-study .case-solutions__item h3 {
  margin-bottom: 0.65rem;
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  font-weight: 600;
  line-height: 1.3;
}

.page--case-study .case-solutions__item p {
  font-size: 0.92rem;
  line-height: 1.62;
}

.page--case-study .case-next.case-outcome {
  margin-bottom: 0;
  border-style: solid;
  border-color: rgba(102, 255, 255, 0.18);
  background: linear-gradient(135deg, rgba(0, 28, 32, 0.45) 0%, rgba(8, 14, 18, 0.65) 100%);
  padding: clamp(1.15rem, 2.5vw, 1.5rem);
}

.page--case-study .case-outcome__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(102, 255, 255, 0.82);
}

.page--case-study .case-outcome h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page--case-study .case-outcome__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

@media (min-width: 640px) {
  .page--case-study .case-outcome__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
  }
}

.page--case-study .case-outcome__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(212, 224, 232, 0.9);
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.page--case-study .case-outcome__list li::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 0.42rem;
  border-radius: 50%;
  background: rgba(0, 255, 255, 0.85);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.45);
}

@media (max-width: 899px) {
  .page--case-study .case-story-hero {
    min-height: clamp(300px, 52svh, 480px);
  }

  .page--case-study .case-story-hero .page-hero__title {
    font-size: clamp(1.45rem, 5vw, 2rem);
  }

  .page--case-study .case-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ——— Case study: dark / light full-bleed bands ——— */
.page--case-study {
  position: relative;
  overflow-x: clip;
  isolation: isolate;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
}

.page--case-study > *:not(.case-page-decor) {
  position: relative;
  z-index: 1;
}

.case-page-decor {
  position: absolute;
  inset: 0;
  min-height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.case-page-decor__shape {
  position: absolute;
  filter: blur(64px);
  opacity: 0.22;
  border-radius: 38% 62% 72% 28% / 44% 36% 64% 56%;
  background: linear-gradient(125deg, rgba(45, 212, 191, 0.55) 0%, rgba(0, 255, 255, 0.35) 45%, rgba(13, 148, 136, 0.25) 100%);
}

.case-page-decor__shape--1 {
  width: min(380px, 50vw);
  height: 68px;
  top: 18%;
  right: -4%;
  transform: rotate(14deg);
}

.case-page-decor__shape--2 {
  width: min(320px, 42vw);
  height: 58px;
  bottom: 22%;
  left: -5%;
  transform: rotate(-22deg);
  opacity: 0.16;
}

.case-band {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  margin-top: 0;
}

.case-band + .case-band {
  margin-top: -1px;
}

.case-band__inner {
  position: relative;
  z-index: 1;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1rem, 4vw, 1.5rem);
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
}

.case-band--hero .case-band__inner {
  padding-top: 0;
  padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}

.case-band--story .case-band__inner {
  padding-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.case-band--approach .case-band__inner {
  padding-top: clamp(2.75rem, 5.5vw, 4rem);
  padding-bottom: clamp(2.75rem, 5.5vw, 4rem);
}

.case-band--result .case-band__inner {
  padding-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  .case-band {
    padding-left: var(--sidebar-w);
    box-sizing: border-box;
  }

  /* Hero-band: geen horizontale padding — anders witte rand (body) rechts zichtbaar */
  .case-band--hero {
    padding-left: 0;
    padding-right: 0;
  }

  .case-band:not(.case-band--hero) {
    padding-right: 1.5rem;
  }

  .case-band__inner {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }
}

.case-band--dark {
  background: #0a0e12;
  color: var(--text-inverse);
}

.case-band--dark.case-band--hero {
  background: transparent;
}

.case-band--dark .case-band__bg--mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 92% 8%, rgba(0, 255, 255, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 4% 92%, rgba(0, 255, 255, 0.08) 0%, transparent 52%),
    linear-gradient(180deg, #0a0e12 0%, #0c1218 100%);
}

.case-band--light {
  background: linear-gradient(180deg, #f4f7f8 0%, #ffffff 100%);
  border-top: none;
  border-bottom: 1px solid rgba(0, 140, 140, 0.08);
}

.case-band--light .case-band__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 40% at 100% 0%, rgba(0, 168, 168, 0.09), transparent 55%),
    radial-gradient(ellipse 50% 35% at 0% 100%, rgba(0, 168, 168, 0.06), transparent 50%);
}

.case-band--light .case-kpi-strip {
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.case-band--light .case-kpi-strip__item {
  background: #fff;
  border-color: rgba(0, 140, 140, 0.14);
  box-shadow: 0 18px 44px -26px rgba(0, 50, 55, 0.18);
}

.case-band--light .case-kpi-strip__item::before {
  background: linear-gradient(90deg, transparent, rgba(0, 168, 168, 0.75), transparent);
}

.case-band--light .case-kpi-strip__value {
  color: var(--teal-dim);
  text-shadow: none;
}

.case-band--light .case-kpi-strip__label {
  color: rgba(26, 35, 41, 0.62);
}

.case-band--light .case-story-split {
  margin-bottom: 0;
}

.case-band--light .case-story-split__card {
  background: #fff;
  border-color: rgba(0, 140, 140, 0.14);
  box-shadow: 0 28px 60px -32px rgba(0, 50, 55, 0.2);
}

.case-band--light .case-story-split__eyebrow {
  color: var(--teal-dim);
}

.case-band--light .case-story-split__title {
  color: #1a2329;
}

.case-band--light .case-story-split__body p {
  color: rgba(26, 35, 41, 0.72);
}

.case-band--light .case-story-split__media {
  border-left: 1px solid rgba(0, 140, 140, 0.08);
}

.case-band--dark.case-band--approach .case-solutions {
  margin-bottom: 0;
}

.case-band--dark .case-solutions__title {
  color: #fff;
}

.case-band--dark .case-section-head__eyebrow {
  color: rgba(102, 255, 255, 0.88);
}

.case-band--dark .case-solution-row {
  background: rgba(12, 18, 24, 0.72);
  border-color: rgba(102, 255, 255, 0.12);
  box-shadow: 0 24px 56px -36px rgba(0, 0, 0, 0.55);
}

.case-band--dark .case-solution-row:hover {
  border-color: rgba(102, 255, 255, 0.28);
  box-shadow:
    0 28px 64px -32px rgba(0, 255, 255, 0.18),
    0 0 0 1px rgba(102, 255, 255, 0.08) inset;
}

.case-band--light .case-next.case-outcome {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  background: #fff;
  border: 1px solid rgba(0, 140, 140, 0.14);
  box-shadow: 0 20px 50px -28px rgba(0, 50, 55, 0.16);
  padding: clamp(1.25rem, 2.5vw, 1.65rem);
}

.case-band--light .case-outcome__eyebrow {
  color: var(--teal-dim);
}

.case-band--light .case-outcome h2 {
  color: #1a2329;
}

.case-band--light .case-outcome__list li {
  color: rgba(26, 35, 41, 0.78);
  background: linear-gradient(180deg, #f8fbfb 0%, #f2f7f8 100%);
  border-color: rgba(0, 140, 140, 0.12);
}

.case-band--light .case-outcome__list li::before {
  background: var(--teal);
  box-shadow: 0 0 10px rgba(0, 168, 168, 0.35);
}

.case-band--light .case-page-nav {
  margin-top: 0;
  background: #fff;
  border-color: rgba(0, 140, 140, 0.14);
  box-shadow: 0 16px 40px -28px rgba(0, 50, 55, 0.14);
}

.case-band--light .case-page-nav__back {
  color: var(--teal-dim);
}

.case-band--light .case-page-nav__label {
  color: rgba(26, 35, 41, 0.45);
}

.case-band--light .case-page-nav__link {
  color: #1a2329;
  background: rgba(0, 168, 168, 0.06);
  border-color: rgba(0, 140, 140, 0.2);
}

.case-band--light .case-page-nav__link:hover,
.case-band--light .case-page-nav__link:focus-visible {
  color: var(--teal-dim);
  border-color: rgba(0, 140, 140, 0.38);
  background: rgba(0, 168, 168, 0.1);
}

.page--case-study .case-band--hero .case-story-hero {
  margin-bottom: 0;
}

.page--case-study .case-story-hero--cinema {
  box-shadow: none;
}

/* Case study: cinema hero */
.case-story-hero--cinema {
  position: relative;
  margin: 0;
  border: none;
  border-radius: 0;
  min-height: max(460px, 76vh);
  display: block;
  overflow: visible;
  background:
    radial-gradient(ellipse 90% 60% at 8% 0%, rgba(0, 255, 255, 0.11), transparent 52%),
    radial-gradient(ellipse 75% 55% at 95% 90%, rgba(0, 168, 168, 0.09), transparent 48%),
    linear-gradient(168deg, #0c1014 0%, #080b0f 42%, #05080c 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.case-story-hero--cinema .case-story-hero__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 90%);
}

.case-story-hero--cinema .case-story-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

.case-story-hero--cinema .case-story-hero__glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(72px);
}

.case-story-hero--cinema .case-story-hero__glow--left {
  width: min(420px, 55vw);
  height: min(420px, 55vw);
  top: 8%;
  left: -8%;
  background: rgba(0, 255, 255, 0.14);
}

.case-story-hero--cinema .case-story-hero__glow--right {
  width: min(360px, 48vw);
  height: min(360px, 48vw);
  bottom: 6%;
  right: -6%;
  background: rgba(0, 168, 168, 0.12);
}

.case-story-hero--cinema .case-story-hero__wrap {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--topbar-h) + 1.5rem);
  padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

.case-story-hero--cinema .case-story-hero__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  align-items: center;
  min-width: 0;
}

@media (min-width: 900px) {
  .case-story-hero--cinema .case-story-hero__wrap {
    padding-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
  }

  .case-story-hero--cinema .case-story-hero__layout {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 4vw, 3.25rem);
  }
}

.case-story-hero--cinema .case-story-hero__copy {
  max-width: min(40rem, 100%);
  text-align: center;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .case-story-hero--cinema .case-story-hero__copy {
    text-align: left;
    margin-inline: 0;
  }
}

.case-story-hero--cinema .case-story-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(180, 230, 230, 0.92);
}

.case-story-hero--cinema .case-story-hero__eyebrow-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.55);
  animation: werk-hero-showcase-pulse 2.4s ease-in-out infinite;
}

.case-story-hero--cinema .case-story-hero__title {
  margin: 0 0 0.9rem;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  display: flex;
  flex-direction: column;
  gap: 0.05em;
  color: rgba(255, 255, 255, 0.98);
}

.case-story-hero--cinema .case-story-hero__title-line--accent {
  background: linear-gradient(105deg, #fff 0%, rgba(255, 255, 255, 0.95) 45%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.case-story-hero--cinema .case-story-hero__lead {
  margin: 0;
  font-size: clamp(0.95rem, 1.75vw, 1.08rem);
  line-height: 1.66;
  color: rgba(214, 226, 232, 0.9);
  max-width: 36rem;
}

.case-story-hero--cinema .case-story-hero__lead strong {
  color: rgba(102, 255, 255, 0.95);
  font-weight: 600;
}

.case-story-hero--cinema .case-hero__actions {
  margin-top: 1.4rem;
  justify-content: center;
}

@media (min-width: 900px) {
  .case-story-hero--cinema .case-hero__actions {
    justify-content: flex-start;
  }
}

.case-story-hero--cinema .case-story-hero__tags {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
  justify-content: center;
}

@media (min-width: 900px) {
  .case-story-hero--cinema .case-story-hero__tags {
    justify-content: flex-start;
  }
}

.case-story-hero--cinema .case-story-hero__tags > li {
  display: inline-flex;
  align-items: center;
}

.case-story-hero--cinema .case-story-hero__tags > li:not(:last-child)::after {
  content: "·";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 255, 255, 0.55);
}

.case-story-hero--cinema .case-story-hero__tag {
  display: inline;
  padding: 0;
  border-radius: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(232, 244, 246, 0.88);
  border: none;
  background: none;
}

.case-story-hero--cinema .case-story-hero__preview {
  margin: 0;
  min-width: 0;
  justify-self: center;
  width: 100%;
  max-width: min(520px, 100%);
}

@media (min-width: 900px) {
  .case-story-hero--cinema .case-story-hero__preview {
    justify-self: end;
    max-width: none;
  }
}

.case-story-hero--cinema .case-story-hero__frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0a0e12;
  box-shadow:
    0 32px 80px -36px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(0, 255, 255, 0.08) inset;
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
  transition:
    transform 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out);
}

.case-story-hero--cinema .case-story-hero__frame:hover {
  transform: perspective(1200px) rotateY(-1deg) rotateX(0deg) translateY(-4px);
  box-shadow:
    0 40px 96px -32px rgba(0, 255, 255, 0.22),
    0 0 0 1px rgba(0, 255, 255, 0.16) inset;
}

.case-story-hero--cinema .case-story-hero__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

.case-story-hero--cinema .case-story-hero__frame-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.1rem 1.15rem;
  background: linear-gradient(180deg, transparent 0%, rgba(4, 8, 12, 0.88) 68%);
}

.case-story-hero--cinema .case-story-hero__frame-cat {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(180, 220, 220, 0.82);
}

.case-story-hero--cinema .case-story-hero__frame-name {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.case-story-hero--cinema .case-story-hero__frame-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0a0e12;
  background: linear-gradient(135deg, #fff 0%, rgba(200, 255, 255, 0.95) 100%);
  box-shadow: 0 8px 24px -10px rgba(0, 255, 255, 0.45);
}

.case-kpi-strip__head {
  text-align: center;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.case-kpi-strip__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-dim);
}

.case-kpi-strip__title {
  margin: 0;
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #1a2329;
}

.page--case-study .case-solutions__stack {
  position: relative;
}

@media (min-width: 860px) {
  .page--case-study .case-solutions__stack::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 8%;
    bottom: 8%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(102, 255, 255, 0.22), transparent);
    transform: translateX(-50%);
    pointer-events: none;
  }
}

@media (max-width: 899px) {
  .case-story-hero--cinema {
    min-height: max(420px, 68svh);
  }

  .case-story-hero--cinema .case-story-hero__title {
    font-size: clamp(1.65rem, 6.5vw, 2.35rem);
  }

  .case-story-hero--cinema .case-story-hero__frame {
    transform: none;
  }

  .case-story-hero--cinema .case-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.page--case-study .case-band--light + .case-band--dark,
.page--case-study .case-band--dark + .case-band--light,
.page--case-study .case-band--result + .case-home-audit {
  margin-top: -1px;
}

/* ——— Case study: body sections (post-hero) ——— */
.case-story-panel,
.case-approach-panel,
.case-result-panel {
  position: relative;
  z-index: 1;
}

.case-story-panel {
  background: #fff;
  border: 1px solid rgba(0, 140, 140, 0.12);
  border-radius: 28px;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  box-shadow:
    0 32px 80px -40px rgba(0, 50, 55, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  overflow: hidden;
}

.case-story-panel__glow {
  position: absolute;
  top: -18%;
  right: -8%;
  width: min(400px, 55%);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 168, 168, 0.12) 0%, transparent 68%);
}

.case-story-panel__divider {
  height: 1px;
  margin: clamp(2rem, 4vw, 2.75rem) 0;
  background: linear-gradient(90deg, transparent, rgba(0, 140, 140, 0.22), transparent);
}

.case-story-panel .case-kpi-strip__head {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.case-story-panel .case-kpi-strip {
  margin-bottom: 0;
}

.case-story-panel .case-kpi-strip__item {
  background: linear-gradient(180deg, #f8fbfb 0%, #f2f7f8 100%);
  border-color: rgba(0, 140, 140, 0.1);
}

.case-story-panel .case-context-block {
  margin-bottom: 0;
}

.case-band--story .case-band__inner {
  padding-top: clamp(2.5rem, 5.5vw, 4rem);
}

.case-band--story::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 14, 18, 0.35) 0%, transparent 100%);
  z-index: 2;
}

.case-approach-panel {
  border: 1px solid rgba(102, 255, 255, 0.14);
  border-radius: 28px;
  padding: clamp(1.5rem, 3vw, 2.35rem);
  background: linear-gradient(160deg, rgba(10, 16, 22, 0.82) 0%, rgba(6, 10, 14, 0.62) 100%);
  box-shadow:
    0 36px 88px -42px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(102, 255, 255, 0.06) inset;
}

.case-approach-panel .case-solutions {
  margin-bottom: 0;
}

.case-approach-panel .case-solutions__stack {
  gap: 1.35rem;
}

.case-approach-panel .case-solution-row + .case-solution-row {
  position: relative;
}

.case-approach-panel .case-solution-row + .case-solution-row::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: -0.55rem auto 0.45rem;
  border-radius: 50%;
  background: rgba(0, 255, 255, 0.75);
  box-shadow: 0 0 16px rgba(0, 255, 255, 0.45);
  position: relative;
  z-index: 2;
}

.case-approach-panel .case-solution-row {
  border-radius: 22px;
}

.case-result-panel {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  background: #fff;
  border: 1px solid rgba(0, 140, 140, 0.12);
  border-radius: 28px;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  box-shadow: 0 28px 72px -36px rgba(0, 50, 55, 0.18);
}

.case-result-panel .case-result-head {
  margin-bottom: clamp(1rem, 2vw, 1.35rem);
}

.case-result-panel .case-next.case-outcome {
  margin-bottom: 0;
}

.case-band--result .case-band__inner {
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.case-kpi-strip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: 0.75rem;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--teal-dim);
  background: linear-gradient(145deg, rgba(0, 168, 168, 0.12) 0%, rgba(0, 168, 168, 0.04) 100%);
  border: 1px solid rgba(0, 140, 140, 0.18);
}

.case-band--light .case-kpi-strip__value {
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.case-band--light .case-kpi-strip__item {
  padding: 1.35rem 1.25rem 1.2rem;
  border-radius: 18px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.case-band--light .case-kpi-strip__item:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 140, 140, 0.28);
  box-shadow: 0 22px 50px -28px rgba(0, 80, 90, 0.22);
}

.case-challenge-head {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  max-width: min(40rem, 100%);
  margin-inline: auto;
}

.case-challenge-head__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-dim);
}

.case-challenge-head__title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #1a2329;
}

.case-challenge-head__lead {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(26, 35, 41, 0.62);
}

.case-band--light .case-story-split__card {
  border-radius: 24px;
  overflow: hidden;
}

.case-band--light .case-story-split__media {
  position: relative;
  min-height: clamp(220px, 32vw, 340px);
}

.case-band--light .case-story-split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(4, 8, 12, 0.18) 100%);
}

.case-band--light .case-story-split__body {
  padding: clamp(1.35rem, 2.8vw, 1.85rem);
}

.case-section-head--full {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.case-section-head--full .case-solutions__title {
  margin: 0.55rem 0 0;
  max-width: min(52rem, 100%);
  margin-inline: auto;
}

.case-band--dark .case-section-head--full .case-solutions__title {
  color: #fff;
}

.case-band--approach .case-solution-row__step {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  margin: 0;
}

.case-band--approach .case-solution-row__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.35rem;
  height: 2.35rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0a0e12;
  background: linear-gradient(135deg, #fff 0%, rgba(180, 255, 255, 0.95) 100%);
  box-shadow: 0 8px 22px -10px rgba(0, 255, 255, 0.45);
}

.case-band--approach .case-solution-row .case-solutions__item {
  position: relative;
  padding: clamp(1.35rem, 2.5vw, 1.75rem);
  padding-top: clamp(2.5rem, 4vw, 3rem);
  border-left: 3px solid rgba(102, 255, 255, 0.22);
}

.case-band--approach .case-solution-row__media {
  position: relative;
  min-height: clamp(220px, 30vw, 300px);
}

.case-band--approach .case-solution-row__media img {
  object-fit: cover;
  object-position: top center;
}

/* Elect-SA case: keep hero crops anchored to top (no diagonal slip) */
.page--case-study[data-case="elect-sa"] .case-solution-row__media img,
.page--case-study[data-case="elect-sa"] .case-context-block__visual img,
.page--case-study[data-case="elect-sa"] .case-story-hero__frame img {
  object-position: top center;
}

.case-band--approach .case-solution-row__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 8, 12, 0.35) 0%, transparent 42%);
}

.case-band--approach .case-solutions__item h3 {
  font-size: clamp(1.05rem, 1.9vw, 1.2rem);
  margin-bottom: 0.75rem;
}

.case-band--approach .case-solutions__item p {
  font-size: 0.94rem;
  line-height: 1.64;
  color: rgba(212, 224, 232, 0.88);
}

.case-result-head {
  text-align: center;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.case-result-head__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-dim);
}

.case-result-head__title {
  margin: 0;
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1a2329;
}

.case-band--light .case-next.case-outcome {
  border-radius: 22px;
  padding: clamp(1.35rem, 2.5vw, 1.75rem);
}

.case-band--light .case-outcome__eyebrow {
  display: none;
}

.case-outcome__card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem !important;
  border-radius: 14px !important;
  list-style: none;
}

.case-outcome__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  color: var(--teal-dim);
  background: rgba(0, 168, 168, 0.1);
  border: 1px solid rgba(0, 140, 140, 0.16);
}

.case-outcome__icon svg {
  display: block;
}

.case-outcome__text {
  font-size: 0.9rem;
  line-height: 1.52;
  padding-top: 0.15rem;
}

.case-outcome__body {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.64;
  color: rgba(26, 35, 41, 0.78);
}

.case-outcome__body p {
  margin: 0 0 0.75rem;
}

.case-outcome__body p:last-child {
  margin-bottom: 0;
}

.case-page-nav--rich {
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
  padding: clamp(1.15rem, 2.5vw, 1.5rem);
}

.case-page-nav__explore {
  display: grid;
  gap: 0.85rem;
}

.case-page-nav__explore-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(26, 35, 41, 0.45);
}

.case-page-nav__cards {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .case-page-nav__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.case-page-nav__card {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 0;
  align-items: stretch;
  text-decoration: none;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 140, 140, 0.14);
  background: #fff;
  box-shadow: 0 14px 36px -24px rgba(0, 50, 55, 0.16);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.case-page-nav__card:hover,
.case-page-nav__card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(0, 140, 140, 0.32);
  box-shadow: 0 20px 44px -24px rgba(0, 80, 90, 0.2);
}

.case-page-nav__card-visual {
  display: block;
  overflow: hidden;
  background: #eef4f5;
  min-height: 100%;
}

.case-page-nav__card-visual img {
  width: 100%;
  height: 100%;
  min-height: 88px;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.35s ease;
}

.case-page-nav__card:hover .case-page-nav__card-visual img,
.case-page-nav__card:focus-visible .case-page-nav__card-visual img {
  transform: scale(1.04);
}

.case-page-nav__card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.85rem 0.95rem;
}

.case-page-nav__card-cat {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26, 35, 41, 0.48);
}

.case-page-nav__card-name {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1a2329;
}

@media (max-width: 899px) {
  .case-band--approach .case-solution-row .case-solutions__item {
    border-left: none;
    border-top: 3px solid rgba(102, 255, 255, 0.22);
    padding-top: clamp(2.25rem, 4vw, 2.75rem);
  }
}

/* ── Case context block (Context + uitdaging) ── */
.case-context-block {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.case-story-panel .case-context-block {
  margin-top: 0;
}

.case-band--story .case-kpi-strip + .case-context-block::before {
  content: "";
  display: block;
  width: min(140px, 34%);
  height: 1px;
  margin: 0 auto clamp(1.75rem, 3.5vw, 2.5rem);
  background: linear-gradient(90deg, transparent, rgba(0, 140, 140, 0.38), transparent);
}

.case-context-block__head {
  text-align: center;
  max-width: min(42rem, 100%);
  margin-inline: auto;
}

.case-context-block__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  padding: 0.38rem 0.85rem 0.38rem 0.65rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-dim);
  background: rgba(0, 168, 168, 0.08);
  border: 1px solid rgba(0, 140, 140, 0.16);
}

.case-context-block__badge-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #00c8c8, #00a0a0);
  box-shadow: 0 0 0 3px rgba(0, 200, 200, 0.18);
}

.case-context-block__title {
  margin: 0 0 0.7rem;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: #1a2329;
}

.case-context-block__lead {
  margin: 0;
  font-size: clamp(0.9rem, 1.6vw, 0.98rem);
  line-height: 1.62;
  color: rgba(26, 35, 41, 0.62);
}

.case-context-block__card {
  display: grid;
  gap: 0;
  border-radius: clamp(20px, 2.5vw, 28px);
  overflow: hidden;
  border: 1px solid rgba(0, 140, 140, 0.12);
  background: linear-gradient(145deg, #fff 0%, #f6fbfb 52%, #eef7f7 100%);
  box-shadow:
    0 28px 60px -36px rgba(0, 60, 68, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

@media (min-width: 900px) {
  .case-context-block__card {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: stretch;
  }
}

.case-context-block__copy {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  padding-left: clamp(1.65rem, 3.2vw, 2.4rem);
}

.case-context-block__copy::before {
  content: "";
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.25rem);
  left: clamp(1.15rem, 2.4vw, 1.75rem);
  width: 3px;
  height: calc(100% - clamp(3rem, 6vw, 4.5rem));
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 200, 200, 0.75) 0%, rgba(0, 140, 140, 0.15) 100%);
}

.case-context-block__label {
  display: inline-block;
  margin-bottom: 0.65rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(0, 120, 120, 0.78);
}

.case-context-block__heading {
  margin: 0 0 1rem;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: #1a2329;
}

.case-context-block__text p {
  margin: 0 0 0.85rem;
  font-size: clamp(0.9rem, 1.5vw, 0.96rem);
  line-height: 1.68;
  color: rgba(26, 35, 41, 0.74);
}

.case-context-block__text p:last-child {
  margin-bottom: 0;
}

.case-context-block__visual {
  position: relative;
  margin: 0;
  min-height: clamp(220px, 34vw, 360px);
  background: #e8f0f1;
  overflow: hidden;
}

.case-context-block__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.45s ease;
}

.case-context-block__card:hover .case-context-block__visual img {
  transform: scale(1.03);
}

.case-context-block__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(0, 80, 90, 0.08) 0%, transparent 45%, rgba(4, 8, 12, 0.22) 100%);
}

.case-context-block__caption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 1;
  margin: 0;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(4, 10, 14, 0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* ── Approach step cards ── */
.case-approach-intro {
  position: relative;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.case-approach-intro::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(180px, 40%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(102, 255, 255, 0.35), transparent);
}

.case-step-stack {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.case-step-card.case-solution-row {
  border-radius: clamp(18px, 2.2vw, 24px);
  overflow: hidden;
  border: 1px solid rgba(102, 255, 255, 0.12);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: 0 24px 50px -32px rgba(0, 0, 0, 0.55);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.case-step-card.case-solution-row:hover {
  transform: translateY(-3px);
  border-color: rgba(102, 255, 255, 0.28);
  box-shadow: 0 32px 60px -28px rgba(0, 255, 255, 0.12);
}

.case-approach-panel .case-step-card + .case-step-card::before {
  display: none;
}

.case-band--approach .case-step-card .case-solutions__item {
  background: rgba(4, 10, 14, 0.35);
  border-left-color: rgba(102, 255, 255, 0.32);
}

.case-band--approach .case-step-card .case-solution-row__media::after {
  background: linear-gradient(90deg, rgba(4, 8, 12, 0.42) 0%, transparent 48%);
}

/* ── Result + outcome grid ── */
.case-result-head {
  position: relative;
  padding-bottom: 0.25rem;
}

.case-result-head::after {
  content: "";
  display: block;
  width: min(120px, 28%);
  height: 1px;
  margin: clamp(1rem, 2vw, 1.35rem) auto 0;
  background: linear-gradient(90deg, transparent, rgba(0, 140, 140, 0.35), transparent);
}

.case-outcome-grid {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .case-outcome-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.case-band--light .case-next.case-outcome {
  border-radius: clamp(18px, 2.2vw, 24px);
  padding: clamp(1.25rem, 2.5vw, 1.65rem);
  border: 1px solid rgba(0, 140, 140, 0.1);
  background: linear-gradient(160deg, #fff 0%, #f4fafa 100%);
  box-shadow: 0 22px 48px -30px rgba(0, 60, 68, 0.18);
}

.case-outcome-grid .case-outcome__card {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  height: 100%;
  padding: clamp(1rem, 2vw, 1.25rem) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0, 140, 140, 0.1) !important;
  background: #fff;
  box-shadow: 0 12px 28px -20px rgba(0, 50, 55, 0.14);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.case-outcome-grid .case-outcome__card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 140, 140, 0.24) !important;
  box-shadow: 0 18px 36px -18px rgba(0, 80, 90, 0.16);
}

.case-outcome-grid .case-outcome__icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  color: #008c8c;
  background: linear-gradient(145deg, rgba(0, 200, 200, 0.14) 0%, rgba(0, 168, 168, 0.08) 100%);
  border-color: rgba(0, 140, 140, 0.2);
}

.case-outcome-grid .case-outcome__text {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
  color: #1a2329;
  padding-top: 0;
}

.case-result-panel .case-page-nav--rich {
  margin-top: 0.25rem;
  border-radius: clamp(18px, 2.2vw, 24px);
  border: 1px solid rgba(0, 140, 140, 0.1);
  background: linear-gradient(160deg, #fff 0%, #f8fcfc 100%);
  box-shadow: 0 22px 48px -30px rgba(0, 60, 68, 0.16);
}

.case-page-nav__card {
  border-radius: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .case-page-nav__card {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.case-page-nav__card-visual {
  min-height: clamp(88px, 14vw, 110px);
}

.case-page-nav__card-body {
  padding: clamp(0.95rem, 2vw, 1.15rem) clamp(1rem, 2vw, 1.2rem);
}

.case-page-nav__card-name {
  font-size: clamp(0.92rem, 1.6vw, 1rem);
}

.legal {
  font-size: 0.94rem;
  line-height: 1.68;
  color: rgba(244, 248, 248, 0.82);
}

.legal h2 {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 2.25rem 0 0.65rem;
  color: var(--text-primary);
}

.legal h2:first-of-type {
  margin-top: 0.5rem;
}

.legal p,
.legal ul {
  margin: 0 0 1rem;
}

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

.legal a {
  color: var(--teal);
}

@media (max-width: 899px) {
  .page {
    margin-left: 0;
  }
}

/* ——— Reveal on scroll ——— */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ——— Diensten / Waarom Valtex page ——— */
.page--diensten,
.page--waarom-valtex,
.page--werk,
.page--website,
.page--reclame,
.page--seo {
  position: relative;
  overflow-x: clip;
  isolation: isolate;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
}

.page--diensten > *:not(.diensten-page-decor),
.page--waarom-valtex > *:not(.diensten-page-decor),
.page--werk > *:not(.diensten-page-decor),
.page--website > *:not(.diensten-page-decor),
.page--reclame > *:not(.diensten-page-decor),
.page--seo > *:not(.diensten-page-decor),
.page--contact > *:not(.diensten-page-decor) {
  position: relative;
  z-index: 1;
}

.diensten-page-decor {
  position: absolute;
  inset: 0;
  min-height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.diensten-page-decor__shape {
  position: absolute;
  filter: blur(56px);
  opacity: 0.2;
  border-radius: 38% 62% 72% 28% / 44% 36% 64% 56%;
  background: linear-gradient(
    125deg,
    rgba(45, 212, 191, 0.55) 0%,
    rgba(0, 255, 255, 0.35) 45%,
    rgba(13, 148, 136, 0.25) 100%
  );
  transform-origin: center center;
}

.diensten-page-decor__shape--1 {
  width: min(420px, 55vw);
  height: 72px;
  top: 8%;
  left: -6%;
  transform: rotate(-18deg);
}

.diensten-page-decor__shape--2 {
  width: min(520px, 70vw);
  height: 96px;
  top: 22%;
  right: -12%;
  transform: rotate(12deg);
  opacity: 0.16;
}

.diensten-page-decor__shape--3 {
  width: min(380px, 48vw);
  height: 64px;
  top: 42%;
  left: 10%;
  transform: rotate(28deg);
}

.diensten-page-decor__shape--4 {
  width: min(600px, 85vw);
  height: 88px;
  top: 58%;
  right: 5%;
  transform: rotate(-8deg);
  opacity: 0.14;
}

.diensten-page-decor__shape--5 {
  width: min(340px, 42vw);
  height: 110px;
  top: 72%;
  left: -4%;
  transform: rotate(42deg);
  border-radius: 55% 45% 60% 40% / 50% 55% 45% 50%;
}

.diensten-page-decor__shape--6 {
  width: min(480px, 62vw);
  height: 76px;
  top: 88%;
  right: -8%;
  transform: rotate(-32deg);
  opacity: 0.12;
}

.diensten-page-decor__shape--7 {
  width: min(280px, 40vw);
  height: 140px;
  top: 35%;
  left: 55%;
  transform: rotate(8deg) skewX(-6deg);
  opacity: 0.1;
}

.diensten-page-decor__shape--8 {
  width: min(360px, 50vw);
  height: 58px;
  top: 95%;
  left: 35%;
  transform: rotate(-22deg);
  opacity: 0.11;
}

@media (prefers-reduced-motion: reduce) {
  .diensten-page-decor__shape {
    filter: blur(40px);
  }
}

/* Diensten-hero: ~70% viewport-hoogte, volle breedte, gecentreerde copy */
.diensten-hero-simple {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  min-height: max(340px, 70vh);
  height: 70vh;
  max-height: min(920px, 78vh);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.diensten-hero-simple__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.diensten-hero-simple__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transform: scale(1.04);
  filter: none;
}

.diensten-hero-simple__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(12, 14, 18, 0.68) 0%,
    rgba(12, 14, 18, 0.48) 45%,
    rgba(10, 12, 16, 0.82) 100%
  );
}

/* Diensten + Waarom: desktop — iets donkerder hero-foto (extra lichte scrim-laag) */
@media (min-width: 900px) {
  #diensten-hero-cinema .diensten-hero-simple__scrim,
  #waarom-hero .diensten-hero-simple__scrim {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.08) 48%, rgba(0, 0, 0, 0.14) 100%),
      linear-gradient(
        180deg,
        rgba(12, 14, 18, 0.68) 0%,
        rgba(12, 14, 18, 0.48) 45%,
        rgba(10, 12, 16, 0.82) 100%
      );
  }
}

.diensten-hero-simple__inner {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: min(42rem, 100%);
  margin: 0 auto;
  padding: calc(var(--topbar-h) + 1.65rem) 1.5rem 2rem;
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 899px) {
  .diensten-hero-simple {
    margin-left: 0;
    width: 100%;
    min-height: min(480px, 72svh);
    height: auto;
    max-height: none;
    padding-block: 0.75rem 1rem;
  }

  .diensten-hero-simple__inner {
    max-width: none;
    padding-top: calc(var(--topbar-h) + 0.35rem);
    padding-bottom: max(1.15rem, env(safe-area-inset-bottom));
    padding-left: clamp(1rem, 5vw, 1.35rem);
    padding-right: clamp(1rem, 5vw, 1.35rem);
  }

  .diensten-hero-simple {
    padding-block: 0 0.5rem;
  }

  .diensten-hero-simple__media img {
    transform: scale(1.12);
    filter: blur(8px) saturate(1.06);
  }
}

.diensten-hero-simple__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.diensten-hero-simple__title {
  margin: 0 0 0.95rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2.05rem, 5.2vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.03em;
  width: 100%;
  filter: drop-shadow(0 2px 28px rgba(0, 0, 0, 0.45));
}

.diensten-hero-simple__title-line {
  display: block;
  font-weight: 700;
  padding-bottom: 0.05em;
  background: linear-gradient(105deg, #fff 0%, rgba(255, 255, 255, 0.95) 50%, rgba(0, 255, 255, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.diensten-hero-simple__title-line:first-child {
  padding-top: 0.04em;
}

.diensten-hero-simple__title-line:last-child {
  padding-bottom: 0.08em;
}

.diensten-hero-simple__lead {
  margin: 0;
  max-width: 38rem;
  font-size: clamp(1.02rem, 2.15vw, 1.14rem);
  line-height: 1.62;
  color: rgba(210, 220, 228, 0.9);
}

.diensten-hero-simple__lead strong {
  color: rgba(244, 248, 248, 0.95);
  font-weight: 600;
}

/* Diensten hero: desktop — zelfde uitlijning als voorheen (main-kolom) */
@media (min-width: 900px) {
  #diensten-hero-cinema.diensten-hero-simple {
    box-sizing: border-box;
    padding-left: var(--sidebar-w);
    padding-right: 1.5rem;
  }
}

#diensten-hero-cinema .diensten-hero-simple__inner {
  max-width: min(1480px, var(--content-max), 100%);
  width: 100%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  padding: calc(var(--topbar-h) + 1.65rem) clamp(1rem, 4vw, 1.5rem) 2rem;
  text-align: center;
  align-items: center;
}

@media (max-width: 899px) {
  #diensten-hero-cinema .diensten-hero-simple__inner {
    max-width: none;
    width: 100%;
    padding-left: clamp(1rem, 5vw, 1.35rem);
    padding-right: clamp(1rem, 5vw, 1.35rem);
    padding-top: calc(var(--topbar-h) + 0.35rem);
    padding-bottom: max(1.15rem, env(safe-area-inset-bottom));
  }
}

#diensten-hero-cinema .diensten-hero-simple__eyebrow {
  width: 100%;
  text-align: center;
}

#diensten-hero-cinema .diensten-hero-simple__title {
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-self: center;
  font-size: clamp(2.1rem, 5.4vw, 3.38rem);
  letter-spacing: 0.022em;
  max-width: 100%;
  width: 100%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  padding-inline: 0.12em;
  box-sizing: border-box;
  text-align: center;
}

#diensten-hero-cinema .diensten-hero-simple__title-line--single {
  display: inline-block;
  white-space: normal;
  max-width: 100%;
  padding-inline: 0.06em 0.14em;
  box-sizing: border-box;
  text-align: center;
}

@media (min-width: 640px) {
  #diensten-hero-cinema .diensten-hero-simple__title {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  #diensten-hero-cinema .diensten-hero-simple__title-line--single {
    white-space: nowrap;
  }
}

#diensten-hero-cinema .diensten-hero-simple__lead {
  max-width: min(46rem, 100%);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .diensten-hero-simple__media img {
    filter: blur(5px) saturate(1.04);
    transform: scale(1.06);
  }
}

/* ——— Diensten: split hero (professioneel, desktop 2-kolom) ——— */

.page--diensten .diensten-hero, .page--waarom-valtex .diensten-hero {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  min-height: max(460px, 88vh);
  max-height: min(1100px, 94vh);
  display: flex;
  align-items: center;
  overflow: visible;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.page--diensten .diensten-hero__bg, .page--waarom-valtex .diensten-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.page--diensten .diensten-hero__bg, .page--waarom-valtex .diensten-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transform: scale(1.03);
}

.page--waarom-valtex .diensten-hero__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.page--waarom-valtex .diensten-hero__bg img {
  object-position: center 42%;
}

.page--diensten .diensten-hero__scrim, .page--waarom-valtex .diensten-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(8, 12, 16, 0.92) 0%, rgba(8, 12, 16, 0.72) 42%, rgba(8, 12, 16, 0.55) 100%),
    linear-gradient(180deg, rgba(12, 14, 18, 0.5) 0%, rgba(10, 12, 16, 0.78) 100%);
}

.page--diensten .diensten-hero__glow, .page--waarom-valtex .diensten-hero__glow {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.55;
}

.page--diensten .diensten-hero__glow--tl, .page--waarom-valtex .diensten-hero__glow--tl {
  top: -8%;
  left: 18%;
  width: min(420px, 50vw);
  height: min(420px, 50vw);
  background: radial-gradient(circle, rgba(0, 255, 255, 0.22) 0%, transparent 68%);
}

.page--diensten .diensten-hero__glow--br, .page--waarom-valtex .diensten-hero__glow--br {
  right: 8%;
  bottom: -12%;
  width: min(360px, 44vw);
  height: min(360px, 44vw);
  background: radial-gradient(circle, rgba(0, 180, 200, 0.16) 0%, transparent 70%);
}

.page--diensten .diensten-hero__inner, .page--waarom-valtex .diensten-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  padding: calc(var(--topbar-h) + 1.75rem) clamp(1rem, 4vw, 1.5rem) 2.5rem;
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
}

.page--diensten .diensten-hero__grid, .page--waarom-valtex .diensten-hero__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: center;
  max-width: min(1280px, 100%);
  margin: 0 auto;
}

.page--diensten .diensten-hero__copy, .page--waarom-valtex .diensten-hero__copy {
  min-width: 0;
  text-align: left;
}

.page--diensten .diensten-hero__eyebrow, .page--waarom-valtex .diensten-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(180, 230, 230, 0.88);
}

.page--diensten .diensten-hero__eyebrow-dot, .page--waarom-valtex .diensten-hero__eyebrow-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.65);
}

.page--diensten .diensten-hero__title, .page--waarom-valtex .diensten-hero__title {
  margin: 0 0 1rem;
  font-weight: 800;
  font-size: clamp(2.15rem, 4.8vw, 3.45rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  gap: 0.05em;
}

.page--diensten .diensten-hero__title-line, .page--waarom-valtex .diensten-hero__title-line {
  display: block;
  color: #fff;
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.35);
}

.page--diensten .diensten-hero__title-line--accent, .page--waarom-valtex .diensten-hero__title-line--accent {
  background: linear-gradient(100deg, #fff 0%, rgba(180, 255, 255, 0.95) 38%, var(--teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-body--diensten .diensten-hero__lead,
.page--diensten .diensten-hero__lead, .page--waarom-valtex .diensten-hero__lead {
  margin: 0 0 1.35rem;
  max-width: 32rem;
  font-size: clamp(0.98rem, 1.85vw, 1.08rem);
  line-height: 1.58;
  color: rgba(210, 222, 230, 0.9);
}

.page--diensten .diensten-hero__actions, .page--waarom-valtex .diensten-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-bottom: 1.15rem;
}

.page--diensten .diensten-hero__cta-secondary.btn--ghost, .page--waarom-valtex .diensten-hero__cta-secondary.btn--ghost {
  color: rgba(244, 252, 252, 0.95);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
}

.page--diensten .diensten-hero__cta-secondary.btn--ghost:hover, .page--waarom-valtex .diensten-hero__cta-secondary.btn--ghost:hover,
.page--diensten .diensten-hero__cta-secondary.btn--ghost:focus-visible, .page--waarom-valtex .diensten-hero__cta-secondary.btn--ghost:focus-visible {
  color: var(--teal);
  border-color: rgba(0, 255, 255, 0.45);
  background: rgba(0, 255, 255, 0.1);
}

.page--diensten .diensten-hero__pills, .page--waarom-valtex .diensten-hero__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
  margin-bottom: 1.35rem;
}

.page--diensten .diensten-hero__pill, .page--waarom-valtex .diensten-hero__pill {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: rgba(232, 244, 246, 0.88);
  background: none;
  border: none;
  transition: color 0.2s ease;
}

.page--diensten .diensten-hero__pill:not(:last-child)::after,
.page--waarom-valtex .diensten-hero__pill:not(:last-child)::after {
  content: "·";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 255, 255, 0.55);
  pointer-events: none;
}

.page--diensten .diensten-hero__pill:hover, .page--waarom-valtex .diensten-hero__pill:hover,
.page--diensten .diensten-hero__pill:focus-visible, .page--waarom-valtex .diensten-hero__pill:focus-visible {
  color: #fff;
  border-color: transparent;
  background: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page--diensten .diensten-hero__stats, .page--waarom-valtex .diensten-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page--diensten .diensten-hero__stat, .page--waarom-valtex .diensten-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding-right: 1.25rem;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.page--diensten .diensten-hero__stat:last-child, .page--waarom-valtex .diensten-hero__stat:last-child {
  padding-right: 0;
  border-right: none;
}

.page--diensten .diensten-hero__stat-value, .page--waarom-valtex .diensten-hero__stat-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

.page--diensten .diensten-hero__stat-label, .page--waarom-valtex .diensten-hero__stat-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(180, 195, 205, 0.85);
  letter-spacing: 0.02em;
}

.page--diensten .diensten-hero__visual, .page--waarom-valtex .diensten-hero__visual {
  display: none;
  min-width: 0;
}

.page--diensten .diensten-hero__cards, .page--waarom-valtex .diensten-hero__cards {
  position: relative;
  min-height: 280px;
  max-width: 22rem;
  margin-left: auto;
}

.page--diensten .diensten-hero__card, .page--waarom-valtex .diensten-hero__card {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: min(100%, 17.5rem);
  padding: 1rem 1.1rem;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.15) inset,
    0 12px 40px -16px rgba(0, 0, 0, 0.55);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.page--diensten .diensten-hero__card:hover, .page--waarom-valtex .diensten-hero__card:hover,
.page--diensten .diensten-hero__card:focus-visible, .page--waarom-valtex .diensten-hero__card:focus-visible {
  border-color: rgba(0, 255, 255, 0.42);
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.12) inset,
    0 16px 44px -14px rgba(0, 120, 120, 0.45);
}

.page--diensten .diensten-hero__card--1, .page--waarom-valtex .diensten-hero__card--1 {
  top: 0;
  right: 2.5rem;
  z-index: 3;
}

.page--diensten .diensten-hero__card--2, .page--waarom-valtex .diensten-hero__card--2 {
  top: 5.5rem;
  right: 0;
  z-index: 2;
}

.page--diensten .diensten-hero__card--3, .page--waarom-valtex .diensten-hero__card--3 {
  top: 11rem;
  right: 1.75rem;
  z-index: 1;
}

.page--diensten .diensten-hero__card-num, .page--waarom-valtex .diensten-hero__card-num {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--teal);
}

.page--diensten .diensten-hero__card-title, .page--waarom-valtex .diensten-hero__card-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

.page--diensten .diensten-hero__card-meta, .page--waarom-valtex .diensten-hero__card-meta {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(190, 205, 215, 0.88);
}

.page--diensten .diensten-hero__scroll, .page--waarom-valtex .diensten-hero__scroll {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 1.15rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: rgba(200, 230, 230, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background 0.2s ease;
}

.page--diensten .diensten-hero__scroll:hover, .page--waarom-valtex .diensten-hero__scroll:hover,
.page--diensten .diensten-hero__scroll:focus-visible, .page--waarom-valtex .diensten-hero__scroll:focus-visible {
  color: var(--teal);
  border-color: rgba(0, 255, 255, 0.45);
  background: rgba(0, 255, 255, 0.1);
}

@media (min-width: 900px) {
  .page--diensten .diensten-hero, .page--waarom-valtex .diensten-hero {
    box-sizing: border-box;
    padding-left: var(--sidebar-w);
    padding-right: 1.5rem;
  }

  .page--diensten .diensten-hero__inner, .page--waarom-valtex .diensten-hero__inner {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
    padding-bottom: 3rem;
  }

  .page--diensten .diensten-hero__grid, .page--waarom-valtex .diensten-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .page--diensten .diensten-hero__visual, .page--waarom-valtex .diensten-hero__visual {
    display: block;
  }

  .page--diensten .diensten-hero__card--1:hover, .page--waarom-valtex .diensten-hero__card--1:hover {
    transform: translateY(-3px);
  }

  .page--diensten .diensten-hero__card--2:hover, .page--waarom-valtex .diensten-hero__card--2:hover {
    transform: translateY(-3px) translateX(-4px);
  }

  .page--diensten .diensten-hero__card--3:hover, .page--waarom-valtex .diensten-hero__card--3:hover {
    transform: translateY(-3px);
  }
}

@media (max-width: 899px) {
  .page--diensten .diensten-hero, .page--waarom-valtex .diensten-hero {
    margin-left: 0;
    width: 100%;
    min-height: min(600px, 86svh);
    max-height: none;
  }

  .page--diensten .diensten-hero__inner, .page--waarom-valtex .diensten-hero__inner {
    padding-top: calc(var(--topbar-h) + 0.5rem);
    padding-left: clamp(1rem, 5vw, 1.35rem);
    padding-right: clamp(1rem, 5vw, 1.35rem);
    padding-bottom: max(2.75rem, env(safe-area-inset-bottom));
  }

  .page--diensten .diensten-hero__copy, .page--waarom-valtex .diensten-hero__copy {
    text-align: center;
  }

  .page--diensten .diensten-hero__eyebrow, .page--waarom-valtex .diensten-hero__eyebrow {
    justify-content: center;
  }

  .page--diensten .diensten-hero__title, .page--waarom-valtex .diensten-hero__title {
    align-items: center;
  }

  .page--diensten .diensten-hero__lead, .page--waarom-valtex .diensten-hero__lead {
    margin-left: auto;
    margin-right: auto;
  }

  .page--diensten .diensten-hero__actions, .page--waarom-valtex .diensten-hero__actions {
    justify-content: center;
  }

  .page--diensten .diensten-hero__pills, .page--waarom-valtex .diensten-hero__pills {
    justify-content: center;
  }

  .page--diensten .diensten-hero__stats, .page--waarom-valtex .diensten-hero__stats {
    justify-content: center;
  }

  .page--diensten .diensten-hero__stat, .page--waarom-valtex .diensten-hero__stat {
    align-items: center;
    text-align: center;
    padding-right: 0.85rem;
  }

  .page--diensten .diensten-hero__bg, .page--waarom-valtex .diensten-hero__bg img {
    transform: scale(1.1);
    filter: blur(6px) saturate(1.05);
  }

  .page--diensten .diensten-hero__scrim, .page--waarom-valtex .diensten-hero__scrim {
    background:
      linear-gradient(180deg, rgba(8, 12, 16, 0.88) 0%, rgba(8, 12, 16, 0.78) 55%, rgba(8, 12, 16, 0.92) 100%);
  }
}

/* Diensten + Waarom Valtex hero: mobiel — 80svh, grotere H1, rustige spacing */
@media (max-width: 899px) {
  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema.diensten-hero {
    --diensten-hero-top-shift: clamp(2.25rem, 17svh, 7rem);
    --diensten-hero-bottom-shift: clamp(1.65rem, 12svh, 5.25rem);
    min-height: 80svh;
    height: 80svh;
    max-height: 80svh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    padding-top: calc(var(--topbar-h) + 0.85rem);
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    box-sizing: border-box;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    text-align: center;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__eyebrow {
    margin-top: var(--diensten-hero-top-shift);
    margin-bottom: 1rem;
    font-size: clamp(0.64rem, 2.8vw, 0.72rem);
    letter-spacing: 0.14em;
    white-space: normal;
    max-width: 100%;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__title {
    margin-bottom: 1.15rem;
    gap: 0.14em;
    font-size: clamp(2.05rem, 8.2vw, 2.85rem);
    line-height: 1.08;
    letter-spacing: -0.024em;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__title-line {
    white-space: normal;
    text-wrap: balance;
    max-width: 100%;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__lead {
    font-size: clamp(0.88rem, 3.35vw, 0.98rem);
    line-height: 1.58;
    margin-bottom: 1.4rem;
    max-width: 100%;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__actions {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.65rem;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__actions .btn {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    font-size: clamp(0.8rem, 3.2vw, 0.88rem);
    padding: 0.68rem 1.15rem;
    justify-content: center;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__pills {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    margin-top: auto;
    padding-top: clamp(0.65rem, 2.5svh, 1.15rem);
    margin-bottom: clamp(0.55rem, 2svh, 0.85rem);
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0.2rem;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__pills::-webkit-scrollbar {
    display: none;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__pill {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: clamp(0.68rem, 2.8vw, 0.76rem);
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__stats {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(0.5rem, 3vw, 0.85rem);
    max-width: 100%;
    margin-top: 0;
    margin-bottom: var(--diensten-hero-bottom-shift);
    padding-top: 0;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__stat {
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    padding-right: clamp(0.4rem, 2vw, 0.75rem);
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__stat:last-child {
    padding-right: 0;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__stat-value {
    font-size: clamp(0.82rem, 3.25vw, 0.95rem);
    white-space: nowrap;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__stat-label {
    font-size: clamp(0.62rem, 2.35vw, 0.7rem);
    white-space: nowrap;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__scroll {
    bottom: max(0.85rem, env(safe-area-inset-bottom));
  }
}

@media (max-width: 899px) and (max-height: 700px) {
  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema.diensten-hero {
    --diensten-hero-top-shift: clamp(1.5rem, 12svh, 4.5rem);
    --diensten-hero-bottom-shift: clamp(1.15rem, 9svh, 3.75rem);
  }
}

@media (max-width: 430px) {
  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema.diensten-hero {
    --diensten-hero-top-shift: clamp(1.85rem, 15svh, 5.75rem);
    --diensten-hero-bottom-shift: clamp(1.35rem, 11.5svh, 4.5rem);
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__inner {
    padding-top: calc(var(--topbar-h) + 0.65rem);
    padding-left: clamp(0.9rem, 4vw, 1.1rem);
    padding-right: clamp(0.9rem, 4vw, 1.1rem);
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__title {
    font-size: clamp(1.9rem, 7.6vw, 2.5rem);
    margin-bottom: 1rem;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__lead {
    font-size: clamp(0.84rem, 3.1vw, 0.92rem);
    margin-bottom: 1.2rem;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__actions .btn {
    font-size: 0.78rem;
    padding: 0.62rem 1rem;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__pill {
    font-size: 0.66rem;
    padding: 0.34rem 0.72rem;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__stat-value {
    font-size: 0.78rem;
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__stat-label {
    font-size: 0.58rem;
  }
}

@media (max-width: 390px) and (max-height: 700px) {
  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema.diensten-hero {
    --diensten-hero-top-shift: clamp(1.25rem, 11svh, 3.75rem);
    --diensten-hero-bottom-shift: clamp(1rem, 8svh, 3rem);
  }

  .page--diensten #diensten-hero-cinema, .page--waarom-valtex #waarom-hero-cinema .diensten-hero__lead {
    margin-bottom: 1rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .page--diensten .diensten-hero__card--1, .page--waarom-valtex .diensten-hero__card--1 {
    animation: diensten-hero-card-float 5s ease-in-out infinite;
  }

  .page--diensten .diensten-hero__card--2, .page--waarom-valtex .diensten-hero__card--2 {
    animation: diensten-hero-card-float 5.6s ease-in-out 0.4s infinite;
  }

  .page--diensten .diensten-hero__card--3, .page--waarom-valtex .diensten-hero__card--3 {
    animation: diensten-hero-card-float 6.2s ease-in-out 0.8s infinite;
  }
}

@keyframes diensten-hero-card-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page--diensten .diensten-hero__card--1, .page--waarom-valtex .diensten-hero__card--1,
  .page--diensten .diensten-hero__card--2, .page--waarom-valtex .diensten-hero__card--2,
  .page--diensten .diensten-hero__card--3, .page--waarom-valtex .diensten-hero__card--3 {
    animation: none;
  }
}

/* Website / Online reclame: tekstblokken zonder glas-card (diensten-pagina ongewijzigd) */
.page--website .service-showcase__card,
.page--reclame .service-showcase__card,
.page--seo .service-showcase__card {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: clamp(1rem, 2.5vw, 1.75rem) 0;
}

@media (min-width: 900px) {
  .page--website .service-showcase__card,
  .page--reclame .service-showcase__card,
  .page--seo .service-showcase__card {
    padding: clamp(1.25rem, 3vw, 2.25rem) 0;
    gap: clamp(1.75rem, 4vw, 3rem);
  }
}

.page--website .service-showcase__list li,
.page--website .service-showcase__list li:first-child,
.page--reclame .service-showcase__list li,
.page--reclame .service-showcase__list li:first-child,
.page--seo .service-showcase__list li,
.page--seo .service-showcase__list li:first-child {
  border-top: none;
  border-bottom: none;
}

/* Online reclame / SEO-pagina: kernsplit (beeld + service-showcase-typografie) */
.page--reclame .reclame-seo-split,
.page--seo .seo-kern-split {
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3rem);
}

.page--reclame .reclame-seo-split__inner,
.page--seo .seo-kern-split__inner {
  display: grid;
  gap: clamp(1.35rem, 3vw, 2rem);
  align-items: center;
}

@media (min-width: 900px) {
  .page--reclame .reclame-seo-split__inner,
  .page--seo .seo-kern-split__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: clamp(1.75rem, 4vw, 2.75rem);
  }
}

.page--reclame .reclame-seo-split__media,
.page--seo .seo-kern-split__media {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  aspect-ratio: 4 / 3;
  background: #0a0e10;
  box-shadow: 0 20px 48px -28px rgba(0, 0, 0, 0.55);
}

.page--reclame .reclame-seo-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  display: block;
  transform: none;
  filter: none;
}

@media (max-width: 899px) {
  /* Reclame eerste blok: scherp beeld op mobiel (zelfde als desktop / SEO-kern) */
  .page--reclame .reclame-seo-split__media img {
    transform: none;
    filter: none;
  }
}

/* SEO eerste blok: scherp beeld (geen blur), zelfde schaal als .service-showcase__media */
.page--seo .seo-kern-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: none;
  filter: none;
}

.page--reclame .reclame-seo-split__text,
.page--seo .seo-kern-split__text {
  min-height: 0;
}

.page--reclame .reclame-footnote,
.page--seo .seo-footnote {
  margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(170, 186, 198, 0.88);
  max-width: min(44rem, 100%);
}

.page--reclame .reclame-footnote a,
.page--seo .seo-footnote a {
  color: rgba(102, 255, 255, 0.9);
  text-underline-offset: 3px;
}

/* Onze werken (werk.html): split hero — copy links, 3D-afgeronde foto rechts */
.werk-hero-split {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  min-height: max(360px, 68vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 100% 70% at 88% 18%, rgba(0, 255, 255, 0.07), transparent 52%),
    linear-gradient(165deg, rgba(16, 18, 22, 0.98) 0%, rgba(8, 10, 14, 1) 55%, var(--bg-deep) 100%);
}

.werk-hero-split__glow {
  position: absolute;
  inset: -20% -10% auto 40%;
  height: min(70vw, 520px);
  background: radial-gradient(circle, rgba(0, 255, 255, 0.12) 0%, transparent 58%);
  pointer-events: none;
  z-index: 0;
}

.werk-hero-split__wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3.25rem, 8vw, 5rem);
  align-items: center;
  min-width: 0;
  padding-top: calc(var(--topbar-h) + 2rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.25rem);
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

@media (min-width: 900px) {
  .werk-hero-split__wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: clamp(3.75rem, 8.5vw, 7rem);
  }
}

/* Smalle / middelgrote desktop: meer ruimte + minder 3D — voorkomt dat beeld over de H1 valt */
@media (min-width: 900px) and (max-width: 1320px) {
  .werk-hero-split__wrap {
    column-gap: clamp(2rem, 4.5vw, 3.5rem);
    gap: clamp(2.25rem, 5vw, 4.25rem);
  }

  .werk-hero-split__copy {
    position: relative;
    z-index: 2;
    padding-right: clamp(0.35rem, 2vw, 1.25rem);
  }

  .werk-hero-split__prism-face {
    transform: rotateY(-2deg) rotateX(1deg);
  }
}

/* Regionale SEO-landings: meer ruimte voor copy, compactere H1 — geen overlap met hero-beeld */
.werk-hero-split--seo-landing .werk-hero-split__title-line--row1 {
  white-space: normal;
  text-wrap: balance;
}

@media (min-width: 900px) {
  .werk-hero-split--seo-landing .werk-hero-split__wrap {
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
    column-gap: clamp(2.5rem, 5.5vw, 5.75rem);
  }

  .werk-hero-split--seo-landing .werk-hero-split__copy {
    max-width: min(39rem, 100%);
    padding-right: clamp(0.85rem, 2.8vw, 2.35rem);
  }

  .werk-hero-split--seo-landing .werk-hero-split__title {
    font-size: clamp(1.82rem, 4.35vw, 2.95rem);
    letter-spacing: 0.012em;
  }

  .werk-hero-split--seo-landing .werk-hero-split__lead {
    font-size: clamp(0.98rem, 1.85vw, 1.06rem);
    max-width: min(40rem, 100%);
  }

  .werk-hero-split--seo-landing .werk-hero-split__figure {
    max-width: min(620px, 100%);
  }

  .werk-hero-split--seo-landing .werk-hero-split__prism-face {
    transform: rotateY(-3deg) rotateX(1.5deg);
  }
}

@media (min-width: 900px) and (max-width: 1320px) {
  .werk-hero-split--seo-landing .werk-hero-split__copy {
    padding-right: clamp(1.1rem, 3.2vw, 2.5rem);
  }
}

.werk-hero-split__copy {
  text-align: center;
  max-width: min(40rem, 100%);
  margin-inline: auto;
}

@media (min-width: 900px) {
  .werk-hero-split__copy {
    text-align: left;
    margin-inline: 0;
    justify-self: start;
    max-width: min(36rem, 100%);
  }
}

.werk-hero-split__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.werk-hero-split__title {
  margin: 0 0 1rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2.15rem, 5.5vw, 3.55rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 2px 36px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.02em;
}

@media (min-width: 900px) {
  .werk-hero-split__title {
    align-items: flex-start;
  }
}

.werk-hero-split__title-line {
  display: block;
}

.werk-hero-split__title-line--row1 {
  white-space: normal;
  text-wrap: balance;
}

.werk-hero-split__title-line--row2 {
  margin-top: -0.02em;
}

@media (min-width: 640px) {
  .werk-hero-split__title-line--row1 {
    white-space: nowrap;
  }
}

.werk-hero-split__lead {
  margin: 0;
  font-size: clamp(1.02rem, 2.1vw, 1.12rem);
  line-height: 1.62;
  color: rgba(210, 220, 228, 0.9);
}

.werk-hero-split__lead strong {
  color: rgba(244, 248, 248, 0.95);
  font-weight: 600;
}

.werk-hero-split__figure {
  margin: 0;
  max-width: min(640px, 100%);
  margin-inline: auto;
  justify-self: center;
}

@media (min-width: 900px) {
  .werk-hero-split__figure {
    justify-self: end;
    max-width: min(720px, 100%);
    width: 100%;
  }
}

.werk-hero-split__prism {
  position: relative;
  perspective: 1600px;
  perspective-origin: 50% 48%;
  /* Minimale padding rond het beeld (geen extra ruimte voor verwijderde prism-edge) */
  padding: 0.15rem;
}

.werk-hero-split__prism-face {
  position: relative;
  z-index: 2;
  transform: rotateY(-5deg) rotateX(2deg);
  transform-style: preserve-3d;
  border-radius: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 32px 72px -28px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(0, 255, 255, 0.1) inset,
    0 0 56px -12px rgba(0, 255, 255, 0.14);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s ease;
}

.werk-hero-split__prism-img-wrap {
  position: relative;
  z-index: 2;
  border-radius: inherit;
  overflow: hidden;
  background: transparent;
}

/* Hero: meerdere PNG’s — crossfade + lichte 3D-wissel (zie data-werk-hero-slides + main.js) */
.werk-hero-split__prism-img-wrap[data-werk-hero-slides] {
  aspect-ratio: 16 / 9;
}

.werk-hero-split__prism-img-wrap[data-werk-hero-slides] .werk-hero-split__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  transform: rotateY(-10deg) scale(0.97);
  transform-origin: 48% 50%;
  transition:
    opacity 0.85s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.85s cubic-bezier(0.33, 1, 0.68, 1);
  z-index: 0;
}

.werk-hero-split__prism-img-wrap[data-werk-hero-slides] .werk-hero-split__slide.is-active {
  opacity: 1;
  transform: rotateY(0deg) scale(1);
  z-index: 2;
}

.werk-hero-split__slide .werk-hero-split__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transform: scale(1.02);
  filter: none;
}

.werk-hero-split__prism-img-wrap:not([data-werk-hero-slides]) .werk-hero-split__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 0;
  transform: scale(1.02);
  filter: none;
}

@media (min-width: 900px) {
  .werk-hero-split:hover .werk-hero-split__prism-face {
    transform: rotateY(-4deg) rotateX(1.5deg) translateY(-2px);
    box-shadow:
      0 38px 80px -26px rgba(0, 0, 0, 0.75),
      0 0 0 1px rgba(0, 255, 255, 0.14) inset,
      0 0 60px -10px rgba(0, 255, 255, 0.18);
  }
}

@media (min-width: 900px) and (max-width: 1320px) {
  .werk-hero-split:hover .werk-hero-split__prism-face {
    transform: rotateY(-2.5deg) rotateX(1deg) translateY(-2px);
    box-shadow:
      0 38px 80px -26px rgba(0, 0, 0, 0.75),
      0 0 0 1px rgba(0, 255, 255, 0.14) inset,
      0 0 60px -10px rgba(0, 255, 255, 0.18);
  }
}

@media (max-width: 899px) {
  /* Mobiel: zelfde taal als Diensten-hero — beeld vol achtergrond, copy gecentreerd boven scrim */
  .werk-hero-split {
    margin-left: 0;
    width: 100%;
    min-height: min(480px, 72svh);
    height: auto;
    overflow: hidden;
    overflow-x: clip;
    align-items: stretch;
    background:
      radial-gradient(ellipse 90% 60% at 50% 0%, rgba(0, 255, 255, 0.06), transparent 50%),
      linear-gradient(180deg, rgba(8, 10, 14, 0.35) 0%, rgba(8, 10, 14, 0.15) 45%, rgba(8, 10, 14, 0.55) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .werk-hero-split .werk-hero-split__wrap.container {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    position: relative;
    z-index: 2;
    min-height: min(480px, 72svh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: clamp(1rem, 5vw, 1.35rem);
    padding-right: clamp(1rem, 5vw, 1.35rem);
    padding-top: calc(var(--topbar-h) + 0.35rem);
    padding-bottom: max(1.15rem, env(safe-area-inset-bottom));
    gap: 0;
  }

  .werk-hero-split .werk-hero-split__wrap.container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(12, 14, 18, 0.62) 0%,
      rgba(12, 14, 18, 0.42) 42%,
      rgba(10, 12, 16, 0.84) 100%
    );
  }

  .werk-hero-split__glow {
    inset: -28% -15% auto 50%;
    height: min(65vw, 340px);
    opacity: 0.32;
    transform: translateX(-50%);
  }

  .werk-hero-split__copy {
    position: relative;
    z-index: 3;
    max-width: min(36rem, 100%);
    width: 100%;
    text-align: center;
  }

  .werk-hero-split__title {
    font-size: clamp(1.58rem, 8.2vw, 2.35rem);
    line-height: 1.14;
    align-items: center;
    filter: drop-shadow(0 2px 24px rgba(0, 0, 0, 0.5));
  }

  .werk-hero-split__title-line--row1 {
    white-space: normal;
  }

  .werk-hero-split__lead {
    max-width: 36rem;
    margin-inline: auto;
    font-size: clamp(0.88rem, 3.8vw, 1.02rem);
    line-height: 1.58;
  }

  .werk-hero-split__figure {
    position: absolute;
    inset: 0;
    z-index: 0;
    max-width: none;
    width: 100%;
    height: 100%;
    margin: 0;
    pointer-events: none;
  }

  .werk-hero-split__prism {
    height: 100%;
    padding: 0;
    width: 100%;
    max-width: none;
    perspective: none;
  }

  .werk-hero-split__prism-face {
    transform: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    height: 100%;
    min-height: 100%;
  }

  .werk-hero-split:hover .werk-hero-split__prism-face {
    transform: none;
  }

  .werk-hero-split__prism-img-wrap[data-werk-hero-slides] {
    aspect-ratio: unset;
    height: 100%;
    min-height: 100%;
  }

  .werk-hero-split__prism-img-wrap[data-werk-hero-slides] .werk-hero-split__slide {
    transform: scale(1.02);
    transform-origin: center center;
  }

  .werk-hero-split__prism-img-wrap[data-werk-hero-slides] .werk-hero-split__slide.is-active {
    transform: none;
  }

  .werk-hero-split__slide .werk-hero-split__img {
    object-position: center 38%;
    transform: scale(1.06);
    filter: blur(7px) saturate(1.05);
  }

  /* Zelfde cinema-layout zonder data-werk-hero-slides (o.a. Website-pagina) */
  .werk-hero-split__prism-img-wrap:not([data-werk-hero-slides]) {
    height: 100%;
    min-height: 100%;
    aspect-ratio: unset;
  }

  .werk-hero-split__prism-img-wrap:not([data-werk-hero-slides]) .werk-hero-split__img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center 38%;
    aspect-ratio: unset;
    transform: scale(1.06);
    filter: blur(7px) saturate(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .werk-hero-split__prism-face {
    transform: none;
    transition: none;
  }

  .werk-hero-split:hover .werk-hero-split__prism-face {
    transform: none;
  }

  .werk-hero-split__prism-img-wrap[data-werk-hero-slides] .werk-hero-split__slide {
    position: relative;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .werk-hero-split__prism-img-wrap[data-werk-hero-slides] .werk-hero-split__slide:not(:first-child) {
    display: none;
  }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .werk-hero-split__prism-img-wrap[data-werk-hero-slides] .werk-hero-split__slide {
    position: absolute;
    inset: 0;
    transform: none;
    display: block;
  }

  .werk-hero-split__prism-img-wrap[data-werk-hero-slides] .werk-hero-split__slide:not(.is-active) {
    opacity: 0;
    visibility: hidden;
  }

  .werk-hero-split__prism-img-wrap[data-werk-hero-slides] .werk-hero-split__slide.is-active {
    opacity: 1;
    visibility: visible;
  }

  .werk-hero-split__slide .werk-hero-split__img {
    transform: none;
  }

  .werk-hero-split__prism-img-wrap:not([data-werk-hero-slides]) .werk-hero-split__img {
    transform: none;
  }
}

/* Onze werken (werk.html): portfolio showcase — mosaic van echte cases */
.werk-hero-showcase {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  min-height: max(420px, 72vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
  background:
    radial-gradient(ellipse 90% 60% at 8% 0%, rgba(0, 255, 255, 0.1), transparent 52%),
    radial-gradient(ellipse 75% 55% at 95% 90%, rgba(0, 168, 168, 0.08), transparent 48%),
    linear-gradient(168deg, #0c1014 0%, #080b0f 42%, #05080c 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.werk-hero-showcase__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, transparent 88%);
}

.werk-hero-showcase__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

.werk-hero-showcase__wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
  min-width: 0;
  padding-top: calc(var(--topbar-h) + 1.75rem);
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

@media (min-width: 900px) {
  .werk-hero-showcase {
    min-height: auto;
    justify-content: flex-start;
  }

  .werk-hero-showcase__wrap {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    gap: clamp(1.75rem, 3.5vw, 2.75rem);
    padding-top: calc(var(--topbar-h) + clamp(1.5rem, 2.5vw, 2.25rem));
    padding-bottom: 0.65rem;
  }

  .werk-hero-showcase__copy {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .werk-hero-showcase__mosaic {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .werk-hero-showcase__marquee {
    margin-top: 0;
  }
}

.werk-hero-showcase__copy {
  text-align: center;
  max-width: min(36rem, 100%);
  margin-inline: auto;
}

@media (min-width: 900px) {
  .werk-hero-showcase__copy {
    text-align: left;
    margin-inline: 0;
    justify-self: start;
  }
}

.werk-hero-showcase__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(180, 230, 230, 0.9);
}

.werk-hero-showcase__eyebrow-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.55);
  animation: werk-hero-showcase-pulse 2.4s ease-in-out infinite;
}

@keyframes werk-hero-showcase-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.65;
    transform: scale(0.88);
  }
}

.werk-hero-showcase__title {
  margin: 0 0 0.9rem;
  font-weight: 800;
  font-size: clamp(2rem, 5.2vw, 3.35rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  display: flex;
  flex-direction: column;
  gap: 0.04em;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.35);
}

.werk-hero-showcase__title-line {
  display: block;
}

.werk-hero-showcase__title-line--accent {
  background: linear-gradient(105deg, #fff 0%, rgba(180, 255, 255, 0.95) 45%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.werk-hero-showcase__lead {
  margin: 0 0 1.25rem;
  max-width: 32rem;
  font-size: clamp(0.98rem, 1.9vw, 1.08rem);
  line-height: 1.62;
  color: rgba(210, 222, 230, 0.88);
}

.werk-hero-showcase__lead strong {
  color: rgba(244, 248, 250, 0.95);
  font-weight: 600;
}

.werk-hero-showcase__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .werk-hero-showcase__actions {
    justify-content: flex-start;
  }
}

.werk-hero-showcase__cta-ghost.btn--ghost {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}

.werk-hero-showcase__cta-ghost.btn--ghost:hover,
.werk-hero-showcase__cta-ghost.btn--ghost:focus-visible {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.92);
}

.werk-hero-showcase__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  justify-content: center;
}

@media (min-width: 900px) {
  .werk-hero-showcase__tags {
    justify-content: flex-start;
  }
}

.werk-hero-showcase__tags > li {
  display: inline-flex;
  align-items: center;
}

.werk-hero-showcase__tags > li:not(:last-child)::after {
  content: "·";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 255, 255, 0.55);
}

.werk-hero-showcase__tag {
  display: inline;
  padding: 0;
  border-radius: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(232, 244, 246, 0.88);
  background: none;
  border: none;
  box-shadow: none;
}

.werk-hero-showcase__mosaic {
  position: relative;
  min-height: clamp(280px, 42vw, 420px);
  max-width: min(560px, 100%);
  margin-inline: auto;
  perspective: 1200px;
}

@media (min-width: 900px) {
  .werk-hero-showcase__mosaic {
    max-width: none;
    min-height: clamp(320px, 36vw, 440px);
    margin-inline: 0;
    justify-self: end;
    width: 100%;
  }
}

.werk-hero-showcase__tile {
  position: absolute;
  display: block;
  text-decoration: none;
  border-radius: clamp(14px, 2vw, 20px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 22px 48px -20px rgba(15, 23, 42, 0.35),
    0 0 0 1px rgba(15, 23, 42, 0.06);
  transition:
    transform 0.45s var(--ease-out),
    box-shadow 0.45s ease,
    z-index 0s;
  background: #fff;
}

.werk-hero-showcase__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  aspect-ratio: 16 / 10;
  transition: transform 0.5s var(--ease-out);
}

.werk-hero-showcase__tile-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.65rem 0.75rem;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 12, 16, 0.82) 100%);
}

.werk-hero-showcase__tile-cat {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(180, 230, 230, 0.9);
}

.werk-hero-showcase__tile-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

.werk-hero-showcase__tile-badge {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 3;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 168, 168, 0.25);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.werk-hero-showcase__tile--left {
  width: min(52%, 240px);
  left: 0;
  top: 14%;
  transform: rotate(-7deg) translateZ(-40px);
  z-index: 1;
}

.werk-hero-showcase__tile--center {
  width: min(68%, 320px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 3;
  box-shadow:
    0 32px 64px -24px rgba(15, 23, 42, 0.42),
    0 0 0 1px rgba(0, 168, 168, 0.18),
    0 0 48px -12px rgba(0, 168, 168, 0.2);
}

.werk-hero-showcase__tile--right {
  width: min(50%, 230px);
  right: 0;
  top: 18%;
  transform: rotate(8deg) translateZ(-30px);
  z-index: 2;
}

.werk-hero-showcase__tile:hover,
.werk-hero-showcase__tile:focus-visible {
  z-index: 4;
  box-shadow:
    0 28px 56px -18px rgba(15, 23, 42, 0.4),
    0 0 0 1px rgba(0, 168, 168, 0.28);
}

.werk-hero-showcase__tile--left:hover,
.werk-hero-showcase__tile--left:focus-visible {
  transform: rotate(-4deg) translateY(-6px) translateZ(0);
}

.werk-hero-showcase__tile--center:hover,
.werk-hero-showcase__tile--center:focus-visible {
  transform: translate(-50%, calc(-50% - 8px)) scale(1.02);
}

.werk-hero-showcase__tile--right:hover,
.werk-hero-showcase__tile--right:focus-visible {
  transform: rotate(5deg) translateY(-6px) translateZ(0);
}

.werk-hero-showcase__tile:hover img,
.werk-hero-showcase__tile:focus-visible img {
  transform: scale(1.04);
}

.werk-hero-showcase__marquee {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 0.85rem 0 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.werk-hero-showcase__marquee-inner {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  --werk-marquee-groups: 2;
  --werk-marquee-duration: 36s;
  animation: werk-hero-showcase-marquee var(--werk-marquee-duration) linear infinite;
}

.werk-hero-showcase__marquee-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2.75rem;
  padding-right: 2.75rem;
}

.werk-hero-showcase__marquee-item {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  white-space: nowrap;
}

.werk-hero-showcase__marquee-item::before {
  content: "◆";
  margin-right: 0.65rem;
  color: rgba(0, 255, 255, 0.75);
  font-size: 0.5rem;
  vertical-align: middle;
}

@keyframes werk-hero-showcase-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-100% / var(--werk-marquee-groups)), 0, 0);
  }
}

@media (max-width: 899px) {
  .werk-hero-showcase {
    margin-left: 0;
    width: 100%;
    min-height: auto;
    justify-content: flex-start;
    overflow: visible;
  }

  .werk-hero-showcase__wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: calc(var(--topbar-h) + 1.25rem);
    padding-bottom: 1rem;
    gap: 0;
  }

  .werk-hero-showcase__tags {
    margin-top: 0.85rem;
  }

  .werk-hero-showcase__mosaic {
    position: relative;
    display: block;
    width: 100%;
    max-width: min(420px, 94vw);
    min-height: clamp(300px, 88vw, 380px);
    margin-top: 1.25rem;
    margin-inline: auto;
    perspective: none;
    overflow: visible;
  }

  .werk-hero-showcase__tile {
    position: absolute;
  }

  .werk-hero-showcase__tile img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .werk-hero-showcase__tile-meta {
    padding: 0.6rem 0.7rem;
  }

  .werk-hero-showcase__tile-cat {
    font-size: 0.58rem;
  }

  .werk-hero-showcase__tile-name {
    font-size: 0.72rem;
  }

  .werk-hero-showcase__tile--left {
    width: 56%;
    left: 0;
    top: 10%;
    transform: rotate(-7deg);
    z-index: 1;
  }

  .werk-hero-showcase__tile--center {
    width: 74%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    box-shadow:
      0 28px 56px -22px rgba(15, 23, 42, 0.42),
      0 0 0 1px rgba(0, 168, 168, 0.18),
      0 0 40px -12px rgba(0, 168, 168, 0.18);
  }

  .werk-hero-showcase__tile--right {
    width: 54%;
    right: 0;
    left: auto;
    top: 14%;
    transform: rotate(8deg);
    z-index: 2;
  }

  .werk-hero-showcase__tile--left:hover,
  .werk-hero-showcase__tile--left:focus-visible {
    transform: rotate(-4deg) translateY(-4px);
  }

  .werk-hero-showcase__tile--center:hover,
  .werk-hero-showcase__tile--center:focus-visible {
    transform: translate(-50%, calc(-50% - 6px)) scale(1.02);
  }

  .werk-hero-showcase__tile--right:hover,
  .werk-hero-showcase__tile--right:focus-visible {
    transform: rotate(5deg) translateY(-4px);
  }

  .werk-hero-showcase__marquee {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .werk-hero-showcase__eyebrow-dot {
    animation: none;
  }

  .werk-hero-showcase__marquee-inner {
    animation: none;
  }

  .werk-hero-showcase__tile,
  .werk-hero-showcase__tile img {
    transition: none;
  }
}

.page__inner--diensten-wide {
  max-width: min(1480px, 100%);
}

/* Onze werken: intro vóór portfolio — wat een case toont */
.werk-cases-intro {
  position: relative;
  z-index: 1;
  padding: clamp(2.75rem, 6.5vw, 4.25rem) 0;
  background: linear-gradient(180deg, #f4f7f8 0%, #ffffff 100%);
}

.werk-cases-intro__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 40% at 100% 0%, rgba(0, 168, 168, 0.08), transparent 55%),
    radial-gradient(ellipse 50% 35% at 0% 100%, rgba(0, 168, 168, 0.05), transparent 50%);
}

.werk-cases-intro__layout {
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .werk-cases-intro__layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 4.5vw, 3.5rem);
  }
}

.werk-cases-intro__collage {
  position: relative;
  min-height: clamp(300px, 42vw, 400px);
  max-width: min(520px, 100%);
  margin-inline: auto;
}

@media (min-width: 900px) {
  .werk-cases-intro__collage {
    margin-inline: 0;
    max-width: none;
  }
}

.werk-cases-intro__preview {
  position: absolute;
  display: block;
  text-decoration: none;
  border-radius: clamp(14px, 2vw, 18px);
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 20px 48px -24px rgba(15, 23, 42, 0.35);
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.4s ease;
  background: #fff;
}

.werk-cases-intro__preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  aspect-ratio: 16 / 10;
  transition: transform 0.45s var(--ease-out);
}

.werk-cases-intro__preview-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 0.7rem;
  background: linear-gradient(180deg, transparent, rgba(8, 12, 16, 0.88));
}

.werk-cases-intro__preview-cat {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(180, 230, 230, 0.9);
}

.werk-cases-intro__preview-name {
  font-size: 0.76rem;
  font-weight: 700;
  color: #fff;
}

.werk-cases-intro__preview-kpi {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--cyan);
}

.werk-cases-intro__preview--main {
  width: min(78%, 380px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  box-shadow:
    0 28px 56px -20px rgba(15, 23, 42, 0.4),
    0 0 0 1px rgba(0, 168, 168, 0.2);
}

.werk-cases-intro__preview--side {
  width: min(48%, 220px);
  left: 0;
  top: 8%;
  transform: rotate(-6deg);
  z-index: 1;
}

.werk-cases-intro__preview--side2 {
  width: min(46%, 210px);
  right: 0;
  bottom: 6%;
  transform: rotate(7deg);
  z-index: 2;
}

.werk-cases-intro__preview:hover,
.werk-cases-intro__preview:focus-visible {
  z-index: 4;
  box-shadow: 0 32px 60px -18px rgba(15, 23, 42, 0.42);
}

.werk-cases-intro__preview--main:hover,
.werk-cases-intro__preview--main:focus-visible {
  transform: translate(-50%, calc(-50% - 6px)) scale(1.02);
}

.werk-cases-intro__preview--side:hover,
.werk-cases-intro__preview--side:focus-visible {
  transform: rotate(-3deg) translateY(-4px);
}

.werk-cases-intro__preview--side2:hover,
.werk-cases-intro__preview--side2:focus-visible {
  transform: rotate(4deg) translateY(-4px);
}

.werk-cases-intro__preview:hover img,
.werk-cases-intro__preview:focus-visible img {
  transform: scale(1.03);
}

.werk-cases-intro__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}

.werk-cases-intro__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-wrap: balance;
}

.werk-cases-intro__accent {
  color: var(--teal);
}

.werk-cases-intro__lead {
  margin: 0 0 1.2rem;
  font-size: clamp(0.94rem, 1.8vw, 1.04rem);
  line-height: 1.62;
  color: var(--muted);
}

.werk-cases-intro__lead strong {
  color: var(--text-strong);
  font-weight: 600;
}

.werk-cases-intro__list {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 1.3rem;
  padding: 0;
  list-style: none;
}

.werk-cases-intro__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 28px -22px rgba(15, 23, 42, 0.15);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--muted);
}

.werk-cases-intro__item strong {
  color: var(--text-primary);
  font-weight: 700;
}

.werk-cases-intro__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  color: var(--teal);
  background: rgba(0, 184, 184, 0.1);
  border: 1px solid rgba(0, 168, 168, 0.18);
}

.werk-cases-intro__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  margin: 0 0 1.35rem;
  padding: clamp(0.9rem, 2vw, 1.15rem) clamp(0.85rem, 2vw, 1.25rem);
  list-style: none;
  border-radius: 16px;
  background: linear-gradient(125deg, rgba(0, 184, 184, 0.09) 0%, rgba(255, 255, 255, 0.98) 48%, #fff 100%);
  border: 1px solid rgba(0, 140, 140, 0.16);
  box-shadow: 0 14px 40px -26px rgba(0, 70, 75, 0.22);
}

@media (min-width: 640px) {
  .werk-cases-intro__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem 0.85rem;
  }
}

.werk-cases-intro__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  text-align: center;
  padding: 0.35rem 0.25rem;
  min-width: 0;
}

.werk-cases-intro__stat-value {
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--teal);
}

.werk-cases-intro__stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--muted);
}

.werk-cases-intro__stat-kw {
  color: var(--teal);
  font-weight: 700;
}

.werk-cases-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.werk-cases-intro__ghost.btn--ghost {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.85);
}

/* Onze werken: cases-grid (hergebruikt home-cases) */
.page--werk .werk-cases.home-cases {
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.page--werk .werk-cases__head {
  text-align: center;
  margin-inline: auto;
}

.page--werk .werk-cases__grid {
  margin-top: 0;
}

.page--werk .werk-cases__aside {
  max-width: min(40rem, 100%);
}

@media (min-width: 900px) {
  .page--werk .werk-cases__grid .home-cases__card {
    min-height: 100%;
  }
}

@media (max-width: 899px) {
  .werk-cases-intro__copy {
    text-align: center;
  }

  .werk-cases-intro__eyebrow {
    text-align: center;
  }

  .werk-cases-intro__actions {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
  }

  .werk-cases-intro__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.55rem 0.5rem;
    font-size: 0.72rem;
  }

  .werk-cases-intro__actions .btn--header-cta__main {
    font-size: 0.68rem;
    line-height: 1.15;
    white-space: normal;
  }

  .werk-cases-intro__stats {
    max-width: 22rem;
    margin-inline: auto;
  }

  .werk-cases-intro__collage {
    display: none;
  }

  .werk-cases-intro__layout {
    gap: 0;
  }

  .page--werk .werk-cases-intro {
    padding-top: clamp(1.15rem, 3.5vw, 1.5rem);
    padding-bottom: clamp(2rem, 5vw, 2.75rem);
  }
}

/* ——— Diensten: kwaliteitsblok (foto’s + info vóór prijzen) ——— */
.diensten-quality {
  position: relative;
  z-index: 1;
  margin-top: -1px;
  margin-bottom: 0;
  padding: clamp(2.5rem, 6vw, 4rem) 0 0;
  background:
    linear-gradient(180deg, #ffffff 0%, #f4f8f9 55%, #eef4f5 100%);
  border-bottom: none;
}

.diensten-quality__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  padding-bottom: clamp(2rem, 5vw, 3rem);
}

.diensten-quality__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  align-items: center;
}

@media (min-width: 900px) {
  .diensten-quality__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 4vw, 3rem);
  }

  .diensten-quality__visual {
    order: -1;
  }
}

.diensten-quality__mosaic {
  position: relative;
  max-width: 26rem;
  margin: 0 auto;
  min-height: 18rem;
}

@media (min-width: 900px) {
  .diensten-quality__mosaic {
    margin: 0;
    max-width: none;
    min-height: 22rem;
  }
}

.diensten-quality__photo {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 20px 50px -24px rgba(0, 50, 55, 0.35);
}

.diensten-quality__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.diensten-quality__photo--main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}

@media (min-width: 900px) {
  .diensten-quality__photo--main {
    max-width: none;
    margin: 0;
  }
}

.diensten-quality__float-badge {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  max-width: min(11.5rem, 46vw);
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 168, 168, 0.28);
  box-shadow: 0 12px 32px -14px rgba(0, 80, 85, 0.35);
}

.diensten-quality__float-badge--tl {
  left: 0;
  top: 10%;
}

.diensten-quality__float-badge--br {
  right: 0;
  bottom: 8%;
  left: auto;
  top: auto;
  text-align: right;
}

.diensten-quality__float-badge--br .diensten-quality__float-label {
  max-width: 9.5rem;
  line-height: 1.3;
  text-wrap: balance;
}

.diensten-quality__float-value {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  color: var(--teal);
  letter-spacing: -0.02em;
}

.diensten-quality__float-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.diensten-quality__eyebrow {
  margin-bottom: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--teal-dim);
}

.diensten-quality__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-wrap: balance;
}

.diensten-quality__title-accent {
  color: var(--teal);
  font-weight: 800;
}

.diensten-quality__lead {
  margin: 0 0 1.35rem;
  font-size: clamp(0.98rem, 1.8vw, 1.08rem);
  line-height: 1.62;
  color: var(--muted);
  max-width: 38rem;
}

.diensten-quality__lead strong {
  color: var(--text-primary);
  font-weight: 600;
}

.diensten-quality__title--mobile,
.diensten-quality__lead--mobile {
  display: none;
}

.diensten-quality__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .diensten-quality__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
}

/* Mobiel: 4 kwaliteitskaarten horizontaal scrollen */
@media (max-width: 899px) {
  .page--diensten .diensten-quality {
    overflow: visible;
  }

  .page--diensten .diensten-quality__title--desktop,
  .page--diensten .diensten-quality__lead--desktop {
    display: none;
  }

  .page--diensten .diensten-quality__title--mobile,
  .page--diensten .diensten-quality__lead--mobile {
    display: block;
  }

  .page--diensten .diensten-quality__title {
    font-size: clamp(1.35rem, 5.2vw, 1.65rem);
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }

  .page--diensten .diensten-quality__lead {
    font-size: clamp(0.88rem, 3.35vw, 0.96rem);
    line-height: 1.55;
    margin-bottom: 1.1rem;
  }

  .page--diensten .diensten-quality__content {
    min-width: 0;
    overflow: visible;
  }

  .page--diensten .diensten-quality__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(0.75rem, 3vw, 1rem);
    margin-left: calc(-1 * clamp(1rem, 4.5vw, 1.35rem));
    margin-right: calc(-1 * clamp(1rem, 4.5vw, 1.35rem));
    padding-left: clamp(1rem, 4.5vw, 1.35rem);
    padding-right: clamp(1rem, 4.5vw, 1.35rem);
    padding-bottom: 0.35rem;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(1rem, 4.5vw, 1.35rem);
    scrollbar-width: none;
  }

  .page--diensten .diensten-quality__list::-webkit-scrollbar {
    display: none;
  }

  .page--diensten .diensten-quality__list > .diensten-quality__item {
    flex: 0 0 min(86vw, 18.5rem);
    max-width: min(86vw, 18.5rem);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 0;
    align-self: stretch;
  }

  .page--diensten .diensten-quality__item:hover {
    transform: none;
  }
}

.diensten-quality__item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0, 140, 140, 0.14);
  box-shadow: 0 10px 28px -20px rgba(0, 60, 65, 0.28);
  transition:
    transform 0.25s var(--ease-out),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.diensten-quality__item:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 168, 168, 0.35);
  box-shadow: 0 14px 32px -18px rgba(0, 100, 105, 0.3);
}

.diensten-quality__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 10px;
  color: var(--teal);
  background: rgba(0, 184, 184, 0.1);
  border: 1px solid rgba(0, 168, 168, 0.2);
}

.diensten-quality__item-title {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}

.diensten-quality__item-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

.diensten-quality__steps {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: clamp(1rem, 2.5vw, 1.35rem);
  list-style: none;
  border-radius: 18px;
  background: linear-gradient(125deg, rgba(0, 184, 184, 0.1) 0%, rgba(255, 255, 255, 0.95) 42%, #fff 100%);
  border: 1px solid rgba(0, 140, 140, 0.18);
  box-shadow: 0 16px 44px -28px rgba(0, 70, 75, 0.28);
}

.diensten-quality__steps--stats {
  gap: 0.85rem 1rem;
}

@media (min-width: 480px) {
  .diensten-quality__steps--stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobiel: stats onder foto — 2×2 grid */
@media (max-width: 719px) {
  .diensten-quality__steps--stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.65rem;
    padding: 0.85rem 0.65rem;
  }

  .diensten-quality__steps--stats .diensten-quality__step {
    padding: 0.45rem 0.35rem;
    min-width: 0;
  }

  .diensten-quality__steps--stats .diensten-quality__step-value {
    font-size: clamp(1.37rem, 4.7vw, 1.76rem);
  }

  .diensten-quality__steps--stats .diensten-quality__step-label {
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.5;
  }
}

@media (max-width: 430px) {
  .diensten-quality__steps--stats {
    gap: 0.45rem 0.5rem;
    padding: 0.72rem 0.5rem;
  }

  .diensten-quality__steps--stats .diensten-quality__step-value {
    font-size: clamp(1.24rem, 4.2vw, 1.5rem);
  }
}

@media (max-width: 899px) {
  .page--diensten .diensten-quality__steps--stats {
    background: #fff;
  }

  .page--diensten .diensten-quality__steps--stats .diensten-quality__step-label {
    font-weight: 400;
  }
}

@media (min-width: 720px) {
  .diensten-quality__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

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

.diensten-quality__step {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.35rem 0.5rem;
}

.diensten-quality__steps--stats .diensten-quality__step {
  align-items: center;
  text-align: center;
  padding: 0.5rem 0.35rem;
}

.diensten-quality__step-value {
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--teal);
}

.diensten-quality__step-label {
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--muted);
}

.diensten-quality__step-num {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--teal);
}

.diensten-quality__step-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.diensten-quality__step-text {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}

.diensten-quality.js-service-reveal {
  transform: translateY(1.75rem);
}

.diensten-quality.js-service-reveal.is-visible {
  transform: translateY(0);
}

.page-diensten__content {
  padding-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-bottom: 0.25rem;
}

.page-diensten__content--after-teal {
  padding-top: clamp(2rem, 4.5vw, 2.75rem);
}

/* ——— Diensten: teal dienstenblok (websites) ——— */
.diensten-svc-teal {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  margin-top: -1px;
  overflow: hidden;
  color: var(--text-inverse);
}

.diensten-svc-teal__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, #005a5a 0%, var(--teal-dim) 32%, var(--teal) 58%, #00b0b0 100%);
}

.diensten-svc-teal__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 92% 8%, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 45% 50% at 4% 92%, rgba(0, 255, 255, 0.18) 0%, transparent 52%);
}

.diensten-svc-teal__inner {
  position: relative;
  z-index: 1;
  padding: clamp(2.25rem, 5.5vw, 3.5rem) clamp(1rem, 4vw, 1.5rem);
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
}

.diensten-svc-teal__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .diensten-svc-teal {
    padding-left: var(--sidebar-w);
    padding-right: 1.5rem;
    box-sizing: border-box;
  }

  .diensten-svc-teal__inner {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }

  .diensten-svc-teal__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 4vw, 3rem);
  }
}

.diensten-svc-teal__media {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 24px 56px -22px rgba(0, 35, 40, 0.65);
  aspect-ratio: 4 / 3;
}

.diensten-svc-teal__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.diensten-svc-teal__media-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--teal-dim);
  background: #fff;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.35);
}

.diensten-svc-teal__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(220, 255, 255, 0.95);
}

.diensten-svc-teal__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.55rem, 3.5vw, 2.15rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

.diensten-svc-teal__title-kw {
  color: #fff;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.55);
  text-underline-offset: 0.16em;
  text-decoration-thickness: 2px;
}

.diensten-svc-teal__lead {
  margin: 0 0 1.1rem;
  font-size: clamp(0.95rem, 1.7vw, 1.06rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.9);
  max-width: 36rem;
}

.diensten-svc-teal__lead strong {
  color: #fff;
  font-weight: 700;
}

.diensten-svc-teal__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.diensten-svc-teal__chips li {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  background: none;
  border: none;
}

.diensten-svc-teal__chips li:not(:last-child)::after {
  content: "·";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.45);
}

.diensten-svc-teal__list {
  margin: 0 0 1.35rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

@media (min-width: 560px) {
  .diensten-svc-teal__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
  }
}

.diensten-svc-teal__list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}

.diensten-svc-teal__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.65);
}

.diensten-svc-teal__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.diensten-svc-teal__price {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.diensten-svc-teal__price-label {
  font-size: clamp(0.62rem, 1.6vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(220, 255, 255, 0.88);
  line-height: 1.25;
  max-width: 14rem;
}

.diensten-svc-teal__price-value {
  font-size: clamp(2rem, 5vw, 2.65rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}

.diensten-svc-teal__price-note {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}

.diensten-svc-teal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.diensten-svc-teal__btn-ghost.btn--ghost {
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.08);
}

.diensten-svc-teal__btn-ghost.btn--ghost:hover,
.diensten-svc-teal__btn-ghost.btn--ghost:focus-visible {
  color: var(--teal-dim);
  background: #fff;
  border-color: #fff;
}

.diensten-svc-teal__btn-primary {
  box-shadow: 0 10px 32px -10px rgba(0, 0, 0, 0.45);
}

@media (max-width: 899px) {
  .diensten-svc-teal {
    margin-left: 0;
    width: 100%;
  }

  .diensten-svc-teal__inner {
    padding-left: clamp(1rem, 5vw, 1.35rem);
    padding-right: clamp(1rem, 5vw, 1.35rem);
  }
}

.diensten-svc-teal.js-service-reveal {
  transform: translateX(-2rem);
}

.diensten-svc-teal.js-service-reveal.is-visible {
  transform: translateX(0);
}

/* Teal blok na wit CRM: geen witte spleet */
.diensten-svc-light--crm + .diensten-svc-teal {
  margin-top: -1px;
}

/* Wit SEO-blok na teal reclame: geen witte spleet */
.diensten-svc-teal--ads + .diensten-svc-light--seo {
  margin-top: -1px;
}

/* Teal audit na wit SEO: geen witte spleet */
.diensten-svc-light--seo + .diensten-svc-teal--audit {
  margin-top: -1px;
}

/* Wit branding na teal audit: geen witte spleet */
.diensten-svc-teal--audit + .diensten-svc-light--brand {
  margin-top: -1px;
}

/* Wit branding → teal formulier: geen witte spleet */
.diensten-svc-light--brand + .home-audit--teal {
  margin-top: -1px;
}

/* Teal formulier → footer: geen witte spleet (diensten) */
.page-body--diensten .page--diensten > .home-audit--teal:last-child {
  margin-bottom: 0;
}

.page-body--diensten main.page--diensten + .footer {
  margin-top: 0;
}

/* Wit cases-blok → teal formulier: geen spleet */
.page--werk .werk-cases + .home-audit--teal,
.page--contact .contact-about + .home-audit--teal,
.page--wlm .wlm-trust-wrap + .home-audit.wlm-audit,
.page--case-study .page__inner--diensten-wide + .case-home-audit {
  margin-top: -1px;
}

/* ——— Diensten / Waarom / Werk: home-audit formulier op teal ——— */
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  margin-top: -1px;
  padding: 0;
  overflow: hidden;
  color: var(--text-inverse);
  border-top: none;
  background: transparent;
  --home-audit-muted: rgba(220, 255, 255, 0.88);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, #005a5a 0%, var(--teal-dim) 32%, var(--teal) 58%, #00b0b0 100%);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 92% 8%, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 45% 50% at 4% 92%, rgba(0, 255, 255, 0.18) 0%, transparent 52%);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__inner {
  position: relative;
  z-index: 1;
  padding: clamp(2.25rem, 5.5vw, 3.5rem) clamp(1rem, 4vw, 1.5rem);
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
}

@media (min-width: 900px) {
  :is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal {
    padding-left: var(--sidebar-w);
    padding-right: 1.5rem;
    box-sizing: border-box;
  }

  :is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__inner {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__title-left,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__form-title {
  color: #fff;
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__title-accent,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__kw {
  color: #fff;
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__title-accent {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 0.14em;
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__lead strong {
  color: #fff;
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .btn--phone-cta {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 8px 28px -16px rgba(0, 35, 40, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .btn--phone-cta .btn--phone-cta__icon {
  color: #fff;
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .btn--phone-cta:hover,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .btn--phone-cta:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.55);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__stats li {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 12px 32px -20px rgba(0, 35, 40, 0.45);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__stat-value {
  color: var(--teal-dim);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__stat-label {
  color: rgba(26, 35, 41, 0.62);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__stats--company .home-audit__stat-sub {
  color: rgba(26, 35, 41, 0.68);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__stats--company a.home-audit__stat-sub:hover {
  color: var(--teal-dim);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__outcomes li {
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  border: none;
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__benefits li::before {
  background: #fff;
}

/* Toggle boven formulier op teal: witte tekst */
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell > .form-mode-toggle {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: none;
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .form-mode-toggle__btn {
  color: #fff;
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .form-mode-toggle__btn:hover,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .form-mode-toggle__btn:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .form-mode-toggle__btn.is-active,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .form-mode-toggle__btn.is-active:hover,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .form-mode-toggle__btn.is-active:focus-visible {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.22);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.42) inset,
    0 6px 22px -10px rgba(0, 40, 45, 0.4);
}

/* Witte afgeronde kaarten: formulier + online gesprek */
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .form-mode-panel--form,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .form-mode-panel--book {
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(0, 140, 140, 0.14);
  box-shadow: 0 28px 64px -32px rgba(0, 35, 40, 0.5);
  overflow: hidden;
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .form-mode-panel--form {
  padding: 0;
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .form-mode-panel--book {
  padding: clamp(1rem, 2.5vw, 1.35rem);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: auto;
  color-scheme: light;
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .form-mode-panel--book::after {
  display: none;
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__form.cta-form {
  padding: clamp(1rem, 2.5vw, 1.35rem);
  border-radius: 20px;
  background: #fff;
  border: none;
  box-shadow: none;
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__form .cta-form__field span,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .form-mode-panel--book .cta-form__field span {
  color: rgba(26, 35, 41, 0.62);
  font-size: 0.78rem;
  font-weight: 600;
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__form input,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__form select,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__form textarea,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .form-mode-panel--book input,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .form-mode-panel--book select,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .form-mode-panel--book textarea {
  font-size: 0.9rem;
  padding: 0.72rem 0.9rem;
  border-radius: 11px;
  border: 1px solid rgba(0, 140, 140, 0.2);
  background: #fff;
  color: var(--text-primary);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__form input::placeholder,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__form textarea::placeholder,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .form-mode-panel--book input::placeholder,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .form-mode-panel--book textarea::placeholder {
  color: rgba(26, 35, 41, 0.38);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__form input:focus,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__form select:focus,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__form textarea:focus,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .form-mode-panel--book input:focus,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .form-mode-panel--book select:focus,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .form-mode-panel--book textarea:focus {
  border-color: rgba(0, 154, 154, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 184, 184, 0.12);
  background: #fff;
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .form-mode-panel--book select {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23008c8c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.5rem;
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .vtx-meet-step__title,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .vtx-meet-calnav__label {
  color: var(--text-primary);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .vtx-meet-step__lead,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .vtx-meet-wizard__progress,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .vtx-meet-cal__dow,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .vtx-meet-cal__status,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .vtx-meet-optional {
  color: rgba(26, 35, 41, 0.62);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .vtx-meet-calnav__btn.btn--ghost,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .vtx-meet-back.btn--ghost {
  color: var(--teal-dim);
  background: #fff;
  border: 1px solid rgba(0, 140, 140, 0.24);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .vtx-meet-calnav__btn.btn--ghost:hover,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .vtx-meet-calnav__btn.btn--ghost:focus-visible,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .vtx-meet-back.btn--ghost:hover,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form-booking-shell .vtx-meet-back.btn--ghost:focus-visible {
  color: var(--teal-dim);
  background: rgba(0, 184, 184, 0.06);
  border-color: rgba(0, 154, 154, 0.4);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__form .cta-form__note {
  font-size: 0.7rem;
  color: rgba(26, 35, 41, 0.62);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .home-audit__form .cta-form__note a {
  color: var(--teal);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form__flash--success,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .form-booking__flash--success {
  color: #0d5c4a;
  background: rgba(0, 184, 184, 0.12);
  border: 1px solid rgba(0, 140, 140, 0.2);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .cta-form__flash--error,
:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .form-booking__flash--err {
  color: #9f1239;
  background: rgba(255, 92, 92, 0.1);
  border: 1px solid rgba(255, 92, 92, 0.22);
}

:is(.page-body--diensten, .page--waarom-valtex, .page--werk, .page--contact, .page--wlm, .page--case-study) .home-audit--teal .form-booking__flash {
  color: rgba(26, 35, 41, 0.75);
  border-radius: 12px;
}

/* Audit-dashboard op teal: volledige UI zichtbaar */
.diensten-svc-teal--audit .diensten-svc-teal__media {
  aspect-ratio: 1024 / 624;
  background: linear-gradient(180deg, #f8fcfc 0%, #eef6f6 100%);
}

.diensten-svc-teal--audit .diensten-svc-teal__media img {
  object-fit: contain;
  object-position: center;
}

/* Tekst links, foto rechts (body eerst in HTML) */
@media (min-width: 900px) {
  .diensten-svc-teal__grid--body-first {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

/* ——— Diensten: licht dienstenblok (CRM — tekst links, foto rechts) ——— */
.diensten-svc-light {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  margin-top: 0;
  background: #fff;
  border-top: none;
  border-bottom: 1px solid rgba(0, 140, 140, 0.1);
}

.diensten-svc-light__inner {
  padding: clamp(2.25rem, 5.5vw, 3.5rem) clamp(1rem, 4vw, 1.5rem);
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
}

.diensten-svc-light__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .diensten-svc-light {
    padding-left: var(--sidebar-w);
    padding-right: 1.5rem;
    box-sizing: border-box;
  }

  .diensten-svc-light__inner {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }

  .diensten-svc-light__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 4vw, 3rem);
  }
}

.diensten-svc-light__media {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0, 140, 140, 0.16);
  box-shadow: 0 20px 50px -24px rgba(0, 50, 55, 0.22);
  aspect-ratio: 4 / 3;
}

.diensten-svc-light__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CRM-dashboard: volledige breedte van kolom, UI niet afgesneden links/rechts */
.diensten-svc-light--crm .diensten-svc-light__media {
  aspect-ratio: 1024 / 682;
  max-width: none;
  margin: 0;
  background: linear-gradient(180deg, #f6fafb 0%, #eef4f5 100%);
}

.diensten-svc-light--crm .diensten-svc-light__media img {
  object-fit: contain;
  object-position: center;
  padding: 0;
  box-sizing: border-box;
}

/* SEO-dashboard: volledige UI zichtbaar, niet afgesneden */
.diensten-svc-light--seo .diensten-svc-light__media {
  aspect-ratio: 1024 / 741;
  max-width: none;
  margin: 0;
  background: linear-gradient(180deg, #f6fafb 0%, #eef4f5 100%);
}

.diensten-svc-light--seo .diensten-svc-light__media img {
  object-fit: contain;
  object-position: center;
  padding: 0;
  box-sizing: border-box;
}

.diensten-svc-light__media-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--teal-dim);
  background: #fff;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.25);
}

.diensten-svc-light__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-dim);
}

.diensten-svc-light__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-wrap: balance;
}

.diensten-svc-light__title-kw {
  color: var(--teal);
}

.diensten-svc-light__lead {
  margin: 0 0 1.1rem;
  font-size: clamp(0.95rem, 1.7vw, 1.06rem);
  line-height: 1.62;
  color: var(--muted);
  max-width: 36rem;
}

.diensten-svc-light__lead strong {
  color: var(--text-primary);
  font-weight: 600;
}

.diensten-svc-light__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.diensten-svc-light__chips li {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--teal-dim);
  background: none;
  border: none;
}

.diensten-svc-light__chips li:not(:last-child)::after {
  content: "·";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 154, 154, 0.45);
}

.diensten-svc-light__list {
  margin: 0 0 1.35rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

@media (min-width: 560px) {
  .diensten-svc-light__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
  }
}

.diensten-svc-light__list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
}

.diensten-svc-light__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--teal);
}

.diensten-svc-light__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(0, 140, 140, 0.14);
}

.diensten-svc-light__price-label {
  font-size: clamp(0.62rem, 1.6vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.25;
}

.diensten-svc-light__price-value {
  font-size: clamp(2rem, 5vw, 2.65rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--teal);
}

.diensten-svc-light__price-note {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
}

.diensten-svc-light__price {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.diensten-svc-light__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.diensten-svc-light__btn-ghost.btn--ghost {
  color: var(--teal-dim);
  border-color: rgba(0, 168, 168, 0.35);
  background: rgba(0, 184, 184, 0.06);
}

.diensten-svc-light__btn-ghost.btn--ghost:hover,
.diensten-svc-light__btn-ghost.btn--ghost:focus-visible {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
}

@media (max-width: 899px) {
  .diensten-svc-light {
    margin-left: 0;
    width: 100%;
  }

  .diensten-svc-light__inner {
    padding-left: clamp(1rem, 5vw, 1.35rem);
    padding-right: clamp(1rem, 5vw, 1.35rem);
  }
}

.diensten-svc-light.js-service-reveal {
  transform: translateX(2rem);
}

.diensten-svc-light.js-service-reveal.is-visible {
  transform: translateX(0);
}

/* Diensten dienstenblokken mobiel: foto → tekst → prijs → knoppen */
@media (max-width: 899px) {
  .page--diensten .diensten-svc-teal__grid,
  .page--diensten .diensten-svc-light__grid {
    display: flex;
    flex-direction: column;
    gap: clamp(1.15rem, 4vw, 1.65rem);
  }

  .page--diensten .diensten-svc-teal__media,
  .page--diensten .diensten-svc-light__media {
    order: 1;
    width: 100%;
  }

  .page--diensten .diensten-svc-teal__body,
  .page--diensten .diensten-svc-light__body {
    order: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
  }

  .page--diensten .diensten-svc-teal__eyebrow,
  .page--diensten .diensten-svc-light__eyebrow {
    order: 1;
  }

  .page--diensten .diensten-svc-teal__title,
  .page--diensten .diensten-svc-light__title {
    order: 2;
  }

  .page--diensten .diensten-svc-teal__lead,
  .page--diensten .diensten-svc-light__lead {
    order: 3;
    margin-bottom: 0.95rem;
  }

  .page--diensten .diensten-svc-teal__chips,
  .page--diensten .diensten-svc-light__chips {
    order: 4;
    margin-bottom: 0.75rem;
  }

  .page--diensten .diensten-svc-teal__list,
  .page--diensten .diensten-svc-light__list {
    order: 5;
    margin-bottom: 0.25rem;
  }

  .page--diensten .diensten-svc-teal__footer,
  .page--diensten .diensten-svc-light__footer {
    order: 6;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    margin-top: 0.65rem;
    padding-top: 1rem;
  }

  .page--diensten .diensten-svc-teal__price,
  .page--diensten .diensten-svc-light__price {
    order: 1;
    width: 100%;
  }

  .page--diensten .diensten-svc-teal__actions,
  .page--diensten .diensten-svc-light__actions {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
  }

  .page--diensten .diensten-svc-teal__actions .btn,
  .page--diensten .diensten-svc-light__actions .btn {
    width: 100%;
    flex: none;
    justify-content: center;
  }
}

@media (max-width: 430px) {
  .page--diensten .diensten-svc-teal__title,
  .page--diensten .diensten-svc-light__title {
    font-size: clamp(1.28rem, 5.2vw, 1.55rem);
  }

  .page--diensten .diensten-svc-teal__lead,
  .page--diensten .diensten-svc-light__lead {
    font-size: clamp(0.78rem, 2.85vw, 0.88rem);
  }

  .page--diensten .diensten-svc-teal__price-value,
  .page--diensten .diensten-svc-light__price-value {
    font-size: clamp(1.65rem, 6.5vw, 2rem);
  }

  .page--diensten .diensten-svc-teal__actions .btn,
  .page--diensten .diensten-svc-light__actions .btn {
    font-size: clamp(0.72rem, 2.75vw, 0.82rem);
    padding: 0.58rem 0.85rem;
  }
}

.diensten-intro-heading {
  margin: 0 auto 2.75rem;
  max-width: min(46rem, 100%);
  text-align: center;
  font-family: var(--font-sans);
  font-size: clamp(1.28rem, 2.9vw, 1.8rem);
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.diensten-intro-heading__accent {
  color: var(--teal);
  font-weight: 700;
}

.diensten-intro-heading__sub {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.82em;
  font-weight: 500;
  line-height: 1.58;
  color: var(--muted);
  letter-spacing: 0;
}

.service-showcase {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.service-showcase__card {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  align-items: center;
  padding: clamp(1.35rem, 3vw, 2rem);
  border-radius: 22px;
  background: rgba(10, 14, 18, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 48px -24px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.service-showcase--img-left .service-showcase__media {
  order: -1;
}

@media (min-width: 900px) {
  .service-showcase__card {
    grid-template-columns: 1fr 1fr;
    padding: clamp(1.75rem, 3vw, 2.35rem) clamp(1.75rem, 3vw, 2.5rem);
  }
}

@media (max-width: 899px) {
  .page--diensten .service-showcase--img-left .service-showcase__media,
  .page--website .service-showcase--img-left .service-showcase__media,
  .page--reclame .service-showcase--img-left .service-showcase__media,
  .page--seo .service-showcase--img-left .service-showcase__media {
    order: 0;
  }
}

/* Online reclame: mobiel — eerste kernblok als overige: tekst boven, beeld gecentreerd eronder */
@media (max-width: 899px) {
  .page--reclame .reclame-seo-split__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.35rem, 3vw, 2rem);
  }

  .page--reclame .reclame-seo-split__text {
    order: 1;
    width: 100%;
    max-width: min(40rem, 100%);
    text-align: center;
  }

  .page--reclame .reclame-seo-split__text .service-showcase__list {
    text-align: left;
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
  }

  .page--reclame .reclame-seo-split__text .service-showcase__cta-row {
    justify-content: center;
  }

  .page--reclame .reclame-seo-split__media {
    order: 2;
    width: 100%;
    max-width: min(22rem, 94%);
    margin-left: auto;
    margin-right: auto;
  }
}

/* SEO-pagina: mobiel — kernblok: tekst boven, beeld gecentreerd eronder */
@media (max-width: 899px) {
  .page--seo .seo-kern-split__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.35rem, 3vw, 2rem);
  }

  .page--seo .seo-kern-split__text {
    order: 1;
    width: 100%;
    max-width: min(40rem, 100%);
    text-align: center;
  }

  .page--seo .seo-kern-split__text .service-showcase__list {
    text-align: left;
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
  }

  .page--seo .seo-kern-split__text .service-showcase__cta-row {
    justify-content: center;
  }

  .page--seo .seo-kern-split__media {
    order: 2;
    width: 100%;
    max-width: min(40rem, 100%);
    margin-left: auto;
    margin-right: auto;
  }
}

.service-showcase__text {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.service-showcase__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--teal);
  text-shadow: none;
}

.service-showcase__desc {
  margin: 0 0 1.15rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--muted);
}

.service-showcase__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}

.service-showcase__list li {
  position: relative;
  padding: 0.62rem 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.service-showcase__list li:first-child {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.service-showcase__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1.15rem;
  width: 100%;
}

.service-showcase__link {
  display: inline-block;
  margin-bottom: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  text-underline-offset: 3px;
}

.service-showcase__link:hover {
  color: var(--teal);
  text-decoration: underline;
}

.service-showcase__price.btn.btn--header-cta {
  min-width: 11.5rem;
  flex-shrink: 0;
  text-decoration: none;
}

.service-showcase__price.btn .btn--header-cta__main {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.service-showcase__media {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  aspect-ratio: 4 / 3;
  background: #0a0e10;
}

.service-showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 599px) {
  .service-showcase__cta-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .service-showcase__cta-row .service-showcase__link {
    text-align: left;
    flex: 1;
    min-width: 0;
    padding-right: 0.5rem;
  }

  .service-showcase__price.btn.btn--header-cta {
    min-width: 0;
    flex-shrink: 0;
  }
}

.page-actions--diensten {
  margin-top: 0.5rem;
  margin-bottom: 2.5rem;
}

.cta-section--diensten-bottom {
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}

.cta-section__inner--diensten-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.cta-section__form-head {
  text-align: center;
  max-width: 36rem;
}

.cta-section__form-head--diensten {
  max-width: min(52rem, 100%);
}

.cta-section__title--diensten-form {
  font-size: clamp(1.65rem, 4vw, 2.45rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
  margin: 0 0 1rem;
}

.cta-section__form-lead {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.62;
  color: rgba(200, 210, 218, 0.88);
}

.cta-form--diensten-wide {
  width: 100%;
  max-width: min(52rem, 100%);
}

.js-service-reveal {
  opacity: 0;
  transition:
    opacity 0.75s var(--ease-out),
    transform 0.75s var(--ease-out);
}

.js-service-reveal--left {
  transform: translateX(-2rem);
}

.js-service-reveal--right {
  transform: translateX(2rem);
}

.js-service-reveal.is-visible {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-service-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ——— Waarom Valtex ——— */
.waarom-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.65rem;
  padding: 0.38rem 0.95rem;
  width: fit-content;
  max-width: 100%;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(8, 12, 16, 0.45);
}

.waarom-pill__dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.95), rgba(45, 212, 191, 0.85));
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.35);
}

/* ——— Waarom Valtex: waarom-samenwerken (panel + bento) ——— */
.waarom-why {
  position: relative;
  z-index: 1;
  margin-top: -1px;
  margin-bottom: 0;
  padding: clamp(2.25rem, 5.5vw, 3.75rem) 0 clamp(2rem, 4.5vw, 2.75rem);
  overflow: hidden;
  background: #f0f5f6;
  border-bottom: 1px solid rgba(0, 140, 140, 0.08);
}

.waarom-why__glow {
  position: absolute;
  inset: -20% -10% auto auto;
  width: min(52vw, 28rem);
  height: min(52vw, 28rem);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 200, 200, 0.14) 0%, transparent 68%);
  pointer-events: none;
}

.waarom-why__inner {
  position: relative;
  z-index: 1;
}

.waarom-why__panel {
  position: relative;
  padding: clamp(1.35rem, 3.5vw, 2rem);
  border-radius: clamp(1.25rem, 2.5vw, 1.75rem);
  background: linear-gradient(145deg, #ffffff 0%, #f8fcfc 48%, #f2f8f8 100%);
  border: 1px solid rgba(0, 140, 140, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 28px 64px -36px rgba(0, 55, 60, 0.28);
}

.waarom-why__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  border-radius: clamp(1.25rem, 2.5vw, 1.75rem) 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
  background: linear-gradient(180deg, var(--teal) 0%, rgba(0, 140, 140, 0.35) 100%);
}

.waarom-why__head {
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: clamp(1.25rem, 3vw, 1.65rem);
}

@media (min-width: 768px) {
  .waarom-why__head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.5rem, 3.5vw, 2.25rem);
  }
}

.waarom-why__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-width: 11.5rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .waarom-why__aside {
    margin: 0;
    padding-top: 0.25rem;
  }
}

.waarom-why__portrait {
  margin: 0;
  width: min(9.5rem, 38vw);
}

.waarom-why__portrait-media {
  position: relative;
  margin-bottom: 0.65rem;
}

.waarom-why__portrait-media::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -0.35rem;
  z-index: 2;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(0, 184, 184, 0.75) 20%, rgba(0, 184, 184, 0.75) 80%, transparent);
  pointer-events: none;
}

.waarom-why__portrait-frame {
  position: absolute;
  inset: -0.3rem -0.4rem -0.3rem 0.35rem;
  z-index: 0;
  border-radius: 1.05rem;
  border: 2px solid rgba(0, 184, 184, 0.4);
  transform: rotate(-2.5deg) translate(3px, -4px);
  pointer-events: none;
}

.waarom-why__portrait-media picture,
.waarom-why__portrait-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border-radius: 1rem;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 12%;
  box-shadow: 0 16px 40px -20px rgba(0, 45, 50, 0.45);
}

.waarom-why__caption {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0;
  padding-top: 0.15rem;
  text-align: center;
}

.waarom-why__caption-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
}

.waarom-why__caption-role {
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(26, 35, 41, 0.62);
}

.waarom-why__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  width: 100%;
}

.waarom-why__stats li {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.5rem 0.55rem;
  border-radius: 10px;
  text-align: center;
  background: rgba(0, 184, 184, 0.08);
  border: 1px solid rgba(0, 140, 140, 0.12);
}

.waarom-why__stat-num {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--teal-dim);
  line-height: 1.1;
}

.waarom-why__stat-label {
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(26, 35, 41, 0.58);
}

.waarom-why__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-dim);
}

.waarom-why__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text-primary);
  text-wrap: balance;
}

.waarom-why__title-accent {
  color: var(--teal-dim);
}

.waarom-why__lead {
  margin: 0 0 1rem;
  max-width: 40rem;
  font-size: clamp(0.9rem, 1.35vw, 1rem);
  line-height: 1.62;
  color: rgba(26, 35, 41, 0.72);
}

.waarom-why__lead strong {
  color: var(--text-strong);
  font-weight: 600;
}

.waarom-why__pull {
  position: relative;
  margin: 0;
  padding: 0.85rem 1rem 0.85rem 2.35rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 184, 184, 0.09) 0%, rgba(0, 140, 140, 0.04) 100%);
  border-left: 3px solid var(--teal);
}

.waarom-why__pull-mark {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  color: var(--teal);
}

.waarom-why__pull p {
  margin: 0;
  font-size: 0.86rem;
  font-style: italic;
  line-height: 1.55;
  color: rgba(26, 35, 41, 0.78);
}

.waarom-why__bento {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .waarom-why__bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

@media (min-width: 960px) {
  .waarom-why__bento {
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .waarom-why__tile--wide {
    grid-row: span 2;
  }
}

.waarom-why__tile {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  padding: 0.9rem 1rem 0.9rem 2.5rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(0, 140, 140, 0.1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.waarom-why__tile:hover {
  border-color: rgba(0, 168, 168, 0.28);
  box-shadow: 0 12px 28px -20px rgba(0, 70, 75, 0.25);
}

.waarom-why__tile--wide {
  padding: 1.1rem 1.15rem 1.1rem 2.65rem;
  background: linear-gradient(160deg, rgba(0, 184, 184, 0.1) 0%, rgba(255, 255, 255, 0.9) 55%);
}

@media (min-width: 960px) {
  .waarom-why__tile--wide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.35rem 1.25rem 1.35rem 2.75rem;
  }

  .waarom-why__tile--wide .waarom-why__tile-icon {
    margin-bottom: 0.15rem;
  }
}

.waarom-why__tile--accent {
  background: linear-gradient(135deg, rgba(0, 50, 55, 0.04) 0%, rgba(0, 184, 184, 0.08) 100%);
  border-color: rgba(0, 168, 168, 0.2);
}

.waarom-why__tile-num {
  position: absolute;
  top: 0.65rem;
  left: 0.75rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(0, 140, 140, 0.45);
}

.waarom-why__tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  flex-shrink: 0;
  border-radius: 10px;
  color: var(--teal);
  background: rgba(0, 184, 184, 0.12);
  border: 1px solid rgba(0, 140, 140, 0.12);
}

.waarom-why__tile-title {
  display: block;
  margin: 0 0 0.15rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}

.waarom-why__tile-text {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(26, 35, 41, 0.65);
}

.waarom-why__foot {
  margin-top: clamp(1.15rem, 2.5vw, 1.5rem);
  padding-top: 1rem;
  border-top: 1px dashed rgba(0, 140, 140, 0.18);
  text-align: center;
}

@media (min-width: 600px) {
  .waarom-why__foot {
    text-align: left;
  }
}

.page--waarom-valtex .waarom-why__portrait-media img {
  object-position: center 38%;
}

.page--waarom-valtex .waarom-why__aside {
  max-width: 15.25rem;
  width: 100%;
}

.page--waarom-valtex .waarom-why__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.page--waarom-valtex .waarom-why__stats li {
  min-height: 3.35rem;
  justify-content: center;
  padding: 0.55rem 0.65rem;
}

.page--waarom-valtex .waarom-why__stat-label {
  font-size: 0.62rem;
  line-height: 1.25;
}

/* ——— Waarom Valtex: teal showcase (glass shell, niet Diensten) ——— */
.waarom-seo {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  margin-top: -1px;
  overflow: hidden;
  color: var(--text-inverse);
  background: #033838;
}

.waarom-seo__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(168deg, #022f2f 0%, #045050 42%, #057878 72%, #048f8f 100%);
  opacity: 1;
}

.waarom-seo__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.35;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 85%);
}

.waarom-seo__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(48px);
}

.waarom-seo__orb--tl {
  top: -12%;
  left: 8%;
  width: min(42vw, 18rem);
  height: min(42vw, 18rem);
  background: rgba(0, 255, 255, 0.22);
}

.waarom-seo__orb--br {
  right: 5%;
  bottom: -18%;
  width: min(50vw, 22rem);
  height: min(50vw, 22rem);
  background: rgba(0, 180, 200, 0.28);
}

.waarom-seo__inner {
  position: relative;
  z-index: 1;
  padding: clamp(2.25rem, 5.5vw, 3.25rem) clamp(1rem, 4vw, 1.5rem);
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
}

@media (min-width: 900px) {
  .waarom-seo {
    padding-left: var(--sidebar-w);
    padding-right: 1.5rem;
    box-sizing: border-box;
  }

  .waarom-seo__inner {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }
}

.waarom-seo__shell {
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  align-items: stretch;
  padding: clamp(1rem, 2.5vw, 1.35rem);
  border-radius: clamp(1.25rem, 2.5vw, 1.65rem);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 32px 72px -40px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
}

@media (min-width: 900px) {
  .waarom-seo__shell {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: 0;
    padding: clamp(1.15rem, 2.2vw, 1.5rem);
  }
}

.waarom-seo__visual {
  position: relative;
  padding: 0.35rem 0.35rem 0.35rem 0;
}

@media (min-width: 900px) {
  .waarom-seo__visual {
    padding: 0.5rem 1.25rem 0.5rem 0.5rem;
    margin-right: -0.5rem;
  }
}

.waarom-seo__frame {
  position: absolute;
  inset: 0.15rem -0.35rem -0.15rem 0.55rem;
  z-index: 0;
  border-radius: 1.15rem;
  border: 2px solid rgba(0, 255, 255, 0.45);
  transform: rotate(3deg);
  pointer-events: none;
}

.waarom-seo__media {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  box-shadow: 0 20px 48px -24px rgba(0, 0, 0, 0.55);
}

.waarom-seo__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(2, 40, 42, 0.45) 100%);
  pointer-events: none;
}

.waarom-seo__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.waarom-seo__stamp {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.5rem;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--teal-dim);
  background: #fff;
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.4);
  transform: rotate(-6deg);
}

.waarom-seo__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(0.35rem, 2vw, 0.75rem) clamp(0.25rem, 2vw, 0.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 900px) {
  .waarom-seo__panel {
    padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1.25rem, 3vw, 1.75rem);
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }
}

.waarom-seo__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.55rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

.waarom-seo__eyebrow-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #6ff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.85);
}

.waarom-seo__title {
  margin: 0 0 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  font-size: clamp(1.5rem, 3.2vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.waarom-seo__title-line {
  display: block;
  color: rgba(255, 255, 255, 0.92);
}

.waarom-seo__title-line--accent {
  background: linear-gradient(92deg, #fff 0%, #b8ffff 55%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.waarom-seo__lead {
  margin: 0 0 1rem;
  max-width: 32rem;
  font-size: clamp(0.86rem, 1.25vw, 0.96rem);
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.8);
}

.waarom-seo__lead strong {
  color: #fff;
  font-weight: 600;
}

.waarom-seo__features {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.waarom-seo__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 0.4rem;
  border-radius: 12px;
  text-align: center;
  background: rgba(0, 30, 32, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.waarom-seo__feature:hover {
  border-color: rgba(0, 255, 255, 0.35);
  transform: translateY(-2px);
}

.waarom-seo__feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  color: #6ff;
  background: rgba(0, 255, 255, 0.12);
  border: 1px solid rgba(0, 255, 255, 0.25);
}

.waarom-seo__feature-label {
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.88);
}

.waarom-seo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.85rem;
}

.waarom-seo .waarom-seo__btn-ghost.btn--ghost {
  padding: 0.48rem 1.05rem;
  font-size: 0.8rem;
  line-height: 1.2;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.12) inset;
}

.waarom-seo .waarom-seo__btn-ghost.btn--ghost:hover,
.waarom-seo .waarom-seo__btn-ghost.btn--ghost:focus-visible {
  color: var(--teal-dim);
  background: #fff;
  border-color: #fff;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.35);
}

.waarom-seo__marquee {
  position: relative;
  z-index: 2;
  margin-top: clamp(0.35rem, 1.5vw, 0.75rem);
  padding: 0.9rem 0 1.05rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.waarom-seo__marquee-inner {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  --waarom-seo-marquee-groups: 2;
  --waarom-seo-marquee-duration: 32s;
  animation: waarom-seo-marquee var(--waarom-seo-marquee-duration) linear infinite;
}

.waarom-seo__marquee-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  padding-right: clamp(1.5rem, 4vw, 2.75rem);
}

.waarom-seo__marquee-item {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.waarom-seo__marquee-item::before {
  content: "◆";
  margin-right: 0.6rem;
  color: rgba(0, 255, 255, 0.78);
  font-size: 0.48rem;
  vertical-align: middle;
}

a.waarom-seo__marquee-item:hover,
a.waarom-seo__marquee-item:focus-visible {
  color: #fff;
}

@keyframes waarom-seo-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-100% / var(--waarom-seo-marquee-groups)), 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .waarom-seo__marquee-inner {
    animation: none;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem 1.35rem;
    padding: 0 1rem;
  }

  .waarom-seo__marquee-group {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem 1.35rem;
    padding-right: 0;
  }
}

.waarom-about-split {
  margin-top: clamp(2.75rem, 7vw, 5.25rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.waarom-about-split__card {
  display: grid;
  gap: clamp(1.35rem, 3vw, 2rem);
  align-items: start;
  padding: clamp(0.5rem, 2vw, 1rem) 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.waarom-about-split__media {
  border-radius: 18px;
  overflow: hidden;
  border: none;
  aspect-ratio: 4 / 3;
  background: #0a0e10;
}

.waarom-about-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.waarom-about-split__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(102, 255, 255, 0.88);
}

.waarom-about-split__head {
  margin: 0 0 clamp(0.65rem, 1.8vw, 0.95rem);
}

.waarom-about-split__title {
  margin: 0;
  font-size: clamp(1.28rem, 2.65vw, 1.72rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.22;
  color: rgba(244, 248, 248, 0.96);
}

.waarom-about-split__cols {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.4rem);
}

@media (min-width: 640px) {
  .waarom-about-split__cols {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
  }
}

.waarom-about-split__lede {
  margin: 0;
  padding: 0.85rem 0 0;
  font-size: 0.9rem;
  line-height: 1.62;
  color: rgba(208, 218, 226, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 640px) {
  .waarom-about-split__lede {
    padding: 0.85rem 0.35rem 0 0;
  }

  .waarom-about-split__lede:nth-child(2) {
    padding-left: 0.35rem;
    padding-right: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none;
    padding-top: 0;
  }
}

.waarom-about-split__lede strong {
  font-weight: 600;
  color: rgba(236, 242, 246, 0.95);
}

.waarom-about-split__full {
  margin: 0;
  padding: 1.1rem 0 0;
  font-size: 0.88rem;
  line-height: 1.62;
  color: rgba(188, 200, 210, 0.88);
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
  border-top: 1px solid rgba(0, 255, 255, 0.14);
}

.waarom-about-split__full a {
  color: rgba(102, 255, 255, 0.95);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 3px;
}

.waarom-about-split__full a:hover {
  color: var(--teal);
  text-decoration: underline;
}

@media (min-width: 900px) {
  .waarom-about-split__card {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: clamp(1.25rem, 2.5vw, 1.85rem);
    row-gap: clamp(0.85rem, 2vw, 1.15rem);
    align-items: start;
  }

  .waarom-about-split__media {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: stretch;
    min-height: 12rem;
  }

  .waarom-about-split__body {
    display: contents;
  }

  .waarom-about-split__head {
    grid-column: 2 / span 2;
    grid-row: 1;
    margin: 0;
    padding-bottom: 0.15rem;
  }

  .waarom-about-split__cols {
    grid-column: 2 / span 2;
    grid-row: 2;
    align-self: start;
  }

  .waarom-about-split__full {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: min(44rem, 100%);
    padding-top: 1.25rem;
    margin-top: 0.35rem;
  }

  .waarom-about-split__lede {
    border-top: none;
    padding-top: 0.65rem;
    min-height: 100%;
  }

  .waarom-about-split__lede:first-child {
    padding-right: 1rem;
  }

  .waarom-about-split__lede:nth-child(2) {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding-left: 1.1rem;
  }
}

@media (max-width: 899px) {
  .waarom-about-split__card {
    grid-template-columns: 1fr;
  }

  .waarom-about-split__lede:nth-child(2) {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0.85rem;
  }
}

/* ——— Waarom Valtex: designfilosofie (wit) ——— */
.waarom-filosofie {
  position: relative;
  z-index: 1;
  margin-top: -1px;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  background: linear-gradient(180deg, #ffffff 0%, #f6fafb 55%, #eef4f5 100%);
  border-top: 1px solid rgba(0, 140, 140, 0.1);
  border-bottom: 1px solid rgba(0, 140, 140, 0.08);
}

.waarom-filosofie__line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(10rem, 40%);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--teal) 35%, var(--cyan) 65%, transparent);
  opacity: 0.65;
}

.waarom-filosofie__inner {
  position: relative;
}

.waarom-filosofie__shell {
  padding: clamp(1.35rem, 3vw, 2rem);
  border-radius: clamp(1.15rem, 2.2vw, 1.65rem);
  background: #fff;
  border: 1px solid rgba(0, 140, 140, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 28px 64px -40px rgba(0, 55, 60, 0.18);
}

.waarom-filosofie__head {
  max-width: 36rem;
  margin-bottom: clamp(1.35rem, 3vw, 1.85rem);
}

.waarom-filosofie__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-dim);
}

.waarom-filosofie__eyebrow-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 184, 184, 0.55);
}

.waarom-filosofie__title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.55rem, 3.2vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--text-primary);
  text-wrap: balance;
}

.waarom-filosofie__lead {
  margin: 0;
  font-size: clamp(0.9rem, 1.35vw, 1rem);
  line-height: 1.62;
  color: rgba(26, 35, 41, 0.72);
}

.waarom-filosofie__lead strong {
  color: var(--text-strong);
  font-weight: 600;
}

.waarom-filosofie__sub {
  margin: 0.75rem 0 0;
  font-size: clamp(0.86rem, 1.25vw, 0.94rem);
  line-height: 1.6;
  color: rgba(26, 35, 41, 0.68);
}

.waarom-filosofie__sub strong {
  color: var(--text-strong);
  font-weight: 600;
}

.waarom-filosofie__link {
  font-weight: 600;
  color: var(--teal-dim);
  text-decoration: underline;
  text-decoration-color: rgba(0, 125, 125, 0.35);
  text-underline-offset: 0.12em;
}

.waarom-filosofie__link:hover,
.waarom-filosofie__link:focus-visible {
  color: var(--teal);
  text-decoration-color: var(--teal);
}

.waarom-filosofie__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .waarom-filosofie__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

@media (min-width: 960px) {
  .waarom-filosofie__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
  }
}

.waarom-filosofie__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1rem 1rem 1.15rem;
  border-radius: 14px;
  background: linear-gradient(160deg, #f8fcfc 0%, #fff 48%);
  border: 1px solid rgba(0, 140, 140, 0.1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.waarom-filosofie__card:hover {
  border-color: rgba(0, 168, 168, 0.28);
  box-shadow: 0 14px 32px -22px rgba(0, 70, 75, 0.22);
  transform: translateY(-2px);
}

.waarom-filosofie__num {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(0, 140, 140, 0.35);
}

.waarom-filosofie__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 11px;
  color: var(--teal);
  background: rgba(0, 184, 184, 0.1);
  border: 1px solid rgba(0, 140, 140, 0.12);
}

.waarom-filosofie__card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}

.waarom-filosofie__card-text {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(26, 35, 41, 0.62);
}

.waarom-filosofie__strip {
  margin-top: clamp(1.15rem, 2.5vw, 1.5rem);
  padding: 1rem 1.15rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 184, 184, 0.08) 0%, rgba(0, 140, 140, 0.04) 100%);
  border: 1px solid rgba(0, 140, 140, 0.12);
  overflow: hidden;
}

.waarom-filosofie__strip-inner {
  overflow: hidden;
}

.waarom-filosofie__strip-track {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 900px) {
  .waarom-filosofie__strip-track {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 1.25rem;
  }
}

@media (max-width: 899px) {
  .waarom-filosofie__strip {
    padding: 0.85rem 0;
  }

  .waarom-filosofie__strip-inner {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
    --waarom-filosofie-marquee-groups: 2;
    --waarom-filosofie-marquee-duration: 28s;
    animation: waarom-filosofie-marquee var(--waarom-filosofie-marquee-duration) linear infinite;
  }

  .waarom-filosofie__strip-track {
    display: flex;
    flex-shrink: 0;
    flex-wrap: nowrap;
    width: max-content;
    gap: 0;
    padding-right: 1.35rem;
  }

  .waarom-filosofie__metric {
    flex-shrink: 0;
    min-width: 11.25rem;
    padding: 0.15rem 1.35rem;
    text-align: center;
  }

  .waarom-filosofie__metric-divider {
    display: block;
    flex-shrink: 0;
    width: 1px;
    height: 2.75rem;
    align-self: center;
    background: linear-gradient(180deg, transparent, rgba(0, 140, 140, 0.22), transparent);
  }
}

@keyframes waarom-filosofie-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-100% / var(--waarom-filosofie-marquee-groups)), 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .waarom-filosofie__strip-inner {
    animation: none !important;
  }

  @media (max-width: 899px) {
    .waarom-filosofie__strip-inner {
      width: 100%;
      flex-wrap: wrap;
      justify-content: center;
    }

    .waarom-filosofie__strip-track {
      width: 100%;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.85rem 1.5rem;
    }

    .waarom-filosofie__metric {
      min-width: 0;
      padding: 0;
    }

    .waarom-filosofie__metric-divider {
      display: none;
    }
  }
}

.waarom-filosofie__metric {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.waarom-filosofie__metric-divider {
  display: none;
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(180deg, transparent, rgba(0, 140, 140, 0.25), transparent);
}

@media (min-width: 900px) {
  .waarom-filosofie__metric-divider {
    display: block;
  }
}

.waarom-filosofie__metric-value {
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--teal-dim);
}

.waarom-filosofie__metric-label {
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(26, 35, 41, 0.62);
}

.page-waarom__content--tail {
  padding-top: clamp(1.5rem, 3.5vw, 2.25rem);
}

.page-waarom__content {
  padding-top: clamp(2rem, 4.5vw, 3rem);
  padding-bottom: 0.25rem;
}

.page-waarom__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.35rem, 3vw, 2.15rem);
}

@media (min-width: 880px) {
  .page-waarom__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.35rem, 2.8vw, 2.35rem);
    row-gap: clamp(1.65rem, 3.2vw, 2.65rem);
    align-items: stretch;
  }
}

/* Waarom: twee tekstblokken — desktop grid, mobiel horizontale carousel */
.page-waarom__mosaic-carousel {
  margin-bottom: 0;
}

.page-waarom__mosaic-carousel-viewport {
  min-width: 0;
}

.page-waarom__mosaic-carousel-track {
  display: flex;
  gap: 0;
  min-width: 0;
}

.page-waarom__mosaic-carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.page-waarom__mosaic-carousel .service-showcase--waarom-text {
  margin-bottom: 0;
}

.page-waarom__mosaic-carousel-nav {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-bottom: 0.15rem;
}

.page-waarom__mosaic-carousel-dot {
  width: 0.45rem;
  height: 0.45rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.page-waarom__mosaic-carousel-dot.is-active {
  background: rgba(0, 255, 255, 0.85);
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.35),
    0 0 14px rgba(0, 255, 255, 0.35);
  transform: scale(1.15);
}

.page-waarom__mosaic-carousel-dot:focus-visible {
  outline: 2px solid rgba(0, 255, 255, 0.65);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .page-waarom__mosaic-carousel-viewport {
    scroll-behavior: auto;
  }
}

@media (max-width: 879px) {
  .page-waarom__mosaic-carousel-viewport {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    /* pan-y: pagina kan verticaal scrollen terwijl je op de carousel staat */
    touch-action: pan-x pan-y;
  }

  .page-waarom__mosaic-carousel-viewport::-webkit-scrollbar {
    display: none;
  }

  .page-waarom__mosaic-carousel-track {
    width: 200%;
  }

  .page-waarom__mosaic-carousel-slide {
    flex: 0 0 50%;
    box-sizing: border-box;
  }

  .page-waarom__mosaic-carousel-nav {
    display: flex;
  }
}

@media (min-width: 880px) {
  .page-waarom__mosaic-carousel-viewport {
    overflow: visible;
  }

  .page-waarom__mosaic-carousel-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.35rem, 2.8vw, 2.35rem);
    row-gap: clamp(1.65rem, 3.2vw, 2.65rem);
    align-items: stretch;
    width: auto;
  }

  .page-waarom__mosaic-carousel-slide {
    flex: none;
    scroll-snap-align: unset;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

}

/* Herbruikbare zachte neon-scheiding (niet volle breedte) */
.site-soft-neon-rule {
  display: block;
  width: min(11rem, 52%);
  height: 2px;
  margin: clamp(1.15rem, 3.5vw, 1.65rem) auto;
  border: none;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 255, 0.2) 22%,
    rgba(0, 255, 255, 0.55) 50%,
    rgba(0, 255, 255, 0.2) 78%,
    transparent 100%
  );
  box-shadow: 0 0 14px rgba(0, 255, 255, 0.22);
}

@media (min-width: 880px) {
  .site-soft-neon-rule--waarom-mobile-only {
    display: none;
  }
}

.page-waarom__content .service-showcase--waarom-text {
  margin-bottom: clamp(1.65rem, 3.8vw, 2.5rem);
}

.page-waarom__content .page-waarom__grid .service-showcase--waarom-text,
.page-waarom__content .page-waarom__mosaic-carousel .service-showcase--waarom-text {
  margin-bottom: 0;
}

.page-waarom__content .service-showcase__card--waarom-plain {
  display: block;
  padding: clamp(1.15rem, 2.6vw, 1.75rem) 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Waarom: rustige typografie — geen fel neon, wel leesbaar en netjes */
.page-waarom__content .service-showcase__title {
  margin: 0 0 0.65rem;
  padding-bottom: 0.5rem;
  max-width: 42rem;
  font-size: clamp(1.12rem, 2.15vw, 1.38rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.28;
  color: rgba(236, 242, 246, 0.96);
  text-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.page-waarom__content .service-showcase__desc {
  margin: 0 0 0.25rem;
  max-width: 40rem;
  font-size: 0.9rem;
  line-height: 1.72;
  font-weight: 400;
  color: rgba(186, 198, 208, 0.92);
}

.page-waarom__content .service-showcase__desc strong {
  font-weight: 600;
  color: rgba(218, 228, 236, 0.95);
}

.waarom-stats {
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 1.2rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1.1rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.waarom-stats__item {
  margin: 0;
  padding: 0;
}

.waarom-stats__value {
  display: block;
  font-size: clamp(1.45rem, 3.2vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: rgba(102, 255, 255, 0.95);
  text-shadow: 0 0 36px rgba(0, 255, 255, 0.12);
}

.waarom-stats__label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(188, 200, 210, 0.88);
}

.page-waarom__content .waarom-stats {
  margin-top: 1.1rem;
  padding-top: 1rem;
  gap: 0.85rem 1.75rem;
  border-top-color: rgba(255, 255, 255, 0.06);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 44rem;
}

@media (max-width: 520px) {
  .page-waarom__content .waarom-stats {
    grid-template-columns: 1fr;
  }
}

.page-waarom__content .waarom-stats__item {
  padding: 0.35rem 0;
  border-radius: 0;
  background: transparent;
  border: none;
}

.page-waarom__content .waarom-stats__value {
  font-size: clamp(0.95rem, 1.65vw, 1.08rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: rgba(140, 220, 218, 0.9);
  text-shadow: none;
}

.page-waarom__content .waarom-stats__label {
  margin-top: 0.28rem;
  font-size: 0.76rem;
  line-height: 1.42;
  color: rgba(168, 182, 194, 0.82);
}

/* ========== Mobiel ≤899px: globale typografie + formulieren/CTA (alle pagina’s) ========== */
@media (max-width: 899px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    font-size: 0.9375rem;
    line-height: 1.58;
  }

  .page {
    padding-top: calc(var(--topbar-h) + 1.25rem);
    padding-bottom: 2.75rem;
  }

  /* Hero-secties tot boven (geen dubbele top-offset); niet op home (eigen layout) */
  .page--diensten,
  .page--website,
  .page--werk,
  .page--reclame,
  .page--seo,
  .page--waarom-valtex,
  .page--contact,
  .page--case-study {
    padding-top: 0;
    padding-bottom: 0;
  }

  .section-title {
    font-size: clamp(1.3rem, 4.8vw, 1.78rem);
    line-height: 1.2;
    letter-spacing: -0.016em;
    margin-bottom: 0.7rem;
  }

  .section-lead {
    font-size: 0.92rem;
    line-height: 1.52;
  }

  .eyebrow {
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.45rem;
  }

  .section-head {
    margin-bottom: 2rem;
  }

  .section-head--tight {
    margin-bottom: 1.4rem;
  }

  .diensten-hero-simple__title {
    font-size: clamp(1.65rem, 5.4vw, 2.28rem);
    line-height: 1.12;
  }

  #diensten-hero-cinema .diensten-hero-simple__title {
    font-size: clamp(1.62rem, 5.8vw, 2.32rem);
  }

  .diensten-hero-simple__lead,
  #diensten-hero-cinema .diensten-hero-simple__lead {
    font-size: clamp(0.86rem, 3.6vw, 0.98rem);
    line-height: 1.55;
  }

  .diensten-hero-simple__eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
  }

  .diensten-intro-heading {
    font-size: clamp(1.08rem, 3.8vw, 1.42rem);
    line-height: 1.36;
  }

  #waarom-hero.diensten-hero-simple .diensten-hero-simple__title-line {
    font-size: clamp(1.72rem, 6vw, 2.45rem);
    line-height: 1.1;
  }

  #waarom-hero.diensten-hero-simple .diensten-hero-simple__lead {
    font-size: clamp(0.74rem, 3.1vw, 0.86rem);
    line-height: 1.52;
    max-width: min(34rem, 100%);
  }

  .page-hero__title {
    font-size: clamp(1.35rem, 4.6vw, 1.85rem);
    line-height: 1.22;
  }

  .contact-intro__title {
    font-size: clamp(1.32rem, 4.7vw, 1.88rem);
    line-height: 1.24;
  }

  .contact-intro__lead,
  .contact-intro__copy {
    font-size: clamp(0.86rem, 3.5vw, 0.98rem);
    line-height: 1.52;
  }

  .cta-section__title,
  .cta-section__title--page {
    font-size: clamp(1.22rem, 4.4vw, 1.68rem);
    line-height: 1.22;
  }

  .cta-section__lead,
  .cta-section__body p {
    font-size: 0.9rem;
    line-height: 1.52;
  }

  .cta-section__checklist li {
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .legal {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .footer__tagline,
  .footer__nav a,
  .footer__contact-list a,
  .footer__heading {
    font-size: 0.88rem;
  }

  .footer__copy {
    font-size: 0.72rem;
  }

  .process-timeline__title {
    font-size: clamp(0.98rem, 3.5vw, 1.12rem);
    line-height: 1.28;
  }

  .process-timeline__text {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .case-story-hero .page-hero__title {
    font-size: clamp(1.2rem, 4.2vw, 1.65rem);
  }

  .page-hero__lead {
    font-size: clamp(0.82rem, 3.4vw, 0.95rem);
    line-height: 1.5;
  }

  .case-story-hero {
    min-height: clamp(260px, 50svh, 440px);
  }

  .case-story-hero__content {
    padding-top: calc(var(--topbar-h) + 0.35rem);
    padding-bottom: clamp(0.85rem, 2.5vw, 1.25rem);
  }

  .btn,
  .btn--primary,
  .btn--ghost {
    font-size: 0.875rem;
  }

  .cta-form__field span,
  .cta-form input,
  .cta-form textarea,
  .cta-form select {
    font-size: 0.9rem;
  }

  .service-showcase__card h2,
  .service-showcase__card h3 {
    font-size: clamp(1.05rem, 3.4vw, 1.22rem);
  }

  .service-showcase__card p,
  .service-showcase__list li {
    font-size: 0.88rem;
    line-height: 1.52;
  }
}

/* iPhone-ширини: etalon iPhone 14 Pro Max (430×932) — kleinere toestellen schalen mee */
@media (max-width: 430px) {
  html {
    font-size: min(
      clamp(13.25px, calc(100vw * 16 / 430), 16px),
      clamp(13.25px, calc(100svh * 16 / 932), 16px)
    );
  }
}

/* Desktop: korte partner-label verborgen */
.hero__partners-label__short {
  display: none;
}

/* Home: hero = 1 viewport desktop; mobiel krijgt extra hoogte tegen overlap */
.page-home .hero--cinema {
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  overflow: hidden;
}

.page-home .hero__viewport {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

@media (max-width: 899px) {
  .page-home .hero--cinema {
    height: auto;
    min-height: 115svh;
    max-height: none;
  }

  .page-home .hero__viewport {
    height: auto;
    min-height: 115svh;
    max-height: none;
  }
}

/* ——— Home (page-home): mobiel — full-screen hero, H1 + project, tekst onder, knoppen + KPI ——— */
@media (max-width: 899px) {
  .page-home .hero--cinema {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
  }

  .page-home .hero__viewport {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .page-home .hero__slides,
  .page-home .hero__slides-track,
  .page-home .hero__slide {
    position: absolute;
    inset: 0;
    min-height: 100%;
    height: 100%;
  }

  .page-home .hero__stage {
    position: relative;
    inset: auto;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex: 1;
    height: auto;
    min-height: 115svh;
    max-height: none;
    gap: clamp(0.15rem, 0.85svh, 0.45rem);
    padding-top: calc(var(--topbar-h) + clamp(0.55rem, 2.2svh, 1.15rem));
    padding-bottom: max(0.55rem, env(safe-area-inset-bottom));
    padding-left: clamp(1rem, 5vw, 2.5rem);
    padding-right: clamp(1rem, 5vw, 2.5rem);
    box-sizing: border-box;
    pointer-events: none;
    overflow: hidden;
  }

  .page-home .hero__stage-inner {
    display: contents;
  }

  .page-home .hero__copy {
    display: contents;
  }

  /* Volgorde mobiel: H1 → projectfoto's → tekst onder → knoppen → KPI's */
  .page-home .hero__headline,
  .page-home .hero__headline--modern {
    order: 1;
    width: 100%;
    pointer-events: auto;
    margin-top: 0;
    flex-shrink: 0;
  }

  .page-home .hero__showcase {
    order: 2;
    display: block;
    margin-top: clamp(1.15rem, 4.2svh, 2.35rem);
    margin-bottom: clamp(0.75rem, 2.8svh, 1.35rem);
    margin-left: auto;
    margin-right: auto;
    transform: none;
    pointer-events: auto;
    flex-shrink: 0;
    min-height: 0;
    max-width: min(36rem, 100%);
  }

  .page-home .hero__device-stack {
    display: none;
  }

  .page-home .hero__cases-fan {
    gap: 0.5rem;
  }

  .page-home .hero__case-card--center {
    aspect-ratio: 16 / 9.4;
    border-radius: 0.85rem;
  }

  .page-home .hero__case-card--center .hero__case-card__tags {
    font-size: 0.58rem;
  }

  .page-home .hero__case-card--center .hero__case-card__name {
    font-size: 0.82rem;
  }

  .page-home .hero__case-card--left,
  .page-home .hero__case-card--right {
    aspect-ratio: 4 / 3.15;
  }

  .page-home .hero__lede,
  .page-home .hero__lede--modern {
    order: 3;
    margin-top: clamp(0.45rem, 1.8svh, 0.85rem);
    width: 100%;
    pointer-events: auto;
    flex-shrink: 0;
  }

  .page-home .hero__price-line {
    order: 4;
    width: 100%;
    margin: 0.35rem 0 0.55rem;
    pointer-events: auto;
    flex-shrink: 0;
    text-align: inherit;
  }

  .page-home .hero__checks {
    order: 5;
    width: 100%;
    max-width: 100%;
    pointer-events: auto;
    margin-top: clamp(0.15rem, 0.6svh, 0.35rem);
    margin-bottom: 0.15rem;
    flex-shrink: 0;
  }

  .page-home .hero__cta-pair {
    order: 6;
    margin-top: clamp(0.2rem, 0.75svh, 0.45rem);
    width: 100%;
    pointer-events: auto;
    flex-shrink: 0;
  }

  .page-home .hero__device-stack {
    display: none;
  }

  .page-home .hero__device--phone {
    display: none;
  }

  .page-home .hero__device-bezel--laptop {
    padding: 0.16rem 0.16rem 0.12rem;
    border-radius: 0.48rem 0.48rem 0 0;
  }

  .page-home .hero__device-bezel--laptop .hero__device-screen {
    border-radius: 0.18rem;
  }

  .page-home .hero__device-base {
    height: 0.26rem;
  }

  .page-home .hero__device--laptop {
    width: 100%;
    right: auto;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
  }

  .page-home .hero__partners,
  .page-home .hero__stats {
    order: 7;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 0;
    padding: 0;
    pointer-events: auto;
    transform: none;
    align-self: center;
    width: 100%;
    max-width: min(94vw, 22rem);
  }

  .page-home .hero__stats {
    max-width: 100%;
    margin-top: auto;
    margin-bottom: clamp(0.35rem, 5svh, 2.5rem);
    flex-shrink: 0;
    padding-top: clamp(0.25rem, 1svh, 0.55rem);
  }

  /* KPI's: één horizontale rij onder de devices */
  .page-home .hero__stats-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0.5rem 0.2rem;
  }

  .page-home .hero__stats-item {
    padding: 0.28rem 0.2rem;
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }

  .page-home .hero__stats-item:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }

  .page-home .hero__stats-value {
    font-size: clamp(0.84rem, 3.25vw, 1.02rem);
  }

  .page-home .hero__stats-label {
    font-size: clamp(0.5rem, 1.95vw, 0.58rem);
    line-height: 1.2;
  }

  .page-home .hero__pager--fixed {
    position: absolute;
    bottom: max(0.85rem, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
  }

  .page-home .hero__headline {
    width: 100%;
    max-width: 100%;
    font-size: clamp(1.95rem, 5.2vw + 0.85rem, 2.68rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: 0.012em;
    margin-bottom: 0.35rem;
    text-align: left;
  }

  .page-home .hero__title-stack {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    align-items: flex-start;
    text-align: left;
  }

  .page-home .hero__title-line {
    font-weight: 800;
    line-height: 1.28;
    padding-bottom: 0.08em;
  }

  .page-home .hero__title-line--sub {
    white-space: normal;
    text-wrap: balance;
    font-size: 0.86em;
    letter-spacing: 0.015em;
    max-width: 100%;
  }

  .page-home .hero__eyebrow {
    font-size: 0.56rem;
    letter-spacing: 0.17em;
    margin-bottom: 0.15rem;
  }

  .page-home .hero__lede {
    font-size: clamp(0.72rem, 2.85vw, 0.84rem);
    line-height: 1.42;
    margin-bottom: 0.32rem;
  }

  .page-home .hero__lede--modern {
    font-size: clamp(0.86rem, 3.15vw, 0.98rem);
    line-height: 1.46;
    margin-bottom: 0.35rem;
  }

  .page-home .hero__headline--modern {
    font-size: clamp(1.95rem, 6.4vw, 2.55rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.026em;
    margin-bottom: clamp(0.28rem, 1vw, 0.45rem);
  }

  .page-home .hero__title-line--modern {
    text-wrap: balance;
    letter-spacing: -0.026em;
  }

  .page-home .hero__checks-item {
    font-size: 0.8rem;
  }

  .page-home .hero__cta-pair {
    margin-bottom: clamp(0.45rem, 1.6vw, 0.65rem);
    gap: 0.62rem 0.85rem;
    align-items: center;
    flex-wrap: wrap;
  }

  .page-home .hero__cta-pair .btn--hero-primary.btn--header-cta {
    padding: 0.78rem 1.28rem;
    min-height: 2.78rem;
  }

  .page-home .hero__cta-pair .btn--hero-primary.btn--header-cta .btn--header-cta__main {
    font-size: 0.86rem;
  }

  .page-home .hero__cta-pair .btn--hero-secondary.btn {
    padding: 0.74rem 1.2rem;
    min-height: 2.78rem;
    font-size: 0.86rem;
  }

  @media (max-width: 420px) {
    .page-home .hero__cta-pair {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.55rem;
    }

    .page-home .hero__cta-pair .btn--hero-secondary.btn {
      padding: 0.8rem 1.2rem;
      min-height: 2.9rem;
      width: 100%;
      justify-content: center;
    }
  }

  .page-home .hero__proof {
    padding-top: 0.8rem;
    margin-bottom: clamp(0.45rem, 1.6vw, 0.65rem);
  }

  .page-home .hero__proof-meta {
    gap: 0.2rem;
    padding-top: 0;
  }

  .page-home .hero__proof-stars {
    font-size: inherit;
  }

  .page-home .hero__proof-stars svg {
    width: 12px;
    height: 12px;
  }

  .page-home .hero__proof-text {
    font-size: 0.78rem;
    max-width: 16rem;
  }

  .page-home .hero__rating {
    margin-bottom: 0.48rem;
    padding: 0.25rem 0.5rem;
  }

  .page-home .hero__stars {
    font-size: 0.72rem;
  }

  .page-home .hero__rating-text {
    font-size: 0.64rem;
  }

  .page-home .btn--hero-contact {
    padding: 0.42rem 0.82rem;
    font-size: 0.78rem;
  }

  .page-home .hero__cta-link {
    font-size: 0.78rem;
  }

  .page-home .hero__cta-meta {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
  }

  .page-home .hero__cta-row {
    gap: 0.25rem 0.32rem;
  }

  .page-home .hero__cta-actions {
    margin-top: 8px;
  }

  .page-home .hero__partners,
  .page-home .hero__stats {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    align-self: center;
    width: 100%;
    gap: 0.3rem;
    max-width: min(94vw, 17rem);
    margin-top: 0;
  }

  .page-home .hero__stats {
    max-width: 100%;
    margin-top: auto;
    margin-bottom: clamp(0.35rem, 5svh, 2.5rem);
  }

  .page-home .hero__partners-label__full {
    display: none;
  }

  .page-home .hero__partners-label__short {
    display: inline;
    font-size: 0.54rem;
    letter-spacing: 0.12em;
  }

  .page-home .hero__partners-list {
    gap: 0.48rem;
  }

  .page-home .hero__partners-icon {
    width: 20px;
    height: 20px;
  }

  .page-home .hero__partners-icon--code {
    width: 24px;
    height: 24px;
  }

}

/* Home hero: korte schermen — alles binnen 1 viewport */
@media (max-width: 899px) and (max-height: 740px) {
  .page-home .hero__showcase {
    max-width: min(32rem, 100%);
    margin-top: clamp(0.85rem, 3svh, 1.65rem);
    margin-bottom: clamp(0.55rem, 2svh, 1rem);
  }

  .page-home .hero__cases-fan {
    gap: 0.42rem;
  }

  .page-home .hero__case-card--center {
    aspect-ratio: 16 / 9.2;
  }

  .page-home .hero__headline--modern {
    font-size: clamp(1.85rem, 5.8vw, 2.25rem);
    letter-spacing: -0.024em;
  }

  .page-home .hero__lede--modern {
    font-size: clamp(0.88rem, 3.2vw, 1rem);
    margin-bottom: 0.15rem;
  }

  .page-home .hero__cta-pair .btn--hero-primary.btn--header-cta,
  .page-home .hero__cta-pair .btn--hero-secondary.btn {
    min-height: 2.65rem;
    padding-block: 0.72rem;
  }
}

/* Home: iPhone 15 Pro en kleiner (≤393px) — compact, extra ruimte */
@media (max-width: 393px) {
  .page-home .hero--cinema,
  .page-home .hero__viewport,
  .page-home .hero__stage {
    min-height: 118svh;
  }

  .page-home .hero__stage {
    padding-top: calc(var(--topbar-h) + clamp(0.35rem, 1.5svh, 0.8rem));
    padding-left: clamp(0.85rem, 4vw, 1.1rem);
    padding-right: clamp(0.85rem, 4vw, 1.1rem);
    gap: clamp(0.1rem, 0.65svh, 0.32rem);
  }

  .page-home .hero__headline,
  .page-home .hero__headline--modern {
    font-size: clamp(1.78rem, calc(100vw * 0.048 + 0.5rem), 2.1rem);
    line-height: 1.08;
    letter-spacing: -0.024em;
  }

  .page-home .hero__showcase {
    margin-top: clamp(0.95rem, 3.5svh, 1.85rem);
    margin-bottom: clamp(0.85rem, 3svh, 1.25rem);
    max-width: min(34rem, 100%);
  }

  .page-home .hero__cases-fan {
    gap: 0.45rem;
  }

  .page-home .hero__device--laptop {
    width: 100%;
  }

  .page-home .hero__lede,
  .page-home .hero__lede--modern {
    font-size: clamp(0.64rem, calc(100vw * 0.026 + 0.46rem), 0.76rem);
    margin-top: clamp(0.4rem, 1.6svh, 0.75rem);
    line-height: 1.38;
  }

  .page-home .hero__checks-item {
    font-size: 0.7rem;
  }

  .page-home .hero__cta-pair .btn--hero-primary.btn--header-cta,
  .page-home .hero__cta-pair .btn--hero-secondary.btn {
    min-height: 2.55rem;
    padding-block: 0.68rem;
  }

  .page-home .btn--hero-primary,
  .page-home .btn--hero-secondary {
    font-size: 0.76rem;
  }
}

/* Home: iPhone 14/15 Pro Max (394–430px) — telefoon niet op H1/lede */
@media (min-width: 394px) and (max-width: 430px) {
  .page-home .hero__showcase {
    margin-top: clamp(1rem, 3.8svh, 2rem);
    margin-bottom: clamp(0.95rem, 3.5svh, 1.45rem);
    max-width: min(34rem, 100%);
  }

  .page-home .hero__cases-fan {
    gap: 0.5rem;
  }

  .page-home .hero__lede,
  .page-home .hero__lede--modern {
    margin-top: clamp(0.4rem, 1.6svh, 0.75rem);
    font-size: clamp(0.68rem, calc(100vw * 0.027 + 0.48rem), 0.8rem);
  }

  .page-home .hero__headline--modern {
    font-size: clamp(1.95rem, calc(100vw * 0.046 + 0.5rem), 2.35rem);
    letter-spacing: -0.026em;
  }
}

/* Home: overige compacte telefoons (431–899px) */
@media (min-width: 431px) and (max-width: 899px) {
  .page-home .hero__showcase {
    margin-top: clamp(0.35rem, 2svh, 0.85rem);
    margin-bottom: clamp(0.75rem, 2.8svh, 1.2rem);
  }

  .page-home .hero__lede--modern {
    margin-top: clamp(0.4rem, 1.6svh, 0.75rem);
  }
}

/* Legacy alias: oude 430px-blok — verwijderd, zie 393px + 394–430px hierboven */
@media (max-width: 430px) {
  .page-home .hero__title-line--modern {
    text-wrap: balance;
  }

  .page-home .hero__eyebrow {
    font-size: 0.5rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.12rem;
  }

  .page-home .hero__cta-pair {
    margin-top: clamp(0.15rem, 0.65svh, 0.35rem);
    gap: 0.5rem 0.75rem;
  }

  .page-home .hero__proof {
    padding-top: 0.85rem;
    margin-bottom: 0.85rem;
  }

  .page-home .hero__proof-stars,
  .page-home .hero__proof-text {
    font-size: inherit;
  }

  .page-home .hero__proof-text {
    font-size: 0.76rem;
    max-width: 15rem;
  }

  .page-home .hero__proof-score {
    font-size: 0.76rem;
  }

  .page-home .hero__stats-list {
    padding: 0.42rem 0.12rem;
  }

  .page-home .hero__stats-value {
    font-size: clamp(0.84rem, 3.35vw, 1rem);
  }

  .page-home .hero__stats-label {
    font-size: clamp(0.5rem, 1.95vw, 0.56rem);
    line-height: 1.2;
  }

  .page-home .btn--hero-primary,
  .page-home .btn--hero-secondary {
    padding: 0.7rem 1.05rem;
    min-height: 2.65rem;
  }

  .page-home .hero__checks-item::after {
    margin: 0 clamp(0.65rem, 2.8vw, 1rem);
  }

  .page-home .home-deliverables__grid > li {
    flex: 0 0 min(86vw, 16.25rem);
    max-width: min(86vw, 16.25rem);
  }

  .page-home .home-cases__grid > .home-cases__item {
    flex: 0 0 min(86vw, 18.75rem);
    max-width: min(86vw, 18.75rem);
  }

  .page-home .portfolio__card {
    flex: 0 0 min(86vw, 18.75rem);
    max-width: min(86vw, 18.75rem);
  }

  .page-home :is(
      .section-title,
      .home-solution__title,
      .home-crm__title,
      .home-cases__title,
      .home-trust__title,
      .home-process__title,
      .home-audit__title-left
    ) {
    font-size: clamp(1.22rem, 4.3vw, 1.48rem);
  }

  .page-home :is(
      .home-deliverables__lead,
      .home-solution__lead,
      .home-crm__lead,
      .home-cases__lead,
      .home-trust__lead,
      .home-process__lead
    ) {
    font-size: 0.86rem;
    line-height: 1.5;
  }

  .page-home .home-solution__chain li {
    font-size: clamp(0.6rem, 2.45vw, 0.7rem);
  }

  .page-home .home-trust__media {
    width: min(12rem, 72vw);
  }

  .page-home .home-trust .vtx-proof-strip__value {
    font-size: clamp(1.08rem, 3.8vw, 1.35rem);
  }

  .page-home .home-trust .vtx-proof-strip__label {
    font-size: 0.56rem;
    line-height: 1.2;
  }

  .page-home .home-trust__tags li {
    font-size: 0.68rem;
    padding: 0;
  }

  .page-home .home-cases__name {
    font-size: 0.88rem;
  }

  .page-home .home-cases__done,
  .page-home .home-cases__result {
    font-size: 0.72rem;
  }

  .page-home .home-process:not(.home-process--timeline) .home-process__step {
    padding: 0.75rem 0.85rem;
  }

  .page-home .home-audit__stat-value {
    font-size: clamp(1.05rem, 4vw, 1.28rem);
  }

  .page-home .home-audit__stat-label {
    font-size: 0.62rem;
  }
}

/* ——— Home: projecten als horizontale carousel (scroll koppelt niet aan pagina) ——— */
@media (max-width: 899px) {
  .page-home .portfolio {
    overflow-x: clip;
    overflow-y: visible;
  }

  .page-home .portfolio .container {
    padding-left: 0;
    padding-right: 0;
  }

  .page-home .portfolio__head,
  .page-home .portfolio__actions {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }

  .page-home .portfolio__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.85rem;
    margin-top: clamp(1.35rem, 4vw, 2rem);
    margin-left: 0;
    margin-right: 0;
    padding: 0 clamp(0.65rem, 3vw, 1rem) 0.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(0.65rem, 3vw, 1rem);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
  }

  .page-home .portfolio__grid::-webkit-scrollbar {
    display: none;
  }

  .page-home .portfolio__card {
    flex: 0 0 min(84vw, 20.5rem);
    max-width: min(84vw, 20.5rem);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .page-home .portfolio__card:hover {
    transform: none;
  }

  .page-home .portfolio__card:hover .portfolio__thumb {
    transform: none;
  }
}

/* ——— Mobiel: neon-rand op formulier (alle pagina’s) ——— */
@media (max-width: 899px) {
  .cta-form {
    border-color: rgba(0, 255, 255, 0.45);
    box-shadow:
      0 0 0 1px rgba(0, 255, 255, 0.2),
      0 0 32px rgba(0, 255, 255, 0.12);
  }

  .cta-form input,
  .cta-form textarea,
  .cta-form select,
  .cta-form--glass input,
  .cta-form--glass textarea,
  .cta-form--glass select {
    border: 1px solid rgba(0, 255, 255, 0.58);
    box-shadow:
      0 0 0 1px rgba(0, 255, 255, 0.14),
      0 0 18px rgba(0, 255, 255, 0.2);
    background: rgba(4, 10, 12, 0.58);
  }

  .cta-form--glass input:focus,
  .cta-form--glass textarea:focus,
  .cta-form--glass select:focus,
  .cta-form input:focus,
  .cta-form textarea:focus,
  .cta-form select:focus {
    border-color: rgba(0, 255, 255, 0.9);
    box-shadow:
      0 0 0 2px rgba(0, 255, 255, 0.28),
      0 0 22px rgba(0, 255, 255, 0.28);
    background: rgba(4, 12, 14, 0.72);
  }

  /* Diensten: alleen het formulier-blok neon; velden terug naar glass-grijs */
  .page--diensten .cta-form.cta-form--glass {
    border-color: rgba(0, 255, 255, 0.45);
    box-shadow:
      0 0 0 1px rgba(0, 255, 255, 0.2),
      0 0 32px rgba(0, 255, 255, 0.12);
  }

  .page--diensten .cta-form--glass input,
  .page--diensten .cta-form--glass textarea,
  .page--diensten .cta-form--glass select {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    background: rgba(0, 0, 0, 0.22);
  }

  .page--diensten .cta-form--glass input:focus,
  .page--diensten .cta-form--glass textarea:focus,
  .page--diensten .cta-form--glass select:focus {
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.32);
  }

  /* Waarom Valtex: alleen formulierkader neon; velden glass-grijs */
  .page--waarom-valtex .cta-form.cta-form--glass {
    border-color: rgba(0, 255, 255, 0.45);
    box-shadow:
      0 0 0 1px rgba(0, 255, 255, 0.2),
      0 0 32px rgba(0, 255, 255, 0.12);
  }

  .page--waarom-valtex .cta-form--glass input,
  .page--waarom-valtex .cta-form--glass textarea,
  .page--waarom-valtex .cta-form--glass select {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    background: rgba(0, 0, 0, 0.22);
  }

  .page--waarom-valtex .cta-form--glass input:focus,
  .page--waarom-valtex .cta-form--glass textarea:focus,
  .page--waarom-valtex .cta-form--glass select:focus {
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.32);
  }

  /* Home: alleen buitenste formulier neon; velden subtiel (zelfde als Waarom / contact) */
  .page-home .cta-form.cta-form--glass {
    border-color: rgba(0, 255, 255, 0.45);
    box-shadow:
      0 0 0 1px rgba(0, 255, 255, 0.2),
      0 0 32px rgba(0, 255, 255, 0.12);
  }

  .page-home .cta-form--glass input,
  .page-home .cta-form--glass textarea,
  .page-home .cta-form--glass select {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    background: rgba(0, 0, 0, 0.22);
  }

  .page-home .cta-form--glass input:focus,
  .page-home .cta-form--glass textarea:focus,
  .page-home .cta-form--glass select:focus {
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.32);
  }

  /* Onze werken: alleen formulierkader neon; velden glass-grijs */
  .page--werk .cta-form.cta-form--glass {
    border-color: rgba(0, 255, 255, 0.45);
    box-shadow:
      0 0 0 1px rgba(0, 255, 255, 0.2),
      0 0 32px rgba(0, 255, 255, 0.12);
  }

  .page--werk .cta-form--glass input,
  .page--werk .cta-form--glass textarea,
  .page--werk .cta-form--glass select {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    background: rgba(0, 0, 0, 0.22);
  }

  .page--werk .cta-form--glass input:focus,
  .page--werk .cta-form--glass textarea:focus,
  .page--werk .cta-form--glass select:focus {
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.32);
  }

  /* Case-projecten: alleen buitenste formulierkader neon; velden zonder neon-border */
  .page--case-study .cta-form.cta-form--glass {
    border-color: rgba(0, 255, 255, 0.45);
    box-shadow:
      0 0 0 1px rgba(0, 255, 255, 0.2),
      0 0 32px rgba(0, 255, 255, 0.12);
  }

  .page--case-study .cta-form--glass input,
  .page--case-study .cta-form--glass textarea,
  .page--case-study .cta-form--glass select {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    background: rgba(0, 0, 0, 0.22);
  }

  .page--case-study .cta-form--glass input:focus,
  .page--case-study .cta-form--glass textarea:focus,
  .page--case-study .cta-form--glass select:focus {
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.32);
  }

  /* Website laten maken: alleen formulierkader neon; velden glass-grijs */
  .page--website .cta-form.cta-form--glass {
    border-color: rgba(0, 255, 255, 0.45);
    box-shadow:
      0 0 0 1px rgba(0, 255, 255, 0.2),
      0 0 32px rgba(0, 255, 255, 0.12);
  }

  .page--website .cta-form--glass input,
  .page--website .cta-form--glass textarea,
  .page--website .cta-form--glass select {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    background: rgba(0, 0, 0, 0.22);
  }

  .page--website .cta-form--glass input:focus,
  .page--website .cta-form--glass textarea:focus,
  .page--website .cta-form--glass select:focus {
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.32);
  }

  /* Online reclame: alleen formulierkader neon; velden glass-grijs */
  .page--reclame .cta-form.cta-form--glass {
    border-color: rgba(0, 255, 255, 0.45);
    box-shadow:
      0 0 0 1px rgba(0, 255, 255, 0.2),
      0 0 32px rgba(0, 255, 255, 0.12);
  }

  .page--reclame .cta-form--glass input,
  .page--reclame .cta-form--glass textarea,
  .page--reclame .cta-form--glass select {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    background: rgba(0, 0, 0, 0.22);
  }

  .page--reclame .cta-form--glass input:focus,
  .page--reclame .cta-form--glass textarea:focus,
  .page--reclame .cta-form--glass select:focus {
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.32);
  }

  /* SEO: alleen formulierkader neon; velden glass-grijs */
  .page--seo .cta-form.cta-form--glass {
    border-color: rgba(0, 255, 255, 0.45);
    box-shadow:
      0 0 0 1px rgba(0, 255, 255, 0.2),
      0 0 32px rgba(0, 255, 255, 0.12);
  }

  .page--seo .cta-form--glass input,
  .page--seo .cta-form--glass textarea,
  .page--seo .cta-form--glass select {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    background: rgba(0, 0, 0, 0.22);
  }

  .page--seo .cta-form--glass input:focus,
  .page--seo .cta-form--glass textarea:focus,
  .page--seo .cta-form--glass select:focus {
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.32);
  }

  /* Contact: binnenste .cta-form zonder neon-rand (die zit op .contact-form-split__form); velden glass-grijs */
  .page--contact .contact-form-split__form > .cta-form.cta-form--glass {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.18) inset,
      0 6px 28px -14px rgba(0, 0, 0, 0.4);
  }

  .page--contact .contact-form-split__form .cta-form--glass input,
  .page--contact .contact-form-split__form .cta-form--glass textarea,
  .page--contact .contact-form-split__form .cta-form--glass select {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    background: rgba(0, 0, 0, 0.22);
  }

  .page--contact .contact-form-split__form .cta-form--glass input:focus,
  .page--contact .contact-form-split__form .cta-form--glass textarea:focus,
  .page--contact .contact-form-split__form .cta-form--glass select:focus {
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.32);
  }
}

/* ——— Mobiel: minder GPU / sneller scherm (zelfde look, lichtere blur + geen particles) ——— */
@media (max-width: 899px) {
  .particles-canvas {
    display: none !important;
  }

  .menu-overlay__backdrop {
    backdrop-filter: blur(14px) saturate(118%);
    -webkit-backdrop-filter: blur(14px) saturate(118%);
  }

  .glass-sidebar {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
  }

  .header__top.glass-panel--topbar {
    backdrop-filter: blur(12px) saturate(135%);
    -webkit-backdrop-filter: blur(12px) saturate(135%);
  }
}

/* ——— Home: desktop hero modern layout ——— */
@media (min-width: 900px) {
  .page-home .hero__stage {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    box-sizing: border-box;
  }

  .page-home .hero__stats {
    max-width: min(94vw, 46rem);
    bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 5svh);
  }

  .page-home .hero__showcase {
    transform: none;
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
    max-width: min(44rem, 100%);
    width: 100%;
    pointer-events: auto;
  }

  .page-home .hero__stage-inner {
    max-width: min(44rem, 100%);
  }

  .page-home .hero__headline--modern {
    font-size: clamp(2.3rem, 2.7vw + 0.86rem, 3.45rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-align: left;
  }

  .page-home .hero__title-line--modern {
    white-space: normal;
    text-wrap: balance;
  }

  .page-home .hero__lede--modern {
    font-size: clamp(1.06rem, 1.21vw + 0.63rem, 1.21rem);
    margin-bottom: 1.15rem;
  }

  .page-home .hero__checks-item {
    font-size: 1rem;
  }

  .page-home .hero__showcase {
    max-width: min(44rem, 100%);
    align-self: center;
    transform: none;
    margin-top: 0;
    margin-bottom: 0;
    pointer-events: auto;
  }

  .page-home .hero__device-stack {
    display: none;
  }

  .page-home .hero__device--laptop {
    width: 96%;
  }

  .page-home .hero__device--phone {
    width: auto;
    height: 78%;
    transform: translate(calc(-6% - 12px), -50%);
  }

  .page-home .hero__device--phone .hero__device-bezel--phone {
    height: 100%;
    padding: 0.12rem;
  }

  .page-home .hero__device--phone .hero__device-screen {
    height: 100%;
    width: auto;
    aspect-ratio: 9 / 19;
    margin-inline: auto;
  }

  .page-home .hero__device-bezel--laptop {
    padding: 0.22rem 0.22rem 0.18rem;
  }
}

@media (max-width: 899px) {
  .page-home .hero__title-line--sub {
    font-size: 0.94em;
  }
}

/* ——— Contact mobiel: typografie als Waarom (override globale mobiele font-clamps) ——— */
@media (max-width: 899px) {
  .page--contact .contact-intro.contact-intro--waarom-mobile .contact-intro__eyebrow {
    margin: 0 0 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }

  .page--contact .contact-intro.contact-intro--waarom-mobile .contact-intro__title {
    margin: 0 0 0.95rem;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(2rem, 7.5vw, 3.35rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.96);
    text-wrap: balance;
    text-shadow: 0 2px 32px rgba(0, 0, 0, 0.55);
    filter: none;
    max-width: min(66rem, 100%);
  }

  .page--contact .contact-intro.contact-intro--waarom-mobile .contact-intro__copy,
  .page--contact .contact-intro.contact-intro--waarom-mobile .contact-intro__lead {
    font-size: clamp(0.98rem, 3.2vw, 1.12rem);
    line-height: 1.62;
    color: rgba(210, 220, 228, 0.92);
    max-width: min(50rem, 100%);
  }

  .page--contact .contact-intro.contact-intro--waarom-mobile .contact-intro__lead strong {
    color: rgba(244, 248, 248, 0.96);
  }
}

/* ——— CRM: formulier ↔ online gesprek (zelfde knopkleuren als .btn--primary) ——— */
.cta-form-booking-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cta-form-booking-shell > .form-booking__flash {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

.form-mode-toggle {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  gap: 0;
  padding: 0.2rem;
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid var(--border-glass);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
}

.form-mode-toggle__btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  font-family: inherit;
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.18;
  font-size: clamp(0.62rem, 2.35vw, 0.8125rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.5rem clamp(0.3rem, 1.8vw, 1rem);
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  transition: color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.form-mode-toggle__btn:hover,
.form-mode-toggle__btn:focus-visible {
  color: var(--text-primary);
  outline: none;
}

.form-mode-toggle__btn.is-active {
  color: #041210;
  background-color: var(--teal-dim);
  background-image: linear-gradient(135deg, var(--teal) 0%, var(--teal-dim) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.15) inset,
    0 4px 20px -4px rgba(0, 255, 255, 0.45);
}

.cta-section--contact-booking .form-mode-toggle__btn {
  padding: 0.55rem clamp(0.35rem, 2vw, 1.1rem);
  font-size: clamp(0.65rem, 2.5vw, 0.85rem);
}

@media (max-width: 420px) {
  .form-mode-toggle__btn {
    letter-spacing: 0.025em;
    padding: 0.45rem clamp(0.22rem, 1.4vw, 0.55rem);
    font-size: clamp(0.58rem, 2.85vw, 0.72rem);
  }

  .cta-section--contact-booking .form-mode-toggle__btn {
    padding: 0.42rem clamp(0.25rem, 1.6vw, 0.65rem);
    font-size: clamp(0.58rem, 2.9vw, 0.75rem);
  }
}

/* Boekingspaneel zit buiten <form class="cta-form"> — expliciet zelfde glass + inputs */
.cta-form-booking-shell .form-mode-panel--book {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  margin-top: 0;
  padding: clamp(1.2rem, 3vw, 1.75rem) clamp(1.1rem, 2.8vw, 1.65rem);
  border-radius: 22px;
  background: rgba(12, 16, 20, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2) inset,
    0 8px 32px -12px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color-scheme: light;
}

.cta-form-booking-shell .form-mode-panel--book::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 2px;
  box-sizing: border-box;
  background: linear-gradient(
    125deg,
    rgba(0, 255, 255, 0.45) 0%,
    rgba(102, 255, 255, 0.16) 32%,
    rgba(0, 204, 204, 0.36) 62%,
    rgba(0, 255, 255, 0.42) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.22));
}

.cta-form-booking-shell .form-mode-panel--book > * {
  position: relative;
  z-index: 1;
}

.cta-form-booking-shell .form-mode-panel--book .cta-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cta-form-booking-shell .form-mode-panel--book .cta-form__field span {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(200, 210, 218, 0.88);
}

.cta-form-booking-shell .form-mode-panel--book input,
.cta-form-booking-shell .form-mode-panel--book textarea,
.cta-form-booking-shell .form-mode-panel--book select {
  font-family: inherit;
  font-size: 0.9375rem;
  padding: 0.78rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text-primary);
  outline: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
}

.cta-form-booking-shell .form-mode-panel--book select {
  appearance: none;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.28);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366ffff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.5rem;
}

.cta-form-booking-shell .form-mode-panel--book select option {
  color: #111;
  background: #fff;
}

.cta-form-booking-shell .form-mode-panel--book input::placeholder,
.cta-form-booking-shell .form-mode-panel--book textarea::placeholder {
  color: rgba(244, 248, 248, 0.32);
}

.cta-form-booking-shell .form-mode-panel--book input:focus,
.cta-form-booking-shell .form-mode-panel--book textarea:focus,
.cta-form-booking-shell .form-mode-panel--book select:focus {
  border-color: rgba(0, 255, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.36);
}

.cta-form-booking-shell .form-mode-panel--book input[type="date"]::-webkit-calendar-picker-indicator,
.cta-form-booking-shell .form-mode-panel--book input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.15);
  opacity: 0.8;
  cursor: pointer;
}

.form-booking__row {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .form-booking__row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.form-booking__flash {
  font-size: 0.875rem;
  line-height: 1.45;
  margin: 0 0 0.5rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  text-align: center;
  color: var(--cyan);
}

.form-booking__flash--success {
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(74, 222, 128, 0.32);
  color: #bbf7d0;
}

.form-booking__flash--err {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.32);
  color: #fecaca;
}

.form-booking__slots {
  min-height: 2.5rem;
}

/* ——— Online gesprek wizard (sitekleuren, zelfde glas als .cta-form) ——— */
.vtx-meet-book {
  width: 100%;
}

.vtx-meet-wizard {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vtx-meet-wizard__progress {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.vtx-meet-step__title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.05rem, 2.5vw, 1.2rem);
  font-weight: 700;
  color: var(--text-primary);
}

.vtx-meet-step__lead {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

.vtx-meet-calnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.vtx-meet-calnav__label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  text-align: center;
  flex: 1;
}

.vtx-meet-calnav__btn {
  flex-shrink: 0;
}

.vtx-meet-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.vtx-meet-cal__dow {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.25rem 0;
}

.vtx-meet-cal__cell {
  position: relative;
  min-height: 2.65rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 140, 140, 0.14);
  background: #fff;
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.vtx-meet-cal__cell:hover:not(:disabled) {
  border-color: rgba(0, 168, 168, 0.4);
}

.vtx-meet-cal__cell:disabled {
  cursor: default;
}

/* Andere maand: licht grijs, geen nadruk */
.vtx-meet-cal__cell--muted {
  opacity: 1;
  background: #f4f6f7;
  border-color: rgba(15, 23, 42, 0.07);
  color: rgba(26, 35, 41, 0.3);
}

.vtx-meet-cal__cell--muted .vtx-meet-cal__num {
  color: rgba(26, 35, 41, 0.32);
  font-weight: 500;
}

/* Deze maand, gesloten: grijs + streep */
.vtx-meet-cal__cell--closed:not(.vtx-meet-cal__cell--muted) {
  opacity: 1;
  background: #f6f8f9;
  border-color: rgba(15, 23, 42, 0.08);
  text-decoration: line-through;
  text-decoration-color: rgba(26, 35, 41, 0.38);
  color: rgba(26, 35, 41, 0.42);
}

.vtx-meet-cal__cell--closed:not(.vtx-meet-cal__cell--muted) .vtx-meet-cal__num {
  color: rgba(26, 35, 41, 0.45);
  font-weight: 600;
}

/* Beschikbare dag: duidelijk groen */
.vtx-meet-cal__cell--open {
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #16a34a;
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.18);
}

.vtx-meet-cal__cell--open .vtx-meet-cal__num {
  color: #15803d;
}

.vtx-meet-cal__cell--open:hover:not(:disabled) {
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
  border-color: #15803d;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.22);
}

.vtx-meet-cal__num {
  font-weight: 700;
  font-size: 0.9rem;
}

.vtx-meet-cal__status {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.vtx-meet-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.vtx-meet-slot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-width: 5.25rem;
  min-height: 3.35rem;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 168, 168, 0.35);
  background: #fff;
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.vtx-meet-slot:hover {
  border-color: var(--teal);
  background: rgba(0, 184, 184, 0.06);
  box-shadow: 0 4px 16px -10px rgba(0, 120, 120, 0.35);
}

.vtx-meet-slot__time {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--teal);
}

.vtx-meet-slot__dur {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal-dim);
}

.vtx-meet-empty {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: rgba(252, 165, 165, 0.95);
}

.vtx-meet-back {
  margin-top: 0.25rem;
}

.vtx-meet-step__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-top: 0.75rem;
}

.vtx-meet-optional {
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}

.vtx-meet-step textarea {
  resize: vertical;
  min-height: 4rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 140, 140, 0.2);
  background: #fff;
  color: var(--text-primary);
  font: inherit;
  padding: 0.65rem 0.75rem;
  width: 100%;
}

.vtx-meet-step textarea:focus-visible {
  outline: 2px solid rgba(0, 255, 255, 0.45);
  outline-offset: 2px;
}

/* ——— Blog post (CRM) ——— */
.page--blog-post .blog-story-hero .case-story-hero__bg-media img {
  transform: scale(1.1);
  filter: blur(10px) saturate(1.08);
}

.page--blog-post .blog-story-hero__bg-fallback {
  background:
    radial-gradient(circle at 22% 42%, rgba(0, 255, 255, 0.16), transparent 48%),
    radial-gradient(circle at 82% 68%, rgba(0, 180, 200, 0.1), transparent 42%),
    linear-gradient(145deg, #081018 0%, #0e141c 42%, #0a0c10 100%);
}

.page--blog-post .blog-story-hero .case-story-hero__scrim {
  background:
    linear-gradient(90deg, rgba(4, 8, 12, 0.9) 0%, rgba(4, 8, 12, 0.82) 42%, rgba(4, 8, 12, 0.52) 100%),
    radial-gradient(circle at 16% 44%, rgba(0, 255, 255, 0.14), transparent 52%);
}

.blog-story-hero__meta {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(186, 199, 209, 0.72);
}

.blog-post__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.page--blog-post .blog-post-section {
  margin: 0;
}

.page--blog-post .blog-post-section .case-story-split__card {
  grid-template-columns: minmax(0, 1fr);
}

.page--blog-post .blog-post-section .case-story-split__body {
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 44px -24px rgba(0, 0, 0, 0.55);
  padding: clamp(1.15rem, 2.6vw, 1.55rem) clamp(1.1rem, 2.4vw, 1.45rem);
}

.page--blog-post .blog-post-section__body p {
  margin: 0 0 0.75rem;
  font-size: 0.93rem;
  line-height: 1.62;
  color: rgba(196, 210, 220, 0.88);
}

.page--blog-post .blog-post-section__body p:last-child {
  margin-bottom: 0;
}

.blog-see-also.case-next {
  margin-bottom: 0.5rem;
}

.blog-see-also a {
  color: var(--teal);
  text-decoration: none;
}

.blog-see-also a:hover {
  text-decoration: underline;
}

.page--blog-post .page-actions {
  margin-bottom: 0.25rem;
}

/* ——— Light theme: surfaces & contrast ——— */
html {
  color-scheme: light;
}

/* Lichtglazen kaarten op witte pagina's */
.services .service-card,
.why__feature,
.portfolio__card,
.process-timeline__card,
.service-showcase__card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: var(--shadow-card);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .process-timeline__card,
  .portfolio__card,
  .why__feature,
  .services .service-card,
  .cta-form--glass {
    background: #ffffff;
  }
}

.werk-hero-split {
  background:
    radial-gradient(ellipse 100% 70% at 88% 18%, rgba(0, 168, 168, 0.08), transparent 52%),
    linear-gradient(165deg, #f3f6f8 0%, #f8fafb 55%, var(--bg-deep) 100%);
}

.werk-hero-split__eyebrow {
  color: var(--teal);
}

.werk-hero-split__title {
  color: var(--text-primary);
  text-shadow: none;
}

.werk-hero-split__lead,
.werk-hero-split__lead strong {
  color: var(--muted);
}

.werk-hero-split__lead strong {
  color: var(--text-strong);
}

.diensten-hero-simple {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

.case-story-split__body,
.page--blog-post .blog-post-section .case-story-split__body {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: var(--shadow-card);
}

.case-story-hero,
.page--blog-post .blog-story-hero {
  border-color: rgba(15, 23, 42, 0.1);
}

.case-cover,
.portfolio__visual,
.page--reclame .reclame-seo-split__media,
.page--seo .seo-kern-split__media,
.service-showcase__media {
  background: #eef1f4;
  border-color: rgba(15, 23, 42, 0.1);
}

.case-next,
.blog-see-also.case-next {
  background: rgba(0, 168, 168, 0.06);
  border-color: rgba(0, 168, 168, 0.22);
}

.case-next h2,
.case-next p,
.blog-see-also.case-next p,
.blog-see-also.case-next a {
  color: var(--text-primary);
}

.case-story-split__body p,
.blog-post-section__body p {
  color: var(--muted);
}

.case-story-split__title,
.blog-post-section .case-story-split__title {
  color: var(--text-primary);
}

.page:not(.page--case-study) .page-hero__title {
  color: var(--text-primary);
}

.page:not(.page--case-study) .page-hero__lead {
  color: var(--muted);
}

.contact-form-split__aside,
.contact-benefits__list,
.contact-benefits__list li {
  color: var(--muted);
}

.contact-benefits__list strong {
  color: var(--text-strong);
}

.cta-form-booking-shell .form-mode-panel--form,
.cta-form-booking-shell .form-mode-panel--book {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--shadow-card);
}

/* Donkere hero / foto-scrim: altijd lichte letters */
.hero--cinema .hero__copy,
.hero--cinema .hero__eyebrow,
.hero--cinema .hero__headline,
.hero--cinema .hero__lede,
.hero--cinema .hero__lede strong,
.hero--cinema .hero__rating-text,
.hero--cinema .hero__cta-link,
.hero--cinema .hero__cta-meta,
.hero--cinema .hero__cta-meta strong,
.hero--cinema .hero__circle-btn,
.hero--cinema .hero__partners-label,
.hero--cinema .hero__pager-count,
.diensten-hero-simple__inner,
.diensten-hero-simple__eyebrow,
.diensten-hero-simple__lead,
.diensten-hero-simple__lead strong,
#diensten-hero-cinema .diensten-hero__copy,
#diensten-hero-cinema .diensten-hero__eyebrow,
#diensten-hero-cinema .diensten-hero__lead,
#diensten-hero-cinema .diensten-hero__stat-value,
#diensten-hero-cinema .diensten-hero__stat-label,
#diensten-hero-cinema .diensten-hero__card-title,
#diensten-hero-cinema .diensten-hero__card-meta,
#waarom-hero-cinema .diensten-hero__copy,
#waarom-hero-cinema .diensten-hero__eyebrow,
#waarom-hero-cinema .diensten-hero__lead,
#waarom-hero-cinema .diensten-hero__stat-value,
#waarom-hero-cinema .diensten-hero__stat-label,
#waarom-hero-cinema .diensten-hero__card-title,
#waarom-hero-cinema .diensten-hero__card-meta,
.case-story-hero .page-hero__title,
.case-story-hero .page-hero__lead,
.case-story-hero__crumbs,
.page--contact .contact-intro.contact-intro--waarom-mobile .contact-intro__title,
.page--contact .contact-intro.contact-intro--waarom-mobile .contact-intro__lead,
.page--contact .contact-intro.contact-intro--waarom-mobile .contact-intro__lead strong {
  color: var(--text-inverse);
}

.case-story-hero__crumbs {
  color: var(--text-muted-on-dark);
}

.case-story-hero__crumbs a,
.page--contact .contact-intro.contact-intro--waarom-mobile .contact-intro__eyebrow {
  color: var(--text-muted-on-dark);
}

.case-story-hero__crumbs a:hover,
.page--contact .contact-intro.contact-intro--waarom-mobile a:hover {
  color: var(--cyan);
}

.hero--cinema .hero__title-line,
.diensten-hero-simple__title-line,
#diensten-hero-cinema .diensten-hero__title-line--accent,
#waarom-hero-cinema .diensten-hero__title-line--accent {
  background: linear-gradient(105deg, #fff 0%, rgba(255, 255, 255, 0.95) 50%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#diensten-hero-cinema .diensten-hero__title-line:not(.diensten-hero__title-line--accent),
#waarom-hero-cinema .diensten-hero__title-line:not(.diensten-hero__title-line--accent) {
  color: var(--text-inverse);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

/* Header + sidebar: wit op donkere hero, donker op witte secties */
body.site-chrome--on-dark-hero .logo--header,
body.site-chrome--on-dark-hero .nav--top,
body.site-chrome--on-dark-hero .nav--top a,
body.site-chrome--on-dark-hero .icon-btn,
body.site-chrome--on-dark-hero .sidebar__menu,
body.site-chrome--on-dark-hero .sidebar__menu-label,
body.site-chrome--on-dark-hero .sidebar__icon-link {
  color: rgba(255, 255, 255, 0.94);
}

body.site-chrome--on-dark-hero:has(#wlm-hero-cinema) .logo--header,
body.site-chrome--on-dark-hero:has(#wlm-hero-cinema) .nav--top,
body.site-chrome--on-dark-hero:has(#wlm-hero-cinema) .nav--top a,
body.site-chrome--on-dark-hero:has(#wlm-hero-cinema) .sidebar__menu,
body.site-chrome--on-dark-hero:has(#wlm-hero-cinema) .sidebar__menu-label {
  color: rgba(255, 255, 255, 0.94) !important;
}

body.site-chrome--on-dark-hero .nav--top,
body.site-chrome--on-dark-hero .nav--top a {
  font-weight: 600;
}

body.site-chrome--on-dark-hero .nav--top a:hover,
body.site-chrome--on-dark-hero .icon-btn:hover,
body.site-chrome--on-dark-hero .sidebar__menu:hover,
body.site-chrome--on-dark-hero .sidebar__menu:focus-visible,
body.site-chrome--on-dark-hero .sidebar__icon-link:hover {
  color: var(--cyan);
}

body.site-chrome--on-dark-hero:has(#wlm-hero-cinema) .logo__img,
body.site-chrome--on-dark-hero:has(#blog-hero) .logo__img,
body.site-chrome--on-dark-hero:has(.blog-hero) .logo__img,
body.site-chrome--on-dark-hero:has(.legal-hero) .logo__img,
body.site-chrome--on-dark-hero:has(.blog-landing-hero--regional) .logo__img,
body.site-chrome--on-dark-hero:has(.blog-landing-hero--story) .logo__img,
body.site-chrome--on-dark-hero:has(.blog-landing-hero--cinema) .logo__img,
body.site-chrome--on-dark-hero:has(.blog-landing-hero--browser) .logo__img,
body.site-chrome--on-dark-hero:has(.blog-landing-hero--phone) .logo__img,
body.site-chrome--on-dark-hero:has(.blog-landing-hero--video) .logo__img,
body.site-chrome--on-dark-hero:has(.blog-landing-hero--studio) .logo__img {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

body.site-chrome--on-dark-hero .header__top.glass-panel--topbar.header__top--at-top {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.site-chrome--on-dark-hero:not(.menu-open) .header__top.glass-panel--topbar:not(.header__top--at-top) {
  background: rgba(8, 12, 16, 0.42) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

html:has(body.site-chrome--on-dark-hero) {
  background-color: #05080c;
}

body:not(.site-chrome--on-dark-hero) .logo--header,
body:not(.site-chrome--on-dark-hero) .nav--top,
body:not(.site-chrome--on-dark-hero) .icon-btn,
body:not(.site-chrome--on-dark-hero) .sidebar__menu,
body:not(.site-chrome--on-dark-hero) .sidebar__menu-label,
body:not(.site-chrome--on-dark-hero) .sidebar__icon-link {
  color: rgba(26, 35, 41, 0.88);
}

body:not(.site-chrome--on-dark-hero) .nav--top {
  color: rgba(26, 35, 41, 0.72);
  font-weight: 600;
}

body:not(.site-chrome--on-dark-hero) .nav--top a {
  font-weight: 600;
  color: rgba(26, 35, 41, 0.82);
}

body:not(.site-chrome--on-dark-hero) .nav--top a:hover {
  color: var(--teal);
}

body:not(.site-chrome--on-dark-hero) .sidebar__icon-link {
  color: rgba(26, 35, 41, 0.78);
}

.btn--ghost {
  border-color: rgba(15, 23, 42, 0.14);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.7);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: rgba(0, 168, 168, 0.35);
  background: rgba(0, 168, 168, 0.08);
  color: var(--teal);
}

.page--waarom-valtex .waarom-seo .waarom-seo__btn-ghost.btn--ghost {
  padding: 0.48rem 1.05rem;
  font-size: 0.8rem;
  line-height: 1.2;
  min-height: 0;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.12) inset;
}

.page--waarom-valtex .waarom-seo .waarom-seo__btn-ghost.btn--ghost:hover,
.page--waarom-valtex .waarom-seo .waarom-seo__btn-ghost.btn--ghost:focus-visible {
  color: var(--teal-dim);
  background: #fff;
  border-color: #fff;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.35);
}

.vtx-meet-step textarea,
.form-booking__row input,
.form-booking__row select,
.vtx-meet-step__title,
.vtx-meet-step__lead {
  color: var(--text-primary);
}

.vtx-meet-step__lead {
  color: var(--muted);
}

/* Topbar transparant bovenaan op lichte pagina's (niet op donkere hero) */
body:not(.site-chrome--on-dark-hero) .header__top.glass-panel--topbar.header__top--at-top {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Home: witte secties — expliciete donkere titels (fix oude --white cache op hosting) */
.page-home :is(
    .home-deliverables,
    .home-solution,
    .home-crm,
    .home-cases,
    .home-pricing,
    .home-audit,
    .home-close-cta
  ) {
  color: #1a2329;
}

.page-home :is(
    .home-deliverables,
    .home-solution,
    .home-crm,
    .home-cases,
    .home-pricing,
    .home-audit,
    .home-close-cta
  )
  :is(
    h1,
    h2,
    h3,
    h4,
    .section-title,
    .home-deliverables__card-title,
    .home-deliverables__banner-title,
    .home-solution__title,
    .home-crm__title,
    .home-cases__title,
    .home-cases__name,
    .home-pricing__title,
    .home-audit__title-left,
    .home-audit__form-title,
    .home-close-cta__title
  ) {
  color: #1a2329;
}

:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit__form input,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit__form select,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit__form textarea,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .cta-form-booking-shell .form-mode-panel--book input,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .cta-form-booking-shell .form-mode-panel--book select,
:is(.page-home, .page--wlm, .page--reclame, .page--seo, .page--crm) .home-audit .cta-form-booking-shell .form-mode-panel--book textarea {
  color: #1a2329;
}

/* ——— Website laten maken (wlm) ——— */
.page--wlm {
  padding-top: 0;
  padding-bottom: 0;
}

.page--wlm .diensten-page-decor {
  display: none;
}

/* Wit / teal strepen */
.wlm-strip {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  margin-top: -1px;
}

.wlm-strip--white {
  background: #fff;
  color: var(--text-primary);
}

.wlm-strip--teal {
  overflow: hidden;
  color: var(--text-inverse);
}

.wlm-strip--teal__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, #005a5a 0%, var(--teal-dim) 32%, var(--teal) 58%, #00b0b0 100%);
}

.wlm-strip--teal__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 92% 8%, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 45% 50% at 4% 92%, rgba(0, 255, 255, 0.18) 0%, transparent 52%);
}

.wlm-strip--white .container,
.wlm-strip--teal .container {
  position: relative;
  z-index: 1;
}

.wlm-strip__head {
  text-align: center;
  max-width: min(44rem, 100%);
  margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
}

.wlm-strip__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-dim);
}

.wlm-strip--teal .wlm-strip__eyebrow {
  color: rgba(200, 245, 245, 0.88);
}

.wlm-strip__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.55rem, 3.5vw, 2.15rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.wlm-strip--teal .wlm-strip__title {
  color: rgba(255, 255, 255, 0.98);
}

.wlm-strip__accent {
  color: var(--teal-dim);
}

.wlm-strip--teal .wlm-strip__accent {
  color: var(--cyan);
}

.wlm-strip__lead {
  margin: 0;
  font-size: clamp(0.95rem, 1.75vw, 1.05rem);
  line-height: 1.65;
  color: rgba(26, 35, 41, 0.72);
}

.wlm-problems .wlm-strip__lead--intro {
  max-width: 34rem;
  margin-inline: auto;
  font-size: clamp(0.8rem, 1.25vw, 0.88rem);
  line-height: 1.58;
  font-weight: 600;
  color: rgba(26, 35, 41, 0.82);
}

.wlm-strip__lead-kw {
  font-weight: 700;
  color: rgba(18, 32, 38, 0.92);
  text-decoration: underline;
  text-decoration-color: rgba(0, 140, 140, 0.42);
  text-underline-offset: 0.14em;
  text-decoration-thickness: 1.5px;
}

.wlm-strip__title--sub {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
}

.wlm-related-links-wrap {
  padding-bottom: clamp(2rem, 4.5vw, 2.75rem);
}

.wlm-related-links-wrap .wlm-strip__head[data-reveal],
.wlm-related-links-wrap .wlm-related-links__panel[data-reveal] {
  opacity: 1;
  transform: none;
}

.wlm-related-links__panel {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: clamp(1.15rem, 3vw, 1.65rem);
  border-radius: 18px;
  background: linear-gradient(145deg, #f8fcfc 0%, #ffffff 100%);
  border: 1px solid rgba(0, 140, 140, 0.14);
  box-shadow: 0 18px 40px -28px rgba(0, 48, 52, 0.16);
}

.wlm-related-links__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wlm-related-links__grid > li {
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

@media (min-width: 520px) {
  .wlm-related-links__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

@media (min-width: 768px) {
  .wlm-related-links__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
  }
}

@media (min-width: 1100px) {
  .wlm-related-links__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
  }
}

@media (min-width: 1320px) {
  .wlm-related-links__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .wlm-related-links__btn {
    font-size: 0.82rem;
    padding: 0.75rem 0.85rem;
  }
}

.wlm-related-links__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 3rem;
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  color: #0a4a4a;
  background: #fff;
  border: 1px solid rgba(0, 140, 140, 0.22);
  box-shadow:
    0 4px 14px -8px rgba(0, 48, 52, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.wlm-related-links__btn:hover,
.wlm-related-links__btn:focus-visible {
  transform: translateY(-1px);
  color: #083838;
  border-color: rgba(0, 168, 168, 0.45);
  box-shadow: 0 12px 24px -14px rgba(0, 140, 140, 0.38);
}

.wlm-related-links__btn-icon {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--teal);
}

.wlm-strip--teal .wlm-strip__lead {
  color: rgba(230, 248, 248, 0.88);
}

/* Donker hero — studio layout */
.wlm-hero,
#wlm-hero-cinema.wlm-hero,
#reclame-hero-cinema.wlm-hero,
#seo-hero-cinema.wlm-hero,
#crm-hero-cinema.wlm-hero {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  min-height: max(460px, 76vh);
  display: flex;
  align-items: center;
  overflow: visible;
  background:
    radial-gradient(ellipse 55% 42% at 78% 18%, rgba(0, 255, 255, 0.14), transparent 58%),
    radial-gradient(ellipse 45% 38% at 8% 82%, rgba(0, 140, 140, 0.1), transparent 55%),
    linear-gradient(165deg, #0a0e12 0%, #060910 48%, #030508 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wlm-hero__ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.wlm-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
}

.wlm-hero__orb--1 {
  width: min(42vw, 420px);
  height: min(42vw, 420px);
  top: -8%;
  right: 12%;
  background: rgba(0, 255, 255, 0.22);
}

.wlm-hero__orb--2 {
  width: min(32vw, 320px);
  height: min(32vw, 320px);
  bottom: -5%;
  left: 8%;
  background: rgba(0, 168, 168, 0.18);
}

.wlm-hero__orb--3 {
  width: min(22vw, 220px);
  height: min(22vw, 220px);
  top: 42%;
  left: 38%;
  background: rgba(0, 120, 140, 0.12);
  opacity: 0.35;
}

.wlm-hero__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, rgba(0, 0, 0, 0.75) 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, rgba(0, 0, 0, 0.75) 0%, transparent 78%);
}

.wlm-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

.wlm-hero__wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  align-items: center;
  min-width: 0;
  padding-top: calc(var(--topbar-h) + 1.35rem);
  padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

@media (min-width: 900px) {
  .wlm-hero__wrap {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(2rem, 3.5vw, 3rem);
    align-items: center;
  }
}

.wlm-hero__copy {
  text-align: center;
  max-width: min(34rem, 100%);
  margin-inline: auto;
}

@media (min-width: 900px) {
  .wlm-hero__copy {
    text-align: left;
    margin-inline: 0;
    padding-right: 0.5rem;
  }
}

.wlm-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  padding: 0.38rem 0.8rem 0.38rem 0.6rem;
  border-radius: 999px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(210, 248, 248, 0.95);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(0, 255, 255, 0.22);
  box-shadow: 0 0 24px -8px rgba(0, 255, 255, 0.35);
}

@media (max-width: 899px) {
  .wlm-hero__eyebrow {
    margin-inline: auto;
  }
}

.wlm-hero__eyebrow-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.55);
  animation: werk-hero-showcase-pulse 2.4s ease-in-out infinite;
}

.wlm-hero__title {
  margin: 0 0 0.8rem;
  font-weight: 800;
  font-size: clamp(1.9rem, 4.8vw, 3rem);
  line-height: 1.07;
  letter-spacing: -0.035em;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  color: rgba(255, 255, 255, 0.98);
}

.wlm-hero__title-line {
  display: block;
}

.page--wlm #wlm-hero-cinema .wlm-hero__title {
  align-items: flex-start;
  gap: 0.14em;
}

.page--wlm #wlm-hero-cinema .wlm-hero__title-line {
  max-width: 100%;
  text-wrap: balance;
}

.page--wlm #wlm-hero-cinema .wlm-hero__title-line--mobile {
  display: none;
}

.page--wlm #wlm-hero-cinema .wlm-hero__lead-mobile {
  display: none;
}

.wlm-hero__metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.wlm-hero__metrics li {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(232, 244, 246, 0.88);
}

.wlm-hero__metrics li:not(:last-child)::after {
  content: "·";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 255, 255, 0.55);
}

.wlm-hero__metric-dot {
  display: none;
}

.wlm-hero__panel .vtx-proof-strip--hero {
  margin-top: 0.75rem;
}

@media (max-width: 899px) {
  .page--wlm #wlm-hero-cinema.wlm-hero {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
  }

  .page--wlm #wlm-hero-cinema .wlm-hero__wrap {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }

  .page--wlm #wlm-hero-cinema .wlm-hero__title {
    align-items: center;
    font-size: clamp(1.9rem, 7.5vw, 2.6rem);
    line-height: 1.1;
    margin-bottom: 0.7rem;
  }

  .page--wlm #wlm-hero-cinema .wlm-hero__lead-desktop {
    display: none;
  }

  .page--wlm #wlm-hero-cinema .wlm-hero__lead-mobile {
    display: block;
  }

  .page--wlm #wlm-hero-cinema .wlm-hero__lead {
    margin: 0 auto 0.9rem;
    max-width: 22rem;
    text-align: center;
    font-size: clamp(0.86rem, 3.4vw, 0.96rem);
    line-height: 1.55;
    text-wrap: balance;
  }

  .page--wlm #wlm-hero-cinema .wlm-hero__metrics {
    justify-content: center;
    margin-top: 0;
    margin-bottom: 1.15rem;
  }

  .page--wlm #wlm-hero-cinema .wlm-hero__title-line:first-child,
  .page--wlm #wlm-hero-cinema .wlm-hero__title-line--mobile {
    white-space: normal;
    text-wrap: balance;
    max-width: 100%;
  }

  .page--wlm #wlm-hero-cinema .wlm-hero__title-line--desktop {
    display: none;
  }

  .page--wlm #wlm-hero-cinema .wlm-hero__title-line--mobile {
    display: block;
    padding-left: 0;
    border-left: none;
    font-size: 0.92em;
    text-align: center;
  }

  .page--wlm #wlm-hero-cinema .wlm-hero__copy,
  .page--wlm #wlm-hero-cinema .wlm-hero__panel,
  .page--wlm #wlm-hero-cinema .wlm-hero__visual {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .page--wlm #wlm-hero-cinema .vtx-proof-strip--hero {
    width: 100%;
    max-width: 100%;
  }
}

.wlm-hero__title-line--accent {
  color: #fff;
  padding-left: 0.65rem;
  border-left: 3px solid var(--cyan);
  text-shadow: 0 0 40px rgba(0, 255, 255, 0.25);
}

.wlm-hero__lead {
  margin: 0 0 1.25rem;
  max-width: 27rem;
  font-size: clamp(0.92rem, 1.6vw, 1.02rem);
  line-height: 1.6;
  color: rgba(210, 225, 230, 0.85);
}

.wlm-hero__lead strong {
  color: rgba(255, 255, 255, 0.96);
  font-weight: 600;
}

.wlm-hero__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 48px -28px rgba(0, 0, 0, 0.55);
}

@media (min-width: 900px) {
  .wlm-hero__panel {
    align-items: flex-start;
    max-width: 26rem;
  }
}

.wlm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  justify-content: center;
  width: 100%;
}

@media (min-width: 900px) {
  .wlm-hero__actions {
    justify-content: flex-start;
  }
}

.wlm-hero__link-prijzen {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(200, 255, 255, 0.95);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 255, 255, 0.45);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.wlm-hero__link-prijzen:hover,
.wlm-hero__link-prijzen:focus-visible {
  color: #fff;
  border-color: #fff;
}

.wlm-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.45rem;
  margin: 0;
  padding: 0.55rem 0 0;
  list-style: none;
  width: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(180, 210, 215, 0.82);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.wlm-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.wlm-hero__trust li:not(:last-child)::after {
  content: "·";
  margin-left: 0.35rem;
  opacity: 0.45;
  font-weight: 700;
}

.wlm-hero__trust-value {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
}

.wlm-hero__visual {
  max-width: min(36rem, 100%);
  margin-inline: auto;
}

@media (min-width: 900px) {
  .wlm-hero__visual {
    margin-inline: 0;
    max-width: 100%;
    perspective: 1200px;
  }
}

.wlm-hero__frame {
  border-radius: 20px;
  overflow: hidden;
  background: rgba(12, 18, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 32px 72px -28px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(0, 255, 255, 0.1) inset,
    0 0 80px -20px rgba(0, 255, 255, 0.2);
  transform: rotateY(-4deg) rotateX(2deg);
  transition: transform 0.45s var(--ease-out);
}

@media (min-width: 900px) {
  .wlm-hero__frame:hover {
    transform: rotateY(-2deg) rotateX(1deg) translateY(-4px);
  }
}

@media (max-width: 899px) {
  .wlm-hero__frame {
    transform: none;
  }
}

.wlm-hero__frame-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wlm-hero__frame-dots {
  display: inline-flex;
  gap: 0.28rem;
}

.wlm-hero__frame-dots i {
  display: block;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.wlm-hero__frame-dots i:first-child {
  background: rgba(255, 100, 100, 0.65);
}

.wlm-hero__frame-dots i:nth-child(2) {
  background: rgba(255, 200, 80, 0.65);
}

.wlm-hero__frame-dots i:nth-child(3) {
  background: rgba(80, 220, 120, 0.65);
}

.wlm-hero__frame-url {
  flex: 1;
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(200, 220, 225, 0.65);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.wlm-hero__showcase {
  position: relative;
  overflow: hidden;
}

.wlm-hero__showcase-main {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 599;
  object-fit: cover;
}

.wlm-hero__price-float {
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem 0.45rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: inherit;
  border-radius: 999px;
  background: rgba(8, 14, 18, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 255, 0.45);
  box-shadow: 0 10px 28px -8px rgba(0, 255, 255, 0.45);
  transition: transform 0.22s ease, border-color 0.22s ease;
}

.wlm-hero__price-float:hover,
.wlm-hero__price-float:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(0, 255, 255, 0.7);
}

.wlm-hero__price-float-from {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(180, 255, 255, 0.88);
}

.wlm-hero__price-float-amount {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
}

.wlm-hero__price-float-type {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(210, 230, 232, 0.88);
  padding-left: 0.35rem;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.wlm-hero__visual-caption {
  margin: 0.65rem 0 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  color: rgba(180, 210, 215, 0.55);
}

@media (min-width: 900px) {
  .wlm-hero__visual-caption {
    text-align: right;
    padding-right: 0.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wlm-hero__frame {
    transform: none;
  }

  .wlm-hero__frame:hover {
    transform: none;
  }
}

/* Problemen (wit) */
.wlm-problems {
  position: relative;
  padding: clamp(2.5rem, 5.5vw, 3.75rem) 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 184, 184, 0.06), transparent 58%),
    linear-gradient(180deg, #f8fbfb 0%, #fff 38%, #fff 100%);
}

.wlm-problems::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 140, 140, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 140, 140, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 72%);
}

.wlm-problems .container {
  position: relative;
  z-index: 1;
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

.wlm-problems .wlm-strip__head {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.35rem);
}

.wlm-problems__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .wlm-problems__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 900px) {
  .wlm-problems__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

/* Mobiel: problemen horizontaal scrollen */
@media (max-width: 899px) {
:is(.page--wlm, .page--reclame, .page--seo, .page--crm) .wlm-problems__grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(0.75rem, 3vw, 1rem);
    margin-left: calc(-1 * clamp(1rem, 4.5vw, 1.35rem));
    margin-right: calc(-1 * clamp(1rem, 4.5vw, 1.35rem));
    padding-left: clamp(1rem, 4.5vw, 1.35rem);
    padding-right: clamp(1rem, 4.5vw, 1.35rem);
    padding-bottom: 0.35rem;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(1rem, 4.5vw, 1.35rem);
    scrollbar-width: none;
  }

:is(.page--wlm, .page--reclame, .page--seo, .page--crm) .wlm-problems__grid::-webkit-scrollbar {
    display: none;
  }

:is(.page--wlm, .page--reclame, .page--seo, .page--crm) .wlm-problems__grid > .wlm-problems__card {
    flex: 0 0 min(82vw, 17.5rem);
    max-width: min(82vw, 17.5rem);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 0;
    align-self: stretch;
  }

:is(.page--wlm, .page--reclame, .page--seo, .page--crm) .wlm-problems__grid .wlm-problems__card[data-reveal],
:is(.page--wlm, .page--reclame, .page--seo, .page--crm) .wlm-problems__grid .wlm-problems__card[data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

:is(.page--wlm, .page--reclame, .page--seo, .page--crm) .wlm-problems__grid .wlm-problems__card:hover {
    transform: none;
  }

:is(.page--wlm, .page--reclame, .page--seo, .page--crm) .wlm-problems__foot {
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
  }

:is(.page--wlm, .page--reclame, .page--seo, .page--crm) .wlm-problems__foot-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: none;
    gap: 0.75rem;
  }

:is(.page--wlm, .page--reclame, .page--seo, .page--crm) .wlm-problems__foot-text {
    max-width: min(22rem, 100%);
    text-align: center;
    flex: none;
  }

:is(.page--wlm, .page--reclame, .page--seo, .page--crm) .wlm-problems .vtx-proof-strip--foot {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    margin-inline: auto;
    padding: 0.85rem 0.55rem;
    border-radius: 14px;
    background: linear-gradient(155deg, #ffffff 0%, #f9fcfc 100%);
    border: 1px solid rgba(0, 140, 140, 0.12);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.95) inset,
      0 14px 36px -24px rgba(0, 55, 60, 0.2);
    text-align: center;
    gap: 0.45rem 0.35rem;
  }

:is(.page--wlm, .page--reclame, .page--seo, .page--crm) .wlm-problems .vtx-proof-strip--foot li {
    align-items: center;
    text-align: center;
  }

:is(.page--wlm, .page--reclame, .page--seo, .page--crm) .wlm-problems .vtx-proof-strip--foot .vtx-proof-strip__value {
    font-size: clamp(1.15rem, 4.8vw, 1.45rem);
  }

:is(.page--wlm, .page--reclame, .page--seo, .page--crm) .wlm-problems .vtx-proof-strip--foot .vtx-proof-strip__label {
    font-size: clamp(0.58rem, 2.45vw, 0.66rem);
    line-height: 1.2;
    white-space: nowrap;
    hyphens: none;
  }

:is(.page--wlm, .page--reclame, .page--seo, .page--crm) .wlm-problems__cta {
    width: 100%;
    max-width: min(20rem, 100%);
    justify-content: center;
  }
}

.wlm-problems__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  min-height: 100%;
  padding: 1.15rem 1.15rem 1.1rem;
  border-radius: 16px;
  background: linear-gradient(155deg, #ffffff 0%, #f9fcfc 100%);
  border: 1px solid rgba(0, 140, 140, 0.12);
  border-left: 3px solid rgba(224, 80, 80, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 16px 40px -28px rgba(0, 55, 60, 0.2);
  transition:
    transform 0.25s var(--ease-out),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.wlm-problems__card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 154, 154, 0.28);
  border-left-color: var(--teal);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 22px 48px -24px rgba(0, 100, 110, 0.28),
    0 0 0 1px rgba(0, 184, 184, 0.08);
}

.wlm-problems__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  color: var(--teal-dim);
  background: linear-gradient(145deg, rgba(0, 184, 184, 0.14) 0%, rgba(0, 140, 140, 0.06) 100%);
  border: 1px solid rgba(0, 140, 140, 0.16);
  box-shadow: 0 6px 16px -10px rgba(0, 120, 130, 0.45);
}

.wlm-problems__card:hover .wlm-problems__card-icon {
  color: #fff;
  background: linear-gradient(145deg, var(--cyan) 0%, var(--teal) 100%);
  border-color: rgba(0, 255, 255, 0.35);
}

.wlm-problems__card-num {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(0, 140, 140, 0.35);
}

.wlm-problems__card-text {
  margin: 0;
  padding-right: 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.48;
  color: var(--text-primary);
}

.wlm-problems__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.25rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.65rem);
  border-top: 1px solid rgba(0, 140, 140, 0.12);
}

.wlm-problems__foot-text {
  margin: 0;
  flex: 1 1 14rem;
  max-width: 32rem;
  font-size: clamp(0.88rem, 1.4vw, 0.95rem);
  line-height: 1.55;
  color: rgba(26, 35, 41, 0.68);
}

.wlm-problems__foot-text strong {
  color: var(--text-primary);
  font-weight: 700;
}

.wlm-problems__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  padding: 0.65rem 1.15rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--teal) 100%);
  box-shadow: 0 6px 20px -8px rgba(0, 154, 154, 0.55);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.wlm-problems__cta:hover,
.wlm-problems__cta:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -8px rgba(0, 154, 154, 0.65);
}

.wlm-problems__cta svg {
  transition: transform 0.22s var(--ease-out);
}

.wlm-problems__cta:hover svg,
.wlm-problems__cta:focus-visible svg {
  transform: translateX(3px);
}

/* Oplossing op teal */
.wlm-solution-wrap {
  padding: clamp(2.35rem, 5.5vw, 3.5rem) 0;
}

.wlm-solution-wrap .container {
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

.wlm-solution-wrap .home-solution__layout--on-teal {
  --home-solution-muted: rgba(240, 252, 252, 0.9);
}

.wlm-solution-wrap .home-solution__eyebrow {
  color: rgba(220, 248, 248, 0.92);
}

.wlm-solution-wrap .home-solution__title {
  color: rgba(255, 255, 255, 0.98);
}

.wlm-solution-wrap .home-solution__title-accent {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(0, 255, 255, 0.8);
  text-underline-offset: 0.14em;
  text-decoration-thickness: 2px;
}

.wlm-solution-wrap .home-solution__lead {
  color: rgba(240, 252, 252, 0.92);
}

.wlm-solution-wrap .home-solution__kw {
  color: #fff;
  font-weight: 700;
}

.wlm-solution-wrap .home-solution__shift-old {
  color: rgba(255, 255, 255, 0.65);
  text-decoration-color: rgba(255, 130, 130, 0.8);
}

.wlm-solution-wrap .home-solution__shift-arrow {
  color: #fff;
  font-size: 1.05em;
  font-weight: 900;
  opacity: 1;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}

.wlm-solution-wrap .home-solution__shift-new {
  color: #fff;
}

.wlm-solution-wrap .home-solution__chain {
  color: #fff;
}

.wlm-solution-wrap .home-solution__chain li {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.38);
}

@media (max-width: 899px) {
  .wlm-solution-wrap .home-solution__chain {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  .wlm-solution-wrap .home-solution__chain li {
    background: transparent;
    border: none;
  }
}

.wlm-solution-wrap .home-solution__chain li:not(:last-child)::after {
  color: rgba(255, 255, 255, 0.92);
  opacity: 1;
  font-weight: 800;
  font-size: 0.9em;
}

.wlm-solution-wrap .home-solution__frame {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 20px 48px -22px rgba(0, 30, 35, 0.55);
}

.wlm-solution-wrap .home-solution__frame::before {
  border-color: rgba(255, 255, 255, 0.2);
}

.wlm-solution-wrap .home-solution__cta--primary {
  color: #005f5f;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 6px 22px -8px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.wlm-solution-wrap .home-solution__cta--primary:hover,
.wlm-solution-wrap .home-solution__cta--primary:focus-visible {
  color: #004848;
  background: #f2ffff;
  transform: translateY(-2px);
  box-shadow:
    0 10px 30px -8px rgba(0, 0, 0, 0.4),
    0 0 28px -4px rgba(255, 255, 255, 0.45);
}

.wlm-solution-wrap .home-solution__cta--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.08);
}

.wlm-solution-wrap .home-solution__cta--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
}

/* Prijzen (wit) */
.wlm-pricing {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}

.wlm-pricing .container {
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

.wlm-pricing__head {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: min(44rem, 100%);
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
}

.wlm-pricing__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-dim);
}

.wlm-pricing__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.55rem, 3.5vw, 2.15rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.wlm-pricing__accent {
  color: var(--teal-dim);
}

.wlm-pricing__lead {
  margin: 0;
  font-size: clamp(0.95rem, 1.75vw, 1.05rem);
  line-height: 1.65;
  color: rgba(26, 35, 41, 0.72);
}

.wlm-pricing__btw {
  font-size: 0.88em;
  color: rgba(26, 35, 41, 0.55);
}

.wlm-pricing__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .wlm-pricing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .wlm-pricing__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobiel: prijskaarten horizontaal scrollen */
@media (max-width: 899px) {
  .wlm-pricing__grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(0.75rem, 3vw, 1rem);
    margin-left: calc(-1 * clamp(1rem, 4.5vw, 1.35rem));
    margin-right: calc(-1 * clamp(1rem, 4.5vw, 1.35rem));
    padding-left: clamp(1rem, 4.5vw, 1.35rem);
    padding-right: clamp(1rem, 4.5vw, 1.35rem);
    padding-bottom: 0.35rem;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(1rem, 4.5vw, 1.35rem);
    scrollbar-width: none;
  }

  .wlm-pricing__grid::-webkit-scrollbar {
    display: none;
  }

  .wlm-pricing__grid > .wlm-pricing__card {
    flex: 0 0 min(86vw, 19.25rem);
    max-width: min(86vw, 19.25rem);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 0;
    align-self: stretch;
  }

  .wlm-pricing__grid .wlm-pricing__card[data-reveal],
  .wlm-pricing__grid .wlm-pricing__card[data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .wlm-pricing__grid .wlm-pricing__card:hover {
    transform: none;
  }

  /* WLM mobiel: landing eerst, daarna populairste keuze, dan rest */
  .page--wlm .wlm-pricing__grid > .wlm-pricing__card:nth-child(1) {
    order: 1;
  }

  .page--wlm .wlm-pricing__grid > .wlm-pricing__card:nth-child(2) {
    order: 3;
  }

  .page--wlm .wlm-pricing__grid > .wlm-pricing__card:nth-child(3) {
    order: 4;
  }

  .page--wlm .wlm-pricing__grid > .wlm-pricing__card:nth-child(4) {
    order: 5;
  }

  .page--wlm .wlm-pricing__grid > .wlm-pricing__card:nth-child(5) {
    order: 6;
  }

  .page--wlm .wlm-pricing__grid > .wlm-pricing__card:nth-child(6) {
    order: 7;
  }

  .page--wlm .wlm-pricing__grid > .wlm-pricing__card.wlm-pricing__card--featured {
    order: 2;
  }

  .wlm-pricing__grid {
    padding-top: 0.65rem;
  }
}

.wlm-pricing__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(1.15rem, 2.5vw, 1.45rem);
  border-radius: clamp(1rem, 2vw, 1.25rem);
  background: linear-gradient(145deg, #ffffff 0%, #f8fcfc 100%);
  border: 1px solid rgba(0, 140, 140, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 20px 48px -28px rgba(0, 55, 60, 0.22);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.wlm-pricing__card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 154, 154, 0.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 26px 56px -24px rgba(0, 100, 110, 0.28);
}

.wlm-pricing__card--featured {
  padding-top: clamp(1.35rem, 2.8vw, 1.55rem);
  border-color: rgba(0, 154, 154, 0.42);
  background: linear-gradient(145deg, #ffffff 0%, #f2fafa 48%, #eef8f8 100%);
  box-shadow:
    0 0 0 1px rgba(0, 184, 184, 0.12) inset,
    0 24px 56px -24px rgba(0, 120, 130, 0.3);
}

.wlm-pricing__badge {
  position: absolute;
  top: 0;
  left: 50%;
  right: auto;
  z-index: 2;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: var(--teal-dim);
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 14px -4px rgba(0, 90, 100, 0.45);
}

.wlm-pricing__type {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-dim);
}

.wlm-pricing__price {
  margin: 0 0 0.65rem;
  font-size: clamp(1.65rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.wlm-pricing__from {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26, 35, 41, 0.5);
}

.wlm-pricing__desc {
  margin: 0 0 0.85rem;
  flex: 1 1 auto;
  font-size: 0.88rem;
  line-height: 1.58;
  color: rgba(26, 35, 41, 0.68);
}

.wlm-pricing__features {
  margin: 0 0 1rem;
  padding: 0 0 0 1.1rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(26, 35, 41, 0.72);
}

.wlm-pricing__features li + li {
  margin-top: 0.25rem;
}

.wlm-pricing__btn {
  width: 100%;
  margin-top: auto;
}

.wlm-pricing__note {
  position: relative;
  z-index: 1;
  margin: clamp(1.75rem, 4vw, 2.25rem) auto 0;
  max-width: min(40rem, 100%);
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.62;
  color: rgba(26, 35, 41, 0.62);
}

.page--wlm .wlm-trust-wrap.home-trust {
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  margin-top: -1px;
  padding-bottom: clamp(2.25rem, 4.5vw, 3rem);
}

.page--wlm .wlm-trust-wrap .container {
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

@media (max-width: 899px) {
  .page--wlm .wlm-trust-wrap .home-trust__content .vtx-proof-strip--trust {
    margin-bottom: 1.05rem;
  }

  .page--wlm .wlm-trust-wrap .home-trust__cta-wrap {
    margin-top: 0.35rem;
    margin-bottom: 0.25rem;
  }

  .page--wlm .wlm-trust-wrap .container {
    padding-bottom: clamp(1.5rem, 5vw, 2.25rem);
  }

  .page--wlm .wlm-trust-wrap .home-trust__badge {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.15rem;
  }

  .page--wlm .wlm-trust-wrap .home-trust__role::before {
    content: none;
    margin: 0;
  }

  .page--wlm .wlm-trust__tags-marquee {
    margin-top: clamp(1.35rem, 4.5vw, 2rem);
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

.page--wlm .wlm-trust-wrap .home-trust__photo {
  object-position: center 18%;
}

.page--wlm .wlm-trust-wrap .home-trust__media {
  margin-bottom: clamp(0.85rem, 2.5vw, 1.35rem);
}

@media (min-width: 768px) {
  .page--wlm .wlm-trust-wrap .home-trust__media {
    margin-bottom: clamp(0.55rem, 1.5vw, 0.9rem);
    padding-bottom: clamp(0.35rem, 1vw, 0.65rem);
  }
}

.page--wlm .wlm-trust-wrap .home-trust__badge {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.15rem;
}

.page--wlm .wlm-trust__tags-marquee,
.page--crm .wlm-trust__tags-marquee,
.page--reclame .wlm-trust__tags-marquee,
.page--seo .wlm-trust__tags-marquee {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: clamp(1.15rem, 3vw, 1.65rem) 0 0;
  padding: 0.72rem 0 0.85rem;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
}

.page--wlm .wlm-trust__tags-marquee-inner,
.page--crm .wlm-trust__tags-marquee-inner,
.page--reclame .wlm-trust__tags-marquee-inner,
.page--seo .wlm-trust__tags-marquee-inner {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  --wlm-trust-tags-marquee-groups: 2;
  --wlm-trust-tags-marquee-duration: 28s;
  animation: wlm-trust-tags-marquee var(--wlm-trust-tags-marquee-duration) linear infinite;
}

.page--wlm .wlm-trust__tags-marquee-group,
.page--crm .wlm-trust__tags-marquee-group,
.page--reclame .wlm-trust__tags-marquee-group,
.page--seo .wlm-trust__tags-marquee-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0;
  padding-right: clamp(1.25rem, 3.5vw, 2rem);
}

.page--wlm .wlm-trust__tags-marquee-item,
.page--crm .wlm-trust__tags-marquee-item,
.page--reclame .wlm-trust__tags-marquee-item,
.page--seo .wlm-trust__tags-marquee-item {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.94);
  white-space: nowrap;
}

.page--wlm .wlm-trust__tags-marquee-item:not(:last-child)::after,
.page--crm .wlm-trust__tags-marquee-item:not(:last-child)::after,
.page--reclame .wlm-trust__tags-marquee-item:not(:last-child)::after,
.page--seo .wlm-trust__tags-marquee-item:not(:last-child)::after {
  content: "·";
  margin: 0 clamp(0.65rem, 2.5vw, 0.9rem);
  color: rgba(0, 255, 255, 0.72);
  font-weight: 700;
}

@keyframes wlm-trust-tags-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-100% / var(--wlm-trust-tags-marquee-groups)), 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page--wlm .wlm-trust__tags-marquee-inner,
  .page--crm .wlm-trust__tags-marquee-inner,
  .page--reclame .wlm-trust__tags-marquee-inner,
  .page--seo .wlm-trust__tags-marquee-inner {
    animation: none;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 1rem;
  }

  .page--wlm .wlm-trust__tags-marquee-group,
  .page--crm .wlm-trust__tags-marquee-group,
  .page--reclame .wlm-trust__tags-marquee-group,
  .page--seo .wlm-trust__tags-marquee-group {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    padding-right: 0;
  }
}

/* WLM: home-audit op wit (zelfde als homepage) */
.page--wlm .home-audit.wlm-audit {
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
}

.page--wlm .home-audit.wlm-audit .home-audit__inner {
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

/* WLM/blog: FAQ op witte strip (niet home-teal) */
.page--wlm .home-faq.wlm-strip--white {
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  color: var(--text-primary);
  background: #fff;
}

.page--wlm .home-faq.wlm-strip--white .home-faq__bg {
  display: none;
}

.page--wlm .home-faq.wlm-strip--white .home-faq__eyebrow {
  color: var(--teal-dim);
}

.page--wlm .home-faq.wlm-strip--white .home-faq__title {
  color: var(--text-primary);
}

.page--wlm .home-faq.wlm-strip--white .home-faq__q {
  color: var(--text-primary);
}

.page--wlm .home-faq.wlm-strip--white .home-faq__a {
  color: rgba(26, 35, 41, 0.72);
}

.page--wlm .home-faq.wlm-strip--white .home-faq__q::after {
  color: var(--teal-dim);
}

.page--wlm .home-faq.wlm-strip--white .home-faq__item {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 10px 28px -22px rgba(15, 23, 42, 0.14);
}

.page--wlm .home-faq.wlm-strip--white .home-faq__item[open] {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.14);
}

.page--wlm .home-faq.wlm-strip--white .home-faq__inner {
  max-width: min(44rem, 100%);
}

/* WLM/blog: deliverables op teal strip (legacy) */
.page--wlm .wlm-deliverables-wrap.wlm-strip--teal {
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
}

.page--wlm .wlm-deliverables-wrap.wlm-strip--teal .home-deliverables__head {
  margin-bottom: clamp(1.5rem, 3.5vw, 2rem);
}

.page--wlm .wlm-deliverables-wrap.wlm-strip--teal .home-deliverables__card {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: none;
}

.page--wlm .wlm-deliverables-wrap.wlm-strip--teal .home-deliverables__card:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 12px 32px -18px rgba(0, 40, 45, 0.35);
}

.page--wlm .wlm-deliverables-wrap.wlm-strip--teal .home-deliverables__card-title {
  color: rgba(255, 255, 255, 0.98);
}

.page--wlm .wlm-deliverables-wrap.wlm-strip--teal .home-deliverables__card-text {
  color: rgba(255, 255, 255, 0.8);
}

.page--wlm .wlm-deliverables-wrap.wlm-strip--teal .home-deliverables__line {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0%, rgba(0, 255, 255, 0.75) 100%);
}

/* WLM/blog: steden op teal strip */
.page--wlm .wlm-cities-wrap {
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  padding: clamp(2.35rem, 5.5vw, 3.5rem) 0;
}

.page--wlm .wlm-cities-wrap .container {
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

.wlm-cities__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.25rem);
  align-items: center;
  max-width: min(64rem, 100%);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .wlm-cities__layout {
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr);
    gap: clamp(1.75rem, 4vw, 2.75rem);
  }
}

.page--wlm .wlm-cities-wrap--wide-photo .wlm-cities__layout {
  max-width: min(70rem, 100%);
}

@media (min-width: 768px) {
  .page--wlm .wlm-cities-wrap--wide-photo .wlm-cities__layout {
    grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr);
    gap: clamp(1.5rem, 3vw, 2.25rem);
  }
}

.page--wlm .wlm-cities-wrap--wide-photo .wlm-cities__frame {
  aspect-ratio: 16 / 9;
}

.page--wlm .wlm-cities-wrap--wide-photo .wlm-cities__photo {
  object-position: top center;
}

@media (max-width: 767px) {
  .page--wlm .wlm-cities-wrap--wide-photo .wlm-cities__media {
    width: 100%;
    max-width: 100%;
  }
}

.wlm-cities__media {
  margin: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  justify-self: center;
}

@media (min-width: 768px) {
  .wlm-cities__media {
    width: 100%;
    justify-self: stretch;
  }
}

.wlm-cities__frame {
  position: relative;
  border-radius: 18px 18px 18px 6px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 22px 44px -24px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.wlm-cities__frame::before {
  content: "";
  position: absolute;
  inset: -4px -4px 6px 6px;
  border-radius: 20px 20px 20px 8px;
  border: 1px solid rgba(0, 255, 255, 0.18);
  z-index: -1;
  pointer-events: none;
}

.wlm-cities__frame picture {
  display: block;
  width: 100%;
  height: 100%;
}

.wlm-cities__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.wlm-cities__chip {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);
  background: rgba(0, 48, 52, 0.72);
  border: 1px solid rgba(0, 255, 255, 0.35);
  backdrop-filter: blur(8px);
}

.wlm-cities__caption {
  margin: 0.65rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(230, 248, 248, 0.72);
  text-align: center;
}

@media (min-width: 768px) {
  .wlm-cities__caption {
    text-align: left;
  }
}

.wlm-cities__body {
  min-width: 0;
}

.wlm-cities__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(220, 248, 248, 0.92);
}

.wlm-cities__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.55rem, 3.2vw, 2.15rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.98);
}

.page--wlm .wlm-cities-wrap .wlm-cities__title-accent {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(0, 255, 255, 0.85);
  text-underline-offset: 0.12em;
  text-decoration-thickness: 2px;
}

.wlm-cities__lead {
  margin: 0;
  font-size: clamp(0.95rem, 1.75vw, 1.05rem);
  line-height: 1.65;
  color: rgba(240, 252, 252, 0.9);
}

.wlm-cities__lead strong {
  color: #fff;
  font-weight: 700;
}

.wlm-cities__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: clamp(1.15rem, 2.5vw, 1.45rem) 0 0;
  padding: 0;
}

.wlm-cities__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 100%;
  padding: 0.95rem 2.35rem 0.95rem 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  color: #fff;
  text-decoration: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.wlm-cities__card:hover,
.wlm-cities__card:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(0, 255, 255, 0.42);
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px -18px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.wlm-cities__card-city {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.wlm-cities__card-label {
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(230, 248, 248, 0.78);
}

.wlm-cities__card-arrow {
  position: absolute;
  top: 50%;
  right: 0.85rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  color: rgba(0, 255, 255, 0.9);
  transition: transform 0.2s ease;
}

.wlm-cities__card-arrow svg {
  width: 1rem;
  height: 1rem;
}

.wlm-cities__card:hover .wlm-cities__card-arrow,
.wlm-cities__card:focus-visible .wlm-cities__card-arrow {
  transform: translateY(-50%) translateX(3px);
}

@media (max-width: 479px) {
  .wlm-cities__grid {
    grid-template-columns: 1fr;
  }
}

.page--wlm .wlm-deliverables-wrap.wlm-strip--white .home-deliverables__head {
  margin-bottom: clamp(1.5rem, 3.5vw, 2rem);
}

.page--wlm .wlm-deliverables-wrap .wlm-deliverables-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  align-items: stretch;
  max-width: min(72rem, 100%);
  margin: 0 auto;
}

@media (min-width: 900px) {
  .page--wlm .wlm-deliverables-wrap .wlm-deliverables-split {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(1.5rem, 2.8vw, 2.25rem);
  }
}

.wlm-deliverables-split__media {
  min-width: 0;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #0a0e12;
}

.wlm-deliverables-split__video {
  width: 100%;
  height: 100%;
  min-height: clamp(14rem, 42vw, 22rem);
  object-fit: cover;
  display: block;
  pointer-events: none;
  border: 0;
  box-shadow: none;
  vertical-align: middle;
}

@media (min-width: 900px) {
  .wlm-deliverables-split__video {
    min-height: 100%;
    aspect-ratio: 16 / 10;
  }
}

.wlm-deliverables-split__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(1.1rem, 2.4vw, 1.45rem) clamp(1.15rem, 2.5vw, 1.5rem);
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 140, 140, 0.1);
  box-shadow: 0 18px 42px -34px rgba(0, 50, 50, 0.22);
}

.wlm-deliverables-split__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.wlm-deliverables-split__item {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 0.55rem 0.85rem;
  align-items: start;
  padding: 0.72rem 0;
  border-bottom: 1px solid rgba(0, 140, 140, 0.08);
}

.wlm-deliverables-split__item:first-child {
  padding-top: 0;
}

.wlm-deliverables-split__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.wlm-deliverables-split__num {
  display: block;
  padding-top: 0.12rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--teal);
  line-height: 1;
}

.wlm-deliverables-split__copy {
  min-width: 0;
}

.wlm-deliverables-split__title {
  margin: 0 0 0.2rem;
  font-size: clamp(0.92rem, 1.45vw, 1rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-weight: 700;
}

.wlm-deliverables-split__text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(26, 35, 41, 0.62);
}

@media (max-width: 899px) {
  .page--wlm .wlm-deliverables-wrap .wlm-deliverables-split__panel {
    padding: 1rem 1.05rem;
  }

  .page--wlm .wlm-deliverables-wrap .wlm-deliverables-split__item {
    padding: 0.65rem 0;
  }
}

/* Geen spleet tussen strepen */
.wlm-hero + .wlm-strip--white,
.wlm-strip--white + .wlm-strip--teal,
.wlm-strip--teal + .wlm-strip--white,
.wlm-strip--white + .wlm-trust-wrap,
.wlm-strip--white.wlm-pricing + .wlm-cities-wrap,
.wlm-cities-wrap + .wlm-deliverables-wrap,
.wlm-deliverables-wrap + .wlm-trust-wrap,
.wlm-trust-wrap + .home-faq.wlm-strip--white,
.home-faq.wlm-strip--white + .home-audit.wlm-audit,
.wlm-trust-wrap + .home-audit.wlm-audit {
  margin-top: -1px;
}

@media (max-width: 899px) {
  .wlm-hero,
  #wlm-hero-cinema.wlm-hero,
  #reclame-hero-cinema.wlm-hero,
  .wlm-strip,
  :is(.page--wlm, .page--reclame, .page--seo, .page--crm) .wlm-trust-wrap.home-trust {
    margin-left: 0;
    width: 100%;
  }

  .wlm-hero,
  #wlm-hero-cinema.wlm-hero,
  #reclame-hero-cinema.wlm-hero,
  #seo-hero-cinema.wlm-hero,
  #crm-hero-cinema.wlm-hero {
    min-height: min(580px, 88svh);
  }

  .wlm-hero__wrap {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }

  .page--wlm .home-audit.wlm-audit,
  .page--wlm .home-audit.wlm-audit .home-audit__inner {
    margin-left: 0;
    width: 100%;
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }

  .page--wlm .home-faq.wlm-strip--white {
    margin-left: 0;
    width: 100%;
  }

  .page--wlm .wlm-deliverables-wrap {
    margin-left: 0;
    width: 100%;
  }

  .page--wlm .wlm-cities-wrap {
    margin-left: 0;
    width: 100%;
  }

  .wlm-problems .container,
  .wlm-solution-wrap .container,
  .page--wlm .wlm-cities-wrap .container,
  .wlm-pricing .container,
  .page--wlm .wlm-trust-wrap .container,
  .page--reclame .wlm-trust-wrap .container,
  .page--seo .wlm-trust-wrap .container {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }

  /* WLM blog: horizontale scroll-grids mogen niet de pagina breder maken */
  .page--wlm .wlm-problems .container,
  .page--wlm .wlm-pricing .container,
  .page--wlm .wlm-solution-wrap .container,
  .page--wlm .wlm-deliverables-wrap .container {
    overflow-x: clip;
  }

  .page--wlm .wlm-cities__layout,
  .page--wlm .wlm-deliverables-wrap .wlm-deliverables-split {
    min-width: 0;
    max-width: 100%;
  }

  .page--reclame .home-audit.rcl-audit,
  .page--reclame .home-audit.rcl-audit .home-audit__inner,
  .page--reclame .wlm-trust-wrap .container {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }

  .page--reclame .home-audit.rcl-audit,
  .page--reclame .home-audit.rcl-audit .home-audit__inner {
    margin-left: 0;
    width: 100%;
  }

  .page--reclame .wlm-trust-wrap.home-trust {
    margin-left: 0;
    width: 100%;
  }

  .page--reclame .wlm-trust-wrap .home-trust__stats {
    margin-bottom: 1rem;
  }

  .page--reclame .wlm-trust-wrap .home-trust__cta-wrap {
    margin-top: 0.35rem;
    margin-bottom: 0.25rem;
  }

  .page--reclame .wlm-trust-wrap .container {
    padding-bottom: clamp(1.5rem, 5vw, 2.25rem);
  }

  .page--reclame .wlm-trust-wrap .home-trust__badge {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.15rem;
  }

  .page--reclame .wlm-trust-wrap .home-trust__role::before {
    content: none;
    margin: 0;
  }

  .page--reclame .wlm-trust__tags-marquee {
    margin-top: clamp(1.35rem, 4.5vw, 2rem);
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

/* ——— Online reclame (reclame) ——— */
.page--reclame .diensten-page-decor {
  display: none;
}

.page--reclame .wlm-trust-wrap.home-trust {
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  margin-top: -1px;
  padding-bottom: 0;
}

.page--reclame .wlm-trust-wrap .home-trust__photo {
  object-position: center 18%;
}

.page--reclame .wlm-trust-wrap .home-trust__badge {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.15rem;
}

.page--reclame .wlm-trust-wrap .container {
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

.page--reclame .home-audit.rcl-audit {
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
}

.page--reclame .home-audit.rcl-audit .home-audit__inner {
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

.page--reclame .wlm-trust-wrap + .home-audit.rcl-audit {
  margin-top: -1px;
}

.rcl-hero__platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem 1rem;
  width: 100%;
  padding: 0.45rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 900px) {
  .rcl-hero__platforms {
    justify-content: flex-start;
  }
}

.rcl-hero__platforms img {
  height: 1.35rem;
  width: auto;
  opacity: 0.92;
  filter: brightness(1.12);
}

.page--reclame #reclame-hero-cinema .wlm-hero__lead-mobile {
  display: none;
}

.rcl-hero__metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.rcl-hero__metrics li {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(232, 244, 246, 0.88);
}

.rcl-hero__metrics li:not(:last-child)::after {
  content: "·";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 255, 255, 0.55);
}

.rcl-hero__metric-dot {
  display: none;
}

.rcl-hero__panel .vtx-proof-strip--hero {
  margin-top: 0.75rem;
}

@media (max-width: 899px) {
  .page--reclame #reclame-hero-cinema.wlm-hero {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
  }

  .page--reclame #reclame-hero-cinema .wlm-hero__wrap {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }

  .page--reclame #reclame-hero-cinema .wlm-hero__title {
    align-items: center;
    font-size: clamp(1.9rem, 7.5vw, 2.6rem);
    line-height: 1.1;
    margin-bottom: 0.7rem;
  }

  .page--reclame #reclame-hero-cinema .wlm-hero__title-line--accent {
    display: none;
  }

  .page--reclame #reclame-hero-cinema .wlm-hero__lead-desktop {
    display: none;
  }

  .page--reclame #reclame-hero-cinema .wlm-hero__lead-mobile {
    display: block;
  }

  .page--reclame #reclame-hero-cinema .wlm-hero__lead {
    margin: 0 auto 0.9rem;
    max-width: 22rem;
    text-align: center;
    font-size: clamp(0.86rem, 3.4vw, 0.96rem);
    line-height: 1.55;
    text-wrap: balance;
  }

  .page--reclame #reclame-hero-cinema .rcl-hero__metrics {
    justify-content: center;
    margin-top: 0;
    margin-bottom: 1.15rem;
  }

  .page--reclame .wlm-pricing__grid > .wlm-pricing__card:nth-child(1) {
    order: 1;
  }

  .page--reclame .wlm-pricing__grid > .wlm-pricing__card--featured {
    order: 2;
  }

  .page--reclame .wlm-pricing__grid > .wlm-pricing__card:nth-child(2) {
    order: 3;
  }

  .page--reclame .wlm-pricing__grid > .wlm-pricing__card:nth-child(4) {
    order: 4;
  }
}

.wlm-pricing__period {
  font-size: 0.72em;
  font-weight: 600;
  color: rgba(26, 35, 41, 0.5);
  margin-left: 0.1em;
}

/* ——— SEO (seo) ——— */
.page--seo .diensten-page-decor {
  display: none;
}

.page--seo .wlm-trust-wrap.home-trust {
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  margin-top: -1px;
  padding-bottom: 0;
}

.page--seo .wlm-trust-wrap .home-trust__photo {
  object-position: center 18%;
}

.page--seo .wlm-trust-wrap .home-trust__badge {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.15rem;
}

.page--seo .wlm-trust-wrap .container {
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

.page--seo .home-audit.seo-audit {
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
}

.page--seo .home-audit.seo-audit .home-audit__inner {
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

.page--seo .wlm-trust-wrap + .home-audit.seo-audit {
  margin-top: -1px;
}

@media (max-width: 899px) {
  .page--seo .home-audit.seo-audit,
  .page--seo .home-audit.seo-audit .home-audit__inner,
  .page--seo .wlm-trust-wrap .container {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }

  .page--seo .home-audit.seo-audit,
  .page--seo .home-audit.seo-audit .home-audit__inner {
    margin-left: 0;
    width: 100%;
  }

  .page--seo .wlm-trust-wrap.home-trust {
    margin-left: 0;
    width: 100%;
  }

  .page--seo .wlm-trust-wrap .home-trust__content .vtx-proof-strip--trust {
    margin-bottom: 1.05rem;
  }

  .page--seo .wlm-trust-wrap .home-trust__cta-wrap {
    margin-top: 0.35rem;
    margin-bottom: 0.25rem;
  }

  .page--seo .wlm-trust-wrap .container {
    padding-bottom: clamp(1.5rem, 5vw, 2.25rem);
  }

  .page--seo .wlm-trust-wrap .home-trust__badge {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.15rem;
  }

  .page--seo .wlm-trust-wrap .home-trust__role::before {
    content: none;
    margin: 0;
  }

  .page--seo .wlm-trust__tags-marquee {
    margin-top: clamp(1.35rem, 4.5vw, 2rem);
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

/* ——— SEO hero (cinema) ——— */
.wlm-hero--seo {
  background:
    radial-gradient(ellipse 48% 38% at 82% 12%, rgba(66, 133, 244, 0.12), transparent 58%),
    radial-gradient(ellipse 42% 36% at 12% 88%, rgba(0, 255, 255, 0.11), transparent 55%),
    radial-gradient(ellipse 55% 42% at 78% 18%, rgba(0, 255, 255, 0.14), transparent 58%),
    radial-gradient(ellipse 45% 38% at 8% 82%, rgba(0, 140, 140, 0.1), transparent 55%),
    linear-gradient(165deg, #0a0e12 0%, #060910 48%, #030508 100%);
}

.seo-hero__rank-glow {
  position: absolute;
  width: min(50vw, 480px);
  height: min(50vw, 480px);
  top: 18%;
  right: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(66, 133, 244, 0.14) 0%, rgba(0, 255, 255, 0.08) 42%, transparent 68%);
  filter: blur(8px);
  animation: seo-hero-glow-drift 8s ease-in-out infinite alternate;
}

@keyframes seo-hero-glow-drift {
  from { transform: translate(0, 0) scale(1); opacity: 0.75; }
  to { transform: translate(-3%, 4%) scale(1.06); opacity: 1; }
}

.seo-hero__title-accent {
  background: linear-gradient(92deg, #fff 0%, #b8ffff 45%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border-left-color: #4285f4;
  text-shadow: none;
  filter: drop-shadow(0 0 28px rgba(0, 255, 255, 0.22));
}

.seo-hero__metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 0;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .seo-hero__metrics {
    justify-content: flex-start;
  }
}

.seo-hero__metrics li {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-radius: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(232, 244, 246, 0.88);
  background: none;
  border: none;
  box-shadow: none;
}

.seo-hero__metrics li:not(:last-child)::after {
  content: "·";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 255, 255, 0.55);
}

.seo-hero__metric-dot {
  display: none;
}

.seo-hero__metric-icon {
  font-size: 0.72rem;
  opacity: 0.85;
}

.page--seo #seo-hero-cinema .wlm-hero__lead-mobile {
  display: none;
}

.seo-hero__panel .vtx-proof-strip--hero {
  margin-top: 0.75rem;
}

.seo-hero__visual {
  position: relative;
}

.seo-hero__frame-glow {
  position: absolute;
  inset: -8% -4% -6%;
  z-index: 0;
  border-radius: 28px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, rgba(66, 133, 244, 0.18), transparent 62%),
    radial-gradient(ellipse 60% 50% at 50% 60%, rgba(0, 255, 255, 0.16), transparent 65%);
  filter: blur(24px);
  pointer-events: none;
}

.seo-hero__frame {
  position: relative;
  z-index: 1;
  transform: rotateY(-5deg) rotateX(3deg);
  box-shadow:
    0 40px 88px -32px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(66, 133, 244, 0.12) inset,
    0 0 100px -16px rgba(0, 255, 255, 0.28);
}

@media (min-width: 900px) {
  .seo-hero__frame:hover {
    transform: rotateY(-3deg) rotateX(2deg) translateY(-6px);
  }
}

.seo-hero__frame-bar {
  padding: 0.5rem 0.75rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.seo-hero__search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.35);
}

.seo-hero__search-icon {
  flex-shrink: 0;
  color: rgba(95, 99, 104, 0.85);
}

.seo-hero__search-query {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 500;
  color: #202124;
}

.seo-hero__search-cursor {
  width: 1px;
  height: 0.85rem;
  background: #4285f4;
  animation: seo-hero-cursor-blink 1.1s step-end infinite;
}

@keyframes seo-hero-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.seo-hero__showcase {
  position: relative;
}

.seo-hero__showcase-img {
  filter: saturate(1.05) contrast(1.04);
}

.seo-hero__serp {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  padding: 0.65rem 0.7rem 0.55rem;
  border-radius: 14px;
  background: rgba(8, 12, 16, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.65);
}

.seo-hero__serp-label {
  margin: 0 0 0.45rem;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(180, 210, 215, 0.55);
}

.seo-hero__serp-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.38rem 0.45rem;
  border-radius: 8px;
}

.seo-hero__serp-item + .seo-hero__serp-item {
  margin-top: 0.15rem;
}

.seo-hero__serp-item--win {
  background: linear-gradient(90deg, rgba(0, 255, 255, 0.14) 0%, rgba(66, 133, 244, 0.08) 100%);
  border: 1px solid rgba(0, 255, 255, 0.28);
  box-shadow: 0 0 20px -6px rgba(0, 255, 255, 0.35);
}

.seo-hero__serp-rank {
  flex-shrink: 0;
  width: 1.65rem;
  font-size: 0.62rem;
  font-weight: 800;
  text-align: center;
  color: var(--cyan);
}

.seo-hero__serp-rank--muted {
  color: rgba(180, 210, 215, 0.45);
}

.seo-hero__serp-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.seo-hero__serp-title {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.94);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-hero__serp-url {
  display: block;
  font-size: 0.52rem;
  font-weight: 500;
  color: rgba(120, 200, 120, 0.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-hero__serp-badge {
  flex-shrink: 0;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #041210;
  background: linear-gradient(135deg, #00d4d4 0%, #34d399 100%);
}

.seo-hero__price-float {
  z-index: 3;
}

.seo-hero__stat-float {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
  padding: 0.45rem 0.65rem;
  border-radius: 12px;
  background: rgba(8, 14, 18, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(52, 211, 153, 0.45);
  box-shadow: 0 10px 28px -10px rgba(52, 211, 153, 0.4);
}

.seo-hero__stat-float-value {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #34d399;
}

.seo-hero__stat-float-label {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(180, 230, 200, 0.75);
}

.seo-hero__panel {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
  border-color: rgba(0, 255, 255, 0.18);
  box-shadow:
    0 24px 56px -28px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (max-width: 899px) {
  .page--seo #seo-hero-cinema.wlm-hero {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
  }

  .page--seo #seo-hero-cinema .wlm-hero__wrap {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }

  .page--seo #seo-hero-cinema .wlm-hero__title {
    align-items: center;
    font-size: clamp(1.9rem, 7.5vw, 2.6rem);
    line-height: 1.1;
    margin-bottom: 0.7rem;
  }

  .page--seo #seo-hero-cinema .wlm-hero__title-line--accent {
    display: none;
  }

  .page--seo #seo-hero-cinema .wlm-hero__lead-desktop {
    display: none;
  }

  .page--seo #seo-hero-cinema .wlm-hero__lead-mobile {
    display: block;
  }

  .page--seo #seo-hero-cinema .wlm-hero__lead {
    margin: 0 auto 0.9rem;
    max-width: 22rem;
    text-align: center;
    font-size: clamp(0.86rem, 3.4vw, 0.96rem);
    line-height: 1.55;
    text-wrap: balance;
  }

  .page--seo #seo-hero-cinema .seo-hero__metrics {
    justify-content: center;
    margin-top: 0;
    margin-bottom: 1.15rem;
  }

  .page--seo .wlm-pricing__grid > .wlm-pricing__card:nth-child(1) {
    order: 1;
  }

  .page--seo .wlm-pricing__grid > .wlm-pricing__card--featured {
    order: 2;
  }

  .page--seo .wlm-pricing__grid > .wlm-pricing__card:nth-child(3) {
    order: 3;
  }

  .page--seo .wlm-pricing__grid > .wlm-pricing__card:nth-child(4) {
    order: 4;
  }

  .seo-hero__frame {
    transform: none;
  }

  .seo-hero__serp-item:nth-child(4) {
    display: none;
  }

  .seo-hero__stat-float {
    top: auto;
    bottom: 5.5rem;
    right: 0.65rem;
    padding: 0.35rem 0.5rem;
  }

  .seo-hero__stat-float-value {
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-hero__rank-glow,
  .seo-hero__search-cursor {
    animation: none;
  }

  .seo-hero__frame:hover {
    transform: none;
  }
}

/* ——— CRM hero (cinema) ——— */
.wlm-hero--crm {
  background:
    radial-gradient(ellipse 48% 38% at 82% 12%, rgba(0, 200, 180, 0.14), transparent 58%),
    radial-gradient(ellipse 42% 36% at 12% 88%, rgba(0, 255, 255, 0.11), transparent 55%),
    radial-gradient(ellipse 55% 42% at 78% 18%, rgba(0, 255, 255, 0.14), transparent 58%),
    linear-gradient(165deg, #0a0e12 0%, #060910 48%, #030508 100%);
}

.page--crm #crm-hero-cinema .wlm-hero__lead-mobile {
  display: none;
}

@media (max-width: 899px) {
  .page--crm #crm-hero-cinema.wlm-hero {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
  }

  .page--crm #crm-hero-cinema .wlm-hero__wrap {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }

  .page--crm #crm-hero-cinema .wlm-hero__title {
    align-items: center;
    font-size: clamp(1.9rem, 7.5vw, 2.6rem);
    line-height: 1.1;
    margin-bottom: 0.7rem;
  }

  .page--crm #crm-hero-cinema .wlm-hero__title-line--accent {
    display: none;
  }

  .page--crm #crm-hero-cinema .wlm-hero__lead-desktop {
    display: none;
  }

  .page--crm #crm-hero-cinema .wlm-hero__lead-mobile {
    display: block;
  }

  .page--crm #crm-hero-cinema .wlm-hero__lead {
    margin: 0 auto 0.9rem;
    max-width: 22rem;
    text-align: center;
    font-size: clamp(0.86rem, 3.4vw, 0.96rem);
    line-height: 1.55;
    text-wrap: balance;
  }

  .page--crm #crm-hero-cinema .crm-hero__metrics {
    justify-content: center;
    margin-top: 0;
    margin-bottom: 1.15rem;
  }
}

.crm-hero__metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.crm-hero__metrics li {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(232, 244, 246, 0.88);
}

.crm-hero__metrics li:not(:last-child)::after {
  content: "·";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 255, 255, 0.55);
}

.crm-hero__metric-dot {
  display: none;
}

.crm-hero__panel .vtx-proof-strip--hero {
  margin-top: 0.75rem;
}

.crm-hero__visual {
  position: relative;
}

.crm-hero__frame-glow {
  position: absolute;
  inset: -8% -6%;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 40%, rgba(0, 255, 255, 0.18), transparent 65%);
  filter: blur(12px);
  pointer-events: none;
}

.crm-hero__frame {
  border-color: rgba(0, 255, 255, 0.15);
}

.crm-hero__frame-title {
  flex: 1;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
}

.crm-hero__showcase {
  position: relative;
}

.crm-hero__pipeline {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  background: rgba(6, 12, 16, 0.82);
  border: 1px solid rgba(0, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}

.crm-hero__pipe-step {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
}

.crm-hero__pipe-step--active {
  color: #fff;
  background: rgba(0, 140, 140, 0.45);
}

.crm-hero__pipe-arrow {
  font-size: 0.65rem;
  color: rgba(0, 255, 255, 0.65);
}

.crm-hero__stat-float {
  position: absolute;
  top: 12%;
  right: -4%;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  background: rgba(6, 14, 18, 0.92);
  border: 1px solid rgba(0, 255, 255, 0.25);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.crm-hero__stat-float-value {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--cyan);
}

.crm-hero__stat-float-label {
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(230, 248, 248, 0.72);
}

.crm-modules.home-crm {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.home-crm__layout--page .wlm-strip__head {
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

@media (max-width: 899px) {
  .page--crm .crm-modules .home-crm__intro {
    padding-top: 0.15rem;
  }

  .page--crm .crm-modules .home-crm__tagline {
    text-align: center;
    font-size: 0.62rem;
    letter-spacing: 0.09em;
    margin-bottom: 1rem;
  }

  .page--crm .crm-modules .home-crm__checks {
    border-top: none;
    padding-top: 0;
    margin-bottom: 1.15rem;
    gap: 0.55rem;
  }

  .page--crm .crm-modules .home-crm__checks li {
    max-width: 92%;
    font-size: 0.74rem;
    line-height: 1.45;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
  }

  .page--crm .crm-modules .home-crm__checks li:nth-child(odd) {
    align-self: flex-start;
    text-align: left;
    padding-left: 1rem;
    padding-right: 0.35rem;
  }

  .page--crm .crm-modules .home-crm__checks li:nth-child(even) {
    align-self: flex-end;
    text-align: right;
    padding-left: 0.35rem;
    padding-right: 1rem;
    background: linear-gradient(135deg, rgba(224, 252, 252, 0.55) 0%, rgba(255, 255, 255, 0.92) 100%);
    border-radius: 10px;
    border: 1px solid rgba(0, 140, 140, 0.1);
  }

  .page--crm .crm-modules .home-crm__checks li:nth-child(odd)::before {
    left: 0;
    right: auto;
  }

  .page--crm .crm-modules .home-crm__checks li:nth-child(even)::before {
    left: auto;
    right: 0;
  }

  .page--crm .crm-modules .vtx-proof-strip--quality {
    margin-top: 1.2rem;
    padding-top: 1.15rem;
    gap: 0.5rem 0.65rem;
  }

  .page--crm .crm-modules .vtx-proof-strip--quality li {
    align-items: center;
    text-align: center;
  }

  .page--crm .crm-modules .vtx-proof-strip__value {
    font-size: clamp(1.45rem, 5.8vw, 1.75rem);
  }

  .page--crm .crm-modules .vtx-proof-strip__label {
    font-size: 0.68rem;
    line-height: 1.3;
  }
}

.page--crm .wlm-trust-wrap.home-trust {
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  margin-top: -1px;
  padding-bottom: 0;
}

.page--crm .wlm-trust-wrap .home-trust__photo {
  object-position: center 18%;
}

.page--crm .wlm-trust-wrap .home-trust__badge {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.15rem;
}

.page--crm .wlm-trust-wrap .container {
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

.page--crm .home-audit.crm-audit {
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
}

.page--crm .home-audit.crm-audit .home-audit__inner {
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

.page--crm .wlm-trust-wrap + .home-audit.crm-audit {
  margin-top: -1px;
}

@media (max-width: 899px) {
  .page--crm .home-audit.crm-audit,
  .page--crm .home-audit.crm-audit .home-audit__inner,
  .page--crm .wlm-trust-wrap .container {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }

  .page--crm .home-audit.crm-audit,
  .page--crm .home-audit.crm-audit .home-audit__inner {
    margin-left: 0;
    width: 100%;
  }

  .page--crm .wlm-trust-wrap.home-trust {
    margin-left: 0;
    width: 100%;
  }

  .page--crm .wlm-trust-wrap .home-trust__stats {
    margin-bottom: 1rem;
  }

  .page--crm .wlm-trust-wrap .home-trust__cta-wrap {
    margin-top: 0.35rem;
    margin-bottom: 0.25rem;
  }

  .page--crm .wlm-trust-wrap .container {
    padding-bottom: clamp(1.5rem, 5vw, 2.25rem);
  }

  .page--crm .wlm-trust-wrap .home-trust__badge {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.15rem;
  }

  .page--crm .wlm-trust-wrap .home-trust__role::before {
    content: none;
    margin: 0;
  }

  .page--crm .wlm-trust__tags-marquee {
    margin-top: clamp(1.35rem, 4.5vw, 2rem);
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (max-width: 959px) {
  .crm-hero__stat-float {
    right: 2%;
    top: 8%;
    padding: 0.4rem 0.55rem;
  }

  .crm-hero__stat-float-value {
    font-size: 0.95rem;
  }
}

/* ——— Legal pages (privacy, cookies) ——— */
.page--legal {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
}

.legal-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--topbar-h) + clamp(2.5rem, 6vw, 4rem)) 0 clamp(2.75rem, 6vw, 4.25rem);
  color: var(--text-inverse);
}

.legal-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%, rgba(0, 255, 255, 0.14), transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(0, 140, 140, 0.22), transparent 50%),
    linear-gradient(165deg, #071418 0%, #0c2228 42%, #0a1a20 100%);
}

.legal-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.35;
  pointer-events: none;
}

.legal-hero__content {
  position: relative;
  z-index: 1;
  max-width: 42rem;
}

.legal-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 255, 255, 0.88);
}

.legal-hero__eyebrow::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.55);
}

.legal-hero__title {
  margin: 0 0 0.85rem;
  font-size: clamp(2rem, 5vw, 2.85rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.legal-hero__lead {
  margin: 0 0 1.35rem;
  font-size: clamp(0.95rem, 2vw, 1.06rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

.legal-hero__lead strong {
  color: rgba(255, 255, 255, 0.94);
  font-weight: 600;
}

.legal-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.82);
  background: none;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
}

.legal-hero__meta li:not(:last-child)::after {
  content: "·";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 255, 255, 0.55);
}

.legal-hero__meta span {
  font-weight: 600;
  color: rgba(0, 255, 255, 0.9);
}

.legal-hero__meta a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-highlights {
  position: relative;
  z-index: 2;
  margin-top: clamp(-2rem, -4vw, -1.25rem);
  padding-bottom: clamp(2rem, 5vw, 3rem);
}

.legal-highlights__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.1rem);
}

.legal-highlight {
  padding: clamp(1.1rem, 2.5vw, 1.35rem);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.legal-highlight__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: 0.75rem;
  border-radius: 0.65rem;
  background: rgba(0, 154, 154, 0.1);
  color: var(--teal);
}

.legal-highlight__title {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}

.legal-highlight__text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);
}

.legal-highlight__text a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}

.legal-highlight__text a:hover,
.legal-highlight__text a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-body {
  padding: 0 0 clamp(3rem, 7vw, 4.5rem);
  background: var(--bg-root);
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--topbar-h) + 1rem);
  padding: 1.1rem 1rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px -18px rgba(15, 23, 42, 0.12);
}

.legal-toc__label {
  margin: 0 0 0.75rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: legal-toc;
}

.legal-toc li {
  counter-increment: legal-toc;
}

.legal-toc a {
  display: block;
  padding: 0.38rem 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  transition: color 0.2s ease;
}

.legal-toc li:last-child a {
  border-bottom: 0;
}

.legal-toc a::before {
  content: counter(legal-toc, decimal-leading-zero) ". ";
  font-weight: 600;
  color: rgba(0, 154, 154, 0.65);
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
  color: var(--teal);
}

.legal-doc {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 2vw, 1.1rem);
}

.legal-doc__section {
  scroll-margin-top: calc(var(--topbar-h) + 1rem);
  padding: clamp(1.25rem, 3vw, 1.65rem);
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 24px -16px rgba(15, 23, 42, 0.1);
}

.legal-doc__section h2 {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin: 0 0 0.85rem;
  font-size: clamp(1rem, 2.2vw, 1.12rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.legal-doc__num {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--teal);
}

.legal-doc__section p,
.legal-doc__section ul {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  line-height: 1.68;
  color: var(--muted);
}

.legal-doc__section p:last-child,
.legal-doc__section ul:last-child {
  margin-bottom: 0;
}

.legal-doc__section ul {
  padding-left: 1.15rem;
}

.legal-doc__section li {
  margin-bottom: 0.35rem;
}

.legal-doc__section li:last-child {
  margin-bottom: 0;
}

.legal-doc__section strong {
  color: var(--text-strong);
  font-weight: 600;
}

.legal-doc__section a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-cookie-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 0.85rem;
}

.legal-cookie-card {
  padding: 0.85rem 0.95rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(246, 248, 250, 0.9);
}

.legal-cookie-card__type {
  display: inline-block;
  margin-bottom: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

.legal-cookie-card p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.52;
}

.legal-cta {
  padding: clamp(2rem, 5vw, 3rem) 0 clamp(3rem, 6vw, 4rem);
  background: linear-gradient(180deg, var(--bg-root) 0%, #fff 100%);
}

.legal-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background:
    linear-gradient(135deg, rgba(0, 154, 154, 0.08) 0%, rgba(0, 255, 255, 0.04) 100%),
    #fff;
  border: 1px solid rgba(0, 154, 154, 0.16);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.legal-cta__copy {
  max-width: 32rem;
}

.legal-cta__title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  font-weight: 600;
  color: var(--text-primary);
}

.legal-cta__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}

.legal-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.legal-cta__actions .btn--ghost {
  border-color: rgba(15, 23, 42, 0.14);
  color: var(--text-primary);
}

@media (max-width: 960px) {
  .legal-highlights__grid {
    grid-template-columns: 1fr;
  }

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

  .legal-toc {
    position: static;
  }

  .legal-cookie-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .legal-cta__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .legal-cta__actions {
    flex-direction: column;
  }

  .legal-cta__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ——— Blog index ——— */
.page--blog {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
}

.blog-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--topbar-h) + clamp(2.5rem, 6vw, 4rem)) 0 clamp(3rem, 6vw, 4.5rem);
  color: var(--text-inverse);
}

.blog-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 85% 0%, rgba(0, 255, 255, 0.12), transparent 52%),
    radial-gradient(ellipse 55% 45% at 10% 100%, rgba(0, 120, 120, 0.2), transparent 48%),
    linear-gradient(160deg, #061014 0%, #0b1f24 45%, #081820 100%);
}

.blog-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
}

.blog-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
}

.blog-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 255, 255, 0.88);
}

.blog-hero__eyebrow::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.55);
}

.blog-hero__display-title {
  margin: 0 0 0.85rem;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.blog-hero__lead {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.76);
}

.blog-hero__aside {
  padding: clamp(1.1rem, 2.5vw, 1.4rem);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
}

.blog-hero__aside-label {
  margin: 0 0 0.65rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 255, 255, 0.85);
}

.blog-hero__topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-hero__topics li {
  display: inline-flex;
  align-items: center;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  background: none;
  border: none;
  border-radius: 0;
}

.blog-hero__topics li:not(:last-child)::after {
  content: "·";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 255, 255, 0.55);
}

.blog-body {
  padding: clamp(2rem, 5vw, 3rem) 0 clamp(2.5rem, 6vw, 4rem);
  background: var(--bg-root);
}

.blog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

.blog-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.blog-filter {
  padding: 0.42rem 0.85rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.blog-filter:hover,
.blog-filter:focus-visible {
  color: var(--teal);
  border-color: rgba(0, 154, 154, 0.35);
}

.blog-filter.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dim) 100%);
  border-color: transparent;
}

.blog-toolbar__count {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.blog-toolbar__count span {
  font-weight: 700;
  color: var(--text-primary);
}

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

.blog-card {
  min-width: 0;
}

.blog-card.is-hidden {
  display: none;
}

.blog-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 28px -18px rgba(15, 23, 42, 0.12);
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), border-color 0.28s ease;
}

.blog-card__link:hover,
.blog-card__link:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(0, 154, 154, 0.22);
  box-shadow: 0 16px 40px -20px rgba(0, 154, 154, 0.18);
}

.blog-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-charcoal);
}

.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--ease-out);
}

.blog-card__link:hover .blog-card__img,
.blog-card__link:focus-visible .blog-card__img {
  transform: scale(1.04);
}

.blog-card__cat {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  padding: 0.28rem 0.6rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(6, 16, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.45rem;
  padding: clamp(0.95rem, 2vw, 1.15rem);
}

.blog-card__date {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal);
}

.blog-card__title {
  margin: 0;
  font-size: clamp(0.98rem, 2vw, 1.08rem);
  font-weight: 600;
  line-height: 1.32;
  color: var(--text-primary);
}

.blog-card__excerpt {
  margin: 0;
  flex: 1;
  font-size: 0.84rem;
  line-height: 1.58;
  color: var(--muted);
}

.blog-card__more {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--teal);
}

.blog-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
  background:
    linear-gradient(135deg, rgba(0, 154, 154, 0.06) 0%, rgba(255, 255, 255, 0.9) 100%),
    #fff;
  border: 1px dashed rgba(0, 154, 154, 0.28);
  border-radius: var(--radius-xl);
}

.blog-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1rem;
  border-radius: 1rem;
  background: rgba(0, 154, 154, 0.1);
  color: var(--teal);
}

.blog-empty__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.15rem, 3vw, 1.35rem);
  font-weight: 600;
  color: var(--text-primary);
}

.blog-empty__text {
  margin: 0;
  max-width: 28rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}

.blog-cta {
  padding: 0 0 clamp(3rem, 7vw, 4.5rem);
  background: var(--bg-root);
}

.blog-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: clamp(1.35rem, 3vw, 1.85rem);
  background:
    linear-gradient(135deg, rgba(0, 154, 154, 0.1) 0%, rgba(0, 255, 255, 0.05) 100%),
    #fff;
  border: 1px solid rgba(0, 154, 154, 0.16);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.blog-cta__title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  font-weight: 600;
  color: var(--text-primary);
}

.blog-cta__text {
  margin: 0;
  max-width: 30rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}

.blog-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

@media (max-width: 960px) {
  .blog-hero__inner {
    grid-template-columns: 1fr;
  }

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

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

  .blog-cta__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .blog-cta__actions {
    flex-direction: column;
  }

  .blog-cta__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Blog landing pages (CRM builder) */
.page--blog-landing .blog-landing__content {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
}

.page--blog-landing.page--case-study {
  padding-top: 0;
}

.page--blog-landing .blog-landing-hero--bleed {
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.page--blog-landing .blog-landing-hero--story.case-story-hero,
.page--blog-landing .blog-story-hero.case-story-hero {
  margin-bottom: 0;
  min-height: clamp(380px, 62vh, 580px);
}

.page--blog-landing .blog-landing-hero--regional.blog-landing-hero--bleed {
  background: #0a0e12;
}

.page--blog-landing .blog-landing-hero--browser.wlm-hero,
.page--blog-landing .blog-landing-hero--studio.wlm-hero {
  margin-bottom: 0;
}

.page--blog-landing .blog-landing-hero--browser .case-story-hero__crumbs,
.page--blog-landing .blog-landing-hero--browser .case-story-hero__crumbs a,
.page--blog-landing .blog-landing-hero--studio .case-story-hero__crumbs,
.page--blog-landing .blog-landing-hero--studio .case-story-hero__crumbs a {
  color: rgba(210, 225, 230, 0.72);
}

.blog-landing-hero--phone {
  position: relative;
  padding: calc(var(--topbar-h) + clamp(1.25rem, 3vw, 2rem)) 0 clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  background: #0a0e12;
}

.blog-landing-hero--phone__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 85% 20%, rgba(0, 255, 255, 0.14), transparent 55%),
    linear-gradient(165deg, #0a0e12 0%, #060910 100%);
  pointer-events: none;
}

.blog-hero-phone__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .blog-hero-phone__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 0.78fr);
  }
}

.blog-hero-phone__copy .page-hero__title,
.blog-hero-phone__copy .blog-hero__lead,
.blog-hero-phone__copy .case-story-hero__crumbs,
.blog-hero-phone__copy .case-story-hero__crumbs a {
  color: #fff;
}

.blog-hero-phone__accent {
  display: block;
  margin: 0.35rem 0 0.85rem;
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 600;
  color: #66ffff;
}

.blog-hero-phone__device {
  position: relative;
  margin: 0 auto;
  max-width: min(280px, 72vw);
  transform: none;
  right: auto;
  top: auto;
}

.blog-hero-phone__empty,
.blog-hero-browser__empty,
.blog-hero-studio__empty {
  display: grid;
  place-items: center;
  min-height: clamp(10rem, 24vw, 16rem);
  border-radius: 16px;
  border: 1px dashed rgba(102, 255, 255, 0.35);
  color: rgba(186, 199, 209, 0.75);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.blog-landing-hero--video {
  position: relative;
  min-height: clamp(380px, 62vh, 560px);
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: 0;
}

.blog-hero-video__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.blog-hero-video__media,
.blog-hero-video__fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-hero-video__fallback {
  background-size: cover;
  background-position: center;
}

.blog-hero-video__fallback--gradient {
  background:
    radial-gradient(circle at 22% 42%, rgba(0, 255, 255, 0.16), transparent 48%),
    linear-gradient(145deg, #081018 0%, #0e141c 42%, #0a0c10 100%);
}

.blog-hero-video__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(4, 8, 12, 0.88) 0%, rgba(4, 8, 12, 0.72) 42%, rgba(4, 8, 12, 0.45) 100%),
    radial-gradient(circle at 16% 44%, rgba(0, 255, 255, 0.12), transparent 52%);
  pointer-events: none;
}

.blog-landing-hero--video .case-story-hero__content {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--topbar-h) + clamp(1.25rem, 3vw, 2rem));
}

.blog-landing-hero--video .page-hero__title,
.blog-landing-hero--video .page-hero__lead,
.blog-landing-hero--video .case-story-hero__crumbs,
.blog-landing-hero--video .case-story-hero__crumbs a {
  color: #fff;
}

.blog-hero-studio__visual {
  min-width: 0;
}

.blog-hero-studio__stack {
  height: clamp(260px, 34vh, 380px);
}

.page--blog-landing .blog-hero-studio__stack .hero__device--laptop {
  width: 88%;
}

.page--blog-landing .blog-hero-studio__stack .hero__device--phone {
  left: 0;
  bottom: 0;
  top: auto;
  width: 34%;
  transform: none;
}

.blog-video-block {
  margin: 0;
}

.blog-video-block__eyebrow {
  margin: 0 0 0.55rem;
}

.blog-video-block__player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  background: #0a0e12;
}

.blog-video-block__placeholder {
  display: grid;
  place-items: center;
  min-height: clamp(12rem, 28vw, 18rem);
  border-radius: inherit;
  border: 1px dashed rgba(0, 140, 140, 0.35);
  color: rgba(26, 35, 41, 0.55);
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(10, 14, 18, 0.04);
}

/* — Gecentreerd: eyebrow + titel boven, video in het midden — */
.blog-video-block--centered .blog-video-block__centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.blog-video-block--centered .blog-video-block__head {
  width: 100%;
  max-width: min(40rem, 100%);
  margin: 0 auto clamp(1.15rem, 2.8vw, 1.65rem);
}

.blog-video-block--centered .blog-video-block__title {
  margin: 0;
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.blog-video-block--centered .blog-video-block__media-wrap {
  width: 100%;
  max-width: min(880px, 100%);
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0a0e12;
  box-shadow:
    0 28px 64px -36px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 140, 140, 0.12);
}

.blog-video-block--centered .blog-video-block__lead--below {
  width: 100%;
  max-width: min(36rem, 100%);
  margin: clamp(1rem, 2.5vw, 1.35rem) auto 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(26, 35, 41, 0.72);
}

/* — Split: video links of rechts — */
.blog-video-block--split .blog-video-block__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.35rem, 3vw, 2.25rem);
  align-items: center;
}

@media (min-width: 900px) {
  .blog-video-block--split .blog-video-block__split {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(1.75rem, 3.5vw, 2.75rem);
  }

  .blog-video-block--split-video-right .blog-video-block__media {
    order: 2;
  }

  .blog-video-block--split-video-right .blog-video-block__copy {
    order: 1;
  }
}

.blog-video-block--split .blog-video-block__media {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #0a0e12;
  box-shadow:
    0 24px 56px -32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 140, 140, 0.1);
}

.blog-video-block--split .blog-video-block__copy {
  min-width: 0;
}

.blog-video-block--split .blog-video-block__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.blog-video-block--split .blog-video-block__lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.62;
}

.blog-video-block--split .blog-video-block__lead p {
  margin: 0 0 0.65rem;
}

.blog-video-block--split .blog-video-block__lead p:last-child {
  margin-bottom: 0;
}

.page--blog-landing .blog-block-theme-wrap .blog-video-block {
  margin: 0;
}

@media (max-width: 899px) {
  .page--blog-landing .blog-landing-hero--bleed {
    margin-left: 0;
    width: 100%;
  }
}

.page--blog-landing .blog-block.home-deliverables {
  background: transparent;
  color: inherit;
  --home-deliverables-muted: rgba(26, 35, 41, 0.65);
  padding: 0;
}

.page--blog-landing .blog-post__content {
  gap: 0;
  margin-bottom: 0;
}

.page--blog-landing .blog-block-theme-wrap {
  position: relative;
  padding: clamp(2rem, 4vw, 3rem) 0;
  margin: 0;
}

.page--blog-landing .blog-block-theme-wrap__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page--blog-landing .blog-block-theme-wrap__inner {
  position: relative;
  z-index: 1;
}

.page--blog-landing .blog-block-theme-wrap .blog-block,
.page--blog-landing .blog-block-theme-wrap .home-deliverables,
.page--blog-landing .blog-block-theme-wrap .home-trust,
.page--blog-landing .blog-block-theme-wrap .home-solution,
.page--blog-landing .blog-block-theme-wrap .home-problems,
.page--blog-landing .blog-block-theme-wrap .home-process,
.page--blog-landing .blog-block-theme-wrap .home-faq,
.page--blog-landing .blog-block-theme-wrap .home-close-cta,
.page--blog-landing .blog-block-theme-wrap .blog-block--pricing,
.page--blog-landing .blog-block-theme-wrap .blog-block--cta-glass,
.page--blog-landing .blog-block-theme-wrap .blog-block--custom,
.page--blog-landing .blog-block-theme-wrap .blog-video-block,
.page--blog-landing .blog-block-theme-wrap .blog-post-section {
  background: transparent !important;
  padding-top: 0;
  padding-bottom: 0;
  color: inherit;
  border: none;
}

.page--blog-landing .blog-block-theme-wrap .home-problems__bg,
.page--blog-landing .blog-block-theme-wrap .home-process__bg,
.page--blog-landing .blog-block-theme-wrap .home-faq__bg,
.page--blog-landing .blog-block-theme-wrap .home-trust__bg {
  display: none !important;
}

.page--blog-landing .blog-block-theme-wrap--white {
  background: #ffffff;
  color: var(--text-primary);
}

.page--blog-landing .blog-block-theme-wrap--teal {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.96);
  background: linear-gradient(148deg, #005f5f 0%, #008c8c 52%, #00a8a8 100%);
}

.page--blog-landing .blog-block-theme-wrap--white .case-story-split__title,
.page--blog-landing .blog-block-theme-wrap--white .blog-post-section__body p,
.page--blog-landing .blog-block-theme-wrap--white .home-trust__title,
.page--blog-landing .blog-block-theme-wrap--white .home-trust__lead,
.page--blog-landing .blog-block-theme-wrap--white .home-solution__title,
.page--blog-landing .blog-block-theme-wrap--white .home-solution__text,
.page--blog-landing .blog-block-theme-wrap--white .home-deliverables__head .section-title,
.page--blog-landing .blog-block-theme-wrap--white .home-deliverables__card-title,
.page--blog-landing .blog-block-theme-wrap--white .home-deliverables__card-text,
.page--blog-landing .blog-block-theme-wrap--white .home-deliverables__lead,
.page--blog-landing .blog-block-theme-wrap--white .home-problems__title,
.page--blog-landing .blog-block-theme-wrap--white .home-problems__lead,
.page--blog-landing .blog-block-theme-wrap--white .home-problems__item-text,
.page--blog-landing .blog-block-theme-wrap--white .home-process__title,
.page--blog-landing .blog-block-theme-wrap--white .home-process__text,
.page--blog-landing .blog-block-theme-wrap--white .home-faq__title,
.page--blog-landing .blog-block-theme-wrap--white .home-faq__q,
.page--blog-landing .blog-block-theme-wrap--white .home-faq__a,
.page--blog-landing .blog-block-theme-wrap--white .wlm-strip__title,
.page--blog-landing .blog-block-theme-wrap--white .wlm-pricing__desc,
.page--blog-landing .blog-block-theme-wrap--white .wlm-pricing__type,
.page--blog-landing .blog-block-theme-wrap--white .wlm-pricing__price,
.page--blog-landing .blog-block-theme-wrap--white .wlm-pricing__features,
.page--blog-landing .blog-block-theme-wrap--white .home-problems__eyebrow,
.page--blog-landing .blog-block-theme-wrap--white .home-process__eyebrow,
.page--blog-landing .blog-block-theme-wrap--white .home-faq__eyebrow,
.page--blog-landing .blog-block-theme-wrap--white .home-close-cta__title,
.page--blog-landing .blog-block-theme-wrap--white .home-close-cta__text,
.page--blog-landing .blog-block-theme-wrap--white .blog-block--cta-glass__title,
.page--blog-landing .blog-block-theme-wrap--white .blog-block--cta-glass__lead {
  color: var(--text-primary);
}

.page--blog-landing .blog-block-theme-wrap--white .blog-video-block--split .blog-video-block__title,
.page--blog-landing .blog-block-theme-wrap--white .blog-video-block--split .blog-video-block__lead,
.page--blog-landing .blog-block-theme-wrap--white .blog-video-block--centered .blog-video-block__title,
.page--blog-landing .blog-block-theme-wrap--white .blog-video-block--centered .blog-video-block__lead--below {
  color: var(--text-primary);
}

.page--blog-landing .blog-block-theme-wrap--white .eyebrow,
.page--blog-landing .blog-block-theme-wrap--white .home-trust__eyebrow,
.page--blog-landing .blog-block-theme-wrap--white .wlm-strip__eyebrow,
.page--blog-landing .blog-block-theme-wrap--white .home-deliverables__kw {
  color: var(--teal);
}

.page--blog-landing .blog-block-theme-wrap--white .home-deliverables__card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.1);
}

.page--blog-landing .blog-block-theme-wrap--teal .case-story-split__title,
.page--blog-landing .blog-block-theme-wrap--teal .blog-post-section__body,
.page--blog-landing .blog-block-theme-wrap--teal .blog-post-section__body p,
.page--blog-landing .blog-block-theme-wrap--teal .home-trust__title,
.page--blog-landing .blog-block-theme-wrap--teal .home-trust__lead,
.page--blog-landing .blog-block-theme-wrap--teal .home-solution__title,
.page--blog-landing .blog-block-theme-wrap--teal .home-solution__text,
.page--blog-landing .blog-block-theme-wrap--teal .home-deliverables__head .section-title,
.page--blog-landing .blog-block-theme-wrap--teal .home-deliverables__card-title,
.page--blog-landing .blog-block-theme-wrap--teal .home-deliverables__card-text,
.page--blog-landing .blog-block-theme-wrap--teal .home-deliverables__lead,
.page--blog-landing .blog-block-theme-wrap--teal .home-problems__title,
.page--blog-landing .blog-block-theme-wrap--teal .home-problems__lead,
.page--blog-landing .blog-block-theme-wrap--teal .home-problems__item-text,
.page--blog-landing .blog-block-theme-wrap--teal .home-process__title,
.page--blog-landing .blog-block-theme-wrap--teal .home-process__text,
.page--blog-landing .blog-block-theme-wrap--teal .home-faq__title,
.page--blog-landing .blog-block-theme-wrap--teal .home-faq__q,
.page--blog-landing .blog-block-theme-wrap--teal .home-faq__a,
.page--blog-landing .blog-block-theme-wrap--teal .wlm-strip__title,
.page--blog-landing .blog-block-theme-wrap--teal .wlm-pricing__desc,
.page--blog-landing .blog-block-theme-wrap--teal .wlm-pricing__type,
.page--blog-landing .blog-block-theme-wrap--teal .wlm-pricing__price,
.page--blog-landing .blog-block-theme-wrap--teal .wlm-pricing__features,
.page--blog-landing .blog-block-theme-wrap--teal .home-problems__eyebrow,
.page--blog-landing .blog-block-theme-wrap--teal .home-process__eyebrow,
.page--blog-landing .blog-block-theme-wrap--teal .home-faq__eyebrow,
.page--blog-landing .blog-block-theme-wrap--teal .home-trust__name,
.page--blog-landing .blog-block-theme-wrap--teal .home-trust__role,
.page--blog-landing .blog-block-theme-wrap--teal .home-close-cta__title,
.page--blog-landing .blog-block-theme-wrap--teal .home-close-cta__text,
.page--blog-landing .blog-block-theme-wrap--teal .blog-block--cta-glass__title,
.page--blog-landing .blog-block-theme-wrap--teal .blog-block--cta-glass__lead,
.page--blog-landing .blog-block-theme-wrap--teal .blog-video-block--split .blog-video-block__title,
.page--blog-landing .blog-block-theme-wrap--teal .blog-video-block--split .blog-video-block__lead,
.page--blog-landing .blog-block-theme-wrap--teal .blog-video-block--centered .blog-video-block__title,
.page--blog-landing .blog-block-theme-wrap--teal .blog-video-block--centered .blog-video-block__lead--below {
  color: rgba(255, 255, 255, 0.98);
}

.page--blog-landing .blog-block-theme-wrap--teal .home-trust__eyebrow,
.page--blog-landing .blog-block-theme-wrap--teal .eyebrow,
.page--blog-landing .blog-block-theme-wrap--teal .wlm-strip__eyebrow,
.page--blog-landing .blog-block-theme-wrap--teal .home-deliverables__kw {
  color: rgba(200, 245, 245, 0.92);
}

.page--blog-landing .blog-block-theme-wrap--teal .home-deliverables__card,
.page--blog-landing .blog-block-theme-wrap--teal .wlm-pricing__card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.page--blog-landing .blog-block-theme-wrap--teal .home-problems__title-accent {
  color: #ffb4b4;
}

.page--blog-landing .blog-block-theme-wrap .case-story-split__body {
  background: transparent;
  box-shadow: none;
  border: none;
  backdrop-filter: none;
  padding: 0;
}

.page--blog-landing .blog-block-theme-wrap .case-story-split__card {
  background: transparent;
  box-shadow: none;
  border: none;
}

/* Geen case-study marges/gaps tussen landing-slots */
.page--blog-landing.page--case-study .blog-block-theme-wrap .case-story-split,
.page--blog-landing.page--case-study .blog-block-theme-wrap .blog-post-section {
  margin: 0;
}

.page--blog-landing .blog-block-theme-wrap--white .home-close-cta {
  border-top: none;
}

.page--blog-landing .blog-block-theme-wrap--white .home-problems__item,
.page--blog-landing .blog-block-theme-wrap--white .home-process__step,
.page--blog-landing .blog-block-theme-wrap--white .home-faq__item {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 10px 28px -22px rgba(15, 23, 42, 0.14);
}

.page--blog-landing .blog-block-theme-wrap--white .home-problems__item:hover,
.page--blog-landing .blog-block-theme-wrap--white .home-process__step:hover,
.page--blog-landing .blog-block-theme-wrap--white .home-faq__item[open] {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.14);
}

.page--blog-landing .blog-block-theme-wrap--white .home-process__name,
.page--blog-landing .blog-block-theme-wrap--white .home-process__lead,
.page--blog-landing .blog-block-theme-wrap--white .home-faq__lead,
.page--blog-landing .blog-block-theme-wrap--white .wlm-pricing__from,
.page--blog-landing .blog-block-theme-wrap--white .home-trust__note,
.page--blog-landing .blog-block-theme-wrap--white .home-trust__tags li {
  color: rgba(26, 35, 41, 0.62);
}

.page--blog-landing .blog-block-theme-wrap--white .home-close-cta__kw {
  color: var(--teal);
}

.page--blog-landing .blog-block-theme-wrap--teal .home-problems__item,
.page--blog-landing .blog-block-theme-wrap--teal .home-process__step,
.page--blog-landing .blog-block-theme-wrap--teal .home-faq__item {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.page--blog-landing .blog-block-theme-wrap--teal .home-process__name,
.page--blog-landing .blog-block-theme-wrap--teal .home-process__lead,
.page--blog-landing .blog-block-theme-wrap--teal .home-faq__lead,
.page--blog-landing .blog-block-theme-wrap--teal .wlm-pricing__from {
  color: rgba(255, 255, 255, 0.9);
}

.page--blog-landing .blog-block-theme-wrap--teal .home-faq__q::after {
  color: rgba(255, 255, 255, 0.75);
}

.page--blog-landing .blog-home-audit {
  margin-top: 0;
}

.blog-landing-hero--regional {
  position: relative;
  padding: calc(var(--topbar-h) + clamp(1.35rem, 3.5vw, 2.25rem)) 0 clamp(2rem, 4vw, 3rem);
  overflow: hidden;
}

.blog-landing-hero--regional .blog-landing-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(0, 200, 200, 0.14) 0%, transparent 55%),
    linear-gradient(180deg, #0a0e12 0%, #121a20 100%);
  pointer-events: none;
}

.blog-landing-hero--regional .container {
  position: relative;
  z-index: 1;
}

.blog-landing-hero--regional .page-hero__title,
.blog-landing-hero--regional .blog-hero__lead,
.blog-landing-hero--regional .case-story-hero__crumbs,
.blog-landing-hero--regional .case-story-hero__crumbs a {
  color: #fff;
}

.blog-landing-hero__accent {
  margin: 0.5rem 0 1rem;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 600;
  color: #66ffff;
}

.blog-landing-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.blog-landing-hero--minimal {
  padding: calc(var(--topbar-h) + clamp(1.15rem, 3vw, 1.85rem)) 0 clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid rgba(0, 140, 140, 0.1);
}

.blog-landing-hero--cinema {
  margin-bottom: 0;
}

.page--blog-landing .blog-landing-hero--story .case-story-hero__content {
  padding-top: calc(var(--topbar-h) + clamp(1.25rem, 3vw, 2rem));
}

.page--blog-landing .blog-landing-hero--cinema.case-story-hero--cinema .case-story-hero__wrap {
  padding-top: calc(var(--topbar-h) + 1.5rem);
}

.page--blog-landing .blog-landing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.page--blog-landing .blog-block--custom {
  margin: 0;
}

.page--blog-landing .blog-story-hero .case-story-hero__bg-media img {
  transform: scale(1.1);
  filter: blur(10px) saturate(1.08);
}

.page--blog-landing .blog-story-hero__bg-fallback {
  background:
    radial-gradient(circle at 22% 42%, rgba(0, 255, 255, 0.16), transparent 48%),
    radial-gradient(circle at 82% 68%, rgba(0, 180, 200, 0.1), transparent 42%),
    linear-gradient(145deg, #081018 0%, #0e141c 42%, #0a0c10 100%);
}

.page--blog-landing .blog-story-hero .case-story-hero__scrim {
  background:
    linear-gradient(90deg, rgba(4, 8, 12, 0.9) 0%, rgba(4, 8, 12, 0.82) 42%, rgba(4, 8, 12, 0.52) 100%),
    radial-gradient(circle at 16% 44%, rgba(0, 255, 255, 0.14), transparent 52%);
}

.page--blog-landing .case-story-hero__frame--placeholder {
  display: grid;
  place-items: center;
  min-height: clamp(12rem, 28vw, 18rem);
  background:
    linear-gradient(145deg, rgba(8, 16, 24, 0.92) 0%, rgba(14, 24, 32, 0.88) 100%);
  border: 1px dashed rgba(102, 255, 255, 0.35);
}

.page--blog-landing .case-story-hero__frame-placeholder {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(186, 199, 209, 0.72);
}

.page--blog-landing .blog-block--pricing.wlm-strip {
  margin-left: 0;
  width: 100%;
}

.page--blog-landing .blog-block--cta-glass__head {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 1.25rem;
}

.page--blog-landing .blog-block--cta-glass__title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 700;
}

.page--blog-landing .blog-block--cta-glass__form {
  max-width: min(36rem, 100%);
  margin: 0 auto;
}

.page--blog-landing .home-audit.blog-home-audit {
  margin-left: 0;
  width: 100%;
}

/* ——— Site-wide responsive: overflow, heroes, grids (20260527) ——— */
/* Horizontale overflow: alleen via body (overflow-x: hidden). Geen clip op html/main — dat blokkeert scroll. */

main,
.page,
.page-body--diensten,
.page--case-study,
.page--contact,
.page--werk,
.page--waarom-valtex,
.page--wlm,
.page--blog-post,
.page--blog-landing,
.page--reclame {
  max-width: 100%;
  min-width: 0;
}

.container,
.page__inner,
.page__inner--wide,
.page__inner--diensten-wide {
  min-width: 0;
  box-sizing: border-box;
}

/* Voorkom horizontale scroll door lange woorden / URLs */
p,
li,
h1,
h2,
h3,
h4,
td,
th,
label,
span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ——— Mobiel: algemene layout ——— */
@media (max-width: 899px) {
  /* Leesbaarheid: lichte typografie-bump op alle pagina's (niet op tekst in afbeeldingen) */
  html {
    font-size: 108%;
  }

  .container {
    padding-left: clamp(1rem, 4.5vw, 1.35rem);
    padding-right: clamp(1rem, 4.5vw, 1.35rem);
  }

  .header__top-inner {
    gap: 0.5rem;
    padding-left: clamp(0.65rem, 3vw, 1rem);
    padding-right: clamp(0.65rem, 3vw, 1rem);
  }

  /* Logo gecentreerd in de volledige header; menu blijft links */
  .header__brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
  }

  .header__brand .logo--header {
    pointer-events: auto;
  }

  .header__brand .logo__img {
    object-position: center center;
  }

  .header__actions .btn--header-cta {
    padding-inline: 0.9rem;
    font-size: 0.84rem;
  }

  .btn--header-cta__main {
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }

  .hero__cta-pair,
  .hero__cta-row,
  .case-hero__actions,
  .page-hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
  }

  .hero__cta-pair .btn,
  .hero__cta-row .btn,
  .case-hero__actions .btn,
  .page-hero__actions .btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }

  .hero__proof {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .hero__proof-text {
    max-width: 100%;
  }

  /* Case / blog cinema hero: één kolom, preview onder tekst */
  .case-story-hero--cinema .case-story-hero__layout {
    grid-template-columns: 1fr;
  }

  .case-story-hero--cinema .case-story-hero__copy {
    text-align: left;
    margin-inline: 0;
  }

  .case-story-hero--cinema .case-story-hero__preview {
    max-width: min(22rem, 100%);
    margin-inline: auto;
  }

  .case-story-hero--cinema .case-story-hero__frame {
    transform: none;
  }

  .case-story-hero--cinema .case-story-hero__wrap {
    padding-left: clamp(1rem, 4.5vw, 1.35rem);
    padding-right: clamp(1rem, 4.5vw, 1.35rem);
  }

  /* Diensten / WLM / Werk split heroes */
  .diensten-hero-split__grid,
  .werk-hero-split__grid,
  .wlm-hero-split__grid,
  .reclame-hero-split__grid {
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 4vw, 2rem);
  }

  .diensten-hero-split__media,
  .werk-hero-split__media,
  .wlm-hero-split__media,
  .reclame-hero-split__media {
    order: 2;
    max-width: min(22rem, 100%);
    margin-inline: auto;
  }

  .diensten-hero-split__copy,
  .werk-hero-split__copy,
  .wlm-hero-split__copy,
  .reclame-hero-split__copy {
    order: 1;
  }

  /* Kaarten & grids */
  .services__grid,
  .why__grid,
  .process-timeline__grid,
  .home-deliverables__grid,
  .home-solution__grid,
  .case-kpi-strip,
  .case-story-split {
    min-width: 0;
  }

  .case-kpi-strip {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }

  .home-audit__grid,
  .home-audit__inner {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .cta-section__grid,
  .cta-form-booking-shell {
    min-width: 0;
    max-width: 100%;
  }

  .cta-form__row,
  .cta-form__row--2 {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .page-waarom__mosaic-carousel-viewport {
    max-width: 100%;
  }

  /* Tabellen / brede inhoud */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }

  iframe {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .case-kpi-strip {
    grid-template-columns: 1fr;
  }

  .page-home .hero__cta-pair {
    gap: 0.55rem;
  }

  .page-home .hero__checks-item {
    font-size: 0.82rem;
  }

  .home-problems__grid {
    grid-template-columns: 1fr;
  }
}

/* ——— Groot scherm: voorkom te brede regels & overflow ——— */
@media (min-width: 1200px) {
  .page-home .hero__headline--modern {
    font-size: clamp(2.65rem, 2.85vw + 0.5rem, 3.95rem);
    margin-bottom: 1.05rem;
    line-height: 1.08;
  }

  .page-home .hero__lede--modern {
    font-size: clamp(1.14rem, 1.08vw + 0.72rem, 1.34rem);
    line-height: 1.72;
    margin-bottom: 1.55rem;
    max-width: 42rem;
  }

  .page-home .hero__checks {
    margin-bottom: 1.75rem;
  }

  .page-home .hero__checks-group {
    gap: 0.85rem 1.5rem;
  }

  .page-home .hero__checks-item {
    font-size: 1.05rem;
  }

  .page-home .hero__cta-pair {
    gap: 0.9rem 1.4rem;
    margin-bottom: 1.65rem;
  }

  .page-home .btn--hero-primary.btn--header-cta {
    padding: 0.95rem 1.85rem;
    min-height: 3.15rem;
  }

  .page-home .btn--hero-primary.btn--header-cta .btn--header-cta__main {
    font-size: 0.975rem;
  }

  .page-home .btn--hero-secondary.btn {
    padding: 0.9rem 1.65rem;
    font-size: 0.975rem;
    min-height: 3.15rem;
  }

  .page-home .hero__proof {
    padding-top: 1.45rem;
  }

  .page-home .hero__copy:has(.hero__headline--modern) {
    max-width: min(44rem, 100%);
  }

  .page-home .hero__stage-inner {
    padding-block: 0.75rem;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: min(var(--content-max), 1560px);
  }

  .hero__stage-inner,
  .hero__copy {
    max-width: min(48rem, 100%);
  }

  .hero__showcase {
    max-width: min(44rem, 100%);
  }

  .page-home .hero__headline--modern {
    font-size: clamp(3rem, 2.5vw + 1rem, 4.1rem);
    margin-bottom: 1.15rem;
  }

  .page-home .hero__lede--modern {
    font-size: 1.34rem;
    margin-bottom: 1.65rem;
    max-width: 44rem;
  }

  .page-home .btn--hero-primary.btn--header-cta {
    padding: 1.02rem 2rem;
    min-height: 3.35rem;
  }

  .page-home .btn--hero-primary.btn--header-cta .btn--header-cta__main {
    font-size: 1rem;
  }

  .page-home .btn--hero-secondary.btn {
    padding: 0.98rem 1.75rem;
    min-height: 3.35rem;
    font-size: 1rem;
  }

  .page-home .hero__checks {
    margin-bottom: 1.85rem;
  }

  .page-home .hero__cta-pair {
    margin-bottom: 1.75rem;
  }
}

/* ——— Blog SEO: website levert geen klanten op ——— */
.page--blog-seo .blog-seo-hero .wlm-hero__showcase {
  position: relative;
}

.page--blog-seo .blog-seo-hero__phone {
  position: absolute;
  right: -0.35rem;
  bottom: -0.5rem;
  width: min(34%, 7.5rem);
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.55);
}

.page--blog-seo .blog-seo-hero__phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1;
}

.page--blog-seo .blog-seo-hero__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.page--blog-seo .blog-seo-hero__tags li {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(230, 248, 248, 0.9);
  background: none;
  border: none;
}

.page--blog-seo .blog-seo-hero__tags li:not(:last-child)::after {
  content: "·";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 255, 255, 0.55);
}

.page--blog-seo .blog-seo-intro {
  padding: clamp(2rem, 4.5vw, 2.75rem) 0;
}

.page--blog-seo .blog-seo-intro__inner {
  max-width: min(44rem, 100%);
  margin: 0 auto;
}

.page--blog-seo .blog-seo-intro__inner p {
  margin: 0 0 0.85rem;
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 1.68;
  color: rgba(26, 35, 41, 0.72);
}

.page--blog-seo .blog-seo-intro__inner p:last-child {
  margin-bottom: 0;
}

.page--blog-seo .blog-seo-article {
  padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}

.page--blog-seo .blog-seo-article__start {
  max-width: min(44rem, 100%);
  margin: 0 auto clamp(1.75rem, 4vw, 2.35rem);
}

.page--blog-seo .blog-seo-article__kicker {
  margin: 0;
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--text-primary);
}

.page--blog-seo .blog-seo-article__grid {
  display: flex;
  flex-direction: column;
  gap: clamp(1.35rem, 3vw, 1.85rem);
  max-width: min(44rem, 100%);
  margin: 0 auto;
}

.page--blog-seo .blog-seo-article__block {
  padding: clamp(1.1rem, 2.5vw, 1.45rem) clamp(1.1rem, 2.5vw, 1.35rem);
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 140, 140, 0.1);
  box-shadow: 0 14px 34px -28px rgba(0, 50, 50, 0.18);
}

.page--blog-seo .blog-seo-article__h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.12rem, 2.2vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.page--blog-seo .blog-seo-article__body p {
  margin: 0 0 0.75rem;
  font-size: 0.94rem;
  line-height: 1.65;
  color: rgba(26, 35, 41, 0.72);
}

.page--blog-seo .blog-seo-article__body p:last-child {
  margin-bottom: 0;
}

.page--blog-seo .blog-seo-article__body strong {
  color: var(--text-primary);
  font-weight: 700;
}

.page--blog-seo .blog-seo-article__list {
  margin: 0.35rem 0 0.85rem;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.35rem;
}

.page--blog-seo .blog-seo-article__list li {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(26, 35, 41, 0.78);
}

.page--blog-seo .blog-seo-valtex {
  padding: clamp(2.35rem, 5.5vw, 3.5rem) 0;
}

.page--blog-seo .blog-seo-valtex .container {
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

.page--blog-seo .blog-seo-valtex__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3.5vw, 2.25rem);
  align-items: center;
  max-width: min(58rem, 100%);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .page--blog-seo .blog-seo-valtex__layout {
    grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
  }
}

.page--blog-seo .blog-seo-valtex__frame {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.45);
}

.page--blog-seo .blog-seo-valtex__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page--blog-seo .blog-seo-valtex__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(220, 248, 248, 0.92);
}

.page--blog-seo .blog-seo-valtex__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.98);
}

.page--blog-seo .blog-seo-valtex__lead {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  line-height: 1.62;
  color: rgba(240, 252, 252, 0.9);
}

.page--blog-seo .blog-seo-valtex__lead strong {
  color: #fff;
}

.page--blog-seo .blog-seo-valtex__list {
  margin: 0 0 0.85rem;
  padding: 0.85rem 1rem;
  list-style: none;
  display: grid;
  gap: 0.4rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.page--blog-seo .blog-seo-valtex__list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(240, 252, 252, 0.92);
}

.page--blog-seo .blog-seo-valtex__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(0, 255, 255, 0.85);
}

.page--blog-seo .blog-seo-valtex__outro {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.58;
  color: rgba(230, 248, 248, 0.88);
}

.page--blog-seo .blog-seo-valtex__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.72rem 1.15rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0a4a4a;
  background: #fff;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page--blog-seo .blog-seo-valtex__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.35);
}

.page--blog-seo .blog-seo-faq.home-faq.wlm-strip--white {
  background: #fff;
}

.page--blog-seo .blog-seo-links-wrap {
  padding: clamp(2rem, 4.5vw, 2.75rem) 0;
}

.page--blog-seo .blog-seo-links__head {
  margin-bottom: clamp(1.15rem, 2.5vw, 1.45rem);
}

.page--blog-seo .blog-seo-links__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page--blog-seo .blog-seo-links__pill {
  display: inline-flex;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--teal);
  background: rgba(0, 140, 140, 0.06);
  border: 1px solid rgba(0, 140, 140, 0.14);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.page--blog-seo .blog-seo-links__pill:hover {
  background: rgba(0, 140, 140, 0.1);
  border-color: rgba(0, 154, 154, 0.28);
}

.page--blog-seo .blog-seo-audit {
  margin-left: calc(-1 * var(--sidebar-w));
  width: calc(100% + var(--sidebar-w));
}

@media (max-width: 899px) {
  .page--blog-seo .blog-seo-valtex .container,
  .page--blog-seo .blog-seo-audit,
  .page--blog-seo .blog-seo-audit .home-audit__inner {
    margin-left: 0;
    width: 100%;
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }

  .page--blog-seo .blog-seo-hero__phone {
    width: min(38%, 6.5rem);
    right: 0.15rem;
    bottom: -0.35rem;
  }
}

/* WLM blog — VOORBEELDEN block */
.wlm-examples-wrap {
  padding: clamp(3rem, 6.5vw, 4.25rem) 0 clamp(2.5rem, 5.5vw, 3.75rem);
}

.wlm-examples {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 768px) {
  .wlm-examples {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.wlm-example {
  margin: 0;
}

.wlm-example__frame {
  border-radius: clamp(0.85rem, 1.5vw, 1.15rem);
  overflow: hidden;
  border: 1px solid rgba(10, 138, 138, 0.12);
  box-shadow: 0 18px 48px rgba(8, 40, 48, 0.08);
  background: #fff;
}

.wlm-example__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.wlm-example__caption {
  margin-top: 0.85rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(20, 45, 52, 0.78);
}

.wlm-example__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a8a8a;
  margin-bottom: 0.25rem;
}

/* WLM blog — compact split blocks + chips */
.wlm-compact {
  position: relative;
  padding: clamp(2.25rem, 5vw, 3.25rem) 0;
}

.wlm-compact--intro {
  background:
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(0, 184, 184, 0.07), transparent 62%),
    linear-gradient(180deg, #f9fcfc 0%, #fff 100%);
}

.wlm-compact--intro .wlm-compact__panel {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.wlm-compact--intro .wlm-chip {
  border: none;
  background: none;
  box-shadow: none;
}

.wlm-compact--crm {
  background: linear-gradient(180deg, #fff 0%, #f7fbfb 100%);
}

.wlm-compact__shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.15rem, 2.5vw, 1.75rem);
  align-items: stretch;
}

@media (min-width: 900px) {
  .wlm-compact__shell {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(1.25rem, 2.8vw, 2rem);
    align-items: center;
  }

  .wlm-compact__shell--reverse {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }

  .wlm-compact__shell--reverse .wlm-compact__copy {
    order: 2;
  }

  .wlm-compact__shell--reverse .wlm-compact__panel {
    order: 1;
  }
}

.wlm-compact__title {
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  margin-bottom: 0.65rem;
}

.wlm-compact__lead {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(0.95rem, 1.35vw, 1.05rem);
  line-height: 1.65;
  color: rgba(20, 45, 52, 0.82);
}

.wlm-compact__lead strong {
  color: #0a6868;
  font-weight: 650;
}

.wlm-compact__link {
  display: inline-flex;
  margin-top: 0.85rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0a8a8a;
  text-decoration: none;
}

.wlm-compact__link:hover,
.wlm-compact__link:focus-visible {
  color: #007070;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.wlm-compact__panel {
  padding: clamp(1rem, 2.2vw, 1.35rem);
  border-radius: clamp(0.95rem, 1.6vw, 1.2rem);
  border: 1px solid rgba(0, 154, 154, 0.14);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 252, 252, 0.96) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 16px 40px -28px rgba(0, 90, 90, 0.28);
}

.wlm-compact__panel-label {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(10, 104, 104, 0.78);
}

.wlm-chip-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wlm-chip {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border-radius: 0 !important;
  border: none;
  background: none;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(15, 45, 50, 0.88);
  box-shadow: none;
}

.wlm-chip:not(:last-child)::after {
  content: "·";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.55rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 140, 140, 0.55);
}

.wlm-compact--crm .wlm-chip {
  background: none;
}

/* Website + CRM combine card */
.wlm-crm-combine-wrap {
  padding: clamp(2rem, 4.5vw, 3rem) 0;
}

.wlm-crm-combine-wrap .container {
  padding-left: max(1.25rem, calc(var(--sidebar-w) + 1.25rem));
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

.wlm-crm-combine__card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.35rem, 3vw, 2rem);
  border-radius: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
  box-shadow: 0 22px 50px -30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}

.wlm-crm-combine__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 88% 12%, rgba(0, 255, 255, 0.16), transparent 42%);
}

.wlm-crm-combine__head,
.wlm-crm-combine__lead,
.wlm-crm-combine__flow,
.wlm-crm-combine__actions {
  position: relative;
  z-index: 1;
}

.wlm-crm-combine__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(220, 248, 248, 0.88);
}

.wlm-crm-combine__title {
  margin: 0;
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  line-height: 1.18;
  color: rgba(255, 255, 255, 0.98);
}

.wlm-crm-combine__title span {
  text-decoration: underline;
  text-decoration-color: rgba(0, 255, 255, 0.75);
  text-underline-offset: 0.12em;
}

.wlm-crm-combine__lead {
  margin: 0.75rem 0 0;
  max-width: 36rem;
  font-size: clamp(0.92rem, 1.3vw, 1.02rem);
  line-height: 1.6;
  color: rgba(240, 252, 252, 0.9);
}

.wlm-crm-combine__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
  margin: clamp(1rem, 2.2vw, 1.35rem) 0 0;
  padding: 0;
  list-style: none;
}

.wlm-crm-combine__step {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.84rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

.wlm-crm-combine__step--accent {
  border-color: rgba(0, 255, 255, 0.45);
  background: rgba(0, 255, 255, 0.14);
  color: #fff;
}

.wlm-crm-combine__arrow {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(180, 245, 245, 0.75);
}

.wlm-crm-combine__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: clamp(1.1rem, 2.4vw, 1.45rem);
}

.wlm-crm-combine-wrap .home-solution__cta--primary {
  background: #fff;
  color: #0a6868;
  border-color: #fff;
}

.wlm-crm-combine-wrap .home-solution__cta--primary:hover,
.wlm-crm-combine-wrap .home-solution__cta--primary:focus-visible {
  background: rgba(255, 255, 255, 0.92);
  color: #005858;
}

.wlm-crm-combine-wrap .home-solution__cta--ghost {
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.38);
}

.wlm-crm-combine-wrap .home-solution__cta--ghost:hover,
.wlm-crm-combine-wrap .home-solution__cta--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}


/* ——— Waarom Valtex trust redesign (20261007e) ——— */
.page--waarom-valtex #waarom-hero-cinema.diensten-hero {
  min-height: 680px;
  height: auto;
  max-height: 760px;
  overflow: hidden;
}

.page--waarom-valtex #waarom-hero-cinema .diensten-hero__title {
  max-width: min(40rem, 100%);
  font-size: clamp(2.05rem, 4.8vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.page--waarom-valtex #waarom-hero-cinema .diensten-hero__title-line {
  display: block;
}

.page--waarom-valtex #waarom-hero-cinema .diensten-hero__title-line--accent {
  color: #66ffff;
}

.page--waarom-valtex #waarom-hero-cinema .diensten-hero__lead {
  max-width: 34rem;
}

.page--waarom-valtex #waarom-hero-cinema .diensten-hero__trustline {
  list-style: none;
  margin: 1.45rem 0 0;
  padding: 0.95rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  max-width: 36rem;
}

.page--waarom-valtex #waarom-hero-cinema .diensten-hero__trustline li {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding-right: 0.75rem;
}

.page--waarom-valtex #waarom-hero-cinema .diensten-hero__trustline strong {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.page--waarom-valtex #waarom-hero-cinema .diensten-hero__trustline span {
  font-size: 0.8rem;
  line-height: 1.35;
  color: rgba(200, 214, 222, 0.78);
}

@media (min-width: 640px) {
  .page--waarom-valtex #waarom-hero-cinema .diensten-hero__trustline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .page--waarom-valtex #waarom-hero-cinema .diensten-hero__trustline li {
    padding: 0 0.95rem;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }

  .page--waarom-valtex #waarom-hero-cinema .diensten-hero__trustline li:first-child {
    padding-left: 0;
  }

  .page--waarom-valtex #waarom-hero-cinema .diensten-hero__trustline li:last-child {
    border-right: none;
    padding-right: 0;
  }
}

.page--waarom-valtex #waarom-hero-cinema .diensten-hero__visual {
  position: relative;
  display: block;
}

.page--waarom-valtex #waarom-hero-cinema .diensten-hero__stack {
  position: absolute;
  inset: 1.1rem auto 1.1rem 0.35rem;
  width: 2px;
  z-index: 0;
  pointer-events: none;
}

.page--waarom-valtex #waarom-hero-cinema .diensten-hero__stack-line {
  display: block;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 255, 255, 0.05), rgba(0, 220, 220, 0.55), rgba(0, 255, 255, 0.08));
  border-radius: 999px;
}

.page--waarom-valtex #waarom-hero-cinema .diensten-hero__cards--4,
.page--waarom-valtex #waarom-hero-cinema .diensten-hero__cards--connected {
  min-height: 20rem;
  max-width: 22.5rem;
}

.page--waarom-valtex #waarom-hero-cinema .diensten-hero__cards--connected .diensten-hero__card {
  width: min(100%, 18rem);
  padding: 1.05rem 1.15rem 1.05rem 1.35rem;
  background: rgba(10, 16, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow:
    0 18px 40px -22px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(0, 255, 255, 0.04) inset;
}

.page--waarom-valtex #waarom-hero-cinema .diensten-hero__card-dot {
  position: absolute;
  left: -0.15rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 184, 184, 0.18);
  transform: translate(-50%, -50%);
}

.page--waarom-valtex #waarom-hero-cinema .diensten-hero__card--1 { top: 0; right: 2.4rem; z-index: 3; }
.page--waarom-valtex #waarom-hero-cinema .diensten-hero__card--2 { top: 5.15rem; right: 0.15rem; z-index: 2; }
.page--waarom-valtex #waarom-hero-cinema .diensten-hero__card--3 { top: 10.3rem; right: 1.8rem; z-index: 1; }

.page--waarom-valtex #waarom-hero-cinema .diensten-hero__scroll {
  display: inline-flex;
}

@media (max-width: 899px) {
  .page--waarom-valtex #waarom-hero-cinema .diensten-hero__visual {
    display: none;
  }
}

/* Shared section rhythm */
.page--waarom-valtex .wv-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--teal-dim, #008b8b);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.page--waarom-valtex .wv-link span {
  transition: transform 0.2s ease;
}

.page--waarom-valtex .wv-link:hover,
.page--waarom-valtex .wv-link:focus-visible {
  color: #006f6f;
}

.page--waarom-valtex .wv-link:hover span,
.page--waarom-valtex .wv-link:focus-visible span {
  transform: translateX(3px);
}

.page--waarom-valtex .wv-link:focus-visible {
  outline: 2px solid rgba(0, 184, 184, 0.45);
  outline-offset: 3px;
}

/* 2. Personal — compact trust block */
.page--waarom-valtex .wv-personal {
  padding: clamp(2.5rem, 5.5vw, 3.75rem) 0;
  background: #fff;
  color: #1a2329;
  border-top: 1px solid rgba(26, 35, 41, 0.06);
}

.page--waarom-valtex .wv-personal__grid {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  align-items: start;
}

.page--waarom-valtex .wv-personal__aside {
  max-width: 20rem;
}

.page--waarom-valtex .wv-personal__photo {
  margin: 0 0 0.85rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(26, 35, 41, 0.08);
  aspect-ratio: 1 / 1;
  background: #0f1a22;
}

.page--waarom-valtex .wv-personal__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.page--waarom-valtex .wv-personal__name {
  margin: 0 0 0.1rem;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page--waarom-valtex .wv-personal__role {
  margin: 0 0 0.3rem;
  font-size: 0.82rem;
  color: rgba(26, 35, 41, 0.62);
}

.page--waarom-valtex .wv-personal__tags {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: rgba(26, 35, 41, 0.55);
}

.page--waarom-valtex .wv-personal__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.page--waarom-valtex .wv-personal__title {
  margin: 0 0 0.7rem;
  max-width: 18ch;
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  line-height: 1.15;
  letter-spacing: -0.028em;
  font-weight: 700;
}

.page--waarom-valtex .wv-personal__lead {
  margin: 0 0 0.65rem;
  max-width: 36rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(26, 35, 41, 0.7);
}

.page--waarom-valtex .wv-personal__quote {
  margin: 0.85rem 0 1rem;
  padding: 0.5rem 0 0.5rem 0.85rem;
  border-left: 2px solid var(--teal);
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(26, 35, 41, 0.8);
  font-style: italic;
  max-width: 34rem;
}

.page--waarom-valtex .wv-personal__principles {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  border-top: 1px solid rgba(26, 35, 41, 0.1);
}

.page--waarom-valtex .wv-personal__principles li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(26, 35, 41, 0.1);
}

.page--waarom-valtex .wv-personal__num {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--teal);
  padding-top: 0.12rem;
}

.page--waarom-valtex .wv-personal__p-title {
  margin: 0 0 0.18rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.page--waarom-valtex .wv-personal__p-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(26, 35, 41, 0.6);
  max-width: 32rem;
}

@media (min-width: 900px) {
  .page--waarom-valtex .wv-personal__grid {
    grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
    column-gap: clamp(2rem, 4.5vw, 3.25rem);
    align-items: start;
  }

  .page--waarom-valtex .wv-personal__aside {
    position: sticky;
    top: calc(var(--topbar-h, 64px) + 1rem);
  }
}

/* 3. Process — dark navy (expertise merged away) */
.page--waarom-valtex .wv-process {
  padding: clamp(2.5rem, 5.5vw, 3.75rem) 0;
  background: #0a1218;
  color: #fff;
}

.page--waarom-valtex .wv-process__head {
  max-width: min(40rem, 100%);
  margin: 0 0 clamp(1.5rem, 3vw, 2.1rem);
}

.page--waarom-valtex .wv-process__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.page--waarom-valtex .wv-process__title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.page--waarom-valtex .wv-process__lead {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(200, 214, 222, 0.78);
  max-width: 36rem;
}

.page--waarom-valtex .wv-process__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  position: relative;
}

.page--waarom-valtex .wv-process__step {
  position: relative;
  padding: 0 0 1.25rem 1.5rem;
  border-left: 1px solid rgba(0, 184, 184, 0.35);
}

.page--waarom-valtex .wv-process__step:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.page--waarom-valtex .wv-process__node {
  position: absolute;
  left: -0.32rem;
  top: 0.22rem;
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 184, 184, 0.14);
}

.page--waarom-valtex .wv-process__num {
  display: block;
  margin: 0 0 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--teal);
}

.page--waarom-valtex .wv-process__name {
  margin: 0 0 0.28rem;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.page--waarom-valtex .wv-process__text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(190, 205, 215, 0.78);
  max-width: 20rem;
}

@media (min-width: 900px) {
  .page--waarom-valtex .wv-process__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .page--waarom-valtex .wv-process__step {
    padding: 0 1.15rem 0 0;
    border-left: none;
  }

  .page--waarom-valtex .wv-process__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0.55rem;
    right: 0.3rem;
    top: 0.4rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 184, 184, 0.55), rgba(0, 184, 184, 0.12));
  }

  .page--waarom-valtex .wv-process__node {
    left: 0;
    top: 0.18rem;
  }

  .page--waarom-valtex .wv-process__num {
    margin-top: 1.05rem;
  }
}

/* 5. Work */
.page--waarom-valtex .wv-work {
  padding: clamp(3.25rem, 7vw, 5rem) 0;
  background: #f6f8f9;
  color: #1a2329;
  border-top: 1px solid rgba(26, 35, 41, 0.06);
}

.page--waarom-valtex .wv-work__head {
  max-width: min(40rem, 100%);
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.35rem);
}

.page--waarom-valtex .wv-work__eyebrow {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}

.page--waarom-valtex .wv-work__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.75rem, 3.3vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.page--waarom-valtex .wv-work__lead {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(26, 35, 41, 0.68);
}

.page--waarom-valtex .wv-work__grid {
  display: grid;
  gap: 1.5rem;
}

.page--waarom-valtex .wv-work__card {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.page--waarom-valtex .wv-work__visual {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(26, 35, 41, 0.08);
  background: #0f1a22;
  aspect-ratio: 16 / 10;
}

.page--waarom-valtex .wv-work__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.35s ease;
}

.page--waarom-valtex .wv-work__visual:hover img,
.page--waarom-valtex .wv-work__visual:focus-visible img {
  transform: scale(1.03);
}

.page--waarom-valtex .wv-work__name {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page--waarom-valtex .wv-work__meta {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  color: rgba(26, 35, 41, 0.58);
}

.page--waarom-valtex .wv-work__tags {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(26, 35, 41, 0.78);
}

.page--waarom-valtex .wv-work__cta-wrap {
  margin: 1.75rem 0 0;
}

@media (min-width: 768px) {
  .page--waarom-valtex .wv-work__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
  }
}

/* 6. Philosophy */
.page--waarom-valtex .wv-philosophy {
  padding: clamp(3.25rem, 7vw, 5rem) 0;
  background: #fff;
  color: #1a2329;
}

.page--waarom-valtex .wv-philosophy__head {
  max-width: min(40rem, 100%);
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.35rem);
}

.page--waarom-valtex .wv-philosophy__eyebrow {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}

.page--waarom-valtex .wv-philosophy__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.75rem, 3.3vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.page--waarom-valtex .wv-philosophy__lead {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(26, 35, 41, 0.68);
}

.page--waarom-valtex .wv-philosophy__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(26, 35, 41, 0.1);
}

.page--waarom-valtex .wv-philosophy__list li {
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(26, 35, 41, 0.1);
}

.page--waarom-valtex .wv-philosophy__name {
  margin: 0 0 0.35rem;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.page--waarom-valtex .wv-philosophy__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(26, 35, 41, 0.62);
  max-width: 28rem;
}

@media (min-width: 800px) {
  .page--waarom-valtex .wv-philosophy__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page--waarom-valtex .wv-philosophy__list li {
    padding: 1.35rem 1.5rem 1.35rem 0;
  }

  .page--waarom-valtex .wv-philosophy__list li:nth-child(odd) {
    padding-right: 1.75rem;
    border-right: 1px solid rgba(26, 35, 41, 0.1);
  }

  .page--waarom-valtex .wv-philosophy__list li:nth-child(even) {
    padding-left: 1.75rem;
  }
}

/* 7. Transparency */
.page--waarom-valtex .wv-transparency {
  padding: clamp(3.25rem, 7vw, 5rem) 0;
  background: #f3f7f8;
  color: #1a2329;
  border-top: 1px solid rgba(26, 35, 41, 0.06);
}

.page--waarom-valtex .wv-transparency__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  align-items: start;
}

.page--waarom-valtex .wv-transparency__eyebrow {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}

.page--waarom-valtex .wv-transparency__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.75rem, 3.3vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  max-width: 14ch;
}

.page--waarom-valtex .wv-transparency__lead {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(26, 35, 41, 0.68);
  max-width: 34rem;
}

.page--waarom-valtex .wv-transparency__points {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(26, 35, 41, 0.1);
}

.page--waarom-valtex .wv-transparency__points li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(26, 35, 41, 0.1);
}

.page--waarom-valtex .wv-transparency__points strong {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.page--waarom-valtex .wv-transparency__points span {
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(26, 35, 41, 0.6);
}

@media (min-width: 900px) {
  .page--waarom-valtex .wv-transparency__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 6vw, 4rem);
  }
}

/* 8. Contact — dark navy + form */
.page--waarom-valtex .home-audit--project {
  background: linear-gradient(165deg, #071018 0%, #0c1822 48%, #0a1f28 100%) !important;
  border-top: 1px solid rgba(0, 255, 255, 0.08) !important;
  color: #fff;
}

.page--waarom-valtex .home-audit--project .home-audit__eyebrow {
  color: var(--teal) !important;
}

.page--waarom-valtex .home-audit--project .home-audit__title-left {
  color: #fff !important;
}

.page--waarom-valtex .home-audit--project .home-audit__lead {
  color: rgba(200, 214, 222, 0.8) !important;
}

.page--waarom-valtex .home-audit--project .home-audit__trust li {
  color: rgba(220, 230, 236, 0.88) !important;
}

.page--waarom-valtex .home-audit--project .home-audit__trust li::before {
  background: var(--teal) !important;
}

.page--waarom-valtex .home-audit--project .home-audit__direct-label {
  color: rgba(180, 198, 208, 0.75) !important;
}

.page--waarom-valtex .home-audit--project .home-audit__phone {
  color: #fff !important;
}

.page--waarom-valtex .home-audit--project .home-audit__phone:hover,
.page--waarom-valtex .home-audit--project .home-audit__phone:focus-visible {
  color: var(--teal) !important;
}

.page--waarom-valtex .home-audit--project .home-audit__form-block {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.55) !important;
}

.page--waarom-valtex .home-audit--project .home-audit__form-title {
  color: #1a2329 !important;
}

.page--waarom-valtex .home-faq {
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .page--waarom-valtex .wv-link span,
  .page--waarom-valtex .wv-link:hover span,
  .page--waarom-valtex .wv-work__visual img {
    transform: none;
  }
}


/* ——— Contact page compact conversion (20261007n) ——— */
.page--contact .ct-hero {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--sidebar-w, 0px));
  width: calc(100% + var(--sidebar-w, 0px));
  min-height: 480px;
  max-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0a1218;
  color: #fff;
}

.page--contact .ct-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 85% 20%, rgba(0, 184, 184, 0.14), transparent 55%),
    radial-gradient(ellipse 50% 45% at 10% 90%, rgba(0, 120, 140, 0.12), transparent 50%),
    linear-gradient(165deg, #071018 0%, #0c1822 55%, #0a151c 100%);
}

.page--contact .ct-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: calc(var(--topbar-h, 64px) + 1.35rem) clamp(1.25rem, 4vw, 2rem) 2rem;
  padding-left: max(1.25rem, calc(var(--sidebar-w, 0px) + 1.25rem));
  box-sizing: border-box;
}

.page--contact .ct-hero__grid {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

.page--contact .ct-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200, 230, 230, 0.88);
}

.page--contact .ct-hero__eyebrow-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.45);
}

.page--contact .ct-hero__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.85rem, 4.2vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 800;
  max-width: 14ch;
}

.page--contact .ct-hero__title-line {
  display: block;
}

.page--contact .ct-hero__accent {
  color: #66ffff;
}

.page--contact .ct-hero__lead {
  margin: 0 0 1.15rem;
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(200, 214, 222, 0.82);
}

.page--contact .ct-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 1.15rem;
}

.page--contact .ct-hero__call.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

.page--contact .ct-hero__call.btn--ghost:hover,
.page--contact .ct-hero__call.btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 255, 255, 0.5);
  color: #fff;
}

body.page-body--contact:has(#contact-hero-cinema) .sidebar__menu-burger-line,
body.page-body--contact:has(#contact-hero-cinema) .nav-toggle span {
  background: #fff;
}

.page--contact .ct-hero__trust {
  list-style: none;
  margin: 0;
  padding: 0.9rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 32rem;
}

.page--contact .ct-hero__trust li {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.page--contact .ct-hero__trust strong {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.page--contact .ct-hero__trust span {
  font-size: 0.8rem;
  color: rgba(200, 214, 222, 0.72);
}

@media (min-width: 640px) {
  .page--contact .ct-hero__trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .page--contact .ct-hero__trust li {
    padding: 0 0.9rem;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }

  .page--contact .ct-hero__trust li:first-child { padding-left: 0; }
  .page--contact .ct-hero__trust li:last-child {
    border-right: none;
    padding-right: 0;
  }
}

.page--contact .ct-hero__panel {
  width: 100%;
  max-width: 22rem;
  margin-left: auto;
  padding: 1.25rem 1.25rem 1.1rem;
  border-radius: 16px;
  background: rgba(10, 16, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.page--contact .ct-hero__panel-title {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page--contact .ct-hero__panel-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.page--contact .ct-hero__panel-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}

.page--contact .ct-hero__panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  color: var(--teal);
  background: rgba(0, 184, 184, 0.1);
  border: 1px solid rgba(0, 184, 184, 0.22);
}

.page--contact .ct-hero__panel-label {
  display: block;
  margin: 0 0 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(180, 198, 208, 0.75);
}

.page--contact .ct-hero__panel-value {
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  word-break: break-word;
}

.page--contact .ct-hero__panel-value:hover,
.page--contact .ct-hero__panel-value:focus-visible {
  color: var(--teal);
}

.page--contact .ct-hero__panel-value--plain {
  font-weight: 550;
  color: rgba(220, 230, 236, 0.92);
}

.page--contact .ct-hero__wa {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  color: rgba(200, 214, 222, 0.78);
  font-size: 0.82rem;
}

.page--contact .ct-hero__wa-cta {
  color: var(--teal);
  font-weight: 650;
}

.page--contact .ct-hero__wa:hover .ct-hero__wa-cta,
.page--contact .ct-hero__wa:focus-visible .ct-hero__wa-cta {
  color: #66ffff;
}

@media (min-width: 900px) {
  .page--contact .ct-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.72fr);
    gap: clamp(2rem, 5vw, 3.5rem);
  }
}

@media (max-width: 899px) {
  .page--contact .ct-hero {
    max-height: none;
    min-height: 0;
  }

  .page--contact .ct-hero__panel {
    max-width: none;
    margin-left: 0;
  }
}

/* Main form section overrides */
.page--contact .home-audit--contact-page {
  background: #fff !important;
  border-top: 1px solid rgba(26, 35, 41, 0.06) !important;
}

.page--contact .ct-main__inner {
  max-width: min(1400px, 100%);
}

.page--contact .ct-personal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  margin: 1.25rem 0 1.15rem;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(26, 35, 41, 0.1);
  border-bottom: 1px solid rgba(26, 35, 41, 0.1);
}

.page--contact .ct-personal__photo {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 1px solid rgba(26, 35, 41, 0.1);
  display: block;
}

.page--contact .ct-personal__lead {
  margin: 0 0 0.2rem;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #1a2329;
}

.page--contact .ct-personal__name {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 650;
  color: #1a2329;
}

.page--contact .ct-personal__role {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  color: rgba(26, 35, 41, 0.55);
}

.page--contact .ct-personal__quote {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(26, 35, 41, 0.62);
  max-width: 28rem;
}

.page--contact .home-audit--contact-page .home-audit__direct {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.page--contact .ct-main__mail,
.page--contact .ct-main__wa {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--teal-dim, #008b8b);
  text-decoration: none;
}

.page--contact .ct-main__mail:hover,
.page--contact .ct-main__wa:hover,
.page--contact .ct-main__mail:focus-visible,
.page--contact .ct-main__wa:focus-visible {
  color: #006f6f;
}

@media (min-width: 900px) {
  .page--contact .home-audit--contact-page .home-audit__inner {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    column-gap: clamp(3.5rem, 6vw, 5.5rem);
  }
}

/* Channels */
.page--contact .ct-channels {
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
  background: #f6f8f9;
  color: #1a2329;
  border-top: 1px solid rgba(26, 35, 41, 0.06);
}

.page--contact .ct-channels__head {
  margin: 0 0 1.5rem;
  max-width: 36rem;
}

.page--contact .ct-channels__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.page--contact .ct-channels__title {
  margin: 0;
  font-size: clamp(1.45rem, 2.8vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.page--contact .ct-channels__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.page--contact .ct-channel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.15rem 1.15rem 1.05rem;
  border-radius: 14px;
  border: 1px solid rgba(26, 35, 41, 0.1);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease;
}

.page--contact .ct-channel:hover,
.page--contact .ct-channel:focus-visible {
  border-color: rgba(0, 184, 184, 0.45);
}

.page--contact .ct-channel--static {
  cursor: default;
}

.page--contact .ct-channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  margin-bottom: 0.25rem;
  border-radius: 8px;
  color: var(--teal);
  background: rgba(0, 184, 184, 0.08);
}

.page--contact .ct-channel__name {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.page--contact .ct-channel__text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(26, 35, 41, 0.62);
}

.page--contact .ct-channel__cta {
  margin-top: 0.35rem;
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--teal-dim, #008b8b);
}

@media (min-width: 700px) {
  .page--contact .ct-channels__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .page--contact .ct-channels__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page--contact .ct-faq {
  background: #fff;
}

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


/* ——— Website laten maken LP redesign (20261007p) ——— */
.page--wlm .seo-context {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.page--wlm .wlm-lp-hero {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--sidebar-w, 0px));
  width: calc(100% + var(--sidebar-w, 0px));
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0a1218;
  color: #fff;
}

.page--wlm .wlm-lp-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 88% 18%, rgba(0, 184, 184, 0.16), transparent 55%),
    radial-gradient(ellipse 45% 40% at 8% 85%, rgba(0, 100, 120, 0.14), transparent 50%),
    linear-gradient(165deg, #071018 0%, #0c1822 50%, #0a151c 100%);
}

.page--wlm .wlm-lp-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: calc(var(--topbar-h, 64px) + 1.5rem) clamp(1.25rem, 4vw, 2rem) 2.25rem;
  padding-left: max(1.25rem, calc(var(--sidebar-w, 0px) + 1.25rem));
  box-sizing: border-box;
}

.page--wlm .wlm-lp-hero__grid {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

.page--wlm .wlm-lp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200, 230, 230, 0.88);
}

.page--wlm .wlm-lp-hero__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.45);
}

.page--wlm .wlm-lp-hero__title {
  margin: 0 0 0.9rem;
  font-size: clamp(1.95rem, 4.5vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 800;
  max-width: 16ch;
}

.page--wlm .wlm-lp-hero__title-line { display: block; }
.page--wlm .wlm-lp-hero__accent { color: #66ffff; }

.page--wlm .wlm-lp-hero__lead {
  margin: 0 0 1.2rem;
  max-width: 34rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(200, 214, 222, 0.82);
}

.page--wlm .wlm-lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 1.2rem;
}

.page--wlm .wlm-lp-hero__ghost.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

.page--wlm .wlm-lp-hero__ghost.btn--ghost:hover,
.page--wlm .wlm-lp-hero__ghost.btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 255, 255, 0.5);
  color: #fff;
}

.page--wlm .wlm-lp-hero__trust {
  list-style: none;
  margin: 0;
  padding: 0.95rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 36rem;
}

.page--wlm .wlm-lp-hero__trust li {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.page--wlm .wlm-lp-hero__trust strong {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.page--wlm .wlm-lp-hero__trust span {
  font-size: 0.78rem;
  color: rgba(200, 214, 222, 0.72);
}

@media (min-width: 700px) {
  .page--wlm .wlm-lp-hero__trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }
  .page--wlm .wlm-lp-hero__trust li {
    padding: 0 0.75rem;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }
  .page--wlm .wlm-lp-hero__trust li:first-child { padding-left: 0; }
  .page--wlm .wlm-lp-hero__trust li:last-child { border-right: none; padding-right: 0; }
}

.page--wlm .wlm-lp-hero__visual {
  position: relative;
  max-width: 34rem;
  margin: 0 auto;
}

.page--wlm .wlm-lp-hero__browser {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0f1a22;
  box-shadow:
    0 28px 60px -28px rgba(0, 0, 0, 0.75),
    0 0 40px -10px rgba(0, 184, 184, 0.25);
}

.page--wlm .wlm-lp-hero__chrome {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.page--wlm .wlm-lp-hero__dots {
  display: inline-flex;
  gap: 0.3rem;
}
.page--wlm .wlm-lp-hero__dots i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: block;
}
.page--wlm .wlm-lp-hero__url {
  font-size: 0.72rem;
  color: rgba(200, 214, 222, 0.65);
}

.page--wlm .wlm-lp-hero__browser img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

.page--wlm .wlm-lp-hero__badge {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: rgba(10, 16, 22, 0.82);
  border: 1px solid rgba(0, 255, 255, 0.28);
  text-decoration: none;
  color: #fff;
  backdrop-filter: blur(10px);
}

.page--wlm .wlm-lp-hero__badge span {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 230, 230, 0.8);
}

.page--wlm .wlm-lp-hero__badge strong {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: #66ffff;
}

@media (min-width: 960px) {
  .page--wlm .wlm-lp-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 5vw, 3.5rem);
  }
}

@media (max-width: 959px) {
  .page--wlm .wlm-lp-hero { min-height: 0; }
}

/* Trust strip */
.page--wlm .wlm-lp-strip {
  background: #fff;
  border-bottom: 1px solid rgba(26, 35, 41, 0.08);
  color: #1a2329;
}

.page--wlm .wlm-lp-strip__list {
  list-style: none;
  margin: 0;
  padding: 0.95rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
}

.page--wlm .wlm-lp-strip__list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.84rem;
  font-weight: 600;
}

.page--wlm .wlm-lp-strip__icon {
  color: var(--teal);
  display: inline-flex;
}

@media (min-width: 800px) {
  .page--wlm .wlm-lp-strip__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* Problems */
.page--wlm .wlm-lp-problems {
  padding: clamp(2.75rem, 6vw, 4rem) 0;
  background: #fff;
  color: #1a2329;
}

.page--wlm .wlm-lp-problems__head {
  max-width: 40rem;
  margin: 0 0 1.75rem;
}

.page--wlm .wlm-lp-problems__eyebrow,
.page--wlm .wlm-lp-include__eyebrow,
.page--wlm .wlm-lp-pricing__eyebrow,
.page--wlm .wlm-lp-work__eyebrow,
.page--wlm .wlm-lp-process__eyebrow,
.page--wlm .wlm-lp-why__eyebrow,
.page--wlm .wlm-lp-personal__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.page--wlm .wlm-lp-problems__title,
.page--wlm .wlm-lp-include__title,
.page--wlm .wlm-lp-pricing__title,
.page--wlm .wlm-lp-work__title,
.page--wlm .wlm-lp-process__title,
.page--wlm .wlm-lp-why__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.page--wlm .wlm-lp-problems__lead,
.page--wlm .wlm-lp-include__lead,
.page--wlm .wlm-lp-pricing__lead {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(26, 35, 41, 0.68);
  max-width: 38rem;
}

.page--wlm .wlm-lp-problems__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(26, 35, 41, 0.1);
}

.page--wlm .wlm-lp-problems__grid > li {
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(26, 35, 41, 0.1);
}

.page--wlm .wlm-lp-problems__name {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 700;
}

.page--wlm .wlm-lp-problems__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(26, 35, 41, 0.62);
  max-width: 28rem;
}

@media (min-width: 800px) {
  .page--wlm .wlm-lp-problems__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page--wlm .wlm-lp-problems__grid > li {
    padding: 1.25rem 1.35rem 1.25rem 0;
  }
  .page--wlm .wlm-lp-problems__grid > li:nth-child(odd) {
    padding-right: 1.5rem;
    border-right: 1px solid rgba(26, 35, 41, 0.1);
  }
  .page--wlm .wlm-lp-problems__grid > li:nth-child(even) {
    padding-left: 1.5rem;
  }
}

/* Personal dark */
.page--wlm .wlm-lp-personal {
  padding: clamp(2.75rem, 6vw, 4.25rem) 0;
  background: #0a1218;
  color: #fff;
}

.page--wlm .wlm-lp-personal__grid {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

.page--wlm .wlm-lp-personal__photo {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  aspect-ratio: 1 / 1;
  max-width: 22rem;
  background: #0f1a22;
}

.page--wlm .wlm-lp-personal__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}

.page--wlm .wlm-lp-personal__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  max-width: 16ch;
}

.page--wlm .wlm-lp-personal__lead {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(200, 214, 222, 0.8);
  max-width: 36rem;
}

.page--wlm .wlm-lp-personal__points {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.page--wlm .wlm-lp-personal__points li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: rgba(220, 230, 236, 0.9);
}

.page--wlm .wlm-lp-personal__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--teal);
}

.page--wlm .wlm-lp-personal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
}

.page--wlm .wlm-lp-link {
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--teal);
  text-decoration: none;
}

.page--wlm .wlm-lp-link:hover,
.page--wlm .wlm-lp-link:focus-visible {
  color: #66ffff;
}

@media (min-width: 900px) {
  .page--wlm .wlm-lp-personal__grid {
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
    gap: clamp(2rem, 5vw, 3.5rem);
  }
}

/* Include */
.page--wlm .wlm-lp-include {
  padding: clamp(2.75rem, 6vw, 4.25rem) 0;
  background: #fff;
  color: #1a2329;
}

.page--wlm .wlm-lp-include__head {
  max-width: 40rem;
  margin: 0 0 1.75rem;
}

.page--wlm .wlm-lp-include__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(26, 35, 41, 0.1);
}

.page--wlm .wlm-lp-include__grid > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(26, 35, 41, 0.1);
}

.page--wlm .wlm-lp-include__num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--teal);
  padding-top: 0.15rem;
}

.page--wlm .wlm-lp-include__name {
  margin: 0 0 0.25rem;
  font-size: 0.98rem;
  font-weight: 700;
}

.page--wlm .wlm-lp-include__text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(26, 35, 41, 0.62);
}

@media (min-width: 800px) {
  .page--wlm .wlm-lp-include__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }
}

/* Pricing */
.page--wlm .wlm-lp-pricing {
  padding: clamp(2.75rem, 6vw, 4.25rem) 0;
  background: #f6f8f9;
  color: #1a2329;
}

.page--wlm .wlm-lp-pricing__head {
  max-width: 40rem;
  margin: 0 0 1.75rem;
}

.page--wlm .wlm-lp-pricing__grid {
  display: grid;
  gap: 1rem;
}

.page--wlm .wlm-lp-price {
  padding: 1.35rem 1.25rem 1.25rem;
  border-radius: 16px;
  border: 1px solid rgba(26, 35, 41, 0.1);
  background: #fff;
}

.page--wlm .wlm-lp-price--featured {
  border-color: rgba(0, 184, 184, 0.35);
  box-shadow: 0 16px 40px -28px rgba(0, 120, 120, 0.35);
}

.page--wlm .wlm-lp-price__num {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--teal);
}

.page--wlm .wlm-lp-price__tier {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(26, 35, 41, 0.55);
}

.page--wlm .wlm-lp-price__name {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page--wlm .wlm-lp-price__amount {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  color: rgba(26, 35, 41, 0.75);
}

.page--wlm .wlm-lp-price__amount strong {
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  color: #1a2329;
}

.page--wlm .wlm-lp-price__for {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(26, 35, 41, 0.62);
}

.page--wlm .wlm-lp-price__list {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.page--wlm .wlm-lp-price__list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.86rem;
  color: rgba(26, 35, 41, 0.72);
}

.page--wlm .wlm-lp-price__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--teal);
}

.page--wlm .wlm-lp-price__cta { width: 100%; }
.page--wlm .wlm-lp-price__cta-link {
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--teal-dim, #008b8b);
  text-decoration: none;
}
.page--wlm .wlm-lp-price__cta-link:hover { color: #006f6f; }

@media (min-width: 900px) {
  .page--wlm .wlm-lp-pricing__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

/* Work */
.page--wlm .wlm-lp-work {
  padding: clamp(2.75rem, 6vw, 4rem) 0;
  background: #0a1218;
  color: #fff;
}

.page--wlm .wlm-lp-work__head { margin: 0 0 1.5rem; }

.page--wlm .wlm-lp-work__grid {
  display: grid;
  gap: 1.25rem;
}

.page--wlm .wlm-lp-work__visual {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  aspect-ratio: 16 / 10;
  background: #0f1a22;
}

.page--wlm .wlm-lp-work__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.page--wlm .wlm-lp-work__name {
  margin: 0.85rem 0 0.2rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.page--wlm .wlm-lp-work__meta {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(200, 214, 222, 0.72);
}

.page--wlm .wlm-lp-work__cta-wrap { margin: 1.5rem 0 0; }

@media (min-width: 768px) {
  .page--wlm .wlm-lp-work__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* Process */
.page--wlm .wlm-lp-process {
  padding: clamp(2.75rem, 6vw, 4rem) 0;
  background: #fff;
  color: #1a2329;
}

.page--wlm .wlm-lp-process__head { margin: 0 0 1.75rem; max-width: 36rem; }

.page--wlm .wlm-lp-process__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.page--wlm .wlm-lp-process__step {
  position: relative;
  padding: 0 0 1.35rem 1.5rem;
  border-left: 1px solid rgba(0, 184, 184, 0.35);
}

.page--wlm .wlm-lp-process__step:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.page--wlm .wlm-lp-process__node {
  position: absolute;
  left: -0.32rem;
  top: 0.2rem;
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 184, 184, 0.14);
}

.page--wlm .wlm-lp-process__num {
  display: block;
  margin: 0 0 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--teal);
}

.page--wlm .wlm-lp-process__name {
  margin: 0 0 0.28rem;
  font-size: 1rem;
  font-weight: 700;
}

.page--wlm .wlm-lp-process__text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(26, 35, 41, 0.62);
  max-width: 22rem;
}

@media (min-width: 900px) {
  .page--wlm .wlm-lp-process__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page--wlm .wlm-lp-process__step {
    padding: 0 1.15rem 0 0;
    border-left: none;
  }
  .page--wlm .wlm-lp-process__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0.55rem;
    right: 0.3rem;
    top: 0.4rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 184, 184, 0.55), rgba(0, 184, 184, 0.12));
  }
  .page--wlm .wlm-lp-process__node { left: 0; }
  .page--wlm .wlm-lp-process__num { margin-top: 1.05rem; }
}

/* Why */
.page--wlm .wlm-lp-why {
  padding: clamp(2.75rem, 6vw, 4rem) 0;
  background: #f6f8f9;
  color: #1a2329;
}

.page--wlm .wlm-lp-why__head { margin: 0 0 1.5rem; }

.page--wlm .wlm-lp-why__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(26, 35, 41, 0.1);
}

.page--wlm .wlm-lp-why__grid > li {
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(26, 35, 41, 0.1);
}

.page--wlm .wlm-lp-why__name {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 700;
}

.page--wlm .wlm-lp-why__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(26, 35, 41, 0.62);
  max-width: 28rem;
}

.page--wlm .wlm-lp-why__cta-wrap { margin: 1.35rem 0 0; }

@media (min-width: 800px) {
  .page--wlm .wlm-lp-why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page--wlm .wlm-lp-why__grid > li {
    padding: 1.2rem 1.35rem 1.2rem 0;
  }
  .page--wlm .wlm-lp-why__grid > li:nth-child(odd) {
    padding-right: 1.5rem;
    border-right: 1px solid rgba(26, 35, 41, 0.1);
  }
  .page--wlm .wlm-lp-why__grid > li:nth-child(even) {
    padding-left: 1.5rem;
  }
}

.page--wlm .wlm-lp-faq { background: #fff; }

.page--wlm .home-audit--wlm-page {
  background: #fff !important;
  border-top: 1px solid rgba(26, 35, 41, 0.06) !important;
}

.page--wlm .wlm-lp-form-personal {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1rem;
}

.page--wlm .wlm-lp-form-personal__photo {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 1px solid rgba(26, 35, 41, 0.1);
}

@media (min-width: 900px) {
  .page--wlm .home-audit--wlm-page .home-audit__inner {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    column-gap: clamp(3.5rem, 6vw, 5.5rem);
  }
}

/* Neutralize legacy wlm-hero chrome on redesigned LP */
.page--wlm #wlm-hero-cinema.wlm-hero.wlm-lp-hero {
  height: auto;
  max-height: none;
}
.page--wlm #wlm-hero-cinema.wlm-lp-hero .wlm-hero__ambient,
.page--wlm #wlm-hero-cinema.wlm-lp-hero .wlm-hero__mesh,
.page--wlm #wlm-hero-cinema.wlm-lp-hero .wlm-hero__grain {
  display: none !important;
}

/* WLM hero: homepage motion video */
.page--wlm .wlm-lp-hero__motion {
  position: relative;
  overflow: hidden;
  background: #070b10;
}

.page--wlm .wlm-lp-hero__motion::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.08) 0%, transparent 42%, rgba(0, 0, 0, 0.18) 100%);
  z-index: 1;
}

.page--wlm .wlm-lp-hero__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center center;
  background: #070b10;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.page--wlm .wlm-lp-hero__browser img {
  display: none;
}

@media (max-width: 899px) {
  .page--wlm .wlm-lp-hero__video {
    max-height: min(42svh, 18rem);
  }
}


/* ========== CRM LP (/crm/) — technical system page ========== */
.page--crm.page--wlm {
  --crm-navy: #071018;
  --crm-navy-2: #0c1822;
  --crm-ink: #1a2329;
  --crm-muted: #5a6a73;
  --crm-line: rgba(26, 35, 41, 0.1);
  --crm-teal: var(--teal, #00b8b8);
}

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

/* Hero */
.page--crm #crm-hero-cinema.wlm-hero.crm-lp-hero {
  position: relative;
  color: #fff;
  overflow: visible;
  background: transparent;
  min-height: unset;
}

.page--crm .crm-lp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 92% 12%, rgba(0, 184, 184, 0.14), transparent 58%),
    radial-gradient(ellipse 40% 36% at 6% 88%, rgba(0, 90, 110, 0.12), transparent 52%),
    linear-gradient(165deg, #071018 0%, #0c1822 48%, #0a151c 100%);
}

.page--crm .crm-lp-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: calc(var(--topbar-h, 64px) + 1.65rem) clamp(1.25rem, 4vw, 2rem) 2.4rem;
  padding-left: max(1.25rem, calc(var(--sidebar-w, 0px) + 1.25rem));
  box-sizing: border-box;
}

.page--crm .crm-lp-hero__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 980px) {
  .page--crm .crm-lp-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 4vw, 3.25rem);
  }
}

.page--crm .crm-lp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.8rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200, 230, 230, 0.88);
}

.page--crm .crm-lp-hero__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--crm-teal);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.45);
}

.page--crm .crm-lp-hero__title {
  margin: 0 0 0.95rem;
  font-size: clamp(1.95rem, 4.4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 800;
  max-width: 14ch;
  color: #fff;
}

.page--crm .crm-lp-hero__title-line { display: block; }
.page--crm .crm-lp-hero__accent { color: #66ffff; }

.page--crm .crm-lp-hero__lead {
  margin: 0 0 1.25rem;
  max-width: 34rem;
  font-size: 0.98rem;
  line-height: 1.58;
  color: rgba(200, 214, 222, 0.84);
}

.page--crm .crm-lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 1.25rem;
}

.page--crm .crm-lp-hero__ghost.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

.page--crm .crm-lp-hero__ghost.btn--ghost:hover,
.page--crm .crm-lp-hero__ghost.btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 255, 255, 0.5);
  color: #fff;
}

.page--crm .crm-lp-hero__trust {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 36rem;
}

.page--crm .crm-lp-hero__trust li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.page--crm .crm-lp-hero__trust strong {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.page--crm .crm-lp-hero__trust span {
  font-size: 0.8rem;
  color: rgba(200, 214, 222, 0.72);
}

@media (min-width: 640px) {
  .page--crm .crm-lp-hero__trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  .page--crm .crm-lp-hero__trust li {
    padding: 0 0.9rem;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }
  .page--crm .crm-lp-hero__trust li:first-child { padding-left: 0; }
  .page--crm .crm-lp-hero__trust li:last-child { border-right: none; padding-right: 0; }
}

.page--crm .crm-lp-hero__visual {
  position: relative;
  max-width: 36rem;
  margin: 0 auto;
  width: 100%;
}

.page--crm .crm-lp-hero__browser {
  position: relative;
  border-radius: 14px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0f1a22;
  box-shadow:
    0 30px 64px -28px rgba(0, 0, 0, 0.78),
    0 0 48px -12px rgba(0, 184, 184, 0.22);
}

.page--crm .crm-lp-hero__chrome {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px 14px 0 0;
}

.page--crm .crm-lp-hero__dots {
  display: inline-flex;
  gap: 0.3rem;
}
.page--crm .crm-lp-hero__dots i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: block;
}
.page--crm .crm-lp-hero__url {
  font-size: 0.72rem;
  color: rgba(200, 214, 222, 0.65);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.page--crm .crm-lp-hero__shot {
  overflow: hidden;
  border-radius: 0 0 13px 13px;
}

.page--crm .crm-lp-hero__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

.page--crm .crm-lp-hero__floats {
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.page--crm .crm-lp-hero__float {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  padding: 0.55rem 0.7rem 0.55rem 0.85rem;
  border-radius: 10px;
  background: rgba(8, 14, 20, 0.88);
  border: 1px solid rgba(0, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.7);
  max-width: 9.5rem;
}

.page--crm .crm-lp-hero__float strong {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.page--crm .crm-lp-hero__float span:not(.crm-lp-hero__float-node) {
  font-size: 0.68rem;
  line-height: 1.3;
  color: rgba(180, 210, 210, 0.78);
}

.page--crm .crm-lp-hero__float-node {
  position: absolute;
  left: -0.35rem;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  margin-top: -0.22rem;
  border-radius: 50%;
  background: var(--crm-teal);
  box-shadow: 0 0 0 3px rgba(0, 184, 184, 0.2);
}

.page--crm .crm-lp-hero__float--1 { top: 18%; left: -0.6rem; }
.page--crm .crm-lp-hero__float--2 { top: 48%; right: -0.85rem; left: auto; }
.page--crm .crm-lp-hero__float--2 .crm-lp-hero__float-node { left: auto; right: -0.35rem; }
.page--crm .crm-lp-hero__float--3 { bottom: 10%; left: 12%; }

@media (max-width: 979px) {
  .page--crm .crm-lp-hero__float--1 { left: 0.4rem; }
  .page--crm .crm-lp-hero__float--2 { right: 0.4rem; }
}

@media (max-width: 560px) {
  .page--crm .crm-lp-hero__floats { display: none; }
}

/* Problems */
.page--crm .crm-lp-problems {
  background: #fff;
  padding: clamp(3rem, 7vw, 4.75rem) 0;
  border-top: 1px solid var(--crm-line);
}

.page--crm .crm-lp-problems__inner {
  max-width: min(1100px, 100%);
}

.page--crm .crm-lp-problems__eyebrow,
.page--crm .crm-lp-personal__eyebrow,
.page--crm .crm-lp-modules__eyebrow,
.page--crm .crm-lp-integrations__eyebrow,
.page--crm .crm-lp-pricing__eyebrow,
.page--crm .crm-lp-process__eyebrow,
.page--crm .crm-lp-proof__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crm-teal);
}

.page--crm .crm-lp-problems__title,
.page--crm .crm-lp-personal__title,
.page--crm .crm-lp-modules__title,
.page--crm .crm-lp-integrations__title,
.page--crm .crm-lp-pricing__title,
.page--crm .crm-lp-process__title,
.page--crm .crm-lp-proof__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.55rem, 3.2vw, 2.2rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--crm-ink);
  max-width: 22ch;
}

.page--crm .crm-lp-problems__lead,
.page--crm .crm-lp-modules__lead,
.page--crm .crm-lp-integrations__lead,
.page--crm .crm-lp-pricing__lead {
  margin: 0 0 2rem;
  max-width: 40rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--crm-muted);
}

.page--crm .crm-lp-problems__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--crm-line);
}

.page--crm .crm-lp-problems__list > li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.85rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--crm-line);
  align-items: start;
}

.page--crm .crm-lp-problems__num {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #c45c5c;
  font-variant-numeric: tabular-nums;
  padding-top: 0.2rem;
}

.page--crm .crm-lp-problems__name {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--crm-ink);
}

.page--crm .crm-lp-problems__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--crm-muted);
  max-width: 42rem;
}

@media (min-width: 800px) {
  .page--crm .crm-lp-problems__list {
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
  }
  .page--crm .crm-lp-problems__list > li:nth-child(odd) {
    border-right: 1px solid var(--crm-line);
    padding-right: 1.5rem;
  }
}

/* Transform / before-after */
.page--crm .crm-lp-transform {
  position: relative;
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(0, 184, 184, 0.1), transparent 55%),
    linear-gradient(180deg, #071018 0%, #0c1822 100%);
  color: #fff;
  padding: clamp(3.2rem, 7vw, 5rem) 0;
}

.page--crm .crm-lp-transform__eyebrow,
.page--crm .crm-lp-auto__eyebrow,
.page--crm .crm-lp-why__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(102, 255, 255, 0.85);
}

.page--crm .crm-lp-transform__title,
.page--crm .crm-lp-auto__title,
.page--crm .crm-lp-why__title {
  margin: 0 0 1.75rem;
  font-size: clamp(1.55rem, 3.2vw, 2.25rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fff;
  max-width: 18ch;
}

.page--crm .crm-lp-transform__compare {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}

@media (min-width: 900px) {
  .page--crm .crm-lp-transform__compare {
    grid-template-columns: 1fr auto 1.15fr;
    gap: 1.25rem;
    align-items: center;
  }
}

.page--crm .crm-lp-transform__label {
  margin: 0 0 0.9rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 214, 222, 0.7);
}

.page--crm .crm-lp-transform__side {
  padding: 1.25rem 1.35rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  min-height: 100%;
}

.page--crm .crm-lp-transform__side--before {
  border-style: dashed;
  opacity: 0.92;
}

.page--crm .crm-lp-transform__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page--crm .crm-lp-transform__chips li {
  font-size: 0.82rem;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(220, 230, 235, 0.88);
  background: rgba(0, 0, 0, 0.2);
}

.page--crm .crm-lp-transform__chips--loose li {
  transform: rotate(var(--r, 0deg));
}
.page--crm .crm-lp-transform__chips--loose li:nth-child(1) { --r: -1.5deg; }
.page--crm .crm-lp-transform__chips--loose li:nth-child(2) { --r: 1.2deg; margin-left: 0.4rem; }
.page--crm .crm-lp-transform__chips--loose li:nth-child(3) { --r: -0.8deg; }
.page--crm .crm-lp-transform__chips--loose li:nth-child(4) { --r: 1.6deg; margin-left: 0.75rem; }
.page--crm .crm-lp-transform__chips--loose li:nth-child(5) { --r: -1.1deg; }
.page--crm .crm-lp-transform__chips--loose li:nth-child(6) { --r: 0.9deg; margin-left: 0.35rem; }

.page--crm .crm-lp-transform__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: #66ffff;
  font-weight: 300;
}

@media (max-width: 899px) {
  .page--crm .crm-lp-transform__arrow {
    transform: rotate(90deg);
    padding: 0.25rem 0;
  }
}

.page--crm .crm-lp-transform__hub {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page--crm .crm-lp-transform__hub-core {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #071018;
  background: linear-gradient(135deg, #66ffff, #00b8b8);
  box-shadow: 0 0 24px rgba(0, 184, 184, 0.35);
}

.page--crm .crm-lp-transform__chips--linked li {
  border-color: rgba(0, 255, 255, 0.28);
  background: rgba(0, 184, 184, 0.08);
}

.page--crm .crm-lp-transform__note {
  margin: 1.75rem 0 0;
  font-size: 0.95rem;
  color: rgba(200, 214, 222, 0.75);
  max-width: 36rem;
}

/* Personal */
.page--crm .crm-lp-personal {
  background: #fff;
  padding: clamp(3rem, 7vw, 4.75rem) 0;
}

.page--crm .crm-lp-personal__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 900px) {
  .page--crm .crm-lp-personal__grid {
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.page--crm .crm-lp-personal__photo {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #e8eef0;
}

.page--crm .crm-lp-personal__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.page--crm .crm-lp-personal__lead {
  margin: 0 0 1.35rem;
  max-width: 38rem;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--crm-muted);
}

.page--crm .crm-lp-personal__points {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.95rem;
  max-width: 36rem;
}

.page--crm .crm-lp-personal__points li {
  padding-left: 0.95rem;
  border-left: 2px solid rgba(0, 184, 184, 0.45);
}

.page--crm .crm-lp-personal__points strong {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.95rem;
  color: var(--crm-ink);
}

.page--crm .crm-lp-personal__points span {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--crm-muted);
}

/* Modules */
.page--crm .crm-lp-modules {
  background: #f5f8f9;
  padding: clamp(3rem, 7vw, 4.75rem) 0;
  border-top: 1px solid var(--crm-line);
}

.page--crm .crm-lp-modules__grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .page--crm .crm-lp-modules__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .page--crm .crm-lp-modules__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page--crm .crm-lp-mod {
  padding: 1.15rem 1.2rem 1.2rem;
  border: 1px solid rgba(26, 35, 41, 0.1);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

.page--crm .crm-lp-mod__title {
  margin: 0 0 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(26, 35, 41, 0.08);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crm-ink);
}

.page--crm .crm-lp-mod__title::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.45rem;
  border-radius: 1px;
  background: var(--crm-teal);
  vertical-align: 0.05em;
}

.page--crm .crm-lp-mod ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.page--crm .crm-lp-mod li {
  position: relative;
  padding-left: 0.85rem;
  font-size: 0.88rem;
  color: var(--crm-muted);
  line-height: 1.4;
}

.page--crm .crm-lp-mod li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.35rem;
  height: 1px;
  background: rgba(0, 184, 184, 0.7);
}

/* Automation */
.page--crm .crm-lp-auto {
  background:
    radial-gradient(ellipse 45% 35% at 80% 20%, rgba(0, 184, 184, 0.1), transparent 55%),
    linear-gradient(180deg, #0a151c 0%, #071018 100%);
  color: #fff;
  padding: clamp(3.2rem, 7vw, 5rem) 0;
}

.page--crm .crm-lp-auto__lead {
  margin: 0 0 2rem;
  max-width: 40rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(200, 214, 222, 0.8);
}

.page--crm .crm-lp-auto__flows {
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .page--crm .crm-lp-auto__flows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

.page--crm .crm-lp-flow {
  list-style: none;
  margin: 0;
  padding: 1.2rem 1.15rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: none;
}

.page--crm .crm-lp-flow li {
  position: relative;
  padding: 0.55rem 0 0.55rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  border-left: 1px solid rgba(0, 255, 255, 0.35);
}

.page--crm .crm-lp-flow li::before {
  content: "";
  position: absolute;
  left: -0.28rem;
  top: 0.85rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--crm-teal);
  box-shadow: 0 0 0 3px rgba(0, 184, 184, 0.15);
}

.page--crm .crm-lp-flow li:not(:last-child)::after {
  content: "↓";
  display: block;
  margin: 0.15rem 0 0 -0.15rem;
  font-size: 0.75rem;
  color: rgba(102, 255, 255, 0.65);
  font-weight: 400;
}

.page--crm .crm-lp-auto__note {
  margin: 1.5rem 0 0;
  font-size: 0.88rem;
  color: rgba(180, 200, 210, 0.7);
  font-style: italic;
}

/* Integrations */
.page--crm .crm-lp-integrations {
  background: #fff;
  padding: clamp(3rem, 7vw, 4.5rem) 0;
}

.page--crm .crm-lp-integrations__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

@media (min-width: 800px) {
  .page--crm .crm-lp-integrations__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page--crm .crm-lp-integrations__grid li {
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--crm-line);
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--crm-ink);
  background: linear-gradient(180deg, #fafcfc 0%, #fff 100%);
}

.page--crm .crm-lp-integrations__grid li::before {
  content: "⬡ ";
  color: var(--crm-teal);
  font-weight: 400;
}

/* Pricing */
.page--crm .crm-lp-pricing {
  background: #f7fafb;
  padding: clamp(3rem, 7vw, 4.75rem) 0;
  border-top: 1px solid var(--crm-line);
}

.page--crm .crm-lp-pricing__grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .page--crm .crm-lp-pricing__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

.page--crm .crm-lp-price {
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.3rem 1.45rem;
  border: 1px solid rgba(26, 35, 41, 0.1);
  border-radius: 14px;
  background: #fff;
}

.page--crm .crm-lp-price--featured {
  border-color: rgba(0, 184, 184, 0.45);
  box-shadow: 0 18px 40px -28px rgba(0, 100, 110, 0.35);
}

.page--crm .crm-lp-price__num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--crm-teal);
  margin-bottom: 0.45rem;
}

.page--crm .crm-lp-price__name {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--crm-ink);
}

.page--crm .crm-lp-price__amount {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  color: var(--crm-ink);
}

.page--crm .crm-lp-price__amount strong {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.page--crm .crm-lp-price__for {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--crm-muted);
  flex: 0 0 auto;
}

.page--crm .crm-lp-price__list {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  flex: 1 1 auto;
}

.page--crm .crm-lp-price__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  color: var(--crm-ink);
}

.page--crm .crm-lp-price__list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--crm-teal);
}

.page--crm .crm-lp-price__cta {
  align-self: flex-start;
  margin-top: auto;
}

.page--crm .crm-lp-price__link {
  margin-top: auto;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--crm-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 184, 184, 0.45);
  align-self: flex-start;
  padding-bottom: 0.1rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.page--crm .crm-lp-price__link:hover,
.page--crm .crm-lp-price__link:focus-visible {
  color: var(--crm-teal);
  border-color: var(--crm-teal);
}

/* Process */
.page--crm .crm-lp-process {
  background: #fff;
  padding: clamp(3rem, 7vw, 4.75rem) 0;
}

.page--crm .crm-lp-process__steps {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  position: relative;
}

@media (min-width: 900px) {
  .page--crm .crm-lp-process__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .page--crm .crm-lp-process__steps::before {
    content: "";
    position: absolute;
    top: 2.15rem;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 184, 184, 0.45), transparent);
    z-index: 0;
  }
}

.page--crm .crm-lp-process__step {
  position: relative;
  z-index: 1;
}

.page--crm .crm-lp-process__num {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--crm-teal);
}

.page--crm .crm-lp-process__node {
  display: block;
  width: 0.65rem;
  height: 0.65rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--crm-teal);
  box-shadow: 0 0 0 4px rgba(0, 184, 184, 0.15);
}

.page--crm .crm-lp-process__name {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--crm-ink);
}

.page--crm .crm-lp-process__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--crm-muted);
}

/* Product proof */
.page--crm .crm-lp-proof {
  background:
    radial-gradient(ellipse 50% 40% at 20% 0%, rgba(0, 184, 184, 0.08), transparent 55%),
    linear-gradient(180deg, #0c1822 0%, #071018 100%);
  color: #fff;
  padding: clamp(3.2rem, 7vw, 5rem) 0;
}

.page--crm .crm-lp-proof__eyebrow { color: rgba(102, 255, 255, 0.85); }
.page--crm .crm-lp-proof__title { color: #fff; max-width: 22ch; }

.page--crm .crm-lp-proof__grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

@media (min-width: 900px) {
  .page--crm .crm-lp-proof__grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 1.1rem;
  }
}

.page--crm .crm-lp-proof__item { margin: 0; }

.page--crm .crm-lp-proof__frame {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0f1a22;
  aspect-ratio: 16 / 10;
}

.page--crm .crm-lp-proof__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page--crm .crm-lp-proof__img--dash { object-position: top center; }
.page--crm .crm-lp-proof__img--leads { object-position: left center; transform: scale(1.15); transform-origin: left center; }
.page--crm .crm-lp-proof__img--tasks { object-position: right bottom; transform: scale(1.2); transform-origin: right bottom; }

.page--crm .crm-lp-proof__item figcaption {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.page--crm .crm-lp-proof__item figcaption strong {
  font-size: 0.95rem;
  color: #fff;
}

.page--crm .crm-lp-proof__item figcaption span {
  font-size: 0.85rem;
  color: rgba(200, 214, 222, 0.72);
  line-height: 1.45;
}

/* Why Valtex */
.page--crm .crm-lp-why {
  background: #fff;
  padding: clamp(3rem, 6vw, 4.25rem) 0;
  border-top: 1px solid var(--crm-line);
}

.page--crm .crm-lp-why__eyebrow { color: var(--crm-teal); }
.page--crm .crm-lp-why__title {
  color: var(--crm-ink);
  margin-bottom: 1.5rem;
}

.page--crm .crm-lp-why__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--crm-line);
}

.page--crm .crm-lp-why__grid > li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--crm-line);
}

.page--crm .crm-lp-why__name {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--crm-ink);
}

.page--crm .crm-lp-why__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--crm-muted);
  max-width: 36rem;
}

@media (min-width: 800px) {
  .page--crm .crm-lp-why__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }
  .page--crm .crm-lp-why__grid > li:nth-child(odd) {
    border-right: 1px solid var(--crm-line);
    padding-right: 1.5rem;
  }
}

.page--crm .crm-lp-why__cta-wrap { margin: 1.35rem 0 0; }

.page--crm .crm-lp-link {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--crm-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 184, 184, 0.45);
  padding-bottom: 0.1rem;
}

.page--crm .crm-lp-link:hover,
.page--crm .crm-lp-link:focus-visible {
  color: var(--crm-teal);
}

.page--crm .crm-lp-faq {
  background: #fff;
}

/* Contact form layout already via home-audit--project + page--crm */
.page--crm .home-audit--crm-page {
  scroll-margin-top: calc(var(--topbar-h) + 0.75rem);
}

@media (max-width: 720px) {
  .page--crm .crm-lp-hero__title { max-width: 12ch; }
  .page--crm .crm-lp-integrations__grid {
    grid-template-columns: 1fr;
  }
}


/* ========== RECLAME LP (/reclame/) — performance advertising ========== */
.page--reclame {
  --rcl-navy: #071018;
  --rcl-ink: #1a2329;
  --rcl-muted: #5a6a73;
  --rcl-line: rgba(26, 35, 41, 0.1);
  --rcl-teal: var(--teal, #00b8b8);
}

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

.page--reclame #reclame-hero-cinema.wlm-hero.rcl-lp-hero {
  position: relative;
  color: #fff;
  overflow: visible;
  background: transparent;
  min-height: unset;
}

.page--reclame .rcl-lp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 48% at 90% 14%, rgba(0, 184, 184, 0.15), transparent 58%),
    radial-gradient(ellipse 42% 38% at 8% 88%, rgba(0, 90, 110, 0.12), transparent 52%),
    linear-gradient(165deg, #071018 0%, #0c1822 48%, #0a151c 100%);
}

.page--reclame .rcl-lp-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: calc(var(--topbar-h, 64px) + 1.65rem) clamp(1.25rem, 4vw, 2rem) 2.4rem;
  padding-left: max(1.25rem, calc(var(--sidebar-w, 0px) + 1.25rem));
  box-sizing: border-box;
}

.page--reclame .rcl-lp-hero__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 980px) {
  .page--reclame .rcl-lp-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 4vw, 3.25rem);
  }
}

.page--reclame .rcl-lp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.8rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200, 230, 230, 0.88);
}

.page--reclame .rcl-lp-hero__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--rcl-teal);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.45);
}

.page--reclame .rcl-lp-hero__title {
  margin: 0 0 0.95rem;
  font-size: clamp(1.95rem, 4.4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 800;
  max-width: 13ch;
  color: #fff;
}

.page--reclame .rcl-lp-hero__title-line { display: block; }
.page--reclame .rcl-lp-hero__accent { color: #66ffff; }

.page--reclame .rcl-lp-hero__lead {
  margin: 0 0 1.25rem;
  max-width: 34rem;
  font-size: 0.98rem;
  line-height: 1.58;
  color: rgba(200, 214, 222, 0.84);
}

.page--reclame .rcl-lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 1.25rem;
}

.page--reclame .rcl-lp-hero__ghost.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
.page--reclame .rcl-lp-hero__ghost.btn--ghost:hover,
.page--reclame .rcl-lp-hero__ghost.btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 255, 255, 0.5);
  color: #fff;
}

.page--reclame .rcl-lp-hero__trust {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 36rem;
}
.page--reclame .rcl-lp-hero__trust li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.page--reclame .rcl-lp-hero__trust strong {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.page--reclame .rcl-lp-hero__trust span {
  font-size: 0.8rem;
  color: rgba(200, 214, 222, 0.72);
}
@media (min-width: 640px) {
  .page--reclame .rcl-lp-hero__trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  .page--reclame .rcl-lp-hero__trust li {
    padding: 0 0.9rem;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }
  .page--reclame .rcl-lp-hero__trust li:first-child { padding-left: 0; }
  .page--reclame .rcl-lp-hero__trust li:last-child { border-right: none; padding-right: 0; }
}

.page--reclame .rcl-lp-hero__visual {
  position: relative;
  max-width: 36rem;
  margin: 0 auto;
  width: 100%;
}

.page--reclame .rcl-lp-hero__browser {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0f1a22;
  box-shadow:
    0 30px 64px -28px rgba(0, 0, 0, 0.78),
    0 0 48px -12px rgba(0, 184, 184, 0.22);
}

.page--reclame .rcl-lp-hero__chrome {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.page--reclame .rcl-lp-hero__dots { display: inline-flex; gap: 0.3rem; }
.page--reclame .rcl-lp-hero__dots i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: block;
}
.page--reclame .rcl-lp-hero__url {
  font-size: 0.72rem;
  color: rgba(200, 214, 222, 0.65);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.page--reclame .rcl-lp-hero__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

.page--reclame .rcl-lp-hero__flow {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.15rem;
  justify-content: center;
}
.page--reclame .rcl-lp-hero__flow li {
  position: relative;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(220, 235, 235, 0.9);
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(0, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 184, 184, 0.08);
}
.page--reclame .rcl-lp-hero__flow li:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #66ffff;
  font-weight: 400;
}
.page--reclame .rcl-lp-hero__flow li:not(:last-child) {
  margin-right: 0.85rem;
}

/* Problems */
.page--reclame .rcl-lp-problems {
  background: #fff;
  padding: clamp(3rem, 7vw, 4.75rem) 0;
  border-top: 1px solid var(--rcl-line);
}
.page--reclame .rcl-lp-problems__eyebrow,
.page--reclame .rcl-lp-personal__eyebrow,
.page--reclame .rcl-lp-channels__eyebrow,
.page--reclame .rcl-lp-cro__eyebrow,
.page--reclame .rcl-lp-pricing__eyebrow,
.page--reclame .rcl-lp-process__eyebrow,
.page--reclame .rcl-lp-proof__eyebrow,
.page--reclame .rcl-lp-why__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rcl-teal);
}
.page--reclame .rcl-lp-problems__title,
.page--reclame .rcl-lp-personal__title,
.page--reclame .rcl-lp-channels__title,
.page--reclame .rcl-lp-cro__title,
.page--reclame .rcl-lp-pricing__title,
.page--reclame .rcl-lp-process__title,
.page--reclame .rcl-lp-proof__title,
.page--reclame .rcl-lp-why__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.55rem, 3.2vw, 2.2rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--rcl-ink);
  max-width: 22ch;
}
.page--reclame .rcl-lp-problems__lead,
.page--reclame .rcl-lp-cro__lead,
.page--reclame .rcl-lp-pricing__lead,
.page--reclame .rcl-lp-proof__lead {
  margin: 0 0 2rem;
  max-width: 40rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--rcl-muted);
}
.page--reclame .rcl-lp-problems__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rcl-line);
}
.page--reclame .rcl-lp-problems__list > li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.85rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rcl-line);
}
.page--reclame .rcl-lp-problems__num {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #c45c5c;
  padding-top: 0.2rem;
}
.page--reclame .rcl-lp-problems__name {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--rcl-ink);
}
.page--reclame .rcl-lp-problems__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--rcl-muted);
  max-width: 42rem;
}
@media (min-width: 800px) {
  .page--reclame .rcl-lp-problems__list {
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
  }
  .page--reclame .rcl-lp-problems__list > li:nth-child(odd) {
    border-right: 1px solid var(--rcl-line);
    padding-right: 1.5rem;
  }
}

/* Performance system */
.page--reclame .rcl-lp-system {
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(0, 184, 184, 0.1), transparent 55%),
    linear-gradient(180deg, #071018 0%, #0c1822 100%);
  color: #fff;
  padding: clamp(3.2rem, 7vw, 5rem) 0;
}
.page--reclame .rcl-lp-system__eyebrow,
.page--reclame .rcl-lp-tracking__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(102, 255, 255, 0.85);
}
.page--reclame .rcl-lp-system__title,
.page--reclame .rcl-lp-tracking__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.55rem, 3.2vw, 2.25rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fff;
  max-width: 18ch;
}
.page--reclame .rcl-lp-system__lead,
.page--reclame .rcl-lp-tracking__lead {
  margin: 0 0 2rem;
  max-width: 40rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(200, 214, 222, 0.8);
}
.page--reclame .rcl-lp-system__flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  position: relative;
}
@media (min-width: 1000px) {
  .page--reclame .rcl-lp-system__flow {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .page--reclame .rcl-lp-system__flow::before {
    content: "";
    position: absolute;
    top: 2.35rem;
    left: 6%;
    right: 6%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 184, 184, 0.45), transparent);
  }
}
.page--reclame .rcl-lp-system__flow > li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 0.85rem;
  border-left: 1px solid rgba(0, 255, 255, 0.28);
}
@media (min-width: 1000px) {
  .page--reclame .rcl-lp-system__flow > li {
    border-left: none;
    padding-left: 0;
    padding-top: 0.25rem;
  }
}
.page--reclame .rcl-lp-system__num {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #66ffff;
}
.page--reclame .rcl-lp-system__node {
  display: none;
}
@media (min-width: 1000px) {
  .page--reclame .rcl-lp-system__node {
    display: block;
    width: 0.55rem;
    height: 0.55rem;
    margin: 0.35rem 0 0.55rem;
    border-radius: 50%;
    background: var(--rcl-teal);
    box-shadow: 0 0 0 4px rgba(0, 184, 184, 0.15);
  }
}
.page--reclame .rcl-lp-system__flow strong {
  font-size: 0.88rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}
.page--reclame .rcl-lp-system__flow span:not(.rcl-lp-system__num):not(.rcl-lp-system__node) {
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(200, 214, 222, 0.72);
}
.page--reclame .rcl-lp-system__note {
  margin: 1.75rem 0 0;
  font-size: 0.95rem;
  color: rgba(200, 214, 222, 0.75);
  max-width: 36rem;
}

/* Personal */
.page--reclame .rcl-lp-personal {
  background: #fff;
  padding: clamp(3rem, 7vw, 4.75rem) 0;
}
.page--reclame .rcl-lp-personal__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 900px) {
  .page--reclame .rcl-lp-personal__grid {
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}
.page--reclame .rcl-lp-personal__photo {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #e8eef0;
}
.page--reclame .rcl-lp-personal__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.page--reclame .rcl-lp-personal__lead {
  margin: 0 0 1.35rem;
  max-width: 38rem;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--rcl-muted);
}
.page--reclame .rcl-lp-personal__points {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.95rem;
  max-width: 36rem;
}
.page--reclame .rcl-lp-personal__points li {
  padding-left: 0.95rem;
  border-left: 2px solid rgba(0, 184, 184, 0.45);
}
.page--reclame .rcl-lp-personal__points strong {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.95rem;
  color: var(--rcl-ink);
}
.page--reclame .rcl-lp-personal__points span {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--rcl-muted);
}

/* Channels */
.page--reclame .rcl-lp-channels {
  background: #f5f8f9;
  padding: clamp(3rem, 7vw, 4.75rem) 0;
  border-top: 1px solid var(--rcl-line);
}
.page--reclame .rcl-lp-channels__grid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 860px) {
  .page--reclame .rcl-lp-channels__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}
.page--reclame .rcl-lp-channel {
  padding: 1.5rem 1.4rem 1.55rem;
  border: 1px solid rgba(26, 35, 41, 0.1);
  border-radius: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.page--reclame .rcl-lp-channel__label {
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rcl-teal);
}
.page--reclame .rcl-lp-channel__name {
  margin: 0 0 0.75rem;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 750;
  letter-spacing: -0.025em;
  color: var(--rcl-ink);
  max-width: 16ch;
}
.page--reclame .rcl-lp-channel__text {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.58;
  color: var(--rcl-muted);
}
.page--reclame .rcl-lp-channel__suit {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rcl-ink);
}
.page--reclame .rcl-lp-channel__list {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  flex: 1;
}
.page--reclame .rcl-lp-channel__list li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.9rem;
  color: var(--rcl-ink);
}
.page--reclame .rcl-lp-channel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 1px;
  background: var(--rcl-teal);
}
.page--reclame .rcl-lp-channels__note {
  margin: 1.35rem 0 0;
  font-size: 0.9rem;
  color: var(--rcl-muted);
  font-style: italic;
}

.page--reclame .rcl-lp-link {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--rcl-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 184, 184, 0.45);
  padding-bottom: 0.1rem;
  align-self: flex-start;
}
.page--reclame .rcl-lp-link:hover,
.page--reclame .rcl-lp-link:focus-visible {
  color: var(--rcl-teal);
}

/* Tracking */
.page--reclame .rcl-lp-tracking {
  background:
    radial-gradient(ellipse 45% 35% at 80% 20%, rgba(0, 184, 184, 0.1), transparent 55%),
    linear-gradient(180deg, #0a151c 0%, #071018 100%);
  color: #fff;
  padding: clamp(3.2rem, 7vw, 5rem) 0;
}
.page--reclame .rcl-lp-tracking__arch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  max-width: 28rem;
  margin: 0 auto;
}
.page--reclame .rcl-lp-tracking__stage {
  width: 100%;
  padding: 0.95rem 1.15rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}
.page--reclame .rcl-lp-tracking__stage strong {
  font-size: 0.88rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.page--reclame .rcl-lp-tracking__stage ul {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.page--reclame .rcl-lp-tracking__stage li {
  font-size: 0.85rem;
  color: rgba(200, 214, 222, 0.78);
}
.page--reclame .rcl-lp-tracking__arrow {
  color: #66ffff;
  font-size: 1rem;
  line-height: 1;
}
.page--reclame .rcl-lp-tracking__tools {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
}
.page--reclame .rcl-lp-tracking__tools li {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 255, 255, 0.28);
  color: rgba(220, 235, 235, 0.9);
}

/* CRO */
.page--reclame .rcl-lp-cro {
  background: #fff;
  padding: clamp(3rem, 7vw, 4.75rem) 0;
}
.page--reclame .rcl-lp-cro__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rcl-line);
}
.page--reclame .rcl-lp-cro__points > li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rcl-line);
}
.page--reclame .rcl-lp-cro__points strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1rem;
  color: var(--rcl-ink);
}
.page--reclame .rcl-lp-cro__points span {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--rcl-muted);
}
@media (min-width: 800px) {
  .page--reclame .rcl-lp-cro__points {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }
  .page--reclame .rcl-lp-cro__points > li:nth-child(odd) {
    border-right: 1px solid var(--rcl-line);
    padding-right: 1.5rem;
  }
}
.page--reclame .rcl-lp-cro__cta-wrap { margin: 1.35rem 0 0; }

/* Pricing */
.page--reclame .rcl-lp-pricing {
  background: #f7fafb;
  padding: clamp(3rem, 7vw, 4.75rem) 0;
  border-top: 1px solid var(--rcl-line);
}
.page--reclame .rcl-lp-pricing__grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 900px) {
  .page--reclame .rcl-lp-pricing__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
  }
}
.page--reclame .rcl-lp-price {
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.3rem 1.45rem;
  border: 1px solid rgba(26, 35, 41, 0.1);
  border-radius: 14px;
  background: #fff;
}
.page--reclame .rcl-lp-price--featured {
  border-color: rgba(0, 184, 184, 0.45);
  box-shadow: 0 18px 40px -28px rgba(0, 100, 110, 0.35);
}
.page--reclame .rcl-lp-price__num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--rcl-teal);
  margin-bottom: 0.45rem;
}
.page--reclame .rcl-lp-price__name {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
  font-weight: 750;
  color: var(--rcl-ink);
}
.page--reclame .rcl-lp-price__amount {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  color: var(--rcl-ink);
}
.page--reclame .rcl-lp-price__amount strong {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.page--reclame .rcl-lp-price__for {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--rcl-muted);
}
.page--reclame .rcl-lp-price__list {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  flex: 1;
}
.page--reclame .rcl-lp-price__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  color: var(--rcl-ink);
}
.page--reclame .rcl-lp-price__list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--rcl-teal);
}
.page--reclame .rcl-lp-price__cta { align-self: flex-start; margin-top: auto; }
.page--reclame .rcl-lp-price__link {
  margin-top: auto;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--rcl-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 184, 184, 0.45);
  align-self: flex-start;
  padding-bottom: 0.1rem;
}
.page--reclame .rcl-lp-price__link:hover,
.page--reclame .rcl-lp-price__link:focus-visible {
  color: var(--rcl-teal);
}

/* Process */
.page--reclame .rcl-lp-process {
  background: #fff;
  padding: clamp(3rem, 7vw, 4.75rem) 0;
}
.page--reclame .rcl-lp-process__steps {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  position: relative;
}
@media (min-width: 900px) {
  .page--reclame .rcl-lp-process__steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
  }
  .page--reclame .rcl-lp-process__steps::before {
    content: "";
    position: absolute;
    top: 2.15rem;
    left: 6%;
    right: 6%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 184, 184, 0.45), transparent);
  }
}
.page--reclame .rcl-lp-process__step { position: relative; z-index: 1; }
.page--reclame .rcl-lp-process__num {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--rcl-teal);
}
.page--reclame .rcl-lp-process__node {
  display: block;
  width: 0.65rem;
  height: 0.65rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--rcl-teal);
  box-shadow: 0 0 0 4px rgba(0, 184, 184, 0.15);
}
.page--reclame .rcl-lp-process__name {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--rcl-ink);
}
.page--reclame .rcl-lp-process__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--rcl-muted);
}

/* Proof */
.page--reclame .rcl-lp-proof {
  background:
    radial-gradient(ellipse 50% 40% at 20% 0%, rgba(0, 184, 184, 0.08), transparent 55%),
    linear-gradient(180deg, #0c1822 0%, #071018 100%);
  color: #fff;
  padding: clamp(3.2rem, 7vw, 5rem) 0;
}
.page--reclame .rcl-lp-proof__eyebrow { color: rgba(102, 255, 255, 0.85); }
.page--reclame .rcl-lp-proof__title { color: #fff; }
.page--reclame .rcl-lp-proof__lead { color: rgba(200, 214, 222, 0.78); }
.page--reclame .rcl-lp-proof__grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 0.5rem;
}
@media (min-width: 900px) {
  .page--reclame .rcl-lp-proof__grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2rem;
    align-items: center;
  }
}
.page--reclame .rcl-lp-proof__item { margin: 0; }
.page--reclame .rcl-lp-proof__frame {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0f1a22;
  aspect-ratio: 16 / 10;
}
.page--reclame .rcl-lp-proof__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.page--reclame .rcl-lp-proof__item figcaption {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.page--reclame .rcl-lp-proof__item figcaption strong { font-size: 0.95rem; color: #fff; }
.page--reclame .rcl-lp-proof__item figcaption span {
  font-size: 0.85rem;
  color: rgba(200, 214, 222, 0.72);
  line-height: 1.45;
}
.page--reclame .rcl-lp-proof__workflow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.page--reclame .rcl-lp-proof__workflow li {
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}
.page--reclame .rcl-lp-proof__workflow strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
  color: #fff;
}
.page--reclame .rcl-lp-proof__workflow span {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(200, 214, 222, 0.72);
}

/* Why */
.page--reclame .rcl-lp-why {
  background: #fff;
  padding: clamp(3rem, 6vw, 4.25rem) 0;
  border-top: 1px solid var(--rcl-line);
}
.page--reclame .rcl-lp-why__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rcl-line);
}
.page--reclame .rcl-lp-why__grid > li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rcl-line);
}
.page--reclame .rcl-lp-why__name {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--rcl-ink);
}
.page--reclame .rcl-lp-why__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--rcl-muted);
  max-width: 36rem;
}
@media (min-width: 800px) {
  .page--reclame .rcl-lp-why__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }
  .page--reclame .rcl-lp-why__grid > li:nth-child(odd) {
    border-right: 1px solid var(--rcl-line);
    padding-right: 1.5rem;
  }
}
.page--reclame .rcl-lp-why__cta-wrap { margin: 1.35rem 0 0; }
.page--reclame .rcl-lp-faq { background: #fff; }

.page--reclame .home-audit--reclame-page {
  scroll-margin-top: calc(var(--topbar-h) + 0.75rem);
}

@media (max-width: 720px) {
  .page--reclame .rcl-lp-hero__title { max-width: 11ch; }
  .page--reclame .rcl-lp-hero__flow li:not(:last-child)::after {
    content: "↓";
    right: auto;
    left: 50%;
    top: auto;
    bottom: -0.95rem;
    transform: translateX(-50%);
  }
  .page--reclame .rcl-lp-hero__flow {
    flex-direction: column;
    align-items: stretch;
  }
  .page--reclame .rcl-lp-hero__flow li:not(:last-child) {
    margin-right: 0;
    margin-bottom: 0.95rem;
    text-align: center;
  }
}


/* ========== SEO LP (/seo/) — structured organic growth ========== */
.page--seo {
  --seo-navy: #071018;
  --seo-ink: #1a2329;
  --seo-muted: #5a6a73;
  --seo-line: rgba(26, 35, 41, 0.1);
  --seo-teal: var(--teal, #00b8b8);
}

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

.page--seo #seo-hero-cinema.wlm-hero.seo-lp-hero {
  position: relative;
  color: #fff;
  overflow: visible;
  background: transparent;
  min-height: unset;
}

.page--seo .seo-lp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 48% at 88% 12%, rgba(0, 184, 184, 0.14), transparent 58%),
    radial-gradient(ellipse 40% 36% at 8% 88%, rgba(0, 90, 110, 0.12), transparent 52%),
    linear-gradient(165deg, #071018 0%, #0c1822 48%, #0a151c 100%);
}

.page--seo .seo-lp-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: calc(var(--topbar-h, 64px) + 1.65rem) clamp(1.25rem, 4vw, 2rem) 2.4rem;
  padding-left: max(1.25rem, calc(var(--sidebar-w, 0px) + 1.25rem));
  box-sizing: border-box;
}

.page--seo .seo-lp-hero__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 980px) {
  .page--seo .seo-lp-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 4vw, 3.25rem);
  }
}

.page--seo .seo-lp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.8rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200, 230, 230, 0.88);
}

.page--seo .seo-lp-hero__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--seo-teal);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.45);
}

.page--seo .seo-lp-hero__title {
  margin: 0 0 0.95rem;
  font-size: clamp(1.95rem, 4.4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 800;
  max-width: 12ch;
  color: #fff;
}

.page--seo .seo-lp-hero__title-line { display: block; }
.page--seo .seo-lp-hero__accent { color: #66ffff; }

.page--seo .seo-lp-hero__lead {
  margin: 0 0 1.25rem;
  max-width: 34rem;
  font-size: 0.98rem;
  line-height: 1.58;
  color: rgba(200, 214, 222, 0.84);
}

.page--seo .seo-lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 1.25rem;
}

.page--seo .seo-lp-hero__ghost.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
.page--seo .seo-lp-hero__ghost.btn--ghost:hover,
.page--seo .seo-lp-hero__ghost.btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 255, 255, 0.5);
  color: #fff;
}

.page--seo .seo-lp-hero__trust {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 36rem;
}
.page--seo .seo-lp-hero__trust li { display: flex; flex-direction: column; gap: 0.15rem; }
.page--seo .seo-lp-hero__trust strong {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.page--seo .seo-lp-hero__trust span {
  font-size: 0.8rem;
  color: rgba(200, 214, 222, 0.72);
}
@media (min-width: 640px) {
  .page--seo .seo-lp-hero__trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  .page--seo .seo-lp-hero__trust li {
    padding: 0 0.9rem;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }
  .page--seo .seo-lp-hero__trust li:first-child { padding-left: 0; }
  .page--seo .seo-lp-hero__trust li:last-child { border-right: none; padding-right: 0; }
}

.page--seo .seo-lp-hero__visual {
  position: relative;
  max-width: 36rem;
  margin: 0 auto;
  width: 100%;
}

.page--seo .seo-lp-hero__browser {
  position: relative;
  border-radius: 14px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0f1a22;
  box-shadow:
    0 30px 64px -28px rgba(0, 0, 0, 0.78),
    0 0 48px -12px rgba(0, 184, 184, 0.22);
}

.page--seo .seo-lp-hero__chrome {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px 14px 0 0;
}
.page--seo .seo-lp-hero__dots { display: inline-flex; gap: 0.3rem; }
.page--seo .seo-lp-hero__dots i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: block;
}
.page--seo .seo-lp-hero__url {
  font-size: 0.72rem;
  color: rgba(200, 214, 222, 0.65);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.page--seo .seo-lp-hero__shot {
  overflow: hidden;
  border-radius: 0 0 13px 13px;
}
.page--seo .seo-lp-hero__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

.page--seo .seo-lp-hero__floats { list-style: none; margin: 0; padding: 0; pointer-events: none; }
.page--seo .seo-lp-hero__float {
  position: absolute;
  z-index: 3;
  padding: 0.5rem 0.7rem 0.5rem 0.85rem;
  border-radius: 10px;
  background: rgba(8, 14, 20, 0.88);
  border: 1px solid rgba(0, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  max-width: 10rem;
}
.page--seo .seo-lp-hero__float-node {
  position: absolute;
  left: -0.35rem;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  margin-top: -0.22rem;
  border-radius: 50%;
  background: var(--seo-teal);
  box-shadow: 0 0 0 3px rgba(0, 184, 184, 0.2);
}
.page--seo .seo-lp-hero__float--1 { top: 18%; left: -0.5rem; }
.page--seo .seo-lp-hero__float--2 { top: 46%; right: -0.75rem; left: auto; }
.page--seo .seo-lp-hero__float--2 .seo-lp-hero__float-node { left: auto; right: -0.35rem; }
.page--seo .seo-lp-hero__float--3 { bottom: 12%; left: 14%; }
@media (max-width: 979px) {
  .page--seo .seo-lp-hero__float--1 { left: 0.4rem; }
  .page--seo .seo-lp-hero__float--2 { right: 0.4rem; }
}
@media (max-width: 560px) {
  .page--seo .seo-lp-hero__floats { display: none; }
}

/* Shared light section eyebrows/titles */
.page--seo .seo-lp-problems__eyebrow,
.page--seo .seo-lp-personal__eyebrow,
.page--seo .seo-lp-tech__eyebrow,
.page--seo .seo-lp-local__eyebrow,
.page--seo .seo-lp-pricing__eyebrow,
.page--seo .seo-lp-ecosystem__eyebrow,
.page--seo .seo-lp-process__eyebrow,
.page--seo .seo-lp-why__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--seo-teal);
}

.page--seo .seo-lp-problems__title,
.page--seo .seo-lp-personal__title,
.page--seo .seo-lp-tech__title,
.page--seo .seo-lp-local__title,
.page--seo .seo-lp-pricing__title,
.page--seo .seo-lp-ecosystem__title,
.page--seo .seo-lp-process__title,
.page--seo .seo-lp-why__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.55rem, 3.2vw, 2.2rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--seo-ink);
  max-width: 24ch;
}

.page--seo .seo-lp-problems__lead,
.page--seo .seo-lp-tech__lead,
.page--seo .seo-lp-local__lead,
.page--seo .seo-lp-pricing__lead,
.page--seo .seo-lp-ecosystem__lead {
  margin: 0 0 2rem;
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--seo-muted);
}

/* Problems */
.page--seo .seo-lp-problems {
  background: #fff;
  padding: clamp(3rem, 7vw, 4.75rem) 0;
  border-top: 1px solid var(--seo-line);
}
.page--seo .seo-lp-problems__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--seo-line);
}
.page--seo .seo-lp-problems__list > li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.85rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--seo-line);
}
.page--seo .seo-lp-problems__num {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #c45c5c;
  padding-top: 0.2rem;
}
.page--seo .seo-lp-problems__name {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--seo-ink);
}
.page--seo .seo-lp-problems__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--seo-muted);
}
@media (min-width: 800px) {
  .page--seo .seo-lp-problems__list {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }
  .page--seo .seo-lp-problems__list > li:nth-child(odd) {
    border-right: 1px solid var(--seo-line);
    padding-right: 1.5rem;
  }
}

/* System */
.page--seo .seo-lp-system {
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(0, 184, 184, 0.1), transparent 55%),
    linear-gradient(180deg, #071018 0%, #0c1822 100%);
  color: #fff;
  padding: clamp(3.2rem, 7vw, 5rem) 0;
}
.page--seo .seo-lp-system__eyebrow,
.page--seo .seo-lp-intent__eyebrow,
.page--seo .seo-lp-measure__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(102, 255, 255, 0.85);
}
.page--seo .seo-lp-system__title,
.page--seo .seo-lp-intent__title,
.page--seo .seo-lp-measure__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.55rem, 3.2vw, 2.25rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fff;
  max-width: 20ch;
}
.page--seo .seo-lp-system__lead,
.page--seo .seo-lp-intent__lead,
.page--seo .seo-lp-measure__lead {
  margin: 0 0 2rem;
  max-width: 40rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(200, 214, 222, 0.8);
}
.page--seo .seo-lp-system__flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  position: relative;
}
@media (min-width: 1000px) {
  .page--seo .seo-lp-system__flow {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .page--seo .seo-lp-system__flow::before {
    content: "";
    position: absolute;
    top: 2.35rem;
    left: 6%;
    right: 6%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 184, 184, 0.45), transparent);
  }
}
.page--seo .seo-lp-system__flow > li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 0.85rem;
  border-left: 1px solid rgba(0, 255, 255, 0.28);
}
@media (min-width: 1000px) {
  .page--seo .seo-lp-system__flow > li {
    border-left: none;
    padding-left: 0;
  }
}
.page--seo .seo-lp-system__num {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #66ffff;
}
.page--seo .seo-lp-system__node { display: none; }
@media (min-width: 1000px) {
  .page--seo .seo-lp-system__node {
    display: block;
    width: 0.55rem;
    height: 0.55rem;
    margin: 0.35rem 0 0.55rem;
    border-radius: 50%;
    background: var(--seo-teal);
    box-shadow: 0 0 0 4px rgba(0, 184, 184, 0.15);
  }
}
.page--seo .seo-lp-system__flow strong {
  font-size: 0.88rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}
.page--seo .seo-lp-system__flow span:not(.seo-lp-system__num):not(.seo-lp-system__node) {
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(200, 214, 222, 0.72);
}

/* Personal */
.page--seo .seo-lp-personal {
  background: #fff;
  padding: clamp(3rem, 7vw, 4.75rem) 0;
}
.page--seo .seo-lp-personal__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 900px) {
  .page--seo .seo-lp-personal__grid {
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}
.page--seo .seo-lp-personal__photo {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #e8eef0;
}
.page--seo .seo-lp-personal__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.page--seo .seo-lp-personal__lead {
  margin: 0 0 1.35rem;
  max-width: 38rem;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--seo-muted);
}
.page--seo .seo-lp-personal__points {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.95rem;
  max-width: 36rem;
}
.page--seo .seo-lp-personal__points li {
  padding-left: 0.95rem;
  border-left: 2px solid rgba(0, 184, 184, 0.45);
}
.page--seo .seo-lp-personal__points strong {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.95rem;
  color: var(--seo-ink);
}
.page--seo .seo-lp-personal__points span {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--seo-muted);
}

/* Tech checklist */
.page--seo .seo-lp-tech {
  background: #f5f8f9;
  padding: clamp(3rem, 7vw, 4.75rem) 0;
  border-top: 1px solid var(--seo-line);
}
.page--seo .seo-lp-tech__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .page--seo .seo-lp-tech__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .page--seo .seo-lp-tech__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.page--seo .seo-lp-tech__grid li {
  padding: 1rem 1.05rem;
  border: 1px solid rgba(26, 35, 41, 0.1);
  border-radius: 12px;
  background: #fff;
}
.page--seo .seo-lp-tech__grid strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.88rem;
  color: var(--seo-ink);
}
.page--seo .seo-lp-tech__grid span {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--seo-muted);
}

/* Intent / content */
.page--seo .seo-lp-intent {
  background:
    radial-gradient(ellipse 45% 35% at 20% 0%, rgba(0, 184, 184, 0.08), transparent 55%),
    linear-gradient(180deg, #0a151c 0%, #071018 100%);
  color: #fff;
  padding: clamp(3.2rem, 7vw, 5rem) 0;
}
.page--seo .seo-lp-intent__journey {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  max-width: 36rem;
}
.page--seo .seo-lp-intent__journey li {
  position: relative;
  padding: 0.9rem 1.05rem 0.9rem 1.15rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid rgba(0, 255, 255, 0.45);
}
.page--seo .seo-lp-intent__journey li:not(:last-child)::after {
  content: "↓";
  display: block;
  margin-top: 0.35rem;
  color: rgba(102, 255, 255, 0.65);
  font-size: 0.8rem;
}
.page--seo .seo-lp-intent__journey strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #66ffff;
}
.page--seo .seo-lp-intent__journey span {
  font-size: 0.92rem;
  color: rgba(220, 230, 235, 0.9);
  line-height: 1.45;
}
.page--seo .seo-lp-intent__example-note {
  margin: 0 0 1.5rem;
  font-size: 0.8rem;
  color: rgba(180, 200, 210, 0.65);
  font-style: italic;
}
.page--seo .seo-lp-intent__areas {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 700px) {
  .page--seo .seo-lp-intent__areas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.page--seo .seo-lp-intent__areas li {
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(0, 255, 255, 0.22);
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 184, 184, 0.08);
}
.page--seo .seo-lp-intent__note {
  margin: 0;
  max-width: 40rem;
  font-size: 0.9rem;
  color: rgba(200, 214, 222, 0.75);
}

/* Local */
.page--seo .seo-lp-local {
  background: #fff;
  padding: clamp(3rem, 7vw, 4.75rem) 0;
}
.page--seo .seo-lp-local__grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 800px) {
  .page--seo .seo-lp-local__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.page--seo .seo-lp-local__grid article {
  padding: 1.25rem 1.2rem;
  border-top: 2px solid rgba(0, 184, 184, 0.45);
  border-right: 1px solid var(--seo-line);
  border-bottom: 1px solid var(--seo-line);
  border-left: 1px solid var(--seo-line);
  border-radius: 0 0 12px 12px;
}
.page--seo .seo-lp-local__name {
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--seo-ink);
}
.page--seo .seo-lp-local__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--seo-muted);
}

/* Measure */
.page--seo .seo-lp-measure {
  background:
    radial-gradient(ellipse 50% 40% at 80% 10%, rgba(0, 184, 184, 0.1), transparent 55%),
    linear-gradient(180deg, #0c1822 0%, #071018 100%);
  color: #fff;
  padding: clamp(3.2rem, 7vw, 5rem) 0;
}
.page--seo .seo-lp-measure__layout {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .page--seo .seo-lp-measure__layout {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2rem;
    align-items: center;
  }
}
.page--seo .seo-lp-measure__visual { margin: 0; }
.page--seo .seo-lp-measure__frame {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0f1a22;
  aspect-ratio: 16 / 10;
}
.page--seo .seo-lp-measure__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.page--seo .seo-lp-measure__visual figcaption {
  margin-top: 0.65rem;
  font-size: 0.82rem;
  color: rgba(200, 214, 222, 0.65);
}
.page--seo .seo-lp-measure__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.page--seo .seo-lp-measure__points li {
  padding: 0.95rem 1.05rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}
.page--seo .seo-lp-measure__points strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.95rem;
  color: #fff;
}
.page--seo .seo-lp-measure__points span {
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(200, 214, 222, 0.72);
}

/* Pricing */
.page--seo .seo-lp-pricing {
  background: #f7fafb;
  padding: clamp(3rem, 7vw, 4.75rem) 0;
  border-top: 1px solid var(--seo-line);
}
.page--seo .seo-lp-pricing__grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 900px) {
  .page--seo .seo-lp-pricing__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.page--seo .seo-lp-price {
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.3rem 1.45rem;
  border: 1px solid rgba(26, 35, 41, 0.1);
  border-radius: 14px;
  background: #fff;
}
.page--seo .seo-lp-price--featured {
  border-color: rgba(0, 184, 184, 0.45);
  box-shadow: 0 18px 40px -28px rgba(0, 100, 110, 0.35);
}
.page--seo .seo-lp-price__num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--seo-teal);
  margin-bottom: 0.45rem;
}
.page--seo .seo-lp-price__name {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
  font-weight: 750;
  color: var(--seo-ink);
}
.page--seo .seo-lp-price__amount {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  color: var(--seo-ink);
}
.page--seo .seo-lp-price__amount strong {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.page--seo .seo-lp-price__for {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--seo-muted);
}
.page--seo .seo-lp-price__list {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  flex: 1;
}
.page--seo .seo-lp-price__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  color: var(--seo-ink);
}
.page--seo .seo-lp-price__list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--seo-teal);
}
.page--seo .seo-lp-price__cta { align-self: flex-start; margin-top: auto; }
.page--seo .seo-lp-price__link {
  margin-top: auto;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--seo-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 184, 184, 0.45);
  align-self: flex-start;
  padding-bottom: 0.1rem;
}
.page--seo .seo-lp-price__link:hover,
.page--seo .seo-lp-price__link:focus-visible { color: var(--seo-teal); }

.page--seo .seo-lp-link {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--seo-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 184, 184, 0.45);
  padding-bottom: 0.1rem;
}
.page--seo .seo-lp-link:hover,
.page--seo .seo-lp-link:focus-visible { color: var(--seo-teal); }

/* Ecosystem */
.page--seo .seo-lp-ecosystem {
  background: #fff;
  padding: clamp(3rem, 6vw, 4.25rem) 0;
}
.page--seo .seo-lp-ecosystem__grid {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 760px) {
  .page--seo .seo-lp-ecosystem__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.page--seo .seo-lp-ecosystem__grid li {
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--seo-line);
  border-radius: 12px;
  background: #fafcfc;
}
.page--seo .seo-lp-ecosystem__grid strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
  color: var(--seo-ink);
}
.page--seo .seo-lp-ecosystem__grid span {
  font-size: 0.88rem;
  color: var(--seo-muted);
}
.page--seo .seo-lp-ecosystem__lead { margin-bottom: 1rem; }
.page--seo .seo-lp-ecosystem__cta-wrap { margin: 0; }

/* Process */
.page--seo .seo-lp-process {
  background: #f7fafb;
  padding: clamp(3rem, 7vw, 4.75rem) 0;
  border-top: 1px solid var(--seo-line);
}
.page--seo .seo-lp-process__steps {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  position: relative;
}
@media (min-width: 900px) {
  .page--seo .seo-lp-process__steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
  }
  .page--seo .seo-lp-process__steps::before {
    content: "";
    position: absolute;
    top: 2.15rem;
    left: 6%;
    right: 6%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 184, 184, 0.45), transparent);
  }
}
.page--seo .seo-lp-process__step { position: relative; z-index: 1; }
.page--seo .seo-lp-process__num {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--seo-teal);
}
.page--seo .seo-lp-process__node {
  display: block;
  width: 0.65rem;
  height: 0.65rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--seo-teal);
  box-shadow: 0 0 0 4px rgba(0, 184, 184, 0.15);
}
.page--seo .seo-lp-process__name {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--seo-ink);
}
.page--seo .seo-lp-process__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--seo-muted);
}

/* Why */
.page--seo .seo-lp-why {
  background: #fff;
  padding: clamp(3rem, 6vw, 4.25rem) 0;
  border-top: 1px solid var(--seo-line);
}
.page--seo .seo-lp-why__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--seo-line);
}
.page--seo .seo-lp-why__grid > li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--seo-line);
}
.page--seo .seo-lp-why__name {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--seo-ink);
}
.page--seo .seo-lp-why__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--seo-muted);
}
@media (min-width: 800px) {
  .page--seo .seo-lp-why__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }
  .page--seo .seo-lp-why__grid > li:nth-child(odd) {
    border-right: 1px solid var(--seo-line);
    padding-right: 1.5rem;
  }
}
.page--seo .seo-lp-why__cta-wrap { margin: 1.35rem 0 0; }
.page--seo .seo-lp-faq { background: #fff; }

.page--seo .home-audit--seo-page {
  scroll-margin-top: calc(var(--topbar-h) + 0.75rem);
}

@media (max-width: 720px) {
  .page--seo .seo-lp-hero__title { max-width: 11ch; }
  .page--seo .seo-lp-intent__areas { grid-template-columns: 1fr; }
}