:root{--bg:#41B6EA;--ink:#0a0a0a;--paper:#F4F6FA;--paper-ink:#0a0a0a;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#10131a;--paper-ink:#F4F6FA}}
:root[data-theme=dark]{--paper:#10131a;--paper-ink:#F4F6FA}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{margin:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 clamp(16px,.5vw + 14px,19px)/1.55 'Bricolage Grotesque',Helvetica,Arial,sans-serif;transition:background .7s,color .7s;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:10;transition:background .7s}
:focus-visible{outline:3px solid currentColor;outline-offset:4px}
a{color:inherit}
nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top,0px)) clamp(16px,3vw,40px) 14px;color:#fff;mix-blend-mode:difference;font-weight:600}
nav a{text-decoration:none}nav div{display:flex;gap:clamp(14px,2.5vw,32px)}
.pb{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:4px;background:#fff;mix-blend-mode:difference;z-index:30;transform-origin:0;transform:scaleX(0)}
.hero{position:relative;min-height:100svh;display:grid;align-items:end;padding:110px clamp(16px,3vw,40px) clamp(24px,5vh,56px);overflow:hidden}
.hm{position:relative;z-index:2}
.name{font-size:clamp(3.4rem,15.5vw,17rem);line-height:.84;font-weight:800;font-stretch:75%;letter-spacing:-.025em;margin-bottom:clamp(20px,4vh,40px)}
.ln{display:block;overflow:hidden;padding:.06em 0;margin:-.06em 0}.l{display:inline-block;font-weight:800;transition:font-weight .25s,translate .9s cubic-bezier(.2,.7,.2,1) calc(var(--n,0)*45ms)}
.sub{font-size:clamp(1.1rem,2vw,1.7rem);max-width:30ch;line-height:1.25;margin-bottom:24px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.cta a,.btn{border:2px solid currentColor;border-radius:99px;padding:.55em 1.3em;text-decoration:none;font-weight:600;background:none;color:inherit;font:inherit;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.cta a:hover,.btn:hover{background:var(--ink);color:var(--bg)}
.fl{position:absolute;width:clamp(100px,15vw,230px);box-shadow:0 24px 50px -16px rgba(0,0,0,.5);transition:transform .5s ease-out;pointer-events:none;z-index:1}
.f1{right:7vw;top:15vh}.f2{right:24vw;top:30vh}.f3{right:2vw;top:46vh}
@media(max-width:700px){.f2,.f3{display:none}.f1{width:34vw;top:12vh}}
.mq{overflow:hidden;border-block:3px solid currentColor}
.mq div{display:flex;width:max-content;animation:mq 30s linear infinite;padding:.4em 0;white-space:nowrap}
.mq span{font-size:clamp(1.4rem,3vw,2.6rem);font-weight:700;font-stretch:75%}
.mq span::after{content:"";display:inline-block;width:.45em;height:.45em;border-radius:50%;background:currentColor;margin:0 1.1em}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mq div{animation:none}html{scroll-behavior:auto}}
.pj{min-height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(70px,11vh,130px) clamp(16px,5vw,72px)}
.pj:nth-child(even) .meta{order:2}
.cat{display:inline-block;border:2px solid currentColor;border-radius:99px;padding:.1em .9em;font-size:.88rem;font-weight:600;margin-bottom:1.1rem}
.pj h2,.ab h2{font-size:clamp(2.3rem,5.2vw,5.4rem);line-height:.95;font-weight:760;font-stretch:80%;letter-spacing:-.02em;margin-bottom:1.1rem}
.meta p{max-width:36ch;font-size:1.08rem}
.media{display:flex;gap:2vw;justify-content:center;align-items:center;perspective:1200px;min-width:0}
.media img{max-width:100%;max-height:82vh;width:auto;height:auto;display:block;box-shadow:0 34px 60px -22px rgba(0,0,0,.5);transition:transform .2s ease-out;cursor:zoom-in}
.two img{max-width:48%}
.flip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 4px 28px;width:100%;scrollbar-width:none}
.flip::-webkit-scrollbar{display:none}
.flip img{height:min(68vh,560px);max-width:none;flex:none;scroll-snap-align:center}
.pj .media:has(.flip){flex-wrap:wrap;gap:0}
.fb{display:flex;gap:10px;width:100%}.fb button{border:2px solid currentColor;border-radius:99px;background:none;color:inherit;font:inherit;font-weight:600;padding:.4em 1.2em;cursor:pointer}
.fb button:hover{background:var(--ink);color:var(--bg)}
.vid{position:relative;width:100%}.vid video{width:100%;aspect-ratio:16/9;display:block;background:#000}
.snd{position:absolute;right:12px;bottom:12px;border:2px solid #fff;color:#fff;background:rgba(0,0,0,.55);border-radius:99px;padding:.3em 1em;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
.ab{padding:clamp(80px,12vh,140px) clamp(16px,5vw,72px);min-height:100svh}
.abg{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(24px,5vw,80px);align-items:center;margin-bottom:clamp(48px,9vh,100px)}
.abg img{width:100%;max-width:440px;display:block;border-radius:6px;cursor:zoom-in;transition:transform .2s ease-out}
.abg p{max-width:48ch;margin-bottom:1em;font-size:1.1rem}
.sk{list-style:none;padding:0}
.sk li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;position:relative;padding:.35em 0;font-size:clamp(1.8rem,5vw,4.2rem);font-weight:720;font-stretch:78%;letter-spacing:-.02em;transition:padding .3s,background .3s,color .3s}
.sk li:last-child{border-bottom:2px solid currentColor}
.sk small{font-size:1rem;font-weight:400;font-stretch:100%;letter-spacing:0}
.sk li:hover{background:#41B6EA;color:#0a0a0a;padding-left:clamp(10px,2vw,28px)}
.ct{min-height:100svh;display:grid;align-content:space-between;padding:clamp(90px,14vh,150px) clamp(16px,5vw,72px) 28px}
.ct h2{font-size:clamp(3.2rem,13vw,14rem);line-height:.84;font-weight:800;font-stretch:75%;letter-spacing:-.03em}
.mail{display:inline-block;font-size:clamp(1.3rem,3.4vw,2.8rem);font-weight:650;border-bottom:4px solid;text-decoration:none;margin:2rem 1.5rem 1rem 0}
.ft{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.95rem}
.cur{display:none;position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:70;mix-blend-mode:difference;transform:translate(-100px,-100px)}
@media(hover:hover) and (pointer:fine){.cur{display:block}}
.cur::before{content:"";position:absolute;width:16px;height:16px;left:-8px;top:-8px;border:2px solid #fff;border-radius:50%;transition:.25s}
.cur.big::before{width:84px;height:84px;left:-42px;top:-42px}
.cur::after{position:absolute;transform:translate(-50%,-50%);color:#fff;font-size:.8rem;font-weight:600}.cur.big::after{content:"View"}
.lb{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.94);display:grid;place-items:center;padding:24px;cursor:zoom-out}
.lb[hidden]{display:none}.lb img{max-width:100%;max-height:100%;object-fit:contain}
@media(max-width:800px){.pj,.abg{grid-template-columns:minmax(0,1fr)}.pj:nth-child(even) .meta{order:0}.media img{max-height:70vh}.flip img{height:62vh}}
.js .rv{--e:cubic-bezier(.2,.7,.2,1);opacity:0;translate:0 70px;transition:opacity .9s var(--e),translate .9s var(--e),scale .9s var(--e),rotate .9s var(--e),clip-path 1.1s cubic-bezier(.7,0,.2,1),transform .2s ease-out,padding .3s,background .3s,color .3s;transition-delay:var(--dl,0s)}
.js .rv.l{translate:-16vw 20px;rotate:-9deg}
.js .rv.r{translate:16vw 20px;rotate:9deg}
.js .rv.z{translate:0 50px;scale:.8}
.js .rv.wipe{opacity:1;translate:0 0;clip-path:inset(0 100% 0 0)}
.js .sub,.js .cta,.js .fl{opacity:0}
.js .rv.in{opacity:1;translate:0 0;rotate:0deg;scale:1}
.js .rv.wipe.in{clip-path:inset(-90px)}
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .14em;margin:-.04em -.02em -.14em}
.wm>span{display:inline-block}
.js .hd .wm>span{translate:0 115%;transition:translate .9s cubic-bezier(.2,.7,.2,1) calc(var(--i)*70ms)}
.js .hd.in .wm>span{translate:0 0}
.js .l{translate:0 112%}
.js .hm.ready .l{translate:0 0}
.sk li::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:currentColor;transform-origin:0 50%;transition:transform 1s cubic-bezier(.7,0,.2,1) var(--dl,0s)}
.js .sk li:not(.in)::before{transform:scaleX(0)}
.lb:not([hidden]) img{animation:lbi .4s cubic-bezier(.2,.7,.2,1)}
@keyframes lbi{from{opacity:0;scale:.9}}
.js .fl{animation:bob 7s ease-in-out infinite}.js .f2{animation-delay:-2.3s}.js .f3{animation-delay:-4.6s}
@keyframes bob{50%{margin-top:-16px}}
.mq2{margin-top:clamp(24px,6vh,60px)}.mq2 div{animation-direction:reverse}
.mq2 span{color:transparent;-webkit-text-stroke:2px var(--ink)}.mq2 span::after{background:var(--ink)}
.sw{transition:opacity .15s}
.cta a{transition:background .2s,color .2s,translate .25s ease-out}
.tel{margin-top:1.4rem;font-size:clamp(1.1rem,2vw,1.5rem);font-weight:600}
.cvb{margin-top:1.6rem}
