/* ==========================================================
   Secties — compact en rustig
   ========================================================== */
.sec{padding:clamp(3.2rem,6vw,5.2rem) var(--pad)}
.sec.light{background:var(--light);color:var(--on-light);--muted:var(--on-light-muted);--line:var(--line-l);--accent-t:var(--accent-d)}
.sec.dark{background:var(--bg)}
.sec.panelbg{background:var(--bg-2)}
.h2{font-family:var(--font-d);font-weight:800;font-size:clamp(1.8rem,3.3vw,2.7rem);line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.sec-head{margin-bottom:2rem}
.sec-head .h2{margin-top:.9rem;max-width:22ch}
.sec-head p{margin-top:.9rem;max-width:36rem;color:var(--muted)}

/* ---------- Over Robin ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.about-photo{position:relative;border-radius:var(--r);overflow:hidden;background:var(--light-2,#E3E8EF);background:color-mix(in srgb,var(--accent) 16%,var(--light));aspect-ratio:1/1.05;max-width:420px;width:100%}
.about-photo img{position:absolute;left:0;top:0;width:100%;height:auto}
.about-text .h2{margin-top:.9rem;max-width:16ch}
.about-text p{max-width:34rem;margin-top:1.1rem;color:var(--muted);line-height:1.7}
.about-text .h2+p{margin-top:1.3rem}
/* ---------- Diensten ---------- */
.sv-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.4rem 2rem;margin-bottom:1.8rem}
.sv-top .h2{margin-top:.9rem}
.tabs{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:var(--r);padding:3px;background:var(--bg-2)}
.tab{padding:.6rem 1rem;border-radius:2px;border:0;background:none;font-weight:600;font-size:.86rem;color:var(--muted);transition:background .2s,color .2s}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{background:var(--accent);color:var(--on-accent)}
.panel{display:none;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.panel.is-active{display:block}
.panel.is-active .panel-text{animation:panelIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel-main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.panel-text{padding:clamp(1.5rem,3.2vw,2.6rem);align-self:center}
.pill{display:inline-block;margin-bottom:.9rem;padding:.22rem .6rem;border:1px solid var(--line);border-radius:2px;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-t)}
.panel-text h3{font-family:var(--font-d);font-weight:800;letter-spacing:-.02em;line-height:1.1;font-size:clamp(1.4rem,2.3vw,1.85rem)}
.panel-text p{margin-top:.8rem;max-width:34rem;color:var(--muted)}
.checks{margin:1.2rem 0 1.5rem;display:grid;gap:.5rem}
.checks li{display:flex;gap:.7rem;align-items:flex-start;font-weight:500;font-size:.93rem;line-height:1.5}
.checks svg{width:17px;height:17px;flex:none;margin-top:.2rem;stroke:var(--accent);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.panel-img{position:relative;min-height:320px;background:var(--bg)}
.panel-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.packs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.pack{display:flex;flex-direction:column;gap:.15rem;padding:1.1rem 1.5rem;border-left:1px solid var(--line)}
.pack:first-child{border-left:0}
.pack b{font-family:var(--font-d);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;line-height:1.2}
.pack span{color:var(--muted);font-size:.88rem}
.pack em{align-self:flex-start;margin-top:.5rem;padding:.18rem .55rem;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);border-radius:2px;font-size:.76rem;font-weight:600;font-style:normal}
.packs-note{padding:.75rem 1.5rem;border-top:1px solid var(--line);background:var(--bg);font-size:.84rem;color:var(--muted)}
.packs-note b{color:var(--text);font-weight:600;margin-right:.3rem}
.packs-note i{display:inline-block;width:4px;height:4px;margin:0 .65rem .18rem;border-radius:50%;background:var(--accent);vertical-align:middle}

/* ---------- Werkwijze ---------- */
.steps{--p:0%;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;margin-top:2rem;padding-top:1.6rem}
.steps::before,.steps::after{content:'';position:absolute;left:0;top:0;height:2px}
.steps::before{right:0;background:var(--line)}
.steps::after{width:var(--p);background:var(--accent)}
.step{position:relative}
.step b{display:block;font-family:var(--font-d);font-weight:700;font-size:.85rem;letter-spacing:.1em;color:var(--muted);transition:color .3s}
.step.done b{color:var(--accent-t)}
.step h3{margin-top:.5rem;font-family:var(--font-d);font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.step p{margin-top:.4rem;color:var(--muted);font-size:.92rem;line-height:1.6}

/* ---------- In actie ---------- */
.action-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 3rem;margin-bottom:1.8rem}
.action-head .h2{margin-top:.9rem}
.action-head p{max-width:24rem;color:var(--muted);font-size:.95rem}
.gal{display:grid;gap:10px}
.gal-row{display:flex;gap:10px}
.fig{position:relative;flex:var(--ar) 1 0;min-width:0;margin:0;overflow:hidden;background:var(--bg-2);border-radius:var(--r)}
.fig-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.fig img{width:100%;height:auto;opacity:0;transform:scale(1.04);transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .9s}
.fig.in img{opacity:1;transform:none}
.fig.in:hover img{transform:scale(1.025)}
.fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.8rem .8rem .6rem;font-size:.76rem;font-weight:500;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);pointer-events:none}

/* ---------- Foto groot ---------- */
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(5,8,14,.94);padding:3.5rem 4rem}
.lb[hidden]{display:none}
.lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.lb-fig img{max-width:100%;max-height:calc(100svh - 9rem);width:auto;height:auto;border-radius:var(--r)}
.lb-fig figcaption{font-size:.86rem;color:rgba(255,255,255,.75)}
.lb button{position:absolute;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.25);border-radius:var(--r);background:rgba(255,255,255,.06);color:#fff;transition:background .2s}
.lb button:hover{background:rgba(255,255,255,.16)}
.lb button svg{width:20px;height:20px}
.lb-x{top:1rem;right:1rem}
.lb-nav{top:50%;transform:translateY(-50%)}
.lb-prev{left:1rem}.lb-prev svg{transform:scaleX(-1)}
.lb-next{right:1rem}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.contact .h2{margin-top:.9rem;max-width:14ch}
.contact-copy p{max-width:27rem;margin-top:1.1rem;color:var(--muted)}
.contact-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.contact-links{margin-top:1.2rem;display:grid;gap:.2rem;font-weight:600;font-size:.95rem}
.contact-links a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.form{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.3rem,2.6vw,2rem);display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:grid;gap:.4rem;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:.78rem;font-weight:600;color:var(--muted)}
.field.full>label{font-family:var(--font-d);font-size:1.05rem;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.field input,.field textarea{width:100%;font:inherit;font-size:.93rem;color:var(--text);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:.7rem .85rem;transition:border-color .2s,background .2s;appearance:none;-webkit-appearance:none}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{resize:vertical;min-height:84px}
.choices{border:0;padding:0;gap:.5rem}
.choices legend{margin-bottom:.6rem;padding:0;font-family:var(--font-d);font-size:1.05rem;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.choice{display:flex;align-items:center;gap:.75rem;padding:.7rem .85rem;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);cursor:pointer;font-size:.93rem;font-weight:500;transition:border-color .2s,background .2s}
.choice:hover{border-color:color-mix(in srgb,var(--text) 35%,transparent)}
.choice input{appearance:none;-webkit-appearance:none;display:grid;place-content:center;flex:none;width:16px;height:16px;padding:0;border:1.5px solid var(--muted);border-radius:50%;background:none}
.choice input::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .15s}
.choice input:checked{border-color:var(--accent)}
.choice input:checked::before{transform:scale(1)}
.choice:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg-2))}
.choice:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.form .btn{grid-column:1/-1}
.form-note{grid-column:1/-1;font-size:.78rem;color:var(--muted);text-align:center}

/* ---------- Footer ---------- */
.footer{background:var(--bg);padding:2.2rem var(--pad) 1.4rem;border-top:1px solid var(--line)}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem}
.footer-links{display:flex;flex-wrap:wrap;gap:.3rem 1.5rem}
.footer-links a{font-size:.86rem;color:var(--muted);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--text)}
.footer-bottom{margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;font-size:.78rem;color:color-mix(in srgb,var(--muted) 75%,transparent)}

/* ---------- Zwevende knop + melding ---------- */
.wa{position:fixed;right:clamp(1rem,2.4vw,1.8rem);bottom:clamp(1rem,2.4vw,1.8rem);z-index:80;display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#fff}
.wa svg{width:58px;height:58px;padding:13px;border-radius:12px;background:#25D366;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .2s,background .2s}
.wa:hover svg{transform:translateY(-2px);background:#2BE070}
.wa-tip{order:-1;padding:.5rem .8rem;border-radius:var(--r);background:var(--light);color:var(--on-light);font-size:.82rem;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.3);opacity:0;transform:translateX(8px);pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap}
.wa:hover .wa-tip,.wa:focus-visible .wa-tip{opacity:1;transform:none}
@media (max-width:860px){.wa svg{width:54px;height:54px;padding:12px}.wa-tip{display:none}}
.toast{position:fixed;left:50%;bottom:1.4rem;z-index:120;max-width:min(92vw,28rem);background:var(--light);color:var(--on-light);padding:.85rem 1.2rem;border-radius:var(--r);font-weight:500;font-size:.9rem;box-shadow:0 16px 40px rgba(0,0,0,.4);transform:translate(-50%,200%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.toast.show{transform:translate(-50%,0)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .steps{grid-template-columns:1fr 1fr;row-gap:1.8rem}
  .steps::before,.steps::after{display:none}
  .step{border-top:2px solid var(--line);padding-top:1rem}
  .step.done{border-top-color:var(--accent)}
}
@media (max-width:860px){
  .about-grid{grid-template-columns:1fr}
  .about-photo{max-width:340px;order:2;aspect-ratio:1/1}
  .about-text{order:1}
  .panel-main{grid-template-columns:1fr}
  .panel-img{min-height:0;aspect-ratio:16/10;order:-1}
  .packs{grid-template-columns:1fr}
  .pack{border-left:0;border-top:1px solid var(--line);padding:.9rem 1.2rem}
  .pack:first-child{border-top:0}
  .packs-note{padding:.75rem 1.2rem}
  .contact-grid{grid-template-columns:1fr}
  .sv-top{align-items:flex-start}
  .sv-top>.tabs{display:flex;width:100%}
  .tab{white-space:nowrap;flex:1;padding:.6rem .4rem;font-size:.8rem;text-align:center}
  .gal{display:block;columns:2;column-gap:8px}
  .gal-row{display:contents}
  .fig{flex:none;width:100%;margin-bottom:8px;break-inside:avoid}
  .fig figcaption{display:none}
  .lb{padding:3.5rem .75rem}
  .lb-nav{top:auto;bottom:1rem;transform:none}
  .lb-prev{left:calc(50% - 52px)}.lb-next{right:calc(50% - 52px)}
  .footer-top{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}