/* ==========================================================================
   Lee AI — site-stylesheet · richting "Consultancy grid" (Optie B, 01-09-2026)
   Gebaseerd op design.md; Go-beeldtaal en contrastregels: zie design.md §13
   ========================================================================== */
:root{
  --lee-blue:#0054AD;
  --lee-blue-dark:#003E80;
  --lee-blue-deep:#002B59;
  --lee-blue-100:#D9E6F5;
  --lee-blue-050:#F1F6FB;
  --ink-900:#14181D;
  --ink-700:#3A4148;
  --ink-500:#5D6670;   /* verdonkerd t.o.v. v1 (#69727C): AA op wit én tint */
  --ink-300:#C6CCD3;
  --ink-100:#EDEFF2;
  --white:#FFFFFF;
  --page-bg:#F0F0EE;   /* warm canvas (01-09-2026): witte elementen krijgen lift */
  --radius-btn:4px;
  --radius-card:8px;
  --measure:720px;
  --font-head:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink-700);
  background:var(--page-bg);
  font-size:16px;line-height:26px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--lee-blue);}
a:focus-visible,button:focus-visible{outline:2px solid var(--lee-blue);outline-offset:2px;}

.container{max-width:1140px;margin:0 auto;padding:0 40px;}
@media (max-width:640px){.container{padding:0 24px;}}

/* ===== Typografie ===== */
h1,.display{font-family:var(--font-head);font-size:52px;line-height:60px;font-weight:800;letter-spacing:-0.02em;color:var(--ink-900);}
h2{font-family:var(--font-head);font-size:34px;line-height:42px;font-weight:800;letter-spacing:-0.01em;color:var(--ink-900);}
h3{font-family:var(--font-head);font-size:21px;line-height:30px;font-weight:700;color:var(--ink-900);}
.body-l{font-size:18px;line-height:29px;}
.small{font-size:14px;line-height:22px;color:var(--ink-500);}
.overline{font-family:var(--font-body);font-size:13px;line-height:16px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--lee-blue);margin-bottom:12px;}
@media (max-width:640px){
  h1,.display{font-size:36px;line-height:44px;}
  h2{font-size:28px;line-height:36px;}
}

/* ===== Go-bord achtergrondpatroon: vervallen (01-09-2026) — het warme canvas draagt de achtergrond zelf ===== */
.go-bg{position:relative;}
.go-bg > .container{position:relative;}

/* ===== Scroll-reveal (alleen met JS; uit bij prefers-reduced-motion) ===== */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .45s ease-out,transform .45s ease-out;}
.js .reveal.in-view{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ===== Navigatie ===== */
.site-nav{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--ink-300);background:var(--white);}
section[id],header[id]{scroll-margin-top:96px;}
.site-nav ul a.nav-cta{background:var(--lee-blue);color:var(--white);padding:10px 16px;border-radius:var(--radius-btn);}
.site-nav ul a.nav-cta:hover{background:var(--lee-blue-dark);color:var(--white);}
.site-nav ul a.nav-cta[aria-current="page"]{background:var(--lee-blue-dark);color:var(--white);border-bottom:none;}
.site-nav .container{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px;}
.site-nav .logo img{height:44px;width:auto;}
.site-nav ul{display:flex;gap:32px;list-style:none;}
.site-nav ul a{font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-700);text-decoration:none;padding:6px 0;}
.site-nav ul a:hover{color:var(--lee-blue);}
.site-nav ul a[aria-current="page"]{color:var(--lee-blue);border-bottom:2px solid var(--lee-blue);}
.site-nav ul a{white-space:nowrap;}
@media (max-width:640px){
  .site-nav .container{height:auto;flex-direction:column;padding-top:12px;padding-bottom:12px;gap:10px;}
  .site-nav .logo img{height:36px;}
  .site-nav ul{gap:10px;flex-wrap:nowrap;justify-content:center;}
  .site-nav ul a{font-size:11px;letter-spacing:0.05em;}
  .site-nav ul a.nav-cta{padding:7px 10px;}
}
@media (max-width:380px){
  .site-nav ul{gap:8px;}
  .site-nav ul a{font-size:10px;}
}

/* ===== Secties ===== */
.section{padding:96px 0;}
.section.tint{background:var(--lee-blue-050);}
.section.ruled{border-bottom:1px solid var(--ink-300);}
@media (max-width:640px){.section{padding:64px 0;}}

/* ===== Knoppen ===== */
.btn{display:inline-block;font-family:var(--font-body);font-size:16px;font-weight:600;line-height:1;
  padding:14px 28px;border-radius:var(--radius-btn);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;text-align:center;transition:background .15s,border-color .15s;}
.btn-primary{background:var(--lee-blue);color:var(--white);}
.btn-primary:hover{background:var(--lee-blue-dark);}
.btn-secondary{background:var(--white);color:var(--lee-blue);border-color:var(--lee-blue);}
.btn-secondary:hover{background:var(--lee-blue-050);}
.btn-inverse{background:var(--white);color:var(--lee-blue);}
.btn-inverse:hover{background:var(--lee-blue-050);}
.btn-micro{display:block;font-size:14px;line-height:22px;color:var(--ink-500);margin-top:8px;}

/* ===== Hero ===== */
.hero{padding:88px 0;border-bottom:1px solid var(--ink-300);}

/* Homepage: hero vult het scherm (minus navigatie), aanpak pas bij scrollen */
.hero-full{display:flex;align-items:center;min-height:calc(100vh - 77px);padding:48px 0 104px;}
.hero-full .container{width:100%;}
.hero-full h1{font-size:76px;line-height:1.02;letter-spacing:-0.03em;margin-bottom:28px;}
@media (max-width:1100px){.hero-full h1{font-size:60px;}}
@media (max-width:640px){.hero-full h1{font-size:44px;line-height:1.05;}}

/* Hero-visual: steentjes-compositie, randloos in het canvas.
   De translateY legt de blauwe steen (visueel anker) op het midden van het tekstblok. */
.hero-stones{display:flex;align-items:center;}
.hero-stones img{width:100%;}
.scroll-cue{position:absolute;left:50%;transform:translateX(-50%);bottom:28px;display:flex;padding:8px;color:var(--ink-700);}
.scroll-cue:hover{color:var(--lee-blue);}
.scroll-cue svg{animation:cue 2.2s ease-in-out infinite;}
@keyframes cue{0%,100%{transform:translateY(0);}50%{transform:translateY(7px);}}
@media (prefers-reduced-motion: reduce){.scroll-cue svg{animation:none;}}
@media (max-width:860px){
  .hero-full{min-height:0;padding:56px 0 88px;}
}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:24px;align-items:center;}
.hero h1{margin-bottom:20px;}
.hero .overline{margin-bottom:16px;}
.hero .sub{font-size:18px;line-height:29px;max-width:var(--measure);margin-bottom:36px;}
.hero .actions{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-start;}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;gap:48px;}}
@media (max-width:640px){
  .hero{padding:56px 0;}
  .hero-grid{gap:0;}
  .hero-stones{display:none;}
}

/* Hero-visual: vlakke foto, geen kader of ornament */
.hero-photo{position:relative;border-radius:var(--radius-btn);overflow:hidden;}
.hero-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.78) contrast(1.03) brightness(1.01);}
.hero-photo::after{content:"";position:absolute;inset:0;background:rgba(0,84,173,.10);mix-blend-mode:multiply;pointer-events:none;}

/* ===== Mission statement (Home, na hero): full-height, verticaal gecentreerd ===== */
.mission{text-align:center;display:flex;align-items:center;min-height:calc(100vh - 77px);}
.mission > .container{width:100%;}
@media (max-width:860px){.mission{min-height:0;}}
.mission .inner{max-width:760px;margin:0 auto;}
.mission .overline{margin-bottom:20px;}
.mission p{font-family:var(--font-body);font-size:31px;line-height:1.45;font-weight:400;color:var(--ink-900);}
@media (max-width:640px){.mission p{font-size:23px;}}

/* ===== Werk beter/slimmer/leuker: beeldvullende waarde-secties (Home, na Wat wij doen) ===== */
.value-section{min-height:calc(100vh - 77px);display:flex;align-items:center;}
.value-section > .container{width:100%;}
.value-section.tint{background:var(--lee-blue-050);}
.value-inner{max-width:900px;margin:0 auto;text-align:center;}
.value-inner .overline{margin-bottom:16px;}
.value-inner .steplabel{font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--lee-blue);margin:-20px 0 16px;}
.value-inner .register-cta{justify-content:center;}
.value-inner h2{font-family:var(--font-head);font-weight:800;font-size:52px;line-height:1.08;letter-spacing:-0.02em;color:var(--ink-900);margin-bottom:36px;}
.value-visual{display:flex;justify-content:center;margin-bottom:40px;}
.value-photo{max-width:820px;margin-left:auto;margin-right:auto;position:relative;border-radius:var(--radius-card);overflow:hidden;}
.value-photo img{width:100%;display:block;filter:saturate(.85) contrast(1.02) brightness(1.02);}
.value-photo::after{content:"";position:absolute;inset:0;background:rgba(0,84,173,.08);mix-blend-mode:multiply;pointer-events:none;}
.value-example{background:var(--white);border-radius:var(--radius-card);padding:28px 32px;text-align:left;font-size:17px;line-height:28px;color:var(--ink-700);}
.value-example b{color:var(--ink-900);}
@media (max-width:860px){
  .value-section{min-height:0;padding:64px 0;}
  .value-inner h2{font-size:36px;}
  .value-visual svg{width:180px;height:auto;}
  .value-example{padding:22px 24px;font-size:16px;line-height:26px;}
}

/* ===== Onze aanpak: verspringende scroll-blokken met Go-visuals ===== */
.approach{display:flex;flex-direction:column;gap:88px;}
.approach .step{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center;}
.approach .step.flip .visual{order:-1;}
.approach .steplabel{font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--lee-blue);margin-bottom:10px;}
.approach h3{font-size:26px;line-height:34px;margin-bottom:10px;}
.approach p{font-size:17px;line-height:28px;max-width:480px;}
.approach .visual{display:flex;align-items:center;justify-content:center;}
.approach .visual-card{width:100%;display:flex;align-items:center;justify-content:center;background:var(--lee-blue-050);border-radius:var(--radius-card);padding:48px;}
.approach .step:nth-child(2) .visual-card{background:var(--ink-100);}
@media (max-width:860px){
  .approach{gap:56px;}
  .approach .step{grid-template-columns:1fr;gap:24px;}
  .approach .step.flip .visual{order:0;}
}

/* ===== Register (opsommingen in B-stijl, o.a. Over ons) ===== */
.register{border-top:1px solid var(--ink-300);}
.register .row{display:grid;grid-template-columns:200px 1fr 1.2fr;gap:32px;padding:40px 0;border-bottom:1px solid var(--ink-100);}
.register .row:last-of-type{border-bottom:1px solid var(--ink-300);}
.register .lead{display:flex;flex-direction:column;gap:12px;}
.register .lead .steplabel{font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--lee-blue);}
.register .row h3{align-self:center;font-size:24px;line-height:32px;}
.register .row p{align-self:center;}
@media (max-width:860px){
  .register .row{grid-template-columns:1fr;gap:12px;padding:32px 0;}
}
.register-cta{display:flex;align-items:center;gap:16px;margin-top:48px;flex-wrap:wrap;}
.register-cta .btn-micro{margin-top:0;}

/* ===== Tekstsecties ===== */
.prose{max-width:var(--measure);}
.prose p{margin-bottom:16px;}
.prose p:last-child{margin-bottom:0;}
.lede{font-size:18px;line-height:29px;}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center;}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:32px;}}

/* ===== FAQ (genummerde rijen / accordion) ===== */
.faq{margin-top:32px;}
.faq details{border-top:1px solid var(--ink-100);}
.faq details:first-of-type{border-top:1px solid var(--ink-300);}
.faq details:last-of-type{border-bottom:1px solid var(--ink-300);}
.faq summary{list-style:none;display:flex;align-items:baseline;gap:24px;
  padding:20px 0;font-family:var(--font-head);font-size:18px;line-height:27px;font-weight:700;color:var(--ink-900);cursor:pointer;}
.faq summary::-webkit-details-marker{display:none;}
.faq .num{flex:0 0 44px;font-size:15px;font-weight:800;color:var(--lee-blue);}
.faq summary .q{flex:1 1 auto;}
.faq .plus{flex:0 0 auto;font-size:22px;font-weight:400;color:var(--lee-blue);transition:transform .2s;align-self:center;}
.faq details[open] .plus{transform:rotate(45deg);}
.faq details p{padding:0 0 24px 68px;max-width:720px;}
@media (max-width:640px){
  .faq .num{flex-basis:32px;}
  .faq details p{padding-left:56px;}
}
.faq-link{display:inline-block;margin-top:28px;font-weight:600;}

/* ===== Blauwe CTA-sectie ===== */
.cta-final{background:var(--lee-blue);padding:80px 0;}
.cta-final .inner{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;}
.cta-final h2{color:var(--white);margin-bottom:6px;}
.cta-final p{color:rgba(255,255,255,0.9);font-size:18px;line-height:29px;}
.cta-final .btn-micro{color:rgba(255,255,255,0.85);}
@media (max-width:640px){.cta-final{padding:64px 0;}}

/* ===== Footer ===== */
.site-footer{background:var(--ink-900);padding:56px 0;}
.site-footer .container{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start;}
.site-footer a{color:var(--white);text-decoration:none;font-size:14px;line-height:24px;display:block;}
.site-footer a:hover{text-decoration:underline;}
.site-footer a:focus-visible{outline-color:var(--white);}
.site-footer span{display:block;font-size:14px;line-height:24px;color:var(--ink-300);}

/* ===== Cases: sectoren, zelfde beeldvullende opzet als Werk beter/slimmer/leuker ===== */
.sector-intro{font-size:17px;line-height:28px;color:var(--ink-900);margin-bottom:20px;font-weight:600;}
.value-example ul{list-style:none;}
.value-example li{padding-left:20px;position:relative;margin-bottom:14px;}
.value-example li:last-child{margin-bottom:0;}
.value-example li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:999px;background:var(--lee-blue);}

/* ===== Over ons ===== */
.founder{display:grid;grid-template-columns:220px 1fr;gap:56px;align-items:start;margin-top:40px;}
@media (max-width:820px){.founder{grid-template-columns:1fr;}}
.founder-photo{display:block;width:220px;max-width:100%;text-decoration:none;}
.founder-photo .frame{border:1px solid var(--ink-300);border-radius:var(--radius-btn);padding:10px;background:var(--white);}
.founder-photo img{width:100%;border-radius:2px;background:var(--lee-blue-050);}
.founder-photo .small{margin-top:10px;display:block;text-align:center;}
.quote{font-family:var(--font-head);font-size:24px;line-height:36px;font-weight:700;color:var(--lee-blue);
  border-left:3px solid var(--lee-blue);padding-left:24px;margin:32px 0;max-width:640px;}
.gomove-figure{display:flex;align-items:center;justify-content:center;}
.gomove-figure svg,.gomove-figure img{width:100%;height:auto;max-width:560px;}

/* ===== Quickscan-modal ===== */
dialog.quickscan{margin:auto;border:none;border-radius:var(--radius-card);padding:0;max-width:520px;width:calc(100% - 48px);}
dialog.quickscan::backdrop{background:rgba(20,24,29,0.5);}
.quickscan-inner{padding:40px;}
.quickscan-inner h3{font-size:24px;line-height:32px;margin-bottom:6px;}
.quickscan-inner .small{margin-bottom:24px;display:block;}
.quickscan-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:24px;line-height:1;
  color:var(--ink-500);cursor:pointer;padding:8px;}
.quickscan-close:hover{color:var(--ink-900);}
.field{margin-bottom:20px;}
.field label{display:block;font-size:14px;line-height:22px;font-weight:600;color:var(--ink-900);margin-bottom:6px;}
.field input,.field textarea{width:100%;font-family:inherit;font-size:16px;line-height:24px;color:var(--ink-900);
  padding:12px 14px;border:1.5px solid var(--ink-300);border-radius:var(--radius-btn);background:var(--white);}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--lee-blue);box-shadow:0 0 0 3px rgba(0,84,173,0.15);}
.field textarea{min-height:110px;resize:vertical;}
.form-status{margin-top:16px;font-size:15px;line-height:24px;color:var(--lee-blue);font-weight:600;}
.form-status.is-error{color:var(--ink-900);}