/* The Monument webfont this used to load 404s (db.onlinewebfonts.com returns an HTML error page), so every heading has always fallen back to Montserrat 800 — which is the look that got approved. The @font-face is removed so the browser stops making a failing request on every page load. Rendering is unchanged. To use real Monument, self-host a licensed copy and restore an @font-face here. */ :root{--orange:#CB8A46;--orange-l:#D9A56A;--dark:#0A0A0A;--dark2:#111;--light:#F2F0ED;--white:#FFF;--text:#141414;--muted:#6B6B6B;--muted-l:#A0A0A0;--display:'Monument','Montserrat',sans-serif;--body:'Montserrat',sans-serif;--ease:cubic-bezier(.16,1,.3,1)} *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased} /* NOTE: no overflow-x:hidden here. It computes to `overflow: hidden auto`, which turns into a scroll container and silently disables position:sticky for every section — the whole stacking effect was dead because of this one word. Horizontal overflow is prevented at the source instead (see .sec-slide::after). */ body{font-family:var(--body);background:var(--dark);color:#fff;overflow-x:clip} a{color:inherit;text-decoration:none}img{max-width:100%;display:block} .loader{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background:var(--dark);display:flex;align-items:center;justify-content:center;flex-direction:column} .loader-word{display:flex;align-items:baseline;gap:0;font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.02em;text-transform:uppercase;user-select:none} .ll{display:inline-block} .ll-o{color:var(--orange)} .ll-w{color:#fff} .ld-r{font-size:.35em;line-height:0;position:relative;top:-1.8em;margin-left:1px;color:#fff} .scroll-bar{position:fixed;top:0;left:0;height:2px;background:var(--orange);z-index:9998;width:0} nav{position:fixed;top:0;left:0;right:0;z-index:300;padding:16px 36px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;transition:background .35s,backdrop-filter .35s,padding .35s,transform .4s cubic-bezier(.16,1,.3,1)} nav.nav-hidden{transform:translateY(-100%)} nav.s{background:rgba(10,10,10,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:12px 36px} nav.nav-light{background:rgba(242,240,237,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:12px 36px} nav.nav-light .n-links a{color:var(--muted)} nav.nav-light .n-links a:hover{color:var(--text)} nav.nav-light .logo-tudios{color:var(--text)} nav.nav-light .n-cta{background:var(--text);color:#fff} .n-logo{font-family:var(--display);font-weight:900;font-size:.85rem;letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;line-height:1} .logo-wcs{color:var(--orange)} .logo-tudios{color:#fff;transition:color .35s} .logo-r{color:#fff;font-size:.4em;font-weight:600;margin-left:1px;line-height:0;position:relative;top:-1.6em;flex-shrink:0;transition:color .35s} nav.nav-light .logo-r,nav.nav-ov-light .logo-r,.ov-page-nav-light .logo-r{color:var(--text)} .n-links{display:flex;gap:32px;list-style:none;justify-self:center} .n-links a{font-size:.65rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);transition:color .25s;position:relative} .n-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--orange);transition:width .35s var(--ease)} .n-links a:hover{color:#fff}.n-links a:hover::after{width:100%} .n-cta{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dark);background:var(--orange);padding:9px 22px;border-radius:100px;transition:transform .3s var(--ease),background .3s} .n-cta:hover{transform:scale(1.05);background:var(--orange-l)} /* Nav states when overlays are open */ nav.nav-ov-light{background:rgba(242,240,237,.97)!important;backdrop-filter:blur(20px)!important} nav.nav-ov-light .n-links a{color:var(--muted)!important} nav.nav-ov-light .n-links a:hover,nav.nav-ov-light .n-links a.nav-active{color:var(--text)!important} nav.nav-ov-light .n-links a.nav-active::after{width:100%;background:var(--orange)} nav.nav-ov-light .logo-tudios{color:var(--text)} nav.nav-ov-light .n-cta{background:var(--text);color:#fff} nav.nav-ov-dark .n-links a.nav-active{color:#fff!important} nav.nav-ov-dark .n-links a.nav-active::after{width:100%;background:var(--orange)} .n-tog{display:flex;flex-direction:column;gap:4px;cursor:pointer;background:none;border:none;padding:8px;z-index:10;justify-self:end} .n-tog span{display:block;width:20px;height:1.5px;background:#fff;transition:transform .3s,opacity .3s} nav.nav-light .n-tog span,nav.nav-ov-light .n-tog span,.ov-page-nav-light .n-tog span{background:var(--text)} /* Full-screen menu overlay */ .menu-overlay{position:fixed;top:0;left:0;right:0;height:75vh;z-index:9000;background:var(--light);display:flex;flex-direction:column;border-radius:0 0 20px 20px;box-shadow:0 20px 60px rgba(0,0,0,.15);transform:translateY(-100%);transition:transform .5s cubic-bezier(.76,0,.24,1)} .menu-overlay.open{transform:translateY(0)} .menu-ov-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 36px;flex-shrink:0} .menu-ov-close{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(20,20,20,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;transition:background .25s,border-color .25s,transform .25s} .menu-ov-close:hover{background:var(--text);border-color:var(--text);transform:rotate(90deg)} .menu-ov-close:hover svg{stroke:#fff} .menu-ov-links{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 36px} .menu-ov-link{display:block;padding:6px 0;text-decoration:none;color:var(--text);font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.5vw,3.4rem);letter-spacing:-.01em;line-height:1.2;text-align:center;text-transform:uppercase;transition:color .1s ease} .menu-ov-link:hover{color:var(--orange)} .menu-ov-footer{display:flex;align-items:flex-end;justify-content:space-between;padding:28px 36px;flex-shrink:0} .menu-ov-email{font-size:.78rem;color:var(--muted);font-weight:500;transition:color .25s} .menu-ov-email:hover{color:var(--text)} .menu-ov-socials{display:flex;gap:16px;align-items:center} .menu-ov-socials a{color:var(--muted);transition:color .15s;display:flex;align-items:center} .menu-ov-socials a:hover{color:var(--text)} .hero{position:sticky;top:0;height:100vh;min-height:580px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 36px 52px;overflow:hidden;z-index:1} .hero-bg{position:absolute;inset:0;z-index:0} .hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,10,.35) 0%,rgba(10,10,10,.12) 35%,rgba(10,10,10,.55) 65%,rgba(10,10,10,.97) 100%);z-index:1} .hero::before{content:'';position:absolute;inset:0;z-index:1;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none} .hero-bg-inner{width:100%;height:100%;background:linear-gradient(155deg,#0A0A0A 0%,#141414 45%,#0d0d0d 100%);position:relative} .orb{position:absolute;border-radius:50%;animation:fo 14s ease-in-out infinite} .o1{width:650px;height:650px;top:8%;right:-12%;background:radial-gradient(circle,rgba(203,138,70,.055) 0%,transparent 65%)} .o2{width:380px;height:380px;bottom:12%;left:-5%;background:radial-gradient(circle,rgba(89,115,141,.035) 0%,transparent 65%);animation-delay:-5s;animation-direction:reverse} @keyframes fo{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,12px)}} .hero-c{position:relative;z-index:2;max-width:1240px;width:100%;margin:0 auto} .hero-eye{font-size:.55rem;font-weight:600;letter-spacing:.35em;text-transform:uppercase;color:var(--orange);margin-bottom:18px;display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(14px);animation:fu .6s 1.9s var(--ease) forwards} .hero-eye::before{content:'';width:28px;height:1px;background:var(--orange)} .hero-h{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,7vw,6rem);line-height:.92;letter-spacing:-.01em;text-transform:uppercase;margin-bottom:24px} .hero-h .ln{display:block;overflow:hidden} .hero-h .ln-i{display:block;opacity:0;transform:translateY(105%);animation:su .85s var(--ease) forwards} .hero-h .ln:nth-child(1) .ln-i{animation-delay:1.8s}.hero-h .ln:nth-child(2) .ln-i{animation-delay:1.9s}.hero-h .ln:nth-child(3) .ln-i{animation-delay:2s}.hero-h .ln:nth-child(4) .ln-i{animation-delay:2.1s} .ac{color:var(--orange)} .hero-bot{display:flex;align-items:flex-end;justify-content:space-between;opacity:0;transform:translateY(14px);animation:fu .6s 2.3s var(--ease) forwards} .hero-p{font-size:.82rem;font-weight:400;line-height:1.65;color:rgba(255,255,255,.45);max-width:360px} .hero-sc{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:.5rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.25)} .hero-sc-line{width:1px;height:36px;background:linear-gradient(to bottom,var(--orange),transparent);animation:sp 2s ease-in-out infinite} @keyframes su{to{opacity:1;transform:translateY(0)}} @keyframes fu{to{opacity:1;transform:translateY(0)}} @keyframes sp{0%,100%{opacity:.3}50%{opacity:1}} .clients{background:var(--dark);padding:80px 0;position:relative;z-index:2} .clients .ctn{padding:0 36px} .cl-head{margin-bottom:28px} .cl-grid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .cl-card{flex:0 0 calc((100% - 5*14px)/6);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.04);border-radius:14px;padding:44px 16px;display:flex;align-items:center;justify-content:center;transition:box-shadow .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)} .cl-card:hover{background:rgba(255,255,255,.07);border-color:rgba(203,138,70,.25);box-shadow:0 0 28px rgba(203,138,70,.1),0 0 8px rgba(203,138,70,.06)} .cl-card-name{font-family:var(--display);font-weight:800;font-size:clamp(.52rem,.85vw,.72rem);text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.18);text-align:center;white-space:nowrap;transition:color .4s var(--ease)} .cl-card:hover .cl-card-name{color:rgba(255,255,255,.35)} .cl-logo{max-height:42px;max-width:80%;width:auto;height:auto;object-fit:contain;opacity:.55;filter:brightness(1.4);transition:opacity .4s var(--ease),filter .4s var(--ease)} .cl-card:hover .cl-logo{opacity:.85;filter:brightness(1.6)} /* Dark logos (on transparent bg) need inversion to appear white */ .cl-logo-blend{mix-blend-mode:lighten} .cl-logo-dark{filter:invert(1) grayscale(1) brightness(1.3);opacity:.45} .cl-card:hover .cl-logo-dark{opacity:.7;filter:invert(1) grayscale(1) brightness(1.5)} /* Clients slide-out + scale entrance */ .cl-entrance{opacity:0;transform:translateY(-40px) scale(.92);transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)} .cl-entrance.v{opacity:1;transform:translateY(0) scale(1)} .tg{height:0} .tg2{height:0} /* ===== STACKING STICKY SECTIONS + CINEMATIC GLOW ===== */ .sec-dark,.sec-light{position:relative;z-index:1} .sec-dark{background:var(--dark);color:#fff} .sec-light{background:var(--light);color:var(--text)} .sec-slide::after{content:'';position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;border-radius:28px 28px 0 0;pointer-events:none} .sec-dark.sec-slide::after{background:var(--dark)} .sec-light.sec-slide::after{background:var(--light)} /* Sticky stacking starts at About — hero/clients/work scroll normally */ section.sec-slide{ position:sticky; top:0; will-change:box-shadow; border-radius:28px 28px 0 0; transition:box-shadow .8s cubic-bezier(.16,1,.3,1); box-shadow:0 -8px 30px rgba(0,0,0,.06); margin-bottom:45vh; /* extra scroll distance before the next section covers */ } /* Last sticky section gets extra scroll room */ section.exp.sec-slide{margin-bottom:55vh} /* Incrementing z-index so each section stacks on top of the last */ section.about{z-index:3} section.svcs{z-index:4} section.process{z-index:5} section.exp{z-index:6} /* Depth shadow when in view — cinematic layered depth */ .sec-slide.in-view{ box-shadow: 0 -100px 200px rgba(0,0,0,.28), 0 -40px 80px rgba(0,0,0,.18), 0 -10px 30px rgba(0,0,0,.1), 0 -2px 0 rgba(203,138,70,.06); } /* Cinematic glow — injected .sec-glow element */ .sec-glow{ position:absolute; top:0;left:0;right:0; height:200px; border-radius:28px 28px 0 0; pointer-events:none; z-index:3; opacity:0; transition:opacity 1.2s cubic-bezier(.16,1,.3,1); } .sec-slide.in-view .sec-glow{opacity:1} /* Light section glow (appearing over dark) — warm orange light leak */ .sec-light .sec-glow{ background: radial-gradient(ellipse 80% 50px at 50% 0%,rgba(203,138,70,.14) 0%,transparent 100%), radial-gradient(ellipse 40% 25px at 30% 0%,rgba(203,138,70,.06) 0%,transparent 100%), radial-gradient(ellipse 40% 25px at 70% 0%,rgba(203,138,70,.06) 0%,transparent 100%); } /* Dark section glow (appearing over light) — moody with warm accent */ .sec-dark .sec-glow{ background: radial-gradient(ellipse 70% 45px at 50% 0%,rgba(203,138,70,.1) 0%,transparent 100%), radial-gradient(ellipse 35% 20px at 35% 0%,rgba(203,138,70,.04) 0%,transparent 100%), radial-gradient(ellipse 35% 20px at 65% 0%,rgba(203,138,70,.04) 0%,transparent 100%); } /* Inner glow line at top edge */ .sec-glow-line{ position:absolute; top:0;left:8%;right:8%; height:1px; pointer-events:none; z-index:4; opacity:0; transition:opacity .9s .2s cubic-bezier(.16,1,.3,1); } .sec-slide.in-view .sec-glow-line{opacity:1} .sec-light .sec-glow-line{ background:linear-gradient(90deg,transparent 0%,rgba(203,138,70,.15) 15%,rgba(203,138,70,.4) 50%,rgba(203,138,70,.15) 85%,transparent 100%); } .sec-dark .sec-glow-line{ background:linear-gradient(90deg,transparent 0%,rgba(203,138,70,.1) 15%,rgba(203,138,70,.28) 50%,rgba(203,138,70,.1) 85%,transparent 100%); } /* ===== CONTENT EXIT ANIMATIONS (applied by JS on scroll) ===== */ /* Base: all animated children get smooth transitions */ .sec-exit-el{ transition:transform .15s linear,opacity .15s linear; will-change:transform,opacity; } /* Named exit directions — JS sets --exit-p (0→1 progress) */ .exit-up{transform:translateY(calc(var(--exit-p,0) * -80px)) scale(calc(1 - var(--exit-p,0) * .08));opacity:calc(1 - var(--exit-p,0))} .exit-down{transform:translateY(calc(var(--exit-p,0) * 60px)) scale(calc(1 - var(--exit-p,0) * .06));opacity:calc(1 - var(--exit-p,0))} .exit-left{transform:translateX(calc(var(--exit-p,0) * -120px)) rotate(calc(var(--exit-p,0) * -2deg));opacity:calc(1 - var(--exit-p,0))} .exit-right{transform:translateX(calc(var(--exit-p,0) * 120px)) rotate(calc(var(--exit-p,0) * 2deg));opacity:calc(1 - var(--exit-p,0))} .exit-scatter-1{transform:translate(calc(var(--exit-p,0) * -60px),calc(var(--exit-p,0) * -40px)) rotate(calc(var(--exit-p,0) * -3deg)) scale(calc(1 - var(--exit-p,0) * .15));opacity:calc(1 - var(--exit-p,0))} .exit-scatter-2{transform:translate(calc(var(--exit-p,0) * 50px),calc(var(--exit-p,0) * -30px)) rotate(calc(var(--exit-p,0) * 2deg)) scale(calc(1 - var(--exit-p,0) * .12));opacity:calc(1 - var(--exit-p,0))} .exit-scatter-3{transform:translate(calc(var(--exit-p,0) * -40px),calc(var(--exit-p,0) * 50px)) rotate(calc(var(--exit-p,0) * -1.5deg)) scale(calc(1 - var(--exit-p,0) * .1));opacity:calc(1 - var(--exit-p,0))} .exit-scatter-4{transform:translate(calc(var(--exit-p,0) * 70px),calc(var(--exit-p,0) * 35px)) rotate(calc(var(--exit-p,0) * 3deg)) scale(calc(1 - var(--exit-p,0) * .12));opacity:calc(1 - var(--exit-p,0))} .exit-sink{transform:translateY(calc(var(--exit-p,0) * 30px)) scale(calc(1 - var(--exit-p,0) * .2));opacity:calc(1 - var(--exit-p,0) * .9)} /* Parallax transforms on outgoing section (applied by JS on scroll) */ .sec-slide.sec-receding{ transform-origin:center top; transform-style:preserve-3d; backface-visibility:hidden; } /* 3D perspective — NOTE: this must NOT live on . `perspective` makes the element a containing block for its position:fixed descendants, which un-pinned the nav / lens blurs / scroll bar and laid the five closed .overlay panels out at the bottom of the page (doubling the document height). Perspective is now applied per-section inside main.js. */ /* Per-section glow variation for visual interest */ section.work .sec-glow,section.work .sec-glow-line{display:none} section.work.sec-slide{border-radius:0;box-shadow:none} section.work.sec-slide::after{border-radius:0} section.svcs .sec-glow{ background: radial-gradient(ellipse 70% 55px at 45% 0%,rgba(203,138,70,.12) 0%,transparent 100%), radial-gradient(ellipse 50% 30px at 75% 0%,rgba(203,138,70,.07) 0%,transparent 100%); } section.process .sec-glow{ background: radial-gradient(ellipse 90% 60px at 55% 0%,rgba(203,138,70,.15) 0%,transparent 100%), radial-gradient(ellipse 30% 20px at 20% 0%,rgba(203,138,70,.05) 0%,transparent 100%); } section.exp .sec-glow{ background: radial-gradient(ellipse 60% 45px at 40% 0%,rgba(203,138,70,.1) 0%,transparent 100%), radial-gradient(ellipse 45% 35px at 70% 0%,rgba(203,138,70,.08) 0%,transparent 100%); } /* Lens blur overlays */ .lens-blur-top,.lens-blur-bottom{position:fixed;left:0;right:0;height:80px;z-index:90;pointer-events:none} .lens-blur-top{top:0;background:linear-gradient(to bottom,rgba(10,10,10,.4),transparent);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);mask-image:linear-gradient(to bottom,black 20%,transparent);-webkit-mask-image:linear-gradient(to bottom,black 20%,transparent)} .lens-blur-bottom{bottom:0;background:linear-gradient(to top,rgba(10,10,10,.35),transparent);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);mask-image:linear-gradient(to top,black 20%,transparent);-webkit-mask-image:linear-gradient(to top,black 20%,transparent)} .ctn{max-width:1240px;margin:0 auto} .sl{font-size:.55rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;display:flex;align-items:center;gap:9px} .sl::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--orange)} /* WORK — stacked 2-col grid */ .work{background:var(--dark);padding:clamp(60px,8vh,100px) 36px clamp(100px,14vh,180px);color:#fff;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;justify-content:center} .wk-head{max-width:1240px;margin:0 auto 60px} .wk-h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,4.4rem);line-height:.92;letter-spacing:-.01em;text-transform:uppercase} .wk-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr;gap:20px} .wk-card{position:relative;border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .wk-card::after{content:'';position:absolute;inset:0;border-radius:14px;border:1.5px solid transparent;transition:border-color .4s var(--ease);pointer-events:none} .wk-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 16px 48px rgba(203,138,70,.2),0 0 0 1.5px rgba(203,138,70,.35)} .wk-card:hover::after{border-color:rgba(203,138,70,.3)} .wk-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .wk-card:hover img{transform:scale(1.05)} .wk-card-info{position:absolute;bottom:0;left:0;right:0;padding:24px 28px;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.15) 60%,transparent 100%)} .wk-card-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px} .wk-card-name{font-family:var(--display);font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:#fff} .wk-card-tag{font-size:.48rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);background:rgba(255,255,255,.1);backdrop-filter:blur(10px);padding:5px 14px;border-radius:100px;white-space:nowrap} .wk-featured{grid-row:span 2;aspect-ratio:auto;min-height:480px} .wk-small{aspect-ratio:16/9} .wk-cta{text-align:center;margin-top:56px;max-width:1240px;margin-left:auto;margin-right:auto} .btn-o-dark{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;border:1.5px solid rgba(255,255,255,.15);padding:16px 48px;border-radius:100px;display:inline-flex;align-items:center;gap:10px;transition:all .3s var(--ease);background:transparent;cursor:pointer} .btn-o-dark:hover{border-color:var(--orange);color:var(--orange)} /* ABOUT */ .about{background:var(--light);padding:clamp(100px,14vh,180px) 36px;color:var(--text);min-height:100vh;display:flex;flex-direction:column;justify-content:center} .ab-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;margin-bottom:60px} .ab-h2{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1;letter-spacing:-.01em;text-transform:uppercase} .ab-h2 .mt{color:var(--muted-l)} .ab-p{font-size:.85rem;line-height:1.7;color:var(--muted)} .ab-p strong{color:var(--text);font-weight:600} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:40px;border-top:1px solid rgba(20,20,20,.06);text-align:center} .stats-seen-on{display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:48px;margin-top:48px;border-top:1px solid rgba(20,20,20,.06)} .stats-seen-label{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-l)} .stats-seen-logos{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:56px;width:100%;max-width:620px} .stats-seen-logo{height:28px;width:auto;opacity:.35;filter:brightness(0);transition:opacity .3s var(--ease)} .stats-seen-logo:hover{opacity:.6} .stats-seen-logos>:first-child{justify-self:end} .stats-seen-logos>:last-child{justify-self:start} .st-n{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.02em;text-transform:uppercase;line-height:1;margin-bottom:4px} .st-l{font-size:.72rem;color:var(--muted)} /* SERVICES - card grid with icons */ .svcs{background:var(--dark);color:#fff;padding:clamp(100px,14vh,180px) 36px;min-height:100vh;display:flex;flex-direction:column;justify-content:center} .svcs::before{content:'';position:absolute;inset:0;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none} .svcs-in{position:relative;z-index:1} .svcs-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:48px} .svcs-h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,4.4rem);line-height:.92;letter-spacing:-.01em;text-transform:uppercase} .proc-h2 .cnt,.svcs-h2 .cnt{font-family:var(--body);font-size:.35em;font-weight:600;color:var(--muted);vertical-align:super;margin-left:5px;letter-spacing:.05em} .svcs-sub{max-width:320px;font-size:.82rem;line-height:1.6;color:rgba(255,255,255,.35);padding-top:10px} .svcs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .svc-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:10px;padding:36px 28px;transition:border-color .35s,transform .35s var(--ease);position:relative;overflow:hidden} .svc-card:hover{border-color:rgba(203,138,70,.25);transform:translateY(-4px)} .svc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} .svc-card:hover::before{transform:scaleX(1)} .svc-icon{width:48px;height:48px;border-radius:12px;background:rgba(203,138,70,.08);display:flex;align-items:center;justify-content:center;margin-bottom:24px} .svc-icon svg{stroke:var(--orange);width:22px;height:22px} .svc-card-num{font-family:var(--body);font-size:.55rem;font-weight:600;letter-spacing:.15em;color:var(--orange);opacity:.6;margin-bottom:16px} .svc-card-name{font-family:var(--display);font-weight:800;font-size:clamp(.85rem,1.4vw,1.1rem);text-transform:uppercase;letter-spacing:.03em;margin-bottom:12px} .svc-card-desc{font-size:.78rem;line-height:1.6;color:rgba(255,255,255,.3);margin-bottom:20px} .svc-card-tags{display:flex;flex-wrap:wrap;gap:5px} .svc-card-tag{font-size:.45rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:100px;border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.35);transition:border-color .3s,color .3s} .svc-card:hover .svc-card-tag{border-color:rgba(203,138,70,.2);color:rgba(255,255,255,.5)} /* PROCESS - LIGHT with horizontal tabs + collage */ .process{background:var(--light);color:var(--text);padding:clamp(100px,14vh,180px) 36px;min-height:100vh;display:flex;flex-direction:column;justify-content:center} .proc-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:48px} .proc-h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,4.4rem);line-height:.92;letter-spacing:-.01em;text-transform:uppercase} .proc-sub{font-size:.82rem;color:var(--muted);max-width:320px;line-height:1.6;padding-top:10px} /* PROCESS — editorial split: one persistent image, numbered index beside it */ .proc-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:stretch} .proc-frame{position:relative;border-radius:14px;overflow:hidden;background:rgba(20,20,20,.06);aspect-ratio:4/3} .proc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0; transform:scale(1.035);transition:opacity .7s var(--ease),transform 1.1s var(--ease)} .proc-img.is-on{opacity:1;transform:none} .proc-frame::after{content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(10,10,10,.4),transparent 46%)} .proc-stack{display:flex;flex-direction:column;justify-content:center;min-width:0} .proc-row{display:block;width:100%;text-align:left;padding:18px 0;cursor:pointer;background:none; border:none;border-bottom:1px solid rgba(20,20,20,.1);font-family:inherit;color:inherit} .proc-row:first-child{border-top:1px solid rgba(20,20,20,.1)} .proc-row:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:3px} .proc-row-head{display:flex;align-items:baseline;gap:14px} .proc-num{font-family:var(--display);font-size:.6rem;font-weight:800;color:var(--orange);opacity:.45; letter-spacing:.08em;transition:opacity .3s} .proc-row.is-on .proc-num{opacity:1} .proc-name{font-family:var(--display);font-weight:800;font-size:clamp(.95rem,1.7vw,1.25rem); text-transform:uppercase;letter-spacing:.02em;color:var(--muted-l);transition:color .35s var(--ease)} .proc-row:hover .proc-name{color:var(--muted)} .proc-row.is-on .proc-name{color:var(--text)} /* collapse via grid-template-rows so it animates without a fixed height. min-height:0 is required — grid items default to min-height:auto and refuse to shrink to zero, which leaves the closed copy bleeding out below the row. */ .proc-body{display:grid;grid-template-rows:0fr;opacity:0; transition:grid-template-rows .5s var(--ease),opacity .4s var(--ease)} .proc-row.is-on .proc-body{grid-template-rows:1fr;opacity:1} .proc-body-in{overflow:hidden;min-height:0} .proc-desc{display:block;font-size:.83rem;line-height:1.75;color:var(--muted);margin-top:12px;max-width:46ch} .proc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:16px;padding-bottom:4px} .proc-tag-item{font-size:.48rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase; padding:5px 12px;border-radius:100px;border:1px solid rgba(20,20,20,.13);color:var(--muted); transition:border-color .3s,color .3s} .proc-row.is-on .proc-tag-item{border-color:rgba(203,138,70,.3)} /* EXPERIENCES / TESTIMONIALS — masonry collage */ .exp{background:var(--dark);color:#fff;padding:clamp(100px,14vh,180px) 36px;min-height:100vh;display:flex;flex-direction:column;justify-content:center} .exp-head{margin-bottom:48px} .exp-h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,4.4rem);line-height:.92;letter-spacing:-.01em;text-transform:uppercase} .exp-grid{column-count:3;column-gap:16px;max-width:1240px;margin:0 auto} .exp-card{break-inside:avoid;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:28px 24px;margin-bottom:16px;display:flex;flex-direction:column} .exp-card-stat{padding:32px 28px} .exp-stat-top{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap} .exp-stat-num{font-family:var(--display);font-weight:800;font-size:3.2rem;line-height:.9;letter-spacing:-.03em} .exp-stat-of{font-size:.9rem;color:var(--muted-l);font-weight:500;margin-top:8px} .exp-stat-desc{font-size:.78rem;line-height:1.6;color:var(--muted-l);margin-top:12px} .exp-stat-bot{padding-top:40px} .exp-stat-brand{font-family:var(--display);font-weight:800;font-size:.75rem;letter-spacing:.02em;margin-bottom:8px} .exp-stars{color:var(--orange);font-size:.7rem;letter-spacing:2px;margin-bottom:4px} .exp-stat-trust{font-size:.68rem;color:var(--muted-l)} .exp-rev-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px} .exp-rev-person{display:flex;align-items:center;gap:10px} .exp-avatar{width:36px;height:36px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:700;letter-spacing:.04em;flex-shrink:0} .exp-rev-name{font-weight:700;font-size:.78rem} .exp-rev-co{font-size:.65rem;color:var(--muted-l)} .exp-stars-sm{color:var(--orange);font-size:.6rem;letter-spacing:2px} .exp-rev-quote{font-size:clamp(.92rem,1.2vw,1.08rem);font-weight:600;line-height:1.45} .exp-rev-big-quote{font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:700;line-height:1.35} .exp-card-spacer{height:28px} /* LET'S TALK / CONTACT — dark card on light bg */ .talk{background:var(--light);padding:clamp(60px,8vh,100px) 36px clamp(100px,14vh,180px);min-height:100vh;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:7} .talk-card{background:var(--dark);border-radius:28px;padding:clamp(48px,6vw,80px) clamp(36px,5vw,72px);position:relative;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.15)} .talk-card-rv{opacity:0;transform:translateY(40px) scale(.98);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),box-shadow .9s cubic-bezier(.22,1,.36,1)} .talk-card-rv.v{opacity:1;transform:translateY(0) scale(1)} .talk-card::before{content:'';position:absolute;inset:0;border-radius:28px;border:1px solid rgba(255,255,255,.04);pointer-events:none} .talk-grid{display:grid;grid-template-columns:380px 1fr;gap:80px;align-items:center;position:relative;z-index:1} .talk-form-wrap{position:relative} .talk-form-card{background:#fff;border-radius:20px;padding:40px 32px;color:var(--text)} .talk-form-brand{font-family:var(--display);font-weight:800;font-size:.75rem;letter-spacing:.02em;margin-bottom:16px} .talk-form-h{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.15;letter-spacing:-.01em;margin-bottom:28px} .talk-label{display:block;font-size:.68rem;font-weight:600;margin-bottom:6px;margin-top:16px} .talk-input{display:block;width:100%;padding:14px 16px;background:var(--light);border:none;border-radius:10px;font-family:var(--body);font-size:.82rem;color:var(--text);outline:none;transition:box-shadow .2s} .talk-input:focus{box-shadow:0 0 0 2px var(--orange)} .talk-input::placeholder{color:var(--muted-l)} .talk-textarea{min-height:90px;resize:vertical} .talk-submit{width:100%;margin-top:24px;padding:16px;background:var(--dark);color:#fff;border:none;border-radius:100px;font-family:var(--display);font-weight:800;font-size:.82rem;letter-spacing:.03em;cursor:pointer;transition:background .3s,transform .2s} .talk-submit:hover{background:#333;transform:scale(1.02)} .talk-form-legal{font-size:.6rem;color:var(--muted);margin-top:14px;line-height:1.5} .talk-form-legal a{color:var(--text);font-weight:600;text-decoration:none} .talk-right{padding-left:20px;color:#fff} .talk-h2{font-family:var(--display);font-weight:800;font-size:clamp(3rem,7vw,6rem);line-height:.88;letter-spacing:-.02em;text-transform:none;margin-bottom:32px} .talk-desc{font-size:clamp(.95rem,1.3vw,1.2rem);line-height:1.55;color:rgba(255,255,255,.45);margin-bottom:32px} .talk-desc strong{color:rgba(255,255,255,.8)} .talk-sep{height:1px;background:rgba(255,255,255,.06);margin-bottom:32px} .talk-features{display:grid;grid-template-columns:1fr 1fr;gap:28px} .talk-feat{display:flex;gap:14px;align-items:flex-start} .talk-feat-icon{width:28px;height:28px;flex-shrink:0;opacity:.45} .talk-feat-icon svg{width:100%;height:100%;stroke:rgba(255,255,255,.6)} .talk-feat-title{font-weight:700;font-size:.85rem;color:#fff;margin-bottom:6px} .talk-feat-desc{font-size:.72rem;color:rgba(255,255,255,.35);line-height:1.5} .talk-copy{color:rgba(255,255,255,.2);font-size:.65rem;margin-top:32px;padding-top:20px} /* CONTACT PAGE OVERLAY — light, full-width layout */ .cp-header{margin-bottom:clamp(48px,6vw,72px);text-align:center} .cp-heading{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,5.5vw,5rem);line-height:.95;letter-spacing:-.02em;color:var(--text)} .cp-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,100px);align-items:start;max-width:960px;margin:0 auto} .cp-subtitle{font-size:clamp(.92rem,1.2vw,1.1rem);line-height:1.65;color:var(--muted);margin-bottom:40px;max-width:380px} .cp-person{display:flex;align-items:center;gap:14px} .cp-avatar{width:48px;height:48px;border-radius:50%;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:.6rem;letter-spacing:.03em;flex-shrink:0} .cp-person-info{display:flex;flex-direction:column;gap:2px} .cp-person-name{font-weight:700;font-size:.82rem;color:var(--text)} .cp-person-role{font-size:.68rem;color:var(--muted)} .cp-form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px} .cp-field{display:flex;flex-direction:column} .cp-label{font-size:.65rem;font-weight:600;letter-spacing:.04em;color:var(--text);margin-bottom:8px} .cp-input{display:block;width:100%;padding:14px 0;background:transparent;border:none;border-bottom:1px solid rgba(20,20,20,.12);font-family:var(--body);font-size:.88rem;color:var(--text);outline:none;transition:border-color .3s} .cp-input:focus{border-color:var(--orange)} .cp-input::placeholder{color:var(--muted-l)} .cp-textarea{display:block;width:100%;padding:14px 0;background:transparent;border:none;border-bottom:1px solid rgba(20,20,20,.12);font-family:var(--body);font-size:.88rem;color:var(--text);outline:none;resize:vertical;min-height:100px;transition:border-color .3s} .cp-textarea:focus{border-color:var(--orange)} .cp-textarea::placeholder{color:var(--muted-l)} .cp-submit{display:inline-flex;align-items:center;gap:10px;margin-top:32px;padding:16px 40px;background:var(--dark);color:#fff;border:none;border-radius:100px;font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.04em;cursor:pointer;transition:background .3s,transform .2s} .cp-submit:hover{background:#222;transform:scale(1.03)} .cp-submit-dot{width:6px;height:6px;border-radius:50%;background:var(--orange)} .cp-legal{font-size:.58rem;color:var(--muted);margin-top:16px;line-height:1.6} .cp-legal a{color:var(--text);font-weight:600;text-decoration:none} #contactOverlay{background:var(--light);color:var(--text);z-index:350} #contactOverlay .ov-nav{display:none} .cp-content{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 60px);padding-top:40px;padding-bottom:40px;box-sizing:border-box} /* HIRING */ .hiring{background:var(--dark2);padding:64px 36px;border-top:1px solid rgba(255,255,255,.04);position:relative;z-index:8} .hiring-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:32px} .hiring-left{display:flex;align-items:center;gap:20px} .hiring-badge{font-size:.5rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--dark);background:var(--orange);padding:6px 14px;border-radius:100px;white-space:nowrap;animation:dp 2.5s ease-in-out infinite} .hiring-text h3{font-family:var(--display);font-weight:800;font-size:clamp(1rem,2vw,1.4rem);text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px} .hiring-text p{font-size:.8rem;color:rgba(255,255,255,.4);line-height:1.5} .btn-hiring{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;border:1.5px solid rgba(255,255,255,.15);padding:11px 28px;border-radius:100px;transition:all .3s var(--ease);white-space:nowrap} .btn-hiring:hover{border-color:var(--orange);color:var(--orange)} /* FOOTER */ .ft{background:var(--dark);border-top:1px solid rgba(255,255,255,.035);padding:40px 36px 28px;position:relative;z-index:9} .ft-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;max-width:1240px;margin:0 auto} .ft-logo{height:18px;margin-bottom:10px}.ft-logo img{height:100%;width:auto} .ft-tag{font-size:.72rem;color:var(--muted);line-height:1.5} .ft-title{font-size:.5rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.2);margin-bottom:14px} .ft-ul{list-style:none;display:flex;flex-direction:column;gap:8px} .ft-ul a{font-size:.78rem;color:rgba(255,255,255,.45);transition:color .25s} .ft-ul a:hover{color:#fff} .ft-ul .hl{color:var(--orange)}.ft-ul .hl:hover{color:var(--orange-l)} .ft-soc{display:flex;gap:10px;margin-top:16px} .ft-soc a{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;transition:border-color .25s,background .25s} .ft-soc a:hover{border-color:var(--orange);background:rgba(203,138,70,.06)} .ft-soc svg{width:13px;height:13px;fill:rgba(255,255,255,.45)} .ft-bot{max-width:1240px;margin:28px auto 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.035);display:flex;justify-content:space-between;align-items:center} .ft-c{font-size:.6rem;color:var(--muted);letter-spacing:.03em} /* OVERLAYS */ body.overlay-open{overflow:hidden;height:100vh;perspective:none} body.overlay-open nav{z-index:400} .overlay{position:fixed;inset:0;z-index:200;transform:translateY(100%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s;overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch} .overlay.open{transform:translateY(0);visibility:visible;transition:transform .6s var(--ease),visibility 0s} .ov-nav{position:sticky;top:0;padding:16px 36px;display:flex;align-items:center;justify-content:space-between;z-index:10;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} #projectsOverlay .ov-nav{display:none} #crewOverlay,#companiesOverlay{z-index:350} #clientOverlay{z-index:301} .ov-logo{height:20px}.ov-logo img{height:100%;width:auto} .ov-close{width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(20,20,20,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;transition:background .25s,border-color .25s} .ov-close:hover{background:var(--text);border-color:var(--text)}.ov-close:hover svg{stroke:#fff} .ov-content{max-width:1240px;margin:0 auto;padding:80px 36px 80px} #projectsOverlay{background:var(--light);color:var(--text)} #projectsOverlay .ov-nav{background:rgba(242,240,237,.95);padding:16px 36px} #projectsOverlay .ov-nav .n-links a{color:var(--muted)} #projectsOverlay .ov-nav .n-links a:hover{color:var(--text)} #projectsOverlay .ov-nav .n-cta{background:var(--text);color:#fff} #projectsOverlay .ov-close svg{stroke:var(--text)} /* Client page next/prev nav */ .cli-nav-footer{display:flex;justify-content:space-between;align-items:center;padding:48px 0 0;margin-top:72px;border-top:1px solid rgba(255,255,255,.06)} .cli-nav-btn{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.35);cursor:pointer;padding:14px 0;transition:color .3s var(--ease);background:none;border:none} .cli-nav-btn:hover{color:var(--orange)} .cli-nav-btn svg{transition:transform .3s var(--ease)} .cli-nav-btn:hover svg{transform:translateX(4px)} .cli-nav-btn.prev:hover svg{transform:translateX(-4px)} .cli-nav-label{font-family:var(--body);font-weight:400;font-size:.6rem;letter-spacing:.05em;color:rgba(255,255,255,.2);margin-bottom:2px} .po-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px;padding-bottom:32px;border-bottom:1px solid rgba(20,20,20,.06)} .po-h1{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5.5vw,4.8rem);line-height:.9;text-transform:uppercase;letter-spacing:-.02em} .po-desc{font-size:.82rem;color:var(--muted);max-width:340px;line-height:1.65} .wk-tag{font-size:.5rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.65);background:rgba(255,255,255,.1);backdrop-filter:blur(10px);padding:5px 14px;border-radius:100px;white-space:nowrap} /* Morph tag → View pill on project cards */ .po-card .wk-tag{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;transition:background .4s var(--ease),color .4s var(--ease),width .4s var(--ease),padding .4s var(--ease)} .po-card .wk-tag .tag-label{transition:opacity .25s var(--ease),transform .25s var(--ease);white-space:nowrap} .po-card .wk-tag .tag-view{position:absolute;display:flex;align-items:center;justify-content:center;gap:5px;opacity:0;transform:translateY(5px);transition:opacity .3s .1s var(--ease),transform .3s .1s var(--ease);white-space:nowrap} .po-card:hover .wk-tag{background:var(--orange);color:#fff;width:72px;padding:6px 0} .po-card:hover .wk-tag .tag-label{opacity:0;transform:translateY(-5px)} .po-card:hover .wk-tag .tag-view{opacity:1;transform:translateY(0)} .po-filters{display:flex;gap:10px;margin-bottom:40px;flex-wrap:wrap} .po-filter{font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:9px 22px;border-radius:100px;border:1.5px solid rgba(20,20,20,.08);background:transparent;cursor:pointer;transition:all .35s var(--ease);color:var(--muted);position:relative;overflow:hidden} .po-filter::before{content:'';position:absolute;inset:0;background:var(--orange);border-radius:100px;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);z-index:-1} .po-filter:hover{color:var(--text);border-color:rgba(20,20,20,.2)} .po-filter.active{color:#fff;border-color:var(--orange)} .po-filter.active::before{transform:scaleX(1)} .po-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .po-card{position:relative;border-radius:16px;overflow:hidden;cursor:pointer;background:#000;box-shadow:0 4px 24px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);opacity:0;transform:translateY(60px) scale(.96);transition:transform .9s var(--ease),box-shadow .55s var(--ease),opacity .8s var(--ease)} .po-card::before{content:'';position:absolute;inset:0;border-radius:16px;border:1.5px solid rgba(20,20,20,.06);z-index:3;pointer-events:none;transition:border-color .4s var(--ease)} .po-card:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 24px 64px rgba(203,138,70,.18),0 8px 24px rgba(0,0,0,.2),0 0 0 1.5px rgba(203,138,70,.25)} .po-card:hover::before{border-color:rgba(203,138,70,.3)} .po-card-img{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative} .po-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .6s var(--ease);filter:brightness(.85) saturate(.95)} .po-card:hover .po-card-img img{transform:scale(1.07);filter:brightness(.7) saturate(1.1)} .po-card-ov{display:none} .po-card-info{position:absolute;bottom:0;left:0;right:0;padding:20px 24px;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.2) 60%,transparent 100%);z-index:2;display:flex;align-items:flex-end;justify-content:space-between;transition:opacity .4s var(--ease)} .po-card:hover .po-card-info{opacity:1} .po-card-name{font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:#fff} /* Project card stagger entrance */ .po-card.po-visible{opacity:1;transform:translateY(0) scale(1)} .po-card.po-fading{opacity:0;transform:translateY(-25px) scale(.96);transition:opacity .5s var(--ease),transform .5s var(--ease)} .po-card.po-hidden{display:none} #crewOverlay{background:var(--light);color:var(--text)} #crewOverlay .ov-nav{display:none} /* Overlay page nav */ .ov-page-nav{position:sticky;top:0;z-index:100;padding:16px 36px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:transparent;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:color .35s} .ov-page-nav-light{background:rgba(242,240,237,.6)} .ov-page-nav-dark{background:rgba(10,10,10,.4)} .ov-page-nav-dark .logo-tudios{color:#fff} .ov-page-nav-dark .n-links a{color:rgba(255,255,255,.4)} .ov-page-nav-dark .n-links a:hover,.ov-page-nav-dark .n-links a.active{color:#fff} .ov-page-nav-dark .n-cta{background:#fff;color:var(--dark)} .ov-page-nav-light .logo-tudios{color:var(--text)} .ov-page-nav-light .n-links a{color:var(--muted)} .ov-page-nav-light .n-links a:hover,.ov-page-nav-light .n-links a.active{color:var(--text)} .ov-page-nav-light .n-cta{background:var(--text);color:#fff} /* Overlay page sections — sticky stacking */ .ov-sec{position:relative;padding:100px 0} .ov-sec .ctn{max-width:1240px;margin:0 auto;padding:0 36px} .ov-sec-dark{background:var(--dark);color:#fff} .ov-sec-light{background:var(--light);color:var(--text)} .ov-slide{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;border-radius:28px 28px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.06);margin-bottom:45vh;transition:box-shadow .8s cubic-bezier(.16,1,.3,1);will-change:box-shadow} .ov-slide.in-view{box-shadow:0 -100px 200px rgba(0,0,0,.28),0 -40px 80px rgba(0,0,0,.18),0 -10px 30px rgba(0,0,0,.1),0 -2px 0 rgba(203,138,70,.06)} .ov-slide.in-view .sec-glow{opacity:1} .ov-slide.in-view .sec-glow-line{opacity:1} .ov-sec-light .sec-glow{background:radial-gradient(ellipse 80% 50px at 50% 0%,rgba(203,138,70,.14) 0%,transparent 100%),radial-gradient(ellipse 40% 25px at 30% 0%,rgba(203,138,70,.06) 0%,transparent 100%),radial-gradient(ellipse 40% 25px at 70% 0%,rgba(203,138,70,.06) 0%,transparent 100%)} .ov-sec-dark .sec-glow{background:radial-gradient(ellipse 70% 45px at 50% 0%,rgba(203,138,70,.1) 0%,transparent 100%),radial-gradient(ellipse 35% 20px at 35% 0%,rgba(203,138,70,.04) 0%,transparent 100%),radial-gradient(ellipse 35% 20px at 65% 0%,rgba(203,138,70,.04) 0%,transparent 100%)} .ov-sec-light .sec-glow-line{background:linear-gradient(90deg,transparent 0%,rgba(203,138,70,.15) 15%,rgba(203,138,70,.4) 50%,rgba(203,138,70,.15) 85%,transparent 100%)} .ov-sec-dark .sec-glow-line{background:linear-gradient(90deg,transparent 0%,rgba(203,138,70,.1) 15%,rgba(203,138,70,.28) 50%,rgba(203,138,70,.1) 85%,transparent 100%)} .ov-slide.ov-receding{transform-origin:center top} .ov-slide::after{content:'';position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;border-radius:28px 28px 0 0;pointer-events:none} .ov-sec-dark.ov-slide::after{background:var(--dark)} .ov-sec-light.ov-slide::after{background:var(--light)} .ov-sec:nth-child(2){z-index:2} .ov-sec:nth-child(3){z-index:3} .ov-sec:nth-child(4){z-index:4} .ov-sec:nth-child(5){z-index:5} .ov-sec:nth-child(6){z-index:6} .ov-sec:nth-child(7){z-index:7} .ov-sec:nth-child(8){z-index:8} .ov-sec:last-child{margin-bottom:0;min-height:auto} .ov-sec:last-child .ctn{max-width:none;width:100%;padding:0 36px;flex:1;display:flex;flex-direction:column;justify-content:center} /* Overlay footer */ .ov-ft{position:relative;z-index:1} /* Crew — pill button */ .btn-p{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--orange);border:none;border-radius:100px;padding:12px 24px;cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease)} .btn-p:hover{background:var(--orange-l);transform:scale(1.04)} .btn-p .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5)} .btn-p-dark{background:var(--text);color:#fff} .btn-p-dark:hover{background:#333} .btn-p-dark .dot{background:rgba(255,255,255,.4)} .btn-p-light{background:var(--text);color:#fff} .btn-p-light:hover{background:#333} /* ═══ CREW PAGE — About Section ═══ */ .crew-about-sec{padding-top:120px;padding-bottom:20px} .crew-about-h1{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,6vw,5rem);line-height:.88;text-transform:uppercase;letter-spacing:-.02em;color:var(--text);margin-bottom:14px} .crew-about-sub{font-size:.82rem;line-height:1.7;color:var(--muted);max-width:540px;margin-bottom:64px;letter-spacing:.01em} .crew-about-grid{margin-bottom:48px;max-width:680px;margin-left:auto;margin-right:auto} .crew-about-desc{font-size:clamp(.95rem,1.4vw,1.15rem);line-height:1.6;color:var(--muted);margin-bottom:0} .crew-about-desc strong{color:var(--text);font-weight:700} /* Hero photo */ .crew-hero-photo{width:100%;border-radius:16px;overflow:hidden;max-height:520px;margin-bottom:0} .crew-hero-photo img{width:100%;height:100%;object-fit:cover} /* ═══ CREW PAGE — Branding + Photos Section ═══ */ .crew-brand-sec{padding-top:60px} .crew-brand-grid{display:grid;grid-template-columns:1fr 2fr;gap:60px;align-items:start;margin-bottom:60px} .crew-brand-logo{font-family:var(--display);font-weight:800;font-size:.82rem;letter-spacing:-.01em;margin-bottom:12px;color:var(--text)} .crew-brand-tagline{font-size:.78rem;line-height:1.6;color:var(--muted);max-width:240px} .crew-brand-desc{font-size:clamp(.95rem,1.4vw,1.15rem);line-height:1.55;color:var(--muted);margin-bottom:16px} .crew-brand-desc strong{color:var(--text);font-weight:700} .crew-brand-desc em{font-style:italic;color:rgba(0,0,0,.25);font-weight:400} .crew-brand-body{font-size:.8rem;line-height:1.7;color:var(--muted);margin-bottom:28px} .crew-photos-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border-radius:14px;overflow:hidden} .crew-photo-item{overflow:hidden;aspect-ratio:4/3} .crew-photo-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .crew-photo-item:hover img{transform:scale(1.04)} /* ═══ CREW PAGE — Team Section (white card on dark bg) ═══ */ .crew-team-sec{padding-top:60px;padding-bottom:60px} .crew-team-card{background:#fff;border-radius:24px;padding:48px 40px;color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.15)} .crew-team-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:24px;align-items:stretch} /* Info panel (left, inside white card) */ .crew-team-info-panel{display:flex;flex-direction:column} .crew-team-brand-dark{font-family:var(--display);font-weight:800;font-size:.65rem;letter-spacing:.08em;margin-bottom:24px;color:var(--muted-l);text-transform:uppercase} .crew-team-heading-dark{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,3.2rem);line-height:.92;margin-bottom:auto;color:var(--text);text-transform:uppercase;letter-spacing:-.02em} .crew-team-heading-dark span{color:rgba(0,0,0,.18)} .crew-team-cta-dark{margin-bottom:28px;padding-top:8px;border-top:1px solid rgba(0,0,0,.06)} .crew-team-cta-dark h4{font-family:var(--display);font-weight:800;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px;margin-top:20px;color:var(--text)} .crew-team-cta-dark p{font-size:.72rem;line-height:1.6;color:var(--muted);margin-bottom:16px} .crew-team-desc-dark{font-size:.75rem;line-height:1.65;color:var(--muted-l)} /* 2x2 Photo grid (right) */ .crew-team-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .crew-photo-card{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1/1.15;cursor:pointer;border:1px solid rgba(0,0,0,.06)} .crew-photo-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.05) 40%,transparent 60%);pointer-events:none;transition:opacity .4s var(--ease)} .crew-photo-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.05);transition:transform .5s var(--ease)} .crew-photo-card:hover img{transform:scale(1.04)} .crew-photo-card:hover::after{opacity:.7} .crew-pc-role{position:absolute;top:14px;right:14px;font-size:.5rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;z-index:1;background:rgba(0,0,0,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:6px 12px;border-radius:100px;border:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(-8px);transition:opacity .35s var(--ease),transform .35s var(--ease)} .crew-photo-card:hover .crew-pc-role{opacity:1;transform:translateY(0)} .crew-pc-name{position:absolute;bottom:16px;left:16px;font-family:var(--body);font-weight:600;font-size:.85rem;color:#fff;z-index:1;letter-spacing:.01em} /* ═══ CREW PAGE — Production Partner Section ═══ */ .crew-partner-sec{padding:100px 0} .crew-split{display:grid;grid-template-columns:2fr 3fr;gap:48px;align-items:center;margin-bottom:48px} .crew-split-text{padding-right:16px} .crew-split-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;border-radius:12px;overflow:hidden;max-height:420px} .crew-sg-img{overflow:hidden} .crew-sg-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .crew-sg-img:hover img{transform:scale(1.04)} .crew-sg-img.crew-sg-tall{grid-row:span 2} .crew-about-lead{font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.5;margin-bottom:20px} .crew-about-lead em{font-style:italic;color:rgba(255,255,255,.3);font-weight:400} .crew-about-lead strong{font-weight:700;color:#fff} .crew-about-body{font-size:.8rem;line-height:1.7;color:rgba(255,255,255,.3);margin-bottom:28px} /* ═══ CREW PAGE — Light bg section title overrides ═══ */ .ov-sec-light .crew-section-title{color:var(--text)} .ov-sec-light .crew-section-sub{color:rgba(0,0,0,.4)} /* ═══ CREW PAGE — Kept legacy styles ═══ */ .crew-client-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px;margin-top:24px} .crew-cl-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:32px 20px;display:flex;align-items:center;justify-content:center;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)} .crew-cl-card:hover{border-color:rgba(203,138,70,.2);box-shadow:0 4px 16px rgba(0,0,0,.06)} .crew-cl-logo{max-height:28px;max-width:100px;width:auto;opacity:.35;filter:brightness(0);transition:opacity .3s var(--ease),filter .3s var(--ease)} .crew-cl-card:hover .crew-cl-logo{opacity:.6} .crew-seen-on-grid{grid-template-columns:repeat(3,1fr)} .seen-on-logo{max-height:32px;max-width:120px} .press-table{margin-top:24px} .press-row{display:grid;grid-template-columns:1fr 200px 60px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(0,0,0,.08);text-decoration:none;color:var(--text);transition:background .2s var(--ease)} a.press-row:hover{background:rgba(0,0,0,.02)} .press-header{font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(0,0,0,.3);border-bottom:1px solid rgba(0,0,0,.12);padding:12px 0} .press-col-title{font-size:.82rem;font-weight:600;padding-right:24px} .press-col-source{font-size:.72rem;color:var(--orange);font-weight:600} .press-col-year{font-family:var(--display);font-weight:800;font-size:.82rem;text-align:right} .crew-section-title{font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,2.5vw,2rem);text-transform:uppercase;margin-bottom:8px} .crew-section-sub{font-size:.82rem;color:rgba(255,255,255,.35);line-height:1.6;max-width:500px;margin-bottom:40px} /* Crew last section — hiring + footer (no .ctn wrapper) */ #crewOverlay .ov-sec:last-child{padding:0;display:block} @media(max-width:768px){ .crew-about-grid{max-width:100%} .crew-brand-grid{grid-template-columns:1fr;gap:24px} .crew-photos-row{grid-template-columns:1fr} .crew-team-layout{grid-template-columns:1fr;gap:16px} .crew-team-grid{grid-template-columns:1fr 1fr} .crew-client-grid{grid-template-columns:repeat(2,1fr)} .press-row{grid-template-columns:1fr 100px 50px}.press-col-title{font-size:.72rem}.press-col-source{font-size:.62rem} } #companiesOverlay{background:var(--light);color:var(--text)} #companiesOverlay .ov-nav{display:none} /* Client project overlays */ .client-ov{background:var(--dark);color:#fff;z-index:210} .client-ov{padding-top:72px} /* Client page entrance animations */ .client-ov{background:var(--dark);color:#fff} .client-ov .ov-content{padding-top:80px} .cli-enter{opacity:0;transform:translateY(32px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .cli-enter.cli-in{opacity:1;transform:translateY(0)} .cli-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);background:none;border:1px solid var(--orange);border-radius:100px;cursor:pointer;padding:8px 18px;margin-bottom:24px;transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)} .cli-back:hover{color:#fff;background:var(--orange);border-color:var(--orange)} .cli-back svg{transition:transform .3s var(--ease)} .cli-back:hover svg{transform:translateX(-4px)} /* Cover banner */ .cli-cover{position:relative;width:100%;aspect-ratio:2.2/1;border-radius:18px 18px 0 0;overflow:hidden;margin-bottom:0} .cli-cover img{width:100%;height:100%;object-fit:cover} .cli-cover-fade{position:absolute;bottom:0;left:0;width:100%;height:60%;background:linear-gradient(to top,var(--dark) 0%,var(--dark) 5%,transparent 100%);pointer-events:none} /* Split hero */ .cli-hero{padding:40px 0 60px} .cli-hero-split{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;padding-bottom:16px;margin-bottom:72px;border-bottom:1px solid rgba(255,255,255,.08)} .cli-hero-left{padding-top:8px} .cli-hero-right{display:flex;flex-direction:column;justify-content:center;padding-top:8px} .cli-name{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5vw,4rem);line-height:.9;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:20px} .cli-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:0} .cli-pill{font-size:.55rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 18px;border-radius:100px;border:1.5px solid rgba(255,255,255,.12);color:rgba(255,255,255,.5);background:transparent} .cli-stats-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);border-radius:16px;padding:24px 48px;margin-bottom:56px} .cli-stats-card-label{font-size:.5rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:12px;display:flex;align-items:center;gap:8px} .cli-stats-card-label::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--orange)} .cli-stats-row{display:flex;justify-content:space-between;align-items:center} .cli-stat{text-align:center;flex:1} .cli-stat-div{width:1px;height:48px;background:rgba(203,138,70,.18);box-shadow:0 0 12px rgba(203,138,70,.35),0 0 4px rgba(203,138,70,.2);flex-shrink:0} .cli-stat-num{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3vw,2.6rem);color:#fff;margin-bottom:4px} .cli-stat-label{font-size:.55rem;color:rgba(255,255,255,.25);text-transform:uppercase;letter-spacing:.1em} .cli-intro{font-size:.88rem;line-height:1.65;color:rgba(255,255,255,.45);max-width:680px} .cli-intro strong{color:rgba(255,255,255,.8)} .cli-divider{height:1px;background:rgba(255,255,255,.06);margin:80px 0} .cli-section-label{font-size:.5rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.2);margin-bottom:16px;display:flex;align-items:center;gap:9px} .cli-section-label::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--orange)} .cli-proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .cli-proj-card{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/10;cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .cli-proj-card::after{content:'';position:absolute;inset:0;border-radius:14px;border:1.5px solid transparent;transition:border-color .4s var(--ease);pointer-events:none} .cli-proj-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(203,138,70,.15),0 0 0 1.5px rgba(203,138,70,.3)} .cli-proj-card:hover::after{border-color:rgba(203,138,70,.25)} .cli-proj-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .cli-proj-card:hover img{transform:scale(1.04)} .cli-proj-info{position:absolute;bottom:0;left:0;right:0;padding:20px 24px;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 100%)} .cli-proj-title{font-family:var(--display);font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px} .cli-proj-type{font-size:.5rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)} .cli-proj-card.full{grid-column:span 2;aspect-ratio:21/9} .cli-highlight{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);border-radius:16px;padding:36px 32px;margin-top:48px} .cli-highlight-quote{font-size:clamp(1rem,1.4vw,1.2rem);font-weight:600;line-height:1.5;color:rgba(255,255,255,.65);font-style:italic;margin-bottom:16px} .cli-highlight-attr{font-size:.7rem;color:var(--orange);font-weight:700} /* Rich project page elements */ .cli-video-wrap{position:relative;width:100%;border-radius:14px;overflow:hidden;margin-bottom:32px;background:#000;aspect-ratio:16/9;cursor:pointer;display:block;text-decoration:none} .cli-video-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);opacity:.7} .cli-video-wrap:hover img{transform:scale(1.04);opacity:.9} .cli-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;background:rgba(203,138,70,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease),background .3s} .cli-video-wrap:hover .cli-video-play{transform:translate(-50%,-50%) scale(1.1);background:var(--orange)} .cli-video-play svg{margin-left:3px} .cli-video-wrap:has(.cli-vimeo-preview) .cli-video-play{opacity:0;transform:translate(-50%,-50%) scale(.8)} .cli-video-wrap:has(.cli-vimeo-preview) img{opacity:.3} /* Lightbox */ .lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.65);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s var(--ease);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} .lightbox::before{content:'';position:absolute;top:50%;left:50%;width:1200px;height:800px;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(201,155,80,.18) 0%,rgba(201,155,80,.08) 35%,rgba(201,155,80,.02) 55%,transparent 70%);pointer-events:none;z-index:0} .lightbox.lb-open{opacity:1;pointer-events:auto} .lb-close{position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,transform .3s;z-index:10} .lb-close:hover{background:rgba(255,255,255,.15);transform:scale(1.1)} .lb-content{width:90%;max-width:1100px;aspect-ratio:16/9;position:relative;transform:scale(.92);transition:transform .4s cubic-bezier(.22,1,.36,1);border-radius:14px;overflow:hidden;z-index:1;box-shadow:0 0 160px rgba(201,155,80,.12),0 0 60px rgba(201,155,80,.06),0 0 40px rgba(0,0,0,.5)} .lb-content.lb-image{aspect-ratio:auto;max-height:85vh;max-width:1100px;width:auto;display:flex;align-items:center;justify-content:center} .lightbox.lb-open .lb-content{transform:scale(1)} .lb-content iframe{width:100%;height:100%;border:none;border-radius:14px} .lb-content img{max-width:100%;max-height:85vh;width:auto;height:auto;border:none;object-fit:contain;border-radius:14px;display:block} .cli-section-title{font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,2vw,1.6rem);text-transform:uppercase;letter-spacing:.02em;margin-bottom:12px} .cli-section-text{font-size:.88rem;line-height:1.65;color:rgba(255,255,255,.4);max-width:720px;margin-bottom:36px} .cli-section-text strong{color:rgba(255,255,255,.7)} .cli-video-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:32px} .cli-video-grid .cli-video-wrap{margin-bottom:0} .cli-bts-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:240px 240px;gap:16px;margin-bottom:16px} .cli-bts-img{border-radius:14px;overflow:hidden;position:relative} .cli-bts-img.bts-tall{grid-row:span 2} .cli-bts-img.bts-wide{grid-column:span 2} .cli-bts-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .cli-bts-img:hover img{transform:scale(1.04)} .cli-bts-img .bts-label{position:absolute;bottom:10px;left:12px;font-size:.5rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(0,0,0,.35);backdrop-filter:blur(8px);padding:4px 12px;border-radius:100px;opacity:0;transition:opacity .3s} .cli-bts-img:hover .bts-label{opacity:1} /* Staggered editorial layout for campaign media */ .cli-stagger{display:flex;flex-direction:column;gap:80px;margin-bottom:40px} .cli-stagger-row{display:flex;align-items:center;gap:48px} .cli-stagger-row.row-right{flex-direction:row-reverse} .cli-stagger-media{flex:0 0 58%;max-width:58%} .cli-stagger-media .cli-video-wrap{margin-bottom:0} .cli-stagger-media .cli-bts-img{border-radius:14px;overflow:hidden;aspect-ratio:16/10;position:relative} .cli-stagger-media .cli-bts-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .cli-stagger-media .cli-bts-img:hover img{transform:scale(1.04)} .cli-stagger-aside{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center} .cli-stagger-aside .cli-bts-img{aspect-ratio:4/3;border-radius:14px;overflow:hidden;position:relative} .cli-stagger-aside .bts-caption{font-size:.55rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.2);margin-top:12px} .cli-stagger-aside blockquote{font-size:.95rem;line-height:1.7;color:rgba(255,255,255,.3);font-style:italic;border-left:2px solid var(--orange);padding-left:20px;margin:0} .cli-stagger-aside blockquote strong{color:rgba(255,255,255,.55)} .cli-stagger-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px} .cli-stagger-pair .cli-video-wrap{margin-bottom:0} .cli-stagger-pair .cli-bts-img{border-radius:14px;overflow:hidden;aspect-ratio:16/10;position:relative} .cli-stagger-pair .cli-bts-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .cli-stagger-pair .cli-bts-img:hover img{transform:scale(1.04)} /* Editorial photo spread — overlapping images + bold title */ .cli-editorial{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:center;padding:48px 0;margin:40px 0} .cli-editorial.ed-flip{grid-template-columns:1.6fr 1fr} .cli-editorial.ed-flip .cli-ed-title{order:2} .cli-editorial.ed-flip .cli-ed-photos{order:1} .cli-ed-title h3{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,3.2rem);text-transform:uppercase;letter-spacing:-.01em;line-height:.95;color:#fff} .cli-ed-title p{font-size:.82rem;line-height:1.6;color:rgba(255,255,255,.35);margin-top:16px;max-width:360px} .cli-ed-photos{position:relative;min-height:360px} .cli-ed-photos .ed-img{position:absolute;border-radius:14px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.4);transition:transform .5s var(--ease)} .cli-ed-photos .ed-img img{width:100%;height:100%;object-fit:cover;display:block} .cli-ed-photos .ed-img:hover{transform:scale(1.03)!important;z-index:5} .cli-ed-photos .ed-img.ed-1{width:52%;height:55%;top:0;right:5%;transform:rotate(3deg);z-index:2} .cli-ed-photos .ed-img.ed-2{width:48%;height:55%;bottom:10px;left:0;transform:rotate(-4deg);z-index:3} .cli-ed-photos .ed-img.ed-3{width:38%;top:8%;left:15%;transform:rotate(1deg);z-index:1} .cli-impact{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);border-radius:16px;padding:48px 40px;margin-top:56px;margin-bottom:0} .cli-impact-label{font-size:.5rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:16px;display:flex;align-items:center;gap:8px} .cli-impact-label::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--orange)} .cli-impact-text{font-size:clamp(.92rem,1.2vw,1.08rem);line-height:1.65;color:rgba(255,255,255,.5)} .cli-impact-text strong{color:rgba(255,255,255,.75)} .cli-outcomes{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);border-radius:16px;padding:36px 32px;margin-top:16px} .cli-outcomes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:24px} .cli-outcome-stat{text-align:center} .cli-outcome-num{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.5vw,2.2rem);color:var(--orange);margin-bottom:4px} .cli-outcome-label{font-size:.65rem;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.08em} .co-h1{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,6vw,5rem);line-height:.88;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:8px} .co-sub{font-size:.85rem;line-height:1.7;color:var(--muted);max-width:540px;margin-bottom:52px} .co-sub strong{color:var(--text);font-weight:600} .co-banner{font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);margin-bottom:52px;display:flex;align-items:center;gap:8px} .co-banner::before{content:'';width:28px;height:1.5px;background:var(--orange)} .co-grid{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:72px} .co-card{background:var(--white);border-radius:12px;overflow:hidden;border:1px solid rgba(20,20,20,.04);transition:box-shadow .4s var(--ease),transform .35s var(--ease)} .co-card:hover{box-shadow:0 20px 60px rgba(0,0,0,.06);transform:translateY(-4px)} .co-card-inner{display:grid;grid-template-columns:1fr 1fr;min-height:320px} .co-card-content{padding:40px 36px;display:flex;flex-direction:column;justify-content:center} .co-card-visual{position:relative;overflow:hidden} .co-card-visual-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .co-card-badge{font-size:.5rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);background:rgba(203,138,70,.06);padding:4px 12px;border-radius:100px;display:inline-flex;align-items:center;gap:5px;margin-bottom:18px} .co-card-badge::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--orange)} .co-card-name{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,2.5vw,2rem);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:6px} .co-card-tagline{font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-l);margin-bottom:16px} .co-card-desc{font-size:.82rem;line-height:1.65;color:var(--muted);margin-bottom:20px} .co-card-link{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text);display:inline-flex;align-items:center;gap:6px;transition:color .25s} .co-card-link:hover{color:var(--orange)} .co-card-link svg{transition:transform .3s var(--ease)} .co-card-link:hover svg{transform:translate(2px,-2px)} @media(max-width:768px){.co-card-inner{grid-template-columns:1fr}.co-card-visual{min-height:200px}} /* Legacy crew styles removed — new styles in crew page sections above */ .rv{opacity:0;transform:translateY(60px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)} .rv.v{opacity:1;transform:translateY(0)} .rv.out{opacity:0;transform:translateY(-30px);transition:opacity .5s ease-out,transform .5s ease-out} .rv-d1{transition-delay:.1s} .rv-d2{transition-delay:.2s} .rv-d3{transition-delay:.3s} .rv-d4{transition-delay:.4s} .rv-d5{transition-delay:.5s} .rv-d6{transition-delay:.6s} .rd1{transition-delay:.12s!important}.rd2{transition-delay:.22s!important}.rd3{transition-delay:.32s!important} /* Period bounce */ .bounce-dot{display:inline-block;animation:none} .bounce-dot.go{animation:pdot .5s cubic-bezier(.34,1.56,.64,1) forwards} @keyframes pdot{0%{transform:translateY(0)}30%{transform:translateY(-8px)}60%{transform:translateY(2px)}100%{transform:translateY(0)}} /* Number scramble */ .st-n{font-variant-numeric:tabular-nums} .rd1{transition-delay:.08s}.rd2{transition-delay:.16s}.rd3{transition-delay:.24s} @media(max-width:1024px){.svcs-grid{grid-template-columns:1fr 1fr}.proc-tabs{grid-template-columns:1fr 1fr}.exp-grid{column-count:2}.talk-grid{grid-template-columns:1fr;gap:48px}.cp-grid{grid-template-columns:1fr;gap:40px}.cp-form-row{grid-template-columns:1fr}.cl-grid{grid-template-columns:repeat(3,1fr)}.cli-proj-card.full{aspect-ratio:16/9}.po-grid{gap:16px}} @media(max-width:768px){ nav,.ov-page-nav{padding:14px 18px}nav.s{padding:11px 18px}.n-links{display:none} .ov-page-nav .n-links{display:none} .menu-ov-nav{padding:14px 18px}.menu-ov-links{padding:0 18px}.menu-ov-footer{padding:20px 18px} .ov-sec .ctn{padding:0 18px}.ov-sec{padding:48px 0}.ov-slide{min-height:auto;display:block} .hero{padding:0 18px 40px}.hero-bot{flex-direction:column;align-items:flex-start;gap:20px}.hero-sc{display:none} .work,.about,.process{padding-left:18px;padding-right:18px} .cli-hero-split{grid-template-columns:1fr;gap:24px}.cli-cover{aspect-ratio:16/9}.cli-proj-grid{grid-template-columns:1fr}.cli-proj-card.full{grid-column:span 1;aspect-ratio:16/10}.cli-pills{flex-wrap:wrap}.cli-stats-bar{flex-wrap:wrap;gap:24px}.cli-video-grid{grid-template-columns:1fr}.cli-bts-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.cli-bts-img.bts-tall{grid-row:span 1}.cli-bts-img.bts-wide{grid-column:span 2}.cli-editorial,.cli-editorial.ed-flip{grid-template-columns:1fr;gap:24px}.cli-ed-photos{min-height:300px}.cli-editorial.ed-flip .cli-ed-title{order:0}.cli-editorial.ed-flip .cli-ed-photos{order:0} .cli-stagger{gap:48px}.cli-stagger-row,.cli-stagger-row.row-right{flex-direction:column}.cli-stagger-media{flex:0 0 100%;max-width:100%}.cli-stagger-pair{grid-template-columns:1fr} .po-grid{grid-template-columns:1fr;gap:16px}.po-card{border-radius:12px}.wk-head,.po-head{flex-direction:column;gap:10px;align-items:flex-start}.wk-grid{grid-template-columns:1fr}.wk-featured{min-height:320px;grid-row:span 1} .ab-grid{grid-template-columns:1fr;gap:24px}.stats{grid-template-columns:1fr 1fr;gap:28px}.stats-seen-logos{gap:24px}.stats-seen-logo{height:14px} .svcs{padding-left:18px;padding-right:18px}.svcs-head{flex-direction:column;gap:10px} .svcs-grid{grid-template-columns:1fr} .exp-grid{column-count:1}.talk-grid{grid-template-columns:1fr}.talk-right{padding-left:0}.talk-features{grid-template-columns:1fr}.talk-card{padding:32px 20px;border-radius:20px}.talk{padding-left:18px;padding-right:18px}.cp-grid{grid-template-columns:1fr;gap:32px}.cp-form-row{grid-template-columns:1fr}.cl-grid{grid-template-columns:repeat(2,1fr)} .proc-head{flex-direction:column;gap:8px;align-items:flex-start} .cta,.hiring{padding-left:18px;padding-right:18px}.hiring-inner{flex-direction:column;text-align:center}.hiring-left{flex-direction:column} .ft{padding:36px 18px 22px}.ft-grid{grid-template-columns:1fr;gap:24px}.ft-bot{flex-direction:column;gap:6px;text-align:center} .ov-content{padding:32px 18px 60px}.ov-nav{padding:14px 18px} .crew-about-h1{font-size:clamp(2rem,6vw,3.5rem)} .crew-team-card{padding:28px 20px} .crew-team-layout{grid-template-columns:1fr} .crew-team-grid{grid-template-columns:1fr 1fr} .crew-about-grid{max-width:100%} .crew-brand-grid{grid-template-columns:1fr} .crew-photos-row{grid-template-columns:1fr} .crew-split{grid-template-columns:1fr;gap:32px}.crew-split-text{padding-right:0} .crew-client-grid{grid-template-columns:repeat(2,1fr)} .press-row{grid-template-columns:1fr 100px 50px}.press-col-title{font-size:.72rem}.press-col-source{font-size:.62rem} } /* Form status line (lead capture) */ .form-status{min-height:1.2em;margin-top:12px;font-size:.75rem;font-weight:500;line-height:1.4} .form-status-ok{color:var(--orange)} .form-status-err{color:#e0644f} .cp-content .form-status{margin-top:16px} /* ═══════════════════════════════════════════════════════════════════ MOBILE OPTIMIZATION — added 2026-09-04 Everything below is additive; delete this block to revert. ═══════════════════════════════════════════════════════════════════ */ html{-webkit-text-size-adjust:100%} *{-webkit-tap-highlight-color:rgba(203,138,70,.15)} /* Viewport units that account for the mobile browser chrome. 100vh on iOS is the LARGE viewport, so a 100vh hero is taller than the visible area whenever the URL bar is showing. svh is the honest one. */ @supports(height:100svh){ .hero{height:100svh} .work,.about,.svcs,.process,.exp,.talk{min-height:100svh} .menu-overlay{height:75svh} } @media(max-width:768px){ /* ── Trusted By ── .cl-grid is display:flex, so the grid-template-columns overrides in the 1024/768 blocks above never applied — the cards stayed 6-across and collapsed to ~42px wide with 6px logos on a phone. */ .clients .ctn{padding:0 18px} .cl-card{flex:0 0 calc((100% - 24px)/3);padding:15px 10px;border-radius:10px} /* Square marks (Vikings, Wild, Paddle North, TRIA) are height-constrained, so a 24px cap left them filling ~36% of the card and reading as specks. */ .cl-logo{max-height:34px;max-width:88%} .cl-head{margin-bottom:20px} /* Section bleed pushed the document 30px wider than the screen */ .sec-slide::after,.ov-slide::after{left:0;right:0} /* Sticky hold. 45vh is ~380px of empty scroll on a phone, five times over. */ section.sec-slide{margin-bottom:16vh} section.exp.sec-slide{margin-bottom:18vh} section.sec-slide,.ov-slide{border-radius:20px 20px 0 0} .sec-slide::after,.ov-slide::after{border-radius:20px 20px 0 0} /* Sticky shadows are cheap on desktop, expensive to repaint on a phone */ .sec-slide.in-view{box-shadow:0 -20px 40px rgba(0,0,0,.22)} /* ── Forms ── iOS Safari zooms the whole page when a focused field is under 16px. */ .talk-input,.talk-textarea,.cp-input,.cp-textarea{font-size:16px} .talk-textarea{min-height:120px} .talk-submit,.cp-submit{min-height:52px} .cp-submit{width:100%;justify-content:center} /* nav is a 3-column grid: logo | links | toggle. `.n-links` goes display:none on mobile, so the toggle became the 2nd grid item and landed in the middle column — the hamburger sat next to the logo instead of at the right edge. Pin it to the last column explicitly. */ nav .n-tog,.ov-page-nav .n-tog{grid-column:3;justify-self:end} /* ── Tap targets (44px minimum) ── */ .n-tog{min-width:44px;min-height:44px;align-items:center;justify-content:center;padding:10px;margin-right:-10px} .menu-ov-close{width:44px;height:44px} .ft-soc{gap:6px} .ft-soc a{width:44px;height:44px} .ft-soc svg{width:15px;height:15px} .menu-ov-socials{gap:8px} .menu-ov-socials a{width:44px;height:44px;justify-content:center} .menu-ov-email{display:inline-block;padding:12px 0;font-size:.85rem} .menu-ov-link{padding:10px 0} .ft-links a,.press-row{min-height:44px;display:flex;align-items:center} .press-row{display:grid} /* ── Legibility ── micro-labels were rendering at 7-9px */ .wk-card-tag,.svc-card-tag,.proc-tag-item,.pc-label,.hiring-badge,.ft-title,.tag-label{font-size:.62rem} .sl,.hero-eye{font-size:.6rem;letter-spacing:.22em} .exp-stars-sm{font-size:.75rem} .talk-label{font-size:.72rem} .talk-copy,.ft-c,.exp-rev-co{font-size:.72rem} /* Decorative orbs sized for a desktop canvas */ .o1{width:340px;height:340px;right:-25%} .o2{width:220px;height:220px} /* Fixed blur overlays cost a full-screen composite every frame on mobile */ .lens-blur-top,.lens-blur-bottom{backdrop-filter:none;-webkit-backdrop-filter:none;height:56px} } /* Respect the OS "reduce motion" setting */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .hero-h .ln-i,.hero-eye,.hero-bot{opacity:1!important;transform:none!important} .rv,.cl-entrance,.cli-enter{opacity:1!important;transform:none!important} } /* ═══════════════════════════════════════════════════════════════════ MOBILE VERTICAL RHYTHM — added 2026-09-04 One spacing scale for every section. Before this, section padding ran 36 / 64 / 68 / 80 / 119px with no system, and each sticky section added a 136px reveal margin on top of its own 119px padding — so consecutive content blocks sat 374px apart, roughly half a phone screen of nothing. section padding 72px heading > body 40px item gap 18px gutter 18px ═══════════════════════════════════════════════════════════════════ */ @media(max-width:768px){ /* Section padding — uniform top and bottom */ .work,.about,.svcs,.process,.exp,.talk{padding-top:72px;padding-bottom:72px} .clients{padding:56px 0} .hiring{padding:56px 18px} .ft{padding:48px 18px 24px} .ov-sec{padding:72px 0} /* The sticky reveal gap. Sections stay sticky and still slide over one another — this only removes the empty hold between them. */ section.sec-slide,.ov-slide{margin-bottom:34vh} section.exp.sec-slide{margin-bottom:34vh} /* Overlay pages get the same sticky stacking as the homepage. The older rule flattened them to min-height:auto/display:block, which left them sticky in name only. */ .ov-slide{min-height:100svh;display:flex;flex-direction:column;justify-content:center} /* Heading block → content */ .wk-head,.ab-grid,.svcs-head,.proc-head,.exp-head,.cl-head,.po-head{margin-bottom:40px} /* Item gaps */ .svcs-grid,.wk-grid,.po-grid,.crew-photos-row,.talk-features{gap:18px} .cl-grid{gap:12px} .stats{gap:32px 18px;padding-top:36px} .ab-grid{gap:28px} /* Trailing rhythm — the last section before the footer shouldn't carry a full section's worth of padding into it */ .talk{padding-bottom:56px} /* ── Tap targets missed in the first pass ── Footer nav is .ft-ul > li > a; these were rendering 80x15. */ .ft-ul li a{display:inline-flex;align-items:center;min-height:44px} .ft-ul{margin-top:-8px} .ft-grid{gap:20px} .po-filter{min-height:44px} .co-card-link,.talk-form-legal a,.cp-legal a{display:inline-flex;align-items:center;min-height:36px} .btn-hiring,.btn-p{min-height:46px} nav .n-logo,.ov-page-nav .n-logo,.menu-ov-logo{padding:14px 0} .menu-ov-email{min-height:44px} } /* The scroll-driven exit animations translate content up to 120px sideways. That was invisible while body had overflow-x:hidden — which is also what was killing sticky. With sticky restored, those transforms became real horizontal scroll on a phone, so below desktop widths they exit vertically instead. */ @media(max-width:1024px){ .exit-left,.exit-right{ transform:translateY(calc(var(--exit-p,0) * -36px)) scale(calc(1 - var(--exit-p,0) * .04)); opacity:calc(1 - var(--exit-p,0)) } .exit-scatter-1,.exit-scatter-2,.exit-scatter-3,.exit-scatter-4{ transform:translateY(calc(var(--exit-p,0) * -28px)) scale(calc(1 - var(--exit-p,0) * .08)); opacity:calc(1 - var(--exit-p,0)) } } /* Process cards step down the same way the services grid does */ @media(max-width:768px){.proc-sub{padding-top:0}} .rv-d5{transition-delay:.5s}.rv-d6{transition-delay:.6s}.rv-d7{transition-delay:.7s}.rv-d8{transition-delay:.8s} /* Process split: image on top, index beneath */ @media(max-width:900px){ .proc-split{grid-template-columns:1fr;gap:26px} .proc-frame{aspect-ratio:3/2} } @media(max-width:768px){ .proc-row{padding:15px 0} .proc-desc{font-size:.82rem;margin-top:10px} .proc-tags{margin-top:13px} }