/* ============================================================================
   E4 PARTNERS - STYLESHEET (redesign "Grootmeester")
   Eén bestand voor de hele site. Donker en cinematisch: inkt-navy + crème-wit,
   staalnavy als accent. Schaken als knipoog (badge met lijnpion, zetnotatie).

   VASTE KEUZES - overal hetzelfde:
     --radius   16px   alle blokken, foto's, kaarten en invoervelden
     --pill     999px  knoppen, tags, chips, tabs
     --section-y       verticale ruimte per sectie (112px / 72px mobiel)
     --maxw            maximale inhoudsbreedte 1240px, gecentreerd via --pad-x
     Secties zijn altijd volle breedte (donker of licht), nooit zelf afgerond.

   LETTERTYPE: Inter Tight voor koppen (--disp), Inter voor tekst (--font).
   Beide gratis via Google Fonts, geen licentie nodig.
   Kopstijl: medium (500), zinsbouw, strak gespatieerd.
   ========================================================================== */

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

:root {
  /* kleur */
  --bg: #0B1628;          /* inkt-navy: hero, donkere secties, footer */
  --bg-2: #111F38;        /* iets lichter navy: contact/CTA */
  --fg: #FAF6EE;          /* crème-wit: tekst op donker */
  --muted: #8E97A8;       /* secundaire tekst op donker */
  --light: #FAF6EE;       /* lichte secties */
  --white: #FFFFFF;       /* kaarten op licht, logobanner */
  --on-light: #0B1628;    /* tekst op licht */
  --text-dark: #4F586B;   /* secundaire tekst op licht */
  --accent: #2E4B78;      /* staalnavy */
  --on-accent: #FAF6EE;
  --accent-ink: #2E4B78;  /* accent als tekst op licht */
  --accent-glow: #A3B6D6; /* accent als tekst op donker */
  --line: color-mix(in srgb, var(--fg) 14%, transparent);
  --line-light: color-mix(in srgb, var(--on-light) 12%, transparent);

  /* vorm en ritme */
  --radius: 16px; --pill: 999px;
  --gut: 2.5rem; --maxw: 1240px;
  --pad-x: max(var(--gut), calc((100% - var(--maxw)) / 2));
  --section-y: 112px;

  /* type */
  --font: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --disp: 'Inter Tight', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --disp-w: 500; --disp-ls: -0.045em; --disp-lh: 1; --disp-scale: 0.84;
  --glyph: 'Noto Sans Symbols 2', sans-serif;
}

html, body { width: 100%; overflow-x: hidden; }
body { font-family: var(--font); background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ============ TYPOGRAFIE ============ */
h1, h2, h3, .disp { font-family: var(--disp); font-weight: var(--disp-w); letter-spacing: var(--disp-ls); line-height: var(--disp-lh); word-spacing: 0.02em; }
h1 { font-size: calc(clamp(52px, min(9vw, 15vh), 150px) * var(--disp-scale)); }
h2 { font-size: calc(clamp(40px, 5.2vw, 76px) * var(--disp-scale)); margin-bottom: 20px; }
h3 { font-size: calc(30px * var(--disp-scale)); line-height: 1.05; }
.g-hl { color: var(--accent-glow); }

/* Eyebrow-label boven elke kop (nieuw: .g-eyebrow, bestaande pagina's: .section-label e.a.) */
.g-eyebrow, .section-label, .hero-label, .cta-label, .about-label {
  font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-glow); margin-bottom: 16px;
}
.g-intro { font-size: 16px; line-height: 1.7; max-width: 580px; }
.g-head { margin-bottom: 48px; }

/* ============ SECTIEFRAME ============ */
.g-sec, .services, .matrix-section, .detail-body, .related-services, .team, .about,
.contact-section, .cases-section, .legal-content, .cta {
  padding: var(--section-y) var(--pad-x);
}
/* licht */
.g-light, .services, .detail-body, .related-services, .team, .contact-section, .cases-section, .legal-content {
  background: var(--light); color: var(--on-light);
}
.g-light .g-eyebrow, .services .section-label, .related-services .section-label, .team .section-label,
.cases-section .section-label { color: var(--accent-ink); }
.g-light .g-intro { color: var(--text-dark); }
.g-light + .g-light, .detail-body + .related-services, .section-photo + .related-services { border-top: 1px solid var(--line-light); }
/* donker */
.g-dark, .matrix-section, .about { background: var(--bg); color: var(--fg); }
.g-dark .g-intro { color: color-mix(in srgb, var(--fg) 72%, transparent); }

/* ============ NAV ============ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 68px; padding: 0 var(--pad-x);
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}
nav.scrolled { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom-color: var(--line); }
.nav-logo { display: flex; align-items: center; font-family: var(--disp); font-weight: 500;
            font-size: 35px; letter-spacing: -0.04em; line-height: 1; color: var(--fg); }
.nav-links { display: flex; gap: 28px; }
.nav-links a { position: relative; font-size: 13px; font-weight: 500; color: var(--fg); }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 1.5px; width: 0; background: currentColor; transition: width 0.25s ease; }
.nav-links a:hover::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.lang-btn { font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; padding: 4px 2px; cursor: pointer; background: none; color: var(--fg); border: none; }
.lang-btn .active { font-weight: 700; }
.lang-btn .inactive { opacity: 0.45; transition: opacity 0.2s; }
.lang-btn:hover .inactive { opacity: 0.7; }
.lang-btn .lang-sep { opacity: 0.4; margin: 0 5px; font-weight: 400; }
.hamburger { display: none; flex-direction: column; gap: 4px; cursor: pointer; background: none; border: none; padding: 6px; }
.hamburger span { width: 22px; height: 2px; background: var(--fg); }
.mobile-menu { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-family: var(--disp); font-weight: var(--disp-w); letter-spacing: var(--disp-ls); font-size: 36px; color: var(--fg); }
.mobile-close { position: absolute; top: 22px; right: 26px; font-size: 32px; color: var(--fg); background: none; border: none; cursor: pointer; line-height: 1; }

/* ============ KNOPPEN, TAGS, CHIPS: altijd pill ============ */
.g-btn, .nav-cta, .btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font); font-size: 14px; font-weight: 700; padding: 14px 26px;
  border-radius: var(--pill); border: 1.5px solid transparent; cursor: pointer;
  transition: transform 0.18s, background 0.2s, color 0.2s, border-color 0.2s;
}
.nav-cta { font-size: 13px; padding: 9px 20px; }
.g-btn:hover, .nav-cta:hover, .btn-primary:hover, .btn-secondary:hover { transform: translateY(-2px); }
.g-btn-main, .nav-cta, .btn-primary {
  background: var(--accent); color: var(--on-accent);
  border-color: color-mix(in srgb, var(--accent-glow) 45%, transparent);
}
.g-btn-main:hover, .nav-cta:hover, .btn-primary:hover { background: color-mix(in srgb, var(--accent) 80%, white); }
.g-btn-line, .btn-secondary { background: transparent; color: var(--fg); border-color: color-mix(in srgb, var(--fg) 45%, transparent); }
.g-btn-line:hover, .btn-secondary:hover { background: var(--fg); color: var(--bg); }
.g-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--accent); color: var(--on-accent); padding: 6px 12px; border-radius: var(--pill); margin-bottom: 14px; }

/* ============ HERO (homepage .g-hero en subpagina's .hero) ============ */
.g-hero, .hero { position: relative; display: flex; align-items: flex-end; overflow: hidden; background: var(--bg); color: var(--fg); }
.g-hero { min-height: 88vh; padding: 96px var(--pad-x) 72px; }
.hero { min-height: 68vh; padding: 150px var(--pad-x) 72px; }
.g-hero-bg, .hero-bg {
  position: absolute; inset: 0;
  background: url("../img/hero.jpg?v=4") center 35% / cover, var(--bg); background-blend-mode: luminosity;
  filter: contrast(1.1); transform: scale(1.06); animation: g-zoom 14s ease-out forwards;
}
.g-hero-bg::after, .hero-overlay {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 40%, transparent) 0%, color-mix(in srgb, var(--bg) 62%, transparent) 45%, var(--bg) 100%);
}
@keyframes g-zoom { to { transform: scale(1); } }
.g-hero-inner, .hero-content { position: relative; z-index: 2; width: 100%; }
/* Homepagekop: hoofdletters, altijd twee regels (<br/> na "zet"). De langste regel
   ("IN RECRUITMENT" / "THE RIGHT MOVE") is ~8x de lettergrootte breed; 10.8vw past zo in
   elke inhoudsbreedte. 17vh houdt de kop binnen beeld op lage schermen. */
.g-hero h1 { max-width: none; font-size: min(10.8vw, 17vh, 140px); margin-bottom: 28px; text-transform: uppercase; letter-spacing: -0.035em; }
.hero h1 { max-width: 16ch; margin-bottom: 24px; }
.g-hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 28px; }
.g-sub, .hero-sub { max-width: 620px; font-size: 16px; line-height: 1.7; color: color-mix(in srgb, var(--fg) 82%, transparent); }
.g-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============ LOGOBANNER (marquee) ============ */
.logos { background: var(--white); padding: 28px 0 32px; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); overflow: hidden; }
.logos-label { text-align: center; padding: 0 var(--pad-x); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dark); margin-bottom: 22px; }
.marquee-viewport { overflow: hidden; }
.marquee { display: flex; width: max-content; animation: e4marquee 34s linear infinite; }
.logos:hover .marquee { animation-play-state: paused; }
/* Logo's genormaliseerd op beeldoppervlak, niet op hoogte: een breed wordmark
   en een vierkant logo wegen daardoor optisch even zwaar. Hoogte per logo
   afgeleid van de verhouding, begrensd op 62px zodat niets uit het kader loopt. */
.marquee-item { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 180px; height: 68px; padding: 0 20px; }
.marquee-logo { max-width: 100%; width: auto; object-fit: contain; display: block; filter: grayscale(1); opacity: 0.82; transition: filter 0.25s ease, opacity 0.25s ease; }
.marquee-logo:hover { filter: none; opacity: 1; }

.marquee-logo[src*="advidi"]        { height: 32px; }
.marquee-logo[src*="feadship"]      { height: 37px; }
.marquee-logo[src*="follo"]         { height: 37px; }
.marquee-logo[src*="xebia"]         { height: 39px; }
.marquee-logo[src*="sherpa"]        { height: 42px; }
.marquee-logo[src*="edsn"]          { height: 44px; }
.marquee-logo[src*="adapta"]        { height: 44px; }
.marquee-logo[src*="infi"]          { height: 48px; }
.marquee-logo[src*="bits-of-stock"] { height: 49px; }
.marquee-logo[src*="dawn"]          { height: 62px; }
.marquee-logo[src*="illionx"]       { height: 55px; }
.marquee-logo[src*="i3d-net"]       { height: 62px; }
.marquee-logo[src*="bris"]          { height: 62px; }
.marquee-logo[src*="aihr"]          { height: 62px; }
@keyframes e4marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ DIENSTEN-ACCORDION (homepage) ============ */
.g-services { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
.g-services-media { position: sticky; top: 100px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--bg); }
/* De partners staan in de onderste helft van de bronfoto, met een halve gevel
   erboven. Inzoomen vanaf een laag punt snijdt die gevel weg en zet ze midden
   in het kader. object-position volstond niet: de foto is maar 117px hoger dan
   het kader, dus verschuiven alleen levert te weinig op. */
.g-services-media img { width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.5); transform-origin: 50% 95%; }
.acc-list { border-top: 1px solid var(--line-light); }
.acc-item { border-bottom: 1px solid var(--line-light); }
.acc-row { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 18px; padding: 22px 0; text-align: left; font-family: inherit; }
.g-acc-num { font-size: 12px; font-weight: 700; color: var(--accent-ink); width: 26px; }
.acc-name { font-family: var(--disp); font-weight: var(--disp-w); letter-spacing: var(--disp-ls); font-size: calc(clamp(26px, 3.2vw, 46px) * var(--disp-scale)); line-height: 1; color: var(--on-light); opacity: 0.35; transition: opacity 0.25s; flex: 1; }
.acc-item.open .acc-name, .acc-row:hover .acc-name { opacity: 1; }
.g-acc-plus { width: 20px; height: 20px; position: relative; flex-shrink: 0; }
.g-acc-plus::before, .g-acc-plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--on-light); transition: transform 0.25s; }
.g-acc-plus::after { transform: rotate(90deg); }
.acc-item.open .g-acc-plus::after { transform: rotate(0); }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }
.acc-item.open .acc-panel { max-height: 600px; padding: 0 0 28px 44px; }
.g-acc-body { display: grid; grid-template-columns: minmax(0, 720px); gap: 32px; }
.acc-panel p { font-size: 15px; line-height: 1.7; color: var(--text-dark); margin: 0 0 14px; }
.g-when { font-weight: 700; color: var(--on-light) !important; }
.acc-panel .more { display: inline-block; font-size: 14px; font-weight: 700; color: var(--on-light); border-bottom: 2px solid var(--accent); padding-bottom: 2px; transition: transform 0.2s; }
.acc-panel .more:hover { transform: translateX(3px); }
.g-acc-body ul { list-style: none; }
.g-acc-body li { font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--line-light); }
.g-acc-body li::before { content: "\265F"; font-family: var(--glyph); margin-right: 10px; font-size: 12px; color: var(--accent-ink); }

/* ============ BLOKKEN: één stijl ============ */
.g-block { border-radius: var(--radius); padding: 32px; }

/* ============ VERGELIJKING (homepage) ============ */
/* Compacte statement-sectie: kop verticaal gecentreerd in een lagere band */
.g-compare { min-height: 340px; display: flex; align-items: center; justify-content: center;
             padding-top: 56px; padding-bottom: 56px; text-align: center; }
.g-compare .g-head { margin-bottom: 0; max-width: 1040px; }
/* Statement loopt over 3 regels: iets breder blok, kop een maat kleiner dan de
   standaard h2 - anders valt hij bij ruime vensters terug naar 4 regels. */
.g-compare h2 { font-size: calc(clamp(34px, 4.9vw, 68px) * var(--disp-scale)); }
.g-compare .g-head > *:last-child { margin-bottom: 0; }
.g-compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: center; }
.g-compare h3 { margin-bottom: 14px; }
.g-compare ul { list-style: none; }
.g-compare li { font-size: 16px; padding: 15px 0; border-top: 1px solid var(--line); }
.g-them { border: 1px solid var(--line); color: var(--muted); }
.g-them li { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.g-us { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-glow) 45%, transparent); }
.g-us li { border-top-color: color-mix(in srgb, var(--on-accent) 18%, transparent); font-weight: 600; }
.g-vs { font-family: var(--disp); font-weight: var(--disp-w); letter-spacing: var(--disp-ls); font-size: 56px; color: transparent; -webkit-text-stroke: 1.5px var(--muted); }

/* ============ WERKWIJZE (homepage) ============ */
.g-steps ol { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.g-steps .g-block { background: var(--white); border: 1px solid var(--line-light); }
.g-move { font-family: var(--disp); font-weight: var(--disp-w); letter-spacing: var(--disp-ls); font-size: calc(56px * var(--disp-scale)); line-height: 1; display: block; margin-bottom: 20px; color: var(--accent-ink); }
.g-steps h3 { margin-bottom: 10px; }
.g-steps p { font-size: 14.5px; line-height: 1.7; color: var(--text-dark); }

/* ============ TEAM (homepage) ============ */
.g-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.g-person { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; color: var(--fg); }
.g-person img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.g-person:hover img { transform: scale(1.04); }
.g-person::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--bg) 88%, transparent)); }
.g-person-meta { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 22px; display: flex; flex-direction: column; }
.g-person-name { font-family: var(--disp); font-weight: var(--disp-w); letter-spacing: var(--disp-ls); font-size: calc(38px * var(--disp-scale)); line-height: 1; }
.g-person-role { font-size: 13px; opacity: 0.75; margin: 6px 0 12px; }
.g-person-li, .team-link { font-size: 12px; font-weight: 700; align-self: flex-start; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: var(--pill); padding: 6px 12px; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.g-person:hover .g-person-li, .team-card:hover .team-link { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ============ QUOTE (homepage) ============ */
.g-quote { position: relative; text-align: center; overflow: hidden; }
.g-quote p { position: relative; font-family: var(--disp); font-weight: var(--disp-w); letter-spacing: var(--disp-ls); font-size: calc(clamp(32px, 4.4vw, 66px) * var(--disp-scale)); line-height: 1.05; max-width: 1000px; margin: 0 auto 24px; }
.g-quote cite { position: relative; font-style: normal; font-size: 13px; color: var(--muted); }
.g-quote-piece { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-family: var(--glyph); font-size: 520px; line-height: 1; color: color-mix(in srgb, var(--accent-glow) 7%, transparent); }

/* ============ CONTACT-BLOK (homepage .g-cta en bestaande .cta) ============ */
.g-cta, .cta { background: var(--bg-2); color: var(--fg); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.g-cta, .cta:has(.cta-form) { align-items: start; }
.cta { align-items: center; }
.g-cta .g-head { margin-bottom: 28px; }
.cta h2 { margin-bottom: 0; }
.cta-body { font-size: 16px; line-height: 1.7; color: color-mix(in srgb, var(--fg) 72%, transparent); margin-bottom: 24px; }
.cta-direct { display: flex; gap: 22px; flex-wrap: wrap; }
.cta-direct a { color: var(--fg); font-weight: 700; border-bottom: 2px solid var(--accent-glow); padding-bottom: 2px; }

/* ============ FORMULIEREN ============ */
.cta-form, .contact-form { display: flex; flex-direction: column; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 12px; font-weight: 600; color: var(--text-dark); }
.form-field input, .form-field textarea {
  font-family: var(--font); font-size: 15px; color: var(--on-light);
  background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius); padding: 13px 16px;
  transition: border-color 0.2s ease;
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--accent); }
.cta-form .form-field label { color: color-mix(in srgb, var(--fg) 72%, transparent); }
.cta-form .form-field input, .cta-form .form-field textarea { background: color-mix(in srgb, var(--fg) 7%, transparent); border-color: color-mix(in srgb, var(--fg) 20%, transparent); color: var(--fg); }
.cta-form .form-field textarea { min-height: 96px; }
.cta-form .form-field input:focus, .cta-form .form-field textarea:focus { border-color: var(--accent-glow); }
.cta-form button, .contact-form button { align-self: flex-start; }
.form-success { font-family: var(--disp); font-weight: var(--disp-w); letter-spacing: -0.02em; font-size: 22px; line-height: 1.4; }
.form-success::before { content: "\2713\00a0\00a0"; }
.cta .form-success, .g-cta .form-success { color: var(--fg); }
.contact-section .form-success { color: var(--on-light); }

/* ============ DIENSTENOVERZICHT + "OVERIGE DIENSTEN" ============ */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.service-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px color-mix(in srgb, var(--on-light) 10%, transparent); }
.related-grid .service-card { padding: 32px; justify-content: space-between; }
.service-photo { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg); }
.service-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.service-card:hover .service-photo img { transform: scale(1.04); }
/* Interim: het bord ligt diagonaal met tafel in de hoeken. Iets inzoomen haalt
   die tafel weg. De hoverwaarde schaalt mee, anders springt de foto terug. */
.service-photo img[src*="dienst-2"] { transform: scale(1.18); }
.service-card:hover .service-photo img[src*="dienst-2"] { transform: scale(1.23); }
.service-body { display: flex; flex-direction: column; flex-grow: 1; padding: 28px 28px 30px; }
.service-card h3 { color: var(--on-light); margin-bottom: 12px; }
.service-card p { font-size: 15px; line-height: 1.7; color: var(--text-dark); margin-bottom: 22px; flex-grow: 1; }
.service-card a { align-self: flex-start; font-size: 14px; font-weight: 700; color: var(--on-light); border-bottom: 2px solid var(--accent); padding-bottom: 2px; transition: transform 0.2s; }
.service-card:hover a { transform: translateX(3px); }

/* ============ DIENSTENMATRIX ============ */
.mx-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.mx-tab { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: var(--pill); padding: 11px 20px; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s; }
.mx-tab:hover { border-color: color-mix(in srgb, var(--fg) 45%, transparent); }
.mx-tab.on { background: var(--accent); color: var(--on-accent); border-color: color-mix(in srgb, var(--accent-glow) 45%, transparent); }
.mx-body { display: grid; grid-template-columns: 360px 1fr; gap: 64px; align-items: start; }
.mx-panel { display: none; }
.mx-panel.on { display: block; }
.mx-desc { font-size: 16px; line-height: 1.7; color: color-mix(in srgb, var(--fg) 82%, transparent); margin-bottom: 24px; }
.mx-idlbl { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-glow); margin-bottom: 12px; }
/* Lijst volgt de lijnentaal van de site: haarlijnen tussen de rijen en een kort
   accentstreepje als markering, in plaats van het schaakstukje. */
.mx-bullets { list-style: none; }
.mx-bullets li { display: grid; grid-template-columns: 16px 1fr; gap: 16px; align-items: start;
                 font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--fg) 80%, transparent);
                 padding: 15px 0; border-top: 1px solid var(--line); }
.mx-bullets li:first-child { border-top: 0; padding-top: 0; }
.mx-bullets li::before { content: ""; width: 16px; height: 2px; border-radius: 2px;
                         background: var(--accent-glow); margin-top: 11px; }
.mx-bullets li:first-child::before { margin-top: 11px; }
.mx-right { border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; }
.mx-axis { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.mx-row { margin-bottom: 22px; }
.mx-row:last-child { margin-bottom: 0; }
.mx-row-name { font-size: 14px; color: color-mix(in srgb, var(--fg) 82%, transparent); margin-bottom: 10px; }
.mx-track { position: relative; height: 2px; background: var(--line); border-radius: 2px; }
.mx-marker { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-glow); transform: translate(-50%,-50%); box-shadow: 0 0 0 5px var(--bg); transition: left 0.45s cubic-bezier(0.2,0.7,0.2,1); }

/* ============ DIENST-DETAILPAGINA ============ */
.detail-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: start; }
.detail-text p { font-size: 17px; line-height: 1.8; color: var(--text-dark); margin-bottom: 20px; }
.detail-text p:first-child { font-size: 20px; line-height: 1.6; color: var(--on-light); }
.detail-text p:last-child { margin-bottom: 0; }
.info-card { background: var(--bg); color: var(--fg); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; gap: 22px; }
.info-row h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-glow); margin-bottom: 6px; }
.info-row p { font-size: 17px; font-weight: 500; line-height: 1.45; }
.info-row + .info-row { border-top: 1px solid var(--line); padding-top: 20px; }
.info-card a { border-bottom: 1px solid var(--line); transition: border-color 0.2s; }
.info-card a:hover { border-color: var(--accent-glow); }
.section-photo { background: var(--light); padding: 0 var(--pad-x) var(--section-y); }
.section-photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: center 40%; border-radius: var(--radius); }
/* Per dienst een eigen uitsnede: een lager percentage toont meer van de
   bovenkant van de foto, een hoger percentage meer van de onderkant. */
.section-photo img[src*="dienst-1"] { object-position: center 25%; }  /* RPO: lucht boven de hoofden */
.section-photo img[src*="dienst-3"] { object-position: center 62%; }  /* W&S: onderkant van de kist in beeld */
.section-photo img[src*="dienst-2"] { object-position: center 58%; }  /* Interim: meer bord, minder tafel */

/* ============ OVER ONS ============ */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.team-card { display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius); transition: transform 0.22s, box-shadow 0.22s; }
.team-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px color-mix(in srgb, var(--on-light) 10%, transparent); }
.team-photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 0.5s; }
.team-card:hover .team-photo img { transform: scale(1.03); }
.team-body { display: flex; flex-direction: column; gap: 4px; padding: 24px; color: var(--on-light); }
.team-name { font-family: var(--disp); font-weight: var(--disp-w); letter-spacing: var(--disp-ls); font-size: calc(38px * var(--disp-scale)); line-height: 1; }
.team-role { font-size: 13px; color: var(--text-dark); margin: 4px 0 14px; }

/* Eén leeskolom met de foto eronder, zo breed als de tekst. Twee kolommen
   naast elkaar werkten niet meer toen dit verhaal zes alinea's lang werd. */
.about { display: grid; grid-template-columns: minmax(0, 780px); justify-content: center; gap: 44px; align-items: start; }
.about-body { font-size: 16px; line-height: 1.8; color: color-mix(in srgb, var(--fg) 78%, transparent); }
.about-body p + p { margin-top: 1.1em; }
.about-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.stats { display: flex; flex-direction: column; gap: 16px; }
.stat { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; }
.stat-num { font-family: var(--disp); font-weight: var(--disp-w); letter-spacing: var(--disp-ls); font-size: calc(72px * var(--disp-scale)); line-height: 1; color: var(--accent-glow); margin-bottom: 8px; }
.stat-label { font-size: 14px; color: var(--muted); }

/* ============ CONTACT ============ */
.contact-section { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; }

/* ============ CASES ============ */
.cases-section { display: flex; flex-direction: column; gap: 14px; }
.cases-section .section-label { margin-bottom: 0; }
.cases-section h2 { margin-bottom: 18px; }

.case-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Twee kolommen: links logo + bron, rechts het citaat */
.case-card, .case-card.big { position: relative; overflow: hidden; background: var(--bg);
  color: var(--fg); border-radius: var(--radius); display: grid;
  grid-template-columns: 148px 1fr; gap: 28px; align-items: start; padding: 2.2rem 2.4rem; }
.case-card.big { grid-template-columns: 200px 1fr; gap: 56px; padding: 3rem 3.2rem; }

.case-left { display: flex; flex-direction: column; }
.case-logo { display: flex; align-items: center; justify-content: flex-start;
  width: auto; height: 42px; margin: 0 0 18px; overflow: hidden; }
.case-card.big .case-logo { height: 60px; margin-bottom: 24px; }
/* Follo is een breed woordmerk: op 60px hoog beslaat het bijna drie keer zoveel
   vlak als i3D.net op dezelfde kaart. Apart genormaliseerd op gelijk oppervlak. */
.case-card.big .case-logo:has(img[src*="follo"]) { height: 36px; }
.case-card.big .case-logo:has(img[src*="illionx"]) { height: 52px; }

.case-logo img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain;
  object-position: left center; filter: grayscale(1) brightness(0) invert(1); opacity: .9; }

.case-attr { font-family: var(--font); font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; }
.case-attr b { display: block; font-weight: 600; color: var(--fg); font-size: 13px;
  letter-spacing: -0.015em; margin-bottom: 3px; }
.case-card.big .case-attr { font-size: 14px; }
.case-card.big .case-attr b { font-size: 16px; }

/* Negatieve marge compenseert regelafstand + letterhoogte, zodat de eerste regel
   van het citaat optisch gelijk ligt met de bovenkant van het logo. */
.case-quotewrap { border: 0; padding: 0; margin: 0; }
.case-quote { font-family: var(--disp); font-weight: 500; letter-spacing: -0.03em;
  font-size: 18px; line-height: 1.5; color: var(--fg); margin: -9px 0 0; }
.case-card.big .case-quote { font-size: 28px; line-height: 1.38; letter-spacing: -0.035em;
  margin-top: -13px; }

/* Gespiegelde kaart: logo en bron rechts, citaat links. De DOM-volgorde blijft
   gelijk aan de andere kaarten; alleen de kolommen wisselen. Zo krijgt de reeks
   van vier ritme zonder dat de voorleesvolgorde verandert. */
.case-card.mirror { grid-template-columns: 1fr 200px; }
.case-card.mirror .case-quotewrap { grid-column: 1; grid-row: 1; }
.case-card.mirror .case-left { grid-column: 2; grid-row: 1; align-items: flex-end; }
.case-card.mirror .case-logo { justify-content: flex-end; }
.case-card.mirror .case-logo img { object-position: right center; }
.case-card.mirror .case-attr { text-align: right; }

@media (max-width: 900px) {
  .case-card, .case-card.big, .case-card.mirror { grid-template-columns: 1fr; gap: 22px; padding: 1.9rem 1.7rem; }
  .case-card.mirror .case-quotewrap, .case-card.mirror .case-left { grid-column: 1; grid-row: auto; }
  .case-card.mirror .case-left { align-items: flex-start; }
  .case-card.mirror .case-logo { justify-content: flex-start; }
  .case-card.mirror .case-logo img { object-position: left center; }
  .case-card.mirror .case-attr { text-align: left; }
  .case-card.big .case-quote { font-size: 21px; margin-top: 0; }
  .case-quote { font-size: 17px; margin-top: 0; }
  .case-card.big .case-logo { height: 46px; }
}
@media (max-width: 560px) { .case-pair { grid-template-columns: 1fr; } }

/* ============ JURIDISCHE PAGINA'S ============ */
.legal-content > * { max-width: 760px; }
.legal-content h2 { font-size: calc(40px * var(--disp-scale)); margin: 44px 0 12px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { font-size: 16px; line-height: 1.8; color: var(--text-dark); margin-bottom: 14px; }
.notice-banner { background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 40px; font-size: 14px; line-height: 1.6; color: var(--text-dark); }

/* ============ FOOTER ============ */
footer { background: var(--bg); color: var(--fg); border-top: 1px solid var(--line); padding: 56px var(--pad-x) 0; }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.4fr; gap: 24px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.footer-brand-logo { margin-bottom: 12px; font-family: var(--disp); font-weight: 500;
                     font-size: 27px; letter-spacing: -0.04em; line-height: 1; color: var(--fg); }
.footer-tagline { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 220px; }
.footer-col h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg); margin-bottom: 14px; }
.footer-col a, .footer-col span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; transition: color 0.2s; }
.footer-col a:hover { color: var(--accent-glow); }
.footer-bottom { display: flex; justify-content: space-between; padding: 16px 0; }
.footer-bottom span, .footer-bottom a { font-size: 12px; color: color-mix(in srgb, var(--muted) 75%, transparent); transition: color 0.2s; }
.footer-bottom a:hover { color: var(--muted); }
.footer-bottom-right { display: flex; gap: 16px; }

/* ============ SCROLL-REVEAL ============ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .g-services, .g-cta, .cta, .detail-body, .about, .contact-section { grid-template-columns: 1fr; gap: 40px; }
  /* Geen liggend kader op mobiel: de partners staan rechtop naast elkaar en
     vielen in 16:9 half buiten beeld. Alleen het meescrollen gaat eruit. */
  .g-services-media { position: relative; top: 0; }
  .g-steps ol { grid-template-columns: 1fr 1fr; }
  .services-grid, .team-grid, .g-team-grid { grid-template-columns: repeat(2, 1fr); }
  .mx-body { grid-template-columns: 1fr; gap: 32px; }
  .case-card.big { grid-template-columns: 1fr; gap: 20px; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  :root { --gut: 1rem; --section-y: 72px; }
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .nav-logo { font-size: 29px; }
  .g-hero { padding-top: 132px; padding-bottom: 72px; }
  /* Op mobiel is de hero smal en hoog, waardoor de foto alleen horizontaal
     wordt bijgesneden. Iets naar rechts houdt de hand met de pion in beeld;
     op het midden zie je vooral lege velden. Op desktop doet de horizontale
     waarde niets, want daar valt de foto precies op de breedte. */
  .g-hero-bg, .hero-bg { background-position: 55% 35%; }
  .hero { min-height: 0; padding-top: 130px; padding-bottom: 56px; }
  .g-buttons .g-btn { width: 100%; }
  .g-head { margin-bottom: 32px; }
  .g-acc-body { grid-template-columns: 1fr; gap: 16px; }
  .acc-item.open .acc-panel { padding-left: 0; }
  .g-block, .info-card, .case-card, .mx-right, .related-grid .service-card { padding: 24px; }
  .g-compare { min-height: 240px; padding-top: 44px; padding-bottom: 44px; }
  .g-compare-grid { grid-template-columns: 1fr; gap: 20px; }
  .g-vs { text-align: center; font-size: 40px; }
  .g-steps ol, .g-team-grid, .services-grid, .related-grid, .team-grid, .case-pair { grid-template-columns: 1fr; }
  .g-quote-piece { font-size: 300px; }
  .section-photo img { aspect-ratio: 16 / 9; }
  footer { padding-top: 40px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee, .g-hero-bg, .hero-bg { animation: none !important; }
}