/* Slimkracht: the page layer on top of the taste-skill kit (assets/kit).
   Palette: the dealt "white-link-blue" (sheet and biro), turned to the client's own logo colours:
   the navy of the lightbulb as ink and dark band, its blue ring as the one accent.
   Type: the dealt Source Serif 4 (headlines, 400) with Libre Franklin (text), self-hosted. */

@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/assets/fonts/source-serif-4.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: "Libre Franklin"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/assets/fonts/libre-franklin.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; }

:root {
  --p-bg: #fbfaf7; --p-surface: #f1eee7; --p-ink: #0f1d2e; --p-muted: #5a6370;
  --p-accent: #1b5c97; --p-accent-ink: #ffffff; --p-action: #1b5c97; --p-action-ink: #ffffff;
  --p-inv-bg: #0d2136; --p-inv-surface: #15304d; --p-inv-ink: #ffffff; --p-inv-muted: #aebccb;
  --p-inv-accent: #ffffff; --p-inv-accent-ink: #0d2136; --p-inv-action: #ffffff; --p-inv-action-ink: #0d2136;
  --font-display: "Source Serif 4", Georgia, serif;
  --font-text: "Libre Franklin", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.02em;
  --display-tracking-xl: -0.026em;
  --wa: #128c4a;
}

/* the logo: the client's own lightbulb over Lokeren, then the name in the display face */
.nav__logo img, .nav__logo .logo-mark { height: 34px; width: auto; }
.nav__logo { gap: 10px; }
.nav__logo b { font-weight: 400; }

/* the hero photograph of Ferkan at work: the box holds the page's colours, never a veil */
.hero--photo { overflow: clip; }
.hero--photo .hero__text { box-shadow: none; }
/* one quiet arrival on load (emilkowalski-motion: entry for the primary content only): the photograph
   settles from 1.035, the box rises 10px. Transform only, so no word is ever hidden; still under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .hero--photo > .hero__bg { animation: sk-settle 1200ms cubic-bezier(.2, .8, .2, 1) both; }
  .hero--photo .hero__text { animation: sk-rise 560ms cubic-bezier(.2, .8, .2, 1) 60ms both; }
}
@keyframes sk-settle { from { transform: scale(1.035); } to { transform: none; } }
@keyframes sk-rise { from { transform: translateY(10px); } to { transform: none; } }
.hero__kicker { font-size: var(--t-small); color: var(--muted); }

/* the work in a browser window: the client's live site as it opens (page CSS inside a visual) */
.browser { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; overflow: clip;
  background: var(--p-bg); border: 1px solid var(--line); color: var(--p-ink); }
.ground-inverse .browser { border-color: rgb(255 255 255 / .14); }
.browser__bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; flex: none;
  background: #ebe7df; border-bottom: 1px solid rgb(15 29 46 / .1); }
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgb(15 29 46 / .18); }
.browser__url { margin-left: 10px; flex: 0 1 300px; height: 24px; border-radius: 6px; background: #fbfaf7; color: #3c4653;
  font: 500 13px/24px var(--font-text); padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the window's height is a padding ratio (16:10 unless the page sets --r): no aspect-ratio, so every
   iPhone browser gives the screenshot its room and the words under it never ride over it */
.browser__view { position: relative; height: 0; padding-top: var(--r, 62.5%); overflow: hidden; background: #e9e6df; }
.browser__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform 600ms var(--ease); }
a.browser:hover .browser__view img, a:hover > .browser .browser__view img { transform: scale(1.025); }
[data-peek] .browser[hidden] { display: none; }

/* peek rows that are links */
.rows a.rows__name { text-decoration: none; }
.rows a.rows__name:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ground-inverse .rows > li > p { color: var(--muted); }
[data-peek-to] { cursor: default; }

/* steps: the panel holds a photograph of the work or one static conversation */
.step-panel { position: relative; height: 280px; border-radius: var(--r-md); overflow: clip; background: var(--surface); margin-top: var(--s-5); }
.step-panel > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.chat { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 24px; background: #e9e3d8; font: 400 15px/1.45 var(--font-text); color: #0f1d2e; }
.chat__head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgb(15 29 46 / .1); font-weight: 500; font-size: 14px; }
.chat__head img { width: 28px; height: 28px; }
.chat__head span { color: #5a6370; font-weight: 400; margin-left: auto; font-size: 13px; }
.chat__msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; background: #fff; }
.chat__msg--me { align-self: flex-end; background: #d6f3c9; border-bottom-right-radius: 4px; }
.chat__msg--them { border-bottom-left-radius: 4px; }
.chat__msg small { display: block; margin-top: 2px; font-size: 13px; color: #5a6370; text-align: right; }

/* reviews: each client's own logo on its own ground, the words under it */
.review { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.review__logo { aspect-ratio: 2 / 1; border-radius: var(--r-md); overflow: clip; }
.review__logo img { width: 100%; height: 100%; object-fit: cover; }
.review blockquote { margin: 0; font: var(--display-weight) 21px/1.4 var(--font-display); letter-spacing: -0.01em; }
.review .person__name { display: block; font-weight: 500; }
.review .person__role { display: block; color: var(--muted); }
.review .person { font-size: var(--t-small); line-height: 1.45; }
@media (max-width: 1023px) { .review blockquote { font-size: 19px; } }

/* the work as linked tiles (projecten) */
a.tile .browser { transition: transform 180ms var(--ease), border-color 140ms var(--ease); }
a.tile:hover .browser { transform: translateY(-2px); border-color: var(--line-strong); }
.tile__place { color: var(--muted); font-size: var(--t-small); }

/* a phone screenshot standing on the surface (case pages) */
.phone-stage { position: relative; display: grid; place-items: center; border-radius: var(--r-lg); background: var(--surface); overflow: clip; padding: var(--s-7) var(--s-5); }
.phone { width: min(256px, 70%); border-radius: 36px; border: 10px solid #14181d; overflow: clip; background: #14181d; }
.phone img { display: block; width: 100%; height: auto; }

/* real tool icons */
.tools { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.tool { display: inline-flex; align-items: center; gap: var(--s-2); height: 40px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: var(--t-small); font-weight: 500; }
.tool img { width: 22px; height: 22px; object-fit: contain; }
.tool img.ic-wide { width: 56px; height: 14px; }
.icon-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); align-content: center; }
.icon-board > div { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-6) var(--s-3); border-radius: var(--r-md); background: var(--p-bg); font-size: var(--t-small); font-weight: 500; text-align: center; }
.icon-board img { width: 40px; height: 40px; object-fit: contain; }
@media (max-width: 639px) { .icon-board { padding: var(--s-4); } .icon-board > div { padding: var(--s-5) var(--s-2); } .icon-board img { width: 32px; height: 32px; } }

/* a still flow: a form comes in, the automation sorts it, three places it lands (one still diagram a page) */
.flow { display: grid; gap: var(--s-4); padding: var(--s-7) var(--s-6); border-radius: var(--r-lg); background: var(--surface); align-content: center; }
.flow__node { display: flex; align-items: center; gap: var(--s-3); padding: 14px 16px; border-radius: var(--r-md); background: var(--p-bg); border: 1px solid var(--line); font-size: var(--t-small); line-height: 1.4; }
.flow__node img { width: 26px; height: 26px; flex: none; object-fit: contain; }
.flow__node b { display: block; font-weight: 500; font-size: var(--t-body); }
.flow__node--core { background: var(--p-inv-bg); color: #fff; border-color: transparent; }
.flow__node--core .flow__dot { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--p-accent); box-shadow: inset 0 0 0 6px #fff3; }
.flow__line { justify-self: center; width: 1px; height: 20px; background: var(--line-strong); }
.flow__out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.flow__out .flow__node { flex-direction: column; align-items: flex-start; }
@media (max-width: 639px) { .flow { padding: var(--s-5) var(--s-4); } .flow__out { grid-template-columns: 1fr; } .flow__out .flow__node { flex-direction: row; } }

/* long-form reading on inner pages (a case story, the privacy statement): the one section that grows */
main > section.section--read { height: auto !important; min-height: 0 !important; }
.prose { max-width: 68ch; display: grid; gap: var(--s-5); }
.prose h2 { font-size: var(--t-h3); line-height: 1.25; margin-top: var(--s-6); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font: 500 var(--t-lead)/1.4 var(--font-text); margin-top: var(--s-4); }
.prose p, .prose li { color: var(--ink); line-height: 1.7; }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-2); list-style: disc; }
.prose li::marker { color: var(--muted); }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 500; color: var(--muted); }

/* the contact block beside the form */
.contact-rows > li { grid-template-columns: 110px minmax(0, 1fr); }
.contact-rows .rows__value { grid-column: 2; text-align: left; white-space: normal; }
.contact-rows a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.form-panel { padding: var(--s-7); border-radius: var(--r-lg); background: var(--surface); }
.form-panel .form { gap: var(--s-4) var(--s-4); }
.form-note { font-size: var(--t-small); color: var(--muted); }
.form-note a { text-decoration: underline; text-underline-offset: 3px; }
.form-done { padding: var(--s-6); border-radius: var(--r-md); background: var(--p-bg); border: 1px solid var(--line); }
.form-done h3 { font: 500 var(--t-card)/1.3 var(--font-text); margin-bottom: var(--s-2); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 639px) { .form-panel { padding: var(--s-5); } }

/* footer: Lokeren set large, the hours and the ways to reach Ferkan beside it */
.footer__reach { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-body); }
.footer__reach a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); }
.footer__reach a:hover { text-decoration-color: currentColor; }
.footer__nav .socials a { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; }
.footer__nav .socials img { width: 22px; height: 22px; }
.footer__legal small { font-size: 13px; color: var(--muted); }

/* the phone bar: the main action, and WhatsApp as one square beside it */
@media (max-width: 639px) {
  .actionbar { grid-template-columns: minmax(0, 1fr) 48px; grid-auto-flow: row; }
  .actionbar .btn--wa { width: 48px; padding: 0; justify-content: center; }
  .actionbar .btn--wa img { width: 24px; height: 24px; }
}
.btn--wa img { width: 20px; height: 20px; }

/* cookie consent: one quiet bar, the page's colours (GA4 loads only after a yes) */
.consent { position: fixed; left: 24px; bottom: 24px; z-index: 60; width: min(380px, calc(100vw - 32px));
  display: grid; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-md);
  background: var(--p-inv-bg); color: #fff; font-size: var(--t-small); line-height: 1.5; }
.consent p { margin: 0; }
.consent a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.consent__btns { display: flex; gap: var(--s-3); }
.consent__btns .btn { flex: 1 1 0; }
@media (max-width: 639px) { .consent { bottom: calc(var(--bar, 0px) + 12px); left: 12px; width: calc(100vw - 24px); } }

/* screens shorter than the 900px the system is drawn for (a 1366x768 laptop, a phone with tall copy):
   a section keeps at least its screens and grows past them, never over the next one (the kit does
   this from 640 to 1279; the same here at every width) */
main > :is(section, .section):not(.hero), footer.closing { height: auto; min-height: calc(var(--h, 1) * 100vh); min-height: calc(var(--h, 1) * 100svh); display: flex; flex-direction: column; }
main > :is(section, .section):not(.hero) > .wrap, footer.closing > .wrap { flex: 1 0 auto; height: auto; min-height: 0; }
/* a .fill block takes the room the screen leaves, but never shrinks under its own content */
main > :is(section, .section) > .wrap > .fill, main > :is(section, .section) .group > .fill { flex: 1 0 auto; min-height: auto; }
@media (max-width: 639px) {
  main > :is(section, .section):not(.hero), footer.closing { height: auto; min-height: calc(var(--hm, var(--h, 1)) * 100vh); min-height: calc(var(--hm, var(--h, 1)) * 100lvh); }
}
/* the phone number in the bar only where it fits; on a phone the main action lives in the action bar */
@media (max-width: 1199px) { .nav__actions > .nav__link { display: none; } }
@media (max-width: 639px) { .nav:not(.is-open) .nav__bar > .nav__actions { display: none; } .nav:not(.is-open) .nav__actions + .nav__toggle { margin-left: auto; } .consent { padding: var(--s-4); gap: var(--s-3); font-size: 13px; } .hero__kicker { display: none; } }

/* a 1024 laptop with a short screen: the two densest sections take two screens */
@media (min-width: 1024px) and (max-width: 1279px) and (max-height: 800px) { #diensten, #werk { --h: 2; } }

/* tablets and phones read as one flowing page: each section as tall as its content (the hero keeps
   its screen), so a stacked section never leaves half a screen of empty ground under it */
@media (max-width: 1023px) {
  main > :is(section, .section):not(.hero), footer.closing { height: auto !important; min-height: 0 !important; }
  main > :is(section, .section).g2 > .wrap { display: flex; flex-direction: column; row-gap: var(--s-9); }
  .grid.grid--top > .span-6 + .start-7, .grid.grid--top > .span-6 + .span-6 { margin-top: var(--s-6); }
  .hero-split > .hero-visual { min-height: 0; }
  .review__logo { aspect-ratio: auto; width: 144px; height: 72px; }
  .review blockquote { font-size: 18px; }
  #over .frame--photo { --ratio: 75% !important; }
  .step-panel { height: 220px; }
  .chat { padding: 16px; gap: 8px; font-size: 14px; }
  .chat__msg:last-child { display: none; }
  .closing__cta.close--type > .btn--xl { align-self: stretch; }
}
@media (max-width: 639px) {
  #over .frame--photo { display: none; }
  .step-panel { height: 200px; }
  .chat__head { display: none; }
}

/* the secondary button: an outline in the ink, so it stands off the ground (tonal fill read as switched off) */
html[data-buttons="tonal"] .btn--secondary { background: transparent; border: 1px solid color-mix(in oklab, var(--ink) 34%, transparent); }
html[data-buttons="tonal"] .btn--secondary:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); border-color: color-mix(in oklab, var(--ink) 55%, transparent); }

/* the free checklist as a file card with its real file icon */
.filecard { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-2) var(--s-4); align-items: start; margin-top: var(--s-4);
  padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); max-width: 520px;
  transition: transform 180ms var(--ease), border-color 140ms var(--ease); }
.filecard:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.filecard b { display: block; font-weight: 500; font-size: var(--t-body); line-height: 1.4; }
.filecard > span > span { display: block; color: var(--muted); font-size: var(--t-small); margin-top: 4px; }
.filecard__go { grid-column: 2; font-weight: 500; font-size: var(--t-small); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* icons in the contact rows: the WhatsApp mark in colour, interface glyphs in the ink */
.contact-rows .rows__name { display: inline-flex; align-items: center; gap: 10px; }
.contact-rows .rows__name img { width: 20px; height: 20px; flex: none; }
.contact-rows > li { grid-template-columns: 130px minmax(0, 1fr); }
.footer__nav { margin-top: var(--s-6); }

/* the close: the h2 on one line, the big button never squeezed */
.closing__cta h2 { max-width: none; }
.closing__cta .btn--xl { flex: none; }

/* the first screen of inner pages: a quiet notice over the h1 (the breadcrumb) */
.crumbs { font-size: var(--t-small); color: var(--muted); }
.crumbs a:hover { color: var(--ink); }

/* =====================================================================================
   v2: richer moments (asked for by the client): split hero with floating proof, showcase
   with laptop and phone, bento services, a 14-day timeline, stars, stats, a closing panel.
   Motion stays restrained (emilkowalski-motion): transform and opacity, once, never looping.
   ===================================================================================== */
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url(/assets/fonts/source-serif-4-italic.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; }
:root { --star: #e3a21a; --ease-out: cubic-bezier(.16, 1, .3, 1);
  --lift: 0 1px 2px rgb(15 29 46 / .06), 0 10px 30px -10px rgb(15 29 46 / .22), 0 30px 60px -30px rgb(15 29 46 / .25); }
:is(h1, h2) em { font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.hero--home h1 em { color: var(--accent); }
.ground-inverse :is(h1, h2) em { color: #9cc4ec; }

/* stars and ticks */
.stars { display: inline-flex; gap: 2px; color: var(--star); line-height: 0; }
.stars svg { width: 16px; height: 16px; fill: currentColor; }
.tick { width: 16px; height: 16px; flex: none; color: var(--accent); }
.ground-inverse .tick { color: #9cc4ec; }

/* ---------- hero (home): words left, Ferkan in a tall frame right, proof floating on it */
.hero--home .hero-copy > h1 { margin-top: var(--s-5); font-size: clamp(42px, 4.4vw + 4px, 76px); line-height: 1.02; letter-spacing: -0.03em; }
.hero--home .hero-copy > .t-lead { max-width: 34ch; }
.btn img { width: 20px; height: 20px; margin-right: 8px; }
.hero-assure { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--t-small); color: var(--muted); margin-top: var(--s-4) !important; }
.hero-assure span { display: inline-flex; align-items: center; gap: 6px; }
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-7) !important; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.hero-proof__rating { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-small); }
.hero-proof__rating b { font-weight: 600; }
.hero-proof__logos { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-proof__logos > span { font-size: 13px; color: var(--muted); }
.hero-proof__logos img { height: 18px; width: auto; opacity: .62; transition: opacity 200ms var(--ease); }
.hero-proof__logos img:first-of-type { height: 24px; }
.hero-proof__logos img:nth-of-type(2) { height: 13px; }
.hero-proof__logos:hover img { opacity: .9; }

.hero--home .hero-visual { position: relative; }
.hero-photo { position: absolute; inset: 0; border-radius: var(--r-lg); overflow: clip; background: var(--surface); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.float-card { position: absolute; z-index: 2; background: var(--p-bg); color: var(--p-ink); border-radius: var(--r-md); box-shadow: var(--lift); }
.float-card--review { left: 24px; bottom: 24px; width: min(320px, calc(100% - 48px)); padding: 18px 20px; margin: 0; display: grid; gap: 10px; }
.float-card--review blockquote { margin: 0; font: 400 19px/1.35 var(--font-display); letter-spacing: -0.01em; }
.float-card__who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.float-card__who img { width: 48px; height: 24px; border-radius: 5px; object-fit: cover; }
.float-card__who b { color: var(--p-ink); font-weight: 500; margin-right: 4px; }
.float-card--chip { right: 24px; top: 24px; width: 268px; padding: 16px 18px; display: grid; gap: 10px; }
.chip__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--muted); }
.chip__top b { font: 500 15px/1 var(--font-text); color: var(--p-ink); }
.chip__bar { height: 6px; border-radius: 99px; background: var(--surface); overflow: hidden; }
.chip__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3d7fc1, var(--accent)); transform-origin: left; }
.chip__steps { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .hero--home .hero-copy > * { animation: sk-up 760ms var(--ease-out) backwards; }
  .hero--home .hero-copy > :nth-child(2) { animation-delay: 60ms; } .hero--home .hero-copy > :nth-child(3) { animation-delay: 120ms; }
  .hero--home .hero-copy > :nth-child(4) { animation-delay: 180ms; } .hero--home .hero-copy > :nth-child(n+5) { animation-delay: 240ms; }
  .hero-photo { animation: sk-reveal-photo 1100ms var(--ease-out) backwards; }
  .hero-photo img { animation: sk-settle 1600ms var(--ease-out) backwards; }
  .float-card--chip { animation: sk-pop 700ms var(--ease-out) 450ms backwards; }
  .float-card--review { animation: sk-pop 700ms var(--ease-out) 650ms backwards; }
  .chip__bar i { animation: sk-fill 1400ms cubic-bezier(.65, 0, .35, 1) 900ms backwards; }
}
@keyframes sk-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sk-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sk-reveal-photo { from { clip-path: inset(6% 6% 6% 6% round 28px); } to { clip-path: inset(0 0 0 0 round var(--r-lg)); } }
@keyframes sk-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 1023px) {
  main > section.hero--home { height: auto; min-height: 0; padding-bottom: var(--s-8); }
  .hero--home .hero-visual { aspect-ratio: 4 / 3.4; min-height: 0; flex: none; margin-top: var(--s-6); }
  .hero-proof { margin-top: var(--s-6) !important; }
}
@media (max-width: 639px) {
  .hero--home .hero-copy > h1 { font-size: 42px; }
  .hero--home .hero-visual { aspect-ratio: 4 / 4.6; }
  .float-card--chip { right: 12px; top: 12px; width: 230px; padding: 12px 14px; }
  .float-card--review { left: 12px; bottom: 12px; padding: 14px 16px; }
  .float-card--review blockquote { font-size: 17px; }
  .hero-proof__logos > span { width: 100%; }
}

/* ---------- showcase: the work on the dark band, laptop and phone together */
.showcase-band { overflow: clip; }
.showcase-band::before { content: ""; position: absolute; right: -10%; top: 10%; width: 70%; height: 90%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(61 127 193 / .32), transparent 70%); filter: blur(10px); }
.showcase__list { display: grid; }
.showcase__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 18px 0 18px 20px; border-bottom: 1px solid var(--line); color: inherit; }
.showcase__list li:first-child .showcase__row { border-top: 1px solid var(--line); }
.showcase__row::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: #9cc4ec; transform: scaleY(0); transform-origin: top; transition: transform 240ms var(--ease-out); }
.showcase__row.is-on::before { transform: scaleY(1); }
.showcase__name { font-weight: 500; font-size: var(--t-lead); }
.showcase__place { color: var(--muted); font-size: var(--t-small); align-self: center; }
.showcase__line { grid-column: 1 / -1; color: var(--muted); max-width: 52ch; transition: color 200ms var(--ease); }
.showcase__row.is-on .showcase__line, .showcase__row:hover .showcase__line { color: color-mix(in oklab, var(--ink) 86%, transparent); }
.showcase__more { margin-top: var(--s-5); }
.showcase__stage { position: relative; display: grid; padding-bottom: 40px; }
.showcase__item { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transition: opacity 320ms var(--ease), visibility 0s linear 320ms; }
.showcase__item.is-on { opacity: 1; visibility: visible; transition: opacity 320ms var(--ease), visibility 0s; }
.showcase__item .browser { box-shadow: 0 30px 80px -30px rgb(0 0 0 / .6); }
.showcase__phone { position: absolute; right: 28px; bottom: -40px; width: 150px; border-width: 6px; border-radius: 26px; box-shadow: 0 24px 60px -16px rgb(0 0 0 / .65);
  transform: translateY(14px); transition: transform 520ms var(--ease-out); }
.showcase__item.is-on .showcase__phone { transform: none; }
.showcase__result { position: absolute; left: 20px; bottom: -16px; display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--p-bg); color: var(--p-ink); box-shadow: var(--lift); font-size: var(--t-small); font-weight: 500;
  transform: translateY(10px); opacity: 0; transition: transform 520ms var(--ease-out) 60ms, opacity 320ms var(--ease) 60ms; }
.showcase__result span { display: inline-flex; align-items: center; gap: 8px; }
.showcase__result .tick { color: var(--p-accent); }
.showcase__item.is-on .showcase__result { transform: none; opacity: 1; }
@media (max-width: 1023px) { .showcase__stage { margin-top: var(--s-7); } }
@media (max-width: 639px) { .showcase__phone { width: 104px; right: 12px; border-width: 4px; border-radius: 18px; } .showcase__result { left: 12px; padding: 10px 12px; font-size: 13px; } }

/* ---------- bento services: linked cards, each with its own picture */
.bento-row { align-items: stretch; }
.bento { display: grid; grid-template-rows: auto 1fr; gap: var(--s-5); padding: var(--s-6); color: inherit; overflow: clip; }
.bento h3 { font: 400 var(--t-h3)/1.15 var(--font-display) !important; letter-spacing: -0.015em !important; }
.bento p { margin-top: var(--s-2); color: var(--muted); max-width: 44ch; }
.bento__visual { position: relative; min-height: 236px; border-radius: var(--r-md); overflow: clip; background: var(--p-surface); }
.bento__visual--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transition: transform 600ms var(--ease); }
a.bento:hover .bento__visual--photo img { transform: scale(1.03); }
/* orbit: the business in the middle, the places people search around it */
.orbit { background: radial-gradient(circle at 50% 50%, #fff 0, var(--p-surface) 70%); }
.orbit__ring { position: absolute; left: 50%; top: 50%; border: 1px dashed color-mix(in oklab, var(--p-ink) 18%, transparent); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit__ring--1 { width: 170px; height: 170px; } .orbit__ring--2 { width: 300px; height: 300px; }
.orbit__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; padding: 14px 18px; border-radius: 14px; background: var(--p-bg); box-shadow: var(--lift); font-size: 14px; text-align: center; }
.orbit__core img { width: 15px; height: 23px; margin-bottom: 4px; }
.orbit__core b { font-weight: 500; } .orbit__core small { font-size: 12px; color: var(--muted); }
.orbit__icon { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgb(15 29 46 / .08), 0 8px 20px -8px rgb(15 29 46 / .25);
  transform: translate(-50%, -50%); transition: transform 420ms var(--ease-out); }
.orbit__icon img { width: 26px; height: 26px; object-fit: contain; }
a.bento:hover .orbit__icon { transform: translate(-50%, -50%) scale(1.08); }
a.bento:hover .orbit__icon:nth-of-type(odd) { transform: translate(-50%, -56%) scale(1.08); }
/* notes: what an automation sends to the phone */
.notes { display: grid; align-content: center; gap: 10px; padding: var(--s-5); background: linear-gradient(160deg, #e9eef4, var(--p-surface)); }
.note { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / .92); box-shadow: 0 1px 2px rgb(15 29 46 / .06), 0 8px 20px -10px rgb(15 29 46 / .25); font-size: 14px;
  transition: transform 420ms var(--ease-out); }
.note img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.note span { display: grid; flex: 1; min-width: 0; } .note b { font-weight: 500; } .note small { color: var(--muted); font-size: 13px; }
.note time { font-size: 12px; color: var(--muted); align-self: start; }
.note:nth-child(2) { margin-inline: 10px; opacity: .92; } .note:nth-child(3) { margin-inline: 20px; opacity: .8; }
a.bento:hover .note:nth-child(1) { transform: translateY(-3px); } a.bento:hover .note:nth-child(3) { transform: translateY(3px); }
/* checks: what is taken care of */
.checks { display: grid; grid-template-rows: 1fr auto; padding: var(--s-5) var(--s-6); background: var(--p-surface); }
.checks ul { display: grid; align-content: center; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid color-mix(in oklab, var(--p-ink) 10%, transparent); font-size: 15px; }
.checks li::before, .checks li::after { content: none !important; display: none !important; }
.checks li > b { grid-column: 2; } .checks li > span { grid-column: 3; text-align: right; white-space: nowrap; }
@media (max-width: 639px) { .checks li { grid-template-columns: 22px minmax(0, 1fr); } .checks li > span { grid-column: 2; text-align: left; } }
#werkwijze .section-head--row > div { max-width: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 500; }
.next-case { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; align-items: center; gap: var(--s-6); margin-top: var(--s-9); padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); color: inherit;
  transition: transform 180ms var(--ease), border-color 140ms var(--ease); }
.next-case:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.next-case__thumb { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: clip; }
.next-case__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 600ms var(--ease); }
.next-case:hover .next-case__thumb img { transform: scale(1.03); }
.next-case__text { display: grid; gap: 4px; }
.next-case__text small { font-size: 13px; color: var(--muted); }
.next-case__text b { font: 400 var(--t-h3)/1.2 var(--font-display); letter-spacing: -0.015em; }
.next-case__text span { color: var(--muted); }
.next-case__go { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--p-action); color: #fff; }
.next-case__go .m-arrow { width: 14px; height: 14px; }
@media (max-width: 639px) { .next-case { grid-template-columns: 1fr; } .next-case__go { display: none; } }
.step-panel { height: 200px; }
.close__copy { max-width: 920px; }
.close--panel h2 { font-size: clamp(28px, 1.5vw + 14px, 40px); max-width: none; }
/* the service cards' pictures, set larger so the stretched cards read full */
@media (min-width: 1024px) {
  .notes { gap: 14px; padding: var(--s-6); }
  .note { padding: 16px 18px; font-size: 15px; gap: 14px; }
  .note img { width: 32px; height: 32px; }
  .note small { font-size: 14px; }
  .checks li { padding: 16px 0; font-size: 16px; }
  .checks li > span { font-size: 14px; }
  .orbit__ring--1 { width: 190px; height: 190px; } .orbit__ring--2 { width: 340px; height: 340px; }
  .orbit__icon { width: 56px; height: 56px; } .orbit__icon img { width: 28px; height: 28px; }
}
.close--panel { padding: clamp(28px, 3.4vw, 48px); }
.closing__links { margin-top: var(--s-7); }
.float-card--chip { width: 300px; }
.chip__top span { white-space: nowrap; }
.hero-proof__logos img { height: 20px; }
.hero-proof__logos img:first-of-type { height: 28px; }
.hero-proof__logos img:nth-of-type(2) { height: 15px; }
.hero-proof__logos img:nth-of-type(3) { height: 24px; }
.checks li:last-child { border-bottom: 0; }
.checks li .tick { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: color-mix(in oklab, var(--p-accent) 14%, transparent); }
.checks b { font-weight: 500; } .checks li span { color: var(--muted); font-size: 13px; }
.checks__tools { display: flex; align-items: center; gap: 18px; padding-top: var(--s-4); }
.checks__tools img { height: 20px; width: auto; } .checks__tools img.ic-wide { height: 12px; }
@media (max-width: 1023px) { .bento { padding: var(--s-5); } }

/* ---------- the 14-day timeline: the line draws once when it comes into view */
.timeline { position: relative; margin: 0 0 var(--s-7); padding-top: 6px; }
.timeline__track { position: relative; height: 4px; border-radius: 99px; background: color-mix(in oklab, var(--ink) 9%, transparent); }
.timeline__fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #3d7fc1, var(--accent)); transform-origin: left; }
.timeline__marks { position: relative; height: 58px; margin-top: 14px; }
.timeline__marks li { position: absolute; left: calc(var(--at) * 100%); top: 0; display: grid; gap: 2px; transform: translateX(-50%); text-align: center; font-size: var(--t-small); white-space: nowrap; }
.timeline__marks li:first-child { transform: none; text-align: left; } .timeline__marks li:last-child { transform: translateX(-100%); text-align: right; }
.timeline__marks li::before { content: ""; position: absolute; top: -27px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.timeline__marks li:first-child::before { left: 0; margin-left: 0; } .timeline__marks li:last-child::before { left: auto; right: 0; margin-left: 0; }
.timeline__marks b { font-weight: 500; } .timeline__marks span { color: var(--muted); }
.js-reveal .timeline:not(.is-in) .timeline__fill { transform: scaleX(0); }
.js-reveal .timeline:not(.is-in) .timeline__marks li::before { background: var(--surface); }
.js-reveal .timeline .timeline__fill { transition: transform 1600ms cubic-bezier(.65, 0, .35, 1) 150ms; }
.js-reveal .timeline .timeline__marks li::before { transition: background 300ms var(--ease) calc(150ms + var(--at) * 1500ms); }
@media (max-width: 639px) {
  .timeline__marks { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .timeline__marks li, .timeline__marks li:first-child, .timeline__marks li:last-child { position: static; transform: none; text-align: left; white-space: normal; }
  .timeline__marks li::before { display: none; }
}

/* ---------- reviews with stars, and the rating summary */
.rating-sum { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-small); padding: 10px 16px; border-radius: 999px; background: var(--p-bg); border: 1px solid var(--line); }
.rating-sum b { font-weight: 600; }
.review { padding: var(--s-5); border-radius: var(--r-lg); background: var(--p-bg); border: 1px solid var(--line); gap: var(--s-4); }
.review__logo { display: block; }
.review__logo img { transition: transform 600ms var(--ease); }
.review__logo:hover img { transform: scale(1.03); }
.review blockquote { font-size: 18px; flex: 1; }

/* ---------- stats: real figures, set large in the display face */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); margin: var(--s-3) 0 !important; padding: var(--s-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats > div { display: flex; flex-direction: column-reverse; gap: 2px; }
.stats dt { font-size: var(--t-small); color: var(--muted); }
.stats dd { margin: 0; font: 400 clamp(40px, 2.6vw + 10px, 52px)/1 var(--font-display); letter-spacing: -0.03em; }
.stats dd small { font-size: .45em; margin-left: 4px; letter-spacing: 0; color: var(--muted); }

/* ---------- the contact block: who answers and what happens next */
.promise { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.promise img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.promise span { display: grid; gap: 2px; color: var(--muted); font-size: var(--t-small); }
.promise b { color: var(--ink); font-weight: 500; font-size: var(--t-body); }
.next-steps { display: grid; gap: 14px; counter-reset: s; margin: 0; padding: 0; list-style: none; }
.next-steps li { display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; counter-increment: s; }
.next-steps li::before { content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 14px; font-weight: 500; }
.next-steps b { font-weight: 500; } .next-steps span { color: var(--muted); font-size: var(--t-small); }
.contact-line { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: var(--t-small); }
.contact-line a { display: inline-flex; align-items: center; gap: 8px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); }
.contact-line a:hover { text-decoration-color: currentColor; }
.contact-line img { width: 18px; height: 18px; }
.form-note { display: flex; gap: 8px; align-items: flex-start; }
.form-note .tick { margin-top: 2px; }

/* ---------- the closing panel: Ferkan, the promise, the two ways to start */
.close--panel { position: relative; overflow: clip; padding: clamp(28px, 4vw, 56px); border-radius: var(--r-lg); display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-6); }
.close--panel::before { content: ""; position: absolute; right: -8%; top: -60%; width: 60%; height: 200%; pointer-events: none; background: radial-gradient(closest-side, rgb(61 127 193 / .38), transparent 70%); }
.close--panel > * { position: relative; }
.close__copy { display: flex; align-items: flex-start; gap: var(--s-5); max-width: 720px; }
.close__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 4px rgb(255 255 255 / .12); }
.close--panel h2 { font-size: clamp(30px, 2vw + 12px, 44px); }
.close--panel p { color: var(--muted); max-width: 52ch; }
.close__btn { height: 52px; padding-inline: 26px; font-size: 16px; }
.closing__links { margin-top: var(--s-8); }
@media (max-width: 639px) { .close__copy { flex-direction: column; } .close--panel .btn-row { width: 100%; } .close__btn { width: 100%; } }

/* ---------- reveals: headings and small groups arrive once, as they come into view */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal main .section-head:not(.is-in), .js-reveal [data-reveal-one]:not(.is-in), .js-reveal [data-reveal="stagger"]:not(.is-in) > * { opacity: 0; }
  main .section-head.is-in, [data-reveal-one].is-in { animation: sk-up 760ms var(--ease-out) backwards; }
  [data-reveal="stagger"].is-in > * { animation: sk-up 760ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
}

/* tablet: the service cards take the full row; the checklist card spans the column */
@media (max-width: 1023px) { .bento-row > .bento { grid-column: 1 / -1; } }
.filecard { max-width: none; }
@media (max-width: 1023px) { main > section.g2 > .wrap > * { align-self: stretch !important; width: 100%; } }
@media (max-width: 1023px) { .hero-split > .hero-copy { width: 100%; } }

/* v3 fixes ------------------------------------------------------------------------------
   the home hero is at least one screen and grows with its content, so on a short laptop
   screen nothing slides under the next section */
@media (min-width: 1024px) {
  main > section.hero--home { height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
  main > section.hero--home > .wrap { flex: 1 0 auto; height: auto; display: flex; flex-direction: column; }
  .hero--home .hero-text.hero-split { flex: 1 0 auto; height: auto; }
  .hero--home .hero-split > .hero-visual { height: auto; min-height: 420px; }
}
.hero--home .hero-copy > h1 { margin-top: 0; }
/* short laptop screens (1366x768, 1280x720 with the browser bar): the same hero, set tighter */
@media (min-width: 1024px) and (max-height: 820px) {
  main > section.hero--home { padding-top: calc(var(--nav) + 32px); padding-bottom: 40px; }
  .hero--home .hero-copy > h1 { font-size: clamp(42px, 3.2vw + 8px, 62px); }
  .hero--home .hero-copy > * + * { margin-top: var(--s-4); }
  .hero--home .hero-copy > .btn-row { margin-top: var(--s-5); }
  .hero-proof { margin-top: var(--s-5) !important; padding-top: var(--s-4); }
  .hero-proof__logos > span { display: none; }
}

/* the contact block: room around the promise card and the steps */
.promise { padding: 18px 22px 18px 18px; }
.stack-5 > .promise, .stack-5 > .next-steps { margin-top: var(--s-7); }
.stack-5 > .contact-line { margin-top: var(--s-6); }
@media (max-width: 639px) { .stack-5 > .promise, .stack-5 > .next-steps { margin-top: var(--s-6); } }

/* =====================================================================================
   v4 (6 Nov 2026): no words over other words at any width, and a calm phone page.
   Measured on every page at 30 screen sizes from 320 to 1920 wide; the desktop keeps its picture.
   ===================================================================================== */

/* the page never pans sideways on a phone: html takes the viewport, so body's clip holds at its own edge */
html { overflow-x: hidden; }

/* ---------- heroes grow with their words. The kit draws each hero exactly one screen tall; on a
   narrow or short screen the contact form, the facts and the browser window then ran over the next
   section. Now a hero is at least one screen on a laptop and as tall as it needs below that. */
@media (min-width: 1024px) {
  main > section.hero--split { height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
  main > section.hero--split > .wrap { flex: 1 0 auto; height: auto; display: flex; flex-direction: column; }
  .hero--split .hero-text.hero-split { flex: 1 0 auto; height: auto; }
}
@media (max-width: 1023px) {
  main > section.hero { height: auto; min-height: 0; padding-bottom: var(--s-6); }
  main > section.hero > .wrap { height: auto; display: block; }
  .hero-text.hero-split { height: auto; }
  .hero-split > .hero-visual { flex: none; height: auto; min-height: 0; }
  .hero-split > .hero-visual.frame { --ratio: 75%; }
  /* the three facts come back under the buttons (the kit hid them below 1024) */
  .hero-facts { display: grid; padding-top: var(--s-5); border-top: 1px solid var(--line); }
  .hero-copy > .hero-facts { margin-top: var(--s-6); }
}
@media (max-width: 639px) {
  main > section.hero--home { padding-bottom: var(--s-7); }
  /* on a phone the facts read as a short list: the label left, the fact right */
  .hero-facts { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .hero-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: 11px 0; border-bottom: 1px solid var(--line); }
  .hero-facts dt { flex: none; }
  .hero-facts dd { text-align: right; }
}

/* ---------- the rhythm of a stacked page: less dead ground between sections, and an anchor still
   lands under the fixed header */
@media (max-width: 1023px) {
  main > :is(section, .section), footer.closing { scroll-margin-top: var(--nav); }
}
@media (min-width: 640px) and (max-width: 1023px) { :root { --padt: 88px; --padb: 72px; } }
@media (max-width: 639px) {
  :root { --padt: 64px; --padb: 56px; }
  /* the room for the action bar (with Safari's safe area, which changes while its toolbar folds away
     during a scroll) sits only under the footer. Under every section it made the whole page grow and
     shrink as you scrolled: the small jump back on the phone */
  main > :is(section, .section):not(.hero) { padding-bottom: var(--padb); }
  footer.closing { padding-bottom: calc(var(--padb) + var(--bar)); }
}
/* two-screen sections stack as one list: the same gap between the cards of both screens */
@media (max-width: 1023px) {
  main > :is(section, .section).g2 > .wrap.wrap { row-gap: var(--card-gap); }
  main > #projecten.g2 > .wrap.wrap, #projecten .grid { row-gap: var(--s-8); }
}

/* ---------- the 14-day timeline: on a tablet or phone it runs down the left, a dot per step */
@media (max-width: 1023px) {
  .timeline { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: var(--s-4); padding-top: 0; margin-bottom: var(--s-7); }
  .timeline__track { grid-area: 1 / 1; justify-self: center; width: 4px; height: auto; margin: 11px 0; }
  .timeline__fill { transform-origin: top; background: linear-gradient(180deg, #3d7fc1, var(--accent)); }
  .js-reveal .timeline:not(.is-in) .timeline__fill { transform: scaleY(0); }
  .timeline__marks { grid-area: 1 / 2; height: auto; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .timeline__marks li, .timeline__marks li:first-child, .timeline__marks li:last-child {
    position: relative; left: auto; top: auto; transform: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); text-align: left; white-space: normal; }
  .timeline__marks li::before, .timeline__marks li:first-child::before, .timeline__marks li:last-child::before {
    display: block; top: 4px; left: calc(-14px - var(--s-4)); right: auto; margin-left: 0; box-shadow: 0 0 0 3px var(--bg); }
}

/* ---------- step 1's WhatsApp conversation is shown whole at every width. The three panels take what
   their card leaves, so their feet line up; the conversation sets the row's height */
.step-panel { flex: 1 0 auto; height: auto; min-height: 200px; }
.step-panel > img { position: absolute; inset: 0; }
.chat { position: relative; inset: auto; height: 100%; min-height: 200px; gap: 8px; padding: 14px 16px 16px; font-size: 14px; line-height: 1.4; }
.chat__head { display: flex; padding-bottom: 10px; font-size: 13px; }
.chat__head img { width: 24px; height: 24px; }
.chat__head span { font-size: 12px; }
.chat__msg { padding: 7px 11px 6px; }
.chat__msg small { display: inline; float: right; margin: 6px 0 -2px 12px; font-size: 11px; line-height: 1.4; }
@media (max-width: 1023px) {
  .step-panel { height: auto; }
  .chat { padding: 14px 16px 16px; gap: 8px; font-size: 14px; }
  .chat__msg:last-child { display: block; }
}
@media (max-width: 639px) { .step-panel { height: auto; } .chat__head { display: flex; } }

/* ---------- the form: when a label takes two lines, the fields beside each other still share one line */
.form-panel .form { align-items: end; }
.chip__top b { white-space: nowrap; }

/* ---------- the rating beside "Wat klanten zeggen": the stars and the score on one line */
.section-head--row > .rating-sum { display: inline-flex; flex-wrap: nowrap; gap: 10px; }
.rating-sum > span { white-space: nowrap; }

/* ---------- the phone, piece by piece */
@media (max-width: 639px) {
  /* the hero: the client logos in one row, the 14-day card inside the photograph */
  .hero-proof { gap: var(--s-4); margin-top: var(--s-6) !important; }
  .hero-proof__logos { gap: 12px 18px; }
  .hero-proof__logos > span { width: 100%; }
  .hero-proof__logos img { height: 16px; }
  .hero-proof__logos img:first-of-type { height: 22px; }
  .hero-proof__logos img:nth-of-type(2) { height: 12px; }
  .hero-proof__logos img:nth-of-type(3) { height: 19px; }

  /* the service cards: every icon whole inside its card, the notes and checks with room to read */
  .bento { gap: var(--s-4); }
  .bento__visual { min-height: 220px; }
  .orbit__ring--1 { width: 132px; height: 132px; } .orbit__ring--2 { width: 232px; height: 232px; }
  .orbit__icon { width: 44px; height: 44px; border-radius: 12px; left: clamp(30px, var(--x), calc(100% - 30px)); top: clamp(30px, var(--y), calc(100% - 30px)); }
  .orbit__icon img { width: 22px; height: 22px; }
  .orbit__core { padding: 10px 14px; }
  .notes { padding: var(--s-4); gap: 8px; }
  .note { padding: 10px 12px; gap: 10px; }
  .note:nth-child(2) { margin-inline: 6px; } .note:nth-child(3) { margin-inline: 12px; }
  .checks { padding: var(--s-3) var(--s-4); }
  .checks li { column-gap: 12px; padding: 11px 0; }

  /* reviews: a smaller logo tile, the quote close under the stars */
  .review { padding: var(--s-5); gap: var(--s-3); }
  .review__logo { width: 120px; height: 60px; }
  .review blockquote { font-size: 17px; }
  .review .person { margin-top: var(--s-2); }

  /* the footer: the logo and LinkedIn on one line, the four links two by two under it */
  .footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px var(--s-5); align-items: center; }
  .footer__nav > .nav__logo { grid-column: 1; grid-row: 1; }
  .footer__nav > .socials { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; }
  .footer__legal { gap: var(--s-2); }
  .closing__links { margin-top: var(--s-7); }
  .closing__links .grid { row-gap: var(--s-6); }
}
/* the smallest phones (320 to 359): a little more room for the words */
@media (max-width: 359px) {
  :root { --gut: 16px; }
  .close--panel { padding: 24px 20px; }
  .close__btn { padding-inline: 16px; }
  .hero--home .hero-copy > h1 { font-size: 36px; }
}

/* ---------- Ferkan's photo on the home page, below 1024: the frame keeps its shape with a spacer
   instead of aspect-ratio (which some iPhone versions ignore inside a column, leaving a thin strip).
   On a phone the photo stands tall and only the review rests on it; the 14 days are already in the
   words above it and in the timeline further down */
@media (max-width: 1023px) {
  .hero--home .hero-visual { aspect-ratio: auto; height: auto; }
  .hero--home .hero-visual::before { content: ""; display: block; padding-top: 85%; }
}
@media (max-width: 639px) {
  .hero--home .hero-visual::before { padding-top: 122%; }
  .hero--home .float-card--chip { display: none; }
  .hero--home .float-card--review { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 12px 14px; gap: 8px; }
  .hero--home .float-card--review blockquote { font-size: 16px; }
  .hero-photo img { object-position: 60% 30%; }
  /* the same on "Over ons": Ferkan's photo stands tall instead of a wide strip */
  .hero-split > .hero-visual.frame { --ratio: 110%; }
  /* the case pages' two screenshots, and the privacy page's first lines a little higher */
  #beelden .grid { row-gap: var(--s-5); }
  main > #privacy.section--read { padding-top: calc(var(--nav) + var(--s-7)) !important; }
}