/* Klantcase Hollema Bouw, sterc.nl. Alles is gescoped op .s1c. */
@font-face{font-family:"S1Montserrat";font-weight:400;font-style:normal;src:url("fonts/montserrat-latin-400-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"S1Montserrat";font-weight:600;font-style:normal;src:url("fonts/montserrat-latin-600-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"S1Montserrat";font-weight:800;font-style:normal;src:url("fonts/montserrat-latin-800-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"S1Montserrat";font-weight:900;font-style:normal;src:url("fonts/montserrat-latin-900-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"MontClean-900";src:url("fonts/MontClean-900.woff2") format("woff2");font-display:swap}
@font-face{font-family:"MontClean-800";src:url("fonts/MontClean-800.woff2") format("woff2");font-display:swap}
.layout:has(.s1c),.container-fluid:has(>.s1c){overflow:visible!important;padding-top:0!important;padding-bottom:0!important}
.container-fluid:has(>.s1c){padding-left:0!important;padding-right:0!important}
.s1c{--ground:#0A0A0C;--main:#E0184C;--second:#F5F5F7;--green:#87BA40;--line:color-mix(in srgb,var(--second) 14%,transparent);--card:color-mix(in srgb,var(--second) 5%,var(--ground));--sans:"S1Montserrat","Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;position:relative;background:var(--ground);color:var(--second);font-family:var(--sans);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;text-align:left;font-weight:400;letter-spacing:normal;text-transform:none;box-shadow:0 0 0 100vmax var(--ground);clip-path:inset(0 -100vmax)}
.s1c *{box-sizing:border-box}
.s1c.s1c :where(h1,h2,h3,h4,p,a,span,b,em,i,small,button){margin:0;padding:0;border:0;background:none;font-family:inherit;font-size:inherit;font-weight:inherit;font-style:normal;line-height:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:none;color:inherit;text-align:inherit}
.s1c.s1c :where(img,video,svg,canvas){max-width:none;margin:0}
.s1c .s1-wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.s1c .s1-sec{position:relative;padding-block:clamp(72px,10vw,150px)}
.s1c .s1-sec + .s1-sec{border-top:1px solid var(--line)}
.s1c .s1-h1{font-size:clamp(40px,7.4vw,112px);line-height:.94;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
.s1c .s1-h2{font-size:clamp(32px,5.2vw,76px);line-height:.98;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:30px;text-wrap:balance}
.s1c .s1-h3{font-size:clamp(26px,3.1vw,42px);line-height:1.12;font-weight:800;margin-bottom:24px;text-wrap:balance}
.s1c .s1-lead{font-size:clamp(19px,2vw,25px);line-height:1.45;font-weight:600}
.s1c .s1-body{display:flex;flex-direction:column;gap:18px;max-width:62ch}
.s1c .s1-body p{font-size:clamp(17px,1.25vw,19px)}
.s1c .s1-run{font-weight:800;color:var(--main)}
.s1c .s1-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,84px);align-items:center}
.s1c .s1-split.flip>.s1-text{order:2}
@media (max-width:880px){.s1c .s1-split{grid-template-columns:minmax(0,1fr)}.s1c .s1-split.flip>.s1-text{order:0}.s1c .s1-card .s1-split>.s1-vis,.s1c .s1-pincol{order:-1}}
/* outline words that fill with pink */
.s1c .s1-of{position:relative;display:inline-block}
.s1c .s1-of-o{color:transparent;-webkit-text-stroke:max(1.5px,.024em) color-mix(in srgb,var(--main) 80%,var(--second));font-family:"MontClean-900",var(--sans);font-synthesis:style}
.s1c .s1-of-f{position:absolute;left:0;top:0;color:var(--main);font-family:"MontClean-900",var(--sans);font-synthesis:style;clip-path:inset(100% 0 0 0)}
.s1c .s1-of.w8 .s1-of-o,.s1c .s1-of.w8 .s1-of-f{font-family:"MontClean-800",var(--sans)}
/* hero: Hollema Bouw x Sterc.ONE on one baseline */
.s1c .s1-hero{padding-block:clamp(48px,7vw,96px) clamp(24px,4vw,48px);text-align:center}
.s1c .s1-brand{--u:min(42px,7.4vw);display:flex;align-items:flex-end;justify-content:center;gap:calc(var(--u)*.6);margin-bottom:clamp(30px,4.4vw,54px)}
.s1c .s1-brand img{display:block;flex:none;width:auto;height:var(--u)}
.s1c .s1-brand .s1-logo-s{display:block;flex:none;width:auto;height:calc(var(--u)*.493)}
.s1c .s1-x{display:block;flex:none;width:calc(var(--u)*.4);height:calc(var(--u)*.4);margin-bottom:calc(var(--u)*.043);overflow:visible}
.s1c .s1-x path{fill:none;stroke:var(--main);stroke-width:2.6;stroke-linecap:round}
.s1c .s1-hero .s1-lead{max-width:34ch;margin:clamp(22px,3vw,34px) auto 0}
.s1c .s1-hero .s1-vis{margin-top:clamp(20px,3vw,36px)}
@media (prefers-reduced-motion:no-preference){.s1c .s1-hero>.s1-wrap{clip-path:circle(0px at 50% 10%);animation:s1-safe 0s 2.5s forwards}}
@keyframes s1-safe{to{clip-path:none}}
/* film: a big pink PLAY that follows the mouse, a fixed one on touch */
.s1c .s1-film{position:relative;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 40px 90px rgba(0,0,0,.35);border:1px solid var(--line)}
.s1c .s1-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.s1c .s1-play{display:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;place-items:center;margin:0;padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;opacity:1!important;color:var(--second);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.s1c.s1-js .s1-play{display:grid}
.s1c button::before,.s1c button::after{content:none!important;display:none!important;background:none!important}
.s1c.s1-js .s1-film.on .s1-play{height:calc(100% - 64px)}
.s1c.s1-js .s1-film.playing .s1-play{display:none}
.s1c .s1-playb{display:grid;place-items:center;width:clamp(88px,11vw,128px);height:clamp(88px,11vw,128px);border-radius:50%;background:var(--main);color:var(--second);font-size:clamp(17px,2vw,25px);font-weight:900;line-height:1;letter-spacing:.02em;text-transform:uppercase;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.s1c .s1-play:focus-visible{outline:3px solid var(--green);outline-offset:-6px}
@media (hover:hover) and (pointer:fine){.s1c .s1-play{cursor:none}.s1c .s1-playb{opacity:0}.s1c .s1-play:focus-visible .s1-playb{opacity:1}}
.s1c.s1-fp .s1-filmsec::after{content:"";display:block;height:65vh}
.s1c.s1-fp .s1-filmsec>.s1-wrap{position:sticky;top:var(--s1-fpin,100px)}
.s1c .s1-fdisc{display:none!important}
/* stages: a fixed design size, scaled to the column */
.s1c .s1-vis{position:relative;width:100%;overflow:hidden}
.s1c .s1-stage{position:absolute;left:0;top:0;transform-origin:0 0}
.s1c .s1-stage canvas{position:absolute;left:0;top:0;pointer-events:none}
.s1c .s1-glow{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--main) 45%,transparent),transparent)}
.s1c .s1-glass{position:absolute;border-radius:20px;background:linear-gradient(160deg,color-mix(in srgb,var(--second) 13%,var(--ground)),color-mix(in srgb,var(--second) 6%,var(--ground)));border:1px solid color-mix(in srgb,var(--second) 18%,transparent);box-shadow:0 24px 48px rgba(0,0,0,.25),inset 0 1px 0 color-mix(in srgb,var(--second) 20%,transparent)}
.s1c .s1-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:16px;font-weight:800;line-height:1.2;white-space:nowrap;background:color-mix(in srgb,var(--second) 12%,var(--ground));border:1px solid color-mix(in srgb,var(--second) 20%,transparent)}
.s1c .s1-chip.on{background:var(--main);border-color:var(--main)}
.s1c .s1-chip i{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none}
.s1c .s1-pin{position:absolute;width:0;height:0}
.s1c .s1-pin b{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--ground);box-shadow:0 0 0 3px var(--second)}
.s1c .s1-pin span{position:absolute;left:16px;top:-42px;padding:5px 11px;border-radius:9px;font-size:15px;font-weight:800;white-space:nowrap;background:color-mix(in srgb,var(--second) 12%,var(--ground));border:1px solid color-mix(in srgb,var(--second) 20%,transparent)}
.s1c .s1-vb{position:absolute;right:14px;top:14px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--second) 40%,transparent)}
.s1c .s1-row{display:flex;justify-content:space-between;align-items:center;gap:12px;height:40px;font-size:16px;font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--second) 12%,transparent)}
.s1c .s1-row b{font-weight:800;font-variant-numeric:tabular-nums}
.s1c .s1-paper{position:absolute;width:200px;height:128px;padding:16px 18px;border-radius:9px;background:linear-gradient(170deg,var(--second),color-mix(in srgb,var(--second) 88%,var(--ground)));box-shadow:0 10px 24px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:9px}
.s1c .s1-paper i{display:block;height:7px;border-radius:4px;background:color-mix(in srgb,var(--ground) 18%,var(--second))}
.s1c .s1-paper p{font-size:17px;font-weight:800;color:var(--ground);line-height:1.1;margin-bottom:2px}
.s1c .s1-doc{position:absolute;border-radius:14px;padding:16px 20px;color:var(--ground);background:linear-gradient(170deg,var(--second),color-mix(in srgb,var(--second) 90%,var(--ground)));box-shadow:0 24px 48px rgba(0,0,0,.25)}
.s1c .s1-doc h4{margin:0 0 6px;font-size:19px;font-weight:800;line-height:30px}
.s1c .s1-drow{position:relative;display:flex;align-items:center;gap:10px;height:44px;font-size:16px;font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--ground) 12%,var(--second))}
.s1c .s1-drow b{flex:1;font-weight:800;position:relative}.s1c .s1-drow span{position:relative}
.s1c .s1-hl{position:absolute;inset:3px -10px;border-radius:8px;background:color-mix(in srgb,var(--main) 22%,var(--second));opacity:0}
.s1c .s1-diff{color:var(--main);font-weight:800}
/* the agents: cards that slide over each other */
.s1c .s1-stack{position:relative;margin-top:clamp(40px,6vw,80px)}
.s1c .s1-card{position:sticky;top:0;isolation:isolate;margin:0 clamp(6px,1.6vw,28px) clamp(12px,1.6vw,22px);padding-block:clamp(48px,7vw,110px);border-radius:clamp(22px,3vw,40px);background:var(--card);border:1px solid var(--line);box-shadow:0 -30px 70px rgba(0,0,0,.5)}
.s1c .s1-card::after{content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;z-index:5;border-radius:inherit;background:var(--ground);opacity:var(--dim,0);pointer-events:none}
.s1c.s1-nost .s1-card,.s1c.s1-flat .s1-card{position:relative;top:auto}
.s1c .s1-num{display:flex;align-items:flex-end;gap:16px;margin-bottom:clamp(18px,2.4vw,28px)}
.s1c .s1-big{font-size:clamp(92px,11vw,168px);line-height:.74;font-weight:900}
.s1c .s1-big .s1-of-o{-webkit-text-stroke-width:max(2px,.016em)}
.s1c .s1-tag{display:inline-flex;align-items:center;gap:9px;margin-bottom:.15em;padding:8px 16px;border-radius:999px;font-size:16px;font-weight:800;line-height:1.2;white-space:nowrap;box-shadow:inset 0 0 0 1.5px var(--main)}
.s1c .s1-tag::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--main)}
.s1c .s1-split.s1-pinned{align-items:start}
.s1c .s1-pincol{position:relative;align-self:stretch}
.s1c .s1-pincol>.s1-vis{position:sticky;top:var(--s1-mtop,120px)}
.s1c .s1-a2{margin-top:clamp(90px,12vw,170px)}
@media (max-width:880px){.s1c .s1-pincol{position:sticky;top:var(--s1-top,0px);z-index:3;margin:0 -20px;padding:14px 20px 0;background:var(--card)}.s1c .s1-pincol::after{content:"";position:absolute;left:0;right:0;top:100%;height:30px;background:linear-gradient(var(--card),transparent);pointer-events:none}.s1c .s1-pincol>.s1-vis{position:relative;top:auto}}
.s1c.s1-nost .s1-pincol,.s1c.s1-nost .s1-pincol>.s1-vis{position:relative;top:auto}
/* quote, call to action, end card */
.s1c .s1-quote{font-size:clamp(28px,3.6vw,52px);line-height:1.08;font-weight:800;text-transform:uppercase;max-width:22ch;margin:clamp(30px,4vw,48px) 0}
.s1c .s1-cta{text-align:center}
.s1c .s1-cta .s1-body{margin:0 auto 36px;text-align:center}
.s1c .s1-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.s1c .s1-btn{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 34px;border-radius:999px;font-size:18px;font-weight:800;text-decoration:none;background:var(--main);color:var(--second);transition:transform .2s ease}
.s1c .s1-btn.ghost{background:transparent;box-shadow:inset 0 0 0 2px var(--second)}
.s1c .s1-btn:hover{transform:translateY(-2px)}
.s1c .s1-btn:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.s1c .s1-end{position:relative;padding-block:clamp(80px,10vw,150px);text-align:center}
.s1c .s1-end .s1-wrap{position:relative}
.s1c .s1-end svg{width:min(640px,86%);height:auto;overflow:visible}
.s1c .s1-endcv{position:absolute;left:0;top:-40vh;z-index:3;display:block;width:100%;height:calc(100% + 40vh);pointer-events:none}
.s1c .s1-endw{display:flex;justify-content:center;gap:clamp(12px,2.4vw,34px);flex-wrap:wrap;margin-top:clamp(22px,3vw,40px);font-size:clamp(22px,2.8vw,40px);font-weight:800}
/* the layer for things that travel between sections */
.s1c .s1-fly{position:absolute;left:0;top:0;z-index:40;width:0;height:0;pointer-events:none}
.s1c .s1-fly>*{position:absolute;left:0;top:0;opacity:0}
.s1c .s1-idot{width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--main)}
.s1c .s1-fring{border:3px solid var(--main);border-radius:50%}
.s1c .s1-fdot{width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--main)}
.s1c .s1-fstack{width:212px;height:140px;transform-origin:106px 70px}
.s1c .s1-fplane{width:1px;height:1px;overflow:visible}
.s1c .s1-ftrail{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--main)}
.s1c .s1-cur{display:grid;place-items:center;width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;background:var(--main);color:var(--second);font-size:25px;font-weight:900;line-height:1;letter-spacing:.02em;text-transform:uppercase;box-shadow:0 14px 34px rgba(0,0,0,.3)}
@media (max-width:640px){.s1c [data-vis=crane]{width:170%;margin-left:-35%}}
.s1c .s1-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.s1c .s1-btn{transition:none}}