/* =============================================
   Studio Cutter — site.css
   Gedeelde stijlen voor alle pagina's
   ============================================= */

/* ── FONTS (self-hosted, geen Google-request) ── */
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/barlow-condensed-400-normal.woff2) format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url(/assets/fonts/barlow-condensed-700-normal.woff2) format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:900; font-display:swap; src:url(/assets/fonts/barlow-condensed-900-normal.woff2) format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:italic; font-weight:900; font-display:swap; src:url(/assets/fonts/barlow-condensed-900-italic.woff2) format('woff2'); }
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/dm-mono-400-normal.woff2) format('woff2'); }

:root {
  --black:  #060608;
  --navy:   #002B5E;
  --royal:  #00538C;
  --blue:   #1A7EC8;
  --ice:    #6BBFFF;
  --silver: #B8C4CA;
  --white:  #F2F6FF;
  --muted:  #6F86A3;   /* was #556B85 — opgehoogd voor WCAG AA op zwart */
  --border: #0D1F35;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%; }
body { background:var(--black); color:var(--white); font-family:var(--cond); overflow-x:hidden; }
img, svg { display:block; max-width:100%; }

body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:900; opacity:.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ── A11Y ── */
.skip-link {
  position:absolute; left:12px; top:-60px; z-index:1000;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--ice); color:var(--black); padding:10px 16px; text-decoration:none;
}
.skip-link:focus { top:12px; }
:focus-visible { outline:2px solid var(--ice); outline-offset:3px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── MOBIELE TOPBAR (<768px; sidebar = drawer) ── */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:56px; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(6,6,8,.93); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transition:background .35s, border-color .35s;
}
.site-nav.is-transparent { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-color:transparent; }
.site-nav.is-transparent.on { background:rgba(6,6,8,.93); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-color:var(--border); }

.logo { font-size:17px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; text-decoration:none; color:var(--white); }
.logo span { color:var(--ice); }

.burger { display:flex; flex-direction:column; gap:5px; width:44px; height:44px; justify-content:center; align-items:flex-end; background:none; border:none; cursor:pointer; padding:0; }
.burger span { display:block; height:2px; width:28px; background:var(--white); transition:transform .3s, opacity .3s; }
.burger span:nth-child(2) { width:20px; }

/* ══════════════ SIDEBAR ══════════════
   Desktop ≥1200: in/uitklapbaar (status in localStorage)
   Tablet 768–1199: standaard ingeklapt, uitklappen = overlay
   Mobiel <768: off-canvas drawer vanaf links
   Breakpoints ook in: inline <head>-script + /assets/js/sidebar.js */
:root {
  --sb-expanded: 264px;
  --sb-collapsed: 72px;
  --sb-w: 0px;                                             /* mobiel: geen offset */
  --sb-gutter: 12px;
  --sb-slot: calc(var(--sb-collapsed) - var(--sb-gutter) * 2); /* 48px icoonkolom */
  --sb-item-h: 40px;
  --sb-dur: 300ms;
  --sb-ease: cubic-bezier(.32,.72,0,1);
  --sb-ease-out: cubic-bezier(.16,1,.3,1);
  --sb-bg: #07080c;
  --sb-hover: rgba(107,191,255,.05);
  --sb-ring: 0 0 0 1px var(--sb-bg), 0 0 0 3px rgba(107,191,255,.6);
}
html.sb-preload *, html.sb-preload *::before, html.sb-preload *::after { transition:none !important; }

.sidebar {
  position:fixed; inset:0 auto 0 0; z-index:300;
  width:min(var(--sb-expanded), calc(100vw - 48px));
  display:flex; flex-direction:column;
  background:var(--sb-bg);
  border-right:1px solid var(--border);
  transform:translateX(-100%);
  visibility:hidden;
  transition:width var(--sb-dur) var(--sb-ease), transform 340ms var(--sb-ease), box-shadow var(--sb-dur) var(--sb-ease), visibility 0s linear 340ms;
}
.sidebar::before {                 /* subtiele grid-textuur, zelfde DNA als de hero-slab */
  content:''; position:absolute; inset:0 0 auto 0; height:220px; pointer-events:none;
  background-image:linear-gradient(rgba(107,191,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(107,191,255,.045) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent);
          mask-image:linear-gradient(to bottom, #000, transparent);
}
html.drawer-open .sidebar { transform:none; visibility:visible; box-shadow:24px 0 64px -16px rgba(0,0,0,.8); transition-delay:0s; }

/* Tekst die verdwijnt bij inklappen */
.sb-fade { opacity:1; transform:translateX(0); transition:opacity 220ms ease 90ms, transform var(--sb-dur) var(--sb-ease) 40ms; }
html[data-sidebar="collapsed"] .sb-fade { opacity:0; transform:translateX(-4px); pointer-events:none; transition:opacity 110ms ease, transform 200ms var(--sb-ease); }

/* Header + logo */
.sb-header { position:relative; flex:none; height:72px; display:flex; align-items:center; padding:0 var(--sb-gutter); border-bottom:1px solid var(--border); }
.sb-brand { display:flex; align-items:center; flex:1; min-width:0; height:44px; text-decoration:none; color:var(--white); outline:none; }
.sb-brand:focus-visible { box-shadow:var(--sb-ring); }
.sb-slot { position:relative; flex:0 0 var(--sb-slot); height:100%; display:grid; place-items:center; }
.sb-mark { width:30px; height:30px; transition:transform var(--sb-dur) var(--sb-ease-out); }
.sb-brand:hover .sb-mark { transform:rotate(-8deg) scale(1.06); }
.sb-word { font-size:18px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; line-height:1; }
.sb-word span { color:var(--ice); }

/* Toggle aan de rechterrand */
.sb-toggle {
  position:absolute; top:24px; right:-12px; z-index:2;
  width:24px; height:24px; display:none; place-items:center;
  background:var(--black); color:var(--silver);
  border:1px solid var(--royal); cursor:pointer; padding:0;
  opacity:0;
  transition:opacity 200ms ease, color 150ms, background-color 150ms, border-color 150ms, transform 200ms var(--sb-ease-out);
}
.sidebar:hover .sb-toggle, .sb-toggle:focus-visible, html[data-sidebar="collapsed"] .sb-toggle { opacity:1; }
.sb-toggle:hover { background:var(--royal); color:var(--white); border-color:var(--ice); transform:scale(1.08); }
.sb-toggle:active { transform:scale(.94); }
.sb-toggle:focus-visible { outline:none; box-shadow:0 0 0 2px var(--black), 0 0 0 4px var(--ice); }
.sb-toggle svg { width:14px; height:14px; transition:transform var(--sb-dur) var(--sb-ease); }
html[data-sidebar="collapsed"] .sb-toggle svg { transform:rotate(180deg); }

.sb-close { display:grid; place-items:center; flex:none; width:40px; height:40px; background:none; border:1px solid transparent; color:var(--silver); cursor:pointer; transition:color 150ms, border-color 150ms; }
.sb-close:hover { color:var(--white); border-color:var(--border); }
.sb-close svg { width:20px; height:20px; }

/* Scrollgebied */
.sb-scroll { position:relative; flex:1; overflow-y:auto; overflow-x:hidden; padding:4px 0 10px; scrollbar-width:none; }
.sb-scroll::-webkit-scrollbar { display:none; }
.sb-list { list-style:none; display:grid; grid-template-columns:minmax(0,1fr); gap:2px; }
.sb-list > li { min-width:0; }

/* Sectietitels houden hun hoogte → iconen blijven verticaal staan */
.sb-section { position:relative; height:28px; margin:12px var(--sb-gutter) 2px; padding-left:14px; display:flex; align-items:center; }
.sb-section span { font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--ice); white-space:nowrap; display:flex; align-items:center; gap:10px; }
.sb-section span::before { content:''; width:14px; height:1px; background:var(--ice); }
.sb-section::after { content:''; position:absolute; left:12px; top:50%; width:24px; height:1px; background:var(--royal); opacity:0; transform:scaleX(.3); transition:opacity 160ms ease, transform var(--sb-dur) var(--sb-ease); }
html[data-sidebar="collapsed"] .sb-section::after { opacity:1; transform:scaleX(1); transition-delay:80ms; }

/* Items */
.sb-item {
  position:relative; display:flex; align-items:center;
  width:calc(100% - var(--sb-gutter) * 2); height:var(--sb-item-h);
  margin:0 var(--sb-gutter);
  color:var(--silver); text-decoration:none; outline:none;
  border:1px solid transparent;
  transition:background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 120ms ease;
  -webkit-tap-highlight-color:transparent;
}
.sb-item svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; color:var(--muted); transition:color 150ms ease, transform 200ms var(--sb-ease-out); }
.sb-text { flex:1; min-width:0; display:flex; align-items:center; gap:8px; overflow:hidden; padding-right:12px; }
.sb-label { flex:1; min-width:0; font-size:17px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1; padding-top:1px; }
.sb-hint { flex:none; font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.sb-ext { flex:none; width:12px !important; height:12px !important; color:var(--muted) !important; opacity:0; transform:translate(-3px,3px); transition:opacity 150ms, transform 200ms var(--sb-ease-out) !important; }

.sb-item:hover { background:var(--sb-hover); color:var(--white); border-color:var(--border); }
.sb-item:hover > .sb-slot svg { color:var(--ice); transform:translateY(-1px); }
.sb-item:hover .sb-ext { opacity:1; transform:none; }
.sb-item:active { transform:scale(.985); }
.sb-item:focus-visible { box-shadow:var(--sb-ring); }

/* Actief item: ice-indicator op de rand (zelfde taal als .app-row) */
.sb-item::before { content:''; position:absolute; left:calc(var(--sb-gutter) * -1 - 1px); top:8px; bottom:8px; width:3px; background:var(--ice); transform:scaleY(0); transition:transform 350ms var(--sb-ease-out); }
.sb-item[aria-current]::before { transform:scaleY(1); }
.sb-item[aria-current] { background:linear-gradient(90deg, rgba(107,191,255,.10), rgba(107,191,255,.02)); border-color:rgba(107,191,255,.18); color:var(--white); }
.sb-item[aria-current] > .sb-slot svg { color:var(--ice); }

/* CTA */
.sb-foot { position:relative; flex:none; padding:14px 0 16px; border-top:1px solid var(--border); }
.sb-cta { background:var(--royal); border-color:var(--royal); color:var(--white); }
.sb-cta > .sb-slot svg { color:var(--white); }
.sb-cta .sb-label { font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.16em; }
.sb-cta:hover { background:var(--blue); border-color:var(--blue); }
.sb-cta:hover > .sb-slot svg { color:var(--white); transform:translate(1px,-1px); }
.sb-cta[aria-current] { background:var(--royal); border-color:var(--ice); }
.sb-cta::before { display:none; }
.sb-meta { display:flex; align-items:center; height:20px; margin:12px var(--sb-gutter) 0; padding-left:14px; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; gap:8px; }
.sb-meta i { width:6px; height:6px; border-radius:50%; background:#3DDC84; box-shadow:0 0 0 3px rgba(61,220,132,.15); flex:none; }

/* Tooltip (fixed → nooit geclipt) */
.sb-tooltip {
  position:fixed; left:0; top:0; z-index:400;
  display:flex; align-items:center; gap:8px;
  padding:7px 10px;
  background:var(--black); color:var(--white);
  border:1px solid var(--royal);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  pointer-events:none;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.8);
  opacity:0;
  transform:translate(var(--x,0),var(--y,0)) translateY(-50%) translateX(-4px);
  transition:opacity 120ms ease, transform 180ms var(--sb-ease-out);
}
.sb-tooltip::before { content:''; position:absolute; left:-5px; top:50%; width:8px; height:8px; margin-top:-4px; background:var(--black); border-left:1px solid var(--royal); border-bottom:1px solid var(--royal); transform:rotate(45deg); }
.sb-tooltip.is-visible { opacity:1; transform:translate(var(--x,0),var(--y,0)) translateY(-50%); }
.sb-tooltip .tip-meta { color:var(--ice); padding-left:8px; border-left:1px solid var(--border); }
.sb-tooltip .tip-meta:empty { display:none; }

/* Backdrop */
.sb-scrim { position:fixed; inset:0; z-index:250; background:rgba(0,4,12,.6); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity var(--sb-dur) var(--sb-ease); }
html.sb-overlay .sb-scrim { opacity:1; pointer-events:auto; }
html[data-viewport="tablet"] .sb-scrim { background:rgba(0,4,12,.35); backdrop-filter:none; -webkit-backdrop-filter:none; }

/* Pagina schuift mee met de sidebar */
body { padding-left:var(--sb-w); transition:padding-left var(--sb-dur) var(--sb-ease); }

/* ── SHARED TYPE ── */
.s-label { font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ice); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.s-label::before { content:''; width:14px; height:1px; background:var(--ice); }

h2 { font-size:clamp(40px, 10vw, 88px); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; line-height:.9; margin-bottom:16px; }

.tag { font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; background:var(--border); color:var(--muted); }

.btn-blue { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:14px 28px; background:var(--royal); color:var(--white); border:none; cursor:pointer; display:inline-block; text-decoration:none; transition:background .2s; }
.btn-blue:hover { background:var(--blue); }

.divline { height:1px; background:linear-gradient(90deg, var(--border), var(--royal) 40%, var(--border)); }

/* ── PAGE HEADER (subpagina's) ── */
.page-header { padding:100px 20px 48px; border-bottom:1px solid var(--border); background:var(--black); position:relative; overflow:hidden; }
.page-header--lg { padding:120px 20px 64px; }
.page-header-slab { position:absolute; top:0; right:0; bottom:0; width:45%; background:linear-gradient(170deg, var(--navy) 0%, #000e23 100%); clip-path:polygon(20% 0, 100% 0, 100% 100%, 0% 100%); opacity:.65; z-index:0; }
.page-header-slab::after { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(107,191,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(107,191,255,.07) 1px, transparent 1px); background-size:40px 40px; }
.page-header-fade { position:absolute; top:0; left:0; bottom:0; width:70%; background:linear-gradient(90deg, var(--black) 55%, transparent 100%); z-index:1; pointer-events:none; }
.page-header-content { position:relative; z-index:2; }
.page-header h1 { font-size:clamp(48px, 10vw, 96px); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; line-height:.9; }
.page-header--lg h1 { font-size:clamp(52px, 12vw, 120px); }
.page-header h1 em { font-style:italic; color:var(--ice); }
.page-intro { font-family:var(--mono); font-size:13px; line-height:1.8; color:var(--silver); max-width:480px; margin-top:20px; }
.page-date { font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:16px; }

/* ── LEGAL CONTENT ── */
.content { max-width:720px; padding:56px 20px 100px; }
.content h2 { font-size:clamp(24px, 5vw, 36px); margin:40px 0 12px; line-height:1; }
.content p, .content li { font-family:var(--mono); font-size:12px; line-height:1.85; color:var(--silver); margin-bottom:16px; }
.content ul { padding-left:18px; margin-bottom:16px; }
.content li { margin-bottom:6px; }
.content a { color:var(--ice); text-decoration:none; }
.content a:hover { text-decoration:underline; }
.table-wrap { overflow-x:auto; margin:16px 0 24px; }
.cookie-table { width:100%; min-width:520px; border-collapse:collapse; }
.cookie-table th { font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ice); text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); }
.cookie-table td { font-family:var(--mono); font-size:11px; color:var(--silver); padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top; line-height:1.6; }
.cookie-table tr:last-child td { border-bottom:none; }

/* ── FOOTER ── */
footer { border-top:1px solid var(--border); background:var(--black); }
.footer-inner { padding:56px 20px 40px; display:grid; grid-template-columns:1fr; gap:40px; }
.footer-brand { display:flex; flex-direction:column; gap:12px; }
.footer-logo { font-size:17px; font-weight:900; text-transform:uppercase; letter-spacing:.07em; }
.footer-logo span { color:var(--ice); }
.footer-tagline { font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.08em; }
.footer-email { font-family:var(--mono); font-size:12px; color:var(--silver); text-decoration:none; transition:color .2s; width:fit-content; }
.footer-email:hover { color:var(--ice); }
.footer-wa { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--black); background:#25D366; padding:10px 16px; text-decoration:none; width:fit-content; transition:opacity .2s; }
.footer-wa:hover { opacity:.85; }
.footer-col-title { font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--ice); margin-bottom:16px; }
.footer-links-col, .footer-legal { display:flex; flex-direction:column; gap:10px; }
.footer-links-col a { font-family:var(--mono); font-size:12px; color:var(--muted); text-decoration:none; transition:color .2s; width:fit-content; }
.footer-links-col a:hover { color:var(--white); }
.footer-legal span { font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.04em; }
.footer-bar { padding:20px; border-top:1px solid var(--border); }
.footer-bar span { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.06em; }

/* ── REVEAL (alleen actief met JS) ── */
.js .reveal { opacity:0; transform:translateY(16px); transition:opacity .4s ease, transform .4s ease; }
.js .reveal.in { opacity:1; transform:none; }
.d1 { transition-delay:.1s; } .d2 { transition-delay:.2s; }

@keyframes up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ══════════════ HOME ══════════════ */
.sec { padding:64px 20px; position:relative; }

.hero { min-height:auto; background:var(--black); display:flex; flex-direction:column; justify-content:flex-end; padding:104px 20px 48px; position:relative; overflow:hidden; }
.hero-slab { position:absolute; top:0; right:0; bottom:0; width:45%; background:linear-gradient(170deg, var(--navy) 0%, #000e23 100%); clip-path:polygon(20% 0, 100% 0, 100% 100%, 0% 100%); z-index:0; opacity:.5; }
.hero-slab::after { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(107,191,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(107,191,255,.07) 1px, transparent 1px); background-size:40px 40px; }
.hero-fade { position:absolute; top:0; left:0; bottom:0; width:75%; background:linear-gradient(90deg, var(--black) 60%, transparent 100%); z-index:1; pointer-events:none; }
.hero-fade-top { position:absolute; top:0; left:0; right:0; height:180px; background:linear-gradient(to bottom, var(--black), transparent); z-index:1; pointer-events:none; }
.hero-orb { position:absolute; right:-60px; top:25%; width:320px; height:320px; background:radial-gradient(circle, rgba(26,126,200,.16) 0%, transparent 65%); z-index:2; pointer-events:none; }
.hero-content { position:relative; z-index:10; }
.hero-eyebrow { font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--ice); text-transform:uppercase; margin-bottom:20px; display:flex; align-items:center; gap:10px; animation:up .6s ease both .1s; }
.hero-eyebrow::before { content:''; width:20px; height:1px; background:var(--ice); }
.hero h1 { font-size:clamp(44px, 10vw, 110px); font-weight:900; line-height:.88; letter-spacing:-.01em; text-transform:uppercase; color:var(--white); margin-bottom:28px; animation:up .6s ease both .2s; }
.hero h1 em { font-style:italic; color:var(--ice); }
.hero-desc { font-family:var(--mono); font-size:13px; line-height:1.8; color:var(--silver); max-width:320px; animation:up .6s ease both .3s; }
.hero h1 .hero-rot { display:inline-block; min-width:1ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero-content .hero-actions { animation:up .6s ease both .4s; }
.btn-ghost { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:14px 24px; border:1px solid var(--royal); color:var(--ice); text-decoration:none; display:inline-block; transition:background .2s, color .2s, border-color .2s; }
.btn-ghost:hover { background:rgba(107,191,255,.08); border-color:var(--ice); color:var(--white); }

/* Expertises (home + /diensten) */
.xp-top { margin-bottom:36px; }
.xp-intro { font-family:var(--mono); font-size:13px; line-height:1.8; color:var(--silver); max-width:560px; }
.xp-grid { display:grid; grid-template-columns:1fr; gap:1px; background:var(--border); border:1px solid var(--border); list-style:none; }
.xp-card { position:relative; display:flex; flex-direction:column; gap:10px; padding:26px 22px 24px; background:#0a0c12; color:var(--white); text-decoration:none; overflow:hidden; transition:background .25s; height:100%; }
.xp-card::before { content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--ice); transform:scaleY(0); transform-origin:bottom; transition:transform .35s; }
.xp-card:hover, .xp-card:focus-visible { background:#0d1220; }
.xp-card:hover::before, .xp-card:focus-visible::before { transform:scaleY(1); }
.xp-head { display:flex; align-items:center; justify-content:space-between; }
.xp-num { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.1em; }
.xp-ico { width:22px; height:22px; fill:none; stroke:var(--ice); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.xp-title { font-size:clamp(26px, 6vw, 34px); font-weight:900; text-transform:uppercase; letter-spacing:-.005em; line-height:1; margin-top:6px; transition:color .2s; }
.xp-card:hover .xp-title, .xp-card:focus-visible .xp-title { color:var(--ice); }
.xp-desc { font-family:var(--mono); font-size:12px; line-height:1.7; color:#9FB3C8; }
.xp-parts { display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:8px; }
.xp-more { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ice); margin-top:6px; transition:letter-spacing .2s; }
.xp-card:hover .xp-more { letter-spacing:.22em; }
.xp-care { margin-top:1px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; padding:18px 22px; border:1px solid var(--border); border-top:0; font-family:var(--mono); font-size:11px; color:var(--silver); line-height:1.6; }
.xp-care b { color:var(--ice); font-weight:400; letter-spacing:.18em; text-transform:uppercase; font-size:10px; }

/* Websitecheck-strook (home) */
.check-band { background:linear-gradient(135deg, rgba(0,43,94,.45), var(--black) 65%); border-top:1px solid var(--border); }
.check-inner { display:grid; grid-template-columns:1fr; gap:20px; align-items:end; }
.check-inner .xp-intro { margin-bottom:4px; }

/* Lokale landingspagina's */
.loc-sit { display:flex; flex-direction:column; gap:10px; }
.loc-sit .loc-ctx { color:#9FB3C8; }
.loc-sit .loc-fix { margin-top:auto; padding-top:12px; border-top:1px solid var(--border); color:var(--silver); }
.loc-sit .loc-fix b { display:block; font-weight:400; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--ice); margin-bottom:6px; }
.flow { list-style:none; counter-reset:fl; display:grid; grid-template-columns:1fr; gap:1px; background:var(--border); border:1px solid var(--border); margin-top:24px; }
.flow li { counter-increment:fl; background:#0a0c12; padding:20px 22px; display:flex; flex-direction:column; gap:6px; position:relative; }
.flow li::before { content:counter(fl, decimal-leading-zero); font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.1em; }
.flow .flow-k { font-size:22px; font-weight:900; text-transform:uppercase; color:var(--ice); line-height:1; }
.flow .flow-v { font-family:var(--mono); font-size:12px; line-height:1.7; color:#9FB3C8; }
.price-list { list-style:none; margin:4px 0 28px; max-width:720px; }
.price-list li { font-family:var(--mono); font-size:12px; line-height:1.7; color:var(--silver); padding:10px 0 10px 24px; border-bottom:1px solid var(--border); position:relative; }
.price-list li::before { content:'→'; position:absolute; left:0; color:var(--ice); }
.svc-note b { color:var(--white); font-weight:400; }
.loc-sources { margin-bottom:24px; }
.loc-sources-h { font-family:var(--mono) !important; font-size:10px !important; font-weight:400 !important; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); line-height:1.6 !important; margin-bottom:10px !important; }
.loc-sources ul { list-style:none; display:flex; flex-direction:column; gap:6px; }
.loc-sources a { font-family:var(--mono); font-size:11px; color:var(--silver); text-decoration:none; border-bottom:1px solid var(--border); }
.loc-sources a:hover { color:var(--ice); border-color:var(--ice); }
.contact-meta a { color:var(--silver); text-decoration:none; border-bottom:1px solid var(--royal); }
.contact-meta a:hover { color:var(--ice); }

/* Dienstenpagina's */
.svc { padding:56px 20px 24px; max-width:1100px; }
.svc-block { margin-bottom:64px; }
.svc-block h2 { font-size:clamp(32px, 7vw, 56px); margin-bottom:20px; }
.svc-block h2 em { font-style:normal; color:var(--ice); }
.svc-lead { font-family:var(--mono); font-size:13px; line-height:1.85; color:var(--silver); max-width:640px; margin-bottom:16px; }
.svc-lead a, .svc-faq a, .svc-note a { color:var(--ice); }
.svc-list { list-style:none; display:grid; grid-template-columns:1fr; gap:1px; background:var(--border); border:1px solid var(--border); margin-top:28px; }
.svc-list li { background:#0a0c12; padding:22px 22px 20px; }
.svc-list h3 { font-size:22px; font-weight:700; text-transform:uppercase; letter-spacing:.01em; margin-bottom:6px; }
.svc-list p { font-family:var(--mono); font-size:12px; line-height:1.7; color:#9FB3C8; }
.svc-steps { list-style:none; counter-reset:step; display:grid; grid-template-columns:1fr; gap:0; margin-top:28px; border-top:1px solid var(--border); }
.svc-steps li { counter-increment:step; display:grid; grid-template-columns:48px 1fr; gap:14px; padding:20px 0; border-bottom:1px solid var(--border); }
.svc-steps li::before { content:counter(step, decimal-leading-zero); font-family:var(--mono); font-size:11px; color:var(--ice); letter-spacing:.1em; padding-top:5px; }
.svc-steps h3 { font-size:20px; font-weight:700; text-transform:uppercase; margin-bottom:4px; }
.svc-steps p { font-family:var(--mono); font-size:12px; line-height:1.7; color:#9FB3C8; }
.svc-proof { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.svc-proof a { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:10px 14px; border:1px solid var(--border); color:var(--silver); text-decoration:none; transition:border-color .2s, color .2s; }
.svc-proof a:hover { border-color:var(--ice); color:var(--ice); }
.svc-note { border-left:3px solid var(--royal); background:rgba(0,83,140,.10); padding:16px 18px; font-family:var(--mono); font-size:12px; line-height:1.75; color:var(--silver); margin-top:24px; max-width:720px; }
.svc-faq { border-top:1px solid var(--border); margin-top:24px; max-width:820px; }
.svc-faq details { border-bottom:1px solid var(--border); }
.svc-faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font-size:20px; font-weight:700; text-transform:uppercase; letter-spacing:.01em; }
.svc-faq summary::-webkit-details-marker { display:none; }
.svc-faq summary::after { content:'+'; font-family:var(--mono); font-size:18px; color:var(--ice); transition:transform .25s; flex:none; }
.svc-faq details[open] summary::after { transform:rotate(45deg); }
.svc-faq details p { font-family:var(--mono); font-size:12px; line-height:1.8; color:var(--silver); padding:0 0 20px; max-width:680px; }
.svc-cta { margin:24px 20px 80px; padding:36px 24px; border:1px solid var(--royal); background:linear-gradient(135deg, rgba(0,43,94,.55), rgba(6,6,8,0) 70%); }
.svc-cta h2 { font-size:clamp(34px, 8vw, 64px); margin-bottom:14px; }
.svc-cta h2 span { color:var(--ice); }
.svc-cta p { font-family:var(--mono); font-size:12px; line-height:1.8; color:var(--silver); max-width:520px; margin-bottom:24px; }
.svc-cta .hero-actions { margin-top:0; animation:none; }
.svc-related { padding:0 20px 24px; }
.crumbs { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; display:flex; flex-wrap:wrap; gap:8px; }
.crumbs a { color:var(--silver); text-decoration:none; }
.crumbs a:hover { color:var(--ice); }


.about { background:var(--navy); }
.about-body { font-family:var(--mono); font-size:13px; line-height:1.85; color:var(--silver); margin:24px 0 32px; }
.pillars { display:flex; flex-direction:column; }
.pillar { padding:16px 0; border-bottom:1px solid rgba(107,191,255,.14); display:flex; gap:16px; }
.pillar-num { font-family:var(--mono); font-size:10px; color:var(--ice); letter-spacing:.1em; flex-shrink:0; margin-top:3px; }
.pillar-title { font-size:20px; font-weight:700; text-transform:uppercase; margin-bottom:3px; }
.pillar-desc { font-family:var(--mono); font-size:11px; color:#9FB3C8; line-height:1.6; }

.work { background:var(--black); }
.work-top { margin-bottom:36px; }
.work-top-link { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ice); text-decoration:none; transition:letter-spacing .2s; display:inline-block; margin-top:8px; }
.work-top-link:hover { letter-spacing:.22em; }
.apps { display:flex; flex-direction:column; gap:1px; list-style:none; }

.app-row { display:grid; grid-template-columns:36px 1fr 28px; align-items:center; gap:14px; padding:22px 16px; background:#0a0c12; border:1px solid var(--border); position:relative; overflow:hidden; color:var(--white); text-decoration:none; transition:background .25s, border-color .25s; -webkit-tap-highlight-color:transparent; }
.app-row::before { content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--ice); transform:scaleY(0); transform-origin:bottom; transition:transform .35s; }
.app-row:hover, .app-row:focus-visible { background:#0d1220; border-color:var(--royal); }
.app-row:hover::before, .app-row:focus-visible::before { transform:scaleY(1); }
.app-num { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.1em; }
.app-name { font-size:clamp(24px, 7vw, 52px); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; line-height:1; margin-bottom:8px; transition:color .2s; }
.app-tags { display:flex; gap:6px; flex-wrap:wrap; }
.app-arrow { font-size:18px; color:var(--muted); transition:color .2s, transform .2s; text-align:right; }
.app-row:hover .app-arrow, .app-row:focus-visible .app-arrow { color:var(--ice); transform:translateX(4px); }

/* per-app accent (home) */
.app-row.acc { background:linear-gradient(105deg, rgba(var(--acc-rgb),.08) 0%, #0a0c12 60%); border-color:rgba(var(--acc-rgb),.22); }
.app-row.acc::before { background:var(--acc); }
.app-row.acc .app-name { color:rgba(var(--acc-rgb),.8); }
.app-row.acc .tag { background:rgba(var(--acc-rgb),.08); color:rgba(var(--acc-rgb),.75); }
.app-row.acc:hover, .app-row.acc:focus-visible { background:linear-gradient(105deg, rgba(var(--acc-rgb),.15) 0%, #0c0e14 60%); border-color:rgba(var(--acc-rgb),.5); }
.app-row.acc:hover .app-name, .app-row.acc:focus-visible .app-name,
.app-row.acc:hover .app-arrow, .app-row.acc:focus-visible .app-arrow { color:var(--acc); }

.more { margin-top:48px; display:grid; grid-template-columns:1fr; gap:1px; background:var(--border); border:1px solid var(--border); }
.more-col { background:var(--black); padding:22px 20px; }
.more-title { font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--ice); margin-bottom:14px; }
.more-list { list-style:none; display:flex; flex-direction:column; gap:8px; }
.more-list a { font-size:24px; font-weight:900; text-transform:uppercase; color:var(--white); text-decoration:none; transition:color .2s; }
.more-list a:hover { color:var(--ice); }
.more-list small { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.06em; margin-left:8px; text-transform:none; font-weight:400; }

.philosophy { background:linear-gradient(155deg, var(--navy) 0%, #010d1e 100%); overflow:hidden; position:relative; }
.phil-bg { position:absolute; font-size:140px; font-weight:900; text-transform:uppercase; color:rgba(255,255,255,.03); bottom:-10px; right:-10px; line-height:1; pointer-events:none; letter-spacing:-.02em; white-space:nowrap; }
.phil-quote { font-size:clamp(26px, 6vw, 52px); font-weight:700; line-height:1.1; text-transform:uppercase; letter-spacing:-.005em; margin:20px 0 44px; min-height:130px; }
.tw-cursor { display:inline-block; width:3px; height:.85em; background:var(--ice); margin-left:3px; vertical-align:middle; animation:blink .8s step-end infinite; }
.phil-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(107,191,255,.1); }
.stat { background:rgba(0,0,0,.45); padding:20px 14px; }
.stat-num { font-size:clamp(32px, 8vw, 60px); font-weight:900; letter-spacing:-.03em; color:var(--ice); line-height:1; margin-bottom:6px; }
.stat-label { font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#9FB3C8; line-height:1.4; }

.contact { background:var(--black); border-top:1px solid var(--border); }
.contact h2 span { color:var(--ice); }
.contact-email { font-size:clamp(16px, 4.5vw, 38px); font-weight:700; text-transform:uppercase; color:var(--white); text-decoration:none; display:block; margin:20px 0 16px; letter-spacing:-.01em; transition:color .2s; word-break:break-all; }
.contact-email:hover { color:var(--ice); }
.contact-meta { font-family:var(--mono); font-size:12px; line-height:1.8; color:var(--muted); margin-bottom:28px; }

/* ══════════════ PROJECTEN ══════════════ */
.filter-bar { padding:20px; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--border); position:sticky; top:56px; z-index:100; background:rgba(6,6,8,.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.filter-bar::-webkit-scrollbar { display:none; }
.filter-btn { flex-shrink:0; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:10px 16px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; transition:all .2s; }
.filter-btn:hover { border-color:var(--muted); color:var(--white); }
.filter-btn[aria-pressed="true"] { border-color:var(--ice); color:var(--ice); background:rgba(107,191,255,.06); }

.projects-section { padding:0 20px 80px; }
.group[hidden] { display:none; }
.section-title { font-size:11px; font-family:var(--mono); font-weight:400; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); padding:48px 0 8px; display:flex; align-items:center; gap:12px; line-height:1.4; margin:0; }
.section-title::after { content:''; flex:1; height:1px; background:var(--border); }
.section-sub { font-family:var(--mono); font-size:11px; color:var(--muted); line-height:1.6; margin-bottom:20px; max-width:560px; }

.project-card { border:1px solid var(--border); margin-bottom:1px; transition:border-color .3s; overflow:hidden; scroll-margin-top:140px; }
.project-card:hover { border-color:var(--royal); }
.project-card:target { border-color:var(--ice); }
.card-header { padding:28px 20px 0; display:grid; grid-template-columns:1fr auto; gap:16px; align-items:start; }
.card-num { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.1em; margin-bottom:8px; }
.card-name { font-size:clamp(32px, 8vw, 60px); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; line-height:1; margin-bottom:6px; transition:color .25s; }
.project-card:hover .card-name { color:var(--ice); }
.card-tagline { font-family:var(--mono); font-size:12px; color:#9FB3C8; line-height:1.5; margin-bottom:16px; }
.card-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
.card-body { padding:0 20px 20px; border-top:1px solid var(--border); }
.card-desc { font-family:var(--mono); font-size:12px; line-height:1.85; color:var(--silver); padding-top:20px; margin-bottom:24px; }
.card-desc + .card-desc { padding-top:0; }
.card-footer { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.card-link { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:10px 20px; background:var(--royal); color:var(--white); text-decoration:none; transition:background .2s; display:inline-flex; align-items:center; gap:8px; }
.card-link:hover { background:var(--blue); }
.card-link-ghost { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:10px 20px; border:1px solid var(--border); color:var(--muted); text-decoration:none; transition:border-color .2s, color .2s; display:inline-flex; align-items:center; gap:8px; }
a.card-link-ghost:hover { border-color:var(--ice); color:var(--ice); }

/* per-project accent (projecten) */
.project-card.acc { border-left:3px solid rgba(var(--acc-rgb),.5); }
.project-card.acc .card-name { color:rgba(var(--acc-rgb),.85); }
.project-card.acc:hover .card-name { color:var(--acc); }
.project-card.acc .tag { background:rgba(var(--acc-rgb),.08); color:rgba(var(--acc-rgb),.75); }

/* accent tokens */
.acc-binnenkat { --acc:#3ABFAF; --acc-rgb:58,191,175; }
.acc-streaq    { --acc:#00F0C8; --acc-rgb:0,240,200; }
.acc-mhyrro    { --acc:#4CAF7D; --acc-rgb:76,175,125; }
.acc-kraam     { --acc:#C0714A; --acc-rgb:192,113,74; }

.badge { font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; padding:4px 10px; display:inline-block; white-space:nowrap; }
.badge-live { background:rgba(39,174,96,.12); color:#3DDC84; border:1px solid rgba(39,174,96,.3); }
.badge-soon { background:rgba(107,191,255,.08); color:var(--ice); border:1px solid rgba(107,191,255,.2); }

/* ══════════════ START A PROJECT ══════════════ */
.form-wrap { padding:48px 20px 100px; max-width:680px; }
.form-section { margin-bottom:48px; border:0; }
.form-section-title { font-size:clamp(22px, 5vw, 32px); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; margin-bottom:6px; }
.form-section-hint { font-family:var(--mono); font-size:11px; color:var(--muted); margin-bottom:20px; }
.options { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.opt { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:12px 18px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; transition:all .2s; user-select:none; }
.opt:hover { border-color:var(--muted); color:var(--white); }
.opt[aria-pressed="true"] { border-color:var(--ice); color:var(--ice); background:rgba(107,191,255,.07); }
.field { margin-bottom:20px; }
.field label { font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ice); display:block; margin-bottom:8px; }
.field label small { color:var(--muted); font-size:10px; letter-spacing:.1em; }
.field input, .field textarea { width:100%; background:rgba(255,255,255,.03); border:1px solid var(--border); color:var(--white); font-family:var(--mono); font-size:16px; line-height:1.6; padding:14px 16px; outline:none; transition:border-color .2s; resize:vertical; border-radius:0; }
.field input::placeholder, .field textarea::placeholder { color:var(--muted); }
.field input:focus, .field textarea:focus { border-color:var(--ice); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.submit-row { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:8px; }
.btn-submit { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:16px 36px; background:var(--royal); color:var(--white); border:none; cursor:pointer; transition:background .2s; }
.btn-submit:hover { background:var(--blue); }
.btn-submit[disabled] { opacity:.6; cursor:wait; }
.submit-note { font-family:var(--mono); font-size:10px; color:var(--muted); line-height:1.6; }
.submit-note a { color:var(--silver); }
.form-msg { font-family:var(--mono); font-size:12px; line-height:1.7; padding:16px 18px; margin-bottom:32px; border:1px solid; }
.form-msg[hidden] { display:none; }
.form-msg.ok { color:#3DDC84; border-color:rgba(39,174,96,.35); background:rgba(39,174,96,.08); }
.form-msg.err { color:#FF8A7A; border-color:rgba(255,92,53,.35); background:rgba(255,92,53,.08); }
.form-msg a { color:inherit; }

/* ══════════════ 404 ══════════════ */
.notfound { min-height:80svh; display:flex; flex-direction:column; justify-content:center; padding:120px 20px 80px; }
.notfound h1 { font-size:clamp(80px, 22vw, 220px); font-weight:900; line-height:.85; color:var(--ice); letter-spacing:-.02em; }
.notfound p { font-family:var(--mono); font-size:13px; color:var(--silver); line-height:1.8; margin:20px 0 32px; max-width:420px; }

/* ══════════════ DESKTOP ≥ 768px ══════════════ */
@media (min-width: 768px) {
  html { scroll-padding-top:24px; }
  .site-nav { display:none; }

  /* Sidebar: vast in beeld vanaf tablet */
  :root { --sb-w: var(--sb-collapsed); }
  .sidebar { width:var(--sb-w); transform:none; visibility:visible; transition:width var(--sb-dur) var(--sb-ease), box-shadow var(--sb-dur) var(--sb-ease); }
  .sb-toggle { display:grid; }
  .sb-close { display:none; }

  .page-header { padding:88px 48px 64px; }
  .page-header--lg { padding:104px 48px 80px; }
  .content { padding:72px 48px 120px; }

  .sec { padding:100px 48px; }
  .hero { min-height:100svh; padding:0 48px 80px; }
  .xp-grid { grid-template-columns:repeat(2,1fr); }
  .check-inner { grid-template-columns:1fr 1fr; gap:64px; }
  .svc-list:not(.cols-3) > li:last-child:nth-child(odd) { grid-column:1 / -1; }
  .svc { padding:72px 48px 24px; }
  .svc-list { grid-template-columns:repeat(2,1fr); }
  .svc-cta { margin:24px 48px 120px; padding:56px 48px; }
  .svc-related { padding:0 48px 24px; }
  .hero-slab { width:50%; opacity:1; }
  .hero-fade { width:70%; }
  .about-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
  .about-right { border-left:1px solid rgba(107,191,255,.2); padding-left:56px; }
  .about-body { margin-top:0; }
  .work-top { display:flex; align-items:flex-end; justify-content:space-between; }
  .app-row { grid-template-columns:64px 1fr auto; gap:40px; padding:32px 40px; }
  .app-arrow { font-size:26px; }
  .more { grid-template-columns:repeat(2,1fr); }
  .more-col { padding:28px 32px; }
  .phil-bg { font-size:240px; }
  .phil-quote { min-height:180px; }
  .stat { padding:32px 28px; }
  .contact-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
  .contact-right { padding-top:56px; }

  .filter-bar { padding:24px 48px; top:0; flex-wrap:wrap; }
  .projects-section { padding:0 48px 120px; }
  .card-header { padding:32px 32px 0; }
  .card-body { padding:0 32px 28px; }

  .form-wrap { padding:64px 48px 120px; }
  .notfound { padding:100px 48px 100px; }

  .footer-inner { padding:72px 48px 56px; grid-template-columns:repeat(2,1fr); gap:40px 32px; }
  .flow { grid-template-columns:repeat(2,1fr); }
  .footer-bar { padding:24px 48px; }
}

/* Tablet: ingeklapt; uitklappen legt de sidebar over de content */
@media (min-width: 768px) and (max-width: 1199.98px) {
  html[data-sidebar="expanded"] .sidebar { width:var(--sb-expanded); box-shadow:24px 0 64px -16px rgba(0,0,0,.8); }
}
/* Desktop: sidebar duwt de content */
@media (min-width: 1200px) {
  html[data-sidebar="expanded"] { --sb-w: var(--sb-expanded); }
  .more { grid-template-columns:repeat(4,1fr); }
  .xp-grid { grid-template-columns:repeat(3,1fr); }
  .svc-list.cols-3 { grid-template-columns:repeat(3,1fr); }
  .svc-list.cols-3 > li:last-child:nth-child(odd) { grid-column:auto; }
  .footer-inner { grid-template-columns:1.6fr repeat(4,1fr); }
  .flow { grid-template-columns:repeat(4,1fr); }
}

/* ══════════════ DOCK (mobiele snelnavigatie < 768px) ══════════════ */
@property --dacc { syntax:'<color>'; inherits:true; initial-value:#6BBFFF; }
.sc-dock { display:none; }
@media (max-width: 767.98px) {
  body { padding-bottom:calc(102px + env(safe-area-inset-bottom)); }
  .sc-dock {
    --dacc:#6BBFFF; --bead:46px;
    display:block; position:fixed; z-index:150; left:50%; bottom:calc(12px + env(safe-area-inset-bottom));
    width:min(440px, calc(100vw - 24px)); height:70px; transform:translateX(-50%);
    touch-action:pan-y; user-select:none; -webkit-user-select:none;
    transition:--dacc .42s cubic-bezier(.32,.72,0,1), opacity .25s ease, transform .3s cubic-bezier(.32,.72,0,1);
  }
  html.drawer-open .sc-dock { opacity:0; pointer-events:none; transform:translate(-50%, 16px); }
  .sc-dock::before {                      /* zachte gloed onder de dock in de accentkleur */
    content:''; position:absolute; left:10%; right:10%; top:10px; height:70px; z-index:-1; pointer-events:none;
    background:radial-gradient(ellipse at center, color-mix(in srgb, var(--dacc) 28%, transparent), transparent 70%); filter:blur(14px);
  }
  .dock__skin { position:absolute; left:0; top:-40px; width:100%; height:calc(100% + 40px); overflow:visible; pointer-events:none;
    filter:drop-shadow(0 12px 24px rgba(0,0,0,.6)); }
  .dock__fill { fill:url(#dkPlate); }
  .dock__rim { fill:none; stroke:url(#dkRim); stroke-width:1; vector-effect:non-scaling-stroke; }
  .dock__tabs { position:relative; list-style:none; display:grid; grid-template-columns:repeat(5, 1fr); height:100%; padding:0 var(--pad, 26px); }
  .dock__tabs li { display:flex; }
  .dock__tab { position:relative; flex:1; display:grid; place-items:center; color:var(--muted); text-decoration:none; -webkit-tap-highlight-color:transparent; outline:none; }
  .dock__tab svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
    transition:opacity .22s ease, transform .35s cubic-bezier(.32,.72,0,1); transform:translateY(-8px); }
  .dock__tab .dock__label { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); font-family:var(--mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; color:var(--muted); transition:color .25s ease; }
  .dock__tab:hover .dock__label, .dock__tab:hover svg { color:var(--silver); }
  .dock__tab.is-hot svg { opacity:0; transform:translateY(-20px) scale(.6); }
  .dock__tab.is-hot .dock__label { color:var(--dacc); }
  .dock__tab.is-hot .dock__label::after { content:''; position:absolute; left:50%; bottom:-6px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--dacc); box-shadow:0 0 6px var(--dacc); }
  .sc-dock.is-flat .dock__tab .dock__label::after { display:none; }
  .dock__tab:focus-visible::after { content:''; position:absolute; inset:8px 4px; border:1px solid var(--ice); border-radius:12px; }
  .dock__bead {
    position:absolute; left:0; top:0; width:var(--bead); height:var(--bead); border-radius:50%; z-index:2;
    display:grid; place-items:center; cursor:grab; touch-action:none; color:#061018; will-change:transform;
    background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--dacc) 55%, white) 0%, var(--dacc) 45%, color-mix(in srgb, var(--dacc) 70%, black) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -6px 12px color-mix(in srgb, var(--dacc) 60%, black),
      0 10px 24px -6px color-mix(in srgb, var(--dacc) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--dacc) 40%, black);
  }
  .dock__bead svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s cubic-bezier(.32,.72,0,1); }
  .dock__bead.is-drag svg { transform:scale(.9); }
  .sc-dock.is-flat .dock__bead { opacity:0; pointer-events:none; }
  .sc-dock.is-flat::before { opacity:.4; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js .reveal { opacity:1; transform:none; }
  html[data-sidebar="collapsed"] .sb-fade { transform:none; }
  .sb-tooltip, .sb-tooltip.is-visible { transform:translate(var(--x,0),var(--y,0)) translateY(-50%); }
  .sc-dock, .dock__tab svg, .dock__label, .dock__bead svg { transition-duration:1ms !important; transition-delay:0ms !important; }
  .sb-item:active, .sb-toggle:hover, .sb-toggle:active, .sb-brand:hover .sb-mark { transform:none; }
}