/* In Zaken: lettertypes (zelf gehost, geen Google-verzoeken) */
@font-face{font-family:'Archivo';font-weight:700;font-style:normal;src:url(/assets/fonts/archivo-latin-700-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Archivo';font-weight:800;font-style:normal;src:url(/assets/fonts/archivo-latin-800-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Archivo';font-weight:900;font-style:normal;src:url(/assets/fonts/archivo-latin-900-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Manrope';font-weight:400;font-style:normal;src:url(/assets/fonts/manrope-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Manrope';font-weight:500;font-style:normal;src:url(/assets/fonts/manrope-latin-500-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Manrope';font-weight:600;font-style:normal;src:url(/assets/fonts/manrope-latin-600-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Manrope';font-weight:700;font-style:normal;src:url(/assets/fonts/manrope-latin-700-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Manrope';font-weight:800;font-style:normal;src:url(/assets/fonts/manrope-latin-800-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-style:normal;src:url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-style:normal;src:url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'JetBrains Mono';font-weight:700;font-style:normal;src:url(/assets/fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2');font-display:swap}

/* Design tokens (In Zaken design system) */
/* InZaken Design System — generated from tokens.json */
:root, [data-theme="default"] {
  --cyan-50: #e6f7ff;
  --cyan-100: #c2ebff;
  --cyan-200: #8fdaff;
  --cyan-300: #57c7ff;
  --cyan-400: #1fb6ff;
  --cyan-500: #00b2ff;
  --cyan-600: #0090d6;
  --cyan-700: #0072ab;
  --cyan-800: #00547e;
  --cyan-900: #003b59;
  --ink-900: #0a0b0d;
  --ink-800: #16181c;
  --ink-700: #23272e;
  --ink-600: #3a3f47;
  --black: #000000;
  --neutral-0: #ffffff;
  --neutral-50: #f7f9fb;
  --neutral-100: #eff2f6;
  --neutral-200: #e2e7ed;
  --neutral-300: #cbd2db;
  --neutral-400: #9aa3af;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #2e343d;
  --sky-100: #e1eeff;
  --sky-500: #2d7ff9;
  --sky-600: #1a5fd0;
  --mint-100: #daf6ec;
  --mint-500: #10b981;
  --mint-600: #0e8e69;
  --sun-100: #fff3d6;
  --sun-500: #ffc53d;
  --sun-600: #c98a00;
  --berry-100: #fce2e2;
  --berry-500: #f0454b;
  --berry-600: #c5363b;
  --coral-50: var(--cyan-50);
  --coral-100: var(--cyan-100);
  --coral-200: var(--cyan-200);
  --coral-300: var(--cyan-300);
  --coral-400: var(--cyan-400);
  --coral-500: var(--cyan-500);
  --coral-600: var(--cyan-600);
  --coral-700: var(--cyan-700);
  --coral-800: var(--cyan-800);
  --brand: var(--cyan-500);
  --brand-hover: var(--cyan-400);
  --brand-press: var(--cyan-600);
  --brand-subtle: var(--cyan-50);
  --brand-on: var(--ink-900);
  --bg-page: var(--neutral-50);
  --bg-page-alt: var(--neutral-100);
  --bg-inverse: var(--ink-900);
  --surface-card: var(--neutral-0);
  --surface-raised: var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--neutral-500);
  --text-inverse: #ffffff;
  --text-on-brand: var(--ink-900);
  --text-link: var(--cyan-700);
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--ink-800);
  --focus-ring: #00b2ff8c;
  --positive: var(--mint-500);
  --positive-subtle: var(--mint-100);
  --warning: var(--sun-500);
  --warning-subtle: var(--sun-100);
  --danger: var(--berry-500);
  --danger-subtle: var(--berry-100);
  --info: var(--cyan-500);
  --info-subtle: var(--cyan-50);
  --shadow-xs: 0 1px 2px rgba(10, 13, 20, 0.06);
  --shadow-sm: 0 2px 6px rgba(10, 13, 20, 0.08);
  --shadow-md: 0 8px 20px rgba(10, 13, 20, 0.10);
  --shadow-lg: 0 18px 40px rgba(10, 13, 20, 0.12);
  --shadow-brand: 0 12px 28px rgba(0, 178, 255, 0.34);
  --shadow-focus: 0 0 0 3px #00b2ff8c;
}
:root {
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-12: 7.5rem;
  --container-max: 1200px;
  --header-h: 80px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fs-display-2xl: clamp(3rem, 6vw + 1rem, 5.5rem);
  --fs-display-xl: clamp(2.5rem, 4vw + 1rem, 4rem);
  --fs-display-lg: clamp(2rem, 3vw + 0.75rem, 3rem);
  --fs-h1: 2.5rem;
  --fs-h2: 2rem;
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-lg: 1.125rem;
  --fs-md: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;
  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-caps: 0.08em;
  --font-display: "Archivo", "Manrope", system-ui, sans-serif;
  --font-text: "Manrope", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --text-h1: 800 40px/1.05 var(--font-display); /* From `h1, h2, h3, h4` · `h1` in tokens/base.css. */
  --text-h2: 800 32px/1.2 var(--font-display); /* From `h1, h2, h3, h4` · `h2` in tokens/base.css. */
  --text-h3: 800 24px/1.2 var(--font-display); /* From `h1, h2, h3, h4` · `h3` in tokens/base.css. */
  --text-h4: 800 20px/1.2 var(--font-display); /* From `h1, h2, h3, h4` · `h4` in tokens/base.css. */
}
.body {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.h1 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.h3 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.h4 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Basisstijlen (In Zaken design system) */

/* ── styles.css ── */
/* ==========================================================================
   InZaken Design System — global entry point.
   Consumers link THIS file. It is a manifest of @imports only.
   ========================================================================== */
/* ── tokens/fonts.css ── */
/* ==========================================================================
   InZaken — Webfonts
   SUBSTITUTION NOTICE: the brand's original font binaries are hotlink-protected
   on the source site and could not be self-hosted. These are the closest
   Google Fonts matches, CDN-linked. Replace with real @font-face + binaries
   when the files are available.
   ========================================================================== */


/* ── styles.css ── */

/* ── tokens/colors.css ── */
/* ==========================================================================
   InZaken — Color tokens
   Brand sampled from the official logo: bright cyan #00B2FF + pure black, on
   clean cool-neutral surfaces. Cyan is the identity pop; black carries weight.
   ========================================================================== */
:root {
}

/* ── styles.css ── */

/* ── tokens/typography.css ── */
/* ==========================================================================
   InZaken — Typography tokens
   Display: Archivo (squarish heavy grotesque — echoes the INZAKEN wordmark).
            SUBSTITUTE for the brand's display face; closest Google Fonts match.
   Text/UI: Manrope — clean, friendly geometric sans for body & interface.
   Mono:    JetBrains Mono — figures in dashboard/financial contexts.
   Webfonts are CDN-linked in fonts.css (binaries are hotlink-blocked on source).
   ========================================================================== */
:root {   /* @kind other */
}

/* Convenience text roles ---------------------------------------------------- */
.iz-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.iz-eyebrow {
  font-family: var(--font-text);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand);
}

/* ── styles.css ── */

/* ── tokens/spacing.css ── */
/* ==========================================================================
   InZaken — Spacing, radii, shadows, motion, layout
   ========================================================================== */
:root {
  --container-pad: clamp(1.25rem, 4vw, 4rem);
}

/* ── styles.css ── */

/* ── tokens/base.css ── */
/* ==========================================================================
   InZaken — light base/reset applied where the system is consumed.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--text-strong);
  margin: 0 0 0.5em;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--coral-200); color: var(--ink-900); }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── styles.css ── */


/* ── tokens/fonts.css ── */

/* ── tokens/colors.css ── */

/* ── tokens/typography.css ── */

/* ── tokens/spacing.css ── */

/* ── tokens/base.css ── */


/* Knoppen */
.iz-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:800;text-decoration:none !important;white-space:nowrap;transition:transform 120ms,filter 200ms}
.iz-btn:hover{filter:brightness(1.08)}
.iz-btn:active{transform:scale(.96)}
.iz-sm{height:40px;padding:0 18px;font-size:14px}
.iz-md{height:46px;padding:0 22px;font-size:15px}
.iz-lg{height:54px;padding:0 28px;font-size:16px}
.iz-primary{background:#00B2FF;color:#0A0B0D !important;box-shadow:0 12px 28px rgba(0,178,255,.34)}
.iz-secondary{background:#0A0B0D;color:#FFFFFF !important}
button.iz-btn{border:0;cursor:pointer;font:inherit;font-weight:800}
button.iz-btn[disabled]{opacity:.6;cursor:wait}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
[id]{scroll-margin-top:110px}
img{max-width:100%}
.iz-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#00B2FF;color:#0A0B0D;padding:10px 16px;border-radius:999px;font-weight:800}
.iz-skip:focus{left:8px}

/* Fotogrids uit het ontwerp: kantoren (Ons verhaal) en sfeerbeelden (Werken bij) */
.iz-places{grid-template-columns:repeat(6,minmax(0,1fr))}
.iz-places>*{grid-column:span 2}
.iz-places>*:nth-child(-n+2){grid-column:span 3}
@media (max-width: 900px){.iz-places{grid-template-columns:minmax(0,1fr)}.iz-places>*,.iz-places>*:nth-child(-n+2){grid-column:auto}}
.iz-photos{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-rows:280px 280px}
.iz-photos .iz-big{grid-row:span 2}
@media (max-width: 800px){.iz-photos{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:260px}.iz-photos .iz-big{grid-row:auto}}

/* Korte knoptekst op smalle schermen (Werken bij) */
.iz-short{display:none}
@media (max-width: 480px){.iz-long{display:none}.iz-short{display:inline}}

/* Mobiel menu (hamburger) */
.iz-burger{display:none}
@media (max-width: 1100px){.iz-burger{display:block}}
.iz-burger>summary{list-style:none;width:44px;height:44px;border-radius:999px;background:#23272E;display:flex;align-items:center;justify-content:center;cursor:pointer}
.iz-burger>summary::-webkit-details-marker{display:none}
.iz-burger .iz-bars,.iz-burger .iz-bars::before,.iz-burger .iz-bars::after{display:block;width:18px;height:2px;border-radius:2px;background:#FFFFFF;transition:transform .2s ease,background .2s ease}
.iz-burger .iz-bars{position:relative}
.iz-burger .iz-bars::before,.iz-burger .iz-bars::after{content:"";position:absolute;left:0}
.iz-burger .iz-bars::before{top:-6px}
.iz-burger .iz-bars::after{top:6px}
.iz-burger[open] .iz-bars{background:transparent}
.iz-burger[open] .iz-bars::before{transform:translateY(6px) rotate(45deg)}
.iz-burger[open] .iz-bars::after{transform:translateY(-6px) rotate(-45deg)}
.iz-menu{position:absolute;left:clamp(12px, 2vw, 24px);right:clamp(12px, 2vw, 24px);top:calc(100% - 4px);background:#16181C;border:1px solid #23272E;border-radius:28px;padding:12px;display:flex;flex-direction:column;gap:2px;box-shadow:0 30px 60px rgba(0,0,0,0.5)}
.iz-menu a{padding:14px 18px;border-radius:16px;color:#FFFFFF;font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-0.01em;text-decoration:none}
.iz-menu a:hover{background:#23272E}
.iz-menu a[aria-current]{color:var(--brand)}
.iz-menu .iz-menu-cta{margin-top:8px;background:var(--brand);color:var(--ink-900);text-align:center;border-radius:999px}
.iz-menu .iz-menu-cta:hover{background:var(--brand)}
@media (max-width: 420px){.iz-hide-xs{display:none !important}}

/* Inloggen: knop in het menu en de inlogpagina */
.iz-navlinks a{white-space:nowrap}
.iz-logins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width: 960px){.iz-logins{grid-template-columns:minmax(0,1fr)}}
.iz-ghost{background:transparent;color:#0A0B0D !important;border:2px solid #0A0B0D}
.iz-login{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;color:#C9CFD8 !important;font-weight:700;font-size:14px;text-decoration:none !important;white-space:nowrap}
.iz-login:hover{background:#23272E;color:#FFFFFF !important}
.iz-login[aria-current]{color:var(--brand) !important}
@media (max-width: 1100px){.iz-login{display:none !important}}
.iz-menu .iz-menu-login{display:flex;align-items:center;gap:10px;margin-top:6px;color:#C9CFD8;font-family:var(--font-text);font-weight:700;font-size:17px;letter-spacing:0}
.iz-menu .iz-menu-login[aria-current]{color:var(--brand)}