/* ============================================================
   BACKBRAVE — Site-brede aanvullingen op homepage.css
   Nieuwe secties: ons werk, reviews, offerteformulier,
   sticky CTA, WhatsApp, breadcrumbs, subpagina-hero, specs.
   ============================================================ */

/* ---- H1-subregel in de hero (SEO-zin, zichtbaar onderdeel van de h1) ---- */
.hero__h1sub {
  display: block; margin-top: var(--space-6);
  font-family: var(--font-mono); font-weight: 400;
  font-size: var(--text-xs); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--gray-400);
  -webkit-text-stroke: 0; line-height: var(--leading-normal);
}

/* ---- Semantische koppen (h3/h4) op bestaande stijlen ---- */
.why__col h2 { font-family: var(--font-display); font-weight: var(--weight-bold); text-transform: uppercase;
  font-size: var(--text-xl); letter-spacing: -0.01em; margin: 0; line-height: 1.1; }
.proc__step h3 { font-family: var(--font-display); font-weight: var(--weight-bold); text-transform: uppercase;
  font-size: var(--text-md); margin: 0 0 var(--space-3); letter-spacing: -0.01em; color: var(--gray-0); }
.foot__col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--gray-500); margin: 0 0 var(--space-6); font-weight: 400; }
.faq__item h3 { margin: 0; font-size: inherit; font-weight: inherit; }

/* ---- Statische USP-regel (geen marquee) ---- */
.usp--static { border-top: 1px solid var(--gray-850); }
.usp--static .usp__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3) var(--space-8); padding-block: 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--gray-400); }
.usp--static .sep { width: 7px; height: 7px; background: var(--gray-700); display: inline-block;
  transform: rotate(45deg); flex-shrink: 0; }
@media (max-width: 860px) {
  .usp--static .usp__row { justify-content: center; }
  .usp--static .sep { display: none; }
}

/* ---- USP-tickerbalk (bovenaan elke pagina) ---- */
.tickbar { background: var(--gray-950); color: var(--gray-300); border-bottom: 1px solid var(--gray-850);
  overflow: hidden; position: relative; z-index: var(--z-sticky); }
.tickbar__track { display: flex; align-items: center; width: max-content; padding-block: 10px;
  animation: marq 38s linear infinite; }
.tickbar__track:hover { animation-play-state: paused; }
.tickbar__track span { display: inline-flex; align-items: center; gap: var(--space-5); padding-inline: var(--space-5);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wider);
  text-transform: uppercase; white-space: nowrap; }
.tickbar__track .sep { width: 6px; height: 6px; background: var(--accent-500); display: inline-block;
  transform: rotate(45deg); flex-shrink: 0; }

/* ---- Keuzekaarten (bestellen) ---- */
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-16); }
.choice__card { display: flex; flex-direction: column; gap: var(--space-5);
  border: 1px solid var(--border-default); background: var(--warm-page);
  padding: clamp(32px, 4vw, 56px);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.choice__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.choice__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--accent-600); }
.choice__card h3 { font-family: var(--font-display); font-weight: var(--weight-bold); text-transform: uppercase;
  font-size: var(--text-2xl); letter-spacing: -0.015em; margin: 0; line-height: 1.05; }
.choice__card p { color: var(--ink-secondary); margin: 0; line-height: var(--leading-relaxed); flex: 1; }
.choice__card .btn { align-self: flex-start; }

/* ---- Kaart / adresblok (contact) ---- */
.cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); margin-top: var(--space-16); align-items: start; }
.map { border: 1px solid var(--border-default);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.map iframe { width: 100%; height: 420px; border: 0; display: block; filter: grayscale(1) contrast(1.04); }

@media (max-width: 860px) {
  .choice, .cgrid { grid-template-columns: 1fr; }
  .map iframe { height: 300px; }
}

/* ---- Hero: video exact even groot als de foto ---- */
.hero__frame video { position: relative; z-index: 1; width: 100%; height: clamp(380px, 42vw, 520px); object-fit: cover; display: block; }

/* ---- Breadcrumbs ---- */
.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--gray-500); margin-bottom: var(--space-8);
}
.crumbs a { color: var(--gray-400); transition: color var(--duration-fast); }
.crumbs a:hover { color: var(--gray-0); }
.crumbs .sep { color: var(--gray-700); }
.crumbs [aria-current] { color: var(--gray-200); }

/* ---- Subpagina-hero (kleiner dan homepage-hero) ---- */
.phero { position: relative; background: var(--gray-950); color: var(--gray-0); overflow: hidden;
  margin-top: -80px; padding-top: 80px; }
.phero .wrap { padding-block: clamp(72px, 9vw, 130px) clamp(56px, 7vw, 96px); }
.phero__mono { position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
  width: 46%; min-width: 460px; opacity: 0.06; filter: brightness(3); z-index: 0; pointer-events: none; }
.phero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--gray-400); }
.phero__eyebrow .tick { width: 9px; height: 9px; background: var(--gray-0); display: inline-block;
  clip-path: polygon(0 0, 100% 0, 100% 100%); }
.phero__title { font-family: var(--font-display); font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.92;
  font-size: clamp(40px, 5.6vw, 84px); margin: var(--space-5) 0 0; max-width: 16ch; }
.phero__title .lite { color: transparent; -webkit-text-stroke: 1.5px var(--gray-0); }
.phero__sub { margin: var(--space-8) 0 0; max-width: 54ch; color: var(--gray-300);
  font-size: var(--text-md); line-height: var(--leading-relaxed); }
.phero__cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-10); }
.phero__meta { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-12);
  margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--gray-850); }
.phero__meta .stat .n { font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1; letter-spacing: -0.01em; }
.phero__meta .stat .l { font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gray-500); margin-top: 7px; }

/* ---- Ons werk / portfolio ---- */
.work { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-16); }
.work__item { display: block; }
.work__frame { position: relative; background: var(--gray-100); overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.work__frame image-slot { width: 100%; aspect-ratio: 4 / 5; display: block;
  transition: transform var(--duration-slower) var(--ease-out); }
.work__item:hover .work__frame image-slot { transform: scale(1.05); }
.work__cap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-4); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-tertiary); }
.work__cap .t { color: var(--ink-secondary); }

/* ---- Reviews ---- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-16); }
.review { position: relative; border: 1px solid var(--border-default); background: var(--surface-page);
  padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out); }
.review:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gray-950); }
.review__rate { display: flex; gap: 5px; }
.review__rate i { width: 9px; height: 9px; background: var(--gray-950); display: block; transform: rotate(45deg); }
.review__quote { margin: 0; color: var(--ink-primary); font-size: var(--text-base);
  line-height: var(--leading-relaxed); flex: 1; }
.review__who { border-top: 1px solid var(--border-subtle); padding-top: var(--space-5); }
.review__name { font-family: var(--font-display); font-weight: var(--weight-semibold);
  text-transform: uppercase; font-size: var(--text-sm); letter-spacing: 0.02em; }
.review__org { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--ink-tertiary); margin-top: 5px; }

/* ---- Offerteformulier ---- */
.quote { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 96px); margin-top: var(--space-16); }
.quote__aside { display: flex; flex-direction: column; gap: var(--space-8); align-self: start; }
.quote__points { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.quote__points li { display: flex; align-items: baseline; gap: var(--space-4);
  color: var(--gray-300); font-size: var(--text-base); }
.quote__points li::before { content: ""; width: 8px; height: 8px; background: var(--gray-0);
  transform: rotate(45deg); flex-shrink: 0; position: relative; top: -1px; }
.quote__contactrow { display: grid; gap: var(--space-4); border-top: 1px solid var(--gray-850); padding-top: var(--space-8); }
.quote__contactrow a { display: flex; align-items: center; gap: var(--space-4); color: var(--gray-200);
  font-size: var(--text-base); transition: color var(--duration-fast); }
.quote__contactrow a:hover { color: var(--gray-0); }
.quote__contactrow .ico { width: 17px; height: 17px; color: var(--gray-500); flex-shrink: 0; }

.qform { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.qform .full { grid-column: 1 / -1; }
.qfield { display: grid; gap: var(--space-2); }
.qfield label { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--gray-400); }
.qfield label .opt { color: var(--gray-600); }
.qfield input, .qfield select, .qfield textarea {
  width: 100%; background: var(--gray-900); border: 1px solid var(--gray-800);
  color: var(--gray-0); padding: 15px 16px; font-family: var(--font-body); font-size: var(--text-base);
  transition: border-color var(--duration-fast), background var(--duration-fast);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px)); border-radius: 0; }
.qfield select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.qfield textarea { min-height: 110px; resize: vertical; }
.qfield input:focus, .qfield select:focus, .qfield textarea:focus {
  outline: none; border-color: var(--gray-300); background: var(--gray-850); }
.qfield input::placeholder, .qfield textarea::placeholder { color: var(--gray-600); }

.qupload { position: relative; border: 1px dashed var(--gray-700); background: var(--gray-900);
  padding: var(--space-6); display: flex; align-items: center; gap: var(--space-4);
  cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast); }
.qupload:hover { border-color: var(--gray-400); background: var(--gray-850); }
.qupload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.qupload .ico { width: 20px; height: 20px; color: var(--gray-500); flex-shrink: 0; }
.qupload__txt { display: grid; gap: 3px; }
.qupload__t1 { font-size: var(--text-sm); color: var(--gray-200); }
.qupload__t2 { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--gray-600); }

.qform__foot { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.qform__note { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--gray-500); }
.qform__ok { display: none; border: 1px solid var(--gray-700); padding: var(--space-10);
  text-align: center; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.qform__ok.show { display: block; animation: fadeUp 0.5s var(--ease-out) both; }
.qform__ok .h { font-family: var(--font-display); font-weight: var(--weight-bold);
  text-transform: uppercase; font-size: var(--text-2xl); letter-spacing: -0.01em; }
.qform__ok p { color: var(--gray-300); margin: var(--space-4) 0 0; }

/* ---- WhatsApp: zwevende knop (desktop) ---- */
.wa-fab { position: fixed; right: 26px; bottom: 26px; z-index: var(--z-overlay);
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: var(--gray-950); color: var(--gray-0); padding: 15px 22px;
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  box-shadow: var(--shadow-lg); border: 1px solid var(--gray-800);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: background var(--duration-fast), transform var(--duration-fast); }
.wa-fab:hover { background: var(--gray-800); transform: translateY(-2px); }
.wa-fab svg { width: 17px; height: 17px; fill: currentColor; }

/* ---- Sticky CTA-balk (mobiel) ---- */
.mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-overlay);
  display: none; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--gray-800);
  border-top: 1px solid var(--gray-800); }
.mcta a { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  padding: 17px 10px; font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.mcta__quote { background: var(--gray-0); color: var(--gray-950); }
.mcta__wa { background: var(--gray-950); color: var(--gray-0); }
.mcta svg { width: 16px; height: 16px; fill: currentColor; }
.mcta .ico { width: 16px; height: 16px; }

/* ---- Spec-tabel (techniekdetails) ---- */
.specs { border-top: 1px solid var(--border-default); margin-top: var(--space-10); }
.sec--dark .specs, .phero .specs { border-color: var(--gray-850); }
.specs__row { display: grid; grid-template-columns: minmax(150px, 0.7fr) 1.3fr; gap: var(--space-6);
  padding-block: var(--space-5); border-bottom: 1px solid var(--border-default); }
.sec--dark .specs__row { border-color: var(--gray-850); }
.specs__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--ink-tertiary); padding-top: 3px; }
.sec--dark .specs__k { color: var(--gray-500); }
.specs__v { font-size: var(--text-base); color: var(--ink-primary); }
.sec--dark .specs__v { color: var(--gray-200); }

/* ---- Twee-koloms feature (tekst + beeld) ---- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px);
  align-items: center; margin-top: var(--space-16); }
.duo--flip > .duo__media { order: -1; }
.duo__media { position: relative; }
.duo__media .cap { display: flex; justify-content: space-between; gap: var(--space-4);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--ink-tertiary); margin-bottom: 10px; }
.sec--dark .duo__media .cap { color: var(--gray-500); }
.duo__frame { position: relative; padding: 2px; background: var(--gray-950);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
.sec--dark .duo__frame { background: var(--gray-0); }
.duo__frame image-slot { position: relative; z-index: 1; width: 100%; height: clamp(300px, 34vw, 440px); display: block; }
.duo__body h3 { font-family: var(--font-display); font-weight: var(--weight-bold);
  text-transform: uppercase; font-size: var(--text-2xl); letter-spacing: -0.015em; margin: var(--space-5) 0 0; }
.duo__body > p { color: var(--ink-secondary); margin: var(--space-5) 0 0; line-height: var(--leading-relaxed); }
.sec--dark .duo__body > p { color: var(--gray-400); }

/* ---- Vinklijst (hoekige ticks) ---- */
.ticks { display: grid; gap: var(--space-4); margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.ticks li { display: flex; align-items: baseline; gap: var(--space-4); font-size: var(--text-base); color: var(--ink-primary); }
.sec--dark .ticks li { color: var(--gray-200); }
.ticks li::before { content: ""; width: 8px; height: 8px; background: var(--gray-950);
  transform: rotate(45deg); flex-shrink: 0; position: relative; top: -1px; }
.sec--dark .ticks li::before { background: var(--gray-0); }
.ticks li strong { font-weight: var(--weight-semibold); }

/* ---- Chipgrid (wat kun je laten…) ---- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-10); }
.chips span { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--ink-secondary); padding: 11px 18px;
  border: 1px solid var(--border-default); transition: all var(--duration-fast);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.chips span:hover { background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950); }

/* ---- CTA-band ---- */
.ctaband { background: var(--gray-950); color: var(--gray-0); position: relative; overflow: hidden; }
.ctaband .wrap { padding-block: clamp(64px, 8vw, 110px); display: grid;
  grid-template-columns: 1.4fr 1fr; gap: var(--space-10); align-items: center; }
.ctaband__h { font-family: var(--font-display); font-weight: var(--weight-bold); text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.95; font-size: clamp(32px, 4.4vw, 60px); margin: var(--space-5) 0 0; }
.ctaband__h .lite { color: transparent; -webkit-text-stroke: 1.5px var(--gray-0); }
.ctaband__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); justify-self: end; }

/* ---- Merkenband op lichte achtergrond (homepage lichter) ---- */
.brands-light .brands__item { color: var(--ink-tertiary); border-color: var(--border-default); }
.brands-light .brands__item:hover { color: #fff; background: var(--gray-950); }

/* ---- Overgang tussen donkere CTA-band en footer ---- */
.ctaband + .foot, .ctaband + footer { border-top: 1px solid var(--gray-800); }

/* ---- Kruislink tussen diensten ---- */
.xlink { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--border-default);
  font-size: var(--text-sm); color: var(--ink-tertiary); }
.xlink a { color: var(--accent-600); font-weight: var(--weight-semibold); border-bottom: 2px solid var(--accent-500); padding-bottom: 2px;
  transition: color var(--duration-fast), border-color var(--duration-fast); }
.xlink a:hover { color: var(--gray-950); border-color: var(--gray-950); }
.sec--dark .xlink, .phero .xlink, .ctaband .xlink { border-color: var(--gray-850); color: var(--gray-400); }
.sec--dark .xlink a, .phero .xlink a, .ctaband .xlink a { color: var(--gray-0); border-color: var(--gray-600); }
.sec--dark .xlink a:hover, .phero .xlink a:hover, .ctaband .xlink a:hover { border-color: var(--gray-0); }

/* ---- Lopende tekst met interne links (SEO-copy) ---- */
.prose { max-width: 64ch; color: var(--ink-secondary); font-size: var(--text-md);
  line-height: var(--leading-relaxed); }
.prose p { margin: var(--space-5) 0 0; }
.prose a { color: var(--ink-primary); border-bottom: 1px solid var(--gray-400);
  transition: border-color var(--duration-fast); }
.prose a:hover { border-color: var(--gray-950); }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .quote { grid-template-columns: 1fr; }
  .duo, .duo--flip { grid-template-columns: 1fr; }
  .duo--flip > .duo__media { order: 0; }
  .ctaband .wrap { grid-template-columns: 1fr; }
  .ctaband__actions { justify-self: start; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 860px) {
  .work { grid-template-columns: 1fr 1fr; }
  .reviews { grid-template-columns: 1fr; }
  .qform { grid-template-columns: 1fr; }
  .wa-fab { display: none; }
  .mcta { display: grid; }
  .specs__row { grid-template-columns: 1fr; gap: var(--space-2); }
}
@media (max-width: 560px) {
  .work { grid-template-columns: 1fr; }
  .ticks li, .quote__points li { display: block; }
  .ticks li::before, .quote__points li::before { display: inline-block; margin-right: 10px; top: 0; }
}

/* ---- Sectorkaarten: tekstkaarten met uitleg + merken ---- */
.sector--info { position: relative; display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--warm-page); border: 1px solid var(--border-default); padding: var(--space-8);
  aspect-ratio: auto; min-height: 0; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out); }
.sector--info:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gray-950); }
.sector--info::before { content: ""; width: 10px; height: 10px; background: var(--sec-accent, var(--accent-500));
  transform: rotate(45deg); }
.sector--info h3 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  font-family: var(--font-display); font-weight: var(--weight-bold); text-transform: uppercase;
  font-size: var(--text-xl); letter-spacing: -0.01em; margin: var(--space-2) 0 0; line-height: 1.05; }
.sector--info h3 .ico { width: 18px; height: 18px; color: var(--ink-tertiary); flex-shrink: 0;
  transition: transform var(--duration-fast), color var(--duration-fast); }
.sector--info:hover h3 .ico { transform: translate(3px, -3px); color: var(--sec-accent, var(--accent-500)); }
.sector--info p { margin: 0; color: var(--ink-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); flex: 1; }
.sector--info .merken { border-top: 1px solid var(--border-subtle); padding-top: var(--space-4);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--ink-tertiary); line-height: 1.9; }
.sector--info .merken strong { color: var(--ink-primary); font-weight: 400; }

/* ---- Werkplaats (over ons): rustige 2-beeld layout ---- */
.studio { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-6); margin-top: var(--space-14); align-items: start; }
.studio__item { margin: 0; }
.studio .duo__frame img, .studio .duo__frame video, .studio .duo__frame image-slot { height: clamp(280px, 30vw, 420px); }
.studio .duo__frame image-slot { display: block; width: 100%; position: relative; z-index: 1; }
@media (max-width: 860px) {
  .studio { grid-template-columns: 1fr; }
}

/* ---- Echte foto's in de frames (vervangen image-slot) ---- */
.svc__media img { width: 100%; height: clamp(220px, 26vw, 320px); object-fit: cover; display: block;
  transition: transform var(--duration-slow) var(--ease-out); }
.svc__card:hover .svc__media img { transform: scale(1.04); }
.sector > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out); }
.sector:hover > img { transform: scale(1.06); }
.hero__frame img { position: relative; z-index: 1; width: 100%; height: clamp(380px, 42vw, 520px); object-fit: cover; display: block; }
.duo__frame img, .duo__frame video { position: relative; z-index: 1; width: 100%; height: clamp(300px, 34vw, 440px); object-fit: cover; display: block; }
/* compacte videoweergave — kleiner kader, gecentreerd */
.duo__media--video { max-width: 340px; justify-self: center; }
.duo__media--video .duo__frame video { height: clamp(220px, 22vw, 300px); }
.work__frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  transition: transform var(--duration-slower) var(--ease-out); }
.work__item:hover .work__frame img { transform: scale(1.05); }

/* ============================================================
   WARM & KLEUR — Backbrave accent (werkplaats-oranje)
   Eén bron: pas --accent-500/600 aan om de hele site om te kleuren.
   ============================================================ */
:root {
  --accent-050: oklch(0.96 0.02 60);
  --accent-300: oklch(0.78 0.13 50);
  --accent-500: oklch(0.67 0.19 45);
  --accent-600: oklch(0.59 0.17 45);
  --warm-page:  oklch(0.98 0.006 75);
  --warm-muted: oklch(0.952 0.012 75);
}

/* Warme lichte secties i.p.v. kil wit/grijs */
body { background: var(--warm-page); }
.sec--muted { background: var(--warm-muted); }
.svc__inner, .review { background: var(--warm-page); }
.hdr.scrolled { background: color-mix(in srgb, var(--warm-page) 90%, transparent); }

/* Primaire CTA's in accentkleur */
.btn--solid, .hdr .btn--solid, .hdr.scrolled .btn--solid,
.btn--inverse, .mcta__quote { background: var(--accent-500); color: #fff; }
.btn--solid:hover, .hdr .btn--solid:hover, .hdr.scrolled .btn--solid:hover,
.btn--inverse:hover, .mcta__quote:hover { background: var(--accent-600); color: #fff; }

/* Outline-typografie ("Op maat.") in accent */
.hero__title .lite, .phero__title .lite, .ctaband__h .lite {
  -webkit-text-stroke: 1.5px var(--accent-500);
}

/* Accentdetails: eyebrow-tick, kickerlijn, nummers, bullets */
.hero__eyebrow .tick, .phero__eyebrow .tick { background: var(--accent-500); }
.kicker::before, .kicker--center::after { background: var(--accent-500); opacity: 1; }
.why__num { color: var(--accent-600); }
.proc__n { color: var(--accent-300); }
.proc__dot { background: var(--accent-500); }
.ticks li::before, .quote__points li::before, .review__rate i { background: var(--accent-500); }

/* Hover-states */
.nav a::after, .hdr.scrolled .nav a::after { background: var(--accent-500); }
.nav a:hover { color: var(--gray-0); }
.hdr.scrolled .nav a:hover { color: var(--ink-primary); }
.tlink:hover { color: var(--accent-600); border-color: var(--accent-500); }
.faq__q:hover { color: var(--accent-600); }
.faq__q .pm::before, .faq__q .pm::after { background: var(--accent-500); }
.foot__socials a:hover { background: var(--accent-500); color: #fff; border-color: var(--accent-500); }
.chips span:hover { background: var(--accent-500); color: #fff; border-color: var(--accent-500); }
.why__col::after { background: var(--accent-500); }
.sector:hover .sector__name .ico { color: var(--accent-300); }

/* USP-balk: warm accentband */
.usp--static { background: var(--accent-500); border-top: none; }
.usp--static .usp__row { color: #fff; }
.usp--static .sep { background: color-mix(in srgb, var(--gray-950) 35%, transparent); }

/* Formulier */
.qfield input:focus, .qfield select:focus, .qfield textarea:focus { border-color: var(--accent-500); }
.qupload:hover { border-color: var(--accent-500); }

/* Adviestool */
.adv__prog i.on { background: var(--accent-500); }
.adv__opt:hover { border-color: var(--accent-500); }
.adv__opt .k { color: var(--accent-300); }

/* Sectorkaarten: subtiel kleuraccent per categorie via --sec-accent */
.sector__label::before { content: ""; display: block; width: 10px; height: 10px;
  background: var(--sec-accent, var(--accent-500)); transform: rotate(45deg); margin-bottom: 10px; }