/* digitale-strategie-en-advies: CSS van de secties op deze pagina (docs/prototype/digitale-strategie-en-advies.html, inline <style>).
   De stappen en het kruimelpad staan in styles.css; de vragen gebruiken het gedeelde FAQ-blok. */
/* Alles in de laag 'components' van de Tailwind-build, zodat utilities (ook hs-*-varianten) blijven winnen. */
@layer components{
/* ---------- pagina: digitale strategie en advies ---------- */
body{overflow-x:hidden}
.hand{font-family:var(--font-hand);color:var(--color-accent);font-size:20px;line-height:1.25}
/* hero */
.adv-hero{padding:40px 0 72px}
.adv-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.adv-copy h1{font-size:clamp(38px,4vw,60px)}
/* hero: van rommel naar plan (rijkere variant van .plan uit diensten.html) */
.pb{position:relative;aspect-ratio:5/4;container-type:inline-size;background:#fff;border-radius:18px;box-shadow:var(--shadow-lift),0 0 0 1px rgb(25 23 20 / .06);overflow:hidden}
.pb-in{position:absolute;inset:0;font-size:clamp(8px,2.2cqw,15px)}
.pb-bar{position:absolute;left:0;right:0;top:0;height:9%;display:flex;gap:.4em;align-items:center;padding:0 1em;background:#F2EEE6;font-family:var(--font-mono);font-size:.8em;color:var(--color-ink-3)}
.pb-bar i{width:.65em;height:.65em;border-radius:50%;background:var(--color-rule)}
.pb-bar span{margin-left:.6em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-col{position:absolute;top:11.5%;bottom:4%;width:29%;border-radius:.6em;border:.12em dashed var(--color-rule);transition:border-color .6s,background-color .6s}
.pb-col.c1{left:4%}
.pb-col.c2{left:35.5%}
.pb-col.c3{left:67%}
.pb-h{margin:.55em .8em 0;font-size:.78em;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--color-ink-3);transition:color .6s}
.pn{position:absolute;left:var(--mx);top:var(--my);width:27%;height:15%;margin:0;display:flex;align-items:center;padding:.45em .7em;border-radius:.25em;background:var(--color-postit);font-family:var(--font-hand);font-size:1.12em;line-height:1.1;color:var(--color-ink);box-shadow:0 .35em .8em rgb(25 23 20 / .14);rotate:var(--mr);transition:left .9s cubic-bezier(.3,1.15,.5,1),top .9s cubic-bezier(.3,1.15,.5,1),rotate .9s cubic-bezier(.3,1.15,.5,1),background-color .5s,color .5s,opacity .5s;transition-delay:0s}
.pn s{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 55%/0 .1em;transition:background-size .5s}
.pb-hand{position:absolute;margin:0;font-family:var(--font-hand);font-size:1.15em;line-height:1.1;color:var(--color-accent);opacity:0;transform:translateY(.4em);transition:opacity .5s,transform .5s}
.pb-hand.h1{left:6%;top:77%;width:26%}
.pb-hand.h2{left:69%;top:77%;width:26%}
.pb-hint{position:absolute;left:0;right:0;bottom:5%;text-align:center;margin:0;font-family:var(--font-hand);font-size:1.15em;color:var(--color-ink-3);transition:opacity .4s}
.pb.is-plan .pb-col{border-style:solid;border-color:#ECE6DA;background:#FBF8F2}
.pb.is-plan .pb-h{color:var(--color-ink)}
.pb.is-plan .pn{left:var(--px);top:var(--py);rotate:var(--pr);transition-delay:var(--d)}
.pb.is-plan .pn.k2{background:var(--color-accent-soft)}
.pb.is-plan .pn.k3{background:#DDE5F0}
.pb.is-plan .pn.x{background:#EEE9DF;color:var(--color-ink-3)}
.pb.is-plan .pn.x s{background-size:100% .1em;transition-delay:1.5s}
.pb.is-plan .pb-hand{opacity:1;transform:none;transition-delay:1.6s}
.pb.is-plan .pb-hint{opacity:0}
.pb-ctrl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:18px}
.pb-cap{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--color-ink-3)}
.pb-cap span{transition:color .3s}
.pb-cap span.on{color:var(--color-ink);font-weight:600}
.pb-cap .arr{color:var(--color-accent)}
/* herkenning */
.pain-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.pain{padding:24px 22px 26px}
.pain svg{display:block;width:64px;height:64px;color:var(--color-ink-2);overflow:visible}
.pain .ac{stroke:var(--color-accent)}
.pain h3{margin-top:18px;font-size:22px}
.pain p{margin-top:8px;font-size:15px;color:var(--color-ink-2)}
.sk{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* wat je krijgt: werking in kaart */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;position:relative}
.flow::before{content:"";position:absolute;left:10%;right:10%;top:22px;height:2px;background:var(--color-rule)}
.flow li{position:relative;text-align:center;font-size:14px;color:var(--color-ink-2)}
.flow .dot{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 auto 10px;border-radius:50%;background:var(--color-card);border:2px solid var(--color-ink);font-family:var(--font-serif);font-weight:700;color:var(--color-ink)}
.flow .hot .dot::after{content:"";position:absolute;inset:-9px;border:2px solid var(--color-accent);border-radius:47% 53% 50% 48%;rotate:-8deg;transform:scale(.4);opacity:0;transition:transform .5s cubic-bezier(.3,1.5,.5,1),opacity .3s;transition-delay:var(--d)}
.flow .why{display:block;margin-top:4px;font-family:var(--font-hand);font-size:16px;line-height:1.15;color:var(--color-accent);opacity:0;transition:opacity .4s;transition-delay:calc(var(--d) + .3s)}
.flow.in .hot .dot::after{transform:none;opacity:1}
.flow.in .why{opacity:1}
.gets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gets article{padding:24px}
.gets .n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--color-ink);color:var(--color-paper);font-family:var(--font-serif);font-weight:700;font-size:15px}
.gets h3{margin-top:14px;font-size:22px}
.gets p{margin-top:8px;font-size:15.5px;color:var(--color-ink-2)}
.gets .open{border-style:dashed;background:transparent}
.leads{list-style:none;padding:0;margin:0}
.leads li{border-top:1px solid var(--color-rule)}
.leads li:last-child{border-bottom:1px solid var(--color-rule)}
.leads a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;text-decoration:none;color:var(--color-ink)}
.leads a b{font-family:var(--font-serif);font-size:19px;font-weight:600}
.leads a > span{font-size:14.5px;color:var(--color-ink-3);text-align:right}
.leads a:hover b{color:var(--color-accent)}
/* afsluiter */
/* responsief */
@media (max-width:1023px){
.adv-grid{grid-template-columns:minmax(0,1fr);gap:40px}
.pain-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.gets{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
.adv-hero{padding:32px 0 48px}
.pain-row,.gets{grid-template-columns:minmax(0,1fr)}
.flow{grid-template-columns:minmax(0,1fr);gap:14px}
.flow::before{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto}
.flow li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:center;text-align:left}
.flow .dot{margin:0;grid-row:span 2}
.flow .why{margin-top:0}
.leads a{flex-direction:column;gap:2px}
.leads a > span{text-align:left}
}
/* minder beweging: meteen het eindbeeld, zonder overgangen */
@media (prefers-reduced-motion:reduce){
.pn,.pn s,.pb-hand,.pb-col,.pb-h,.pb-hint,.flow .hot .dot::after,.flow .why{transition:none!important}
}
}
/* gsm: tekst in de illustratie leesbaar houden */
@media (max-width:640px){
.pb{aspect-ratio:4/5}
.pb-in{font-size:max(10.5px,2.2cqw)}
}
/* dienstpagina's: overal dezelfde ruimte rond de hero. Kruimelpad tot de eerste tekst 32px (gsm) en 48px (desktop),
   laatste regel van de hero tot de titel van het volgende blok 112px en 144px. De marges hieronder corrigeren de
   eigen opbouw van deze hero naar die maten; in Wagtail wordt het één gedeelde instelling op de heroblokken. */
/* tekst en beeld bovenaan uitlijnen, niet centreren: anders zakt de H1 mee met de hoogte van het beeld en verschilt de afstand per schermbreedte */
.svc-hero-cols,.svc-hero .sa-sticky,.svc-hero .wl-sticky{align-items:start}
.svc-hero{margin-top:0px;margin-bottom:0px}
@media (min-width:768px) and (max-width:1023px){
.svc-hero{margin-top:-8px;margin-bottom:-24px}
}
@media (min-width:1024px){
.svc-hero{margin-top:8px;margin-bottom:-24px}
}
/* volgt er een blok met een gekleurde achtergrond, dan begint die achtergrond minstens 48/64px onder de hero; de titel van dat blok blijft op 112/144px door een kleinere bovenpadding */
.svc-next{padding-top:64px}
@media (min-width:768px) and (max-width:1023px){
.svc-next{padding-top:64px}
}
@media (min-width:1024px){
.svc-next{padding-top:80px}
}
/* kleine desktop (1024 tot 1279px): de hero bouwt hier anders op, dus een eigen correctie */
@media (min-width:1024px) and (max-width:1279px){
.svc-hero{margin-top:8px;margin-bottom:-8px}
.svc-next{padding-top:80px}
}
@media (min-width:1280px) and (max-width:1439px){
.svc-hero{margin-top:8px;margin-bottom:-8px}
.svc-next{padding-top:80px}
}