/* ===========================
   GetCraivo — one-page site
   Design tokens (colors, fonts, radius) live in styles/tokens.css,
   loaded before this file on every page.
   =========================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}
body, h1, h2, h3, p, figure, blockquote {
  margin: 0;
}
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, textarea { font: inherit; }

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: var(--navy);
  padding: 10px 16px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.eyebrow-light { color: var(--gold-light); }

.section-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 16px;
  text-wrap: balance;
}
.section-sub {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 620px;
  text-wrap: pretty;
}
.section-head {
  margin-bottom: 52px;
}
.pricing-note {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: -28px;
  margin-bottom: 32px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  font-weight: 600;
  text-align: center;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1), background 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--navy);
  box-shadow: 0 12px 30px -12px rgba(var(--gold-rgb), 0.55);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(var(--gold-rgb), 0.65);
}
.btn-large { padding: 16px 34px; font-size: 1rem; }
.btn-small { padding: 10px 20px; font-size: 0.88rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  z-index: 500;
  background: rgba(var(--navy-rgb), 0.0);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* Fully opaque instead of a translucent blur: backdrop-filter measured
   ~19% higher main-thread cost during active scroll (it resamples
   everything behind the fixed header on every frame). Full opacity
   needs no resampling at all and can't show bleed-through by
   definition, so it's a strict improvement over the blur, not a
   trade-off -- confirmed visually identical at rest. */
.site-header.scrolled {
  background: rgba(var(--navy-rgb), 1);
  box-shadow: 0 8px 30px -20px rgba(0,0,0,0.5);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
}
.logo img {
  display: block;
  height: 40px;
  width: auto;
}

/* ---------- Dot pipeline: the signature motion motif ----------
   5 dots evolving navy -> gold, echoing the Craivo logomark. Header
   version is small and decorative; the rail version (homepage, desktop
   only) is the scroll-progress indicator. See docs/redesign-polish-spec.md §1. */
.header-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
}
.header-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease, clip-path 0.4s ease, border-radius 0.4s ease;
}
.header-dot.is-lit {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.15);
}
.header-dot:last-child.is-lit {
  border-radius: 2px;
  clip-path: polygon(15% 0%, 15% 100%, 100% 50%);
  transform: scale(1.3);
}
@media (max-width: 560px) {
  .header-dots { display: none; }
}

.nav-list {
  display: flex;
  gap: 34px;
}
.nav-list a {
  color: var(--text-on-navy);
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s ease;
  position: relative;
}
.nav-list a:hover,
.nav-list a:focus-visible { color: var(--gold-light); }

.header-cta {
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.header-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.nav-lang-item { display: none; }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}
.lang-switch a {
  color: var(--text-on-navy-muted);
  transition: color 0.2s ease;
}
.lang-switch a:hover,
.lang-switch a:focus-visible {
  color: var(--gold-light);
}
.lang-switch a.lang-active {
  color: var(--gold-light);
}
.lang-switch .lang-sep {
  color: rgba(255, 255, 255, 0.3);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: radial-gradient(circle at 80% 0%, var(--navy-softer) 0%, var(--navy) 55%), var(--navy);
  padding: calc(var(--header-height) + 72px) 0 96px;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(var(--gold-rgb),0.14) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.hero-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.18;
  color: var(--white);
  margin-bottom: 22px;
}
.hero-sub {
  color: var(--text-on-navy-muted);
  font-size: 1.1rem;
  max-width: 520px;
  margin-bottom: 34px;
}
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hero-note { color: var(--text-on-navy-muted); font-size: 0.88rem; }

.hero-visual {
  --carousel-card-w: 230px;
  --carousel-card-h: calc(var(--carousel-card-w) * 1.25);
  --carousel-radius: 150px;
  display: flex;
  justify-content: center;
}
.carousel-scene {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: calc(var(--carousel-card-h) + 40px);
  perspective: 1300px;
  /* Establishes a real 3D space so the browser depth-sorts the four
     cards by their actual rotateY/translateZ position every frame --
     the front card always paints over the others, including mid-
     transition, with no manual z-index bookkeeping needed. */
  transform-style: preserve-3d;
}
/* Each card orbits the scene's center on an invisible circle (0/90/
   180/270deg via a phased animation-delay) and is biggest+sharpest
   at the front, smaller+dimmer at the sides, smallest+dimmest at the
   back. Depth is conveyed via scale + filter (brightness/saturate),
   never opacity -- the navy card background must stay fully opaque
   so cards never show through one another. */
.visual-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--carousel-card-w);
  height: var(--carousel-card-h);
  margin-top: calc(var(--carousel-card-h) / -2);
  margin-left: calc(var(--carousel-card-w) / -2);
  background: var(--navy-soft);
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
  animation: carousel-orbit 24s linear infinite;
}
.visual-card:nth-child(1) { animation-delay: 0s; }
.visual-card:nth-child(2) { animation-delay: -6s; }
.visual-card:nth-child(3) { animation-delay: -12s; }
.visual-card:nth-child(4) { animation-delay: -18s; }
@keyframes carousel-orbit {
  0%   { transform: rotateY(0deg)   translateZ(var(--carousel-radius)) scale(1);    filter: brightness(1) saturate(1); }
  25%  { transform: rotateY(90deg)  translateZ(var(--carousel-radius)) scale(0.74); filter: brightness(0.58) saturate(0.78); }
  50%  { transform: rotateY(180deg) translateZ(var(--carousel-radius)) scale(0.56); filter: brightness(0.5) saturate(0.7); }
  75%  { transform: rotateY(270deg) translateZ(var(--carousel-radius)) scale(0.74); filter: brightness(0.58) saturate(0.78); }
  100% { transform: rotateY(360deg) translateZ(var(--carousel-radius)) scale(1);    filter: brightness(1) saturate(1); }
}
/* Gold focus glow on the front card, layered as a separate pseudo-
   element animating only `opacity` (compositor-only, unlike
   box-shadow which would repaint every frame if animated directly)
   so it stays cheap during the continuous 24s loop. */
.visual-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.45), 0 0 34px -8px rgba(var(--gold-rgb), 0.55);
  opacity: 0;
  pointer-events: none;
  animation: carousel-glow 24s linear infinite;
}
.visual-card:nth-child(1)::after { animation-delay: 0s; }
.visual-card:nth-child(2)::after { animation-delay: -6s; }
.visual-card:nth-child(3)::after { animation-delay: -12s; }
.visual-card:nth-child(4)::after { animation-delay: -18s; }
@keyframes carousel-glow {
  0%   { opacity: 1; }
  8%   { opacity: 0; }
  92%  { opacity: 0; }
  100% { opacity: 1; }
}
/* Carousel scene pauses on hover; kept as a single rule so the card
   and its label (see below) always stay in sync when resumed. */
.carousel-scene:hover .visual-card,
.carousel-scene:hover .visual-card::after,
.carousel-scene:hover .visual-tag,
.carousel-scene.is-offscreen .visual-card,
.carousel-scene.is-offscreen .visual-card::after,
.carousel-scene.is-offscreen .visual-tag {
  animation-play-state: paused;
}
.visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}
.visual-img-samenwerking {
  object-position: center 20%;
}
/* Billboard: the label runs the exact inverse of its card's rotateY
   keyframes (same delay), so it always faces the viewer even as the
   card it's pinned to spins away. It still inherits the card's scale
   and opacity through the transform/compositing stack, so it shrinks
   and fades with its card, only the rotation is cancelled out. */
.visual-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: calc(100% - 24px);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  /* Fallback for browsers without backdrop-filter: higher opacity so the
     label still holds up on its own without the glass blur underneath. */
  background: rgba(var(--navy-rgb), 0.85);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  line-height: 1.3;
  animation: carousel-tag-counter 24s linear infinite;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .visual-tag {
    background: rgba(var(--navy-rgb), 0.58);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }
}
.visual-card:nth-child(1) .visual-tag { animation-delay: 0s; }
.visual-card:nth-child(2) .visual-tag { animation-delay: -6s; }
.visual-card:nth-child(3) .visual-tag { animation-delay: -12s; }
.visual-card:nth-child(4) .visual-tag { animation-delay: -18s; }
@keyframes carousel-tag-counter {
  0%   { transform: rotateY(0deg); }
  25%  { transform: rotateY(-90deg); }
  50%  { transform: rotateY(-180deg); }
  75%  { transform: rotateY(-270deg); }
  100% { transform: rotateY(-360deg); }
}

/* Device-frame treatment for the hero carousel cards: a dark bezel
   around each image/video so the cards read as phone-like screens. */
.visual-card {
  padding: 6px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.visual-img,
.visual-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 22px;
}
/* Label chip: icon + text, top-left, same billboard behavior as before */
.visual-tag {
  display: flex;
  align-items: center;
  gap: 6px;
}
.visual-tag svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: rgba(var(--gold-rgb), 0.85);
}
.visual-tag svg * {
  stroke-width: 1.5;
}

/* ---------- Hero: headline / checks (homepage only) ---------- */
.hero-headline {
  font-family: var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 22px;
}
.hero-headline span {
  display: block;
}
.hero-headline .is-gold {
  color: var(--gold);
}
.hero-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.hero-checks li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-on-navy);
  font-size: 0.92rem;
  font-weight: 500;
}
.hero-checks svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
}
.hero-actions .btn svg {
  width: 16px;
  height: 16px;
}

/* ---------- USP bar (below hero) ---------- */
.usp-bar {
  background: var(--off-white);
  padding: 56px 0;
  border-bottom: 1px solid var(--border-soft);
}
.usp-bar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.usp-bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--gold);
  margin-bottom: 16px;
}
.usp-bar-icon svg {
  width: 22px;
  height: 22px;
}
.usp-bar-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: 6px;
}
.usp-bar-text {
  color: var(--text-muted);
  font-size: 0.92rem;
}
@media (max-width: 860px) {
  .usp-bar-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
  .usp-bar { padding: 40px 0; }
  .usp-bar-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- Sections ---------- */
.section {
  padding: 100px 0;
}
.section-alt {
  background: var(--off-white);
}

/* ---------- Werkwijze / Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.step-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 34px 28px;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.step-number {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 14px;
}
.step-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 12px;
}
.step-text {
  color: var(--text-muted);
  font-size: 0.98rem;
}

/* ---------- Process section: "Zo werkt het" scroll-story ----------
   Base layout is a plain vertical stack -- this is what no-JS, mobile
   and reduced-motion users see, always fully visible. The side-by-side
   pinned choreography is an enhancement layered on top only for
   desktop viewports with motion allowed (see main.js). */
.process-pin {
  display: block;
  margin-top: 48px;
}
.process-steps {
  display: flex;
  flex-direction: column;
}
.process-step {
  padding: 22px 0;
  border-top: 1px solid var(--border-soft);
}
.process-step:first-child {
  border-top: none;
}
.process-step-number {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  transition: color 0.4s ease;
}
.process-step.is-active .process-step-number {
  color: var(--gold);
}
.process-step-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}
.process-step-text {
  color: var(--text-muted);
  font-size: 0.96rem;
}

.process-video-trigger {
  position: relative;
  display: block;
  margin: 36px auto 0;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: var(--navy);
  width: 100%;
  max-width: 420px;
}
.process-video-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.process-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 45px -18px rgba(var(--gold-rgb), 0.7);
  transition: transform 0.25s ease;
}
.process-play-button svg {
  width: 26px;
  height: 26px;
  color: var(--navy);
  margin-left: 3px;
}
.process-video-trigger:hover .process-play-button,
.process-video-trigger:focus-visible .process-play-button {
  transform: translate(-50%, -50%) scale(1.06);
}

/* Desktop, motion allowed: side-by-side pinned scroll-story. Reduced-
   motion desktop and any no-JS viewport keep the vertical stack above --
   gating this in the media query itself (not just in JS) means reduced-
   motion never sees the two-column layout, matching the spec exactly. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .process-pin {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .process-video-trigger {
    margin: 0;
    width: auto;
    max-width: none;
    height: min(70vh, 680px);
    justify-self: center;
  }
}

/* ---------- Portfolio ---------- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.portfolio-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.portfolio-media {
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(135deg, rgba(var(--navy-rgb),0.06), rgba(var(--gold-rgb),0.14)),
    repeating-linear-gradient(-45deg, rgba(var(--navy-rgb),0.04) 0 2px, transparent 2px 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px dashed rgba(var(--navy-rgb), 0.15);
}
.portfolio-media-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
  text-align: center;
  padding: 0 20px;
}
/* Gouden play-badge op de videotegel van de portfoliogalerijen. Stond
   ooit ook op de hover-carrousel van de portfoliokaarten; die kaarten
   bestaan niet meer, dus alleen de trigger-variant is over. */
.portfolio-play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 32px -14px rgba(var(--gold-rgb), 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.portfolio-play-badge svg {
  width: 20px;
  height: 20px;
  color: var(--navy);
  margin-left: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-play-badge {
    transition: none;
  }
}

/* Standalone video trigger for the full portfolio page galleries
   (/portfolio, /en/portfolio): a poster image + play badge that opens
   the shared lightbox, replacing the old inline <video controls>. */
.portfolio-video-trigger {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
}
.portfolio-video-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portfolio-video-trigger .portfolio-play-badge {
  opacity: 1;
  pointer-events: none;
}

.portfolio-body { padding: 26px; }
.portfolio-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.portfolio-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(var(--gold-rgb), 0.12);
  padding: 5px 12px;
  border-radius: 999px;
}
.portfolio-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  border: 1px solid var(--border-soft);
  padding: 4px 11px;
  border-radius: 999px;
}
.portfolio-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}
.portfolio-text {
  color: var(--text-muted);
  font-size: 0.95rem;
}
.portfolio-cta {
  text-align: center;
  margin-top: 48px;
}

/* ---------- Waarom GetCraivo / USP ---------- */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.usp-card {
  padding: 30px 24px;
  border-radius: var(--radius);
  background: var(--off-white);
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
.usp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.usp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--navy);
  color: var(--gold-light);
  margin-bottom: 18px;
}
.usp-icon svg { width: 22px; height: 22px; }
.usp-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}
.usp-text {
  color: var(--text-muted);
  font-size: 0.94rem;
}

/* ---------- Meer dan creatives / Services ---------- */
.section-services {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.section-services::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(var(--gold-rgb),0.12), transparent 45%);
  pointer-events: none;
}
.section-services .container { position: relative; }
.section-services .section-title { color: var(--white); }
.section-services .section-sub { color: var(--text-on-navy-muted); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 32px;
  margin-bottom: 32px;
}
.service-item {
  padding: 22px 0;
  border-top: 1px solid rgba(var(--gold-rgb), 0.18);
}
.service-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold-light);
  margin-bottom: 8px;
}
.service-text {
  color: var(--text-on-navy-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}
.services-note {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
}
.services-note a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
.services-note a:hover,
.services-note a:focus-visible {
  color: var(--white);
}

/* ---------- Contact ---------- */
.section-contact {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.section-contact::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, rgba(var(--gold-rgb),0.12), transparent 45%);
  pointer-events: none;
}
.contact-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.contact-intro .section-title { color: var(--white); }
.contact-intro .section-sub { color: var(--text-on-navy-muted); }
.contact-email {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--gold-light);
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.4);
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.contact-email:hover,
.contact-email:focus-visible { color: var(--white); border-color: var(--white); }

.contact-form {
  background: var(--navy-soft);
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  border-radius: var(--radius);
  padding: 34px;
}
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-on-navy);
  margin-bottom: 8px;
}
.form-group input,
.form-group textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--white);
  resize: vertical;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.07);
}
.form-submit { width: 100%; margin-top: 6px; }
.form-note {
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--text-on-navy-muted);
  text-align: center;
}
.contact-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.contact-divider::before,
.contact-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border-radius: 999px;
  padding: 13px 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f2f4f8;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.whatsapp-btn:hover {
  border-color: #25d366;
  background: rgba(37, 211, 102, 0.08);
}
.whatsapp-btn svg { flex-shrink: 0; }

/* ---------- WhatsApp floating action button (all public pages) ---------- */
.whatsapp-fab {
  position: fixed;
  bottom: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 24px;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, background 0.2s ease;
}
.whatsapp-fab svg { width: 28px; height: 28px; }
.whatsapp-fab:hover {
  transform: scale(1.08);
  background: #2ae174;
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab:hover { transform: none; }
}

/* ---------- Voorbeeldbatch multi-step form (/voorbeeldbatch) ---------- */
.btn-secondary {
  background: transparent;
  color: var(--text-on-navy);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--gold);
  color: var(--gold-light);
  transform: translateY(-2px);
}
.btn-medium { padding: 13px 26px; font-size: 0.95rem; }

/* Same outline button, but for light backgrounds -- .btn-secondary's
   near-white text/border is invisible outside a navy card (see /portaal). */
.btn-secondary-light {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--border-soft);
}
.btn-secondary-light:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

/* Destructive action (klant verwijderen) -- same .btn shape/sizing, own color. */
.btn-danger {
  background: #b2261e;
  color: var(--white);
  border: 1px solid #b2261e;
}
.btn-danger:hover,
.btn-danger:focus-visible {
  background: #94201a;
  border-color: #94201a;
}

.voorbeeldbatch-card {
  background: var(--navy-soft);
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  border-radius: var(--radius);
  padding: 40px;
  max-width: 640px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .voorbeeldbatch-card { padding: 26px 22px; }
}

/* Step indicator: three pills, current one gold-lit, completed ones
   ticked -- purely a progress cue, the panels themselves are the
   source of truth for which step is active. */
.tb-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 32px;
  list-style: none;
  padding: 0;
}
.tb-step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.tb-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--text-on-navy-muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.tb-step-label {
  color: var(--text-on-navy-muted);
  font-size: 0.82rem;
  font-weight: 600;
  transition: color 0.2s ease;
}
.tb-step.is-active .tb-step-num {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--navy);
}
.tb-step.is-active .tb-step-label { color: var(--text-on-navy); }
.tb-step.is-done .tb-step-num {
  border-color: var(--gold);
  color: var(--gold-light);
}
.tb-step.is-done .tb-step-label { color: var(--text-on-navy-muted); }
.tb-step-connector {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 2px;
}

.tb-optional {
  font-weight: 400;
  color: var(--text-on-navy-muted);
}

.tb-panel-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--white);
  margin-bottom: 20px;
}
.tb-panel-title:focus { outline: none; }

.form-group.has-error input,
.form-group.has-error textarea {
  border-color: #e08585;
  background: rgba(224, 133, 133, 0.08);
}
.form-error-msg {
  display: none;
  margin-top: 7px;
  font-size: 0.8rem;
  color: #f0a3a3;
}
.form-group.has-error .form-error-msg { display: block; }

.tb-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tb-choice {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 150px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-on-navy);
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.tb-choice input {
  accent-color: var(--gold);
  flex-shrink: 0;
}
.tb-choice:hover { border-color: rgba(var(--gold-rgb), 0.5); }
.tb-choice:has(input:checked) {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.12);
}

.tb-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: var(--text-on-navy);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.tb-upload-label:hover {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.08);
}
.tb-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.tb-upload-note {
  margin-top: 9px;
  font-size: 0.78rem;
  color: var(--text-on-navy-muted);
  line-height: 1.5;
}
.tb-file-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tb-file-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
}
.tb-file-name {
  color: var(--text-on-navy);
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-file-remove {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-on-navy-muted);
  font-size: 1.1rem;
  line-height: 1;
  transition: color 0.2s ease, background 0.2s ease;
}
.tb-file-remove:hover {
  color: var(--white);
  background: rgba(224, 133, 133, 0.35);
}

.tb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 28px;
}
.tb-nav .btn-primary { margin-left: auto; }

.tb-error-banner {
  margin-top: 20px;
  padding: 14px 16px;
  background: rgba(224, 133, 133, 0.1);
  border: 1px solid rgba(224, 133, 133, 0.4);
  border-radius: 8px;
  color: #f0a3a3;
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ---------- Intake wizard (/intake) ----------
   Step count is dynamic (depends on which diensten the visitor picks in
   step 3), so unlike /voorbeeldbatch's fixed 3-pill .tb-steps this uses a
   simple "Stap X van Y" label + fill bar that JS updates on navigation. */
.iw-state { color: var(--text-on-navy-muted); }
.iw-progress { margin-bottom: 28px; }
.iw-progress-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-on-navy-muted);
  margin-bottom: 10px;
}
.iw-progress-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.iw-progress-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.25s ease;
}
.iw-save-feedback {
  display: block;
  margin: -14px 0 20px;
  min-height: 1.2em;
  font-size: 0.8rem;
  color: var(--text-on-navy-muted);
}

/* Hint under a label (persistent, unlike a placeholder) vs. a standalone
   informational line not tied to any field -- same muted/small treatment,
   different spacing context. */
.iw-hint {
  margin: -6px 0 10px;
  font-size: 0.8rem;
  color: var(--text-on-navy-muted);
  line-height: 1.5;
}
.iw-note {
  margin: 10px 0 20px;
  font-size: 0.8rem;
  color: var(--text-on-navy-muted);
  line-height: 1.6;
}
/* Zachte controlevraag onder een veld: geen fout, alleen een "klopt dit?".
   Daarom de goud-accentkleur en niet het rood van .form-error-msg. */
.iw-check {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--gold);
  line-height: 1.5;
}
.iw-required-mark {
  color: var(--gold);
  margin-left: 3px;
}
.iw-required-legend { margin: 0 0 20px; }

/* Postcode + plaats side by side under the same "factuuradres" group;
   straat/huisnummer stays full-width above it. */
.iw-adres-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) {
  .iw-adres-row { grid-template-columns: 1fr; }
}

/* Diensten step: each choice gets a short description under its title. */
.tb-choice-stacked { align-items: flex-start; }
.tb-choice-text { display: flex; flex-direction: column; gap: 3px; }
.tb-choice-title { color: var(--text-on-navy); }
.tb-choice-desc {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-on-navy-muted);
  line-height: 1.4;
}

/* Links inside a choice label (e.g. the algemene voorwaarden link) --
   default link blue is illegible on the navy card background. */
.tb-choice a {
  color: var(--gold-light);
  text-decoration: underline;
}
.tb-choice a:hover,
.tb-choice a:focus-visible {
  color: var(--gold);
}

.voorbeeldbatch-success {
  text-align: center;
  padding: 20px 0;
}
.voorbeeldbatch-success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), 0.14);
  color: var(--gold);
}
.voorbeeldbatch-success-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--white);
  margin-bottom: 12px;
}
.voorbeeldbatch-success-text {
  color: var(--text-on-navy-muted);
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 440px;
  margin: 0 auto 26px;
}
.voorbeeldbatch-success-warning {
  color: #f0a3a3;
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 440px;
  margin: -12px auto 26px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-deep);
  padding: 48px 0;
  text-align: center;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.footer-logo {
  font-size: 1.3rem;
  color: var(--white);
  display: block;
}
.footer-logo img {
  display: block;
  height: 52px;
  width: auto;
}
.footer-text {
  color: var(--text-on-navy-muted);
  font-size: 0.9rem;
}
.footer-email {
  color: var(--gold-light);
  font-size: 0.9rem;
  margin-top: 4px;
}
.footer-links {
  margin-top: 4px;
}
/* Extra ademruimte tussen het merk-blok (logo/tagline/e-mail) en het
   juridische blok (voorwaarden/disclaimer/copyright). */
.footer-email + .footer-links {
  margin-top: 32px;
}
.footer-links a {
  color: var(--text-on-navy-muted);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-links a:hover {
  color: var(--gold-light);
}
.footer-disclaimer {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
  line-height: 1.5;
  max-width: 620px;
  margin-top: 4px;
  text-wrap: pretty;
}
.footer-copy {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.8rem;
  margin-top: 14px;
}
@media (max-width: 640px) {
  /* Extra footer clearance so the fixed FAB never sits over the last
     footer line once the page is scrolled all the way down. */
  .site-footer { padding-bottom: 110px; }
}

/* ---------- Scroll animations ----------
   No hidden initial state here on purpose: content must render visible
   without JavaScript. script.js/main.js set the hidden state inline via
   el.style before observing, then clear it (or animate it away) on
   reveal, so this rule only ever supplies the transition itself. */
[data-animate] {
  transition: opacity 0.7s ease, transform 0.7s ease;
}
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
  .header-dot {
    transition: none !important;
  }
}

/* Static 2x2 grid: the desktop fallback for prefers-reduced-motion,
   used instead of the spinning 3D carousel. Mobile no longer shows
   the card grid at all (see the max-width:640px block below), so
   this is scoped to reduced-motion only now. */
@media (prefers-reduced-motion: reduce) {
  .hero-visual {
    display: block;
  }
  .carousel-scene {
    display: grid;
    width: 100%;
    max-width: none;
    height: auto;
    perspective: none;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-template-areas:
      "tl tr"
      "bl br";
    gap: 14px;
  }
  .visual-card[data-slot="tl"] { grid-area: tl; }
  .visual-card[data-slot="tr"] { grid-area: tr; }
  .visual-card[data-slot="bl"] { grid-area: bl; }
  .visual-card[data-slot="br"] { grid-area: br; }
  .visual-card {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    aspect-ratio: 4 / 5;
    margin: 0;
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
  .visual-card::after {
    animation: none;
    opacity: 0;
  }
  .visual-tag {
    animation: none;
    transform: none;
  }
}

/* Mobile hero: the card grid/carousel is hidden entirely -- the
   mobile hero is copy + CTA only. Desktop (including desktop with
   prefers-reduced-motion, handled above) is untouched. Placed after
   the reduced-motion block above so it wins for mobile even when
   reduced-motion is also active. */
@media (max-width: 640px) {
  .hero-visual {
    display: none;
  }
}

/* Hero copy must never depend on JS or any reveal/animation state
   for its initial visibility -- on mobile it is unconditionally
   visible, full stop. Desktop keeps the normal JS-driven
   [data-animate] fade-in untouched. */
@media (max-width: 640px) {
  .hero-content,
  .hero-content * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 1024px) {
  .steps { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { margin-top: 20px; }
}

@media (min-width: 861px) and (max-width: 930px) {
  .nav-item-optional { display: none; }
}

@media (max-width: 860px) {
  .nav-list { display: none; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: rgba(var(--navy-rgb), 0.98);
    backdrop-filter: blur(10px);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav.open { max-height: 400px; }
  .nav .nav-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 24px;
  }
  .nav .nav-list > li > a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav .nav-list::after {
    content: "";
  }

  .nav-lang-item {
    display: block;
    padding: 14px 0 4px;
  }
  .nav-lang-item .lang-switch {
    justify-content: flex-start;
    font-size: 0.95rem;
  }

  .contact-wrap { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .usp-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .section { padding: 72px 0; }
  .hero { padding: calc(var(--header-height) + 24px) 0 32px; }
  .hero-actions { width: 100%; }
  .btn-large { width: 100%; }
  .contact-form { padding: 26px 22px; }
  .header-inner { gap: 12px; }

  /* Long button labels no longer force horizontal page overflow on
     narrow phones: let them wrap to two lines instead of clipping.
     Taller buttons on mobile are an accepted trade-off. */
  .btn {
    white-space: normal;
    line-height: 1.3;
  }
}

@media (max-width: 400px) {
  .header-inner { gap: 6px; }
  .logo { font-size: 1.2rem; }
  .lang-switch { font-size: 0.75rem; gap: 4px; }
}

/* ---------- Lightbox ---------- */
body.lightbox-open {
  overflow: hidden;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(var(--navy-rgb), 0.95);
  opacity: 0;
  padding: 88px 24px 32px;
  transition: opacity 0.3s ease;
}
.lightbox.is-visible { display: flex; }
.lightbox.is-open { opacity: 1; }

.lightbox-dialog {
  position: relative;
  width: 100%;
  max-width: 1080px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: scale(0.94);
  transition: transform 0.3s ease;
}
.lightbox.is-open .lightbox-dialog { transform: scale(1); }

.lightbox-stage {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lightbox-media {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
}
img.lightbox-media {
  cursor: zoom-in;
  touch-action: none;
  transition: transform 0.25s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-stage.is-zoomed img.lightbox-media {
  cursor: grab;
  border-radius: 0;
}
.lightbox-stage.is-zoomed img.lightbox-media:active {
  cursor: grabbing;
}
@media (prefers-reduced-motion: reduce) {
  img.lightbox-media {
    transition: none;
  }
}

.lightbox-info {
  text-align: center;
  margin-top: 20px;
  flex-shrink: 0;
}
.lightbox-brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--white);
}
.lightbox-caption {
  font-size: 0.88rem;
  color: var(--text-on-navy-muted);
  margin-top: 4px;
}

.lightbox-dots {
  display: flex;
  gap: 9px;
  margin-top: 18px;
  flex-shrink: 0;
}
.lightbox-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox-dot:hover { background: rgba(255, 255, 255, 0.55); }
.lightbox-dot.is-active {
  background: var(--gold);
  transform: scale(1.25);
}

/* Single-item opens (a standalone video, e.g. from the process section
   or a full-portfolio-page gallery) have nothing to navigate to. */
.lightbox.is-single .lightbox-dots,
.lightbox.is-single .lightbox-arrow {
  display: none;
}

.lightbox-close,
.lightbox-arrow {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox-close:hover,
.lightbox-close:focus-visible,
.lightbox-arrow:hover,
.lightbox-arrow:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}
.lightbox-close svg,
.lightbox-arrow svg { width: 20px; height: 20px; }

.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover,
.lightbox-prev:focus-visible { transform: translateY(-50%) scale(1.05); }
.lightbox-next:hover,
.lightbox-next:focus-visible { transform: translateY(-50%) scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox-dialog {
    transition: none;
  }
}

@media (max-width: 700px) {
  .lightbox { padding: 76px 16px 24px; }
  .lightbox-close { top: 16px; right: 16px; width: 38px; height: 38px; }
  .lightbox-prev { left: 8px; width: 38px; height: 38px; }
  .lightbox-next { right: 8px; width: 38px; height: 38px; }
}

/* ---------- Terms page ---------- */
.terms-page {
  padding: 72px 0 96px;
  background: var(--white);
}
.terms-container {
  max-width: 720px;
}
.terms-topbar {
  margin-bottom: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.terms-logo {
  color: var(--navy);
}
.terms-topbar .lang-switch a {
  color: var(--text-muted);
}
.terms-topbar .lang-switch a:hover,
.terms-topbar .lang-switch a:focus-visible,
.terms-topbar .lang-switch a.lang-active {
  color: var(--gold);
}
.terms-topbar .lang-switch .lang-sep {
  color: var(--border-soft);
}
.terms-title {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--navy);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.25;
  margin-bottom: 8px;
}
.terms-version {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 28px;
}
.terms-intro {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.85;
  margin-bottom: 8px;
}
.terms-hr {
  border: 0;
  border-top: 1px solid var(--border-soft);
  margin: 32px 0;
}
.terms-heading {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--gold);
  font-size: 1.25rem;
  margin: 0 0 16px;
}
.terms-article {
  margin-bottom: 36px;
}
.terms-article ol {
  list-style: decimal;
  padding-left: 22px;
}
.terms-article li {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.85;
  margin-bottom: 14px;
}
.terms-article li strong {
  color: var(--navy);
}
.terms-closing {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 8px;
}

/* ===========================
   Content pages (SEO: services & articles)
   =========================== */

/* Single-column hero variant for service/article pages: same navy
   hero as the homepage, minus the two-column carousel grid. */
.page-hero-inner {
  display: block;
  max-width: 720px;
}
.meta-line {
  color: var(--gold-light);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.answer-block {
  margin-top: 28px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  color: var(--text-on-navy);
  font-size: 1.02rem;
  line-height: 1.75;
}
.answer-block strong {
  color: var(--gold-light);
}

/* Prose: long-form article/service body content */
.content-section {
  padding: 88px 0;
}
.content-section.section-alt {
  background: var(--off-white);
}
.prose {
  max-width: 740px;
}
.prose > *:first-child { margin-top: 0; }
.prose h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.3;
  color: var(--navy);
  margin: 48px 0 18px;
}
.prose p {
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.85;
  margin-bottom: 18px;
}
.prose ul,
.prose ol {
  margin: 0 0 18px;
  padding-left: 22px;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li {
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 10px;
}
.prose a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(var(--gold-rgb), 0.4);
  text-underline-offset: 3px;
}
.prose a:hover { text-decoration-color: var(--gold); }
.prose strong { color: var(--navy); }

/* Beeld in een artikel. Het bijschrift volgt de lijn van de plaat-
   bijschriften in lux.css: mono, klein, uppercase, boven een haarlijn. */
.prose-figure {
  margin: 32px 0;
}
.prose-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
}
.prose-figure figcaption {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--lx-hair-dark);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lx-ink-dim);
}

/* "Card met lijst" -- a bulleted list styled as a card */
.card-list {
  background: var(--off-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 30px 32px;
  margin-bottom: 18px;
  list-style: none !important;
}
.card-list li {
  padding-left: 22px;
  position: relative;
  list-style: none;
}
.card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.card-list li:last-child { margin-bottom: 0; }

/* Data / pricing tables */
.table-wrap {
  overflow-x: auto;
  margin-bottom: 24px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.data-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.data-table th,
.data-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  white-space: normal;
}
.data-table th {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
}
.data-table td { color: var(--text); }
.data-table tr:last-child td { border-bottom: none; }

/* FAQ */
.faq-list { margin-top: 8px; }
.faq-item {
  border-bottom: 1px solid var(--border-soft);
  padding: 22px 0;
}
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border-bottom: none; }
.faq-q {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--navy);
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.faq-a {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.75;
  text-wrap: pretty;
}

/* Variant showcase (diensten/ad-creatives, en/services/ad-creatives) */
.variant-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.variant-item {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--white);
}
.variant-item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.variant-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  padding: 10px 8px;
  background: var(--off-white);
  border-top: 1px solid var(--border-soft);
}
.variant-note {
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: 720px;
}
.variant-note a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(var(--gold-rgb), 0.4);
  text-underline-offset: 3px;
}
.variant-note a:hover {
  text-decoration-color: var(--gold);
}
@media (max-width: 700px) {
  .variant-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Homepage FAQ accordion: native <details>/<summary> for structure and
   no-JS support, a pure-CSS grid-template-rows transition for the
   smooth open/close (reacts to the native [open] attribute, so it
   works identically with or without JavaScript -- there is nothing
   here for main.js to own or enhance). Multiple items can be open at
   once since none share a `name` attribute. */
.faq-accordion {
  max-width: 760px;
}
.faq-accordion-item {
  border-bottom: 1px solid var(--border-soft);
}
.faq-accordion-item:first-child {
  border-top: 1px solid var(--border-soft);
}
.faq-accordion-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--navy);
  transition: color 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
.faq-accordion-item summary:hover {
  color: var(--gold);
}
.faq-accordion-item summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.faq-accordion-item summary::-webkit-details-marker {
  display: none;
}
.faq-accordion-item summary::marker {
  content: "";
}
.faq-accordion-chevron {
  width: 20px;
  height: 20px;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.faq-accordion-item[open] .faq-accordion-chevron {
  transform: rotate(180deg);
}
.faq-accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.faq-accordion-item[open] .faq-accordion-body {
  grid-template-rows: 1fr;
}
.faq-accordion-body-inner {
  overflow: hidden;
  min-height: 0;
}
.faq-accordion-body .faq-a {
  padding-bottom: 22px;
}
@media (prefers-reduced-motion: reduce) {
  .faq-accordion-body,
  .faq-accordion-chevron {
    transition: none;
  }
}

/* Final CTA repeated at the bottom of every content page */
.final-cta {
  text-align: center;
}
.final-cta .btn { margin-bottom: 12px; }
.final-cta-note {
  color: var(--text-muted);
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .content-section { padding: 64px 0; }
  .prose h2 { margin: 36px 0 14px; }
  .card-list { padding: 24px 22px; }
  .data-table th, .data-table td { padding: 12px 14px; font-size: 0.9rem; }
}

/* Service tiles (used on the /diensten and /en/services hub) */
.service-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.service-tile {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
.service-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
/* height:auto overrules the height attribute on the <img>; without it the
   attribute wins and aspect-ratio never kicks in, leaving the tiles with
   unequal image heights. */
.service-tile img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.service-tile-body {
  padding: 26px 28px 30px;
}
.service-tile-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--navy);
  margin-bottom: 10px;
}
.service-tile-text {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}
.service-tile-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Company details list (used on /over-ons and /en/about) */
.facts-list {
  list-style: none !important;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-soft);
  max-width: 560px;
}
.facts-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 14px 0;
  margin: 0;
  border-bottom: 1px solid var(--border-soft);
  list-style: none;
}
.facts-list dfn,
.facts-list .facts-label {
  font-style: normal;
  font-weight: 600;
  color: var(--navy);
  min-width: 170px;
}

/* Closing note under a steps row (used on the services hub) */
.steps + .prose {
  margin-top: 32px;
}

/* Four tiles stay four-up only while the container is at full width
   (1180px), so a tile never drops below ~265px. Below that: 2x2, then 1. */
@media (max-width: 1180px) {
  .service-tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .service-tile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .service-tile-body { padding: 22px 22px 26px; }
}

/* Price factors and the brochure download (/tarieven, /en/pricing) */
.factor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.factor-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.factor-card-label {
  display: block;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.factor-card-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--navy);
  margin-bottom: 8px;
}
.factor-card-text {
  color: var(--text-muted);
  font-size: 0.96rem;
  line-height: 1.7;
}

.download-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 34px 36px;
  max-width: 620px;
}
.download-card-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 10px;
}
.download-card-text {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 24px;
}
.download-card .field-light { margin-bottom: 18px; }
/* De foutmelding onder een veld hangt aan .has-error op de wrapper, net als
   in .form-group; los daarvan blijft hij leeg en onzichtbaar. */
.download-card .form-error-msg { display: none; }
.download-card .has-error .form-error-msg { display: block; }
.download-optional {
  color: var(--text-muted);
  font-weight: 500;
}
.download-privacy {
  align-items: flex-start;
  margin: 22px 0 6px;
}
.download-privacy input { margin-top: 3px; }
.download-privacy label { line-height: 1.6; }
.download-privacy a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.download-error {
  margin-top: 18px;
  padding: 13px 16px;
  border-radius: 8px;
  background: rgba(192, 80, 77, 0.08);
  border: 1px solid rgba(192, 80, 77, 0.35);
  color: #8c3835;
  font-size: 0.93rem;
  line-height: 1.6;
}
.download-submit { margin-top: 24px; }
.download-success:focus { outline: none; }
.download-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), 0.16);
  color: var(--gold);
  margin-bottom: 16px;
}
.download-success-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--navy);
  margin-bottom: 8px;
}
.download-success-text {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 22px;
}

/* Datum onder de privacyverklaring (/privacy, /en/privacy) */
.privacy-updated {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .factor-card { padding: 22px 22px; }
  .download-card { padding: 26px 22px; }
}

/* Article overview cards (used on /blog and /en/blog) */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.article-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 30px 28px;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.article-card-tag {
  display: inline-block;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.article-card-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--navy);
  margin-bottom: 10px;
}
.article-card-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .article-card { padding: 24px 22px; }
}

/* ===========================
   Full portfolio page (/portfolio, /en/portfolio)
   =========================== */
.notice-block {
  background: var(--off-white);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 18px 22px;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
}
.portfolio-full-block {
  margin-bottom: 64px;
}
.portfolio-full-block:last-child {
  margin-bottom: 0;
}
.portfolio-full-head {
  margin-bottom: 22px;
}
.portfolio-full-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  color: var(--navy);
  margin: 10px 0 8px;
}
.portfolio-full-text {
  color: var(--text-muted);
  font-size: 0.98rem;
  max-width: 640px;
}
/* Eén raster per case, met tegels van gelijke hoogte. De 4:5-verhouding
   staat op de tegel, niet op het beeld: staande en liggende bronbestanden
   krijgen daardoor dezelfde tegelmaat en breken de rij niet open. Het
   bijsnijden gebeurt alleen hier; de lightbox toont het originele bestand
   in zijn eigen verhouding (.lightbox-media gebruikt object-fit: contain). */
.portfolio-full-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  align-items: start;
}
/* Elke directe tegel is even hoog, of het nu een beeld of een videotrigger
   is. De videotrigger telt zo gewoon mee in het raster in plaats van als
   los blok onder de rij te eindigen. */
.portfolio-full-gallery > img,
.portfolio-full-gallery > video,
.portfolio-full-gallery > .portfolio-video-trigger {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--navy);
  overflow: hidden;
}
.portfolio-full-gallery > img,
.portfolio-full-gallery > video {
  object-fit: cover;
  object-position: center;
}
/* Het beeld binnen een videotrigger vult de tegel en krijgt zelf geen rand
   of radius: de trigger is al de tegel, een tweede kader eromheen laat de
   videotegel anders ogen dan zijn buren. */
.portfolio-full-gallery > .portfolio-video-trigger > img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0;
  background: none;
}

/* Elke tegel opent de lightbox. De beelden zijn in de markup kale <img>;
   de knoprol en focusbaarheid komen uit script.js, hier staat alleen wat
   je ziet. De videotegel doet mee zodat de rij zich als één geheel
   gedraagt. */
.portfolio-full-gallery > img {
  cursor: zoom-in;
}
.portfolio-full-gallery > img,
.portfolio-full-gallery > .portfolio-video-trigger {
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.portfolio-full-gallery > img:hover,
.portfolio-full-gallery > .portfolio-video-trigger:hover {
  transform: scale(1.02);
  border-color: var(--gold);
}
.portfolio-full-gallery > img:focus-visible,
.portfolio-full-gallery > .portfolio-video-trigger:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-color: var(--gold);
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-full-gallery > img,
  .portfolio-full-gallery > .portfolio-video-trigger {
    transition: border-color 0.25s ease;
  }
  .portfolio-full-gallery > img:hover,
  .portfolio-full-gallery > .portfolio-video-trigger:hover {
    transform: none;
  }
}

@media (max-width: 640px) {
  .portfolio-full-block { margin-bottom: 48px; }
  .portfolio-full-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
/* Tussenmaat: met alleen auto-fill zou een tabletbreedte op twee brede
   tegels uitkomen. Drie is hier de prettigste dichtheid. */
@media (min-width: 641px) and (max-width: 1023px) {
  .portfolio-full-gallery { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Klantportaal (/portaal) ---------- */
/* Portal-scoped tokens. Colors/radius/fonts reuse the site-wide tokens in
   styles/tokens.css as-is (--navy, --gold, --gold-light, --text, --text-muted,
   --border-soft, --radius); this block only adds what the portal needed and
   didn't have: one shared page width and a spacing scale, so every tab
   measures itself against the same numbers instead of picking its own. */
#portal-page {
  --portal-max-width: 1180px;
  --portal-space-xs: 8px;
  --portal-space-sm: 12px;
  --portal-space-md: 16px;
  --portal-space-lg: 24px;
  --portal-space-xl: 32px;
}
/* .btn-primary is shared with the public site's gold gradient CTAs --
   scoped here so the portal's primary buttons go flat without touching
   marketing pages. .btn-secondary-light is already flat (border-only) and
   needs no override; it's used everywhere else in the portal already. */
#portal-page .btn-primary {
  background: var(--gold);
  box-shadow: none;
}
#portal-page .btn-primary:hover,
#portal-page .btn-primary:focus-visible {
  background: var(--gold-light);
  box-shadow: none;
}
.portal-login-card {
  background: var(--navy-soft);
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  border-radius: var(--radius);
  padding: 40px;
  max-width: 420px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .portal-login-card { padding: 26px 22px; }
}
/* Error banner variant for the light content-section background (the
   navy-card .tb-error-banner reds are unreadable on white/off-white). */
.portal-error-banner {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(178, 38, 30, 0.06);
  border: 1px solid rgba(178, 38, 30, 0.25);
  border-radius: 8px;
  color: #a3241d;
  font-size: 0.88rem;
  line-height: 1.6;
}
.portal-success-banner {
  margin-bottom: 16px;
  padding: 14px 16px;
  background: rgba(var(--gold-rgb), 0.08);
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  border-radius: 8px;
  color: var(--navy);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* One shared width for the whole logged-in app -- every tab measures
   itself against this instead of whatever its own content happens to need
   (the stat-tile row below used to be the clearest symptom: a flex row of
   fixed-width tiles that stopped a third of the way across the page). */
.portal-app {
  max-width: var(--portal-max-width);
  margin: 0 auto;
}

.portal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--portal-space-sm);
  padding-bottom: var(--portal-space-lg);
  margin-bottom: var(--portal-space-xl);
  border-bottom: 1px solid var(--border-soft);
}
.portal-user {
  color: var(--text-muted);
  font-size: 0.92rem;
}
.portal-user strong { color: var(--navy); }

.portal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--portal-space-md);
  margin-bottom: var(--portal-space-xl);
}
.stat-tile {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 20px 26px;
}
.stat-value {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  color: var(--navy);
  line-height: 1.1;
}
.stat-label {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.portal-loading,
.portal-empty {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Toelichting onder een tabel (legenda bij de stip op Folderdownloads). */
.portal-note {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 0.85rem;
}
/* Alleen-lezen tabel: geen klikbare rijen, dus ook geen aanwijzende cursor
   of hoverkleur die interactie suggereert. */
.portal-table-static tbody tr {
  cursor: default;
}
.portal-table-static tbody tr:hover { background: transparent; }
/* Stip voor een adres dat nog nergens anders in het portaal voorkomt. */
.portal-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 8px;
  vertical-align: middle;
}

/* Empty state for a whole tab (Klanten/Intakes/Aanvragen): a heading, one
   line of explanation and the primary action, instead of a bare sentence. */
.portal-empty-state {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--portal-space-xs);
  padding: var(--portal-space-xl);
  background: var(--off-white);
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius);
}
.portal-empty-state:not([hidden]) { display: flex; }
.portal-empty-state h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--navy);
  margin: 0;
}
.portal-empty-state p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0 0 var(--portal-space-xs);
}

.status-badge {
  display: inline-block;
  flex-shrink: 0;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.status-nieuw {
  background: var(--gold);
  color: var(--navy);
}
.status-in-behandeling {
  background: var(--off-white);
  border: 1px solid var(--border-soft);
  color: var(--text);
}
.status-geleverd {
  background: rgba(var(--navy-rgb), 0.08);
  color: var(--navy);
}
.status-omgezet {
  background: var(--navy);
  color: var(--gold-light);
}

.portal-detail-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 34px;
  margin-top: 20px;
}
@media (max-width: 640px) {
  .portal-detail-card { padding: 24px 20px; }
}
.portal-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-soft);
}
.portal-detail-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--navy);
}
.portal-detail-name:focus { outline: none; }

.portal-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.detail-field-full { margin-bottom: 20px; }
.detail-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.detail-value {
  display: block;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.detail-status-control {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}
/* Used in the klantkaart header, next to the name -- no divider needed
   there since it isn't trailing a block of detail fields. */
.detail-status-control-flush {
  padding-top: 0;
  border-top: none;
}
.detail-status-control label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
}
.detail-status-control select {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 9px 14px;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
}
.detail-status-control select:focus {
  outline: none;
  border-color: var(--gold);
}
.detail-status-feedback {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ---------- Client Hub (/portaal v2: dashboard/aanvragen/klanten) ---------- */
.portal-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border-soft);
}
.portal-nav-link {
  padding: 12px 6px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.95rem;
  font: inherit;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  cursor: pointer;
}
.portal-nav-link + .portal-nav-link { margin-left: 22px; }
.portal-nav-link:hover { color: var(--navy); }
.portal-nav-link.is-active {
  color: var(--navy);
  border-bottom-color: var(--gold);
}

.portal-subheading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--navy);
  margin-bottom: 16px;
}

/* Dashboard "Vraagt actie" list */
.action-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.action-item {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--gold);
  /* A rounded corner and a same-side accent border don't combine cleanly --
     the radius clips against the accent. Square corners on this side instead. */
  border-radius: 0;
  padding: 14px 18px;
  font: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.action-item:hover,
.action-item:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  outline: none;
}
.action-item-title {
  display: block;
  font-weight: 600;
  color: var(--navy);
  font-size: 0.95rem;
}
.action-item-meta {
  display: block;
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-top: 2px;
}

/* Extra status-badge variants (klanten-pijplijn) */
.status-gepauzeerd {
  background: transparent;
  border: 1px dashed var(--border-soft);
  color: var(--text-muted);
}

/* Klantenlijst: zoek + fase-filter boven één sorteerbare tabel, i.p.v.
   de vorige pijplijn-opzet (kop per fase, iedereen uitgeklapt eronder --
   schaalde niet en toonde lege fases als losse blokken). */
.portal-list-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.portal-list-search {
  flex: 1 1 240px;
  min-width: 200px;
  padding: 9px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--white);
}
.portal-list-search:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.portal-phase-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.portal-phase-chip {
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--white);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.portal-phase-chip:hover { color: var(--navy); }
.portal-phase-chip.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold-light);
}

.portal-table {
  width: 100%;
  border-collapse: collapse;
}
.portal-table th {
  text-align: left;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border-soft);
}
.portal-table-sort {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.portal-table-sort:hover { color: var(--navy); }
.portal-table-sort.is-active { color: var(--navy); }
.portal-table-sort .sort-arrow { font-size: 0.7rem; }
.portal-table td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.92rem;
  color: var(--text);
}
.portal-table th:first-child, .portal-table td:first-child { padding-left: 0; }
.portal-table tbody tr {
  cursor: pointer;
  transition: background 0.15s ease;
}
.portal-table tbody tr:hover { background: var(--off-white); }
.portal-table-name {
  font-weight: 600;
  color: var(--navy);
}
.portal-table-date {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-family: var(--font-mono);
}

.portal-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}
.portal-pagination-info {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.portal-pagination button {
  padding: 7px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.portal-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .portal-table thead { display: none; }
  .portal-table, .portal-table tbody, .portal-table tr, .portal-table td { display: block; width: 100%; }
  .portal-table tbody tr {
    border-bottom: 1px solid var(--border-soft);
    padding: 12px 0;
  }
  .portal-table td { border-bottom: none; padding: 2px 0; }
}

.portal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.portal-toolbar p { margin: 0; }

/* Klantkaart: master-detail. Links een smalle sectienav, rechts de
   inhoud van precies één sectie. Onder 900px klapt de nav om naar een
   scrollbare horizontale rij (zie media query verderop). */
.klant-master-detail {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.klant-section-content {
  flex: 1;
  min-width: 0;
}
.portal-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  width: 200px;
}
.portal-tab {
  padding: 10px 14px;
  border-radius: 0;
  border: none;
  border-left: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.portal-tab:hover { color: var(--navy); }
.portal-tab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.portal-tab:disabled:hover { color: var(--text-muted); }
.portal-tab.is-active {
  color: var(--navy);
  background: var(--off-white);
  border-left-color: var(--gold);
}
/* Niet-klikbare kop boven een groep secties in de sectienav (bijv.
   "Geschiedenis" boven Aanvraag/Intake) -- zelf geen .portal-tab. */
.portal-tabs-group-label {
  margin: 14px 0 2px;
  padding: 0 14px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.portal-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px 24px;
  margin-bottom: 24px;
}
.field-light-full { grid-column: 1 / -1; }
/* Light-background form fields (klantkaart tabs sit on white cards,
   unlike .form-group which is styled for the navy /voorbeeldbatch card). */
.field-light label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 7px;
}
.field-light input,
.field-light textarea,
.field-light select {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px 13px;
  color: var(--text);
  font: inherit;
  font-size: 0.94rem;
  resize: vertical;
}
.field-light input:focus,
.field-light textarea:focus,
.field-light select:focus {
  outline: none;
  border-color: var(--gold);
}
.field-light input.has-error {
  border-color: #c0504d;
  background: rgba(192, 80, 77, 0.06);
}
.field-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
}
.field-checkbox input {
  width: 17px;
  height: 17px;
  accent-color: var(--gold);
  flex-shrink: 0;
}
.field-checkbox label {
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 500;
}

.gesch-upload-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gesch-upload-item {
  font-size: 0.95rem;
  line-height: 1.5;
}
.gesch-upload-item a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gesch-upload-item a:hover { color: var(--gold); }
.gesch-upload-item.is-onbeschikbaar { color: var(--text-muted); }

.intake-part {
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border-soft);
}
.intake-part:last-of-type { border-bottom: none; }
.intake-part-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: 18px;
}
.intake-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 20px;
  margin-bottom: 4px;
}

.portal-save-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.portal-save-feedback {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.portal-source-note {
  margin: -12px 0 14px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-style: italic;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s ease;
}
.portal-source-note:hover {
  text-decoration-color: currentColor;
}

/* Klant verwijderen: kept visually apart from the regular tab actions --
   deliberately understated (plain text, muted), this is an exception
   action, not a primary one. */
.portal-danger-zone {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
  display: none;
  align-items: center;
  gap: 14px;
}
.portal-danger-zone:not([hidden]) { display: flex; }
.btn-text-danger {
  background: none;
  border: none;
  padding: 4px 0;
  font-size: 0.85rem;
  color: rgba(178, 38, 30, 0.7);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.btn-text-danger:hover,
.btn-text-danger:focus-visible {
  color: #b2261e;
  text-decoration-color: currentColor;
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(16, 21, 31, 0.6);
  padding: 24px;
}
/* [hidden] is display:none by default via the UA stylesheet, but this
   rule's own `display: flex` (once shown) would otherwise beat that at
   equal specificity -- :not([hidden]) keeps the JS's .hidden toggle authoritative. */
.confirm-overlay:not([hidden]) { display: flex; }
.confirm-dialog {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  max-width: 420px;
  width: 100%;
}
.confirm-dialog h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--navy);
  margin: 0 0 12px;
}
.confirm-dialog p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 24px;
}
.confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Opdrachten tab: simple record list, new-order form matches the
   .field-light inputs used across the rest of the client card. */
.opdracht-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.opdracht-item {
  background: var(--off-white);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 14px 18px;
}
.opdracht-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.opdracht-item-title {
  font-weight: 600;
  color: var(--navy);
  font-size: 0.94rem;
}
.opdracht-item-meta {
  color: var(--text-muted);
  font-size: 0.82rem;
}
.opdracht-new-form { margin-top: 20px; }
.portal-save-row-spaced { margin-top: 14px; }

/* Onder 900px is er geen ruimte voor een aparte kolom: de sectienav
   klapt om naar een scrollbare rij boven de inhoud, en de accent-rand
   verhuist van links (kolom) naar onder (rij), want een linkerrand
   leest niet als "actief" in een horizontale strook. */
@media (max-width: 900px) {
  .klant-master-detail { flex-direction: column; gap: 16px; }
  .portal-tabs {
    flex-direction: row;
    width: auto;
    max-width: 100%;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-soft);
  }
  .portal-tab {
    flex-shrink: 0;
    border-left: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .portal-tab.is-active { border-bottom-color: var(--gold); }
  .portal-tabs-group-label {
    margin: 0;
    padding: 0 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-left: 1px solid var(--border-soft);
  }
}

@media (max-width: 640px) {
  .portal-tab { padding: 9px 12px; font-size: 0.85rem; }
}