/* ============================================================
   WERCO — Design System
   werco.be | Custom Grav theme
   ============================================================ */

/* ── TOKENS ── */
:root {
  --blue:       #0057A8;
  --blue-dark:  #003d7a;
  --blue-light: #e8f1fb;
  --teal:       #008778;
  --white:      #ffffff;
  --off:        #f5f7fa;
  --text:       #1a1f2e;
  --muted:      #6b7280;
  --border:     #d1dcea;
  --accent:     #6eb3ff;

  /* Form error palette (WP-02). The five older forms carry these three values as
     raw hex inline; the tokens exist so nothing new has to (N-ENG-03). */
  --danger:      #D32F2F;
  --danger-bg:   #fce8e8;
  --danger-ring: rgba(211, 47, 47, 0.15);

  /* Blue alpha derivatives (WP-02) — the focus ring and the button shadows that
     older rules spell out as rgba(0, 87, 168, …) literals. */
  --focus-ring-blue: rgba(0, 87, 168, 0.15);
  --shadow-blue-sm:  0 2px 12px rgba(0, 87, 168, 0.25);
  --shadow-blue-lg:  0 6px 24px rgba(0, 87, 168, 0.32);

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  16px;

  --pad-xl:     80px;
  --pad-lg:     48px;
  --pad-md:     24px;
  --pad-sm:     16px;

  --section-v:  112px;
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Consent banner alpha tokens */
  --consent-shadow:       rgba(0, 0, 0, 0.15);
  --consent-border:       rgba(255, 255, 255, 0.2);
  --consent-focus-ring:   rgba(255, 255, 255, 0.6);
  --consent-hover-bg:     rgba(255, 255, 255, 0.1);
  --consent-toggle-off:   rgba(255, 255, 255, 0.25);

  --shadow-sm:  0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);

  /* Motion */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --press:       scale(0.97);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }

/* ── GOOGLE FONTS ── */
/* Loaded in base.html.twig head */

/* ── NAV ── */
.nav-wrap {
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 200;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}

/* Blob base — transparent over hero, blue glass once scrolled */
.nav-blob {
  pointer-events: auto;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 20px;
  gap: 6px;
}
/* Organic, asymmetric shapes — each blob leans toward the center */
.nav-blob--left  { border-radius: 18px 28px 28px 18px; }
.nav-blob--right { border-radius: 28px 18px 18px 28px; }

/* Glass fill lives on ::before so it animates independently of layout */
.nav-blob::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background:
    radial-gradient(ellipse at 25% 50%, rgba(40, 125, 220, 0.38) 0%, transparent 65%),
    linear-gradient(140deg, rgba(0, 87, 168, 0.64) 0%, rgba(0, 36, 98, 0.74) 100%);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  opacity: 0;
  transform: scale(0.94) translateY(-6px);
  transition:
    opacity 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-wrap.scrolled .nav-blob::before {
  opacity: 1;
  transform: scale(1) translateY(0);
}
/* Progressive darkening overlay — fades to footer blue as user scrolls deeper */
.nav-blob::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: var(--blue-dark);
  opacity: calc(var(--nav-depth, 0) * 0.72);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .nav-blob::before { transition: opacity 200ms ease; transform: none !important; }
  /* Hamburger lines — skip rotation, only fade */
  .nav-hamburger span { transition: opacity 120ms var(--ease-out); }
  .nav-hamburger.open span:nth-child(1),
  .nav-hamburger.open span:nth-child(3) { transform: none; }
  /* Mobile menu — no slide, just fade */
  .nav-mobile-menu { transition: opacity 150ms var(--ease-out); transform: none !important; }
  /* Lang dropdown — no scale/translate, just fade */
  .lang-dropdown__menu { transition: opacity 120ms var(--ease-out); transform: none !important; }
  /* Nav CTA arrow and chevron — no motion */
  .nav-cta svg,
  .lang-dropdown__chevron { transition: none; }
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-img {
  height: 26px;
  width: auto;
  display: block;
}

/* Desktop nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin-right: 8px;
}
.nav-links a {
  text-decoration: none;
  font-size: 0.87rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: white; background: rgba(255, 255, 255, 0.12); }
}
.nav-links a.active { color: white; font-weight: 700; }

/* Language dropdown (desktop) */
.lang-dropdown {
  position: relative;
}
.lang-dropdown__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .lang-dropdown__btn:hover { color: white; background: rgba(255, 255, 255, 0.2); border-color: rgba(255,255,255,0.4); }
}
.lang-dropdown__current { letter-spacing: 0.04em; }
.lang-dropdown__chevron {
  transition: transform 200ms var(--ease-out);
  opacity: 0.7;
}
.lang-dropdown.open .lang-dropdown__chevron { transform: rotate(180deg); }
.lang-dropdown__menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: 6px;
  transform-origin: top right;
  opacity: 0;
  transform: scale(0.97) translateY(-4px);
  pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.lang-dropdown.open .lang-dropdown__menu {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.lang-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  transition: background 130ms var(--ease-out), color 130ms var(--ease-out);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .lang-dropdown__item:hover { background: rgba(0, 87, 168, 0.08); color: var(--blue); }
}
.lang-dropdown__item.active { color: var(--blue); }
.lang-dropdown__item.active .lang-dropdown__code { font-weight: 700; }
.lang-dropdown__item--disabled { color: var(--border); cursor: default; pointer-events: none; }
.lang-dropdown__code {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: 22px;
}
.lang-dropdown__name {
  font-size: 0.84rem;
  font-weight: 400;
  color: inherit;
}

/* Nav CTA — white pill, always readable on both transparent and blue blob */
.nav-cta {
  background: white;
  color: var(--blue);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 160ms var(--ease-out), transform 120ms var(--ease-out);
  flex-shrink: 0;
  margin-left: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover { opacity: 0.88; }
  .nav-cta:hover svg { transform: translateX(2px); }
}
.nav-cta:active { transform: var(--press); }
.nav-cta svg { transition: transform 160ms var(--ease-out); }

/* Hamburger — hidden on desktop, shown on mobile */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  transition: transform 120ms var(--ease-out);
}
.nav-hamburger:active { transform: var(--press); }
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: transform 200ms var(--ease-out), opacity 180ms var(--ease-out);
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.nav-mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: fixed;
  top: 82px;
  left: 16px;
  right: 16px;
  z-index: 199;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: 10px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.nav-mobile-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-mobile-menu > a {
  text-decoration: none;
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--text);
  padding: 13px 14px;
  border-radius: var(--radius-md);
  transition: background 130ms var(--ease-out), color 130ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-mobile-menu > a:hover { background: rgba(0, 87, 168, 0.06); color: var(--blue); }
}
.nav-mobile-menu > a.active { color: var(--blue); }
.nav-cta-mobile {
  background: var(--blue) !important;
  color: white !important;
  text-align: center;
  font-weight: 600 !important;
  margin-top: 6px;
  border-radius: var(--radius-md) !important;
  padding: 14px !important;
}
@media (hover: hover) and (pointer: fine) {
  .nav-cta-mobile:hover { background: var(--blue-dark) !important; }
}

/* Mobile language section */
.mobile-lang-section {
  border-top: 1px solid rgba(0, 87, 168, 0.08);
  margin-top: 6px;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  transition: background 130ms var(--ease-out), color 130ms var(--ease-out);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .mobile-lang-item:hover { background: rgba(0, 87, 168, 0.06); color: var(--blue); }
}
.mobile-lang-item.active { color: var(--blue); }
.mobile-lang-item--disabled { color: var(--border); cursor: default; pointer-events: none; }
.mobile-lang-item__code {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-width: 22px;
}
.mobile-lang-item.active .mobile-lang-item__code { color: var(--blue); }
.mobile-lang-item__name {
  font-size: 0.88rem;
  font-weight: 400;
  flex: 1;
}
.mobile-lang-item__check {
  color: var(--blue);
  flex-shrink: 0;
}

/* ── COMMON SECTION COMPONENTS ── */
.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-label::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  flex-shrink: 0;
}
.section-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 3.2vw, 3.6rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: 16px;
}
.section-sub {
  font-size: 1.05rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.75;
  max-width: 580px;
  margin-bottom: 56px;
}

/* ── BUTTONS ── */
.btn-primary {
  background: linear-gradient(135deg, #006acc 0%, var(--blue) 50%, #004fa0 100%);
  color: white;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: box-shadow 160ms var(--ease-out), transform 160ms var(--ease-out), background 160ms var(--ease-out);
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 2px 12px rgba(0, 87, 168, 0.30);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: linear-gradient(135deg, #0074e0 0%, #0062c0 50%, #0057a8 100%);
    box-shadow: 0 4px 20px rgba(0, 87, 168, 0.48);
    transform: translateY(-1px);
  }
  .btn-primary:hover svg { transform: translateX(2px); }
}
.btn-primary:active { transform: var(--press); }
.btn-primary svg { flex-shrink: 0; transition: transform 200ms var(--ease-out); }

/* Glass button — hero context reuses nav glass language */
.btn-glass {
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  color: white;
  padding: 17px 36px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.32);
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
}
@media (hover: hover) and (pointer: fine) {
  .btn-glass:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 6px 32px rgba(0,0,0,0.24);
    transform: translateY(-1px);
  }
  .btn-glass:hover svg { transform: translateX(2px); }
}
.btn-glass:active { transform: var(--press); }
.btn-glass svg { flex-shrink: 0; transition: transform 200ms var(--ease-out); }

.btn-ghost {
  color: white;
  padding: 17px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid rgba(255,255,255,0.35);
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  font-family: 'DM Sans', sans-serif;
}
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.12); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,0,0,0.18); }
}
.btn-ghost:active { transform: var(--press); }

.btn-white {
  background: white;
  color: var(--blue);
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out);
  font-family: 'DM Sans', sans-serif;
}
@media (hover: hover) and (pointer: fine) {
  .btn-white:hover { background: var(--blue-light); }
}
.btn-white:active { transform: var(--press); }

.btn-outline {
  color: var(--blue);
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--blue);
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
  font-family: 'DM Sans', sans-serif;
}
@media (hover: hover) and (pointer: fine) {
  .btn-outline:hover { background: var(--blue); color: white; transform: translateY(-1px); }
}
.btn-outline:active { transform: var(--press); }

/* ── TAG PILL ── */
.tag {
  display: inline-flex;
  align-items: center;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 100px;
  border: 1px solid rgba(0,87,168,0.15);
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out);
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .tag:hover { background: var(--blue); color: white; }
}

/* ── CTA BAND ── */
.cta-band {
  background-color: #003d7a;
  background-size: cover;
  background-position: center;
  padding: 80px var(--pad-xl);
  margin-top: 0;
  display: block;
  position: relative;
  overflow: hidden;
}
.page-home .cta-band {
  padding-top: calc(88px + 80px);
  margin-top: -88px;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0,30,70,0.72) 0%,
    rgba(0,0,0,0.52) 100%
  );
  pointer-events: none;
}
.cta-band::after {
  content: '';
  position: absolute;
  right: -140px;
  top: -140px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band-inner { max-width: 1160px; }
.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 44px;
}
.cta-band h2 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 2.5vw, 2.6rem);
  color: white;
  letter-spacing: -0.03em;
}
.cta-band p {
  color: rgba(255,255,255,0.72);
  margin-top: 10px;
  font-size: 0.97rem;
  line-height: 1.6;
  max-width: 520px;
}

/* ── FOOTER ── */
footer {
  background: var(--blue-dark);
  color: rgba(255,255,255,0.7);
  padding: 64px var(--pad-xl) 40px;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.35fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand {}
.footer-logo {
  margin-bottom: 10px;
  display: inline-block;
  text-decoration: none;
}
.footer-logo-img {
  height: 30px;
  width: auto;
  display: block;
}
.footer-tagline {
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 18px;
  max-width: 270px;
}
.footer-contact a {
  display: block;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 0.88rem;
  margin-bottom: 5px;
  transition: color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .footer-contact a:hover { color: white; }
}
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.12);
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out);
  flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
  .footer-social a:hover { color: white; border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.08); }
}
.footer-col h4 {
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.footer-links a {
  text-decoration: none;
  color: rgba(255,255,255,0.6);
  font-size: 0.87rem;
  transition: color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover { color: white; }
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-pefc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
  flex-wrap: wrap;
}
.footer-pefc-logo {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  flex-shrink: 0;
}
.footer-pefc-sep {
  opacity: 0.4;
}
.footer-landing-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-landing-group + .footer-landing-group {
  margin-top: 26px;
}
.footer-landing-intro {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  margin: 0;
}
.footer-landing-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 8px;
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  align-self: flex-start;
}
@media (hover: hover) and (pointer: fine) {
  .footer-landing-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.48);
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  }
}

/* ── PAGE NAV OFFSET ── */
/* Pages without a full-bleed hero need top padding to clear the fixed nav */
.page-body { padding-top: 82px; }
/* Pages with a page-hero: nav floats on top of the blue box (hero already has 120px top padding) */
.page-home .page-body,
.page-default .page-body,
.page-legal .page-body,
.page-panel-anatomie .page-body,
.page-jobs .page-body,
.page-job .page-body,
.page-over-werco .page-body,
.page-panelen .page-body,
.page-decors .page-body,
.page-material-studio .page-body,
.page-stuur-je-tekening .page-body,
.page-start-jouw-project .page-body { padding-top: 0; }
.page-error .page-body { padding-top: 0; }

/* ── INNER PAGE HERO ── */
/* See "Page Hero — Inner Pages" section at the bottom of this file for full styles */

/* ── HOMEPAGE HERO ── */
.hero {
  position: relative;
  width: 100%;
  min-height: max(600px, 108dvh);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }

/* Photo background — z-index 1, always visible */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Vimeo iframe — z-index 2, on top of photo; starts hidden until loaded */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}
.hero-video-wrap.is-loaded {
  opacity: 1;
}
/* A <video> can cover its box on its own, so the old trick of over-sizing the
   element past the viewport (needed when this was an iframe) is gone. That
   over-size was also what cropped a landscape clip down to its middle quarter
   on a phone; the portrait cut plus object-fit removes the problem entirely. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
}

/* Dark gradient overlay — z-index 3, always on top of photo and video */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    108deg,
    rgba(6,14,28,0.92) 0%,
    rgba(6,14,28,0.78) 36%,
    rgba(6,14,28,0.28) 62%,
    rgba(6,14,28,0.06) 100%
  );
}
.hero-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 55%, rgba(26,74,138,0.85) 0%, transparent 52%),
    radial-gradient(ellipse at 75% 32%, rgba(13,52,104,0.65) 0%, transparent 46%),
    #050e1c;
}
.hero-fallback::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.40) 0%,
    rgba(0,0,0,0.12) 48%,
    transparent 100%
  );
}
.hero-deco {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 0 6%;
  transform: rotate(-4deg) scale(1.12);
  opacity: 0.06;
  pointer-events: none;
}
.hero-deco span { display: block; height: 36px; border-radius: 5px; background: white; }
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  /* top padding clears the floating pill nav (82px) + breathing room */
  padding: 100px var(--pad-xl) 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: clamp(560px, 66vw, 860px);
}
.hero-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(2.8rem, 5.2vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: white;
  margin-bottom: 20px;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-title { animation: fadeUp .45s .10s var(--ease-out) both; }
}
.hero-title span { color: var(--accent); }
.hero-sub {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.78);
  max-width: 560px;
  margin-bottom: 40px;
  font-weight: 300;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-sub { animation: fadeUp .45s .22s var(--ease-out) both; }
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-actions { animation: fadeUp .45s .34s var(--ease-out) both; }
}
.btn-primary--lg {
  padding: 17px 36px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 24px rgba(0,87,168,0.45);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary--lg:hover {
    box-shadow: 0 6px 32px rgba(0,87,168,0.6);
  }
}
.hero-scroll {
  position: absolute;
  bottom: calc(8dvh + 32px);
  right: var(--pad-xl);
  left: auto;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.38);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-scroll-line {
  width: 40px;
  height: 1px;
  background: linear-gradient(to left, rgba(255,255,255,0.55), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll { animation: fadeIn .6s 1.8s var(--ease-out) both; }
}

/* ── STATS STRIP — white credibility row, dome transition from hero ── */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: white;
  position: relative;
  z-index: 2;
  margin-top: -88px;
  border-radius: 50% 50% 0 0 / 88px 88px 0 0;
  padding-top: 88px;
  box-shadow: 0 -28px 60px rgba(0,0,0,0.28), 0 -6px 18px rgba(0,0,0,0.14);
  /* clip shadow to hero side only — prevent bleed onto white sections below */
  clip-path: inset(-200px -100vw 0px -100vw);
}
.stats-strip .stat {
  text-align: center;
  padding: 56px 40px 64px;
}
.stats-strip .stat strong {
  display: block;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(2.8rem, 4.5vw, 4.2rem);
  color: var(--blue);
  letter-spacing: -0.04em;
  line-height: 1;
}
.stats-strip .stat span {
  display: block;
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ── HOW WE WORK ── */
.how-section { background: white; padding: 60px 28px; }
.how-blob {
  background: #dce8f7;
  border-radius: 48% 52% 50% 50% / 8% 8% 8% 8%;
  overflow: hidden;
  padding: calc(var(--section-v) + 40px) 120px;
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  transition: clip-path 700ms var(--ease-out), border-radius 700ms var(--ease-out);
}
.how-blob .section-label { justify-content: center; }
.how-blob .section-sub { max-width: 640px; margin-left: auto; margin-right: auto; }
.how-steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 32px;
  position: relative;
}
.how-steps::before {
  content: '';
  position: absolute;
  top: 155px;
  left: calc(33.33% - 12px);
  right: calc(33.33% - 12px);
  height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--blue) 0, var(--blue) 10px, transparent 10px, transparent 22px);
  opacity: .5;
}
.how-step {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative; z-index: 1;
}
.step-blob {
  width: 100%;
  aspect-ratio: 1;
  max-width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
/* Blob motion matches .elk-img in the "oplossingen" section: the radius eases
   over 600ms and only when the visitor has not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .step-blob {
    transition:
      transform 240ms var(--ease-out),
      box-shadow 240ms var(--ease-out),
      border-radius 600ms var(--ease-out);
  }
}
@media (hover: hover) and (pointer: fine) {
  .step-blob:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,87,168,0.18); }
  .step-blob:hover .step-blob-photo { opacity: 0.32; }
  .step-1 .step-blob:hover { border-radius: 50% 50% 50% 50% / 46% 52% 48% 54%; }
  .step-2 .step-blob:hover { border-radius: 50% 50% 50% 50% / 52% 48% 54% 46%; }
  .step-3 .step-blob:hover { border-radius: 50% 50% 50% 50% / 48% 54% 46% 52%; }
}
.step-blob svg { width: 60%; height: 60%; position: relative; z-index: 2; }
.step-blob-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  border-radius: inherit;
  opacity: 0.22;
  z-index: 1;
  transition: opacity 240ms var(--ease-out);
}
.step-num { z-index: 3; }
.step-num {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--blue);
  color: white;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 0.72rem;
  display: grid;
  place-items: center;
  z-index: 3;
}
.step-1 .step-blob { background: var(--blue-light); border: 2px solid rgba(0,87,168,0.12); border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%; }
.step-2 .step-blob { background: var(--blue); border: 2px solid var(--blue-dark); border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%; }
.step-2 .step-num { background: white; color: var(--blue); }
.step-3 .step-blob { background: var(--blue-light); border: 2px solid rgba(0,87,168,0.12); border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%; }
.how-step h3 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.35rem; margin-bottom: 10px; letter-spacing: -0.02em; }
.how-step p { font-size: 0.95rem; color: var(--muted); line-height: 1.7; max-width: 260px; }
.how-repeat-wrap {
  text-align: center;
  margin-top: 56px;
}
.how-repeat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: white;
  padding: 9px 20px;
  border-radius: 100px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ── ELK ROWS — alternating text + blob image proof points ── */
.elk-section {
  background: white;
  padding: var(--section-v) var(--pad-xl);
  display: flex;
  flex-direction: column;
  gap: 96px;
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
}
.elk-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: 960px;
  margin-left: 0;
  margin-right: auto;
}
.elk-row--reverse {
  grid-template-columns: 1fr 1fr;
  margin-left: auto;
  margin-right: 0;
}
.elk-text .section-label { margin-bottom: 14px; }
.elk-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 3.5vw, 3rem);
  letter-spacing: -0.04em;
  color: var(--text);
  margin-bottom: 18px;
  line-height: 1.05;
}
.elk-text p {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 32px;
}
/* Elk image reveal — .is-visible toggled by IntersectionObserver */
.elk-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  max-height: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .elk-img {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    transition: opacity 400ms var(--ease-out), transform 450ms var(--ease-out), border-radius 600ms var(--ease-out);
  }
  .elk-img.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .elk-img { opacity: 1; }
}
.elk-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--ease-out);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .elk-img:hover img { transform: scale(1.04); }
  .elk-img--1:hover { border-radius: 50% 50% 50% 50% / 44% 50% 50% 56%; }
  .elk-img--2:hover { border-radius: 50% 50% 50% 50% / 52% 46% 54% 48%; }
  .elk-img--3:hover { border-radius: 50% 50% 50% 50% / 48% 54% 46% 52%; }
}
.elk-img--1 { border-radius: 62% 38% 50% 50% / 48% 44% 56% 52%; }
.elk-img--2 { border-radius: 44% 56% 38% 62% / 56% 50% 50% 44%; }
.elk-img--3 { border-radius: 50% 50% 62% 38% / 44% 56% 44% 56%; }

/* ── CLIENTS MARQUEE ── */
.clients-section {
  background: white;
  padding: 72px 0;
}

/* ── PAGE CLOSE — white dome curving downward, closes white content into CTA ── */
.page-close {
  background: white;
  height: 88px;
  border-radius: 0 0 50% 50% / 0 0 88px 88px;
  position: relative;
  z-index: 2;
  box-shadow: 0 50px 40px rgba(0,0,0,0.20), 0 26px 16px rgba(0,0,0,0.10);
  clip-path: inset(-100vw -200px -100vw);
}
.clients-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-xl);
  margin-bottom: 48px;
  border: none;
}
.clients-intro h2 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem,2vw,1.9rem);
  letter-spacing: -0.02em;
}
.client-count {
  font-family: 'Syne', sans-serif;
  font-size: 3.8rem;
  font-weight: 800;
  color: var(--blue);
  line-height: 1;
  text-align: right;
}
.client-count small {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 3px;
}
.marquee-wrap {
  overflow: hidden;
  cursor: grab;
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.marquee-wrap:active { cursor: grabbing; }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
@media (hover: hover) and (pointer: fine) {
  .marquee-track:hover { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation-play-state: paused; }
}
.logo-item {
  flex: 0 0 190px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border);
  padding: 0 24px;
  transition: background 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .logo-item:hover { background: var(--off); }
  .logo-item:hover img { filter: grayscale(0) opacity(1); }
  .logo-item:hover svg text { fill: var(--blue); }
}
.logo-item img { max-height: 40px; max-width: 120px; filter: grayscale(1) opacity(.5); transition: filter 160ms var(--ease-out); object-fit: contain; }
/* SVG text fallback (prototype placeholder logos) */
.logo-item svg { width: 100%; max-height: 30px; }
.logo-item svg text { font-family: 'Syne', sans-serif; font-weight: 700; fill: #b0b8c8; transition: fill 160ms var(--ease-out); letter-spacing: -0.02em; }

/* ── CONTENT PAGE LAYOUT ── */
.content-section { padding: var(--section-v) var(--pad-xl); }
.content-section--off { background: var(--off); }
.content-section--dark { background: var(--text); }
.content-narrow { max-width: 760px; }
.content-wide { max-width: 1100px; margin: 0 auto; }

/* Rich text content (page body) */
.prose h2 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; margin: 2rem 0 0.75rem; }
.prose h3 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
.prose p { margin-bottom: 1rem; line-height: 1.75; }
.prose ul, .prose ol { margin: 0.75rem 0 1rem 1.5rem; }
.prose li { margin-bottom: 0.35rem; line-height: 1.7; }
.prose strong { font-weight: 600; }
.prose a { color: var(--blue); text-decoration: underline; }
.prose blockquote {
  border-left: 3px solid var(--blue);
  padding-left: 20px;
  margin: 1.5rem 0;
  color: var(--muted);
  font-style: italic;
}

/* Pull quote */
.pull-quote {
  border-left: 4px solid var(--blue);
  padding: 16px 24px;
  margin: 32px 0;
  background: var(--blue-light);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--text);
}

/* Stats bar */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2px;
  background: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 40px 0;
}
.stat-item {
  background: white;
  padding: 28px 24px;
  text-align: center;
}
.stat-number {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--blue);
  letter-spacing: -0.03em;
  line-height: 1;
  display: block;
}
.stat-label {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 4px;
  display: block;
}

/* Image grid */
.image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 32px 0;
}
.image-grid img { border-radius: var(--radius-lg); width: 100%; height: 280px; object-fit: cover; }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 24px;
}
.breadcrumb a { color: var(--blue); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--border); }

/* ── FORM STYLES ── */
.form-field { margin-bottom: 20px; }
.form-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.form-field label .req { color: var(--blue); }
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--text);
  background: white;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,87,168,0.1);
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-message {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  margin-bottom: 20px;
}
.form-message.success { background: #e8f8f0; border: 1px solid #6fcf97; color: #166534; }
.form-message.error   { background: #fff0f0; border: 1px solid #fca5a5; color: #991b1b; }

/* ── CARD ── */
.card {
  background: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.card-img { width: 100%; height: 220px; object-fit: cover; background: var(--off); display: block; }
.card-img-placeholder { width: 100%; height: 220px; background: linear-gradient(135deg, var(--blue-light), var(--blue)); display: flex; align-items: center; justify-content: center; }
.card-body { padding: 24px; }
.card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.card-badge.casestudy { background: var(--blue-light); color: var(--blue); }
.card-badge.inzicht   { background: #e6f4f1; color: var(--teal); }
.card-badge.uitgelicht { background: var(--blue); color: white; }
.card-meta { font-size: 0.78rem; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card h3 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; margin-bottom: 8px; line-height: 1.3; }
.card p { font-size: 0.87rem; color: var(--muted); line-height: 1.6; }
.card-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-size: 0.85rem; font-weight: 600; text-decoration: none; margin-top: 16px; }
.card-cta:hover { gap: 10px; }

/* Featured card */
.card-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: box-shadow .2s;
}
.card-featured:hover { box-shadow: var(--shadow-lg); }
.card-featured-img { height: 100%; min-height: 340px; object-fit: cover; background: var(--off); display: block; width: 100%; }
.card-featured-body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.card-featured-body h2 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 12px; line-height: 1.25; }
.card-featured-body p { font-size: 0.92rem; color: var(--muted); line-height: 1.7; margin-bottom: 24px; }

/* ── GRID LAYOUTS ── */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }

/* Sticky chapter nav (Panelen page) — canonical block lives in Tag Cloud section below */

/* ── ANIMATIONS ── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(10px) scale(0.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes marquee  { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes howStepIn {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* @starting-style: CSS-only entry for hero text on first paint (Chrome 117+, Safari 17.5+).
   Browsers that don't support @starting-style fall back to the animation declarations above. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: auto) or (starting-style: auto) {
    @starting-style {
      .hero-title { opacity: 0; transform: translateY(10px) scale(0.97); }
      .hero-sub   { opacity: 0; transform: translateY(10px) scale(0.97); }
      .hero-actions { opacity: 0; transform: translateY(10px) scale(0.97); }
    }
  }
}

@media (min-width: 1280px) {
  .hero-content { max-width: min(820px, 52vw); }
}

@media (min-width: 1440px) {
  .elk-section { padding-left: clamp(80px, 10vw, 160px); padding-right: clamp(80px, 10vw, 160px); }
}

/* ── RESPONSIVE — mobile first adjustments ── */
@media (max-width: 767px) {
  :root { --pad-xl: 24px; --pad-lg: 20px; --section-v: 60px; }

  /* Nav — mobile layout: logo left, hamburger right */
  .nav-links, .nav-cta, .lang-dropdown { display: none; }
  .nav-hamburger { display: flex; }

  /* Hero */
  .hero-content { padding: 100px 24px 60px; max-width: 100%; }
  .hero-title { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .hero-sub { font-size: 0.95rem; max-width: 100%; }
  .hero-scroll { display: none; }
  .hero-deco { left: 0; right: 0; }
  .hero-media-badge { left: 24px; right: 24px; bottom: 14px; font-size: 0.74rem; }
  .btn-primary, .btn-ghost { width: 100%; justify-content: center; font-size: 0.92rem; }
  .hero-actions { flex-direction: column; width: 100%; }

  /* Stats strip — stack vertically on mobile */
  .stats-strip { grid-template-columns: 1fr; margin-top: -48px; border-radius: 50% 50% 0 0 / 48px 48px 0 0; padding-top: 48px; }
  .stats-strip .stat { padding: 28px 24px; }
  .stats-strip .stat strong { font-size: clamp(2.4rem, 10vw, 3rem); }

  /* Sections */
  .how-section { padding: 32px 14px; }
  .how-blob { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 94%, 50% 100%, 0 94%); overflow: visible; padding: 56px 20px 80px; }
  .how-steps { grid-template-columns: 1fr; gap: 44px; }
  .how-steps::before { display: none; }
  .step-blob { max-width: 210px; margin-left: auto; margin-right: auto; }
  .elk-section { padding: 60px 24px; gap: 64px; }
  .elk-row, .elk-row--reverse { grid-template-columns: 1fr; gap: 36px; }
  .elk-row .elk-img { order: -1; }
  .elk-row--reverse .elk-img { order: -1; }
  .elk-img { aspect-ratio: 4 / 3; max-width: 240px; margin: 0 auto; max-height: none; }
  .elk-text p { max-width: 100%; }
  .clients-intro { flex-direction: column; align-items: flex-start; gap: 14px; }
  .client-count { text-align: left; font-size: 3rem; }
  .logo-item { flex: 0 0 140px; height: 64px; padding: 0 16px; }
  .logo-item svg { max-height: 22px; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-pefc { justify-content: center; }
  .page-home .cta-band { padding-top: calc(48px + 56px); margin-top: -48px; }
  .page-close { height: 48px; border-radius: 0 0 50% 50% / 0 0 48px 48px; }
  .btn-white { width: 100%; justify-content: center; }
  .cta-band-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .cta-band-actions .btn-glass,
  .cta-band-actions .btn-ghost { justify-content: center; }

  /* Layouts */
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .card-featured { grid-template-columns: 1fr; }
  .card-featured-img { min-height: 220px; }
  .stats-bar { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .image-grid { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root { --pad-xl: 48px; --section-v: 72px; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .card-featured { grid-template-columns: 1fr; }
  .card-featured-img { min-height: 260px; }
  .step-blob { max-width: 220px; }
  .hero-content { padding: 110px 48px 80px; max-width: 72%; }
}

/* ── LEGAL PAGES ── */
.legal-hero-image { width: 100%; max-height: 420px; overflow: hidden; }
.legal-hero-image img { width: 100%; height: 420px; object-fit: cover; display: block; }
@media (max-width: 767px) {
  .legal-hero-image img { height: 220px; }
}
.legal-page { padding: var(--pad-lg) var(--pad-xl); max-width: 800px; }
.page-last-updated { font-size: 0.78rem; color: var(--muted); margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border); }
.legal-page h2 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.2rem; margin: 2rem 0 0.75rem; }
.legal-page p { margin-bottom: 1rem; line-height: 1.75; color: var(--muted); }
.legal-page ul { margin: 0.5rem 0 1rem 1.5rem; }
.legal-page li { margin-bottom: 0.3rem; color: var(--muted); line-height: 1.7; }
.legal-page blockquote {
  margin: 1.25rem 0 1.75rem 0;
  padding: 14px 18px;
  background: rgba(27, 43, 107, 0.04);
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.6;
}
.legal-page blockquote p {
  margin-bottom: 0;
}
.legal-page blockquote strong {
  color: var(--blue);
}

/* ── ERROR PAGE ── */
@keyframes error-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes error-tag-pop {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes error-bg-drift {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(1.04); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.error-page {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px var(--pad-xl) var(--pad-xl);
  background: var(--off);
  overflow: hidden;
}

.error-404__bg-num {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(160px, 28vw, 360px);
  font-weight: 800;
  color: rgba(0, 87, 168, 0.06);
  letter-spacing: -0.05em;
  user-select: none;
  pointer-events: none;
  line-height: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  animation: error-bg-drift 20s ease-in-out infinite;
}

.error-404__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 580px;
  animation: error-fade-up 500ms var(--ease-out) both;
}

.error-404__tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(0, 87, 168, 0.08);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 24px;
  animation: error-tag-pop 400ms var(--ease-out) 100ms both;
}

.error-404__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 20px;
}

.error-404__sub {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 40px;
}

.error-404__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.error-404__actions .btn-outline {
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 120ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .error-404__actions .btn-outline:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 87, 168, 0.22);
  }
}

.error-404__links {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.87rem;
}

.error-404__links-label {
  color: var(--muted);
}

.error-404__links a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
  transition: color 160ms var(--ease-out), opacity 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .error-404__links a:hover { opacity: 0.65; }
}

.error-404__links span {
  color: var(--muted);
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .error-404__bg-num { animation: none; }
  .error-404__inner  { animation: none; }
  .error-404__tag    { animation: none; }
}

/* ========================================
   New 404 page — full-bleed hero crossroads
   ======================================== */
/* ── 404 Billboard — full viewport, hero photo, crossroads feel ─────────── */
.e404-page {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

.e404-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.35) saturate(0.75);
  transform: scale(1.04);   /* slight oversize so Ken Burns doesn't clip */
  animation: e404-slow-zoom 18s ease-in-out infinite alternate;
}
@keyframes e404-slow-zoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1.00); }
}

.e404-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Version-specific overlay tints */
.e404-page[data-version="1"] .e404-overlay {
  background: linear-gradient(155deg, rgba(0,40,90,0.78) 0%, rgba(0,10,30,0.55) 100%);
}
.e404-page[data-version="2"] .e404-overlay {
  background: linear-gradient(155deg, rgba(20,50,0,0.72) 0%, rgba(0,20,10,0.50) 100%);
}
.e404-page[data-version="3"] .e404-overlay {
  background: linear-gradient(155deg, rgba(60,20,0,0.72) 0%, rgba(10,0,20,0.50) 100%);
}

/* ── Giant background number ──────────────────────────────────────────── */
.e404-bg-num {
  position: absolute;
  right: -2vw;
  bottom: -4vh;
  font-family: var(--font-display);
  font-size: clamp(22rem, 34vw, 44rem);
  font-weight: 900;
  line-height: 0.85;
  color: rgba(255,255,255,0.04);
  letter-spacing: -0.08em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.e404-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 100dvh;
  padding: clamp(6rem, 14vh, 9rem) var(--pad-xl) clamp(3rem, 8vh, 5rem);
  max-width: min(100%, 1080px);
  margin: 0 auto;
  width: 100%;
}

.e404-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.50);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 2rem;
  animation: e404-fade-up 0.6s var(--ease-out) both;
}

.e404-headline {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.05em;
  line-height: 1.0;
  margin-bottom: 1.25rem;
  max-width: 18ch;
  animation: e404-fade-up 0.6s 0.08s var(--ease-out) both;
}

.e404-sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  max-width: 52ch;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
  animation: e404-fade-up 0.6s 0.16s var(--ease-out) both;
}

@keyframes e404-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Crossroads cards ─────────────────────────────────────────────────── */
.e404-cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  animation: e404-fade-up 0.6s 0.24s var(--ease-out) both;
}

.e404-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 20px 56px 20px 22px;
  text-decoration: none;
  color: var(--white);
  min-width: 220px;
  max-width: 300px;
  position: relative;
  transition: background 180ms ease, transform 160ms ease, border-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .e404-card:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-3px);
  }
}

.e404-card__label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.e404-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}
.e404-card__arrow {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.38);
  display: flex;
  align-items: center;
  transition: color 180ms ease, transform 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .e404-card:hover .e404-card__arrow {
    color: rgba(255, 255, 255, 0.75);
    transform: translateY(-50%) translateX(3px);
  }
}

/* ── Bottom Werco credit line ─────────────────────────────────────────── */
.e404-brand {
  position: absolute;
  bottom: clamp(1.5rem, 3vh, 2.5rem);
  left: var(--pad-xl);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .e404-bg       { animation: none; transform: scale(1); }
  .e404-tag,
  .e404-headline,
  .e404-sub,
  .e404-cards    { animation: none; }
}

@media (max-width: 767px) {
  .e404-inner    { align-items: center; text-align: center; padding-bottom: 5rem; }
  .e404-headline { font-size: clamp(2rem, 8vw, 3rem); max-width: 100%; }
  .e404-cards    { flex-direction: column; align-items: stretch; }
  .e404-card     { min-width: auto; max-width: 100%; }
  .e404-bg-num   { display: none; }
  .e404-brand    { left: 50%; transform: translateX(-50%); }
}

/* ========================================
   Accessibility — Skip Link
   ======================================== */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  background: var(--blue);
  color: var(--white);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 16px;
}

/* ========================================
   Accessibility — Focus Indicators
   ======================================== */
:focus-visible {
  outline: 2px solid rgba(0, 87, 168, 0.4);
  outline-offset: 2px;
}

/* Remove default outline only where custom focus is applied */
.nav-links a:focus-visible,
.lang-opt:focus-visible,
.nav-cta:focus-visible,
.nav-cta-mobile:focus-visible,
.nav-hamburger:focus-visible,
.btn-primary:focus-visible,
.btn-glass:focus-visible,
.btn-ghost:focus-visible,
.btn-white:focus-visible,
.btn-outline:focus-visible,
.footer-links a:focus-visible,
.footer-contact a:focus-visible,
.footer-logo:focus-visible {
  outline: 2px solid rgba(0, 87, 168, 0.4);
  outline-offset: 2px;
}
/* btn-glass lives on dark backgrounds — white ring is more visible */
.btn-glass:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* ========================================
   Accessibility — Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee-track {
    animation: none;
  }
}

/* ========================================
   Page Hero — Inner Pages (UX-DR6)
   ======================================== */
.page-hero {
  background:
    radial-gradient(ellipse at 15% 65%, rgba(0, 87, 168, 0.95) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(0, 45, 100, 0.80) 0%, transparent 50%),
    #050e1c;
  padding: 120px var(--pad-xl) 80px;
  position: relative;
  overflow: hidden;
  color: var(--white);
}

/* Decorative circles via pseudo-elements */
.page-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -80px;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: -120px;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.page-hero__circles {
  position: absolute;
  top: 20px;
  right: 180px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

/* Breadcrumb */
.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 20px;
}
.page-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.page-hero__breadcrumb a:hover {
  color: var(--white);
}
.page-hero__breadcrumb-sep {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.9rem;
}

/* Section label override for blue hero background */
/* .job-hero rides along: it is the same idea — a label on a darkened photo —
   and duplicating the two declarations would be two places to drift. */
.page-hero .section-label,
.job-hero .section-label {
  color: rgba(255, 255, 255, 0.75);
}
.page-hero .section-label::before,
.job-hero .section-label::before {
  background: rgba(255, 255, 255, 0.5);
}

/* H1 */
.page-hero h1 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  letter-spacing: -0.04em;
  line-height: 1.04;
  color: var(--white);
  margin-bottom: 16px;
}

/* Optional subline */
.page-hero__sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
  line-height: 1.7;
  max-width: 540px;
}

/* Responsive */
@media (max-width: 767px) {
  .page-hero {
    padding: 96px var(--pad-xl) 56px;
  }
  .page-hero h1 {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }
  .page-hero__sub {
    font-size: 0.95rem;
  }
}

/* ========================================
   Cookie Consent Banner
   ======================================== */
.consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: var(--blue-dark);
  padding: var(--pad-md) var(--pad-lg);
  box-shadow: 0 -4px 24px var(--consent-shadow);
}
.consent-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--pad-md);
  flex-wrap: wrap;
}
.consent-banner__text {
  color: var(--white);
  font-size: 0.875rem;
  line-height: 1.5;
  flex: 1;
  min-width: 280px;
  margin: 0;
}
.consent-banner__link {
  color: var(--white);
  text-decoration: underline;
}
.consent-banner__link:hover { opacity: 0.8; }
.consent-banner__buttons {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.consent-banner__accept {
  background: var(--white);
  color: var(--blue-dark);
  border: none;
  padding: 10px 24px;
  border-radius: var(--radius-md);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.consent-banner__accept:hover { opacity: 0.88; }
.consent-banner__settings-btn {
  background: transparent;
  color: var(--white);
  border: 1.5px solid var(--white);
  padding: 10px 24px;
  border-radius: var(--radius-md);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}
.consent-banner__settings-btn:hover { background: var(--consent-hover-bg); }
.consent-banner__accept:focus-visible,
.consent-banner__settings-btn:focus-visible,
.consent-settings__save:focus-visible {
  outline: 2px solid var(--consent-focus-ring);
  outline-offset: 2px;
}

/* Settings panel */
.consent-settings {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid var(--consent-border);
  margin-top: var(--pad-sm);
  padding-top: var(--pad-sm);
}
.consent-settings__grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: var(--pad-sm);
}
.consent-settings__save {
  background: var(--white);
  color: var(--blue-dark);
  border: none;
  padding: 10px 24px;
  border-radius: var(--radius-md);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.consent-settings__save:hover { opacity: 0.88; }

/* Toggle row */
.consent-toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  color: var(--white);
}
.consent-toggle__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.consent-toggle__label {
  font-size: 0.875rem;
  font-weight: 600;
}
.consent-toggle__desc {
  font-size: 0.78rem;
  opacity: 0.75;
}

/* Toggle switch */
.consent-toggle__switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}
.consent-toggle__switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.consent-toggle__slider {
  display: inline-block;
  width: 44px;
  height: 24px;
  background: var(--consent-toggle-off);
  border-radius: 12px;
  position: relative;
  transition: background 0.2s ease;
}
.consent-toggle__slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--white);
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.consent-toggle__switch input:checked + .consent-toggle__slider {
  background: var(--blue);
}
.consent-toggle__switch input:checked + .consent-toggle__slider::after {
  transform: translateX(20px);
}
.consent-toggle__switch input:disabled + .consent-toggle__slider {
  opacity: 0.5;
  cursor: not-allowed;
}
.consent-toggle__switch:focus-within .consent-toggle__slider {
  outline: 2px solid var(--consent-focus-ring);
  outline-offset: 2px;
}

/* Hidden state */
.is-hidden { display: none !important; }
.consent-form { display: none; }

/* Responsive */
@media (max-width: 767px) {
  .consent-banner__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .consent-banner__buttons {
    flex-direction: column;
  }
  .consent-banner__accept,
  .consent-banner__settings-btn {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent-banner__accept,
  .consent-banner__settings-btn,
  .consent-settings__save,
  .consent-toggle__slider,
  .consent-toggle__slider::after {
    transition: none;
  }
}

/* ========================================
   Page intro strip — Panelen / Decors
   Dark band between page-hero and tag cloud
   ======================================== */
.page-intro-strip {
  background: var(--text);
  padding: 36px var(--pad-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.page-intro-strip__text {
  color: rgba(255, 255, 255, 0.70);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.75;
  max-width: 680px;
}

@media (max-width: 767px) {
  .page-intro-strip { padding: 28px var(--pad-xl); }
  .page-intro-strip__text { font-size: 0.95rem; }
}

/* ========================================
   Tag Cloud — Panelen / Decors
   ======================================== */
.panelen-public,
.decors-public {
  padding: 60px 24px;
  background: var(--white);
}

@media (min-width: 768px) {
  .panelen-public,
  .decors-public { padding: 60px 48px; }
}

@media (min-width: 1024px) {
  .panelen-public,
  .decors-public { padding: 80px 80px; }
}

.tag-section {
  margin-bottom: 48px;
}

.tag-section__title {
  font: 700 1.125rem/1.2 var(--font-display);
  color: var(--text);
  margin-bottom: 16px;
}

.tag-cloud {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-cloud__pill {
  display: inline-block;
  padding: 6px 16px;
  border: 1.5px solid var(--blue);
  border-radius: 999px;
  font: 400 0.875rem/1.4 var(--font-body);
  color: var(--blue);
  cursor: default;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .tag-cloud__pill:hover {
    background: var(--blue);
    color: var(--white);
  }
}

/* ========================================
   Chapter Nav — Panelen / Decors
   ======================================== */
.chapter-nav {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  position: relative;
  z-index: 90;
}

.chapter-nav.is-sticky {
  position: sticky;
  top: 60px; /* clear floating nav height */
  box-shadow: 0 1px 12px rgba(0,0,0,0.06);
  transition: box-shadow 200ms var(--ease-out);
}

.chapter-nav__inner {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE */
}

.chapter-nav__inner::-webkit-scrollbar { display: none; }

.chapter-nav__link {
  flex: 0 0 auto;
  padding: 14px 20px;
  font: 500 0.875rem/1 var(--font-body);
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .chapter-nav__link:hover {
    color: var(--blue);
    border-bottom-color: var(--blue);
  }
}

.chapter-nav__link.is-active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

@media (min-width: 768px) {
  .chapter-nav { padding: 0 48px; }
}

@media (min-width: 1024px) {
  .chapter-nav { padding: 0 80px; }
}

/* ========================================
   Gate Form Section
   ======================================== */
.gate-section {
  background: var(--blue-light);
  padding: 60px 24px;
}

@media (min-width: 768px) {
  .gate-section { padding: 60px 48px; }
}

@media (min-width: 1024px) {
  .gate-section { padding: 80px 80px; }
}

.gate-section__inner {
  max-width: 560px;
}

.gate-section__title {
  font: 700 1.75rem/1.2 var(--font-display);
  color: var(--text);
  margin-bottom: 12px;
}

@media (max-width: 767px) {
  .gate-section__title { font-size: 1.375rem; }
}

.gate-section__desc {
  color: var(--muted);
  margin-bottom: 32px;
  line-height: 1.7;
}

/* Gate form — fields */
.gate-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 480px) {
  .gate-form__row { grid-template-columns: 1fr; }
}

.gate-form__field {
  margin-bottom: 16px;
}

.gate-form__label {
  display: block;
  font: 400 0.875rem/1.4 var(--font-body);
  color: var(--text);
  margin-bottom: 6px;
}

.gate-form__required {
  color: var(--muted);
  margin-left: 2px;
}

.gate-form__optional {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.8125rem;
  margin-left: 6px;
}

.gate-form__input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font: 400 1rem/1.4 var(--font-body);  /* 16px prevents iOS zoom */
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  outline: none;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  min-height: 48px; /* 48px touch target */
  box-sizing: border-box;
}

.gate-form__input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 87, 168, 0.15);
}

.has-error .gate-form__input {
  border-color: #D32F2F;
}

.has-error .gate-form__input:focus {
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.15);
}

.gate-form__error {
  display: block;
  font: 400 0.8125rem/1.4 var(--font-body);
  color: #D32F2F;
  margin-top: 4px;
  min-height: 1.2em; /* prevent layout shift */
}

.gate-form__error {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gate-form__error:empty { display: none; }

.gate-form__error-icon {
  display: none;
  flex-shrink: 0;
  color: #D32F2F;
}

.has-error .gate-form__error-icon { display: inline-block; }

.gate-form__server-error {
  background: #fdecea;
  border: 1px solid #D32F2F;
  border-radius: 8px;
  padding: 12px 16px;
  color: #D32F2F;
  font: 400 0.875rem/1.4 var(--font-body);
  margin-bottom: 16px;
}

.gate-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  min-height: 48px;
  padding: 0 28px;
  font: 600 0.95rem/1 var(--font-body);
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 200ms ease, opacity 200ms ease;
}

.gate-form__submit:hover:not(:disabled) {
  background: var(--blue-dark);
}

.gate-form__submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Loading spinner */
.gate-form__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: gate-spin 0.6s linear infinite;
}

@keyframes gate-spin { to { transform: rotate(360deg); } }

/* ========================================
   Gated Content — Panelen / Decors
   ======================================== */
.panelen-gated,
.decors-gated {
  padding: 60px 24px;
  background: var(--off);
}

@media (min-width: 768px) {
  .panelen-gated,
  .decors-gated { padding: 60px 48px; }
}

@media (min-width: 1024px) {
  .panelen-gated,
  .decors-gated { padding: 80px 80px; }
}

.panelen-gated.is-gated,
.decors-gated.is-gated {
  display: none;
}

.gated-block {
  margin-bottom: 40px;
  max-width: 760px;
}

.gated-block__title {
  font: 700 1.25rem/1.2 var(--font-display);
  color: var(--text);
  margin-bottom: 12px;
}

.gated-block__body {
  color: var(--text);
  line-height: 1.7;
}

/* ========================================
   Industrial CTA — secondary contact path
   ======================================== */
.industrial-cta {
  padding: 40px 24px;
  background: var(--off);
  border-top: 1px solid var(--border);
  text-align: center;
}

@media (min-width: 768px) {
  .industrial-cta { padding: 40px 48px; }
}

.industrial-cta__inner {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

.industrial-cta__text {
  color: var(--muted);
  font-size: 1rem;
  margin: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gate-section,
  .panelen-gated,
  .decors-gated,
  .gate-form__input,
  .gate-form__submit,
  .chapter-nav,
  .chapter-nav.is-sticky,
  .chapter-nav__link,
  .tag-cloud__pill,
  .tag-section {
    transition: none !important;
    animation: none !important;
  }
}

/* ========================================
   Over Werco — Section 1+2: Contact + Info
   ======================================== */

.ow-contact {
  background: var(--white);
  padding: 72px var(--pad-xl) 0;
}
.ow-contact--no-hero {
  padding-top: 112px;
}
.ow-contact__header {
  max-width: 1200px;
  margin: 0 auto 2rem;
}
.ow-contact__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  letter-spacing: -0.04em;
  color: var(--text);
  margin: 0;
}
.ow-contact__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: start;
}

/* Sidebar */
.ow-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 2.5rem;
}
.ow-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.ow-action-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
  cursor: pointer;
  line-height: 1.2;
}
.ow-action-btn svg { flex-shrink: 0; }
.ow-action-btn__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ow-action-btn__label {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
}
.ow-action-btn__sep {
  display: none;
  opacity: 0.5;
  margin: 0 4px;
}
.ow-action-btn__sub {
  font-weight: 400;
  font-size: 0.8125rem;
  opacity: 0.82;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1024px) {
  .ow-action-btn__text { flex-direction: row; align-items: center; gap: 0; }
  .ow-action-btn__sep  { display: inline; }
  .ow-action-btn__sub  { font-size: 0.9375rem; }
}
@media (hover: hover) and (pointer: fine) {
  .ow-action-btn:hover { transform: translateY(-1px); }
}
.ow-action-btn:active { transform: var(--press); }
.ow-action-btn--call {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 2px 12px rgba(0, 87, 168, 0.28);
}
@media (hover: hover) and (pointer: fine) {
  .ow-action-btn--call:hover { box-shadow: 0 4px 20px rgba(0, 87, 168, 0.4); }
  .ow-action-btn--email:hover { border-color: var(--blue); }
}
.ow-action-btn--email {
  background: var(--white);
  color: var(--blue);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.ow-hours-status {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 1.25rem 3px 0;
  margin-top: -0.2rem;
  margin-bottom: 0.15rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
/* Pulsing dot for open status */
.ow-hours-status--open {
  color: #008778;
}
.ow-hours-status--open::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #008778;
  flex-shrink: 0;
  animation: ow-pulse 2s ease-in-out infinite;
}
@keyframes ow-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.75); }
}
.ow-hours-status--closed { color: var(--muted); }

/* Callback button — starts hidden, slides in smoothly when class is added */
.ow-action-btn--callback {
  border-color: var(--muted);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 220ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}
.ow-action-btn--callback.ow-callback-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ow-map {
  width: 100%;
  min-height: 240px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.ow-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
}
.ow-map-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.ow-map-nav {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ow-map-nav:hover { color: var(--blue); }
  .ow-map-nav:hover svg { transform: translateX(2px); }
}
.ow-map-nav svg { transition: transform 200ms var(--ease-out); }

/* Form wrap with organic blob decoration */
.ow-form-wrap {
  position: relative;
  padding: 0 0 28px 28px;
}
.ow-form-blob {
  position: absolute;
  inset: 0 28px 28px 0;
  background: var(--blue-light);
  border-radius: 71% 29% 47% 53% / 49% 61% 39% 51%;
  pointer-events: none;
  animation: ow-blob-morph 10s ease-in-out infinite;
}
@keyframes ow-blob-morph {
  0%, 100% { border-radius: 71% 29% 47% 53% / 49% 61% 39% 51%; }
  33%       { border-radius: 42% 58% 65% 35% / 63% 37% 53% 47%; }
  66%       { border-radius: 55% 45% 31% 69% / 38% 72% 28% 62%; }
}
@media (prefers-reduced-motion: reduce) {
  .ow-form-blob { animation: none; }
}
.ow-form-card {
  position: relative;
  padding: 2.25rem 2.5rem;
}
.ow-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Info strip — 3 semantic groups */
.ow-info {
  padding: 3.5rem var(--pad-xl) 80px;
  margin-top: 3rem;
  border-top: 1px solid var(--border);
}
.ow-info__groups {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.ow-info__group {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0 2.5rem 0 0;
}
.ow-info__group:nth-child(n+2) {
  padding-left: 2.5rem;
  border-left: 1px solid var(--border);
}
.ow-info__group-title {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 0.25rem;
}
.ow-info__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
}
.ow-info__label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}
.ow-info__value {
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.55;
  user-select: all;
}
.ow-info__address { font-style: normal; }
.ow-info__link {
  color: var(--text);
  text-decoration: none;
  transition: color 150ms ease;
}
.ow-info__link:hover { color: var(--blue); }
.ow-copy-btn {
  position: absolute;
  top: 0;
  right: 0.25rem;
  opacity: 0;
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--muted);
  border-radius: 4px;
  transition: opacity 150ms var(--ease-out), color 150ms var(--ease-out), background 150ms var(--ease-out);
  line-height: 0;
  display: flex;
  align-items: center;
}
@media (hover: hover) and (pointer: fine) {
  .ow-copy-btn:hover { color: var(--blue); background: var(--blue-light); }
  .ow-info__item--copy:hover .ow-copy-btn { opacity: 1; }
}
.ow-copy-btn.is-copied {
  color: var(--teal, #1a7a5a);
  opacity: 1;
  transition: color 180ms var(--ease-out), opacity 180ms var(--ease-out);
}

/* ========================================
   Over Werco — Section 3: About
   Dark background = visual separator
   ======================================== */

.ow-about {
  background: #dce8f7;
  border-radius: 48% 52% 0 0 / 8% 8% 0 0;
  overflow: hidden;
  padding: calc(100px + 4vw) var(--pad-xl) 100px;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 48px rgba(0, 87, 168, 0.12), 0 2px 12px rgba(0, 87, 168, 0.07);
}
.ow-about__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.ow-about__intro-label {
  text-align: center;
  margin-bottom: -40px;
}
.ow-about__lead {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.ow-about__lead .ow-about__intro-label {
  margin-bottom: 0;
}
.ow-about__lead-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.04em;
  color: var(--text);
  margin: 0.75rem 0 1rem;
  line-height: 1.15;
}
.ow-about__lead-body {
  font-size: 1.0625rem;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

/* Section label variant for dark backgrounds */
.section-label--light {
  color: var(--accent);
}
.section-label--light::before {
  background: var(--accent);
}

.ow-about__block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.ow-about__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.5vw, 2.25rem);
  letter-spacing: -0.035em;
  color: var(--text);
  margin: 0.75rem 0 1.25rem;
  line-height: 1.2;
}
.ow-about__body {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.75;
}
.ow-about__body p + p { margin-top: 0.875rem; }
.ow-about__photo img:not(.ow-pefc-badge) {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 44% 56% 60% 40% / 38% 52% 48% 62%;
  display: block;
  transition: transform 500ms var(--ease-out);
}
.ow-about__photo:hover img:not(.ow-pefc-badge) {
  transform: scale(1.035);
}
.ow-about__block:nth-child(even) .ow-about__photo img:not(.ow-pefc-badge) {
  border-radius: 56% 44% 38% 62% / 52% 38% 62% 48%;
}
/* Same blob motion as .elk-img in the "oplossingen" section. */
@media (prefers-reduced-motion: no-preference) {
  .ow-about__photo img:not(.ow-pefc-badge) {
    transition:
      transform 500ms var(--ease-out),
      border-radius 600ms var(--ease-out);
  }
}
@media (hover: hover) and (pointer: fine) {
  .ow-about__photo:hover img:not(.ow-pefc-badge) {
    border-radius: 50% 50% 50% 50% / 46% 50% 50% 54%;
  }
  .ow-about__block:nth-child(even) .ow-about__photo:hover img:not(.ow-pefc-badge) {
    border-radius: 50% 50% 50% 50% / 52% 46% 54% 48%;
  }
}
.ow-about__photo--pefc {
  position: relative;
}
.ow-about__photo--pefc .ow-pefc-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: auto;
  margin: 0;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  pointer-events: none;
  drop-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.ow-about__photo-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0, 87, 168, 0.25), rgba(0, 87, 168, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Contacts grid */
.ow-contacts {
  padding-top: 8px;
}
.ow-contacts__label { justify-content: center; }
.ow-contacts__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  letter-spacing: -0.035em;
  color: var(--text);
  margin: 0.75rem 0 2.5rem;
  text-align: center;
  line-height: 1.2;
}
.ow-contacts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.ow-contact-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ow-contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
}
.ow-contact-card:active {
  transform: scale(0.97);
  transition: transform 160ms ease-out;
}
.ow-contact-card__photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 400ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ow-contact-card:hover .ow-contact-card__photo {
    transform: scale(1.04);
  }
}
.ow-contact-card__photo-placeholder {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: linear-gradient(135deg, rgba(0, 87, 168, 0.25), rgba(0, 87, 168, 0.08));
}
.ow-contact-card__info {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.ow-contact-card__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.125rem;
}
/* A contact card standing for an open seat: the title links to the vacancy.
   Same type as a person's name, plus the shared arrow and a hover shift. */
.ow-contact-card__name--link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--blue);
}
.ow-contact-card__name--link svg { flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ow-contact-card__name--link svg { transition: transform 200ms var(--ease-out); }
}
@media (hover: hover) and (pointer: fine) {
  .ow-contact-card__name--link:hover { color: var(--blue-dark); }
  .ow-contact-card__name--link:hover svg { transform: translateX(3px); }
}
.ow-contact-card__role {
  font-size: 0.8125rem;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.625rem;
}
.ow-contact-card__link {
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 150ms var(--ease-out);
}
.ow-contact-card__link:hover { color: var(--blue); }

/* CEO Video */
.ow-video-block {
  text-align: center;
  padding-top: 8px;
}
.ow-video-block__label { justify-content: center; }
.ow-video-block__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2vw, 1.875rem);
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0.75rem 0 2rem;
}
.ow-video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 860px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.45);
}
.ow-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ========================================
   Over Werco — Jobs CTA band
   ======================================== */

.ow-jobs-cta {
  background: var(--blue);
  padding: 80px var(--pad-xl);
  text-align: center;
}
.ow-jobs-cta__inner {
  max-width: 680px;
  margin: 0 auto;
}
.ow-jobs-cta__inner .section-label--light { justify-content: center; }
.ow-jobs-cta__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.04em;
  color: var(--white);
  margin: 0.75rem 0 1rem;
  line-height: 1.15;
}
.ow-jobs-cta__sub {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* ========================================
   Responsive — Over Werco
   ======================================== */

@media (max-width: 1023px) {
  .ow-contact { padding: 60px var(--pad-lg) 0; }
  .ow-contact--no-hero { padding-top: 120px; }
  .ow-contact__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ow-info { padding: 2rem var(--pad-lg) 60px; }
  .ow-about { border-radius: 40% 60% 0 0 / 6% 6% 0 0; padding: 96px var(--pad-lg) 72px; }
  .ow-about__block { grid-template-columns: 1fr; gap: 2.5rem; }
  .ow-about__inner { gap: 56px; }
  .ow-about__intro-label { margin-bottom: -28px; }
  .ow-contacts__grid { grid-template-columns: 1fr 1fr; }
  .ow-jobs-cta { padding: 64px var(--pad-lg); }
}
@media (max-width: 767px) {
  .ow-contact { padding: 48px var(--pad-md) 0; }
  .ow-contact--no-hero { padding-top: 100px; }
  .ow-info { padding: 1.75rem var(--pad-md) 48px; }
  .ow-info__groups { grid-template-columns: 1fr; gap: 2rem; }
  .ow-info__group { padding: 0 !important; border-left: none !important; }
  .ow-form-row { grid-template-columns: 1fr; }
  .ow-form-card { padding: 1.75rem 1.5rem; }
  .ow-form-wrap { padding: 0 0 16px 16px; }
  .ow-form-blob { inset: 0 16px 16px 0; }
  .ow-about { border-radius: 30% 70% 0 0 / 5% 5% 0 0; padding: 72px var(--pad-md) 56px; }
  .ow-about__inner { gap: 40px; }
  .ow-about__photo { order: -1; }
  .ow-about__photo img:not(.ow-pefc-badge) { max-width: 240px; margin: 0 auto; aspect-ratio: 4/3; }
  .ow-contacts__grid { grid-template-columns: 1fr; }
  .ow-jobs-cta { padding: 56px var(--pad-md); }
}

/* ========================================
   Contact Form
   ======================================== */

.contact-form__success {
  border-left: 4px solid var(--teal);
  background: #e6f5f3;
  padding: 1.25rem 1.5rem;
  border-radius: 0 8px 8px 0;
  margin-bottom: 1.5rem;
  font-family: var(--font-body);
  color: var(--text);
}
.contact-form__error {
  background: #fce8e8;
  border: 1px solid #D32F2F;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  font-family: var(--font-body);
  color: #D32F2F;
  font-size: 0.9375rem;
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 1rem;
}
.contact-form__field--consent {
  margin-top: 0.5rem;
}
.contact-form__consent-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
}
/* Hide native checkbox */
.contact-form__consent-check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* Custom checkbox box */
.contact-form__consent-label::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--white);
  transition: border-color 150ms ease, background 150ms ease;
  margin-top: 1px;
}
/* Checked state with satisfying scale-bounce */
.contact-form__consent-label:has(.contact-form__consent-check:checked)::before {
  background: var(--blue);
  border-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L4.5 7.5L11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  animation: ow-check-bounce 280ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes ow-check-bounce {
  0%   { transform: scale(0.7); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
/* Focus ring */
.contact-form__consent-label:has(.contact-form__consent-check:focus-visible)::before {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
/* Error state */
.contact-form__field--error .contact-form__consent-label::before {
  border-color: #D32F2F;
}
.contact-form__label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
}
.contact-form__required {
  color: var(--muted);
  margin-left: 2px;
}
.contact-form__optional {
  font-weight: 400;
  color: var(--muted);
  margin-left: 6px;
  font-size: 0.875rem;
}
.contact-form__input {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 16px;
  height: 48px;
  outline: none;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  width: 100%;
}
.contact-form__input:focus {
  border-color: var(--werco-blue);
  box-shadow: 0 0 0 3px rgba(0, 87, 168, 0.15);
}
.contact-form__input.is-invalid {
  border-color: #D32F2F;
}
.contact-form__input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.15);
}
.contact-form__textarea {
  height: auto;
  padding: 14px 16px;
  resize: vertical;
  min-height: 140px;
}
.contact-form__error-msg {
  font-size: 0.875rem;
  color: #D32F2F;
  min-height: 1.2em;
}
.contact-form__error-msg:not(:empty)::before {
  content: '! ';
  font-weight: 700;
}
.contact-form__submit {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.contact-form__submit:active {
  transform: scale(0.97);
  transition: transform 160ms ease-out;
}
.contact-form__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.contact-form__spinner:not([hidden]) {
  opacity: 1;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========================================
   Scroll Entrance Animations
   ======================================== */

@media (prefers-reduced-motion: no-preference) {
  .fade-in-up {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  .fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}



/* ═══════════════════════════════════════════════════════════════════
   INTAKE SPLIT-SCREEN LAYOUT
   Shared by stuur-je-tekening (v2) and start-jouw-project.
   All classes use the .intake- prefix.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Server error banner — shared by both intake forms ── */
.intake-server-error {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  color: #c0392b;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* ── Outer split container ── */
.intake-split {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

/* ── Left panel — sticky brand story ── */
.intake-split__left {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

/* ── Right panel — scrollable wizard ── */
.intake-split__right {
  flex-grow: 1;
  max-width: 660px;
  background: var(--white);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Panel inner wrapper ── */
.intake-panel {
  position: relative;
  height: 100%;
  background: var(--text);
  overflow: hidden;
}

/* ── Hero background image ── */
.intake-panel__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Dark overlay over image ── */
.intake-panel__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}

/* ── Content layer (above image + overlay) ── */
.intake-panel__content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 3.5rem 2.5rem;
  overflow-y: auto;
}

/* ── Left panel headline ── */
.intake-panel__headline {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--white);
  margin: 0;
}

/* ── Process steps list ── */
.intake-panel__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  counter-reset: intake-step;
}

.intake-panel__step {
  counter-increment: intake-step;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
}

.intake-panel__step::before {
  content: counter(intake-step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1.45;
}

/* ── Quote block ── */
.intake-panel__quote {
  margin: 0;
  padding-left: 1rem;
  border-left: 3px solid var(--blue);
}

.intake-panel__quote p {
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 0 0 0.5rem;
}

.intake-panel__quote-author {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  font-style: normal;
}

/* ── Trust signals list ── */
.intake-panel__trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

.intake-panel__trust li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
}

.intake-panel__trust li::before {
  content: '\2713'; /* ✓ */
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Wizard container (right side) ── */
.intake-wizard {
  max-width: 560px;
  margin: 0 auto;
  padding: 3rem 2rem;
  width: 100%;
}

/* ── Step progress indicator ── */
.intake-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2.25rem;
}

.intake-progress__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  background: transparent;
  flex-shrink: 0;
  transition:
    background-color 280ms var(--ease-out),
    border-color 280ms var(--ease-out),
    transform 280ms var(--ease-out),
    opacity 280ms var(--ease-out);
}

.intake-progress__dot.is-active {
  background-color: var(--blue);
  transform: scale(1.3);
}

.intake-progress__dot.is-done {
  background-color: var(--blue);
  border-color: var(--blue);
  transform: scale(1);
  opacity: 0.65;
}

.intake-progress__line {
  flex-grow: 1;
  height: 1.5px;
  background: var(--border);
  border-radius: 1px;
  transition: background-color 300ms var(--ease-out);
}

.intake-progress__dot.is-done + .intake-progress__line {
  background: var(--blue);
  opacity: 0.5;
}

/* ── Step sections ── */
.intake-step {
  display: none;
}

.intake-step.is-active {
  display: block;
  animation: intake-step-in 360ms var(--ease-out) both;
}

@keyframes intake-step-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intake-step.is-active {
    animation: none;
  }
}

.intake-step__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
}

/* ── Two-column field row (naam + bedrijf) ── */
.intake-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ── Individual field wrapper ── */
.intake-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.intake-field--file {
  margin-bottom: 1.25rem;
}

/* ── Label ── */
.intake-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  display: block;
}

.intake-required {
  color: var(--blue);
  margin-left: 2px;
}

.intake-optional {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.85rem;
  margin-left: 4px;
}

/* ── Input + textarea ── */
.intake-input {
  width: 100%;
  padding: 0.65rem 0.2rem;
  border: none;
  border-bottom: 1.5px solid var(--border);
  border-radius: 0;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--white);
  transition:
    border-color 130ms var(--ease-out),
    box-shadow 130ms var(--ease-out);
  box-sizing: border-box;
  appearance: none;
}

.intake-input:focus {
  outline: none;
  border-bottom-color: var(--blue);
  box-shadow: 0 1px 0 0 var(--blue);
}

.intake-input.is-invalid {
  border-bottom-color: var(--error, #c0392b);
  box-shadow: 0 1px 0 0 var(--error, #c0392b);
}

.intake-textarea {
  resize: vertical;
  min-height: 120px;
}

/* ── Inline error message ── */
.intake-error {
  font-size: 0.8rem;
  color: var(--error, #c0392b);
  min-height: 1.1em;
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 200ms var(--ease-out),
    opacity 180ms var(--ease-out);
}

.intake-error:not(:empty) {
  max-height: 3em;
  opacity: 1;
}

/* ── Multi-file dropzone ── */
.intake-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 2.5rem 1.5rem;
  min-height: 160px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  transition:
    border-color 200ms var(--ease-out),
    background-color 200ms var(--ease-out);
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .intake-dropzone:hover {
    border-color: var(--blue);
    background-color: var(--blue-light, rgba(0, 91, 164, 0.04));
  }
}
.intake-dropzone.is-dragover {
  border-color: var(--blue);
  background-color: var(--blue-light, rgba(0, 91, 164, 0.04));
}

.intake-dropzone__icon {
  font-size: 2rem;
  color: var(--blue);
  line-height: 1;
}

.intake-dropzone__main-text {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}

.intake-dropzone__sub-text {
  font-size: 0.85rem;
  color: var(--muted);
}

/* Visually-hidden file input inside dropzone */
.intake-dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  pointer-events: none;
}

.intake-dropzone__hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

/* ── File thumbnail grid ── */
.intake-dropzone__thumbnails {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-top: 0.75rem;
  width: 100%;
}

.intake-dropzone__thumbnails:empty {
  display: none;
}

/* Individual thumbnail */
.intake-dropzone__thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: intake-thumb-in 280ms var(--ease-out) both;
}

@keyframes intake-thumb-in {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.intake-dropzone__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Icon placeholder for non-image files */
.intake-dropzone__thumb-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--muted);
  text-align: center;
  padding: 0.25rem;
  word-break: break-all;
  gap: 0.15rem;
  line-height: 1.3;
}

.intake-dropzone__thumb-icon-glyph {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--blue);
}

/* Remove (×) button overlay */
.intake-dropzone__thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text);
  color: var(--white);
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 150ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .intake-dropzone__thumb-remove:hover {
    opacity: 1;
  }
}

/* Upload progress bar per file */
.intake-dropzone__thumb-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--blue);
  transform-origin: left center;
  animation: intake-progress-pulse 1.2s ease-in-out infinite;
}

@keyframes intake-progress-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.intake-dropzone__thumb-progress.is-done {
  display: none;
}

/* ── Submit row ── */
.intake-submit-row {
  margin-top: 1.5rem;
}

.intake-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
}

/* Text to spinner crossfade on submit */
.intake-submit-text {
  transition:
    opacity 180ms var(--ease-out),
    filter 180ms var(--ease-out);
}

.intake-submit-btn.is-loading .intake-submit-text {
  opacity: 0;
  filter: blur(2px);
}

.intake-submit-btn.is-loading .intake-spinner {
  opacity: 1;
}

.intake-submit-btn:active {
  transform: scale(0.97);
  transition: transform 160ms var(--ease-out);
}

.intake-submit-sub {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

/* Loading spinner on submit button */
.intake-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}

/* ── Success state ── */
.intake-success {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  background: var(--white);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--blue);
  margin-bottom: 1.5rem;
}

.intake-success__heading {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
}

.intake-success__body {
  font-size: 0.93rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  max-width: 340px;
}

.intake-success__cta {
  align-self: flex-start;
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .intake-split {
    flex-direction: column;
  }

  .intake-split__left {
    position: static;
    height: 260px;
    width: 100%;
  }

  /* On mobile: hide quote and steps to save vertical space */
  .intake-panel__steps,
  .intake-panel__quote {
    display: none;
  }

  .intake-panel__content {
    padding: 2rem 1.5rem;
    justify-content: flex-end;
    gap: 1rem;
  }

  .intake-panel__headline {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
  }

  .intake-panel__trust {
    margin-top: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
  }

  .intake-wizard {
    padding: 2rem 1.25rem;
  }

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

  .intake-dropzone__thumbnails {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .intake-split__left {
    width: 38%;
  }

  .intake-panel__content {
    padding: 2.5rem 2rem;
  }
}

/* ── Step guidance sub-text ── */
.intake-step__sub {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 1.75rem;
}

/* ── Step 3 success state ── */
.intake-step--success {
  display: none;
}

.intake-step--success.is-active {
  display: block;
}

.intake-success--step3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding: 3rem 2rem;
  background: var(--white);
  border-radius: var(--radius-md);
  border: none;
  border-left: none;
}

.intake-success__icon {
  color: var(--blue);
  line-height: 1;
}

.intake-success__checkmark {
  display: block;
}

.intake-success__check-path {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: intake-check-draw 480ms cubic-bezier(0.22, 1, 0.36, 1) 160ms forwards;
}

@keyframes intake-check-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .intake-success__check-path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.intake-success__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.25rem;
}

/* ── Blob-decorated form wrap (right panel) ── */
.intake-form-wrap {
  position: relative;
  padding: max(48px, 5vh) 40px max(48px, 5vh);
}

.intake-form-blob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 80%);
  height: min(500px, 62vh);
  background: var(--blue-light);
  border-radius: 71% 29% 47% 53% / 49% 61% 39% 51%;
  pointer-events: none;
  animation: intake-blob-morph 12s ease-in-out infinite;
  z-index: 0;
  opacity: 0.55;
  will-change: border-radius;
}

@keyframes intake-blob-morph {
  0%   { border-radius: 71% 29% 47% 53% / 49% 61% 39% 51%; }
  25%  { border-radius: 42% 58% 65% 35% / 63% 37% 53% 47%; }
  50%  { border-radius: 55% 45% 31% 69% / 38% 72% 28% 62%; }
  75%  { border-radius: 38% 62% 58% 42% / 57% 43% 67% 33%; }
  100% { border-radius: 71% 29% 47% 53% / 49% 61% 39% 51%; }
}

@media (prefers-reduced-motion: reduce) {
  .intake-form-blob,
  .intake-spinner,
  .intake-dropzone__thumb-progress,
  .intake-dropzone__thumb {
    animation: none;
  }

  .intake-step.is-active {
    animation: none;
  }

  .intake-input,
  .intake-dropzone,
  .intake-progress__dot,
  .intake-progress__line,
  .intake-error,
  .intake-submit-text,
  .intake-submit-btn,
  .intake-dropzone__thumb-remove {
    transition: none;
  }
}

.intake-form-card {
  position: relative;
  z-index: 1;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 2rem 2rem 2.5rem;
  margin-left: auto;
  margin-right: auto;
}

/* Override .intake-wizard padding since card handles spacing */
.intake-form-card .intake-wizard {
  max-width: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

@media (min-width: 1200px) {
  .intake-form-card { max-width: 560px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Redesigned left panels — white background, centered content
   Applies to both tekening and project intake pages.
   ═══════════════════════════════════════════════════════════════════ */

.intake-panel__content--centered {
  text-align: center;
  align-items: center;
  padding-top: max(80px, 8vh);
  padding-bottom: max(80px, 8vh);
  justify-content: center;
  gap: 1.5rem;
}

/* White background for both panels */
.intake-split--tekening .intake-panel,
.intake-split--project .intake-panel {
  background: white;
}

/* Remove dark overlay on white panels */
.intake-split--tekening .intake-panel__overlay,
.intake-split--project .intake-panel__overlay {
  display: none;
}

/* Headline on white background */
.intake-panel__content--centered .intake-panel__headline {
  color: var(--text);
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-family: var(--font-display);
  letter-spacing: -0.035em;
  line-height: 1.2;
}

/* Subline text */
.intake-panel__subline {
  font-size: clamp(0.88rem, 1.1vw, 0.97rem);
  color: var(--muted);
  font-weight: 400;
  line-height: 1.65;
  margin: 0;
  max-width: 320px;
}

/* Large decorative opening quote mark */
.intake-panel__deco-quote {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 7vw, 6.5rem);
  font-weight: 900;
  color: var(--blue);
  opacity: 0.12;
  line-height: 0.75;
  pointer-events: none;
  user-select: none;
  /* Negative margin pulls the headline up to sit just under the quote mark */
  margin-bottom: -0.75rem;
}

/* Precision check icon for project page left panel */
.intake-panel__deco-icon {
  display: block;
  margin: 0 auto;
  flex-shrink: 0;
  /* Slight opacity so it reads as an ambient accent, not a functional element */
  opacity: 0.7;
}

/* Large decorative number for project page — dark ink, technical, distinguished from tekening quote mark */
.intake-panel__deco-number {
  font-family: var(--font-display);
  font-size: clamp(6rem, 10vw, 9rem);
  font-weight: 900;
  color: var(--text);
  opacity: 0.08;
  line-height: 1;
  letter-spacing: -0.06em;
  pointer-events: none;
  user-select: none;
  margin-bottom: -1.25rem;
}

/* Project page: arrow-mark instead of checkmark — more precise/directional for production buyers */
.intake-split--project .intake-panel__trust li::before {
  content: '\2192';
  color: var(--blue);
  opacity: 0.7;
  font-size: 0.85rem;
}

/* Trust signals on white background */
.intake-panel__trust--centered {
  align-items: flex-start;
  margin-top: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 0.55rem;
}

.intake-panel__trust--centered li {
  color: var(--text);
  font-size: 0.88rem;
  justify-content: flex-start;
}

/* Escape / way-out link at bottom of left panel */
.intake-panel__escape {
  margin-top: auto;
  padding-top: 2rem;
  font-size: 0.8rem;
  text-align: center;
}

.intake-panel__escape a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}

.intake-panel__escape a:hover {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

/* Mobile adjustments for redesigned panels */
@media (max-width: 767px) {
  .intake-split--tekening .intake-split__left,
  .intake-split--project .intake-split__left {
    height: auto;
    min-height: 200px;
  }

  .intake-panel__content--centered {
    padding: 2.5rem 1.5rem;
    gap: 0.75rem;
    justify-content: center;
  }

  .intake-panel__deco-quote,
  .intake-panel__deco-number,
  .intake-panel__deco-icon {
    display: none;
  }

  .intake-panel__subline {
    display: none;
  }

  .intake-panel__escape {
    display: none;
  }

  .intake-form-wrap {
    padding: 2rem 1rem 2rem;
  }

  .intake-form-card {
    padding: 1.5rem 1.25rem 2rem;
  }

  .intake-success__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .intake-panel__content--centered {
    padding-top: max(64px, 7vh);
    padding-bottom: max(64px, 7vh);
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .intake-form-wrap {
    /* Symmetric padding — let flex centering take over */
    padding: max(40px, 4vh) 24px max(40px, 4vh);
  }
}

/* === Formbricks speech bubble brand overrides === */
/* Selectors target Formbricks JS SDK as deployed on formbricks.dev.werco.app (2026-05-16). */
/* Re-verify selectors if the Formbricks Docker image is updated. */

/* ── Floating trigger button ── */
#formbricks-widget button,
[id^="formbricks"] .fb-survey-button,
[id^="formbricks"] button[data-survey-button] {
  background-color: var(--blue) !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 16px rgba(0,91,164,0.25) !important;
}
[id^="formbricks"] button[data-survey-button]:hover {
  background-color: var(--blue-dark) !important;
}

/* ── Survey card ── */
[id^="formbricks"] .fb-survey-container,
[id^="formbricks"] [data-testid="survey-container"],
[id^="formbricks"] form {
  font-family: 'DM Sans', sans-serif !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}

/* ── Inputs and textareas ── */
[id^="formbricks"] input[type="text"],
[id^="formbricks"] input[type="email"],
[id^="formbricks"] textarea {
  font-family: 'DM Sans', sans-serif !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  background: #fff !important;
  color: var(--text) !important;
}
[id^="formbricks"] input[type="text"]:focus,
[id^="formbricks"] input[type="email"]:focus,
[id^="formbricks"] textarea:focus {
  border-color: var(--blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,91,164,0.15) !important;
}

/* ── Submit button ── */
[id^="formbricks"] button[type="submit"],
[id^="formbricks"] .fb-submit-button,
[id^="formbricks"] [data-testid="submit-button"] {
  background-color: var(--blue) !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: none !important;
  padding: 12px 24px !important;
  cursor: pointer !important;
}
[id^="formbricks"] button[type="submit"]:hover,
[id^="formbricks"] .fb-submit-button:hover {
  background-color: var(--blue-dark) !important;
}

/* ── Close / dismiss button ── */
[id^="formbricks"] button[aria-label="Close"],
[id^="formbricks"] .fb-close-button,
[id^="formbricks"] [data-testid="close-button"] {
  background: none !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  border-radius: 50% !important;
}
[id^="formbricks"] button[aria-label="Close"]:hover {
  color: var(--text) !important;
  background: var(--off) !important;
}

/* ============================================================
   JOBS PAGE
   ============================================================ */

/* ── Culture section ── */
.jobs-culture {
  background: var(--white);
  padding: 80px var(--pad-xl);
}
.jobs-culture__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.jobs-culture__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 0.875rem;
}
.jobs-culture__intro {
  font-size: 1.0625rem;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}
.jobs-culture__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  list-style: none;
}
.jobs-culture__card {
  background: var(--off);
  border-radius: var(--radius-lg);
  padding: var(--pad-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .jobs-culture__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
}
.jobs-culture__card-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 0.5rem;
}
.jobs-culture__card-desc {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.65;
}

/* ── Vacancies section ── */
.jobs-vacancies {
  background: var(--white);
  padding: 80px var(--pad-xl) 56px;
}
.jobs-vacancies__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.jobs-vacancies__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 1.25rem;
}
.jobs-vacancies__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.125rem;
  margin-bottom: 1.25rem;
}
.jobs-vacancies__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.jobs-vacancies__label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted);
}
.jobs-vacancies__body {
  font-size: 1rem;
  color: var(--muted);
  max-width: 520px;
  line-height: 1.7;
}

/* ── Spontaneous application CTA — centered blob ── */
.jobs-cta {
  background: var(--white);
  padding: 56px var(--pad-xl) 80px;
}
.jobs-cta__blob {
  max-width: 720px;
  margin: 0 auto;
  background: var(--blue-light);
  border-radius: 58% 42% 54% 46% / 46% 58% 42% 54%;
  padding: 56px 64px;
  text-align: center;
  box-shadow: var(--shadow-md);
  animation: jobs-blob-morph 14s ease-in-out infinite;
  will-change: border-radius;
}
@keyframes jobs-blob-morph {
  0%   { border-radius: 58% 42% 54% 46% / 46% 58% 42% 54%; }
  25%  { border-radius: 44% 56% 38% 62% / 62% 38% 60% 40%; }
  50%  { border-radius: 52% 48% 66% 34% / 40% 64% 36% 60%; }
  75%  { border-radius: 36% 64% 46% 54% / 56% 44% 58% 42%; }
  100% { border-radius: 58% 42% 54% 46% / 46% 58% 42% 54%; }
}
@media (prefers-reduced-motion: reduce) {
  .jobs-cta__blob { animation: none; border-radius: 28px; }
}
.jobs-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--blue-dark);
  margin-bottom: 1rem;
}
.jobs-cta__body {
  font-size: 1.0625rem;
  color: var(--text);
  max-width: 480px;
  margin: 0 auto 1.5rem;
  line-height: 1.7;
}
.jobs-cta__checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  max-width: 320px;
  margin: 0 auto 2rem;
  color: var(--muted);
  font-size: 0.9375rem;
  text-align: left;
}
.jobs-cta__checklist li::before {
  content: '→ ';
  color: var(--blue);
}
.jobs-cta__btn {
  display: inline-flex;
  align-items: center;
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.875rem 2rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(0, 87, 168, 0.25);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .jobs-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 87, 168, 0.32);
  }
}
.jobs-cta__btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.jobs-cta__btn:active {
  transform: scale(0.97);
  box-shadow: 0 1px 6px rgba(0, 87, 168, 0.15);
  transition: transform 160ms ease-out, box-shadow 160ms ease-out;
}

/* Responsive — Jobs */
@media (max-width: 1023px) {
  .jobs-culture { padding: 64px var(--pad-lg); }
  .jobs-vacancies { padding: 64px var(--pad-lg) 44px; }
  .jobs-cta { padding: 44px var(--pad-lg) 64px; }
}
@media (max-width: 767px) {
  .jobs-culture { padding: 52px var(--pad-md); }
  .jobs-vacancies { padding: 52px var(--pad-md) 36px; }
  .jobs-cta { padding: 36px var(--pad-md) 52px; }
  .jobs-culture__grid { grid-template-columns: 1fr; }
  .jobs-cta__blob { padding: 40px 28px; border-radius: 20px; }
}

/* ============================================================
   Decors page — material sections (HPL · Melamine · Compactplaat · Fineer · Tailora)
   ============================================================ */

.decors-intro {
  padding: 56px var(--pad-md) 32px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.decors-intro__lede {
  font: 400 1.125rem/1.65 var(--font-body);
  color: var(--muted);
  margin: 0;
}
@media (min-width: 768px) {
  .decors-intro { padding: 72px var(--pad-lg) 48px; }
  .decors-intro__lede { font-size: 1.1875rem; }
}

/* ── Decors pill nav ── */
.decors-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0 var(--pad-md) 56px;
}
@media (min-width: 768px) {
  .decors-pills { padding: 0 var(--pad-lg) 72px; gap: 12px; }
}

.decors-pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: 9999px;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text);
  font: 500 0.875rem/1 var(--font-body);
  text-decoration: none;
  transition:
    border-color 160ms var(--ease-snappy),
    color        160ms var(--ease-snappy),
    background   160ms var(--ease-snappy),
    box-shadow   160ms var(--ease-snappy),
    transform    160ms var(--ease-snappy);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .decors-pill:hover {
    border-color: var(--blue);
    color: var(--blue);
    box-shadow: 0 2px 10px rgba(0, 106, 204, 0.14);
    transform: translateY(-1px);
  }
}
.decors-pill:active {
  transform: scale(0.97);
  transition: transform 160ms ease-out;
}

.decors-pill--tailora {
  background: linear-gradient(135deg, var(--blue) 0%, #1a6fc4 100%);
  border-color: transparent;
  color: var(--white);
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(30, 100, 200, 0.25);
}
@media (hover: hover) and (pointer: fine) {
  .decors-pill--tailora:hover {
    background: linear-gradient(135deg, #1a6fc4 0%, #155db0 100%);
    border-color: transparent;
    color: var(--white);
    box-shadow: 0 5px 16px rgba(30, 100, 200, 0.40);
    transform: translateY(-1px);
  }
}
.decors-pill--tailora:active {
  transform: scale(0.97);
  transition: transform 160ms ease-out;
}

.material-sections {
  display: flex;
  flex-direction: column;
}

/* Standard material card section */
.material-section {
  padding: 64px var(--pad-md);
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 96px;
}
@media (min-width: 768px)  { .material-section { padding: 80px var(--pad-lg); } }
@media (min-width: 1024px) { .material-section { padding: 96px var(--pad-xl); } }

.material-section__inner {
  max-width: 1160px;
  margin: 0 auto;
}

.material-section__header {
  max-width: 760px;
  margin-bottom: 40px;
}
.material-section__title {
  font: 700 clamp(1.75rem, 2.4vw, 2.5rem)/1.1 var(--font-display);
  color: var(--text);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.material-section__lede {
  font: 400 1.0625rem/1.6 var(--font-body);
  color: var(--muted);
  margin: 0;
}

.material-section__label {
  font: 600 0.75rem/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.material-section__use-cases {
  margin-bottom: 36px;
}
.use-case-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.use-case-list__item {
  font-size: 0.9375rem;
  color: var(--text);
  padding: 6px 12px;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.material-section__suppliers { margin-bottom: 28px; }

.supplier-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .supplier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .supplier-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.supplier-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .supplier-grid .supplier-card {
    animation: fadeUp 280ms var(--ease-out) both;
    animation-delay: var(--d, 0ms);
  }
}
@media (hover: hover) and (pointer: fine) {
  .supplier-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
  }
}

.supplier-card__name {
  font: 700 1.0625rem/1.25 var(--font-display);
  color: var(--text);
  margin: 0 0 6px;
}
.supplier-card__note {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0 0 14px;
}
.supplier-card__popular-label {
  font: 600 0.6875rem/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.decor-code-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.decor-code-list__chip {
  font: 500 0.8125rem/1 'DM Mono', 'SF Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  padding: 6px 10px;
  background: var(--blue-light);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .decor-code-list__chip:hover {
    transform: scale(1.04);
    background: #d4e6f9;
  }
}

.material-section__cta {
  display: inline-flex;
  margin-top: 36px;
}

/* Standard material sections (HPL, Melamine, etc.) — center the CTA */
.material-section:not(.material-section--hero) .material-section__cta {
  display: block;
  width: fit-content;
  margin-top: 44px;
  margin-left: auto;
  margin-right: auto;
}

/* Decors page — dual-CTA finder element */
.decors-finder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 36px;
}
.decors-finder__headline {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.4;
  max-width: 38ch;
}
.decors-finder__btn { flex-shrink: 0; }
.decors-finder__sub {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}
.decors-finder__studio-link {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
}
.decors-finder__studio-link:hover { text-decoration: underline; }

/* Hero context — light text on dark/image background */
.decors-finder--hero .decors-finder__headline { color: rgba(255,255,255,0.95); }
.decors-finder--hero .decors-finder__sub { color: rgba(255,255,255,0.65); }
.decors-finder--hero .decors-finder__studio-link {
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.material-section__footnote {
  margin-top: 32px;
  font-size: 0.9375rem;
  color: var(--muted);
  font-style: italic;
}

.material-section__image {
  margin-bottom: 40px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 6;
}
.material-section__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .material-section__image:hover img {
    transform: scale(1.04);
  }
}

/* ── Tailora photo pair ── */
.tailora-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 52px;
  border-radius: 12px;
  overflow: hidden;
}
.tailora-photo {
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 4 / 3;
}
.tailora-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tailora-photo:hover img {
    transform: scale(1.04);
  }
}
@media (max-width: 600px) {
  .tailora-photos {
    grid-template-columns: 1fr;
  }
}

/* ── Tailora hero treatment ── */
.material-section--hero {
  position: relative;
  padding: 96px var(--pad-md);
  background: linear-gradient(180deg, #0e1320 0%, #1a2236 100%);
  color: var(--white);
  border-bottom: none;
  overflow: hidden;
  scroll-margin-top: 96px;
}
.material-section--hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 0%, rgba(110, 179, 255, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(0, 135, 120, 0.14), transparent 60%);
  pointer-events: none;
}
@media (min-width: 768px)  { .material-section--hero { padding: 120px var(--pad-lg); } }
@media (min-width: 1024px) { .material-section--hero { padding: 144px var(--pad-xl); } }

.material-section--hero__inner {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
}

.material-section--hero__eyebrow {
  font: 600 0.75rem/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.material-section--hero__title {
  font: 700 clamp(2.5rem, 5vw, 4.25rem)/1 var(--font-display);
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--white);
}
.material-section--hero__lede {
  font: 400 1.125rem/1.55 var(--font-body);
  color: rgba(255, 255, 255, 0.78);
  max-width: 720px;
  margin: 0 0 56px;
}
@media (min-width: 768px) {
  .material-section--hero__lede { font-size: 1.25rem; }
}

/* Tailora hero — colors row: chips left, CTA button right */
.material-hero__bottomrow {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.material-hero__cta { flex-shrink: 0; align-self: flex-start; white-space: nowrap; }
@media (min-width: 900px) {
  .material-hero__bottomrow {
    flex-direction: row;
    align-items: flex-end;
    gap: 48px;
  }
  .tailora-colors { flex: 1; }
  .material-hero__cta { align-self: flex-end; }
}

/* Pillars 3-up bento */
.tailora-pillars {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-bottom: 56px;
}
@media (min-width: 768px)  { .tailora-pillars { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (min-width: 1024px) { .tailora-pillars { gap: 28px; } }

.tailora-pillar {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (prefers-reduced-motion: no-preference) {
  .material-section--hero.is-visible .tailora-pillar {
    animation: fadeUp 500ms var(--ease-out) backwards;
    animation-delay: calc(120ms + var(--d, 0ms));
  }
}

.tailora-pillar__num {
  font: 600 0.75rem/1 var(--font-body);
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 12px;
}
.tailora-pillar__title {
  font: 700 1.25rem/1.25 var(--font-display);
  margin: 0 0 12px;
  color: var(--white);
}
.tailora-pillar__body {
  font: 400 0.9375rem/1.6 var(--font-body);
  color: rgba(255, 255, 255, 0.74);
  margin: 0 0 14px;
}
.tailora-pillar__tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tailora-pillar__tags li {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.85);
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

/* Color systems row */
.tailora-colors { margin-bottom: 0; }
.tailora-colors__label {
  font: 600 0.6875rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 14px;
}
.tailora-colors__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tailora-colors__chip {
  font: 600 0.875rem/1 var(--font-display);
  letter-spacing: 0.04em;
  color: var(--white);
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  transition: background 160ms var(--ease-snappy), border-color 160ms var(--ease-snappy), transform 160ms var(--ease-snappy);
}
@media (hover: hover) and (pointer: fine) {
  .tailora-colors__chip:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.40);
    transform: translateY(-1px);
  }
}

/* 36u proof strip */
.tailora-proof {
  margin-bottom: 40px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.tailora-proof__label {
  font: 600 0.6875rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 16px;
}
.tailora-proof__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.tailora-proof__cell {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
}
@media (prefers-reduced-motion: no-preference) {
  .material-section--hero.is-visible .tailora-proof__cell {
    animation: fadeUp 280ms var(--ease-out) both;
    animation-delay: calc(200ms + var(--d, 0ms));
  }
}
.tailora-proof__arrow {
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.25rem;
}
.tailora-proof__result {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(0, 135, 120, 0.18);
  border: 1px solid rgba(0, 135, 120, 0.55);
  border-radius: var(--radius-sm);
  color: var(--white);
  font: 600 0.875rem/1 var(--font-body);
}
.tailora-proof__check {
  color: #5ee3c1;
  font-weight: 700;
}
.tailora-proof__note {
  margin: 14px 0 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.tailora-cta {
  margin-top: 8px;
}

/* ── Standaardgamma — gated PDF cards ── */
.standaardgamma {
  padding: 64px var(--pad-md);
  background: var(--white);
  scroll-margin-top: 96px;
}
@media (min-width: 768px)  { .standaardgamma { padding: 80px var(--pad-lg); } }
@media (min-width: 1024px) { .standaardgamma { padding: 96px var(--pad-xl); } }

.standaardgamma__inner {
  max-width: 1160px;
  margin: 0 auto;
}
.standaardgamma__eyebrow {
  font: 600 0.75rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 14px;
}
.standaardgamma__title {
  font: 700 clamp(1.75rem, 2.4vw, 2.5rem)/1.1 var(--font-display);
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.standaardgamma__desc {
  max-width: 720px;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.55;
  margin: 0 0 36px;
}

.standard-range-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  position: relative;
  transition: filter 300ms var(--ease-out);
}
@media (min-width: 768px) {
  .standard-range-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

.standard-range-grid.is-locked .pdf-card {
  filter: blur(1.5px) saturate(0.85);
  opacity: 0.85;
}
/* Pre-gate: download hidden, lock state shown */
.standard-range-grid.is-locked .pdf-card__cta { display: none; }
.standard-range-grid:not(.is-locked) .pdf-card__locked { display: none; }

.pdf-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .standard-range-grid:not(.is-locked) .pdf-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
  }
}

.pdf-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, var(--blue-light) 0%, #ffffff 60%, #f5e6d3 100%);
  border-bottom: 1px solid var(--border);
}
.pdf-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font: 700 0.6875rem/1 var(--font-body);
  letter-spacing: 0.1em;
  color: var(--white);
  background: var(--text);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}

.pdf-card__body {
  padding: 22px 22px 8px;
  flex: 1;
}
.pdf-card__title {
  font: 700 1.0625rem/1.25 var(--font-display);
  color: var(--text);
  margin: 0 0 6px;
}
.pdf-card__desc {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
}

.pdf-card__cta {
  margin: 18px 22px 22px;
  align-self: flex-start;
  transition: transform 160ms var(--ease-out);
}
.pdf-card__cta:active { transform: var(--press); }

.pdf-card__locked {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 22px 22px;
  font-size: 0.875rem;
  color: var(--muted);
  cursor: not-allowed;
}
.pdf-card__locked svg { flex-shrink: 0; }

/* ── Decors bottom CTA band — uses generic .cta-band, decors-specific tweaks ── */
.decors-cta { /* relies on existing .cta-band styles */ }

/* ── Reduced motion overrides for decors ── */
@media (prefers-reduced-motion: reduce) {
  .supplier-card,
  .pdf-card,
  .decor-code-list__chip,
  .standard-range-grid,
  .pdf-card__cta {
    transition: none !important;
  }
  .supplier-card,
  .tailora-pillar,
  .tailora-proof__cell {
    animation: none !important;
  }
}


/* ============================================================
   CAMPAIGN SPOTLIGHT
   Rendered on home between hero and stats-strip. Marketing-managed via Flex Objects.
   Differentiated from hero: light background, half-section padding, smaller title.
   Echoes Tailora hero language (eyebrow → title → lede → CTA) at smaller scale.
   ============================================================ */
.campaign-spotlight {
  position: relative;
  padding: 64px var(--pad-md);
  background: var(--blue-light);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
@media (min-width: 768px)  { .campaign-spotlight { padding: 72px var(--pad-lg); } }
@media (min-width: 1024px) { .campaign-spotlight { padding: 80px var(--pad-xl); } }

.campaign-spotlight__inner {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 880px) {
  .campaign-spotlight__inner { grid-template-columns: 1.1fr 0.9fr; gap: 56px; }
}

.campaign-spotlight__text { min-width: 0; }

.campaign-spotlight__eyebrow {
  font: 600 0.75rem/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 14px;
}

.campaign-spotlight__title {
  font: 700 clamp(1.8rem, 3.5vw, 3rem)/1.05 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--blue-dark);
  margin: 0 0 18px;
}

.campaign-spotlight__lede {
  font: 400 1rem/1.55 var(--font-body);
  color: var(--text);
  max-width: 560px;
  margin: 0 0 28px;
}
@media (min-width: 768px) {
  .campaign-spotlight__lede { font-size: 1.0625rem; }
}

.campaign-spotlight__cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.campaign-spotlight__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--off);
}
.campaign-spotlight__media img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 400ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .campaign-spotlight__media:hover img { transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .campaign-spotlight__media img { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Material Studio — Core Range
   /decors/core-range  ·  material-studio template
   ══════════════════════════════════════════════════════════════════ */

/* Shared easing curve — used across all Studio transitions */
:root { --ease-snappy: cubic-bezier(0.23, 1, 0.32, 1); }

/* ── Studio intro ── */
.studio-intro {
  padding: 48px var(--pad-md) 32px;
  background: var(--off);
}
.studio-intro__inner { max-width: 760px; }
.studio-intro__tagline {
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem; font-weight: 700;
  color: var(--text); margin: 0 0 12px;
}
.studio-intro__desc {
  font-size: 1rem; color: var(--text);
  line-height: 1.65; margin: 0 0 16px;
}
.studio-intro__disclaimer {
  font-size: 0.8125rem; color: var(--muted);
  border-left: 2px solid var(--border);
  padding-left: 12px; margin: 0; line-height: 1.55;
}
@media (min-width: 768px) {
  .studio-intro { padding: 60px var(--pad-lg) 40px; }
  .studio-intro__tagline { font-size: 1.5rem; }
}

/* ── Filter bar ── */
.studio-filters {
  padding: 24px var(--pad-md) 24px;
  background: var(--off);
  scroll-margin-top: 80px;
}
.studio-filters__inner {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.studio-filter {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 16px; border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--white); color: var(--text);
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 500;
  cursor: pointer; line-height: 1;
  transition:
    background-color 160ms var(--ease-snappy),
    border-color     160ms var(--ease-snappy),
    color            160ms var(--ease-snappy);
}
@media (hover: hover) and (pointer: fine) {
  .studio-filter:hover { border-color: var(--blue); color: var(--blue); }
}
.studio-filter:active { transform: scale(0.97); transition: transform 160ms ease-out; }
.studio-filter:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.studio-filter.is-active { background: var(--blue); border-color: var(--blue); color: var(--white); }
.studio-filter__count { font-size: 0.75rem; opacity: 0.65; font-weight: 400; }
.studio-filter.is-active .studio-filter__count { opacity: 0.85; }
.studio-filter__divider {
  width: 1px; height: 20px;
  background: var(--border); flex-shrink: 0; margin: 0 4px;
}
.studio-filters__footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; gap: 8px;
}
.studio-result-count {
  font-size: 0.8125rem; color: var(--muted);
  margin: 0; padding: 0;
}
.studio-print-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 100px;
  border: 1.5px solid var(--border);
  background: transparent; color: var(--muted);
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500;
  cursor: pointer; line-height: 1; flex-shrink: 0;
  transition:
    background-color 160ms var(--ease-snappy),
    border-color     160ms var(--ease-snappy),
    color            160ms var(--ease-snappy);
}
@media (hover: hover) and (pointer: fine) {
  .studio-print-btn:hover { border-color: var(--blue); color: var(--blue); }
}
.studio-print-btn:active { transform: scale(0.97); transition: transform 160ms ease-out; }
.studio-print-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (min-width: 768px) {
  .studio-filters { padding: 32px var(--pad-lg) 32px; }
  .studio-filters__inner { gap: 10px; }
}

/* ── Studio wrapper — relative anchor for lock overlay ── */
.studio-wrapper {
  position: relative;
  padding: 32px var(--pad-md) 64px;
  min-height: 480px;
}
@media (min-width: 768px) { .studio-wrapper { padding: 40px var(--pad-lg) 80px; } }

/* Gated state — blurred preview behind the lock card */
.studio-wrapper.is-gated .studio-grid {
  filter: blur(8px) saturate(0.6);
  opacity: 0.5;
  pointer-events: none; user-select: none;
  will-change: filter;
}

/* ── Lock overlay ── */
.studio-lock-overlay {
  position: absolute; inset: 0;
  background: rgba(240, 245, 252, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 24px 80px;
  z-index: 10;
}
@keyframes studio-lock-appear {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.studio-lock__card {
  position: sticky; top: 88px;
  background: var(--white);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 87, 168, 0.18);
  padding: 32px 28px 28px;
  max-width: 560px; width: 100%;
  animation: studio-lock-appear 300ms var(--ease-snappy) both;
}
.studio-lock__icon {
  width: 48px; height: 48px;
  background: var(--blue-light);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(0, 87, 168, 0.12);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.studio-lock__title {
  font-family: 'Syne', sans-serif;
  font-size: 1.2rem; font-weight: 800;
  color: var(--text); margin: 0 0 8px;
}
.studio-lock__desc {
  font-size: 0.9375rem; color: var(--muted);
  line-height: 1.55; margin: 0 0 16px;
}
.studio-lock__card .gate-form__field { margin-bottom: 10px; }
.studio-lock__card .gate-form__submit {
  width: 100%; justify-content: center;
  padding-block: 12px; font-size: 1rem; letter-spacing: 0.01em;
}

/* Mobile: fixed overlay so card is reachable without page-scroll confusion */
@media (max-width: 767px) {
  .studio-lock-overlay {
    position: fixed;
    padding: 16px 16px 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
  }
  .studio-lock__card {
    position: static;
    padding: 24px 20px 20px;
  }
}

/* ── Swatch grid ── */
.studio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}
@media (min-width: 768px) {
  .studio-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; }
}

/* ── Swatch card ── */
.studio-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: visible;
  transition:
    box-shadow 200ms var(--ease-snappy),
    transform  200ms var(--ease-snappy);
}
.studio-card.is-hidden { display: none; }
@media (hover: hover) and (pointer: fine) {
  .studio-card:hover {
    box-shadow: 0 8px 32px rgba(0, 87, 168, 0.12);
    transform: translateY(-2px);
  }
}
.studio-card:active { transform: scale(0.97); transition: transform 160ms ease-out; }

/* Color swatch with overlay badge */
.studio-card__swatch {
  position: relative;
  height: 160px; width: 100%; display: block;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  border-radius: 11px 11px 0 0;
}
.studio-card__swatch-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.studio-card__badge {
  position: absolute; bottom: 8px; left: 10px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text);
  font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Card body — code first, then supplier, then name */
.studio-card__body { padding: 16px 16px 20px; }
.studio-card__code-row {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 6px;
  margin-bottom: 4px;
}
.studio-card__code {
  font-size: 0.9rem; font-weight: 700;
  color: var(--text); margin: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em; line-height: 1.3;
}
.studio-card__copy {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: none; border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; color: var(--muted);
  position: relative;
  transition:
    border-color 140ms var(--ease-snappy),
    color        140ms var(--ease-snappy),
    background   140ms var(--ease-snappy);
}
@media (hover: hover) and (pointer: fine) {
  .studio-card__copy:hover { border-color: var(--blue); color: var(--blue); }
}
.studio-card__copy:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.studio-card__copy.is-copied { background: #e8f4f0; border-color: #1a7a5a; color: #1a7a5a; }
.studio-card__copy::after {
  content: 'Gekopieerd!';
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) scale(0.85);
  background: var(--text); color: var(--white);
  font-size: 0.6875rem; font-weight: 400;
  white-space: nowrap; padding: 4px 8px; border-radius: 4px;
  opacity: 0; pointer-events: none;
  transition:
    opacity   140ms ease-out,
    transform 140ms var(--ease-snappy);
}
.studio-card__copy.is-copied::after { opacity: 1; transform: translateX(-50%) scale(1); }
.studio-card__supplier {
  font-size: 0.8125rem; font-weight: 600; color: var(--muted);
  margin: 0 0 3px;
}
.studio-card__brand-link {
  color: inherit; text-decoration: none;
  transition: color 140ms var(--ease-snappy);
}
@media (hover: hover) and (pointer: fine) {
  .studio-card__brand-link:hover { color: var(--blue); }
}
.studio-card__tagline {
  font-weight: 400; font-style: italic;
  font-size: 0.75rem; opacity: 0.8;
}
.studio-card__name {
  font-size: 0.875rem; color: var(--text);
  margin: 0 0 14px; line-height: 1.4;
}
.studio-card__cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.8125rem; font-weight: 600; color: var(--blue);
  text-decoration: none; letter-spacing: 0.01em;
  transition: color 140ms var(--ease-snappy);
}
.studio-card__cta-arrow {
  transition: transform 160ms var(--ease-snappy);
}
@media (hover: hover) and (pointer: fine) {
  .studio-card__cta:hover { color: var(--blue-dark); }
  .studio-card__cta:hover .studio-card__cta-arrow { transform: translateX(3px); }
}

/* ── Empty filter state ── */
.studio-empty { text-align: center; padding: 48px 24px; }
.studio-empty:not([hidden]) { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.studio-empty__text { font-size: 0.9375rem; color: var(--muted); margin: 0; }
.studio-empty__reset {
  padding: 10px 24px; border-radius: 100px;
  border: 1.5px solid var(--blue); background: none;
  color: var(--blue); font-family: var(--font-body); font-size: 0.875rem;
  font-weight: 500; cursor: pointer;
  transition:
    background-color 140ms var(--ease-snappy),
    color            140ms var(--ease-snappy);
}
@media (hover: hover) and (pointer: fine) {
  .studio-empty__reset:hover { background: var(--blue); color: var(--white); }
}

/* ── Screen / print utilities ── */
.print-only { display: none; }

/* ══════════════════════════════════════════════════════════════════
   Print styles — A4 catalog output
   ══════════════════════════════════════════════════════════════════ */
@media print {
  /* Hide all screen chrome and content */
  .no-print,
  .studio-intro,
  .studio-filters,
  .studio-wrapper,
  .studio-grid,
  .studio-card,
  .nav-wrap,
  .site-header, .page-hero,
  .cta-band, .site-footer, .consent-banner,
  nav[class], footer { display: none !important; }

  /* Reveal print catalog */
  .print-only { display: block !important; }

  @page { size: A4 portrait; margin: 12mm 15mm 12mm 15mm; }

  body { font-family: 'DM Sans', sans-serif; color: #1a1f2e; }



  /* Cover page */
  .studio-print-cover {
    page-break-after: always; break-after: page;
    height: 257mm;
    display: flex; flex-direction: column;
  }
  .studio-print-cover__hero {
    background: #0057A8;
    flex: 0 0 130mm;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #fff; text-align: center; padding: 20mm;
  }
  .studio-print-cover__brand {
    font-size: 10pt; letter-spacing: 0.25em;
    opacity: 0.7; margin: 0 0 8mm; text-transform: uppercase;
  }
  .studio-print-cover__title {
    font-family: 'Syne', sans-serif;
    font-size: 32pt; font-weight: 800;
    margin: 0 0 4mm; line-height: 1;
  }
  .studio-print-cover__sub {
    font-size: 12pt; letter-spacing: 0.12em;
    text-transform: uppercase; opacity: 0.8; margin: 0;
  }
  .studio-print-cover__meta {
    padding: 12mm 15mm; flex: 1;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .studio-print-cover__toc {
    border-collapse: collapse; width: 60mm;
    border-top: 1pt solid #d1dcea;
  }
  .studio-print-cover__toc td { padding: 3mm 0; font-size: 10pt; border-bottom: 0.5pt solid #d1dcea; }
  .studio-print-cover__toc td:last-child { text-align: right; color: #6b7280; }
  .studio-print-cover__disclaimer {
    font-size: 8pt; color: #6b7280; line-height: 1.5;
    border-left: 1.5pt solid #d1dcea; padding-left: 4mm;
    margin: 4mm 0 0;
  }
  .studio-print-cover__date,
  .studio-print-cover__contact { font-size: 8pt; color: #6b7280; margin: 2mm 0 0; }

  /* Category sections — each fills one A4 page (273mm content area) */
  .studio-print-section {
    display: flex; flex-direction: column;
    min-height: 273mm;
  }
  .studio-print-section--break { page-break-before: always; break-before: page; }

  /* Topbar: title+desc left, logo right */
  .studio-print-section__topbar {
    display: flex; justify-content: space-between; align-items: flex-start;
    border-bottom: 1pt solid #d1dcea; padding-bottom: 3mm; margin-bottom: 4mm;
  }
  .studio-print-section__logo { height: 7mm; width: auto; display: block; flex-shrink: 0; }
  .studio-print-section__title {
    font-family: 'Syne', sans-serif;
    font-size: 14pt; font-weight: 700;
    color: #0057A8; margin: 0 0 2mm;
  }
  .studio-print-section__desc { font-size: 9pt; color: #6b7280; margin: 0; line-height: 1.5; }

  /* Footer pushed to page bottom via margin-top: auto */
  .studio-print-section__footer {
    margin-top: auto;
    display: flex; justify-content: space-between; align-items: flex-start;
    font-size: 7pt; color: #9ca3af; line-height: 1.6;
  }
  .studio-print-section__footer-left { display: flex; flex-direction: column; }
  .studio-print-section__footer-brand { font-size: 7.5pt; font-weight: 700; color: #9ca3af; }
  .studio-print-section__contact { display: flex; align-items: center; gap: 3mm; }
  .studio-print-section__contact span { display: flex; align-items: center; gap: 1.5mm; }
  .studio-print-section__footer-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.5mm;
    margin-top: 4mm;
  }
  .studio-print-section__pagenum { font-size: 7pt; color: #9ca3af; }

  /* 4-column A4 grid */
  .studio-print-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4mm 5mm;
    orphans: 3; widows: 3;
  }
  .studio-print-card {
    border: 0.5pt solid #d1dcea;
    border-radius: 3pt; overflow: hidden;
    break-inside: avoid;
  }
  .studio-print-card__swatch { height: 28mm; width: 100%; display: block; overflow: hidden; }
  .studio-print-card__swatch-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
  .studio-print-card__info { padding: 2mm 3mm 3mm; }
  .studio-print-card__code {
    font-size: 8pt; font-weight: 700; color: #1a1f2e;
    margin: 0 0 1mm; font-variant-numeric: tabular-nums;
  }
  .studio-print-card__name { font-size: 8pt; color: #1a1f2e; margin: 0 0 1mm; line-height: 1.3; }
  .studio-print-card__supplier { font-size: 7pt; color: #6b7280; margin: 0; }

}

/* -- Studio grid: staggered entrance animation -- */
@media (prefers-reduced-motion: no-preference) {
  .studio-grid .studio-card {
    animation: studioCardIn 280ms var(--ease-snappy) both;
    animation-delay: min(calc(var(--card-i, 0) * 40ms), 480ms);
  }
}
@keyframes studioCardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Reduced motion — Studio ── */
@media (prefers-reduced-motion: reduce) {
  .studio-card, .studio-filter, .studio-card__cta { transform: none !important; }
  .studio-card { transition: background-color 160ms ease-out, border-color 160ms ease-out !important; animation: none !important; }
  .studio-filter { transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out !important; }
  .studio-lock__card { animation: none !important; }
}

/* ── Studio: loading banner ─────────────────────────────────────────── */
.studio-loader {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  margin: 0 auto 1.5rem;
  max-width: 860px;
  background: #eef4fc;
  border: 1px solid #c5d9f0;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #1a3a5e;
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.studio-loader--done {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
/* Animated loading dots */
.studio-loader__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0057A8;
  flex-shrink: 0;
  animation: studioLoaderDot 1.2s ease-in-out infinite both;
}
.studio-loader__dot:nth-child(1) { animation-delay: 0ms; }
.studio-loader__dot:nth-child(2) { animation-delay: 160ms; }
.studio-loader__dot:nth-child(3) { animation-delay: 320ms; }
@keyframes studioLoaderDot {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}
.studio-loader__text { flex: 1; }

/* ── Studio: skeleton shimmer on card swatches while loading ─────────── */
@keyframes studio-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.studio-grid--loading .studio-card__swatch {
  background: linear-gradient(90deg, #eef0f3 25%, #e0e8f4 50%, #eef0f3 75%) !important;
  background-size: 1200px 100% !important;
  animation: studio-shimmer 1.5s linear infinite !important;
}
/* Suppress card entrance animation while skeleton is shown so shimmer isn't fighting stagger */
.studio-grid--loading .studio-card {
  animation: none !important;
}
/* Suppress shimmer for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .studio-loader__dot { animation: none; opacity: 0.7; }
  .studio-grid--loading .studio-card__swatch { animation: none !important; background: #eef0f3 !important; }
}

/* -- SPAM CONTROL (story 1-5, B4) - the honeypot wrapper --
   Removed visually WITHOUT `display: none` or `visibility: hidden`: a bot that skips
   hidden inputs is exactly the bot this trap is for, and those two properties are the
   first thing it checks. Off-canvas and clipped keeps the field in the DOM, in the
   form's FormData and submittable, while no sighted visitor can reach it.
   `aria-hidden="true"` on this element and `tabindex="-1"` on the input keep it out of
   the accessibility tree and the tab order, so a screen-reader or keyboard visitor
   never meets it either. No script is involved, so it is hidden with JavaScript off. */
.form-aux {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   VACANCIES — cards, detail page, application form (WP-02)
   ============================================================ */

/* ── Status dot turns live when something is open ── */
.jobs-vacancies__status--open .jobs-vacancies__dot { background: var(--teal); }
.jobs-vacancies__status--open .jobs-vacancies__label { color: var(--text); }

/* ── Vacancy grid on the jobs page ── */
.jobs-vacancies__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  list-style: none;
  margin-top: 2rem;
}

/* ── Vacancy card ──
   The whole card is one link: a single tab stop, a single focus ring, and no
   "which of these two targets did I mean" on touch. The anchor wraps spans,
   never block elements, so the markup stays valid inside an anchor. */
.job-card { display: flex; }
.job-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .job-card__link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
  .job-card__link:hover .job-card__cta { gap: 0.625rem; }
}
.job-card__link:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .job-card__link { transition: none; }
  .job-card__link:hover { transform: none; }
}
.job-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--off);
  overflow: hidden;
}
.job-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.job-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--pad-md);
  flex: 1;
}
.job-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.job-card__meta-item + .job-card__meta-item::before {
  content: "\00b7";
  margin-right: 0.75rem;
  color: var(--border);
}
.job-card__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blue);
  line-height: 1.3;
}
.job-card__summary {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.6;
}
.job-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--blue);
  transition: gap 160ms var(--ease-out);
}
.job-card--compact .job-card__body { padding: var(--pad-md); }

/* ── Vacancy detail — hero ── */
.job-hero {
  position: relative;
  background-color: var(--blue-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 148px var(--pad-xl) 72px;
  color: var(--white);
}
.job-hero__inner { max-width: 1100px; margin: 0 auto; }
.job-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  opacity: 0.85;
  margin-bottom: 1.25rem;
  transition: opacity 160ms var(--ease-out);
}
.job-hero__back:hover { opacity: 1; }
.job-hero__back:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.job-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: 0.875rem;
  max-width: 16ch;
}
.job-hero__sub {
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 46ch;
  opacity: 0.92;
}
.job-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  list-style: none;
  margin-top: 1.5rem;
}
.job-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.9375rem;
  font-weight: 500;
  opacity: 0.92;
}

/* ── Mobile jump link — the phone's substitute for the sticky column ── */
.job-jump { display: none; }

/* ── Body + form layout ── */
.job-layout {
  background: var(--white);
  padding: 72px var(--pad-xl);
}
.job-layout__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: var(--pad-lg);
  align-items: start;
}

.job-body__lead {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text);
}
.job-body__lead p { margin-bottom: 1.125rem; }
.job-body__lead p:last-child { margin-bottom: 0; }

.job-block { margin-top: 2.5rem; }
.job-block__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.125rem;
}
.job-block__body { font-size: 1rem; line-height: 1.7; color: var(--text); }
.job-block__body p { margin-bottom: 0.875rem; }
.job-block__body ul { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; }
.job-block__body li { padding-left: 1.5rem; position: relative; color: var(--text); }
.job-block__body li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 700;
}

.job-photos {
  display: grid;
  /* auto-fit, not a fixed 2 columns: a vacancy with one photo gets a full-width
     image rather than a half-empty row. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  list-style: none;
  margin-top: 2.5rem;
}
.job-photos__item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--off);
  box-shadow: var(--shadow-sm);
}
.job-photos__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* ── Application form ──
   Sticky only where there is room for it. The offset clears the floating nav
   and leaves a breath above the card. */
.job-apply__sticky { position: sticky; top: 106px; }
.job-apply__card {
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--pad-md);
  box-shadow: var(--shadow-sm);
}
.job-apply__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blue-dark);
  margin-bottom: 0.5rem;
}
.job-apply__intro {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.job-apply__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1.5rem 0.5rem;
}
/* A class selector beats the UA's `[hidden] { display: none }`, so the panel
   above would render on every page load — success announced before anything was
   sent. Both the server (?verzonden=1 absent) and werco.js hide this element by
   the `hidden` attribute, so the attribute has to win. */
.job-apply__success[hidden] { display: none; }
.job-apply__check { color: var(--blue); }
.job-apply__check path {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: job-check-draw 400ms var(--ease-out) 120ms forwards;
}
@keyframes job-check-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .job-apply__check path { animation: none; stroke-dashoffset: 0; }
}
.job-apply__success-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
}
.job-apply__success-body { font-size: 0.9375rem; color: var(--muted); line-height: 1.6; }

.job-apply__error {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
  color: var(--danger);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.job-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0.875rem; }
.job-field__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.job-field__required { color: var(--blue); }
.job-field__optional { font-weight: 400; font-size: 0.8125rem; color: var(--muted); }
.job-field__input {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.job-field__input::placeholder { color: var(--muted); opacity: 0.8; }
.job-field__input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--focus-ring-blue);
}
.job-field__input.is-invalid { border-color: var(--danger); }
.job-field__input.is-invalid:focus { box-shadow: 0 0 0 3px var(--danger-ring); }
.job-field__textarea { min-height: 104px; resize: vertical; line-height: 1.6; }
.job-field__error { font-size: 0.8125rem; color: var(--danger); min-height: 1.2em; }
.job-field__error:not(:empty)::before { content: "! "; font-weight: 700; }

.job-apply__submit {
  width: 100%;
  min-height: 48px;
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-blue-sm);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .job-apply__submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-blue-lg);
  }
}
.job-apply__submit:active:not(:disabled) { transform: var(--press); }
.job-apply__submit:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.job-apply__submit:disabled { opacity: 0.7; cursor: progress; }
@media (prefers-reduced-motion: reduce) {
  .job-apply__submit { transition: none; }
  .job-apply__submit:hover:not(:disabled) { transform: none; }
}
.job-apply__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--consent-border);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: job-spin 700ms linear infinite;
}
@keyframes job-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .job-apply__spinner { animation-duration: 2s; }
}
.job-apply__legal {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 0.75rem;
}

.job-apply__direct {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 1.25rem;
  padding-left: 0.25rem;
  font-size: 0.9375rem;
}
.job-apply__direct-title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.125rem;
}
.job-apply__direct a { color: var(--blue); text-decoration: none; }
.job-apply__direct a:hover { text-decoration: underline; }

/* ── Closing band ── */
.job-closing {
  background: var(--blue-light);
  padding: 64px var(--pad-xl);
}
.job-closing__inner { max-width: 780px; margin: 0 auto; }
.job-closing__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--blue-dark);
  margin-bottom: 0.875rem;
}
.job-closing__body { font-size: 1.0625rem; line-height: 1.75; color: var(--text); }
.job-closing__body p { margin-bottom: 1rem; }
.job-closing__body p:last-child { margin-bottom: 0; }

/* ── Other vacancies ── */
.job-others {
  background: var(--white);
  padding: 72px var(--pad-xl);
}
.job-others__inner { max-width: 1100px; margin: 0 auto; }
.job-others__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.job-others__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  list-style: none;
}

/* ── Responsive — vacancies ── */
@media (max-width: 1023px) {
  .jobs-vacancies__grid { grid-template-columns: repeat(2, 1fr); }
  .job-hero { padding: 132px var(--pad-lg) 56px; }
  .job-layout { padding: 56px var(--pad-lg); }
  .job-layout__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .job-apply__sticky { position: static; }
  .job-closing { padding: 56px var(--pad-lg); }
  .job-others { padding: 56px var(--pad-lg); }
}
@media (max-width: 767px) {
  .jobs-vacancies__grid { grid-template-columns: 1fr; }
  .job-hero { padding: 118px var(--pad-md) 44px; min-height: 340px; }
  .job-hero__title { max-width: none; }
  .job-layout { padding: 40px var(--pad-md) 48px; }
  .job-photos { grid-template-columns: 1fr; }
  .job-closing { padding: 48px var(--pad-md); }
  .job-others { padding: 48px var(--pad-md); }
  .job-others__grid { grid-template-columns: 1fr; }

  /* The jump link only exists where the form is off-screen at the top. */
  .job-jump {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--blue);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    min-height: 52px;
    text-decoration: none;
  }
  .job-jump:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: -3px; }

  /* The jump lands the form title under the floating nav, not behind it. */
  .job-apply { scroll-margin-top: 92px; }
}

/* ── CV upload on the application form (WP-02) ──
   The wrapper ships `hidden` and werco.js reveals it. `.job-field` sets
   display:flex, and a class selector beats the user-agent's
   `[hidden] { display: none }` — without these two guards the control would show
   for visitors who cannot use it, and the chosen-file row would show before a
   file was chosen. Same trap as `.job-apply__success[hidden]` above. */
.job-cv[hidden] { display: none; }
.job-cv__chosen[hidden] { display: none; }

/* Clipped, not display:none: the input keeps its place in the tab order so the
   picker is reachable without a mouse. */
.job-cv__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.job-cv__drop {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1rem;
  background: var(--white);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .job-cv__drop:hover {
    border-color: var(--blue);
    color: var(--text);
  }
}
.job-cv__drop.is-dragover {
  border-color: var(--blue);
  border-style: solid;
  background: var(--blue-light);
  color: var(--blue-dark);
}
.job-cv__drop.is-uploading {
  cursor: progress;
  border-color: var(--blue);
  color: var(--blue-dark);
}
.job-cv__drop.is-invalid { border-color: var(--danger); }

/* The focus ring belongs on the thing the visitor sees, not on the clipped input. */
.job-cv__input:focus-visible + .job-cv__drop {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .job-cv__drop { transition: none; }
}

.job-cv__drop-text { flex: 1; }

.job-cv__chosen {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.625rem 0.75rem 0.625rem 1rem;
  background: var(--blue-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.job-cv__name {
  flex: 1;
  font-size: 0.875rem;
  color: var(--blue-dark);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.job-cv__remove {
  flex-shrink: 0;
  min-height: 32px;
  padding: 0.25rem 0.75rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .job-cv__remove:hover { color: var(--danger); border-color: var(--danger); }
}
.job-cv__remove:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.job-cv__hint {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
}