:root{--paper:#efede7;--ink:#0a0a09;--accent:#fa5034;--ease-out:cubic-bezier(.23,1,.32,1)} *{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:7px}.hero{position:relative;height:100svh;min-height:650px;overflow:hidden;isolation:isolate}.header{position:absolute;inset:27px 2.8% auto;display:flex;align-items:center;justify-content:space-between;z-index:6}.wordmark{width:142px;display:block}.wordmark svg{display:block;width:100%;height:auto}.header nav{display:flex;gap:56px;position:absolute;left:50%;transform:translateX(-50%)}.header nav button{border:0;background:none;font-size:17px;padding:8px}.project{border:0;border-radius:40px;background:var(--ink);color:white;padding:17px 30px;font-size:12px;letter-spacing:2px;display:flex;gap:20px;align-items:center}.project span{font-size:21px;line-height:1}.art{position:absolute;inset:0;z-index:2;pointer-events:none}h1{position:absolute;inset:11.3% 2.1% auto;margin:0;font-size:11.45vw;line-height:.84;letter-spacing:-.067em;font-weight:900;z-index:3;pointer-events:none;mix-blend-mode:multiply}h1>span{display:block;margin-bottom:.017em}h1 b{font-weight:900}.split{display:flex!important;justify-content:space-between}.annotation{position:absolute;z-index:4;font-size:12px;letter-spacing:.3px;line-height:1.25;pointer-events:none}.byte-label{left:25.2%;top:49%}.vybe-label{left:68%;top:47%;color:var(--paper)}.annotation span{position:absolute;top:8px;width:65px;border-top:1px solid currentColor}.byte-label span{left:calc(100% + 14px)}.vybe-label span{right:calc(100% + 22px);width:30px}.annotation span:before{content:'';position:absolute;width:5px;height:5px;top:-3px;left:0;border-radius:50%;background:currentColor}.vybe-label span:before{left:auto;right:0}.intro{position:absolute;left:3.1%;bottom:12.7%;font-size:16px;line-height:1.2;letter-spacing:-.5px;z-index:4;margin:0}.footer{position:absolute;bottom:25px;left:2.8%;right:2.8%;display:flex;justify-content:space-between;align-items:center;z-index:6;font-size:10px;letter-spacing:1px}.footer>span:last-child{text-align:right}.reveal-toggle{border:0;background:none;display:flex;align-items:center;gap:19px;letter-spacing:2px;font-size:12px;padding:0;position:relative}.reveal-toggle:before,.reveal-toggle:after{content:'';width:17vw;height:1px;background:#777;position:absolute;top:50%}.reveal-toggle:before{right:calc(100% + 23px)}.reveal-toggle:after{left:calc(100% + 23px)}.reveal-toggle i{width:39px;height:39px;border:1px solid #333;border-radius:50%;display:grid;place-items:center}.reveal-toggle i:after{content:'';background:var(--accent);border:4px solid #fff9;width:17px;height:17px;border-radius:50%}.loader{position:fixed;inset:0;background:var(--paper);z-index:30;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .5s var(--ease-out),visibility .5s;pointer-events:none}.loader.done{opacity:0;visibility:hidden}.loader-symbol{width:115px;height:115px;overflow:visible}.part{animation:assemble 1s var(--ease-out) both;transform-origin:390px 430px}.b{animation-delay:.1s}.c{animation-delay:.2s}.loader-label{font-size:9px;letter-spacing:3px;margin-top:30px}.loader-track{width:110px;height:1px;background:#cbc7be;margin-top:22px;overflow:hidden}.loader-track i{display:block;height:100%;background:var(--ink);transform-origin:left;animation:loading 1.2s var(--ease-out) both}@keyframes assemble{from{opacity:0;transform:translateY(16px) rotate(-12deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes loading{from{transform:scaleX(.03)}to{transform:scaleX(1)}}dialog{border:1px solid #cbc7be;background:var(--paper);padding:55px;max-width:550px;width:calc(100% - 36px);color:var(--ink)}dialog::backdrop{background:#0a090860;backdrop-filter:blur(8px)}.close{position:absolute;top:12px;right:16px;background:none;border:0;font-size:30px}.eyebrow{font-size:10px;letter-spacing:2px}h2{font-size:48px;letter-spacing:-2px;line-height:1;margin:25px 0}dialog p{line-height:1.6;font-size:16px}.panel-done{margin-top:25px;padding:14px 0;border:0;border-bottom:1px solid;background:none;font-size:10px;letter-spacing:2px} @media(hover:hover) and (pointer:fine){.header nav button:hover{color:#c8422b}.project{transition:transform .2s var(--ease-out)}.project:hover{transform:translateY(-2px)}} @media(min-aspect-ratio:1.95){h1{font-size:20vh}.hero{min-height:600px}} @media(max-width:700px){.hero{min-height:720px;max-height:1000px}.header{inset:23px 5% auto;flex-wrap:wrap}.wordmark{width:112px}.project{font-size:9px;padding:13px 16px;letter-spacing:1px;gap:10px}.header nav{top:59px;gap:33px}.header nav button{font-size:14px}h1{top:20%;left:4%;right:4%;font-size:14.2vw;line-height:.94;letter-spacing:-.065em}.annotation{font-size:9px}.byte-label{left:7%;top:62%}.vybe-label{left:71%;top:58%}.annotation span{width:25px}.intro{left:5%;bottom:13%;font-size:14px}.footer{bottom:22px;left:5%;right:5%;font-size:8px;letter-spacing:.5px;flex-wrap:wrap;gap:22px}.footer>span{order:2;width:45%}.reveal-toggle{order:1;width:100%;justify-content:center;font-size:10px;gap:12px}.reveal-toggle:before,.reveal-toggle:after{display:none}.reveal-toggle i{width:29px;height:29px}h2{font-size:38px}dialog{padding:40px 28px}} @media(prefers-reduced-motion:reduce){.part,.loader-track i{animation:none}.loader{transition:opacity .2s ease,visibility .2s}.project{transition:none}} /* Full-bleed composition, with an exact white ink pass inside the reveal. */ .hero{--headline-size:min(11.2vw,calc((100svh - 280px)/3.6));min-height:580px} h1{top:130px;font-size:var(--headline-size);line-height:.88;mix-blend-mode:normal} .header{top:25px;min-height:55px}.wordmark{width:182px}.wordmark svg{width:100%;height:53px} .byte-label{left:36%;top:calc(130px + var(--headline-size)*2.25)} .vybe-label{left:76%;top:calc(130px + var(--headline-size)*2.25);color:var(--ink)} .intro{bottom:88px}.footer{bottom:25px} .contrast-layer{position:absolute;inset:0;z-index:8;pointer-events:none;color:#fff;will-change:clip-path} .contrast-layer .wordmark{filter:invert(1)}.contrast-layer .vybe-label{color:#fff} .contrast-layer .project{background:#fff;color:#111}.contrast-layer .reveal-toggle i{border-color:#fff} .contrast-layer .reveal-toggle:before,.contrast-layer .reveal-toggle:after{background:#fff9} .project{overflow:hidden}.project span{display:inline-block;transition:transform .2s var(--ease-out)} main{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out)} body.hero-ready main{opacity:1;transform:none} .loader{pointer-events:auto;overflow:hidden;transition:opacity .7s var(--ease-out),visibility .7s} .loader.done{pointer-events:none}.loader-emblem{position:relative;width:148px;height:148px;display:grid;place-items:center;transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)} .loader-symbol{width:94px;height:94px;animation:emblem-arrive 2.6s var(--ease-out) both} .orbit{position:absolute;inset:-17px;border:1px solid #b9b2a480;border-radius:50%;border-top-color:#191817;animation:orbit-turn 3s cubic-bezier(.77,0,.175,1) both} .orbit-two{inset:-29px;border-color:transparent;border-right-color:#ef6744;animation-direction:reverse;animation-duration:3.4s} .loader-label{margin-top:53px;animation:loader-label 1.5s var(--ease-out) both;transition:opacity .4s ease} .loader-track{transition:opacity .4s ease}.loader-track i{animation-duration:2.8s} .cinema-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;line-height:.86;font-size:clamp(48px,10.5vw,170px);letter-spacing:-.075em;font-weight:800;opacity:0;transform:scale(.94);pointer-events:none;will-change:transform,opacity} .cinema-title span:last-child{font-weight:400;font-size:.66em;letter-spacing:-.06em;margin-top:.22em} .loader.brand-phase .loader-emblem{opacity:0;transform:scale(.9)}.loader.brand-phase .loader-label,.loader.brand-phase .loader-track{opacity:0} .loader.brand-phase .cinema-title{animation:cinema-flight 3.1s both} .skip-intro{position:absolute;bottom:30px;right:3%;border:0;background:none;letter-spacing:2px;font-size:9px;padding:12px} @keyframes emblem-arrive{0%{opacity:0;transform:rotate(-120deg) scale(.9)}45%{opacity:1}75%,100%{transform:rotate(0) scale(1)}} @keyframes orbit-turn{from{opacity:0;transform:rotate(-180deg) scale(.94)}30%{opacity:1}to{opacity:.6;transform:rotate(180deg) scale(1)}} @keyframes loader-label{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes cinema-flight{0%{opacity:0;transform:scale(.94);animation-timing-function:cubic-bezier(.23,1,.32,1)}27%,48%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.77,0,.175,1)}92%,100%{opacity:0;transform:scale(16)}} @media(hover:hover) and (pointer:fine){.project:hover span{transform:translate(3px,-3px)}} @media(max-width:700px){.hero{min-height:720px;--headline-size:14.2vw}.header{top:20px}.wordmark{width:137px}.wordmark svg{height:42px}.header nav{top:61px}h1{top:164px;font-size:var(--headline-size)}.byte-label{left:7%;top:64%}.vybe-label{left:70%;top:61%}.intro{bottom:125px}.footer{bottom:22px}.cinema-title{font-size:17vw}} @media(prefers-reduced-motion:reduce){main{transform:none;transition:opacity .2s ease}.loader-symbol,.orbit,.loader-label,.loader.brand-phase .cinema-title{animation:none}.loader{transition:opacity .2s ease,visibility .2s}.project span{transition:none}.loader-emblem{transition:none}} /* Keep the source wordmark outside the emblem viewport hidden. */ .loader-symbol{overflow:hidden} .loader.brand-phase .loader-label{animation:none;opacity:0} .cinema-title{letter-spacing:-.055em} .contrast-layer .intro,.contrast-layer .annotation,.contrast-layer .footer{text-shadow:0 1px 6px #16081370} @media(hover:hover) and (pointer:fine){.project.is-hover{transform:translateY(-2px)}.project.is-hover span{transform:translate(3px,-3px)}} @font-face{font-family:Shoulders;src:url('assets/fonts/display.woff2') format('woff2');font-weight:100 900;font-display:swap}@font-face{font-family:Hanken;src:url('assets/fonts/body.woff2') format('woff2');font-weight:100 900;font-display:swap} :root{--display:Shoulders,Impact,sans-serif;--body:Hanken,Arial,sans-serif;--red:#d8402a;--rule:#c4bfb5} html{scroll-behavior:auto;scroll-padding-top:105px;scroll-snap-type:none}body{font-family:var(--body);overflow-x:clip}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button:active,.project:active{transform:scale(.97)} h2,h3,h4,p{margin-top:0}h2{font-family:var(--display);font-weight:750;letter-spacing:-.035em;line-height:.93;margin:0}h2 em{font-style:normal;color:var(--red)}.eyebrow{font-family:var(--body);font-size:10px;font-weight:500;letter-spacing:2px;line-height:1.5;margin-bottom:25px}.story-section{position:relative;background:var(--paper);padding:110px 5%;z-index:3}.section-top{display:flex;justify-content:space-between;gap:20px;align-items:baseline}.text-link{display:inline-flex;gap:35px;align-items:center;padding:14px 0;border-bottom:1px solid currentColor;font-size:13px}.text-link span{font-size:23px}.text-link:hover{color:var(--red)} .site-header{position:fixed;z-index:25;top:18px;left:3%;right:3%;height:65px;display:flex;align-items:center;padding:8px 18px;gap:28px;border:1px solid transparent;opacity:0;transform-origin:50% 0}.hero-ready .site-header{opacity:1}.brand{display:flex;align-items:center;gap:9px;font-size:25px;font-weight:900;letter-spacing:-1.5px;line-height:.9}.brand svg{width:42px;height:42px;overflow:hidden}.brand small{display:block;font-size:7px;font-weight:600;letter-spacing:1.1px;margin-top:5px}.site-header nav{display:flex;gap:32px;margin-left:auto;margin-right:35px;font-size:14px}.site-header nav a{position:relative;padding:12px 0}.site-header nav a[aria-current="location"]:after{content:'';position:absolute;bottom:4px;left:50%;width:4px;height:4px;background:var(--red);border-radius:50%}.site-header .project{font-size:10px;letter-spacing:1.5px;padding:16px 22px}.site-header.is-docked{background:#efede7ed;border-color:#b5afa455;border-radius:50px;backdrop-filter:blur(18px)}.site-header:not(.is-docked){background:#efede7e8;border-radius:4px}.menu-toggle{display:none} .hero{position:relative;top:auto;min-height:620px;isolation:isolate;touch-action:pan-y}.hero h1{font-family:var(--body);font-weight:900}.hero .intro{font-size:15px}.hero .footer{font-family:var(--body)}.scroll-cue{padding:10px 0}.scroll-cue:hover{color:var(--red)} .manifesto{min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:130px;padding-bottom:65px}.manifesto h2{font-family:var(--body);font-size:clamp(40px,6.7vw,105px);font-weight:600;letter-spacing:-.065em;line-height:1.03;margin:50px 0}.manifesto h2>span{display:block}.manifesto h2 em{font-style:normal}.manifesto .feeling-line{padding-left:16%}.manifesto-foot{display:flex;justify-content:space-between;align-items:end;gap:30px}.small-index{font-size:9px;letter-spacing:1.6px}.manifesto-foot p{max-width:380px;font-size:17px;line-height:1.5;margin:0}.manifesto .section-top .eyebrow{margin:0} .feature{position:relative;background:var(--paper);z-index:3;scroll-margin-top:0}.feature-stage{position:relative;min-height:740px;height:100svh;overflow:hidden;padding:115px 5% 70px;isolation:isolate}.feature-copy{position:relative;z-index:3;width:39%;pointer-events:none}.feature-copy a{pointer-events:auto}.feature h2{font-size:clamp(76px,7.2vw,133px);line-height:.9;letter-spacing:-.03em}.feature-description{font-size:16px;line-height:1.5;max-width:330px;margin:27px 0 12px}.feature-art{position:absolute;width:83%;height:88%;left:29%;top:9%;z-index:1;mix-blend-mode:multiply;will-change:transform}.feature-art>img,.feature-art .color-pass,.feature-art .color-pass img{position:absolute;width:100%;height:100%;inset:0;object-fit:contain}.color-pass{clip-path:inset(0 0 0 0);will-change:clip-path}.feature-caption{position:absolute;bottom:27px;left:5%;right:5%;display:flex;justify-content:space-between;border-top:1px solid var(--rule);padding-top:18px;font-size:8px;letter-spacing:1.5px;z-index:3}.scene-index{position:absolute;right:4%;top:105px;font-family:var(--display);font-size:40px;color:#aba59a;font-weight:300}.vybe-feature .feature-art{left:-16%;width:88%}.vybe-feature .feature-copy{margin-left:auto;width:39%}.vybe-feature .scene-index{left:5%;right:auto}.vybe-feature h2{font-size:clamp(85px,9vw,154px)}.studio-feature .feature-art{left:23%;width:90%}.studio-feature .feature-copy{width:40%} .service-story{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding-top:120px;padding-bottom:130px;border-top:1px solid var(--rule)}.service-heading h2{font-size:clamp(50px,5.7vw,95px)}.service-heading>p:last-child{font-size:17px;line-height:1.5;max-width:350px;margin:25px 0 0}.service-list details{border-bottom:1px solid var(--rule);padding:22px 0}.service-list details:first-child{border-top:1px solid var(--rule)}.service-list summary{list-style:none;display:flex;align-items:center;gap:22px;font-size:23px;letter-spacing:-.6px;cursor:pointer}.service-list summary::-webkit-details-marker{display:none}.service-list summary>span{font-size:9px;letter-spacing:1px;color:#777}.service-list summary i{margin-left:auto;font-style:normal;font-size:23px;color:var(--red);transition:transform .2s}.service-list details[open] summary i{transform:rotate(45deg)}.service-list details>p{font-size:15px;color:#605b55;line-height:1.6;max-width:380px;margin:20px 0 4px 36px} .attention-bridge{min-height:90svh;overflow:hidden;display:flex;justify-content:center;flex-direction:column;text-align:center;padding-top:100px;padding-bottom:100px}.attention-bridge h2{display:flex;align-items:center;flex-direction:column}.attention-first{font-size:clamp(54px,8vw,135px)}.attention-second{font-size:clamp(140px,27vw,450px);line-height:.86;color:var(--red);letter-spacing:-.055em}.attention-third{font-family:var(--body);font-size:clamp(10px,1.5vw,22px);letter-spacing:2px;margin-top:30px}.attention-bridge>p:last-of-type{font-size:15px;margin:20px 0}.bridge-line{position:absolute;bottom:35px;left:50%;height:40px;width:1px;background:var(--red);transform-origin:top} .difference{border-top:1px solid var(--rule);padding-top:100px}.difference h2{font-size:clamp(55px,7.5vw,125px)}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:5%;margin-top:70px}.principles article{border-top:1px solid var(--rule);padding-top:20px}.principles article>span{font-size:9px;letter-spacing:1.4px}.principles h3{font-size:24px;font-weight:500;letter-spacing:-.7px;margin:27px 0 15px}.principles p{font-size:15px;line-height:1.55;color:#605b55;max-width:320px;margin-bottom:0} .work-reserved{padding-top:70px;padding-bottom:70px;border-top:1px solid var(--rule)}.work-reserved h2{font-size:clamp(42px,6vw,90px)}.work-reserved .eyebrow{margin:0}.work-space{height:45svh;border-bottom:1px solid var(--rule);margin-top:35px;background:none} .contact{display:grid;grid-template-columns:1.1fr 1fr;gap:10%;padding-top:125px;padding-bottom:95px}.contact h2{font-size:clamp(75px,8vw,135px)}.contact-copy>p:not(.eyebrow){font-size:17px;line-height:1.5;margin:25px 0 10px}.signal-scene{position:relative;height:260px;width:100%;mix-blend-mode:multiply;margin:0 0 14px}.signal-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.signal-scene canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.6}.email-link{font-size:16px;border-bottom:1px solid var(--rule);padding-bottom:6px} #project-form{padding-top:5px;display:flex;flex-direction:column;gap:24px}#project-form label{display:flex;flex-direction:column;gap:10px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:25px}input,select,textarea{min-width:0;width:100%;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--rule);padding:12px 0;font-size:15px;letter-spacing:0;text-transform:none;outline-offset:5px;border-radius:0}textarea{resize:vertical}input:focus,select:focus,textarea:focus{outline:1px solid var(--red)}#project-form fieldset{border:0;padding:0;margin:0;display:flex;gap:12px}legend{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px}#project-form fieldset label{flex:1;display:block;position:relative;cursor:pointer}#project-form fieldset input{position:absolute;opacity:0;width:1px;height:1px}#project-form fieldset span{display:block;padding:14px;text-align:center;border:1px solid var(--rule);border-radius:30px;transition:background .2s,color .2s}#project-form fieldset input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}#project-form fieldset input:focus-visible+span{outline:2px solid var(--red);outline-offset:3px}.send-project{display:flex;justify-content:space-between;align-items:center;border:0;background:var(--ink);color:var(--paper);padding:20px 25px;border-radius:40px;font-size:11px;letter-spacing:1.5px}.send-project span{font-size:24px}.form-note{font-size:11px;color:#6d675f;margin:-10px 0 0}#form-status{font-size:13px;line-height:1.5;margin:0}.site-footer{padding:35px 5%;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:25px;background:var(--paper);position:relative;z-index:3}.site-footer>span,.site-footer>p,.site-footer>a:last-child{font-size:8px;letter-spacing:1px;margin:0} #mobile-menu{position:fixed;inset:0;margin:0;padding:30px 6%;width:100%;height:100dvh;max-width:none;max-height:none;border:0;background:var(--paper);overflow-y:auto;overflow-x:hidden;color:var(--ink)}#mobile-menu::backdrop{background:#d8402a;backdrop-filter:none}.menu-top{display:flex;align-items:center;gap:15px;position:relative;z-index:2}.menu-top svg{width:38px;height:38px;overflow:hidden}.menu-top>span{font-size:8px;letter-spacing:1.5px}.menu-close{margin-left:auto;border:0;background:none;font-size:10px;letter-spacing:1px;padding:12px 0 12px 15px}.menu-top+.menu-top{display:none}#mobile-menu nav{margin-top:45px;position:relative;z-index:2}#mobile-menu nav a{display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--rule);padding:12px 0;overflow:hidden}#mobile-menu nav a>span{font-size:9px;color:var(--red)}#mobile-menu nav strong{font-family:var(--display);font-size:clamp(45px,9vh,90px);font-weight:650;line-height:1.05;text-transform:uppercase;letter-spacing:-2px}#mobile-menu nav i{font-style:normal;margin-left:auto;font-size:30px;color:var(--red)}.menu-bottom{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;margin-top:35px;position:relative;z-index:2}.menu-watermark{position:absolute;right:-30px;top:16%;font-family:var(--display);font-size:90vh;color:#d8402a09;line-height:1;pointer-events:none}.loader{z-index:50}.loader-label,.loader-track{font-family:var(--body)}.cinema-title{font-family:var(--body)} @media(min-width:1700px){.feature-copy{max-width:650px}.feature-stage,.story-section{padding-left:max(5%,calc((100% - 1700px)/2));padding-right:max(5%,calc((100% - 1700px)/2))}} @media(min-width:801px) and (max-height:780px){.feature-stage{min-height:620px;padding-top:110px}.feature h2{font-size:82px}.feature-description{font-size:14px;max-width:300px;margin:18px 0 5px}.feature-copy .eyebrow{margin-bottom:15px}.vybe-feature h2{font-size:112px}.feature-art{height:85%;top:12%}.text-link{padding:10px 0}.feature-caption{bottom:20px}.manifesto h2{font-size:6vw;margin:35px 0}.manifesto{padding-top:110px}} @media(max-width:1000px){.site-header nav{gap:20px;margin-right:10px}.site-header{gap:20px}.feature-copy{width:43%}.feature-description{font-size:14px}.principles{gap:25px}.principles h3{font-size:21px}.contact{gap:6%}.contact h2{font-size:85px}} @media(max-width:800px){html{scroll-padding-top:90px}.site-header{top:12px;left:4%;right:4%;height:58px;padding:7px 12px;gap:10px}.site-header .brand>span{display:none}.site-header .brand svg{width:37px;height:37px}.site-header nav,.site-header>.project{display:none}.menu-toggle{display:flex;align-items:center;gap:14px;margin-left:auto;background:none;border:0;font-size:9px;letter-spacing:1.5px;padding:12px 3px}.menu-toggle i{display:flex;flex-direction:column;gap:5px}.menu-toggle b{display:block;width:22px;height:1px;background:var(--ink)}.site-header.is-docked{border-radius:40px}.hero{min-height:720px}.hero h1{top:155px}.hero .intro{font-size:14px}.story-section{padding:85px 6%}.manifesto{min-height:90svh;justify-content:center}.manifesto .section-top{display:block}.manifesto .section-top .eyebrow:last-child{margin-top:9px;font-size:8px;letter-spacing:1px}.manifesto h2{font-size:clamp(33px,7.5vw,59px);line-height:1.13;margin:45px 0}.manifesto .feeling-line{padding-left:7%}.manifesto-foot{display:block}.manifesto-foot p{font-size:15px;margin-top:24px;max-width:330px}.small-index{font-size:8px}.feature-stage{height:auto;min-height:900px;padding:105px 6% 65px;display:flex;flex-direction:column}.feature-copy,.vybe-feature .feature-copy,.studio-feature .feature-copy{width:100%;margin:0}.feature h2,.vybe-feature h2{font-size:clamp(70px,16vw,125px);line-height:.92;max-width:75%}.feature-copy .eyebrow{font-size:8px;margin-bottom:20px}.feature-description{font-size:15px;max-width:350px;margin:23px 0 5px}.feature-art,.vybe-feature .feature-art,.studio-feature .feature-art{position:relative;left:auto;top:auto;width:140%;margin:5px -20% -10px;height:340px;flex-shrink:0}.feature-art>img,.feature-art .color-pass img{object-fit:contain}.feature-caption{bottom:22px;font-size:7px;left:6%;right:6%;line-height:1.5;gap:20px}.feature-caption .phase-caption{display:none}.scene-index,.vybe-feature .scene-index{top:100px;right:6%;left:auto;font-size:35px}.service-story{grid-template-columns:1fr;gap:40px;padding-top:70px;padding-bottom:80px}.service-heading h2{font-size:62px}.service-heading>p:last-child{font-size:15px}.service-list summary{font-size:21px}.service-list details>p{font-size:14px}.attention-bridge{min-height:75svh}.attention-first{font-size:14vw}.attention-second{font-size:45vw}.attention-third{font-size:9px;letter-spacing:1px}.attention-bridge>.eyebrow{font-size:8px;letter-spacing:1px}.attention-bridge>p:last-of-type{font-size:13px}.difference h2{font-size:62px}.principles{grid-template-columns:1fr;gap:30px;margin-top:45px}.principles h3{margin:20px 0 13px;font-size:24px}.principles p{font-size:15px;max-width:400px}.work-reserved .section-top{display:block}.work-reserved h2{font-size:55px}.work-reserved .eyebrow{margin-top:15px;font-size:8px}.work-space{height:30svh}.contact{grid-template-columns:1fr;gap:45px}.contact h2{font-size:80px}.contact-copy>p:not(.eyebrow){font-size:15px}.signal-scene{height:230px;margin:10px 0}.site-footer{padding:30px 6%;flex-wrap:wrap;gap:22px}.site-footer .brand{width:100%}.site-footer>p{width:100%}.site-footer>span{font-size:7px}.site-footer>a:last-child{font-size:7px}.eyebrow{font-size:9px}#project-form{gap:22px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.feature-art,.color-pass{will-change:auto}.loader-symbol,.orbit{animation:none}.site-header{transform:none!important}.signal-scene canvas{display:none}} .feature-stage{background:var(--paper)} .brand .brand-full{width:180px;height:50px}.brand .brand-symbol{display:none} @media(max-width:800px){.site-header .brand .brand-full{display:none}.site-header .brand .brand-symbol{display:block;width:37px;height:37px}.site-footer .brand .brand-full{display:block;width:160px;height:46px}} @media(min-width:801px) and (max-height:680px){.feature-stage{min-height:600px;padding-top:107px}.feature h2{font-size:70px}.vybe-feature h2{font-size:93px}.feature-description{max-width:360px;font-size:13px;line-height:1.45;margin:16px 0 4px}.feature-caption{bottom:16px;font-size:7px;padding-top:13px}.feature-copy .text-link{font-size:12px;padding:9px 0}.scene-index{top:102px}} .color-pass{clip-path:inset(var(--reveal,0%) 0% 0% 0%)}.vybe-feature .color-pass{clip-path:inset(0% var(--reveal,0%) 0% 0%)} /* Full-canvas art direction: one phrase owns the screen; supporting information stays at the edges. */ .word-clip{display:inline-block;overflow:clip;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}.word-rise{display:inline-block;will-change:transform} .feature-stage{height:100svh;min-height:600px;padding:0;background:var(--paper)} .feature-copy,.vybe-feature .feature-copy,.studio-feature .feature-copy{position:absolute;inset:0;width:auto;margin:0;z-index:3;pointer-events:none} .feature-copy>.eyebrow{position:absolute;left:4%;top:112px;margin:0;font-size:9px} .feature h2.canvas-title,.vybe-feature h2.canvas-title{position:absolute;left:3.4%;right:3.4%;top:155px;bottom:185px;max-width:none;font-size:min(11.2vw,calc((100svh - 295px)/2.55));display:flex;flex-direction:column;justify-content:space-between;line-height:.84;letter-spacing:-.025em;font-weight:800;pointer-events:none;paint-order:stroke fill;-webkit-text-stroke:1px #efede7a6} .canvas-line{display:block;white-space:nowrap}.canvas-line.line-2{text-align:right}.canvas-line.line-3{text-align:left}.vybe-feature .canvas-line.line-2{font-size:.65em;text-align:left;padding-left:7%}.vybe-feature .canvas-line.line-3{text-align:right}.studio-feature .canvas-line.line-1{font-size:.9em}.studio-feature .canvas-line.line-2{text-align:left}.studio-feature .canvas-line.line-3{text-align:right} .feature-description{position:absolute;left:4%;bottom:78px;width:340px;max-width:34%;font-size:14px;line-height:1.45;margin:0;text-wrap:pretty} .feature-copy>.text-link{position:absolute;right:4%;bottom:82px;pointer-events:auto;font-size:12px;gap:35px;background:#efede7dd;padding:10px 0} .feature-art,.vybe-feature .feature-art,.studio-feature .feature-art{position:absolute;inset:12% 0 9%;width:100%;height:auto;margin:0;z-index:2;mix-blend-mode:multiply;will-change:transform} .feature-art>img,.feature-art .color-pass img{object-fit:contain}.feature-art .color-pass{clip-path:none} .feature-art{mask-image:linear-gradient(to bottom,transparent 0%,black 13%,black 83%,transparent 100%)} .feature-art img{opacity:.93}.feature-caption{bottom:22px;left:4%;right:4%;font-size:8px}.scene-index,.vybe-feature .scene-index{top:108px;right:4%;left:auto;font-size:29px} .service-story{min-height:100svh;grid-template-columns:1fr;gap:25px;padding:115px 5% 70px;align-content:center}.service-heading h2{font-size:clamp(60px,8.8vw,150px);line-height:.9;letter-spacing:-.02em}.service-heading>p:last-child{position:absolute;left:5%;bottom:95px;max-width:28%;font-size:16px}.service-list{margin-left:auto;width:52%;margin-top:15px}.service-list details{box-sizing:border-box}.service-list summary{min-height:31px}.service-list details p{margin-bottom:4px} .difference{min-height:100svh;display:flex;justify-content:center;flex-direction:column}.difference h2{font-size:clamp(60px,9.4vw,155px)}.principles{margin-top:55px}.manifesto,.attention-bridge{min-height:100svh}.attention-bridge h2{padding-top:8px}.contact{min-height:100svh} @media(min-width:801px) and (max-height:700px){.feature-copy>.eyebrow{top:105px;font-size:8px}.feature h2.canvas-title,.vybe-feature h2.canvas-title{top:142px;bottom:175px;font-size:min(11.5vw,calc((100svh - 290px)/2.4))}.feature-description{font-size:12px;max-width:36%;width:370px;bottom:73px}.feature-copy>.text-link{bottom:79px;font-size:11px}.feature-caption{bottom:20px;font-size:7px}.service-story{padding-top:105px;padding-bottom:45px}.service-heading h2{font-size:68px}.service-list{margin-top:0}.service-list details{padding:16px 0}.service-heading>p:last-child{bottom:80px;font-size:14px}.difference{padding-top:100px;padding-bottom:60px}.difference h2{font-size:80px}.principles{margin-top:35px}} @media(max-width:800px){.feature-stage{height:100svh;min-height:760px;display:block}.feature-copy>.eyebrow{top:109px;left:6%;font-size:8px;max-width:80%}.feature h2.canvas-title,.vybe-feature h2.canvas-title{top:158px;bottom:270px;left:5%;right:5%;font-size:17.5vw;line-height:.9}.studio-feature .canvas-line.line-1{font-size:.72em}.byte-feature .canvas-line.line-3{font-size:.88em}.feature-description{left:6%;bottom:125px;max-width:88%;width:340px;font-size:14px}.feature-copy>.text-link{left:6%;right:auto;bottom:62px;font-size:12px;background:transparent}.feature-art,.vybe-feature .feature-art,.studio-feature .feature-art{position:absolute;inset:23% -38% 22%;width:auto;height:auto;margin:0}.feature-art img{opacity:.8}.feature-caption{left:6%;right:6%;bottom:18px;font-size:6px}.scene-index,.vybe-feature .scene-index{top:108px;right:6%;font-size:24px}.service-story{display:flex;flex-direction:column;justify-content:center;padding:95px 6% 70px;gap:30px}.service-heading h2{font-size:15vw}.service-heading>p:last-child{position:static;max-width:100%;font-size:15px;margin-top:25px}.service-list{width:100%;margin:0}.difference h2{font-size:15vw}.feature-description,.feature-copy>.text-link{paint-order:stroke fill;-webkit-text-stroke:0}.principles{margin-top:35px}.word-rise{will-change:auto}} @media(prefers-reduced-motion:reduce){.word-rise{transform:none!important;opacity:1!important;will-change:auto}.feature-art .color-pass{opacity:1!important}.feature-art .wire-art{opacity:0!important}} .material-ink{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}.ink-text{position:relative;width:100%;height:100%}.feature .ink-text h2.canvas-title{color:#fff;-webkit-text-stroke:0}.feature h2.canvas-title{-webkit-text-stroke:0} .feature{scroll-margin-top:-105px}@media(max-width:800px){.feature{scroll-margin-top:-90px}} @media(min-width:801px) and (max-height:700px){.feature h2.canvas-title,.vybe-feature h2.canvas-title{font-size:min(11.5vw,calc((100svh - 310px)/2.4))}} /* Precision / creativity: clean silhouettes, liquid controls, and portfolio proofs. */ .site-header nav a{position:relative;transition:color .25s,transform .35s cubic-bezier(.23,1,.32,1)} .site-header nav a:before{content:'';position:absolute;inset:3px -5px;background:#fa503415;border-radius:50%;transform:scale(.5);opacity:0;transition:transform .4s cubic-bezier(.23,1,.32,1),opacity .25s} .site-header nav a:hover,.site-header nav a:focus-visible{color:#c6321e;transform:translateY(-2px)}.site-header nav a:hover:before,.site-header nav a:focus-visible:before{transform:scale(1);opacity:1} .boil-button{position:relative;isolation:isolate;overflow:hidden}.boil-label{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}.boil-fill{position:absolute!important;inset:0;z-index:0;pointer-events:none;transform:none!important}.boil-fill:before{content:'';position:absolute;inset:0;background:#c93924;transform:translateY(110%);border-radius:50% 50% 0 0;transition:transform .65s cubic-bezier(.22,1,.36,1),border-radius .6s}.boil-fill i{position:absolute;width:28%;aspect-ratio:1;border-radius:50%;left:calc(var(--i)*15% - 10%);bottom:-110%;background:#c93924;transition:bottom .65s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i)*18ms)}.boil-button:hover .boil-fill:before,.boil-button:focus-visible .boil-fill:before{transform:translateY(0);border-radius:0}.boil-button:hover .boil-fill i,.boil-button:focus-visible .boil-fill i{bottom:-20%;animation:boiling 1.7s calc(var(--i)*-.19s) ease-in-out infinite}.boil-button:hover,.boil-button:focus-visible{color:white!important}.boil-button .boil-label>span{transition:transform .35s}.boil-button:hover .boil-label>span{transform:translate(3px,-3px)}.feature-copy>.text-link.boil-button{padding:14px 18px;min-width:195px}.project>.boil-label{font-size:inherit;letter-spacing:inherit} @keyframes boiling{0%,100%{transform:translateY(5%) scale(.9);background:#c93924}50%{transform:translateY(-45%) scale(1.15);background:#e24a2f}} .contact{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;align-items:center;gap:8%;background:#efede7}.contact>.signal-scene{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:-2;mix-blend-mode:multiply;pointer-events:none}.contact>.signal-scene img{width:100%;height:100%;object-fit:cover;opacity:.74;transform:scale(1.2)}.contact:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#efede7ed 0%,#efede7a8 32%,#efede730 49%,#efede7db 64%,#efede7f2 100%)}.contact-copy{position:relative}.contact-copy .email-link{display:inline-block;margin-top:44px}.contact #project-form{position:relative}.contact .signal-scene canvas{opacity:.35} .work-reserved{overflow:hidden;min-height:100svh;padding-top:115px;padding-bottom:65px}.proof-carousel{max-width:1220px;margin:52px auto 0;outline-offset:10px}.proof-stack{position:relative;height:clamp(330px,49vw,530px);isolation:isolate;touch-action:pan-y;cursor:grab}.proof-stack:before,.proof-stack:after{content:'';position:absolute;inset:0;border:1px solid #a9a59a;background:#dedbd2;transform:rotate(-2deg);z-index:-1}.proof-stack:after{transform:rotate(1.3deg);background:#e8e4dc}.proof-sheet{position:absolute;inset:0;padding:28px 32px;background:#e5e1d7;overflow:hidden;border:1px solid #aaa69c;display:flex;flex-direction:column;justify-content:space-between}.proof-sheet[hidden]{display:none}.proof-meta,.proof-foot{display:flex;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:1.6px;z-index:2;position:relative}.proof-sheet h3{font:800 clamp(60px,10vw,144px)/.85 var(--display);letter-spacing:-.025em;position:relative;z-index:2;margin:0}.proof-sheet h3>span{display:block;font:400 clamp(15px,2vw,27px)/1.4 var(--body);letter-spacing:-.02em;margin-top:14px}.proof-art{position:absolute;inset:0;left:42%;display:grid;place-items:center;opacity:.85}.proof-art i{position:absolute;width:52%;aspect-ratio:1;border:1px solid #8d3020;transform:rotate(45deg);background:#db5d3820}.proof-art i:nth-child(2){width:65%}.proof-art i:nth-child(3){width:78%}.proof-art i:nth-child(4){width:91%}.creative-art i{border-radius:48% 52% 28% 72%;background:#cf345633;border-color:#c73956;transform:rotate(-25deg)}.creative-art i:nth-child(2){transform:rotate(15deg)}.creative-art i:nth-child(3){transform:rotate(55deg)}.creative-art i:nth-child(4){transform:rotate(95deg)}.together-art i{border-radius:50%;background:#d54b3022}.together-art i:nth-child(even){border-radius:0;transform:rotate(35deg)}.proof-controls{display:flex;align-items:center;gap:12px;margin-top:35px}.proof-controls p{font-size:9px;letter-spacing:1.6px;margin:auto}.proof-count{font-size:12px;font-variant-numeric:tabular-nums}.proof-controls button{border:1px solid #aaa69c;border-radius:50%;background:transparent;width:48px;height:48px;font-size:22px;cursor:pointer;transition:background .25s,color .25s,transform .25s}.proof-controls button:hover{background:var(--ink);color:white;transform:rotate(-12deg)} @media(max-width:800px){.contact{padding-top:100px;gap:45px}.contact>.signal-scene img{object-fit:cover;transform:scale(1.1);opacity:.5}.contact:before{background:linear-gradient(#efede7bb,#efede790 25%,#efede7e8 52%,#efede7ee)}.proof-carousel{margin-top:35px}.proof-stack{height:440px}.proof-sheet{padding:23px 18px}.proof-meta,.proof-foot{font-size:7px;letter-spacing:1px;gap:14px}.proof-foot{align-items:end}.proof-foot span{text-align:right;max-width:95px}.proof-art{left:15%;top:-15%;opacity:.55}.proof-sheet h3{font-size:18vw}.proof-sheet h3>span{font-size:17px;max-width:200px}.proof-controls p{font-size:7px;max-width:125px;line-height:1.6}.proof-controls{gap:8px}.proof-controls button{width:42px;height:42px}.work-reserved{padding-top:100px}.contact h2{font-size:18vw}} @media(prefers-reduced-motion:reduce){.boil-fill i{animation:none!important}.boil-fill:before,.boil-fill i,.site-header nav a,.proof-controls button{transition:none}} /* Readability and intentional resting states. */ .boil-button>.boil-label{font-size:inherit!important;letter-spacing:inherit!important;transform:none!important;line-height:1.3}.boil-button>.boil-fill{display:block;width:100%;height:100%;overflow:hidden;opacity:0;transition:opacity .2s}.boil-fill i{opacity:0}.boil-button:hover>.boil-fill,.boil-button:focus-visible>.boil-fill{opacity:1}.boil-button:hover .boil-fill i,.boil-button:focus-visible .boil-fill i{opacity:1}.boil-fill:before{transition:transform .45s cubic-bezier(.22,1,.36,1),border-radius .45s}.feature-copy>.text-link.boil-button{font-size:14px}.send-project{font-size:13px;min-height:58px}.project{font-size:12px} @media(hover:none){.boil-button:hover>.boil-fill{opacity:0}.boil-button:hover{color:inherit!important}.project:hover,.send-project:hover{color:var(--paper)!important}.boil-fill i{animation:none!important}} #vybe .material-ink,#studio .material-ink{display:none}.feature-description{font-size:16px;width:390px;max-width:35%;line-height:1.5}.feature-copy>.eyebrow{font-size:11px}.feature-caption{font-size:9px}.manifesto-foot p{font-size:19px;line-height:1.55;max-width:570px}.service-heading>p:last-child{font-size:18px;line-height:1.55;max-width:31%}.service-list details>p{font-size:17px;line-height:1.6}.service-list summary{font-size:28px}.principles p{font-size:17px;line-height:1.6}.proof-meta,.proof-foot{font-size:11px}.proof-controls p{font-size:11px}.proof-count{font-size:14px} #work{scroll-margin-top:-105px}.proof-controls{margin:0 0 28px}.proof-carousel{margin-top:30px}.work-reserved{padding-bottom:70px} .contact #project-form{padding:34px;border:1px solid #ffffffb0;border-radius:22px;background:#f8f6f080;backdrop-filter:blur(22px) saturate(.8);-webkit-backdrop-filter:blur(22px) saturate(.8);box-shadow:0 18px 60px #49221912,inset 0 1px 0 #ffffffcc;gap:22px}.contact #project-form label,.contact legend{font-size:11px;letter-spacing:1.25px}.contact input,.contact textarea,.contact select{font-size:16px}.contact .form-note{font-size:12px;line-height:1.5}.contact{gap:5%} .loader{perspective:900px}.cinema-title{transform-style:preserve-3d;transform-origin:50% 48%}.cinema-wordmark{width:min(68vw,950px);height:auto;overflow:visible;filter:drop-shadow(0 2px 0 #8f8980) drop-shadow(0 5px 0 #c0b9ad) drop-shadow(0 14px 18px #32251c30)}.loader.brand-phase{animation:cinema-curtain 3.6s both}.loader.brand-phase .cinema-title{animation:logo-depth-flight 3.6s both}.loader.done{animation:none;background:transparent} @keyframes cinema-curtain{0%,42%{background:var(--paper)}76%,100%{background:transparent}} @keyframes logo-depth-flight{0%{opacity:0;transform:translateZ(-220px) rotateX(9deg);animation-timing-function:cubic-bezier(.23,1,.32,1)}26%,48%{opacity:1;transform:translateZ(0) rotateX(0deg);animation-timing-function:cubic-bezier(.77,0,.175,1)}84%{opacity:1;transform:translateZ(820px);filter:blur(0)}100%{opacity:0;transform:translateZ(890px);filter:blur(3px)}} @media(min-width:801px) and (max-height:700px){.feature-description{font-size:14px;bottom:65px;max-width:37%}.feature-copy>.text-link.boil-button{bottom:72px}.feature h2.canvas-title{bottom:185px}.contact{padding-top:110px;padding-bottom:60px}.contact #project-form{gap:17px;padding:26px}} @media(max-width:800px){#work{scroll-margin-top:-90px}.feature-description{font-size:15px;max-width:88%;width:350px}.feature-copy>.eyebrow{font-size:10px;max-width:80%;line-height:1.5}.feature-caption{font-size:8px}.manifesto-foot p{font-size:17px}.service-heading>p:last-child{max-width:100%;font-size:17px}.service-list summary{font-size:24px}.service-list details>p{font-size:16px}.proof-meta,.proof-foot{font-size:9px}.proof-controls p{font-size:9px}.proof-count{font-size:12px}.contact #project-form{padding:24px 18px;border-radius:18px;gap:22px}.contact{padding-left:5%;padding-right:5%}.contact .form-row{grid-template-columns:1fr;gap:22px}.contact #project-form fieldset{gap:7px}.contact #project-form fieldset span{padding:12px 9px}.cinema-wordmark{width:82vw}.feature-copy>.text-link.boil-button{font-size:13px}.proof-controls{margin-bottom:26px}} @media(prefers-reduced-motion:reduce){.loader.brand-phase,.loader.brand-phase .cinema-title{animation:none}.boil-button>.boil-fill,.boil-fill:before{transition:none}.cinema-wordmark{filter:none}} .cinema-wordmark{overflow:hidden} /* A complete brand sequence, then a single handoff to the site. */ body:not(.hero-ready) main,body:not(.hero-ready) .site-header{visibility:hidden;pointer-events:none} .loader.brand-phase{animation:none;background:var(--paper)} .loader.brand-phase .cinema-title{animation:wordmark-shutter 3.2s both;transform:none;filter:none;perspective:none} .cinema-wordmark{width:min(64vw,880px);filter:none;overflow:hidden} .cinema-title:after{content:'';position:absolute;top:calc(50% + 11vw);width:min(64vw,880px);height:1px;background:linear-gradient(90deg,transparent,#c93924,transparent);transform:scaleX(0)} .loader.brand-phase .cinema-title:after{animation:wordmark-rule 3.2s both} .loader.done{animation:none;opacity:0;visibility:hidden;transition:none;background:var(--paper)} .hero-ready .site-header{transition:opacity .65s var(--ease-out)} @keyframes wordmark-shutter{0%{opacity:0;clip-path:inset(49.8% 0 49.8% 0);transform:translateY(12px)}14%{opacity:1;clip-path:inset(49.8% 0 49.8% 0);transform:translateY(12px);animation-timing-function:cubic-bezier(.23,1,.32,1)}45%,73%{opacity:1;clip-path:inset(0 0 0 0);transform:translateY(0);animation-timing-function:cubic-bezier(.77,0,.175,1)}100%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(-24px)}} @keyframes wordmark-rule{0%,25%{transform:scaleX(0);opacity:0}48%,72%{transform:scaleX(1);opacity:.7}100%{transform:scaleX(.2);opacity:0}} @media(max-width:800px){.cinema-wordmark{width:82vw}.cinema-title:after{width:82vw;top:calc(50% + 16vw)}} @media(prefers-reduced-motion:reduce){.loader.brand-phase .cinema-title,.loader.brand-phase .cinema-title:after{animation:none}.hero-ready .site-header{transition:none}} .form-trap{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}.send-project:disabled{cursor:progress;opacity:.78}.send-project[aria-busy="true"] .boil-fill{opacity:1}.send-project[aria-busy="true"] .boil-fill:before{transform:translateY(0);border-radius:0} /* Contact confirmation: a brief, physical signal lock rather than a toast. */ #project-form{min-height:550px}.form-success{position:absolute;inset:34px;display:grid;grid-template-columns:128px minmax(0,1fr);align-content:center;align-items:center;gap:25px;opacity:0;transition:opacity .32s var(--ease-out)}.form-success.is-visible{opacity:1}.form-success[hidden]{display:none}.form-success>*{min-width:0}.success-figure{position:relative;width:122px;height:122px;display:grid;place-items:center}.success-figure svg{position:relative;z-index:2;width:62px;height:62px;overflow:hidden}.success-figure b{position:absolute;z-index:3;right:18px;bottom:16px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--red);color:var(--paper);font-size:13px;line-height:1;box-shadow:0 0 0 4px #f8f6f0}.success-orbit{position:absolute;inset:11px;border:1px solid #c6321e74;border-radius:48% 52% 53% 47%;animation:signal-lock 1.45s cubic-bezier(.23,1,.32,1) both}.success-orbit.orbit-b{inset:0;border-color:#1c1b1966;border-radius:55% 45% 45% 55%;animation-delay:.12s;animation-duration:1.6s}.success-orbit.orbit-c{inset:27px;border-color:#c6321e;border-radius:43% 57% 51% 49%;animation-delay:.25s;animation-duration:1.25s}.success-kicker{margin:0 0 9px;font-size:10px;letter-spacing:1.6px;color:var(--red)}.form-success h3{margin:0;font-family:var(--display);font-size:clamp(34px,4vw,56px);line-height:.88;letter-spacing:-.055em}.form-success>div:last-child>p:not(.success-kicker){margin:15px 0 22px;max-width:310px;font-size:14px;line-height:1.5}.send-another{border:0;background:transparent;border-bottom:1px solid var(--ink);padding:0 0 8px;font-size:10px;letter-spacing:1.3px}.send-another span{display:inline-block;margin-left:12px;color:var(--red);font-size:18px;transition:transform .25s var(--ease-out)}.send-another:hover span,.send-another:focus-visible span{transform:translate(4px,-4px)}#project-form.is-complete>:not(.form-success){opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .22s ease,transform .24s var(--ease-out)}@keyframes signal-lock{0%{opacity:0;transform:scale(.94) rotate(-12deg)}52%{opacity:1}100%{opacity:.75;transform:scale(1) rotate(18deg)}}@media(max-width:800px){#project-form{min-height:590px}.form-success{inset:24px 18px;grid-template-columns:1fr;gap:20px}.success-figure{width:110px;height:110px}.form-success h3{font-size:46px}}@media(prefers-reduced-motion:reduce){.form-success,#project-form.is-complete>:not(.form-success){transition:opacity .2s ease;transform:none}.success-orbit{animation:none;opacity:.75}.send-another span{transition:none}} /* Vybe: autonomous ember reveal with a static-image fallback. */ .ember-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}#vybe.ember-ready .wire-art,#vybe.ember-ready .color-pass{visibility:hidden}#vybe.ember-fallback .color-pass{visibility:visible;opacity:1!important}.ember-pause{border:0;border-bottom:1px solid currentColor;background:transparent;padding:7px 0;font-size:10px;letter-spacing:1.2px;color:var(--ink);white-space:nowrap}.ember-pause:hover{color:var(--red)}.ember-pause[hidden]{display:none}#vybe.ember-ready .phase-caption{display:none}#vybe .feature-caption{align-items:center;gap:18px}@media(max-width:800px){.ember-pause{font-size:9px;letter-spacing:.7px}#vybe .feature-caption>span:first-child{max-width:55%;font-size:7px;line-height:1.5}}@media(prefers-reduced-motion:reduce){#vybe.ember-ready .ember-canvas{display:none}#vybe.ember-ready .color-pass{visibility:visible;opacity:1!important}#vybe .ember-pause{display:none}} /* Hero studio introduction: scoped to the approved lower-left copy update. */ .hero .intro{bottom:64px;width:min(275px,27vw);font-size:12px;line-height:1.15;letter-spacing:-.12px} .hero .intro p{margin:0} .hero .intro-rule{display:block;width:34px;border-top:1px solid currentColor;margin:8px 0} @media(max-width:800px){.hero .intro{bottom:125px;width:min(270px,68vw);font-size:12px}} /* One restrained editorial loop above the right-side hero headline. */ .hero-statement{position:absolute;top:17%;right:3.1%;z-index:4;width:min(330px,25vw);margin:0;font-size:12px;line-height:1.35;letter-spacing:.01em;text-wrap:balance} .statement-line{display:block;overflow:hidden} .statement-line>span{display:block;animation:hero-statement-loop 9s var(--ease-out) infinite both} .statement-line:nth-child(2)>span{animation-delay:80ms} @keyframes hero-statement-loop{0%,4%{opacity:0;transform:translateY(70%)}12%,78%{opacity:1;transform:translateY(0)}90%,100%{opacity:0;transform:translateY(-55%)}} @media(max-width:800px){.hero-statement{top:365px;right:auto;left:5%;width:min(320px,90vw);font-size:11px}} @media(prefers-reduced-motion:reduce){.statement-line>span{animation:none;opacity:1;transform:none}} /* Responsive hero system: fluid support type, portrait composition and stable kinetic copy. */ .hero{height:100dvh;min-height:620px;--support-size:clamp(14px,.75vw,19px)} .hero .hero-statement{top:17%;right:3.1%;left:auto;width:min(31rem,29vw);font-size:var(--support-size);line-height:1.42;letter-spacing:-.01em;text-wrap:balance} .hero .annotation{font-size:clamp(12px,.68vw,16px)} .hero .footer{font-size:clamp(10px,.52vw,13px)} .hero .intro.build-copy{bottom:clamp(72px,9dvh,150px);width:clamp(235px,20vw,420px);font-size:clamp(13px,.68vw,17px);line-height:1.25;letter-spacing:.01em} .build-copy .intro-rule{margin:0 0 clamp(10px,1dvh,18px)} .build-prefix,.build-suffix{display:block;font-weight:550;letter-spacing:.08em} .build-rotator{position:relative;display:block;height:1.1em;margin:.18em 0 .24em;overflow:hidden;font-size:clamp(18px,1.55vw,34px);font-weight:750;line-height:1;letter-spacing:-.035em;color:var(--red)} .build-rotator>span{position:absolute;inset:0 auto auto 0;white-space:nowrap;opacity:0;animation:build-term-cycle 12s var(--ease-out) infinite both;animation-delay:calc(var(--term)*-3s)} @keyframes build-term-cycle{0%,20%{opacity:1;transform:translateY(0)}25%,95%{opacity:0;transform:translateY(-72%)}95.01%{opacity:0;transform:translateY(72%)}100%{opacity:1;transform:translateY(0)}} .statement-line>span{animation:none;opacity:1;transform:none} /* Consistent arrows do not depend on platform font glyphs. */ .ui-arrow{position:relative;display:inline-block;width:.9em;height:.9em;flex:0 0 auto;color:currentColor;vertical-align:-.08em} .ui-arrow:before,.ui-arrow:after{content:'';position:absolute;display:block;background:currentColor} .ui-arrow.ne:before{top:0;right:0;width:.52em;height:.52em;background:transparent;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor} .ui-arrow.ne:after{top:.08em;right:.02em;width:1.05em;height:1.5px;transform:rotate(-45deg);transform-origin:right center} .ui-arrow.e:before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%)} .ui-arrow.e:after{top:50%;right:0;width:.48em;height:.48em;background:transparent;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(-50%) rotate(45deg)} .ui-arrow.w{transform:rotate(180deg)} .ui-arrow.n{transform:rotate(-90deg)} .ui-arrow.s{transform:rotate(90deg)} .ui-arrow.se{transform:rotate(90deg)} .ui-arrow.se:before{top:0;right:0;width:.52em;height:.52em;background:transparent;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor} .ui-arrow.se:after{top:.08em;right:.02em;width:1.05em;height:1.5px;transform:rotate(-45deg);transform-origin:right center} .skip-intro,.email-link,.site-footer>a:last-child,.small-index{display:inline-flex;align-items:center;gap:.7em} .proof-foot .ui-arrow{margin-left:.55em} .proof-controls .ui-arrow{font-size:15px} #mobile-menu nav i{display:grid;place-items:center;width:34px;height:34px} #mobile-menu nav i .ui-arrow{font-size:16px} /* Second section: asymmetric manifesto with a structured studio narrative. */ .manifesto{display:block;min-height:100dvh;padding-top:clamp(125px,14dvh,190px);padding-bottom:clamp(70px,8dvh,120px)} .manifesto-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(310px,.62fr);gap:clamp(48px,7vw,140px);align-items:end;margin-top:clamp(42px,6dvh,90px)} .manifesto h2{font-size:clamp(62px,6.25vw,126px);line-height:.98;margin:0;max-width:none} .manifesto .feeling-line{padding-left:15%} .manifesto-context{position:relative;padding-left:clamp(22px,2.3vw,46px);padding-bottom:.55em} .manifesto-context:before{content:'';position:absolute;left:0;top:.25em;bottom:.75em;width:1px;background:linear-gradient(var(--red),var(--rule))} .manifesto-lead{font-size:clamp(16px,1.05vw,21px);line-height:1.48;letter-spacing:-.02em;margin:0;max-width:34rem;text-wrap:pretty} .studio-lines{margin-top:clamp(28px,3.2dvh,50px)} .studio-lines p{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;margin:0;padding:12px 0;color:#4f4a44;font-size:clamp(14px,.9vw,18px);line-height:1.42} .studio-lines strong{color:var(--red);font-size:.7em;letter-spacing:.14em;text-transform:uppercase;padding-top:.36em} .studio-lines span{max-width:30rem} .manifesto-foot{margin-top:clamp(42px,6dvh,90px);align-items:center} .manifesto .small-index{font-size:clamp(9px,.6vw,12px);letter-spacing:.16em} @media(min-width:1800px){ .site-header{height:76px;padding:9px 24px} .brand .brand-full{width:230px;height:62px} .site-header nav{font-size:18px;gap:42px;margin-right:48px} .site-header .project{font-size:14px;padding:19px 28px} .hero .reveal-toggle{font-size:14px} .hero .reveal-toggle i{width:48px;height:48px} } @media(max-width:1100px) and (orientation:portrait){ .hero{--hero-title-top:clamp(112px,11dvh,150px);--headline-size:clamp(58px,10.8vw,104px);min-height:100dvh} .hero h1{top:var(--hero-title-top);font-size:var(--headline-size);line-height:.86} .hero .hero-statement{top:calc(var(--hero-title-top) + var(--headline-size)*3.55 + 18px);left:5%;right:auto;width:min(500px,82vw);font-size:clamp(14px,1.55vw,17px);line-height:1.42} .hero .intro.build-copy{bottom:clamp(96px,10dvh,132px);width:clamp(245px,42vw,370px);font-size:clamp(13px,1.3vw,15px)} .hero .annotation{font-size:clamp(12px,1.25vw,14px)} .hero .byte-label{left:6%;top:53%} .hero .vybe-label{left:auto;right:8%;top:50%} .hero .footer{font-size:clamp(10px,1vw,12px)} } @media(max-width:800px){ .hero{height:100dvh;min-height:720px;--hero-title-top:clamp(112px,14dvh,142px);--headline-size:clamp(48px,14.2vw,66px)} .hero h1{top:var(--hero-title-top);font-size:var(--headline-size);line-height:.86} .hero .hero-statement{top:calc(var(--hero-title-top) + var(--headline-size)*3.55 + 14px);left:5%;right:auto;width:90vw;font-size:clamp(13px,3vw,14px);line-height:1.38} .hero .intro.build-copy{bottom:112px;width:clamp(250px,72vw,320px);font-size:13px} .build-rotator{font-size:clamp(20px,5.7vw,27px)} .hero .byte-label{left:6%;top:58%} .hero .vybe-label{left:auto;right:6%;top:55%} .hero .annotation{font-size:11px} .hero .footer{font-size:9px} .manifesto{min-height:auto;padding:105px 6% 82px} .manifesto .section-top{display:flex;align-items:flex-start} .manifesto .section-top .eyebrow:last-child{margin-top:0;text-align:right} .manifesto-grid{grid-template-columns:1fr;gap:48px;margin-top:44px} .manifesto h2{font-size:clamp(45px,11.8vw,72px);line-height:1;max-width:100%} .manifesto .feeling-line{padding-left:6%} .manifesto-context{padding-left:20px;max-width:560px} .manifesto-lead{font-size:16px} .studio-lines p{grid-template-columns:58px minmax(0,1fr);gap:13px;font-size:15px;padding:10px 0} .manifesto-foot{margin-top:52px} } @media(max-width:480px){ .hero{--hero-title-top:clamp(105px,13dvh,126px);--headline-size:clamp(43px,14vw,60px)} .hero .hero-statement{width:88vw;font-size:13px} .hero .intro.build-copy{bottom:108px;width:72vw} .hero .annotation{font-size:10px} .manifesto .section-top{display:block} .manifesto .section-top .eyebrow:last-child{text-align:left;margin-top:9px} .manifesto h2{font-size:clamp(43px,12.5vw,60px)} .manifesto-context{padding-left:16px} .studio-lines p{grid-template-columns:1fr;gap:3px} .studio-lines strong{padding-top:0} } @media(max-height:700px) and (min-width:801px){ .hero .hero-statement{top:15%;font-size:13px} .hero .intro.build-copy{bottom:60px;font-size:12px} .build-rotator{font-size:20px} } @media(hover:hover) and (pointer:fine){ .menu-toggle span,.menu-toggle b,#mobile-menu nav a strong,#mobile-menu nav a i{transition:color .2s var(--ease-out),transform .25s var(--ease-out)} .menu-toggle:hover>span,.menu-toggle:focus-visible>span{color:var(--red);transform:translateX(-3px)} .menu-toggle:hover b:first-child,.menu-toggle:focus-visible b:first-child{transform:translateX(4px)} .menu-toggle:hover b:last-child,.menu-toggle:focus-visible b:last-child{transform:translateX(-4px)} #mobile-menu nav a:hover strong,#mobile-menu nav a:focus-visible strong{color:var(--red);transform:translateX(10px)} #mobile-menu nav a:hover i,#mobile-menu nav a:focus-visible i{color:var(--red);transform:translate(4px,-4px)} } @media(prefers-reduced-motion:reduce){ .build-rotator>span{animation:none;display:none;opacity:1;transform:none} .build-rotator>span:first-child{display:block} .menu-toggle span,.menu-toggle b,#mobile-menu nav a strong,#mobile-menu nav a i{transition:none} } /* Cardinal arrow geometry and final compact manifesto corrections. */ .ui-arrow.w:before,.ui-arrow.n:before,.ui-arrow.s:before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%)} .ui-arrow.w:after,.ui-arrow.n:after,.ui-arrow.s:after{top:50%;right:0;width:.48em;height:.48em;background:transparent;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(-50%) rotate(45deg)} @media(max-width:480px){.manifesto .section-top .eyebrow{display:block}.manifesto .section-top .eyebrow:last-child{margin-top:9px}} /* Interaction ownership: hover feedback overrides the completed menu-entry transform. */ @media(hover:hover) and (pointer:fine){ #mobile-menu nav a:hover strong,#mobile-menu nav a:focus-visible strong{transform:translateX(10px)!important} #mobile-menu nav a:hover i,#mobile-menu nav a:focus-visible i{transform:translate(4px,-4px)!important} } @media(min-width:1800px) and (min-height:1200px){.manifesto{display:flex;flex-direction:column;justify-content:center}} /* September hero copy swap: identity stays grounded; the changing offer sits beside SIDES. */ .hero .hero-statement{top:auto;right:auto;left:3.1%;bottom:clamp(76px,10dvh,150px);width:min(31rem,31vw);font-size:var(--support-size)} .hero .intro.build-copy{top:calc(130px + var(--headline-size)*1.72);right:3.1%;bottom:auto;left:auto;width:clamp(250px,22vw,420px)} /* Byte services: an editorial systems field, rendered in CSS to stay crisp and light. */ .byte-services{min-height:100svh;display:grid;grid-template-columns:minmax(250px,.72fr) minmax(330px,.9fr) minmax(390px,1fr);grid-template-rows:1fr auto;align-items:center;gap:clamp(28px,3vw,64px);padding-top:clamp(120px,13dvh,170px);padding-bottom:58px;overflow:hidden;background-color:var(--paper);background-image:linear-gradient(#7771 1px,transparent 1px),linear-gradient(90deg,#7771 1px,transparent 1px);background-size:42px 42px} .byte-services:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 48% 52%,#efede700 0 24%,var(--paper) 72%)} .byte-services>*{position:relative;z-index:1} .byte-services .service-heading{align-self:stretch;display:flex;flex-direction:column;justify-content:center} .byte-services .service-heading h2{font-size:clamp(60px,5.2vw,104px);line-height:.86;letter-spacing:-.025em} .byte-services .service-heading>p:last-of-type{position:static;max-width:28rem;margin:clamp(32px,5dvh,68px) 0 0;font-size:clamp(14px,.85vw,17px);line-height:1.55;text-wrap:pretty} .service-signoff{display:block;margin-top:32px;padding-top:18px;width:max-content;border-top:1px solid var(--red);font-size:9px;letter-spacing:.19em} .byte-services .service-list{width:auto;margin:0;align-self:center} .byte-services .service-list details{padding:0;border-color:#aaa69d} .byte-services .service-list details:first-child{border-color:#aaa69d} .byte-services .service-list summary{min-height:62px;padding:12px 4px;gap:20px;font-size:clamp(18px,1.35vw,26px);letter-spacing:-.035em} .byte-services .service-list summary>span{font-size:9px;letter-spacing:.12em} .byte-services .service-list summary i{font-family:var(--body);font-weight:300} .byte-services .service-list details>p{max-width:none;margin:0 0 18px 33px;padding:18px 20px;border:1px solid #d8402a80;color:#4c4843;background:#efede7c9;font-size:clamp(13px,.76vw,15px);line-height:1.55} .service-caption{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--rule);padding-top:17px;font-size:8px;letter-spacing:.18em} .service-visual{position:relative;width:100%;height:min(55dvh,570px);min-height:410px;perspective:1000px;isolation:isolate} .service-visual:after{content:'';position:absolute;left:12%;right:8%;bottom:6%;height:17%;border-radius:50%;background:#3d38311a;filter:blur(24px);transform:rotate(-4deg)} .visual-axis{position:absolute;z-index:0;background:#d8402a8a;transform-origin:center} .axis-x{left:2%;right:2%;top:52%;height:1px;transform:rotate(-9deg)} .axis-y{top:2%;bottom:2%;left:51%;width:1px;transform:rotate(5deg)} .visual-orbit{position:absolute;z-index:0;left:13%;top:17%;width:73%;height:66%;border:1px solid #a19c9345;transform:rotate(-9deg) skewX(-6deg)} .visual-orbit.orbit-b{left:24%;top:6%;width:54%;height:84%;border-color:#d8402a42;transform:rotate(16deg) skewY(8deg)} .visual-label{position:absolute;z-index:5;font-size:7px;line-height:1.7;letter-spacing:.17em;color:#59554f} .label-a{left:0;top:12%}.label-b{left:0;bottom:15%}.label-c{right:0;bottom:4%;text-align:right} .system-scene{position:absolute;z-index:2;inset:7% 5% 8%;opacity:0;transform:scale(.94) rotateY(-5deg);transition:opacity .36s ease,transform .7s var(--ease-out);transform-style:preserve-3d} .byte-services:has(.service-list details:nth-child(1)[open]) [data-scene="web"],.byte-services:has(.service-list details:nth-child(2)[open]) [data-scene="business"],.byte-services:has(.service-list details:nth-child(3)[open]) [data-scene="saas"],.byte-services:has(.service-list details:nth-child(4)[open]) [data-scene="integrations"]{opacity:1;transform:scale(1) rotateY(0)} .system-panel{position:absolute;display:block;width:48%;height:55%;border:1px solid #504c468f;background:linear-gradient(145deg,#f7f5efdd,#d8d3c9b5);box-shadow:13px 18px 34px #28241e18;transform:skewY(-6deg);transition:transform .65s var(--ease-out)} .system-panel:before{content:'';position:absolute;inset:8% 7% 69%;border:1px solid #8f898066;background:linear-gradient(90deg,#171513 0 28%,transparent 28%)} .system-panel:after{content:'';position:absolute;inset:38% 7% 10%;background:repeating-linear-gradient(#69645d66 0 1px,transparent 1px 12px)} .system-panel b{position:absolute;z-index:2;display:block;background:var(--red)} .system-panel b:nth-child(1){right:8%;top:10%;width:7px;height:7px;border-radius:50%}.system-panel b:nth-child(2){left:8%;bottom:12%;width:36%;height:3px}.system-panel b:nth-child(3){right:8%;bottom:12%;width:28%;height:28%;border-radius:50%;opacity:.72} [data-scene="web"] .panel-a{left:4%;top:20%;transform:translateZ(12px) skewY(-6deg)}[data-scene="web"] .panel-b{left:29%;top:7%;transform:translateZ(48px) skewY(-6deg)}[data-scene="web"] .panel-c{right:0;top:31%;width:31%;height:48%;transform:translateZ(80px) skewY(-6deg)} [data-scene="business"] .panel-a{left:7%;top:8%;width:34%;height:72%;transform:translateZ(18px) skewY(-6deg)}[data-scene="business"] .panel-b{left:36%;top:19%;width:38%;height:62%;transform:translateZ(58px) skewY(-6deg)}[data-scene="business"] .panel-c{right:0;top:2%;width:31%;height:76%;transform:translateZ(92px) skewY(-6deg)} [data-scene="saas"] .panel-a{left:4%;top:30%;width:31%;height:52%;transform:translateZ(15px) skewY(-6deg)}[data-scene="saas"] .panel-b{left:34%;top:6%;width:38%;height:72%;border-radius:48% 52% 45% 55%;transform:translateZ(65px) skewY(-3deg)}[data-scene="saas"] .panel-c{right:0;top:36%;width:32%;height:46%;transform:translateZ(95px) skewY(-6deg)} .system-pulse{position:absolute;z-index:6;left:49%;top:48%;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,var(--red) 20% 36%,#d8402a22 38% 70%,transparent 72%);box-shadow:0 0 28px #d8402a70;animation:service-pulse 2.8s ease-in-out infinite} .system-hub,.system-node{position:absolute;z-index:4;display:block;border:1px solid #5d5851;background:linear-gradient(145deg,#f8f6f0,#c9c3b9);box-shadow:8px 11px 18px #24211d20;transform:rotate(45deg)} .system-hub{left:42%;top:37%;width:82px;height:82px;border-color:var(--red);background:linear-gradient(145deg,#efede7,#bdb6aa)} .system-hub:after,.system-node:after{content:'';position:absolute;inset:25%;border:1px solid var(--red)} .system-node{width:48px;height:48px}.node-a{left:9%;top:17%}.node-b{right:8%;top:12%}.node-c{left:15%;bottom:9%}.node-d{right:13%;bottom:6%} .connector{position:absolute;z-index:1;left:49%;top:47%;height:1px;background:var(--red);transform-origin:left center}.connector-a{width:42%;transform:rotate(-145deg)}.connector-b{width:39%;transform:rotate(-38deg)}.connector-c{width:37%;transform:rotate(142deg)}.connector-d{width:35%;transform:rotate(38deg)} @keyframes service-pulse{50%{transform:scale(1.08);box-shadow:0 0 42px #d8402a8a}} @media(hover:hover) and (pointer:fine){.byte-services:has(.service-list details:hover) .system-scene{opacity:0;transform:scale(.94) rotateY(-5deg)}.byte-services:has(.service-list details:nth-child(1):hover) [data-scene="web"],.byte-services:has(.service-list details:nth-child(2):hover) [data-scene="business"],.byte-services:has(.service-list details:nth-child(3):hover) [data-scene="saas"],.byte-services:has(.service-list details:nth-child(4):hover) [data-scene="integrations"]{opacity:1;transform:scale(1.025) rotateY(0)}.byte-services .service-list summary{transition:color .22s ease,padding-left .35s var(--ease-out)}.byte-services .service-list summary:hover{color:var(--red);padding-left:12px}.byte-services .service-list summary:hover i{transform:rotate(90deg)}} @media(max-width:1100px) and (orientation:portrait){.hero .hero-statement{top:auto;left:5%;right:auto;bottom:clamp(98px,10dvh,145px);width:min(500px,72vw)}.hero .intro.build-copy{top:calc(var(--hero-title-top) + var(--headline-size)*1.72);right:5%;left:auto;bottom:auto;width:min(330px,40vw)}.byte-services{grid-template-columns:minmax(280px,.9fr) minmax(350px,1.1fr);grid-template-rows:auto 1fr auto;padding-top:125px}.byte-services .service-heading{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px}.byte-services .service-heading .eyebrow,.byte-services .service-heading h2{grid-column:1}.byte-services .service-heading>p:last-of-type{grid-column:2;grid-row:1/3;margin:0}.service-signoff{display:none}.service-visual{height:470px}.byte-services .service-list summary{font-size:20px}} @media(max-width:600px){.hero .hero-statement{top:auto;left:5%;right:auto;bottom:112px;width:min(330px,74vw);font-size:13px}.hero .intro.build-copy{top:calc(var(--hero-title-top) + var(--headline-size)*4 + 18px);left:5%;right:auto;bottom:auto;width:min(330px,86vw);font-size:12px}.hero .intro.build-copy .build-rotator{font-size:clamp(19px,5.3vw,25px)}.byte-services{display:flex;min-height:auto;flex-direction:column;align-items:stretch;padding:105px 6% 54px;gap:34px;background-size:32px 32px}.byte-services .service-heading{display:block}.byte-services .service-heading h2{font-size:clamp(58px,17vw,82px)}.byte-services .service-heading>p:last-of-type{margin-top:30px;font-size:15px}.service-signoff{display:block}.service-visual{height:390px;min-height:390px}.visual-label{font-size:6px}.system-panel{width:52%}.system-hub{width:66px;height:66px}.byte-services .service-list summary{min-height:58px;font-size:19px;gap:13px}.byte-services .service-list details>p{margin-left:0;padding:16px}.service-caption{width:100%;font-size:6px;line-height:1.5;gap:25px}.service-caption span:last-child{text-align:right}} @media(max-height:700px) and (min-width:801px){.hero .hero-statement{top:auto;bottom:66px}.hero .intro.build-copy{top:calc(130px + var(--headline-size)*1.64);right:3.1%;bottom:auto}} @media(prefers-reduced-motion:reduce){.system-scene,.byte-services .service-list summary{transition:none}.system-pulse{animation:none}} /* Reference 5: Byte structure resolves into Vybe signal around one decisive message. */ .attention-bridge{min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:clamp(115px,13dvh,170px) 5% clamp(72px,8dvh,110px);text-align:center;isolation:isolate;background:var(--paper)} .attention-content{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;width:min(76vw,980px)} .attention-content>.eyebrow{margin:0 0 clamp(20px,3dvh,38px);font-size:clamp(9px,.62vw,12px);letter-spacing:.25em} .attention-bridge h2{display:flex;flex-direction:column;align-items:center;width:100%;padding:0;margin:0;line-height:.8} .attention-first{font-size:clamp(82px,9.2vw,176px);line-height:.8;letter-spacing:-.035em;white-space:nowrap} .attention-second{font-size:clamp(190px,24vw,470px);line-height:.72;letter-spacing:-.045em;color:var(--red);white-space:nowrap} .attention-third{margin-top:clamp(30px,4dvh,54px);font-family:var(--body);font-size:clamp(13px,1.25vw,22px);font-weight:650;line-height:1;letter-spacing:.16em;white-space:nowrap} .attention-content>p:last-child{margin:clamp(18px,2.5dvh,28px) 0 0;font-size:clamp(13px,.86vw,16px);letter-spacing:-.01em} .attention-content>p:last-child strong{font-weight:650;text-transform:uppercase} .bridge-system{position:absolute;z-index:0;inset:7% -1% 2%;pointer-events:none;opacity:.78} .bridge-system svg{display:block;width:100%;height:100%;overflow:visible} .bridge-system path{fill:none;vector-effect:non-scaling-stroke} .bridge-grid path{stroke:#6e69621f;stroke-width:1} .bridge-signal path{stroke:#d8402a70;stroke-width:1.25} .bridge-waves path{stroke:#d8402a52;stroke-width:1.15} .bridge-node{fill:var(--paper);stroke:#656058;stroke-width:1.2;vector-effect:non-scaling-stroke} .bridge-node.hot{fill:var(--red);stroke:var(--red)} .bridge-side{position:absolute;z-index:2;top:50%;display:grid;gap:clamp(40px,7dvh,76px);transform:translateY(-50%);font-size:8px;line-height:1.8;letter-spacing:.2em;text-align:left;color:#716c65} .bridge-side b{position:relative;color:var(--ink);font-size:9px;letter-spacing:.2em} .bridge-side b:after{content:'';position:absolute;top:50%;height:1px;width:66px;background:var(--red)} .bridge-side-byte{left:3.7%}.bridge-side-byte b:after{left:calc(100% + 12px)} .bridge-side-vybe{right:3.7%;text-align:right}.bridge-side-vybe b:after{right:calc(100% + 12px)} .bridge-line{display:none} @media(max-width:800px){.attention-bridge{min-height:100svh;padding:110px 5% 72px}.attention-content{width:94vw}.attention-content>.eyebrow{max-width:76vw;line-height:1.6}.attention-first{font-size:clamp(55px,16vw,90px)}.attention-second{font-size:clamp(150px,43vw,245px)}.attention-third{margin-top:31px;font-size:clamp(10px,2.9vw,15px);letter-spacing:.1em}.attention-content>p:last-child{font-size:13px}.bridge-system{inset:7% -42% 1%;opacity:.7}.bridge-side{top:auto;bottom:11%;display:block}.bridge-side span{display:none}.bridge-side-byte{left:5%}.bridge-side-vybe{right:5%}.bridge-side b:after{width:32px}} @media(max-width:420px){.attention-first{font-size:15.2vw}.attention-second{font-size:42vw}.attention-third{font-size:10px}.bridge-side{bottom:9%}} @media(prefers-reduced-motion:reduce){.bridge-byte,.bridge-vybe,.bridge-node{transform:none!important;opacity:1!important}} /* Reference 6: editorial framing around the existing Vybe asset and ember animation. */ #vybe .feature-copy>.eyebrow{left:4%;top:112px;max-width:70%} #vybe h2.canvas-title{display:block;top:154px;bottom:auto;height:54%;font-size:min(10vw,calc((100svh - 285px)/2.5));line-height:.82} #vybe h2.canvas-title .canvas-line{position:absolute;padding:0;white-space:nowrap} #vybe h2.canvas-title .line-1{top:0;left:0;text-align:left} #vybe h2.canvas-title .line-2{top:.82em;left:7%;font-size:.62em;text-align:left} #vybe h2.canvas-title .line-3{top:1.5em;right:0;font-size:.96em;text-align:right} #vybe .feature-description{width:430px;max-width:34%;font-size:clamp(14px,.9vw,17px);line-height:1.48;text-wrap:pretty} #vybe .feature-copy>.text-link{min-width:min(300px,28vw);justify-content:space-between;font-size:clamp(12px,.78vw,15px)} .vybe-callouts{position:absolute;inset:0;z-index:5;pointer-events:none} .vybe-callout{position:absolute;font-size:9px;line-height:1;letter-spacing:.16em;color:#393631} .vybe-callout:before{content:'';position:absolute;top:50%;width:56px;height:1px;background:#d8402a99} .vybe-callout:after{content:'';position:absolute;top:calc(50% - 2px);width:5px;height:5px;border-radius:50%;background:var(--red)} .vybe-callout.identity{left:27%;top:34%}.vybe-callout.experience{left:31%;top:62%}.vybe-callout.interface{right:25%;top:23%}.vybe-callout.motion{right:22%;top:46%} .vybe-callout.identity:before,.vybe-callout.experience:before{left:calc(100% + 10px)}.vybe-callout.identity:after,.vybe-callout.experience:after{left:calc(100% + 64px)} .vybe-callout.interface:before,.vybe-callout.motion:before{right:calc(100% + 10px)}.vybe-callout.interface:after,.vybe-callout.motion:after{right:calc(100% + 64px)} .bridge-grid,.bridge-signal,.bridge-waves{will-change:clip-path,opacity} @media(max-width:800px){#vybe .feature-copy>.eyebrow{top:109px;left:6%;max-width:78%;line-height:1.5}#vybe h2.canvas-title{display:block;top:158px;bottom:auto;left:5%;right:5%;height:330px;font-size:15vw;line-height:.86}#vybe h2.canvas-title .line-2{top:.9em;left:5%;font-size:.68em}#vybe h2.canvas-title .line-3{top:1.78em;right:0;font-size:.9em}#vybe .feature-description{left:6%;bottom:125px;width:88%;max-width:360px;font-size:14px;line-height:1.45}#vybe .feature-copy>.text-link{left:6%;right:auto;bottom:62px;min-width:min(310px,88vw);font-size:12px}.vybe-callout{font-size:8px;letter-spacing:.12em}.vybe-callout:before{width:28px}.vybe-callout.identity{left:7%;top:46%}.vybe-callout.experience{left:7%;top:59%}.vybe-callout.interface{right:7%;top:39%}.vybe-callout.motion{right:7%;top:53%}.vybe-callout.identity:before,.vybe-callout.experience:before{left:calc(100% + 7px)}.vybe-callout.identity:after,.vybe-callout.experience:after{left:calc(100% + 33px)}.vybe-callout.interface:before,.vybe-callout.motion:before{right:calc(100% + 7px)}.vybe-callout.interface:after,.vybe-callout.motion:after{right:calc(100% + 33px)}} @media(max-width:420px){#vybe h2.canvas-title{font-size:14.5vw}.vybe-callout{font-size:7px}} @media(prefers-reduced-motion:reduce){.bridge-grid,.bridge-signal,.bridge-waves{clip-path:none!important;opacity:1!important;will-change:auto}} /* Live signal: three incoming tracks feed a four-way junction. */ .bridge-routes path{fill:none;vector-effect:non-scaling-stroke;stroke:#d8402a62;stroke-width:1.1} .bridge-outputs path{stroke:#d8402a56} .bridge-junction{fill:var(--red);stroke:var(--paper);stroke-width:2;vector-effect:non-scaling-stroke} .bridge-packet-halo{fill:#d8402a55;stroke:#d8402a75;stroke-width:1;vector-effect:non-scaling-stroke} .bridge-packet-core{fill:#f34e35;stroke:#fff8ee;stroke-width:1.5;vector-effect:non-scaling-stroke} @media(prefers-reduced-motion:reduce){.bridge-pulses{display:none}} /* Keep every Vybe label outside the display words at short and tall ratios. */ #vybe h2.canvas-title .line-2{top:1.44em} .vybe-callout.identity{top:53%;left:27%} @media(max-width:800px){#vybe h2.canvas-title .line-2{top:1.42em}#vybe h2.canvas-title .line-3{top:1.95em}} .vybe-callout{padding:3px 5px;background:#efede7e6} @media(min-width:801px){#vybe h2.canvas-title .line-3{top:1.68em}} .attention-bridge .bridge-signal path{stroke:#d8402a55} @media(max-width:800px){.attention-bridge .bridge-system{inset:18% -10% 14%}} /* Vybe services: four editorial views within the established paper/red system. */ .vybe-services{min-height:100svh;display:grid;grid-template-columns:minmax(270px,.86fr) minmax(310px,1.05fr) minmax(390px,1.12fr);grid-template-rows:1fr auto;gap:clamp(25px,3vw,58px);align-items:center;padding-top:clamp(122px,13dvh,170px);padding-bottom:52px;overflow:hidden;background-color:var(--paper);background-image:linear-gradient(#7771 1px,transparent 1px),linear-gradient(90deg,#7771 1px,transparent 1px);background-size:42px 42px} .vybe-services:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 48% 48%,#efede700 0 26%,var(--paper) 76%)} .vybe-services>*{position:relative;z-index:1;min-width:0} .vybe-services .service-heading{align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:0} .vybe-services .service-heading .eyebrow{margin:0 0 clamp(18px,3dvh,34px);font-size:10px} .vybe-services .service-heading h2{font-size:clamp(65px,5.4vw,112px);line-height:.83;letter-spacing:-.025em;text-wrap:nowrap} .vybe-services .service-heading h2 span,.vybe-services .service-heading h2 em{display:block;font-style:normal} .vybe-services .vybe-motto{white-space:pre-line;margin:clamp(25px,4dvh,48px) 0 0;font-size:clamp(10px,.7vw,13px);line-height:1.55;letter-spacing:.12em;font-weight:650} .vybe-services .vybe-intro{position:static;max-width:25rem;margin:clamp(18px,3dvh,36px) 0 0;font-size:clamp(14px,.85vw,17px);line-height:1.6;text-wrap:pretty} .vybe-services .service-signoff{margin-top:clamp(24px,4dvh,46px);padding-top:15px} .vybe-service-art{height:min(62dvh,640px);min-height:450px;align-self:center;isolation:isolate} .vybe-art-grid{position:absolute;inset:6% -10%;background:linear-gradient(#d8402a24 1px,transparent 1px),linear-gradient(90deg,#d8402a24 1px,transparent 1px);background-size:35px 35px;mask-image:radial-gradient(ellipse,#000 25%,transparent 72%)} .vybe-service-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateY(15px) scale(.96);transition:opacity .38s ease,transform .65s var(--ease-out);filter:drop-shadow(14px 18px 22px #2c28201c)} .vybe-service-art img.is-active{opacity:1;transform:translateY(0) scale(1)} .vybe-art-index{position:absolute;right:-1%;bottom:3%;font-size:8px;letter-spacing:.16em;color:#736b63} .vybe-art-index b{font-weight:500;color:var(--red)} .vybe-services .service-list{width:auto;margin:0;align-self:center} .vybe-services .service-list details{padding:0;border-color:#aaa69d} .vybe-services .service-list details:first-child{border-color:#aaa69d} .vybe-services .service-list summary{min-height:70px;padding:14px 2px;gap:18px;font-size:clamp(17px,1.32vw,26px);line-height:1.12;letter-spacing:-.035em} .vybe-services .service-list summary>span{flex:none;font-size:9px;letter-spacing:.12em} .vybe-services .service-list summary i{flex:none;font-family:var(--body);font-size:22px;font-weight:300} .vybe-services .service-list details>p{max-width:none;margin:0 0 12px 29px;padding:0 0 0 15px;border-left:1px solid var(--red);color:#4c4843;font-size:clamp(13px,.8vw,16px);line-height:1.55} .vybe-keywords{margin:0 0 22px 44px;color:#6b655d;font-size:9px;line-height:1.7;letter-spacing:.07em} .vybe-keywords span{color:var(--red);padding:0 3px} .vybe-services .service-caption{grid-column:1/-1} @media(hover:hover) and (pointer:fine){.vybe-services .service-list summary{transition:color .22s ease,padding-left .32s var(--ease-out)}.vybe-services .service-list summary:hover{color:var(--red);padding-left:10px}.vybe-services .service-list summary:hover i{transform:rotate(90deg)}} @media(max-width:1200px){.vybe-services{grid-template-columns:minmax(240px,.88fr) minmax(250px,1fr) minmax(340px,1.1fr);gap:22px}.vybe-services .service-heading h2{font-size:clamp(59px,5.2vw,86px)}.vybe-services .service-list summary{font-size:18px}} @media(max-width:1050px){.vybe-services{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto;align-items:start;padding-top:125px;gap:18px 30px}.vybe-services .service-heading{grid-column:1;justify-content:start}.vybe-service-art{grid-column:2;grid-row:1;height:530px;min-height:0}.vybe-services .service-list{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 25px;width:100%}.vybe-services .service-list details:nth-child(2){border-top:1px solid #aaa69d}.vybe-services .service-heading h2{font-size:clamp(63px,8vw,100px)}.vybe-services .service-caption{grid-row:3}.vybe-services .service-list summary{font-size:19px}} @media(max-width:680px){.vybe-services{display:flex;flex-direction:column;min-height:auto;padding:105px 6% 52px;gap:0;background-size:32px 32px}.vybe-services .service-heading{width:100%}.vybe-services .service-heading h2{font-size:clamp(65px,15.5vw,104px);line-height:.86}.vybe-services .service-heading .eyebrow{font-size:9px;margin-bottom:18px}.vybe-services .vybe-motto{margin-top:27px;font-size:10px}.vybe-services .vybe-intro{margin-top:18px;font-size:15px;max-width:34rem}.vybe-services .service-signoff{margin-top:22px;font-size:8px}.vybe-service-art{width:100%;height:clamp(330px,95vw,530px);min-height:0;margin:7px 0 22px}.vybe-services .service-list{display:block;width:100%}.vybe-services .service-list summary{min-height:63px;font-size:clamp(18px,4.8vw,23px);gap:13px}.vybe-services .service-list details>p{font-size:14px;max-width:none}.vybe-keywords{font-size:8px}.vybe-services .service-caption{width:100%;margin-top:37px;font-size:7px;line-height:1.5;gap:20px}.vybe-services .service-caption span:last-child{text-align:right}} @media(max-width:370px){.vybe-services .service-heading h2{font-size:15vw}.vybe-services .service-list summary{font-size:17px}} @media(prefers-reduced-motion:reduce){.vybe-service-art img,.vybe-services .service-list summary{transition:none}}@media(min-width:1800px){.vybe-services .service-heading h2{font-size:clamp(112px,6.4vw,150px)}.vybe-services .service-heading .eyebrow{font-size:12px}.vybe-services .vybe-motto{font-size:14px}.vybe-services .vybe-intro{font-size:20px;max-width:31rem}.vybe-services .service-signoff{font-size:11px}.vybe-service-art{height:min(64dvh,800px)}.vybe-services .service-list summary{font-size:clamp(25px,1.5vw,32px);min-height:86px}.vybe-services .service-list details>p{font-size:19px}.vybe-keywords{font-size:11px}.vybe-services .service-caption{font-size:10px}}@media(min-width:1800px){.vybe-services{grid-template-columns:minmax(0,1.1fr) minmax(0,.95fr) minmax(0,1.1fr)}.vybe-services .service-heading h2{font-size:clamp(100px,5vw,112px)}} @media(min-width:2800px){.vybe-services .service-heading h2{font-size:clamp(138px,4.5vw,170px)}.vybe-services .vybe-intro{font-size:24px;max-width:38rem}.vybe-services .vybe-motto{font-size:18px}.vybe-service-art{height:min(65dvh,1100px)}.vybe-services .service-list summary{font-size:38px;min-height:108px}.vybe-services .service-list details>p{font-size:24px}.vybe-keywords{font-size:14px}.vybe-services .service-caption{font-size:13px}} /* Studio reference 8: editorial labels around the existing, untouched art scene. */ .studio-feature .studio-callout,.studio-feature .studio-bridge-label,.studio-feature .studio-impact-label{position:absolute;z-index:4;font-family:var(--body);font-size:9px;line-height:1.55;letter-spacing:.2em;pointer-events:none;text-shadow:0 1px 3px var(--paper),0 -1px 3px var(--paper)} .studio-feature .studio-callout strong,.studio-feature .studio-callout span{display:block} .studio-feature .studio-callout strong{font-size:11px;letter-spacing:.22em;margin-bottom:10px} .studio-feature .studio-callout strong:after{content:'';display:block;width:10px;height:1px;margin-top:8px;background:currentColor} .studio-feature .studio-byte{left:21%;top:42%} .studio-feature .studio-vybe{right:9%;top:29%} .studio-feature .studio-bridge-label{left:33%;top:59%;color:#4f5b5d} .studio-feature .studio-impact-label{left:69%;top:74%;color:var(--red)} .studio-feature .feature-description{width:min(31vw,420px);max-width:40%;font-size:clamp(15px,1.07vw,17px);line-height:1.45} @media(max-width:1199px){.studio-feature .studio-callout,.studio-feature .studio-bridge-label,.studio-feature .studio-impact-label{display:none}} @media(max-width:800px){.studio-feature .feature-description{left:6%;bottom:125px;width:350px;max-width:88%;font-size:15px}}@media(min-width:1700px){.studio-feature .feature-copy{max-width:none}.studio-feature .studio-callout,.studio-feature .studio-bridge-label,.studio-feature .studio-impact-label{font-size:clamp(10px,.65vw,16px)}.studio-feature .studio-callout strong{font-size:clamp(12px,.8vw,19px)}}@media(min-width:1700px){.studio-feature .studio-impact-label{top:84%}} @media(min-width:2800px){.studio-feature .studio-callout,.studio-feature .studio-bridge-label,.studio-feature .studio-impact-label{font-size:clamp(25px,.8vw,32px)}.studio-feature .studio-callout strong{font-size:36px}.studio-feature .studio-impact-label{left:52%;top:72%}.studio-feature .feature-description{bottom:120px;width:min(34vw,900px);max-width:45%;font-size:clamp(28px,1vw,38px);line-height:1.35}.studio-feature .feature-copy>.text-link{bottom:120px;font-size:30px;gap:55px}.studio-feature .feature-copy>.eyebrow{font-size:20px}.studio-feature .feature-caption{bottom:35px;font-size:20px}} /* Reference 9: image-led editorial principles, scoped to the difference section. */ .difference{display:flex;flex-direction:column;justify-content:center;min-height:100svh;padding:clamp(100px,12dvh,145px) 5% 30px;overflow:hidden} .difference-top{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.72fr) minmax(75px,.22fr);gap:3%;align-items:start} .difference .eyebrow{margin:0 0 13px} .difference h2{font-size:clamp(68px,6vw,118px);line-height:.82} .difference-intro{position:relative;margin:28px 0 0;max-width:390px;padding-top:18px;font-size:clamp(15px,1.05vw,18px);line-height:1.5;text-wrap:pretty} .difference-intro:before,.difference-side-note:after{content:'';position:absolute;left:0;top:0;width:28px;height:1px;background:var(--ink)} .difference-side-note{position:relative;margin:44px 0 0;padding-bottom:15px;font-size:9px;line-height:1.45;letter-spacing:.18em} .difference-side-note:after{top:auto;bottom:0} .difference .principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3.4%;margin-top:clamp(24px,3dvh,44px)} .difference .principles article{min-width:0;border-top:1px solid var(--rule);padding-top:11px} .principle-index{display:block;font-size:9px;letter-spacing:.18em;font-weight:600} .principle-visual{position:relative;aspect-ratio:2.45;overflow:hidden;margin-top:10px;background:#d7d2c8;isolation:isolate} .principle-visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)} .principle-label{position:absolute;z-index:1;top:18%;font-size:clamp(7px,.55vw,10px);line-height:1.5;letter-spacing:.18em;font-weight:600;text-shadow:0 1px 5px #0005} .principle-label.label-left{left:10%}.principle-label.label-right{right:7%} .clarity-visual .principle-label,.craft-visual .label-left{color:#171513;text-shadow:0 1px 5px #fff9} .craft-visual .label-right,.purpose-visual .principle-label{color:#fff} .difference .principles h3{margin:13px 0 7px;font-size:clamp(20px,1.5vw,27px);font-weight:550;letter-spacing:-.04em;line-height:1.12} .difference .principles p{max-width:none;margin:0;color:#605b55;font-size:clamp(14px,1vw,18px);line-height:1.46;text-wrap:pretty} .difference-caption{display:flex;justify-content:space-between;gap:20px;margin-top:26px;padding-top:11px;border-top:1px solid var(--rule);font-size:8px;letter-spacing:.19em} @media(hover:hover) and (pointer:fine){.difference .principles article:hover img{transform:scale(1.045)}} @media(max-width:800px){.difference{display:block;min-height:auto;padding:105px 6% 45px}.difference-top{display:block}.difference h2{font-size:clamp(57px,14vw,84px)}.difference-intro{max-width:36rem;margin:27px 0 0;font-size:16px}.difference-side-note{display:none}.difference .principles{grid-template-columns:1fr;gap:34px;margin-top:38px}.principle-visual{margin-top:12px}.principle-label{font-size:9px}.difference .principles h3{font-size:24px;margin-top:15px}.difference .principles p{font-size:16px}.difference-caption{margin-top:40px;font-size:7px;line-height:1.5}.difference-caption span:last-child{text-align:right}} @media(max-width:380px){.difference h2{font-size:13.5vw}.principle-label{font-size:8px}} @media(prefers-reduced-motion:reduce){.principle-visual img{transition:none}}/* Keep the principle sequence high in tablet view; scale supporting type on true 4K canvases. */ @media(min-width:801px){.difference{justify-content:flex-start}.difference-caption{margin-top:auto}} @media(min-width:801px) and (max-width:1100px){.difference .principles p{font-size:15px}.principle-label{font-size:8px}} @media(min-width:2800px){.difference{justify-content:center}.difference .eyebrow{font-size:22px;margin-bottom:28px}.difference h2{font-size:clamp(155px,5.5vw,220px)}.difference-intro{font-size:clamp(30px,1vw,40px);max-width:760px;margin-top:62px;padding-top:30px}.difference-intro:before,.difference-side-note:after{width:60px}.difference-side-note{font-size:24px;margin-top:82px}.difference .principles{margin-top:70px}.principle-index{font-size:22px}.principle-visual{margin-top:23px}.principle-label{font-size:24px}.difference .principles h3{font-size:clamp(38px,1.2vw,50px);margin-top:27px;margin-bottom:15px}.difference .principles p{font-size:clamp(28px,.9vw,36px)}.difference-caption{margin-top:70px;padding-top:22px;font-size:20px}}@media(min-width:801px) and (max-width:2799px){.difference{padding-top:clamp(28px,5dvh,70px)}}/* Selected Work: pinned editorial project index, scoped to the landing page. */ .work-reserved{position:relative;min-height:100svh;overflow:clip;padding:0;background:var(--paper);border-top:1px solid var(--rule);z-index:3;scroll-margin-top:0} .work-sticky{height:100svh;min-height:720px;padding:104px 3.5% 21px;display:grid;grid-template-rows:minmax(0,1fr) auto auto;background:var(--paper);overflow:hidden} .work-stage{min-height:0;display:grid;grid-template-columns:minmax(205px,1.02fr) minmax(420px,2.45fr) minmax(245px,1fr) minmax(170px,.76fr);gap:clamp(14px,1.7vw,34px)} .work-intro{position:relative;z-index:2;min-width:0;display:flex;flex-direction:column;padding:5px 0 1px} .work-kicker{margin:0 0 18px;font:600 9px/1.3 var(--body);letter-spacing:.24em} .work-intro h2{margin:0;font:800 clamp(78px,8.15vw,154px)/.76 var(--display);letter-spacing:-.04em;white-space:nowrap} .work-intro h2 em{display:block;color:var(--red);font-style:normal} .work-intro-copy{margin-top:auto;max-width:230px} .work-intro-copy>span{display:block;padding:0 0 18px;margin:0 0 18px;border-bottom:1px solid var(--rule);font:600 9px/1.45 var(--body);letter-spacing:.22em} .work-intro-copy>p{margin:0;max-width:23ch;font:400 clamp(13px,.95vw,16px)/1.5 var(--body);text-wrap:pretty} .work-media{position:relative;display:block;min-width:0;min-height:0;overflow:hidden;background:#c7c3ba;color:#f7f4ed;text-decoration:none;isolation:isolate} .work-media:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#1110 53%,#1119 100%);pointer-events:none} .work-media img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transform:scale(1.01);transition:transform .75s var(--ease-out)} .work-media-note{position:absolute;z-index:1;left:20px;bottom:20px;max-width:60%;font:600 9px/1.45 var(--body);letter-spacing:.2em} .work-media-count{position:absolute;z-index:1;right:18px;top:17px;font:500 10px/1 var(--body);letter-spacing:.2em} .work-project-copy{min-width:0;display:flex;flex-direction:column;padding:5px 0 4px} .work-number{font:600 9px/1.3 var(--body);letter-spacing:.2em} .work-location{margin:auto 0 11px;font:600 9px/1.45 var(--body);letter-spacing:.22em} .work-project-copy h3{margin:0 0 24px;font:400 clamp(49px,4.9vw,91px)/.82 Georgia,serif;letter-spacing:-.07em} .work-summary{margin:0 0 18px;max-width:24ch;font:400 clamp(13px,1vw,16px)/1.45 var(--body);text-wrap:pretty} .work-tags{margin:0 0 24px;max-width:28ch;font:600 8px/1.7 var(--body);letter-spacing:.19em} .work-link{display:inline-flex;align-items:center;gap:14px;align-self:flex-start;padding:0 0 9px;border-bottom:1px solid currentColor;color:var(--ink);text-decoration:none;font:600 9px/1 var(--body);letter-spacing:.18em;white-space:nowrap} .work-link .ui-arrow{font-size:15px} .work-project-index{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:5px 0} .work-project-index button{position:relative;display:grid;grid-template-columns:27px minmax(0,1fr);gap:8px;align-items:center;width:100%;min-height:34px;padding:4px 0 4px 15px;border:0;background:transparent;color:#817c73;text-align:left;font-family:var(--body);transition:color .25s ease,transform .25s var(--ease-out)} .work-project-index button:before{content:'';position:absolute;left:0;top:50%;width:5px;height:5px;border-radius:50%;background:var(--red);opacity:0;transform:translateY(-50%) scale(.2);transition:opacity .2s ease,transform .3s var(--ease-out)} .work-project-index button span{font-size:8px;font-weight:600;letter-spacing:.13em} .work-project-index button strong{overflow:hidden;font-size:11px;font-weight:450;line-height:1.2;text-overflow:ellipsis;white-space:nowrap} .work-project-index button.is-active{color:var(--ink);transform:translateX(2px)} .work-project-index button.is-active:before{opacity:1;transform:translateY(-50%) scale(1)} .work-next-rail{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 63px;gap:20px;align-items:stretch;margin-top:18px;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .work-next-list{min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))} .work-next-list>a{min-width:0;display:grid;grid-template-columns:minmax(52px,74px) minmax(0,1fr);gap:12px;align-items:center;padding:0 14px;border-right:1px solid var(--rule);color:var(--ink);text-decoration:none} .work-next-list>a:first-child{padding-left:0} .work-next-list img{width:100%;aspect-ratio:1.35;object-fit:cover;filter:saturate(.72);transition:filter .25s ease,transform .35s var(--ease-out)} .work-next-list span{min-width:0;display:grid;grid-template-columns:20px minmax(0,1fr);gap:4px;align-items:start} .work-next-list small{font:600 7px/1.4 var(--body);letter-spacing:.12em} .work-next-list strong{font:400 clamp(14px,1.2vw,19px)/.94 Georgia,serif;letter-spacing:-.035em} .work-more{align-self:center;font:600 8px/1.5 var(--body);letter-spacing:.19em} .work-more .ui-arrow{display:block;margin-top:4px;font-size:14px} .work-caption{display:flex;justify-content:space-between;gap:20px;padding-top:12px;font:600 7px/1 var(--body);letter-spacing:.2em} @media(hover:hover) and (pointer:fine){.work-media:hover img{transform:scale(1.045)}.work-link:hover,.work-project-index button:hover{color:var(--red)}.work-next-list>a:hover img{filter:saturate(1);transform:translateY(-2px)}} @media(min-width:901px) and (max-width:1180px){.work-sticky{padding-left:2.5%;padding-right:2.5%}.work-stage{grid-template-columns:minmax(180px,.9fr) minmax(360px,2fr) minmax(205px,.95fr) minmax(150px,.72fr);gap:12px}.work-intro h2{font-size:7.8vw}.work-intro-copy>p{font-size:12px}.work-project-copy h3{font-size:4.8vw}.work-summary{font-size:12px}.work-project-index button{padding-left:11px;grid-template-columns:23px 1fr}.work-project-index button strong{font-size:9px}.work-next-list>a{padding:0 8px;gap:8px}.work-next-list strong{font-size:13px}} @media(max-width:900px){.work-reserved{overflow:hidden}.work-sticky{height:auto;min-height:0;padding:105px 5% 36px;display:block;overflow:visible}.work-stage{display:block}.work-intro{display:grid;grid-template-columns:1fr minmax(150px,.65fr);gap:22px;align-items:end}.work-kicker{grid-column:1/-1}.work-intro h2{font-size:clamp(72px,16vw,120px)}.work-intro-copy{margin:0}.work-intro-copy>span{display:none}.work-intro-copy>p{max-width:31ch;font-size:15px}.work-media{aspect-ratio:1.3;margin-top:34px}.work-project-copy{padding:24px 0 18px}.work-number{align-self:flex-end}.work-location{margin:8px 0 13px}.work-project-copy h3{font-size:clamp(62px,13vw,100px)}.work-summary{font-size:16px;max-width:32ch}.work-project-index{flex-direction:row;justify-content:flex-start;gap:4px;overflow-x:auto;padding:13px 0 8px;border-top:1px solid var(--rule);scrollbar-width:none}.work-project-index::-webkit-scrollbar{display:none}.work-project-index button{flex:0 0 auto;display:block;width:auto;min-height:38px;padding:7px 12px 7px 15px}.work-project-index button:before{left:4px}.work-project-index button strong{display:none}.work-next-rail{display:block;margin-top:22px;padding:13px 0;overflow:hidden}.work-next-list{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.work-next-list::-webkit-scrollbar{display:none}.work-next-list>a{flex:0 0 220px;scroll-snap-align:start}.work-more{display:none}.work-caption{font-size:6px;line-height:1.4}} @media(max-width:560px){.work-intro{display:block}.work-intro-copy{margin-top:25px}.work-intro h2{font-size:20vw}.work-media{aspect-ratio:.88}.work-media-note{max-width:70%;font-size:8px}.work-project-copy h3{font-size:19vw}.work-next-list>a{flex-basis:205px}.work-caption span:last-child{text-align:right}} @media(prefers-reduced-motion:reduce){.work-media img,.work-project-index button,.work-project-index button:before,.work-next-list img{transition:none}} @media(min-width:1800px){.work-sticky{padding-left:max(3.5%,calc((100% - 1800px)/2));padding-right:max(3.5%,calc((100% - 1800px)/2))}} @media(min-width:2800px){.work-sticky{min-height:1180px;padding-top:175px;padding-bottom:38px}.work-stage{grid-template-columns:minmax(390px,1.02fr) minmax(850px,2.45fr) minmax(490px,1fr) minmax(330px,.76fr);gap:50px}.work-kicker,.work-number,.work-location,.work-media-note,.work-media-count,.work-link{font-size:18px}.work-intro h2{font-size:290px}.work-intro-copy>span{font-size:18px}.work-intro-copy>p,.work-summary{font-size:29px}.work-project-copy h3{font-size:175px}.work-tags{font-size:17px}.work-project-index button{min-height:58px;grid-template-columns:48px 1fr}.work-project-index button span{font-size:16px}.work-project-index button strong{font-size:21px}.work-next-rail{padding:24px 0}.work-next-list>a{grid-template-columns:130px 1fr;gap:21px;padding:0 24px}.work-next-list small{font-size:15px}.work-next-list strong{font-size:35px}.work-more{font-size:16px}.work-caption{font-size:15px}} /* Requested landing-page refinement pass: hero, feature motion, services and work rail. */ @media(min-width:801px){ .hero .intro.build-copy{top:clamp(145px,18dvh,180px);right:3.1%;bottom:auto;left:auto;z-index:7;width:clamp(250px,22vw,420px);padding:8px 10px 9px;background:rgba(239,237,231,.9);box-shadow:0 0 0 1px rgba(239,237,231,.5);pointer-events:none;isolation:isolate} } .manifesto-rotator{position:relative;display:inline-block;width:5.85em;height:.92em;overflow:hidden;vertical-align:-.08em;color:var(--red)} .manifesto-rotator>em{position:absolute;inset:0 auto auto 0;white-space:nowrap;opacity:0;animation:manifesto-term-cycle 9s var(--ease-out) infinite both;animation-delay:calc(var(--feature-term)*-3s)} @keyframes manifesto-term-cycle{0%,27%{opacity:1;transform:translateY(0)}33%,94%{opacity:0;transform:translateY(-72%)}94.01%{opacity:0;transform:translateY(72%)}100%{opacity:1;transform:translateY(0)}} .feature-copy>.eyebrow,.feature-copy>h2,.feature-copy>.feature-description,.feature-copy>.studio-callout,.feature-copy>.studio-bridge-label,.feature-copy>.studio-impact-label{pointer-events:auto;user-select:text;-webkit-user-select:text} .service-list summary,.service-list details>p,.vybe-keywords{user-select:text;-webkit-user-select:text} #byte.signal-sweep-ready .feature-art .color-pass{clip-path:inset(0 100% 0 0)} #byte.signal-sweep-ready .feature-art{will-change:auto} #byte.signal-sweep-static .wire-art{opacity:0!important} #byte.signal-sweep-static .color-pass{opacity:1!important;clip-path:none!important} .byte-scan{position:absolute;z-index:5;top:7%;bottom:7%;left:50%;width:2px;background:var(--red);box-shadow:-13px 0 0 rgba(216,64,42,.18),13px 0 0 rgba(216,64,42,.34);opacity:0;pointer-events:none;will-change:transform,opacity} .byte-motion-toggle{border:0;border-bottom:1px solid currentColor;background:transparent;padding:7px 0;color:var(--ink);font:600 9px/1 var(--body);letter-spacing:.14em;white-space:nowrap} .byte-motion-toggle:hover,.byte-motion-toggle:focus-visible{color:var(--red)} #byte .feature-caption{align-items:center;gap:18px} .byte-services .service-heading h2 span,.byte-services .service-heading h2 em{display:block;font-style:normal} .byte-services .byte-motto{white-space:pre-line;margin:clamp(25px,4dvh,48px) 0 0;font-size:clamp(10px,.7vw,13px);line-height:1.55;letter-spacing:.12em;font-weight:650} .byte-services .byte-intro{position:static;max-width:25rem;margin:clamp(18px,3dvh,36px) 0 0;font-size:clamp(14px,.85vw,17px);line-height:1.6;text-wrap:pretty} .byte-services .service-heading>p:last-of-type{margin:clamp(18px,3dvh,36px) 0 0} .byte-services .service-list details>p{max-width:none;margin:0 0 12px 29px;padding:0 0 0 15px;border:0;border-left:1px solid var(--red);color:#4c4843;background:transparent;font-size:clamp(13px,.8vw,16px);line-height:1.55} .byte-services .service-list details[open] summary{color:var(--red);padding-left:10px} .byte-services .service-list details[open] summary i{transform:rotate(45deg)} .byte-art-index{position:absolute;z-index:7;right:3%;top:3%;font:600 8px/1 var(--body);letter-spacing:.18em;color:#5d5851} .byte-art-index b{color:var(--red);font-weight:700} .work-media.is-concept-art{background:#f0ede6;color:var(--ink)} .work-media.is-concept-art:after{display:none} .work-media.is-concept-art img{object-fit:contain;transform:scale(1);filter:none} .work-media.is-concept-art .work-media-note{left:18px;bottom:17px;padding:5px 7px;background:rgba(240,237,230,.9)} .work-media.is-concept-art .work-media-count{padding:5px 7px;background:rgba(240,237,230,.9)} .work-next-list{touch-action:pan-y;cursor:grab} .work-next-list:active{cursor:grabbing} .work-next-list img{filter:grayscale(1) saturate(0) contrast(.9);opacity:.82} .work-rail-controls{display:grid;grid-template-columns:1fr 1fr;align-self:stretch;border-left:1px solid var(--rule)} .work-rail-controls button{display:grid;place-items:center;border:0;background:transparent;color:var(--ink);min-width:30px;padding:0;transition:color .2s ease,background-color .2s ease} .work-rail-controls button+button{border-left:1px solid var(--rule)} .work-rail-controls button:hover,.work-rail-controls button:focus-visible{color:var(--paper);background:var(--red)} .work-rail-controls .ui-arrow{font-size:14px} @media(hover:hover) and (pointer:fine){.work-media.is-concept-art:hover img{transform:scale(1.018)}.work-next-list>a:hover img,.work-next-list>a:focus-visible img{filter:grayscale(0) saturate(1) contrast(1);opacity:1}} @media(max-width:900px){.work-rail-controls{display:flex;justify-content:flex-end;width:max-content;margin:13px 0 0 auto;border:1px solid var(--rule)}.work-rail-controls button{width:48px;height:42px}.work-media.is-concept-art{aspect-ratio:1.25}.byte-services .byte-motto{margin-top:27px}.byte-services .byte-intro{margin-top:18px;font-size:15px}.byte-motion-toggle{font-size:8px}} @media(prefers-reduced-motion:reduce){.manifesto-rotator>em{animation:none}.manifesto-rotator>em:first-child{opacity:1;transform:none}.byte-scan,.byte-motion-toggle{display:none}.work-next-list img{transition:none}} /* Final continuity and interaction corrections. */ .hero .intro.build-copy{padding:0!important;background:transparent!important;box-shadow:none!important;color:var(--ink)!important;mix-blend-mode:normal!important} .hero .intro.build-copy .build-rotator{color:var(--red)!important} #byte .feature-copy,#vybe .feature-copy{pointer-events:none!important} #studio .feature-copy{pointer-events:auto!important} #byte .feature-copy *,#vybe .feature-copy *,#studio .feature-copy *, .attention-content,.attention-content *, .studio-feature .studio-callout,.studio-feature .studio-callout *, .studio-feature .studio-bridge-label,.studio-feature .studio-impact-label{ user-select:text!important;-webkit-user-select:text!important } #byte h2.canvas-title,#byte h2.canvas-title *,#vybe h2.canvas-title,#vybe h2.canvas-title *,#studio h2.canvas-title,#studio h2.canvas-title *{pointer-events:auto!important;cursor:text} .studio-feature .studio-callout,.studio-feature .studio-bridge-label,.studio-feature .studio-impact-label{pointer-events:auto!important} .byte-scan{display:none!important} #byte.pixel-build-ready .color-pass{visibility:hidden!important} #byte.pixel-build-ready .wire-art{opacity:.9!important} #byte.pixel-build-ready .material-ink{display:none!important} #byte.pixel-build-ready .feature-art{transform-origin:53% 51%;transition:filter .35s ease;filter:drop-shadow(0 0 calc(var(--byte-charge,0)*16px) rgba(216,64,42,calc(var(--byte-charge,0)*.22)))} .byte-pixel-canvas{position:absolute;inset:0;z-index:5;display:block;width:100%;height:100%;pointer-events:none;mix-blend-mode:multiply} #byte.pixel-build-static .wire-art{opacity:0!important} #byte.pixel-build-static .color-pass{visibility:visible!important;opacity:1!important;clip-path:none!important} .byte-services{grid-template-columns:minmax(270px,.86fr) minmax(310px,1.05fr) minmax(390px,1.12fr);gap:clamp(34px,4vw,78px)} .byte-service-art{position:relative;align-self:center;width:100%;height:min(62dvh,640px);min-height:450px;isolation:isolate;overflow:hidden} .byte-service-art:after{content:'';position:absolute;left:12%;right:12%;bottom:5%;height:12%;border-radius:50%;background:#3d383118;filter:blur(26px);z-index:-1} .byte-art-grid{position:absolute;inset:2%;z-index:0;background-image:linear-gradient(#aaa49a26 1px,transparent 1px),linear-gradient(90deg,#aaa49a26 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse at center,#000 25%,transparent 74%)} .byte-service-art img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateY(16px) scale(.965);filter:grayscale(1) contrast(.94);transition:opacity .55s ease,transform .8s var(--ease-out),filter .45s ease} .byte-service-art img.is-active{opacity:1;transform:translateY(0) scale(1);filter:grayscale(.08) contrast(1)} .byte-service-art .byte-art-index{top:auto;right:2%;bottom:2%} .byte-services .service-list summary{min-height:70px} .byte-services .service-list details{transition:none} .work-next-rail{display:block!important;overflow:hidden;min-width:0} .work-next-list{display:flex!important;grid-template-columns:none!important;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:none!important;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none} .work-next-list::-webkit-scrollbar{display:none} .work-next-list.is-dragging{cursor:grabbing} .work-next-list>button{flex:0 0 clamp(190px,20vw,270px);min-width:0;display:grid;grid-template-columns:minmax(62px,88px) minmax(0,1fr);gap:12px;align-items:center;padding:0 15px;border:0;border-right:1px solid var(--rule);background:transparent;color:var(--ink);text-align:left} .work-next-list>button:first-child{padding-left:0} .work-next-list>button img{width:100%;aspect-ratio:1.35;object-fit:cover;pointer-events:none;filter:grayscale(1) saturate(0) contrast(.9);opacity:.78;transition:filter .3s ease,opacity .3s ease,transform .35s var(--ease-out)} .work-next-list>button span{min-width:0;display:grid;grid-template-columns:20px minmax(0,1fr);gap:5px;align-items:start;pointer-events:none} .work-next-list>button small{font:600 7px/1.4 var(--body);letter-spacing:.12em} .work-next-list>button strong{font:400 clamp(14px,1.2vw,19px)/.94 Georgia,serif;letter-spacing:-.035em} .work-next-list>button.is-active{color:var(--red)} .work-next-list>button.is-active img{opacity:1} .work-rail-controls{display:none!important} @media(hover:hover) and (pointer:fine){ .byte-services .service-list summary:hover{padding-left:2px;color:inherit} .byte-services .service-list summary:hover i{transform:none} .byte-services .service-list details[open] summary:hover{padding-left:10px;color:var(--red)} .byte-services .service-list details[open] summary:hover i{transform:rotate(45deg)} .work-next-list>button:hover img,.work-next-list>button:focus-visible img{filter:grayscale(0) saturate(1) contrast(1);opacity:1;transform:translateY(-2px)} } @media(min-width:901px) and (max-height:760px){ .work-sticky{height:100svh;min-height:0;padding-top:82px;padding-bottom:8px;grid-template-rows:minmax(0,1fr) auto auto} .work-stage{min-height:0;gap:14px} .work-intro h2{font-size:clamp(62px,7vw,100px)} .work-intro-copy{margin-top:clamp(16px,3dvh,28px)} .work-intro-copy>span{padding-bottom:9px;margin-bottom:9px;font-size:7px;line-height:1.55} .work-intro-copy>p{font-size:11px;line-height:1.35} .work-media{min-height:0} .work-location{margin-bottom:8px} .work-project-copy h3{margin-bottom:10px;font-size:clamp(40px,4.15vw,64px)} .work-summary{margin-bottom:8px;font-size:11px;line-height:1.35} .work-tags{margin-bottom:9px;font-size:7px;line-height:1.45} .work-link{padding-bottom:6px;font-size:7px} .work-project-index button{min-height:25px} .work-next-rail{margin-top:8px;padding:7px 0} .work-next-list>button{flex-basis:clamp(175px,18vw,235px);grid-template-columns:minmax(46px,66px) 1fr;gap:8px;padding:0 9px} .work-next-list>button strong{font-size:12px} .work-caption{padding-top:7px;font-size:6px} } @media(max-width:1100px) and (orientation:portrait){ .byte-services{grid-template-columns:minmax(270px,.88fr) minmax(330px,1.12fr)} .byte-service-art{grid-column:1;grid-row:2;height:470px;min-height:0} } @media(max-width:800px){ .byte-service-art{order:2;width:100%;height:clamp(340px,94vw,510px);min-height:0} .byte-services .service-list{order:3} .byte-services .service-caption{order:4} .work-next-list>button{flex-basis:220px} } @media(max-width:560px){.work-next-list>button{flex-basis:205px}} @media(prefers-reduced-motion:reduce){ .byte-pixel-canvas,.byte-motion-toggle{display:none!important} #byte.pixel-build-ready .color-pass{visibility:visible!important;opacity:1!important} #byte.pixel-build-ready .wire-art{opacity:0!important} .byte-service-art img,.work-next-list>button img{transition:none!important} } .work-next-list>button img{height:auto!important} .attention-content,.attention-content *{pointer-events:auto!important} #vybe #vybe-title,#vybe #vybe-title *{pointer-events:auto!important;user-select:text!important;-webkit-user-select:text!important;cursor:text} @media(pointer:coarse){#byte .feature-art{touch-action:pan-y}} /* Final requested overlap behavior: white ink only inside revealed color. */ .contrast-layer .intro.build-copy, .contrast-layer .intro.build-copy .build-prefix, .contrast-layer .intro.build-copy .build-suffix, .contrast-layer .intro.build-copy .build-rotator{color:#fff!important} #byte.pixel-build-ready .material-ink{display:block!important;z-index:6;opacity:0;clip-path:inset(0 0 0 100%);will-change:clip-path,opacity} #byte.pixel-build-static .material-ink{display:block!important;z-index:6;opacity:1!important;clip-path:none!important} .vybe-callouts{pointer-events:auto!important} .vybe-callout{padding:0!important;background:transparent!important;pointer-events:auto!important;user-select:text!important;-webkit-user-select:text!important;cursor:text} @media(prefers-reduced-motion:reduce){#byte.pixel-build-ready .material-ink{opacity:1!important;clip-path:none!important}} /* Tighter framing for the generated Byte editorial assemblies. */ .byte-service-art img{transform:translateY(12px) scale(1.04)} .byte-service-art img.is-active{transform:translateY(0) scale(1.1)} /* Crawlable software-service directory, integrated with the existing footer language. */ .service-directory{padding:34px 4%;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(190px,.3fr) minmax(0,1fr);gap:4%;background:var(--paper)} .service-directory p{margin:3px 0 0;font-size:9px;font-weight:650;letter-spacing:.18em} .service-directory div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0} .service-directory a{min-height:44px;padding:4px 18px 12px 0;margin-right:18px;border-bottom:1px solid var(--line);font-size:11px;text-decoration:none;display:flex;align-items:flex-start} @media(hover:hover) and (pointer:fine){.service-directory a:hover{color:var(--red)}} @media(max-width:800px){.service-directory{grid-template-columns:1fr;gap:24px;padding:34px 6%}.service-directory div{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:480px){.service-directory div{grid-template-columns:1fr}.service-directory a{margin-right:0}}