/* ===================================================================
   Studio Lumex — one-pager
   Neutral gray/white base (OffMenu-style), near-black text,
   amber accent kept sparingly for buttons/links — ties back to the
   'Lumex' (light) brand meaning from the Werkdocument.
=================================================================== */

:root {
  --color-bg: #EEEEEC;
  --color-bg-raised: #FFFFFF;
  --color-text: #171717;
  --color-muted: #6B6B68;
  --color-accent: #B5773A;
  --color-accent-hover: #A66A2E;
  /* #B5773A only reaches ~3.2:1 on #EEEEEC / ~3.7:1 on white — enough for
     large text, borders, icons and decorative fills (3:1), not enough for
     small/normal text or button labels (4.5:1). Use these darker variants
     wherever copper is the actual text or button-label color. */
  --color-accent-text: #94571E;
  --color-accent-text-hover: #7A4718;
  --color-accent-button: #94571E;
  --color-accent-button-hover: #7A4718;
  --color-accent-button-text: #FFFFFF;
  --color-border: #E2E1DD;

  --font-display: "Bricolage Grotesque", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;

  --container-width: 1200px;
  --section-pad: 128px;
}

@media (max-width: 780px) {
  :root { --section-pad: 80px; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scrollbar-gutter: stable; }

/* Keeps the layout width stable when the project modal locks background
   scrolling (see initCaseModal) — without this, removing the page's own
   scrollbar on open would shift all content sideways by its width. */
body.case-modal-open { overflow: hidden; }

@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;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-anchor: none;
}

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

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 1000;
  background: var(--color-text);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }

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

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-right: 10px;
  vertical-align: middle;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 20px;
}

.section-title {
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.12;
  margin-bottom: 20px;
}

/* #contactHeading is a programmatic focus target (advice CTA/deep-link
   moves keyboard focus here so screen-reader users land on the updated
   heading), so it needs a visible focus state despite being tabindex="-1"
   rather than a normally-tabbable control. */
#contactHeading:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 6px; border-radius: 4px; }

.form-success h3:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 6px; border-radius: 4px; }

.section-subtitle {
  font-size: 18px;
  color: var(--color-muted);
  max-width: 560px;
  line-height: 1.55;
}

.section { padding: var(--section-pad) 0; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}

.btn-primary {
  background: var(--color-accent-button);
  color: var(--color-accent-button-text);
}

.btn-primary:hover {
  background: var(--color-accent-button-hover);
  transform: translateY(-1px);
}

.btn-primary:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------- Site nav (hamburger, always visible top-right) ---------- */

.menu-toggle {
  position: fixed;
  top: 24px;
  right: 32px;
  z-index: 150;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-raised);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-nav {
  position: fixed;
  top: 78px;
  right: 32px;
  z-index: 150;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-nav[hidden] { display: none; }

.site-nav.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.site-nav a {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-text);
}

.site-nav a:hover { background: var(--color-bg); color: var(--color-accent-text); }

@media (max-width: 640px) {
  .menu-toggle { top: 16px; right: 20px; }
  .site-nav { top: 68px; right: 20px; left: 20px; min-width: 0; }
}

/* ---------- Header (scroll-triggered, appears after Pakketten) ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(238, 238, 236, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.site-header.visible { transform: translateY(0); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.header-cta {
  padding: 11px 22px;
  font-size: 14px;
  /* .menu-toggle is a fixed 44px circle sitting at the same distance from
     the viewport edge as .container's own padding, so without this the CTA
     button and the hamburger button touch with no visible gap. */
  margin-right: 60px;
}

@media (max-width: 640px) {
  .header-cta { margin-right: 56px; }
}

/* ---------- Hero ---------- */

.hero {
  min-height: 90vh;
  position: relative;
  overflow: hidden;
  background: var(--color-text);
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(15,15,10,0.88) 0%, rgba(15,15,10,0.72) 45%, rgba(15,15,10,0.2) 68%, rgba(15,15,10,0.05) 82%),
    linear-gradient(180deg, rgba(15,15,10,0.15) 0%, rgba(15,15,10,0.05) 25%, rgba(15,15,10,0.35) 100%);
}

.hero-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 80px 32px 60px;
}

.hero-text-block {
  max-width: 700px;
}

.hero .eyebrow {
  color: rgba(255,255,255,0.9);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 8px 16px;
  border-radius: 100px;
}

.hero .eyebrow .dot { background: #E8B87E; }

.hero-title {
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: 1.1;
  margin-bottom: 24px;
  color: #FFFFFF;
}

.hero-subtitle {
  font-size: clamp(16px, 1.6vw, 19px);
  color: rgba(255,255,255,0.8);
  max-width: 480px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 32px;
  padding: 13px 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 100px;
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.hero-cta:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.7);
}

.hero-cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.scroll-cue {
  position: absolute;
  z-index: 1;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  padding: 8px;
}

.scroll-cue .dot { background: #E8B87E; }

@media (max-width: 640px) {
  .scroll-cue { display: none; }
}

/* ---------- Wordmark divider (between Hero and Over mij) ---------- */

.section-wordmark {
  margin: 96px 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 13vw, 168px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(23, 23, 23, 0.055);
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}

@media (max-width: 900px) {
  .section-wordmark {
    font-size: clamp(26px, 10vw, 64px);
    margin: 64px 0;
    padding: 0 16px;
  }
}

/* ---------- Werk (portfolio scroll rows) ---------- */

.werk { background: var(--color-bg-raised); padding-bottom: 40px; }

.werk .section-title { margin-bottom: 12px; }
.werk .section-subtitle { margin-bottom: 12px; }

.section-note {
  font-size: 14px;
  color: var(--color-muted);
}

.section-note strong { color: var(--color-text); }

.row-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
}

.row-label::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.55);
  pointer-events: none;
}

.play-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
}

.work-row {
  margin-bottom: 56px;
}

.work-row:last-child { margin-bottom: 0; }

.work-row .row-label {
  margin-bottom: 6px;
}

.work-row .row-sublabel {
  font-size: 14.5px;
  color: var(--color-muted);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

/* Infographicsets-only heading row: same label/sublabel as every other
   work-row, but paired with the carousel's prev/next arrows, so the
   divider and spacing move up here instead of staying on .row-sublabel
   (cancelled below) — .work-grid-based rows elsewhere are untouched. */
.work-row-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

.work-row-header .row-sublabel {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.infographic-carousel-nav {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* The package-card row only becomes a horizontal carousel below 640px
   (see its mobile breakpoint further down) — on desktop/tablet it's a
   static grid with nothing to scroll, so its arrow nav stays hidden until
   that breakpoint turns it into a carousel. The maatwerk row's nav uses
   plain .infographic-carousel-nav instead (no modifier, always visible)
   since it's now a carousel at every width, same as Infographicsets. */
.pakket-carousel-nav {
  display: none;
}

.infographic-carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-raised);
  color: var(--color-text);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

.infographic-carousel-arrow:hover { border-color: var(--color-accent); }

.infographic-carousel-arrow:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.infographic-carousel-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.infographic-carousel { position: relative; }

/* Deliberately not overflow:hidden — that would clip the cards' own
   hover lift/shadow at the edges. The fade below is an absolutely
   positioned overlay instead, so it needs no clipping parent. */
.infographic-carousel-viewport { position: relative; }

/* Quiet reinforcement of the partial third card, which is the primary
   "more content" cue — toggled by script.js from actual scroll position
   (.has-more), not shown unconditionally. */
.infographic-carousel-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  background: linear-gradient(to right, transparent, var(--color-bg-raised));
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 2;
}

.infographic-carousel-viewport.has-more::after { opacity: 1; }

/* Click-and-drag with the primary mouse button works the same way as the
   case-modal thumbnail strip (see initCaseModal in script.js): a plain
   overflow-x:auto row has no such affordance natively. overflow-y:hidden
   avoids a redundant vertical scrollbar; the track's own vertical padding
   below gives the cards' hover lift/shadow a little room before that
   edge. */
.infographic-carousel-track {
  display: flex;
  gap: 24px;
  padding: 6px 4px 10px 0;
  overflow-x: auto;
  overflow-y: hidden;
  /* mandatory (not proximity) so every card has exactly one deterministic
     resting position — proximity only corrects a scroll gesture back onto
     a snap point when it judges the rest position "close enough", so a
     touch-swipe's momentum could leave a middle card stopped part-way
     between two snap points, with the exact stopping point depending on
     swipe speed/direction. Only the first/last card was ever reliably
     aligned, since scrollLeft's 0/max bounds forced it regardless. */
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  overscroll-behavior-inline: contain;
}

.infographic-carousel-track::-webkit-scrollbar { display: none; width: 0; height: 0; }

.infographic-carousel-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

/* ~2.3 cards visible at the container's full 1200px width, narrowing at
   the breakpoints below — always enough to read two complete cards plus
   a clear partial preview of the next one, never all four at once. */
.infographic-carousel-card {
  flex: 0 0 calc((100% - 24px) / 2.3);
  min-width: 0;
  scroll-snap-align: start;
}

@media (max-width: 1100px) {
  .infographic-carousel-card { flex-basis: calc((100% - 24px) / 2.15); }
}

@media (max-width: 900px) {
  .infographic-carousel-track { gap: 20px; }
  .infographic-carousel-card { flex-basis: calc((100% - 20px) / 1.55); }
}

@media (max-width: 640px) {
  .work-row-header { align-items: center; }
  .infographic-carousel-track { gap: 16px; }
  /* A percentage (not a fixed-px subtraction) keeps the next-card preview
     a consistent fraction of the viewport at every mobile width — a fixed
     "100% - 48px" made the preview shrink from ~20% down to under 10% as
     the viewport got wider (320px -> 430px), so it read as inconsistent/
     barely-there right at the point most phones actually are. 78% (not the
     88% this used to be) because these cards have a 20px border-radius: at
     88%, the sliver of the next card was only ~27px wide, so the rounded
     corner alone ate almost the entire preview and left no flat, visibly
     "card-like" strip — it read as no preview at all on a real phone. 78%
     leaves a preview comfortably wider than the corner radius. */
  .infographic-carousel-card { flex-basis: 78%; }
}

@media (hover: none) {
  .infographic-carousel-track { cursor: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .infographic-carousel-track { scroll-snap-type: none; }
  .infographic-carousel-viewport::after { transition: none; }
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.work-grid-2col { grid-template-columns: repeat(2, 1fr); }
.work-grid-3col { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .work-grid-3col { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .work-grid-2col,
  .work-grid-3col { grid-template-columns: 1fr; }
}

.work-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.work-card-media {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 — percentage padding always resolves against
    width regardless of flex/aspect-ratio quirks, so this stays reliable
    even though .work-card-media sits in a flex column whose own height is
    otherwise driven by content (a plain `aspect-ratio` here let an
    unloaded video's portrait poster image dictate an intrinsic ratio that
    silently overrode it in some browsers). */
  border: none;
  margin: 0;
  cursor: pointer;
  background: var(--color-border);
  flex-shrink: 0;
  overflow: hidden;
}

.work-card-media img,
.work-card-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  -webkit-user-drag: none;
  user-drag: none;
}

.work-card-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(15, 15, 10, 0.7);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 100px;
}

/* Closed cards are compact teasers now: title, label, one sentence, an
   output indicator and a CTA — the detailed Vraag/Oplevering/Gebruik or
   Doel/Toepassing/Aanpak context lives in the case modal instead (see
   .case-modal-* below), so this body no longer needs the generous padding
   a full case write-up used to require. The whole body (not only the CTA)
   opens the project — see initWorkCardClick — so it carries the same
   pointer affordance as the media button above it. */
.work-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
  cursor: pointer;
}

.work-card-body h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

.work-card-body p {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 0;
}

.work-card-desc { margin-bottom: 10px; }

.work-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  padding: 10px 0;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent-text);
  cursor: pointer;
  transition: gap 0.15s ease;
}

.work-card-cta:hover,
.work-card-cta:focus-visible { gap: 10px; }

.work-card-cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* -- Merk- en maatwerkprojecten: independent dark cards on the light page background -- */

.work-card-dark {
  background: #181815;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.work-card-dark .work-card-media { background: rgba(0, 0, 0, 0.3); }

.work-card-dark .work-card-badge { background: rgba(0, 0, 0, 0.55); }

.work-card-dark .play-icon { background: rgba(0, 0, 0, 0.45); }

.work-card-dark .work-card-body h4 { color: #fff; }

.work-card-dark .work-card-body p { color: rgba(255, 255, 255, 0.62); }

.work-card-dark .work-card-cta { color: #E8B87E; }

/* Project-type labeling: every card (client, concept or in-house) carries
   a small always-visible "[TYPE] · [platform/content type]" label. Concept
   cards that name a real external brand also carry one short visible
   clarification line — the long repeated disclaimer that used to sit on
   every closed card now lives once inside the case modal instead. */
.work-card-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 6px;
}

/* One restrained hover treatment shared by every card (light infographic/
   productvideo cards and dark merk cards alike): a slight lift, a subtle
   shadow/border change, a minimal image scale and the CTA arrow nudging
   over — never a large scale, glow or slow animation. Touch devices never
   match (hover: hover), so nothing here depends on hover to be usable. */
@media (hover: hover) {
  .work-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  }
  .work-card:hover .work-card-media img,
  .work-card:hover .work-card-media video {
    transform: scale(1.015);
  }
  .work-card:hover .work-card-cta { gap: 10px; }

  .work-card-dark:hover {
    border-color: rgba(181, 119, 58, 0.35);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-card,
  .work-card-media img,
  .work-card-media video { transition: none; }
  .work-card-cta { transition: none; }
}

/* ---------- BTS video (Over mij) ---------- */

.compare-video {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 0 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16);
}

@media (max-width: 860px) {
  .compare-video { max-width: 280px; margin: 0 auto; }
}

.compare-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.compare-video-hint {
  display: none;
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  background: rgba(15, 15, 10, 0.7);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  padding: 8px 14px;
  border-radius: 14px;
  pointer-events: none;
}

.compare-video.is-muted .compare-video-hint { display: block; }

/* ---------- Pakketten ---------- */

.pakketten { background: var(--color-bg); }

.pakketten .section-title { max-width: 620px; }
.pakketten .section-subtitle { margin-bottom: 8px; }
.pakketten .section-note { margin-bottom: 56px; }

/* ---------- Service fork (Marketplace / Brand Content) ---------- */

/* Mobile-first: each panel sits directly under its own toggle card, in
   natural DOM order. On desktop the two toggles move onto one row and
   both panels share a single full-width row underneath (only one panel
   ever has real height at a time, so they can safely share that area). */
.service-fork-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "toggle-mp"
    "panel-mp"
    "toggle-brand"
    "panel-brand";
  gap: 20px;
}

.service-fork-grid #serviceToggleMarketplace { grid-area: toggle-mp; }
.service-fork-grid #servicePanelMarketplace { grid-area: panel-mp; }
.service-fork-grid #serviceToggleBrand { grid-area: toggle-brand; }
.service-fork-grid #servicePanelBrand { grid-area: panel-brand; }

@media (min-width: 901px) {
  .service-fork-grid {
    grid-template-columns: 0.85fr 1.15fr;
    grid-template-areas:
      "toggle-mp toggle-brand"
      "panel panel";
    column-gap: 24px;
    row-gap: 24px;
    /* Explicit (already grid's default): both toggle cards stretch to the
       height of the tallest one in their shared row, so Marketplace &
       Webshop and Merk & Campagne always match exactly regardless of
       content length — no fixed pixel height needed. */
    align-items: stretch;
  }
  .service-fork-grid #servicePanelMarketplace,
  .service-fork-grid #servicePanelBrand { grid-area: panel; }
}

.service-fork-half {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 460px;
  text-align: left;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  transition: transform 0.3s ease;
}

.service-fork-summary-mobile {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

@media (max-width: 900px) {
  .service-fork-summary-mobile { display: flex; }
}

.service-fork-desc-mobile {
  display: block;
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 320px;
}

.service-fork-half.marketplace .service-fork-desc-mobile { color: var(--color-muted); }
.service-fork-half.brand .service-fork-desc-mobile { color: rgba(255, 255, 255, 0.78); }

.service-fork-points {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
}

.service-fork-points span { position: relative; padding-left: 14px; }

.service-fork-points span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.service-fork-half.marketplace .service-fork-points { color: var(--color-accent-text); }
.service-fork-half.brand .service-fork-points { color: #E8B87E; }

.service-fork-half:hover { transform: translateY(-2px); }

.service-fork-media { position: absolute; inset: 0; z-index: 0; }
.service-fork-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.service-fork-scrim { position: absolute; inset: 0; z-index: 1; }

.service-fork-half.marketplace .service-fork-scrim {
  background: linear-gradient(180deg, rgba(238, 238, 236, 0.3) 0%, rgba(238, 238, 236, 0.82) 55%, rgba(238, 238, 236, 0.97) 100%);
}

.service-fork-half.brand .service-fork-scrim {
  background: linear-gradient(180deg, rgba(10, 9, 7, 0.08) 0%, rgba(10, 9, 7, 0.72) 58%, rgba(10, 9, 7, 0.95) 100%);
}

.service-fork-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 36px 32px;
  justify-content: flex-end;
}

.service-fork-kicker {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.service-fork-half.marketplace .service-fork-kicker { color: var(--color-accent-text); }
.service-fork-half.brand .service-fork-kicker { color: #E8B87E; }

.service-fork-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  margin-bottom: 16px;
}

.service-fork-half.marketplace .service-fork-title { font-size: clamp(26px, 2.8vw, 32px); color: var(--color-text); }
.service-fork-half.brand .service-fork-title { font-size: clamp(32px, 3.8vw, 44px); color: #fff; }

.service-fork-desc {
  display: block;
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 24px;
  max-width: 320px;
}

.service-fork-half.marketplace .service-fork-desc { color: var(--color-muted); }
.service-fork-half.brand .service-fork-desc { color: rgba(255, 255, 255, 0.78); }

.service-fork-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 100px;
  transition: transform 0.25s ease;
}

.service-fork-half.marketplace .service-fork-cta { background: var(--color-text); color: #fff; }
.service-fork-half.brand .service-fork-cta { background: #fff; color: var(--color-text); }

.service-fork-half:hover .service-fork-cta { transform: translateX(4px); }

.service-card-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  transition: transform 0.3s ease;
}

.service-card-icon::before,
.service-card-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.service-card-icon::before { width: 9px; height: 2px; }
.service-card-icon::after { width: 2px; height: 9px; }

.service-fork-half.marketplace .service-card-icon { background: rgba(255, 255, 255, 0.18); }
.service-fork-half.marketplace .service-card-icon::before,
.service-fork-half.marketplace .service-card-icon::after { background: #fff; }

.service-fork-half.brand .service-card-icon { background: rgba(23, 23, 23, 0.08); }
.service-fork-half.brand .service-card-icon::before,
.service-fork-half.brand .service-card-icon::after { background: var(--color-text); }

.service-fork-half[aria-expanded="true"] .service-card-icon { transform: rotate(135deg); }

.service-fork-half[aria-expanded="true"] {
  box-shadow: 0 0 0 2px var(--color-accent), 0 8px 24px rgba(181, 119, 58, 0.18);
}

.service-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.service-panel-inner { padding-top: 32px; }

/* Mobile: both closed route cards must be visible together without
   scrolling past a near-full-height card first, so the closed state drops
   the desktop display headline for a short line + three scan-friendly
   points instead. Height is left to content (not fixed) so text wrapping
   on narrow screens never clips. Placed after the unconditional rules
   above so it wins the cascade at equal specificity. */
@media (max-width: 900px) {
  .service-fork-half { min-height: 0; }
  .service-fork-content { padding: 22px 22px; justify-content: flex-start; }
  .service-fork-kicker { margin-bottom: 8px; }
  .service-fork-title,
  .service-fork-desc { display: none; }
  .service-fork-cta { padding: 10px 18px; font-size: 14px; }
}

/* Reduced-motion visitors get the sitewide instant-snap already applied
   via the global rule; nothing extra required here. */

/* align-items defaults to "stretch" on a grid container, which used to
   stretch EVERY card to the height of whichever one had its "Bekijk
   pakketdetails" open — the open card grew, and because the implicit
   grid row then auto-sized to that new tallest item, the other two
   (still-closed) cards got stretched to match, leaving empty space
   inside them. "start" lets each card size to its own content instead;
   the shared closed-height comparison below (--pakket-card-closed-height,
   set by syncPakketCardHeights in script.js) replaces what stretch used
   to provide for the closed state only. */
/* Compact "not sure yet" panel above the package cards — deliberately
   quieter than a .pakket-card (no price, no border-accent) so it reads as
   a helpful detour, not a fourth paid package competing with the three
   real ones. Collapsed by default (see initAdviceBlockToggle in
   script.js): only the header row (eyebrow/heading, CTA, expand toggle)
   is ever visible without a click, so it never pushes the package cards
   far down the page. */
.advice-block {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  margin-bottom: 24px;
  overflow: hidden;
}

.advice-block-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
}

/* Reset shared by both toggle buttons (the heading text and the standalone
   plus icon) — kept as two real <button>s, not one, because the persistent
   CTA between them is a real <a> that can't nest inside either. */
.advice-block-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.advice-block-toggle-text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: 44px;
  text-align: left;
  border-radius: 8px;
}

.advice-block-toggle-text:focus-visible,
.advice-block-toggle-icon:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.advice-block-header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.advice-block-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.advice-block-heading {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(16.5px, 1.6vw, 19px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.advice-block-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.advice-block-cta {
  padding: 12px 20px;
  font-size: 14px;
  max-width: 100%;
}

.advice-block-toggle-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  transition: border-color 0.2s ease;
}

.advice-block-toggle-icon:hover { border-color: var(--color-accent); }

/* Same plus-into-cross technique as .faq-icon, driven off aria-expanded
   instead of a wrapping .open class since this toggle is a standalone
   button rather than part of a larger clickable row. */
.advice-block-plus {
  position: relative;
  width: 14px;
  height: 14px;
}

.advice-block-plus::before,
.advice-block-plus::after {
  content: "";
  position: absolute;
  background: var(--color-accent);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.advice-block-plus::before {
  top: 50%; left: 0;
  width: 100%; height: 2px;
  transform: translateY(-50%);
}

.advice-block-plus::after {
  top: 0; left: 50%;
  width: 2px; height: 100%;
  transform: translateX(-50%);
}

.advice-block-toggle-icon[aria-expanded="true"] .advice-block-plus::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.advice-block-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.advice-block-details-inner {
  padding: 20px 24px 28px;
  border-top: 1px solid var(--color-border);
}

.advice-block-body {
  font-size: 15px;
  color: var(--color-muted);
  line-height: 1.6;
  max-width: 640px;
  margin-bottom: 18px;
}

.advice-block-included { margin-bottom: 16px; }

.advice-block-included-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.advice-block-included ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 560px;
}

.advice-block-included li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.5;
}

.advice-block-included li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.advice-block-note {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 18px;
}

.advice-block-clarification {
  max-width: 640px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-muted);
}

@media (max-width: 640px) {
  .advice-block-header {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px 20px;
  }

  .advice-block-header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .advice-block-cta {
    width: 100%;
    text-align: center;
    white-space: normal;
  }

  .advice-block-toggle-icon { align-self: flex-end; }

  .advice-block-details-inner { padding: 18px 20px 22px; }
}

.listing-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 24px;
  align-items: start;
}

@media (max-width: 1080px) {
  .listing-groups { grid-template-columns: 1fr; }
}

/* Below 640px the three package cards become a horizontal swipe carousel
   instead of a vertical stack — same native-scroll-snap technique as the
   Infographicsets carousel (see .infographic-carousel-track), no JS
   carousel library involved. Nothing about the radio-based selection,
   the details accordion or syncPakketCardHeights needed to change: they
   just measure/toggle elements, indifferent to whether the layout around
   them is a grid, a vertical stack or a horizontal scroller. */
@media (max-width: 640px) {
  .pakket-carousel-nav {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
  }

  .listing-groups {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    /* mandatory, not proximity — see .infographic-carousel-track for why:
       proximity leaves a swiped-to middle card wherever momentum happened
       to stop instead of always resolving to one deterministic position. */
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 20px 4px 16px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .listing-groups::-webkit-scrollbar { display: none; width: 0; height: 0; }

  .pakket-card {
    /* 78%, not 88% — these cards have a 20px border-radius, so at 88% the
       next-card preview was only ~27px wide and almost entirely consumed
       by the rounded corner itself, leaving no visible flat "card" strip. */
    flex: 0 0 78%;
    min-width: 0;
    scroll-snap-align: start;
  }
}

/* Single clarification for all three fixed packages together (not
   repeated per card) — same quiet, secondary treatment as
   .contact-timing-note: smaller than body copy, muted, no background or
   border, restrained line width so it stays a caveat rather than a
   callout that competes with the prices or CTAs above it. */
.pakket-timing-note {
  margin-top: 20px;
  max-width: 640px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-muted);
}

.pakket-card {
  position: relative;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: var(--pakket-card-closed-height, auto);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

/* "Beste waarde" is a recommendation, not a selection state, so it stays
   visually neutral (badge only) — the accent border/shadow below is
   reserved exclusively for .selected, so the two can never be confused. */
.pakket-card.featured {
  border-color: var(--color-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* The full-card radio input (below) drives this class via JS. Declared
   after .featured so a selected Listing Complete card always wins the
   border/shadow, regardless of its recommendation styling. */
.pakket-card.selected {
  border-color: var(--color-accent);
  background: rgba(181, 119, 58, 0.05);
  box-shadow: 0 6px 20px rgba(181, 119, 58, 0.14);
}

/* Visually hidden but focusable native radio, sized to the full card via
   position:relative on .pakket-card + inset:0 here. Native radio-group
   semantics (mutual exclusivity, arrow-key navigation, screen reader
   state) come for free; the toggle/details elements below get z-index:2
   so clicks on them reach the button instead of this overlay. */
.pakket-radio-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.pakket-radio-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@keyframes pakketAttentionPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(181, 119, 58, 0); }
  50% { box-shadow: 0 0 0 5px rgba(181, 119, 58, 0.35); }
}

.listing-groups.pakket-attention .pakket-card {
  animation: pakketAttentionPulse 0.5s ease-in-out 2;
}

.pakket-select-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.pakket-select-row h3 { margin-bottom: 0; }

.pakket-select-dot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-raised);
  color: transparent;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.pakket-select-dot svg { width: 13px; height: 13px; }

.pakket-card.selected .pakket-select-dot {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.pakket-media {
  position: relative;
  margin: -32px -28px 24px;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  aspect-ratio: 4 / 3.1;
  background: var(--color-border);
}

.pakket-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pakket-badge {
  position: absolute;
  top: -13px;
  left: 28px;
  background: var(--color-accent-button);
  color: var(--color-accent-button-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
}

.pakket-media .pakket-badge {
  top: 16px;
  left: auto;
  right: 16px;
}

.pakket-card h3 {
  font-size: 21px;
  line-height: 1.3;
  margin-bottom: 8px;
}

.pakket-positioning {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-accent-text);
  min-height: 36px;
  margin-bottom: 10px;
}

.pakket-desc {
  color: var(--color-muted);
  font-size: 14.5px;
  line-height: 1.55;
  min-height: 130px;
}

.pakket-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 20px 0 4px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-accent);
}

.pakket-anchor {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 13px;
}

.pakket-anchor-old {
  color: var(--color-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(107, 107, 104, 0.5);
}

.pakket-anchor-save {
  font-weight: 700;
  color: var(--color-accent-text);
}

.pakket-card:not(.featured) .pakket-price { margin-bottom: 22px; }

.pakket-price-suffix {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.pakket-features {
  list-style: none;
  margin: 0 0 24px;
  padding: 16px 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

.pakket-features li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
}

.pakket-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.15;
}

.pakket-features li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 9.5px;
  width: 6px;
  height: 3px;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}


/* ---------- Package details accordion (Level 2) ---------- */

.pakket-details-toggle {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 16px;
  padding: 0;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.pakket-details-toggle:hover,
.pakket-details-toggle:focus-visible { color: var(--color-accent-text); }

.pakket-details-chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}

.pakket-details-toggle[aria-expanded="true"] .pakket-details-chevron { transform: rotate(180deg); }

.pakket-details {
  position: relative;
  z-index: 2;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.pakket-details-inner {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--color-border);
}

.pakket-details-inner h4 {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text);
  margin: 16px 0 10px;
}

.pakket-details-inner h4:first-child { margin-top: 0; }

.pakket-details-inner ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 4px;
  padding: 0;
}

.pakket-details-inner ul li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-muted);
}

.pakket-details-inner ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}

.pakket-details-inner p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 10px 0;
}

.pakket-details-note { font-style: italic; }

.pakket-details-tech { font-size: 12px; }

.pakket-details-tech strong { color: var(--color-text); font-style: normal; }

/* All three fixed packages' pakketdetails were restructured into the same
   four short subsections (Wat je krijgt / Afbakening / Revisie /
   Praktisch) instead of one long bullet list — more headings and
   paragraph breaks than before, so the shared spacing above would have
   made them taller, not shorter. Scoped by id (rather than a shared
   class) in case a future package needs a different rhythm again. */
#pakketDetailsInfographics .pakket-details-inner h4,
#pakketDetailsProductvideo .pakket-details-inner h4,
#pakketDetailsListingComplete .pakket-details-inner h4 { margin: 6px 0 3px; }
#pakketDetailsInfographics .pakket-details-inner h4:first-child,
#pakketDetailsProductvideo .pakket-details-inner h4:first-child,
#pakketDetailsListingComplete .pakket-details-inner h4:first-child { margin-top: 0; }
#pakketDetailsInfographics .pakket-details-inner p,
#pakketDetailsProductvideo .pakket-details-inner p,
#pakketDetailsListingComplete .pakket-details-inner p { margin: 4px 0; line-height: 1.4; }
#pakketDetailsInfographics .pakket-details-inner ul,
#pakketDetailsProductvideo .pakket-details-inner ul,
#pakketDetailsListingComplete .pakket-details-inner ul { gap: 4px; margin: 0 0 2px; }
#pakketDetailsInfographics .pakket-details-inner ul li,
#pakketDetailsProductvideo .pakket-details-inner ul li,
#pakketDetailsListingComplete .pakket-details-inner ul li { line-height: 1.35; }

/* Compact WhatsApp text link for the Productvideo "meerdere losse
   productshots" prompt — deliberately a plain underlined link rather
   than the site's pill-shaped .whatsapp-link button, so it reads as a
   secondary, low-key option and never competes with the package CTA
   further down the page. */
.pakket-details-whatsapp-prompt {
  font-size: 13px;
  color: var(--color-muted);
  margin: 4px 0 2px;
}

.pakket-details-whatsapp-link {
  display: inline-block;
  padding: 2px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pakket-details-whatsapp-link:hover,
.pakket-details-whatsapp-link:focus-visible { color: var(--color-accent-text-hover); }

.pakket-details-whatsapp-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Add-ons (Marketplace panel) ---------- */

.addons {
  margin-top: 40px;
  background: #E7E3DC;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: 28px 28px 22px;
}

.addons-title {
  font-family: var(--font-display);
  font-size: 18px;
  margin-bottom: 4px;
}

.addons-subtitle {
  font-size: 14px;
  color: var(--color-muted);
}

.addons-instruction {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 16px;
}

.addons-instruction-heading {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text);
}

.addons-instruction-body {
  font-size: 13px;
  color: var(--color-muted);
}

.addons-package-state {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 20px;
}

.addons-subheading {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.addons-select-instruction {
  font-size: 13px;
  color: var(--color-muted);
}

.addons-instruction[hidden],
.addons-package-state[hidden] { display: none; }

.addons-price-note {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--color-muted);
}

.addons-advisory-note {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-muted);
}

.addons-advisory-note a { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.addons-advisory-note a:hover,
.addons-advisory-note a:focus-visible { color: var(--color-accent-text-hover); }

.addons-price-note[hidden],
.addons-advisory-note[hidden] { display: none; }

.addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 10px;
}

.addons > .addons-grid { margin-top: 24px; }

/* Wraps the two mutually exclusive "1/3 extra infographicbeelden" tiles
   in a semantic role="radiogroup" without affecting layout — its children
   still participate directly in .addons-grid as if unwrapped, so they sit
   side by side like every other tile instead of stacking inside one
   shared grid cell. */
.addon-radiogroup { display: contents; }

/* .addons-grid and .addon-item both set their own explicit display, which
   otherwise beats the browser's default [hidden]{display:none} UA rule —
   without this override, package-irrelevant tiles (and the whole grid,
   before any package is chosen) would stay visually present and take up
   full layout space despite being marked hidden. */
.addons-grid[hidden],
.addon-item[hidden] { display: none; }

.addon-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  background: #F6F4F0;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 44px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  animation: formSectionIn 0.15s ease;
}

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

.addon-item:hover { border-color: rgba(181, 119, 58, 0.4); }

.addon-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.addon-item[aria-pressed="true"],
.addon-item[aria-checked="true"] {
  border-color: var(--color-accent);
  background: rgba(181, 119, 58, 0.08);
  box-shadow: 0 3px 10px rgba(181, 119, 58, 0.10);
}

.addon-item-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.addon-item-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.addon-item-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  color: transparent;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.addon-item-check svg { width: 10px; height: 10px; }

.addon-item[aria-pressed="true"] .addon-item-check,
.addon-item[aria-checked="true"] .addon-item-check {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.addon-item-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}

.addon-item-tag {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-accent-text);
  margin-top: 2px;
}

.addon-item-price {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--color-accent-text);
  white-space: nowrap;
}

.addon-item-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-muted);
}

/* Small secondary condition line (e.g. "Alleen beschikbaar na bevestiging
   van de planning" on Versnelde oplevering for Productvideo) — populated
   by applyAddonVariants in script.js, empty and hidden otherwise. Needs
   its own [hidden] override for the same reason .addon-item[hidden] does:
   this class sets an explicit display, which otherwise beats the browser's
   default [hidden]{display:none} UA rule at equal specificity. */
.addon-item-note {
  display: block;
  font-size: 11px;
  font-style: italic;
  color: var(--color-muted);
}

.addon-item-note[hidden] { display: none; }

.addons-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 26px;
  padding: 0;
  border: none;
  background: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.addons-toggle[hidden] { display: none; }

.addons-toggle:hover,
.addons-toggle:focus-visible { color: var(--color-accent-text); }

.addons-chevron {
  width: 13px;
  height: 13px;
  transition: transform 0.2s ease;
}

.addons-toggle[aria-expanded="true"] .addons-chevron { transform: rotate(180deg); }

@media (max-width: 640px) {
  .addons { padding: 22px 20px 20px; border-radius: 18px; }
  .addons-grid { grid-template-columns: 1fr; }
}

.pakket-scarcity {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-text);
  margin: 16px 0 0;
}

.brand-cta-note {
  font-size: 13px;
  color: var(--color-muted);
  max-width: 480px;
  margin: 12px 0 0;
  line-height: 1.5;
}

/* ---------- Brand Content panel ---------- */

.brand-content-lead {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 700;
  line-height: 1.35;
  max-width: 640px;
  margin-bottom: 14px;
}

.brand-content-intro {
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 640px;
  margin-bottom: 20px;
}

.brand-content-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-accent);
  margin: 0 0 6px;
}

.brand-content-price-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 560px;
  margin: 0 0 28px;
}

.brand-usecases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.brand-usecase {
  background: #181815;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.brand-usecase-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-accent);
  margin-bottom: 16px;
}

.brand-usecase-icon svg { width: 18px; height: 18px; }

.brand-usecase h4 {
  font-size: 16px;
  margin-bottom: 8px;
  color: #fff;
}

.brand-usecase p {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13.5px;
  line-height: 1.55;
}

@media (max-width: 860px) {
  .brand-usecases { grid-template-columns: 1fr; }
}

.brand-content-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.brand-subheading {
  font-family: var(--font-display);
  font-size: 18px;
  margin-bottom: 8px;
}

/* Compact custom-production process: a scaled-down variant of the
   sitewide Werkwijze timeline's connected-steps technique, adapted to
   this panel's light background instead of a new dark full-bleed
   section — it stays visually secondary to the portfolio above it. */
.brand-process {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.brand-process-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 16px;
}

.brand-process-steps::before {
  content: "";
  position: absolute;
  left: 8.3%;
  right: 8.3%;
  top: 15px;
  height: 1px;
  background: var(--color-border);
  z-index: 0;
}

.brand-process-step {
  position: relative;
  z-index: 1;
  padding-right: 14px;
}

.brand-process-marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-bg-raised);
  border: 1.5px solid rgba(181, 119, 58, 0.4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--color-accent-text);
  margin-bottom: 10px;
}

.brand-process-step h4 {
  font-size: 14px;
  margin-bottom: 4px;
}

.brand-process-step p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-muted);
}

@media (max-width: 1080px) {
  .brand-process-steps { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
  .brand-process-steps::before { display: none; }
  .brand-process-step { padding-right: 0; }
}

@media (max-width: 640px) {
  .brand-process-steps { display: flex; flex-direction: column; gap: 18px; }

  .brand-process-step {
    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 12px;
    row-gap: 2px;
    align-items: start;
  }

  .brand-process-marker { grid-column: 1; grid-row: 1 / 3; margin-bottom: 0; }
  .brand-process-step h4 { grid-column: 2; grid-row: 1; }
  .brand-process-step p { grid-column: 2; grid-row: 2; }
}

.brand-final-cta {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

/* ---------- Selection summary + central quote CTA ---------- */

.pakket-summary { margin-top: 28px; }

.pakket-summary-title {
  font-family: var(--font-display);
  font-size: 15px;
  margin-bottom: 8px;
}

.pakket-summary-empty {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.pakket-summary-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--color-muted);
}

/* ---------- Itemized price summary — shared markup for "Jouw selectie"
   above the package cards and "Jouw prijsindicatie" inside the contact
   form (see buildPriceSummaryHTML), so the two can never disagree. Grid
   columns keep the price aligned to the right on desktop while still
   letting a long label wrap onto its own line on narrow screens without
   ever pushing the price out of its column. ---------- */

.price-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.price-summary-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 16px;
  font-size: 13.5px;
  color: var(--color-muted);
}

.price-summary-row-price {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.price-summary-addons-title {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-muted);
}

.price-summary-total-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 16px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.price-summary-total-label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.price-summary-total-amount {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--color-accent-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- "Jouw prijsindicatie" inside the contact form ---------- */

.form-price-summary {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 18px 20px;
}

.form-price-summary-title {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 10px;
}

.form-price-summary-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--color-muted);
}

/* ---------- Advice-mode "Wat ontvang je?" boundaries block ---------- */

.advice-boundaries {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.advice-boundaries-heading {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
}

.advice-boundaries p {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.5;
}

/* ---------- Priced form options (package radios + add-on checkboxes) —
   the label text stays visually dominant; the price is smaller/quieter
   and wraps onto its own line on narrow screens rather than compressing
   the label. ---------- */

.form-option-label-group {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 10px;
}

.form-option-price {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-accent-text);
  white-space: nowrap;
}

.form-option-price-note {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-muted);
  white-space: nowrap;
}

/* The advice pakket option is the one radio in this group that carries a
   second line of copy instead of a price — stacked, not the price group's
   side-by-side baseline layout. */
.form-option-advice {
  align-items: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
}

.form-option-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.form-option-desc {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-muted);
  white-space: normal;
}

.pakket-cta-hint {
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-text);
}

.pakket-cta {
  margin-top: 14px;
  width: 100%;
  max-width: 320px;
}

.pakket-cta[aria-disabled="true"] {
  background: var(--color-border);
  color: var(--color-muted);
  cursor: not-allowed;
}

.pakket-cta[aria-disabled="true"]:hover {
  background: var(--color-border);
  transform: none;
}

.pakketten-trust {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 40px;
  padding: 22px 28px;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}

.pakketten-trust-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--color-accent);
}

.pakketten-trust-icon svg { width: 20px; height: 20px; }

.pakketten-trust-body { flex: 1; min-width: 0; }

.pakketten-trust-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0;
}

.pakketten-trust-text strong { color: var(--color-text); }

.pakketten-trust-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
  /* Sits inline inside a paragraph of running text, so the tap target is
     enlarged with padding + a matching negative margin rather than a real
     44px box — that would shove the surrounding sentence apart. */
  padding: 15px 2px;
  margin-top: -15px;
  margin-bottom: -15px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-text);
  white-space: nowrap;
  cursor: pointer;
  vertical-align: baseline;
  transition: color 0.2s ease;
}

.pakketten-trust-toggle:hover,
.pakketten-trust-toggle:focus-visible { color: var(--color-accent-text-hover); }

.pakketten-trust-chevron {
  width: 13px;
  height: 13px;
  transition: transform 0.2s ease;
}

.pakketten-trust-toggle[aria-expanded="true"] .pakketten-trust-chevron { transform: rotate(180deg); }

.pakketten-trust-sources {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.pakketten-trust-sources p {
  font-size: 12.5px;
  color: var(--color-muted);
  margin: 10px 0 0;
}

.pakketten-trust-sources a { color: var(--color-accent-text); text-underline-offset: 2px; }
.pakketten-trust-sources a:hover,
.pakketten-trust-sources a:focus-visible { color: var(--color-accent-text-hover); text-decoration: underline; }

@media (max-width: 640px) {
  .pakketten-trust { flex-direction: column; padding: 18px 20px; }
  .pakketten-trust-text { font-size: 16px; }
}

/* Shared "pick a route" component: same heading tag, supporting text,
   button pair, styling and behaviour wherever it's used (currently here
   and at the end of the FAQ) — only the heading text itself differs per
   instance, kept as plain markup rather than duplicated CSS/JS since
   this is a static site with no component system to author one in. */
.contact-choice {
  margin-top: 48px;
  padding: 40px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  text-align: center;
}

.contact-choice h3 {
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: 10px;
}

.contact-choice p {
  color: var(--color-muted);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 24px;
}

.contact-choice-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* Same pill shape/size as .whatsapp-link so the pair reads as two
   equally-weighted choices, not a primary/afterthought pairing — kept
   out of .btn-secondary's neutral grey specifically so it still carries
   the Studio Lumex copper accent, and out of .btn-primary's solid fill
   so it never reads as more important than the WhatsApp option. */
.contact-choice-form-link {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-accent-text);
  background: var(--color-bg-raised);
  border: 1.5px solid var(--color-accent);
  padding: 12px 20px;
  border-radius: 100px;
  transition: background 0.15s ease, color 0.15s ease;
}

.contact-choice-form-link:hover {
  background: var(--color-accent);
  color: #fff;
}

.contact-choice-form-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .contact-choice-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .contact-choice-actions .whatsapp-link,
  .contact-choice-actions .contact-choice-form-link {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-choice-form-link { transition: none; }
}

/* Secondary routes underneath the two primary Diensten cards: three equal,
   compact cards so "meerdere producten", advies and bureau enquiries stay
   clearly discoverable without reading as a third primary service route.
   Reuses .contact-choice's outer card treatment (same background/border/
   radius) rather than a new class, since visually it's the same kind of
   "quiet card at the end of a section" — only the inner content differs. */
.secondary-routes {
  margin-top: 48px;
  padding: 40px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  text-align: center;
}

.secondary-routes-heading {
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: 10px;
}

.secondary-routes-intro {
  color: var(--color-muted);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 28px;
}

.secondary-routes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: left;
}

.secondary-route-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 22px 20px;
}

/* Subtle copper border only — same background/padding/type as the other
   two cards, so the bureau route reads as a little more prominent without
   competing with the Marketplace & Webshop / Merk & Campagne cards above. */
.secondary-route-card-accent { border-color: var(--color-accent); }

.secondary-route-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 8px;
}

.secondary-route-title {
  font-family: var(--font-display);
  font-size: 16px;
  margin-bottom: 8px;
}

.secondary-route-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-muted);
  margin-bottom: 16px;
  flex-grow: 1;
}

/* margin-top: auto keeps every card's CTA aligned to the same baseline
   even when descriptions run to different lengths. */
.secondary-route-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--color-accent-text);
  transition: color 0.2s ease;
  margin-top: auto;
}

.secondary-route-cta:hover,
.secondary-route-cta:focus-visible { color: var(--color-accent-text-hover); }

@media (max-width: 860px) {
  .secondary-routes-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .secondary-routes { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .secondary-route-cta { transition: none; }
}

/* ---------- Zo werkt het ---------- */

.proces { background: var(--color-bg-raised); }

.proces-panel-container { margin-top: 28px; }

.proces-panel {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: var(--color-text);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  padding: 36px 48px 20px;
}

.proces-panel-media { position: absolute; inset: 0; z-index: 0; }

.proces-panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 88% 45%;
  filter: grayscale(0.55) brightness(0.5) sepia(0.2);
  display: block;
}

.proces-panel-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(15, 15, 10, 0.97) 0%, rgba(15, 15, 10, 0.95) 55%, rgba(15, 15, 10, 0.72) 78%, rgba(15, 15, 10, 0.38) 100%);
}

.proces-timeline {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.proces-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
}

.proces-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  opacity: 0.85;
  margin-bottom: 10px;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.proces-icon svg { width: 24px; height: 24px; }

.proces-marker-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 12px;
}

.proces-marker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-text);
  border: 1.5px solid rgba(181, 119, 58, 0.55);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--color-accent);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.proces-timeline::before {
  content: "";
  position: absolute;
  left: 8.3%;
  right: 8.3%;
  top: 80px;
  height: 1px;
  background: rgba(181, 119, 58, 0.35);
  z-index: 0;
}

.proces-step h3 {
  color: rgba(255, 255, 255, 0.92);
  font-size: 16.5px;
  line-height: 1.3;
  margin-bottom: 6px;
  transition: color 0.2s ease;
}

.proces-step p {
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
  line-height: 1.5;
  max-width: 200px;
}

@media (hover: hover) {
  .proces-step:hover { transform: translateY(-2px); }
  .proces-step:hover .proces-icon { opacity: 1; }
  .proces-step:hover .proces-marker { border-color: var(--color-accent); color: #fff; }
  .proces-step:hover h3 { color: #fff; }
}

.proces-step { transition: transform 0.2s ease; }

.proces-trust {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.proces-trust-icon { width: 18px; height: 18px; color: var(--color-accent); flex-shrink: 0; }

.proces-trust p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14.5px;
}

@media (max-width: 1024px) {
  .proces-panel { padding: 30px 32px 18px; }
  .proces-step p { font-size: 13.5px; max-width: 165px; }
}

@media (max-width: 860px) {
  .proces-panel { padding: 28px 24px 20px; }

  .proces-timeline {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .proces-timeline::before {
    left: 21px;
    right: auto;
    top: 24px;
    bottom: 24px;
    width: 1px;
    height: auto;
  }

  .proces-step {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 16px;
    row-gap: 4px;
    align-items: start;
    text-align: left;
    padding: 0;
  }

  .proces-icon { grid-column: 2; grid-row: 1; margin-bottom: 0; justify-content: flex-start; }
  .proces-marker-wrap { grid-column: 1; grid-row: 1 / 4; margin-bottom: 0; align-items: flex-start; }
  .proces-step h3 { grid-column: 2; grid-row: 2; }
  .proces-step p { grid-column: 2; grid-row: 3; max-width: none; font-size: 15.5px; }

  .proces-trust { flex-direction: column; text-align: center; gap: 10px; margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .proces-step, .proces-icon, .proces-marker, .proces-step h3 { transition: none; }
  .proces-step:hover { transform: none; }
}

/* ---------- Over mij ---------- */

.over { background: var(--color-bg); overflow: hidden; padding-top: 0; padding-bottom: 40px; }

/* -- Banner: contained editorial photo with headline + stat strip -- */

.over-banner {
  position: relative;
  aspect-ratio: 21 / 10;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--color-text);
  overflow: hidden;
}

.over-banner-media { position: absolute; inset: 0; }

.over-banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  display: block;
}

.over-banner-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(15,15,10,0.82) 0%, rgba(15,15,10,0.56) 32%, rgba(15,15,10,0.1) 58%, rgba(15,15,10,0.02) 78%),
    linear-gradient(0deg, rgba(15,15,10,0.72) 0%, rgba(15,15,10,0.1) 28%, rgba(15,15,10,0) 50%);
}

.over-banner-content {
  position: relative;
  z-index: 1;
  padding: 52px 32px 28px;
  max-width: 620px;
}

.over-banner-title {
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.2;
  color: #fff;
  margin-bottom: 12px;
}

.over-banner-subtitle {
  font-size: clamp(14px, 1.2vw, 15.5px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 440px;
}

.over-banner-subtitle strong { color: #fff; }

/* Nested inside .over-banner-content (not a full-width sibling of the
   banner) so the group inherits the text column's own max-width and
   left edge instead of stretching across the whole photograph. */
.over-banner-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.over-stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.over-stat:last-child { border-right: none; padding-right: 0; }

.over-stat-icon { width: 18px; height: 18px; color: var(--color-accent); margin-bottom: 2px; }

.over-stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}

.over-stat-label {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.4;
}

@media (max-width: 900px) {
  /* A fixed aspect-ratio clipped the heading/subtitle/stats whenever their
     combined height exceeded it (worse on narrower phones, where the same
     copy wraps onto more lines). min-height keeps a sensible photo floor
     while letting the card grow to whatever the content actually needs, so
     nothing is ever cropped. object-fit: cover on the photo means it's
     still never stretched or squashed, only cropped taller or shorter. */
  .over-banner { aspect-ratio: auto; min-height: 420px; border-radius: 20px; }
  .over-banner-content { padding: 32px 24px 20px; max-width: none; }
  .over-banner-title { font-size: clamp(22px, 4.4vw, 28px); }
  .over-banner-stats { grid-template-columns: 1fr; gap: 0; }
  .over-stat { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.14); padding: 14px 0; }
  .over-stat:last-child { border-bottom: none; }
}

/* -- Story: eyebrow, text + BTS video side by side -- */

.over-story { padding-top: 36px; padding-bottom: 0; }

.over-story-grid {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 340px);
  gap: 32px;
  align-items: start;
  margin-top: 14px;
}

.over-story-title {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.25;
  margin-bottom: 14px;
}

.over-story-text p {
  color: var(--color-muted);
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.65;
}

.over-story-text p:last-of-type { margin-bottom: 0; }

@media (max-width: 860px) {
  .over-story-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* -- Working-method principles: compact editorial rows, not cards -- */

.over-principles { margin-top: 24px; }

.over-principle {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
}

.over-principle:first-child { border-top: none; padding-top: 0; }
.over-principle:last-child { padding-bottom: 0; }

.over-principle-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
}

.over-principle-icon svg { width: 16px; height: 16px; }

.over-principle-body h4 { font-size: 15px; margin-bottom: 3px; }

.over-principle-body p { color: var(--color-muted); font-size: 13.5px; line-height: 1.5; margin: 0; }

.over-transition-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 0;
  margin-top: 28px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-accent-text);
  transition: color 0.2s ease;
}

.over-transition-link:hover,
.over-transition-link:focus-visible { color: var(--color-accent-text-hover); }

/* ---------- FAQ ---------- */

.faq { background: var(--color-bg); }

.faq-list {
  margin-top: 48px;
  border-top: 1px solid var(--color-border);
}

.faq-item { border-bottom: 1px solid var(--color-border); }

.faq-category { margin: 0; }

.faq-category-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  background: none;
  border: none;
  border-top: 1px solid var(--color-border);
  padding: 28px 0 22px;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.faq-category:first-child .faq-category-toggle { border-top: none; padding-top: 0; }

.faq-category-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.faq-category-toggle-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.faq-category-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
}

.faq-category-title::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  flex-shrink: 0;
}

.faq-category-subtitle {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-muted);
}

.faq-category-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.faq-category-count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  white-space: nowrap;
}

.faq-category-state {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-muted);
  white-space: nowrap;
}

.faq-category-icon { width: 20px; height: 20px; }

.faq-category-toggle[aria-expanded="true"] .faq-category-icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.faq-category-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-category-panel-inner { padding-top: 4px; }

.faq-question {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
}

.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--color-accent);
  transition: transform 0.25s ease;
}

.faq-icon::before {
  top: 50%; left: 0;
  width: 100%; height: 2px;
  transform: translateY(-50%);
}

.faq-icon::after {
  top: 0; left: 50%;
  width: 2px; height: 100%;
  transform: translateX(-50%);
}

.faq-item.open .faq-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-answer p {
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.65;
  padding-bottom: 24px;
  max-width: 720px;
}

.faq-answer ul {
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.65;
  max-width: 720px;
  margin: -12px 0 24px;
  padding-left: 20px;
}

.faq-answer li { margin-bottom: 6px; }

/* ---------- Contact ---------- */

.contact { background: var(--color-bg-raised); }

.contact-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
}

@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
}

.contact .section-subtitle { margin-bottom: 8px; }

.contact-subnote {
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 24px;
}

.contact-steps {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 14px;
}

/* Short, visually secondary timing indication under the pre-submission
   steps — deliberately styled like .contact-subnote (small, muted, no
   border/background of its own) rather than a callout, so it reads as a
   quiet caveat rather than a warning. */
.contact-timing-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-muted);
  margin-bottom: 24px;
}

.contact-steps-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 14px;
}

.contact-steps ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-steps li {
  color: var(--color-muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 12px 20px;
  border-radius: 100px;
  background: var(--color-bg-raised);
  transition: border-color 0.15s ease;
}

/* WhatsApp's own green rather than the site's copper accent, so its
   hover reads as distinct from .contact-choice-form-link's copper hover
   — the two routes stay equally weighted, not one looking like a
   variant of the other. */
.whatsapp-link:hover { border-color: #25D366; }

.whatsapp-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-link { transition: none; }
}

.whatsapp-icon {
  width: 18px;
  height: 18px;
  padding: 4px;
  background: #25D366;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  fill: #fff;
  box-sizing: content-box;
}

.contact-form {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hidden-field { position: absolute; left: -9999px; }

.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The shared omschrijving field is wrapped in a <fieldset> (so advice mode
   can hide+disable it like every other route-specific field group) — this
   strips the browser's default fieldset border/margin/padding so it still
   looks like an ordinary .form-row. */
.form-row-plain {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Same reasoning as .form-group[hidden]/.form-option[hidden] above: this
   rule sets its own explicit display, which otherwise beats the browser's
   default [hidden]{display:none} UA rule for individually-toggled
   conditional fields (as opposed to whole fieldsets). */
.form-row[hidden] { display: none; }

/* Groups two or three short related .form-row fields side by side on
   desktop (e.g. postcode + plaats) — each still stacks to full width on
   narrow screens since it's just a wrapping flex row. */
.form-row-group {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.form-row-group > .form-row { flex: 1 1 200px; }

.form-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
}

.form-row input,
.form-row select,
.form-row textarea {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  resize: vertical;
}

.form-row select { cursor: pointer; }

.form-row input:focus-visible,
.form-row select:focus-visible,
.form-row textarea:focus-visible {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.form-submit {
  margin-top: 8px;
  width: 100%;
}

/* Groups a run of .form-row/.form-group elements under one visible
   section heading, for longer forms (like /aanvraag-compleet/) that
   benefit from a clearer sense of place than a flat field list. */
.form-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.form-section:first-of-type { padding-top: 0; border-top: none; }

.form-section-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.optional {
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-muted);
}

.form-hint {
  font-size: 13px;
  color: var(--color-muted);
  margin-top: -2px;
}

.form-group-hint {
  font-size: 13px;
  color: var(--color-muted);
  margin-top: -4px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* .form-group sets its own explicit display, which otherwise beats the
   browser's default [hidden]{display:none} UA rule — without this, the
   four route-specific fieldsets (add-ons / maatwerk / "weet het nog niet"
   / bureau) stayed visually present, taking up full height with their
   heading, divider and fields, even though `hidden`+`disabled` already
   correctly removed them from the tab order, validation and FormData. */
.form-group[hidden] { display: none; }

.form-group-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  padding: 0;
}

.form-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.form-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14.5px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.form-option:has(input:checked) {
  border-color: var(--color-accent);
  background: rgba(181, 119, 58, 0.08);
}

.form-option:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@keyframes formOptionPulse {
  0% { box-shadow: 0 0 0 0 rgba(181, 119, 58, 0.35); }
  100% { box-shadow: 0 0 0 8px rgba(181, 119, 58, 0); }
}

.form-option-highlight { animation: formOptionPulse 1.2s ease-out; }

.form-option input[type="checkbox"],
.form-option input[type="radio"] {
  accent-color: var(--color-accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.form-subgroup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-subgroup-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

/* Groups the "1/3 extra infographicbeelden" checkboxes under one
   accessible name (its legend, kept visually hidden) without affecting
   layout — like .addon-radiogroup above, its two .form-option children
   still participate directly in .form-options-addons' flex-wrap row. */
.form-subfieldset-inline { display: contents; }

/* Same reasoning as .form-option[hidden]/.form-group[hidden] above: this
   fieldset's own explicit `display: contents` would otherwise beat the UA
   default [hidden]{display:none} when the whole 1/3-extra-images pair is
   hidden for a package that doesn't offer it. */
.form-subfieldset-inline[hidden] { display: none; }

/* Standard accessible-hiding technique: present in the accessibility
   tree and readable by screen readers, removed from visual layout. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-group-custom {
  gap: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.form-group-error {
  display: none;
  font-size: 13px;
  color: #C0392B;
}

.form-group.invalid .form-options { border-radius: 10px; outline: 2px solid #C0392B; outline-offset: 4px; }
.form-group.invalid .form-group-error { display: block; }

/* The language-limit message isn't tied to the .form-group.invalid /
   showPakketGroupError mechanism above — it's shown or hidden directly via
   its `hidden` attribute whenever the visitor is over the package's
   language cap. .form-group-error's own unconditional `display: none`
   would otherwise always win, so it needs the same kind of explicit
   [hidden] override as .form-option/.form-group above. */
.form-group-error-limit:not([hidden]) { display: block; }

/* .form-option sets its own display, so the [hidden] attribute (used to
   drop irrelevant add-ons for the selected package) needs an explicit
   override — otherwise the UA default [hidden]{display:none} loses to the
   more specific author rule and the row stays visible. */
.form-option[hidden] { display: none; }

/* Route-specific fieldsets (add-ons / maatwerk / "weet het nog niet" /
   bureau) pop in the instant they're un-hidden — quick and no layout
   height animation, so switching routes feels immediate rather than like
   a slow accordion. Reduced-motion visitors skip the animation entirely. */
.form-group-addons,
.form-group-custom {
  animation: formSectionIn 0.18s ease;
}

@keyframes formSectionIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .form-group-addons,
  .form-group-custom { animation: none; }
}

.form-success {
  display: none;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 48px 36px;
  text-align: center;
}

.form-success.visible { display: block; }

.form-success h3 {
  font-family: var(--font-display);
  font-size: 24px;
  margin-bottom: 10px;
}

.form-success p {
  color: var(--color-muted);
  font-size: 15px;
}

.form-error {
  display: none;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 32px 36px;
  text-align: center;
  margin-top: 20px;
}

.form-error.visible { display: block; }

.form-error h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: #C0392B;
  margin-bottom: 10px;
}

.form-error p {
  color: var(--color-muted);
  font-size: 15px;
}

.form-error .whatsapp-link { margin-top: 16px; }

/* Extends the existing #formSuccess state with the choice to continue
   straight to /aanvraag-compleet/ (kept visually primary) or wait for the
   manually-sent confirmation email (kept as quiet secondary text) — see
   initContactForm, which only toggles .form-success/.visible and never
   touches this markup directly. */
.form-success-next {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.form-success-next h4 {
  font-family: var(--font-display);
  font-size: 18px;
  margin-bottom: 8px;
}

.form-success-next p { margin-bottom: 16px; }

.form-success-next .btn { margin-bottom: 14px; }

.form-success-later {
  font-size: 13px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Reusable numbered process overview — full-size, with the first step
   marked .is-current, at the top of /aanvraag-compleet/. Always
   left-aligned regardless of a centered parent like .form-success. */
.process-overview {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px 28px;
  text-align: left;
}

.process-overview-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 16px;
}

.process-overview ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.process-overview li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.process-overview-number {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
}

.process-overview li.is-current .process-overview-number {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.process-overview-text strong {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 14.5px;
  color: var(--color-text);
  margin-bottom: 2px;
}

.process-overview-text span {
  display: block;
  font-size: 13.5px;
  color: var(--color-muted);
  line-height: 1.5;
}

.process-overview-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-accent-text);
}

@media (max-width: 640px) {
  .process-overview { padding: 20px; }
}

/* Small callout card for standalone informational asides (e.g. "what
   happens after submitting", "how to deliver files") — same bg/border/
   radius language as .process-overview, but a plain heading+paragraph
   shape instead of a numbered list, with a left accent bar so it reads
   as a highlighted note rather than another content card. */
.info-block {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 14px;
  padding: 22px 26px;
  margin-top: 24px;
}

.info-block-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.info-block p {
  color: var(--color-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.info-block-compact {
  padding: 16px 20px;
  margin-top: 14px;
}

.info-block-compact .info-block-title { font-size: 14.5px; margin-bottom: 6px; }
.info-block-compact p { font-size: 13.5px; }

/* ---------- /aanvraag-compleet/ (scoped to .legal-page so it can't
   affect the homepage's own .contact-form/.form-success/.form-error in
   the two-column #contact layout) ---------- */

.legal-page .contact-form,
.legal-page .form-success,
.legal-page .form-error,
.legal-page .aanvraag-process {
  max-width: 760px;
}

.legal-content-tight { margin-top: 20px; }

.form-option-checkbox {
  align-items: flex-start;
  min-height: 0;
  padding: 14px 16px;
}

.form-success-home { margin-top: 8px; }

/* ---------- /creatieve-briefing/ multi-step form ---------- */

.briefing-progress { margin: 28px 0 24px; }

.briefing-progress-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 10px;
}

.briefing-progress-bar {
  height: 6px;
  background: var(--color-border);
  border-radius: 100px;
  overflow: hidden;
}

.briefing-progress-fill {
  display: block;
  height: 100%;
  background: var(--color-accent);
  border-radius: 100px;
  transition: width 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .briefing-progress-fill { transition: none; }
}

/* Each step is a plain child of the one real <form> — hiding a step sets
   display:none, which the HTML spec already excludes from constraint
   validation automatically (no need to also toggle `disabled` on its
   fields, unlike the individually-conditional rows below), so only the
   currently visible step's required fields can ever block submission. */
.form-step[hidden] { display: none; }

.form-step { animation: formSectionIn 0.18s ease; }

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

.form-step-title {
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: 8px;
}

.form-step-intro {
  color: var(--color-muted);
  font-size: 14.5px;
  margin-bottom: 4px;
}

.briefing-service-section .form-section-title { font-size: 16px; }

/* .form-section sets its own explicit display:flex, which otherwise beats
   the UA default [hidden]{display:none} — without this override, a
   package/route section toggled via section.hidden = true (see
   setSectionVisible) stayed visually present even though its fields were
   correctly disabled and excluded from validation/FormData. */
.form-section[hidden] { display: none; }

.form-step-error {
  display: none;
  font-size: 13.5px;
  color: #C0392B;
}

.form-step-error.visible { display: block; }

.form-step-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.form-step-actions .btn-primary { margin-left: auto; }

@media (max-width: 480px) {
  .form-step-actions { flex-direction: column-reverse; }
  .form-step-actions .btn { width: 100%; margin-left: 0; }
}

/* Disabled past the four-choice cap (see initCreatieveBriefingForm) —
   greys out the remaining unchecked chips so a fifth choice is physically
   unreachable rather than merely validated against after the fact. */
.form-option:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

/* ---------- Step 3: content route + repeatable blocks ---------- */

.form-options-stacked { flex-direction: column; }

/* The two content-route cards (klant werkt inhoud uit / Studio Lumex
   stelt voor) carry their own title + explanatory line, so they need
   more room than a plain .form-option chip — same selected/focus
   treatment, just full-width and block-level internally. */
.form-option-block {
  display: flex;
  width: 100%;
  min-height: 0;
  align-items: flex-start;
  padding: 14px 16px;
}

.form-option-block-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-option-block-text strong { font-size: 14.5px; color: var(--color-text); }
.form-option-block-text span { font-size: 13px; color: var(--color-muted); line-height: 1.5; }

.briefing-route { display: flex; flex-direction: column; gap: 24px; }
.briefing-route[hidden] { display: none; }

/* Card used for both the 7 infographic image blocks and the up-to-5 video
   "onderdeel" items — same bg/border/radius language as .info-block and
   .form-price-summary, so a repeated block reads as clearly separated
   without introducing a new visual idiom. */
.briefing-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 18px 20px;
}

.briefing-block[hidden] { display: none; }

.briefing-block-title {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
}

.briefing-add-item { align-self: flex-start; }

/* Route B: read-only mirror of step 2's USP / eigenschappen /
   specificaties answers — visually quiet (no border of its own beyond a
   thin divider) so it reads as reference material, not a new question. */
.briefing-summary-field {
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
}

.briefing-summary-field:first-of-type { padding-top: 0; border-top: none; }

.briefing-summary-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 4px;
}

.briefing-summary-value {
  font-size: 14.5px;
  color: var(--color-text);
  margin-bottom: 6px;
}

.briefing-summary-edit {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-text);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.briefing-summary-edit:hover,
.briefing-summary-edit:focus-visible { color: var(--color-accent-text-hover); }

.briefing-summary-edit:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- Step 5: review summary ---------- */

.briefing-review {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 8px;
}

.briefing-review-group {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 18px 20px;
}

.briefing-review-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.briefing-review-group-title {
  font-family: var(--font-display);
  font-size: 15px;
}

.briefing-review-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 4px 16px;
  padding: 6px 0;
  border-top: 1px solid var(--color-border);
  font-size: 13.5px;
}

.briefing-review-row:first-of-type { border-top: none; padding-top: 0; }

.briefing-review-row-label { color: var(--color-muted); }
.briefing-review-row-value { color: var(--color-text); word-break: break-word; }

.briefing-review-empty { font-size: 13.5px; color: var(--color-muted); }

@media (max-width: 640px) {
  .briefing-review-row { grid-template-columns: 1fr; gap: 2px; }
}

/* The brief asks for the whole page — heading included, not only the
   form — to read in a single centred ~840px column, narrower than the
   760px used on /aanvraag-compleet/'s wider legal-page treatment. The
   heading rules are re-applied after the "Legal pages" section further
   below (see .legal-page .section-subtitle there), since that later,
   equally-specific selector would otherwise win the cascade tie. */
.briefing-page .contact-form,
.briefing-page .form-error,
.briefing-page .briefing-progress,
.briefing-page .legal-content-tight,
.briefing-page .info-block {
  max-width: 840px;
}

.briefing-thanks-info { margin-bottom: 28px; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-text);
  color: rgba(255,255,255,0.7);
  padding: 64px 0 32px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.footer-tagline { font-size: 14px; }

.footer-location {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  max-width: 220px;
}

.footer-location-title {
  font-weight: 700;
  color: #fff;
}

.footer-address {
  font-style: normal;
  line-height: 1.5;
}

.footer-address a {
  display: inline-block;
  padding: 4px 0;
  color: rgba(255,255,255,0.7);
}

.footer-address a:hover,
.footer-address a:focus-visible { color: #fff; text-decoration: underline; }

.footer-address a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.footer-location-note { font-size: 13px; }

.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
}

.footer-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
}

.footer-meta a:hover,
.footer-meta a:focus-visible { color: #fff; text-decoration: underline; }

.footer-meta a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.footer-copyright {
  padding-top: 24px;
  font-size: 13px;
}

.footer-wordmark {
  margin: 24px 0 -28px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 13vw, 168px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}

@media (max-width: 640px) {
  .footer-wordmark { font-size: 15vw; margin-bottom: -12px; }
}

/* ---------- Floating WhatsApp ---------- */

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 90;
  transition: transform 0.2s ease;
}

.whatsapp-float:hover { transform: scale(1.06); }

.whatsapp-float .whatsapp-icon {
  width: 26px;
  height: 26px;
  padding: 0;
  background: none;
}

/* ---------- Project case modal ---------- */

.case-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: rgba(15, 15, 12, 0.72);
}

.case-modal[hidden] { display: none; }

/* The panel itself never scrolls — .case-modal-body (below) is the one
   scroll container, so the sticky close button and the fixed-size media
   never get carried away by a long Doel/Toepassing/Aanpak read. On
   standard desktop widths every format (see "Format-aware layout" further
   down) becomes a two-column row — media left, project info right — so
   info never sits underneath the media; only the column proportions and
   max-width differ per format. Below that width the layout stacks.
   Driven entirely by data-media-format on the project, never by a
   project-specific selector. */
.case-modal-panel {
  position: relative;
  width: 100%;
  max-width: 1000px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #14140F;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.case-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.case-modal-close:hover { background: rgba(0, 0, 0, 0.6); }

.case-modal-close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Deliberately not a centering flexbox: its single child (.case-modal-video
   or .case-modal-gallery) is always width:100% of this box, so centering
   would only ever apply to flex's own shrink-to-fit sizing — which is
   exactly what caused that child to size itself by content instead of
   filling the column. Any real ratio mismatch (an edge case, since the
   assets' ratios are matched to these boxes) is handled internally by
   object-fit: contain on the video/image itself. */
.case-modal-media {
  position: relative;
  flex-shrink: 0;
  background: #000;
}

.case-modal-video {
  display: block;
  width: 100%;
  max-height: 56vh;
  background: #000;
}

.case-modal-video[hidden] { display: none; }

.case-modal-gallery[hidden] { display: none; }

/* 1:1 matches the actual delivered infographic/main-image assets (see
   the Infographics package's "vierkant formaat" deliverable) — using the
   real ratio here, rather than an approximate box, is what lets the
   stage's height be derived from its width instead of stretching to
   whatever height the text column happens to need. */
.case-modal-gallery-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 56vh;
  background: #000;
}

.case-modal-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}

/* Sit close enough to the image to read as attached to it rather than
   floating in the letterboxed black area around a narrower photo. */
.case-modal-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.case-modal-gallery-nav:hover { background: rgba(255, 255, 255, 0.26); }

.case-modal-gallery-nav:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.case-modal-gallery-nav[hidden] { display: none; }

.case-modal-gallery-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.case-modal-gallery-prev { left: 12px; }
.case-modal-gallery-next { right: 12px; }

.case-modal-gallery-counter {
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12.5px;
  padding: 10px 0 0;
}

/* Horizontal scroll is preserved for touch/mouse-wheel/trackpad, and
   click-and-drag with the primary mouse button is added in script.js
   (see initCaseModal) since a plain div has no native drag-to-scroll —
   that's also what the grab/grabbing cursor here signals. The scrollbar
   itself is hidden the same way as .case-modal-body-scroll above; the
   generous right padding keeps the final thumbnail from ever sitting
   flush against the modal's rounded edge once fully scrolled into view. */
/* scroll-behavior is deliberately left at its "auto" default (not
   "smooth") — script.js always passes an explicit behavior to
   scrollIntoView()/scrollLeft already, and a CSS scroll-behavior:smooth
   on this element was found to silently override that JS-specified
   "auto", turning the active-thumbnail reveal into a no-op animation
   that never actually completed. */
.case-modal-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 24px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.case-modal-thumbs::-webkit-scrollbar { display: none; width: 0; height: 0; }

.case-modal-thumbs.is-dragging,
.case-modal-thumbs.is-dragging * {
  cursor: grabbing;
}

/* ~25% larger than the previous 64×48 tiles, so each infographic's content
   and layout is actually identifiable at a glance rather than just its
   colour. The active tile is marked with aria-current (read by screen
   readers) and doesn't rely on colour alone: a copper outline plus a
   soft glow, on top of full vs. dimmed opacity. */
.case-modal-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  border-radius: 8px;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.case-modal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

.case-modal-thumb:hover { opacity: 0.8; }

.case-modal-thumb[aria-current="true"] {
  opacity: 1;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(181, 119, 58, 0.25);
}

.case-modal-thumb:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* .case-modal-body itself carries no padding or content height of its
   own — its only job is to sit in the layout (flex item on mobile, grid
   item on desktop) and take on whatever height the media column ends up
   with. .case-modal-body-scroll is absolutely positioned to fill it
   exactly (inset: 0) and is the one actual scroll container: mouse
   wheel, trackpad, touch, keyboard (arrow keys / Page Up / Page Down /
   Home / End) and screen-reader scrolling all keep working — only the
   visible scrollbar track is hidden. Because the inner element is
   positioned rather than in normal flow, its content's height never
   feeds back into .case-modal-body's own size, which is what stops a
   long Doel/Toepassing/Aanpak read from inflating the media column too
   (see "Format-aware layout" further down) — only when the text
   genuinely doesn't fit the media-derived height does it scroll,
   instead of growing the modal. */
.case-modal-body {
  position: relative;
  flex: 1;
  min-height: 0;
  transition: opacity 0.15s ease;
}

.case-modal-body-scroll {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 26px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.case-modal-body-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

.case-modal-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 6px;
}

.case-modal-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.case-modal-clarification {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
}

.case-modal-clarification[hidden] { display: none; }

.case-modal-intro {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  max-width: 640px;
  margin-bottom: 14px;
}

.case-modal-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.case-modal-field {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
}

.case-modal-field dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-accent);
}

.case-modal-field dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
}

/* Kept deliberately secondary: the case content is the proof, this is
   just a quiet next step — smaller padding and an outline treatment
   instead of a large solid-fill primary button. margin-top:auto (body
   is a flex column) pushes this — and the project nav after it — down
   to the bottom of the panel when the media column is taller than the
   text, instead of leaving one large accidental gap underneath. */
.case-modal-cta {
  margin-top: auto;
  margin-bottom: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.case-modal-cta p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
}

.case-modal-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--color-accent);
  background: transparent;
  color: #E8B87E;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.case-modal-cta-link:hover {
  background: var(--color-accent);
  color: #1a1a1a;
}

.case-modal-cta-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Previous/next project navigation, scoped to the active category by
   script.js (see CASE_CATEGORIES) — hidden entirely when a category only
   has one project (e.g. Productvideo's today). */
.case-modal-projectnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.case-modal-projectnav[hidden] { display: none; }

.case-modal-projectnav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 4px;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease;
}

.case-modal-projectnav-next { margin-left: auto; }

.case-modal-projectnav-btn:hover { color: #fff; }

.case-modal-projectnav-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.case-modal-projectnav-btn:disabled {
  color: rgba(255, 255, 255, 0.25);
  cursor: default;
}

/* -------- Format-aware layout --------
   Every format becomes a two-column CSS grid on standard desktop/laptop
   widths — media left, project info right. The grid (rather than a
   stretched flexbox row) is what makes the height honest: the media
   column's height comes from its own aspect-ratio (real 16:9 / 9:16 /
   1:1 assets — see the ratios set on .case-modal-video/-gallery-stage
   above and below), so the row's height is driven by the media itself
   instead of by whichever column happens to have more text. The info
   panel (.case-modal-body) already has overflow-y:auto + min-height:0,
   which — combined with a grid item's "automatic minimum size is small
   when overflow isn't visible" rule — stops it from ever inflating the
   row: it just stretches to match the media's height and, only if its
   own content genuinely doesn't fit, scrolls internally instead of
   growing the modal. Only the column split and the panel's max-width
   differ per format: gallery gives the media more room (it's the thing
   being sold), portrait/square give the copy more room (the video
   itself is already narrow). Landscape gets its own, later breakpoint —
   see below. Below the breakpoint everything stacks vertically instead. */
@media (min-width: 900px) {
  .case-modal-panel.format-gallery,
  .case-modal-panel.format-portrait,
  .case-modal-panel.format-square {
    display: grid;
    align-items: stretch;
  }

  .case-modal-panel[class*="format-"] .case-modal-media,
  .case-modal-panel[class*="format-"] .case-modal-body { min-width: 0; }

  .case-modal-panel.format-gallery { max-width: 1040px; grid-template-columns: 60% 40%; }

  .case-modal-panel.format-portrait { max-width: 900px; grid-template-columns: 42% 58%; }

  .case-modal-panel.format-square { max-width: 1000px; grid-template-columns: 46% 54%; }

  /* Width-driven, not height:100%/flex:1 — the box's height is a
     consequence of its own ratio, capped only as a safeguard for
     unusually short viewports, never forced. */
  .case-modal-panel.format-portrait .case-modal-video {
    aspect-ratio: 9 / 16;
    width: 100%;
    height: auto;
    max-height: 82vh;
  }

  .case-modal-panel.format-square .case-modal-video {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    max-height: 82vh;
  }

  .case-modal-panel.format-gallery .case-modal-gallery-stage { max-height: 82vh; }
}

/* Landscape productvideo gets a noticeably wider details column (43-46%,
   ~500px+ in practice) and a wider modal than the other formats, because
   its text (a full Doel/Toepassing/Aanpak read) needs the room to fit
   beside the video without scrolling — at the narrower 40% split used by
   the other formats it wrapped onto too many lines to fit the 16:9
   video's height. Held off until 1100px (rather than the shared 900px)
   so the wider split never gets cramped; below that it stacks like every
   other format. */
@media (min-width: 1100px) {
  .case-modal-panel.format-landscape {
    display: grid;
    align-items: stretch;
    max-width: min(96vw, 1680px);
    grid-template-columns: 56% 44%;
  }

  .case-modal-panel.format-landscape .case-modal-media,
  .case-modal-panel.format-landscape .case-modal-body { min-width: 0; }

  .case-modal-panel.format-landscape .case-modal-video {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    max-height: 82vh;
  }

  /* The whole point of the wider column is that the text genuinely fits
     next to the video — so, unlike the other formats, this panel isn't
     meant to need internal scrolling. Reverting the scroll wrapper to
     normal flow (rather than force-fitting it) means that on the rare
     narrower/shorter screen where it doesn't quite fit, the panel grows
     slightly instead of clipping or scrolling — never a hidden overflow. */
  .case-modal-panel.format-landscape .case-modal-body-scroll {
    position: static;
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .case-modal { padding: 0; }
  .case-modal-panel {
    max-width: none;
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
    flex-direction: column;
  }
  .case-modal-panel[class*="format-"] .case-modal-media { width: 100%; }
  .case-modal-field { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .case-modal-cta-link,
  .case-modal-thumb,
  .case-modal-projectnav-btn,
  .case-modal-body { transition: none; }
}

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Footer legal links ---------- */

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 6px;
  font-size: 13px;
}

.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 8px;
  color: rgba(255, 255, 255, 0.5);
}
.footer-legal a:hover,
.footer-legal a:focus-visible { color: #fff; text-decoration: underline; }

.footer-legal a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------- 404 ---------- */

.error-page { text-align: center; }

.error-inner {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.error-page .eyebrow { justify-content: center; }

.error-code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(72px, 14vw, 140px);
  line-height: 1;
  color: var(--color-accent);
  margin: 8px 0 0;
}

.error-page .section-subtitle { margin: 0 auto 32px; }

/* ---------- Legal pages (privacyverklaring / cookiebeleid / algemene-voorwaarden) ---------- */

.legal-page .section-subtitle { margin-bottom: 0; max-width: none; }

/* Re-narrows the heading specifically for /creatieve-briefing/ — comes
   after the rule above so it wins the equal-specificity cascade tie. */
.briefing-page .eyebrow,
.briefing-page .section-title,
.briefing-page .section-subtitle {
  max-width: 840px;
}

.legal-content {
  max-width: 760px;
  margin-top: 56px;
}

/* ---------- /feedback-contentplan/ (client instruction page) ---------- */

.feedback-page .eyebrow,
.feedback-page .section-title,
.feedback-page .section-subtitle {
  max-width: 700px;
}

.feedback-steps {
  max-width: 700px;
  margin-top: 40px;
}

.feedback-video-section {
  max-width: 1000px;
  margin-top: 48px;
}

.feedback-video-heading {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  margin-bottom: 8px;
}

.feedback-video-intro {
  font-size: 15px;
  color: var(--color-muted);
  margin-bottom: 20px;
  max-width: 640px;
}

.feedback-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: #000;
}

@media (max-width: 640px) {
  .feedback-steps { margin-top: 32px; }
  .feedback-video-section { margin-top: 36px; }
  .feedback-video { border-radius: 12px; }
}

.legal-content h2 {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  margin: 48px 0 14px;
}

.legal-content h2:first-child { margin-top: 0; }

.legal-content h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  margin: 22px 0 8px;
}

.legal-content p {
  color: var(--color-muted);
  font-size: 15.5px;
  line-height: 1.7;
  margin-bottom: 14px;
}

.legal-content ul,
.legal-content ol {
  color: var(--color-muted);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 14px;
  padding-left: 22px;
}

.legal-content li { margin-bottom: 6px; }

.legal-content strong { color: var(--color-text); }

.legal-content a { color: var(--color-accent-text); text-underline-offset: 2px; }
.legal-content a:hover,
.legal-content a:focus-visible { color: var(--color-accent-text-hover); text-decoration: underline; }

.legal-content .legal-intro {
  font-size: 15.5px;
  color: var(--color-muted);
  line-height: 1.7;
  margin-bottom: 0;
}

.legal-table-wrap {
  overflow-x: auto;
  margin: 0 0 20px;
}

.legal-content table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.legal-content th,
.legal-content td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
}

.legal-content th {
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.legal-content-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  font-size: 14px;
  color: var(--color-muted);
}

/* Contact form privacy note (see #contactForm) */
.form-privacy-note {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.6;
  margin-top: -4px;
}

.form-privacy-note a { color: var(--color-accent-text); text-underline-offset: 2px; }
.form-privacy-note a:hover,
.form-privacy-note a:focus-visible { color: var(--color-accent-text-hover); text-decoration: underline; }

/* ---------- Secondary button (cookie consent + reusable) ---------- */

.btn-secondary {
  background: var(--color-bg-raised);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-bg);
  transform: translateY(-1px);
}

/* ---------- Cookie consent banner ---------- */

.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 300;
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
  padding: 24px 28px;
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.cookie-banner.visible {
  transform: translateY(0);
  opacity: 1;
}

.cookie-banner[hidden] { display: none; }

.cookie-banner-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0 0 18px;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.cookie-banner-actions .btn {
  padding: 11px 20px;
  font-size: 14px;
}

.cookie-banner-link {
  background: none;
  border: none;
  padding: 12px 4px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-muted);
  text-decoration: underline;
  cursor: pointer;
}

.cookie-banner-link:hover { color: var(--color-text); }

@media (max-width: 480px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 20px; }
  .cookie-banner-actions { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions .btn,
  .cookie-banner-actions .cookie-banner-link { width: 100%; text-align: center; }
}

/* ---------- Cookie preferences dialog ---------- */

.cookie-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 310;
  background: rgba(26, 26, 26, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}

.cookie-dialog-overlay[hidden] { display: none; }

.cookie-dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--color-bg-raised);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}

.cookie-dialog h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
}

.cookie-dialog > p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0 0 28px;
}

.cookie-dialog-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
}

.cookie-dialog-close:hover { color: var(--color-text); }

.cookie-category {
  padding: 18px 0;
  border-top: 1px solid var(--color-border);
}

.cookie-category:first-of-type { border-top: none; padding-top: 0; }

.cookie-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}

.cookie-category-name {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--color-text);
}

.cookie-category-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0;
}

.cookie-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  border-radius: 100px;
  border: none;
  background: var(--color-border);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}

.cookie-toggle[aria-checked="true"] { background: var(--color-accent); }

.cookie-toggle-dot {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.cookie-toggle[aria-checked="true"] .cookie-toggle-dot { transform: translateX(18px); }

.cookie-toggle-locked {
  background: var(--color-accent);
  opacity: 0.5;
  cursor: not-allowed;
}

.cookie-toggle-locked .cookie-toggle-dot { transform: translateX(18px); }

.cookie-toggle-locked.cookie-toggle-off {
  background: var(--color-border);
  opacity: 1;
}

.cookie-toggle-locked.cookie-toggle-off .cookie-toggle-dot { transform: translateX(0); }

.cookie-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.cookie-dialog-actions .btn { padding: 12px 22px; font-size: 14px; }

@media (max-width: 480px) {
  .cookie-dialog { padding: 28px 22px; }
  .cookie-dialog-actions { flex-direction: column; align-items: stretch; }
  .cookie-dialog-actions .btn,
  .cookie-dialog-actions .cookie-banner-link { width: 100%; text-align: center; }
}

/* Visible keyboard-focus states for the consent UI */
.cookie-banner button:focus-visible,
.cookie-dialog button:focus-visible,
.cookie-dialog a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------- Footer cookie-preferences button (matches .footer-legal a) ---------- */

.footer-legal button.footer-legal-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: none;
  border: none;
  padding: 4px 8px;
  font: inherit;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.footer-legal button.footer-legal-btn:hover,
.footer-legal button.footer-legal-btn:focus-visible { color: #fff; text-decoration: underline; }

.footer-legal button.footer-legal-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}