:root{
  --bg:#000; --fg:#fff; --blue:#1A6AFF; --grey:#6E6E6E; --light:#C2C2C2;
  --fs:clamp(46px,7.6vw,112px);       /* one size for every title */
  --rowH:calc(var(--fs)*1.6);
  --padR:clamp(20px,15vw,260px);       /* title right edge */
  --ease:cubic-bezier(.65,0,.25,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:"Inter",Arial,sans-serif;font-weight:300;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
a{color:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- top bar ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;height:64px;display:flex;align-items:center;gap:14px;
  padding:0 clamp(16px,3.4vw,56px);padding-top:env(safe-area-inset-top);background:linear-gradient(#000 55%,#0000)}
.logo{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:clamp(17px,1.6vw,23px);letter-spacing:-.01em;color:#fff;text-decoration:none;white-space:nowrap}
.mail{display:grid;place-items:center;width:34px;height:34px;color:var(--blue);flex:none}
.mail svg{width:20px;height:20px;transition:transform .3s var(--ease)}
.mail:hover svg{transform:translateY(-2px)}
.nav{flex:1;display:flex;justify-content:space-between;align-items:center;margin-left:clamp(8px,2vw,40px);height:100%;position:relative}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:1px;background:var(--light);opacity:.7}
.nav>li{list-style:none;position:relative;height:100%;display:flex;align-items:center}
.nav>li>a,.nav>li>button{font:400 clamp(13px,1.05vw,16px)/1 "Poppins",sans-serif;letter-spacing:.06em;color:var(--light);text-decoration:none;
  background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:6px;padding:10px 4px 18px;position:relative}
.nav>li>a::before,.nav>li>button::before{content:"";position:absolute;left:-12px;top:50%;margin-top:-9px;width:5px;height:5px;border-radius:50%;background:var(--blue);
  transform:scale(0);transition:transform .3s var(--ease)}
.nav>li:hover>a::before,.nav>li:focus-within>a::before{transform:scale(1)}
.nav>li:hover>a,.nav>li:focus-within>a{color:#fff}
.chev{width:9px;height:9px;transition:transform .3s var(--ease)}
.nav>li:hover .chev{transform:rotate(180deg)}
.home{color:var(--blue)!important}
.home svg{width:15px;height:15px}
.sub{position:absolute;top:calc(100% - 14px);left:-14px;min-width:230px;list-style:none;padding:12px 18px 14px;background:#000;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .35s var(--ease),visibility .35s}
.nav>li:hover .sub,.nav>li:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub li{opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .4s var(--ease)}
.nav>li:hover .sub li,.nav>li:focus-within .sub li{opacity:1;transform:none}
.sub li:nth-child(2){transition-delay:.04s}.sub li:nth-child(3){transition-delay:.08s}.sub li:nth-child(4){transition-delay:.12s}
.sub li:nth-child(5){transition-delay:.16s}.sub li:nth-child(6){transition-delay:.2s}
.sub a{display:block;font:300 15px/1 "Inter",Arial,sans-serif;color:var(--light);text-decoration:none;padding:8px 0;white-space:nowrap}
.sub a::before{content:"• ";color:var(--grey);transition:color .2s}
.sub a:hover{color:#fff}.sub a:hover::before{color:var(--blue)}

.lang{position:relative;flex:none}
.lang>button{display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;color:var(--blue);padding:10px 6px}
.flag{width:18px;height:18px;border-radius:50%;display:block}
.lang ul{position:absolute;right:0;top:100%;list-style:none;background:#000;padding:8px 14px;min-width:130px;border:1px solid #222;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .3s var(--ease),visibility .3s}
.lang.open ul,.lang:hover ul{opacity:1;visibility:visible;transform:none}
.lang li a,.lang li span{display:block;padding:7px 0;font:300 15px/1 "Inter",Arial,sans-serif;color:var(--light);text-decoration:none}
.lang li span{color:var(--grey)}
.burger{display:none;width:44px;height:44px;place-items:center;background:none;border:0;cursor:pointer;flex:none}
.burger svg{width:24px;height:24px}

/* mobile menu */
.menu{position:fixed;inset:0;z-index:80;background:#000;display:none;overflow:auto;padding:84px clamp(20px,6vw,60px) 40px}
.menu.open{display:block}
.menu>a{display:block;font:600 clamp(28px,7vw,40px)/1.2 "Poppins",sans-serif;color:#fff;text-decoration:none;padding:6px 0}
.menu ul{list-style:none;margin:0 0 14px}
.menu ul a{font:300 17px/1 "Inter",Arial,sans-serif;color:var(--light);text-decoration:none;display:block;padding:6px 0 6px 4px}
.menu ul a::before{content:"• "}
.mx{position:fixed;top:12px;right:14px}


/* ---------- v3: header measured on the live Wix site ---------- */
.bar{height:96px;align-items:flex-start;padding:0 5vw 0 4vw;gap:0;background:linear-gradient(#000 70%,#0000)}
.logo{margin-top:38px;font:500 21px/30px "Sora",sans-serif;letter-spacing:0}
.mail{margin:37px 0 0 24px;width:25px;height:34px}
.nav{flex:1;display:block;margin:0 32px 0 10px;height:58px;align-self:flex-start;border-bottom:1px solid #8c8c8c;position:relative}
.nav::after{display:none}
.nav>li{position:absolute;top:26px;height:32px;display:block}
.nav>li:nth-child(1){left:2%}.nav>li:nth-child(2){left:12.5%}.nav>li:nth-child(3){left:26.5%}.nav>li:nth-child(4){left:42.5%}.nav>li:nth-child(5){left:60%}.nav>li:nth-child(6){left:78%}.nav>li.cta>a{color:var(--blue)}.nav>li.cta>a:hover{color:#fff}
.nav>li>a{font:300 15px/21px "Sora",sans-serif;letter-spacing:.05em;padding:6px 0 0;white-space:nowrap}
.nav>li>a::before{left:-11px;top:calc(50% + 3px);margin-top:-3px}
.nav .sub{top:100%;left:-14px}
.lang{margin-top:36px}
.lang>button{padding:6px 4px;gap:8px}
.flag{width:14px;height:14px}
.lang .chev{width:12px;height:6px}
main{padding-top:96px}

/* ---------- v3: bands ---------- */
.row{cursor:auto}
.band,.cover{inset:0 4%}
.tile{aspect-ratio:761/188}
.track{animation:drift 24s linear infinite;animation-play-state:running}
.cover i{transition:transform .3s var(--ease);transition-delay:calc((var(--n) - 1 - var(--i))*7ms)}
.row.open .cover i{transition:none}
.closing .cover i{transition:transform 1.5s var(--ease);transition-delay:calc((var(--n) - 1 - var(--i))*40ms)}
.intro .cover i{transition:none}

/* ---------- v3: arrow rests beside the title and leans toward the pointer ---------- */
:root{--gs:clamp(38px,3.4vw,52px)}
.go{display:block;width:var(--gs);margin:calc(var(--gs)/-2) 0 0;right:calc(var(--padR)/2 - var(--gs)/2);top:50%;opacity:0;transform:none;transition:opacity .25s}
.row.open .go,.row:focus-visible .go{opacity:1;transform:none}
.go svg{transform-origin:center;will-change:transform}
.cur{display:none}
.hide-s{display:none}
.bar{transition:transform .45s var(--ease)}
.bar.away{transform:translateY(-110%)}
.t-short{display:none}

/* ---------- v3: About me, inline ---------- */
.abt{padding:clamp(60px,10vh,120px) 4vw 40px;counter-reset:b}
.abt-in{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:start;border-top:1px solid #222;padding-top:34px}
.abt-c3{position:sticky;top:90px}
.abt-c3 img.pt{width:100%;height:auto;display:block}
.abt-name{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 30px}
.abt-name h2{font:600 clamp(20px,1.9vw,28px)/1.1 "Poppins",sans-serif;color:#fff}
.soc{display:flex;gap:8px;margin:0}
.soc a{width:28px;height:28px;border-radius:50%;display:block;transition:transform .3s var(--ease)}
.soc a:hover{transform:translateY(-2px)}
.soc img{width:28px;height:28px;display:block}
.blk{margin-bottom:38px;opacity:0;transform:translateY(46px);transition:opacity .9s ease,transform 1s var(--ease)}
.blk.in{opacity:1;transform:none}
.blk h3{font:500 clamp(17px,1.5vw,21px)/1.2 "Poppins",sans-serif;color:var(--blue);letter-spacing:.01em;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #1d2a44;display:flex;align-items:baseline;gap:12px}
.blk h3::before{counter-increment:b;content:"0" counter(b);font-size:.62em;color:var(--grey);letter-spacing:.14em}
.blk h3 small{font-weight:300;color:var(--grey);font-size:.7em}
.blk p,.blk li{font:300 14px/1.7 "Inter",Arial,sans-serif;color:var(--light);letter-spacing:.05em;text-transform:uppercase;list-style:none}
.blk li+li{margin-top:10px}
.blk b{display:block;font:600 15px/1.5 "Poppins",sans-serif;color:#fff;letter-spacing:.06em}
.blk.aw li{text-transform:none;letter-spacing:.02em;font-size:13.5px}
.blk.aw li+li{margin-top:6px}
#fmsg{min-height:1.4em;color:var(--blue);font-size:14px;justify-self:end}
.hp{position:absolute;left:-9999px}
.about a.title{text-decoration:none}
.nav>li>a.home{display:flex;align-items:center;height:27px;padding-top:0}
#contact label{color:var(--blue)}

/* ---------- v3: how I work (scroll-driven, horizontal) ---------- */
.proc{position:relative;height:420vh}
.proc-st{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(34px,7vh,72px)}
.proc h2{font:600 clamp(26px,3vw,44px)/1 "Poppins",sans-serif;color:var(--blue);padding:0 4vw}
.proc h2 small{display:block;margin-top:10px;font:300 13px/1 "Inter",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.ptrack{position:relative;display:flex;gap:clamp(28px,3vw,48px);padding:46px 4vw 0;width:max-content;will-change:transform}
.prail,.pfill{position:absolute;left:4vw;top:12px;height:1px}
.prail{right:4vw;background:#2a2a2a}
.pfill{width:0;background:var(--blue);height:2px;top:11.5px}
.ps{position:relative;flex:0 0 clamp(210px,19vw,280px)}
.ps::before{content:"";position:absolute;left:0;top:-39px;width:11px;height:11px;border-radius:50%;background:#000;border:1px solid #444;transition:background .4s,border-color .4s}
.ps.on::before{background:var(--blue);border-color:var(--blue)}
.ps i{display:block;font:300 clamp(38px,4vw,60px)/1 "Poppins",sans-serif;font-style:normal;color:#2e2e2e;transition:color .5s;margin-bottom:14px}
.ps.on i{color:var(--blue)}
.ps h3{font:500 clamp(17px,1.5vw,21px)/1.2 "Poppins",sans-serif;color:#fff;margin-bottom:8px}
.ps p{font:300 14px/1.6 "Inter",Arial,sans-serif;color:var(--light);max-width:26ch}
.ps{opacity:.4;transition:opacity .5s}.ps.on{opacity:1}


/* ---------- v5: About me (timeline, chips) ---------- */
.rv{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.about.how{height:var(--rowH);margin-top:clamp(40px,8vh,90px)}
.about.how .title{pointer-events:none}
.fr{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.fr b{flex:0 0 100%;font:600 clamp(24px,2.4vw,34px)/1.1 "Poppins",sans-serif;color:#fff;letter-spacing:0;margin-bottom:6px}
.fr span{font:300 14px/1.7 "Inter",Arial,sans-serif;color:var(--light);letter-spacing:.05em;text-transform:uppercase}
.fr span+span::before{content:"/";color:#33415f;margin-right:14px}
.fr b+span::before{content:none}
.since{margin-top:16px;color:var(--grey)!important}
.tl{list-style:none;position:relative;border-left:1px solid #1d2a44;margin-left:4px;padding-left:24px}
.tl li{position:relative;padding:14px 0 15px;display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:baseline;border-bottom:1px solid #151515;transition:padding .35s var(--ease)}
.tl li:last-child{border-bottom:0}
.tl li::before{content:"";position:absolute;left:-29px;top:23px;width:9px;height:9px;border-radius:50%;background:#000;border:1px solid var(--blue);transition:background .3s,transform .3s var(--ease)}
.tl li:hover::before{background:var(--blue);transform:scale(1.3)}
.tl li:hover{padding-left:8px}
.tl b{grid-column:1;font:600 clamp(16px,1.45vw,20px)/1.25 "Poppins",sans-serif;color:#fff;letter-spacing:0;text-transform:none;transition:color .3s}
.tl li:hover b{color:var(--blue)}
.tl .d{grid-column:2;font:300 12.5px/1.4 "Inter",Arial,sans-serif;color:var(--grey);letter-spacing:.08em;text-transform:uppercase;text-align:right;transition:color .3s}
.tl li:hover .d{color:var(--light)}
.tl em{grid-column:1/-1;font:300 13px/1.4 "Inter",Arial,sans-serif;font-style:normal;color:var(--light);letter-spacing:.05em;text-transform:uppercase}
.tl.aw b{font-size:clamp(14px,1.15vw,16px);font-weight:500}
.tl.aw li{padding:10px 0 11px}.tl.aw li::before{top:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font:300 13px/1 "Inter",Arial,sans-serif;letter-spacing:.06em;color:var(--light);border:1px solid #2a2a2a;border-radius:99px;padding:9px 14px;transition:border-color .3s,color .3s,transform .3s var(--ease)}
.chips span:hover{border-color:var(--blue);color:#fff;transform:translateY(-2px)}

/* ---------- v5: How I work details + contact call ---------- */
.psub{padding:0 4vw;font:300 13px/1 "Inter",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.psub span{color:var(--grey)}
.ps{flex:0 0 clamp(250px,22vw,330px)}
.ps p{max-width:32ch}
.ps em{display:block;margin-top:14px;padding-top:12px;border-top:1px solid #222;font:400 11px/1.5 "Inter",Arial,sans-serif;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.ps em::before{content:"\2192  "}
#contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);align-items:end;max-width:1320px;margin:0 auto;padding:clamp(90px,16vh,180px) 4vw 90px;justify-content:initial}
#contact form{width:100%}
.cta h2{font:600 clamp(36px,5vw,76px)/1.02 "Poppins",sans-serif;color:#fff;margin-bottom:22px}
.cta h2 span{color:var(--blue)}
.cta p{font:300 clamp(15px,1.2vw,18px)/1.6 "Inter",Arial,sans-serif;color:var(--light);max-width:34ch;margin-bottom:26px}
.mailbtn{display:inline-block;font:400 clamp(14px,1.1vw,17px)/1 "Poppins",sans-serif;color:#fff;text-decoration:none;border:1px solid var(--blue);padding:15px 26px;transition:background .3s,transform .3s var(--ease)}
.mailbtn:hover{background:var(--blue);transform:translateY(-2px)}

/* ---------- v3: header measured on the live Wix site ---------- */
.bar{height:96px;align-items:flex-start;padding:0 5vw 0 4vw;gap:0;background:linear-gradient(#000 70%,#0000)}
.logo{margin-top:38px;font:500 21px/30px "Sora",sans-serif;letter-spacing:0}
.mail{margin:37px 0 0 24px;width:25px;height:34px}
.nav{flex:1;display:block;margin:0 32px 0 10px;height:58px;align-self:flex-start;border-bottom:1px solid #8c8c8c;position:relative}
.nav::after{display:none}
.nav>li{position:absolute;top:26px;height:32px;display:block}
.nav>li:nth-child(1){left:2%}.nav>li:nth-child(2){left:12.5%}.nav>li:nth-child(3){left:26.5%}.nav>li:nth-child(4){left:42.5%}.nav>li:nth-child(5){left:60%}.nav>li:nth-child(6){left:78%}.nav>li.cta>a{color:var(--blue)}.nav>li.cta>a:hover{color:#fff}
.nav>li>a{font:300 15px/21px "Sora",sans-serif;letter-spacing:.05em;padding:6px 0 0;white-space:nowrap}
.nav>li>a::before{left:-11px;top:calc(50% + 3px);margin-top:-3px}
.nav .sub{top:100%;left:-14px}
.lang{margin-top:36px}
.lang>button{padding:6px 4px;gap:8px}
.flag{width:14px;height:14px}
.lang .chev{width:12px;height:6px}
main{padding-top:96px}


.bar{transition:transform .45s var(--ease)}
.bar.away{transform:translateY(-110%)}
.nav>li.here>a::before{transform:scale(1)}
.nav>li.here>a{color:#fff}
@media (max-width:900px){
  .nav{display:none}
  .bar{height:64px;align-items:center;padding:0 3vw 0 5vw}
  .logo,.mail,.lang{margin-top:0}
  .mail{margin-left:8px}
  .lang{margin-left:auto}
  .burger{display:grid}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}
/* back to top */
#totop{position:fixed;right:clamp(16px,2.4vw,40px);bottom:clamp(16px,2.4vw,40px);width:52px;height:52px;border-radius:50%;border:2px solid var(--blue);background:#000a;color:var(--blue);display:grid;place-items:center;cursor:pointer;z-index:60;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .35s,visibility .35s,transform .45s var(--ease),background .3s,color .3s}
#totop.show{opacity:1;visibility:visible;transform:none}
#totop:hover{background:var(--blue);color:#fff}
#totop svg{width:22px;height:22px}

/* round 30: richer dropdown + 2-up project galleries */
.sub{min-width:280px;padding:14px 22px 16px;border:1px solid #16213a;border-top:1px solid var(--blue);box-shadow:0 24px 40px #000}
.sub a{display:flex!important;justify-content:space-between;align-items:baseline;gap:28px;padding:9px 0!important;border-bottom:1px solid #111;transition:padding .25s,color .2s}
.sub li:last-child a{border-bottom:0}
.sub a::before{display:none}
.sub a span{white-space:nowrap}
.sub a b{font:500 10px/1 "Inter",Arial,sans-serif;letter-spacing:.14em;color:var(--grey);transition:color .2s}
.sub a:hover{padding-left:8px!important;color:#fff}.sub a:hover b{color:var(--blue)}

/* round 31: nav air + bigger home */
.nav>li{top:14px!important}
.nav>li>a.home{height:30px!important}
.home svg{width:22px!important;height:22px!important}
.home{color:var(--light)!important;transition:color .2s}.home:hover{color:#fff!important}

.bar{padding-left:var(--edge,2.6vw)!important;padding-right:var(--edge,2.6vw)!important}
:root{--edge:4vw}

/* round 34: hidden native scrollbars + faint overlay thumb (js/sbar.js) */
html,body,#pp{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,#pp::-webkit-scrollbar{width:0;height:0;display:none}
.sbar{position:fixed;top:0;right:3px;width:6px;border-radius:3px;background:#1c2233;opacity:0;transition:opacity .6s,width .15s;pointer-events:none;z-index:400;cursor:grab}.sbar.on{pointer-events:auto}.sbar::before{content:'';position:absolute;top:0;bottom:0;left:-10px;right:-3px}.sbar:hover,.sbar.drag{width:8px;background:#26304a}.sbar.drag{cursor:grabbing}
.sbar.on{opacity:.9}
@media (hover:none){.sbar{display:none}}

/* round 38: full-bleed dimmed bands, big arrow, old-site menu */
.band,.cover{inset:0!important}
.tile img,.tile video{opacity:.55}
:root{--gs:clamp(70px,6vw,112px)}
.sub{min-width:0!important;width:max-content;columns:2;column-gap:34px;padding:16px 26px 18px 14px!important;border:0!important;box-shadow:none!important;background:#000;top:calc(100% + 0px)!important;left:-14px!important}
.sub li{break-inside:avoid}
.sub a{display:block!important;padding:5px 0!important;border-bottom:0!important;font:300 15px/1.3 "Inter",Arial,sans-serif;white-space:nowrap}
.sub a::before{display:inline!important;content:"\2022\00a0\00a0";color:#fff}
.sub a b{display:none}
.sub a:hover{padding-left:0!important}.sub a:hover::before{color:var(--blue)}
.nav>li>a.home{height:27px!important;padding-top:6px!important}
.logo{margin-top:30px!important}
.mail{margin-top:29px!important}
.lang{margin-top:30px!important}