:root{--paper:#FCF9FB;--paper-secondary:#F5F1F8;--ink:#302A35;--muted:#716A76;--pink:#E88DB7;--blush:#F5C6D9;--lilac:#A98AD4;--lavender:#D8C7F0;--line:var(--lavender);--mono:ui-monospace,SFMono-Regular,Consolas,monospace;--display:'Space Grotesk',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:7px}::selection{background:var(--pink);color:var(--ink)}.section{padding:100px max(6vw,24px);max-width:1800px;margin:auto}.mono,.eyebrow{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:1px}.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 26px}.status-dot{width:7px;height:7px;background:var(--lilac);border-radius:50%;box-shadow:0 0 0 4px #A98AD433;flex-shrink:0}.header{height:95px;display:flex;align-items:center;justify-content:space-between;margin:0 6vw;border-bottom:1px solid var(--line);position:relative;z-index:10}.logo{font-family:var(--display);font-size:28px;font-weight:700;letter-spacing:-1.2px;display:inline-flex;align-items:center;line-height:1}.logo-star{font-size:26px;margin:0 2px 0 4px}.logo-dot{color:var(--pink)}.header nav{display:flex;gap:32px;font-size:22px;font-weight:500}.header nav a,.footer a{transition:color .2s}.header nav a:hover,.footer a:hover{color:var(--ink)}.header nav span{font-size:9px;vertical-align:super;color:var(--muted)}.nav-contact{border:1px solid var(--ink);padding:10px 17px;border-radius:100px;font-size:20px;display:inline-flex;align-items:center;gap:10px;white-space:nowrap}.nav-contact span{margin-left:18px}.nav-contact:hover{background:var(--pink)}.menu-toggle{display:none}.mobile-nav[hidden]{display:none}.skip{position:fixed;top:-70px;left:20px;padding:10px;background:var(--pink);z-index:100}.skip:focus{top:10px}.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;transform:scaleX(0);transform-origin:left;background:var(--lilac);z-index:99}.hero{padding-top:33px;padding-bottom:38px}.hero-top{display:flex;justify-content:space-between;align-items:center}.hero-top .eyebrow{margin:0}.hero-coordinate{font-size:9px;color:var(--muted)}.hero-title{position:relative;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;padding:55px 0 36px}.hero h1{font-family:var(--display);font-size:clamp(52px,6.2vw,104px);font-weight:500;line-height:1.02;letter-spacing:-.065em;margin:0;position:relative;z-index:2}.hero h1>span{display:block}.hero h1 em,.serif{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400}.hero h1 em{font-weight:400}.accent{color:var(--lilac)}.orb-scene{height:440px;position:relative;display:flex;align-items:center;justify-content:center;background-image:radial-gradient(#A98AD470 .65px,transparent .65px);background-size:18px 18px;isolation:isolate}.orb-scene:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse,transparent 30%,var(--paper) 72%);z-index:-1}.orb{width:265px;height:265px;border-radius:50%;background:radial-gradient(circle at 30% 24%,var(--blush) 0%,var(--pink) 28%,var(--lilac) 58%,var(--ink) 90%);box-shadow:inset -12px -18px 30px #302A3555,0 35px 60px -25px #A98AD490;display:grid;place-items:center;transform:rotate(-16deg);position:relative;z-index:2}.orb>span{font-family:var(--display);font-size:103px;font-weight:600;letter-spacing:-12px;color:var(--ink)}.orb-star{font-size:65px;vertical-align:9px;margin:0 7px}.orbit{position:absolute;width:400px;height:170px;border:1px solid var(--lilac);border-radius:50%;transform:rotate(-35deg);z-index:3;pointer-events:none}.orbit-two{transform:rotate(48deg);width:350px;height:240px;z-index:1;opacity:.6}.orbit-three{transform:rotate(100deg);width:390px;height:210px;opacity:.45;z-index:1}.scene-cross{position:absolute;color:var(--lilac);font-family:var(--mono)}.cross-one{top:20px;left:30px}.cross-two{bottom:35px;right:12px}.scene-caption{position:absolute;top:24px;right:5px;font:9px var(--mono);letter-spacing:1px;color:var(--muted)}.scene-index{position:absolute;bottom:10px;left:20px;font:9px var(--mono);letter-spacing:1px;color:var(--muted)}.orb-label{position:absolute;z-index:4;background:#FCF9FBC9;backdrop-filter:blur(10px);border:1px solid var(--lavender);border-radius:5px;padding:10px 15px;font:11px var(--mono);box-shadow:0 4px 12px #302A3510}.label-code{top:90px;left:0;transform:rotate(-8deg)}.label-design{bottom:75px;right:-5px;transform:rotate(8deg)}.hero-bottom{border-top:0;padding-top:27px;display:flex;justify-content:space-between;align-items:center;gap:24px}.hero-bottom p{font-size:clamp(20px,1.8vw,26px);color:var(--muted);line-height:1.6;margin:0;flex:1 1 560px}.hero-bottom strong{color:var(--ink);font-weight:700}.button{display:inline-flex;gap:35px;align-items:center;border-radius:50px;padding:19px 25px;font-size:13px;font-weight:500;transition:background .25s,color .25s}.button-dark{background:var(--ink);color:var(--paper)}.button:hover{background:var(--pink);color:var(--ink)}.button span{font-size:20px;line-height:1}.scroll-link{font-size:9px;display:flex;gap:18px;align-items:center}.scroll-link span{font-size:20px}.ticker{background:var(--lavender);border-top:1px solid var(--lilac);border-bottom:1px solid var(--lilac);overflow:hidden;padding:19px 0;margin-top:18px}.ticker-track{display:flex;align-items:center;width:max-content;animation:marquee 45s linear infinite}.ticker-group{display:flex;align-items:center;gap:45px;padding-right:45px;flex-shrink:0}.ticker-group>span{display:inline-flex;align-items:center;gap:20px;white-space:nowrap}.ticker span{font:500 15px var(--display);letter-spacing:1px}.ticker b{font-size:24px;line-height:1}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:52px}h2{font-family:var(--display);font-size:clamp(36px,4.4vw,70px);font-weight:500;line-height:1.12;letter-spacing:-.055em;margin:0}.muted{color:var(--muted)}.section-heading>p{font-size:13px;color:var(--muted);line-height:1.85;margin:0 0 5px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px 32px}.project-visual{height:360px;position:relative;display:block;overflow:hidden;border-radius:3px;background:var(--lavender);padding:64px 32px 0;isolation:isolate}.project-visual:before{content:'';position:absolute;width:250px;height:250px;background:#FCF9FB40;filter:blur(45px);border-radius:50%;top:-80px;right:-80px;z-index:-1}.project-badges{position:absolute;left:22px;right:22px;top:20px;display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.5px}.project-badges>span:first-child{background:#FCF9FBBF;padding:6px 9px;border-radius:20px}.project-badges>span:last-child{padding-top:6px}.browser{position:relative;background:var(--paper);border:1px solid #FCF9FB80;box-shadow:0 25px 30px #302A3522;border-radius:7px 7px 0 0;transform:rotate(-3deg) translateY(14px);transform-origin:50% 80%;height:310px;transition:transform .6s cubic-bezier(.2,.75,.3,1)}.project-visual:hover .browser{transform:rotate(0deg) translateY(-4px) scale(1.035)}.browser-bar{height:25px;background:var(--paper-secondary);display:flex;align-items:center;gap:4px;padding:0 10px;border-bottom:1px solid var(--lavender);position:relative;z-index:2}.browser-bar i{width:4px;height:4px;background:var(--lilac);border-radius:50%}.browser-bar>span{font:7px var(--mono);color:var(--muted);margin:auto}.browser img{width:100%;height:calc(100% - 25px);object-fit:cover;object-position:top;position:relative;z-index:1;display:block}.preview-fallback{position:absolute;inset:25px 0 0;padding:30px;background:var(--ink);color:var(--paper)}.preview-fallback strong{font-size:21px;letter-spacing:-1px}.preview-fallback h3{font:500 32px/1.15 var(--display);letter-spacing:-1.5px;margin:30px 0 14px}.preview-fallback p{font-size:10px}.preview-fallback small{font:10px var(--mono);letter-spacing:2px}.store{background:var(--blush)}.diva{background:var(--blush)}.diva .preview-fallback{background:var(--paper-secondary);color:var(--ink)}.seven{background:var(--lavender)}.drones{background:var(--blush)}.yaacov{background:var(--lavender)}.yaacov .preview-fallback{background:var(--ink)}.project-open{position:absolute;bottom:18px;right:18px;display:grid;place-items:center;width:47px;height:47px;background:var(--paper);border-radius:50%;font-size:26px;z-index:4;transition:transform .3s,background .3s}.project-visual:hover .project-open{transform:rotate(45deg);background:var(--pink)}.project-static{position:absolute;bottom:15px;right:15px;background:var(--paper);padding:8px;font-size:8px;z-index:3}.project-info{display:flex;justify-content:space-between;align-items:center;margin-top:23px}.project-info .mono{font-size:9px;color:var(--muted);margin:0 0 5px}.project-info h3{font:500 28px var(--display);letter-spacing:-1px;margin:0}.project-number{color:var(--muted);font:12px var(--mono)}.project-description{font-size:13px;color:var(--muted);line-height:1.85;margin:15px 0}.tags{display:flex;flex-wrap:wrap;gap:7px}.tags span{border:1px solid var(--line);border-radius:20px;padding:4px 10px;font-size:10px}.about{display:grid;grid-template-columns:1fr 1fr;gap:9%;background:var(--paper-secondary);border-top:1px solid var(--line);border-bottom:1px solid var(--line);align-items:center}.about-art{background:var(--ink);min-height:490px;position:relative;overflow:hidden;padding:30px;color:var(--lavender);display:flex;flex-direction:column;justify-content:space-between}.about-grid{position:absolute;inset:0;background-image:linear-gradient(#D8C7F00C 1px,transparent 1px),linear-gradient(90deg,#D8C7F00C 1px,transparent 1px);background-size:30px 30px}.monogram{font-family:var(--display);font-size:145px;line-height:1;letter-spacing:-18px;color:var(--pink);align-self:center;transform:rotate(-10deg);margin:20px 0}.monogram span{font-size:90px;display:inline-block;margin:0 9px;vertical-align:15px}.code-card{font:12px/2 var(--mono);border:1px solid #D8C7F030;padding:18px;background:#FCF9FB05;position:relative;transform:rotate(2deg)}.code-card span{color:var(--lavender)}.code-card em{color:var(--pink);font-style:normal}.art-footer{font-size:8px;margin-top:30px}.about-copy h2{font-size:clamp(38px,4vw,62px);margin-bottom:28px}.about-copy>p:not(.eyebrow){font-size:14px;color:var(--muted)}.about-copy .about-statement{font-weight:500;color:var(--ink)!important;margin:25px 0}.skills{display:flex;flex-wrap:wrap;gap:8px}.skills span{background:var(--lavender);padding:7px 12px;font:10px var(--mono)}.service-list{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line);padding:0 12px;transition:background .3s}details:hover{background:var(--paper-secondary)}summary{display:flex;align-items:center;gap:35px;padding:27px 0;cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}summary .mono{color:var(--muted)}summary h3{font:500 clamp(20px,2.5vw,34px) var(--display);letter-spacing:-1px;margin:0}.service-plus{margin-left:auto;font-size:28px;font-weight:400;transition:transform .3s}details[open] .service-plus{transform:rotate(45deg)}details p{font-size:14px;color:var(--muted);margin:0 70px 26px;max-width:680px}.process{background:var(--ink);color:var(--paper)}.process .eyebrow{color:var(--lavender)}.process-star{color:var(--pink);font-size:95px;line-height:1}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.process-grid>div{border-top:1px solid #D8C7F066;padding-top:25px}.process-grid .mono{color:var(--pink)}.process-grid h3{font:500 25px var(--display);letter-spacing:-1px;margin:25px 0 13px}.process-grid p{font-size:13px;color:var(--lavender);line-height:1.85}.contact{padding-top:65px;padding-bottom:60px;background:var(--blush)}.contact-top{display:flex;justify-content:space-between}.contact-top>.mono{font-size:9px}.contact h2{font-size:clamp(55px,8.8vw,142px);position:relative;margin:40px 0 50px;line-height:1.02}.contact-arrow{position:absolute;right:15px;bottom:5px;border:1px solid var(--ink);border-radius:50%;width:160px;height:160px;display:grid;place-items:center;font:100px/1 var(--display);transition:color .3s,background .3s}.contact-arrow:hover{color:var(--pink);background:var(--ink)}.contact-bottom{border-top:1px solid #302A3540;padding-top:28px;display:flex;align-items:center;justify-content:space-between;gap:20px}.contact-bottom p{font-size:14px;margin:0}.email{font:500 clamp(17px,2.3vw,31px) var(--display);letter-spacing:-.5px;border-bottom:1px solid #302A3560;padding-bottom:5px;display:block}.copy-email{display:block;background:none;border:0;padding:12px 0 0;cursor:pointer;font-size:9px}.copy-email span{margin-left:8px}.copy-status{font-size:11px;display:block;min-height:18px}.footer{display:flex;gap:20px;justify-content:space-between;align-items:center;padding-top:30px;padding-bottom:30px}.footer p,.footer>span,.footer>a:last-child{font-size:10px;color:var(--muted)}.footer .logo{font-size:24px}.footer .logo-star{font-size:21px}@keyframes marquee{to{transform:translateX(-50%)}}@media(min-width:1600px){.hero-title{padding-top:70px;padding-bottom:70px}.orb-scene{height:520px}.orb{width:330px;height:330px}.orbit{width:470px;height:200px}.project-visual{height:440px}.browser{height:380px}}@media(max-width:1050px){.hero h1{font-size:7vw}.orb{width:215px;height:215px}.orb>span{font-size:83px}.orb-star{font-size:50px}.orbit{width:310px;height:130px}.orbit-two{width:260px;height:180px}.orbit-three{width:300px;height:160px}.orb-scene{height:365px}.label-code{left:-10px;font-size:9px}.label-design{right:-15px;font-size:9px}.hero-coordinate{display:none}.scroll-link{display:none}.project-visual{height:290px;padding:57px 24px 0}.browser{height:260px}.about{gap:5%}.about-art{padding:20px;min-height:455px}.code-card{font-size:10px}.monogram{font-size:120px}.process-grid{gap:18px}.contact-arrow{width:120px;height:120px;font-size:75px}}@media(max-width:700px){.section{padding:65px 22px}.header{margin:0 22px;height:78px}.header nav,.nav-contact{display:none}.menu-toggle{display:block;background:none;border:1px solid var(--line);border-radius:50%;width:38px;height:38px;font-size:19px;cursor:pointer}.mobile-nav{position:absolute;top:78px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);z-index:20;padding:20px 24px;box-shadow:0 20px 20px #302A3511}.mobile-nav a{display:flex;align-items:center;gap:10px;padding:12px 0;font-family:var(--display);font-size:24px}.hero{padding-top:26px;padding-bottom:32px}.hero-top .eyebrow{font-size:8px;letter-spacing:.5px}.hero-title{grid-template-columns:1fr;padding:35px 0 20px}.hero h1{font-size:clamp(44px,11vw,76px);letter-spacing:-.065em}.orb-scene{height:305px;margin:12px auto 0;width:min(100%,400px)}.orb{width:200px;height:200px}.scene-caption{right:0;top:12px;font-size:8px}.label-code{top:70px;left:8px}.label-design{bottom:42px;right:0}.scene-index{bottom:0;font-size:8px}.hero-bottom{align-items:flex-start;flex-direction:column;padding-top:20px;gap:22px}.hero-bottom p{font-size:20px;flex:auto}.button{padding:16px 23px}.ticker{margin-top:0;padding:14px 0}.ticker span{font-size:12px}.ticker-group{gap:25px;padding-right:25px}.ticker-group>span{gap:14px}.section-heading{display:block;margin-bottom:35px}.section-heading>p{margin-top:22px;font-size:13px}.eyebrow{font-size:9px;margin-bottom:20px}h2{font-size:40px}.project-grid{grid-template-columns:1fr;gap:42px}.project-visual{height:300px;padding:62px 28px 0}.browser{height:270px}.project-info h3{font-size:26px}.project-description{font-size:13px}.about{grid-template-columns:1fr;gap:40px}.about-art{min-height:385px}.monogram{font-size:125px}.code-card{font-size:11px;max-width:350px;width:100%;align-self:center}.about-copy h2{font-size:43px}.about-copy>p:not(.eyebrow){font-size:14px}summary{gap:19px;padding:23px 0}summary h3{font-size:21px;letter-spacing:-.7px}summary .mono{font-size:10px}details{padding:0 4px}details p{margin:0 0 24px 34px;font-size:13px}.process .section-heading{position:relative;padding-right:30px}.process .section-heading h2{font-size:36px}.process-star{position:absolute;right:0;top:0;font-size:42px}.process-grid{grid-template-columns:1fr 1fr;gap:25px 20px}.process-grid h3{font-size:21px;margin-top:20px}.process-grid p{font-size:12px}.contact-top>.mono{display:none}.contact h2{font-size:clamp(49px,10.6vw,75px);margin:30px 0 45px}.contact-arrow{width:65px;height:65px;right:0;font-size:43px;bottom:-8px}.contact-bottom{flex-direction:column;align-items:flex-start;gap:24px}.email{font-size:22px}.footer{display:grid;grid-template-columns:auto 1fr;gap:14px}.footer p,.footer>span{margin:0}.footer p{text-align:right}.footer>a:last-child{text-align:right}.footer>span{font-size:8px}.footer .logo{width:fit-content}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.ticker-track{transform:none}.reveal{opacity:1!important;transform:none!important}} .whatsapp-icon{flex-shrink:0;vertical-align:middle} .monogram{font-size:clamp(44px,5vw,76px);line-height:1.05;letter-spacing:-3px;text-align:center} @media(min-width:701px) and (max-width:1050px){ .header{height:auto;min-height:95px;flex-wrap:wrap;gap:20px;padding:22px 0} .header nav{order:3;flex-basis:100%;justify-content:center} } @media(max-width:700px){ .header .logo{font-size:25px} .footer .logo{font-size:20px} } .hero-bottom{flex-wrap:wrap} .hero-bottom .button,.hero-bottom .scroll-link{flex-shrink:0} @media(min-width:1051px) and (max-width:1200px){ .header{height:auto;min-height:95px;flex-wrap:wrap;gap:20px;padding:22px 0} .header nav{order:3;flex-basis:100%;justify-content:center} } .orb-scene{scale:.75} .hero-bottom .button{font-size:17px;gap:14px} .projects-icon{flex-shrink:0} .scroll-link{font-size:13px} .scroll-link span{font-size:24px} @media(max-width:700px){ .hero-bottom .button{font-size:16px} } .nav-contact,.hero-bottom .button,.copy-email,.scroll-link,.email, .header nav a,.mobile-nav a,.footer>a:last-child{position:relative;isolation:isolate} .nav-contact,.hero-bottom .button{overflow:hidden} .nav-contact::before,.hero-bottom .button::before,.copy-email::after, .scroll-link::after,.email::after,.header nav a::after,.mobile-nav a::after, .footer>a:last-child::after{content:"";position:absolute;pointer-events:none;opacity:0} .nav-contact::before,.hero-bottom .button::before{inset:-50% auto -50% -60%;width:40%;background:linear-gradient(90deg,transparent,#FCF9FB66,transparent);transform:skewX(-25deg)} .contact-arrow::before,.contact-arrow::after{content:"";position:absolute;inset:-9px;border:1px dashed var(--ink);border-radius:50%;opacity:0;pointer-events:none} .contact-arrow::after{inset:-17px;border-style:solid;border-color:var(--lilac);border-left-color:transparent;border-right-color:transparent} .copy-email{padding:12px 8px 6px;margin-left:-8px;border-radius:4px} .copy-email::after{left:8px;right:8px;bottom:0;height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 10px);transform:scaleX(0);transform-origin:left} .scroll-link::after{left:0;right:0;bottom:-7px;height:2px;background:linear-gradient(90deg,var(--pink),var(--lilac));transform:scaleX(0);transform-origin:left} .email::after{inset:0;background:linear-gradient(100deg,transparent 40%,#FCF9FB99 50%,transparent 60%);background-size:250% 100%;background-position:100% 0} .header nav a::after,.mobile-nav a::after{left:0;right:0;bottom:-5px;height:2px;background:var(--lilac);transform:scaleX(0);transform-origin:left} .footer>a:last-child::after{width:6px;height:6px;right:-12px;bottom:3px;background:var(--pink);box-shadow:0 0 8px var(--lilac)} .projects-icon,.whatsapp-icon,.copy-email span,.scroll-link span,.project-open{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .35s} @media(hover:hover) and (prefers-reduced-motion:no-preference){ .nav-contact:is(:hover,:focus-visible),.hero-bottom .button:is(:hover,:focus-visible){background:var(--ink);color:var(--paper);box-shadow:5px 5px 0 var(--pink),-4px -4px 0 var(--lavender);transition:box-shadow .3s} .nav-contact:is(:hover,:focus-visible)::before,.hero-bottom .button:is(:hover,:focus-visible)::before{opacity:1;animation:project-scan 1.5s ease-in-out infinite} .hero-bottom .button:is(:hover,:focus-visible) .projects-icon{transform:rotate(90deg)} .contact-arrow:is(:hover,:focus-visible){background:var(--ink);color:var(--blush);box-shadow:0 0 35px #A98AD466} .contact-arrow:is(:hover,:focus-visible)::before{opacity:1;animation:holo-orbit 9s linear infinite} .contact-arrow:is(:hover,:focus-visible)::after{opacity:1;animation:holo-orbit 6s linear infinite reverse} .copy-email:is(:hover,:focus-visible){background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--lilac)} .copy-email:is(:hover,:focus-visible)::after{opacity:1;background-color:var(--lavender);animation:data-transfer .65s steps(8) both} .copy-email:is(:hover,:focus-visible) span{display:inline-block;transform:translate(3px,-3px)} .scroll-link:is(:hover,:focus-visible)::after{opacity:1;transform:scaleX(1);transition:transform .4s} .scroll-link:is(:hover,:focus-visible) span{animation:discovery-drop 1.1s ease-in-out infinite} .email:is(:hover,:focus-visible)::after{opacity:1;animation:email-scan 1.5s ease-in-out infinite} .email:is(:hover,:focus-visible){text-shadow:2px 0 var(--lavender),-2px 0 var(--pink)} .header nav a:nth-child(1):is(:hover,:focus-visible)::after{opacity:1;transform:scaleX(1);transition:transform .4s;box-shadow:0 3px 0 var(--pink)} .header nav a:nth-child(2):is(:hover,:focus-visible){text-shadow:2px 1px var(--pink),-2px -1px var(--lavender);transition:text-shadow .25s} .header nav a:nth-child(3)::after{inset:-7px -12px;height:auto;bottom:-7px;border-radius:999px;background:linear-gradient(110deg,var(--blush),var(--lavender));transform:scale(.78);z-index:-1} .header nav a:nth-child(3):is(:hover,:focus-visible)::after{opacity:1;transform:scale(1);transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s} .mobile-nav a:is(:hover,:focus-visible)::after{opacity:1;transform:scaleX(1);transition:transform .4s} .menu-toggle:is(:hover,:focus-visible){background:var(--ink);color:var(--blush);box-shadow:0 0 0 4px var(--lavender);rotate:90deg;transition:rotate .4s,box-shadow .4s} .footer>a:last-child:is(:hover,:focus-visible)::after{opacity:1;animation:launch-pixel .9s ease-out infinite} .logo:is(:hover,:focus-visible){text-shadow:2px 2px var(--blush),-2px -2px var(--lavender);transition:text-shadow .3s} summary:is(:hover,:focus-visible){background:linear-gradient(90deg,#D8C7F055,transparent);text-shadow:1px 1px var(--blush)} summary:is(:hover,:focus-visible) .service-plus{color:var(--ink);text-shadow:3px 0 var(--pink),-3px 0 var(--lilac)} } @keyframes holo-orbit{to{transform:rotate(360deg)}} @keyframes project-scan{to{left:150%}} @keyframes data-transfer{to{transform:scaleX(1)}} @keyframes discovery-drop{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}} @keyframes email-scan{to{background-position:0 0}} @keyframes launch-pixel{from{transform:translateY(0);opacity:1}to{transform:translateY(-16px);opacity:0}} .nav-contact{ background:linear-gradient(110deg,var(--pink) 0%,var(--lavender) 100%); color:#FCF9FB; border:1px solid transparent; border-radius:14px; padding:12px 20px; font-weight:700; box-shadow:0 7px 22px #A98AD466,0 3px 10px #E88DB744; transition:background .3s,box-shadow .3s,color .3s; } @media(max-width:700px){ .mobile-nav a[href="https://wa.me/5519992899393"]{ width:fit-content; margin-top:12px; padding:12px 18px; font-size:20px; border-radius:14px; background:linear-gradient(110deg,var(--pink) 0%,var(--lavender) 100%); color:#FCF9FB; font-weight:700; box-shadow:0 7px 22px #A98AD466,0 3px 10px #E88DB744; } } @keyframes contact-color-flow{ from{background-position:0% 50%} to{background-position:100% 50%} } @media(prefers-reduced-motion:no-preference){ .nav-contact,.mobile-nav a[href="https://wa.me/5519992899393"]{ background-image:linear-gradient(110deg,var(--pink) 0%,var(--lavender) 50%,var(--pink) 100%); background-size:250% 100%; animation:contact-color-flow 4s ease-in-out infinite alternate; } } .nav-contact{color:var(--ink);font-size:20px;gap:8px} .nav-contact .whatsapp-icon,.mobile-nav .whatsapp-icon{width:21px;height:21px;flex-shrink:0;order:1} @media(max-width:700px){ .mobile-nav a[href="https://wa.me/5519992899393"]{color:var(--ink)} } .hero{padding-top:24px;padding-bottom:28px} .hero-title{padding-top:18px;padding-bottom:18px} .hero h1{font-size:clamp(48px,5.8vw,96px)} .orb-scene{height:340px} .mono,.eyebrow{font-size:13px} .hero-coordinate,.hero-top .eyebrow{font-size:12px} .header nav span{font-size:12px} .orb-label,.label-code,.label-design{font-size:15px} .scroll-link{font-size:14px} .section-heading>p,.project-description,.process-grid p{font-size:15px} .project-badges{font-size:12px} .browser-bar{height:30px} .browser-bar>span{font-size:11px} .browser img{height:calc(100% - 30px)} .preview-fallback{top:30px} .preview-fallback p,.preview-fallback small{font-size:13px} .project-static{font-size:11px} .project-info .mono,.project-number{font-size:12px} .tags span,.skills span{font-size:13px} .code-card{font-size:14px} .art-footer{font-size:11px} .about-copy>p:not(.eyebrow),details p,.contact-bottom p{font-size:16px} .contact-top>.mono{font-size:12px} .copy-email{font-size:13px} .copy-status{font-size:13px;min-height:21px} .footer p,.footer>span,.footer>a:last-child{font-size:13px} @media(min-width:1600px){ .orb-scene{height:390px} } @media(min-width:701px) and (max-width:1050px){ .hero h1{font-size:6.6vw} .orb-scene{height:290px} .code-card{font-size:12px} } @media(max-width:700px){ .hero h1{font-size:clamp(42px,10.5vw,72px)} .hero{padding-top:20px;padding-bottom:26px} .hero-title{padding:24px 0 12px} .orb-scene{height:250px;margin-top:0} .hero-top .eyebrow{font-size:11px;letter-spacing:.3px} .eyebrow{font-size:12px} .project-badges{font-size:10px} .project-info .mono{font-size:11px} .project-static{font-size:10px} .code-card{font-size:12px} .art-footer{font-size:10px} .section-heading>p,.project-description,.process-grid p,details p{font-size:14px} summary .mono{font-size:12px} .footer{grid-template-columns:1fr} .footer p,.footer>a:last-child{text-align:left} .footer>span{font-size:12px} } .ticker{position:relative;z-index:3;margin-top:-10px} .section.projects{padding-top:36px} .projects .section-heading h2{font-size:clamp(34px,4.5vw,64px)} .projects .section-heading>p{font-size:clamp(18px,1.7vw,22px);line-height:1.65} .projects .project-info h3{font-size:clamp(24px,2vw,28px)} .projects .project{display:flex;flex-direction:column} .projects .project-description{ font-size:clamp(14px,1.2vw,16px); line-height:1.65; height:4.95em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; text-wrap:pretty; margin-bottom:8px; } .projects .project-actions{margin-top:auto;padding-top:8px} .about .about-copy>p:not(.eyebrow){font-size:clamp(16px,1.4vw,18px);text-wrap:balance} .process{padding-top:clamp(52px,6vw,78px);padding-bottom:clamp(44px,5vw,68px)} .process .process-grid p{font-size:clamp(15px,1.2vw,17px);text-wrap:balance;margin-bottom:0} @media(max-width:700px){ .section.projects{padding-top:28px} } .tags>span,.skills>span{ position:relative; isolation:isolate; overflow:hidden; transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .35s,border-color .35s,box-shadow .35s; } .projects .tags>span,.case-page .tags>span{ padding:6px 13px; font-size:13px; line-height:1.6; white-space:nowrap; flex-shrink:0; text-align:center; border-color:var(--lilac); background:linear-gradient(135deg,var(--paper),var(--lavender)); color:var(--ink); font-weight:600; box-shadow:0 3px 0 #A98AD444; } .tags>span::after,.skills>span::after{ content:""; position:absolute; inset:-50% auto -50% -80%; width:45%; background:linear-gradient(90deg,transparent,#FFFFFF99,transparent); transform:skewX(-25deg); pointer-events:none; } @media(hover:hover){ .tags>span:hover,.skills>span:hover{ background-color:var(--blush); border-color:var(--lilac); box-shadow:0 8px 18px #A98AD433,0 0 0 3px #D8C7F044; } .projects .tags>span:hover,.case-page .tags>span:hover{ background:linear-gradient(135deg,var(--blush),var(--pink)); box-shadow:0 8px 18px #A98AD455,0 0 0 3px #D8C7F066; } } @media(hover:hover) and (prefers-reduced-motion:no-preference){ .tags>span:hover,.skills>span:hover{transform:translateY(-4px) scale(1.04)} .tags>span:hover::after,.skills>span:hover::after{animation:tag-shine .7s ease-out both} } @keyframes tag-shine{to{left:140%}} .project-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:20px} .project-actions .tags{margin:0} .project-site-link{ display:inline-flex;align-items:center;justify-content:center;gap:7px; min-height:36px;padding:7px 12px;border:1px solid var(--lilac);border-radius:100px; background:var(--paper);color:var(--ink); font:600 12px/1.2 var(--display);white-space:nowrap; transition:transform .25s,background .25s,border-color .25s,box-shadow .25s; } .project-site-link .site-link-icon{ display:grid;place-items:center;flex-shrink:0; width:15px;height:15px; color:var(--lilac); transition:transform .25s,color .25s; } .project-site-link svg{width:14px;height:14px} .project-site-link:is(:hover,:focus-visible){ transform:translateY(-2px); background:var(--paper-secondary); border-color:var(--pink); box-shadow:0 5px 14px #A98AD433; } .project-site-link:is(:hover,:focus-visible) .site-link-icon{ transform:translate(2px,-2px); color:var(--ink); } .case-header{gap:24px} .case-back{font-size:14px} .case-hero{padding-top:70px;padding-bottom:48px} .case-hero h1{font:500 clamp(44px,7.5vw,110px)/1.05 var(--display);letter-spacing:-.06em;margin:0;overflow-wrap:anywhere} .case-intro{font-size:clamp(18px,1.4vw,22px);color:var(--muted);max-width:800px;margin:24px 0 32px} .case-hero .project-actions{justify-content:flex-start;gap:24px} .case-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding-top:40px;padding-bottom:50px;border-top:1px solid var(--line)} .case-overview h2{font-size:26px;letter-spacing:-.03em} .case-overview p{font-size:16px;color:var(--muted);line-height:1.8;margin:18px 0 0} .case-gallery{padding-top:35px} .case-gallery-heading{margin-bottom:40px} .case-gallery-heading h2{font-size:clamp(32px,4vw,54px)} .case-gallery-heading>p:last-child{color:var(--muted)} .case-shot{margin:0 0 56px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper-secondary)} .case-shot figcaption{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 30px} .case-shot h3{font:500 24px var(--display);margin:0 0 8px} .case-shot p{color:var(--muted);margin:0;font-size:15px} .case-shot figcaption>a{font-size:14px;text-decoration:underline;text-underline-offset:4px;flex-shrink:0} .case-shot>a{display:block} .case-shot img{display:block;width:100%;height:auto} .case-next{padding-top:40px;padding-bottom:40px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--lavender)} .case-next>a:last-child{text-align:right} .case-next strong{display:block;font:500 clamp(24px,3vw,40px) var(--display);margin-top:8px} .case-layout{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);grid-template-areas:"prints copy";align-items:start;gap:clamp(28px,4vw,64px);padding:40px max(3vw,24px) 24px;max-width:1200px} .case-copy{grid-area:copy;min-width:0} @media(min-width:1201px){ .case-page .case-layout{max-width:1320px;padding-inline:max(2.5vw,24px)} } .case-prints{grid-area:prints;min-width:0} .case-layout .case-hero{padding:0 0 32px;margin:0} .case-layout .case-hero h1{font-size:clamp(28px,2.5vw,36px)} .case-layout .case-intro{margin:20px 0 24px} .case-layout .case-overview{grid-template-columns:1fr;padding:28px 0 0;margin:0;gap:28px} .case-layout .case-overview h2{font-size:24px} .case-layout .case-overview p{margin-top:12px} .case-layout .case-shot{width:fit-content;max-width:100%;margin:0 auto 32px;border-radius:8px;box-shadow:0 12px 35px #302A3510;background:var(--paper)} .case-layout .case-shot:last-child{margin-bottom:0} .case-layout .case-shot img{width:auto;height:auto;max-width:100%;max-height:none;object-fit:contain} .case-image-notes{border-top:1px solid var(--line);padding-top:26px;display:grid;gap:26px} .case-image-note h3{font:500 19px var(--display);margin:0 0 8px} .case-image-note p{color:var(--muted);font-size:14px;margin:0 0 10px} .case-image-note>a{font-size:14px;text-decoration:underline;text-underline-offset:4px} .case-diva .case-layout{grid-template-columns:minmax(0,380px) minmax(0,1fr)} .case-diva .case-prints{width:100%;max-width:380px} .case-diva .case-shot{width:100%} .case-diva .case-shot img{width:100%;height:auto;max-height:none;aspect-ratio:auto} .case-diva .case-layout .case-overview p{font-size:18px;line-height:1.8} .case-diva .case-layout .case-overview h2{font-size:27px} .case-page .case-hero .eyebrow{font-size:14px;margin-bottom:18px} @media(max-width:800px){ .case-diva .case-layout{grid-template-columns:minmax(0,1fr)} .case-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "prints";padding:32px 22px 24px;gap:32px} .case-prints{width:100%;max-width:380px;justify-self:center} } @media(max-width:700px){ .case-header .logo{font-size:22px} .case-back{font-size:12px} .case-hero{padding-top:42px;padding-bottom:32px} .case-overview{grid-template-columns:1fr;gap:30px;padding-top:32px;padding-bottom:32px} .case-gallery{padding-top:25px;padding-bottom:25px} .case-shot{border-radius:10px;margin-bottom:32px} .case-shot figcaption{align-items:flex-start;flex-direction:column;padding:20px;gap:16px} .case-next{align-items:flex-start;flex-direction:column} .case-next>a:last-child{text-align:left} } .case-drones .case-layout,.case-netglobe .case-layout{grid-template-columns:minmax(0,480px) minmax(0,1fr)} .drone-gallery{color:var(--ink);padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--paper-secondary);box-shadow:0 12px 35px #302A3508;position:relative;isolation:isolate} .drone-gallery-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted)} .drone-gallery-heading .mono{font-size:9px;display:flex;align-items:center;gap:8px} .drone-count{font:11px var(--mono);color:var(--muted);white-space:nowrap} .drone-gallery-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0} .drone-gallery-title h2{font:500 clamp(24px,2.5vw,32px)/1.15 var(--display);letter-spacing:-1px;margin:0} .drone-gallery-title>span{font-size:38px;color:var(--lilac)} .drone-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px} .drone-toolbar p{margin:0;color:var(--muted);font-size:12px} .drone-toolbar p span{display:inline-block;margin-left:6px;color:var(--lilac)} .drone-arrows{display:flex;gap:8px;flex-shrink:0} .drone-arrows button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:22px;cursor:pointer;transition:background .25s,box-shadow .25s,transform .25s} .drone-arrows button:not(:disabled):hover{background:var(--lavender);box-shadow:0 4px 12px #302A3508;transform:translateY(-2px);border-color:var(--lilac)} .drone-arrows button:disabled{opacity:.3;cursor:default} .drone-gallery button:focus-visible,.drone-track:focus-visible{outline:2px solid var(--ink);outline-offset:3px} .drone-thumbnails{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:20px} .drone-thumbnails button{padding:0;min-width:0;text-align:left;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper);cursor:pointer;opacity:1;transition:opacity .25s,border-color .25s,box-shadow .25s,transform .25s} .drone-thumbnails button:hover{opacity:1;transform:translateY(-3px)} .drone-thumbnails button[aria-current="true"]{opacity:1;border-color:var(--lilac);background:var(--lavender);box-shadow:0 0 0 2px #A98AD426} .drone-thumbnails img{display:block;width:100%;height:56px;object-fit:cover;object-position:top} .drone-thumbnails span{display:block;padding:7px 4px;font:9px var(--mono);color:var(--ink);white-space:nowrap;text-align:center} .drone-track{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--lilac) var(--paper-secondary);padding-bottom:12px;position:relative;overscroll-behavior-x:contain;border-radius:10px;transition:height .35s ease} .drone-slide{flex:0 0 91%;min-width:0;scroll-snap-align:start;margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)} .drone-slide:last-child{margin-right:9%} .drone-slide figcaption{display:flex;align-items:center;gap:12px;padding:12px;font-size:12px;background:var(--paper)} .drone-slide figcaption span:first-child{font:10px var(--mono);color:var(--muted)} .drone-slide figcaption span:last-child{margin-left:auto;color:var(--lilac)} .drone-slide>img{display:block;width:100%;height:auto;max-height:none} .drone-gallery-footer{display:flex;justify-content:space-between;gap:12px;padding-top:16px;font:9px var(--mono);color:var(--muted)} .drone-active-name{color:var(--ink)} @media(max-width:800px){.case-drones .case-layout,.case-netglobe .case-layout{grid-template-columns:minmax(0,1fr)}.case-drones .case-prints,.case-netglobe .case-prints{max-width:480px}} @media(max-width:400px){.drone-gallery{padding:16px}.drone-gallery-heading .mono{font-size:8px}.drone-thumbnails{gap:5px}.drone-thumbnails span{font-size:8px}.drone-gallery-footer{font-size:8px}} @media(prefers-reduced-motion:no-preference){.drone-toolbar p span{animation:drone-hint 2.4s ease-in-out 3}@keyframes drone-hint{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}} .drone-slide:not(.is-active){cursor:pointer} .drone-slide:not(.is-active):hover{border-color:var(--lilac)} .case-netglobe .drone-thumbnails span{white-space:normal;overflow-wrap:anywhere;line-height:1.35} .case-netglobe .drone-thumbnails{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:4px;padding:5px 4px 12px;scrollbar-width:thin;scrollbar-color:var(--lilac) var(--lavender)} .case-netglobe .drone-thumbnails button{flex:0 0 90px;scroll-snap-align:start} .case-netglobe .drone-thumbnails span{font-size:10px} .thumbnail-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px} .thumbnail-navigation p{margin:0;font-size:12px;color:var(--muted)} .thumbnail-navigation p span{color:var(--ink);white-space:nowrap} .thumbnail-navigation .drone-arrows button{width:36px;height:36px;font-size:20px} body:not(.case-page) .header{ height:112px; position:sticky; top:0; z-index:50; margin:0; padding-left:6vw; padding-right:6vw; border-bottom:0; background:rgb(239 232 248 / 95%); transition:background .25s ease,backdrop-filter .25s ease; } body:not(.case-page) .header.is-scrolled{ background:rgb(239 232 248 / 48%); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); } @media(min-width:701px) and (max-width:1200px){ html:has(body:not(.case-page)){scroll-padding-top:170px} body:not(.case-page) .header{height:auto;min-height:112px} } @media(max-width:700px){ body:not(.case-page) .header{height:88px;padding-left:22px;padding-right:22px} .mobile-nav{ position:fixed; z-index:49; border-bottom:0; background:rgb(239 232 248 / 70%); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); } body:not(.case-page) .mobile-nav{top:88px} } .contact h2{font-size:clamp(38px,5.3vw,80px)} .contact-arrow{width:88px;height:88px} .contact-arrow svg{width:38px;height:38px} .contact-bottom p{font-size:24px} @media(max-width:1050px){ .contact-arrow{width:72px;height:72px} .contact-arrow svg{width:32px;height:32px} } @media(max-width:700px){ .contact h2{font-size:clamp(33px,7.2vw,46px)} .contact-arrow{width:48px;height:48px;bottom:-4px} .contact-arrow svg{width:23px;height:23px} .contact-bottom p{font-size:20px} } .footer{display:grid;grid-template-columns:1fr auto 1fr} .footer p{margin:0;text-align:center} .footer>a:last-child{justify-self:end} @media(max-width:700px){ .footer{grid-template-columns:1fr 1fr} .footer p{grid-column:1 / -1;grid-row:2;text-align:center} } .hero{background:#fff} .hero .orb-scene::after{background:radial-gradient(ellipse,transparent 30%,#fff 72%)} .hero,.projects{position:relative} .projects{background:var(--paper)} @media(prefers-reduced-motion:no-preference){.hero-title,.hero-top,.hero-bottom,.projects .section-heading>*{will-change:transform,opacity,filter}} .contact{position:relative} .contact-star-target{position:absolute;left:70%;top:22%;width:1px;height:1px;pointer-events:none} @media(max-width:700px){.contact-star-target{left:82%;top:35%}} .project:nth-child(odd) .project-visual{background:var(--lavender)} .project:nth-child(even) .project-visual{background:var(--blush)} .project-visual:is(:focus-visible,.is-scroll-active) .browser{transform:rotate(0deg) translateY(-4px) scale(1.035)} .project-open{ display:inline-flex; align-items:center; gap:10px; width:auto; height:auto; min-height:42px; padding:10px 16px; border-radius:999px; border:1px solid #A98AD488; background:linear-gradient(120deg,var(--blush),var(--lavender)); color:var(--ink); font:600 12px/1.2 var(--display); white-space:nowrap; box-shadow:0 6px 18px #A98AD466,0 3px 0 #302A351A; transition:transform .3s,background .3s,box-shadow .3s,border-color .3s; } .project-open::after{ content:""; display:block; width:17px; height:17px; flex-shrink:0; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5M5 5h14v14'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5M5 5h14v14'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .3s; } .project-visual:is(:hover,:focus-visible,.is-scroll-active) .project-open{ transform:translateY(-3px); background:linear-gradient(120deg,var(--pink),var(--blush)); border-color:var(--pink); box-shadow:0 10px 22px #A98AD477,0 4px 0 #302A3522; } .project-visual:is(:hover,:focus-visible,.is-scroll-active) .project-open::after{transform:translate(3px,-3px)} @media(max-width:700px){ .project-open{right:12px;bottom:12px;min-height:38px;padding:9px 12px;font-size:11px} } .hero-copy{min-width:0} .hero h1{font-size:clamp(28px,3vw,48px);line-height:1.15} .hero h1>span+span{margin-top:10px} .hero-skills{margin-top:28px} .hero-skills>span,.about-skills>span{font-size:15px;padding:7px 12px} .hero-bottom p{position:relative} .hero-bottom p::before{content:"";position:absolute;top:-20px;left:0;width:90%;border-top:1px solid var(--line)} @media(min-width:1051px){ .hero-bottom .button{margin-right:24px} } @media(max-width:700px){ .hero h1{font-size:clamp(26px,6vw,36px)} .hero-skills{margin-top:22px} .hero-skills>span,.about-skills>span{font-size:14px;padding:7px 12px} } .hero-title,.project-grid,.project,.about,.about-copy,.process-grid,.contact, .case-layout,.case-copy,.case-prints{min-width:0} .hero-title{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(12px,2vw,36px)} .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .about{grid-template-columns:repeat(2,minmax(0,1fr))} .process-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .project-info>div,.project-actions .tags{min-width:0} .email,.case-image-note a,.case-shot figcaption>a{overflow-wrap:anywhere} @media(max-width:700px){ html{scroll-padding-top:90px} .section{padding-left:clamp(16px,5vw,24px);padding-right:clamp(16px,5vw,24px)} body:not(.case-page) .header{padding-left:clamp(16px,5vw,24px);padding-right:clamp(16px,5vw,24px)} .header .logo{font-size:clamp(19px,5vw,25px)} .mobile-nav{text-align:center} .mobile-nav a{justify-content:center} .mobile-nav a[href="https://wa.me/5519992899393"]{margin-left:auto;margin-right:auto} .hero,.section-heading,.about-copy,.process,.contact,.footer{text-align:center} .hero-top,.contact-top{justify-content:center} .hero-top .eyebrow,.contact-top .eyebrow,.about-copy .eyebrow,.process .eyebrow{justify-content:center} .hero-title{grid-template-columns:minmax(0,1fr)} .hero h1{font-size:clamp(26px,7.2vw,42px);letter-spacing:-.05em;overflow-wrap:break-word;padding-inline:0;text-wrap:balance} .hero-skills,.about-skills,.tags{justify-content:center} .orb-scene{max-width:100%;margin-inline:auto;scale:.8} .hero-bottom{align-items:center;padding-top:46px} .hero-bottom p{flex:0 1 auto;width:100%;font-size:clamp(17px,4.8vw,20px);padding-inline:clamp(6px,2vw,14px);text-wrap:balance} .hero-bottom p::before{left:50%;transform:translateX(-50%)} .hero-bottom .button{max-width:100%;justify-content:center;text-align:center;white-space:normal} .section-heading>p{margin-left:auto;margin-right:auto} .project-grid,.about,.process-grid{grid-template-columns:minmax(0,1fr)} .project{width:100%;max-width:560px;margin-inline:auto;text-align:center} .project-visual{height:clamp(220px,65vw,350px);padding:clamp(54px,13vw,64px) clamp(14px,6vw,28px) 0} .browser{height:100%;max-width:100%;transform:rotate(-2deg) translateY(12px)} .project-badges{left:12px;right:12px;gap:8px;align-items:flex-start;text-align:left} .project-badges>span:last-child{white-space:nowrap} .project-open{left:50%;right:auto;transform:translateX(-50%);max-width:calc(100% - 24px)} .project-visual:is(:hover,:focus-visible,.is-scroll-active) .project-open{transform:translateX(-50%) translateY(-3px)} .project-info{display:block;margin-top:20px} .project-info .mono{overflow-wrap:anywhere} .project-number{display:block;margin-top:5px} .project-description{max-width:58ch;margin-inline:auto} .project-actions{flex-direction:column;justify-content:center;gap:14px} .project-actions .tags{width:100%} .project-site-link{white-space:normal;text-align:center} .about-art{width:100%;max-width:560px;margin-inline:auto;align-items:center;text-align:center} .about-copy h2{font-size:clamp(32px,8vw,43px)} .code-card{max-width:100%;overflow-wrap:anywhere;text-align:left} .process .section-heading{padding-right:0} .process-star{position:static;display:block;margin:16px auto 0} .process-grid{gap:30px} .process-grid>div{max-width:520px;width:100%;margin-inline:auto} .process-grid h3{margin-top:14px} .contact h2{font-size:clamp(32px,8.5vw,48px);line-height:1.12;overflow-wrap:anywhere} .contact-arrow{position:static;display:grid;margin:24px auto 0} .contact-bottom{align-items:center} .contact-bottom>div{max-width:100%} .email{font-size:clamp(15px,5vw,22px)} .copy-email{margin-inline:auto} .footer{grid-template-columns:minmax(0,1fr);justify-items:center;gap:12px} .footer .logo,.footer>a:last-child{justify-self:center;text-align:center} .footer p{grid-column:auto;grid-row:auto} .case-header{gap:10px} .case-header .logo{font-size:clamp(17px,5vw,22px)} .case-back{text-align:right;line-height:1.3} .case-hero,.case-copy,.case-overview,.case-gallery-heading,.case-image-notes,.case-next{text-align:center} .case-hero h1{font-size:clamp(34px,9vw,54px)} .case-intro{margin-left:auto;margin-right:auto} .case-hero .project-actions{justify-content:center} .case-shot figcaption{align-items:center;text-align:center} .case-next{align-items:center} .case-next>a:last-child{text-align:center} } @media(max-width:380px){ .project-badges{font-size:9px} .browser-bar>span{font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .orb-scene{height:220px;margin-block:-10px;scale:.7} .about-art{min-height:340px} .art-footer{overflow-wrap:anywhere} } @media(min-width:1801px){ html{overflow-x:clip} .hero,.about,.process,.contact,.case-next{ position:relative; isolation:isolate; background:transparent; } .hero::before,.about::before,.process::before,.contact::before,.case-next::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); z-index:-1; pointer-events:none; background:var(--section-surface); } .hero{--section-surface:#fff} .about{--section-surface:var(--paper-secondary);border-top:0;border-bottom:0} .about::before{border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .process{--section-surface:var(--ink)} .contact{--section-surface:var(--blush)} .case-next{--section-surface:var(--lavender);border-top:0} .case-next::before{border-top:1px solid var(--line)} } @media(min-width:701px) and (max-width:1050px){ .orb-scene{height:340px} .label-code{top:5px} .label-design{bottom:5px} } @media(max-width:700px){ .orb-scene{height:270px} .label-code{top:8px;left:0} .label-design{bottom:8px;right:0} } @media(max-width:380px){ .orb-scene{height:235px;margin-block:0} .label-code{top:-4px} .label-design{bottom:-4px} } .hero-bottom{flex-wrap:nowrap} .hero-bottom p{min-width:0;flex:1 1 auto} .hero-actions{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,24px);flex:0 0 auto;white-space:nowrap} .hero-actions .button{margin-right:0} .hero-actions .scroll-link{display:inline-flex} @media(max-width:1200px){ .hero-actions{gap:14px} .hero-actions .button{font-size:14px;padding:12px 17px;gap:9px} .hero-actions .projects-icon{width:19px;height:19px} .hero-actions .scroll-link{font-size:11px;gap:6px} .hero-actions .scroll-link span{font-size:19px} } @media(max-width:900px){ .hero-bottom{flex-direction:column;align-items:center;gap:22px} .hero-bottom p{flex:none;width:100%} .hero-actions{width:100%;gap:24px} } @media(max-width:380px){ .hero-actions{gap:14px} .hero-actions .button{font-size:11px;padding:10px 11px;gap:6px} .hero-actions .projects-icon{width:16px;height:16px} .hero-actions .scroll-link{font-size:10px;gap:4px} .hero-actions .scroll-link span{font-size:16px} } @media(max-width:1050px){ .hero-skills{display:flex;flex-wrap:wrap;max-width:340px;justify-content:flex-start;gap:8px} .hero-skills>span{flex:0 0 auto} } @media(max-width:700px){ .hero-skills{max-width:260px;justify-content:center;margin-inline:auto} } @media(min-width:701px) and (max-width:1200px){ html:has(body:not(.case-page)){scroll-padding-top:105px} body:not(.case-page) .header, body:not(.case-page) .header.is-scrolled{ height:88px; min-height:0; flex-wrap:nowrap; gap:clamp(8px,1.5vw,20px); padding-top:0; padding-bottom:0; } body:not(.case-page) .header .logo{ font-size:clamp(17px,1.9vw,24px); white-space:nowrap; flex-shrink:0; } body:not(.case-page) .header nav{ order:initial; flex-basis:auto; gap:clamp(8px,1.3vw,22px); font-size:clamp(12px,1.35vw,17px); white-space:nowrap; } body:not(.case-page) .nav-contact{ font-size:clamp(11px,1.2vw,16px); padding:9px 12px; gap:6px; flex-shrink:0; } body:not(.case-page) .nav-contact .whatsapp-icon{width:17px;height:17px} }  @media(min-width:701px) and (max-width:1200px){ .contact-bottom p{font-size:clamp(16px,1.8vw,20px)} .contact-bottom>div{flex-shrink:0} .contact-bottom .email{font-size:clamp(14px,1.7vw,19px);white-space:nowrap} .projects .project-grid{column-gap:clamp(20px,3vw,32px);row-gap:0} .projects .project{ display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:0; padding-bottom:48px; } .projects .project-info{align-items:flex-start;margin-top:20px} .projects .project-info .mono{min-height:3.2em} .projects .project-actions{ display:flex; flex-direction:column; gap:14px; justify-content:flex-start; align-items:center; margin-top:0; } .projects .project-actions .tags{width:100%;justify-content:center;align-self:start} .projects .project-site-link{align-self:center} } .orb{width:205px;height:205px} .orb>span{font-size:80px} .orb-star{font-size:50px} @media(min-width:1600px){ .orb{width:225px;height:225px} .orb>span{font-size:86px} .orb-star{font-size:53px} .orbit-one{width:410px;height:160px} .orbit-two{width:330px;height:205px} .orbit-three{width:360px;height:180px} } @media(max-width:1050px){ .orb{width:155px;height:155px} .orb>span{font-size:59px} .orb-star{font-size:35px} } @media(max-width:700px){ .orb{width:100px;height:100px} .orb>span{font-size:40px} .orb-star{font-size:24px} .orbit{width:230px;height:100px} .orbit-two{width:205px;height:155px} .orbit-three{width:225px;height:135px} } .mobile-nav{display:none} .hero-bottom p>span{display:block} @media(max-width:700px){ .hero-bottom p>span{text-wrap:balance} .menu-toggle{ display:grid;place-items:center;flex:0 0 auto; width:38px;height:38px;padding:0; border:1px solid var(--line);border-radius:50%; background:none;color:var(--ink);box-shadow:none; rotate:0; transition:background .25s ease,transform .25s ease; } .menu-toggle:is(:hover,:focus-visible),.menu-toggle[aria-expanded="true"]{ background:var(--paper-secondary);border-color:var(--line);color:var(--ink);box-shadow:none;rotate:0; } .menu-toggle:active{transform:scale(.94)} .menu-icon{display:flex;flex-direction:column;justify-content:center;gap:4px;width:18px;height:18px} .menu-icon span{display:block;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .35s ease,opacity .2s ease,width .35s ease} .menu-toggle[aria-expanded="true"] .menu-icon span:first-child{transform:translateY(6px) rotate(45deg)} .menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(2){opacity:0;transform:scaleX(0)} .menu-toggle[aria-expanded="true"] .menu-icon span:last-child{transform:translateY(-6px) rotate(-45deg)} .mobile-nav{ display:block;left:12px;right:12px; padding:18px;border:1px solid #D8C7F099;border-radius:0 0 22px 22px; background:rgb(252 249 251 / 78%); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); box-shadow:0 22px 38px #302A3522,inset 0 1px 0 rgb(255 255 255 / 65%); opacity:0;visibility:hidden;pointer-events:none; transform:translateY(-14px) scale(.98);transform-origin:top center; transition:opacity .35s ease,transform .42s cubic-bezier(.2,.8,.2,1),visibility .42s; } .mobile-nav.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)} .mobile-nav a{ justify-content:center;gap:12px;padding:13px 16px;text-align:center; border-radius:12px;font-size:21px;font-weight:500; opacity:0;transform:translateY(-8px); transition:background .25s,color .25s,opacity .35s ease,transform .4s ease; } .mobile-nav.is-open a{opacity:1;transform:translateY(0)} .mobile-nav.is-open a:nth-child(2){transition-delay:.05s} .mobile-nav.is-open a:nth-child(3){transition-delay:.1s} .mobile-nav.is-open a:nth-child(4){transition-delay:.15s} .mobile-nav a:not(:last-child):hover{background:var(--paper-secondary)} .mobile-nav a:last-child{ width:fit-content;justify-content:center;margin:12px auto 0; position:relative;isolation:isolate;overflow:hidden; transition:background .3s,box-shadow .3s,color .3s,opacity .35s ease,transform .4s ease; } .mobile-nav a:last-child::after{display:none} .mobile-nav a:last-child::before{ content:"";position:absolute;pointer-events:none;opacity:0; inset:-50% auto -50% -60%;width:40%; background:linear-gradient(90deg,transparent,#FCF9FB66,transparent); transform:skewX(-25deg); } .mobile-nav a:last-child:is(:hover,:focus-visible,:active){ background:var(--ink);color:var(--paper); box-shadow:5px 5px 0 var(--pink),-4px -4px 0 var(--lavender); } } @media(prefers-reduced-motion:reduce){ .menu-toggle,.menu-icon span,.mobile-nav,.mobile-nav a{transition:none!important} } @media(max-width:700px) and (prefers-reduced-motion:no-preference){ .mobile-nav a:last-child:is(:hover,:focus-visible,:active)::before{ opacity:1;animation:project-scan 1.5s ease-in-out infinite; } } @media(max-width:700px){ .orb-label,.label-code,.label-design{ font-size:11px;line-height:1.2;padding:7px 10px; white-space:nowrap; } .label-code{top:42px;left:12px} .label-design{bottom:42px;right:12px} } @media(max-width:380px){ .orb-label,.label-code,.label-design{font-size:9px;padding:6px 8px} .label-code{top:30px;left:8px} .label-design{bottom:32px;right:8px} .orb{width:88px;height:88px} .orb>span{font-size:35px} .orb-star{font-size:21px} .orbit{width:200px;height:88px} .orbit-two{width:180px;height:135px} .orbit-three{width:195px;height:120px} } .process-grid h3{margin-top:0} .mobile-break{display:none} @media(max-width:700px){ .mobile-break{display:revert} h1,h2,h3,h4,p,li,figcaption,blockquote{ text-wrap:pretty; } h1,h2,h3,h4, .hero-bottom p>span, .section-heading>p, .eyebrow{ text-wrap:balance; } .orb-scene .scene-cross{display:none} .hero-title{padding-bottom:0} .hero-bottom{padding-top:12px} .section.projects{padding-bottom:24px} .projects .project-description{ display:block; height:auto; overflow:visible; -webkit-line-clamp:unset; } } @media(max-width:1200px){ .projects .tags{gap:4px} .projects .tags>span{ padding:7px 8px; font-size:12px; } } @media(max-width:380px){ .projects .tags{gap:3px} .projects .tags>span{ padding-inline:6px; font-size:11px; } } @media(max-width:700px){ .hero-skills>span,.about-skills>span{ font-size:12px; padding:6px 10px; } }  .about-copy>p.about-knowledge,.about-skills{width:100%;max-width:none} .about .about-copy>p.about-knowledge{text-wrap:wrap} .about-skills>span{flex:0 0 auto;text-align:center}  .symbol-icon{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-.125em} .orb-star .symbol-icon,.ticker b .symbol-icon,.process-star .symbol-icon{vertical-align:0}  .orb>span{display:flex;align-items:center;justify-content:center;gap:.045em;line-height:1;letter-spacing:0;white-space:nowrap} .orb-letter{display:block;line-height:.75} .orb .orb-star{display:flex;align-items:center;justify-content:center;margin:0;vertical-align:baseline;line-height:1} .orb-star .symbol-icon{display:block}  @media(max-width:1200px){ html,body{max-width:100%;overflow-x:hidden;overflow-x:clip} } @media(max-width:700px){ .case-page .case-hero .eyebrow{justify-content:center;text-align:center} }  .case-action-links{display:contents} .case-photos-link{display:none} @media(max-width:700px){ .case-page .case-action-links{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;width:100%} .case-page .case-photos-link{display:inline-flex} .case-netglobe .case-hero .tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .case-diva .case-hero .tags,.case-drones .case-hero .tags{ display:grid;grid-template-columns:repeat(6,auto);gap:8px;width:max-content;max-width:100%;margin-inline:auto;justify-content:center; } .case-diva .case-hero .tags>span,.case-drones .case-hero .tags>span{grid-column:span 2;justify-self:center}  .case-diva .case-hero .tags>span:first-child{grid-row:2;grid-column:1/-1} .case-diva .case-hero .tags>span:nth-child(n+2){grid-row:1} .case-drones .case-hero .tags>span:first-child{grid-row:2;grid-column:4/7} .case-drones .case-hero .tags>span:nth-child(2){grid-row:2;grid-column:1/4} .case-drones .case-hero .tags>span:nth-child(n+3){grid-row:1} .case-page #fotos{scroll-margin-top:24px} }