/* Coached by Rutger: gedeelde stijl voor de website (tokens uit het design system) */
:root{
  --surface:#FDF6EC; --raised:#F5EDE1; --soft:#FBE3D2; --inverse:#3A3632;
  --ink:#2A2622; --muted:#6E675F; --ink-inverse:#FDF6EC; --muted-inverse:#BDB5AA;
  --accent:#F07030; --on-accent:#2A2622; --accent-text:#A8440E; --accent-text-inverse:#F58A55;
  --line:#E4D8C7; --line-strong:#8E877D; --focus:#2A2622;
  --display:"Archivo", "Arial Narrow", sans-serif;
  --body:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.22,.8,.2,1);
  --wave:240,112,48;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:5rem}
html,body{margin:0}
body{background:linear-gradient(180deg, #FDF6EC 0%, #FBEBDB 60%, #F8DFC9 100%) fixed; color:var(--ink); font-family:var(--body); font-variation-settings:"wdth" 100; font-size:1.0625rem; line-height:1.6; letter-spacing:-0.005em; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
p{margin:0 0 1rem; max-width:62ch}

#waves{position:fixed; inset:0; z-index:0; pointer-events:none}
.page{position:relative; z-index:1}
.wrap{max-width:1120px; margin:0 auto; padding:0 1rem}
@media (min-width:640px){ .wrap{padding:0 1.5rem} }

/* ---------- typografie ---------- */
h1,h2,h3{margin:0; font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 86; font-stretch:86%; text-transform:uppercase; letter-spacing:-0.01em}
h1{font-size:clamp(3rem, 11vw, 4.75rem); line-height:.94}
h2{font-size:clamp(2.2rem, 7vw, 3rem); line-height:.98}
h3{font-family:var(--body); text-transform:none; font-variation-settings:"wdth" 100; font-stretch:normal; font-weight:700; font-size:1.375rem; line-height:1.3; letter-spacing:0}
.lead{font-size:1.25rem; line-height:1.5; font-weight:500; color:var(--muted); margin-top:1.25rem; max-width:34rem}
.eyebrow{display:flex; align-items:center; gap:.7rem; color:var(--accent-text); font-size:.875rem; font-weight:500; margin:0 0 1.1rem}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--accent); flex:none}
.muted{color:var(--muted)}
.caption{font-size:.8125rem; line-height:1.45; color:var(--muted)}

.words .w{display:inline-block; opacity:0; transform:translateY(.4em); animation:rise .8s var(--ease) forwards; animation-delay:calc(var(--i) * 70ms + 80ms)}
@keyframes rise{to{opacity:1; transform:none}}

/* ---------- topbalk ---------- */
.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4rem}
.wordmark{font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 82; font-stretch:82%; text-transform:uppercase; letter-spacing:.06em; font-size:.95rem; text-decoration:none; white-space:nowrap}
.menu{display:flex; align-items:center; gap:1.5rem; font-size:.875rem; font-weight:500}
.menu a{text-decoration:none; color:var(--muted)}
.menu a:hover, .menu a[aria-current="page"]{color:var(--ink)}
.menu .btn{color:var(--on-accent)}
.menu .btn{white-space:nowrap}
@media (max-width:760px){ .menu a:not(.btn){display:none} }
@media (max-width:420px){ .wordmark{font-size:.8rem} .menu .btn{font-size:.8125rem; padding:.45rem .9rem; min-height:2.4rem} }

/* ---------- knoppen ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:3rem; padding:.75rem 1.4rem; border-radius:999px; border:1px solid var(--line-strong); background:transparent; color:var(--ink); font:inherit; font-size:.9375rem; font-weight:500; text-decoration:none; cursor:pointer; transition:background-color .25s, border-color .25s}
.btn:hover{background:var(--soft); border-color:var(--ink)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600}
.btn-primary::after{content:"\2192"; display:inline-block; transition:transform .35s var(--ease)}
.btn-primary:hover{background:var(--accent); border-color:var(--accent)}
.btn-primary:hover::after{transform:translateX(5px)}
.btn-sm{min-height:2.5rem; padding:.5rem 1.1rem}
.row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}

/* ---------- secties ---------- */
section{padding:4.5rem 0}
@media (min-width:900px){ section{padding:7.5rem 0} }
.hairline{border-top:1px solid var(--line)}
.hero{padding-top:3rem}
@media (min-width:900px){ .hero{padding-top:5rem} }
.hero-grid{display:grid; gap:3rem; align-items:end}
@media (min-width:900px){ .hero-grid{grid-template-columns:1.35fr 1fr} }
.facts{display:flex; flex-wrap:wrap; margin-top:2rem; font-size:.875rem; color:var(--muted)}
.facts span{padding:0 .9rem; border-left:1px solid var(--line)}
.facts span:first-child{padding-left:0; border-left:none}

/* merkteken met draaiende tekstring */
.seal{width:min(280px, 70vw); aspect-ratio:1; margin:0 auto; position:relative}
.seal svg{width:100%; height:100%; overflow:visible}
.seal .ring{transform-origin:100px 100px; animation:spin 40s linear infinite}
.seal .ring text{fill:var(--accent-text); font:500 11.5px var(--body); letter-spacing:.24em; text-transform:uppercase}
.seal .disc{fill:var(--accent)}
.seal .cbr{fill:var(--on-accent); font-family:var(--display); font-weight:700; font-size:40px; font-variation-settings:"wdth" 82; font-stretch:82%; letter-spacing:.04em}
@keyframes spin{to{transform:rotate(360deg)}}

.section-head{display:grid; gap:1rem; margin-bottom:3rem}
@media (min-width:900px){ .section-head{grid-template-columns:1fr 1fr; align-items:end} .section-head p{margin:0} }

/* ---------- kaarten ---------- */
.cards{display:grid; gap:1.5rem}
@media (min-width:760px){
  .cards{grid-template-columns:repeat(3, 1fr)}
  /* kaarten lijnen per rij uit: nummer, label, titel, tekst, lijst en knop staan op gelijke hoogte */
  .cards > .card{display:grid; grid-template-rows:subgrid; grid-row:span 6; row-gap:0}
  .cards > .card > *{min-width:0}
}
.card{background:var(--raised); border:1px solid var(--line); border-radius:4px; padding:1.5rem; display:flex; flex-direction:column}
.card.soft{background:var(--soft)}
.card .num{font-family:var(--display); font-weight:600; font-variation-settings:"wdth" 75; font-stretch:75%; font-size:2.2rem; line-height:1; color:var(--accent-text); margin-bottom:1.5rem}
.card h3{margin-bottom:.6rem}
.card ul{margin:0 0 1.5rem; padding:0; list-style:none; border-top:1px solid var(--line)}
.card li{padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.9375rem}
.card .btn{margin-top:auto; align-self:flex-start}
.card p{flex-grow:0}
.card .kicker{color:var(--accent-text); font-size:.8125rem; font-weight:600; margin:0 0 .4rem}
.card li b{display:block; font-weight:600}
.card li:has(b){color:var(--muted)}
.card li:has(b) b{color:var(--ink)}

/* dienstkaarten met een foto als achtergrond (zwart-wit, met een donkere laag voor leesbaarheid) */
.card.photo{position:relative; overflow:hidden; isolation:isolate; min-height:30rem; border-color:transparent; background:#3A3632; color:#FDF6EC; border-radius:12px;
  --ink:#FDF6EC; --muted:#E4DCD2; --line:rgba(255,255,255,.22); --line-strong:#E4DCD2; --accent-text:#F58A55; --soft:rgba(255,255,255,.12)}
.card.photo::before{content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(120% 80% at 80% 0%, rgba(240,112,48,.45), transparent 60%), var(--img) var(--pos, center 15%)/var(--size, cover) no-repeat; filter:grayscale(1) contrast(1.1) brightness(var(--bright, 1)); transition:transform .9s var(--ease)}
.card.photo::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(42,38,34,.05) 0%, rgba(42,38,34,.2) 22%, rgba(42,38,34,.86) 46%, rgba(42,38,34,.95) 100%)}
.card.photo:hover::before{transform:scale(1.05)}
.card.photo .num{margin:0 0 auto; padding-bottom:13rem; color:#FDF6EC; text-shadow:0 1px 12px rgba(0,0,0,.5)}
.card.photo .btn{margin-top:0; align-self:flex-start}
.card.photo .btn-primary:hover{background:var(--accent); border-color:var(--accent)}
.card.photo ul{align-self:stretch}
@media (min-width:760px){ .cards > .card.photo .btn{align-self:end; justify-self:start} .cards > .card.photo ul{align-self:end} }
.card.photo .btn:hover{background:rgba(255,255,255,.12); border-color:#FDF6EC}

/* checks */
.checks{display:grid; gap:1.5rem}
@media (min-width:760px){ .checks{grid-template-columns:1fr 1fr} }
.check{display:block; text-decoration:none; background:var(--raised); border:1px solid var(--line); border-radius:4px; padding:1.75rem 1.5rem; transition:border-color .25s}
.check:hover{border-color:var(--ink)}
.check h3{font-family:var(--display); text-transform:uppercase; font-variation-settings:"wdth" 82; font-stretch:82%; font-weight:700; font-size:2rem; line-height:1; margin:.4rem 0 .9rem}
.check .go{color:var(--accent-text); font-weight:600; font-size:.9375rem}
.check .go::after{content:" \2192"}
.check svg{width:100%; height:auto; display:block; margin:1.25rem 0}
.check .curve{fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round}
.check .axis{stroke:var(--line); stroke-width:1.5}

/* stappen */
.steps{list-style:none; margin:0; padding:0; border-top:1px solid var(--line); counter-reset:s}
.steps li{counter-increment:s; display:grid; grid-template-columns:3.5rem 1fr; gap:1rem; padding:1.5rem 0; border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s, decimal-leading-zero); font-family:var(--display); font-weight:600; font-variation-settings:"wdth" 75; font-stretch:75%; font-size:2rem; line-height:1; color:var(--accent-text)}
.steps h3{margin-bottom:.35rem}
.steps p{margin:0; color:var(--muted)}

/* over */
.about{display:grid; gap:2.5rem}
@media (min-width:900px){ .about{grid-template-columns:1fr 1.2fr; align-items:start} }
.portrait{aspect-ratio:3/4; background:var(--raised); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:0}
.portrait img{width:100%; height:100%; object-fit:cover; object-position:center 20%; filter:grayscale(1) contrast(1.08)}
.certs{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem}
.certs span{border:1px solid var(--line); border-radius:4px; padding:.3rem .8rem; font-size:.8125rem; color:var(--muted)}

/* reviews */
.reviews{display:grid; gap:1.5rem}
@media (min-width:760px){ .reviews{grid-template-columns:repeat(3, 1fr)} }
.review{margin:0; background:var(--raised); border:1px solid var(--line); border-radius:4px; padding:1.5rem; display:flex; flex-direction:column}
.review blockquote{margin:0 0 1.5rem; font-size:1.0625rem; line-height:1.6}
.review blockquote::before{content:"\201C"; display:block; font-family:var(--display); font-size:3.5rem; line-height:.6; color:var(--accent); margin-bottom:.6rem}
.review figcaption{margin-top:auto; padding-top:1rem; border-top:1px solid var(--line); font-size:.875rem}
.review figcaption b{display:block; font-weight:600}
.review figcaption span{color:var(--muted)}
.review.placeholder{border-style:dashed}

/* reviews als lopende band: twee rijen in tegengestelde richting, oranje haarlijnen */
.marquee-wrap{position:relative; z-index:1; display:grid; gap:1rem; padding:.25rem 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)}
.marquee{overflow:hidden}
.marquee-track{display:flex; gap:1rem; width:max-content; animation:marquee var(--duration, 45s) linear infinite}
.marquee-copy{display:flex; gap:1rem}
.marquee.reverse .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-100% / var(--copies, 2) - 1rem / var(--copies, 2)))}}
.rcard{flex:none; width:19rem; margin:0; padding:1.25rem; border:1px solid var(--accent); border-radius:12px; background:rgba(255,255,255,.04); display:flex; flex-direction:column; gap:.9rem; transition:background-color .25s}
.rcard:hover{background:rgba(240,112,48,.12)}
.rcard figcaption{display:flex; align-items:center; gap:.75rem}
.rcard b{display:block; font-weight:600; font-size:.9375rem; line-height:1.3}
.rcard small{display:block; color:var(--accent-text); font-size:.8125rem}
.ravatar{flex:none; width:2.5rem; height:2.5rem; border-radius:50%; background:var(--accent); color:#2A2622; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:800; font-size:.9rem}
.rcard blockquote{margin:0; font-size:.9375rem; line-height:1.55; color:var(--ink)}
@media (prefers-reduced-motion: reduce){
  .marquee{overflow-x:auto}
  .marquee-track{animation:none}
  .marquee-copy{display:none}
}

/* vragen */
details{border-bottom:1px solid var(--line)}
.faq{border-top:1px solid var(--line)}
summary{list-style:none; cursor:pointer; padding:1.25rem 0; display:flex; justify-content:space-between; gap:1rem; font-weight:600; font-size:1.0625rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--accent-text); font-size:1.4rem; line-height:1; transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted); padding-bottom:1.25rem; margin:0}

/* statement */
.statement{background:var(--inverse); color:var(--ink-inverse); border-radius:20px; padding:2.5rem 1.5rem; position:relative; overflow:hidden}
@media (min-width:760px){ .statement{padding:4rem 3.5rem} }
.statement h2{color:var(--ink-inverse)}
.statement p{color:var(--muted-inverse); position:relative}
.statement .btn:not(.btn-primary){border-color:var(--muted-inverse); color:var(--ink-inverse)}
.statement .btn:not(.btn-primary):hover{background:rgba(255,255,255,.08)}
.statement .flow{position:absolute; left:0; bottom:0; width:200%; height:60%; opacity:.3; pointer-events:none; animation:flow 16s linear infinite}
.statement .flow path{fill:none; stroke:var(--accent); stroke-width:1.5}
.statement > *:not(.flow){position:relative}
@keyframes flow{to{transform:translateX(-50%)}}

/* donkere band: dezelfde achtergrond als het statement, voor hele secties */
section.dark{position:relative; overflow:hidden; background:#3A3632; color:#FDF6EC; border-top:none; border-radius:20px; margin:1.5rem .5rem;
  --ink:#FDF6EC; --muted:#BDB5AA; --line:rgba(255,255,255,.14); --line-strong:#BDB5AA; --raised:rgba(255,255,255,.06); --soft:rgba(240,112,48,.18); --accent-text:#F58A55; --focus:#F58A55}
@media (min-width:900px){ section.dark{margin:2rem 1.5rem} }
section.dark::after{content:""; position:absolute; left:0; right:0; bottom:0; height:55%; pointer-events:none; opacity:.3;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Cpath d='M0 120 Q 75 80 150 120 T 300 120' fill='none' stroke='%23F07030' stroke-width='1.5'/%3E%3Cpath d='M0 150 Q 75 115 150 150 T 300 150' fill='none' stroke='%23F07030' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x 0 100% / 600px 100%;
  animation:bandflow 16s linear infinite}
@keyframes bandflow{to{background-position:-600px 100%}}
section.dark > .wrap{position:relative; z-index:1}
section.dark + section.hairline{border-top:none}
section.dark .btn:not(.btn-primary):hover{background:rgba(255,255,255,.08)}

/* kenmerken en vormen (detailpagina's) */
.features{display:grid; gap:0; border-top:1px solid var(--line)}
@media (min-width:760px){ .features{grid-template-columns:1fr 1fr; column-gap:3rem} }
.feature{padding:1.5rem 0; border-bottom:1px solid var(--line)}
.feature h3{margin-bottom:.35rem}
.feature p{margin:0}
.plans{display:grid; gap:1.5rem}
@media (min-width:760px){ .plans{grid-template-columns:1fr 1fr} }
.plan{background:var(--raised); border:1px solid var(--line); border-radius:12px; padding:1.75rem 1.5rem; display:flex; flex-direction:column}
.plan h3{font-family:var(--display); text-transform:uppercase; font-variation-settings:"wdth" 82; font-stretch:82%; font-size:2rem; line-height:1; margin-bottom:.9rem}
.plan p{color:var(--muted)}
.plan ul{list-style:none; margin:.5rem 0 1.75rem; padding:0; border-top:1px solid var(--line)}
.plan li{padding:.7rem 0 .7rem 1.75rem; border-bottom:1px solid var(--line); position:relative; font-size:.9375rem}
.plan li::before{content:""; position:absolute; left:.15rem; top:1.05rem; width:.6rem; height:.6rem; border-radius:50%; background:var(--accent)}
.plan li.off{color:var(--muted)}
.plan li.off::before{background:transparent; border:1px solid var(--muted)}
.plan .btn{margin-top:auto; align-self:flex-start}

/* footer */
footer{padding:3rem 0 2.5rem; border-top:1px solid var(--line); margin-top:4.5rem}
.foot-grid{display:grid; gap:2rem}
@media (min-width:760px){ .foot-grid{grid-template-columns:1.2fr 1fr 1fr} }
footer h4{margin:0 0 .75rem; font-size:.875rem; font-weight:600}
footer ul{list-style:none; margin:0; padding:0; font-size:.9375rem}
footer li{margin-bottom:.4rem}
footer a{text-decoration:none; color:var(--muted)}
footer a:hover{color:var(--ink)}
.disclaimer{margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--line)}

/* inloop */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; animation-delay:0s !important}
  .words .w, .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}