/* ==========================================================================
   FayLux studio-stijl voor de dienst- en landingspagina's (26 okt 2026)
   Werkt alleen op <body class="studio">. Zelfde beeldtaal als homepage en
   prijzen: Bricolage Condensed in kapitalen, accent in Instrument Serif,
   donker #071114 met mintlicht en korrel, crème vlakken met lijnen.
   ========================================================================== */
@font-face{font-family:'Bricolage Condensed';font-style:normal;font-weight:600 800;font-display:swap;src:url('/fonts/bricolage-grotesque-condensed-latin.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/instrument-serif-italic-latin.woff2') format('woff2')}
@font-face{font-family:'BC Fallback A';font-weight:800;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Arial');size-adjust:57.3%}
@font-face{font-family:'BC Fallback R';font-weight:800;src:local('Roboto Bold'),local('Roboto-Bold'),local('Roboto');size-adjust:56.8%}
@font-face{font-family:'IS Fallback';font-style:italic;src:local('Georgia Italic'),local('Georgia-Italic'),local('Georgia');size-adjust:79.8%}

body.studio,body.st-knop{
  --st-nacht:#071114; --st-creme:#F5F1E8; --st-papier:#FBF8F1; --st-ink:#0C1D23;
  --st-tq:#035352; --st-tekst:#4D483F; --st-grijs:#676156; --st-mint:#8FD6CA;
  --st-lijn:rgba(12,29,35,.16); --st-lijn-licht:rgba(245,241,232,.12);
  --st-cond:'Bricolage Condensed','BC Fallback A','BC Fallback R',var(--font-display);
  --st-serif:'Instrument Serif','IS Fallback',Georgia,serif;
  --st-ease:cubic-bezier(.16,1,.3,1);
  --st-korrel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
body.studio{background:var(--st-creme)}

/* ---------- typografie ---------- */
body.studio .svc-hero h1,body.studio .contact-hero h1,body.studio .about-hero h1,body.studio .portfolio-hero h1,body.studio .article-hero h1,body.studio .blog-hero h1,
body.studio .svc-section h2,
body.studio .svc-final h2,
body.studio .st-kop{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.01em;max-width:none;text-wrap:balance}
body.studio .svc-hero h1 .gradient-text,body.studio .contact-hero h1 .gradient-text,body.studio .about-hero h1 .gradient-text,body.studio .portfolio-hero h1 .gradient-text,body.studio .blog-hero h1 .gradient-text,
body.studio .svc-section h2 .gradient-text,
body.studio .svc-final h2 .gradient-text,
body.studio .st-kop em{font-family:var(--st-serif);font-style:italic;font-weight:400;text-transform:none;font-size:1.294em;line-height:0;letter-spacing:0;padding-right:.04em;background:none;-webkit-text-fill-color:currentColor}
body.studio .svc-section h2{font-size:clamp(2.3rem,4.6vw,4.4rem);color:var(--st-ink);margin:0 0 clamp(22px,2.6vw,32px)}
body.studio .svc-section h2 .gradient-text{color:var(--st-tq)}
body.studio .svc-section h3{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:1}
body.studio .svc-section p{color:var(--st-tekst);font-size:1.04rem;line-height:1.7;max-width:64ch}
body.studio .svc-section p.lead{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.55;color:var(--st-ink);max-width:52ch}
body.studio .svc-section a.inline{color:var(--st-tq);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(3,83,82,.4);transition:border-color .2s}
body.studio .svc-section a.inline:hover{border-bottom-color:var(--st-tq)}

/* ---------- knoppen ---------- */
body.studio main .btn{border-radius:100px;padding:15px 26px;font-weight:600;box-shadow:none;transform:none;transition:background .25s,color .25s,border-color .25s}
body.studio main .btn-primary{background:var(--st-ink);border:1px solid var(--st-ink);color:var(--st-creme)}
body.studio main .btn-primary:hover,body.studio main .btn-primary:focus-visible{background:var(--st-tq);border-color:var(--st-tq);color:var(--st-creme)}
body.studio main .btn-secondary,body.studio main .btn-ghost{background:transparent;border:1px solid rgba(12,29,35,.4);color:var(--st-ink)}
body.studio main .btn-secondary:hover,body.studio main .btn-ghost:hover{background:var(--st-tq);border-color:var(--st-tq);color:var(--st-creme)}
/* op donker */
body.studio .svc-hero .btn-primary,body.studio .svc-final .btn-primary,body.studio .svc-section.ink .btn-primary{background:var(--st-mint);border-color:var(--st-mint);color:var(--st-nacht)}
body.studio .svc-hero .btn-primary:hover,body.studio .svc-final .btn-primary:hover,body.studio .svc-section.ink .btn-primary:hover{background:var(--st-creme);border-color:var(--st-creme);color:var(--st-nacht)}
body.studio .svc-hero .btn-ghost,body.studio .svc-final .btn-ghost,body.studio .svc-section.ink .btn-ghost{border-color:rgba(245,241,232,.4);color:var(--st-creme)}
body.studio .svc-hero .btn-ghost:hover,body.studio .svc-final .btn-ghost:hover{background:rgba(143,214,202,.12);border-color:var(--st-mint);color:var(--st-creme)}



/* ---------- hero ---------- */
body.studio .svc-hero,body.studio .contact-hero,body.studio .about-hero,body.studio .portfolio-hero,body.studio .article-hero,body.studio .blog-hero{position:relative;overflow:hidden;isolation:isolate;text-align:left;background:var(--st-nacht);color:var(--st-creme);padding:clamp(150px,15vw,200px) 0 clamp(72px,8vw,110px)}
body.studio .svc-hero::before,body.studio .contact-hero::before,body.studio .about-hero::before,body.studio .portfolio-hero::before,body.studio .article-hero::before,body.studio .blog-hero::before{content:"";position:absolute;z-index:0;left:-10vw;top:-24vw;width:min(80vw,1100px);aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(143,214,202,.26) 0%,rgba(143,214,202,.15) 20%,rgba(143,214,202,.07) 40%,rgba(143,214,202,0) 66%);animation:stLicht 26s ease-in-out infinite alternate;will-change:transform}
body.studio .svc-hero::after,body.studio .contact-hero::after,body.studio .about-hero::after,body.studio .portfolio-hero::after,body.studio .article-hero::after,body.studio .blog-hero::after,body.studio .svc-final::after,body.studio .svc-section.ink::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background-size:180px 180px;background-image:var(--st-korrel)}
@keyframes stLicht{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(22vw,14vw,0) scale(1.08)}100%{transform:translate3d(40vw,4vw,0) scale(.94)}}
body.studio .svc-hero>.container,body.studio .contact-hero>.container,body.studio .about-hero>.container,body.studio .portfolio-hero>.container,body.studio .article-hero>.container,body.studio .blog-hero>.container{position:relative;z-index:2}
body.studio .blog-hero .glow{display:none}
body.studio :is(.contact-hero,.portfolio-hero) .glow,body.studio .about-hero-glow{display:none}
body.studio .svc-hero .label,body.studio .contact-hero .label,body.studio .about-hero .label,body.studio .portfolio-hero .label,body.studio .blog-hero .label{display:inline-flex;align-items:center;gap:10px;background:none;border:0;border-radius:0;padding:0;margin:0 0 clamp(22px,2.6vw,30px);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-mint)}
body.studio .svc-hero .label::before,body.studio .contact-hero .label::before,body.studio .about-hero .label::before,body.studio .portfolio-hero .label::before,body.studio .blog-hero .label::before{content:"";width:28px;height:1px;background:currentColor}
body.studio .svc-hero h1,body.studio .contact-hero h1,body.studio .about-hero h1,body.studio .portfolio-hero h1,body.studio .blog-hero h1{font-size:clamp(3rem,7.4vw,7.2rem);color:var(--st-creme);margin:0}
body.studio .svc-hero h1 .gradient-text,body.studio .contact-hero h1 .gradient-text,body.studio .about-hero h1 .gradient-text,body.studio .portfolio-hero h1 .gradient-text,body.studio .blog-hero h1 .gradient-text{color:var(--st-mint)}
body.studio .svc-hero.has-visual h1{font-size:clamp(2.8rem,5.6vw,5.6rem)}
body.studio .svc-hero-text>p,body.studio .svc-hero>.container>p,body.studio .contact-hero>.container>p,body.studio .about-hero>.container>p,body.studio .portfolio-hero>.container>p,body.studio .blog-hero>.container>p{margin:clamp(24px,3vw,34px) 0 0;max-width:50ch;font-size:1.12rem;line-height:1.6;color:rgba(245,241,232,.72)}
body.studio .svc-hero .svc-cta{justify-content:flex-start;margin-top:clamp(28px,3vw,38px);gap:14px}
body.studio .svc-hero .rv-cta-wrap{justify-content:flex-start}
body.studio .svc-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
body.studio .svc-hero-visual{margin-right:calc(-1 * clamp(0px,4vw,60px))}
body.studio .svc-hero:not(.has-visual) .container{max-width:1200px}
/* het voorbeeldscherm zweeft licht gedraaid */
body.studio .svc-hero-visual .mock-browser{transform:rotate(-1.6deg);border:1px solid rgba(245,241,232,.14);border-radius:6px;box-shadow:0 40px 90px rgba(0,0,0,.55),0 8px 20px rgba(0,0,0,.3)}
body.studio .svc-hero-visual .mock-browser .mb-bar{background:#0E1E23}

/* ---------- kruimelpad ---------- */
body.studio .svc-breadcrumb{background:var(--st-creme);border-bottom:1px solid var(--st-lijn)}
body.studio .svc-breadcrumb li,body.studio .svc-breadcrumb a{color:var(--st-grijs)}
body.studio .svc-breadcrumb li[aria-current]{color:var(--st-ink)}

/* ---------- secties: label in de marge, inhoud rechts ---------- */
body.studio .svc-section{position:relative;background:var(--st-creme);padding:clamp(80px,9vw,130px) 0}
body.studio .svc-section.alt{background:var(--st-papier)}
body.studio .svc-section+.svc-section:not(.alt):not(.ink),body.studio .svc-section.alt+.svc-section.alt{border-top:1px solid var(--st-lijn)}
@media (min-width:901px){
  body.studio .svc-section>.container:has(>.svc-eyebrow){display:grid;grid-template-columns:minmax(150px,.26fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);align-items:start}
  body.studio .svc-section>.container:has(>.svc-eyebrow)>*{grid-column:2}
  body.studio .svc-section>.container:has(>.svc-eyebrow)>.svc-eyebrow{grid-column:1;grid-row:1;margin-top:1.1em}
  body.studio .svc-section>.container:has(>.svc-eyebrow)>h2{grid-row:1}
  body.studio .svc-section>.container:has(>.svc-eyebrow)>:is(.svc-steps,.svc-flow,.smc-grid,.aif-gallery,.svc-marquee,.svc-pain,.st-breed){grid-column:1 / -1}
}
body.studio .svc-eyebrow{display:flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-tq);margin:0 0 18px}
body.studio .svc-eyebrow::before{content:"";width:22px;height:1px;background:currentColor;flex:none}

/* oude schuine overgangen uit: hier zijn de overgangen recht */
body.studio .svc-section+.svc-section::before{display:none}

/* ---------- pijnpunten: citaten in serif ---------- */
body.studio .svc-pain{display:block;margin:clamp(32px,4vw,48px) 0 0;padding:0;border-top:1px solid var(--st-lijn)}
body.studio .svc-pain>li{border-bottom:1px solid var(--st-lijn)}
body.studio .svc-pain-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:12px clamp(24px,4vw,60px);align-items:baseline;background:none;border:0;border-radius:0;box-shadow:none;padding:clamp(22px,2.8vw,34px) 0}
body.studio .svc-pain-card .q{margin:0;font-family:var(--st-serif);font-style:italic;font-weight:400;font-size:clamp(1.5rem,2.3vw,2.05rem);line-height:1.15;color:var(--st-ink)}
body.studio .svc-pain-card .a{margin:0;font-size:1rem;line-height:1.65;color:var(--st-tekst)}
body.studio .svc-pain.numbered .svc-pain-card::before{display:none}


/* ---------- probleemrijen: gebogen koraal pijl in de marge wijst naar de klacht ---------- */
body.studio .svc-pain>li{display:grid;grid-template-columns:minmax(150px,.26fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);align-items:center}
body.studio .svc-pain-card{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);column-gap:clamp(24px,4vw,60px);align-items:center}
body.studio .st-boog{grid-column:1;grid-row:1;justify-self:end;width:clamp(90px,9vw,130px);height:auto;overflow:visible;margin-right:calc(-1 * clamp(12px,2vw,30px));color:var(--koraal,#E56B4C)}
body.studio .svc-pain-card{grid-column:2;grid-row:1}
body.studio .st-boog path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* met beweging: de lijn tekent zich, daarna de punt, daarna de uitleg */
.sc-ready body.studio .st-boog .st-boog-lijn{stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);transition:stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) .15s}
.sc-ready body.studio .st-boog .st-boog-kop{stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .35s ease-out 1.05s}
.sc-ready body.studio .svc-pain>li.sc-in .st-boog path{stroke-dashoffset:0}
.sc-ready body.studio .svc-pain>li .svc-pain-card .a{opacity:0;transform:translateX(-10px);transition:opacity .6s var(--st-ease) .9s,transform .6s var(--st-ease) .9s}
.sc-ready body.studio .svc-pain>li.sc-in .svc-pain-card .a{opacity:1;transform:none}
body.studio .svc-pain>li:hover .st-boog{transform:translateX(4px);transition:transform .35s var(--st-ease)}

/* ---------- vinklijst en usp: twee kolommen met lijnen ---------- */
body.studio .svc-check,body.studio .svc-usp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px);max-width:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;border-top:1px solid var(--st-lijn)}
body.studio .svc-check li,body.studio .svc-usp li{padding:15px 0 15px 30px;border-bottom:1px solid var(--st-lijn);font-size:1rem;line-height:1.5;color:var(--st-ink)}
body.studio .svc-check li::before,body.studio .svc-usp li::before{content:"";left:3px;top:22px;width:11px;height:6px;border:0;border-left:2px solid var(--st-tq);border-bottom:2px solid var(--st-tq);border-radius:0;background:none;transform:rotate(-45deg)}
body.studio .svc-check li::after,body.studio .svc-usp li::after{display:none}

/* ---------- cijferband ---------- */
body.studio .svc-statband{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--st-lijn)}
body.studio .svc-statband .result-stat,body.studio .svc-section.alt .svc-statband .result-stat{text-align:left;background:none;border:0;border-radius:0;padding:clamp(22px,2.6vw,32px) clamp(14px,2vw,28px) 0 0}
body.studio .svc-statband .result-stat+.result-stat{border-left:1px solid var(--st-lijn);padding-left:clamp(14px,2vw,28px)}
body.studio .svc-statband .num,body.studio .svc-statband .su-statnum{display:block;font-family:var(--st-cond);font-weight:800;font-size:clamp(2.8rem,4.8vw,4.4rem);line-height:1;letter-spacing:-.01em;color:var(--st-ink);background:none;-webkit-text-fill-color:currentColor}
body.studio .svc-statband small{display:block;margin-top:10px;font-size:.92rem;line-height:1.5;color:var(--st-tekst)}

/* ---------- voordelen: genummerde rijen ---------- */
body.studio .svc-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px);gap:0 clamp(24px,4vw,56px);margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--st-lijn);counter-reset:stb}
body.studio .svc-benefit,body.studio .svc-section.alt .svc-benefit{counter-increment:stb;display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px 14px;background:none;border:0;border-radius:0;padding:clamp(20px,2.4vw,28px) 0;border-bottom:1px solid var(--st-lijn)}
body.studio .svc-benefit::before{content:counter(stb,decimal-leading-zero);grid-row:1 / span 2;font-size:.84rem;font-weight:600;letter-spacing:.08em;color:var(--st-grijs);font-variant-numeric:tabular-nums;padding-top:.5em}
body.studio .svc-benefit strong{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:clamp(1.4rem,2vw,1.75rem);line-height:1;color:var(--st-ink);margin:0}
body.studio .svc-benefit span{font-size:.98rem;line-height:1.6;color:var(--st-tekst)}

body.studio .svc-benefits:has(>.svc-benefit:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
body.studio .svc-benefits:has(>.svc-benefit:nth-child(3):last-child) .svc-benefit{grid-template-columns:1fr;align-content:start;padding-right:clamp(10px,2vw,24px)}
body.studio .svc-benefits:has(>.svc-benefit:nth-child(3):last-child) .svc-benefit::before{grid-row:auto;padding-top:0;margin-bottom:10px}

/* ---------- kaarten worden lijstrijen met pijl ---------- */
body.studio .svc-grid{display:block;margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--st-lijn)}
body.studio .svc-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px;gap:10px clamp(20px,4vw,56px);align-items:center;background:none;border:0;border-bottom:1px solid var(--st-lijn);border-radius:0;box-shadow:none;padding:clamp(20px,2.4vw,30px) 0;transform:none}
body.studio a.svc-card::after{content:"\2192";justify-self:end;font-size:1.3rem;color:var(--st-ink);transition:transform .3s var(--st-ease),color .25s}
body.studio .svc-card h3{margin:0;font-size:clamp(1.3rem,2vw,1.9rem);color:var(--st-ink);transition:color .25s,transform .35s var(--st-ease)}
body.studio .svc-card p{margin:0;font-size:.98rem;line-height:1.55;color:var(--st-tekst)}
body.studio a.svc-card:hover,body.studio a.svc-card:focus-visible{transform:none;box-shadow:none;border-color:var(--st-lijn)}
body.studio a.svc-card:hover h3,body.studio a.svc-card:focus-visible h3{color:var(--st-tq);transform:translateX(8px)}
body.studio a.svc-card:hover::after,body.studio a.svc-card:focus-visible::after{transform:translateX(6px);color:var(--st-tq)}
body.studio a.svc-card:focus-visible{outline:3px solid #0E9384;outline-offset:4px;border-radius:4px}

/* ---------- donkere sectie ---------- */
body.studio .svc-section.ink{background:var(--st-nacht);color:var(--st-creme);overflow:hidden;isolation:isolate}
body.studio .svc-section.ink>.container{position:relative;z-index:2}
body.studio .svc-section.ink h2{color:var(--st-creme)}
body.studio .svc-section.ink h2 .gradient-text{color:var(--st-mint)}
body.studio .svc-section.ink p{color:rgba(245,241,232,.72)}
body.studio .svc-section.ink .svc-eyebrow{color:var(--st-mint)}



/* stappen: genummerde kolommen met een lijn erboven */
body.studio .svc-flow,body.studio .svc-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;margin-top:clamp(32px,4vw,52px);counter-reset:stf;border-top:1px solid var(--st-lijn)}
body.studio .svc-flow .fstep,body.studio .svc-steps .svc-step{counter-increment:stf;position:relative;min-width:0;background:none;border:0;border-radius:0;padding:clamp(22px,2.6vw,30px) clamp(14px,1.8vw,24px) 0 0}
body.studio .svc-flow .fstep+.fstep,body.studio .svc-steps .svc-step+.svc-step{padding-left:clamp(14px,1.8vw,24px);border-left:1px solid var(--st-lijn)}
body.studio .svc-flow .fstep::before,body.studio .svc-steps .svc-step::before{content:counter(stf,decimal-leading-zero);display:block;margin-bottom:18px;font-family:var(--st-cond);font-weight:800;font-size:clamp(2.6rem,4vw,3.6rem);line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--st-tq)}
body.studio .svc-flow .fstep::after{display:none}
body.studio .svc-flow .fstep strong,body.studio .svc-steps .svc-step strong{display:block;margin-bottom:8px;font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.45rem;line-height:1;color:var(--st-ink)}
body.studio .svc-flow .fstep p,body.studio .svc-steps .svc-step p{margin:0;font-size:.95rem;line-height:1.6;color:var(--st-tekst)}
body.studio .svc-section.ink .svc-flow,body.studio .svc-section.ink .svc-steps,body.studio .svc-section.ink .fstep,body.studio .svc-section.ink .svc-step{border-color:var(--st-lijn-licht)}
body.studio .svc-section.ink .fstep::before,body.studio .svc-section.ink .svc-step::before{-webkit-text-stroke-color:var(--st-mint)}
body.studio .svc-section.ink .fstep strong,body.studio .svc-section.ink .svc-step strong{color:var(--st-creme)}
body.studio .svc-section.ink .fstep p,body.studio .svc-section.ink .svc-step p{color:rgba(245,241,232,.7)}

/* ---------- veelgestelde vragen ---------- */
body.studio .svc-faq{max-width:none;margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--st-lijn)}
body.studio .svc-faq details{background:none;border:0;border-bottom:1px solid var(--st-lijn);border-radius:0;box-shadow:none;margin:0;padding:0}
body.studio .svc-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-family:var(--font-display);font-weight:700;font-size:1.12rem;line-height:1.35;color:var(--st-ink)}
body.studio .svc-faq summary::-webkit-details-marker{display:none}
body.studio .svc-faq summary::after{content:"+";flex:none;font-weight:400;font-size:1.5rem;line-height:1;color:var(--st-tq);transition:transform .3s var(--st-ease)}
body.studio .svc-faq details[open] summary::after{transform:rotate(45deg)}
body.studio .svc-faq summary:focus-visible{outline:3px solid #0E9384;outline-offset:4px}
body.studio .svc-faq details p{margin:0 0 22px;max-width:64ch;padding:0}

/* ---------- reviews ---------- */
body.studio .rv-block{background:var(--st-papier)}
body.studio .rv-block .section-header h2{text-align:left}

/* ---------- afsluiter ---------- */
body.studio .svc-final{position:relative;overflow:hidden;isolation:isolate;background:var(--st-nacht);padding:clamp(120px,14vw,200px) 0}
body.studio .svc-final::before{content:"";position:absolute;z-index:0;right:-20vw;top:-30vw;width:min(80vw,1100px);aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(143,214,202,.24) 0%,rgba(143,214,202,.1) 34%,rgba(143,214,202,0) 66%);animation:stLicht 26s ease-in-out infinite alternate-reverse;will-change:transform}
body.studio .svc-final .container{position:relative;z-index:2;text-align:left;background:none;border-radius:0;padding-top:0;padding-bottom:0;max-width:1200px}
body.studio .svc-final h2{font-size:clamp(3rem,8vw,7.4rem);color:var(--st-creme);margin:0}
body.studio .svc-final h2 .gradient-text{color:var(--st-mint)}
body.studio .svc-final p{margin:28px 0 36px;max-width:46ch;font-size:1.12rem;line-height:1.6;color:rgba(245,241,232,.72)}
body.studio .svc-final .rv-cta-wrap{justify-content:flex-start;margin-top:30px}
body.studio .svc-section.rv-block+.svc-final,body.studio .svc-final{margin-top:0}



/* ---------- werkstrook: echte cases bij de dienst ---------- */
body.studio .st-werk{position:relative;background:var(--st-creme);padding:clamp(80px,9vw,130px) 0;border-top:1px solid var(--st-lijn)}
body.studio .st-werk-kop{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:clamp(32px,4vw,52px)}
body.studio .st-werk .st-kop{font-size:clamp(2.3rem,4.6vw,4.4rem);color:var(--st-ink);margin:0}
body.studio .st-werk .st-kop em{color:var(--st-tq)}
body.studio .st-werk-alle{flex:none;color:var(--st-tq);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(3,83,82,.4);padding-bottom:2px}
body.studio .st-werk-alle:hover{border-bottom-color:var(--st-tq)}
body.studio .st-werk-lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
body.studio .st-werk--twee .st-werk-lijst{grid-template-columns:repeat(2,minmax(0,1fr))}
body.studio .st-werk-item{display:flex;flex-direction:column;text-decoration:none;color:var(--st-ink)}
body.studio .st-werk-beeld{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:#E6DFD1;margin-bottom:22px;clip-path:inset(0 0 0 0);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}
body.studio .st-werk-beeld img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .9s var(--st-ease)}
body.studio .st-werk-item:hover .st-werk-beeld img,body.studio .st-werk-item:focus-visible .st-werk-beeld img{transform:scale(1.07)}
body.studio .st-werk-cijfer{display:block;font-size:.95rem;line-height:1.4;color:var(--st-tekst);padding-top:16px;border-top:1px solid var(--st-lijn)}
body.studio .st-werk-cijfer b{display:block;font-family:var(--st-cond);font-weight:800;font-size:clamp(2.6rem,4vw,3.6rem);line-height:.95;letter-spacing:-.01em;color:var(--st-ink);margin-bottom:6px}
body.studio .st-werk-naam{display:block;margin-top:14px;font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.35rem;line-height:1;transition:color .25s}
body.studio .st-werk-item:hover .st-werk-naam{color:var(--st-tq)}
body.studio .st-werk-meta{display:block;margin-top:6px;font-size:.85rem;color:var(--st-grijs)}
body.studio .st-werk-item:focus-visible{outline:3px solid #0E9384;outline-offset:6px;border-radius:4px}
body.studio .st-werk--een .st-werk-lijst{grid-template-columns:1fr}
body.studio .st-werk--een .st-werk-item{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto;column-gap:clamp(28px,5vw,72px)}
body.studio .st-werk--een .st-werk-beeld{aspect-ratio:16/10;margin:0;grid-row:1 / span 4}
body.studio .st-werk--een .st-werk-cijfer{grid-row:2}body.studio .st-werk--een .st-werk-naam{grid-row:3}body.studio .st-werk--een .st-werk-meta{grid-row:4}
body.studio .st-werk--een .st-werk-cijfer b{font-size:clamp(4rem,7vw,6.4rem)}
.sc-ready body.studio .st-werk-lijst>li .st-werk-beeld{clip-path:inset(100% 0 0 0)}
.sc-ready body.studio .st-werk-lijst>li.sc-in .st-werk-beeld{clip-path:inset(0 0 0 0)}
@media (max-width:900px){
  body.studio .st-werk-kop{flex-direction:column;align-items:flex-start}
  body.studio .st-werk-lijst,body.studio .st-werk--twee .st-werk-lijst{grid-template-columns:1fr;gap:44px}
  body.studio .st-werk-beeld{aspect-ratio:16/11}
  body.studio .st-werk--een .st-werk-item{grid-template-columns:1fr;grid-template-rows:none}
  body.studio .st-werk--een .st-werk-item>*{grid-row:auto !important}
  body.studio .st-werk--een .st-werk-beeld{grid-row:auto;margin-bottom:22px}
}
@media (prefers-reduced-motion:reduce){
  body.studio .st-werk-beeld{clip-path:none !important;transition:none}
  body.studio .st-werk-beeld img{transition:none}
}


/* ---------- ai-bureau-enschede: plaatsnamen en adreskaart ---------- */
body.studio .loc-areas{display:flex;flex-wrap:wrap;gap:0;margin:clamp(24px,3vw,36px) 0;border-top:1px solid var(--st-lijn)}
body.studio .loc-areas span{flex:0 0 25%;padding:14px 12px 14px 0;border-bottom:1px solid var(--st-lijn);background:none;border-radius:0;font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.35rem;line-height:1;color:var(--st-ink)}
body.studio .nap-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;margin-top:clamp(28px,3vw,40px);background:none;border:0;border-top:1px solid var(--st-lijn);border-radius:0;box-shadow:none;padding:0}
body.studio .nap-card>div{padding:20px 20px 0 0}
body.studio .nap-card>div+div{border-left:1px solid var(--st-lijn);padding-left:20px}
body.studio .nap-card h3{font-size:.78rem;font-family:var(--font-body);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--st-tq);margin:0 0 8px}
body.studio .nap-card p{margin:0;color:var(--st-ink)}
@media (max-width:900px){body.studio .loc-areas span{flex-basis:50%}body.studio .nap-card>div+div{border-left:0;padding-left:0}}


/* ==========================================================================
   Conversiepagina's: contact, start, offerte, intake, bedankt (26 okt 2026)
   Alleen uiterlijk: velden, namen en verzendadressen blijven gelijk.
   ========================================================================== */
body.studio .contact-hero{text-align:left}
body.studio .contact-hero .start-hero-knoppen{margin-top:clamp(28px,3vw,38px);display:flex;gap:14px;flex-wrap:wrap}
body.studio .contact-hero .btn-primary{background:var(--st-mint);border-color:var(--st-mint);color:var(--st-nacht)}
body.studio .contact-hero .btn-ghost,body.studio .contact-hero .btn-secondary{border:1px solid rgba(245,241,232,.4);color:var(--st-creme);background:none}
/* koppen */
body.studio :is(.ct-booking-section,.contact-section,.start-blok,.offerte-section,.formsection,.bedankt-sectie) h2,
body.studio :is(.intake-header,.bedankt-sectie) h1{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.01em;color:var(--st-ink)}
body.studio :is(.ct-booking-section,.start-blok,.bedankt-sectie) h2{font-size:clamp(2.3rem,4.6vw,4.4rem)}
body.studio :is(.contact-section,.offerte-section) h2,body.studio .formsection h2{font-size:clamp(1.6rem,2.4vw,2.2rem)}
body.studio .intake-header h1,body.studio .bedankt-sectie h1{font-size:clamp(2.8rem,6vw,5.6rem);max-width:none}
body.studio .intake-header h1 em{font-family:var(--st-serif);font-style:italic;font-weight:400;text-transform:none;font-size:1.294em;line-height:0;color:var(--st-tq)}
body.studio :is(.ct-booking-section,.start-blok) :is(.eyebrow,.label,.svc-eyebrow){display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:0;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-tq)}
body.studio :is(.ct-booking-section,.start-blok) :is(.eyebrow,.label)::before{content:"";width:22px;height:1px;background:currentColor}
body.studio .start-blok,body.studio .contact-section,body.studio .ct-booking-section,body.studio .offerte-section{background:var(--st-creme)}
body.studio .start-blok:nth-of-type(even){background:var(--st-papier)}
/* kaarten en blokken: hoek 6px, lijnen in plaats van schaduw */
body.studio :is(.ct-card,.ct-form-card,.ct-booking-embed,.werk-kaart,.niveau-card,.fn,.formsection,.bedankt-kaart,.start-heel,.vergelijk-scroll,.start-merkscan,.start-na,.start-strook){border-radius:6px !important;box-shadow:none !important}
body.studio :is(.ct-card,.ct-form-card,.ct-booking-embed,.werk-kaart,.niveau-card:not(.niveau-card--vol),.fn,.formsection,.bedankt-kaart){background:var(--st-papier);border:1px solid var(--st-lijn)}
body.studio .niveau-card--vol{background:var(--st-nacht)}
body.studio :is(.niveau-card,.formsection,.fn) h3{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.6rem;line-height:1}
body.studio .niveau-prijs{font-family:var(--st-cond);font-weight:800;font-size:2rem}
body.studio .ct-card:hover{border-color:var(--st-tq)}
body.studio .ct-card-icon{border-radius:50%;background:rgba(3,83,82,.08);color:var(--st-tq)}
/* stappen: lijnen met omlijnde nummers */
body.studio .ct-steps{border-left:0 !important;padding-left:0 !important;background:none}
body.studio .ct-steps>:is(h3,h4,strong,.start-col-h,p:first-child){font-family:var(--st-cond);font-weight:800;font-style:normal;text-transform:uppercase;font-size:1.6rem;color:var(--st-ink)}
body.studio .ct-step{border-top:1px solid var(--st-lijn);padding-top:14px}
body.studio .ct-step-num{background:none !important;color:transparent !important;-webkit-text-stroke:1.1px var(--st-tq);font-family:var(--st-cond);font-weight:800;font-size:1.9rem;width:auto;height:auto;border-radius:0}
body.studio .ct-step :is(strong,h4){font-style:normal}
body.studio .ct-step p{font-style:normal}
/* opties en keuzes */
body.studio :is(.fn-opt,.start-option span,.choice span){border-radius:4px !important}
body.studio :is(.fn-opt:has(input:checked),.start-option input:checked+span,.choice input:checked+span){border-color:var(--st-tq) !important;background:rgba(3,83,82,.08) !important;color:var(--st-ink)}
body.studio :is(.fn,.formsection,.ct-form-card) :is(input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],textarea,select){border-radius:4px;background:var(--st-creme);border:1px solid var(--st-lijn)}
body.studio :is(.fn,.formsection,.ct-form-card) :is(input,textarea,select):focus{border-color:var(--st-tq);outline:2px solid rgba(3,83,82,.18);outline-offset:0}
body.studio .section-num{font-family:var(--st-cond);font-weight:800;font-size:1.4rem;color:transparent;-webkit-text-stroke:1px var(--st-tq)}
body.studio .btn-submit,body.studio .fn-next{border-radius:100px !important;background:var(--st-ink) !important;color:var(--st-creme) !important}
body.studio .btn-submit:hover,body.studio .fn-next:hover{background:var(--st-tq) !important}
body.studio .ct-booking-section+.contact-section::before{display:none}
body.studio .ct-quote-block{border-left:0 !important;padding-left:0 !important;background:none}
body.studio .ct-quote-block>h3,body.studio .start-h3,body.studio .start-blok .werk-kaart h3,body.studio .start-aanvraag .start-merkscan h3,body.studio .start-blok h3:not(.verhaal-stappen-kop){font-family:var(--st-cond);font-weight:800;font-style:normal;text-transform:uppercase;letter-spacing:-.005em;line-height:1;color:var(--st-ink)}
body.studio .ct-quote-block>h3,body.studio .start-h3{font-size:clamp(1.6rem,2.4vw,2.2rem);margin-bottom:18px}
body.studio .start-blok .werk-kaart h3{font-size:1.45rem}
body.studio .verhaal-stappen-kop{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-tq)}
body.studio .verhaal-stappen h4,body.studio .verhaal-stappen strong{font-family:var(--st-cond);font-weight:800;text-transform:uppercase}
body.studio .start-col-h{font-family:var(--st-cond) !important;font-weight:800 !important;text-transform:uppercase;line-height:.95;font-size:clamp(1.8rem,2.8vw,2.6rem) !important;font-style:normal !important;color:var(--st-ink)}
body.studio .start-blok .niveau-card--vol h3:not(.x){color:var(--st-creme)}
body.studio #intakeForm h2{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:.95;letter-spacing:-.005em;color:var(--st-ink)}
/* bedankt */
body.studio .bedankt-check{background:var(--st-tq)}
body.studio .bedankt-stappen li span strong{font-weight:700}


/* ==========================================================================
   Over FayLux en portfolio (26 okt 2026)
   ========================================================================== */
/* koppen links, condensed */
body.studio :is(.founder-section,.about-values,.about-intermezzo,.about-proces,.about-niet,.about-faq,.about-cta,.portfolio-section) h2{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.01em;font-size:clamp(2.3rem,4.6vw,4.4rem);max-width:none}
body.studio :is(.founder-section,.about-values,.about-intermezzo,.about-proces,.about-niet,.about-faq,.about-cta,.portfolio-section) h2 .gradient-text,body.studio .intermezzo-slogan .gradient-text{font-family:var(--st-serif);font-style:italic;font-weight:400;text-transform:none;font-size:1.294em;line-height:0;-webkit-text-fill-color:currentColor;background:none}
body.studio :is(.founder-section,.about-values,.about-intermezzo,.about-proces,.about-niet,.about-faq) :is(h2,.label){color:var(--st-ink)}
body.studio :is(.founder-section,.about-values,.about-intermezzo,.about-proces,.about-niet,.about-faq) h2 .gradient-text{color:var(--st-tq)}
body.studio :is(.about-values,.about-proces,.about-niet,.about-faq,.portfolio-section,.cmp-pairs) .section-header{text-align:left;margin-left:0;max-width:none}
body.studio :is(.about-values,.about-proces,.about-niet,.about-faq) .section-header p{margin-left:0}
body.studio :is(.founder-section,.about-values,.about-intermezzo,.about-proces,.about-niet,.about-faq) .label{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:0;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-tq)}
body.studio :is(.founder-section,.about-values,.about-intermezzo,.about-proces,.about-niet,.about-faq) .label::before{content:"";width:22px;height:1px;background:currentColor}
body.studio :is(.founder-section,.about-values,.about-intermezzo,.about-proces,.about-niet,.about-faq){background:var(--st-creme);position:relative}
body.studio :is(.about-intermezzo,.about-niet){background:var(--st-papier)}
body.studio :is(.founder-section,.about-values,.about-proces,.about-niet,.about-faq,.about-cta,.about-intermezzo)::before{display:none !important}
/* Kevin */
body.studio .founder-photo-wrap{border-radius:4px;transform:rotate(-1.2deg);box-shadow:0 30px 70px rgba(12,29,35,.22)}
body.studio .founder-badge{border-radius:100px;background:var(--st-ink);color:var(--st-creme)}
body.studio .founder-section h2 .gradient-text{color:var(--st-tq)}
body.studio .founder-quote{border-left:0;padding:0;margin:22px 0 28px;font-family:var(--st-serif);font-style:italic;font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.2;color:var(--st-ink);background:none}
body.studio .founder-body h3{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.45rem;line-height:1;margin-top:26px}
body.studio .founder-tag{border-radius:100px;background:none;border:1px solid rgba(12,29,35,.2)}
body.studio .founder-feiten{gap:0;border-top:1px solid var(--st-lijn);background:none}
body.studio .founder-feit{background:none;border-radius:0;padding:22px 18px 0 0}
body.studio .founder-feit+.founder-feit{border-left:1px solid var(--st-lijn);padding-left:18px}
body.studio .founder-feit b{font-family:var(--st-cond);font-weight:800;font-size:clamp(2.6rem,4vw,3.6rem);line-height:1;color:var(--st-ink);letter-spacing:-.01em}
/* principes en stappen: genummerde lijnen */
body.studio :is(.values-grid,.proces-grid){gap:0;border-top:1px solid var(--st-lijn);counter-reset:stv}
body.studio :is(.value-card,.proces-stap){counter-increment:stv;background:none;border:0;border-radius:0;box-shadow:none !important;transform:none !important;padding:clamp(24px,3vw,34px) clamp(14px,2vw,26px) 0 0}
body.studio :is(.value-card,.proces-stap)+:is(.value-card,.proces-stap){border-left:1px solid var(--st-lijn);padding-left:clamp(14px,2vw,26px)}
body.studio .value-icon{display:none}
body.studio .value-card::before{content:counter(stv,decimal-leading-zero);display:block;margin-bottom:16px;font-size:.84rem;font-weight:600;letter-spacing:.08em;color:var(--st-grijs)}
body.studio .proces-nr{background:none !important;color:transparent !important;-webkit-text-stroke:1.2px var(--st-tq);font-family:var(--st-cond);font-weight:800;font-size:clamp(2.6rem,4vw,3.6rem);width:auto;height:auto;border-radius:0;display:block;margin-bottom:16px;line-height:1}
body.studio :is(.value-card,.proces-stap) h3{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1;color:var(--st-ink)}
body.studio :is(.value-card,.proces-stap) p{font-size:.95rem;line-height:1.6;color:var(--st-tekst)}
/* intermezzo */
body.studio .intermezzo-foto{border-radius:4px;transform:rotate(1.4deg);box-shadow:0 30px 70px rgba(12,29,35,.2)}
body.studio .intermezzo-slogan{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;line-height:.95;font-size:clamp(2.2rem,4vw,3.8rem);color:var(--st-ink)}
body.studio .intermezzo-slogan .gradient-text{color:var(--st-tq)}
/* wat we niet doen: handgetekend koraal kruis */
body.studio .niet-grid{gap:0 clamp(24px,4vw,56px);border-top:1px solid var(--st-lijn)}
body.studio .niet-item{background:none;border:0;border-bottom:1px solid var(--st-lijn);border-radius:0;box-shadow:none;padding:22px 0;gap:16px;align-items:flex-start}
body.studio .niet-item>svg:not(.st-kruis){display:none}
body.studio .niet-item strong{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.35rem;line-height:1;margin-bottom:8px;color:var(--st-ink)}
body.studio .niet-item p{font-size:.95rem;color:var(--st-tekst)}
body.studio .st-kruis{flex:none;width:30px;height:30px;color:var(--koraal,#E56B4C);overflow:visible}
body.studio .st-kruis path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.sc-ready body.studio .st-kruis path{stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .45s cubic-bezier(.65,0,.35,1)}
.sc-ready body.studio .st-kruis path+path{transition-delay:.35s}
.sc-ready body.studio .niet-grid>.sc-in .st-kruis path{stroke-dashoffset:0}
/* afsluiter als volle donkere sectie */
body.studio .about-cta{position:relative;overflow:hidden;isolation:isolate;background:var(--st-nacht);padding:clamp(96px,11vw,150px) 0}
body.studio .about-cta::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background-size:180px 180px;background-image:var(--st-korrel)}
body.studio .about-cta-inner{position:relative;z-index:2;background:none !important;border-radius:0;padding:0;text-align:left;max-width:none}
body.studio .about-cta h2{font-size:clamp(3rem,8vw,7.4rem);color:var(--st-creme)}
body.studio .about-cta h2 .gradient-text{color:var(--st-mint)}
body.studio .about-cta .label{color:var(--st-mint)}
body.studio .about-cta p{color:rgba(245,241,232,.72);margin-left:0;max-width:46ch}
body.studio .about-cta-btns{justify-content:flex-start}
body.studio .about-cta .btn-primary{background:var(--st-mint);border-color:var(--st-mint);color:var(--st-nacht)}
body.studio .about-cta .btn-ghost{border:1px solid rgba(245,241,232,.4);color:var(--st-creme);background:none}
body.studio .about-cta .rv-cta-wrap{justify-content:flex-start}
/* portfolio: donkere galerij blijft, kaarten strakker */
body.studio .portfolio-section{background:var(--st-nacht)}
body.studio .portfolio-section h2{color:var(--st-creme)}
body.studio .portfolio-section h2 .gradient-text{color:var(--st-mint)}
body.studio .pf-filter{border-radius:100px}
body.studio .pf-card{border-radius:4px !important}
body.studio .pf-card :is(.pf-title,h3){font-family:var(--st-cond);font-weight:800;text-transform:uppercase;letter-spacing:0;line-height:1}
body.studio .cmp,body.studio .cmp-pair .cmp{border-radius:4px}
body.studio .portfolio-cta,body.studio .portfolio-cta-inner{border-radius:0}
body.studio .portfolio-hero+.svc-breadcrumb{background:var(--st-nacht);border-bottom-color:var(--st-lijn-licht)}
body.studio .portfolio-hero+.svc-breadcrumb :is(li,a){color:rgba(245,241,232,.6)}
body.studio .portfolio-hero+.svc-breadcrumb li[aria-current]{color:var(--st-creme)}
body.studio .portfolio-cta{text-align:left;padding-top:clamp(40px,5vw,70px);border-top:1px solid var(--st-lijn-licht)}
body.studio .portfolio-cta h2{font-size:clamp(3rem,7vw,6.4rem)}
body.studio .portfolio-cta p{margin-left:0}
body.studio .portfolio-cta-btns{justify-content:flex-start}
body.studio .portfolio-cta .btn-primary{background:var(--st-mint);border-color:var(--st-mint);color:var(--st-nacht)}
body.studio .portfolio-cta .btn-primary:hover{background:var(--st-creme);border-color:var(--st-creme)}
body.studio .portfolio-cta .btn-ghost{border:1px solid rgba(245,241,232,.4);color:var(--st-creme);background:none}
body.studio .portfolio-cta .rv-cta-wrap{justify-content:flex-start}

/* galerij met diepte: middelste kolom schuift trager mee (alleen als alles zichtbaar is) */
body.studio .st-pf-diepte .pf-grid:not(:has(>[style*="none"]))>.pf-card:nth-child(3n+2){transform:translateY(calc((var(--sc-p,.5) - .5) * -160px))}
@media (max-width:900px){
  body.studio :is(.values-grid,.proces-grid){grid-template-columns:1fr}
  body.studio :is(.value-card,.proces-stap)+:is(.value-card,.proces-stap){border-left:0;padding-left:0;border-top:1px solid var(--st-lijn);margin-top:24px}
  body.studio .founder-feiten{grid-template-columns:repeat(2,1fr)}
  body.studio .founder-feit:nth-child(3){border-left:0;padding-left:0}
  body.studio .st-pf-diepte .pf-grid>.pf-card{transform:none !important}
}
@media (prefers-reduced-motion:reduce){
  body.studio .st-kruis path{stroke-dashoffset:0 !important;transition:none !important}
  body.studio .st-pf-diepte .pf-grid>.pf-card{transform:none !important}
}


/* ==========================================================================
   Cases (k3): lichte basis blijft, letters en hoeken gaan mee (26 okt 2026)
   ========================================================================== */
body.studio.k3{--sc-font-display:var(--st-cond);--k3-r:6px;--k3-r-m:6px;--k3-r-s:4px;--k3-teal:#035352}
body.studio.k3 :is(.k3-h,.k3-kaart__naam,.k3-podium__kop h2,.k3-slot__paneel h2,.k3-stap h3){font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.92}
body.studio.k3 :is(.k3-h,.k3-slot__paneel h2) em{font-family:var(--st-serif);font-style:italic;font-weight:400;text-transform:none;font-size:1.294em;line-height:0;letter-spacing:0;color:var(--st-tq)}

body.studio.k3 .k3-h--verhaal{font-size:clamp(2.8rem,5.6vw,6rem)}
/* breedte in em: ch hangt van het actieve font af en verspringt bij de font-swap */
body.studio.k3 .k3-chero h1.k3-h--verhaal{max-width:8.9em}
body.studio.k3 .k3-stap h3{font-size:1.6rem}

body.studio.k3 :is(.k3-held__cijfers b,.k3-kaart__res b,.k3-winst__getal b,.k3-scores__maten b,.k3-snel b,.k3-staaf b){font-weight:800;letter-spacing:-.01em}
/* zinnen die geen kop zijn: leesbaar font */
body.studio.k3 .k3-big{font-family:var(--st-serif);font-style:italic;font-weight:400;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.15;color:var(--st-tq)}
body.studio.k3 :is(.k3-vn__na,.k3-vn2__na p,.k3-seo__stappen b,.k3-mini__res b){font-family:var(--font-display);text-transform:none;letter-spacing:-.01em}
body.studio.k3 .k3-review blockquote{font-family:var(--st-serif);font-style:italic;font-weight:400;letter-spacing:0;line-height:1.15;font-size:clamp(1.8rem,3vw,2.9rem)}
/* minder schaduw, meer lijn */
body.studio.k3 :is(.k3-paneel,.k3-kaart__beeld,.k3-stap,.k3-vn2__voor,.k3-vn2__na,.k3-scores,.k3-grid>*){box-shadow:none}
body.studio.k3 .k3-paneel:not(.k3-probleem){border:1px solid var(--st-lijn)}


/* ==========================================================================
   Blog: artikel en blogindex (26 okt 2026). Werkt ook voor pagina's die de
   CRM bouwt uit templates/blog/FL-006/.
   ========================================================================== */
body.studio .article-hero{padding-bottom:clamp(56px,6vw,90px)}
body.studio .article-hero h1{font-size:clamp(2.6rem,5.2vw,5rem);color:var(--st-creme);max-width:8.5em;margin:0}
body.studio .article-back{display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(22px,2.6vw,30px);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-mint);text-decoration:none}
body.studio .article-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:clamp(22px,2.6vw,30px);font-size:.9rem;color:rgba(245,241,232,.7)}
body.studio .article-meta>*+*::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--st-mint);margin-right:22px;vertical-align:middle;transform:translateY(-1px)}
body.studio .article-featured{border-radius:4px;overflow:hidden;margin-top:clamp(32px,4vw,52px);box-shadow:0 40px 90px rgba(0,0,0,.45)}
body.studio .article-featured:has(img[src=""]),body.studio .article-featured:not(:has(img)){display:none}
body.studio .article-hero+.svc-breadcrumb{border-top:0}
body.studio .article-body{background:var(--st-creme);padding:clamp(64px,7vw,110px) 0}
body.studio .article-body>.container{max-width:760px}
body.studio .article-body p,body.studio .article-body li{font-size:1.08rem;line-height:1.75;color:var(--st-tekst)}
body.studio .article-body .article-lead{font-family:var(--st-serif);font-style:italic;font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.3;color:var(--st-ink);margin-bottom:clamp(36px,4vw,52px);padding-bottom:clamp(28px,3vw,40px);border-bottom:1px solid var(--st-lijn)}
body.studio .article-body h2{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.95;font-size:clamp(2rem,3.2vw,2.8rem);color:var(--st-ink);margin:clamp(48px,5vw,68px) 0 18px}
body.studio .article-body h3{font-family:var(--font-display);font-weight:700;font-size:1.3rem;line-height:1.3;color:var(--st-ink);margin:32px 0 10px}
body.studio .article-body a:not(.btn){color:var(--st-tq);text-decoration:none;border-bottom:1px solid rgba(3,83,82,.4)}
body.studio .article-body a:not(.btn):hover{border-bottom-color:var(--st-tq)}
body.studio .article-body blockquote{margin:36px 0;padding:0 0 0 24px;border-left:2px solid var(--koraal,#E56B4C);font-family:var(--st-serif);font-style:italic;font-size:1.5rem;line-height:1.35;color:var(--st-ink)}
body.studio .article-body :is(ul,ol){padding-left:1.2em}
body.studio .article-body li::marker{color:var(--st-tq)}
body.studio .article-body strong{color:var(--st-ink)}
body.studio .article-body table{border-collapse:collapse;width:100%;margin:28px 0;font-size:.98rem}
body.studio .article-body :is(th,td){border-bottom:1px solid var(--st-lijn);padding:12px 10px 12px 0;text-align:left}
body.studio .blog-readmore{align-self:center}
body.studio .blog-cta{text-align:left;margin-top:clamp(56px,6vw,90px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--st-lijn)}
body.studio .blog-cta h2{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;line-height:.92;font-size:clamp(2.4rem,5vw,4.6rem);color:var(--st-ink);margin:0 0 16px}
body.studio .blog-cta p{margin:0 0 26px;color:var(--st-tekst);max-width:52ch}
body.studio .article-body+.svc-final{margin-top:0}
body.studio .article-body pre{max-width:100%;overflow-x:auto;margin:26px 0;padding:18px 20px;border-radius:4px;background:var(--st-nacht);color:var(--st-mint);font:500 .88rem/1.6 ui-monospace,'SF Mono',Menlo,Consolas,monospace}
body.studio .article-body pre code{background:none;color:inherit;padding:0;font:inherit;white-space:pre}
body.studio .article-body :not(pre)>code{background:rgba(3,83,82,.08);color:var(--st-tq);padding:2px 6px;border-radius:3px;font-size:.92em;overflow-wrap:anywhere}
/* leesvoortgang */
.st-lees{position:fixed;left:0;top:0;z-index:2000;height:3px;width:100%;background:var(--st-mint,#8FD6CA);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
/* blogindex: redactionele lijst in plaats van kaarten met nepbeeld */
body.studio .blog-section{background:var(--st-creme);padding:clamp(64px,7vw,110px) 0}
body.studio .blog-grid{display:block;border-top:1px solid var(--st-lijn)}
body.studio .blog-card{display:block;background:none;border:0;border-bottom:1px solid var(--st-lijn);border-radius:0;box-shadow:none !important;transform:none !important;text-decoration:none;color:var(--st-ink)}
body.studio .blog-card-media{display:none}
body.studio .blog-card-info{display:grid;grid-template-columns:minmax(120px,.22fr) minmax(0,1fr) minmax(0,.8fr) 32px;column-gap:clamp(20px,3vw,44px);align-items:baseline;padding:clamp(24px,2.8vw,36px) 0}
body.studio .blog-cat{grid-column:1;grid-row:1;justify-self:start;background:none !important;border:0;padding:0;border-radius:0;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-tq) !important}
body.studio .blog-card-info h2,body.studio .blog-card-info h3{grid-column:2;grid-row:1;margin:0;font-family:var(--st-cond);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.95;font-size:clamp(1.6rem,2.6vw,2.4rem);color:var(--st-ink);transition:color .25s,transform .35s var(--st-ease)}
body.studio .blog-card-info p{grid-column:3;grid-row:1;margin:0;font-size:.95rem;line-height:1.6;color:var(--st-tekst)}
body.studio .blog-readmore{grid-column:4;grid-row:1;justify-self:end;font-size:0;color:var(--st-ink) !important}
body.studio .blog-readmore::after{content:"\2192";font-size:1.4rem;display:inline-block;transition:transform .3s var(--st-ease)}
body.studio .blog-card:hover .blog-card-info h2,body.studio .blog-card:focus-visible .blog-card-info h2{color:var(--st-tq);transform:translateX(8px)}
body.studio .blog-card:hover .blog-readmore::after{transform:translateX(6px);color:var(--st-tq)}
body.studio .blog-card:focus-visible{outline:3px solid #0E9384;outline-offset:4px}
@media (max-width:900px){
  body.studio .blog-card-info{grid-template-columns:minmax(0,1fr) 28px;row-gap:10px}
  body.studio .article-meta{gap:4px 14px}
  body.studio .article-meta>*+*::before{display:none}
  body.studio .blog-cat{grid-column:1;grid-row:1}
  body.studio .blog-card-info h2,body.studio .blog-card-info h3{grid-column:1;grid-row:2}
  body.studio .blog-card-info p{grid-column:1;grid-row:3}
  body.studio .blog-readmore{grid-column:2;grid-row:2}
}
@media (prefers-reduced-motion:reduce){.st-lees{display:none}body.studio .blog-card:hover .blog-card-info h2{transform:none}}

/* ---------- één contactknop en een compacte cookiebanner ---------- */
body:is(.studio,.st-knop) .foto-contact{background:var(--st-ink);color:var(--st-creme);box-shadow:0 18px 40px rgba(7,17,20,.32),0 0 0 1px rgba(245,241,232,.08)}
body:is(.studio,.st-knop) .foto-contact .fc-tekst b{color:var(--st-creme);font-family:var(--font-body);font-weight:700;font-size:.95rem}
body:is(.studio,.st-knop) .foto-contact .fc-tekst small{color:rgba(245,241,232,.62)}
body:is(.studio,.st-knop) .foto-contact .fc-online{background:var(--st-mint);border-color:var(--st-ink)}
body:is(.studio,.st-knop) .foto-contact:hover,body:is(.studio,.st-knop) .foto-contact:focus-visible{background:var(--st-tq)}
body:is(.studio,.st-knop) .foto-contact:hover .fc-online,body:is(.studio,.st-knop) .foto-contact:focus-visible .fc-online{border-color:var(--st-tq)}
body:is(.studio,.st-knop) .foto-contact:focus-visible{outline-color:var(--st-mint)}
@media (min-width:901px){
  body:is(.studio,.st-knop) .cookie-banner{left:22px;right:auto;bottom:22px;padding:0;width:min(420px,calc(100vw - 340px))}
  body:is(.studio,.st-knop) .cookie-inner{max-width:none}
}
body:is(.studio,.st-knop) .cookie-inner{border-radius:6px;background:var(--st-papier);border-color:var(--st-lijn);box-shadow:0 24px 60px rgba(7,17,20,.18);padding:18px 20px;gap:14px}
body:is(.studio,.st-knop) .cookie-text{flex-basis:100%;color:var(--st-tekst);font-size:.84rem}
body:is(.studio,.st-knop) .cookie-text svg{color:var(--st-tq)}
body:is(.studio,.st-knop) .cookie-text a{color:var(--st-tq)}
body:is(.studio,.st-knop) .cookie-actions{width:100%;justify-content:flex-end}
body:is(.studio,.st-knop) .cookie-btn{border-radius:100px;padding:10px 18px}
body:is(.studio,.st-knop) .cookie-btn-accept{background:var(--st-ink);color:var(--st-creme)}
body:is(.studio,.st-knop) .cookie-btn-accept:hover{background:var(--st-tq)}
body:is(.studio,.st-knop) .cookie-btn-decline{border-color:rgba(12,29,35,.3);color:var(--st-ink)}
/* cookiebanner mobiel: compacte balk onderaan, laat de hero vrij */
@media (max-width:900px){body:is(.studio,.st-knop) .cookie-banner{left:10px;right:10px;bottom:10px;padding:0;width:auto}body:is(.studio,.st-knop) .cookie-inner{padding:12px 14px;gap:10px;flex-wrap:wrap}body:is(.studio,.st-knop) .cookie-text{font-size:.74rem;line-height:1.4;gap:0}body:is(.studio,.st-knop) .cookie-text svg{display:none}body:is(.studio,.st-knop) .cookie-actions{gap:8px}body:is(.studio,.st-knop) .cookie-btn{padding:8px 14px;font-size:.8rem}}

/* ---------- volgring (zelfde als homepage) ---------- */
.mk-ring{position:fixed;left:0;top:0;z-index:3000;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:1.5px solid #0E9384;pointer-events:none;opacity:0;display:flex;align-items:center;justify-content:center;transition:width .28s cubic-bezier(.16,1,.3,1),height .28s cubic-bezier(.16,1,.3,1),margin .28s cubic-bezier(.16,1,.3,1),background .2s,border-color .2s,opacity .2s}
.mk-ring.is-zichtbaar{opacity:1}
.mk-ring.is-link{width:44px;height:44px;margin:-22px 0 0 -22px;background:rgba(14,147,132,.14)}
.mk-ring.is-label{width:68px;height:68px;margin:-34px 0 0 -34px;background:#0E9384;border-color:#0E9384}
.mk-ring.is-druk{width:22px;height:22px;margin:-11px 0 0 -11px}
.mk-ring span{font:700 .72rem/1 var(--font-body);letter-spacing:.04em;color:#fff;opacity:0;transform:scale(.6);transition:opacity .2s,transform .28s cubic-bezier(.16,1,.3,1)}
.mk-ring.is-label span{opacity:1;transform:none}

/* ---------- scrollcraft-basis (alleen wat deze pagina's gebruiken) ---------- */
.sc-act--pinned{position:relative}
.sc-ready [data-sc-cue]{opacity:0;will-change:opacity,transform}
[data-sc-parallax]{will-change:transform}
.sc-ready [data-sc-in],.sc-ready [data-sc-stagger]>*{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s var(--st-ease,ease),transform .7s var(--st-ease,ease)}
.sc-ready [data-sc-in].sc-in,.sc-ready [data-sc-stagger]>.sc-in{opacity:1;transform:none}



/* ==========================================================================
   Componenten
   ========================================================================== */
/* hero met diepte: licht (achter), browser (midden), telefoon (voor) */
body.studio .st-diep{position:relative;padding:0 8% 9% 0}
body.studio .st-telefoon{position:absolute;right:0;bottom:-4%;width:27%;aspect-ratio:420/909;border-radius:22px;overflow:hidden;border:5px solid #0B1A1F;outline:1px solid rgba(245,241,232,.16);box-shadow:-24px 34px 70px rgba(0,0,0,.6);transform:rotate(3deg);background:#0B1A1F}
body.studio .st-telefoon img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
@media (max-width:900px){body.studio .st-diep{padding:0 14% 12% 0}body.studio .st-telefoon{width:32%}}

/* de bouwscène: links de stappen, rechts een scherm dat zich opbouwt */
body.studio .svc-section.st-bouw{padding:0;overflow:visible}
body.studio .st-bouw-stage{position:relative;z-index:2;padding:clamp(90px,10vw,130px) 0}
body.studio .sc-act--pinned .st-bouw-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;display:flex;align-items:center;padding:70px 0 0}
body.studio .st-bouw-stage>.container{width:100%}
body.studio .st-bouw-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,96px);align-items:center}
body.studio .st-bouw h2{font-size:clamp(2.2rem,4vw,3.8rem);margin-bottom:clamp(24px,3vw,36px)}
body.studio .st-bouw-stappen{list-style:none;margin:0;padding:0;border-top:1px solid var(--st-lijn-licht);counter-reset:sbw}
body.studio .st-bouw-stappen li{counter-increment:sbw;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:12px;padding:14px 0;border-bottom:1px solid var(--st-lijn-licht);transition:opacity .45s var(--st-ease)}
body.studio .st-bouw-stappen li::before{content:counter(sbw,decimal-leading-zero);grid-row:1 / span 2;font-size:.8rem;font-weight:600;letter-spacing:.08em;color:var(--st-mint);padding-top:.35em}
body.studio .st-bouw-stappen strong{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:clamp(1.4rem,2vw,1.9rem);line-height:1;color:var(--st-creme)}
body.studio .st-bouw-stappen p{margin:6px 0 0;font-size:.94rem;line-height:1.55;color:rgba(245,241,232,.7);max-width:44ch;display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s var(--st-ease),opacity .45s var(--st-ease),margin .45s}
/* vastgezet: alleen de actieve stap staat open */
body.studio .sc-act--pinned .st-bouw-stappen li{opacity:.38}
body.studio .sc-act--pinned .st-bouw-stappen li.is-aan{opacity:1}
body.studio .sc-act--pinned .st-bouw-stappen li:not(.is-aan) p{opacity:0;max-height:0;margin:0;overflow:hidden}
body.studio .sc-act--pinned .st-bouw-stappen li.is-aan p{max-height:6em}

body.studio .st-scherm{position:relative;border-radius:8px;overflow:hidden;background:#FBF8F1;box-shadow:0 40px 100px rgba(0,0,0,.55);transform:rotate(1.2deg)}
body.studio .st-scherm-balk{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#0E1E23}
body.studio .st-scherm-balk i{width:9px;height:9px;border-radius:50%;background:#2B3F45}
body.studio .st-scherm-balk span{margin-left:10px;font-size:.68rem;color:rgba(245,241,232,.6);background:#0A171B;padding:4px 12px;border-radius:20px}
body.studio .st-scherm-vlak{position:relative;aspect-ratio:16/11;overflow:hidden}
body.studio .st-laag{position:absolute;inset:0;transition:opacity .6s var(--st-ease),transform .6s var(--st-ease)}
/* standaard (niet vastgezet): eindbeeld */
body.studio .st-l0,body.studio .st-l1,body.studio .st-l3{opacity:0}
body.studio .sc-act--pinned .st-laag{opacity:0;transform:translateY(14px)}
body.studio .sc-act--pinned[data-st-fase="0"] .st-l0,
body.studio .sc-act--pinned[data-st-fase="1"] .st-l1,
body.studio .sc-act--pinned[data-st-fase="2"] .st-l2,
body.studio .sc-act--pinned[data-st-fase="3"] .st-l2,body.studio .sc-act--pinned[data-st-fase="3"] .st-l3,
body.studio .sc-act--pinned[data-st-fase="4"] .st-l2,body.studio .sc-act--pinned[data-st-fase="4"] .st-l4{opacity:1;transform:none}
/* 0 gesprek */
body.studio .st-l0{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:8% 10%}
body.studio .svc-section.ink .st-bel{margin:0;max-width:72%;padding:12px 16px;border-radius:14px 14px 14px 4px;background:#E9E2D3;font-size:.95rem;line-height:1.4;color:var(--st-ink)}
body.studio .svc-section.ink .st-bel--jij{align-self:flex-end;border-radius:14px 14px 4px 14px;background:var(--st-tq);color:var(--st-creme)}
/* 1 schets */
body.studio .st-l1{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto auto auto 1fr;gap:10px;padding:6% 7%}
body.studio .st-wf{border:1.5px dashed rgba(12,29,35,.35);border-radius:4px;min-height:14px}
body.studio .st-wf-nav{grid-column:1 / -1;height:18px}
body.studio .st-wf-kop{grid-column:1 / 3;height:46px;margin-top:8px}
body.studio .st-wf-tekst{grid-column:1 / 3;height:28px}
body.studio .st-wf-knop{grid-column:1;height:26px;border-radius:30px}
body.studio .st-wf-beeld{grid-column:3;grid-row:2 / 5}
body.studio .st-wf-blok{height:auto;min-height:40px}
/* 2 ontwerp */
body.studio .st-l2{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:auto 1fr auto auto 1fr;column-gap:7%;padding:5% 7% 7%;background:var(--st-creme)}
body.studio .st-o-nav{grid-column:1 / -1;display:flex;align-items:center;gap:8%;font-size:.62rem;letter-spacing:.14em;color:var(--st-ink);padding-bottom:4%;border-bottom:1px solid var(--st-lijn)}
body.studio .st-o-nav i{flex:none;width:9%;height:4px;border-radius:2px;background:rgba(12,29,35,.25)}
body.studio .st-o-nav b{margin-right:auto}
body.studio .st-o-kop{grid-column:1;align-self:end;font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,3.2vw,3rem);line-height:.9;color:var(--st-ink)}
body.studio .st-o-kop em{font-family:var(--st-serif);font-style:italic;font-weight:400;text-transform:none;color:var(--st-tq);font-size:1.2em}
body.studio .st-o-tekst{grid-column:1;height:30px;margin-top:10px;background:repeating-linear-gradient(to bottom,rgba(12,29,35,.18) 0 4px,transparent 4px 10px)}
body.studio .st-o-knop{grid-column:1;justify-self:start;margin-top:12px;padding:8px 14px;border-radius:30px;background:var(--st-ink);color:var(--st-creme);font-size:.68rem;font-weight:600}
body.studio .st-o-beeld{grid-column:2;grid-row:2 / 6;margin-top:10%;border-radius:4px;background:url('/pf-oplevering-interieur-800.webp') center/cover,#cfc6b4}
/* 3 code */
body.studio .st-l3{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:12px;padding:7%;background:linear-gradient(to top,rgba(7,17,20,.92) 0%,rgba(7,17,20,.75) 55%,rgba(7,17,20,0) 100%)}
body.studio .st-l3 pre{margin:0;font:500 clamp(.62rem,1.05vw,.82rem)/1.6 ui-monospace,'SF Mono',Menlo,Consolas,monospace;color:var(--st-mint);white-space:pre}
body.studio .st-chip{font-size:.72rem;font-weight:600;padding:6px 12px;border-radius:30px;border:1px solid rgba(143,214,202,.5);color:var(--st-creme)}
/* 4 meten */
body.studio .st-l4{inset:auto 7% 7% auto;width:44%;height:auto;padding:14px 16px 10px;border-radius:6px;background:var(--st-papier);box-shadow:0 18px 40px rgba(7,17,20,.25)}
body.studio .st-meet-label{display:block;font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--st-grijs);margin-bottom:6px}
body.studio .st-l4 svg{display:block;width:100%;height:56px;overflow:visible}
body.studio .st-l4 path{fill:none;stroke:var(--st-tq);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--st-ease) .2s}
body.studio .sc-act--pinned:not([data-st-fase="4"]) .st-l4 path{stroke-dashoffset:260}
@media (max-width:900px){
  body.studio .st-bouw-grid{grid-template-columns:1fr}
  body.studio .st-scherm{transform:none}
}
@media (prefers-reduced-motion:reduce){
  body.studio .st-laag,body.studio .st-bouw-stappen li,body.studio .st-bouw-stappen p,body.studio .st-l4 path{transition:none}
}


/* ==========================================================================
   Onderdelen van de overige dienstpagina's (26 okt 2026)
   ========================================================================== */
body.studio .svc-section .container>h3{font-size:clamp(1.35rem,1.9vw,1.7rem);color:var(--st-ink);margin:clamp(26px,3vw,36px) 0 10px}
body.studio .svc-section.ink h3{color:var(--st-creme)}
body.studio .svc-pain.numbered .svc-pain-card{padding-left:0}

/* mock-kaarten in de hero */
body.studio .mock-card{border-radius:6px;background:#0D1B20;border:1px solid var(--st-lijn-licht);box-shadow:0 40px 90px rgba(0,0,0,.55),0 8px 20px rgba(0,0,0,.3);transform:rotate(-1.4deg)}
body.studio .svc-hero-visual>img,body.studio .svc-hero-visual picture img{border-radius:6px;box-shadow:0 40px 90px rgba(0,0,0,.55);transform:rotate(1.2deg)}

/* Core Web Vitals-meters: kolommen met lijnen, ring vult zich bij het scrollen */
body.studio .svc-gauges{gap:0;border-top:1px solid var(--st-lijn);margin-top:clamp(32px,4vw,48px)}
body.studio .svc-gauge,body.studio .svc-section.alt .svc-gauge{background:none;border:0;border-radius:0;padding:clamp(26px,3vw,40px) clamp(14px,2vw,28px) 0;text-align:left}
body.studio .svc-gauge+.svc-gauge{border-left:1px solid var(--st-lijn)}
body.studio .svc-gauge .ring{width:120px;height:120px;margin:0 0 20px;--st-t:clamp(0,(var(--sc-p,1) - .15) / .35,1);background:conic-gradient(var(--st-tq) calc(var(--p,88%) * var(--st-t)),rgba(12,29,35,.1) 0)}
body.studio .svc-gauge .ring i,body.studio .svc-section.alt .svc-gauge .ring i{width:100px;height:100px;background:var(--st-creme);font-family:var(--st-cond);font-weight:800;font-style:normal;font-size:1.6rem;color:var(--st-ink)}
body.studio .svc-section.alt .svc-gauge .ring i{background:var(--st-papier)}
body.studio .svc-gauge strong{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.6rem;line-height:1;color:var(--st-ink);margin-bottom:6px}
body.studio .svc-gauge small{font-size:.95rem;color:var(--st-tekst)}

/* posities in Google: balken groeien mee met het scrollen */
body.studio .mock-rank .bar{transform-origin:bottom;transform:scaleY(var(--st-groei,1));transition:transform .2s linear}
body.studio .st-hero-scroll{--st-groei:clamp(.55,(var(--sc-p,1) - .44) / .2,1)}
body.studio .mock-rank .bar span{transform:scaleY(calc(1 / max(var(--st-groei,1),.55)));transform-origin:bottom}

/* AI-antwoord: jouw merk licht op */
body.studio .mock-ai .ai-list li.you{transition:background .4s,border-color .4s}

/* lokale kaart: jouw bedrijf klimt naar plek 1 */
body.studio .svc-localwrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0;border:1px solid var(--st-lijn);border-radius:6px;overflow:hidden;background:var(--st-papier)}
body.studio .svc-map{border:0;border-radius:0;min-height:320px}
body.studio .svc-localcard{border:0;border-left:1px solid var(--st-lijn);border-radius:0;background:var(--st-papier);padding:clamp(20px,2.4vw,30px);justify-content:center;gap:0}
body.studio .svc-localrow{padding:16px 0;border-bottom:1px solid var(--st-lijn)}
body.studio .svc-localrow .info strong{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.3rem;line-height:1;color:var(--st-ink)}
body.studio .svc-localrow .rank{border-radius:50%;font-family:var(--st-cond);font-weight:800}
body.studio .svc-localrow.top .rank{background:var(--st-tq)}
body.studio .st-klim{--st-t:clamp(0,(var(--sc-p,1) - .36) / .2,1);--rij:74px}
body.studio .st-klim .svc-localrow{position:relative;height:var(--rij);padding:0;box-sizing:border-box;transition:transform .15s linear}
body.studio .st-klim .svc-localrow:last-child{border-bottom:0}
body.studio .st-klim .svc-localrow.top{transform:translateY(calc((1 - var(--st-t)) * 2 * var(--rij)));z-index:1;background:var(--st-papier)}
body.studio .st-klim .svc-localrow:not(.top){transform:translateY(calc((1 - var(--st-t)) * -1 * var(--rij)))}
body.studio .st-klim .svc-localrow.top .rank{transform:translateY(calc((1 - var(--st-t)) * -2 * var(--rij)));background:color-mix(in srgb,var(--st-tq) calc(var(--st-t) * 100%),rgba(12,29,35,.08))}
body.studio .st-klim .svc-localrow:not(.top) .rank{transform:translateY(calc((1 - var(--st-t)) * var(--rij)))}
body.studio .st-klim .svc-map .pin{transform:rotate(-45deg) translate(calc((1 - var(--st-t)) * -40px),calc((1 - var(--st-t)) * -40px));opacity:calc(.3 + var(--st-t) * .7)}

/* dashboard: balken groeien met het scrollen */
body.studio .svc-dash,body.studio .svc-section.alt .svc-dash{border-radius:6px;background:var(--st-papier);border-color:var(--st-lijn)}
body.studio .svc-dash .kpis{gap:0;border-top:1px solid var(--st-lijn)}
body.studio .svc-dash .kpi{background:none;border-radius:0;padding:16px 16px 18px 0}
body.studio .svc-dash .kpi+.kpi{border-left:1px solid var(--st-lijn);padding-left:16px}
body.studio .svc-dash .kpi b{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.7rem;line-height:1;color:var(--st-ink)}
body.studio .svc-dash .kpi span{font-size:.86rem;color:var(--st-tekst)}
body.studio .svc-chart{height:180px;gap:14px}
body.studio .svc-chart i{border-radius:2px 2px 0 0;background:var(--st-tq);transform-origin:bottom}
body.studio .svc-chart i:last-child{background:var(--st-mint)}
body.studio .st-groei-act{--st-t:clamp(0,(var(--sc-p,1) - .18) / .32,1)}
body.studio .st-groei-act .svc-chart i{transform:scaleY(clamp(.06,calc(var(--st-t) * 1.6 - var(--n,0) * .12),1))}

/* statusbord en mailbox */
body.studio .svc-status{border-radius:6px;max-width:none;border-color:var(--st-lijn-licht)}
body.studio .svc-status .label{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.25rem;letter-spacing:0}
body.studio .svc-status .val{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-weight:500}
body.studio .mock-mail{border-radius:6px}
body.studio .svc-emailwrap .svc-check{grid-template-columns:1fr;margin-top:0}

/* verticale tijdlijn (branding, hosting) */
body.studio .svc-timeline{padding-left:0;border-top:1px solid var(--st-lijn);margin-top:clamp(28px,3.4vw,44px);counter-reset:sttl}
body.studio .svc-timeline::before{display:none}
body.studio .svc-tstep{counter-increment:sttl;display:grid;grid-template-columns:90px minmax(0,1fr);column-gap:24px;padding:20px 0;border-bottom:1px solid var(--st-lijn)}
body.studio .svc-tstep::before{content:counter(sttl,decimal-leading-zero);position:static;width:auto;height:auto;border:0;border-radius:0;box-shadow:none;background:none;grid-row:1 / span 2;font-family:var(--st-cond);font-weight:800;font-size:2.4rem;line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--st-tq)}
body.studio .svc-tstep strong{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1;margin-bottom:6px}
body.studio .svc-tstep p{font-size:.98rem}
body.studio .svc-section.ink .svc-timeline,body.studio .svc-section.ink .svc-tstep{border-color:var(--st-lijn-licht)}
body.studio .svc-section.ink .svc-tstep::before{-webkit-text-stroke-color:var(--st-mint);border:0}

/* voorbeeldscripts (ugc) */
body.studio .svc-testi{gap:0;border-top:1px solid var(--st-lijn)}
body.studio .svc-testi .card,body.studio .svc-section.alt .svc-testi .card{background:none;border:0;border-radius:0;padding:clamp(24px,3vw,36px) clamp(18px,2.4vw,32px) 0 0}
body.studio .svc-testi .card+.card{border-left:1px solid var(--st-lijn);padding-left:clamp(18px,2.4vw,32px)}
body.studio .svc-testi .stars{display:none}
body.studio .svc-testi .quote{font-family:var(--st-serif);font-style:italic;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.15;color:var(--st-ink);margin-bottom:20px}
body.studio .svc-testi .who small{font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--st-grijs)}
body.studio .svc-testi .who .av{display:none}

/* galerij: kolommen schuiven op verschillende snelheid */
body.studio .st-diepte-galerij .aif-item:nth-child(4n+2),body.studio .st-diepte-galerij .aif-item:nth-child(4n+4){transform:translateY(calc((var(--sc-p,.5) - .5) * -120px))}
body.studio .st-diepte-galerij .aif-item:nth-child(4n+3){transform:translateY(calc((var(--sc-p,.5) - .5) * -50px))}

/* showreel: het beeld groeit naar volle breedte */
body.studio .st-bioscoop .svc-reel-frame{max-width:none;transform:scale(calc(.86 + var(--st-t,1) * .14));transform-origin:50% 0;transition:transform .1s linear}
body.studio .st-bioscoop{--st-t:clamp(0,(var(--sc-p,1) - .45) / .3,1)}
body.studio .svc-reel-video{border-radius:6px}
body.studio .svc-reel{background:var(--st-nacht)}
body.studio .svc-chart i:nth-child(2){--n:1}body.studio .svc-chart i:nth-child(3){--n:2}body.studio .svc-chart i:nth-child(4){--n:3}body.studio .svc-chart i:nth-child(5){--n:4}body.studio .svc-chart i:nth-child(6){--n:5}

/* diensten-overzicht */
body.studio .dv-grid{gap:clamp(28px,4vw,56px)}
body.studio .dv-col-head{border-bottom:0;padding-bottom:0;margin-bottom:22px}
body.studio .dv-col-head h2{font-size:clamp(2.4rem,4vw,3.6rem);margin-bottom:12px}
body.studio .dv-col-head p{font-size:1rem;color:var(--st-tekst)}
body.studio .dv-cards{gap:0;border-top:1px solid var(--st-lijn)}
body.studio .dv-cards .svc-card{grid-template-columns:minmax(0,1fr) 28px;padding:20px 0;gap:6px 14px}
body.studio .dv-cards .svc-card h3{font-size:1.45rem}
body.studio .dv-cards .svc-card p{grid-column:1;font-size:.94rem}
body.studio .dv-cards a.svc-card::after{grid-column:2;grid-row:1}

/* ja/nee-lijst (ai-fotografie) */
body.studio .aif-split>*{background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;border-top:1px solid var(--st-lijn) !important}
body.studio .aif-split h3,body.studio .aif-split h4,body.studio .aif-split strong:first-child{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.5rem;color:var(--st-ink);margin:20px 0 10px}


/* faq-lijst (aanpak, over-mij) */
body.studio .faq-lijst{gap:0;max-width:none;border-top:1px solid var(--st-lijn)}
body.studio .faq-lijst details,body.studio .faq-lijst details[open]{background:none;border:0;border-bottom:1px solid var(--st-lijn);border-radius:0;box-shadow:none}
body.studio .faq-lijst summary{padding:22px 48px 22px 0;font-weight:700;font-size:1.12rem;color:var(--st-ink)}
body.studio .faq-lijst summary::after{right:0;color:var(--st-tq)}
body.studio .faq-lijst details>p,body.studio .faq-lijst details>div{padding:0 0 22px;max-width:64ch}

/* formulieren (gratis scan, contact) */
body.studio .ct-form-card{border-radius:6px;background:var(--st-papier);border:1px solid var(--st-lijn);box-shadow:0 24px 60px rgba(12,29,35,.08)}
body.studio .ct-form-card input,body.studio .ct-form-card textarea,body.studio .ct-form-card select{border-radius:4px;background:var(--st-creme);border:1px solid var(--st-lijn)}
body.studio .ct-form-card input:focus,body.studio .ct-form-card textarea:focus,body.studio .ct-form-card select:focus{border-color:var(--st-tq);outline:2px solid rgba(3,83,82,.18);outline-offset:0}
body.studio .ct-form-card label{font-weight:600;color:var(--st-ink)}
body.studio .aif-split li::before,body.studio .aif-yes li::before{color:var(--st-tq)}
@media (max-width:900px){
  body.studio .svc-gauges{grid-template-columns:1fr}
  body.studio .svc-gauge+.svc-gauge{border-left:0;border-top:1px solid var(--st-lijn);margin-top:24px}
  body.studio .svc-localwrap{grid-template-columns:1fr}
  body.studio .svc-localcard{border-left:0;border-top:1px solid var(--st-lijn)}
  body.studio .svc-map{min-height:200px}
  body.studio .svc-dash .kpis{grid-template-columns:repeat(2,1fr)}
  body.studio .svc-dash .kpi:nth-child(3){border-left:0;padding-left:0}
  body.studio .svc-testi .card+.card{border-left:0;padding-left:0;border-top:1px solid var(--st-lijn);margin-top:24px}
  body.studio .svc-tstep{grid-template-columns:60px minmax(0,1fr)}
  body.studio .st-diepte-galerij .aif-item{transform:none !important}
  body.studio .st-bioscoop .svc-reel-frame{transform:none}
}
@media (prefers-reduced-motion:reduce){
  body.studio .svc-gauge .ring{--st-t:1}
  body.studio .st-hero-scroll,body.studio .st-klim,body.studio .st-groei-act,body.studio .st-bioscoop{--st-t:1;--st-groei:1}
  body.studio .st-diepte-galerij .aif-item{transform:none !important}
}

/* ---------- smal scherm ---------- */
@media (max-width:900px){
  body.studio .svc-hero{padding-top:clamp(120px,30vw,150px)}
  body.studio .svc-hero-grid{grid-template-columns:1fr;gap:44px}
  body.studio .svc-hero.has-visual .svc-cta{justify-content:flex-start}
  body.studio :is(.svc-hero,.contact-hero,.about-hero,.portfolio-hero,.article-hero,.blog-hero)::before{width:120vw;left:-40vw;top:-30vw;animation:none;will-change:auto}
  body.studio .svc-pain>li{grid-template-columns:56px minmax(0,1fr);column-gap:12px;align-items:start}
  body.studio .svc-pain-card{grid-template-columns:1fr;row-gap:10px}
  body.studio .st-boog{width:56px;margin:22px 0 0;justify-self:start}
  body.studio .svc-check,body.studio .svc-usp,body.studio .svc-benefits{grid-template-columns:1fr}
  body.studio .svc-benefits:has(>.svc-benefit:nth-child(3):last-child){grid-template-columns:1fr}
  body.studio .svc-card{grid-template-columns:minmax(0,1fr) 28px}
  body.studio .svc-card p{grid-column:1}
  body.studio a.svc-card::after{grid-column:2;grid-row:1}
  body.studio .svc-statband{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.studio .svc-statband .result-stat:nth-child(odd){border-left:0;padding-left:0}
  body.studio .svc-statband .result-stat:nth-child(n+3){border-top:1px solid var(--st-lijn);margin-top:22px}
  body.studio .svc-flow,body.studio .svc-steps{grid-template-columns:1fr}
  body.studio .svc-flow .fstep+.fstep,body.studio .svc-steps .svc-step+.svc-step{border-left:0;padding-left:0;border-top:1px solid var(--st-lijn);margin-top:26px}
  body.studio .svc-section.ink .fstep+.fstep,body.studio .svc-section.ink .svc-step+.svc-step{border-top-color:var(--st-lijn-licht)}
  body.studio .svc-final::before{animation:none}
}
@media (hover:none),(pointer:coarse){.mk-ring{display:none}}
@media (prefers-reduced-motion:reduce){
  body.studio .st-boog path{stroke-dashoffset:0 !important;transition:none !important}
  body.studio .svc-pain-card .a{opacity:1 !important;transform:none !important}
  body.studio .svc-hero::before,body.studio .svc-final::before{animation:none}
  .mk-ring{display:none}
  [data-sc-in],[data-sc-stagger]>*{opacity:1 !important;transform:none !important;transition:none !important}
  body.studio a.svc-card:hover h3{transform:none}
}

/* ==========================================================================
   Juridisch (voorwaarden, privacy, cookiebeleid) en 404 (26 okt 2026)
   Rustig document: donkere hero, links een inhoudsopgave, rechts de tekst.
   ========================================================================== */
body.studio .legal-hero{position:relative;overflow:hidden;isolation:isolate;text-align:left;background:var(--st-nacht);color:var(--st-creme);padding:clamp(150px,15vw,200px) 0 clamp(64px,7vw,100px)}
body.studio .legal-hero::before{content:"";position:absolute;z-index:0;left:-10vw;top:-24vw;width:min(80vw,1100px);aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(143,214,202,.22) 0%,rgba(143,214,202,.12) 22%,rgba(143,214,202,.05) 42%,rgba(143,214,202,0) 66%);animation:stLicht 26s ease-in-out infinite alternate;will-change:transform}
body.studio .legal-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background-size:180px 180px;background-image:var(--st-korrel)}
body.studio .legal-hero>.container{position:relative;z-index:2}
body.studio .legal-tag{display:inline-flex;align-items:center;gap:10px;background:none;border:0;border-radius:0;padding:0;margin:0 0 clamp(22px,2.6vw,30px);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-mint)}
body.studio .legal-tag::before{content:"";width:28px;height:1px;background:currentColor}
body.studio .legal-hero h1{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.01em;font-size:clamp(3rem,7.4vw,7.2rem);color:var(--st-creme);margin:0}
body.studio .legal-hero h1 .gradient-text{font-family:var(--st-serif);font-style:italic;font-weight:400;text-transform:none;font-size:1.294em;line-height:0;letter-spacing:0;padding-right:.04em;background:none;-webkit-text-fill-color:currentColor;color:var(--st-mint)}
body.studio .legal-hero p{margin:clamp(22px,2.6vw,30px) 0 0;font-size:.95rem;color:rgba(245,241,232,.66)}
body.studio .legal-hero+.svc-breadcrumb{border-top:0}

body.studio .legal-body{background:var(--st-creme);padding:clamp(64px,7vw,110px) 0 clamp(80px,9vw,130px)}
body.studio :is(.legal-card,.privacy-card){background:none;border:0;border-radius:0;box-shadow:none;padding:0;max-width:720px}
body.studio :is(.legal-card,.privacy-card) .intro{font-family:var(--st-serif);font-style:italic;font-size:clamp(1.4rem,2.1vw,1.8rem);line-height:1.3;color:var(--st-ink);margin:0 0 clamp(28px,3vw,40px)}
body.studio :is(.legal-card,.privacy-card) h2{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.95;font-size:clamp(1.6rem,2.4vw,2.1rem);color:var(--st-ink);margin:0;padding:clamp(32px,3.4vw,44px) 0 14px;border-top:1px solid var(--st-lijn);scroll-margin-top:110px}
body.studio :is(.legal-card,.privacy-card) h2:first-of-type{border-top:0;padding-top:0}
body.studio :is(.legal-card,.privacy-card) .intro+h2{border-top:1px solid var(--st-lijn);padding-top:clamp(32px,3.4vw,44px)}
body.studio :is(.legal-card,.privacy-card) :is(p,li){font-size:1.02rem;line-height:1.75;color:var(--st-tekst)}
body.studio :is(.legal-card,.privacy-card) ul{margin:6px 0 16px;padding-left:1.2em;list-style:disc}
body.studio :is(.legal-card,.privacy-card) li::marker{color:var(--st-tq)}
body.studio :is(.legal-card,.privacy-card) a:not(.btn){color:var(--st-tq);text-decoration:none;border-bottom:1px solid rgba(3,83,82,.4)}
body.studio :is(.legal-card,.privacy-card) a:not(.btn):hover{border-bottom-color:var(--st-tq)}
body.studio :is(.legal-card,.privacy-card) strong{color:var(--st-ink)}
body.studio .legal-card .svc-benefits{margin:22px 0 28px !important}
body.studio .legal-card .svc-benefit strong{font-size:clamp(1.2rem,1.6vw,1.4rem)}
body.studio .legal-card .svc-benefit span{font-size:.94rem}

/* inhoudsopgave (studio.js bouwt hem uit de koppen) */
body.studio .st-inhoud{display:none}
@media (min-width:1025px){
  body.studio .legal-body>.container:has(>.st-inhoud){display:grid;grid-template-columns:minmax(200px,.3fr) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);align-items:start}
  body.studio .legal-body>.container:has(>.st-inhoud)>*{grid-column:2}
  body.studio .st-inhoud{display:block;grid-column:1 !important;grid-row:1 / span 9;position:sticky;top:110px;max-height:calc(100vh - 140px);overflow:auto;padding-right:8px}
}
body.studio .st-inhoud p{margin:0 0 14px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-tq);display:flex;align-items:center;gap:10px}
body.studio .st-inhoud p::before{content:"";width:22px;height:1px;background:currentColor}
body.studio .st-inhoud ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--st-lijn)}
body.studio .st-inhoud a{display:grid;grid-template-columns:2.1em minmax(0,1fr);gap:4px;padding:6px 0 6px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:.88rem;line-height:1.35;color:var(--st-grijs);text-decoration:none;transition:color .2s,border-color .2s}
body.studio .st-inhoud a b{font-weight:600;font-variant-numeric:tabular-nums;color:inherit;opacity:.7}
body.studio .st-inhoud a:hover{color:var(--st-ink)}
body.studio .st-inhoud a.is-actief{color:var(--st-ink);border-left-color:var(--koraal,#E56B4C)}

/* 404 */
body.studio .nf-wrap{position:relative;overflow:hidden;isolation:isolate;display:block;min-height:100dvh;text-align:left;background:var(--st-nacht);padding:clamp(150px,15vw,200px) 0 clamp(72px,8vw,110px)}
body.studio .nf-wrap::before{content:"";position:absolute;z-index:0;right:-20vw;top:-30vw;width:min(90vw,1200px);aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(143,214,202,.22) 0%,rgba(143,214,202,.1) 26%,rgba(143,214,202,0) 64%);animation:stLicht 26s ease-in-out infinite alternate-reverse;will-change:transform}
body.studio .nf-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background-size:180px 180px;background-image:var(--st-korrel)}
body.studio .nf-binnen{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);row-gap:clamp(48px,6vw,80px);align-items:end}
body.studio .nf-code{grid-column:1 / -1;margin:0;font-family:var(--st-cond);font-weight:800;font-size:clamp(9rem,30vw,26rem);line-height:.78;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px rgba(143,214,202,.55)}
body.studio .nf-wrap h1{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.01em;font-size:clamp(2.4rem,4.6vw,4.4rem);color:var(--st-creme);margin:0;max-width:10em;text-wrap:balance}
body.studio .nf-wrap .nf-tekst>p{margin:clamp(20px,2.4vw,28px) 0 0;max-width:44ch;font-size:1.08rem;line-height:1.6;color:rgba(245,241,232,.72)}
body.studio .nf-actions{justify-content:flex-start;margin-top:clamp(28px,3vw,38px)}
body.studio .nf-actions .btn-primary{background:var(--st-mint);border-color:var(--st-mint);color:var(--st-nacht)}
body.studio .nf-actions .btn-primary:hover{background:var(--st-creme);border-color:var(--st-creme);color:var(--st-nacht)}
body.studio .nf-actions .btn-ghost{border:1px solid rgba(245,241,232,.4);color:var(--st-creme);background:none}
body.studio .nf-actions .btn-ghost:hover{background:rgba(143,214,202,.12);border-color:var(--st-mint);color:var(--st-creme)}
body.studio .nf-links-kop{margin:0 0 6px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-mint)}
body.studio .nf-links ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--st-lijn-licht)}
body.studio .nf-links li{border-bottom:1px solid var(--st-lijn-licht)}
body.studio .nf-links a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:clamp(1.4rem,2vw,1.8rem);line-height:1;color:var(--st-creme);text-decoration:none;transition:color .25s,padding .35s var(--st-ease)}
body.studio .nf-links a::after{content:"\2192";font-family:var(--font-body);font-weight:400;font-size:1.2rem;transition:transform .3s var(--st-ease)}
body.studio .nf-links a:hover,body.studio .nf-links a:focus-visible{color:var(--st-mint);padding-left:8px}
body.studio .nf-links a:hover::after{transform:translateX(6px)}
@media (max-width:900px){
  body.studio :is(.legal-hero,.nf-wrap){padding-top:clamp(120px,30vw,150px)}
  body.studio :is(.legal-hero,.nf-wrap)::before{width:120vw;left:-40vw;right:auto;top:-30vw;animation:none}
  body.studio .nf-binnen{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  body.studio :is(.legal-hero,.nf-wrap)::before{animation:none}
  body.studio .nf-links a:hover{padding-left:0}
}
body.studio :is(.legal-card,.privacy-card) .intro{font-size:clamp(1.25rem,1.7vw,1.5rem)}
body.studio .legal-card .svc-benefits:has(>.svc-benefit:nth-child(3):last-child){grid-template-columns:1fr}
body.studio .legal-card .svc-benefits:has(>.svc-benefit:nth-child(3):last-child) .svc-benefit{grid-template-columns:44px minmax(0,1fr);padding-right:0}
body.studio .legal-card .svc-benefits:has(>.svc-benefit:nth-child(3):last-child) .svc-benefit::before{grid-row:1 / span 2;padding-top:.3em;margin:0}

/* onderzoekspagina (li-page): eigen onderdelen in studio-maat */
@media (min-width:901px){
  body.studio.li-page .li-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.studio.li-page .li-kpis .result-stat:nth-child(4){border-left:0;padding-left:0}
  body.studio.li-page .li-kpis .result-stat:nth-child(n+4){border-top:1px solid var(--st-lijn);margin-top:22px;padding-top:22px}
}
body.studio.li-page .svc-section p.li-feature-num{font-family:var(--st-cond);font-weight:800;font-size:clamp(7rem,15vw,13rem);line-height:.8;letter-spacing:-.02em;color:var(--koraal,#E56B4C);max-width:none;margin:0}
body.studio.li-page .svc-section p.li-feature-claim{font-family:var(--st-serif);font-style:italic;font-weight:400;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.2;color:var(--st-creme);max-width:24ch}
body.studio.li-page .li-finding{border-radius:6px;box-shadow:none}
body.studio.li-page .li-finding-num{font-family:var(--st-cond);font-weight:800;letter-spacing:-.01em;font-size:clamp(3rem,6vw,4.4rem)}
body.studio.li-page .li-finding h3{font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1;margin-bottom:12px}

/* ==========================================================================
   Casepagina, scroll-act "Wat we deden" (27 okt 2026, proef Projectbouw)
   Links de kop en per stap één bijschrift dat met het scrollen wisselt,
   rechts de site. Geen paneel meer over het beeld heen.
   ========================================================================== */
body.studio.k3 .k3-podium__sub{margin:14px 0 0;font-size:.95rem;line-height:1.5;color:rgba(245,241,232,.62)}
body.studio.k3 .k3-noten--stap{grid-column:1 / span 4;grid-row:2;align-self:end;margin:0;padding:22px 0 0;background:none;backdrop-filter:none;border:0;border-top:1px solid rgba(245,241,232,.14);border-radius:0;box-shadow:none;display:grid;gap:0;position:relative}
body.studio.k3 .k3-noten--stap::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;transform:scaleX(var(--sc-p,0));transform-origin:0 50%;background:var(--st-mint)}
body.studio.k3 .k3-noten--stap li{grid-area:1 / 1;display:block;font-size:inherit;color:inherit}
body.studio.k3 .k3-noten--stap li::before{content:none}
body.studio.k3 .k3-noot__nr{display:block;margin:0 0 12px;font:600 .8rem/1 var(--font-body);letter-spacing:.14em;color:var(--st-mint)}
body.studio.k3 .k3-noot__nr i{font-style:normal;color:rgba(245,241,232,.4)}
body.studio.k3 .k3-noten--stap h3{margin:0 0 12px;font-family:var(--st-cond);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.95;font-size:clamp(1.6rem,2.2vw,2.2rem);color:var(--st-creme)}
body.studio.k3 .k3-noten--stap p{margin:0;font-size:.98rem;line-height:1.6;color:rgba(245,241,232,.72);max-width:34ch}
@media (max-width:760px){
  body.studio.k3 .k3-noten--stap{padding-top:16px}
  body.studio.k3 .k3-noten--stap li:nth-child(n+3){display:block}
  body.studio.k3 .k3-noten--stap h3{font-size:1.35rem;margin-bottom:8px}
  body.studio.k3 .k3-noten--stap p{font-size:.88rem;line-height:1.5}
  body.studio.k3 .k3-podium__sub{display:none}
}
/* minder beweging: de act is een gewone sectie, alle stappen als lijst, de site scrollbaar */
body.studio.k3 .k3-pin--los{height:auto !important;padding:0 0 clamp(40px,5vw,72px)}
body.studio.k3 .k3-pin--los [data-sc-stage]{position:static !important;height:auto !important}
body.studio.k3 .k3-pin--los .k3-podium{position:relative;inset:auto;margin:0 var(--k3-g);row-gap:28px}
body.studio.k3 .k3-pin--los [data-sc-cue]{opacity:1 !important;transform:none !important}
body.studio.k3 .k3-pin--los .k3-browser__raam{--raam:560px;overflow-y:auto}
body.studio.k3 .k3-pin--los .k3-noten--stap{align-self:start;gap:26px}
body.studio.k3 .k3-pin--los .k3-noten--stap::before{content:none}
body.studio.k3 .k3-pin--los .k3-noten--stap li{grid-area:auto}
@media (min-width:761px){body.studio.k3 .k3-pin--los .k3-noten--stap{grid-column:1 / span 4}}
/* casepagina: telefoon met statusbalk, knop naar de live site, bron bij de cijfers (27 okt 2026) */
body.studio.k3 .k3-iphone--status img{box-sizing:border-box;aspect-ratio:780 / 1688;object-fit:cover;object-position:50% 0;padding-top:15%;background:#151517}
body.studio.k3 .k3-live{width:fit-content;align-self:flex-start;justify-self:start;margin-top:clamp(22px,2.6vw,30px);min-height:50px;padding:0 24px}
body.studio.k3 .k3-podium__live{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:10px 18px;border-radius:999px;border:1px solid rgba(245,241,232,.35);color:var(--st-creme);font-size:.9rem;font-weight:600;text-decoration:none;transition:background .25s,border-color .25s,color .25s}
body.studio.k3 .k3-podium__live:hover,body.studio.k3 .k3-podium__live:focus-visible{background:var(--st-mint);border-color:var(--st-mint);color:var(--st-nacht)}
body.studio.k3 .k3-winst__bron{margin:22px 0 0;max-width:72ch;font-size:.8rem;line-height:1.55;color:rgba(245,241,232,.6)}
@media (max-width:760px){body.studio.k3 .k3-pin:not(.k3-pin--los) .k3-podium__live{display:none}}