/* ConCop — gedeelde stijl
   Kleuren afgeleid van het logo: crimson #A80F1A + grafiet #6F7F80 */
:root {
  --red: #A80F1A;
  --red-bright: #C4141F;
  --red-deep: #7A0A12;
  --red-tint: #FBEDEC;
  --graphite: #6F7F80;
  --graphite-deep: #3B4748;
  --graphite-soft: #DDE3E3;
  --mist: #F2F4F4;
  --ink: #1A2122;
  --paper: #FFFFFF;

  /* spacing tokens */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --section-y: clamp(4.5rem, 9vw, 7.5rem);

  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* depth: base -> raised -> floating (tinted, layered) */
  --shadow-raised:
    0 1px 1px rgba(59, 71, 72, .05),
    0 10px 22px -12px rgba(59, 71, 72, .18),
    0 28px 56px -36px rgba(122, 10, 18, .16);
  --shadow-floating:
    0 2px 3px rgba(59, 71, 72, .06),
    0 22px 44px -18px rgba(59, 71, 72, .30),
    0 48px 90px -48px rgba(122, 10, 18, .32);
  --shadow-red:
    0 1px 2px rgba(122, 10, 18, .25),
    0 10px 24px -10px rgba(168, 15, 26, .55);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--red); color: #fff; }

.wrap { width: min(100% - 2 * var(--gutter), 74rem); margin-inline: auto; }
.section { padding-block: var(--section-y); scroll-margin-top: 4.5rem; }
.measure { max-width: 40rem; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 3px; }
.on-dark :focus-visible { outline-color: #fff; }

.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 80;
  background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 6px;
  transition: transform .2s var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(5.25rem); }

/* ---------- typography ---------- */
.display {
  font-family: 'Saira', ui-sans-serif, sans-serif;
  font-stretch: 87.5%;
}
.h-hero {
  font-family: 'Saira', ui-sans-serif, sans-serif; font-stretch: 87.5%;
  font-style: italic; font-weight: 700;
  font-size: clamp(2.6rem, 6.6vw, 5.4rem); line-height: 1; letter-spacing: -0.03em;
  text-wrap: balance;
}
.h-section {
  font-family: 'Saira', ui-sans-serif, sans-serif; font-stretch: 87.5%;
  font-style: italic; font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.05; letter-spacing: -0.03em;
  text-wrap: balance;
}
.h-card {
  font-family: 'Saira', ui-sans-serif, sans-serif; font-stretch: 87.5%;
  font-style: italic; font-weight: 700;
  font-size: 1.7rem; line-height: 1.1; letter-spacing: -0.02em;
}
.h-sub {
  font-family: 'Saira', ui-sans-serif, sans-serif; font-stretch: 87.5%;
  font-weight: 600; font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.005em;
}
.lead { font-size: clamp(1.125rem, 1.6vw, 1.25rem); line-height: 1.7; color: var(--graphite-deep); }
.kicker { font-weight: 500; font-size: .95rem; color: var(--red); }
.muted { color: var(--graphite-deep); }
.prose-body p + p { margin-top: var(--space-3); }

/* ---------- header (floating layer) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.site-header[data-scrolled="true"] {
  border-bottom-color: rgba(59, 71, 72, .08);
  box-shadow: 0 14px 30px -22px rgba(59, 71, 72, .45);
}
.brand-link { display: inline-flex; border-radius: 4px; transition: transform .3s var(--spring), opacity .2s; }
.brand-link:hover { transform: translateX(2px) skewX(-4deg); }
.brand-link:active { transform: scale(.97); }

.nav-link {
  position: relative; display: inline-block; padding: .5rem .2rem;
  font-weight: 500; font-size: .975rem; color: var(--graphite-deep);
  transition: color .2s var(--ease-out);
}
.nav-link::after {
  content: ""; position: absolute; left: .2rem; right: .2rem; bottom: .3rem; height: 2px;
  background: var(--red); transform: scaleX(0) skewX(-20deg); transform-origin: left;
  transition: transform .35s var(--spring);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1) skewX(-20deg); }
.nav-link[aria-current="page"] { color: var(--ink); }
.nav-link:active { opacity: .7; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .75rem 1.4rem;
  font-weight: 600; font-size: 1rem; line-height: 1.25; text-align: center;
  border-radius: 4px;
  transition: transform .3s var(--spring), background-color .2s var(--ease-out), color .2s, box-shadow .25s var(--ease-out), border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.btn-primary { background: var(--red); color: #fff; box-shadow: var(--shadow-red); }
.btn-primary:hover { background: var(--red-bright); box-shadow: 0 1px 2px rgba(122,10,18,.25), 0 16px 30px -12px rgba(168,15,26,.6); }
.btn-primary:active { background: var(--red-deep); }
.btn-ghost { color: var(--ink); border: 1.5px solid rgba(59, 71, 72, .3); background: #fff; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost:active { background: var(--mist); }
.btn-light { background: #fff; color: var(--red-deep); box-shadow: 0 12px 28px -14px rgba(26, 33, 34, .6); }
.btn-light:hover { background: var(--red-tint); }
.btn-light:active { background: #f3d7d5; }
.btn-small { min-height: 2.5rem; padding: .5rem 1rem; font-size: .925rem; }

.text-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--red);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em;
  text-decoration-color: rgba(168, 15, 26, .3);
  transition: text-decoration-color .2s, color .2s;
}
.text-link:hover { text-decoration-color: currentColor; color: var(--red-deep); }
.text-link:active { opacity: .7; }
.text-link .chev { transition: transform .3s var(--spring); }
.text-link:hover .chev { transform: translateX(3px); }

/* ---------- hexagons (brand motif) ---------- */
.hex-mark {
  display: inline-block; width: 1.05em; height: 1.05em; flex: none;
  background: var(--red);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  transform: rotate(-12deg);
}
.hex-mark.is-grey { background: var(--graphite); }

.hex-mark.is-red { background: var(--red-deep); }

.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 70% at 85% 20%, rgba(168, 15, 26, .07), transparent 70%),
    radial-gradient(40% 50% at 10% 100%, rgba(111, 127, 128, .10), transparent 70%);
}
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.23 0 0 0 0 0.28 0 0 0 0 0.28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hexfield { width: 100%; height: auto; overflow: visible; }
.hexfield .hx {
  transform-box: fill-box; transform-origin: center;
  animation: hexIn .9s var(--spring) both;
  animation-delay: calc(var(--i, 0) * 55ms + 150ms);
}
.hexfield .hx-red { fill: var(--red); }
.hexfield .hx-deep { fill: var(--red-deep); }
.hexfield .hx-grey { fill: var(--graphite); }
.hexfield .hx-soft { fill: var(--graphite-soft); }
.hexfield .hx-line { fill: none; stroke: var(--graphite); stroke-width: 2; stroke-dasharray: 5 6; opacity: .6; }
@keyframes hexIn {
  from { opacity: 0; transform: scale(.4) rotate(-25deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

/* ---------- surfaces ---------- */
.panel {
  position: relative; background: #fff; border-radius: 6px;
  border: 1px solid rgba(59, 71, 72, .1);
  box-shadow: var(--shadow-raised);
}
.panel-feature {
  position: relative; border-radius: 6px; color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .12), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(26, 33, 34, .35), transparent 60%),
    var(--red);
  box-shadow: var(--shadow-floating);
  overflow: hidden; isolation: isolate;
}
.panel-feature .hex-ghost {
  position: absolute; right: -2.5rem; bottom: -3rem; width: 12rem; height: 12rem; z-index: -1;
  background: rgba(255, 255, 255, .08);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  transform: rotate(-12deg);
}
.service-link { display: block; height: 100%; border-radius: 6px; transition: transform .35s var(--spring), box-shadow .3s var(--ease-out); }
.service-link:hover { transform: translateY(-4px); }
.service-link.panel:hover { box-shadow: var(--shadow-floating); }
.service-link:active { transform: translateY(-1px) scale(.99); transition-duration: .1s; }
.service-link .chev { display: inline-block; transition: transform .3s var(--spring); }
.service-link:hover .chev { transform: translateX(4px); }

.band-dark {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(168, 15, 26, .35), transparent 60%),
    radial-gradient(60% 60% at 0% 100%, rgba(111, 127, 128, .25), transparent 70%),
    #2C3637;
}
.band-dark .muted, .band-dark .lead { color: #C9D2D2; }
.band-mist { background: var(--mist); }

/* lists */
.hex-list { display: grid; gap: var(--space-3); }
.hex-list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .9rem; align-items: start; }
.hex-list .hex-mark { width: 1rem; height: 1rem; margin-top: .3em; }
.check-list li { position: relative; padding-left: 1.6rem; }
.check-list li + li { margin-top: .7rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: .6rem; height: .6rem;
  background: var(--red); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}

/* step sequence (real ordered process) */
.steps { counter-reset: step; display: grid; gap: 0; }
.steps li { counter-increment: step; position: relative; padding: 0 0 1.25rem 3rem; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -.05rem;
  display: grid; place-items: center; width: 2rem; height: 2rem;
  font-family: 'Saira', sans-serif; font-stretch: 87.5%; font-style: italic; font-weight: 700; font-size: 1rem;
  color: #fff; background: var(--red);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: .97rem; top: 2.2rem; bottom: .2rem; width: 2px;
  background: linear-gradient(var(--graphite-soft), var(--graphite-soft));
}

.meta-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem .85rem; border-radius: 4px;
  background: var(--red-tint); color: var(--red-deep); font-size: .95rem; font-weight: 500;
}
.result {
  border-left: 3px solid var(--red); padding: .25rem 0 .25rem 1.25rem;
  font-family: 'Saira', sans-serif; font-stretch: 87.5%; font-style: italic; font-weight: 600;
  font-size: 1.3rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink);
}

/* sub navigation on services page */
.jump {
  display: flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem;
  border-radius: 6px; background: #fff; border: 1px solid rgba(59,71,72,.12);
  font-weight: 600; color: var(--ink);
  transition: transform .3s var(--spring), border-color .2s, box-shadow .3s var(--ease-out);
}
.jump:hover { transform: translateY(-2px); border-color: var(--red); box-shadow: var(--shadow-raised); }
.jump:active { transform: scale(.98); }

/* definition rows */
.def-row { display: grid; gap: .25rem 2rem; padding-block: 1.1rem; border-top: 1px solid rgba(59,71,72,.14); }
@media (min-width: 640px) { .def-row { grid-template-columns: 15rem 1fr; } }

/* footer */
.site-footer { background: #fff; border-top: 1px solid rgba(59,71,72,.1); }
.foot-link { color: var(--graphite-deep); border-radius: 3px; transition: color .2s; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .25em; }
.foot-link:hover { color: var(--red); text-decoration-color: currentColor; }
.foot-link:active { opacity: .7; }

/* one orchestrated entrance: hero copy */
.rise { animation: rise .8s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 90ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}

/* ---------- per-service colour (scan = rood, project = grafiet, partner = roze uit het logo) ---------- */
.svc-scan    { --svc: #A80F1A; --svc-text: #A80F1A; --svc-tint: #FBEDEC; }
.svc-project { --svc: #6F7F80; --svc-text: #3B4748; --svc-tint: #E6EBEB; }
.svc-partner { --svc: #D0508A; --svc-text: #A93A70; --svc-tint: #F8E3EC; }

.hex-mark { background: var(--svc, var(--red)); }
.hex-mark.is-grey { background: var(--graphite); }
.hex-mark.is-red { background: var(--red-deep); }
.check-list li::before { background: var(--svc, var(--red)); }
.steps li::before { background: var(--svc, var(--red)); }
.meta-chip { background: var(--svc-tint, var(--red-tint)); color: var(--svc-text, var(--red-deep)); }
.result { border-left-color: var(--svc, var(--red)); }
.jump:hover { border-color: var(--svc, var(--red)); }
.service-link .more { color: var(--svc-text, var(--red)); font-weight: 600; }

/* homepage cards: "Meer over…" always pinned to the bottom edge */
.service-link { display: flex; flex-direction: column; }
.service-link .more { margin-top: auto; padding-top: 2rem; display: inline-flex; align-items: center; gap: .5rem; }

/* services page: big hexagon in the title + ghost hexagons in the section background */
.svc-section { position: relative; isolation: isolate; overflow: hidden; }
.svc-section::before, .svc-section::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; background: var(--svc);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  transform: rotate(-12deg);
}
.svc-section::before { width: 18rem; height: 18rem; left: -4.5rem; bottom: -5rem; opacity: .09; }
.svc-section::after { width: 12rem; height: 12rem; right: -3rem; top: -3.5rem; opacity: .08; }
.title-hex { display: flex; align-items: center; gap: .4em; }
.title-hex .hex-mark { width: .95em; height: .95em; }
@media (prefers-reduced-motion: no-preference) {
  .svc-section .title-hex .hex-mark { transition: transform .5s var(--spring); }
  .svc-section:hover .title-hex .hex-mark { transform: rotate(-12deg) scale(1.08); }
}