/* =====================================================================
   Steenbouw Dagbesteding — base stylesheet
   ---------------------------------------------------------------------
   Tokens en componenten geport uit V1 /dagbesteding. Belangrijkste
   afwijking: wrap is 1400px (was 1060px in V1) om aan te sluiten op
   de standaard van V3-channels.
   ===================================================================== */

/* ── TOKENS ─────────────────────────────────────────── */
:root{
  --ink:    #1A1A18;
  --ink-2:  #3C3C39;
  --ink-3:  #6A6A65;
  --ink-4:  #A0A09A;
  --paper:  #F8F7F3;
  --white:  #FFFFFF;
  --line:   rgba(26,26,24,.10);
  --line-m: rgba(26,26,24,.17);
  --amber:  #C8960A;
  --amber-p:#FBF5DF;
  --amber-m:#DFA912;
  --green:  #256645;
  --green-p:#E8F2EC;
  --red:    #B83A28;
  --red-p:  #FAECEA;
  --blue:   #1A3A6E;
  --blue-p: #E8EFF8;
  --r:8px; --rL:14px;
  --sh: 0 2px 16px rgba(26,26,24,.06);
  --sh-h: 0 4px 24px rgba(26,26,24,.10);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter','Segoe UI',system-ui,sans-serif;background:var(--paper);color:var(--ink);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Lora','Georgia',serif;font-weight:400;line-height:1.2;}
h1{font-size:clamp(2rem,5vw,3.5rem);}
h2{font-size:clamp(1.65rem,3vw,2.4rem);}
h3{font-size:clamp(1.15rem,2vw,1.45rem);}
h4{font-size:1rem;font-weight:600;font-family:'Inter','Segoe UI',sans-serif;}
p{color:var(--ink-2);line-height:1.78;}
a{color:inherit;text-decoration:none;}

/* ── LAYOUT ─────────────────────────────────────────── */
.wrap   {max-width:1400px;margin:0 auto;padding:0 24px;}
.wrap-n {max-width:760px;margin:0 auto;padding:0 24px;}

/* ── ALERT ──────────────────────────────────────────── */
.alert{background:var(--ink);color:rgba(255,255,255,.8);text-align:center;padding:9px 20px;font-size:.84rem;}
.alert strong{color:var(--amber-m);}
.alert a{color:var(--amber-m);text-decoration:underline;cursor:pointer;}

/* ── NAV ────────────────────────────────────────────── */
nav.dag-nav{position:sticky;top:0;z-index:200;background:var(--white);border-bottom:1px solid var(--line);}
.nav-w{display:flex;align-items:center;justify-content:space-between;height:62px;}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer;flex-shrink:0;}
.logo-b{width:30px;height:23px;background:var(--amber);border-radius:4px;position:relative;flex-shrink:0;}
.logo-b::before,.logo-b::after{content:'';position:absolute;top:-6px;width:10px;height:6px;background:var(--amber);border-radius:2px 2px 0 0;}
.logo-b::before{left:3px;}.logo-b::after{right:3px;}
.logo-name{font-family:'Lora','Georgia',serif;font-size:1rem;color:var(--ink);display:block;line-height:1.2;}
.logo-sub{font-size:.63rem;color:var(--ink-3);letter-spacing:.07em;text-transform:uppercase;display:block;line-height:1.1;}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;}
.nav-links a{display:block;padding:7px 11px;font-size:.87rem;color:var(--ink-2);border-radius:6px;transition:background .13s,color .13s;cursor:pointer;}
.nav-links a:hover,.nav-links a.active{background:var(--amber-p);color:var(--ink);}
.nav-cta{background:var(--ink)!important;color:var(--white)!important;font-weight:600;margin-left:6px;}
.nav-cta:hover{background:var(--amber)!important;color:var(--ink)!important;}
.hbg{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px;}
.hbg span{display:block;width:20px;height:1.5px;background:var(--ink);}
.nav-mobile-toggle{display:none;}

/* ── BREADCRUMB ─────────────────────────────────────── */
.crumb{border-bottom:1px solid var(--line);background:var(--white);}
.crumb-in{display:flex;gap:7px;align-items:center;padding:10px 0;font-size:.8rem;color:var(--ink-3);}
.crumb-in a{color:var(--ink-3);cursor:pointer;}
.crumb-in a:hover{color:var(--ink);}
.crumb-here{color:var(--ink);}

/* ── BUTTONS ────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:12px 22px;border-radius:var(--r);font-size:.93rem;font-family:'Inter','Segoe UI',sans-serif;font-weight:600;cursor:pointer;border:none;transition:all .15s;text-decoration:none;}
.btn-dark{background:var(--ink);color:var(--white);}
.btn-dark:hover{background:#2e2e2b;}
.btn-amber{background:var(--amber);color:var(--white);}
.btn-amber:hover{background:#a97d08;}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-m);}
.btn-ghost:hover{background:var(--ink);color:var(--white);border-color:var(--ink);}
.btn-lg{padding:14px 26px;font-size:.98rem;}
.btn-group{display:flex;gap:10px;flex-wrap:wrap;}

/* ── LABEL ──────────────────────────────────────────── */
.lbl{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:4px 11px;border-radius:100px;font-family:'Inter','Segoe UI',sans-serif;}
.lbl-a{background:var(--amber-p);color:#7A5500;}
.lbl-d{background:var(--ink);color:var(--amber-m);}
.lbl-b{background:var(--blue-p);color:var(--blue);}
.lbl-g{background:var(--green-p);color:var(--green);}

/* ── SECTIONS ───────────────────────────────────────── */
section{padding:76px 0;}
.sec-w{background:var(--white);}
.sec-d{background:var(--ink);}
.sec-s{background:#F0EFE9;}
.sec-a{background:var(--amber-p);}

.sh{margin-bottom:44px;}
.sh .lbl{margin-bottom:11px;}
.sh h2{margin-bottom:12px;}
.sh p{font-size:1.03rem;max-width:680px;}
.sh.c{text-align:center;}
.sh.c p{margin:0 auto;}

/* ── HERO ───────────────────────────────────────────── */
.hero{background:var(--white);padding:84px 0 68px;overflow:hidden;position:relative;}
.hero::after{content:'';position:absolute;right:-140px;top:-60px;width:480px;height:480px;border-radius:50%;background:var(--amber-p);z-index:0;pointer-events:none;}
.hero-g{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;max-width:1180px;margin:0 auto;}
.hero-ey{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;display:flex;align-items:center;gap:9px;}
.hero-ey::before{content:'';display:block;width:22px;height:1.5px;background:var(--amber);}
.hero h1{margin-bottom:18px;}
.hero h1 em{font-style:italic;color:var(--ink-3);}
.hero-p{font-size:1.05rem;color:var(--ink-2);margin-bottom:28px;max-width:480px;}
.proof-row{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);display:flex;gap:22px;flex-wrap:wrap;}
.proof-it{font-size:.82rem;color:var(--ink-3);display:flex;align-items:center;gap:6px;}
.proof-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);flex-shrink:0;}

/* HERO PANEL */
.hp{background:var(--paper);border:1px solid var(--line);border-radius:var(--rL);overflow:hidden;}
.hp-top{background:var(--ink);padding:20px 24px;}
.hp-top strong{color:var(--amber-m);font-size:.93rem;display:block;margin-bottom:3px;}
.hp-top p{color:rgba(255,255,255,.58);font-size:.82rem;}
.hp-body{padding:16px;display:flex;flex-direction:column;gap:9px;}
.hp-chip{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:10px 13px;}
.hp-ci{width:34px;height:34px;background:var(--amber-p);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hp-chip h4{font-size:.83rem;margin-bottom:2px;}
.hp-chip p{font-size:.75rem;color:var(--ink-3);}

/* ── PROMISE ────────────────────────────────────────── */
.promise{background:var(--ink);}
.promise-g{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid rgba(255,255,255,.07);}
.pi{padding:32px 26px;border-right:1px solid rgba(255,255,255,.07);}
.pi h3{color:var(--white);font-size:1.15rem;margin:12px 0 9px;}
.pi p{color:rgba(255,255,255,.58);font-size:.9rem;}
.pi-ic{width:38px;height:38px;background:rgba(255,255,255,.06);border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}

/* ── CARDS ──────────────────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--rL);padding:26px;transition:box-shadow .16s,transform .16s;}
.card:hover{box-shadow:var(--sh-h);transform:translateY(-2px);}
.card.acc{background:var(--amber-p);border-color:rgba(200,150,10,.22);}
.c-ic{width:38px;height:38px;background:var(--amber-p);border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:13px;}
.card.acc .c-ic{background:rgba(200,150,10,.18);}
.card h4{margin-bottom:7px;}
.card p{font-size:.9rem;}

/* ── FIT LIST ───────────────────────────────────────── */
.fit-g{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.fit{border-radius:var(--rL);padding:32px;}
.fit-y{background:var(--green-p);border:1px solid rgba(37,102,69,.15);}
.fit-n{background:var(--red-p);border:1px solid rgba(184,58,40,.12);}
.fit h3{font-size:1.2rem;margin-bottom:16px;}
.fit-y h3{color:var(--green);}
.fit-n h3{color:var(--red);}
.fit-list{list-style:none;display:flex;flex-direction:column;gap:9px;}
.fit-list li{display:flex;gap:9px;font-size:.92rem;color:var(--ink-2);align-items:flex-start;}
.ck-y,.ck-n{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;flex-shrink:0;margin-top:4px;font-size:.62rem;color:white;}
.ck-y{background:var(--green);}
.ck-n{background:var(--red);font-size:.7rem;}

/* ── STEPS ──────────────────────────────────────────── */
.steps-col{display:flex;flex-direction:column;}
.step{display:flex;gap:16px;padding-bottom:26px;position:relative;}
.step:not(:last-child)::after{content:'';position:absolute;left:16px;top:36px;bottom:0;width:1px;background:var(--line);}
.step-dot{width:34px;height:34px;background:var(--amber);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Lora','Georgia',serif;font-size:.96rem;color:var(--ink);flex-shrink:0;}
.step h4{margin-bottom:3px;}
.step p{font-size:.89rem;}

/* ── ASIDE DARK ─────────────────────────────────────── */
.aside-d{background:var(--ink);border-radius:var(--rL);padding:30px;}
.aside-d h3{color:var(--white);margin-bottom:11px;font-size:1.15rem;}
.aside-d>p{color:rgba(255,255,255,.6);font-size:.88rem;margin-bottom:14px;}
.aside-d ul{list-style:none;display:flex;flex-direction:column;gap:7px;}
.aside-d li{display:flex;gap:8px;font-size:.87rem;color:rgba(255,255,255,.65);}
.aside-d .arr{color:var(--amber-m);flex-shrink:0;}

/* ── OUTCOMES ───────────────────────────────────────── */
.out-g{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;}
.out{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px 16px;}
.out-ic{width:36px;height:36px;background:var(--amber-p);border-radius:7px;display:flex;align-items:center;justify-content:center;margin-bottom:9px;}
.out h4{font-size:.92rem;margin-bottom:4px;}
.out p{font-size:.83rem;color:var(--ink-3);}

/* ── TWO COL ────────────────────────────────────────── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;max-width:1180px;margin:0 auto;}
.two-col-c{align-items:center;}

/* ── CTA DARK ───────────────────────────────────────── */
.cta-d{background:var(--ink);text-align:center;padding:80px 0;}
.cta-d .lbl{margin-bottom:16px;display:inline-block;}
.cta-d h2{color:var(--white);margin-bottom:14px;}
.cta-d p{color:rgba(255,255,255,.6);max-width:560px;margin:0 auto 28px;font-size:1rem;}

/* ── CONTACT FORM ───────────────────────────────────── */
.form-g{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;max-width:1180px;margin:0 auto;}
.fg{margin-bottom:14px;}
.fg label{display:block;font-size:.83rem;font-weight:600;color:var(--ink);margin-bottom:5px;}
.fg input,.fg textarea,.fg select{width:100%;padding:11px 13px;border:1.5px solid var(--line-m);border-radius:var(--r);font-size:.93rem;font-family:'Inter','Segoe UI',sans-serif;color:var(--ink);background:var(--white);transition:border-color .13s;appearance:none;}
.fg input:focus,.fg textarea:focus,.fg select:focus{outline:none;border-color:var(--amber);}
.fg textarea{min-height:144px;resize:vertical;}
.form-note{font-size:.78rem;color:var(--ink-3);margin-top:8px;}
.ci-list{display:flex;flex-direction:column;gap:11px;}
.ci{display:flex;gap:13px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:17px;}
.ci-ic{width:38px;height:38px;background:var(--amber-p);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ci h4{font-size:.88rem;margin-bottom:2px;}
.ci p,.ci a{font-size:.83rem;color:var(--ink-3);}
.ci a{color:var(--blue);}

.flash{padding:14px 18px;border-radius:var(--r);margin-bottom:18px;font-size:.93rem;}
.flash-ok{background:var(--green-p);color:var(--green);border:1px solid rgba(37,102,69,.2);}
.flash-err{background:var(--red-p);color:var(--red);border:1px solid rgba(184,58,40,.2);}

/* ── BLOG ───────────────────────────────────────────── */
.blog-g{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.blog-card{background:var(--white);border:1px solid var(--line);border-radius:var(--rL);padding:26px;cursor:pointer;transition:box-shadow .16s,transform .16s;display:block;}
.blog-card:hover{box-shadow:var(--sh-h);transform:translateY(-2px);}
.blog-cat{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:8px;display:block;}
.blog-card h3{font-size:1.1rem;margin-bottom:9px;color:var(--ink);}
.blog-card p{font-size:.87rem;color:var(--ink-3);margin-bottom:14px;}
.blog-meta{font-size:.76rem;color:var(--ink-4);}
.blog-post{max-width:760px;margin:0 auto;padding:0 24px;}
.blog-post h1{margin:14px 0 18px;}
.blog-post h2{font-size:1.5rem;margin:36px 0 12px;}
.blog-post p{margin-bottom:18px;}
.blog-post ul{margin:0 0 22px 22px;}
.blog-post li{margin-bottom:6px;color:var(--ink-2);}

/* ── FOOTER ─────────────────────────────────────────── */
footer.dag-footer{background:var(--ink);color:rgba(255,255,255,.55);padding:52px 0 22px;}
.foot-g{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:32px;}
.foot-logo{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
.foot-mark{width:24px;height:19px;background:var(--amber);border-radius:3px;flex-shrink:0;position:relative;}
.foot-mark::before,.foot-mark::after{content:'';position:absolute;top:-5px;width:8px;height:5px;background:var(--amber);border-radius:2px 2px 0 0;}
.foot-mark::before{left:3px;}.foot-mark::after{right:3px;}
.foot-name{font-family:'Lora','Georgia',serif;font-size:.96rem;color:var(--white);}
.foot-brand p{font-size:.83rem;max-width:260px;line-height:1.65;}
.foot-brand address{font-style:normal;font-size:.79rem;color:rgba(255,255,255,.38);line-height:1.85;margin-top:9px;}
.foot-col h5{font-family:'Lora','Georgia',serif;color:var(--white);font-size:.92rem;margin-bottom:12px;font-weight:400;}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:6px;}
.foot-col a{font-size:.83rem;color:rgba(255,255,255,.46);transition:color .13s;cursor:pointer;}
.foot-col a:hover{color:var(--amber-m);}
.foot-bot{border-top:1px solid rgba(255,255,255,.07);padding-top:18px;display:flex;justify-content:space-between;font-size:.76rem;color:rgba(255,255,255,.24);flex-wrap:wrap;gap:5px;}

/* ── VISION BOX ─────────────────────────────────────── */
.vision{background:var(--amber-p);border:1px solid rgba(200,150,10,.22);border-radius:var(--rL);padding:32px;text-align:center;}
.vision h3{color:#7A5500;margin-bottom:9px;}
.vision p{font-size:.89rem;}

/* ── 404 ────────────────────────────────────────────── */
.p404{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:80px 24px;}
.p404 h1{font-size:clamp(2.4rem,6vw,4rem);margin-bottom:12px;}
.p404 p{font-size:1.04rem;max-width:480px;margin:0 auto 22px;}

/* Mobile-only nav-item: Cookievoorkeuren in burger-menu, verborgen op desktop */
.nav-mobile-only{display:none;}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media(max-width:960px){
  /* Verberg de zwevende cookie-knop op mobiel — afspraak: gebruiker
     opent voorkeuren via de Cookievoorkeuren-link in het burger-menu
     (.nav-mobile-only). Op desktop blijft de 🍪 zichtbaar linksonder. */
  #cmp-reopen{display:none !important;}
  .nav-mobile-only{display:list-item;}

  .hero-g,.two-col,.form-g,.fit-g{grid-template-columns:1fr;}
  .hp{display:none;}
  .promise-g{grid-template-columns:1fr;border-left:none;}
  .pi{border-right:none;border-bottom:1px solid rgba(255,255,255,.07);}
  .g2,.out-g,.g3{grid-template-columns:1fr 1fr;}
  .foot-g{grid-template-columns:1fr 1fr;}
  .blog-g{grid-template-columns:1fr;}
  .nav-links{display:none;flex-direction:column;position:absolute;top:62px;left:0;right:0;background:var(--white);border-bottom:1px solid var(--line);padding:10px;z-index:199;}
  /* Checkbox staat als sibling van .wrap (niet .nav-w) — sibling-selector
     moet daarom via .wrap lopen. Voorheen had .nav-w in de selector
     waardoor de burger-toggle nooit triggerde. */
  .nav-mobile-toggle:checked ~ .wrap .nav-links{display:flex;}
  .hbg{display:flex;}
}
@media(max-width:580px){
  section{padding:56px 0;}
  .hero{padding:56px 0 48px;}
  .g2,.out-g,.g3{grid-template-columns:1fr;}
  .foot-g{grid-template-columns:1fr;}
  .btn-group{flex-direction:column;}
  .btn-group .btn{width:100%;justify-content:center;}
  .cta-d .btn-group{flex-direction:column;align-items:center;}
}