/* RUBO Media — stylesheet */
@font-face{font-family:"RM Gotham";src:local("Gotham Ultra"),local("Gotham-Ultra"),local("GothamUltra"),local("Gotham Ultra Regular");font-weight:900;font-style:normal}
@font-face{font-family:"DM Sans";src:url(../assets/fonts/DMSans-Variable.woff) format("woff");font-weight:100 1000;font-style:normal;font-display:swap}
body{margin:0;background:#0c0c0c}
a{color:inherit;text-decoration:none}
.rm{--ink:#0c0c0c;--card:#131313;--line:rgba(249,249,249,.08);--grey:#888888;--paper:#f9f9f9;--grad:linear-gradient(180deg,#710c12 0%,#ff3636 25%,#ff7a1a 75%,#ffe436 100%);--gradH:linear-gradient(90deg,#710c12 0%,#ff3636 25%,#ff7a1a 75%,#ffe436 100%);--ease:cubic-bezier(.16,1,.3,1);--ease2:cubic-bezier(.83,0,.17,1);--spring:cubic-bezier(.34,1.4,.64,1);--gut:clamp(1rem,3.4vw,3rem);--r:28px;--r2:20px;--stageH:min(100vh,56rem);--kv:0;--G:"RM Gotham","Montserrat","Arial Black",sans-serif;position:relative;min-height:100vh;background:var(--ink);color:var(--paper);font-family:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased}
.rm *,.rm *::before,.rm *::after{box-sizing:border-box}
.rm :focus-visible{outline:2px solid #ff7a1a;outline-offset:4px}
.disp{font-family:var(--G);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:.92}
.wrap{max-width:1360px;margin:0 auto;padding-inline:var(--gut)}
.lbl{font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);font-weight:600}
.sec{position:relative;padding:clamp(5.5rem,10vw,9rem) 0}
.h2{font-size:clamp(2.2rem,4.6vw,4.2rem);margin:0;text-wrap:balance}
.h2s{font-size:clamp(1.9rem,3.8vw,3.4rem)}
.lead-p{margin:1.25rem 0 0;font-size:clamp(1rem,1.3vw,1.15rem);color:#b5b5b5;max-width:46ch;line-height:1.65;text-wrap:pretty}
.lead-p + .lead-p{margin-top:.9rem}
.btn-plain{appearance:none;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0}
.arrow-s{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kick{display:flex;align-items:center;gap:.7rem;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#cfcfcf;margin-bottom:1.4rem}
.slash{display:inline-block;width:16px;height:11px;background:var(--grad);clip-path:polygon(45% 0,100% 0,55% 100%,0 100%);flex:none}
.no-tags .ph-note{display:none}

/* kinetic headings: lines drift subtly with scroll position, lean slightly with speed */
.kin{transform:skewY(calc(var(--kv) * -.6deg));transform-origin:0 50%;will-change:transform}
.kin .kl{display:block;translate:calc(var(--kp,0) * -.45vw) 0}
.kin .kl:nth-child(even){translate:calc(var(--kp,0) * .45vw) 0}

/* buttons */
.btn{position:relative;display:inline-flex;background:transparent;border:0;font-family:inherit;color:inherit;cursor:pointer;align-items:center;gap:14px;height:56px;padding:0 8px 0 22px;border-radius:16px;font-weight:700;font-size:15px;overflow:hidden;isolation:isolate;transition:transform .6s var(--ease)}
.btn .tx{position:relative;display:block;overflow:hidden;height:1.4em;line-height:1.4em}
.btn .tx i{display:block;font-style:normal;transition:transform .7s var(--ease)}
.btn .tx i + i{position:absolute;left:0;top:100%}
.btn:hover .tx i{transform:translateY(-100%)}
.btn .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;flex:none;transition:width .6s var(--ease)}
.btn .ic svg{width:16px;height:16px;transition:transform .6s var(--ease)}
.btn:hover .ic{width:52px}
.btn:hover .ic svg{transform:translateX(3px)}
.btn::before{content:"";position:absolute;inset:0;transform:translateY(102%);transition:transform .7s var(--ease);z-index:-1}
.btn:hover::before{transform:none}
.btn:active{transform:scale(.97)}
.btn-w{background:var(--paper);color:var(--ink)}
.btn-w .ic{background:var(--ink);color:var(--paper)}
.btn-w::before{background:#e6e6e6}
.btn-g{border:1px solid rgba(249,249,249,.22);color:var(--paper)}
.btn-g .ic{background:var(--paper);color:var(--ink)}
.btn-g::before{background:rgba(249,249,249,.08)}
.btn-s{height:48px;padding-left:18px;font-size:14px}
.btn-s .ic{width:34px;height:34px;border-radius:10px}
.btn[disabled]{opacity:.35;pointer-events:none}
.btns{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.spot{position:relative;isolation:isolate}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(249,249,249,.08),transparent 60%);opacity:0;transition:opacity .6s var(--ease);pointer-events:none;z-index:1}
.spot:hover::after{opacity:1}
.chip{font-size:12px;padding:.3rem .7rem;border-radius:999px;border:1px solid rgba(249,249,249,.14);color:#bdbdbd;white-space:nowrap}

.grain{position:fixed;inset:-50%;width:200%;height:200%;background:url(../assets/img/grain.png) repeat;opacity:.035;pointer-events:none;z-index:95;animation:grain 1.4s steps(6) infinite}
.rm:not(.has-grain) .grain{display:none}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}
.prog{position:fixed;right:0;top:0;width:3px;height:100%;background:var(--grad);transform-origin:50% 0;transform:scaleY(var(--sp,0));z-index:80;pointer-events:none}
@keyframes fi{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes up{from{transform:translateY(110%) skewY(7deg)}to{transform:none}}
@keyframes mIn{from{opacity:0}to{opacity:1}}

/* reveals */
.has-io .rv{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--ease) var(--d,0s),transform 1.4s var(--ease) var(--d,0s),translate .8s var(--ease),border-color .6s var(--ease)}
.has-io .rv.in{opacity:1;transform:none}
.has-io .rv-img{clip-path:inset(14% 9% 14% 9% round var(--r));transition:clip-path 1.7s var(--ease) var(--d,0s)}
.has-io .rv-img.in{clip-path:inset(0 0 0 0 round var(--r))}
.has-io .rv-img .zm{scale:1.2;transition:scale 2.2s var(--ease) var(--d,0s)}
.has-io .rv-img.in .zm{scale:1}

/* custom cursor (desktop) */
.cur{position:fixed;left:0;top:0;z-index:400;pointer-events:none;display:none}
.has-cur .cur{display:block}
.has-cur,.has-cur a,.has-cur button,.has-cur [role="button"]{cursor:none}
.has-cur input,.has-cur textarea{cursor:text}
.cur-d{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--paper);transition:transform .35s var(--ease),opacity .3s}
.cur-r{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(249,249,249,.5);display:grid;place-items:center;transition:transform .55s var(--ease),background .4s,border-color .4s,width .55s var(--ease),height .55s var(--ease),left .55s var(--ease),top .55s var(--ease)}
.cur-l{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .3s;white-space:nowrap}
.cur.is-link .cur-r{transform:scale(1.5);border-color:var(--paper)}
.cur.is-link .cur-d{transform:scale(0)}
.cur.is-lab .cur-r{width:92px;height:92px;left:-46px;top:-46px;background:var(--paper);border-color:var(--paper)}
.cur.is-lab .cur-l{opacity:1}
.cur.is-lab .cur-d{transform:scale(0)}
.cur.is-text{opacity:0}
.cur.is-down .cur-r{transform:scale(.85)}


/* ============ NAV ============ */
.nav-fade{position:fixed;left:0;right:0;top:0;height:130px;background:linear-gradient(180deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.55) 45%,rgba(10,10,10,0) 100%);opacity:0;transition:opacity .8s var(--ease);z-index:69;pointer-events:none}
.nav-fade.on{opacity:1}
.nav{position:fixed;top:12px;left:50%;z-index:70;display:flex;align-items:center;padding:5px;border-radius:24px;transform:translateX(-50%);background:rgba(14,14,14,0);border:1px solid rgba(249,249,249,0);transition:background .9s var(--ease),border-color .9s var(--ease),box-shadow .9s var(--ease),opacity .9s var(--ease),translate 1.1s var(--ease)}
.nav.is-pre{translate:0 -130%;opacity:0}
.nav.is-open{background:rgba(14,14,14,.74);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border-color:rgba(249,249,249,.1);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.nav-r{display:grid;place-items:center;width:86px;height:62px;position:relative;z-index:2;flex:none}
.nav-r img{width:66px;height:auto;display:block;filter:drop-shadow(0 2px 14px rgba(0,0,0,.5));transition:transform 1s var(--ease)}
.nav.is-open .nav-r img{transform:scale(.82)}
.nav-hi{position:absolute;left:0;top:50%;height:44px;margin-top:-22px;border-radius:15px;background:var(--paper);transition:transform .55s var(--ease),width .55s var(--ease),opacity .35s var(--ease);pointer-events:none;z-index:0}
.nl.is-hi{color:var(--ink)}
.nl-dot{position:absolute;left:50%;bottom:5px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#ff7a1a;transform:scale(0);transition:transform .5s var(--ease)}
.nl.is-active .nl-dot{transform:scale(1)}
.mob-menu{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.menu{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;flex-direction:column;padding:1.4rem var(--gut) 2rem;animation:menuIn .9s var(--ease) both;overflow-y:auto}
@keyframes menuIn{from{clip-path:circle(0% at 50% 40px)}to{clip-path:circle(150% at 50% 40px)}}
.menu-top{display:flex;justify-content:space-between;align-items:center}
.menu-top img{height:26px;width:auto}
.close{display:flex;align-items:center;gap:.6rem;min-height:44px;font-size:14px;font-weight:600}
.close svg{width:18px;height:18px}
.menu-list{list-style:none;margin:auto 0;padding:2rem 0}
.menu-list li{overflow:hidden}
.menu-link{display:block;padding:.35rem 0;font-size:clamp(2.2rem,10vw,5rem);animation:up 1.1s var(--ease) both}
.menu-foot{display:flex;flex-direction:column;gap:.5rem;font-size:15px;color:#bdbdbd}
.menu-foot a{min-height:40px;display:inline-flex;align-items:center}

/* ============ HERO ============ */
.hero-scope{position:relative}
.hero-wrap{position:sticky;top:0;height:max(34rem,min(100svh,64rem));padding:86px 12px 12px;z-index:0;--hp:0;--mx:0px;--my:0px;--hx:50%;--hy:40%;--hr:0px}
.hero{position:relative;height:100%;overflow:hidden;background:#0a0a0a;border-radius:var(--r);transform:scale(calc(1 - var(--hp) * .05));transform-origin:50% 0;isolation:isolate}
.hero-img{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;object-position:50% 78%;transform:translate3d(var(--mx),calc(var(--my) + var(--hp) * 6%),0)}
.hero > .hero-img{filter:brightness(.6) contrast(1.05)}
.is-ready .hero > .hero-img{animation:kb 2.6s var(--ease) both}
@keyframes kb{from{scale:1.16;opacity:0}to{scale:1;opacity:1}}
.hero-lit{position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle var(--hr) at var(--hx) var(--hy),#000 0%,rgba(0,0,0,.85) 42%,transparent 100%);mask-image:radial-gradient(circle var(--hr) at var(--hx) var(--hy),#000 0%,rgba(0,0,0,.85) 42%,transparent 100%);pointer-events:none}
.hero-lit .hero-img{filter:brightness(.96) contrast(1.04)}
.hero-lit.xray .hero-img{filter:invert(1) sepia(.6) hue-rotate(165deg) saturate(1.5) contrast(1.15) brightness(.92)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.62) 30%,rgba(10,10,10,0) 58%),linear-gradient(180deg,rgba(10,10,10,.45) 0%,rgba(10,10,10,0) 22%);pointer-events:none}
.hero-dim{position:absolute;inset:0;background:#000;opacity:calc(var(--hp) * .7);pointer-events:none}
.hero-in{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 var(--gut) clamp(2rem,6vh,3.5rem)}
.hero-eye{display:inline-flex;align-items:center;gap:.65rem;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#d6d6d6;opacity:0}
.is-ready .hero-eye{animation:fi 1.2s var(--ease) .1s both}
.h-hero{font-size:clamp(2.4rem,6vw,6.2rem);margin:1.1rem 0 0}
.h-hero .ln{display:block;overflow:hidden;padding:.18em 0 .06em;margin:-.18em 0 -.06em}
.h-hero .ln > span{display:block;transform:translateY(110%) skewY(7deg);transform-origin:0 100%}
.is-ready .h-hero .ln > span{animation:up 1.6s var(--ease) both}
.hw-g{display:grid !important}
.hw{grid-area:1 / 1;justify-self:center;display:block;transform:translateY(108%);opacity:0;transition:transform .95s cubic-bezier(.65,0,.2,1),opacity .6s ease}
.hw.on{transform:none;opacity:1;transition-delay:.12s}
.hw.out{transform:translateY(-108%);opacity:0}
.hero-sub{margin:1.3rem auto 0;font-size:clamp(1rem,1.2vw,1.1rem);color:#d0d0d0;max-width:52ch;line-height:1.6;opacity:0;text-wrap:balance}
.hero-in .btns{justify-content:center;margin-top:1.7rem;opacity:0}
.is-ready .hero-sub{animation:fi 1.2s var(--ease) .8s both}
.is-ready .hero-in .btns{animation:fi 1.2s var(--ease) .95s both}
.hero-scroll{position:absolute;right:clamp(1.25rem,2.6vw,2.25rem);bottom:clamp(1.25rem,2.6vw,2.25rem);display:grid;place-items:center;width:96px;height:96px;opacity:0;z-index:2}
.is-ready .hero-scroll{animation:fi 1.2s var(--ease) 1.2s both}
.hero-scroll svg.ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 16s linear infinite}
.hero-scroll text{fill:#cfcfcf;font-family:"DM Sans",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.32em}
.hero-scroll .core{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--paper);color:var(--ink);transition:transform .7s var(--ease)}
.hero-scroll .core svg{width:16px;height:16px;animation:nudge 2.2s var(--ease) infinite}
.hero-scroll:hover .core{transform:scale(1.12)}
@keyframes spin{to{rotate:360deg}}
@keyframes nudge{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.lift{position:relative;z-index:2;background:var(--ink);border-radius:40px 40px 0 0;box-shadow:0 -40px 80px rgba(0,0,0,.5)}

/* ============ OVER RUBO MEDIA ============ */

/* ============ DE MAKER ============ */
.ab-h{font-size:clamp(1.9rem,3.6vw,3.3rem)}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:2.5rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.num{padding:1.3rem 1rem 1.3rem 0}
.num + .num{padding-left:1rem;border-left:1px solid var(--line)}
.num b{display:block;font-family:var(--G);font-weight:900;font-size:clamp(1.8rem,3.2vw,2.9rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.num span{display:block;margin-top:.5rem;font-size:13px;color:#a9a9a9;line-height:1.35}


/* ============ ACTIVE PROJECTS BAR ============ */

/* ============ PILLARS ============ */

/* ============ REVIEWS ============ */

/* more to come */
.xp-more{background:transparent;border-style:dashed;border-color:rgba(249,249,249,.18)}
.xp-more .xp-logo{font-family:var(--G);font-weight:900;font-size:26px}

/* ============ SERVICES ============ */
.grid3{display:grid;grid-template-columns:clamp(5.5rem,10vw,9rem) minmax(0,5fr) minmax(0,6fr);column-gap:clamp(1.25rem,3vw,3rem)}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc-row{position:relative;align-items:start;padding:clamp(1.8rem,3.2vw,2.6rem) 0;border-bottom:1px solid var(--line)}
.svc-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gradH);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.svc-row:hover::after{transform:scaleX(1)}
.svc-num{display:block;font-size:clamp(3rem,6vw,5.4rem);line-height:.78;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.4px rgba(249,249,249,.32);background:var(--grad) no-repeat 0 100% / 100% 0%;-webkit-background-clip:text;background-clip:text;transition:background-size .9s var(--ease),-webkit-text-stroke-color .6s var(--ease)}
.svc-row:hover .svc-num{background-size:100% 100%;-webkit-text-stroke-color:transparent}
.svc-t h3{margin:0;font-size:clamp(1.6rem,2.7vw,2.4rem);transition:transform .9s var(--ease)}
.svc-row:hover .svc-t h3{transform:translateX(10px)}
.svc-tags{margin:.9rem 0 0;font-size:13px;letter-spacing:.06em;color:var(--grey);font-weight:600}
.svc-d p{margin:0;color:#c8c8c8;max-width:48ch}
.svc-d p.sub{margin-top:.6rem;color:#8f8f8f;font-size:15px}

/* ============ PORTFOLIO (pinned horizontal) ============ */
.pf{position:relative;--pp:0}
.pf-stage{position:relative;display:flex;flex-direction:column;justify-content:center;gap:clamp(1.5rem,3vw,2.5rem);padding:clamp(5rem,9vw,7rem) 0 clamp(3rem,5vw,4rem);overflow:hidden}
.is-pin .pf-stage{position:sticky;top:0;height:var(--stageH);padding-top:5.5rem;padding-bottom:1.5rem}
.hz-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;width:100%}
.hz-ctrl{display:flex;align-items:center;gap:1rem;min-width:14rem;margin-top:1.25rem}
.pf-r{max-width:30rem}
.pf-r .lead-p{margin-top:0}
.hz-bar{flex:1;height:3px;border-radius:3px;background:rgba(249,249,249,.1);overflow:hidden}
.hz-bar span{display:block;height:100%;width:100%;background:var(--gradH);transform-origin:left;transform:scaleX(calc(.08 + var(--pp) * .92))}
.hz-n{font-variant-numeric:tabular-nums;font-weight:700;font-size:14px;color:#cfcfcf}
.hz-vp{width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none}
.hz-vp::-webkit-scrollbar{display:none}
.is-pin .hz-vp{overflow:hidden;scroll-snap-type:none}
.hz-track{display:flex;align-items:stretch;gap:clamp(1rem,2vw,1.5rem);width:max-content;padding:0 var(--gut);will-change:transform}
.pc{position:relative;display:flex;flex-direction:column;flex:none;width:clamp(19rem,34vw,32rem);scroll-snap-align:center;border-radius:var(--r);background:var(--card);border:1px solid var(--line);overflow:hidden;transition:border-color .6s var(--ease)}
.pc:hover{border-color:rgba(249,249,249,.2)}
.pc-img{position:relative;display:block;width:100%;height:clamp(11rem,28vh,19rem);overflow:hidden;background:#151515;text-align:left}
.pc-cover{position:absolute;inset:0;transition:scale 1.4s var(--ease)}
.pc:hover .pc-cover{scale:1.05}
.pc-n{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(5rem,10vw,9rem);color:rgba(249,249,249,.06)}
.pc-tag{position:absolute;left:1rem;top:1rem;z-index:2;padding:.38rem .7rem;border-radius:10px;background:rgba(10,10,10,.6);border:1px solid rgba(249,249,249,.12);font-size:12px;font-weight:700}
.pc-ph{position:absolute;right:1rem;top:1.2rem;z-index:2}
.pc-body{display:flex;flex-direction:column;gap:1.1rem;padding:1.35rem 1.35rem 1.4rem;flex:1}
.pc-body h3{margin:0;font-size:clamp(1.35rem,2vw,1.8rem)}
.pc-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:0;padding-top:1rem;border-top:1px solid var(--line)}
.pc-dl dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);font-weight:700}
.pc-dl dd{margin:.3rem 0 0;font-size:14px;color:#d8d8d8;font-weight:600}
.pc-body .btn{align-self:flex-start;margin-top:auto}
.pc-end{flex:none;width:clamp(16rem,24vw,21rem);display:flex;flex-direction:column;justify-content:center;gap:1.25rem;padding:2rem;border-radius:var(--r);border:1px dashed rgba(249,249,249,.18)}
.art-a{background:radial-gradient(circle at 30% 35%,#2b2b2b,#111 70%)}
.art-b{background:radial-gradient(circle at 70% 30%,#262626,#101010 70%)}
.art-c{background:linear-gradient(160deg,#222 0%,#0f0f0f 70%)}
.art-d{background:radial-gradient(circle at 50% 80%,#2a2a2a,#101010 70%)}
.art-e{background:radial-gradient(circle at 20% 80%,#272727,#0f0f0f 70%)}

/* case drawer */
.case-top{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.case-x{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;border:1px solid rgba(249,249,249,.18);transition:background .4s,color .4s,transform .6s var(--ease)}
.case-x:hover{background:var(--paper);color:var(--ink);transform:rotate(90deg)}
.case-x svg{width:16px;height:16px}
.case-p h2{margin:1.5rem 0 0;font-size:clamp(2rem,4vw,3.2rem)}
.case-img{position:relative;height:clamp(14rem,30vw,20rem);margin-top:1.5rem;border-radius:var(--r2);overflow:hidden;display:grid;place-items:center}
.case-sec{padding:1.4rem 0;border-top:1px solid var(--line)}
.case-sec:first-of-type{margin-top:1.75rem}
.case-sec h3{margin:0 0 .6rem;font-size:1.1rem}
.case-sec p{margin:0;color:#a9a9a9;max-width:56ch}
.case-nav{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.5rem;border-top:1px solid var(--line)}

/* ============ FOTO & VIDEO ============ */
.sr-s{--sr:0}
.sr-frame{position:relative;display:block;width:100%;margin:0 auto;transform:scale(calc(.84 + var(--sr) * .16));transform-origin:50% 0;will-change:transform;aspect-ratio:2.39/1;border-radius:var(--r);overflow:hidden;background:radial-gradient(ellipse 70% 90% at 50% 45%,#232323 0%,#101010 62%,#0a0a0a 100%);border:1px solid var(--line)}
.sr-bars{position:absolute;inset:0;pointer-events:none}
.sr-bars i{position:absolute;left:0;right:0;height:calc((1 - var(--sr)) * 8%);background:#000;opacity:.8}
.sr-bars i:first-child{top:0}.sr-bars i:last-child{bottom:0}
.sr-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1.25rem,2.6vw,2.2rem)}
.sr-row{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.sr-t{font-size:clamp(1.8rem,4.6vw,4.4rem);color:rgba(249,249,249,.92)}
.sr-play{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:.9rem;transform:translate(-50%,-50%);height:64px;padding:0 1.4rem 0 8px;border-radius:20px;background:var(--paper);color:var(--ink);font-weight:800;font-size:15px;transition:transform .8s var(--ease)}
.sr-play em{font-style:normal}
.sr-play span{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--ink)}
.sr-play svg{width:16px;height:16px;margin-left:3px;fill:var(--paper)}
.sr-frame:hover .sr-play{transform:translate(-50%,-50%) scale(1.06)}
.fv-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,1.4vw,1.25rem);margin-top:clamp(.75rem,1.4vw,1.25rem)}
.fv{position:relative;display:flex;flex-direction:column;justify-content:space-between;width:100%;aspect-ratio:4/5;padding:1.3rem;border-radius:var(--r);overflow:hidden;background:#141414;border:1px solid var(--line);text-align:left;color:inherit;font:inherit;cursor:pointer;transition:border-color .6s var(--ease)}
.fv:hover{border-color:rgba(249,249,249,.22)}
.fv .zm{position:absolute;inset:0;transition:scale 1.5s var(--ease)}
.fv:hover .zm{scale:1.05}
.fv::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,0) 55%);z-index:1;pointer-events:none}
.fv-top,.fv-bot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.fv-bot{flex-direction:column;align-items:stretch;gap:0}
.fv-tag{padding:.38rem .7rem;border-radius:10px;background:rgba(10,10,10,.6);border:1px solid rgba(249,249,249,.12);font-size:12px;font-weight:700}
.fv h3{margin:0;font-size:clamp(1.4rem,2.2vw,2rem)}
.fv p{margin:.5rem 0 0;color:#b9b9b9;font-size:15px;max-width:30ch}
.fv-go{display:flex;align-items:center;justify-content:space-between;margin-top:1.1rem;padding-top:1rem;border-top:1px solid rgba(249,249,249,.14);font-weight:700;font-size:14px}
.fv-go i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--paper);color:var(--ink);transition:transform .7s var(--ease)}
.fv-go svg{width:15px;height:15px}
.fv:hover .fv-go i{transform:rotate(-45deg)}
.fv-ph{position:absolute;inset:0 0 42% 0;display:grid;place-items:center;z-index:1;pointer-events:none}
.k4{display:inline-flex;align-items:center;gap:.45rem;padding:.38rem .7rem;border-radius:10px;background:var(--paper);color:var(--ink);font-size:12px;font-weight:800;letter-spacing:.06em}
.k4 b{width:7px;height:7px;border-radius:50%;background:#ff3636;opacity:0;transition:opacity .4s}
.fv-drone:hover .k4 b{opacity:1;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}

/* lightbox + modal */
.modal{position:fixed;inset:0;z-index:350;background:rgba(0,0,0,.94);display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);animation:mIn .7s var(--ease) both;outline:none}
.modal-box{position:relative;width:min(100%,1200px);aspect-ratio:16/9;border-radius:var(--r2);overflow:hidden;background:#111;display:grid;place-items:center;text-align:center;padding:2rem;animation:mBox .9s var(--ease) both}
@keyframes mBox{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.modal-box p{max-width:40ch;color:#bdbdbd;margin:1rem auto 1.5rem}
.modal-x{position:absolute;right:clamp(1rem,3vw,2rem);top:clamp(1rem,3vw,2rem);display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--paper);color:var(--ink);transition:transform .6s var(--ease);z-index:2}
.modal-x:hover{transform:rotate(90deg)}
.modal-x svg{width:18px;height:18px}
.lb{position:fixed;inset:0;z-index:360;background:rgba(6,6,6,.97);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:clamp(1rem,3vw,2.5rem);animation:mIn .6s var(--ease) both;touch-action:pan-y}
.lb:focus{outline:none}
.lb figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;min-width:0}
.lb-img{max-width:100%;max-height:calc(100% - 3rem);width:auto;height:auto;border-radius:16px;object-fit:contain}
.lb-ph{width:min(100%,1000px);aspect-ratio:4/3;max-height:calc(100% - 3rem);border-radius:16px;background:radial-gradient(circle at 40% 40%,#2a2a2a,#0e0e0e 70%);display:grid;place-items:center;color:#6a6a6a;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.lb-a{animation:lbIn .7s var(--ease) both}.lb-b{animation:lbIn2 .7s var(--ease) both}
@keyframes lbIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes lbIn2{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.lb figcaption{display:flex;gap:1rem;align-items:center;font-size:14px;color:#cfcfcf}
.lb-nav{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;border:1px solid rgba(249,249,249,.2);transition:background .4s,color .4s,transform .6s var(--ease)}
.lb-nav:hover{background:var(--paper);color:var(--ink);transform:scale(1.06)}
.lb-nav svg{width:18px;height:18px}

/* ============ LOGO MARQUEE ============ */
.lg-s{padding:clamp(1rem,3vw,2rem) 0 clamp(5rem,9vw,8rem)}
.lg-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(1.5rem,3vw,3rem);padding:1.6rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.mq-t{display:flex;width:max-content;animation:mq 36s linear infinite}
.mq:hover .mq-t{animation-play-state:paused}
.mq-g{display:flex;align-items:center;gap:clamp(3rem,6vw,5.5rem);padding-right:clamp(3rem,6vw,5.5rem)}
@keyframes mq{to{transform:translateX(-50%)}}
.mq img{display:block;height:46px;width:auto;opacity:.5;transition:opacity .6s var(--ease)}
.mq img.wide{height:40px}
.mq img:hover{opacity:.95}
.lg-cta{display:inline-flex;align-items:center;gap:.6rem;height:50px;padding:0 1.1rem;border-radius:15px;border:1px dashed rgba(249,249,249,.25);font-size:14px;color:#bdbdbd;white-space:nowrap;transition:border-color .5s,color .5s,background .5s}
.lg-cta b{color:var(--paper)}
.lg-cta:hover{border-style:solid;border-color:var(--paper);background:var(--paper);color:var(--ink)}
.lg-cta:hover b{color:var(--ink)}

/* ============ EXPERIENCE ============ */
.xp-list{position:relative;display:flex;flex-direction:column;gap:1rem;padding-left:2.25rem;--ep:0}
.xp-list::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;border-radius:2px;background:rgba(249,249,249,.08)}
.xp-line{position:absolute;left:7px;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--grad);transform-origin:top;transform:scaleY(var(--ep))}
.xp{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);gap:1.25rem;align-items:start;padding:1.4rem;border-radius:var(--r2);background:var(--card);border:1px solid var(--line)}
.xp::before{content:"";position:absolute;left:-2.25rem;top:2.2rem;width:16px;height:16px;border-radius:50%;background:var(--ink);border:2px solid rgba(249,249,249,.35);transition:border-color .5s,background .5s}
.xp:hover{translate:8px 0;border-color:rgba(249,249,249,.2)}
.xp:hover::before{border-color:#ff7a1a;background:#ff7a1a}
.xp-logo{display:grid;place-items:center;width:76px;height:76px;border-radius:18px;background:var(--paper);overflow:hidden;position:relative;z-index:2;transition:transform .8s var(--ease)}
.xp:hover .xp-logo{transform:rotate(-6deg) scale(1.05)}
.xp-logo img{max-width:74%;max-height:62%;width:auto;height:auto;display:block}
.xp-logo.dark{background:#1d1d1d;border:1px solid var(--line);color:var(--paper)}
.xp-logo.dark img{max-width:58%}
.xp > div:last-child{position:relative;z-index:2}
.xp h3{margin:0;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.1}
.xp-co{margin:.4rem 0 0;font-weight:600;color:#d8d8d8;font-size:15px}
.xp-when{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.7rem}
.xp-d{margin:.8rem 0 0;font-size:14.5px;color:#a9a9a9}

/* ============ WERKWIJZE timeline ============ */
.ww{--wp:0}
.ww-line{position:relative;height:2px;margin:clamp(3rem,6vw,4.5rem) 0 0;border-radius:2px;background:rgba(249,249,249,.1)}
.ww-line span{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:2px;background:var(--gradH);transform-origin:left;transform:scaleX(var(--wp))}
.ww-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem)}
.st{position:relative;padding-top:2.2rem;--on:clamp(0,calc((var(--wp) * 4.2 - var(--i)) * 1.5),1)}
.st-dot{position:absolute;left:0;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--ink);border:2px solid rgba(249,249,249,.3);transform:scale(calc(.8 + var(--on) * .3))}
.st-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#ff7a1a;opacity:var(--on)}
.st b{display:block;font-size:12px;letter-spacing:.16em;color:var(--grey);font-weight:700}
.st h3{margin:.7rem 0 .7rem;font-size:clamp(1.3rem,2vw,1.8rem);opacity:calc(.35 + var(--on) * .65);transform:translateY(calc((1 - var(--on)) * 14px))}
.st p{margin:0;color:#a9a9a9;font-size:15px;max-width:30ch;opacity:calc(.25 + var(--on) * .75)}

/* ============ MAP ============ */

/* ============ PROJECTKOMPAS ============ */
.fld{display:flex;flex-direction:column;gap:.4rem}
.fld label{font-size:13px;font-weight:600;color:#cfcfcf}
.fld input{height:48px;padding:0 1rem;border-radius:14px;background:#151515;border:1px solid rgba(249,249,249,.16);color:var(--paper);font:inherit;font-size:15px}
.fld input:focus{outline:none;border-color:#ff7a1a}
.link-b{min-height:44px;color:#bdbdbd;font-weight:600;font-size:14px}
.link-b:hover{color:var(--paper)}
.link-b[disabled]{visibility:hidden}

/* ============ CONTACT ============ */
.ct{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:center;padding:clamp(1.75rem,4vw,3.5rem);border-radius:var(--r);background:var(--card);border:1px solid var(--line);overflow:hidden;isolation:isolate;--sx:80%;--sy:20%}
.ct-glow{position:absolute;left:var(--sx);top:var(--sy);width:460px;height:460px;margin:-230px 0 0 -230px;border-radius:50%;background:conic-gradient(from 200deg,#710c12,#ff3636,#ff7a1a,#ffe436,#710c12);filter:blur(100px);opacity:.1;pointer-events:none;z-index:-1}
.ct-h{font-size:clamp(2rem,4.2vw,3.8rem);margin:0;max-width:16ch}
.ct-links{display:flex;flex-direction:column;gap:.75rem}
.ct-l{display:grid;grid-template-columns:52px minmax(0,1fr) 42px;align-items:center;gap:1rem;padding:1rem;border-radius:var(--r2);border:1px solid rgba(249,249,249,.14);background:rgba(12,12,12,.4);transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),translate .8s var(--ease)}
.ct-l:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);translate:0 -3px}
.ct-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:#1e1e1e;color:var(--paper);transition:background .5s,color .5s}
.ct-l:hover .ct-ic{background:var(--ink)}
.ct-ic svg{width:24px;height:24px}
.ct-l b{display:block;font-size:16px}
.ct-l small{display:block;margin-top:.1rem;font-size:14px;color:#9a9a9a;transition:color .5s}
.ct-l:hover small{color:#555}
.ct-ar{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid rgba(249,249,249,.18);transition:transform .7s var(--ease),border-color .5s}
.ct-l:hover .ct-ar{transform:rotate(-45deg);border-color:rgba(12,12,12,.25)}
.ct-ar svg{width:15px;height:15px}
.ct-ic .wa-b{stroke:currentColor}
.ct-ic .wa-p{fill:currentColor}

/* ============ FOOTER ============ */
.ft{padding:clamp(4rem,7vw,6rem) 0 1.5rem;border-top:1px solid var(--line)}
.ft-g{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:2rem}
.ft-g p{margin:1rem 0 0;color:#9a9a9a;font-size:15px;max-width:32ch}
.ft ul{list-style:none;margin:1rem 0 0;padding:0;font-size:15px}
.ft li a,.ft li span{position:relative;display:inline-flex;align-items:center;min-height:36px;color:#d0d0d0;transition:color .4s}
.ft li a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease)}
.ft li a:hover{color:var(--paper)}
.ft li a:hover::after{transform:scaleX(1);transform-origin:left}
.ft-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem 2rem;margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.5rem;border-top:1px solid var(--line)}
.ft-bar p{margin:0;font-size:13px;line-height:1.5;color:#8f8f8f}
.ft-cred a{color:#d0d0d0;text-decoration:underline;text-decoration-color:rgba(249,249,249,.3);text-underline-offset:3px;transition:color .4s,text-decoration-color .4s}
.rm .ft-cred a:hover{color:var(--paper);text-decoration-color:var(--paper)}
.ft-logo{display:inline-block}
.ft-logo img{height:46px;width:auto;display:block}

/* ============ WHATSAPP ============ */
.wa{position:fixed;right:clamp(1rem,2.5vw,1.75rem);bottom:clamp(1rem,2.5vw,1.75rem);z-index:75;display:flex;align-items:center;gap:.75rem;height:66px;padding:0 1.35rem 0 8px;border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:0 16px 50px rgba(0,0,0,.55);transform:translateY(170%);transition:transform 1.1s var(--spring)}
.wa.is-on{transform:none}
.wa.is-on.is-off{transform:translateY(170%);pointer-events:none}
.wa::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--paper);animation:waPing 2.8s var(--ease) infinite;pointer-events:none}
@keyframes waPing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.25,1.45);opacity:0}}
.wa-ic{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;flex:none;transition:transform .7s var(--spring)}
.wa-ic svg{width:30px;height:30px}
.wa-b{fill:none;stroke:#0c0c0c;stroke-width:2.4;stroke-linejoin:round}
.wa-p{fill:#0c0c0c}
.wa:hover .wa-ic{transform:rotate(-10deg) scale(1.08)}
.wa-t{display:flex;flex-direction:column;line-height:1.15}
.wa-t b{font-size:15px;font-weight:800}
.wa-t small{font-size:12px;color:#555;font-weight:600}
.wa.is-on:not(.is-off):hover{transform:translateY(-4px)}


/* ============ LAYOUT SYSTEM (v10) ============ */
.rm{--sp:clamp(6rem,10vw,9rem);--hg:clamp(2.5rem,4.5vw,3.75rem);--cp:clamp(1.75rem,4vw,3.5rem);--cg:clamp(2rem,5vw,5rem)}
.sec{padding:calc(var(--sp) / 2) 0}
.sec.first{padding-top:var(--sp)}
.head{align-items:end;margin-bottom:var(--hg)}
.head > :first-child{grid-column:1 / 3}
.head .lead-p{margin-top:0}
.head .lead-p + .lead-p{margin-top:.9rem}
.head-r{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
.card2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--cg);align-items:center;padding:var(--cp);border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.card2 .kick{margin-bottom:1.25rem}

.pf-stage{padding:calc(var(--sp) / 2) 0}
.is-pin .pf-stage{padding-top:clamp(5rem,10.5vh,6rem);padding-bottom:clamp(1rem,3.5vh,2rem)}
.pf-stage .head{margin-bottom:0;width:100%}
/* ============ HERO SLIDES ============ */
.hero-slides,.hero-lit{position:absolute;inset:0}
.is-ready .hero-slides{animation:kb 2.6s var(--ease) both}
.hero-slides .hero-img{filter:brightness(.6) contrast(1.05)}
.hs.s2{object-position:50% 35%}
.hero-ind{position:absolute;left:clamp(1.25rem,2.6vw,2.25rem);bottom:clamp(1.25rem,2.6vw,2.25rem);z-index:2;display:flex;align-items:center;gap:.5rem;opacity:0}
.is-ready .hero-ind{animation:fi 1.2s var(--ease) 1.2s both}
.hero-ind button{position:relative;width:44px;height:28px;display:grid;align-items:center}
.hero-ind button i{display:block;height:3px;border-radius:3px;background:rgba(249,249,249,.25);overflow:hidden}
.hero-ind button i b{display:block;height:100%;width:100%;background:var(--paper);transform:scaleX(0);transform-origin:left}
.hero-ind button.on i b{animation:hsb 5.5s linear both}
.hero-ind.paused button.on i b{animation-play-state:paused}
@keyframes hsb{to{transform:scaleX(1)}}
.hero-ind .hi-n{font-size:12px;font-weight:700;color:#cfcfcf;font-variant-numeric:tabular-nums;margin-left:.35rem}

/* ============ OVER RUBO MEDIA (v10) ============ */

/* ============ DE MAKER (v10) ============ */
.ab-g{align-items:center}
.ab-wrap{grid-column:1 / 3;border-radius:var(--r)}
.ab-txt{grid-column:3 / 4}
.ab-img{position:relative;display:block;aspect-ratio:4/5;max-height:44rem;border-radius:var(--r);overflow:hidden;background:#151515;--ax:50%;--ay:40%;--ar:0px}
.ab-img img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;transform:translateY(var(--py,0px))}
.ab-base{filter:brightness(.92)}
.ab-lit{position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle var(--ar) at var(--ax) var(--ay),#000 0%,rgba(0,0,0,.85) 42%,transparent 100%);mask-image:radial-gradient(circle var(--ar) at var(--ax) var(--ay),#000 0%,rgba(0,0,0,.85) 42%,transparent 100%);pointer-events:none}
.ab-hint{position:absolute;right:1rem;top:1rem;z-index:4;display:inline-flex;align-items:center;gap:.6rem;height:44px;padding:0 1rem 0 .45rem;border-radius:14px;background:rgba(10,10,10,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(249,249,249,.12);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);cursor:pointer;transition:background .5s var(--ease),color .5s var(--ease)}
.ab-hint:hover{background:var(--paper);color:var(--ink)}
.ab-hint i{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--paper);color:var(--ink);font-style:normal;font-size:18px;line-height:1;transition:transform .8s var(--ease),background .5s,color .5s}
.ab-hint:hover i{background:var(--ink);color:var(--paper)}
.ab-cap{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem .95rem;border-radius:14px;background:rgba(10,10,10,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.ab-cap b{font-size:14px}.ab-cap span{font-size:12px;color:#bdbdbd}
.edu-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--paper);color:var(--ink);font-family:var(--G);font-weight:900;font-size:12px}
.edu-i b{display:block;font-size:15px;line-height:1.25}
.edu-i small{display:block;margin-top:.15rem;font-size:13px;color:#a9a9a9}
.edu-st{display:inline-flex;align-items:center;gap:.4rem;margin-top:.45rem;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#cfcfcf}
.edu-st i{width:7px;height:7px;border-radius:50%;background:#6a6a6a}
.edu-st.now i{background:#ff7a1a;box-shadow:0 0 10px rgba(255,122,26,.7)}
.ab-img.is-open .ab-cap{opacity:0;transform:translateY(12px)}
.ab-img.is-open .ab-hint i{transform:rotate(135deg)}

/* ============ SETUP TEASER ============ */
.su{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--cg);align-items:stretch;padding:var(--cp);border-radius:var(--r);background:radial-gradient(ellipse 60% 80% at 75% 55%,#1b1b1b 0%,#0e0e0e 70%);border:1px solid var(--line);overflow:hidden}
.su-l{display:flex;flex-direction:column;justify-content:center}
.su-list{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--line)}
.su-list li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line);transition:padding .7s var(--ease)}
.su-list li:hover{padding-left:.5rem}
.su-list span{font-family:var(--G);font-weight:900;font-size:13px;color:var(--grey);padding-top:.15rem}
.su-list b{display:block;font-size:15px}
.su-list small{display:block;margin-top:.15rem;color:#9a9a9a;font-size:14px}
.su-r{position:relative;min-height:30rem;border-radius:var(--r2);overflow:hidden;background:#090909}
.su-r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(calc(1.08 - var(--sz,0) * .08));transition:transform .2s linear}
.su-r::after{display:none;content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0e0e0e 0%,rgba(14,14,14,0) 22%),linear-gradient(0deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,0) 35%);pointer-events:none}
.su-tag{position:absolute;left:1rem;bottom:1rem;z-index:2}
.su .btn{margin-top:2rem;align-self:flex-start}

/* ============ WERKGEBIED (v10) ============ */
.wg-facts{display:grid;gap:.6rem;margin-top:2rem}
.wg-f{display:grid;grid-template-columns:40px minmax(0,1fr);gap:1rem;align-items:center;padding:.85rem 1rem;border-radius:16px;border:1px solid rgba(249,249,249,.12)}
.wg-f .wg-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#1e1e1e}
.wg-f .wg-ic svg{width:20px;height:20px}
.wg-f b{display:block;font-size:15px}
.wg-f small{display:block;font-size:13px;color:#9a9a9a}
.wg-f.base .wg-ic{background:transparent;border:1px solid rgba(255,122,26,.5)}
.wg-f.base .wg-ic i{width:10px;height:10px;border-radius:50%;background:#ff7a1a}
.home-p{fill:none;stroke:#ff7a1a;stroke-width:3;transform-box:fill-box;transform-origin:center;animation:pulse 2.6s var(--ease) infinite}
.home-p.d2{animation-delay:1.3s}
@keyframes pulse{from{transform:scale(.4);opacity:1}to{transform:scale(3.4);opacity:0}}

/* ============ EXPERIENCE (v10) ============ */
.xp-side{grid-column:1 / 3;position:sticky;top:8rem;align-self:start}
.xp-list{grid-column:3 / 4}

/* card sections (v10) */
.ct{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--cg);padding:var(--cp)}
.ct-h{font-size:clamp(1.9rem,3.6vw,3.3rem)}

/* ============ DOCK + RUBO MATCH ============ */


/* ============ v11 ============ */
/* nav: equal, mirrored sides */
.nav{--sw:348px}
.nav-side{width:0;overflow:hidden;transition:width .75s var(--ease) .1s}
.nav.is-open .nav-side{width:var(--sw);transition:width .85s var(--ease)}
.nav-side > div{width:var(--sw);display:flex;align-items:center;gap:4px}
.nav-l > div{justify-content:flex-end;padding-right:4px}
.nav-rt > div{justify-content:flex-start;padding-left:4px}
.nav-l{--dx:14px;display:flex;justify-content:flex-end}.nav-rt{--dx:-14px}
.nl,.nav-cta{flex:none;width:112px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:15px;font-size:14px;white-space:nowrap;opacity:0;translate:var(--dx) 0;transition:opacity .3s var(--ease),translate .5s var(--ease),color .35s var(--ease),background .35s var(--ease)}
.nav.is-open .nl,.nav.is-open .nav-cta{opacity:1;translate:0 0;transition:opacity .6s var(--ease) calc(.16s + var(--k,0) * .05s),translate .8s var(--ease) calc(.16s + var(--k,0) * .05s),color .35s var(--ease),background .35s var(--ease)}
.nl{position:relative;z-index:1;font-weight:600;color:var(--paper)}
.nl.is-hi{color:var(--ink)}
.nav-cta{position:relative;z-index:1;background:var(--paper);color:var(--ink);font-weight:700}
.nav-cta:hover{background:#e3e3e3;color:var(--ink)}

/* hero slides: quicker, smoother crossfade */
.hs{opacity:0;scale:1.05;transition:opacity 1.1s cubic-bezier(.45,0,.2,1),scale 2.4s var(--ease)}
.hs.on{opacity:1;scale:1}
.hero-ind button.on i b{animation-duration:4.2s}

/* over rubo media: centred + boxed */
.in-c{max-width:60rem;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.in-c .kick{justify-content:center}
.in-c .lead-p{max-width:58ch;margin-inline:auto}
.motto{font-size:clamp(2.8rem,7vw,7rem);margin:0}
.pil-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,1.4vw,1.25rem);margin-top:var(--hg)}
.pil{padding:clamp(1.4rem,2.4vw,1.9rem);border-radius:var(--r);background:var(--card);border:1px solid var(--line);transition:border-color .6s var(--ease),translate .8s var(--ease)}
.pil:hover{border-color:rgba(249,249,249,.2);translate:0 -4px}
.pil-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(2rem,4vw,2.75rem)}
.pil-top span{font-family:var(--G);font-weight:900;font-size:13px;color:var(--grey)}
.pil h3{margin:0;font-size:clamp(1.25rem,1.8vw,1.65rem)}
.pil p{margin:.7rem 0 0;color:#a9a9a9;font-size:15px}

/* education panel: soft slide + fade */
.edu{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:3;padding:1.25rem 1.25rem .4rem;border-radius:var(--r2);background:rgba(12,12,12,.84);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);border:1px solid rgba(249,249,249,.12);opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .75s cubic-bezier(.22,1,.36,1);pointer-events:none;will-change:transform,opacity}
.edu .lbl{display:block;padding-bottom:.6rem}
.edu-i{display:grid;grid-template-columns:46px minmax(0,1fr);gap:.9rem;align-items:center;padding:.9rem 0;border-top:1px solid var(--line);opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.ab-img.is-open .edu{opacity:1;transform:none;pointer-events:auto}
.ab-img.is-open .edu-i{opacity:1;transform:none;transition-delay:.12s}
.ab-img.is-open .edu-i + .edu-i{transition-delay:.2s}
.ab-img .ab-base{transition:filter .7s ease}
.ab-img.is-open .ab-base{filter:brightness(.7)}
.ab-img.is-open .ab-hint i{transform:rotate(45deg)}

/* maker socials */
.socs{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.75rem}
.socs .lbl{margin-right:.4rem}
.soc{display:inline-flex;align-items:center;gap:.6rem;height:46px;padding:0 1rem 0 .4rem;border-radius:14px;border:1px solid rgba(249,249,249,.16);font-size:14px;font-weight:600;color:var(--paper);transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.soc i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#1e1e1e;transition:background .45s,color .45s}
.soc i svg{width:17px;height:17px}
.soc:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.soc:hover i{background:var(--ink);color:var(--paper)}

/* portfolio with real covers */
.pc-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc-img .pc-tag{z-index:2}
.pc-dl dd{font-size:13.5px}
.case-p{width:min(100%,52rem)}
.case-lead{margin:1rem 0 0;color:#cfcfcf;font-size:16px;line-height:1.6;max-width:60ch}
.case-gal{display:grid;gap:.75rem;margin-top:1.5rem}
.case-gal img{display:block;width:100%;height:auto;border-radius:16px;background:#151515}
.case-gal.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-gal .wide{grid-column:1 / -1}

/* setup duo images */

/* ============ MERKPROFIEL ============ */
.mp{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--cg);padding:var(--cp);border-radius:var(--r);background:linear-gradient(160deg,#161616 0%,#0f0f0f 100%);border:1px solid var(--line)}
.mp-rail{display:flex;flex-direction:column;gap:1.5rem}
.mp-steps{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.mp-st{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:.75rem;width:100%;min-height:40px;padding:0 .6rem;border-radius:12px;text-align:left;font-size:14px;font-weight:600;color:#8f8f8f;transition:background .4s,color .4s}
.mp-st i{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;border:1.5px solid rgba(249,249,249,.18);font-style:normal;font-size:11px;font-weight:800}
.mp-st small{font-size:12px;color:#8a8a8a;font-weight:500;max-width:9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-st.done{color:#cfcfcf}
.mp-st.done i{background:rgba(255,122,26,.12);border-color:rgba(255,122,26,.6);color:#ff7a1a}
.mp-st.on{background:rgba(249,249,249,.06);color:var(--paper)}
.mp-st.on i{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.mp-st[disabled]{cursor:default}
.mcard{position:relative;padding:1.3rem;border-radius:var(--r2);background:#0b0b0b;border:1px solid rgba(249,249,249,.1);overflow:hidden}
.mcard::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:conic-gradient(from 200deg,#710c12,#ff3636,#ff7a1a,#ffe436,#710c12);filter:blur(60px);opacity:.18}
.mcard .lbl{position:relative}
.mcard b{position:relative;display:block;margin-top:.6rem;font-family:var(--G);font-weight:900;text-transform:uppercase;font-size:clamp(1.3rem,2vw,1.8rem);line-height:1;word-break:break-word}
.mcard small{position:relative;display:block;margin-top:.4rem;font-size:13px;color:#9a9a9a}
.mcard .chips{position:relative;margin-top:.9rem}
.mp-box{display:flex;flex-direction:column;min-height:34rem}
.mp-top{display:flex;align-items:center;gap:1rem}
.mp-track{flex:1;height:4px;border-radius:4px;background:rgba(249,249,249,.08);overflow:hidden}
.mp-track span{display:block;height:100%;border-radius:4px;background:var(--gradH);transition:width .9s var(--ease)}
.mp-q{margin:1.75rem 0 0;font-size:clamp(1.5rem,2.6vw,2.3rem)}
.mp-help{margin:.6rem 0 1.4rem;font-size:15px;color:#9a9a9a;max-width:52ch}
.mp-anim{animation:fi .7s var(--ease) both}
.mo-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
.mo{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:.8rem;align-items:start;padding:.95rem 1rem;border-radius:16px;border:1px solid rgba(249,249,249,.13);text-align:left;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .6s var(--ease)}
.mo i{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;border:1.5px solid rgba(249,249,249,.35);margin-top:.05rem}
.mo i svg{width:13px;height:13px;opacity:0;transform:scale(.4);transition:opacity .3s,transform .5s var(--spring)}
.mo b{display:block;font-size:15px}
.mo small{display:block;margin-top:.2rem;font-size:13px;color:#9a9a9a;line-height:1.4;transition:color .4s}
.mo:hover{border-color:rgba(249,249,249,.38);transform:translateY(-2px)}
.mo.is-on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.mo.is-on small{color:#555}
.mo.is-on i{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.mo.is-on i svg{opacity:1;transform:none}
.mp-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.fld{display:flex;flex-direction:column;gap:.4rem}
.fld label{font-size:13px;font-weight:600;color:#cfcfcf}
.fld input,.fld textarea{height:50px;padding:0 1rem;border-radius:14px;background:#151515;border:1px solid rgba(249,249,249,.16);color:var(--paper);font:inherit;font-size:15px}
.fld textarea{height:96px;padding:.8rem 1rem;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:none;border-color:#ff7a1a}
.mp-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:auto;padding-top:2rem}
.link-b{min-height:44px;color:#bdbdbd;font-weight:600;font-size:14px}
.link-b:hover{color:var(--paper)}
.link-b[disabled]{visibility:hidden}
/* result */
.mr{display:grid;gap:1rem;animation:fi .8s var(--ease) both}
.mr-hi{margin:1.5rem 0 0;font-size:16px;color:#cfcfcf}
.mr-card{position:relative;padding:clamp(1.25rem,2.4vw,1.75rem);border-radius:var(--r2);background:linear-gradient(150deg,#1c1c1c,#121212);border:1px solid rgba(249,249,249,.14);overflow:hidden}
.mr-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad)}
.mr-code{display:flex;justify-content:space-between;gap:1rem;font-size:11px;font-weight:700;letter-spacing:.14em;color:#9a9a9a}
.mr-card h3{margin:.7rem 0 0;font-size:clamp(1.8rem,3.4vw,2.8rem)}
.mr-card p{margin:.7rem 0 0;color:#c8c8c8;max-width:58ch}
.mr-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.mr-box{padding:1.2rem;border-radius:var(--r2);background:#121212;border:1px solid var(--line)}
.mr-box .lbl{display:block;margin-bottom:.8rem}
.mr-contact{padding:clamp(1.25rem,2.4vw,1.75rem);border-radius:var(--r2);background:#0b0b0b;border:1px solid rgba(249,249,249,.12)}
.mr-contact h4{margin:0;font-family:var(--G);font-weight:900;text-transform:uppercase;font-size:1.25rem}
.mr-contact > p{margin:.4rem 0 1.1rem;color:#9a9a9a;font-size:14px}
.mr-send{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.mr-fine{margin:.9rem 0 0;font-size:12.5px;color:#909090}
@media (max-width: 1100px){
.mp{grid-template-columns:minmax(0,1fr)}
.mp-steps{grid-template-columns:repeat(5,minmax(0,1fr))}
.mp-st{grid-template-columns:1fr;justify-items:center;padding:.4rem 0;gap:.3rem;text-align:center}
.mp-st small{display:none}
.mp-st em{display:none}
.mcard{display:none}
}
@media (max-width: 900px){
.nav{--sw:0px}
.nav-side{display:none}
.pil-g,.mo-g,.mr-g,.mp-fields{grid-template-columns:minmax(0,1fr)}
.mp-box{min-height:0}
.case-gal.two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 520px){
.mp-steps{grid-template-columns:repeat(5,minmax(0,1fr))}
.mp-st i{width:24px;height:24px}
}

@media (prefers-reduced-motion: reduce){
.sr-frame{transform:none}
.rm *,.rm *::before,.rm *::after{animation:none !important;transition:none !important}
.h-hero .ln > span{transform:none}
.hw{transition:none}
.hero-eye,.hero-sub,.hero-in .btns,.hero-scroll{opacity:1}
.has-io .rv{opacity:1;transform:none}
.has-io .rv-img{clip-path:none}
.has-io .rv-img .zm{scale:1}
.kin{transform:none}
.mq{overflow-x:auto}
}
@media (max-width: 1100px){
.nums{grid-template-columns:repeat(2,minmax(0,1fr))}
.num:nth-child(3){padding-left:0;border-left:0}
.num:nth-child(n+3){border-top:1px solid var(--line)}
.ww-g{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.5rem}
.fv-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.fv-drone{grid-column:1 / -1;aspect-ratio:16/9}
}
@media (max-width: 900px){
.nav.is-open{background:transparent;border-color:transparent;box-shadow:none}
.nav.is-open .nav-r img{transform:none}
.hero-wrap{padding:80px 8px 8px;height:max(32rem,min(100svh,56rem))}
.hero-img{object-position:50% 70%}
.hero-scroll{display:none}
.grid3{grid-template-columns:minmax(0,1fr)}
.svc-row{grid-template-columns:4.5rem minmax(0,1fr);row-gap:1rem}
.svc-row .svc-d{grid-column:2}
.svc-num{font-size:2.8rem}
.sr-frame{width:100%;aspect-ratio:16/10;transform:none}
.sr-play{height:56px}
.sr-play span{width:42px;height:42px}
.pc{width:min(84vw,24rem)}
.pc-dl{grid-template-columns:repeat(2,minmax(0,1fr))}
.fv-cards{grid-template-columns:minmax(0,1fr)}
.fv,.fv-drone{aspect-ratio:auto;min-height:22rem}
.sr-play em{display:none}
.sr-play{padding:0 8px}
.sr-frame .ph-note{display:none}
.lg-row{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center}
.lb{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
.lb-nav{position:absolute;bottom:1.25rem}
.lb-prev{left:1.25rem}.lb-next{right:1.25rem}
.case-p{border-radius:0}
.ww-g{grid-template-columns:minmax(0,1fr)}
.ww-line{display:none}
.st{padding-top:0;padding-left:2.2rem}
.st-dot{top:.2rem}
.ft-g{grid-template-columns:repeat(2,minmax(0,1fr))}
.ft-g > :first-child{grid-column:1 / -1}
.wa-t{display:none}
.wa{padding:0 8px}
}
@media (max-width: 520px){
.h-hero{font-size:10.5vw}
.xp{grid-template-columns:58px minmax(0,1fr);padding:1.1rem}
.xp-logo{width:58px;height:58px}
.num b{font-size:2rem}
.ct-l{grid-template-columns:46px minmax(0,1fr) 38px;gap:.8rem;padding:.85rem}
.ct-ic{width:46px;height:46px}
}

@media (max-width: 1100px){
}
@media (max-width: 900px){
.head > :first-child{grid-column:auto}
.head .lead-p,.head .head-r{margin-top:1.25rem}
.card2,.su,.chk,.ct{grid-template-columns:minmax(0,1fr)}
.ab-wrap,.ab-txt,.xp-side,.xp-list,.belief{grid-column:auto}
.xp-side{position:static}
.su-r{min-height:22rem;order:-1}
.ab-img{max-height:36rem}
.hero-ind{left:auto;right:1rem;top:1rem;bottom:auto}
}
@media (prefers-reduced-motion: reduce){
}
.mp-anim.a{animation-name:fiA}.mp-anim.b{animation-name:fiB}
@keyframes fiA{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fiB{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* hover colour lock: dark text on light buttons stays dark */
.rm a:hover,.rm button:hover{color:inherit}
.rm .btn-w,.rm .btn-w:hover,.rm .btn-w:focus-visible{color:var(--ink)}
.rm .btn-g:hover{color:var(--paper)}
.rm .wa,.rm .wa:hover,.rm .wa:focus-visible{color:var(--ink)}
.rm .nav-cta,.rm .nav-cta:hover{color:var(--ink)}
.rm .nl.is-hi,.rm .nl.is-hi:hover{color:var(--ink)}
.rm .soc:hover,.rm .ct-l:hover,.rm .lg-cta:hover,.rm .prov-b.is-on,.rm .mo.is-on,.rm .pref button.is-on,.rm .lb-nav:hover,.rm .case-x:hover,.rm .map-ui button:hover,.rm .ab-hint:hover{color:var(--ink)}
.rm .lg-cta:hover b{color:var(--ink)}
.rm .modal-x,.rm .modal-x:hover,.rm .hero-scroll .core{color:var(--ink)}
.rm .ft li a:hover,.rm .ft-bar a:hover,.rm .link-b:hover,.rm .menu a:hover{color:var(--paper)}
.rm .fv-go i,.rm .gt-o,.rm .pc:hover .pc-go{color:var(--ink)}
@media (min-width: 640px) and (max-width: 900px){
.pil-g{grid-template-columns:repeat(3,minmax(0,1fr))}
.pil{padding:1.1rem}
.mp-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 900px){
.ab-wrap{max-width:30rem;width:100%;margin-inline:auto}
}


.soc i .soc-svg{width:19px;height:19px;fill:currentColor}

/* reviews v12 */
.rvw-sum{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.rvw-avg{font-family:var(--G);font-weight:900;font-size:1.4rem;line-height:1}
.stars{display:flex;gap:4px}
.stars svg{width:18px;height:18px;fill:#ffe436}
.stars.sm svg{width:15px;height:15px}
.rvw-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,.8fr);gap:clamp(.75rem,1.4vw,1.25rem);align-items:stretch}
.rvw{position:relative;display:flex;flex-direction:column;gap:1.25rem;margin:0;padding:clamp(1.4rem,2.4vw,2rem);border-radius:var(--r);background:var(--card);border:1px solid var(--line);overflow:hidden;transition:translate .9s var(--ease),opacity 1.2s var(--ease),transform 1.4s var(--ease),border-color .8s var(--ease),background .8s var(--ease)}
.rvw.is-on{translate:0 -6px;border-color:rgba(249,249,249,.22);background:#171717}
.rvw-q{display:block;margin:0;flex:1;font-size:clamp(1rem,1.2vw,1.08rem);line-height:1.65;color:#d6d6d6}
.rvw-who{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:.8rem;align-items:center;padding-top:1.1rem;border-top:1px solid var(--line)}
.rvw-av{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--paper);color:var(--ink);font-family:var(--G);font-weight:900;font-size:15px}
.rvw-n b{display:block;font-size:15px}
.rvw-n small{display:block;font-size:13px;color:#9a9a9a;margin-top:.1rem}
.rvw-d{font-size:12px;color:var(--grey);white-space:nowrap}
.rvw-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(249,249,249,.05)}
.rvw-bar span{display:block;height:100%;background:var(--gradH);transform-origin:left;transform:scaleX(0)}
.rvw.is-on .rvw-bar span{animation:rvb 6s linear both}
.rvw-g.is-paused .rvw-bar span{animation-play-state:paused}
@keyframes rvb{to{transform:scaleX(1)}}
.rvw-cta{justify-content:space-between;background:transparent;border-style:dashed;border-color:rgba(249,249,249,.2);color:var(--paper);transition:border-color .5s,background .5s}
.rvw-cta:hover{border-style:solid;border-color:rgba(249,249,249,.4);background:rgba(249,249,249,.03)}
.rvw-ct{display:block;font-size:clamp(1.4rem,2vw,1.9rem);line-height:1}
.rvw-cs{display:block;color:#9a9a9a;font-size:15px}
.rvw-go{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:14px}
.rvw-go i{font-style:normal;transition:transform .6s var(--ease)}
.rvw-cta:hover .rvw-go i{transform:translateX(5px)}
@media (max-width: 1100px){.rvw-g{grid-template-columns:repeat(2,minmax(0,1fr))}.rvw-cta{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}.rvw-cta .rvw-ct{flex:1 1 auto}}
@media (max-width: 700px){.rvw-g{grid-template-columns:minmax(0,1fr)}.rvw.is-on{translate:none}.rvw-cta{flex-direction:column;align-items:flex-start}.rvw-who{grid-template-columns:40px minmax(0,1fr)}.rvw-av{width:40px;height:40px}.rvw-d{grid-column:2}}

/* foto & video v12 */
.sr-frame{cursor:default}
.soon{display:inline-flex;align-items:center;gap:.5rem;height:32px;padding:0 .8rem;border-radius:10px;background:rgba(249,249,249,.1);border:1px solid rgba(249,249,249,.18);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.soon i{width:7px;height:7px;border-radius:50%;background:#ff7a1a;animation:blink 1.6s ease-in-out infinite}
.soon.sm{height:28px;padding:0 .65rem;font-size:11px}
.sr-t{display:block;line-height:.95}
.sr-sub{display:block;margin-top:.9rem;color:#bdbdbd;font-size:clamp(.95rem,1.2vw,1.05rem);max-width:36ch}
.sr-brand{align-self:flex-end}
.fv .zm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.85)}
.fv{cursor:default}
.fv-drone{cursor:pointer}
.fv-go{position:relative;z-index:2;color:var(--paper)}
.rm .fv-go:hover{color:var(--paper)}
@media (max-width: 700px){.sr-frame{aspect-ratio:4/5}.sr-t{font-size:2.2rem}.sr-in .sr-row:last-child{flex-direction:column;align-items:flex-start;gap:1rem}.sr-brand{align-self:flex-start}}

/* setup v12: one large photo */
.su{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch}
.su-r{display:block;position:relative;min-height:32rem;border-radius:var(--r2);overflow:hidden;background:#0a0a0a;align-self:stretch}
.su-r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform:scale(calc(1.06 - var(--sz,0) * .06))}
@media (max-width: 900px){.su{grid-template-columns:minmax(0,1fr)}.su-r{order:-1;min-height:0;aspect-ratio:4/5;max-height:34rem}}

/* werkgebied v12 */
.wg{align-items:center}
.wg-map{position:relative;width:100%;max-width:26rem;margin-inline:auto;aspect-ratio:1440/1700}
.wg-map svg{display:block;width:100%;height:100%;overflow:hidden}
.wg-dots{fill:none;stroke:rgba(249,249,249,.26);stroke-width:9;stroke-linecap:round}
.wg-ring{fill:none;stroke:#ff7a1a;stroke-width:3;stroke-dasharray:2 16;stroke-linecap:round;opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;transition:opacity 1.2s var(--ease) calc(.3s + var(--i) * .25s),transform 1.6s var(--ease) calc(.3s + var(--i) * .25s)}
.map-in .wg-ring{opacity:calc(.55 - var(--i) * .14);transform:none}
.wg-core{fill:#ff7a1a}
.wg-pin{position:absolute;left:calc((692.4 + 490) / 1440 * 100% - 1.6rem);top:calc((228.6 - 30) / 1700 * 100%);transform:translate(-100%,-50%);padding:.45rem .7rem;border-radius:10px;background:var(--paper);color:var(--ink);font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.wg-side{display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.wg-all{display:inline-flex;align-items:center;gap:.6rem;font-size:13px;font-weight:600;color:#bdbdbd;text-align:center}
.wg-all i{width:18px;height:0;border-top:2px dotted #ff7a1a}
@media (max-width: 900px){.wg-map{max-width:20rem;margin-top:.5rem}.wg-pin{font-size:11px}}

/* merkprofiel result v12 */
.kw{display:flex;flex-wrap:wrap;gap:.4rem}
.kwi{display:inline-block;padding:.45rem .8rem;border-radius:10px;background:#1d1d1d;font-family:var(--G);font-weight:900;text-transform:uppercase;font-size:13px}
.pbars{display:grid;gap:.65rem}
.pb{display:grid;grid-template-columns:4.5rem minmax(0,1fr) 2.6rem;gap:.75rem;align-items:center;font-size:13px;color:#bdbdbd}
.pb-t{display:block;position:relative;height:6px;border-radius:6px;background:rgba(249,249,249,.08);overflow:hidden}
.pb-f{position:absolute;left:0;top:0;bottom:0;display:block;border-radius:6px;background:var(--gradH);transform-origin:left;animation:pbIn 1.2s var(--ease) both}
.pb-v{text-align:right;font-variant-numeric:tabular-nums;color:#8a8a8a;font-size:12px}
@keyframes pbIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.road{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.rd{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:1rem;align-items:start;padding:.85rem 0;border-top:1px solid var(--line)}
.rd:first-child{border-top:0;padding-top:.2rem}
.rd-n{display:grid;place-items:center;width:2rem;height:2rem;border-radius:9px;background:var(--paper);color:var(--ink);font-family:var(--G);font-weight:900;font-size:11px}
.rd-b{display:block;min-width:0}
.rd-t{display:block;font-size:15px;font-weight:700;color:var(--paper)}
.rd-d{display:block;margin-top:.2rem;font-size:14px;line-height:1.5;color:#a9a9a9}
.mr-send .btn{flex:1 1 13rem;justify-content:space-between}
@media (max-width: 520px){.mr-send .btn{flex:1 1 100%}}

/* case drawer v12: smooth in/out */
.case{position:fixed;inset:0;z-index:360;display:flex;justify-content:flex-end;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:cbIn .6s cubic-bezier(.4,0,.2,1) both}
.case-p{position:relative;width:min(100%,52rem);height:100%;overflow-y:auto;overscroll-behavior:contain;background:#0f0f0f;border-left:1px solid var(--line);border-radius:var(--r) 0 0 var(--r);padding:clamp(1.25rem,3vw,2.5rem);animation:cpIn .85s cubic-bezier(.22,1,.36,1) both;outline:none;will-change:transform}
.case.is-closing{animation:cbOut .55s cubic-bezier(.4,0,.2,1) both}
.case.is-closing .case-p{animation:cpOut .55s cubic-bezier(.55,0,.75,.2) both}
@keyframes cbIn{from{opacity:0}to{opacity:1}}
@keyframes cbOut{from{opacity:1}to{opacity:0}}
@keyframes cpIn{from{transform:translateX(104%)}to{transform:none}}
@keyframes cpOut{from{transform:none}to{transform:translateX(104%)}}
.cs-a{animation:csA .6s var(--ease) both}.cs-b{animation:csB .6s var(--ease) both}
@keyframes csA{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes csB{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.case-nav{align-items:center;margin-top:1.5rem}
@media (max-width: 900px){.case-p{border-radius:0;width:100%}.case-nav .btn{order:-1;width:100%;justify-content:space-between}}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
@media (max-width: 900px){.su-r{width:100%}}

@media (max-width: 700px){.ft-bar{flex-direction:column;align-items:flex-start;gap:.35rem}}
@media (max-width: 520px){.ft-logo img{height:38px}}
.skip{position:fixed;left:1rem;top:-5rem;z-index:500;padding:.8rem 1.1rem;border-radius:12px;background:var(--paper);color:var(--ink);font-weight:700;font-size:14px;transition:top .3s var(--ease)}
.skip:focus,.skip:focus-visible{top:1rem;color:var(--ink)}
main{display:block}
@media (max-width: 900px){.ww-g{margin-top:2.5rem}.nav-fade{height:104px;background:linear-gradient(180deg,rgba(10,10,10,.96) 0%,rgba(10,10,10,.7) 55%,rgba(10,10,10,0) 100%)}}

/* portfolio: cards always fit inside the pinned frame (scroll length unchanged) */
.hz-track{padding-block:2px}
.is-pin .pf-stage .head{flex:none}
.is-pin .hz-vp{flex:0 1 auto;min-height:0;display:flex}
.is-pin .hz-track{height:100%;max-height:100%}
.is-pin .pc,.is-pin .pc-end{max-height:100%}
.is-pin .pc-img{flex:0 1 clamp(11rem,28vh,19rem);height:auto;min-height:6rem}
.is-pin .pc-body{flex:0 0 auto}
/* project meta: columns follow the number of fields, long names never overlap */
.pc-body .pc-dl{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.pc-dl dd{overflow-wrap:break-word;hyphens:auto}
@media (max-width: 900px){.pc-body .pc-dl{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ============ v15 ============ */
/* nav: the space after "Maak kennis" matches the space before "Over mij"; the R stays on the page centre */
.nav{--rx:28px;transition:background .9s var(--ease),border-color .9s var(--ease),box-shadow .9s var(--ease),opacity .9s var(--ease),translate .75s var(--ease) .1s}
.nav.is-open{translate:calc(var(--rx) / 2) 0;transition:background .9s var(--ease),border-color .9s var(--ease),box-shadow .9s var(--ease),opacity .9s var(--ease),translate .85s var(--ease)}
.nav.is-open .nav-rt{width:calc(var(--sw) + var(--rx))}
.nav-rt > div{width:calc(var(--sw) + var(--rx));padding-right:var(--rx)}
/* hero: the image runs up behind the navigation, keeping the rounded corners */
.hero-wrap{padding-top:12px}
@media (max-width: 900px){
.nav{--rx:0px}
.hero-wrap{padding-top:8px}
.hero-ind{top:84px;right:.9rem;gap:.35rem}
.hero-ind button{width:30px}
}
/* ============ v16: own black-and-white photography ============ */
/* nav hover: a thin gradient line under the label instead of a white block */
.nav-hi{top:calc(50% + 12px);height:2px;margin-top:0;border-radius:2px;background:var(--gradH)}
.nl.is-hi,.rm .nl.is-hi,.rm .nl.is-hi:hover{color:var(--paper)}
.nl.is-hi .nl-dot{transform:scale(0)}
/* hero: an editorial portrait loop — the full portrait stands in the frame and melts into the black */
.hero{background:#0a0a0a}
.hero-slides .hero-img{filter:brightness(.94) contrast(1.04)}
.hs{scale:1.06;transition:opacity 1.6s cubic-bezier(.45,0,.2,1),scale 7s cubic-bezier(.2,.6,.2,1)}
.hs.on{scale:1}
.hero-ind button.on i b{animation-duration:6s}
@media (min-width: 901px){
.hero-slides .hs{inset:auto;top:0;left:50%;width:auto;height:100%;max-width:none;object-fit:contain;transform:translate3d(calc(-50% + var(--mx)),calc(var(--my) + var(--hp) * 6%),0);transform-origin:50% 30%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 80%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 80%,transparent 100%)}
}
@media (max-width: 900px){
/* phones/tablets: the whole portrait across the width at the top, fading into the black under the text */
.hero-slides .hs{inset:auto;top:0;left:0;width:100%;height:auto;max-height:none;object-fit:fill;transform:translate3d(0,calc(var(--hp) * 6%),0);transform-origin:50% 20%;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
}
@media (max-width: 600px){
.fv,.fv-drone{aspect-ratio:4/5;min-height:22rem}
}
@media (min-width: 601px) and (max-width: 900px){
.fv-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.fv{aspect-ratio:4/5;min-height:0}
.fv-drone{grid-column:1 / -1;aspect-ratio:16/10}
}
/* De maker achter RUBO */
.ab-img img{object-position:50% 32%}
.ab-base{filter:none}
/* Foto & video cards */
.fv .zm img{filter:none}
.fv .zm img.fv-foto{object-position:50% 18%}
.fv .zm img.fv-video{object-position:50% 48%}
.fv .zm img.fv-dr{object-position:50% 46%}
/* Gebouwd voor beeld: portrait-shaped image column */
@media (min-width: 901px){
.su{grid-template-columns:minmax(0,1fr) minmax(0,26rem)}
}
.su-r{background:#070707}
.su-r img{object-position:50% 14%}
/* Contact: a calm portrait next to the invitation */
.ct{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"ph tx" "ph ln";align-items:stretch;row-gap:2rem}
.ct-ph{grid-area:ph;position:relative;min-height:28rem;border-radius:var(--r2);overflow:hidden;background:#070707}
.ct-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 24%}
.ct-tx{grid-area:tx;align-self:end}
.ct-links{grid-area:ln;align-self:start}
@media (max-width: 900px){
.ct{grid-template-columns:minmax(0,1fr);grid-template-areas:"ph" "tx" "ln"}
.ct-ph{min-height:0;aspect-ratio:4/5;max-height:32rem}
}
@media (max-width: 900px){
/* slide indicator moves to the free top-left corner so it never sits on the portrait */
.hero-ind{top:30px;left:1rem;right:auto;gap:.3rem}
.hero-ind button{width:20px}
.hero-ind .hi-n{display:none}
}