/* ============================================
   B.O.P. Bedrijf Optimalisatie
   Design tokens
   ============================================ */
:root {
  --ink-950: #050506;
  --ink-900: #0C0C0F;
  --ink-800: #141418;
  --ink-700: #222831;
  --line: rgba(245, 243, 240, 0.10);
  --line-strong: rgba(245, 243, 240, 0.20);

  --accent: #FF5A1F;
  --accent-soft: rgba(255, 90, 31, 0.12);
  --accent-line: rgba(255, 90, 31, 0.32);

  --paper: #F5F3F0;
  --paper-dim: rgba(245, 243, 240, 0.64);
  --paper-faint: rgba(245, 243, 240, 0.42);

  --font-display: 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
  --font-body: 'Plus Jakarta Sans', Arial, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 100px;

  --shell: 1240px;
  --gutter: 24px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  /* clip voorkomt horizontaal scrollen zonder een extra scroll container
     te maken. hidden zou van html een scroller maken en dat breekt
     sticky elementen en stabiel scrollen op mobiel. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  background: var(--ink-950);
  color: var(--paper);
  line-height: 1.65;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--accent); color: var(--ink-950); }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Skip link: onzichtbaar tot hij focus krijgt via het toetsenbord */
.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 300; background: var(--accent); color: var(--ink-950);
  padding: 12px 22px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: transform 0.2s var(--ease-out);
}
.skip:focus { transform: translate(-50%, 0); outline: none; }

/* Zichtbare focus voor toetsenbordgebruikers */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ============================================
   Typography
   ============================================ */
.eyebrow {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 22px;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }

.display {
  font-size: clamp(44px, 7.4vw, 104px);
  line-height: 0.98;
}
.h2 { font-size: clamp(32px, 4.6vw, 60px); line-height: 1.04; }
.h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.2; }

.lede {
  font-size: clamp(16px, 1.55vw, 19px);
  color: var(--paper-dim);
  max-width: 58ch;
}

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

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: 15px; font-weight: 700;
  text-decoration: none; border: none; cursor: pointer;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out),
              border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  will-change: transform;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary { background: var(--accent); color: var(--ink-950); }
.btn-primary:hover { background: #ff7442; }
.btn-ghost {
  background: transparent; color: var(--paper);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 11px 22px; font-size: 14px; }

/* ============================================
   Navigation
   ============================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  padding: 18px 0;
  transition: background 0.35s var(--ease-out), padding 0.35s var(--ease-out),
              border-color 0.35s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  padding: 10px 0;
  background: rgba(5, 5, 6, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 20px; }
.nav-logo { flex-shrink: 0; }
.nav-logo img { height: 40px; width: auto; }
.nav-menu {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin-left: auto;
}
.nav-menu a {
  display: block; padding: 9px 15px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 600; color: var(--paper-dim);
  text-decoration: none; transition: color 0.25s ease, background 0.25s ease;
}
.nav-menu a:hover { color: var(--paper); background: rgba(245,243,240,0.05); }
.nav-cta { flex-shrink: 0; }

.burger {
  display: none; flex-direction: column; gap: 5px;
  padding: 10px; background: none; border: none; cursor: pointer;
}
.burger span {
  display: block; width: 24px; height: 2px;
  background: var(--paper); border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(5, 5, 6, 0.98);
  backdrop-filter: blur(20px);
  display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
}
.drawer.is-open { display: flex; }
.drawer a {
  font-family: var(--font-display); font-size: 30px; font-weight: 700;
  color: var(--paper); text-decoration: none; padding: 12px;
}
.drawer a:hover { color: var(--accent); }
.drawer .btn { margin-top: 22px; font-family: var(--font-body); font-size: 16px; }

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding: 150px 0 90px; overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.62;
}
/* Donker links waar de tekst staat, lichter rechts zodat de foto zichtbaar blijft */
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--ink-950) 4%, rgba(5,5,6,0.88) 34%, rgba(5,5,6,0.42) 70%, rgba(5,5,6,0.22) 100%),
    linear-gradient(to top, var(--ink-950) 0%, rgba(5,5,6,0.12) 40%, rgba(5,5,6,0.4) 100%);
}
.hero-inner { position: relative; z-index: 1; width: 100%; }
.hero-title { max-width: 16ch; margin-bottom: 26px; }
.hero-lede { margin-bottom: 38px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 56px; }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: 14px 44px;
  list-style: none; padding-top: 30px;
  border-top: 1px solid var(--line);
}
.hero-facts li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; color: var(--paper-dim);
}
.hero-facts svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }

/* ============================================
   Client marquee
   ============================================ */
/* De logobalk staat op dezelfde donkere ondergrond als de rest. De logo's
   zijn daarvoor opgelicht, zodat zwarte woordmerken niet wegvallen. */
.clients {
  padding: 52px 0;
  background: var(--ink-900);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.clients-label {
  text-align: center; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-faint); margin-bottom: 30px;
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; align-items: center; gap: 60px; width: max-content; will-change: transform; }
.client-chip {
  flex-shrink: 0; height: 62px; display: flex; align-items: center; justify-content: center;
}
.client-chip img {
  max-height: 62px; max-width: 190px; width: auto; height: auto;
  object-fit: contain; opacity: 0.88;
  transition: opacity 0.3s ease;
}
.client-chip:hover img { opacity: 1; }

/* ============================================
   Sections
   ============================================ */
section { position: relative; }
.band { padding: 108px 0; }
.band-line { border-top: 1px solid var(--line); }

.sec-head { max-width: 720px; margin-bottom: 58px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head h2 { margin-bottom: 20px; }

/* Services: photo cards */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.svc {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); min-height: 380px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 34px; isolation: isolate;
  border: 1px solid var(--line);
}
.svc-bg { position: absolute; inset: 0; z-index: -2; }
.svc-bg picture { display: block; width: 100%; height: 100%; }
.svc-bg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease-out); }
.svc:hover .svc-bg img { transform: scale(1.06); }
.svc::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(5,5,6,0.96) 12%, rgba(5,5,6,0.68) 52%, rgba(5,5,6,0.42) 100%);
}
.svc-tag {
  display: inline-block; align-self: flex-start;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 6px 13px; border-radius: var(--r-pill); margin-bottom: 16px;
}
.svc h3 { margin-bottom: 12px; }
.svc p { font-size: 14.5px; color: var(--paper-dim); max-width: 44ch; }

/* Feature list */
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feat {
  background: var(--ink-900); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 30px 26px;
  transition: border-color 0.3s ease, transform 0.4s var(--ease-out);
}
.feat:hover { border-color: var(--accent-line); transform: translateY(-4px); }
.feat-ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.feat-ico svg { width: 20px; height: 20px; color: var(--accent); }
.feat h3 { font-size: 17px; margin-bottom: 9px; }
.feat p { font-size: 13.8px; color: var(--paper-dim); line-height: 1.7; }

/* ============================================
   Branches
   ============================================ */
.branch-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.branch {
  background: var(--ink-950); padding: 30px 26px;
  transition: background 0.3s ease;
}
.branch:hover { background: var(--ink-900); }
.branch h3 {
  font-size: 17px; margin-bottom: 8px; color: var(--paper);
}
.branch p { font-size: 13.6px; color: var(--paper-dim); line-height: 1.65; }
.branch-note {
  margin-top: 26px; font-size: 14.5px; color: var(--paper-dim);
}
.branch-note a { color: var(--accent); text-decoration: none; font-weight: 600; }
.branch-note a:hover { text-decoration: underline; }
/* Werkgebied-sectie: plaatsnamen met een eigen pagina zijn oranje links */
.werkgebied a { color: var(--accent); text-decoration: none; font-weight: 600; }
.werkgebied a:hover { text-decoration: underline; }

/* ============================================
   Pricing
   ============================================ */
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; }
.price {
  background: var(--ink-900); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 40px 36px; height: 100%;
}
.price.is-feature { border-color: var(--accent-line); background: var(--ink-800); }
.price-top { padding-bottom: 26px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.price h3 { font-size: 25px; margin-bottom: 10px; }
.price-sub { font-size: 14.5px; color: var(--paper-dim); }
.price-amt {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 22px;
}
.price-amt .num {
  font-family: var(--font-display); font-size: 46px; font-weight: 700;
  color: var(--paper); line-height: 1; letter-spacing: -0.03em;
}
.price-amt .per { font-size: 14.5px; color: var(--paper-dim); font-weight: 600; }
.price-amt .req {
  font-family: var(--font-display); font-size: 32px; font-weight: 700;
  color: var(--paper); letter-spacing: -0.02em; line-height: 1.1;
}
.price-note { font-size: 13px; color: var(--paper-faint); margin-top: 8px; }

.price-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.price-list li { display: flex; gap: 12px; font-size: 14.5px; color: var(--paper-dim); line-height: 1.6; }
.price-list svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.price .btn { margin-top: 30px; width: 100%; }

.price-extra {
  margin-top: 22px; padding: 18px 20px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--r-md); font-size: 13.8px; color: var(--paper-dim); line-height: 1.65;
}
.price-extra strong { color: var(--paper); font-weight: 700; }

/* ============================================
   Work / process
   ============================================ */
.steps { display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 92px 1fr; gap: 30px;
  padding: 36px 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: none; }
.step-n {
  font-family: var(--font-display); font-size: 46px; font-weight: 700;
  color: var(--accent); opacity: 0.42; line-height: 1; letter-spacing: -0.03em;
}
.step h3 { margin-bottom: 10px; }
.step p { font-size: 15px; color: var(--paper-dim); max-width: 62ch; }

/* Werkwijze als fotokaarten */
.flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.flow {
  background: var(--ink-900); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  padding-bottom: 30px;
  transition: border-color 0.3s ease, transform 0.4s var(--ease-out);
}
.flow:hover { border-color: var(--accent-line); transform: translateY(-5px); }
/* Verhouding op de container, niet op de img. De width en height attributen
   op de img zouden anders de hoogte vastzetten en de verhouding negeren. */
.flow-media { overflow: hidden; margin-bottom: 26px; aspect-ratio: 16/10; }
.flow-media picture { display: block; width: 100%; height: 100%; }
.flow-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s var(--ease-out);
}
.flow:hover .flow-media img { transform: scale(1.05); }
.flow-step {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); padding: 0 28px; margin-bottom: 10px;
}
.flow h3 { padding: 0 28px; margin-bottom: 10px; }
.flow-text { padding: 0 28px; font-size: 14.5px; color: var(--paper-dim); line-height: 1.7; }

/* Statement band met foto */
.quote-band {
  position: relative; overflow: hidden;
  padding: 128px 0; border-top: 1px solid var(--line);
}
.quote-media { position: absolute; inset: -10% 0; z-index: 0; }
.quote-media picture { display: block; width: 100%; height: 100%; }
.quote-media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.28; }
.quote-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--ink-950) 8%, rgba(5,5,6,0.72) 60%, rgba(5,5,6,0.5) 100%);
}
.quote-inner { position: relative; z-index: 1; max-width: 780px; }
.quote-text {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 3.1vw, 40px); line-height: 1.2;
  letter-spacing: -0.02em; margin-bottom: 22px;
}
.quote-sub { font-size: clamp(15px, 1.5vw, 18px); color: var(--paper-dim); max-width: 60ch; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { padding: 28px 24px; background: var(--ink-900); border: 1px solid var(--line); border-radius: var(--r-md); }
.stat-n {
  font-family: var(--font-display); font-size: clamp(34px, 4vw, 48px); font-weight: 700;
  color: var(--accent); line-height: 1; letter-spacing: -0.03em; margin-bottom: 8px;
}
.stat-l { font-size: 13.8px; color: var(--paper-dim); font-weight: 600; }

/* ============================================
   Split (about)
   ============================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center; }
.split-media { border-radius: var(--r-lg); overflow: hidden; position: relative; aspect-ratio: 4/5; }
.split-media picture { display: block; width: 100%; height: 100%; }
.split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-body p { font-size: 15.5px; color: var(--paper-dim); margin-bottom: 16px; line-height: 1.8; }
.split-body p:last-of-type { margin-bottom: 0; }

/* ============================================
   FAQ
   ============================================ */
.faq { max-width: 860px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: clamp(17px, 1.7vw, 20px); font-weight: 700;
  color: var(--paper); text-align: left; letter-spacing: -0.01em;
}
.faq-q:hover { color: var(--accent); }
.faq-ico { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); transition: transform 0.35s var(--ease-out); }
.faq-item.is-open .faq-ico { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out); }
.faq-a p { padding-bottom: 26px; font-size: 15px; color: var(--paper-dim); max-width: 68ch; line-height: 1.75; }
.faq-a a { color: var(--accent); font-weight: 600; text-decoration: none; }
.faq-a a:hover { text-decoration: underline; }

/* ============================================
   Contact
   ============================================ */
.contact-wrap {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr;
}
.contact-media { position: relative; min-height: 100%; }
.contact-media picture { position: absolute; inset: 0; display: block; }
.contact-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(5,5,6,0.35), rgba(5,5,6,0.9));
}
.contact-body { padding: 54px 48px; background: var(--ink-900); }
.contact-body h2 { margin-bottom: 16px; }
.contact-body > p { font-size: 15.5px; color: var(--paper-dim); margin-bottom: 30px; }

.form { display: flex; flex-direction: column; gap: 13px; }
.form-row { display: flex; gap: 13px; }
.form input, .form textarea, .form select {
  width: 100%; background: var(--ink-950);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 14px 16px; color: var(--paper);
  font-family: var(--font-body); font-size: 14.5px; resize: vertical;
}
.form input::placeholder, .form textarea::placeholder { color: var(--paper-faint); }
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none; border-color: var(--accent);
}
.form label.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; }
.form .btn { margin-top: 6px; }

.contact-direct {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line);
}
.contact-direct a {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 600; color: var(--paper-dim); text-decoration: none;
}
.contact-direct a:hover { color: var(--accent); }
.contact-direct svg { width: 17px; height: 17px; color: var(--accent); }

/* ============================================
   Footer
   ============================================ */
footer { border-top: 1px solid var(--line); padding: 64px 0 30px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.3fr; gap: 40px; margin-bottom: 52px; }
.foot-brand img { height: 48px; margin-bottom: 20px; }
.foot-brand p { font-size: 14px; color: var(--paper-dim); max-width: 34ch; line-height: 1.75; }
.foot-col .foot-h {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-faint);
  margin-bottom: 18px; line-height: 1.4;
}
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.foot-col a { font-size: 14.2px; color: var(--paper-dim); text-decoration: none; }
/* Losse tekst in de footer (adres, KVK) krijgt dezelfde opmaak als de links */
.foot-col li { font-size: 14.2px; color: var(--paper-dim); line-height: 1.6; }
.foot-col a:hover { color: var(--accent); }
.foot-bottom {
  padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.foot-bottom p { font-size: 13px; color: var(--paper-faint); }

/* ============================================
   Reveal state (GSAP drives these)
   ============================================ */
.reveal { opacity: 1; }
/* Alleen verbergen wanneer de animatie daadwerkelijk gaat draaien */
.js-anim .reveal { opacity: 0; }
.reduced .reveal { opacity: 1 !important; }

/* ============================================
   Responsive
   ============================================ */
/* Tussen 900 en 1180 pixels moet het logo naast acht menupunten en de knop
   passen. Iets kleiner zetten voorkomt dat de balk gaat wringen. */
@media (max-width: 1180px) {
  .nav-menu a { padding: 9px 11px; font-size: 14px; }
  .nav-logo img { height: 34px; }
  /* Vijf footerkolommen passen hier niet naast elkaar: logo erboven, vier kolommen eronder */
  .foot-grid { grid-template-columns: repeat(4, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .branch-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-media img { aspect-ratio: 16/10; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  /* Logo en intro over de volle breedte, de vier kolommen eronder twee aan twee */
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .flow-grid { grid-template-columns: 1fr; }
  .quote-band { padding: 84px 0; }
  .nav-menu, .nav-cta { display: none; }
  .burger { display: flex; }
  .nav-logo { margin-right: auto; }
  .svc-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; }
  .contact-media { min-height: 240px; }
  .band { padding: 76px 0; }
}

@media (max-width: 620px) {
  :root { --gutter: 18px; }
  .feat-grid { grid-template-columns: 1fr; }
  .branch-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; }
  .step { grid-template-columns: 58px 1fr; gap: 18px; }
  .step-n { font-size: 32px; }
  .contact-body { padding: 38px 24px; }
  .price { padding: 32px 26px; }
  .hero-facts { gap: 12px; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* ============================================
   Paginakop op de binnenpaginas
   ============================================ */
.page-hero { padding: 168px 0 56px; border-bottom: 1px solid var(--line); }
.page-hero h1 { margin-bottom: 18px; }
.page-hero .lede { max-width: 62ch; }

/* Actieve pagina in het menu */
.nav-menu a.is-active { color: var(--accent); }

/* Dienstenkaarten zijn links geworden */
.svc { text-decoration: none; color: inherit; }

/* Featurekaart zonder icoon houdt dezelfde hoogte-opbouw */
.feat h3 { margin-bottom: 9px; }


/* ============================================
   Extra onderdelen voor de dienstenpaginas
   ============================================ */
.svc-grid.four { grid-template-columns: repeat(4, 1fr); }
.svc-grid.four .svc { min-height: 340px; padding: 28px; }
.svc-grid.four .svc h3 { font-size: 20px; }
.svc-grid.four .svc p { font-size: 13.8px; }

.svc-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-size: 13.5px; font-weight: 700; color: var(--accent);
}
.svc-link::after { content: ''; width: 14px; height: 2px; background: currentColor; transition: width 0.3s var(--ease-out); }
.svc:hover .svc-link::after { width: 24px; }

/* Uitgelicht tekstblok */
.notice {
  background: var(--ink-900); border: 1px solid var(--accent-line);
  border-radius: var(--r-lg); padding: 38px 36px;
}
.notice h3, .notice h2 { margin-bottom: 14px; }
.notice p { font-size: 15.5px; color: var(--paper-dim); line-height: 1.8; max-width: 78ch; }

/* Twee kolommen naast elkaar voor SEO en GMB */
.duo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.duo {
  background: var(--ink-900); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 36px 32px;
}
.duo-tag {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-line); padding: 6px 13px; border-radius: var(--r-pill);
  margin-bottom: 16px;
}
.duo h3 { margin-bottom: 12px; }
.duo > p { font-size: 14.8px; color: var(--paper-dim); line-height: 1.75; margin-bottom: 22px; }

/* Lopende tekst, gebruikt op de privacyverklaring */
.prose { max-width: 76ch; }
.prose h2 {
  font-family: var(--font-display); font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 700; letter-spacing: -0.02em; margin: 40px 0 14px;
}
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 15.5px; color: var(--paper-dim); line-height: 1.85; margin-bottom: 14px; }
.prose ul { list-style: none; margin: 0 0 18px; }
.prose li {
  position: relative; padding-left: 22px; margin-bottom: 9px;
  font-size: 15.5px; color: var(--paper-dim); line-height: 1.75;
}
.prose li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.prose a { color: var(--accent); }

.foot-bottom a { color: var(--paper-dim); text-decoration: none; }
.foot-bottom a:hover { color: var(--accent); }

@media (max-width: 1024px) {
  .svc-grid.four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .duo-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .svc-grid.four { grid-template-columns: 1fr; }
  .notice { padding: 28px 24px; }
}


/* ============================================
   Zwart met oranje, steviger doorgevoerd
   ============================================ */

/* Oranje gloed achter de hero */
.hero::before, .page-hero::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  right: -8%; top: -20%; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(255,90,31,0.16) 0%, rgba(255,90,31,0.05) 42%, transparent 68%);
}
.page-hero { position: relative; overflow: hidden; }
.page-hero .shell { position: relative; z-index: 1; }

/* De grote call to action loopt over de volle breedte met een foto erachter.
   Elke pagina heeft een eigen beeld. De donkere laag erover houdt de tekst
   leesbaar, ongeacht hoe licht de foto is. */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(84px, 11vw, 140px) 0;
  text-align: center;
  border-top: 1px solid var(--line);
}
/* Opbouw met positieve lagen, net als bij de hero. Negatieve z-index gaf in
   sommige browsers een zwart vlak in plaats van de foto. */
.cta-band > picture {
  position: absolute; inset: 0; display: block; z-index: 0;
}
.cta-band > picture img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.cta-band::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,5,6,0.90) 0%, rgba(5,5,6,0.68) 46%,
                    rgba(5,5,6,0.93) 100%),
    linear-gradient(96deg, rgba(255,90,31,0.22) 0%, rgba(255,90,31,0) 58%);
}
.cta-band > .shell { position: relative; z-index: 2; }
.cta-inner { max-width: 720px; margin: 0 auto; }
.cta-band .eyebrow { justify-content: center; color: var(--accent); }
.cta-band .h2 { color: var(--paper); }
.cta-band .lede { margin: 16px auto 32px; color: var(--paper-dim); }
.cta-acties { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn-ghost { border-color: rgba(245,243,240,0.34); color: var(--paper); }
.cta-band .btn-ghost:hover {
  border-color: var(--paper); background: rgba(245,243,240,0.08);
}

/* Stappenplan in tekstvorm. Genummerde regels onder elkaar, met een doorlopende
   lijn ertussen zodat het als één traject leest en niet als losse kaarten. */
.stappen { max-width: 860px; }
.stap {
  position: relative;
  display: grid; grid-template-columns: 56px 1fr; gap: 22px;
  padding: 0 0 34px 0;
}
.stap:last-child { padding-bottom: 0; }
.stap::before {
  content: ''; position: absolute; left: 27px; top: 56px; bottom: 0;
  width: 1px; background: var(--line);
}
.stap:last-child::before { display: none; }
.stap-nr {
  width: 56px; height: 56px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--ink-950);
  font-family: var(--font-display); font-size: 21px; font-weight: 800;
  line-height: 1;
}
.stap-body { padding-top: 6px; }
.stap-body h3 {
  font-size: clamp(19px, 1.9vw, 23px); margin-bottom: 8px; color: var(--paper);
}
.stap-body p { font-size: 15.5px; color: var(--paper-dim); line-height: 1.75; }
.stap-body strong { color: var(--paper); font-weight: 700; }

@media (max-width: 620px) {
  .stap { grid-template-columns: 46px 1fr; gap: 16px; }
  .stap-nr { width: 46px; height: 46px; font-size: 18px; }
  .stap::before { left: 22px; top: 46px; }
}

/* Oranje randlicht op kaarten bij hover */
.feat, .branch, .duo, .flow, .price {
  position: relative;
}
.feat::after, .duo::after, .flow::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border-top: 2px solid transparent; pointer-events: none;
  transition: border-color 0.35s var(--ease-out);
}
.feat:hover::after, .duo:hover::after, .flow:hover::after { border-top-color: var(--accent); }

/* Diensten tegels krijgen een oranje onderrand die uitloopt bij hover */
.svc { position: relative; }
.svc::before {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--accent); z-index: 2;
  transition: width 0.45s var(--ease-out);
}
.svc:hover::before { width: 100%; }

/* Stapnummers als oranje blok */
.flow-step {
  display: inline-block; background: var(--accent); color: var(--ink-950);
  padding: 5px 12px; border-radius: 6px; margin: 0 28px 12px;
  font-size: 11.5px; letter-spacing: 0.12em;
}

/* Uitgelicht blok krijgt een vol oranje kop */
.notice { border-color: var(--accent-line); background: var(--ink-900); }
.notice h3, .notice h2 { color: var(--accent); }

/* Prijskaart accent */
.price.is-feature { border-color: var(--accent); }
.price-amt .num, .price-amt .req { color: var(--accent); }

/* FAQ groepen */
.faq-group { margin-bottom: 52px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-title {
  font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px;
  color: var(--accent);
}
.faq-group .faq { max-width: none; }

/* Actieve pagina duidelijker */
.nav-menu a.is-active { color: var(--accent); background: rgba(255,90,31,0.10); }