/* =========================================================
   HKS Security — gedeelde stylesheet
   Huisstijl: Onyx / Alabaster / Navy (zie website-wireframe.md
   in het project — navy #0E1C31 vervangt de eerder als
   "definitief" gedocumenteerde Bordeaux)
   ========================================================= */

:root {
  /* Kleuren */
  --onyx: #121212;
  --charcoal: #2B2B2E;
  --alabaster: #F7F6F4;
  --white: #FFFFFF;
  --bordeaux: #0E1C31;
  --bordeaux-tint: #1D3B67;
  --accent-light: #81A4DA;
  --steel: #6E6E72;
  --steel-light: #B8B6B3;
  --line: #E4E1DC;
  --line-dark: #2B2B2E;

  /* Typografie */
  --font-display: 'Archivo', Helvetica, Arial, sans-serif; /* huisstijl: één lettertype voor alles */
  --font-body: 'Archivo', Helvetica, Arial, sans-serif;
  --font-mono: 'Archivo', Helvetica, Arial, sans-serif;

  /* Easing — Kowalski: nooit ease-in op UI */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --container: 1240px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--alabaster);
  color: var(--onyx);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: var(--bordeaux); text-decoration: none; transition: color 150ms var(--ease-out); }
a:hover { color: var(--bordeaux-tint); }
button { font-family: inherit; }

.mono { font-family: var(--font-mono); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
@media (min-width: 900px) { .container { padding: 0 64px; } }

section { padding: 48px 0; }
@media (min-width: 900px) { section { padding: 72px 0; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 15px 30px;
  transition: transform 150ms var(--ease-out), background-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--bordeaux); color: var(--alabaster); }
.btn-primary:hover { background: var(--bordeaux-tint); color: var(--alabaster); }
/* Op donkere vlakken: lichte knop voor voldoende contrast */
.site-header .btn-primary, .hero .btn-primary { background: var(--alabaster); color: var(--onyx); }
.site-header .btn-primary:hover, .hero .btn-primary:hover { background: var(--accent-light); color: var(--onyx); }

.btn-light { background: var(--alabaster); color: var(--onyx); }
.btn-light:hover { background: var(--white); }

.btn-ghost {
  background: transparent;
  color: var(--alabaster);
  border: 1px solid var(--alabaster);
}
.btn-ghost:hover { background: var(--alabaster); color: var(--onyx); }

/* ---------- Nav ---------- */
.site-header {
  background: var(--onyx);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--alabaster);
  white-space: nowrap;
}
.logo img { height: 36px; width: auto; display: block; }
.logo .hks-word { font-style: normal; color: var(--alabaster); }
.logo span { color: var(--accent-light); font-style: normal; }
.logo .hks-word + span { margin-left: -5px; }
.footer-logo.logo img { height: 32px; }

.nav-links {
  display: none;
  align-items: center;
  gap: 36px;
}
.nav-links a {
  color: var(--alabaster);
  font-size: 15px;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 150ms var(--ease-out);
}
.nav-links a:hover { color: var(--alabaster); border-bottom-color: var(--bordeaux-tint); }
.nav-links a.active { border-bottom-color: var(--bordeaux); }

.nav-cta { display: none; }

.nav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 24px;
  position: relative;
  padding: 0;
}
.nav-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--alabaster);
  transition: transform 200ms var(--ease-out), opacity 150ms var(--ease-out), top 200ms var(--ease-out);
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 11px; }
.nav-toggle span:nth-child(3) { top: 22px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

.mobile-menu {
  display: grid;
  grid-template-rows: 0fr;
  background: var(--onyx);
  border-top: 1px solid var(--line-dark);
  transition: grid-template-rows 220ms var(--ease-in-out);
}
.mobile-menu.open { grid-template-rows: 1fr; }
.mobile-menu-inner { overflow: hidden; }
.mobile-menu ul { padding: 8px 24px 24px; display: flex; flex-direction: column; gap: 4px; }
.mobile-menu a {
  color: var(--alabaster);
  font-size: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-dark);
  display: block;
}
.mobile-menu a.active { color: var(--accent-light); }
.mobile-menu .btn { width: 100%; margin-top: 16px; }

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  background: var(--onyx);
  color: var(--alabaster);
  padding: 72px 0 64px;
}
@media (min-width: 900px) { .hero { padding: 96px 0 80px; } }
.hero-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.eyebrow {
  font-family: var(--font-mono);
  color: var(--accent-light);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.eyebrow-dark { color: var(--bordeaux); }
.hero h1 { font-size: clamp(32px, 5vw, 52px); max-width: 640px; }
.hero p.lede { font-size: 17px; line-height: 1.6; color: var(--steel-light); max-width: 520px; margin-top: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

/* Compacte banner op subpagina's */
.hero-page { padding: 40px 0 36px; }
@media (min-width: 900px) { .hero-page { padding: 48px 0 44px; } }
.hero-page > .container { max-width: var(--container) !important; }
.hero-page .eyebrow { margin-bottom: 10px; }
.hero-page h1 { margin-bottom: 0 !important; }
.hero-page p.lede { font-size: 16px; margin-top: 12px; }
.hero-page .hero-actions { margin-top: 20px; }

/* ---------- Placeholder blocks (media nog niet aangeleverd) ---------- */
.ph {
  background: #DAD7D2;
  border: 1px dashed #9c9995;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--steel);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 16px;
  min-height: 140px;
}
.ph-dark { background: var(--charcoal); border-color: #565659; color: #9c9c9e; }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 28px;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(18,18,18,0.08); }
}
.card h3 { font-size: 19px; margin: 16px 0 10px; }
.card p { font-size: 14px; line-height: 1.6; color: #4A4A4C; }

/* ---------- Dienstenpaneel (foto + vlak aansluitend donker paneel) ----------
   Structuurpatroon rechtstreeks van melrosesecurity.nl (foto boven,
   paneel direct eronder, geen overlap, geen schaduw), herkleurd naar
   de eigen huisstijl: navy accentlijn i.p.v. goud, geen sierserif. */
.service-panel { display: flex; flex-direction: column; height: 100%; }
.service-panel-media { aspect-ratio: 4 / 3; }
.service-panel-media.ph { min-height: 0; }
img.service-panel-media { width: 100%; object-fit: cover; }
.service-panel-body {
  background: var(--charcoal);
  padding: 20px 20px 22px;
  border-top: 2px solid var(--bordeaux-tint);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.service-panel h3 { color: var(--alabaster); font-size: 16px; margin-bottom: 10px; }
.service-panel p { color: var(--steel-light); font-size: 13px; line-height: 1.55; margin-bottom: 14px; flex: 1; }
.service-panel .card-link { font-size: 14px; font-weight: 600; color: var(--accent-light); transition: color 150ms var(--ease-out); }
.service-panel:hover .card-link { color: var(--alabaster); }
.service-panel-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 10px; }
.service-panel-body summary { list-style: none; cursor: pointer; }
.service-panel-body summary::-webkit-details-marker { display: none; }
.service-panel-body summary .card-link { display: inline-flex; align-items: center; gap: 6px; }
.service-panel-body details[open] summary .card-link .arrow { transform: rotate(90deg); }
.service-panel-body .card-link .arrow { display: inline-block; transition: transform 150ms var(--ease-out); }
.service-panel-detail { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(247,246,244,0.12); }
.service-panel-detail p { margin-bottom: 12px; }
.service-panel-detail p:last-child { margin-bottom: 0; }

/* ---------- Dienstenlijst (compacte uitklaprijen) ----------
   Alle diensten in één oogopslag als slanke rijen; klik voor de
   volledige tekst. Geen foto's nodig, dus geen lege placeholders
   zolang er nog geen eigen fotografie is. */
.svc-row { border-bottom: 1px solid var(--line); }
.svc-row summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 4px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: background-color 150ms var(--ease-out);
}
.svc-row summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .svc-row summary:hover { background: #F0EDE7; }
}
.svc-row .svc-num { font-family: var(--font-mono); font-size: 13px; color: var(--steel); width: 28px; flex-shrink: 0; }
.svc-row .svc-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; flex-shrink: 0; width: 220px; }
.svc-row .svc-tag { font-size: 14px; color: var(--steel); flex: 1; }
.svc-row .svc-chevron { font-size: 18px; color: var(--bordeaux); transition: transform 150ms var(--ease-out); flex-shrink: 0; }
.svc-row details[open] .svc-chevron { transform: rotate(90deg); }
.svc-row .svc-body { padding: 0 4px 28px 48px; }
.svc-row .svc-body p { font-size: 14px; line-height: 1.7; color: #4A4A4C; margin-bottom: 12px; max-width: 640px; }
.svc-row .svc-body p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .svc-row summary { flex-wrap: wrap; row-gap: 6px; }
  .svc-row .svc-title { width: auto; }
  .svc-row .svc-body { padding-left: 4px; }
}

/* ---------- Reden-lijst (ruit-marker) ----------
   Structuurpatroon van melrosesecurity.nl "Waarom ons": ruit-icoon +
   label + toelichting in twee kolommen op een donkere achtergrond —
   vervangt de eerdere cirkel-icoonkaarten. */
.reason-list { display: grid; gap: 0; }
@media (min-width: 700px) { .reason-list { grid-template-columns: 1fr 1fr; column-gap: 64px; } }
.reason-item { padding: 16px 0; border-bottom: 1px solid rgba(247,246,244,0.12); }
.reason-marker { width: 20px; height: 20px; border: 1.5px solid var(--accent-light); transform: rotate(45deg); margin-bottom: 12px; }
.reason-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--alabaster); margin-bottom: 8px; }
.reason-desc { font-size: 14px; color: var(--steel-light); line-height: 1.6; max-width: 380px; }

/* ---------- Nederland-figuur (dekkingskaart) ----------
   Silhouet van Nederland als CSS-mask, gevuld met hetzelfde
   stippenraster als .motif-dotgrid — visualiseert "heel Nederland"
   zonder op één stad (bijv. Amsterdam) te focussen. */
.nl-figure {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1.05;
  margin: 0 auto;
  -webkit-mask-image: url('../images/nl-outline.svg');
  mask-image: url('../images/nl-outline.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-image: radial-gradient(var(--bordeaux-tint) 1.6px, transparent 1.6px);
  background-size: 12px 12px;
}
.reason-layout { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .reason-layout { grid-template-columns: 1.1fr 1fr; gap: 56px; } }

/* ---------- Decoratief stippenmotief (optioneel, spaarzaam) ----------
   Zeer lage opacity puntenraster voor subtiele textuur op donkere
   secties — plaats de ouder met position:relative. */
.motif-dotgrid {
  background-image: radial-gradient(var(--steel-light) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  opacity: 0.05;
  position: absolute;
  inset: -28px;
  pointer-events: none;
  animation: hks-motif-drift 90s linear infinite;
}
@keyframes hks-motif-drift {
  from { background-position: 0 0; }
  to { background-position: 280px 168px; }
}
@media (prefers-reduced-motion: reduce) {
  .motif-dotgrid { animation: none; }
}

/* ---------- Grid utilities ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Sections ---------- */
.section-dark { background: var(--onyx); color: var(--alabaster); }
.section-mid { background: var(--charcoal); color: var(--alabaster); }
.section-band { background: var(--bordeaux); color: var(--alabaster); padding: 28px 0; }
.section-band .container { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.section-band h2 { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.3; max-width: 640px; margin: 0; }
.section-band .btn { padding: 12px 22px; font-size: 14px; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; text-align: center; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat-num { font-family: var(--font-mono); font-size: 34px; }
.stat-label { color: #9c9c9e; font-size: 13px; margin-top: 8px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--onyx); color: var(--alabaster); padding: 64px 0 32px; }
.footer-grid { display: grid; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line-dark); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; } }
.footer-col-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--steel); margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: var(--steel-light); font-size: 14px; }
.footer-links a:hover { color: var(--alabaster); }
.footer-bottom { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; font-size: 13px; color: var(--steel); }
@media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } }
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a { color: var(--steel); }

/* ---------- Forms ---------- */
.field-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; display: block; }
.field {
  width: 100%;
  border: 1px solid #D3D0CB;
  background: var(--white);
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--onyx);
  margin-bottom: 20px;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.field:focus {
  outline: none;
  border-color: var(--bordeaux);
  box-shadow: 0 0 0 3px rgba(92,15,34,0.12);
}
textarea.field { resize: vertical; min-height: 120px; }
.form-note {
  font-size: 13px;
  color: var(--steel);
  margin-top: 12px;
}
.form-success {
  display: none;
  background: #F0EDE7;
  border: 1px solid var(--line);
  padding: 20px;
  font-size: 14px;
  margin-top: 20px;
}
.form-success.visible { display: block; }

/* ---------- Reveal on scroll ----------
   Progressive enhancement: content is visible by default. Only once the
   'js' class (set synchronously in <head>, see inline script) confirms
   JavaScript actually runs do .reveal elements start hidden, ready for
   main.js to reveal them as they scroll into view. If JS fails to load,
   nothing is ever hidden. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.js .reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Misc ---------- */
.breadcrumb { padding: 20px 0 0; font-size: 13px; color: var(--steel); }
.breadcrumb a { color: var(--steel); }
.breadcrumb span { color: var(--onyx); }

.bullet-list { display: flex; flex-direction: column; }
.bullet-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.bullet-row .mark { color: var(--bordeaux); font-family: var(--font-mono); }

.pill {
  padding: 8px 18px;
  border: 1px solid #3A3A3D;
  border-radius: 999px;
  font-size: 13px;
  color: var(--steel-light);
  background: none;
  cursor: pointer;
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.pill:active { transform: scale(0.97); }
.pill.active, .pill:hover { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--alabaster); }

.trust-bar-wrap { padding: 44px 0; border-bottom: 1px solid var(--line); }
/* Logo's: één rij die stapsgewijs doortikt (pauzeert bij hover) */
.trust-viewport { overflow: hidden; --n: 2; }
@media (min-width: 600px) { .trust-viewport { --n: 3; } }
@media (min-width: 900px) { .trust-viewport { --n: 5; } }
.trust-track { display: flex; will-change: transform; }
.trust-track.is-moving { transition: transform 450ms var(--ease-in-out); }
.trust-cell { flex: 0 0 calc(100% / var(--n)); display: flex; align-items: center; justify-content: center; height: 64px; padding: 0 22px; }
.trust-cell img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.85; transition: filter 200ms var(--ease-out), opacity 200ms var(--ease-out); }
.trust-cell:hover img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .trust-track { flex-wrap: wrap; row-gap: 28px; } }

/* Logo's: losse cluster, alle logo's tegelijk zichtbaar zonder vakjes/raster */
/* Vaste kolomaantallen die 24 gelijk delen (4/6/8), zodat de laatste rij nooit een los logo overhoudt */
.trust-cloud { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 20px; row-gap: 22px; margin: 32px auto 0; padding: 8px 0; max-width: 980px; }
.trust-cloud-item { flex: 0 0 calc((100% - 40px) / 3); min-width: 0; }
@media (min-width: 480px) { .trust-cloud-item { flex-basis: calc((100% - 60px) / 4); } }
@media (min-width: 560px) { .trust-cloud-item { flex-basis: calc((100% - 100px) / 6); } }
@media (min-width: 900px) { .trust-cloud-item { flex-basis: calc((100% - 140px) / 8); } }
.trust-cloud-item { display: flex; align-items: center; justify-content: center; height: 34px; }
.trust-cloud-item img { height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.55; transition: filter 200ms var(--ease-out), opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .trust-cloud-item:hover img { filter: none; opacity: 1; transform: scale(1.04); } }
.trust-cloud-item:nth-child(3n) { height: 44px; }
.trust-cloud-item:nth-child(5n) { height: 26px; }
.trust-cloud-item:nth-child(4n+2) { transform: translateY(-6px); }
.trust-cloud-item:nth-child(7n+3) { transform: translateY(8px); }

/* ---------- Dienst-tags (Use Cases / Diensten) ---------- */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--bordeaux);
  background: #E9EEF7;
  border: 1px solid #C7D2E8;
  padding: 6px 12px;
}
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Keurmerk-badges (homepage) ----------
   Tekstbadges tot de officiële logo-bestanden beschikbaar zijn. */
.cert-badge { display: flex; align-items: center; gap: 16px; background: var(--white); border: 1px solid var(--line); padding: 20px 22px; }
.cert-mark { width: 44px; height: 44px; flex-shrink: 0; background: var(--bordeaux); color: var(--alabaster); display: flex; align-items: center; justify-content: center; }
.cert-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.3; }
.cert-sub { font-size: 13px; color: var(--steel); margin-top: 3px; }
.cert-logo { justify-content: center; padding: 14px 22px; }
.cert-logo img { display: block; height: 72px; width: auto; max-width: 100%; }

/* ---------- Over-tekst in "Wie we zijn" ---------- */
.about-text { max-width: 720px; margin: 0 auto 32px; text-align: center; }
.about-text p { font-size: 16px; line-height: 1.75; color: var(--steel-light); }

/* ---------- Contactpagina: formulier + gegevens naast elkaar ---------- */
.contact-layout { display: grid; gap: 48px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; } }

/* ---------- Diensten: tabbed overzicht ---------- */
.dtabs { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .dtabs { grid-template-columns: 340px 1fr; gap: 0; border: 1px solid var(--line); background: var(--white); } }
.dtablist { display: flex; gap: 0; overflow-x: auto; border: 1px solid var(--line); background: var(--white); }
@media (min-width: 900px) { .dtablist { flex-direction: column; overflow: visible; border: none; border-right: 1px solid var(--line); background: var(--alabaster); } }
.dtab { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: transparent; border: none; border-bottom: 2px solid transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--onyx); cursor: pointer; text-align: left; white-space: nowrap; transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out); }
@media (min-width: 900px) { .dtab { border-bottom: 1px solid var(--line); border-left: 3px solid transparent; white-space: normal; } .dtab:last-child { border-bottom: none; } }
.dtab-num { font-family: var(--font-mono); font-size: 12px; color: var(--steel); }
.dtab-title { flex: 1; }
.dtab-arrow { display: none; color: var(--steel-light); }
@media (min-width: 900px) { .dtab-arrow { display: inline; } }
.dtab:hover { background: var(--white); }
.dtab[aria-selected="true"] { background: var(--onyx); color: var(--alabaster); border-bottom-color: var(--accent-light); }
@media (min-width: 900px) { .dtab[aria-selected="true"] { border-left-color: var(--accent-light); } }
.dtab[aria-selected="true"] .dtab-num, .dtab[aria-selected="true"] .dtab-arrow { color: var(--accent-light); }
.dpanel { padding: 28px 24px; max-width: 720px; }
@media (min-width: 900px) { .dpanel { padding: 40px 48px; } }
.dpanel[hidden] { display: none; }
.dpanel-num { font-family: var(--font-mono); font-size: 13px; color: var(--steel); margin-bottom: 8px; }
.dpanel h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 8px; }
.dpanel-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bordeaux-tint); margin-bottom: 20px; }
.dpanel p { font-size: 15px; line-height: 1.75; color: #4A4A4C; margin-bottom: 14px; }

/* ---------- Homepage: transparante menubalk, zichtbaar bij scrollen ---------- */
.topbar-overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 101; background: transparent !important; }
.site-header.header-overlay { position: fixed; top: 40px; left: 0; right: 0; background: transparent; transition: top 250ms var(--ease-out), background-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out); }
.site-header.header-overlay.scrolled,
.site-header.header-overlay.menu-open { top: 0; background: rgba(14, 14, 14, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(247, 246, 244, 0.08); }
.hero.hero-overlay { padding-top: 140px; padding-bottom: 64px; }
@media (min-width: 900px) { .hero.hero-overlay { padding-top: 190px; padding-bottom: 130px; min-height: 780px; display: flex; align-items: center; } .hero.hero-overlay > .container { width: 100%; } }

/* ---------- Over ons ---------- */
.about-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 5fr 7fr; gap: 72px; } }
.about-copy p { font-size: 16px; line-height: 1.75; color: #4A4A4C; margin-bottom: 18px; }
.about-copy p:last-child { margin-bottom: 0; }
.about-copy .about-lede { font-size: 19px; line-height: 1.6; color: var(--onyx); }
.about-quote { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; color: var(--onyx); border-left: 3px solid var(--bordeaux); padding-left: 24px; max-width: 820px; }
.about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; padding-top: 40px; padding-bottom: 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 72px; }
@media (min-width: 900px) { .about-stats { grid-template-columns: repeat(4, 1fr); } }
.about-stats .stat-num { color: var(--onyx); font-size: 30px; }
.about-stat-label { color: var(--steel); font-size: 13px; margin-top: 8px; }
.about-values { display: grid; gap: 32px; }
@media (min-width: 900px) { .about-values { grid-template-columns: repeat(3, 1fr); gap: 0; } .about-values > div { padding: 0 40px; border-left: 1px solid rgba(247, 246, 244, 0.14); } .about-values > div:first-child { padding-left: 0; border-left: none; } }
.about-values p { color: var(--steel-light); font-size: 15px; line-height: 1.6; }

/* ---------- Menu: uitklap voor Diensten ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-caret { opacity: 0.7; flex-shrink: 0; transition: transform 150ms var(--ease-out); }
.nav-dropdown:hover .nav-caret, .nav-dropdown:focus-within .nav-caret { transform: rotate(180deg); }
.nav-submenu { display: none; position: absolute; top: 100%; left: -16px; min-width: 260px; padding: 12px 0 8px; z-index: 110; }
.nav-submenu::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; bottom: 0; background: var(--onyx); border: 1px solid var(--line-dark); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35); z-index: -1; }
.nav-dropdown:hover .nav-submenu, .nav-dropdown:focus-within .nav-submenu { display: block; }
.nav-links .nav-submenu a { display: block; padding: 10px 20px; border-bottom: none; font-size: 14px; color: var(--steel-light); }
.nav-links .nav-submenu a:hover { color: var(--alabaster); background: rgba(247, 246, 244, 0.06); border-bottom: none; }
.mobile-sub summary { list-style: none; cursor: pointer; color: var(--alabaster); font-size: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-dark); display: flex; justify-content: space-between; align-items: center; }
.mobile-sub summary::-webkit-details-marker { display: none; }
.mobile-sub summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-right: 4px; opacity: 0.7; transition: transform 150ms var(--ease-out); }
.mobile-sub[open] summary::after { transform: rotate(-135deg); }
.mobile-sub-links { padding-left: 16px; }
.mobile-sub-links a { font-size: 15px; color: var(--steel-light); }

/* ---------- Homepage: "Wie we zijn" compact, tekst naast kaart ---------- */
.about-home { padding: 48px 0; }
@media (min-width: 900px) { .about-home { padding: 56px 0; } }
.about-home-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .about-home-grid { grid-template-columns: 1.25fr 1fr; gap: 48px; } }
.about-home-text { font-size: 16px; line-height: 1.7; color: var(--steel-light); margin-bottom: 20px; max-width: 640px; }
.about-home-text strong { color: var(--alabaster); font-weight: 600; }
.about-home .reason-item { padding: 12px 0; }
.about-home .reason-marker { display: none; }
.about-home .reason-label { margin-bottom: 4px; }
.about-home .nl-figure { max-width: 400px; }

/* Paneel met foto: tekst links, foto rechts naast de hele tekst (zodra er ruimte is) */
.dpanels { container-type: inline-size; }
.dpanel-has-photo { display: grid; gap: 24px; max-width: none; }
.dpanel-photo { width: 100%; max-width: 260px; aspect-ratio: 3 / 4; }
.dpanel-photo img { object-position: 50% 15%; }
@container (min-width: 700px) {
  .dpanel-has-photo { grid-template-columns: minmax(0, 1fr) 230px; gap: 36px; align-items: stretch; }
  .dpanel-has-photo .dpanel-photo { height: 100%; max-width: none; aspect-ratio: auto; min-height: 340px; }
}

/* ---------- Fotobehandeling (B3): zwart-wit, blauwe schaduw + lijn, kleur bij hover ---------- */
.photo-b3 { position: relative; overflow: hidden; background: var(--onyx); }
.photo-b3 img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 250ms var(--ease-out); }
.photo-b3::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 28, 49, 0.92) 0%, rgba(14, 28, 49, 0.15) 55%, transparent); transition: opacity 250ms var(--ease-out); pointer-events: none; }
.photo-b3::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent-light); z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .service-panel:hover .photo-b3 img, .photo-b3:hover img { filter: none; }
  .service-panel:hover .photo-b3::after, .photo-b3:hover::after { opacity: 0.45; }
}
/* Op touch-apparaten bestaat geen hover: kleur verschijnt bij aanraken (tap-and-hold) */
@media (hover: none) {
  .service-panel:active .photo-b3 img, .photo-b3:active img { filter: none; }
  .service-panel:active .photo-b3::after, .photo-b3:active::after { opacity: 0.45; }
}

/* ---------- Beeldmerk (A1): groot embleem als watermerk in de hero ---------- */
.hero-wm { position: absolute; top: 50%; right: -70px; width: 500px; transform: translateY(-50%); opacity: 0.16; pointer-events: none; }
.hero-page .hero-wm { left: auto; right: -30px; width: 260px; transform: translateY(-50%); opacity: 0.14; }
@media (max-width: 700px) { .hero-wm { right: -120px; width: 340px; } .hero-page .hero-wm { right: -80px; width: 220px; } }

/* ---------- Casepagina: tekst naast foto ---------- */
.case-layout { display: grid; gap: 40px; grid-template-columns: 1fr; }
.case-photo { aspect-ratio: 3 / 2; width: 100%; }
.case-photo img { object-position: 50% 40%; }
@media (min-width: 900px) {
  .case-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .case-layout .case-wide { grid-column: 1 / -1; }
}
@media (hover: hover) and (pointer: fine) { .case-photo:hover img { filter: none; } }
@media (hover: none) { .case-photo:active img { filter: none; } }

/* ---------- Casepagina: fotoslideshow ---------- */
.case-slideshow { position: relative; }
.case-slideshow img { position: absolute; inset: 0; opacity: 0; z-index: 1; transition: opacity 1600ms var(--ease-in-out); }
.case-slideshow img.is-active { opacity: 1; z-index: 2; }
.case-slideshow-dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.case-slideshow-dots span { width: 6px; height: 6px; background: rgba(247, 246, 244, 0.4); transition: background-color 200ms var(--ease-out); }
.case-slideshow-dots span.is-active { background: var(--accent-light); }
.case-slideshow-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(14, 20, 36, 0.5); border: 1px solid rgba(247, 246, 244, 0.3); color: var(--alabaster); cursor: pointer; padding: 0; transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out); }
.case-slideshow-arrow:hover { background: rgba(14, 20, 36, 0.75); border-color: var(--accent-light); }
.case-slideshow-arrow:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.case-slideshow-prev { left: 12px; }
.case-slideshow-next { right: 12px; }

/* "Meer cases": één rij, scrollt horizontaal met pijltjes als het niet past */
.more-cases-row { display: flex; align-items: stretch; gap: 12px; }
.mc-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; flex: 1; min-width: 0; }
.mc-track::-webkit-scrollbar { display: none; }
.mc-track > .card { flex: 0 0 220px; scroll-snap-align: start; }
.mc-arrow { flex: 0 0 40px; display: flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--line); color: var(--onyx); cursor: pointer; padding: 0; transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), opacity 150ms var(--ease-out); }
.mc-arrow:hover { background: var(--onyx); border-color: var(--onyx); color: var(--alabaster); }
.mc-arrow:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
.mc-arrow[disabled] { opacity: 0.25; cursor: default; }
.mc-arrow.is-hidden { display: none; }
@media (prefers-reduced-motion: reduce) { .case-slideshow img { transition: none; } }

/* ---------- Homepage: subtiele persoon op de achtergrond van de hero ---------- */
.hero-person { display: none; }
@media (min-width: 1000px) {
  .hero-person { display: block; position: absolute; left: 0; bottom: 0; height: 105%; width: auto; max-width: 42%; object-fit: cover; object-position: top; opacity: 0.42; filter: saturate(1.05) contrast(1.05); -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.6) 45%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.6) 45%, transparent 100%); pointer-events: none; }
}

/* Hero: feiten in één slanke regel onder een dunne lijn */
.hero-facts { display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; max-width: 560px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid rgba(247, 246, 244, 0.12); }
.hero-facts span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-light); }
.hero-facts i { width: 1px; height: 12px; background: #3A3A3D; }

/* ---------- Keurmerken: logo's zonder vakjes ---------- */
.cert-row { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 72px; }
.cert-img { display: block; width: auto; max-width: 100%; }
.cert-img-round { height: 92px; }
.cert-img-wide { height: 78px; }
.cert-img-code { height: 62px; }

/* ---------- Logo: metaalglans, gegraveerde look ---------- */
.logo .logo-mark { position: relative; display: block; line-height: 0; }
.logo .logo-mark img { filter: drop-shadow(0 -0.5px 0 rgba(255, 255, 255, 0.35)) drop-shadow(0 1.5px 2px rgba(0, 0, 0, 0.55)); }
.site-header .logo .logo-mark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.8) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-mask: url(../images/hks-embleem-grijs.png) center / contain no-repeat; mask: url(../images/hks-embleem-grijs.png) center / contain no-repeat;
  opacity: 0; animation: logo-sheen 900ms var(--ease-in-out) 700ms 1 both;
}
@keyframes logo-sheen { 0% { background-position: 100% 0; opacity: 1; } 100% { background-position: 0% 0; opacity: 1; } }
@keyframes logo-sheen-hover { 0% { background-position: 100% 0; opacity: 1; } 100% { background-position: 0% 0; opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .site-header .logo:hover .logo-mark::after { animation: logo-sheen-hover 700ms var(--ease-in-out) 0ms 1 both; } }

/* ---------- Hero-embleem: vleugels openen zich vanuit het midden ---------- */
.hero-wm { --wm-o: 0.16; opacity: var(--wm-o); animation: wm-open 1100ms var(--ease-out) 250ms both; }
.hero-page .hero-wm { --wm-o: 0.14; }
@keyframes wm-open { from { clip-path: inset(0 50% 0 50%); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: var(--wm-o); } }
.hero-wm { transform: translateY(calc(-50% + var(--wm-shift, 0px))); }
@media (prefers-reduced-motion: reduce) {
  .site-header .logo .logo-mark::after { animation: none; opacity: 0; }
  .hero-wm { animation: none; }
}

/* Hero loopt zacht over in de volgende sectie (geen harde rand) */
.hero.hero-overlay > .container { position: relative; z-index: 1; }
.hero.hero-overlay::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(to bottom, rgba(18, 18, 18, 0) 0%, rgba(18, 18, 18, 0.85) 75%, #121212 100%); pointer-events: none; z-index: 0; }
.hero.hero-overlay { margin-bottom: -1px; position: relative; z-index: 1; }

/* ---------- Kaart van Nederland: lichtstreep over de stippen + pulserende steden ---------- */
.nl-wrap { position: relative; width: 100%; max-width: 400px; margin: 0 auto; }
.nl-wrap .nl-figure { position: relative; max-width: none; margin: 0; }
.nl-wrap .nl-figure::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(var(--accent-light) 1.8px, transparent 1.8px); background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(115deg, transparent 38%, #000 50%, transparent 62%); mask-image: linear-gradient(115deg, transparent 38%, #000 50%, transparent 62%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  animation: nl-sweep 7s var(--ease-in-out) infinite;
}
@keyframes nl-sweep { 0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 55%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
.nl-ping { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--accent-light); box-shadow: 0 0 10px rgba(129, 164, 218, 0.7); }
.nl-ping::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--accent-light); border-radius: 50%; opacity: 0; animation: nl-ping 3.2s var(--ease-out) infinite; animation-delay: var(--d, 0s); }
@keyframes nl-ping { 0% { transform: scale(1); opacity: 0.85; } 70%, 100% { transform: scale(5.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nl-wrap .nl-figure::after { animation: none; opacity: 0; } .nl-ping::after { animation: none; } }

/* ---------- Diensten op de homepage: één rij die doortikt (net als de logo's) ---------- */
.svc-viewport { overflow: hidden; --n: 1; margin: 0 -12px; }
@media (min-width: 640px) { .svc-viewport { --n: 2; } }
@media (min-width: 1000px) { .svc-viewport { --n: 4; } }
.svc-track { display: flex; will-change: transform; }
.svc-track.is-moving { transition: transform 550ms var(--ease-in-out); }
.svc-item { flex: 0 0 calc(100% / var(--n)); padding: 0 12px; display: flex; }
.svc-item .service-panel, .svc-item .card { flex: 1; min-width: 0; width: 100%; }
@media (prefers-reduced-motion: reduce) { .svc-track { flex-wrap: wrap; row-gap: 24px; } }

.about-home-lede { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 2.2vw, 23px); line-height: 1.35; color: var(--alabaster); margin-bottom: 14px; max-width: 620px; }

/* ---------- Typografie-hiërarchie (huisstijl) ----------
   Headline  : Bold 700, -2% letterspatiëring
   Subheadline: Bold 700, normaal
   Body      : Regular 400, regelafstand 1,45
   Caption   : Semibold 600, +16% letterspatiëring, kapitalen */
h1, h2 { font-weight: 700; letter-spacing: -0.02em !important; }
h3, h4 { font-weight: 700; letter-spacing: 0 !important; }
body { font-weight: 400; }
p, li, .lede { line-height: 1.45 !important; }
.eyebrow, .service-panel-tag, .reason-label, .hero-facts span, .dpanel-tag, .footer-col-title,
.topbar-overlay .mono, .mono[style*="uppercase"] {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.16em !important; text-transform: uppercase;
}

h1, h2 { text-wrap: balance; }

@media (max-width: 640px) {
  .topbar-overlay .mono { letter-spacing: 0.06em !important; font-size: 10px !important; }
  .topbar-overlay a { white-space: nowrap; }
}

/* ---------- Diensten: kaartenoverzicht + detailblokken ---------- */
.dsv-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .dsv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .dsv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dsv-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); color: inherit; }
.dsv-photo { aspect-ratio: 4 / 3; width: 100%; }
.dsv-emblem { display: flex; align-items: center; justify-content: center; }
.dsv-emblem img { width: 55%; height: auto; max-width: 55%; opacity: 0.3; filter: none !important; object-fit: contain; }
.dsv-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.dsv-body h3 { font-size: 18px; margin: 6px 0 0; }
.dsv-cap { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); }
.dsv-tag { color: var(--bordeaux-tint); margin: 6px 0 10px; }
.dsv-body p { font-size: 14px; color: #4A4A4C; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 14px; }
.dsv-link { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--bordeaux); }
.dsv-cta { background: var(--bordeaux); border-color: var(--bordeaux); }
.dsv-cta h3, .dsv-cta p { color: var(--alabaster); }
.dsv-cta p { -webkit-line-clamp: unset; }
.dsv-cta .dsv-body { justify-content: center; gap: 14px; }
.dsv-cta .btn { align-self: flex-start; }
@media (hover: hover) and (pointer: fine) {
  .dsv-card { transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
  .dsv-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(14, 28, 49, 0.12); }
  .dsv-card:hover .photo-b3 img { filter: none; }
  .dsv-card:hover .photo-b3::after { opacity: 0.45; }
}
@media (hover: none) {
  .dsv-card:active .photo-b3 img { filter: none; }
  .dsv-card:active .photo-b3::after { opacity: 0.45; }
}
.dsv-rows { display: flex; flex-direction: column; }
.dsv-row { display: grid; gap: 28px; align-items: center; padding: 48px 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
@media (min-width: 800px) { .dsv-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } .dsv-row.rev .dsv-photo { order: 2; } }
.dsv-text { display: flex; flex-direction: column; gap: 14px; }
.dsv-text h2 { font-size: clamp(26px, 3.2vw, 36px); }
.dsv-text p { color: #4A4A4C; }
.dsv-text .btn { align-self: flex-start; margin-top: 6px; }

/* Diensten: kaarten tonen de volledige tekst, drie naast elkaar */
@media (min-width: 1000px) { .dsv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dsv-cta { grid-column: span 1; } }
.dsv-card { scroll-margin-top: 96px; }
.dsv-body p { display: block; -webkit-line-clamp: unset; overflow: visible; margin-bottom: 12px; line-height: 1.45; }
.dsv-body p:last-of-type { margin-bottom: 18px; }
.dsv-cta p { margin-bottom: 0; }
article.dsv-card:hover { transform: none; box-shadow: none; }

.hero .eyebrow, .hero .lede { text-wrap: balance; }

/* Diensten: korte kop + uitklapbare tekst */
.dsv-grid { align-items: start; }
.dsv-body h3 { margin: 0; }
.dsv-tag { margin: 8px 0 14px; }
.dsv-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bordeaux); padding: 4px 0; border-bottom: 1px solid var(--accent-light); }
.dsv-more summary::-webkit-details-marker { display: none; }
.dsv-more summary::after { content: "+"; font-size: 16px; line-height: 1; }
.dsv-more[open] summary::after { content: "\2212"; }
.dsv-more summary:hover { color: var(--bordeaux-tint); }
.dsv-more summary:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }
.dsv-more[open] summary { margin-bottom: 14px; }
.dsv-more .dsv-link { display: inline-block; margin-top: 4px; }

/* Over ons: teamfoto */
.about-photo { margin: 0; width: 100%; aspect-ratio: 4 / 3; }
@media (min-width: 700px) { .about-photo { aspect-ratio: 21 / 9; } }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Over ons: tekst en foto naast elkaar */
.about-split { display: grid; gap: 32px; align-items: stretch; }
@media (min-width: 1100px) { .about-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.about-split-text h2 { margin-bottom: 20px; }
.about-split-text .about-lede { margin-bottom: 16px; }
.about-split-text p:last-child { margin-bottom: 0; }
.about-split .about-photo { aspect-ratio: 4 / 3; height: 100%; min-height: 320px; }
@media (min-width: 1100px) { .about-split .about-photo { aspect-ratio: auto; } }
.about-split-text p { font-size: 16px; color: #4A4A4C; margin-bottom: 16px; }
.about-split-text .about-lede { font-size: 19px; color: var(--onyx); }
.about-split + .container { margin-top: 40px !important; }
.about-stats { margin-top: 32px; }

/* Over ons: strakker blok, echte kernwaarden */
.about-split-2 { margin-top: 48px; }
.about-split-2 .about-split-text { gap: 0; }
.about-split-2 .about-quote { margin-top: 28px; }
@media (min-width: 900px) { .about-values { grid-template-columns: repeat(4, 1fr); } .about-values > div { padding: 0 28px; } }

/* Over ons: foto links, belofte, kernwaarden met embleem */
@media (min-width: 1100px) { .about-split-2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } }
.about-split-2 .about-photo { aspect-ratio: 4 / 5; max-height: 560px; }
@media (min-width: 700px) and (max-width: 1099px) { .about-split-2 .about-photo { aspect-ratio: 4 / 3; } }
@media (min-width: 1100px) { .about-split-2 .about-photo { aspect-ratio: auto; max-height: none; } }
.about-split-2 .about-split-text { justify-content: center; }
.about-promise { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.about-promise-label { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bordeaux-tint); margin-bottom: 12px; }
.about-split-text .about-promise p { font-size: 20px; font-weight: 700; color: var(--bordeaux); margin: 0; max-width: 34ch; }
.about-values-section { position: relative; overflow: hidden; }
.about-values-section::before { content: ""; position: absolute; right: -190px; bottom: -110px; width: 520px; height: 395px; background: url("../images/hks-embleem-grijs.png") no-repeat center / contain; opacity: 0.07; pointer-events: none; }
.about-values-section .container { position: relative; }
.about-values > div { position: relative; }
.about-values > div::before { content: ""; display: block; width: 32px; height: 3px; background: var(--accent-light); margin-bottom: 20px; }
.about-values h3 { font-size: 22px !important; }

/* Cases: Brasa Fest */
.brasa-gallery { display: grid; gap: 20px; grid-template-columns: 1fr; }
.brasa-gallery figure { margin: 0; }
.brasa-gallery .brasa-a { aspect-ratio: 4 / 5; }
.brasa-gallery .brasa-b, .brasa-gallery .brasa-c { aspect-ratio: 3 / 2; }
.brasa-gallery img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .brasa-gallery { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto; gap: 24px; }
  .brasa-gallery .brasa-a { grid-row: 1 / span 2; aspect-ratio: auto; }
}
@media (hover: hover) and (pointer: fine) { .brasa-gallery .photo-b3:hover img { filter: none; } }
.cases-thumb { aspect-ratio: 3 / 2; width: 100%; }
.cases-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1100px) { .cases-grid { grid-template-columns: repeat(4, 1fr); } }

/* Performance: geen doorlopende animaties buiten beeld */
.nl-wrap.is-paused .nl-figure::after, .nl-wrap.is-paused .nl-ping::after { animation-play-state: paused; }
.trust-track, .svc-track { backface-visibility: hidden; }

/* Vangnet: laadt het script niet of te laat, dan wordt alles alsnog zichtbaar */
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }
.js .reveal:not(.in-view) { animation: reveal-failsafe 300ms ease-out 4s forwards; }

/* Homepage-banner: video op de achtergrond (zonder geluid) */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: 0.85; pointer-events: none; }
.hero-video-shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 48%, rgba(10, 20, 36, 0.55) 0%, rgba(10, 20, 36, 0.18) 100%), linear-gradient(to bottom, rgba(10, 20, 36, 0.35) 0%, rgba(10, 20, 36, 0) 30%); }
.hero.hero-overlay .hero-wm { z-index: 0; --wm-o: 0.1; left: 50%; right: auto; transform: translate(-50%, calc(-50% + var(--wm-shift, 0px))); }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } .hero.hero-overlay { background-image: url("../images/hero-banner-poster.jpg") !important; background-size: cover !important; background-position: 50% 42% !important; } }

/* Homepage-banner: lager (net onder de helft van het scherm), video gecentreerd */
@media (min-width: 900px) { .hero.hero-overlay { padding-top: 140px; padding-bottom: 64px; min-height: 54vh; } }
.hero.hero-overlay::after { height: 100px; }

/* WhatsApp-widget rechtsonder */
.wa-widget { position: fixed; right: 20px; bottom: 20px; z-index: 60; }
.wa-float { position: relative; display: flex; align-items: center; gap: 0; height: 52px; padding: 0 13px; background: var(--bordeaux); color: #25D366; border: none; border-bottom: 3px solid var(--accent-light); box-shadow: 0 8px 22px rgba(10, 20, 36, 0.35); cursor: pointer; transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.wa-float svg { flex: none; }
.wa-label { max-width: 0; overflow: hidden; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--alabaster); transition: max-width 260ms var(--ease-out), margin 260ms var(--ease-out); }
.wa-float:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }
.wa-float:focus-visible .wa-label, .wa-widget.is-open .wa-float .wa-label { max-width: 160px; margin-right: 10px; }
@media (hover: hover) and (pointer: fine) { .wa-float:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10, 20, 36, 0.45); } .wa-float:hover .wa-label { max-width: 160px; margin-right: 10px; } }
.wa-float:active { transform: scale(0.97); }
@media (max-width: 640px) { .wa-widget { right: 14px; bottom: 14px; } }
@media print { .wa-widget { display: none; } }

.wa-panel { position: absolute; right: 0; bottom: calc(100% + 14px); width: 300px; max-width: calc(100vw - 28px); background: var(--alabaster); border: 1px solid var(--onyx); box-shadow: 0 16px 40px rgba(10, 20, 36, 0.28); opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.98); transform-origin: bottom right; pointer-events: none; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 180ms; }
.wa-widget.is-open .wa-panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.wa-panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px; background: var(--bordeaux); }
.wa-panel-avatar { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--alabaster); }
.wa-panel-avatar img { width: 20px; height: 20px; object-fit: contain; }
.wa-panel-head-text { flex: 1; min-width: 0; }
.wa-panel-name { font-size: 13px; font-weight: 700; color: var(--alabaster); }
.wa-panel-status { font-size: 11px; color: var(--accent-light); display: flex; align-items: center; gap: 5px; }
.wa-panel-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3AD07A; flex: none; }
.wa-panel-close { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--accent-light); font-size: 18px; line-height: 1; cursor: pointer; }
.wa-panel-close:hover { color: var(--alabaster); }
.wa-panel-msg { margin: 14px 14px 12px; font-size: 13.5px; line-height: 1.5; color: var(--onyx); }
.wa-panel-options { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; }
.wa-option { display: block; padding: 10px 12px; border: 1px solid var(--line); background: #fff; color: var(--onyx); font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .wa-option:hover { background: var(--alabaster-tint, #F0EDE7); border-color: var(--bordeaux-tint); } }
.wa-option:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) { .wa-panel { transition: opacity 120ms linear; transform: none; } }

/* Homepage-banner: iets lager (loopt tot ± 2/3 van het scherm) */
@media (min-width: 900px) { .hero.hero-overlay { min-height: 66vh; padding-top: 150px; padding-bottom: 90px; } }
.hero.hero-overlay::after { height: 120px; }
@media (min-width: 900px) { .hero.hero-overlay { min-height: 72vh; padding-top: 160px; padding-bottom: 100px; } }

@media (min-width: 1100px) { .cases-grid { grid-template-columns: repeat(3, 1fr); } }

/* Brasa Fest: tekst met kleinere foto's ernaast */
.brasa-wrap { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; }
.brasa-text { max-width: 640px; }
.brasa-side { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.brasa-side figure { margin: 0; }
.brasa-side img { width: 100%; height: 100%; object-fit: cover; }
.brasa-t { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.brasa-u, .brasa-v { aspect-ratio: 1 / 1; }
@media (min-width: 900px) { .brasa-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; } }
@media (hover: hover) and (pointer: fine) { .brasa-side .photo-b3:hover img { filter: none; } }

/* Doortikken: rustigere, vloeiende beweging */
.trust-track.is-moving { transition: transform 900ms cubic-bezier(0.4, 0, 0.2, 1); }
.svc-track.is-moving { transition: transform 1000ms cubic-bezier(0.4, 0, 0.2, 1); }

.brasa-w { grid-column: 1 / -1; aspect-ratio: 4 / 3; }

/* Dienst-detailpagina's */
.dienst-layout { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .dienst-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; } }
.dienst-text p { font-size: 16px; color: #4A4A4C; margin-bottom: 16px; max-width: 640px; }
.dienst-text .dienst-lede { font-size: 19px; color: var(--onyx); }
.dienst-sub { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bordeaux-tint); margin: 32px 0 12px; }
.dienst-list { list-style: none; margin: 0 0 32px; padding: 0; max-width: 640px; }
.dienst-list li { padding: 12px 0 12px 22px; border-top: 1px solid var(--line); position: relative; font-size: 16px; }
.dienst-list li:last-child { border-bottom: 1px solid var(--line); }
.dienst-list li::before { content: ""; position: absolute; left: 0; top: 21px; width: 10px; height: 3px; background: var(--accent-light); }
.dienst-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dienst-photo { margin: 0; width: 100%; aspect-ratio: 4 / 5; }
.dienst-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) { .dienst-photo:hover img { filter: none; } }
@media (hover: none) { .dienst-photo:active img { filter: none; } }
.btn-ghost-dark { background: transparent; color: var(--bordeaux); border: 1px solid var(--bordeaux); }
.btn-ghost-dark:hover { background: var(--bordeaux); color: var(--alabaster); }

/* Dienst-detailpagina's: "Waarom HKS" + mini-FAQ */
.why-grid { display: grid; gap: 28px; grid-template-columns: 1fr; margin-top: 32px; }
@media (min-width: 700px) { .why-grid { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.why-item { display: flex; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.why-item .ic { width: 24px; height: 24px; color: var(--bordeaux); flex-shrink: 0; margin-top: 2px; }
.why-item h4 { font-size: 15px; margin: 0 0 6px; color: var(--onyx); }
.why-item p { font-size: 13px; line-height: 1.6; color: var(--steel); margin: 0; }
.faq { margin-top: 44px; max-width: 700px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 15px; font-weight: 600; color: var(--onyx); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 18px; color: var(--bordeaux); flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { font-size: 14px; line-height: 1.7; color: var(--steel); margin: 0 0 20px; max-width: 600px; }

/* Logo in de menubalk: grijs embleem, letters zonder kleur */
.logo span { color: #C9C9CB; }
.logo .hks-word { color: var(--alabaster); }
.logo span.logo-mark { color: inherit; }
.logo .logo-mark img { height: 34px; }

/* Footer: social-icons (Instagram, TikTok) */
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(247, 246, 244, 0.16); color: var(--steel-light); transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out); }
.footer-social a:hover { color: var(--accent-light); border-color: var(--accent-light); }

/* Pijltjes bij de doortikkende rijen op de homepage */
.tick-row { display: flex; align-items: center; gap: 8px; }
.tick-row > .svc-viewport, .tick-row > .trust-viewport { flex: 1; min-width: 0; margin: 0; }
.tick-arrow { flex: 0 0 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--line); color: var(--onyx); cursor: pointer; padding: 0; transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out); }
.tick-arrow:hover { background: var(--onyx); border-color: var(--onyx); color: var(--alabaster); }
.tick-arrow:active { transform: scale(0.96); }
.tick-arrow:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.tick-row-dark .tick-arrow { background: transparent; border-color: #3A3A3D; color: var(--alabaster); }
.tick-row-dark .tick-arrow:hover { background: var(--alabaster); border-color: var(--alabaster); color: var(--onyx); }
@media (max-width: 640px) { .tick-arrow { flex-basis: 34px; height: 34px; } .tick-row { gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .tick-arrow { display: none; } }

/* Cases: klantlogo's op mobiel groter en in 3 kolommen */
@media (max-width: 479px) {
  .trust-cloud { column-gap: 16px; row-gap: 26px; }
  .trust-cloud-item { flex-basis: calc((100% - 32px) / 3); height: 44px; }
  .trust-cloud-item:nth-child(3n) { height: 52px; }
  .trust-cloud-item:nth-child(5n) { height: 38px; }
}

/* Cases-overzicht: 1, 2 of 4 kolommen zodat de laatste rij nooit half leeg blijft bij 8 cases */
.cases-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .cases-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cases-grid { grid-template-columns: repeat(4, 1fr); } }

/* "Meer cases": altijd hele kaarten in beeld, geen afgesneden kaart aan de rand */
.mc-track { --n: 1; }
@media (min-width: 600px) { .mc-track { --n: 2; } }
@media (min-width: 900px) { .mc-track { --n: 3; } }
@media (min-width: 1100px) { .mc-track { --n: 4; } }
.mc-track > .card { flex: 0 0 calc((100% - (var(--n) - 1) * 24px) / var(--n)); }

/* Over ons: "Onze belofte" gecentreerd in het witte vlak */
.about-promise { text-align: center; }
.about-split-text .about-promise p { margin: 0 auto; }

/* Over ons: "Onze belofte" ongeveer 3 cm lager dan de oorspronkelijke plek */
.about-promise { margin-top: 128px; }
@media (min-width: 1100px) { .about-promise { margin-top: 32px; position: relative; top: 112px; } }

/* Over ons: geen lijn boven "Onze belofte" */
.about-promise { border-top: none; padding-top: 0; }