/* ==========================================================================
   Mitar IT Solutions — huisstijl
   Strak, hoekig en modern: uitsluitend Inter, een licht palet (wit +
   lichtgrijs) met bijna-zwarte tekst, aangevuld met twee accenten:
   roest (#a64d27, warme highlight) en een diep blauw (#274b73, koele kleur).
   Géén afgeronde hoeken.
   ========================================================================== */

:root {
    --c-bg: #ffffff;
    --c-bg-soft: #f4f5f7;         /* lichtgrijs (afwisselende vlakken) */
    --c-surface: #ffffff;
    --c-ink: #1a1c1f;             /* bijna-zwart: koppen, tekst */
    --c-muted: #626870;           /* secundaire tekst */
    --c-border: #e5e7ea;
    --c-border-strong: #d2d6db;
    --c-roest: #a64d27;           /* warm accent */
    --c-roest-dark: #883e1e;
    --c-roest-soft: rgba(166, 77, 39, 0.10);
    --c-blue: #274b73;            /* koel accent */
    --c-blue-dark: #1c3a5a;
    --c-shadow: 0 12px 34px rgba(26, 28, 31, 0.08);
    --c-shadow-lg: 0 20px 50px rgba(26, 28, 31, 0.12);
    --c-radius: 0px;              /* hoekig */
    --c-radius-sm: 0px;
    --c-maxw: 1600px;
    /* Zij-afstand tot de schermrand: groeit mee als het scherm smaller wordt dan de
       container, zodat de content niet tegen de rand plakt. */
    --c-gutter: clamp(24px, 5vw, 72px);
    --c-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font-family: var(--c-font);
    color: var(--c-ink);
    background: var(--c-bg);
    line-height: 1.65;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Voorkomt een horizontale scrollbalk door de rechts-uitbrekende carrousel. */
    overflow-x: clip;
}

#main { flex: 1 0 auto; padding-top: 80px; }
body.page-home #main { padding-top: 0; }

h1, h2, h3, h4 {
    font-family: var(--c-font);
    line-height: 1.12;
    color: var(--c-ink);
    font-weight: 700;
    margin: 0 0 .5em;
    letter-spacing: -0.022em;
}
h1 { font-size: clamp(2.3rem, 1.6rem + 3.2vw, 4rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.7rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1rem; }

a { color: var(--c-blue); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--c-blue-dark); text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }
strong { color: var(--c-ink); }

.container { width: 100%; max-width: var(--c-maxw); margin: 0 auto; padding: 0 var(--c-gutter); }
.container--narrow { max-width: 760px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 12px; background: var(--c-roest); color: #fff; padding: .5rem .8rem; z-index: 200; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* -------- Sections (afwisselend wit / lichtgrijs) -------- */
.section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--soft { background: var(--c-bg-soft); }
.section--primary { background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-blue-dark) 100%); color: #fff; }
.section--primary h1, .section--primary h2, .section--primary h3 { color: #fff; }

.eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-roest);
    margin-bottom: 1rem;
}
.section--primary .eyebrow { color: rgba(255, 255, 255, .75); }

.lead { font-size: 1.16rem; color: var(--c-muted); max-width: 62ch; }
.section--primary .lead { color: rgba(255, 255, 255, .85); }

.section__head { max-width: 64ch; margin-bottom: clamp(2.5rem, 4vw, 3.25rem); }
.section__head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Klein roest accent-streepje. */
.rule { display: block; width: 48px; height: 3px; background: var(--c-roest); border: 0; margin: 0 0 1.6rem; }
.center .rule { margin-left: auto; margin-right: auto; }
.section--primary .rule { background: rgba(255,255,255,.8); }

/* -------- Buttons -------- */
.btn {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .9rem 1.8rem;
    border-radius: 0;
    font-weight: 600; font-size: .98rem;
    cursor: pointer; border: 1.5px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--c-roest); color: #fff; border-color: var(--c-roest); }
.btn--primary:hover { background: var(--c-roest-dark); border-color: var(--c-roest-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-border-strong); }
.btn--ghost:hover { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.btn--light { background: #fff; color: var(--c-blue); border-color: #fff; }
.btn--light:hover { background: transparent; color: #fff; border-color: #fff; }
.section--primary .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.section--primary .btn--ghost:hover { background: #fff; color: var(--c-blue); border-color: #fff; }

/* -------- Header / nav (vast, transparant over de hero, wit bij scrollen) -------- */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: transparent;
    transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
    border-bottom: 1px solid transparent;
}
.site-header[data-solid="true"] {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom-color: var(--c-border);
}
.site-header__inner {
    /* Breedte/marge/padding komen van .container, zodat logo + menu exact
       gelijklopen met de content op alle pagina's. */
    display: flex; align-items: center; justify-content: space-between;
    height: 80px;
}
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--c-ink); }
.brand:hover { text-decoration: none; color: var(--c-ink); }
.brand__logo { height: 36px; width: auto; }
.brand__mark { display: inline-flex; width: 36px; height: 36px; color: var(--c-roest); flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-weight: 700; letter-spacing: -.01em; font-size: 1.2rem; color: var(--c-ink); }
.brand__tag { font-size: .72rem; color: var(--c-muted); font-weight: 500; }

/* Opdrachtgever-logostrip onderin de hero: elk logo als strak zwart silhouet. */
.hero__clients {
    position: relative; z-index: 2;
    padding-top: clamp(1.2rem, 3vh, 2.5rem);
    padding-bottom: clamp(1.4rem, 3vw, 2.4rem);
}
/* Subtiel kopje boven de logo's (bijv. "Onze partners"). */
.client-strip__title {
    margin: 0 0 3em;
    font-size: .72rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--c-muted); opacity: .8;
    text-align: center;
}
.client-strip__list {
    --strip-gap: clamp(1.5rem, 3vw, 2.6rem);
    list-style: none; margin: 0; padding: 0;
    /* Verdeeld over de volle breedte (niet gecentreerd); maximaal 5 naast elkaar. */
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: var(--strip-gap);
}
.client-strip__list li {
    /* Elke plek even breed, zodat een omwisselend logo de andere niet verschuift. */
    flex: 1 1 0; min-width: 0;
    display: flex; justify-content: center; align-items: center;
    overflow: hidden; /* knipt het in-/uitschuivende logo netjes af binnen de cel */
}
.client-strip__logo {
    max-height: 44px; width: auto; max-width: 100%; display: block;
    /* Vol zwart silhouet ongeacht de originele kleuren (transparante PNG/SVG). */
    filter: brightness(0);
    transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .45s ease;
}
/* Omwisselen als schuif: oude logo schuift omhoog weg, nieuwe schuift van onderaf in. */
.client-strip__logo.is-out { transform: translateY(-120%); opacity: 0; }
.client-strip__logo.is-in { transform: translateY(120%); opacity: 0; transition: none; }

/* -------- Partnerschap (bijv. Microsoft Partner) -------- */
/* Vertrouwensregel onder 'Over ons': badge + korte toelichting, hoekig met blauw accent. */
.partner {
    display: flex; align-items: center; gap: 1.4rem;
    margin-top: 2rem; padding: 1.15rem 1.4rem;
    background: var(--c-bg-soft);
    border-left: 3px solid var(--c-blue);
}
.partner__badge { flex: 0 0 auto; height: 60px; width: auto; max-width: 220px; display: block; }
.partner__body { min-width: 0; }
.partner__body p { margin: 0; color: var(--c-muted); font-size: .98rem; line-height: 1.5; }
.partner__link {
    display: inline-block; margin-top: .4rem;
    font-weight: 600; color: var(--c-roest); text-decoration: none;
}
.partner__link:hover { text-decoration: underline; }
@media (max-width: 560px) {
    .partner { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* Compacte badge in de footer, naast de bedrijfsgegevens. */
.footer__partner { margin-top: 1.5rem; }
.footer__partner-badge { height: 46px; width: auto; max-width: 200px; display: block; }

.nav { display: flex; align-items: center; gap: 1.25rem; }
.nav__list { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav__link { color: var(--c-ink); font-weight: 500; font-size: .96rem; }
.nav__link:hover, .nav__link[aria-current="true"] { color: var(--c-roest); text-decoration: none; }

.nav__tel { display: inline-flex; align-items: center; gap: .45rem; color: var(--c-ink); font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap; transition: color .15s ease; }
.nav__tel:hover, .nav__tel:focus { color: var(--c-roest); }
.nav__tel svg { width: 16px; height: 16px; color: var(--c-roest); }

@media (min-width: 961px) {
    .nav { align-items: stretch; }
    .nav__list { align-items: stretch; }
    .nav__list li { display: flex; }
    .nav__link { position: relative; display: flex; align-items: center; height: 80px; padding: 0 1.05rem; }
    .nav__link::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background-color: transparent; transition: background-color .15s ease; }
    .nav__link:hover::after, .nav__link[aria-current="true"]::after { background-color: var(--c-roest); }
}
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { display: block; width: 24px; height: 2px; background: var(--c-ink); margin: 5px 0; transition: .2s; }

/* -------- Hero (licht, full-screen) -------- */
.hero {
    position: relative; overflow: hidden;
    min-height: 86vh;
    /* Kolom: content vult de ruimte en centreert; de logostrip zit eronder in de flow,
       zodat ze elkaar nooit overlappen — ook niet bij een lage viewport. */
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--c-bg-soft) 0%, var(--c-bg) 70%);
    color: var(--c-ink);
}
/* De content-container vult de resterende hoogte en centreert de hero-tekst verticaal.
   flex-shrink 0: bij een lage viewport groeit de hero mee (scroll) i.p.v. de content in te
   klemmen, zodat de knoppen nooit tegen de logostrip aan komen.
   De top-padding is altijd groter dan de vaste header (80px), zodat de herotekst er ook
   op een laag scherm nooit achter verdwijnt. */
.hero > .container {
    flex: 1 0 auto;
    display: flex; flex-direction: column; justify-content: center;
    /* Symmetrische padding = echt verticaal gecentreerd (niet naar beneden gezakt); de
       top-waarde is groter dan de vaste header (80px) zodat de tekst er niet achter komt. */
    padding-top: clamp(96px, 11vh, 130px); padding-bottom: clamp(96px, 11vh, 130px);
}
/* Subtiel grijs puntenraster dat vanaf het midden naar de rechterrand steeds
   zichtbaarder wordt (fade-in via een horizontaal masker). Puur decoratief. */
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    /* Gimmick: de ROODE byte per rij is de letter; van boven naar beneden = MITAR (ASCII). */
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27544%27%20height%3D%27170%27%20viewBox%3D%270%200%20544%20170%27%20font-family%3D%27ui-monospace%2CSFMono-Regular%2CMenlo%2CConsolas%2Cmonospace%27%20font-size%3D%2715%27%20font-weight%3D%27500%27%3E%3Cg%20fill%3D%27%231a1c1f%27%20fill-opacity%3D%270.16%27%3E%3Ctext%20x%3D%27280%27%20y%3D%2722%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27314%27%20y%3D%2722%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27348%27%20y%3D%2722%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27382%27%20y%3D%2722%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27416%27%20y%3D%2722%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27450%27%20y%3D%2722%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27484%27%20y%3D%2722%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27518%27%20y%3D%2722%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27280%27%20y%3D%2756%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27314%27%20y%3D%2756%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27348%27%20y%3D%2756%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27382%27%20y%3D%2756%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27416%27%20y%3D%2756%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27450%27%20y%3D%2756%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27484%27%20y%3D%2756%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27518%27%20y%3D%2756%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27280%27%20y%3D%2790%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27314%27%20y%3D%2790%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27348%27%20y%3D%2790%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27382%27%20y%3D%2790%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27416%27%20y%3D%2790%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27450%27%20y%3D%2790%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27484%27%20y%3D%2790%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27518%27%20y%3D%2790%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27280%27%20y%3D%27124%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27314%27%20y%3D%27124%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27348%27%20y%3D%27124%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27382%27%20y%3D%27124%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27416%27%20y%3D%27124%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27450%27%20y%3D%27124%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27484%27%20y%3D%27124%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27518%27%20y%3D%27124%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27280%27%20y%3D%27158%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27314%27%20y%3D%27158%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27348%27%20y%3D%27158%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27382%27%20y%3D%27158%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27416%27%20y%3D%27158%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27450%27%20y%3D%27158%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27484%27%20y%3D%27158%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27518%27%20y%3D%27158%27%3E0%3C%2Ftext%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23a64d27%27%20fill-opacity%3D%270.45%27%3E%3Ctext%20x%3D%278%27%20y%3D%2722%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2742%27%20y%3D%2722%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2776%27%20y%3D%2722%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27110%27%20y%3D%2722%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27144%27%20y%3D%2722%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27178%27%20y%3D%2722%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27212%27%20y%3D%2722%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27246%27%20y%3D%2722%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%278%27%20y%3D%2756%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2742%27%20y%3D%2756%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2776%27%20y%3D%2756%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27110%27%20y%3D%2756%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27144%27%20y%3D%2756%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27178%27%20y%3D%2756%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27212%27%20y%3D%2756%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27246%27%20y%3D%2756%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%278%27%20y%3D%2790%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2742%27%20y%3D%2790%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2776%27%20y%3D%2790%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27110%27%20y%3D%2790%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27144%27%20y%3D%2790%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27178%27%20y%3D%2790%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27212%27%20y%3D%2790%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27246%27%20y%3D%2790%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%278%27%20y%3D%27124%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2742%27%20y%3D%27124%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2776%27%20y%3D%27124%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27110%27%20y%3D%27124%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27144%27%20y%3D%27124%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27178%27%20y%3D%27124%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27212%27%20y%3D%27124%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27246%27%20y%3D%27124%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%278%27%20y%3D%27158%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2742%27%20y%3D%27158%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2776%27%20y%3D%27158%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27110%27%20y%3D%27158%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27144%27%20y%3D%27158%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27178%27%20y%3D%27158%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27212%27%20y%3D%27158%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27246%27%20y%3D%27158%27%3E0%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: 544px 170px;
    /* Spotlight: raster het duidelijkst rechtsboven, dovend uit naar linksonder. */
    -webkit-mask-image: radial-gradient(130% 130% at 100% 0%, #000 9%, transparent 77%);
    mask-image: radial-gradient(130% 130% at 100% 0%, #000 9%, transparent 77%);
}
.hero--image { background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Bij een achtergrondafbeelding geen puntenraster (voorkomt drukte over de foto). */
.hero--image::after { display: none; }

/* Interactieve bits-laag met "geest in de fles"-effect: bij hover wervelen de 8 bits
   samen naar het midden en verdwijnen, het ASCII-karakter komt tevoorschijn; bij
   weghalen komen de bits er weer uit. JS bouwt de vlakjes op (data-codebits). */
.codebits { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero--image .codebits { display: none; }
.hero--codebits::after { display: none; } /* JS-laag neemt het patroon over van de CSS-achtergrond */

.cb-byte { position: absolute; pointer-events: auto; }
.cb-byte__bits { position: absolute; inset: 0; opacity: var(--vis, 1); color: rgba(26, 28, 31, .16); }
.cb-byte--accent .cb-byte__bits { color: rgba(166, 77, 39, .45); }
.cb-bit {
    position: absolute; top: 0; width: 34px; height: 34px;
    display: grid; place-items: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 500; font-size: 15px;
    transition: transform 1.1s cubic-bezier(.55, .06, .2, 1), opacity .9s ease;
}
/* In de fles: langzaam samenkomen naar het midden, draaien, verschrompelen en verdwijnen. */
.cb-byte:hover .cb-bit { transform: translate(var(--tx, 0), -9px) rotate(300deg) scale(.1); opacity: 0; }
.cb-byte__char {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700; font-size: 20px; color: var(--c-roest);
    opacity: 0; transform: scale(.9);
    /* Verdwijnen mag rustig aan: eerst even blijven staan, dan langzaam wegfaden. */
    transition: opacity .5s ease .45s, transform .5s ease .45s;
    pointer-events: none;
}
/* Letter meteen in beeld, terwijl de bits nog langzaam de fles in wervelen. */
.cb-byte:hover .cb-byte__char { opacity: .5; transform: scale(1); transition: opacity .12s ease, transform .12s ease; }

/* Beloning: spel je MITAR opeenvolgend uit met de muis, dan pulseren juist die vijf
   aangeraakte letters even (en verdwijnen daarna weer). */
@keyframes cb-complete-pulse {
    0% { opacity: 0; transform: scale(.9); }
    25% { opacity: .95; transform: scale(1.28); }
    55% { opacity: .95; transform: scale(1); }
    100% { opacity: 0; transform: scale(.9); }
}
.cb-byte.is-celebrate .cb-byte__bits { opacity: 0; transition: opacity .2s ease; }
.cb-byte.is-celebrate .cb-byte__char { animation: cb-complete-pulse 1.1s ease both; }
@media (hover: none) { .codebits { display: none; } }
@media (prefers-reduced-motion: reduce) { .cb-bit, .cb-byte__char { transition-duration: .001ms; } }
.hero .container { width: 100%; }
.hero__inner { position: relative; z-index: 2; max-width: 860px; }
.hero h1 { color: var(--c-ink); margin-bottom: .35em; }
.hero p { color: var(--c-muted); font-size: 1.24rem; max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.3rem; }

/* -------- Grid / kaarten -------- */
.grid { display: grid; gap: 1.5rem; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 0;
    padding: 2rem 1.9rem;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--c-roest); box-shadow: var(--c-shadow); }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--c-muted); margin-bottom: 0; }
.card__icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--c-roest); margin-bottom: 1.1rem; }
.card__icon svg { width: 28px; height: 28px; }
.card__icon img { width: 30px; height: 30px; }

/* Portfolio-tegel: kleur óf afbeelding vult de hele kaart; titel + tekst bovenaan.
   Tekstkleur schakelt automatisch (is-dark-text / is-light-text, gezet door de view). */
.tile {
    position: relative;
    display: flex; flex-direction: column;
    min-height: 580px;
    padding: 1.9rem;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    border: 1px solid var(--c-border);
    color: inherit; text-decoration: none;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--c-shadow); text-decoration: none; }
.tile.is-light-text { color: #fff; }
.tile.is-dark-text { color: #16181b; }
.tile__body { position: relative; z-index: 1; }
.tile__title { color: inherit; margin: 0 0 .55rem; font-size: 1.4rem; line-height: 1.15; }
.tile__text { color: inherit; opacity: .92; margin: 0; font-size: 1rem; line-height: 1.5; max-width: 32ch; }
.tile__more { position: relative; z-index: 1; margin-top: auto; padding-top: 1.5rem; color: inherit; display: inline-flex; }
.tile__more svg { width: 24px; height: 24px; transition: transform .15s ease; }
.tile:hover .tile__more svg { transform: translateX(5px); }
/* Alleen bij een achtergrondafbeelding een subtiele scrim bovenaan, in de richting van de
   tekstkleur, zodat de tekst leesbaar blijft ongeacht wat er in het beeld staat. */
.tile--image::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tile--image.is-light-text::before { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,0) 72%); }
.tile--image.is-dark-text::before { background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.28) 42%, rgba(255,255,255,0) 72%); }

/* Labels (nog gebruikt op de detailpagina). */

/* Portfolio-carrousel: horizontale track die rechts uitbreekt tot de schermrand,
   met de vorige/volgende-pijlen in een rij eronder. */
.carousel { position: relative; }
.carousel__track {
    display: flex; gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none; scrollbar-width: none;
    /* Breekt rechts uit de container tot tegen de rechter schermrand. */
    margin-right: calc(50% - 50vw);
    padding-bottom: 2px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > .tile { flex: 0 0 clamp(280px, 42vw, 440px); scroll-snap-align: start; }

.carousel__nav { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.6rem; }
.carousel[data-scrollable="false"] .carousel__nav { display: none; }
.carousel__arrow {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    background: #fff; color: var(--c-ink);
    border: 1px solid var(--c-border-strong); border-radius: 0;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.carousel__arrow:hover { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.carousel__arrow svg { width: 22px; height: 22px; }
.carousel__arrow[disabled] { opacity: .35; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .carousel__track { scroll-behavior: auto; } }

/* Tekst + beeld ernaast */
.intro-split { align-items: center; }
.intro-media img { width: 100%; border-radius: 0; border: 1px solid var(--c-border); }

/* -------- Content / prose -------- */
.prose { max-width: 70ch; color: var(--c-ink); }
.prose p { color: var(--c-muted); }
.prose h2 { margin-top: 2.2rem; scroll-margin-top: 100px; }
.prose h3 { margin-top: 1.7rem; scroll-margin-top: 100px; }
/* Een losse ankerlink in de tekst (bv. "English below") rechts uitlijnen als tekstlink. */
.prose p:has(> a[href^="#"]:only-child) { text-align: right; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: .4rem; color: var(--c-muted); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
/* Callout (bv. de "kern" van een privacyverklaring): accentrand + licht vlak. */
.prose blockquote {
    margin: 1.6rem 0; padding: 1.1rem 1.35rem;
    border-left: 4px solid var(--c-roest); background: var(--c-bg-soft);
}
.prose blockquote p { color: var(--c-ink); margin: 0; }
.prose blockquote p + p { margin-top: .6rem; }

/* -------- Itemdetail (portfolio/dienst) -------- */
/* Rustige, witte header over de volle container (alleen intro; beeld staat eronder). */
.item-hero { background: var(--c-bg); padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1rem, 2vw, 1.5rem); }
.item-hero__title {
    max-width: 20ch; margin: 0 0 .35em;
    font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem);
    font-weight: 800; line-height: 1.06; letter-spacing: -.03em;
}
.item-hero .lead { max-width: 62ch; }

/* Verhaal met beeld ernaast: tekst (leesbaar, ~70ch) + beeld in een zijkolom die meescrollt. */
.item-body__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.item-body__grid--single { grid-template-columns: minmax(0, 100%); }
.item-body__media { position: sticky; top: 104px; }
.item-body__img {
    width: 100%; object-fit: cover;
    border: 1px solid var(--c-border); box-shadow: var(--c-shadow);
}
.prose--lg { font-size: 1.1rem; }
.prose--lg > p:first-of-type { font-size: 1.24rem; line-height: 1.55; color: var(--c-ink); }
.item-body__text .item-hero__link {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.8rem;
    color: var(--c-roest); font-weight: 700; text-decoration: none;
    border-bottom: 2px solid currentColor; padding-bottom: 3px;
    transition: color .15s ease;
}
.item-body__text .item-hero__link:hover { color: var(--c-roest-dark); text-decoration: none; }
.item-body__text .item-hero__link svg { width: 17px; height: 17px; }

/* Afsluitende oproep (lichte band). */
.item-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
.item-cta__text { max-width: 60ch; }
.item-cta__text h2 { margin-bottom: .4rem; }
.item-cta__text .lead { margin: 0; }
.item-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Subtiele entree: intro stijgt zachtjes op, gestaffeld. */
@keyframes item-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.item-hero__text > * { animation: item-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.item-hero__text > *:nth-child(2) { animation-delay: .06s; }
.item-hero__text > *:nth-child(3) { animation-delay: .12s; }
.item-hero__text > *:nth-child(4) { animation-delay: .18s; }
.item-hero__text > *:nth-child(5) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .item-hero__text > * { animation: none; } }

@media (max-width: 860px) {
    .item-body__grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .item-body__media { position: static; order: -1; } /* beeld boven de tekst op smal scherm */
}
@media (max-width: 700px) {
    .item-cta__inner { flex-direction: column; align-items: flex-start; }
}

/* -------- Contact -------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2.5rem, 5vw, 3.5rem); align-items: start; }
.contact-form-wrap { background: transparent; border: 0; border-radius: 0; padding: 0; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-weight: 600; margin-bottom: .4rem; font-size: .92rem; color: var(--c-ink); }
.field input, .field textarea {
    width: 100%; padding: .85rem 1rem;
    border: 0; border-radius: 0;
    font: inherit; background: #fff; color: var(--c-ink);
}
.field input:focus, .field textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--c-roest); }
.field textarea { resize: vertical; min-height: 7rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.validation-summary-errors { color: #b3261e; font-size: .9rem; }
.alert { padding: 1rem 1.25rem; border-radius: 0; margin-bottom: 1.5rem; border-left: 4px solid; }
.alert--success { background: #eef7f1; color: #0a6b3b; border-color: #0a6b3b; }
.alert--error { background: #fbeceb; color: #b3261e; border-color: #b3261e; }
.alert ul { margin: 0; padding-left: 1.1rem; }

.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem; }
.info-list li { display: flex; gap: .9rem; align-items: flex-start; }
.info-list .ic { color: var(--c-roest); flex: none; margin-top: 3px; }
.info-list .ic svg { width: 20px; height: 20px; display: block; }
.info-list a { color: var(--c-ink); font-weight: 600; }
.info-list a:hover { color: var(--c-roest); }
.info-list .info-address { white-space: pre-line; }

/* -------- Footer (lichtgrijs) -------- */
.site-footer {
    background: #fff;
    color: var(--c-ink);
    padding: clamp(3.5rem, 6vw, 4.5rem) 0 2rem;
    font-size: .95rem;
    border-top: 0;
}
.site-footer a { color: var(--c-muted); }
.site-footer a:hover { color: var(--c-roest); text-decoration: none; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
.footer__tagline { margin-top: 1rem; max-width: 34ch; color: var(--c-muted); }
.footer__social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: 1.25rem; color: var(--c-ink); border: 1px solid var(--c-border-strong); }
.footer__social:hover { color: #fff; background: var(--c-roest); border-color: var(--c-roest); }
.footer__social svg { width: 18px; height: 18px; }
.site-footer h4 { color: var(--c-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 1.1rem; font-weight: 700; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer__list .footer__address { white-space: pre-line; color: var(--c-muted); }
.footer__bottom {
    margin-top: 3rem; padding-top: 1.5rem;
    border-top: 1px solid var(--c-border);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.5rem;
    font-size: .85rem; color: var(--c-muted);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.footer__legal a { color: var(--c-muted); }

/* -------- Breadcrumb -------- */
.breadcrumb { padding: 1.3rem 0; font-size: .88rem; color: var(--c-muted); border-bottom: 1px solid var(--c-border); }
.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-roest); }
.breadcrumb span { margin: 0 .45rem; opacity: .6; }

/* -------- Responsive -------- */
@media (max-width: 900px) {
    .grid--4 { grid-template-columns: 1fr 1fr; }
    .grid--3 { grid-template-columns: 1fr 1fr; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
    /* Mobiel exact als CFRS: een solide (frosted) witte, sticky header in de flow. De
       header-achtergrond loopt over de volle breedte, dus het openklappende menu is één
       strak wit paneel dat de content omlaag duwt. Geen transparantie-trucs. */
    .site-header {
        position: sticky;
        background: rgba(255, 255, 255, .92);
        backdrop-filter: saturate(160%) blur(10px);
        border-bottom: 1px solid var(--c-border);
    }
    #main { padding-top: 0; }
    .hero > .container { padding-top: clamp(2rem, 6vh, 3.5rem); }

    /* Header-rij groeit mee: logo links + hamburger rechts (76px); het menu wikkelt naar een
       volledige tweede rij en animeert open via hoogte. */
    .site-header__inner { height: auto; min-height: 76px; flex-wrap: wrap; }
    .brand { min-height: 76px; }
    .nav__toggle { display: block; height: 76px; }
    .nav {
        order: 3; flex-basis: 100%; width: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        max-height: 0; overflow: hidden; transition: max-height .3s ease;
    }
    .nav[data-open="true"] { max-height: 520px; }
    .nav__list { flex-direction: column; gap: 0; }
    .nav__list li + li { border-top: 1px solid var(--c-border); }
    .nav__link { display: block; padding: .85rem .65rem; font-size: 1rem; }
    .nav__tel { display: flex; padding: .85rem .65rem; font-size: 1rem; border-top: 1px solid var(--c-border); width: 100%; }
}
@media (max-width: 640px) {
    .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr; }
    .form__row { grid-template-columns: 1fr; }
    .hero { min-height: 82vh; }
}