/* Gedeelde bouwstenen voor de studio-concepten. Eigen klassen met prefix st-, zodat style.css
   (sitekop en -voet) er niet mee botst. Elk concept legt hier zijn eigen indeling bovenop. */
:root{
  --blue:#053689;--blue2:#0445b0;--white:#fff;--light:#e8edf8;--fog:#f0f3fa;--ink:#04122b;--grey:#5a6a8a;--acc:#60a5fa;
  --cut:#e6007e;--ok:#1d7a52;--warn:#a8650b;--err:#c0263a;
  --line:rgba(5,54,137,.09);--line2:rgba(5,54,137,.16);
  --f-disp:'Barlow Condensed',sans-serif;--f-body:'Sora',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --s1:.375rem;--s2:.625rem;--s3:1rem;--s4:1.5rem;--s5:2.25rem;--s6:3.5rem;--s7:5.5rem;
  --r-card:.75rem;--r-btn:.4rem;
  --sh-base:0 1px 2px rgba(4,18,43,.04),0 6px 18px rgba(5,54,137,.05);
  --sh-up:0 2px 4px rgba(4,18,43,.04),0 14px 36px rgba(5,54,137,.10),0 32px 72px rgba(5,54,137,.06);
  --sh-float:0 10px 24px rgba(4,18,43,.16),0 28px 64px rgba(4,18,43,.20);
}
body{background:var(--fog)}
body.st-vast{padding-top:0}
[hidden]{display:none!important}
.st-sec{padding:var(--s7) 0}
.st-kicker{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:0 0 var(--s2)}
.st-h2{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:clamp(2.1rem,4.2vw,3.6rem);line-height:.93;letter-spacing:-.03em;color:var(--ink);margin:0 0 var(--s3)}
.st-lead{font-size:.975rem;line-height:1.8;color:var(--grey);max-width:58ch;margin:0}
.st-kaart{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-up)}
.st-grain{position:relative}
.st-grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .02 0 0 0 0 .07 0 0 0 0 .17 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* knoppen */
.st-knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1.5px solid var(--line2);background:var(--white);color:var(--blue);font-family:var(--f-body);font-weight:700;font-size:.84rem;padding:.72rem 1.15rem;border-radius:var(--r-btn);cursor:pointer;text-decoration:none;transition:transform .35s var(--ease),opacity .2s}
.st-knop:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 10px 26px rgba(5,54,137,.16)}
.st-knop:active{transform:translateY(-1px) scale(.98)}
.st-knop:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.st-knop[disabled]{opacity:.5;pointer-events:none}
.st-knop svg{width:16px;height:16px;flex:none}
.st-knop-vol{background:var(--blue);border-color:var(--blue);color:var(--white)}
.st-knop-vol:hover{background:var(--blue2);border-color:var(--blue2);box-shadow:0 10px 32px rgba(4,18,43,.3)}
.st-knop-wit{background:var(--white);border-color:var(--white);color:var(--blue)}
.st-knop-wit:hover{box-shadow:0 16px 48px rgba(4,18,43,.4);border-color:var(--white)}
.st-knop-lijn{background:transparent;border-color:rgba(255,255,255,.35);color:var(--white)}
.st-knop-lijn:hover{border-color:var(--white);background:rgba(255,255,255,.1)}
.st-knop-klein{padding:.48rem .8rem;font-size:.76rem}
.st-knop-breed{width:100%}

/* kleurstalen en keuzes */
.st-stalen{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem}
.st-staal{aspect-ratio:1;border-radius:.45rem;border:1px solid rgba(4,18,43,.14);cursor:pointer;transition:transform .3s var(--ease);position:relative;padding:0}
.st-staal:hover{transform:translateY(-2px) scale(1.05)}
.st-staal:active{transform:scale(.95)}
.st-staal:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.st-staal[aria-pressed="true"]{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--blue)}
.st-staal.st-eigen{background:conic-gradient(#c8102e,#f2b705,#1f6f4a,#60a5fa,#053689,#c8102e);overflow:hidden}
.st-staal.st-eigen input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.st-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;background:var(--fog);border:1px solid var(--line);padding:3px;border-radius:.55rem}
.st-seg button{border:0;background:transparent;padding:.42rem .5rem;border-radius:.4rem;font:600 .76rem var(--f-body);color:var(--grey);cursor:pointer;transition:transform .3s var(--ease)}
.st-seg button:hover{color:var(--blue)}
.st-seg button:active{transform:scale(.97)}
.st-seg button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.st-seg button[aria-pressed="true"]{background:var(--white);color:var(--blue);box-shadow:0 1px 2px rgba(4,18,43,.06),0 4px 12px rgba(5,54,137,.12)}
.st-stip{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid rgba(4,18,43,.18);flex:none;vertical-align:middle}
.st-stip.st-uit{background:repeating-linear-gradient(45deg,#f4f6fb 0 2px,#cfd7e8 2px 4px)!important}
.st-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.66rem;font-weight:700;letter-spacing:.02em;padding:.22rem .6rem;border-radius:99px;background:rgba(29,122,82,.1);color:var(--ok);border:1px solid rgba(29,122,82,.25)}
.st-badge.st-schets{background:rgba(90,106,138,.1);color:var(--grey);border-color:rgba(90,106,138,.25)}
.st-badge svg{width:12px;height:12px}

/* briefing (velden vast, zie site.js) */
.st-brief-lab{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin:0 0 .6rem}
.st-brief-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:var(--s4)}
.st-chip{display:inline-flex;align-items:center;gap:.45rem;border:1.5px solid var(--line2);background:var(--white);border-radius:99px;padding:.3rem .8rem .3rem .35rem;font:600 .78rem var(--f-body);color:var(--ink);cursor:pointer;transition:transform .3s var(--ease)}
.st-chip img{width:26px;height:26px;object-fit:contain}
.st-chip:hover{transform:translateY(-2px);border-color:var(--blue)}
.st-chip:active{transform:scale(.97)}
.st-chip:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.st-chip[aria-pressed="true"]{border-color:var(--blue);background:var(--light);color:var(--blue)}
.st-brief-stijl{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:var(--s4)}
.st-stijl{text-align:left;border:1.5px solid var(--line2);background:var(--white);border-radius:.6rem;padding:.75rem .85rem;cursor:pointer;font-family:var(--f-body);transition:transform .3s var(--ease)}
.st-stijl b{display:block;font-size:.82rem;color:var(--ink);margin-bottom:.2rem}
.st-stijl span{display:block;font-size:.66rem;color:var(--grey);line-height:1.4}
.st-stijl:hover{transform:translateY(-2px);border-color:var(--blue)}
.st-stijl:active{transform:scale(.98)}
.st-stijl:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.st-stijl[aria-pressed="true"]{border-color:var(--blue);background:var(--light)}
.st-brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem 1rem}
.st-fld{display:grid;gap:.3rem}
.st-fld.st-vol{grid-column:1/-1}
.st-fld label{font-size:.76rem;font-weight:600;color:var(--ink)}
.st-fld label small{font-weight:400;color:var(--grey)}
.st-fld input,.st-fld select,.st-fld textarea{font:400 .88rem var(--f-body);color:var(--ink);background:var(--white);border:1.5px solid var(--line2);border-radius:.5rem;padding:.7rem .8rem}
.st-fld textarea{min-height:92px;resize:vertical}
.st-fld input:focus-visible,.st-fld select:focus-visible,.st-fld textarea:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(96,165,250,.3)}
.st-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.72rem;color:var(--grey);line-height:1.6;margin:1.1rem 0 1.2rem}
.st-consent input{margin-top:.2rem;accent-color:var(--blue)}
.st-consent a{color:var(--blue)}
.st-consent a:hover{text-decoration-thickness:2px}
.st-consent a:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:2px}
.st-brief .st-knop-vol{width:100%;padding:1rem;font-size:.95rem}
.st-brief-noot{margin:.8rem 0 0;text-align:center;font-size:.7rem;color:var(--grey)}
.st-brief-ok{margin-top:1rem;padding:.8rem 1rem;border-radius:.55rem;background:#eaf6f0;border:1px solid #bfe3d0;color:#155c3d;font-size:.78rem;line-height:1.6}
.st-brief-ok code{font-size:.7rem;background:rgba(29,122,82,.1);padding:.05rem .3rem;border-radius:.25rem}
@media(max-width:640px){.st-brief-grid{grid-template-columns:1fr}.st-brief-stijl{grid-template-columns:1fr}}

#st-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:100000;background:var(--ink);color:var(--white);font:500 .8rem var(--f-body);padding:.7rem 1.1rem;border-radius:.6rem;box-shadow:var(--sh-float);transition:transform .45s var(--ease),opacity .3s;pointer-events:none;max-width:min(92vw,520px)}
#st-toast.aan{opacity:1;transform:translate(-50%,0)}
.st-concept{position:fixed;right:16px;bottom:16px;z-index:99990;font:700 .66rem var(--f-body);letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--white);padding:.4rem .7rem;border-radius:99px;box-shadow:var(--sh-float)}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}