
:root{--bg:#090909;--panel:#111;--text:#f2f1ed;--muted:#9b9b96;--line:#272727;--acid:#c9ff25;--radius:28px;--pad:clamp(24px,3.1vw,58px)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}body.lock{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.grain{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}.loader{position:fixed;inset:0;background:#050505;z-index:200;display:grid;place-content:center;gap:18px;transition:transform 1s cubic-bezier(.77,0,.18,1)}.loader.done{transform:translateY(-105%)}.loader__name{font-size:clamp(28px,5vw,76px);font-weight:800;letter-spacing:-.05em}.loader__line{height:2px;background:#222;overflow:hidden}.loader__line i{display:block;height:100%;width:0;background:var(--acid);animation:load 1.2s ease forwards}@keyframes load{to{width:100%}}.nav{position:fixed;top:0;left:0;right:0;z-index:80;padding:20px var(--pad);display:flex;justify-content:space-between;align-items:center;mix-blend-mode:difference}.nav__name{font-weight:800;font-size:14px;letter-spacing:-.02em}.nav__links{display:flex;gap:25px;font-size:12px;text-transform:uppercase;letter-spacing:.04em}.nav__links a{opacity:.8;transition:.3s}.nav__links a:hover{opacity:1;color:var(--acid)}.menu-toggle{display:none;background:none;border:0}.hero{min-height:100svh;padding:110px var(--pad) 36px;position:relative;display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:auto 1fr auto;overflow:hidden}.hero:before{content:"";position:absolute;width:56vw;height:56vw;border-radius:50%;background:radial-gradient(circle,rgba(201,255,37,.09),transparent 60%);right:-25vw;top:-20vw;filter:blur(30px)}.hero__eyebrow{grid-column:1/-1;font-size:12px;letter-spacing:.17em;color:#c3c3bd}.hero__title{align-self:start;margin-top:6vh;font-size:clamp(68px,11.7vw,210px);line-height:.73;font-weight:900;letter-spacing:-.09em;position:relative}.hero__title span{display:block}.hero__title .accent{color:transparent;-webkit-text-stroke:1.5px var(--text);margin-left:14vw}.hero__role{align-self:center;margin:0;font-size:clamp(50px,8vw,150px);line-height:.78;letter-spacing:-.08em;font-weight:850;grid-column:1/-1}.hero__role em{font-style:normal;color:var(--acid)}.hero__copy{align-self:end;max-width:620px;font-size:clamp(19px,2vw,31px);line-height:1.12;letter-spacing:-.04em;margin:0}.hero__scroll{align-self:end;justify-self:end;font-size:12px;letter-spacing:.12em}.hero__scroll b{color:var(--acid);font-size:18px}.intro{padding:15vh var(--pad) 18vh;border-top:1px solid var(--line);display:grid;grid-template-columns:.45fr 1.3fr .65fr;gap:4vw;align-items:start}.kicker{font-size:11px;letter-spacing:.16em;color:var(--muted)}.intro h2,.contact h2{font-size:clamp(46px,7.7vw,138px);line-height:.88;letter-spacing:-.075em;margin:0}.intro>p:last-child{font-size:18px;line-height:1.45;color:#bbb;max-width:430px;margin-top:7px}.work-section{padding:0 var(--pad) 18vh}.section-head{min-height:58vh;display:grid;grid-template-columns:.35fr 1.65fr;align-items:center;border-top:1px solid var(--line)}.section-index{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.13em}.section-head h2{font-size:clamp(72px,12.3vw,220px);line-height:.76;letter-spacing:-.09em;margin:0;text-align:center;text-transform:uppercase}.section-head h2 span{display:block}.section-head h2 span:last-child{color:transparent;-webkit-text-stroke:1.2px var(--text)}.project-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2vw,34px)}.project-card{grid-column:span 6;margin-bottom:7vh;cursor:pointer}.project-card:nth-child(3n+1){grid-column:span 7}.project-card:nth-child(3n+2){grid-column:8/span 5;margin-top:13vh}.project-card:nth-child(3n){grid-column:3/span 8}.project-media{aspect-ratio:16/10;background:#121212;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 50px rgba(0,0,0,.22);transform:translateY(0);transition:transform .65s cubic-bezier(.16,1,.3,1),box-shadow .65s;position:relative}.project-media:after{content:"VIEW PROJECT ↗";position:absolute;right:18px;bottom:18px;padding:11px 14px;border-radius:99px;background:rgba(5,5,5,.75);backdrop-filter:blur(10px);font-size:10px;letter-spacing:.12em;opacity:0;transform:translateY(8px);transition:.35s}.project-card:hover .project-media{transform:translateY(-9px);box-shadow:0 30px 80px rgba(0,0,0,.5)}.project-card:hover .project-media:after{opacity:1;transform:none}.project-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.16,1,.3,1)}.project-card:hover img{transform:scale(1.025)}.project-meta{display:flex;justify-content:space-between;align-items:end;padding-top:14px;border-top:1px solid var(--line);margin-top:15px}.project-meta h3{font-size:clamp(20px,2.2vw,36px);margin:0;letter-spacing:-.05em}.project-meta span{font-size:11px;color:var(--muted);letter-spacing:.11em}.identity-grid .project-card{grid-column:span 4;margin:0 0 4vh}.identity-grid .project-card:nth-child(n){grid-column:span 4;margin-top:0}.identity-grid .project-media{aspect-ratio:1/1;background:#131313;padding:3%;border-radius:32px}.identity-grid .project-media img{object-fit:contain;border-radius:22px}.web-grid .project-card:nth-child(odd){grid-column:span 8}.web-grid .project-card:nth-child(even){grid-column:5/span 8;margin-top:2vh}.web-grid .project-media{aspect-ratio:16/10}.other-grid .project-card{grid-column:2/span 10}.contact{min-height:100svh;padding:16vh var(--pad) 35px;display:flex;flex-direction:column;border-top:1px solid var(--line)}.contact h2{margin:8vh 0 6vh}.contact>a{font-size:clamp(22px,4vw,68px);border-bottom:1px solid var(--text);align-self:flex-start;transition:.3s}.contact>a:hover{color:var(--acid);border-color:var(--acid)}.contact__foot{margin-top:auto;display:flex;justify-content:space-between;color:var(--muted);font-size:11px;letter-spacing:.13em}.lightbox{position:fixed;inset:0;background:rgba(5,5,5,.98);z-index:150;display:grid;grid-template-columns:70px 1fr 70px;grid-template-rows:70px 1fr;opacity:0;visibility:hidden;transition:.45s}.lightbox.open{opacity:1;visibility:visible}.lightbox__bar{grid-column:1/-1;padding:0 22px;border-bottom:1px solid #222;display:flex;justify-content:space-between;align-items:center}.lightbox__bar strong{font-size:13px}.lightbox__bar span{font-size:11px;color:var(--muted);margin-left:14px}.lightbox__bar button{background:none;border:0;cursor:pointer;font-size:11px;letter-spacing:.12em}.lightbox__stage{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:24px 20px 100px}.lightbox__stage>img{max-width:100%;max-height:calc(100vh - 200px);object-fit:contain;border-radius:14px;box-shadow:0 30px 100px #000}.lightbox__arrow{border:0;background:none;font-size:30px;cursor:pointer;opacity:.6;transition:.2s}.lightbox__arrow:hover{opacity:1;color:var(--acid)}.lightbox__thumbs{position:absolute;left:20px;right:20px;bottom:14px;display:flex;gap:8px;overflow-x:auto;padding:6px}.lightbox__thumbs img{width:72px;height:52px;object-fit:cover;border-radius:7px;opacity:.4;cursor:pointer;border:1px solid transparent}.lightbox__thumbs img.active{opacity:1;border-color:var(--acid)}.reveal,.project-card,.section-head>*{opacity:0;transform:translateY(42px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}.in-view{opacity:1;transform:none}.cursor{position:fixed;width:18px;height:18px;border:1px solid #fff;border-radius:50%;z-index:180;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .2s,height .2s;display:none}@media(pointer:fine){.cursor{display:block}body{cursor:none}a,button,.project-card{cursor:none}}
@media(max-width:900px){.nav__links{position:fixed;inset:0;background:#0a0a0a;display:flex;flex-direction:column;justify-content:center;padding:35px;font-size:28px;transform:translateY(-105%);transition:.6s;mix-blend-mode:normal}.nav__links.open{transform:none}.menu-toggle{display:block;z-index:2}.hero{grid-template-columns:1fr}.hero__title{margin-top:9vh}.hero__title .accent{margin-left:8vw}.hero__copy{grid-column:1/-1}.intro{grid-template-columns:1fr;gap:30px}.section-head{grid-template-columns:1fr;min-height:45vh}.section-head h2{text-align:left}.project-card,.project-card:nth-child(n),.identity-grid .project-card:nth-child(n),.web-grid .project-card:nth-child(n){grid-column:1/-1;margin:0 0 7vh}.identity-grid{grid-template-columns:repeat(2,1fr)}.identity-grid .project-card:nth-child(n){grid-column:span 6}.lightbox{grid-template-columns:42px 1fr 42px}.lightbox__stage{padding-left:5px;padding-right:5px}.contact__foot{gap:25px;flex-direction:column}.cursor{display:none}}@media(max-width:560px){.hero{padding-top:90px}.hero__title{font-size:23vw}.hero__role{font-size:19vw}.hero__copy{font-size:20px}.hero__scroll{justify-self:start;margin-top:30px}.section-head h2{font-size:20vw}.identity-grid .project-card:nth-child(n){grid-column:1/-1}.lightbox__thumbs img{width:55px;height:40px}.lightbox__bar{padding:0 12px}}

/* Final layout refinements */
.hero__role{margin-top:clamp(24px,3.2vh,48px)}
.hero__scroll{font-size:14px;font-weight:700;letter-spacing:.14em;padding:12px 0;transition:color .3s,transform .3s}
.hero__scroll:hover{color:var(--acid);transform:translateY(-3px)}
.identity-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.6vw,28px)}
.identity-grid .project-card,.identity-grid .project-card:nth-child(n){grid-column:auto;margin:0 0 2.5vh}
.identity-grid .project-media{border-radius:28px;padding:4%}
.identity-grid .project-media img{border-radius:20px}
.identity-grid .project-meta{display:block;margin-top:10px;padding-top:10px}
.identity-grid .project-meta h3{font-size:clamp(15px,1.35vw,23px)}
.identity-grid .project-meta span{display:block;margin-top:6px;font-size:9px}
.web-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.4vw,24px)}
.web-grid .project-card,.web-grid .project-card:nth-child(n){grid-column:auto;margin:0 0 3vh}
.web-grid .project-media{aspect-ratio:16/10;border-radius:20px}
.web-grid .project-meta{display:block;padding-top:9px;margin-top:9px}
.web-grid .project-meta h3{font-size:clamp(14px,1.2vw,21px)}
.web-grid .project-meta span{display:block;margin-top:5px;font-size:8px;line-height:1.4}
.other-grid{display:block;column-count:4;column-gap:clamp(16px,1.7vw,28px)}
.other-grid .other-tile,.other-grid .other-tile:nth-child(n){display:inline-block;width:100%;margin:0 0 clamp(16px,1.7vw,28px);break-inside:avoid;grid-column:auto}
.other-grid .project-media{aspect-ratio:auto;border-radius:22px}
.other-grid .project-media img{width:100%;height:auto;object-fit:contain;border-radius:22px}
.other-grid .project-media:after{content:"VIEW ↗"}
.contact h2{margin:6vh 0 8vh}
.contact__links{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.contact__links a{font-size:clamp(22px,3.6vw,60px);border-bottom:1px solid var(--text);transition:.3s}
.contact__links a:hover{color:var(--acid);border-color:var(--acid)}
@media(max-width:1200px){.web-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.identity-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.identity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.identity-grid .project-card:nth-child(n){grid-column:auto}.web-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.web-grid .project-card:nth-child(n){grid-column:auto}.other-grid{column-count:2}}
@media(max-width:560px){.identity-grid,.web-grid{grid-template-columns:1fr}.identity-grid .project-card:nth-child(n),.web-grid .project-card:nth-child(n){grid-column:auto}.other-grid{column-count:1}.contact__links{gap:16px}}

/* V3 spacing and motion refinements */
.hero{grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);grid-template-rows:auto 1fr;padding-bottom:42px}
.hero__eyebrow{grid-column:1/-1}
.hero__content{grid-column:1;align-self:stretch;display:flex;flex-direction:column;min-width:0}
.hero__title{margin-top:5.5vh;align-self:flex-start}
.hero__role{grid-column:auto;align-self:auto;margin-top:clamp(18px,2.3vh,34px)}
.hero__copy{align-self:auto;margin-top:clamp(48px,7vh,96px);max-width:610px}
.hero__scroll{margin-top:auto;align-self:flex-start;justify-self:auto}
.hero__motion{grid-column:2;grid-row:2;align-self:center;justify-self:center;width:min(43vw,720px);aspect-ratio:1;position:relative;filter:drop-shadow(0 0 45px rgba(201,255,37,.08))}
.hero__motion:before{content:"";position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle at 46% 43%,rgba(201,255,37,.28),rgba(201,255,37,.08) 25%,transparent 65%);filter:blur(12px);animation:breathe 5.5s ease-in-out infinite}
.motion-orbit{position:absolute;inset:15%;border:1px solid rgba(201,255,37,.38);border-radius:50%;animation:spin 16s linear infinite}
.orbit-a{transform:rotateX(68deg) rotateZ(14deg)}
.orbit-b{inset:25%;border-color:rgba(255,255,255,.2);animation-duration:11s;animation-direction:reverse;transform:rotateY(70deg) rotateZ(-18deg)}
.orbit-c{inset:34%;border-style:dashed;border-color:rgba(201,255,37,.5);animation-duration:9s}
.motion-core{position:absolute;inset:43%;border-radius:50%;background:var(--acid);box-shadow:0 0 35px rgba(201,255,37,.7),0 0 110px rgba(201,255,37,.25);animation:pulse 3s ease-in-out infinite}
.motion-wave{position:absolute;left:5%;right:5%;top:48%;height:1px;background:linear-gradient(90deg,transparent,rgba(201,255,37,.85),transparent);transform-origin:center;filter:drop-shadow(0 0 8px rgba(201,255,37,.65));animation:wave 4.6s ease-in-out infinite}
.wave-b{animation-delay:-2.1s;opacity:.55}
.motion-dot{position:absolute;width:7px;height:7px;border:1px solid var(--acid);border-radius:50%;box-shadow:0 0 12px rgba(201,255,37,.5)}
.dot-a{left:10%;top:34%;animation:float 4s ease-in-out infinite}.dot-b{right:14%;top:24%;animation:float 5s ease-in-out infinite reverse}.dot-c{right:9%;bottom:24%;animation:float 3.5s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{transform:scale(1.35);opacity:.72}}@keyframes breathe{50%{transform:scale(1.12);opacity:.72}}@keyframes wave{0%,100%{transform:rotate(-9deg) scaleX(.76)}50%{transform:rotate(10deg) scaleX(1.08)}}@keyframes float{50%{transform:translate3d(14px,-18px,0)}}
.intro{padding:clamp(52px,6.5vh,86px) var(--pad);display:flex;justify-content:center;align-items:center;text-align:center}
.intro h2{font-size:clamp(44px,5.6vw,100px);line-height:.96;max-width:1280px;letter-spacing:-.065em}
.work-section{padding-bottom:clamp(80px,10vh,130px)}
.section-head{min-height:auto;padding:clamp(65px,8vh,110px) 0 clamp(52px,6.5vh,88px);display:flex;justify-content:center;align-items:center}
.section-head h2{font-size:clamp(68px,10.3vw,184px)}
.contact{min-height:auto;padding:clamp(90px,11vh,150px) var(--pad) 24px}
.contact h2{margin:0 0 clamp(52px,6vh,80px)}
.contact__links{margin-bottom:clamp(42px,5vh,65px)}
.contact__foot{margin-top:0;justify-content:flex-end}
@media(max-width:900px){.hero{grid-template-columns:1fr;grid-template-rows:auto auto auto}.hero__content{grid-column:1}.hero__motion{grid-column:1;grid-row:3;width:min(82vw,520px);margin:25px auto 0}.hero__copy{margin-top:38px}.hero__scroll{margin-top:42px}.intro{padding:48px var(--pad)}.section-head{padding:58px 0 44px}}
@media(max-width:560px){.hero__motion{width:92vw;opacity:.8}.hero__copy{margin-top:34px}.intro h2{font-size:11.5vw}.section-head{padding:46px 0 36px}}
@media(prefers-reduced-motion:reduce){.motion-orbit,.motion-core,.hero__motion:before,.motion-wave,.motion-dot{animation:none}}

/* V4 navigation, brand mark, social links and creative hero system */
.nav{gap:22px;mix-blend-mode:normal;background:linear-gradient(180deg,rgba(9,9,9,.88),rgba(9,9,9,0));backdrop-filter:blur(2px)}
.nav__brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.nav__logo{width:31px;height:31px;border-radius:8px;overflow:hidden;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.nav__logo img{width:100%;height:100%;object-fit:cover;display:block}
.nav__name{font-size:15px;white-space:nowrap}
.nav__links{margin-left:auto;gap:clamp(15px,1.45vw,28px);font-size:13px;align-items:center}
.nav__socials{display:flex;gap:9px;align-items:center;margin-left:3px}
.nav__socials a{width:31px;height:31px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:grid;place-items:center;transition:.3s;background:rgba(9,9,9,.35)}
.nav__socials svg{width:14px;height:14px;fill:currentColor}
.nav__socials a:hover{color:var(--acid);border-color:var(--acid);transform:translateY(-2px)}
.hero__motion.creative-system{filter:none;isolation:isolate;overflow:hidden;border-radius:50%}
.creative-grid{position:absolute;inset:8%;opacity:.24;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle,#000 20%,transparent 72%);animation:gridDrift 14s linear infinite}
.creative-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.24)}
.ring-one{inset:17%;animation:creativeSpin 18s linear infinite}
.ring-one:before,.ring-one:after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#ff0055;box-shadow:0 0 24px rgba(255,0,85,.75)}
.ring-one:before{top:9%;left:19%}.ring-one:after{right:8%;bottom:22%;background:var(--acid);box-shadow:0 0 24px rgba(201,255,37,.65)}
.ring-two{inset:29%;border-style:dashed;border-color:rgba(201,255,37,.45);animation:creativeSpin 11s linear infinite reverse}
.creative-mark{position:absolute;inset:37%;border-radius:22%;overflow:hidden;box-shadow:0 28px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.18);animation:markFloat 5s ease-in-out infinite}
.creative-mark img{width:100%;height:100%;object-fit:cover;display:block}
.creative-word{position:absolute;font-size:clamp(11px,1vw,15px);font-weight:800;letter-spacing:.19em;color:rgba(242,241,237,.85);padding:8px 11px;border:1px solid rgba(255,255,255,.2);background:rgba(9,9,9,.62);backdrop-filter:blur(10px);border-radius:99px;animation:wordFloat 5s ease-in-out infinite}
.word-idea{left:8%;top:28%}.word-brand{right:4%;top:35%;animation-delay:-1.3s}.word-story{left:15%;bottom:22%;animation-delay:-2.1s}.word-digital{right:10%;bottom:18%;animation-delay:-3.2s}.word-ai{right:18%;top:13%;color:#ff4b87;border-color:rgba(255,75,135,.45);animation-delay:-.7s}
.creative-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform-origin:center}
.line-one{left:3%;right:3%;top:50%;animation:lineSwing 7s ease-in-out infinite}.line-two{left:18%;right:18%;top:47%;animation:lineSwing 5s ease-in-out infinite reverse}
.creative-node{position:absolute;width:7px;height:7px;border-radius:50%;border:1px solid var(--acid);box-shadow:0 0 16px rgba(201,255,37,.6)}
.node-one{left:18%;top:16%;animation:nodeFloat 4.2s ease-in-out infinite}.node-two{right:14%;top:57%;animation:nodeFloat 5.2s ease-in-out infinite reverse}.node-three{left:38%;bottom:8%;border-color:#ff4b87;box-shadow:0 0 16px rgba(255,75,135,.65);animation:nodeFloat 3.8s ease-in-out infinite}
@keyframes creativeSpin{to{transform:rotate(360deg)}}
@keyframes gridDrift{to{background-position:34px 34px}}
@keyframes markFloat{50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes wordFloat{50%{transform:translate3d(8px,-10px,0)}}
@keyframes lineSwing{0%,100%{transform:rotate(-8deg) scaleX(.78)}50%{transform:rotate(8deg) scaleX(1.05)}}
@keyframes nodeFloat{50%{transform:translate3d(14px,-16px,0)}}
.contact__socials{display:flex;gap:12px;flex-wrap:wrap;margin:-20px 0 clamp(34px,4vh,52px)}
.contact__socials a{display:inline-flex;align-items:center;gap:10px;padding:11px 15px;border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;transition:.3s}
.contact__socials svg{width:16px;height:16px;fill:currentColor}
.contact__socials a:hover{color:var(--acid);border-color:var(--acid);transform:translateY(-3px)}
@media(max-width:1180px){.nav__links{gap:13px;font-size:11px}.nav__socials{display:none}}
@media(max-width:900px){.nav{mix-blend-mode:normal}.nav__brand{z-index:3}.nav__links{gap:21px;font-size:27px;align-items:flex-start}.nav__socials{display:flex;position:fixed;z-index:83;right:90px;top:16px}.hero__motion.creative-system{border-radius:28px}.creative-word{font-size:10px}.contact__socials{margin-top:-8px}}
@media(max-width:560px){.nav__logo{width:28px;height:28px}.nav__name{font-size:13px}.nav__socials{right:76px}.nav__socials a{width:28px;height:28px}.creative-mark{inset:34%}.word-brand{right:2%}.word-digital{right:2%}}
@media(prefers-reduced-motion:reduce){.creative-grid,.creative-ring,.creative-mark,.creative-word,.creative-line,.creative-node{animation:none}}

/* V5 final scale and spacing refinements */
@media(min-width:901px){
  .nav__links{font-size:14px;gap:clamp(16px,1.55vw,30px)}
  .hero__title{margin-top:6.4vh}
  .hero__role{margin-top:clamp(32px,4.1vh,58px)}
  .hero__copy{margin-top:clamp(58px,8.2vh,112px)}
  .hero__motion{width:min(46vw,780px)}
  .creative-mark{inset:34%}
  .creative-word{font-size:clamp(12px,1.12vw,17px);padding:9px 13px}
  .creative-node{width:8px;height:8px}
}
@media(min-width:1181px){
  .nav__name{font-size:16px}
}
@media(max-width:1180px) and (min-width:901px){
  .nav__links{font-size:12px;gap:14px}
  .hero__motion{width:min(45vw,680px)}
}

/* V5.2 — robust mobile navigation */
@media (max-width:900px){
  .nav{
    height:68px;
    padding:12px 18px;
    gap:0;
    background:rgba(9,9,9,.88);
    border-bottom:1px solid rgba(255,255,255,.07);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    mix-blend-mode:normal;
  }
  .nav__brand{position:relative;z-index:84;gap:9px;min-width:0}
  .nav__logo{width:34px;height:34px;border-radius:9px;flex:0 0 auto}
  .nav__name{font-size:13px;line-height:1;overflow:hidden;text-overflow:ellipsis}
  .nav__socials{
    display:flex;
    position:relative;
    z-index:84;
    top:auto;
    right:auto;
    margin-left:auto;
    gap:7px;
  }
  .nav__socials a{width:34px;height:34px;background:rgba(9,9,9,.72)}
  .menu-toggle{
    display:block;
    position:relative;
    z-index:85;
    margin-left:12px;
    padding:8px 0 8px 4px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    line-height:1;
  }
  .nav__links{
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    z-index:82;
    margin:0;
    padding:104px 24px 36px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    gap:0;
    overflow-y:auto;
    background:rgba(7,7,7,.985);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:none;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .55s cubic-bezier(.77,0,.18,1),opacity .25s ease,visibility 0s linear .55s;
  }
  .nav__links.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    clip-path:inset(0 0 0 0);
    transition:clip-path .55s cubic-bezier(.77,0,.18,1),opacity .25s ease;
  }
  .nav__links a{
    width:100%;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.1);
    font-size:clamp(25px,7.4vw,38px);
    line-height:1.02;
    letter-spacing:-.035em;
    font-weight:750;
    opacity:1;
  }
  .nav__links a:first-child{border-top:1px solid rgba(255,255,255,.1)}
  .hero{padding-top:102px}
}
@media (max-width:420px){
  .nav{padding-left:14px;padding-right:14px}
  .nav__name{font-size:12px;max-width:92px}
  .nav__logo{width:32px;height:32px}
  .nav__socials a{width:32px;height:32px}
  .menu-toggle{margin-left:9px;font-size:12px}
  .nav__links{padding-left:20px;padding-right:20px}
}
@media (max-width:350px){
  .nav__name{display:none}
}


/* V5.2.3 — final optical spacing fixes only */
.hero__title .kern-i{display:inline-block!important;margin-left:.052em}
@media(max-width:560px){
  #product-photography .section-head h2{
    width:100%;
    max-width:100%;
    font-size:clamp(37px,12.6vw,53px);
    line-height:.84;
    letter-spacing:-.09em;
    overflow:visible;
  }
  #product-photography .section-head h2 span{
    display:block;
    width:max-content;
    max-width:none;
    white-space:nowrap;
  }
  .hero__title .kern-i{margin-left:.058em}
}
/* iOS Safari uses slightly wider Arial glyph metrics than Chromium emulation. */
@supports (-webkit-touch-callout:none){
  @media(max-width:560px){
    #product-photography .section-head h2{font-size:clamp(36px,12.15vw,51px);letter-spacing:-.095em}
  }
}
