@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/figtree-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/figtree-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/figtree-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/figtree-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/figtree-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/figtree-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/lexend-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/lexend-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/lexend-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/lexend-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/lexend-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/lexend-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body { margin: 0; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }

/* Layout: lichte, ruime pagina's in de huisstijl van Bureau Spit; foto's in zachte kaders met een blush vlak erachter,
   eigen illustraties als vaste anker per blok, roze penseelstreep als enige accent onder één kernwoord.
   Koppen in Lexend: een letter die is ontwikkeld op basis van onderzoek naar leesvaardigheid. */
:root {
  --paper: #fffdfb;
  --blush: #f8ebe6;
  --blush-deep: #f0d8ce;
  --sage: #7e9083;
  --sage-deep: #45594c;
  --sage-mist: #e7ede8;
  --ink: #1e2a25;
  --ink-soft: #4b5751;
  --petrol: #2b6872;
  --mustard: #e3bf4e;
  --salmon: #c9785f;
  --line: #eadfd9;
  --bar: #1e2a25;
  --bar-fg: #f6efe9;
  --font-display: "Lexend", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--petrol); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; margin: 0; color: var(--ink); }
h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); }
h3 { font-size: 1.22rem; letter-spacing: -0.015em; font-weight: 500; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--sage-deep); }
.lead { font-size: clamp(1.1rem, 1.7vw, 1.25rem); color: var(--ink-soft); max-width: 36em; }
.muted { color: var(--ink-soft); }
.hl { background: url(/img/streep.png) no-repeat 0 94% / 100% .34em; padding-bottom: .04em; }
.measure { max-width: 40em; }

/* Concept bar */
.conceptbar { background: var(--bar); color: var(--bar-fg); font-size: .82rem; }
.conceptbar .wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; padding-block: 9px; }
.conceptbar strong { font-weight: 600; }
.conceptbar nav { display: flex; gap: 6px; }
.conceptbar a { color: var(--bar-fg); text-decoration: none; padding: 3px 10px; border: 1px solid rgba(246,239,233,.3); border-radius: 999px; }
.conceptbar a[aria-current="page"] { background: var(--bar-fg); color: var(--bar); }

/* Site header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(255,253,251,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-block: 12px; }
.logo img { width: 112px; }
.mainnav { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.mainnav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 6px 11px; border-radius: 8px; }
.mainnav a:hover { background: var(--blush); }
.mainnav a[aria-current="page"] { background: var(--blush); box-shadow: inset 0 -2px 0 var(--salmon); }

/* Buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1rem; text-decoration: none; padding: 12px 22px; border-radius: 999px; border: 2px solid var(--sage-deep); color: var(--sage-deep); background: transparent; }
.btn.primary { background: var(--sage-deep); color: var(--paper); }
.btn:hover { transform: translateY(-1px); transition: transform .15s ease; }
.textlink { font-weight: 600; text-decoration: none; color: var(--petrol); }
.textlink:hover { text-decoration: underline; }

/* Sections */
section { padding-block: clamp(56px, 8vw, 96px); }
.band { background: var(--blush); }
.section-head { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head .lead { max-width: none; }
.section-head.with-art { grid-template-columns: minmax(0, max-content) auto; justify-content: start; column-gap: clamp(24px, 4vw, 56px); }
.section-head.with-art > * { grid-column: 1; }
.section-head .head-art { grid-column: 2; grid-row: 1 / span 2; align-self: end; width: auto; }
.head-art.ballon { height: 91px; }
.head-art.vraag { height: 108px; }
.head-art.wegwijzer { height: 60px; }

/* Hero */
.hero { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 6vw, 72px); }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-text { display: grid; gap: 22px; min-width: 0; }
.pillars-inline { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pillars-inline li { font-size: .9rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--blush); color: var(--sage-deep); }
.photo-frame { position: relative; isolation: isolate; }
.photo-frame::before { content: ""; position: absolute; inset: 7% -5% -5% 7%; background: var(--blush-deep); border-radius: 38px; z-index: -1; }
.photo-frame img.photo { border-radius: 38px; width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; }
.hero .photo-frame img.photo { aspect-ratio: 1 / 1; object-position: 42% 50%; }
.photo-frame .doodle { position: absolute; width: 26%; left: -9%; top: -6%; transform: rotate(-8deg); }

/* Logo wall */
.proof { padding-block: 30px 34px; border-block: 1px solid var(--line); }
.proof .wrap { display: grid; gap: 18px; }
.logos { display: grid; grid-template-columns: repeat(6, auto); justify-content: space-between; align-items: center; gap: 22px 24px; list-style: none; margin: 0; padding: 0; }
.logos img { height: 38px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .72; mix-blend-mode: multiply; transition: filter .2s ease, opacity .2s ease; }
.logos img.sq { height: 54px; }
.logos img:hover { filter: none; opacity: 1; }

/* Service cards */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.service { display: grid; grid-template-rows: auto auto 1fr; gap: 12px; padding: 28px 26px 30px; background: var(--paper); border-radius: 20px; }
.service .art { height: 136px; display: flex; align-items: flex-end; gap: 6px; margin-bottom: 6px; }
.service .art img { height: 100%; width: auto; }
.service .art img.flap { height: 98%; }
.service .art img.boek { height: 81%; }
.service .art img.small { height: 43.5%; }
.service p { color: var(--ink-soft); }
.after-services { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: space-between; }

/* Approach */
.approach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.pillar { display: grid; gap: 10px; align-content: start; }
.pillar img { height: 124px; width: auto; object-fit: contain; object-position: left bottom; }
.pillar img.p-dart { width: 89px; }
.pillar img.p-lamp { width: 112px; }
.pillar img.p-raket { width: 91px; }
.pillar .q { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; line-height: 1.35; color: var(--sage-deep); }
.pillar p { color: var(--ink-soft); }
.markers { display: grid; grid-template-columns: auto 1fr; gap: 18px 28px; align-items: center; margin-top: clamp(36px, 5vw, 56px); padding: 26px 28px; border: 1.5px dashed var(--blush-deep); border-radius: 20px; }
.markers img { width: 120px; }

/* Featured case */
.feature .wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.feature blockquote { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2.5vw, 1.9rem); line-height: 1.3; letter-spacing: -0.02em; }
.feature .stack { display: grid; gap: 18px; min-width: 0; }

/* Quotes */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.quote { display: grid; grid-template-rows: 1fr auto; gap: 18px; margin: 0; padding: 26px; border-radius: 20px; background: var(--paper); border-top: 4px solid var(--blush-deep); }
.quote p { font-size: 1rem; }
.quote p::before { content: "“"; font-family: var(--font-display); font-size: 2.6rem; line-height: 0; vertical-align: -0.42em; color: var(--salmon); margin-right: 2px; }
.quote figcaption { font-size: .9rem; color: var(--ink-soft); }
.quote figcaption strong { color: var(--ink); display: block; }

/* Contact band */
.cta { background: var(--sage-deep); color: var(--paper); }
.cta h2, .cta .eyebrow { color: var(--paper); }
.cta .wrap { display: grid; grid-template-columns: 1fr auto; gap: 28px 48px; align-items: center; }
.cta .lead { color: #e3ebe5; }
.contact-lines { display: grid; gap: 8px; font-size: 1.15rem; font-weight: 600; }
.contact-lines a { color: var(--paper); text-decoration: none; border-bottom: 2px solid var(--mustard); justify-self: start; }
.cta .zwaai { width: 150px; aspect-ratio: 1; object-fit: contain; padding: 18px; background: var(--paper); border-radius: 50%; justify-self: end; }

/* Footer */
footer { background: var(--ink); color: #cfd8d2; font-size: .92rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: flex-start; padding-block: 36px; }
footer a { color: #f6efe9; }
footer .logo-f { width: 96px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.badges { display: flex; gap: 12px; align-items: center; }
.badges span { display: grid; place-items: center; width: 76px; height: 76px; background: var(--paper); border-radius: 14px; padding: 8px; }
.badges img { max-height: 60px; width: auto; }

/* Inner pages */
.page-hero { padding-block: clamp(44px, 6vw, 72px) clamp(28px, 4vw, 40px); }
.page-hero .wrap { display: grid; gap: 16px; }
.page-hero.with-art .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 40px; }
.page-hero.with-art .wrap > div { display: grid; gap: 16px; }
.page-hero .art { width: 170px; }
.offer { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding-block: clamp(36px, 5vw, 52px); border-top: 1px solid var(--line); }
.offer:first-of-type { border-top: 0; }
.offer .art { display: flex; align-items: flex-end; gap: 4px; align-self: start; }
.offer .art img { width: 100%; max-width: 190px; }
.offer .art img.flap { width: 70.5%; max-width: 134px; }
.offer .art.duo img { width: 52.6%; }
.offer .art.duo img + img { width: 47.4%; }
.offer .body { display: grid; gap: 18px; min-width: 0; }
.offer { row-gap: 24px; align-content: start; }
.offer .body { grid-column: 2; grid-row: 1 / span 2; }
.offer > .quote { grid-column: 1; grid-row: 2; align-self: start; padding: 20px; gap: 12px; }
.offer > .quote p { font-size: .95rem; }
.offer .tagline { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; color: var(--sage-deep); }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 36px; }
.cols2 h4 { margin: 0 0 6px; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--sage-deep); }
ul.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
ul.ticks li { padding-left: 24px; position: relative; color: var(--ink-soft); }
ul.ticks li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 11px; height: 6px; border-left: 2.5px solid var(--salmon); border-bottom: 2.5px solid var(--salmon); transform: rotate(-45deg); }
.example { font-size: .95rem; padding: 12px 16px; border-radius: 12px; background: var(--blush); }
.example strong { color: var(--ink); }

.faq { display: grid; gap: 10px; max-width: 46em; }
.faq details { background: var(--paper); border-radius: 14px; padding: 16px 20px; }
.faq summary { cursor: pointer; font-weight: 500; font-family: var(--font-display); font-size: 1.05rem; }
.faq details p { margin-top: 10px; color: var(--ink-soft); }

/* Cases */
.case { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); padding-block: clamp(36px, 5vw, 52px); border-top: 1px solid var(--line); }
.case:first-of-type { border-top: 0; }
.case .meta { display: grid; gap: 8px; align-content: start; }
.case .clogo { height: 46px; width: auto; max-width: 170px; object-fit: contain; object-position: left center; mix-blend-mode: multiply; margin-bottom: 6px; }
.case .clogo.sq { height: 64px; }
.case .meta h2 { font-size: 1.4rem; }
.case .meta .years { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: .95rem; }
.case .meta p { color: var(--ink-soft); font-size: .95rem; }
.tag { justify-self: start; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--blush); color: var(--salmon); }
.tag.dienst { background: var(--sage-mist); color: var(--sage-deep); }
.case dl { margin: 0; display: grid; gap: 18px; align-content: start; }
.case dt { font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--sage-deep); }
.case dd { margin: 6px 0 0; }
.case dd.result { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; line-height: 1.4; letter-spacing: -0.01em; }
.case .mini-quote { margin: 0; padding-left: 16px; border-left: 3px solid var(--blush-deep); color: var(--ink-soft); font-style: italic; }
.case .mini-quote cite { display: block; font-style: normal; font-size: .9rem; margin-top: 4px; color: var(--ink); }
.earlier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 32px; list-style: none; margin: 0; padding: 0; }
.earlier li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
@media (max-width: 880px) { .earlier { grid-template-columns: 1fr; } }
.earlier .lg { height: 64px; display: grid; place-items: center; background: var(--paper); border-radius: 14px; padding: 8px; }
.earlier .lg img { max-height: 46px; width: auto; mix-blend-mode: multiply; }
.earlier .lg.txt { font-family: var(--font-display); font-weight: 500; font-size: .9rem; color: var(--ink-soft); text-align: center; line-height: 1.2; }
.earlier li span.d { color: var(--ink-soft); font-size: .95rem; display: block; }

/* About */
.about .wrap { display: grid; grid-template-columns: minmax(0, .66fr) minmax(0, 1.34fr); grid-template-rows: auto 1fr; grid-template-areas: "photo text" "fun text"; gap: 0 clamp(28px, 5vw, 64px); align-items: start; }
.about .photo-frame { grid-area: photo; }
.about .text { grid-area: text; display: grid; gap: 18px; min-width: 0; }
.about .fun { grid-area: fun; margin-top: 40px; }
.about .photo-frame img.photo { aspect-ratio: 1 / 1.1; object-position: 46% 35%; }
.about .fun { flex-direction: column; align-items: flex-start; gap: 12px; }
.about .fun img { width: 60px; }
.route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 22px; position: relative; }
.route::before { content: ""; position: absolute; left: 0; right: 0; top: calc(1.9rem + 12px); height: 12px; transform: translateY(-50%); background: url(/img/streep-groen.png) no-repeat center / 100% 100%; opacity: .8; }
.route li { position: relative; display: grid; align-content: start; gap: 4px; min-width: 0; }
.route .yr { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; height: 1.9rem; line-height: 1.9rem; color: var(--sage-deep); font-variant-numeric: tabular-nums; }
.route .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 3px solid var(--sage-deep); margin-bottom: 12px; position: relative; z-index: 1; }
.route .now .dot { width: 20px; height: 20px; margin-top: -2px; margin-bottom: 10px; background: var(--mustard); border-color: var(--mustard); }
.route strong { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; line-height: 1.3; }
.route .s { color: var(--ink-soft); font-size: .93rem; line-height: 1.5; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.timeline li { display: grid; grid-template-columns: 128px minmax(0,1fr); gap: 16px; }
.timeline .when { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--sage-deep); font-size: .93rem; line-height: 1.5; }
.timeline .what span { display: block; color: var(--ink-soft); font-size: .95rem; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 56px); }
.split .col { display: grid; gap: 16px; align-content: start; }
.fun { display: flex; gap: 18px; align-items: center; padding: 18px 22px; border-radius: 18px; background: var(--blush); }
.fun img { width: 70px; flex: none; }
.fun p { display: grid; gap: 8px; }
.inline-badges { display: flex; gap: 14px; align-items: center; margin-top: 4px; }
.inline-badges img { height: 64px; width: auto; mix-blend-mode: multiply; }

/* Contact page */
.contact-card { display: grid; grid-template-columns: minmax(0, max-content) auto; justify-content: start; gap: 24px clamp(48px, 8vw, 120px); align-items: center; padding: clamp(24px, 4vw, 40px); background: var(--blush); border-radius: 24px; }
.contact-card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 22px; margin: 0; font-size: 1.1rem; }
.contact-card dt { color: var(--ink-soft); font-size: .95rem; padding-top: 2px; }
.contact-card dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.contact-card img { width: 150px; }

/* Build notes */
.notes { padding-block: clamp(40px, 6vw, 64px); }
.notes .wrap { display: grid; gap: 40px; }
.note-block { display: grid; gap: 14px; }
.note-block h2 { font-size: 1.45rem; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; min-width: 620px; }
th, td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); }
th { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-deep); background: var(--blush); }
tr:last-child td { border-bottom: 0; }
td code, p code, li code { font-size: .88em; background: var(--blush); padding: 1px 5px; border-radius: 4px; }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 0; }
.swatches li { display: grid; gap: 4px; font-size: .85rem; }
.swatches i { display: block; width: 92px; height: 52px; border-radius: 10px; border: 1px solid var(--line); }
ol.check { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; color: var(--ink-soft); }
ol.check strong { color: var(--ink); }

/* Responsive */
@media (max-width: 880px) {
  .hero .wrap, .feature .wrap, .about .wrap { grid-template-columns: 1fr; }
  .hero .photo-frame { max-width: 440px; }
  .services, .approach, .quotes { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(3, auto); row-gap: 24px; }
  .offer, .case { grid-template-columns: 1fr; }
  .offer .body, .offer > .quote { grid-column: auto; grid-row: auto; }
  .offer .art { max-width: 170px; }
  .offer .art.duo { max-width: 260px; }
  .cta .wrap { grid-template-columns: 1fr; }
  .cta .zwaai { justify-self: start; }
  .split { grid-template-columns: 1fr; }
  .about .photo-frame { max-width: 380px; }
  .about .wrap { grid-template-areas: "photo" "text" "fun"; grid-template-rows: auto; row-gap: 36px; }
  .about .fun { margin-top: 0; }
  .route { grid-template-columns: 1fr; gap: 22px; padding-left: 36px; }
  .route::before { left: 10px; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; transform: none; background: var(--sage); opacity: .45; }
  .route li { display: block; }
  .route .yr { display: block; height: auto; line-height: 1.3; }
  .route .dot { position: absolute; left: -34px; top: 3px; margin: 0; }
  .route .now .dot { left: -36px; top: 1px; margin: 0; }
  .route strong, .route .s { display: block; }
}
@media (max-width: 560px) {
  .head-art.ballon { height: 64px; }
  .head-art.vraag { height: 76px; }
  .head-art.wegwijzer { height: 42px; }
  .cols2, .earlier { grid-template-columns: 1fr; }
  .markers { grid-template-columns: 1fr; }
  .contact-card { grid-template-columns: 1fr; }
  .contact-card dl { grid-template-columns: 1fr; gap: 2px; }
  .contact-card dd { margin-bottom: 10px; }
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
  .logo img { width: 96px; }
  .mainnav a { padding: 5px 8px; font-size: .9rem; }
  .logos { grid-template-columns: repeat(3, auto); gap: 22px 18px; }
  .logos img { height: 30px; }
  .logos img.sq { height: 44px; }
}