:root{--bg:#f2f2ee;--ink:#070707;--line:#d2d2cc;--muted:#6f6f69;--pad:clamp(22px,4vw,68px);--ease:cubic-bezier(.16,1,.3,1);--section-tight:clamp(46px,3.6vw,68px);--section-base:clamp(64px,5vw,92px);--section-wide:clamp(82px,6.4vw,118px);--title-gap:clamp(24px,2.2vw,38px);--grid-gap:clamp(7px,.7vw,12px);--copy-measure:40rem}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}body.modal-lock{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.eyebrow{display:block;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.site-header{position:fixed;z-index:60;top:0;left:0;width:100%;height:84px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;color:#fff;transition:background .45s,color .45s,border-color .45s;border-bottom:1px solid transparent}.site-header.scrolled{background:rgba(8,8,8,.93);backdrop-filter:blur(14px);border-color:rgba(255,255,255,.12)}.brand{font-size:28px;font-weight:900;letter-spacing:-1.8px;line-height:1}.desktop-nav{display:flex;gap:34px;font-size:11px}.desktop-nav a{position:relative}.desktop-nav a:after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}.desktop-nav a:hover:after{transform:scaleX(1);transform-origin:left}.header-cta{border:1px solid currentColor;padding:13px 18px;font-size:10px;font-weight:700;letter-spacing:.1em;transition:background .25s,color .25s}.header-cta:hover{background:#fff;color:#000}.menu-toggle{display:none;background:none;border:0;color:inherit;width:42px;height:42px;padding:0;position:relative}.menu-toggle span{position:absolute;left:8px;width:26px;height:1px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}.menu-toggle span:first-child{top:17px}.menu-toggle span:last-child{top:25px}.menu-toggle.active span:first-child{top:21px;transform:rotate(45deg)}.menu-toggle.active span:last-child{top:21px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;z-index:55;inset:0;background:#080808;color:#fff;padding:110px var(--pad) 35px;display:flex;flex-direction:column;justify-content:space-between;transform:translateY(-102%);visibility:hidden;transition:transform .65s var(--ease),visibility .65s}.mobile-menu.open{transform:translateY(0);visibility:visible}.mobile-menu nav{display:flex;flex-direction:column}.mobile-menu nav a{font-size:clamp(44px,11vw,86px);font-weight:700;letter-spacing:-.065em;line-height:1.02;border-bottom:1px solid #2b2b2b;padding:8px 0}.mobile-menu nav a span{font-size:9px;letter-spacing:.14em;margin-right:16px;vertical-align:top}.mobile-menu-foot{font-size:9px;line-height:1.6;letter-spacing:.12em;color:#777}
.hero{height:100svh;min-height:680px;position:relative;background:#050505;color:#fff;overflow:hidden}.hero-media,.hero-media video,.hero-poster,.hero-fallback,.hero-shade,.hero-grain{position:absolute;inset:0;width:100%;height:100%}.hero-media video{object-fit:cover}.hero-poster{background-size:cover;background-position:center}.hero-fallback{background:radial-gradient(circle at 77% 43%,#44535d 0,#1d2a32 12%,#0d1114 31%,#030303 67%)}.hero-fallback:after{content:"";position:absolute;width:43vw;height:43vw;border:1px solid rgba(255,255,255,.17);border-radius:50%;right:5vw;top:13vh;box-shadow:0 0 100px rgba(80,160,255,.08),inset 0 0 80px rgba(255,255,255,.04)}.hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.78) 0,rgba(0,0,0,.22) 58%,rgba(0,0,0,.2)),linear-gradient(0deg,rgba(0,0,0,.45),transparent 48%)}.hero-grain{opacity:.16;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E")}.hero-copy{position:absolute;left:var(--pad);right:var(--pad);bottom:8.5%;max-width:1260px}.hero-eyebrow{margin:0 0 22px;font-size:9px;letter-spacing:.16em;color:#d4d4d4}.hero h1{font-size:clamp(62px,9.7vw,158px);line-height:.78;letter-spacing:-.075em;margin:0;font-weight:700;max-width:1040px}.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:44px;gap:35px;max-width:1000px}.hero-bottom p{font-size:10px;font-weight:700;letter-spacing:.14em;line-height:1.5;margin:0}.text-link{display:inline-flex;align-items:center;gap:12px;border-bottom:1px solid;padding-bottom:5px;font-size:10px;font-weight:700;letter-spacing:.06em}.text-link span{transition:transform .3s}.text-link:hover span{transform:translateY(4px)}.text-link.dark{margin-top:28px}.hero-side{position:absolute;right:19px;bottom:34px;font-size:8px;letter-spacing:.14em;writing-mode:vertical-rl;display:flex;gap:8px}
.section{padding:96px var(--pad)}.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:42px}.section-head h2{font-size:clamp(32px,4.1vw,66px);line-height:.83;text-transform:uppercase;letter-spacing:-.055em;margin:0}.section-head>span{font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
.project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.project-card{position:relative;border:0;padding:0;overflow:hidden;background:#111;color:#fff;cursor:pointer;text-align:left;aspect-ratio:4/3;min-height:0;isolation:isolate}.project-image{position:absolute;inset:-1px;background-size:cover;background-position:center;transition:transform .85s var(--ease),filter .5s}.project-card:hover .project-image{transform:scale(1.055)}.project-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent 58%);transition:opacity .5s}.project-card:hover .project-overlay{opacity:.88}.project-meta{position:absolute;left:20px;bottom:18px;right:20px;z-index:2}.project-meta h3{font-size:clamp(27px,2.45vw,46px);letter-spacing:-.065em;line-height:.84;margin:0 0 9px;text-transform:uppercase}.project-meta p{font-size:8px;letter-spacing:.03em;line-height:1.35;margin:0;max-width:190px;color:#ddd}.project-number{position:absolute;top:17px;left:19px;font-size:8px;letter-spacing:.14em;z-index:2}.project-open{position:absolute;top:16px;right:18px;font-size:8px;letter-spacing:.12em;z-index:2;transform:translateY(-10px);opacity:0;transition:opacity .35s,transform .35s var(--ease)}.project-card:hover .project-open{transform:none;opacity:1}.placeholder.p1{background:linear-gradient(140deg,#d0e35b 0,#72933e 45%,#252c17 100%)}.placeholder.p2{background:linear-gradient(140deg,#b6d4ea,#627993 47%,#172331)}.placeholder.p3{background:linear-gradient(140deg,#ffb13b,#6c361c 48%,#16100f)}.placeholder.p4{background:linear-gradient(140deg,#111 0,#5b5b5b 68%,#101010)}.placeholder.p5{background:linear-gradient(140deg,#1c1714,#8a755f)}.placeholder.p6{background:linear-gradient(140deg,#1f102e,#8b42ab 62%,#1e0e29)}
.manifesto{display:grid;grid-template-columns:1.45fr .65fr;gap:12vw;border-bottom:1px solid var(--line);align-items:end}.manifesto h2{font-size:clamp(52px,7.3vw,112px);line-height:.72;letter-spacing:-.075em;text-transform:uppercase;margin:0}.manifesto-copy{max-width:440px;font-size:17px;line-height:1.35;padding-bottom:6px}.manifesto-copy p{margin:0 0 18px}.manifesto-copy strong{font-size:11px;letter-spacing:.11em;text-transform:uppercase}
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.cap-grid article{padding:30px 26px 24px 0;border-right:1px solid var(--line);min-height:360px;position:relative}.cap-grid article+article{padding-left:26px}.cap-grid article:last-child{border-right:0}.cap-index{position:absolute;right:20px;top:32px;font-size:9px;color:#989892}.cap-icon{font-size:38px;display:inline-block;transition:transform .45s var(--ease)}.cap-grid article:hover .cap-icon{transform:rotate(18deg) scale(1.08)}.cap-grid h3{text-transform:uppercase;font-size:19px;margin:42px 0 22px}.cap-grid p{font-size:12px;line-height:1.62;color:#333}
.showreel{background:#050505;color:#fff;display:grid;grid-template-columns:32% 68%;min-height:500px;overflow:hidden}.showreel-copy{padding:60px var(--pad);position:relative;z-index:2}.showreel-copy .eyebrow{color:#999}.showreel h2{font-size:clamp(45px,5.5vw,88px);line-height:.75;letter-spacing:-.07em;margin:0}.showreel p{font-size:9px;letter-spacing:.12em;margin:30px 0 13px}.outline-btn{display:inline-block;background:none;color:#fff;border:1px solid #777;padding:13px 18px;font-size:9px;letter-spacing:.12em;cursor:pointer;transition:background .25s,color .25s,border-color .25s}.outline-btn:hover{background:#fff;color:#000;border-color:#fff}.outline-btn.is-disabled{opacity:.5;cursor:default}.showreel-art{appearance:none;border:0;padding:0;margin:0;color:#fff;font:inherit;text-align:left;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);position:relative;overflow:hidden;min-height:500px;background:#111}.showreel-launch{cursor:pointer}.showreel-art.has-poster{display:block}.showreel-art.has-poster:before{content:"";position:absolute;inset:-2%;background-image:var(--showreel-poster);background-size:cover;background-position:center;transform:scale(1.03);transition:transform 1.1s var(--ease),filter .8s var(--ease);z-index:0}.showreel-launch.has-poster:hover:before{transform:scale(1.075);filter:saturate(1.06) contrast(1.04)}.showreel-tile{display:block;min-height:220px;background:linear-gradient(135deg,#11161b,#314d70);transition:transform .85s var(--ease),filter .85s var(--ease)}.showreel-tile:nth-child(2){background:linear-gradient(135deg,#232327,#8d7c5d)}.showreel-tile:nth-child(3){background:linear-gradient(135deg,#16101d,#7c3699)}.showreel-tile:nth-child(4){background:linear-gradient(135deg,#13180f,#607b2b)}.showreel-tile:nth-child(5){background:linear-gradient(135deg,#101010,#913988)}.showreel-tile:nth-child(6){background:linear-gradient(135deg,#14202b,#82683e)}.showreel-launch:hover .showreel-tile{transform:scale(1.045);filter:contrast(1.08)}.showreel-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.02) 55%,rgba(0,0,0,.16)),linear-gradient(0deg,rgba(0,0,0,.28),transparent 40%);z-index:1;pointer-events:none;transition:background .45s}.showreel-launch:hover .showreel-shade{background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 58%,rgba(0,0,0,.1)),linear-gradient(0deg,rgba(0,0,0,.2),transparent 42%)}.showreel-ring{position:absolute;left:50%;top:50%;translate:-50% -50%;width:104px;height:104px;border-radius:50%;border:1px solid rgba(255,255,255,.78);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(0,0,0,.22);backdrop-filter:blur(6px);z-index:3;transition:border-color .35s,background .35s}.showreel-ring b{font-size:17px;font-weight:400;line-height:1;margin-left:3px}.showreel-ring small{font-size:7px;font-weight:700;letter-spacing:.2em}.showreel-launch:hover .showreel-ring{border-color:#fff;background:rgba(255,255,255,.1)}.showreel-ring.is-disabled{opacity:.55}.showreel-corner{position:absolute;right:22px;bottom:20px;z-index:3;font-size:8px;font-weight:700;letter-spacing:.13em;transition:transform .4s var(--ease)}.showreel-launch:hover .showreel-corner{transform:translate(-5px,-4px)}
.tech{display:grid;grid-template-columns:1.08fr 2fr;gap:8vw;align-items:center;border-bottom:1px solid var(--line)}.tech-copy h2{font-size:clamp(42px,5.3vw,82px);line-height:.82;letter-spacing:-.06em;margin:18px 0 26px}.tech-copy p{max-width:520px;font-size:13px;line-height:1.55}.tech-items{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.tech-items span{font-size:31px;background:var(--bg);min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background .3s,color .3s}.tech-items span:hover{background:#080808;color:#fff}.tech-items b{display:block;font-size:9px;margin-top:18px;letter-spacing:.04em}
.logo-grid{display:grid;grid-template-columns:repeat(8,1fr);align-items:center;border-top:1px solid var(--line);border-left:1px solid var(--line)}.logo-item,.demo-logos div{height:116px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px}.logo-item img{max-width:100%;max-height:48px;object-fit:contain;filter:grayscale(1);opacity:.78;transition:filter .3s,opacity .3s,transform .3s}.logo-item:hover img{filter:none;opacity:1;transform:scale(1.04)}.demo-logos div{text-align:center;font-size:14px;font-weight:800}
.about{background:#090909;color:#fff;padding:38px var(--pad);display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #292929}.stat{display:flex;gap:15px;align-items:center;border-right:1px solid #292929;padding-right:28px}.stat:last-child{border-right:0}.stat strong{font-size:31px;letter-spacing:-.05em}.stat span{font-size:8px;line-height:1.18;letter-spacing:.08em;color:#aaa}
footer{background:#090909;color:#fff;padding:0 var(--pad) 44px}.footer-top{padding:60px 0;border-bottom:1px solid #292929;display:flex;justify-content:space-between;align-items:flex-end}.footer-top>span{font-size:9px;letter-spacing:.14em;color:#888}.footer-top>a{font-size:clamp(64px,10vw,158px);line-height:.72;letter-spacing:-.075em;font-weight:700}.footer-top>a span{font-size:.35em;vertical-align:top;display:inline-block;transition:transform .35s var(--ease)}.footer-top>a:hover span{transform:translate(8px,-8px)}.footer-bottom{display:grid;grid-template-columns:2.2fr 1fr .8fr auto;gap:40px;align-items:end;padding-top:35px}.footer-brand{font-size:clamp(54px,7vw,110px);font-weight:900;letter-spacing:-.075em;line-height:.7}.footer-contact small{display:block;font-size:8px;letter-spacing:.12em;color:#777;margin-bottom:10px}.footer-contact a,.footer-links a{display:block;font-size:11px;margin-top:6px}.footer-links a{color:#aaa}.copyright{font-size:8px;color:#666}
.wa-float{position:fixed;right:23px;bottom:22px;z-index:48;height:52px;min-width:52px;border-radius:28px;background:#fff;color:#000;display:flex;align-items:center;gap:0;overflow:hidden;padding:0 17px;box-shadow:0 10px 30px rgba(0,0,0,.18);font-size:10px;font-weight:900;transition:gap .4s var(--ease),padding .4s var(--ease)}.wa-float b{font-size:9px;letter-spacing:.08em;max-width:0;opacity:0;overflow:hidden;transition:max-width .4s var(--ease),opacity .25s}.wa-float:hover{gap:12px;padding:0 20px}.wa-float:hover b{max-width:90px;opacity:1}
.modal{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none}.modal.open{visibility:visible;pointer-events:auto}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(8px);opacity:0}.modal-panel{position:absolute;inset:18px;background:var(--bg);overflow:auto;transform:translateY(38px) scale(.985);opacity:0;overscroll-behavior:contain}.modal-bar{height:62px;position:sticky;top:0;z-index:4;background:rgba(242,242,238,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,4vw,60px)}.modal-bar>span,.modal-close{font-size:8px;letter-spacing:.14em}.modal-close{border:0;background:none;cursor:pointer;padding:12px 0}.modal-header{padding:34px clamp(24px,3.3vw,58px) 30px;display:grid;grid-template-columns:.7fr 1.15fr 1.35fr;column-gap:4vw;align-items:start;border-bottom:1px solid var(--line)}.modal-header>span{font-size:8px;text-transform:uppercase;letter-spacing:.12em;line-height:1.5;padding-top:8px}.modal-header h2{grid-column:2;font-size:clamp(42px,4.9vw,82px);line-height:.78;letter-spacing:-.075em;text-transform:uppercase;margin:0}.modal-header p{grid-column:3;font-size:12px;max-width:560px;line-height:1.5;margin:4px 0 0}.modal-gallery{padding:12px clamp(12px,1.6vw,26px) 26px;display:grid;grid-template-columns:repeat(12,1fr);gap:10px}.modal-gallery img{width:100%;display:block;grid-column:span 6}.modal-gallery img:nth-child(3n+1){grid-column:span 12}.modal-empty{grid-column:1/-1;min-height:55vh;background:#0b0b0b;display:grid;place-items:center;color:#fff;font-size:9px;letter-spacing:.15em}.video-modal{position:fixed;inset:0;z-index:110;visibility:hidden;pointer-events:none;display:grid;place-items:center;padding:5vw}.video-modal.open{visibility:visible;pointer-events:auto}.video-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.95);opacity:0}.video-frame{position:relative;z-index:2;width:min(1500px,92vw);aspect-ratio:16/9;max-height:84vh;display:grid;place-items:center;background:#000;transform:scale(.96);opacity:0;overflow:hidden}.video-frame video{width:100%;max-height:84vh;display:block;background:#000;position:relative;z-index:2}.video-status{position:absolute;inset:0;z-index:1;display:grid;place-items:center;color:#8d8d8d;font-size:9px;font-weight:700;letter-spacing:.16em;background:#050505;transition:opacity .25s}.video-frame.is-ready .video-status{opacity:0;pointer-events:none}.video-frame.is-error .video-status{color:#fff;z-index:4;padding:30px;text-align:center}.video-close{position:absolute;right:28px;top:24px;z-index:3;background:none;border:0;color:#fff;font-size:9px;letter-spacing:.14em;cursor:pointer}.dev-note{position:fixed;left:12px;bottom:12px;z-index:90;background:#ffe35c;color:#000;padding:8px 10px;font-size:9px}.reveal{will-change:transform,opacity}
@media(max-width:1450px) and (min-width:1001px){.project-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.project-meta h3{font-size:clamp(29px,3vw,46px)}}
@media(max-width:1000px) and (min-width:621px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-meta h3{font-size:clamp(30px,5vw,48px)}}
@media(max-width:1000px){.desktop-nav{display:none}.menu-toggle{display:block}.desktop-cta{display:none}.manifesto{grid-template-columns:1fr;gap:55px}.manifesto-copy{margin-left:34%;}.cap-grid{grid-template-columns:repeat(2,1fr)}.cap-grid article:nth-child(2){border-right:0}.showreel{grid-template-columns:1fr}.showreel-copy{min-height:420px}.showreel-art{min-height:460px}.tech{grid-template-columns:1fr}.logo-grid{grid-template-columns:repeat(4,1fr)}.footer-bottom{grid-template-columns:1.6fr 1fr 1fr}.copyright{grid-column:1/-1}}
@media(max-width:620px){.site-header{height:70px}.brand{font-size:23px}.hero{min-height:650px}.hero-copy{bottom:8%}.hero-eyebrow{font-size:8px}.hero h1{font-size:clamp(56px,18vw,84px);line-height:.78}.hero-bottom{display:block;margin-top:34px}.hero-bottom p{font-size:8px;max-width:280px}.hero-bottom .text-link{margin-top:30px}.hero-side{display:none}.section{padding-top:68px;padding-bottom:68px}.section-head{align-items:flex-start}.section-head>span{display:none}.project-grid{display:grid;grid-template-columns:1fr;gap:8px}.project-card{width:100%;aspect-ratio:4/3;min-height:0}.project-meta h3{font-size:48px}.project-open{opacity:1;transform:none}.manifesto h2{font-size:53px}.manifesto-copy{margin-left:0;font-size:15px}.cap-grid{grid-template-columns:1fr}.cap-grid article,.cap-grid article+article{padding:28px 0;border-right:0;border-bottom:1px solid var(--line);min-height:auto}.cap-index{right:0}.showreel-copy{padding-top:55px;padding-bottom:55px;min-height:0}.showreel h2{font-size:52px}.showreel-art{min-height:330px;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}.showreel-ring{width:76px;height:76px;gap:6px}.showreel-ring small{font-size:6px}.showreel-corner{right:14px;bottom:13px}.video-frame{aspect-ratio:16/9}.tech-items{grid-template-columns:repeat(2,1fr)}.tech-items span{min-height:130px}.logo-grid{grid-template-columns:repeat(2,1fr)}.logo-item,.demo-logos div{height:96px}.about{grid-template-columns:repeat(2,1fr);gap:0;padding-top:20px;padding-bottom:20px}.stat{border-right:0;border-bottom:1px solid #292929;padding:20px 8px}.footer-top{display:block;padding:48px 0}.footer-top>a{display:block;margin-top:30px;font-size:66px}.footer-bottom{grid-template-columns:1fr;align-items:start}.footer-brand{font-size:72px;margin-bottom:20px}.modal-panel{inset:0}.modal-bar{height:58px}.modal-header{grid-template-columns:1fr;padding:34px 22px 28px}.modal-header>span{margin-bottom:18px;padding-top:0}.modal-header h2,.modal-header p{grid-column:1}.modal-header h2{font-size:65px;line-height:.78;margin-bottom:24px}.modal-header p{font-size:13px}.modal-gallery{grid-template-columns:1fr;padding:0 8px 8px}.modal-gallery img,.modal-gallery img:nth-child(3n+1){grid-column:1}.wa-float{right:14px;bottom:14px}.video-modal{padding:0}.video-frame{width:100vw}.video-close{right:16px;top:16px}}
@media(prefers-reduced-motion:reduce) and (max-width:0px){html{scroll-behavior:auto}.project-image,.cap-icon,.site-header,.mobile-menu{transition:none!important}.reveal{will-change:auto}}

/* V1.5 · icon system + motion */
.hero-word-wrap{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}.hero-word{display:inline-block;will-change:transform,opacity}.section-head h2{will-change:clip-path,transform}.project-card{will-change:transform}.project-card .project-image{will-change:transform}.project-cursor{position:fixed;left:0;top:0;z-index:95;width:84px;height:84px;border-radius:50%;background:#fff;color:#050505;display:flex;align-items:center;justify-content:center;gap:5px;font-size:9px;font-weight:800;letter-spacing:.11em;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.55);mix-blend-mode:difference}.project-cursor b{font-size:12px;font-weight:400}.project-cursor.is-visible{opacity:1}
.cap-grid{overflow:hidden}.cap-grid .cap-card{padding:0;border-right:1px solid var(--line);min-height:380px;position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between}.cap-grid .cap-card+article{padding-left:0}.cap-grid .cap-card:last-child{border-right:0}.cap-fill{position:absolute;inset:0;background:#080808;transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease);z-index:-1}.cap-card:hover .cap-fill{transform:scaleY(1)}.cap-card{transition:color .45s var(--ease)}.cap-card:hover{color:#fff}.cap-top{display:flex;justify-content:space-between;align-items:flex-start;padding:30px 24px 0}.cap-copy{padding:0 24px 28px}.cap-icon{width:48px;height:48px;display:block;color:currentColor;transition:transform .55s var(--ease)}.cap-svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.cap-index{position:static;font-size:9px;color:#989892;padding-top:4px;transition:color .35s}.cap-card:hover .cap-index{color:#8f8f8f}.cap-grid h3{font-size:20px;margin:0 0 24px}.cap-grid p{font-size:12px;line-height:1.62;color:#333;margin:0;transition:color .35s}.cap-card:hover p{color:#cfcfcf}.cap-card:hover .cap-icon{transform:rotate(-7deg) scale(1.12)}.cap-card:nth-child(2):hover .cap-icon{transform:rotate(10deg) scale(1.12)}.cap-card:nth-child(3):hover .cap-icon{transform:rotate(-12deg) scale(1.08)}.cap-card:nth-child(4):hover .cap-icon{transform:rotate(8deg) scale(1.12)}
.showreel-ring{will-change:transform}.logo-item,.demo-logos div{will-change:transform,opacity}.footer-top>a{will-change:transform}.manifesto-title{will-change:transform}.cap-card{will-change:transform,opacity}
@media(hover:none),(pointer:coarse){.project-cursor{display:none}.cap-card:hover .cap-fill{transform:scaleY(0)}.cap-card:hover{color:inherit}.cap-card:hover p{color:#333}.cap-card:hover .cap-icon{transform:none}}
@media(max-width:1000px){.cap-grid .cap-card{min-height:310px}.cap-grid .cap-card:nth-child(2){border-right:0}.cap-grid .cap-card:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:620px){.cap-grid .cap-card,.cap-grid .cap-card+article{min-height:auto;padding:0;border-right:0;border-bottom:1px solid var(--line)}.cap-top{padding:24px 0 0}.cap-copy{padding:42px 0 26px}.cap-icon{width:44px;height:44px}.cap-grid h3{font-size:20px;margin-bottom:18px}.project-cursor{display:none}}
@media(prefers-reduced-motion:reduce) and (max-width:0px){.project-cursor{display:none}.hero-word{transform:none!important;opacity:1!important}.cap-fill{transition:none}.cap-card{transform:none!important;opacity:1!important}}

/* V1.6 · language switch */
.header-tools{display:flex;align-items:center;gap:22px}.lang-switch{display:flex;align-items:center;gap:8px;font-size:8px;font-weight:800;letter-spacing:.12em}.lang-switch a{opacity:.46;padding:8px 2px;position:relative;transition:opacity .25s}.lang-switch a:hover,.lang-switch a.active{opacity:1}.lang-switch a.active:after{content:"";position:absolute;left:2px;right:2px;bottom:3px;height:1px;background:currentColor}.mobile-lang{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #252525;margin-top:22px}.mobile-lang a{padding:15px 0;color:#666;font-size:9px;letter-spacing:.08em}.mobile-lang a.active{color:#fff}.mobile-menu .mobile-lang a:after{display:none}
@media(max-width:1000px){.header-tools{display:none}}

/* V1.6.1 · Salta pride statement */
.pride{position:relative;overflow:hidden;background:#064b2f;color:#fff;min-height:clamp(360px,48vw,650px);padding:clamp(54px,7vw,110px) var(--pad);display:flex;flex-direction:column;justify-content:center;isolation:isolate}.pride:before{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at 78% 36%,rgba(255,255,255,.08),transparent 34%),linear-gradient(115deg,transparent 30%,rgba(255,255,255,.035) 50%,transparent 68%);transform:rotate(-4deg);z-index:-2}.pride-noise{position:absolute;inset:0;opacity:.09;pointer-events:none;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}.pride-eyebrow{font-size:9px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;opacity:.68;margin-bottom:clamp(30px,4vw,62px)}.pride-line{display:flex;align-items:center;justify-content:flex-start;gap:.18em;flex-wrap:wrap;font-size:clamp(48px,5.15vw,98px);line-height:.93;letter-spacing:-.055em;font-weight:300}.pride-prefix,.pride-suffix{display:inline-block}.pride-heart{display:inline-grid;place-items:center;color:#ee4146;font-size:1.02em;line-height:.8;transform-origin:50% 62%;filter:drop-shadow(0 10px 24px rgba(0,0,0,.12))}.pride-stamp{position:absolute;right:var(--pad);bottom:32px;font-size:8px;letter-spacing:.16em;opacity:.52}.pride+footer{border-top:0}
@media(max-width:900px){.pride{min-height:480px}.pride-line{font-size:clamp(48px,9vw,78px);max-width:900px}.pride-stamp{left:var(--pad);right:auto}}
@media(max-width:620px){.pride{min-height:520px;padding-top:74px;padding-bottom:74px}.pride-line{font-size:clamp(48px,15vw,72px);gap:.12em;line-height:.9}.pride-heart{font-size:.96em}.pride-eyebrow{margin-bottom:38px}.pride-stamp{bottom:25px}}
@media(prefers-reduced-motion:reduce) and (max-width:0px){.pride-heart{animation:none!important}}

/* V1.7 · portfolio premium + navegación de proyectos */
.project-card{transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.project-card:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,0);z-index:3;pointer-events:none;transition:border-color .4s ease,inset .5s var(--ease)}
.project-card:hover:after{inset:8px;border-color:rgba(255,255,255,.42)}
.project-frame{position:absolute;left:19px;right:19px;bottom:13px;height:1px;background:rgba(255,255,255,.28);z-index:2;transform-origin:left center;transform:scaleX(.22);transition:transform .55s var(--ease),background .35s}
.project-card:hover .project-frame{transform:scaleX(1);background:rgba(255,255,255,.72)}
.project-meta{transition:transform .55s var(--ease)}
.project-card:hover .project-meta{transform:translateY(-11px)}
.project-meta h3{transition:letter-spacing .55s var(--ease)}
.project-card:hover .project-meta h3{letter-spacing:-.052em}
.project-view{display:block;margin-top:10px;font-size:7px;font-weight:800;letter-spacing:.13em;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .45s var(--ease)}
.project-card:hover .project-view{opacity:.8;transform:none}
.project-number{transition:opacity .35s,transform .45s var(--ease)}
.project-card:hover .project-number{opacity:.65;transform:translateX(4px)}

.modal-bar{gap:24px}
.modal-bar-left{display:flex;align-items:center;gap:16px;min-width:0}.modal-bar-left>span,.modal-bar-left>b,.modal-close,.modal-nav{font-size:8px;letter-spacing:.14em}.modal-bar-left>b{font-weight:400;color:#888;white-space:nowrap}.modal-actions{display:flex;align-items:center;gap:4px}.modal-nav{border:0;background:transparent;color:#111;padding:12px 10px;cursor:pointer;display:flex;align-items:center;gap:7px;transition:background .2s}.modal-nav:hover{background:#e7e7e2}.modal-close{margin-left:6px;padding:12px 0 12px 14px}.modal-project-footer{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:4px}.modal-project-footer button{appearance:none;border:0;background:#ecece7;color:#111;text-align:left;padding:28px clamp(24px,3.3vw,58px) 34px;cursor:pointer;min-height:132px;transition:background .25s,color .25s}.modal-project-footer button+button{border-left:1px solid var(--line);text-align:right}.modal-project-footer button:hover{background:#0b0b0b;color:#fff}.modal-project-footer small{display:block;font-size:7px;letter-spacing:.14em;margin-bottom:12px;opacity:.55}.modal-project-footer strong{display:block;font-size:clamp(22px,2.3vw,40px);line-height:.9;letter-spacing:-.055em;text-transform:uppercase}.modal-gallery img{background:#e4e4df}

@media(max-width:1000px){.project-view{display:none}.modal-nav span{display:none}.modal-nav{font-size:14px;padding:8px 11px}.modal-close{margin-left:0}}
@media(max-width:620px){.project-card:hover:after{inset:0;border-color:transparent}.project-frame{left:18px;right:18px}.modal-bar{padding:0 16px}.modal-bar-left>span{display:none}.modal-bar-left{gap:0}.modal-actions{gap:0}.modal-nav{padding:10px 12px}.modal-project-footer{grid-template-columns:1fr}.modal-project-footer button+button{border-left:0;border-top:1px solid var(--line);text-align:left}.modal-project-footer button{min-height:102px;padding:22px}.modal-project-footer strong{font-size:28px}}

/* V1.7.1 · friendlier desktop portfolio modal + Salta signature */
@media(min-width:1001px){
  .modal-panel{
    top:26px;bottom:26px;left:0;right:0;inset:auto 0;
    width:calc(100vw - 76px);max-width:1540px;margin:0 auto;
    border-radius:3px;box-shadow:0 30px 100px rgba(0,0,0,.38);
  }
  .modal-bar{height:54px;padding:0 30px}
  .modal-header{
    width:min(1320px,calc(100% - 72px));margin:0 auto;
    padding:25px 0 23px;
    grid-template-columns:.62fr .95fr 1.35fr;column-gap:46px;
  }
  .modal-header>span{padding-top:5px}
  .modal-header h2{font-size:clamp(38px,3.45vw,62px);line-height:.82}
  .modal-header p{font-size:11px;line-height:1.45;margin-top:1px;max-width:520px}
  .modal-gallery{
    width:min(1380px,calc(100% - 48px));margin:0 auto;
    padding:16px 0 34px;gap:12px;
  }
  .modal-gallery img{border-radius:2px}
  .modal-project-footer{width:min(1320px,calc(100% - 72px));margin:8px auto 0}
  .modal-project-footer button{min-height:112px;padding:24px 28px 28px}
  .modal-project-footer strong{font-size:clamp(20px,1.9vw,32px)}
}

/* The Salta statement is now a quiet HTML signature in the footer. */
.pride{
  position:relative;background:transparent;color:#fff;min-height:0;
  padding:30px 0 0;margin-top:38px;border-top:1px solid #292929;
  display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:26px;
  overflow:visible;isolation:auto;
}
.pride:before,.pride-noise{display:none!important}
.pride-eyebrow{font-size:7px;letter-spacing:.16em;opacity:.48;margin:0 0 5px;text-transform:uppercase;white-space:nowrap}
.pride-line{display:flex;align-items:center;gap:.14em;flex-wrap:wrap;font-size:clamp(22px,2.2vw,36px);line-height:1;letter-spacing:-.045em;font-weight:300}
.pride-heart{color:#ee4146;font-size:1em;line-height:.82;filter:none}
.pride-stamp{position:static;font-size:7px;letter-spacing:.16em;opacity:.38;white-space:nowrap;padding-bottom:3px}
.pride+footer{border-top:0}
@media(max-width:1000px){
  .pride{grid-template-columns:1fr auto;align-items:end}
  .pride-eyebrow{grid-column:1/-1}
  .pride-line{font-size:clamp(24px,4vw,34px)}
}
@media(max-width:620px){
  .pride{display:block;margin-top:34px;padding-top:24px}
  .pride-eyebrow{display:block;margin-bottom:12px}
  .pride-line{font-size:28px;line-height:1.05}
  .pride-stamp{display:block;margin-top:18px}
}

/* V1.7.2 · desktop portfolio workspace + discreet Salta signature */
@media(min-width:1001px){
  .modal-panel{
    top:4.5vh;bottom:4.5vh;left:3vw;right:3vw;inset:auto;
    width:auto;max-width:1480px;height:91vh;margin:0 auto;
    transform:translateY(38px) scale(.985);
    overflow:hidden;border-radius:4px;
    display:grid;grid-template-rows:52px minmax(0,1fr);
    background:#f2f2ee;
  }
  .modal-bar{position:relative;top:auto;height:52px;padding:0 24px;background:#f2f2ee}
  .modal-workspace{min-height:0;display:grid;grid-template-columns:minmax(260px,22%) minmax(0,1fr);border-top:1px solid var(--line)}
  .modal-header{
    width:auto;margin:0;padding:30px 26px 24px;
    display:flex;flex-direction:column;justify-content:space-between;gap:28px;
    border:0;border-right:1px solid var(--line);min-height:0;overflow:auto;
  }
  .modal-info-main{display:block}
  .modal-header #modalCategory{display:block;font-size:7px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.45;margin-bottom:22px;opacity:.68}
  .modal-header h2{font-size:clamp(34px,3vw,54px);line-height:.83;letter-spacing:-.065em;margin:0 0 22px;text-transform:uppercase;overflow-wrap:anywhere}
  .modal-header p{font-size:11px;line-height:1.5;margin:0;max-width:31em;color:#31312e}
  .modal-info-nav{margin-top:auto;border-top:1px solid var(--line)}
  .modal-info-nav button{width:100%;appearance:none;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;color:#111;padding:15px 0;cursor:pointer;transition:opacity .2s,transform .2s}
  .modal-info-nav button:hover{opacity:.55;transform:translateX(3px)}
  .modal-info-nav small{display:block;font-size:6px;letter-spacing:.14em;text-transform:uppercase;opacity:.5;margin-bottom:7px}
  .modal-info-nav strong{display:block;font-size:16px;line-height:.95;letter-spacing:-.035em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .modal-media{min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:#e7e7e2;scrollbar-gutter:stable}
  .modal-gallery{width:auto;margin:0;padding:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
  .modal-gallery img{width:100%;height:auto;max-height:72vh;object-fit:contain;background:#d9d9d4;border-radius:2px;grid-column:span 1}
  .modal-gallery img:first-child{grid-column:1/-1;max-height:76vh}
  .modal-gallery img:nth-child(4n){grid-column:1/-1}
  .modal-empty{grid-column:1/-1;min-height:70vh}
  .modal-project-footer{display:none!important}
}

/* Salta is a signature, not a headline. */
.pride{padding-top:22px;margin-top:28px;gap:18px;grid-template-columns:auto 1fr auto}
.pride-eyebrow{font-size:6px;margin-bottom:2px;opacity:.34}
.pride-line{font-size:clamp(15px,1.15vw,20px);letter-spacing:-.035em;font-weight:400;gap:.12em}
.pride-heart{font-size:.96em}
.pride-stamp{font-size:6px;opacity:.28}
@media(max-width:1000px){.pride-line{font-size:18px}}
@media(max-width:620px){.pride{margin-top:26px;padding-top:20px}.pride-line{font-size:18px}.pride-eyebrow{margin-bottom:8px}.pride-stamp{margin-top:12px}}

/* New modal markup fallback for tablet/mobile. */
@media(max-width:1000px){
  .modal-workspace{display:block}
  .modal-header{display:block}
  .modal-info-main{display:block}
  .modal-header #modalCategory{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.12em;line-height:1.5;margin:0 0 18px}
  .modal-info-nav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:26px}
  .modal-info-nav button{appearance:none;border:0;background:#ecece7;color:#111;text-align:left;padding:18px;cursor:pointer}
  .modal-info-nav button+button{border-left:1px solid var(--line);text-align:right}
  .modal-info-nav small{display:block;font-size:6px;letter-spacing:.14em;margin-bottom:7px;opacity:.55}
  .modal-info-nav strong{display:block;font-size:20px;line-height:.95;text-transform:uppercase;letter-spacing:-.04em}
  .modal-media{overflow:visible}
}
@media(max-width:620px){
  .modal-info-nav{grid-template-columns:1fr}
  .modal-info-nav button+button{border-left:0;border-top:1px solid var(--line);text-align:left}
  .modal-info-nav strong{font-size:24px}
}

/* V1.7.3 · truly centered floating portfolio modal */
@media(min-width:1001px){
  .modal{
    display:grid;
    place-items:center;
    padding:36px;
  }
  .modal-panel{
    position:relative;
    top:auto;right:auto;bottom:auto;left:auto;inset:auto;
    width:min(1540px,calc(100vw - 72px));
    height:min(920px,calc(100vh - 72px));
    max-width:none;
    max-height:none;
    margin:0;
    z-index:2;
    box-shadow:0 28px 80px rgba(0,0,0,.34);
    border:1px solid rgba(255,255,255,.08);
    border-radius:5px;
  }
  .modal-backdrop{z-index:1}
  .modal-close{
    margin-left:10px;
    padding:10px 14px;
    background:#0b0b0b;
    color:#fff;
    border:1px solid #0b0b0b;
    border-radius:2px;
    font-weight:700;
    transition:background .2s,color .2s,border-color .2s,transform .2s;
  }
  .modal-close:hover{
    background:#fff;
    color:#0b0b0b;
    border-color:#0b0b0b;
    transform:translateY(-1px);
  }
}

/* V1.8 · Art Direction & Motion */
.hero:before,.hero:after{content:"";position:absolute;z-index:1;pointer-events:none}.hero:before{left:var(--pad);right:var(--pad);top:84px;height:1px;background:rgba(255,255,255,.16);transform-origin:left;opacity:.7}.hero:after{right:var(--pad);top:84px;bottom:0;width:1px;background:linear-gradient(to bottom,rgba(255,255,255,.16),rgba(255,255,255,0) 82%)}
.hero-scan{position:absolute;z-index:1;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(to bottom,transparent 7%,rgba(255,255,255,.22) 32%,rgba(255,255,255,.04) 66%,transparent 92%);opacity:.55;pointer-events:none;transform:translateX(-50%)}
.hero-copy{z-index:3}.hero h1{position:relative}.hero-word-wrap{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.05em .025em .08em;margin:-.05em -.025em -.08em}.hero-word{display:inline-block;will-change:transform}.hero-eyebrow{display:flex;align-items:center;gap:12px}.hero-eyebrow:before{content:"";width:38px;height:1px;background:currentColor;opacity:.7}.hero-bottom{position:relative}.hero-bottom:before{content:"";position:absolute;left:0;right:0;top:-22px;height:1px;background:rgba(255,255,255,.18);transform-origin:left}

.work{overflow:hidden}.project-card:after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,0);z-index:2;pointer-events:none;transition:inset .55s var(--ease),border-color .35s}.project-card:hover:after{inset:13px;border-color:rgba(255,255,255,.28)}.project-image{filter:saturate(.94) contrast(1.01)}.project-card:hover .project-image{filter:saturate(1.08) contrast(1.05)}.project-meta{transition:transform .55s var(--ease)}.project-card:hover .project-meta{transform:translateY(-8px)}.project-open{font-size:16px;line-height:1}.project-card:hover .project-open{transform:translate(-2px,2px);opacity:1}

.manifesto{position:relative;overflow:hidden;min-height:520px}.manifesto:before{content:"HOW WE WORK";position:absolute;right:var(--pad);top:45%;font-size:clamp(72px,12vw,190px);font-weight:900;letter-spacing:-.075em;color:rgba(0,0,0,.026);white-space:nowrap;pointer-events:none}.manifesto-title{position:relative;z-index:1}.manifesto-line-wrap{display:block;overflow:hidden;padding:.035em 0}.manifesto-line{display:block;will-change:transform}.manifesto-copy{position:relative;z-index:1}.manifesto-copy:before{content:"";display:block;width:56px;height:1px;background:#111;margin-bottom:26px}

.cap-grid .cap-card:after{content:"↗";position:absolute;right:24px;bottom:24px;font-size:18px;opacity:0;transform:translate(-10px,10px);transition:opacity .35s,transform .5s var(--ease);z-index:2}.cap-card:hover:after{opacity:1;transform:none}.cap-card:before{content:"";position:absolute;left:0;top:0;width:0;height:2px;background:currentColor;opacity:.8;transition:width .65s var(--ease);z-index:2}.cap-card:hover:before{width:100%}.cap-copy h3{transition:transform .5s var(--ease),letter-spacing .5s var(--ease)}.cap-card:hover .cap-copy h3{transform:translateY(-3px);letter-spacing:.01em}.cap-card:hover .cap-copy p{transform:translateY(-2px)}.cap-copy p{transition:color .35s,transform .5s var(--ease)}

.showreel{position:relative}.showreel:after{content:"SHOWREEL";position:absolute;left:calc(32% + 2.5vw);bottom:-.16em;color:rgba(255,255,255,.055);font-weight:900;font-size:clamp(90px,14vw,240px);line-height:.7;letter-spacing:-.075em;pointer-events:none;z-index:1}.showreel-copy,.showreel-art{z-index:2}.showreel-launch{cursor:none}.showreel-ring{transition:width .55s var(--ease),height .55s var(--ease),background .35s,border-color .35s,transform .35s}.showreel-launch:hover .showreel-ring{width:118px;height:118px;background:#fff;color:#000;border-color:#fff}.showreel-ring b,.showreel-ring small{transition:transform .45s var(--ease)}.showreel-launch:hover .showreel-ring b{transform:translateX(2px) scale(1.08)}.showreel-launch:hover .showreel-ring small{transform:translateY(2px)}

.tech{position:relative;overflow:hidden;background:#e9e9e4;padding-top:110px;padding-bottom:110px}.tech-gridlines{position:absolute;inset:0;pointer-events:none;opacity:.38;background-image:linear-gradient(rgba(0,0,0,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.055) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,transparent 0,#000 48%,#000 100%)}.tech-copy,.tech-items{position:relative;z-index:1}.tech-copy h2{max-width:660px}.tech-copy p{font-size:14px}.tech-items{background:#0a0a0a;border-color:#1d1d1d;box-shadow:0 24px 60px rgba(0,0,0,.13);overflow:hidden}.tech-items:before{content:"";position:absolute;left:0;right:0;top:-40%;height:45%;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.09),transparent);transform:skewY(-8deg);pointer-events:none}.tech-items span{position:relative;background:#0b0b0b;color:#fff;min-height:178px;border-color:#1d1d1d;overflow:hidden}.tech-items span:before{content:attr(data-tech);position:absolute;top:13px;left:14px;font-size:7px;letter-spacing:.14em;color:#656565}.tech-items span:after{content:"";position:absolute;width:56px;height:56px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-22px;bottom:-22px;transition:transform .7s var(--ease),border-color .5s}.tech-items span:hover{background:#fff;color:#080808}.tech-items span:hover:after{transform:scale(2.8);border-color:rgba(0,0,0,.12)}.tech-items i{font-style:normal;font-size:34px;transition:transform .55s var(--ease)}.tech-items span:hover i{transform:translateY(-5px) rotate(-4deg) scale(1.08)}.tech-items b{position:relative;z-index:1}.tech .text-link.dark{position:relative}.tech .text-link.dark:after{content:"";position:absolute;left:0;bottom:-7px;width:100%;height:1px;background:#111;transform-origin:left;transform:scaleX(.18);transition:transform .45s var(--ease)}.tech .text-link.dark:hover:after{transform:scaleX(1)}

.clients{overflow:hidden}.client-marquee{margin:0 calc(var(--pad) * -1) 36px;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);height:72px;display:flex;align-items:center}.client-marquee-track{display:flex;align-items:center;flex:none;width:max-content;will-change:transform;animation:brandaMarquee 34s linear infinite}.client-marquee span{font-size:clamp(24px,2.6vw,43px);font-weight:800;letter-spacing:-.045em;white-space:nowrap;margin:0 28px}.client-marquee b{font-size:11px;font-weight:400;opacity:.32}.client-marquee:hover .client-marquee-track{animation-play-state:paused}@keyframes brandaMarquee{to{transform:translateX(-50%)}}
.logo-item,.demo-logos div{position:relative;overflow:hidden}.logo-item:before,.demo-logos div:before{content:"";position:absolute;inset:0;background:#0a0a0a;transform:translateY(101%);transition:transform .5s var(--ease)}.logo-item:hover:before,.demo-logos div:hover:before{transform:none}.logo-item img,.demo-logos div{position:relative;z-index:1}.logo-item:hover img{filter:grayscale(1) invert(1);opacity:1;transform:scale(1.05)}.demo-logos div{transition:color .35s}.demo-logos div:hover{color:#fff}

.about{position:relative}.stat strong{transition:transform .45s var(--ease),letter-spacing .45s var(--ease)}.stat:hover strong{transform:translateY(-4px);letter-spacing:-.05em}.stat:after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:#fff;transition:width .55s var(--ease)}.stat:hover:after{width:100%}
.footer-top>a{position:relative}.footer-top>a:before{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:.06em;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .65s var(--ease)}.footer-top>a:hover:before{transform:scaleX(1);transform-origin:left}.pride{opacity:.8}.pride:hover{opacity:1}

@media(max-width:1000px){.hero:after,.hero-scan{display:none}.manifesto{min-height:0}.manifesto:before{font-size:120px;right:-15vw}.showreel:after{display:none}.tech{padding-top:82px;padding-bottom:82px}.tech-gridlines{opacity:.22}.client-marquee{height:60px;margin-bottom:28px}.client-marquee span{font-size:28px;margin:0 20px}}
@media(max-width:620px){.hero:before{left:22px;right:22px;top:70px}.hero-bottom:before{top:-18px}.project-card:after{display:none}.manifesto:before{display:none}.cap-grid .cap-card:after{display:none}.showreel-launch{cursor:pointer}.tech{padding-top:68px;padding-bottom:68px}.tech-items span{min-height:138px}.client-marquee{height:52px;margin-left:-22px;margin-right:-22px}.client-marquee span{font-size:23px;margin:0 16px}.logo-item:hover img{filter:grayscale(1);transform:none}.logo-item:before,.demo-logos div:before{display:none}}
@media(prefers-reduced-motion:reduce) and (max-width:0px){.client-marquee-track{animation:none}.hero-scan{display:none}.tech-items:before{display:none}}

/* V1.9 · Media / teaser / mixed galleries */
.project-card{isolation:isolate}.project-teaser{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .35s ease;pointer-events:none}.project-card.teaser-playing .project-teaser{opacity:1}.project-card.teaser-playing .project-image{opacity:0}.project-overlay,.project-frame,.project-number,.project-meta,.project-open{z-index:3}.project-image{transition:opacity .3s ease,filter .45s,transform .6s var(--ease)}
.modal-gallery video{display:block;width:100%;height:auto;background:#090909;border:0;outline:0;grid-column:1/-1;max-height:78vh;object-fit:contain}
@media(min-width:1001px){.modal-gallery video{border-radius:2px}.modal-gallery video+img{margin-top:0}}
@media(max-width:1000px){.modal-gallery video{width:100%;max-height:none}}

/* V1.9.1 — showreel poster robusto + Journal */
.showreel-poster-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;transform:scale(1.02);transition:transform 1.1s var(--ease),filter .8s var(--ease)}
.showreel-launch:hover .showreel-poster-media{transform:scale(1.065);filter:saturate(1.06) contrast(1.04)}
.showreel-art.has-poster:before{display:none!important}
.journal-home{background:#f4f1ea}.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.journal-card{display:flex;flex-direction:column;background:#f4f1ea;color:#050505;text-decoration:none;min-width:0;transition:background .35s,color .35s}.journal-cover{aspect-ratio:4/3;overflow:hidden;background:#ddd}.journal-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s}.journal-meta{padding:24px;display:flex;flex-direction:column;flex:1}.journal-meta>span{font-size:8px;letter-spacing:.16em;font-weight:700;opacity:.58}.journal-meta h3{font-size:clamp(28px,2.6vw,46px);line-height:.92;letter-spacing:-.055em;margin:30px 0 15px}.journal-meta p{font-size:12px;line-height:1.55;max-width:42ch;opacity:.7;margin:0 0 30px}.journal-meta b{font-size:8px;letter-spacing:.14em;margin-top:auto}.journal-card:hover{background:#050505;color:#fff}.journal-card:hover .journal-cover img{transform:scale(1.045);filter:contrast(1.05)}.journal-all{margin-top:28px;display:inline-flex}

/* Blog público */
.blog-page{background:#f4f1ea;color:#050505;min-height:100vh}.blog-shell{padding:140px var(--pad) 90px}.blog-hero{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px;align-items:end;padding-bottom:46px;border-bottom:1px solid var(--line)}.blog-hero h1{font-size:clamp(70px,10vw,170px);line-height:.75;letter-spacing:-.075em;margin:18px 0 0}.blog-hero p{font-size:12px;line-height:1.6;opacity:.65}.blog-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:48px}.blog-list .journal-card{background:#f4f1ea}.blog-empty{padding:100px 0;font-size:28px;letter-spacing:-.03em}.blog-site-footer{padding:36px var(--pad);background:#050505;color:#fff;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.12em}.blog-site-footer a{color:#fff;text-decoration:none}
.article-page{background:#f4f1ea;color:#050505}.article-shell{padding:130px var(--pad) 110px}.article-head{max-width:1320px;margin:0 auto}.article-kicker{display:flex;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:.15em;font-weight:700;border-bottom:1px solid var(--line);padding-bottom:18px}.article-head h1{font-size:clamp(64px,9vw,150px);line-height:.78;letter-spacing:-.07em;margin:44px 0 30px;max-width:13ch}.article-lead{font-size:clamp(18px,2vw,30px);line-height:1.25;max-width:34ch;margin:0 0 55px}.article-cover{max-width:1500px;margin:0 auto 70px;overflow:hidden;background:#ddd}.article-cover img{width:100%;height:auto;max-height:82vh;object-fit:cover;display:block}.article-body{max-width:820px;margin:0 auto;font-size:18px;line-height:1.72}.article-body h2{font-size:clamp(38px,5vw,72px);line-height:.9;letter-spacing:-.05em;margin:75px 0 28px}.article-body h3{font-size:32px;line-height:1;margin:55px 0 22px;letter-spacing:-.035em}.article-body p{margin:0 0 28px}.article-body blockquote{font-size:30px;line-height:1.2;letter-spacing:-.03em;margin:60px -8vw;padding-left:28px;border-left:3px solid #050505}.article-body figure{margin:55px -10vw}.article-body figure img{max-width:100%;height:auto;display:block;margin:auto}.article-body figcaption{font-size:10px;opacity:.55;margin-top:10px}.article-body a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}.article-body ul,.article-body ol{padding-left:1.2em;margin:0 0 28px}.article-back{max-width:820px;margin:70px auto 0;border-top:1px solid var(--line);padding-top:30px}.article-back a{color:#050505;text-decoration:none;font-size:9px;font-weight:700;letter-spacing:.14em}
@media(max-width:1000px){.journal-grid,.blog-list{grid-template-columns:repeat(2,1fr)}.blog-hero{grid-template-columns:1fr}.article-body figure{margin-left:0;margin-right:0}.article-body blockquote{margin-left:0;margin-right:0}}
@media(max-width:620px){.journal-grid,.blog-list{grid-template-columns:1fr}.blog-shell,.article-shell{padding-top:105px}.blog-hero h1{font-size:70px}.article-head h1{font-size:58px}.article-kicker{display:block}.article-kicker span{display:block;margin-top:8px}.article-lead{font-size:19px}.article-body{font-size:16px}.article-body h2{font-size:43px}.article-body blockquote{font-size:24px}.blog-site-footer{display:block}.blog-site-footer a{display:block;margin-top:15px}}

/* V1.11 · visual stabilization / responsive / accessibility */
html{scroll-padding-top:84px}body{text-rendering:optimizeLegibility}section[id],footer[id]{scroll-margin-top:84px}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:2px solid currentColor;outline-offset:4px}
button{touch-action:manipulation}

/* Real media elements: keep focal points, GIF animation and native lazy-loading. */
.hero-poster-media{display:block;object-fit:cover;object-position:center}
.project-cover-media{display:block;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;background:#111}

/* Journal/article header must remain legible over the light editorial canvas. */
.site-header.is-solid{color:#070707;background:rgba(244,241,234,.94);border-color:rgba(7,7,7,.13);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.site-header.is-solid .header-cta:hover{background:#070707;color:#fff;border-color:#070707}
.site-header.is-solid .desktop-nav a[aria-current="page"]:after{transform:scaleX(1);transform-origin:left}
.journal-header .brand{color:#070707}
.blog-shell{max-width:1920px;margin-inline:auto}

/* Client logos: preserve artwork instead of forcing every mark to white. */
.logo-item:before,.demo-logos div:before{background:#e7e7e1}
.logo-item:hover img{filter:grayscale(0);opacity:1;transform:scale(1.035)}
.demo-logos div:hover{color:#070707}
.logo-item img{transform-origin:center}

/* Avoid pure-white hover flashes in dark technology tiles. */
.tech-items span:hover{background:#f0f0eb;color:#080808}

/* Statistics animate locally, not against the whole section. */
.stat{position:relative;overflow:hidden}
.stat:after{left:0;right:auto;bottom:0;background:rgba(255,255,255,.7)}

/* The Salta line is already intentionally discreet; don't fade the whole component. */
.pride,.pride:hover{opacity:1}

/* Better keyboard states inside project workspace. */
.modal-close:focus-visible,.modal-nav:focus-visible,.modal-info-nav button:focus-visible{outline-color:#111;outline-offset:-3px}
.video-close:focus-visible{outline-color:#fff}
.project-card:focus-visible{outline:2px solid #111;outline-offset:4px}

/* Mid-size screens should never squeeze portfolio cards into four tiny columns. */
@media(max-width:1100px) and (min-width:621px){
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .project-meta h3{font-size:clamp(34px,5vw,58px)}
}

@media(max-width:1000px){
  .journal-header .header-tools{display:flex;margin-left:auto}
  .journal-header .lang-switch{gap:10px}
}

@media(max-width:620px){
  html{scroll-padding-top:70px}section[id],footer[id]{scroll-margin-top:70px}
  .journal-header{height:70px;background:rgba(244,241,234,.97)}
  .journal-header .header-tools{display:flex;gap:0}
  .journal-header .lang-switch{font-size:8px;gap:7px}
  .journal-header .lang-switch a{padding:8px 1px}
  .project-meta h3{font-size:clamp(38px,12vw,50px)}
  .project-meta{left:18px;right:18px;bottom:17px}
  .project-number{left:18px}
  .journal-meta{padding:21px}
  .journal-meta h3{margin-top:24px}
}

/* Touch devices should not get stuck in desktop-only inverted hover states. */
@media(hover:none),(pointer:coarse){
  .logo-item:before,.demo-logos div:before{display:none}
  .logo-item:hover img{filter:grayscale(1);transform:none}
  .demo-logos div:hover{color:inherit}
  .journal-card:hover{background:#f4f1ea;color:#050505}
  .journal-card:hover .journal-cover img{transform:none;filter:none}
  .tech-items span:hover{background:#0b0b0b;color:#fff}
  .outline-btn:hover{background:transparent;color:#fff;border-color:#777}
}

@media(prefers-reduced-motion:reduce) and (max-width:0px){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.blog-dev-note{margin-top:36px;padding:14px 16px;border:1px solid var(--line);font-size:8px;letter-spacing:.12em;color:#777;background:#eceae4}

/* V1.12 · HOME ART DIRECTION — cinematic editorial hero */
.hero{--hero-x:72%;--hero-y:38%;isolation:isolate}
.hero-media{z-index:0;transform-origin:center center}.hero-media video,.hero-poster-media{filter:saturate(.94) contrast(1.035)}
.hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.76) 0,rgba(0,0,0,.3) 42%,rgba(0,0,0,.08) 72%,rgba(0,0,0,.2)),linear-gradient(0deg,rgba(0,0,0,.56) 0,rgba(0,0,0,.08) 48%,rgba(0,0,0,.18) 100%)}
.hero-atmosphere{position:absolute;z-index:1;inset:-8%;pointer-events:none;background:radial-gradient(circle at var(--hero-x) var(--hero-y),rgba(255,255,255,.13) 0,rgba(255,255,255,.05) 11%,transparent 34%);mix-blend-mode:soft-light;opacity:.85;transition:opacity .45s}
.hero-grid-overlay{position:absolute;z-index:1;inset:84px var(--pad) 0;pointer-events:none;opacity:.22;background-image:linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:25% 100%;mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 82%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 82%)}
.hero-signature{position:absolute;z-index:1;left:calc(var(--pad) * .45);bottom:-.105em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.085);font-size:clamp(170px,24vw,430px);font-weight:900;line-height:.65;letter-spacing:-.085em;white-space:nowrap;pointer-events:none;user-select:none;transform:translateZ(0)}
.hero-frame{position:absolute;z-index:2;inset:104px calc(var(--pad) + 4px) 27px;pointer-events:none}.hero-frame i{position:absolute;width:26px;height:26px;opacity:.48}.hero-frame i:nth-child(1){left:0;top:0;border-left:1px solid #fff;border-top:1px solid #fff}.hero-frame i:nth-child(2){right:0;top:0;border-right:1px solid #fff;border-top:1px solid #fff}.hero-frame i:nth-child(3){right:0;bottom:0;border-right:1px solid #fff;border-bottom:1px solid #fff}.hero-frame i:nth-child(4){left:0;bottom:0;border-left:1px solid #fff;border-bottom:1px solid #fff}
.hero-index{position:absolute;z-index:3;right:calc(var(--pad) + 21px);top:119px;display:flex;align-items:flex-end;gap:19px;color:#fff;text-align:right}.hero-index span{font-size:7px;letter-spacing:.17em;color:rgba(255,255,255,.57)}.hero-index b{font-size:7px;letter-spacing:.13em;font-weight:700}
.hero-copy{max-width:1380px}.hero h1{text-shadow:0 16px 50px rgba(0,0,0,.12)}.hero-eyebrow{color:rgba(255,255,255,.76)}.hero-bottom{max-width:1080px}.hero-bottom p{color:rgba(255,255,255,.84)}
.hero-progress{position:absolute;z-index:3;left:calc(var(--pad) + 4px);bottom:27px;width:108px;height:1px;background:rgba(255,255,255,.24);overflow:hidden;pointer-events:none}.hero-progress i{display:block;width:36%;height:100%;background:#fff;transform-origin:left;animation:heroProgress 2.8s var(--ease) infinite}@keyframes heroProgress{0%{transform:translateX(-105%)}70%,100%{transform:translateX(285%)}}
.hero:after{right:calc(var(--pad) + 4px);top:104px;bottom:27px}
.hero:before{left:calc(var(--pad) + 4px);right:calc(var(--pad) + 4px);top:104px}
.hero-scan{top:84px;bottom:27px;opacity:.4}
@media(max-width:1000px){.hero-grid-overlay{background-size:50% 100%}.hero-index{right:calc(var(--pad) + 18px)}.hero-signature{font-size:31vw;left:2vw;bottom:-.08em}.hero-frame{right:calc(var(--pad) + 2px);left:calc(var(--pad) + 2px)}}
@media(max-width:620px){.hero{--hero-x:60%;--hero-y:32%}.hero-grid-overlay{inset:70px 22px 0;opacity:.14;background-size:50% 100%}.hero-signature{font-size:36vw;left:-2vw;bottom:.02em;-webkit-text-stroke-color:rgba(255,255,255,.055)}.hero-frame{inset:88px 22px 15px}.hero-frame i{width:17px;height:17px}.hero-index{display:none}.hero-progress{left:22px;bottom:15px;width:72px}.hero:before{left:22px;right:22px;top:88px}.hero:after{display:none}.hero-copy{bottom:9.2%}.hero-atmosphere{opacity:.55}.hero-media video,.hero-poster-media{filter:saturate(.96) contrast(1.02)}}
@media(hover:none),(pointer:coarse){.hero-atmosphere{background:radial-gradient(circle at 62% 34%,rgba(255,255,255,.1),transparent 34%)}}
@media(prefers-reduced-motion:reduce) and (max-width:0px){.hero-progress i{animation:none;transform:none;width:100%}.hero-atmosphere{transition:none}}

/* V1.12 · Hero-to-work signal rail */
.home-signal{height:46px;background:#090909;color:#fff;border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:minmax(230px,22vw) 1fr;align-items:center;overflow:hidden;position:relative;z-index:5}
.home-signal-label{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--pad);padding-right:24px;border-right:1px solid #292929;white-space:nowrap}
.home-signal-label span,.home-signal-label b,.home-signal-track span{font-size:7px;letter-spacing:.15em;font-weight:700}.home-signal-label b{color:#777;font-weight:500}
.home-signal-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.home-signal-track{display:flex;align-items:center;gap:34px;width:max-content;padding-left:34px;animation:brandaSignal 24s linear infinite}.home-signal-track span{color:#bdbdb8}.home-signal-track i{font-style:normal;font-size:7px;color:#5f5f5b}
@keyframes brandaSignal{to{transform:translateX(-50%)}}
.work{position:relative}.work:before{content:"SELECTED / WORK";position:absolute;right:var(--pad);top:26px;font-size:7px;letter-spacing:.16em;color:#aaa;pointer-events:none}
@media(max-width:760px){.home-signal{grid-template-columns:1fr;height:40px}.home-signal-label{display:none}.home-signal-track{gap:26px;padding-left:26px}.work:before{display:none}}
@media(prefers-reduced-motion:reduce) and (max-width:0px){.home-signal-track{animation:none}}

/* V1.13 · MICRO ART DIRECTION — every surface is intentional */
::selection{background:#0a0a0a;color:#fff}
.site-header{will-change:background-color,transform}.site-header .brand{transition:opacity .3s var(--ease),transform .45s var(--ease)}.site-header.scrolled .brand{transform:translateY(-1px)}
.header-progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:transparent;overflow:hidden;pointer-events:none}.header-progress i{display:block;width:100%;height:100%;background:#fff;transform:scaleX(0);transform-origin:left center;will-change:transform}.site-header:not(.scrolled) .header-progress i{opacity:.68}
.desktop-nav a{transition:opacity .28s}.desktop-nav a.is-active:after{transform:scaleX(1);transform-origin:left}.desktop-nav.has-active a:not(.is-active){opacity:.48}.desktop-nav.has-active a:not(.is-active):hover{opacity:1}

/* Section rhythm / editorial indexing */
.section{padding-top:clamp(96px,7.7vw,142px);padding-bottom:clamp(96px,7.7vw,142px)}
.section-head{position:relative;border-top:1px solid var(--line);padding-top:22px;margin-bottom:clamp(42px,4.4vw,72px)}.section-head:before{content:attr(data-index);position:absolute;left:0;top:24px;font-size:7px;font-weight:800;letter-spacing:.16em;color:#9b9b95}.section-head>div{padding-left:42px}.section-head h2{font-size:clamp(38px,4.7vw,76px);max-width:11ch}.section-head>span{padding-bottom:3px}
.eyebrow{color:#767670}

/* Portfolio: subtle light field, stronger hierarchy, no gimmicks */
.project-card{--project-x:50%;--project-y:50%;background:#080808;transform:translateZ(0)}
.project-glow{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--project-x) var(--project-y),rgba(255,255,255,.18),rgba(255,255,255,.035) 24%,transparent 50%);mix-blend-mode:soft-light;transition:opacity .45s ease}.project-card:hover .project-glow{opacity:.75}
.project-overlay{background:linear-gradient(180deg,rgba(0,0,0,.14),transparent 30%),linear-gradient(0deg,rgba(0,0,0,.86) 0,rgba(0,0,0,.2) 48%,transparent 70%)}
.project-meta{bottom:21px}.project-meta h3{font-weight:700;text-wrap:balance}.project-meta p{text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.72);max-width:250px}.project-number{font-weight:800;color:rgba(255,255,255,.72)}.project-open{width:30px;height:30px;border:1px solid rgba(255,255,255,.36);border-radius:50%;display:grid;place-items:center;font-size:13px;right:16px;top:15px}.project-card:hover .project-open{background:#fff;color:#050505;border-color:#fff;transform:none}.project-view{position:relative;width:max-content;padding-top:11px;margin-top:13px}.project-view:before{content:"";position:absolute;left:0;top:0;width:34px;height:1px;background:rgba(255,255,255,.56);transition:width .5s var(--ease)}.project-card:hover .project-view:before{width:100%}
.project-cursor{width:90px;height:90px;border:1px solid rgba(255,255,255,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* Manifesto: a deliberate pause after the portfolio */
.manifesto{padding-top:clamp(120px,10vw,190px);padding-bottom:clamp(120px,10vw,190px);border-top:1px solid var(--line);min-height:clamp(560px,55vw,820px);background-image:linear-gradient(90deg,transparent calc(50% - .5px),rgba(0,0,0,.035) 50%,transparent calc(50% + .5px))}.manifesto:after{content:attr(data-index) " / BRANDA";position:absolute;left:var(--pad);top:38px;font-size:7px;font-weight:800;letter-spacing:.16em;color:#9b9b95}.manifesto h2{max-width:10ch}.manifesto-copy{font-size:clamp(16px,1.2vw,19px);line-height:1.42}.manifesto-copy strong{display:inline-flex;align-items:center;gap:11px}.manifesto-copy strong:before{content:"";width:20px;height:1px;background:currentColor}

/* Capabilities: information first, oversized number only as a hover trace */
.cap-card{background:transparent}.cap-watermark{position:absolute;right:-.04em;bottom:-.16em;font-size:clamp(120px,11vw,190px);font-weight:900;line-height:.7;letter-spacing:-.08em;color:currentColor;opacity:0;transform:translate(10%,12%);pointer-events:none;transition:opacity .45s,transform .7s var(--ease);z-index:-1}.cap-card:hover .cap-watermark{opacity:.055;transform:translate(0,0)}.cap-fill{background:#070707}.cap-grid .cap-card{min-height:410px}.cap-copy h3{font-size:22px}.cap-copy p{max-width:28ch}.cap-top{padding-top:34px}.cap-copy{padding-bottom:34px}

/* Showreel: framed like a piece of work, not a generic video block */
.showreel{min-height:clamp(580px,47vw,760px);grid-template-columns:minmax(330px,31%) 1fr}.showreel-copy{padding-top:clamp(70px,7vw,110px);padding-bottom:clamp(70px,7vw,110px);display:flex;flex-direction:column;align-items:flex-start}.showreel:before{content:attr(data-index);position:absolute;z-index:4;top:26px;left:var(--pad);font-size:7px;font-weight:800;letter-spacing:.16em;color:#5f5f5f;pointer-events:none}.showreel-copy:after{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;background:#202020}.showreel h2{margin-top:auto}.showreel .outline-btn{margin-top:6px}.showreel-art{min-height:580px}.showreel-art:after{content:"";position:absolute;z-index:3;inset:18px;border:1px solid rgba(255,255,255,.2);pointer-events:none;transition:inset .7s var(--ease),border-color .4s}.showreel-launch:hover:after{inset:23px;border-color:rgba(255,255,255,.48)}.showreel-corner{right:31px;bottom:29px}.showreel-ring{box-shadow:0 12px 40px rgba(0,0,0,.18)}

/* Technology and clients: a little more architectural */
.tech{padding-top:clamp(100px,8vw,150px);padding-bottom:clamp(100px,8vw,150px)}.tech[data-index]:after{content:attr(data-index);position:absolute;left:var(--pad);top:34px;font-size:7px;font-weight:800;letter-spacing:.16em;color:#969690}.tech-copy h2{font-size:clamp(48px,5.7vw,92px)}.tech-items span{min-height:190px}.tech-items b{text-transform:uppercase;letter-spacing:.1em;font-size:8px}
.clients .section-head{margin-bottom:0}.client-marquee{height:84px;margin-top:34px;margin-bottom:40px}.client-marquee span{font-size:clamp(28px,3vw,50px)}.logo-grid{grid-template-columns:repeat(6,1fr)}.logo-item,.demo-logos div{height:132px;padding:28px}.logo-item img{max-height:54px;opacity:.72;transition:filter .4s,opacity .35s,transform .55s var(--ease)}.logo-item:hover img{transform:scale(1.055);opacity:1}

/* Journal: restrained interaction; typography and image do the work */
.journal-grid{background:#cbc9c2}.journal-card{position:relative;background:#f4f1ea;color:#050505;transition:background .45s var(--ease)}.journal-card[data-issue]:after{content:attr(data-issue);position:absolute;right:14px;top:14px;z-index:2;display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:rgba(10,10,10,.82);color:#fff;font-size:7px;font-weight:800;letter-spacing:.08em;backdrop-filter:blur(5px)}.journal-meta h3{transition:transform .5s var(--ease),letter-spacing .5s var(--ease)}.journal-meta b{display:flex;align-items:center;gap:12px}.journal-meta b:before{content:"";width:24px;height:1px;background:currentColor;transition:width .5s var(--ease)}.journal-card:hover{background:#ebe8e1;color:#050505}.journal-card:hover .journal-cover img{transform:scale(1.05);filter:saturate(1.04) contrast(1.025)}.journal-card:hover .journal-meta h3{transform:translateX(4px);letter-spacing:-.05em}.journal-card:hover .journal-meta b:before{width:42px}

/* Stats become a visual closing beat */
.about{padding-top:clamp(50px,5vw,84px);padding-bottom:clamp(50px,5vw,84px);position:relative}.about:before{content:attr(data-index);position:absolute;left:var(--pad);top:18px;font-size:7px;font-weight:800;letter-spacing:.16em;color:#555}.stat{min-height:118px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:16px;padding:10px 28px 4px 0}.stat strong{font-size:clamp(48px,4vw,72px);line-height:.72;font-weight:700}.stat span{font-size:8px;line-height:1.35;max-width:18ch}.stat:hover strong{transform:translateY(-6px)}

/* Footer: larger final gesture, quieter information underneath */
footer{position:relative;overflow:hidden;padding-bottom:50px}.footer-top{min-height:clamp(300px,32vw,470px);padding:72px 0;align-items:center;position:relative}.footer-top:after{content:"BRANDA";position:absolute;right:-.035em;bottom:-.12em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.045);font-size:clamp(140px,23vw,390px);font-weight:900;line-height:.67;letter-spacing:-.09em;pointer-events:none}.footer-top>span{align-self:flex-start;margin-top:4px;position:relative;z-index:1}.footer-top>a{font-size:clamp(78px,11.5vw,185px);position:relative;z-index:2;max-width:8ch}.footer-bottom{position:relative;z-index:2;padding-top:42px}.footer-contact a,.footer-links a{transition:opacity .25s,transform .35s var(--ease)}.footer-contact a:hover,.footer-links a:hover{opacity:.58;transform:translateX(3px)}.pride{position:relative;z-index:2}

@media(max-width:1200px){.logo-grid{grid-template-columns:repeat(4,1fr)}.section-head h2{font-size:clamp(38px,5.3vw,68px)}}
@media(max-width:1000px){.section{padding-top:92px;padding-bottom:92px}.section-head{padding-top:18px}.section-head:before{top:20px}.section-head>div{padding-left:34px}.manifesto{background-image:none;padding-top:110px;padding-bottom:110px}.manifesto:after{top:30px}.cap-grid .cap-card{min-height:330px}.showreel{grid-template-columns:1fr}.showreel-copy:after{display:none}.showreel h2{margin-top:70px}.showreel-art{min-height:480px}.tech[data-index]:after{top:24px}.logo-grid{grid-template-columns:repeat(4,1fr)}.stat strong{font-size:52px}.footer-top{min-height:340px}}
@media(max-width:620px){.section{padding-top:74px;padding-bottom:74px}.section-head{margin-bottom:36px;padding-top:16px}.section-head:before{top:18px}.section-head>div{padding-left:28px}.section-head h2{font-size:clamp(34px,12vw,52px)}.project-open{width:28px;height:28px}.project-glow{display:none}.manifesto{padding-top:92px;padding-bottom:92px;min-height:0}.manifesto:after{top:24px}.manifesto h2{font-size:clamp(49px,14vw,62px)}.cap-watermark{display:none}.cap-grid .cap-card{min-height:auto}.showreel:before{left:22px;top:20px}.showreel-copy{padding-top:70px;padding-bottom:64px}.showreel h2{margin-top:38px}.showreel-art{min-height:340px}.showreel-art:after{inset:10px}.tech[data-index]:after{left:22px;top:20px}.client-marquee{height:58px;margin-top:25px;margin-bottom:28px}.logo-grid{grid-template-columns:repeat(2,1fr)}.logo-item,.demo-logos div{height:104px;padding:21px}.journal-card[data-issue]:after{width:28px;height:28px;right:10px;top:10px}.about{padding-top:42px;padding-bottom:20px}.about:before{left:22px;top:14px}.stat{min-height:105px;padding:24px 8px 22px;justify-content:center}.stat strong{font-size:48px}.footer-top{min-height:280px;padding:54px 0;align-items:flex-start}.footer-top>span{margin:0}.footer-top>a{font-size:clamp(64px,19vw,86px);margin-top:46px}.footer-top:after{font-size:42vw}.footer-bottom{padding-top:34px}}
@media(hover:none),(pointer:coarse){.project-glow{display:none}.journal-card:hover{background:#f4f1ea}.journal-card:hover .journal-meta h3{transform:none;letter-spacing:-.055em}.showreel-art:after{inset:10px}}
@media(prefers-reduced-motion:reduce) and (max-width:0px){.header-progress i{transition:none}.cap-watermark{transition:none}.project-glow{display:none}}
@media(hover:none),(pointer:coarse){.project-card:hover .project-image{transform:none;filter:saturate(.94) contrast(1.01)}.project-card:hover .project-meta{transform:none}.project-card:hover .project-view{opacity:.8;transform:none}.logo-item:hover img{filter:grayscale(1);opacity:.78;transform:none}.journal-card:hover .journal-cover img{transform:none;filter:none}.journal-card:hover .journal-meta b:before{width:24px}.showreel-launch:hover:after{inset:10px;border-color:rgba(255,255,255,.2)}}

/* =========================================================
   V1.14 — HERO MOTION + VISUAL DENSITY
   ========================================================= */

/* Hero slider: one cinematic background, multiple editorial statements. */
.hero-copy{bottom:10%;max-width:1440px}
.hero-title-stage{display:grid;grid-template-columns:minmax(0,1fr);align-items:end;width:min(1120px,78vw);min-height:clamp(150px,18vw,292px);position:relative}
.hero-slide{grid-area:1/1;align-self:end;visibility:hidden;opacity:0;pointer-events:none}
.hero-slide.is-active{visibility:visible;opacity:1;pointer-events:auto}
.hero-slide h1{max-width:10.8ch;text-wrap:balance}
.hero-line{display:block;overflow:visible;line-height:inherit}
.hero-word-wrap{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.08em 0 .09em;margin:-.08em 0 -.09em}
.hero-word{display:inline-block;will-change:transform,opacity}
.hero-bottom{margin-top:clamp(32px,3.1vw,48px);padding-top:18px;position:relative}
.hero-bottom:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.12) 58%,transparent)}
.hero-index{align-items:center}.hero-index span{display:flex;align-items:center;gap:3px}.hero-index span b{font:inherit;color:#fff}.hero-index strong{font-size:7px;letter-spacing:.13em;font-weight:700}
.hero-slide-nav{position:absolute;z-index:5;left:calc(var(--pad) + 4px);bottom:26px;display:flex;gap:8px;align-items:flex-end}
.hero-slide-nav button{appearance:none;border:0;background:transparent;color:#fff;width:54px;height:27px;padding:0;position:relative;text-align:left;cursor:pointer;opacity:.48;transition:opacity .35s var(--ease),width .55s var(--ease)}
.hero-slide-nav button:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.28)}
.hero-slide-nav button span{display:block;font-size:7px;font-weight:800;letter-spacing:.14em;transform:translateY(-8px)}
.hero-slide-nav button i{position:absolute;z-index:1;left:0;right:0;bottom:0;height:1px;background:#fff;transform:scaleX(0);transform-origin:left center;will-change:transform}
.hero-slide-nav button.is-active{opacity:1;width:82px}
.hero-slide-nav button:hover{opacity:1}
.hero-side{bottom:38px}

/* Rhythm: keep the generous character, remove accidental dead zones. */
.section{padding-top:clamp(96px,7vw,132px);padding-bottom:clamp(96px,7vw,132px)}
.section-head{margin-bottom:clamp(38px,3.8vw,60px)}
.work{padding-top:clamp(102px,7vw,132px);padding-bottom:clamp(62px,4.8vw,88px)}
.manifesto{padding-top:clamp(96px,7vw,132px);padding-bottom:clamp(102px,7.8vw,142px);min-height:clamp(520px,48vw,720px)}
.capabilities{padding-top:clamp(96px,7vw,132px);padding-bottom:clamp(104px,7.8vw,146px)}
.tech{padding-top:clamp(104px,7.8vw,146px);padding-bottom:clamp(104px,7.8vw,146px)}
.clients{padding-top:clamp(104px,7.8vw,146px);padding-bottom:clamp(104px,7.8vw,146px)}
.journal-home{padding-top:clamp(104px,7.8vw,146px);padding-bottom:clamp(88px,6.5vw,122px)}

/* Capabilities: same line-art language, more presence and more authored geometry. */
.cap-grid .cap-card{min-height:430px}
.cap-top{padding:30px 26px 0}
.cap-copy{padding:0 26px 34px}
.cap-icon{position:relative;width:78px;height:78px;display:grid;place-items:center;transform-origin:center center}
.cap-icon:before{content:"";position:absolute;inset:0;border:1px solid currentColor;border-radius:50%;opacity:.2;transform:rotate(0deg) scale(.94);transition:transform .7s var(--ease),opacity .45s var(--ease)}
.cap-icon:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:currentColor;right:7px;top:17px;opacity:.72;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 10%,transparent)}
.cap-svg{width:60px;height:60px;stroke-width:1.45}
.cap-svg .cap-ghost{opacity:.26;stroke-dasharray:2 4}
.cap-svg .cap-dot{fill:currentColor;stroke:none}
.cap-card:hover .cap-icon:before{transform:rotate(46deg) scale(1);opacity:.52}
.cap-card:nth-child(2):hover .cap-icon:before{transform:rotate(-42deg) scale(1)}
.cap-card:nth-child(3):hover .cap-icon:before{transform:rotate(32deg) scale(1)}
.cap-card:nth-child(4):hover .cap-icon:before{transform:rotate(-54deg) scale(1)}
.cap-card:hover .cap-svg .cap-ghost{opacity:.42}
.cap-copy h3{font-size:24px;letter-spacing:-.035em}
.cap-copy p{font-size:12px;line-height:1.68}

/* Journal adapts to the amount of content instead of exposing empty grid cells. */
.journal-grid.journal-count-1{grid-template-columns:1fr;background:transparent;border-color:var(--line)}
.journal-grid.journal-count-1 .journal-card{display:grid;grid-template-columns:minmax(320px,38%) 1fr;min-height:440px}
.journal-grid.journal-count-1 .journal-cover{aspect-ratio:auto;min-height:440px}
.journal-grid.journal-count-1 .journal-meta{padding:clamp(38px,4vw,64px);justify-content:flex-end}
.journal-grid.journal-count-1 .journal-meta h3{font-size:clamp(46px,5.6vw,88px);max-width:12ch;margin-top:auto}
.journal-grid.journal-count-1 .journal-meta p{font-size:13px;max-width:52ch}
.journal-grid.journal-count-2{grid-template-columns:repeat(2,minmax(0,1fr));background:var(--line)}
.journal-grid.journal-count-2 .journal-meta h3{font-size:clamp(34px,3.5vw,58px)}

/* Social presence: graphic utility instead of footer text links. */
.footer-bottom{grid-template-columns:minmax(230px,1.15fr) minmax(180px,.75fr) minmax(390px,1.6fr) auto;align-items:end}
.footer-socials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;align-self:end}
.social-link{min-height:74px;border:1px solid #2b2b2b;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:12px;color:#fff;transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease)}
.social-link:hover{background:#fff;color:#070707;border-color:#fff;transform:translateY(-4px)}
.social-icon{width:32px;height:32px;display:grid;place-items:center}
.social-svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.social-svg .social-dot{fill:currentColor;stroke:none}
.social-copy{display:flex;flex-direction:column;min-width:0}
.social-copy small{font-size:6px;letter-spacing:.13em;opacity:.48;margin-bottom:5px}
.social-copy b{font-size:10px;letter-spacing:.01em;font-weight:700;white-space:nowrap}
.social-link>i{font-size:11px;font-style:normal;transition:transform .4s var(--ease)}
.social-link:hover>i{transform:translate(3px,-3px)}
.mobile-menu-meta{display:flex;flex-direction:column;gap:16px}
.mobile-socials{display:flex;gap:7px}
.mobile-socials a{width:44px;height:44px;border:1px solid #2c2c2c;display:grid;place-items:center;color:#fff;transition:background .3s,color .3s}
.mobile-socials .social-svg{width:23px;height:23px}
.mobile-socials a:hover{background:#fff;color:#070707}

@media(max-width:1200px){
  .hero-title-stage{width:min(980px,82vw)}
  .footer-bottom{grid-template-columns:1.3fr .8fr 1.8fr}.copyright{grid-column:1/-1}
  .social-link{grid-template-columns:32px 1fr;padding:11px}.social-link>i{display:none}.social-copy b{font-size:9px}
}
@media(max-width:1000px){
  .hero-copy{bottom:11%}.hero-title-stage{width:88vw;min-height:clamp(150px,25vw,250px)}
  .hero-slide-nav{left:calc(var(--pad) + 2px);bottom:25px}
  .work{padding-bottom:70px}.manifesto{padding-top:88px;padding-bottom:108px;min-height:0}
  .cap-grid .cap-card{min-height:350px}.cap-icon{width:68px;height:68px}.cap-svg{width:52px;height:52px}
  .journal-grid.journal-count-1 .journal-card{grid-template-columns:42% 1fr;min-height:380px}.journal-grid.journal-count-1 .journal-cover{min-height:380px}
  .footer-bottom{grid-template-columns:1fr 1fr}.footer-socials{grid-column:1/-1;grid-template-columns:repeat(3,1fr);margin-top:8px}.copyright{grid-column:1/-1}
}
@media(max-width:620px){
  .hero-copy{bottom:12.5%}.hero-title-stage{width:calc(100vw - 44px);min-height:clamp(178px,47vw,230px)}
  .hero-slide h1{font-size:clamp(52px,17.2vw,78px);line-height:.79;max-width:9.6ch}
  .hero-bottom{margin-top:25px;padding-top:15px}.hero-bottom:before{right:18%}
  .hero-slide-nav{left:22px;bottom:14px;gap:6px}.hero-slide-nav button{width:38px;height:22px}.hero-slide-nav button.is-active{width:58px}.hero-slide-nav button span{font-size:6px;transform:translateY(-7px)}
  .section{padding-top:78px;padding-bottom:78px}.work{padding-top:82px;padding-bottom:54px}.manifesto{padding-top:76px;padding-bottom:88px}.capabilities,.tech,.clients,.journal-home{padding-top:82px;padding-bottom:88px}
  .cap-icon{width:64px;height:64px}.cap-svg{width:49px;height:49px}.cap-icon:after{right:5px;top:14px}.cap-copy h3{font-size:22px}
  .journal-grid.journal-count-1 .journal-card{display:flex;min-height:0}.journal-grid.journal-count-1 .journal-cover{aspect-ratio:4/3;min-height:0}.journal-grid.journal-count-1 .journal-meta{padding:28px 22px}.journal-grid.journal-count-1 .journal-meta h3{font-size:clamp(36px,11vw,52px);margin:36px 0 16px}.journal-grid.journal-count-2{grid-template-columns:1fr}
  .footer-socials{grid-template-columns:1fr}.social-link{min-height:64px;grid-template-columns:38px 1fr auto}.social-link>i{display:block}.social-copy b{font-size:11px}
}
@media(hover:none),(pointer:coarse){
  .cap-icon:before{opacity:.3}.social-link:hover{background:transparent;color:#fff;transform:none;border-color:#2b2b2b}
}
@media(prefers-reduced-motion:reduce) and (max-width:0px){
  .hero-slide-nav button i{transition:none!important}.cap-icon:before{transition:none}.social-link{transition:none}
}

/* =========================================================
   V1.15 — ULTRA PREMIUM / KINETIC TYPE / CONTROLLED RHYTHM
   ========================================================= */

/* Home modules can be directed from CMS without rebuilding markup. */
#top{display:flex;flex-direction:column}
#top>.hero{order:0}
#top>.home-signal{order:1}
#top>[style*="--home-order"]{order:var(--home-order)}

/* Hero: phrase-based typography, motion masks and a less left-heavy desktop composition. */
.hero-copy{bottom:9.2%;max-width:none}
.hero-title-stage{width:min(1260px,84vw);min-height:clamp(170px,17vw,278px)}
.hero-slide h1{font-size:clamp(60px,8.35vw,138px);line-height:.79;letter-spacing:-.073em;max-width:15ch;text-wrap:balance}
.hero-phrase-wrap{display:block;width:max-content;max-width:100%;overflow:hidden;padding:.07em .02em .095em;margin:-.07em 0 -.095em}
.hero-phrase{display:block;white-space:nowrap;transform-origin:left center;will-change:transform,filter,opacity}
.hero-slide.is-active .hero-phrase,.hero-slide.is-active .hero-token{opacity:1}
.hero-token{display:inline-block}
.hero-slide[data-hero-slide="0"] .hero-phrase-wrap:nth-child(2){margin-left:clamp(34px,5.3vw,104px)}
.hero-slide[data-hero-slide="1"] .hero-phrase-wrap:nth-child(1){margin-left:clamp(18px,2.7vw,54px)}
.hero-slide[data-hero-slide="1"] .hero-phrase-wrap:nth-child(2){margin-left:clamp(64px,8.6vw,168px)}
.hero-slide[data-hero-slide="2"] .hero-phrase-wrap:nth-child(2){margin-left:clamp(44px,6.4vw,126px)}
.hero-title-stage:after{content:"";position:absolute;left:0;bottom:-20px;width:clamp(54px,6vw,100px);height:1px;background:rgba(255,255,255,.62);transform-origin:left}
.hero-bottom{max-width:1120px;margin-top:clamp(34px,3vw,46px)}
.hero-eyebrow{margin-bottom:18px}
.hero-slide-nav{bottom:23px}

/* Desktop headings: let language compose in meaningful 2–3 word groups instead of forced one-word stacks. */
@media(min-width:1001px){
  .section-head h2 br,.showreel h2 br,.tech-copy h2 br,.clients h2 br,.journal-home h2 br{display:none}
  .section-head h2{max-width:17ch;line-height:.87}
  .work .section-head h2{max-width:18ch}
  .manifesto{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:7vw;align-items:center}
  .manifesto h2{font-size:clamp(50px,6.25vw,100px);line-height:.82;max-width:15ch}
  .showreel h2{font-size:clamp(46px,5vw,82px);line-height:.8;max-width:8.8ch}
  .tech-copy h2{font-size:clamp(46px,5.05vw,82px);line-height:.82;max-width:10ch}
  .clients .section-head h2{max-width:14ch}
}

/* Rhythm: premium does not mean empty. These joins were visually too loose in V1.14. */
.work{padding-top:clamp(90px,6.3vw,116px);padding-bottom:clamp(46px,3.4vw,64px)}
.manifesto{padding-top:clamp(66px,5vw,92px);padding-bottom:clamp(72px,5.5vw,102px);min-height:auto}
.manifesto:before{top:48%;font-size:clamp(64px,9.5vw,152px);color:rgba(0,0,0,.021)}
.manifesto:after{top:24px}
.manifesto-copy{max-width:420px}
.capabilities{padding-top:clamp(72px,5.3vw,98px);padding-bottom:clamp(78px,5.7vw,106px)}
.cap-grid .cap-card{min-height:355px}
.cap-top{padding-top:26px}.cap-copy{padding-bottom:28px}
.tech{padding-top:clamp(84px,6.2vw,112px);padding-bottom:clamp(76px,5.5vw,100px)}
.clients{padding-top:clamp(68px,5vw,92px);padding-bottom:clamp(82px,6vw,112px)}
.clients .section-head{margin-bottom:0}
.journal-home{padding-top:clamp(86px,6.2vw,116px)}

/* Client names become a quiet, continuous editorial ticker rather than a second logo wall. */
.client-marquee{height:40px;margin-top:20px;margin-bottom:34px;border-color:color-mix(in srgb,var(--line) 82%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.client-marquee-track{animation-duration:var(--ticker-duration,78s);animation-timing-function:linear}
.client-marquee span{font-size:10px;font-weight:700;letter-spacing:.16em;line-height:1;text-transform:uppercase;white-space:nowrap;margin:0 18px;opacity:.58}
.client-marquee b{font-size:6px;font-weight:400;opacity:.22}
.logo-grid{gap:1px;background:var(--line)}
.logo-item,.demo-logos div{height:118px;background:var(--bg);border:0;padding:25px}
.logo-item img{max-height:48px}

/* More authored section heads: the side note is part of the composition, not just metadata. */
.section-head>span{max-width:24ch;text-align:right;line-height:1.45}
.section-head:after{content:"";position:absolute;left:42px;top:26px;width:18px;height:1px;background:#111;opacity:.7}

/* Social icons become smaller precision objects so the footer remains premium, not app-like. */
.social-link{min-height:66px;padding:10px 12px;border-color:#292929}
.social-icon{width:29px;height:29px}.social-svg{width:24px;height:24px;stroke-width:1.25}
.social-copy small{font-size:5.5px}.social-copy b{font-size:9px}

/* Tablet: retain phrase grouping but remove desktop indents that can create accidental overflow. */
@media(max-width:1000px){
  .hero-title-stage{width:90vw;min-height:clamp(170px,26vw,260px)}
  .hero-slide h1{font-size:clamp(58px,10.6vw,102px);max-width:12.5ch}
  .hero-phrase-wrap{margin-left:0!important}
  .work{padding-bottom:48px}.manifesto{padding-top:72px;padding-bottom:86px}.capabilities{padding-top:78px;padding-bottom:90px}.tech{padding-top:82px;padding-bottom:82px}.clients{padding-top:74px;padding-bottom:92px}
  .client-marquee{height:38px;margin-top:18px;margin-bottom:28px}.client-marquee span{font-size:9px;margin:0 15px}
}

/* Mobile can deliberately return to a more vertical word rhythm. */
@media(max-width:620px){
  .hero-copy{bottom:12%}.hero-title-stage{width:calc(100vw - 44px);min-height:clamp(196px,56vw,278px)}
  .hero-slide h1{font-size:clamp(50px,16vw,74px);line-height:.79;max-width:10ch}
  .hero-phrase-wrap{width:100%;overflow:visible;padding:0;margin:0!important}
  .hero-phrase{white-space:normal}
  .hero-token{display:block;width:max-content;max-width:100%;overflow:hidden;padding:.03em 0}
  .hero-title-stage:after{bottom:-14px;width:46px}
  .hero-bottom{margin-top:24px}
  .section-head:after{left:28px;top:20px;width:12px}
  .work{padding-top:72px;padding-bottom:40px}.manifesto{padding-top:62px;padding-bottom:72px}.capabilities{padding-top:68px;padding-bottom:76px}.tech{padding-top:72px;padding-bottom:70px}.clients{padding-top:66px;padding-bottom:78px}.journal-home{padding-top:72px}
  .client-marquee{height:34px;margin-top:16px;margin-bottom:24px}.client-marquee span{font-size:8px;letter-spacing:.14em;margin:0 12px}.client-marquee b{font-size:5px}
  .logo-item,.demo-logos div{height:96px;padding:20px}
}

@media(prefers-reduced-motion:reduce) and (max-width:0px){
  .hero-phrase{filter:none!important;transform:none!important}.client-marquee-track{animation:none!important}
}

/* V1.15.1 · final art-direction pass: less empty space, stronger asymmetry, robust motion fallback. */
.hero-token{will-change:transform,opacity}.hero-media>video,.hero-poster-media{will-change:transform}
@media(min-width:1001px){
  /* Alternate the editorial axis instead of making every section begin at the same x coordinate. */
  .capabilities .section-head>div{padding-left:clamp(92px,8.2vw,158px)}
  .capabilities .section-head:after{left:clamp(58px,5.2vw,100px)}
  .clients .section-head>div{padding-left:clamp(118px,10.2vw,196px)}
  .clients .section-head:after{left:clamp(78px,6.8vw,132px)}
  .journal-home .section-head>div{padding-left:clamp(74px,7vw,136px)}
  .journal-home .section-head:after{left:clamp(48px,4.8vw,92px)}
  .clients .section-head>span{margin-right:clamp(18px,3vw,58px)}
  .journal-home .section-head>span{margin-right:clamp(70px,8vw,150px)}
}
/* Tighten the joins that still read as blank bands in the full-page composition. */
.work{padding-bottom:clamp(36px,2.7vw,50px)}
.manifesto{padding-top:clamp(50px,3.7vw,68px);padding-bottom:clamp(48px,3.7vw,68px)}
.capabilities{padding-top:clamp(46px,3.5vw,64px);padding-bottom:clamp(64px,4.6vw,84px)}
.tech{padding-top:clamp(68px,5vw,92px);padding-bottom:clamp(44px,3.3vw,62px)}
.clients{padding-top:clamp(46px,3.4vw,64px);padding-bottom:clamp(68px,5vw,92px)}
.journal-home{padding-top:clamp(70px,5.1vw,94px)}
/* Category cards: line art stays elegant but gains the feel of a designed visual system. */
.cap-top{position:relative}
.cap-top:before{content:"+";position:absolute;left:clamp(108px,8.4vw,154px);top:30px;font-size:9px;font-weight:400;color:currentColor;opacity:.24;transform:rotate(45deg)}
.cap-top:after{content:"BRANDA / SYSTEM";position:absolute;right:26px;top:31px;font-size:5px;letter-spacing:.16em;color:currentColor;opacity:.22}
.cap-card:nth-child(2) .cap-top:after{content:"BRANDA / MOTION"}.cap-card:nth-child(3) .cap-top:after{content:"BRANDA / EXPERIENCE"}.cap-card:nth-child(4) .cap-top:after{content:"BRANDA / TECHNOLOGY"}
.cap-icon{background:radial-gradient(circle at center,transparent 48%,color-mix(in srgb,currentColor 5%,transparent) 49%,transparent 51%)}
.cap-icon:before{box-shadow:0 0 0 9px color-mix(in srgb,currentColor 2.5%,transparent)}
.cap-card:hover .cap-top:after{opacity:.5}.cap-top:after{transition:opacity .35s}
@media(max-width:1000px){.manifesto{padding-top:58px;padding-bottom:70px}.capabilities{padding-top:62px;padding-bottom:78px}.tech{padding-top:72px;padding-bottom:58px}.clients{padding-top:58px;padding-bottom:80px}.cap-top:after{display:none}}
@media(max-width:620px){.manifesto{padding-top:54px;padding-bottom:64px}.capabilities{padding-top:58px;padding-bottom:70px}.tech{padding-top:66px;padding-bottom:54px}.clients{padding-top:54px;padding-bottom:72px}.cap-top:before{display:none}}

/* =========================================================
   V1.16 — RESILIENT HERO MOTION
   Core slider runs independently from GSAP/CDN.
   ========================================================= */
.hero-slide.is-leaving{visibility:visible;opacity:1;pointer-events:none}
.hero-slide.is-active.is-settled .hero-phrase-wrap:nth-child(odd) .hero-phrase{animation:heroPhraseDriftA 5.8s ease-in-out infinite alternate}
.hero-slide.is-active.is-settled .hero-phrase-wrap:nth-child(even) .hero-phrase{animation:heroPhraseDriftB 6.6s ease-in-out infinite alternate}
.hero-atmosphere{animation:heroAtmosphereFloat 9s ease-in-out infinite alternate;will-change:transform,opacity}
@keyframes heroPhraseDriftA{0%{transform:translate3d(0,0,0) scaleX(1)}100%{transform:translate3d(8px,-1px,0) scaleX(1.006)}}
@keyframes heroPhraseDriftB{0%{transform:translate3d(0,0,0) scaleX(1)}100%{transform:translate3d(-7px,1px,0) scaleX(.996)}}
@keyframes heroAtmosphereFloat{0%{transform:translate3d(-.6%,0,0) scale(.99);opacity:.74}100%{transform:translate3d(.8%,-.35%,0) scale(1.015);opacity:.9}}
@media(max-width:620px){
  .hero-slide.is-active.is-settled .hero-phrase{animation-duration:7.5s}
}
@media(prefers-reduced-motion:reduce) and (max-width:0px){
  .hero-slide.is-active.is-settled .hero-phrase,.hero-atmosphere{animation:none!important}
}

/* =========================================================
   V1.17 — HERO SOURCE TEXT + VISIBILITY SAFETY
   Hidden slides retain their source copy; active slide can never render blank.
   ========================================================= */
.hero-slide.is-active h1{visibility:visible;opacity:1}
.hero-slide.is-active .hero-phrase-wrap{visibility:visible}
.hero-slide:not(.is-active):not(.is-leaving){visibility:hidden!important;opacity:0!important}

/* =========================================================
   V1.18 — NATIVE KINETIC MOTION SYSTEM
   Deterministic CSS keyframes: hero motion never depends on a CDN.
   ========================================================= */
.hero-copy[data-hero-slider]{
  --hero-in-x:0%;--hero-in-y:118%;--hero-in-skew:2.8deg;--hero-in-scale:.90;
  --hero-out-x:-2%;--hero-out-y:-105%;--hero-out-skew:-1.4deg;--hero-out-scale:1.025;
}
.hero-copy[data-hero-slider].motion-glide{
  --hero-in-x:15%;--hero-in-y:0%;--hero-in-skew:0deg;--hero-in-scale:.93;
  --hero-out-x:-11%;--hero-out-y:0%;--hero-out-skew:0deg;--hero-out-scale:1.035;
}
.hero-copy[data-hero-slider].motion-cascade{
  --hero-in-x:0%;--hero-in-y:-122%;--hero-in-skew:-1.8deg;--hero-in-scale:.965;
  --hero-out-x:0%;--hero-out-y:100%;--hero-out-skew:1deg;--hero-out-scale:.985;
}
.hero-slide.is-entering,.hero-slide.is-exiting{visibility:visible;opacity:1;pointer-events:none}
.hero-slide.is-entering .hero-phrase{
  animation:heroKineticIn 980ms cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(55ms + (var(--hero-line,0) * 105ms));
}
.hero-slide.is-entering .hero-token{
  animation:heroTokenIn 720ms cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(220ms + (var(--hero-line,0) * 90ms) + (var(--hero-word,0) * 26ms));
}
.hero-slide.is-exiting .hero-phrase{
  animation:heroKineticOut 420ms cubic-bezier(.55,.055,.675,.19) both;
  animation-delay:calc(var(--hero-line,0) * 26ms);
}
.hero-slide.is-settled .hero-phrase-wrap:nth-child(odd) .hero-phrase{animation:heroPremiumDriftA 6.8s ease-in-out infinite alternate}
.hero-slide.is-settled .hero-phrase-wrap:nth-child(even) .hero-phrase{animation:heroPremiumDriftB 7.6s ease-in-out infinite alternate}
@keyframes heroKineticIn{
  0%{transform:translate3d(var(--hero-in-x),var(--hero-in-y),0) skewY(var(--hero-in-skew)) scaleX(var(--hero-in-scale));filter:blur(14px);opacity:0}
  38%{opacity:1;filter:blur(5px)}
  72%{transform:translate3d(0,-2%,0) skewY(-.22deg) scaleX(1.012);filter:blur(0)}
  100%{transform:translate3d(0,0,0) skewY(0) scaleX(1);filter:blur(0);opacity:1}
}
@keyframes heroKineticOut{
  0%{transform:translate3d(0,0,0) skewY(0) scaleX(1);filter:blur(0);opacity:1}
  100%{transform:translate3d(var(--hero-out-x),var(--hero-out-y),0) skewY(var(--hero-out-skew)) scaleX(var(--hero-out-scale));filter:blur(11px);opacity:0}
}
@keyframes heroTokenIn{
  0%{transform:translate3d(18px,0,0);opacity:.2}
  55%{opacity:1}
  100%{transform:translate3d(0,0,0);opacity:1}
}
@keyframes heroPremiumDriftA{0%{transform:translate3d(0,0,0) scaleX(1)}100%{transform:translate3d(11px,-2px,0) scaleX(1.009)}}
@keyframes heroPremiumDriftB{0%{transform:translate3d(0,0,0) scaleX(1)}100%{transform:translate3d(-9px,2px,0) scaleX(.994)}}
/* V1.25.2 — Hero media stays optically locked.
   The video already contains camera motion; animating its container introduced a visible
   slow pan/zoom "wiggle" and sub-pixel resampling. Motion remains in typography/overlays. */
.hero[data-hero-current] .hero-media{animation:none;transform:none}
.hero-media video,.hero-poster-media{transform:none;scale:none;backface-visibility:hidden}

/* =========================================================
   V1.19 — KINETIC / SCROLL-DIRECTED ART DIRECTION
   ========================================================= */
.hero-phrase-wrap{overflow:clip;padding:.06em .05em .10em;margin:-.06em -.05em -.10em;transform:translateZ(0)}
.hero-phrase{transform-origin:0 85%;will-change:transform,filter,opacity}
.hero-token{display:inline-block;will-change:transform,opacity}
.hero-slide.is-entering .hero-phrase{animation:heroKineticIn 1120ms cubic-bezier(.12,.88,.18,1) both;animation-delay:calc(35ms + (var(--hero-line,0) * 145ms))}
.hero-slide.is-entering .hero-token{animation:heroTokenIn 840ms cubic-bezier(.16,1,.3,1) both;animation-delay:calc(230ms + (var(--hero-line,0) * 130ms) + (var(--hero-word,0) * 48ms))}
.hero-slide.is-exiting .hero-phrase{animation:heroKineticOut 520ms cubic-bezier(.7,0,.84,0) both;animation-delay:calc(var(--hero-line,0) * 34ms)}
@keyframes heroKineticIn{0%{transform:translate3d(-2%,128%,0) rotate(2.2deg) skewY(2deg) scaleX(.78);filter:blur(16px);opacity:0}24%{opacity:.7;filter:blur(9px)}62%{transform:translate3d(.7%,-9%,0) rotate(-.28deg) skewY(-.18deg) scaleX(1.045);filter:blur(1.5px);opacity:1}82%{transform:translate3d(0,2.2%,0) rotate(.08deg) scaleX(.992);filter:blur(0)}100%{transform:translate3d(0,0,0) rotate(0) skewY(0) scaleX(1);filter:blur(0);opacity:1}}
@keyframes heroKineticOut{0%{transform:translate3d(0,0,0) rotate(0) scaleX(1);filter:blur(0);opacity:1}38%{transform:translate3d(1%,-7%,0) scaleX(1.018);opacity:.92}100%{transform:translate3d(-4%,-126%,0) rotate(-1.4deg) scaleX(.9);filter:blur(14px);opacity:0}}
@keyframes heroTokenIn{0%{transform:translate3d(0,.34em,0);opacity:0}52%{opacity:1}100%{transform:translate3d(0,0,0);opacity:1}}
.hero-slide.is-settled .hero-phrase-wrap:nth-child(odd) .hero-phrase{animation:heroPremiumDriftA 5.4s ease-in-out infinite alternate}.hero-slide.is-settled .hero-phrase-wrap:nth-child(even) .hero-phrase{animation:heroPremiumDriftB 6.2s ease-in-out infinite alternate}
@keyframes heroPremiumDriftA{0%{transform:translate3d(0,0,0) scaleX(1)}100%{transform:translate3d(16px,-3px,0) scaleX(1.012)}}@keyframes heroPremiumDriftB{0%{transform:translate3d(0,0,0) scaleX(1)}100%{transform:translate3d(-13px,3px,0) scaleX(.991)}}
body:not(.blog-page):not(.article-page) .site-header{animation:brandaHeaderIn .82s cubic-bezier(.16,1,.3,1) both}body:not(.blog-page):not(.article-page) .hero-index{animation:brandaHeroMetaIn .9s .28s cubic-bezier(.16,1,.3,1) both}body:not(.blog-page):not(.article-page) .hero-bottom{animation:brandaHeroMetaIn .95s .52s cubic-bezier(.16,1,.3,1) both}body:not(.blog-page):not(.article-page) .hero-signature{animation:brandaHeroSignatureIn 1.35s .16s cubic-bezier(.16,1,.3,1) both}body:not(.blog-page):not(.article-page) .hero-frame i{animation:brandaFrameIn .75s cubic-bezier(.16,1,.3,1) both}body:not(.blog-page):not(.article-page) .hero-frame i:nth-child(1){animation-delay:.16s}body:not(.blog-page):not(.article-page) .hero-frame i:nth-child(2){animation-delay:.22s}body:not(.blog-page):not(.article-page) .hero-frame i:nth-child(3){animation-delay:.28s}body:not(.blog-page):not(.article-page) .hero-frame i:nth-child(4){animation-delay:.34s}
@keyframes brandaHeaderIn{from{opacity:0;translate:0 -24px}to{opacity:1;translate:0 0}}@keyframes brandaHeroMetaIn{from{opacity:0;translate:0 24px;filter:blur(5px)}to{opacity:1;translate:0 0;filter:blur(0)}}@keyframes brandaHeroSignatureIn{from{opacity:0;translate:-5vw 0;scale:.97 1}to{opacity:1;translate:0 0;scale:1}}@keyframes brandaFrameIn{from{opacity:0;scale:.45}to{opacity:1;scale:1}}



/* ================================================================
   BRANDA V1.24 — BIDIRECTIONAL PREMIUM MOTION
   One reversible scroll choreography. Elements re-arm after leaving the
   viewport and re-enter from the edge they actually come from.
   ================================================================ */
html.motion-full,html.motion-system{--motion-ease:cubic-bezier(.16,1,.3,1);--motion-exit:cubic-bezier(.55,.08,.68,.53)}
.motion-engine-ready .motion-node{will-change:transform,opacity,filter,clip-path;transform-origin:center center;transition:opacity .56s ease,transform .92s var(--motion-ease),filter .68s ease,clip-path .92s var(--motion-ease);transition-delay:var(--motion-delay,0ms)}
.motion-engine-ready .motion-node.is-inview{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1) rotate(0);clip-path:inset(0 0 0 0)}

/* Default entrance from below / re-entry while scrolling down. */
.motion-engine-ready .motion-node.motion-below:not(.is-inview){opacity:.10;filter:blur(3px);transform:translate3d(0,66px,0) scale(.978);clip-path:inset(0 0 32% 0)}
/* Reverse state: when the visitor scrolls back up, the same object reappears from above. */
.motion-engine-ready .motion-node.motion-above:not(.is-inview){opacity:.12;filter:blur(2px);transform:translate3d(0,-48px,0) scale(.985);clip-path:inset(28% 0 0 0)}

.motion-engine-ready [data-motion="head"].motion-below:not(.is-inview){transform:translate3d(-34px,48px,0);clip-path:inset(0 92% 0 0)}
.motion-engine-ready [data-motion="head"].motion-above:not(.is-inview){transform:translate3d(26px,-34px,0);clip-path:inset(0 0 0 82%)}

.motion-engine-ready [data-motion="project"]{transition-duration:.58s,.88s,.58s,.88s}
.motion-engine-ready [data-motion="project"].motion-below:not(.is-inview){transform:translate3d(0,82px,0) scale(.955);clip-path:inset(0 0 42% 0)}
.motion-engine-ready [data-motion="project"].motion-above:not(.is-inview){transform:translate3d(0,-62px,0) scale(.972);clip-path:inset(34% 0 0 0)}

.motion-engine-ready [data-motion="manifesto"].motion-below:not(.is-inview){transform:translate3d(-5vw,68px,0) rotate(1deg) scaleX(.94);clip-path:inset(0 0 58% 0)}
.motion-engine-ready [data-motion="manifesto"].motion-above:not(.is-inview){transform:translate3d(3.6vw,-52px,0) rotate(-.7deg) scaleX(.965);clip-path:inset(42% 0 0 0)}

.motion-engine-ready [data-motion="copy-right"].motion-below:not(.is-inview){transform:translate3d(66px,26px,0);clip-path:inset(0 0 36% 0)}
.motion-engine-ready [data-motion="copy-right"].motion-above:not(.is-inview){transform:translate3d(-44px,-24px,0);clip-path:inset(30% 0 0 0)}
.motion-engine-ready [data-motion="copy-left"].motion-below:not(.is-inview){transform:translate3d(-58px,32px,0);clip-path:inset(0 0 38% 0)}
.motion-engine-ready [data-motion="copy-left"].motion-above:not(.is-inview){transform:translate3d(42px,-26px,0);clip-path:inset(30% 0 0 0)}

.motion-engine-ready [data-motion="card"].motion-below:not(.is-inview){transform:translate3d(0,74px,0) rotate(.35deg) scale(.958);clip-path:inset(0 0 36% 0)}
.motion-engine-ready [data-motion="card"].motion-above:not(.is-inview){transform:translate3d(0,-54px,0) rotate(-.25deg) scale(.975);clip-path:inset(30% 0 0 0)}
.motion-engine-ready [data-motion="card"]:nth-child(even).motion-below:not(.is-inview){transform:translate3d(0,62px,0) rotate(-.35deg) scale(.964)}
.motion-engine-ready [data-motion="card"]:nth-child(even).motion-above:not(.is-inview){transform:translate3d(0,-46px,0) rotate(.25deg) scale(.979)}

.motion-engine-ready [data-motion="media"].motion-below:not(.is-inview){transform:translate3d(5vw,42px,0) scale(.972);clip-path:inset(0 0 0 48%)}
.motion-engine-ready [data-motion="media"].motion-above:not(.is-inview){transform:translate3d(-3vw,-32px,0) scale(.982);clip-path:inset(0 42% 0 0)}
.motion-engine-ready [data-motion="panel"].motion-below:not(.is-inview){transform:translate3d(5vw,36px,0) scale(.968);clip-path:inset(0 0 0 44%)}
.motion-engine-ready [data-motion="panel"].motion-above:not(.is-inview){transform:translate3d(-3.5vw,-28px,0) scale(.982);clip-path:inset(0 40% 0 0)}

.motion-engine-ready [data-motion="logo"]{transition-duration:.42s,.66s,.42s,.66s}
.motion-engine-ready [data-motion="logo"].motion-below:not(.is-inview){transform:translate3d(0,26px,0) scale(.89);filter:blur(3px)}
.motion-engine-ready [data-motion="logo"].motion-above:not(.is-inview){transform:translate3d(0,-22px,0) scale(.93);filter:blur(2px)}
.motion-engine-ready [data-motion="editorial"].motion-below:not(.is-inview){transform:translate3d(0,58px,0);clip-path:inset(0 0 42% 0)}
.motion-engine-ready [data-motion="editorial"].motion-above:not(.is-inview){transform:translate3d(0,-46px,0);clip-path:inset(34% 0 0 0)}
.motion-engine-ready [data-motion="stat"].motion-below:not(.is-inview){transform:translate3d(0,48px,0) scale(.88);filter:blur(3px)}
.motion-engine-ready [data-motion="stat"].motion-above:not(.is-inview){transform:translate3d(0,-34px,0) scale(.93);filter:blur(2px)}
.motion-engine-ready [data-motion="pride"].motion-below:not(.is-inview){transform:translate3d(0,38px,0) scale(.97);filter:blur(3px)}
.motion-engine-ready [data-motion="pride"].motion-above:not(.is-inview){transform:translate3d(0,-30px,0) scale(.982);filter:blur(2px)}
.motion-engine-ready [data-motion="footer"].motion-below:not(.is-inview){transform:translate3d(0,48px,0);clip-path:inset(0 0 40% 0)}
.motion-engine-ready [data-motion="footer"].motion-above:not(.is-inview){transform:translate3d(0,-36px,0);clip-path:inset(30% 0 0 0)}

/* Media depth is independent from hover scale: no transform collisions. */
.project-card .project-image{translate:0 var(--project-parallax,0px)}
.showreel-poster-media{translate:0 var(--showreel-parallax,0px);scale:1.045;transition:scale 1s var(--ease),filter .8s var(--ease)}
.showreel-launch:hover .showreel-poster-media{scale:1.075}
.hero-signature{translate:var(--hero-scroll-x,0px) 0}
.hero-grid-overlay{opacity:var(--hero-scroll-opacity,.12)}

/* Hero: intentionally obvious kinetic reveal. */
.hero-phrase-wrap{position:relative;overflow:hidden!important}
.hero-slide.is-entering .hero-phrase{animation:heroV120In 1.16s cubic-bezier(.12,.86,.18,1) both!important;animation-delay:calc(40ms + (var(--hero-line,0) * 145ms))!important}
.hero-slide.is-entering .hero-token{animation:heroV120Token .88s cubic-bezier(.16,1,.3,1) both!important;animation-delay:calc(250ms + (var(--hero-line,0) * 120ms) + (var(--hero-word,0) * 58ms))!important}
.hero-slide.is-exiting .hero-phrase{animation:heroV120Out .56s cubic-bezier(.7,0,.84,0) both!important;animation-delay:calc(var(--hero-line,0) * 34ms)!important}
.hero-slide.is-settled .hero-phrase-wrap:nth-child(odd) .hero-phrase{animation:heroV120DriftA 5.2s ease-in-out infinite alternate!important}
.hero-slide.is-settled .hero-phrase-wrap:nth-child(even) .hero-phrase{animation:heroV120DriftB 6.1s ease-in-out infinite alternate!important}
.hero-slide.is-entering .hero-phrase-wrap:after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:2px;background:rgba(255,255,255,.84);transform-origin:left center;animation:heroV120Line .92s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(120ms + (var(--hero-line,0) * 145ms));pointer-events:none}
@keyframes heroV120In{0%{transform:translate3d(-3%,132%,0) rotate(2.5deg) skewY(2deg) scaleX(.74);filter:blur(18px);opacity:0}28%{opacity:.72;filter:blur(9px)}64%{transform:translate3d(1.2%,-10%,0) rotate(-.3deg) scaleX(1.055);filter:blur(1px);opacity:1}84%{transform:translate3d(-.25%,2.2%,0) rotate(.08deg) scaleX(.992);filter:blur(0)}100%{transform:translate3d(0,0,0) rotate(0) skewY(0) scaleX(1);filter:blur(0);opacity:1}}
@keyframes heroV120Token{0%{transform:translate3d(0,.42em,0);opacity:0}54%{opacity:1}100%{transform:translate3d(0,0,0);opacity:1}}
@keyframes heroV120Out{0%{transform:translate3d(0,0,0) scaleX(1);filter:blur(0);opacity:1}35%{transform:translate3d(1%,-8%,0) scaleX(1.025);opacity:.95}100%{transform:translate3d(-5%,-134%,0) rotate(-1.5deg) scaleX(.88);filter:blur(16px);opacity:0}}
@keyframes heroV120Line{0%{transform:scaleX(0);opacity:0}28%{opacity:1}74%{transform:scaleX(1);opacity:.85}100%{transform:translateX(102%) scaleX(.1);opacity:0}}
@keyframes heroV120DriftA{from{transform:translate3d(0,0,0) scaleX(1)}to{transform:translate3d(18px,-4px,0) scaleX(1.014)}}
@keyframes heroV120DriftB{from{transform:translate3d(0,0,0) scaleX(1)}to{transform:translate3d(-14px,3px,0) scaleX(.99)}}

/* Explicit reduced mode. SYSTEM only applies it when the visitor requests it. */
html.motion-reduced .motion-node,html.motion-reduced .hero-phrase,html.motion-reduced .hero-token,html.motion-reduced .hero-media,html.motion-reduced .hero-signature,html.motion-reduced .client-marquee-track{animation:none!important;transition-duration:.18s!important;transform:none!important;translate:none!important;scale:none!important;filter:none!important;clip-path:none!important;opacity:1!important}
@media(prefers-reduced-motion:reduce){
 html.motion-system .motion-node,html.motion-system .hero-phrase,html.motion-system .hero-token,html.motion-system .hero-media,html.motion-system .hero-signature,html.motion-system .client-marquee-track{animation:none!important;transition-duration:.18s!important;transform:none!important;translate:none!important;scale:none!important;filter:none!important;clip-path:none!important;opacity:1!important}
}

@media(max-width:760px){
 .motion-engine-ready .motion-node.motion-below:not(.is-inview){transform:translate3d(0,38px,0) scale(.988);filter:blur(4px)}
 .motion-engine-ready .motion-node.motion-above:not(.is-inview){transform:translate3d(0,-30px,0) scale(.992);filter:blur(3px)}
 .motion-engine-ready [data-motion="head"].motion-below:not(.is-inview),.motion-engine-ready [data-motion="copy-left"].motion-below:not(.is-inview),.motion-engine-ready [data-motion="copy-right"].motion-below:not(.is-inview){transform:translate3d(0,38px,0)}
 .motion-engine-ready [data-motion="head"].motion-above:not(.is-inview),.motion-engine-ready [data-motion="copy-left"].motion-above:not(.is-inview),.motion-engine-ready [data-motion="copy-right"].motion-above:not(.is-inview){transform:translate3d(0,-30px,0)}
 .hero-slide.is-entering .hero-phrase{animation-duration:.92s!important}
 .hero-slide.is-entering .hero-phrase-wrap:after{height:1px}
}
@media(prefers-reduced-motion:reduce){
 html:not(.motion-full){scroll-behavior:auto}
 html:not(.motion-full) *,html:not(.motion-full) *:before,html:not(.motion-full) *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* ================================================================
   BRANDA V1.24 — PREMIUM COMPOSITION / FINAL HOME RHYTHM
   Deliberately compact joins, larger work, quieter metadata.
   ================================================================ */
:root{--section-head-gap:var(--title-gap)}
.section-head{margin-bottom:var(--section-head-gap)}
.section-head h2{font-size:clamp(38px,4.45vw,72px);line-height:.86;letter-spacing:-.058em}
.section-head>span{font-size:8px;letter-spacing:.15em;opacity:.78}
.eyebrow{margin-bottom:14px;letter-spacing:.18em}

/* Selected work must feel like work, not a thumbnail catalogue. */
.work{padding-top:clamp(76px,5.5vw,102px);padding-bottom:clamp(28px,2.2vw,42px)}
.project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.project-card{aspect-ratio:4/3;border-radius:0}
.project-meta{left:clamp(17px,1.4vw,24px);right:clamp(17px,1.4vw,24px);bottom:clamp(16px,1.35vw,23px)}
.project-meta h3{font-size:clamp(30px,3vw,52px);line-height:.82;margin-bottom:10px}
.project-meta p{font-size:8px;max-width:26ch;opacity:.9}
.project-view{margin-top:12px}
.project-card .project-overlay{background:linear-gradient(0deg,rgba(0,0,0,.76) 0,rgba(0,0,0,.16) 56%,rgba(0,0,0,.05) 100%)}
@media(hover:hover) and (pointer:fine){
 .project-card:hover .project-overlay{opacity:.78}
 .project-card:hover .project-meta{transform:translateY(-3px)}
 .project-meta{transition:transform .55s var(--ease)}
}

/* HOW WE WORK: a deliberate pause, not an empty band. */
.manifesto{padding-top:clamp(42px,3.15vw,58px);padding-bottom:clamp(50px,3.8vw,70px);gap:clamp(52px,6vw,108px);min-height:auto}
.manifesto:after{top:19px}
.manifesto h2{font-size:clamp(50px,6.1vw,98px);line-height:.82;max-width:14ch}
.manifesto-copy{max-width:390px;font-size:clamp(15px,1.12vw,18px);line-height:1.48}
.manifesto-copy:before{margin-bottom:20px}
.manifesto-copy p{margin-bottom:15px}

/* WHAT WE DO: denser cards, more visual confidence. */
.capabilities{padding-top:clamp(48px,3.55vw,66px);padding-bottom:clamp(58px,4.3vw,80px)}
.cap-grid .cap-card{min-height:clamp(300px,24vw,350px)}
.cap-top{padding:24px 23px 0}.cap-copy{padding:0 23px 25px}
.cap-icon{width:58px;height:58px}.cap-svg{width:46px;height:46px}
.cap-copy h3{font-size:clamp(20px,1.55vw,24px);margin-bottom:18px}
.cap-copy p{font-size:11.5px;line-height:1.58;max-width:30ch}

/* Showreel becomes a single strong audiovisual beat. */
.showreel{grid-template-columns:minmax(300px,30%) 1fr;min-height:clamp(520px,42vw,680px)}
.showreel-copy{padding-top:clamp(58px,5.1vw,84px);padding-bottom:clamp(58px,5.1vw,84px)}
.showreel h2{font-size:clamp(44px,4.8vw,78px);line-height:.82}
.showreel-art{min-height:clamp(520px,42vw,680px)}
.showreel-ring{width:94px;height:94px}
.showreel-launch:hover .showreel-ring{width:108px;height:108px}

/* Technology -> Brands had too much combined air. */
.tech{padding-top:clamp(66px,4.8vw,88px);padding-bottom:clamp(48px,3.5vw,66px)}
.tech-copy h2{font-size:clamp(46px,5.1vw,82px)}
.tech-items span{min-height:168px}
.clients{padding-top:clamp(46px,3.35vw,62px);padding-bottom:clamp(62px,4.6vw,86px)}
.clients .section-head{margin-bottom:20px}
.client-marquee{margin-top:12px;margin-bottom:28px;height:38px}
.logo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.logo-item,.demo-logos div{height:108px;padding:22px}
.logo-item img{max-height:44px;max-width:76%}

.journal-home{padding-top:clamp(64px,4.7vw,88px);padding-bottom:clamp(72px,5.4vw,98px)}
.journal-meta{padding:22px}
.journal-meta h3{margin-top:24px;font-size:clamp(28px,2.45vw,43px)}
.about{padding-top:clamp(44px,3.2vw,62px);padding-bottom:clamp(42px,3vw,58px)}
.stat{min-height:108px;gap:13px}

/* Motion exits are intentionally quieter than entrances. */
.motion-engine-ready .motion-node:not(.is-inview){transition-duration:.42s,.72s,.48s,.72s;transition-timing-function:ease,var(--motion-ease),ease,var(--motion-ease)}
.motion-engine-ready .motion-node.is-inview{transition-duration:.52s,.82s,.58s,.82s}

@media(max-width:1180px){
 .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .manifesto{grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:54px}
}
@media(max-width:1000px){
 .work{padding-top:72px;padding-bottom:34px}.manifesto{grid-template-columns:1fr;padding-top:50px;padding-bottom:62px;gap:38px}.manifesto-copy{margin-left:22%;max-width:520px}
 .capabilities{padding-top:54px;padding-bottom:68px}.cap-grid .cap-card{min-height:286px}
 .showreel{grid-template-columns:1fr}.showreel-copy{min-height:330px}.showreel h2{margin-top:46px}.showreel-art{min-height:430px}
 .tech{padding-top:68px;padding-bottom:52px}.clients{padding-top:52px;padding-bottom:72px}.journal-home{padding-top:66px;padding-bottom:82px}
}
@media(max-width:620px){
 .section-head{margin-bottom:28px}.section-head h2{font-size:clamp(34px,11.6vw,50px);line-height:.88}
 .work{padding-top:62px;padding-bottom:28px}.project-grid{grid-template-columns:1fr;gap:8px}.project-card{aspect-ratio:4/3}.project-meta h3{font-size:clamp(38px,12vw,52px)}
 .manifesto{padding-top:46px;padding-bottom:54px;gap:32px}.manifesto-copy{margin-left:0;font-size:15px}.manifesto h2{font-size:clamp(46px,13.6vw,60px)}
 .capabilities{padding-top:50px;padding-bottom:58px}.cap-grid .cap-card{min-height:auto}.cap-top{padding:21px 0 0}.cap-copy{padding:36px 0 23px}
 .showreel-copy{padding-top:58px;padding-bottom:52px;min-height:300px}.showreel h2{margin-top:30px}.showreel-art{min-height:330px}.showreel-ring{width:78px;height:78px}
 .tech{padding-top:58px;padding-bottom:48px}.tech-items span{min-height:128px}.clients{padding-top:48px;padding-bottom:64px}.client-marquee{margin-top:10px;margin-bottom:22px;height:34px}.logo-item,.demo-logos div{height:92px;padding:18px}
 .journal-home{padding-top:58px;padding-bottom:68px}.about{padding-top:36px;padding-bottom:18px}
}

/* ================================================================
   BRANDA V1.22 — TYPE SAFE AREAS / CURATED WORK / WORK ARCHIVE
   ================================================================ */
/* Motion masks may animate through a crop, but the resting state must never shave glyphs. */
.motion-engine-ready .motion-node.is-inview{clip-path:inset(-14px -20px -18px -20px)}
.motion-engine-ready [data-motion="project"].is-inview,.motion-engine-ready [data-motion="media"].is-inview,.motion-engine-ready [data-motion="panel"].is-inview{clip-path:inset(0)}
.hero-phrase-wrap{padding:.14em .09em .20em!important;margin:-.14em -.09em -.20em!important;overflow:hidden!important}
.hero-slide h1{line-height:.81}

/* Selected work closes as a curated chapter instead of an endless grid. */
.work-more{display:grid;grid-template-columns:1fr minmax(320px,58%);align-items:end;gap:30px;margin-top:clamp(28px,3.2vw,48px);padding-top:clamp(22px,2vw,32px);border-top:1px solid var(--line)}
.work-more>span{font-size:7px;font-weight:800;letter-spacing:.17em;color:var(--muted)}
.work-more>a{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;font-size:clamp(30px,4.15vw,68px);font-weight:700;line-height:.88;letter-spacing:-.06em;text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid #111;transition:padding-left .45s var(--ease)}
.work-more>a b{font-size:.42em;font-weight:400;line-height:1;transform:translateY(-.06em);transition:transform .4s var(--ease)}
@media(hover:hover) and (pointer:fine){.work-more>a:hover{padding-left:18px}.work-more>a:hover b{transform:translate(8px,-8px)}}

/* Footer wordmark CTA: the arrow belongs to the word, never on a second line. */
.footer-top>a{display:inline-flex;align-items:flex-start;gap:.13em;max-width:none;white-space:nowrap}
.footer-top>a>span{flex:0 0 auto;font-size:.28em;line-height:1;vertical-align:baseline;margin-top:.06em}
.footer-top:after{z-index:0}.footer-top>span,.footer-top>a{z-index:2}

/* Full portfolio archive. */
.work-page{background:var(--bg)}
.work-page .site-header[aria-hidden="true"]{pointer-events:none}
.work-archive-hero{position:relative;min-height:clamp(520px,64svh,760px);background:#080808;color:#fff;padding:clamp(150px,14vw,220px) var(--pad) clamp(62px,6vw,96px);display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.38fr);grid-template-rows:auto 1fr auto;column-gap:7vw;overflow:hidden;isolation:isolate}
.work-archive-hero:before{content:"";position:absolute;inset:84px var(--pad) 0;z-index:-1;opacity:.22;background-image:linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:25% 100%;mask-image:linear-gradient(to bottom,#000,transparent 90%);-webkit-mask-image:linear-gradient(to bottom,#000,transparent 90%)}
.work-archive-kicker{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.24);padding-top:12px;font-size:7px;letter-spacing:.17em;color:#aaa;font-weight:800}
.work-archive-title{align-self:end;position:relative;z-index:2;min-width:0}
.work-archive-title .eyebrow{color:#9c9c9c;margin-bottom:22px}
.work-archive-title h1{margin:0;font-size:clamp(94px,15.4vw,250px);line-height:.69;letter-spacing:-.085em;font-weight:700;white-space:nowrap}
.work-archive-hero>p{align-self:end;position:relative;z-index:2;max-width:430px;margin:0 0 .3em;font-size:clamp(15px,1.3vw,20px);line-height:1.48;color:#c8c8c8}
.work-archive-watermark{position:absolute;z-index:0;right:-.045em;bottom:-.14em;font-size:clamp(170px,28vw,470px);font-weight:900;line-height:.68;letter-spacing:-.09em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.06);pointer-events:none}
.work-archive-section{padding:clamp(58px,5vw,86px) var(--pad) clamp(90px,7vw,126px)}
.work-archive-index{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;margin-bottom:clamp(28px,2.8vw,44px);border-bottom:1px solid var(--line);font-size:7px;letter-spacing:.17em;color:var(--muted);font-weight:800}
.work-archive-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.work-archive-grid .project-card{aspect-ratio:4/3}
.work-site-footer{background:#080808;color:#fff;padding:clamp(38px,4vw,64px) var(--pad);display:flex;justify-content:space-between;gap:40px;align-items:flex-end}
.work-site-footer>div{display:flex;flex-direction:column;gap:8px}.work-site-footer strong{font-size:10px;letter-spacing:.12em}.work-site-footer>div span{font-size:7px;letter-spacing:.16em;color:#777}
.work-site-footer>a{display:inline-flex;align-items:flex-start;gap:.14em;font-size:clamp(46px,7vw,100px);font-weight:700;line-height:.78;letter-spacing:-.07em;white-space:nowrap}.work-site-footer>a b{font-size:.28em;font-weight:400;transform:translateY(.04em);transition:transform .35s var(--ease)}
@media(hover:hover) and (pointer:fine){.work-site-footer>a:hover b{transform:translate(7px,-7px)}}

@media(max-width:1000px){
 .work-more{grid-template-columns:1fr minmax(280px,70%)}
 .work-archive-hero{min-height:590px;grid-template-columns:1fr;padding-top:142px}.work-archive-title h1{font-size:clamp(100px,20vw,190px)}.work-archive-hero>p{max-width:520px;margin-top:42px}.work-archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
 .hero-phrase-wrap{padding:.10em .04em .16em!important;margin:-.10em -.04em -.16em!important}.hero-slide h1{line-height:.82}
 .work-more{grid-template-columns:1fr;gap:15px;margin-top:24px;padding-top:18px}.work-more>a{font-size:clamp(29px,9.8vw,42px);gap:18px}.work-more>a b{font-size:.52em}
 .footer-top>a{font-size:clamp(58px,17vw,78px);gap:.10em;margin-top:42px}.footer-top>a>span{font-size:.28em;margin-top:.08em}
 .work-archive-hero{min-height:520px;padding:124px 22px 54px;display:flex;flex-direction:column;justify-content:flex-end}.work-archive-hero:before{inset:70px 22px 0;background-size:50% 100%}.work-archive-kicker{position:absolute;left:22px;right:22px;top:102px}.work-archive-kicker b{display:none}.work-archive-title{width:100%}.work-archive-title .eyebrow{margin-bottom:18px}.work-archive-title h1{font-size:clamp(88px,29vw,128px);line-height:.72}.work-archive-hero>p{font-size:14px;line-height:1.5;margin-top:32px;max-width:30ch}.work-archive-watermark{font-size:58vw;bottom:-.08em}
 .work-archive-section{padding:48px 22px 78px}.work-archive-index{margin-bottom:24px}.work-archive-grid{grid-template-columns:1fr;gap:8px}
 .work-site-footer{display:block;padding:38px 22px}.work-site-footer>a{margin-top:46px;font-size:clamp(50px,16vw,72px)}
}


/* V1.23 · WORK CALM / RELIABLE ARCHIVE
   Work is an archive, not another hero sequence: static cards, no scroll choreography,
   no magnetic cursor/parallax, and a fast modal that prioritizes media loading. */
.work-page .work-archive-hero,
.work-page .work-archive-section,
.work-page .work-site-footer{transform:none;filter:none;clip-path:none}
.work-page .work-archive-grid .project-card{will-change:auto;transform:none!important;translate:none!important;transition:box-shadow .22s ease}
.work-page .work-archive-grid .project-card .project-image{translate:none!important;transition:filter .28s ease,transform .45s var(--ease),opacity .2s ease}
.work-page .project-cursor{display:none!important}
.work-page .project-card:hover{transform:none!important}
.work-page .project-card:hover .project-image{transform:scale(1.025)}
.work-page .project-card:hover .project-meta{transform:translateY(-2px)}
.work-page .project-card:hover:after{inset:9px}
.work-page .project-glow{display:none}

/* The archive modal is intentionally almost instant. No GSAP is required on Work. */
.work-page .modal-backdrop{backdrop-filter:none;background:rgba(0,0,0,.76);transition:opacity .14s ease}
.work-page .modal-panel{transition:opacity .14s ease,transform .14s ease}
.work-page .modal.open .modal-backdrop{opacity:1}
.work-page .modal.open .modal-panel{opacity:1;transform:none}
.work-page .modal-gallery{position:relative}
.work-page .modal-gallery[aria-busy="true"]{cursor:progress}
.work-page .modal-media-error{grid-column:1/-1;min-height:220px;display:grid;place-items:center;background:#d9d9d4;color:#5d5d58;font-size:8px;font-weight:800;letter-spacing:.14em;text-align:center;padding:24px}

@media(max-width:1000px){
  .work-page .work-archive-grid .project-card .project-image{transition:filter .2s ease,opacity .2s ease}
  .work-page .work-archive-grid .project-card:hover .project-image{transform:none}
}


/* ================================================================
   BRANDA V1.24 — POLISH / SYSTEM RHYTHM
   One spacing scale, quieter micro-motion, better reading hierarchy.
   ================================================================ */
body{font-kerning:normal;text-rendering:optimizeLegibility}
.section{padding:var(--section-base) var(--pad)}
.section-head{position:relative;margin-bottom:var(--title-gap);padding-top:1px}
.section-head:before{content:"";position:absolute;left:0;right:0;top:-15px;height:1px;background:var(--line);transform-origin:left center;opacity:.9}
.section-head .eyebrow{font-size:9px}
.section-head>span{font-size:8.5px}

/* Home rhythm: compact joins, then deliberate audiovisual pauses. */
.work{padding-top:clamp(78px,5.7vw,104px);padding-bottom:clamp(34px,2.55vw,48px)}
.manifesto{padding-top:var(--section-tight);padding-bottom:clamp(58px,4.35vw,80px);gap:clamp(46px,5vw,88px)}
.capabilities{padding-top:clamp(54px,4vw,74px);padding-bottom:clamp(66px,4.9vw,88px)}
.showreel{min-height:clamp(500px,40vw,650px)}
.showreel-art{min-height:clamp(500px,40vw,650px)}
.tech{padding-top:clamp(64px,4.7vw,84px);padding-bottom:clamp(52px,3.8vw,70px)}
.clients{padding-top:clamp(48px,3.5vw,64px);padding-bottom:clamp(66px,4.8vw,88px)}
.journal-home{padding-top:clamp(66px,4.8vw,88px);padding-bottom:clamp(78px,5.7vw,104px)}
.about{padding-top:clamp(38px,3vw,56px);padding-bottom:clamp(20px,1.7vw,34px)}

/* Selected work: stronger image, quieter chrome. */
.project-card{background:#0a0a0a}
.project-number,.project-open{font-size:8.5px}
.project-meta p{font-size:9px;line-height:1.4;max-width:30ch;color:rgba(255,255,255,.82)}
.project-view{font-size:7.5px;letter-spacing:.14em;opacity:.78}
.project-frame{opacity:.55}
@media(hover:hover) and (pointer:fine){
  .project-card:hover .project-image{transform:scale(1.035)}
  .project-card:hover .project-overlay{opacity:.72}
  .project-card:hover .project-frame{opacity:.92}
}

/* Reading typography: no masks on copy or logos. Masks are reserved for media. */
.motion-engine-ready .motion-node{transition:opacity .48s ease,transform .74s var(--motion-ease),filter .52s ease,clip-path .74s var(--motion-ease);will-change:transform,opacity}
.motion-engine-ready .motion-node.is-inview{clip-path:inset(-.18em -.10em -.24em -.10em)}
.motion-engine-ready [data-motion="copy-right"],
.motion-engine-ready [data-motion="copy-left"],
.motion-engine-ready [data-motion="card"],
.motion-engine-ready [data-motion="logo"],
.motion-engine-ready [data-motion="editorial"],
.motion-engine-ready [data-motion="stat"],
.motion-engine-ready [data-motion="pride"],
.motion-engine-ready [data-motion="footer"]{clip-path:none!important;filter:none!important}
.motion-engine-ready [data-motion="copy-right"].motion-below:not(.is-inview),
.motion-engine-ready [data-motion="copy-left"].motion-below:not(.is-inview){opacity:.18;transform:translate3d(0,34px,0)}
.motion-engine-ready [data-motion="copy-right"].motion-above:not(.is-inview),
.motion-engine-ready [data-motion="copy-left"].motion-above:not(.is-inview){opacity:.18;transform:translate3d(0,-28px,0)}
.motion-engine-ready [data-motion="card"].motion-below:not(.is-inview),
.motion-engine-ready [data-motion="editorial"].motion-below:not(.is-inview){opacity:.12;transform:translate3d(0,44px,0) scale(.985)}
.motion-engine-ready [data-motion="card"].motion-above:not(.is-inview),
.motion-engine-ready [data-motion="editorial"].motion-above:not(.is-inview){opacity:.14;transform:translate3d(0,-34px,0) scale(.99)}
.motion-engine-ready [data-motion="logo"].motion-below:not(.is-inview),
.motion-engine-ready [data-motion="stat"].motion-below:not(.is-inview),
.motion-engine-ready [data-motion="footer"].motion-below:not(.is-inview){opacity:.16;transform:translate3d(0,28px,0)}
.motion-engine-ready [data-motion="logo"].motion-above:not(.is-inview),
.motion-engine-ready [data-motion="stat"].motion-above:not(.is-inview),
.motion-engine-ready [data-motion="footer"].motion-above:not(.is-inview){opacity:.18;transform:translate3d(0,-24px,0)}
.motion-engine-ready [data-motion="head"].motion-below:not(.is-inview){opacity:.12;transform:translate3d(-22px,34px,0);clip-path:inset(0 74% 0 0)}
.motion-engine-ready [data-motion="head"].motion-above:not(.is-inview){opacity:.14;transform:translate3d(18px,-28px,0);clip-path:inset(0 0 0 70%)}
.motion-engine-ready [data-motion="manifesto"].motion-below:not(.is-inview){opacity:.12;transform:translate3d(-3vw,46px,0) scaleX(.97);clip-path:inset(0 0 44% 0)}
.motion-engine-ready [data-motion="manifesto"].motion-above:not(.is-inview){opacity:.14;transform:translate3d(2.2vw,-36px,0) scaleX(.982);clip-path:inset(34% 0 0 0)}
.motion-engine-ready [data-motion="media"].motion-below:not(.is-inview),
.motion-engine-ready [data-motion="panel"].motion-below:not(.is-inview){opacity:.35;filter:none;transform:translate3d(3vw,28px,0) scale(.985);clip-path:inset(0 0 0 34%)}
.motion-engine-ready [data-motion="media"].motion-above:not(.is-inview),
.motion-engine-ready [data-motion="panel"].motion-above:not(.is-inview){opacity:.4;filter:none;transform:translate3d(-2vw,-24px,0) scale(.99);clip-path:inset(0 30% 0 0)}

/* The hero remains the strongest kinetic moment, but text resting state has generous safe area. */
.hero-copy{bottom:clamp(54px,7.2vh,88px)}
.hero-slide h1{max-width:min(1080px,86vw);line-height:.815}
.hero-phrase-wrap{padding:.16em .11em .22em!important;margin:-.16em -.11em -.22em!important}
.hero-bottom{margin-top:clamp(32px,3vw,46px)}
.hero-bottom:before{top:-18px}

/* Work archive stays calm and content-led. */
.work-page .work-archive-section{padding-top:clamp(52px,4.5vw,76px)}
.work-page .work-archive-grid .project-card{transition:opacity .2s ease,box-shadow .22s ease}
.work-page .work-archive-grid .project-meta p{font-size:9px}
.work-page .modal-panel{box-shadow:0 24px 70px rgba(0,0,0,.28)}
.work-page .modal-gallery{gap:8px;padding:8px}
.work-page .modal-header{padding-top:26px}

/* Journal: editorial calm, stronger reading measure. */
.blog-page .blog-shell,.article-page .article-shell{--journal-measure:1180px}
.article-body{max-width:760px}
.article-body p,.article-body li{line-height:1.72}

@media(max-width:1000px){
  .section-head:before{top:-12px}
  .project-meta p{font-size:9px}
  .showreel,.showreel-art{min-height:430px}
}
@media(max-width:620px){
  :root{--section-tight:44px;--section-base:56px;--section-wide:72px;--title-gap:26px}
  .section{padding-top:var(--section-base);padding-bottom:var(--section-base)}
  .work{padding-top:58px;padding-bottom:30px}
  .manifesto{padding-top:46px;padding-bottom:54px}
  .capabilities{padding-top:50px;padding-bottom:60px}
  .tech{padding-top:58px;padding-bottom:50px}
  .clients{padding-top:48px;padding-bottom:64px}
  .journal-home{padding-top:58px;padding-bottom:70px}
  .hero-copy{bottom:48px}
  .hero-phrase-wrap{padding:.12em .055em .18em!important;margin:-.12em -.055em -.18em!important}
  .project-meta p{font-size:9px;max-width:28ch}
  .motion-engine-ready [data-motion="head"].motion-below:not(.is-inview),
  .motion-engine-ready [data-motion="manifesto"].motion-below:not(.is-inview){transform:translate3d(0,30px,0)}
  .motion-engine-ready [data-motion="head"].motion-above:not(.is-inview),
  .motion-engine-ready [data-motion="manifesto"].motion-above:not(.is-inview){transform:translate3d(0,-24px,0)}
}

/* ================================================================
   BRANDA V1.25 — CONTENT-READY / STRESS RESILIENCE
   Protects the art direction when real content becomes longer, shorter or heavier.
   ================================================================ */
.hero-slide,.section-head>div,.manifesto>div,.manifesto-copy,.project-meta,.cap-copy,.tech-copy,.journal-meta,.article-head,.work-archive-title,.work-archive-hero>p{min-width:0}
.hero-slide h1,.section-head h2,.manifesto h2,.showreel h2,.tech-copy h2,.journal-meta h3,.article-head h1,.footer-top>a,.work-site-footer>a{text-wrap:balance}
.project-meta h3,.journal-meta h3,.article-head h1,.article-lead,.work-archive-hero>p,.manifesto-copy,.cap-copy,.tech-copy{overflow-wrap:break-word}
.project-meta h3{max-width:13ch}.project-meta p{min-height:1.25em;white-space:normal}
.section-head>span{overflow-wrap:break-word}
.manifesto-copy{max-width:min(430px,100%)}
.cap-copy p{max-width:34ch;white-space:pre-line}
.tech-copy p{max-width:48ch;line-height:1.55}
.tech-items span{padding:20px;align-content:end;overflow-wrap:break-word}
.logo-item img{width:auto;height:auto}
.journal-meta h3{max-width:16ch}.journal-meta p{max-width:48ch;overflow-wrap:break-word}
.article-head h1{max-width:15ch}.article-lead{max-width:58ch}.article-body{overflow-wrap:break-word}.article-body img{display:block;width:100%;height:auto}.article-body figure{margin-left:0;margin-right:0;max-width:100%}.article-body a{overflow-wrap:anywhere}
.modal-header h2{overflow-wrap:break-word}.modal-header p{max-width:62ch}.modal-gallery img,.modal-gallery video{height:auto;max-width:100%}
.work-archive-hero>p{max-width:36ch}.work-archive-grid .project-meta h3{max-width:13ch}
.footer-top>a,.work-site-footer>a{max-width:100%}

/* Media gets a predictable visual frame while the browser decodes large assets. */
.project-cover-media,.journal-cover img,.showreel-poster-media,.article-cover img,.hero-poster-media{background:#deded8}
.project-cover-media,.journal-cover img,.showreel-poster-media,.article-cover img{object-fit:cover}

/* Focus is part of the visual system, not the browser default accident. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[contenteditable="true"]:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.project-card:focus-visible{outline-color:#fff;outline-offset:-7px}.site-header a:focus-visible,.site-header button:focus-visible{outline-offset:5px}

/* Avoid invisible long-content collisions in narrow translations. */
@media(max-width:1000px){
  .section-head{grid-template-columns:minmax(0,1fr) auto}.section-head>span{max-width:20ch}
  .manifesto-copy{max-width:560px}
  .work-archive-hero>p{max-width:52ch}
}
@media(max-width:620px){
  .section-head{display:grid;grid-template-columns:1fr;gap:16px}.section-head>span{text-align:left;max-width:34ch;padding-left:42px}
  .project-meta h3{max-width:12ch;font-size:clamp(34px,11vw,48px)}
  .journal-meta h3{max-width:18ch}
  .tech-items span{padding:16px 0}
  .article-head h1{max-width:none;font-size:clamp(44px,13vw,70px)}
  .footer-top>a,.work-site-footer>a{white-space:normal;flex-wrap:nowrap;font-size:clamp(48px,15vw,72px)}
}

/* V1.25 · Selected Work adapts while the portfolio is being populated. */
@media(min-width:1001px){
  .work .project-grid.project-count-1{grid-template-columns:minmax(0,1fr);max-width:min(920px,72vw)}
  .work .project-grid.project-count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work .project-grid.project-count-3,.work .project-grid.project-count-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .work .project-grid.project-count-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work .project-grid.project-count-5{grid-template-columns:repeat(6,minmax(0,1fr))}
  .work .project-grid.project-count-5>.project-card{grid-column:span 2}
  .work .project-grid.project-count-5>.project-card:nth-last-child(-n+2){grid-column:span 3}
}

/* V1.25 · Client wall stays composed with a small real roster. */
@media(min-width:1001px){
  .clients .logo-grid.client-count-1{grid-template-columns:minmax(220px,360px);max-width:360px}
  .clients .logo-grid.client-count-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
  .clients .logo-grid.client-count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){.clients .logo-grid.client-count-1{grid-template-columns:1fr}}

/* ================================================================
   BRANDA V1.25.3 — HERO TYPE SAFE AREA + CLEAN SLIDE HANDOFF
   The mask exists only while text is moving. Resting type is never cropped.
   ================================================================ */
.hero-title-stage{
  width:min(1240px,calc(100vw - (var(--pad) * 2) - 24px));
  min-height:clamp(188px,19vw,310px);
  overflow:visible;
}
.hero-slide{overflow:visible}
.hero-slide h1{
  width:100%;
  max-width:none;
  font-size:clamp(58px,7.85vw,132px);
  line-height:.84;
  letter-spacing:-.068em;
}
.hero-phrase-wrap{
  display:block!important;
  width:max-content;
  max-width:calc(100% - 12px);
  box-sizing:content-box;
  padding:.19em .18em .24em!important;
  margin:-.19em -.18em -.24em!important;
  overflow:hidden!important;
}
/* Existing editorial offsets stay, but must count against available width. */
.hero-slide[data-hero-slide="0"] .hero-phrase-wrap:nth-child(2),
.hero-slide[data-hero-slide="1"] .hero-phrase-wrap:nth-child(1),
.hero-slide[data-hero-slide="1"] .hero-phrase-wrap:nth-child(2),
.hero-slide[data-hero-slide="2"] .hero-phrase-wrap:nth-child(2){
  max-width:calc(100% - 9vw);
}
.hero-phrase{display:block;white-space:nowrap}

/* Never expose the next statement during the outgoing animation. */
.hero-slide:not(.is-active):not(.is-exiting){visibility:hidden!important;opacity:0!important}
.hero-slide.is-exiting{z-index:2}
.hero-slide.is-entering,.hero-slide.is-settled{z-index:3}

/* The old overshoot (scaleX 1.055) expanded glyphs inside their own clipping mask.
   Keep the kinetic character, but move the phrase instead of stretching it. */
.hero-slide.is-entering .hero-phrase{
  animation:heroV1253In 1.16s cubic-bezier(.12,.86,.18,1) both!important;
}
.hero-slide.is-exiting .hero-phrase{
  animation:heroV1253Out .56s cubic-bezier(.7,0,.84,0) both!important;
}
@keyframes heroV1253In{
  0%{transform:translate3d(-1.2%,118%,0) rotate(1.3deg);filter:blur(11px);opacity:0}
  30%{opacity:.8;filter:blur(5px)}
  72%{transform:translate3d(.35%,-3.5%,0) rotate(-.12deg);filter:blur(.5px);opacity:1}
  100%{transform:translate3d(0,0,0) rotate(0);filter:blur(0);opacity:1}
}
@keyframes heroV1253Out{
  0%{transform:translate3d(0,0,0);filter:blur(0);opacity:1}
  38%{transform:translate3d(.4%,-5%,0);opacity:.72}
  100%{transform:translate3d(-1.5%,-118%,0);filter:blur(10px);opacity:0}
}

/* A mask is useful during entry/exit, harmful once the type has landed. */
.hero-slide.is-settled .hero-phrase-wrap{
  overflow:visible!important;
}
.hero-slide.is-settled .hero-phrase-wrap:after{display:none!important}
.hero-slide.is-settled .hero-phrase{animation:none!important;transform:none!important}

@media(max-width:1000px){
  .hero-title-stage{width:calc(100vw - (var(--pad) * 2));min-height:clamp(182px,28vw,276px)}
  .hero-slide h1{font-size:clamp(54px,9.7vw,98px);line-height:.83}
  .hero-phrase-wrap{padding:.17em .14em .22em!important;margin:-.17em -.14em -.22em!important}
}
@media(max-width:620px){
  .hero-title-stage{width:calc(100vw - 44px);min-height:clamp(198px,58vw,286px)}
  .hero-slide h1{font-size:clamp(48px,15.1vw,70px);line-height:.84;letter-spacing:-.062em}
  .hero-phrase-wrap{padding:.14em .10em .20em!important;margin:-.14em -.10em -.20em!important;max-width:100%}
  .hero-slide[data-hero-slide] .hero-phrase-wrap:nth-child(n){max-width:100%;margin-left:0!important}
}