@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#0b0d11;--surface:#12151b;--line:#30333a;--ink:#f5f6f0;--muted:#9c9fa6;--accent:#deff72;--light:#f0f0e9;--dark:#131518;--font:'Manrope',Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}::selection{background:var(--accent);color:#111}img{max-width:100%;display:block}button{cursor:pointer}.container{width:min(1360px,calc(100% - 104px));margin-inline:auto}.skip-link{position:absolute;top:-100px;left:20px;background:var(--accent);color:var(--dark);z-index:200;padding:10px 16px}.skip-link:focus{top:10px}.announcement{height:30px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:#171918;font-weight:800;text-transform:uppercase;font-size:10px;letter-spacing:.07em}.announcement a{border-bottom:1px solid #1e231d}.announcement-sep{opacity:.4}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#252e17;box-shadow:0 0 0 3px rgba(17,36,11,.1)}.site-header{position:relative;z-index:40;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(10,12,15,.92);backdrop-filter:blur(18px)}.nav-wrap{height:88px;display:flex;align-items:center;justify-content:space-between;gap:32px}.brand{display:flex;align-items:center;gap:7px;white-space:nowrap}.brand-mark{width:30px;height:31px;display:flex;gap:3px;transform:skewX(-13deg);align-items:flex-end}.brand-mark span{width:7px;background:var(--accent);height:21px}.brand-mark span:nth-child(2){height:30px}.brand-mark span:nth-child(3){height:16px}.brand-word{font-weight:800;font-size:31px;letter-spacing:-.09em;line-height:1}.accent{color:var(--accent)}.brand-sub{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;line-height:1.2;margin:6px 0 0 8px;border-left:1px solid #555;padding-left:10px}.desktop-nav{display:flex;gap:34px;white-space:nowrap;font-size:12px;color:#bbbcbf;font-weight:700}.desktop-nav a{transition:color .2s}.desktop-nav a:hover,.footer-links a:hover{color:var(--accent)}.btn{display:inline-flex;gap:26px;align-items:center;justify-content:space-between;font-size:13px;font-weight:800;border-radius:100px;min-height:52px;padding:8px 10px 8px 23px;transition:transform .25s,background .25s}.btn:hover{transform:translateY(-3px)}.btn-nav{white-space:nowrap;min-height:44px;background:#21252a;font-size:11px;border:1px solid #42454a;padding:10px 20px;gap:19px}.btn-nav:hover{background:#32383f}.menu-toggle{display:none;background:transparent;border:0;padding:12px}.menu-toggle span{display:block;width:26px;height:2px;background:white;margin:6px}.mobile-menu[hidden]{display:none}.hero{min-height:740px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:10px;position:relative;padding-top:58px;padding-bottom:44px}.hero-copy{position:relative;z-index:3}.eyebrow,.section-label{font-size:11px;letter-spacing:.19em;font-weight:800;color:var(--accent);display:flex;gap:15px;align-items:center}.eyebrow-line{width:31px;height:1px;background:var(--accent)}.hero h1{font-size:clamp(60px,6.25vw,109px);line-height:1.07;letter-spacing:-.085em;margin:35px 0 31px;font-weight:800}.hero h1 em{font-style:normal;color:var(--accent)}.word-spotlight{position:relative}.word-spotlight::after{content:'';position:absolute;left:3%;bottom:3px;width:96%;height:5px;background:var(--accent);border-radius:70%;transform:rotate(-2deg);opacity:.95}.hero-lead{color:#b4b6bc;max-width:515px;font-size:15px;line-height:1.9;margin:0 0 32px}.hero-actions{display:flex;align-items:center;gap:31px}.btn-primary{background:var(--accent);color:#10130d;min-width:210px}.btn-primary:hover{background:#e9ffae}.round-arrow{width:35px;height:35px;border-radius:50%;background:#10130d;color:#e3ff7b;display:inline-flex;align-items:center;justify-content:center;font-size:20px;font-weight:500}.text-link{font-size:13px;font-weight:750;display:flex;align-items:center;gap:10px;border-bottom:1px solid #60646d;padding-bottom:7px}.text-link span{color:var(--accent)}.hero-bottom{display:flex;align-items:center;gap:16px;max-width:480px;color:#868991;font-size:9px;letter-spacing:.18em;font-weight:700;margin-top:96px}.hero-bottom-line{width:60px;height:1px;background:#555}.hero-bottom>span:last-child{margin-left:auto}.hero-art{min-height:595px;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;perspective:1200px}.hero-art::before{position:absolute;inset:9% -6% 8% 8%;content:'';background:radial-gradient(ellipse at center,#b7fd5152 0%,#7d9f6840 18%,#14172000 68%);filter:blur(10px)}.orbit{position:absolute;aspect-ratio:1;border:1px solid rgba(213,245,190,.14);border-radius:50%;transform:rotate(-18deg)}.orbit-a{width:590px}.orbit-b{width:470px}.hero-star{position:absolute;z-index:5;color:var(--accent);font-size:50px}.star-one{left:8%;top:18%}.star-two{right:3%;bottom:18%;font-size:28px}.art-panel{border:1px solid #b6bdb3;border-radius:10px;box-shadow:0 30px 70px #000b}.art-panel-main{width:430px;max-width:90%;height:460px;position:relative;z-index:3;transform:rotate(7deg) translate(22px,14px);background:#ecece5;overflow:hidden}.art-window-head{height:43px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;background:#f4f5ef;color:#535756;text-transform:uppercase;font-size:8px;font-weight:800;letter-spacing:.09em;border-bottom:1px solid #b9bdb2}.window-dots{display:flex;gap:4px}.window-dots i{width:6px;height:6px;background:#999;border-radius:50%}.window-dots i:first-child{background:#d5acb3}.window-dots i:nth-child(2){background:#e2d0ac}.art-poster{height:calc(100% - 43px);padding:35px;display:flex;flex-direction:column;justify-content:space-between;background:#d4fc84;color:#12150e}.poster-mini{font-size:10px;font-weight:900;letter-spacing:.13em}.poster-big{font-weight:900;letter-spacing:-.105em;line-height:.92;font-size:82px}.poster-big span{-webkit-text-stroke:2px #151714;color:transparent}.poster-dot{color:#f250a6!important;-webkit-text-stroke:0!important}.poster-footer{display:flex;align-items:end;justify-content:space-between;font-size:11px;font-weight:800}.poster-disc{border-radius:50%;background:#10130b;width:69px;height:69px;color:var(--accent);font-size:39px;letter-spacing:-.14em;display:grid;place-items:center}.art-panel-back{position:absolute;z-index:1;width:305px;height:362px;top:35px;left:13px;background:#f19ac4;border:8px solid #f2ece9;transform:rotate(-16deg);padding:22px;display:flex;flex-direction:column;justify-content:space-between;color:#251e26}.pill-meta{font-size:9px;font-weight:900;letter-spacing:.16em}.art-panel-squares{display:grid;grid-template-columns:1fr 1fr;gap:5px;width:165px;transform:rotate(-10deg)}.art-panel-squares i{aspect-ratio:1;border-radius:50% 50% 8% 50%;background:#ebf7c6}.art-panel-squares i:nth-child(2){background:#36352f;transform:rotate(90deg)}.art-panel-squares i:nth-child(3){background:#fff}.art-panel-squares i:nth-child(4){background:#ea5b87}.small-visual{font-weight:900;font-size:28px;letter-spacing:-.08em;line-height:1.1}.art-sticker{position:absolute;z-index:6;right:-1%;top:9%;width:117px;height:117px;border-radius:50%;background:#c6ff5f;color:#1a2017;display:flex;align-items:center;justify-content:center;gap:4px;transform:rotate(17deg);font-size:35px;box-shadow:0 13px 25px #0004}.art-sticker span{font-size:10px;letter-spacing:.01em;font-weight:900;line-height:1.18}.floating-caption{position:absolute;z-index:8;bottom:14px;left:4%;border:1px solid #35393d;padding:14px 20px;border-radius:30px;background:#181c20;color:#d6d8d2;font-size:10px;font-weight:750;display:flex;gap:10px;align-items:center;box-shadow:0 6px 30px #0005}.floating-caption-dot,.tiny-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}.marquee{overflow:hidden;border-top:1px solid #31363a;border-bottom:1px solid #31363a;background:#101318;white-space:nowrap;transform:rotate(-1deg);margin:0 -1%}.marquee-track{width:max-content;animation:marquee 30s linear infinite;padding:20px 0;color:#8b8e92;font-weight:800;font-size:12px;letter-spacing:.2em}.marquee-track span{color:var(--accent);padding:0 45px;font-size:18px}@keyframes marquee{to{transform:translateX(-50%)}}.section{padding:130px 0}.section-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:53px}.section-intro h2,.services-header h2,.process-intro h2{font-size:clamp(48px,7vw,93px);font-weight:800;line-height:1.06;letter-spacing:-.085em;margin:25px 0 0}.outline-text{color:transparent;-webkit-text-stroke:1.7px #a5a9ad}.heading-star{font-size:.43em;vertical-align:top;margin-left:18px;color:var(--accent)}.section-intro>p{max-width:345px;color:#a8abb0;font-size:14px;line-height:1.85;margin:0 0 8px}.project-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:34px}.filters{display:flex;gap:9px;flex-wrap:wrap}.filter{border:1px solid #353940;background:transparent;color:#a8abb0;padding:12px 20px;border-radius:100px;font-size:12px;font-weight:800;transition:background .2s,color .2s}.filter:hover{color:#fff;border-color:#a0a7a4}.filter.is-active{background:#e8eee0;color:#161917;border-color:#e8eee0}.filter span{opacity:.55;margin-left:8px}.view-label{font-size:9px;font-weight:800;letter-spacing:.15em;color:#92969a;display:flex;gap:10px;align-items:center}.projects-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:33px;row-gap:70px}.project-card{min-width:0}.project-card[hidden]{display:none!important}.project-image{position:relative;overflow:hidden;border-radius:13px;aspect-ratio:1.36;background:#e5e4db;display:block}.project-image img{height:100%;width:100%;object-fit:cover;object-position:top center;transition:transform .7s cubic-bezier(.2,.7,.2,1)}.project-image:hover img{transform:scale(1.045)}.image-overlay-arrow{position:absolute;right:22px;bottom:22px;width:51px;height:51px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:#f7f8ef;color:#141715;transition:transform .25s}.project-image:hover .image-overlay-arrow{transform:rotate(45deg);background:var(--accent)}.project-meta{display:flex;justify-content:space-between;gap:16px;padding:23px 0 0}.project-kicker{display:flex;align-items:center;gap:9px;color:#979ca2;font-weight:800;font-size:9px;letter-spacing:.12em}.status-dot{width:7px;height:7px;border-radius:50%}.real-dot{background:#c7fd5e}.concept-dot{background:#f0b9d7}.kicker-sep{opacity:.55}.project-meta h3{font-size:27px;font-weight:800;letter-spacing:-.045em;margin:11px 0 7px}.project-meta p{color:#999da3;font-size:13px;line-height:1.75;max-width:475px;margin:0}.project-link{flex-shrink:0;align-self:center;width:46px;height:46px;border-radius:50%;border:1px solid #45484f;display:grid;place-items:center;font-size:22px;transition:background .2s,color .2s}.project-link:hover{background:var(--accent);color:#111;border-color:var(--accent)}.project-note{font-size:10px;color:#757a7d;margin-top:8px}.store-preview{background:#eaece4;padding:30px}.store-illustration{width:100%;height:100%;background:#f5f7ee;color:#253b26;border-radius:4px;overflow:hidden;box-shadow:0 18px 40px rgba(33,44,31,.11);display:flex;flex-direction:column}.store-top{height:59px;padding:14px 25px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e0e5d6;gap:8px;font-size:9px;font-weight:900;white-space:nowrap}.store-top b{font-size:18px;letter-spacing:-.06em}.store-icon{color:#76ae40;font-size:21px}.store-top span:nth-child(2){font-size:8px;color:#647261;letter-spacing:.08em}.store-visual{display:grid;grid-template-columns:1fr 1fr;flex:1;min-height:0;background:#e2eddb;position:relative}.store-copy{z-index:2;padding:34px 0 20px 38px}.store-copy>span:first-child{color:#507447;letter-spacing:.15em;font-size:8px;font-weight:900}.store-copy h3{font-size:clamp(26px,3vw,52px);line-height:1.06;letter-spacing:-.07em;margin:14px 0 21px}.store-mock-btn{display:inline-block;padding:11px 16px;background:#30683e;color:#fff;font-weight:900;font-size:8px;letter-spacing:.06em}.store-circles{position:relative}.store-circles i{position:absolute;display:block;border-radius:50%}.circle-one{width:73%;aspect-ratio:1;background:#81ad75;right:11%;top:12%}.circle-two{width:62%;aspect-ratio:1;background:#d2dcb5;right:23%;top:19%;box-shadow:inset 0 0 60px #43774557}.circle-three{width:37%;aspect-ratio:1;background:#edede2;right:35%;top:34%;box-shadow:18px 18px 0 #366a3b}.tools-graphic{position:absolute;top:15%;right:8%;font-size:clamp(150px,15vw,260px);color:#305d38;line-height:1;transform:rotate(19deg)}.store-bottom{min-height:43px;display:flex;justify-content:space-around;align-items:center;gap:5px;color:#6b816b;font-size:8px;font-weight:900;letter-spacing:.04em}.portfolio-after{margin-top:56px;padding-top:23px;border-top:1px solid #30343c;display:flex;justify-content:space-between;gap:15px;color:#92969b;font-size:12px}.portfolio-after a{font-weight:800;color:var(--accent)}.services-section{background:#171b20}.services-header{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:63px}.services-header p{max-width:350px;font-size:14px;line-height:1.9;color:#aeb1b3;margin:0 0 8px}.services-list{border-top:1px solid #393e45}.service-row{border-bottom:1px solid #393e45;display:grid;grid-template-columns:70px 1fr 160px 44px;align-items:center;gap:20px;padding:28px 0;transition:padding .25s,background .25s}.service-row:hover{padding-left:18px;background:#20252a}.service-num{font-size:11px;color:var(--accent)}.service-content h3{font-size:27px;font-weight:800;letter-spacing:-.04em;margin:0 0 5px}.service-content p{font-size:12px;color:#9da2a7;margin:0}.service-tag{font-size:10px;letter-spacing:.11em;font-weight:800;color:#898f94;text-align:right}.service-icon{font-size:27px;font-weight:300;text-align:right}.process-section{background:#eeeeea;color:#17191c}.process-section .section-label{color:#53604b}.process-intro{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:60px}.process-intro .outline-text{-webkit-text-stroke-color:#747777}.process-intro p{max-width:335px;color:#606567;line-height:1.8;margin:0 0 8px;font-size:14px}.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.step-card{min-height:310px;background:#e3e5de;border:1px solid #d8dcd3;border-radius:10px;padding:25px;display:flex;flex-direction:column}.step-card:nth-child(2){background:#d7e3bd}.step-card:nth-child(3){background:#e5ddd9}.step-card:nth-child(4){background:#202724;color:#f4f7ed;border-color:#202724}.step-index{font-weight:800;font-size:11px;letter-spacing:.1em}.step-symbol{font-size:58px;line-height:1;display:block;margin:43px 0 18px}.step-card h3{margin:auto 0 6px;font-size:22px;letter-spacing:-.045em}.step-card p{margin:0;color:#717572;font-size:12px;line-height:1.65}.step-card:last-child p{color:#adb6aa}.contact-section{background:var(--accent);color:#171c14;padding:89px 0 55px;position:relative;overflow:hidden}.contact-section::before{content:'✳';position:absolute;right:-8%;top:1%;font-size:700px;line-height:1;color:#d0f05f;transform:rotate(18deg)}.contact-inner{position:relative}.contact-upper{display:flex;justify-content:space-between;align-items:center}.light-label{color:#394631}.contact-availability{font-weight:900;font-size:10px;letter-spacing:.1em;display:flex;gap:10px;align-items:center}.contact-section h2{font-size:clamp(55px,8vw,116px);line-height:1.08;letter-spacing:-.085em;margin:95px 0 45px}.contact-section h2>span:first-child{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:10px}.contact-asterisk{font-size:.55em;vertical-align:top;margin-left:10px}.contact-actions{display:flex;align-items:center;gap:32px;flex-wrap:wrap}.btn-dark{background:#171b18;color:#f6f9ef;min-width:235px}.btn-dark:hover{background:#323b2e}.dark-arrow{background:var(--accent);color:#151b11}.contact-email{border-bottom:1px solid #3c5030;padding:8px 0;font-size:14px;font-weight:800}.contact-bottom{border-top:1px solid #bacf73;margin-top:100px;padding-top:20px;display:flex;justify-content:space-between;gap:15px;font-size:11px;font-weight:700}.site-footer{background:#0b0d11}.footer-inner{min-height:117px;display:flex;align-items:center;gap:33px;font-size:11px;color:#85898e}.footer-logo{color:#fff;font-size:32px;font-weight:900;letter-spacing:-.09em}.footer-logo span{color:var(--accent)}.footer-links{display:flex;gap:25px;margin-left:auto}.back-to-top{width:37px;height:37px;display:grid;place-items:center;border:1px solid #45494e;border-radius:50%;font-size:19px;color:#fff}.reveal{opacity:0;transform:translateY(25px);transition:opacity .6s ease,transform .6s ease}.reveal.is-visible{opacity:1;transform:translateY(0)}
@media(max-width:1150px){.hero h1{font-size:clamp(55px,6vw,82px)}.hero-art{transform:scale(.9)}.container{width:min(100% - 64px,1360px)}.store-top span:nth-child(2){display:none}.tools-graphic{font-size:180px}.store-copy{padding:25px 0 15px 22px}.store-copy h3{font-size:37px}}
@media(max-width:900px){.desktop-nav,.btn-nav{display:none}.menu-toggle{display:block}.mobile-menu{position:absolute;top:100%;left:0;right:0;padding:13px 32px 25px;background:#13171b;border-bottom:1px solid #363c43;display:grid;gap:0}.mobile-menu a{padding:16px 0;border-bottom:1px solid #303439;font-size:19px;font-weight:800}.nav-wrap{height:75px}.hero{grid-template-columns:1fr;gap:5px;padding-top:76px}.hero h1{font-size:clamp(64px,10vw,98px)}.hero-art{min-height:555px;transform:scale(.97)}.hero-bottom{margin-top:60px}.hero-copy{max-width:700px}.section{padding:105px 0}.section-intro h2,.services-header h2,.process-intro h2{font-size:70px}.project-toolbar{align-items:start}.view-label{display:none}.projects-grid{gap:45px 20px}.project-meta h3{font-size:22px}.store-preview{padding:17px}.store-top{padding:7px 14px;height:44px}.store-top b{font-size:13px}.store-top>span:last-child{font-size:7px}.store-copy h3{font-size:clamp(24px,4vw,38px)}.store-visual{min-height:150px}.tools-graphic{font-size:140px}.store-bottom{font-size:6px}.steps-grid{grid-template-columns:1fr 1fr}.step-card{min-height:280px}.contact-section h2{font-size:clamp(59px,8.8vw,92px)}}
@media(max-width:650px){.word-spotlight{display:block}.container{width:calc(100% - 36px)}.announcement{font-size:9px;height:29px;gap:7px}.nav-wrap{height:69px}.brand-word{font-size:29px}.hero{padding-top:58px;padding-bottom:12px;min-height:auto}.hero h1{font-size:clamp(48px,10.7vw,72px);line-height:1.1;margin:25px 0}.hero-lead{font-size:13px;line-height:1.8}.eyebrow,.section-label{font-size:9px}.hero-actions{gap:20px}.btn{font-size:12px}.btn-primary{min-width:196px}.text-link{font-size:11px}.hero-bottom{margin-top:47px;font-size:8px}.hero-bottom-line{width:20px}.hero-art{min-height:420px;transform:none}.orbit-a{width:420px}.orbit-b{width:320px}.art-panel-main{width:288px;height:324px;transform:rotate(6deg) translate(12px,8px)}.art-window-head{height:33px;padding:0 10px;font-size:6px}.art-poster{height:calc(100% - 33px);padding:21px}.poster-mini{font-size:7px}.poster-big{font-size:56px}.poster-disc{width:46px;height:46px;font-size:26px}.poster-footer{font-size:9px}.art-panel-back{width:215px;height:260px;left:4%;top:26px;padding:10px;border-width:6px}.art-panel-squares{width:110px}.small-visual{font-size:19px}.art-sticker{width:75px;height:75px;right:0;top:18px;font-size:23px}.art-sticker span{font-size:6px}.hero-star{font-size:30px}.floating-caption{left:1%;bottom:2px;font-size:8px;padding:10px 12px}.marquee-track{padding:14px 0;font-size:10px}.section{padding:80px 0}.section-intro{display:block;margin-bottom:27px}.section-intro h2,.services-header h2,.process-intro h2{font-size:clamp(46px,11vw,68px)}.section-intro>p{margin-top:21px;font-size:13px}.filters{gap:7px}.filter{padding:10px 13px;font-size:10px}.project-toolbar{margin-bottom:22px}.projects-grid{grid-template-columns:1fr;row-gap:39px}.project-image{aspect-ratio:1.32}.store-preview{padding:19px}.store-top{height:46px}.store-top b{font-size:14px}.store-visual{min-height:205px}.store-copy{padding:26px 0 14px 18px}.store-copy h3{font-size:37px}.tools-graphic{font-size:156px}.store-bottom{min-height:30px}.project-meta{padding-top:17px}.project-meta h3{font-size:22px}.project-meta p{font-size:12px}.project-kicker{font-size:8px}.image-overlay-arrow{width:42px;height:42px;right:12px;bottom:12px}.portfolio-after{flex-direction:column;line-height:1.7}.services-header,.process-intro{display:block}.services-header p,.process-intro p{margin-top:24px;font-size:13px}.services-list{margin-top:40px}.service-row{grid-template-columns:32px 1fr 27px;gap:13px;padding:23px 0}.service-content h3{font-size:20px}.service-content p{font-size:11px;line-height:1.55}.service-tag{display:none}.service-icon{font-size:19px}.steps-grid{grid-template-columns:1fr 1fr;gap:9px}.step-card{padding:16px;min-height:242px}.step-symbol{font-size:46px;margin:32px 0 13px}.step-card h3{font-size:18px}.step-card p{font-size:11px}.contact-section{padding:61px 0 37px}.contact-upper{display:block}.contact-availability{margin-top:17px;font-size:9px}.contact-section h2{font-size:clamp(45px,10vw,70px);margin:65px 0 30px}.contact-asterisk{margin-left:0;font-size:.38em}.contact-actions{gap:20px}.contact-email{font-size:13px}.contact-bottom{margin-top:75px;font-size:10px}.footer-inner{padding:25px 0;flex-wrap:wrap;gap:12px 20px}.footer-inner>div:nth-child(2){order:3;width:100%}.footer-links{margin-left:auto;gap:12px}.back-to-top{display:none}}
@media(max-width:375px){.hero h1{font-size:46px}.text-link{font-size:10px}.btn-primary{min-width:176px;padding-left:17px}.store-copy h3{font-size:30px}.store-mock-btn{font-size:6px}.store-top>span:last-child{display:none}.steps-grid{grid-template-columns:1fr}.step-card{min-height:205px}.step-symbol{margin:16px 0}.contact-section h2{font-size:43px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee-track{animation:none}.reveal{opacity:1;transform:none;transition:none}*,*::after,*::before{transition:none!important}}

/* ===== WEB / SCROLL MOTION 1.1 ===== */
/* The ambient canvas is behind all page content. Background on lower sections
   remains translucent so changing colours can be seen during scroll. */
.motion-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(ellipse at 76% 46%, #142a29 0%, #0a101a 48%, #080b10 86%);
  contain: strict;
}
.motion-scene__canvas { display: block; width: 100%; height: 100%; }
.motion-scene__grain {
  position: absolute;
  inset: -20%;
  opacity: .10;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  animation: grain-drift 9s steps(6, end) infinite;
}
@keyframes grain-drift {
  0% { transform: translate3d(-2%, 1%, 0) }
  50% { transform: translate3d(3%, -3%, 0) }
  100% { transform: translate3d(-2%, 1%, 0) }
}
body { background: #080b10; }
main, .site-footer { position: relative; z-index: 1; }
.announcement { position: relative; z-index: 45; }
.section-projects { background: rgba(6, 9, 17, .14); }
.services-section { background: rgba(10, 12, 20, .40); }
/* Make the warm neutral process section a deliberate chapter break. */
.process-section { isolation: isolate; }
/* Scroll marker on the first fold. */
.hero-bottom > span:nth-child(2) { color: #d1dfa8; }
.hero-art { will-change: translate; }
@media (max-width: 650px) {
  .motion-scene__grain { opacity: .06; }
  .services-section { background: rgba(10, 12, 20, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .motion-scene__grain { animation: none; }
  .hero-art { will-change: auto; }
}

/* Keep oversized decorative orbits from creating horizontal mobile scrolling. */
html { overflow-x: clip; }

/* ===== WEB / SCROLL MOTION 1.2 ===== */
.motion-scene {
  transition: background 700ms ease;
}
.motion-scene::before,
.motion-scene::after {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
}
.motion-scene::before {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.065), transparent 18%),
    radial-gradient(circle at 82% 24%, rgba(196,255,179,.07), transparent 16%),
    radial-gradient(circle at 58% 84%, rgba(128,213,255,.06), transparent 18%);
  filter: blur(8px);
  animation: scene-float 16s ease-in-out infinite;
  mix-blend-mode: screen;
}
.motion-scene::after {
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0) 22%, rgba(255,255,255,.02) 58%, rgba(0,0,0,.06));
}
@keyframes scene-float {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(2.5%, -2%, 0) scale(1.03); }
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -6% 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(8,11,16,.12) 35%, rgba(8,11,16,.55));
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.section-projects,
.services-section {
  backdrop-filter: blur(2px);
}
@media (max-width: 650px) {
  .motion-scene::before { opacity: .75; filter: blur(10px); }
  .hero::after { height: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-scene,
  .motion-scene::before { animation: none; transition: none; }
}


/* ===== WEB / KINETIC IDENTITY 1.3 ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.web-interlude{height:250svh;min-height:1250px;position:relative;isolation:isolate;background:transparent;z-index:1}
.web-interlude__sticky{position:sticky;top:0;height:100svh;min-height:550px;display:flex;align-items:stretch;overflow:hidden}
.web-interlude__sticky:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 62% 62% at 54% 50%,rgba(6,10,15,0) 2%,rgba(6,10,15,.13) 60%,rgba(4,6,12,.47) 100%)}
.web-interlude__sticky:after{content:"";position:absolute;pointer-events:none;inset:25px;background:linear-gradient(to right,rgba(210,255,196,.1) 0 1px,transparent 1px calc(100% - 1px),rgba(210,255,196,.1) calc(100% - 1px)),linear-gradient(to bottom,rgba(210,255,196,.08) 0 1px,transparent 1px calc(100% - 1px),rgba(210,255,196,.08) calc(100% - 1px));opacity:.58}
.web-interlude__inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding-top:50px;padding-bottom:48px;pointer-events:none}
.web-interlude__top,.web-interlude__bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:35px}
.web-interlude__eyebrow,.web-interlude__side{font-size:10px;font-weight:800;letter-spacing:.18em}
.web-interlude__eyebrow{color:#daff86;display:flex;align-items:center;gap:13px}
.web-interlude__live{display:block;width:8px;height:8px;background:#d9ff83;border-radius:50%;box-shadow:0 0 18px #a9fa73}
.web-interlude__side{color:#919fa8}
.web-interlude__side span{color:#b9fdb9}
.web-interlude__tag{display:flex;align-items:flex-start;gap:18px}
.web-interlude__line{display:block;width:43px;height:1px;background:#d7fa9a;margin-top:11px}
.web-interlude__tag>div{display:grid;gap:9px}
.web-interlude__title{font-size:clamp(17px,2vw,25px);font-weight:800;letter-spacing:-.05em;color:#f1ffed}
.web-interlude__sub{font-size:12px;color:#a5b7bf}
.web-interlude__step{display:grid;justify-items:end;gap:15px;color:#d2deeb;white-space:nowrap;font-size:10px;letter-spacing:.14em;font-weight:800}
.web-interlude__progress{display:block;width:145px;height:2px;background:rgba(230,246,255,.23);overflow:hidden}
.web-interlude__progress>span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#b2ff6d,#5adfff,#ef9bff)}
.web-interlude__crosshair{position:absolute;color:rgba(179,240,230,.45);font-size:26px;line-height:1;font-weight:300}
.web-interlude__crosshair--a{left:3%;top:27%}
.web-interlude__crosshair--b{right:5%;bottom:30%}
.web-interlude__fallback{display:none;align-self:center;font-size:clamp(100px,23vw,360px);font-weight:900;letter-spacing:-.11em;color:#dcffb0;text-shadow:0 0 60px #6feab866}
.web-interlude__fallback span{color:#9dfaff}
@media(max-width:650px){.web-interlude{height:225svh;min-height:930px}.web-interlude__sticky{min-height:480px}.web-interlude__inner{padding-top:45px;padding-bottom:42px}.web-interlude__eyebrow,.web-interlude__side{font-size:8px;letter-spacing:.09em}.web-interlude__top,.web-interlude__bottom{gap:14px}.web-interlude__title{font-size:17px}.web-interlude__sub{max-width:190px;line-height:1.6;font-size:10px}.web-interlude__tag{gap:9px}.web-interlude__line{width:20px}.web-interlude__progress{width:78px}.web-interlude__step{font-size:8px}.web-interlude__crosshair--a{left:5%}.web-interlude__crosshair--b{right:6%}}
@media(prefers-reduced-motion:reduce){.web-interlude{height:75svh;min-height:420px}.web-interlude__sticky{height:75svh;min-height:420px;position:relative}.web-interlude__fallback{display:block;margin:auto 0}.web-interlude__progress>span{transform:scaleX(1)}.web-interlude__step #motion-phase{font-size:0}.web-interlude__step #motion-phase:after{content:'WEB / DIGITAL STUDIO';font-size:9px}}

/* Prevent an overflow ancestor from breaking the sticky logo chapter. */
body{overflow-x:clip}
.web-interlude__inner{height:100%}

/* ===== WEB / 3D HANDOFF v1.4 ===== */
.section-projects {
  --projects-reveal: 0;
  position: relative;
  perspective: 1600px;
  perspective-origin: center top;
  overflow: clip;
  background:
    radial-gradient(ellipse at 50% -8%, rgba(181,255,117, calc(var(--projects-reveal) * .14)), transparent 36%),
    rgba(6, 9, 17, .14);
}
.section-projects::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7rem;
  width: min(96vw, 1100px);
  height: 22rem;
  transform: translateX(-50%) scale(calc(.8 + var(--projects-reveal) * .2));
  background:
    radial-gradient(circle at 50% 50%, rgba(217,255,198, calc((1 - var(--projects-reveal)) * .16)), rgba(96,190,255, calc((1 - var(--projects-reveal)) * .12)) 24%, rgba(16,25,43,0) 67%);
  filter: blur(12px);
  opacity: calc(.9 - var(--projects-reveal) * .82);
  pointer-events: none;
}
.section-projects > .container {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center top;
  transform:
    translateY(calc(90px - var(--projects-reveal) * 90px))
    rotateX(calc(14deg - var(--projects-reveal) * 14deg))
    scale(calc(.92 + var(--projects-reveal) * .08));
  filter: blur(calc((1 - var(--projects-reveal)) * 8px));
  opacity: calc(.34 + var(--projects-reveal) * .66);
  will-change: transform, opacity, filter;
}
.section-projects .section-intro,
.section-projects .project-toolbar,
.section-projects .portfolio-after {
  transform: translateZ(calc(-80px + var(--projects-reveal) * 80px));
  opacity: calc(.28 + var(--projects-reveal) * .72);
}
.projects-grid {
  transform-style: preserve-3d;
}
.project-card {
  --card-reveal: var(--projects-reveal);
  transform-style: preserve-3d;
  transform:
    translateY(calc(90px - var(--card-reveal) * 90px))
    translateZ(calc(-220px + var(--card-reveal) * 220px))
    rotateX(calc(18deg - var(--card-reveal) * 18deg));
  opacity: calc(.22 + var(--card-reveal) * .78);
  filter: blur(calc((1 - var(--card-reveal)) * 7px));
  transition: box-shadow .25s ease, transform .3s ease;
}
.project-card:nth-child(1) { transition-delay: .02s; }
.project-card:nth-child(2) { transition-delay: .06s; }
.project-card:nth-child(3) { transition-delay: .10s; }
.project-card:nth-child(4) { transition-delay: .14s; }
.project-card::before {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 10%, rgba(190,255,128, .15), transparent 55%);
  opacity: calc((1 - var(--card-reveal)) * .7);
  transform: translateZ(-1px);
  filter: blur(10px);
  pointer-events: none;
}
.project-card:hover {
  transform:
    translateY(calc(90px - var(--card-reveal) * 90px - 4px))
    translateZ(calc(-220px + var(--card-reveal) * 220px + 10px))
    rotateX(calc(18deg - var(--card-reveal) * 18deg)) scale(1.008);
}
.project-card:hover .project-image,
.project-card:hover .store-illustration {
  box-shadow: 0 25px 60px rgba(0,0,0,.16);
}
.web-interlude {
  --web-handoff: 0;
}
.web-interlude__sticky {
  transform-style: preserve-3d;
}
.web-interlude__inner {
  transform-origin: center center;
  transform:
    perspective(1400px)
    translateY(calc(var(--web-handoff) * -34px))
    rotateX(calc(var(--web-handoff) * -10deg))
    scale(calc(1 - var(--web-handoff) * .12));
  opacity: calc(1 - var(--web-handoff) * .78);
  filter: blur(calc(var(--web-handoff) * 6px));
  will-change: transform, opacity, filter;
}
.web-interlude__fallback {
  text-shadow:
    0 0 calc(18px + var(--web-handoff) * 40px) rgba(210,255,236,.45),
    0 0 calc(38px + var(--web-handoff) * 70px) rgba(111,164,255,.28);
}
.web-interlude__bottom {
  transform: translateZ(24px);
}
@media (max-width: 900px) {
  .section-projects::before {
    height: 16rem;
    top: -5rem;
  }
  .section-projects > .container {
    transform:
      translateY(calc(60px - var(--projects-reveal) * 60px))
      rotateX(calc(10deg - var(--projects-reveal) * 10deg))
      scale(calc(.95 + var(--projects-reveal) * .05));
  }
  .project-card {
    transform:
      translateY(calc(56px - var(--card-reveal) * 56px))
      translateZ(calc(-120px + var(--card-reveal) * 120px))
      rotateX(calc(10deg - var(--card-reveal) * 10deg));
  }
  .web-interlude__inner {
    transform:
      perspective(1100px)
      translateY(calc(var(--web-handoff) * -24px))
      rotateX(calc(var(--web-handoff) * -7deg))
      scale(calc(1 - var(--web-handoff) * .08));
  }
}
@media (prefers-reduced-motion: reduce) {
  .section-projects,
  .section-projects > .container,
  .project-card,
  .web-interlude__inner {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .section-projects::before,
  .project-card::before { display: none; }
}


/* ===== WEB PORTFOLIO v1.5 / CAMERA GLIDE + INTERACTIVE CARDS ===== */
.web-interlude { --glide: 0; --portal-visible: 0; }
.glide-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  perspective: 1300px;
  overflow: hidden;
  opacity: var(--portal-visible);
  contain: layout paint;
}
.glide-stage__beam {
  position: absolute;
  inset: -15%;
  background: radial-gradient(ellipse 43% 50% at 50% 46%, rgba(172,249,202,.22),rgba(67,167,255,.13) 34%,transparent 77%);
  filter: blur(calc(45px - var(--glide) * 15px));
  transform: scale(calc(.55 + var(--glide) * .7));
}
.glide-stage__grid {
  position: absolute;
  left: -60%; right: -60%;
  top: 35%; bottom: -60%;
  background-image: linear-gradient(rgba(128,235,226,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(128,235,226,.17) 1px,transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(180deg,transparent,black 32%,transparent 93%);
  transform-origin: 50% 0%;
  transform: perspective(700px) rotateX(70deg) translateY(calc(var(--glide) * 210px)) scale(calc(.75 + var(--glide) * 1.1));
  opacity: calc(.3 + var(--glide) * .55);
}
.glide-stage__frames {
  position: absolute;
  left: 50%; top: 48%;
  width: min(1020px, 90vw);
  padding: 18px;
  border-radius: 15px;
  background: linear-gradient(135deg,rgba(17,25,34,.75),rgba(19,32,44,.56));
  border: 1px solid rgba(196,255,227,.38);
  box-shadow: inset 0 0 35px rgba(153,255,230,.07), 0 0 70px rgba(80,219,249,.14),0 30px 90px #0009;
  transform: translate(-50%,-50%) perspective(1250px)
             translateZ(calc(-850px + var(--glide) * 740px))
             rotateX(calc(15deg - var(--glide) * 15deg))
             rotateY(calc(-11deg + var(--glide) * 11deg));
  transform-style: preserve-3d;
  will-change: transform;
}
.glide-stage__frames::after {
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:1px solid rgba(216,255,248,.15); pointer-events:none;
  transform: translateZ(12px);
}
.glide-stage__label, .glide-stage__caption {
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:#cce1df;font-size:10px;font-weight:800;letter-spacing:.17em;
}
.glide-stage__label { padding: 1px 3px 16px; }
.glide-stage__label span:first-child { color:#c9ff82; }
.glide-stage__cards { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.glide-mini-card {
  min-width:0;
  border-radius:8px;
  background:#101821;
  border:1px solid rgba(186,230,230,.2);
  box-shadow:0 12px 25px #0006;
  overflow:hidden;
  transform: translateZ(20px);
}
.glide-mini-card:nth-child(2) { transform: translateZ(55px); }
.glide-mini-card:nth-child(3) { transform: translateZ(-10px); }
.glide-mini-card__picture { height:205px;overflow:hidden;background:#242932; }
.glide-mini-card__picture img { width:100%;height:100%;object-fit:cover;object-position:top center;display:block; }
.glide-mini-card__picture--store {
  display:flex; flex-direction:column;align-items:flex-start;justify-content:center;
  position:relative;padding:24px;
  color:#204e36;background:radial-gradient(circle at 80% 40%,#b1d9b8,#eef3e3 72%);
}
.glide-mini-card__picture--store span {font-size:30px;font-weight:900;letter-spacing:-.08em;line-height:1;}
.glide-mini-card__picture--store strong {font-size:28px;font-weight:900;letter-spacing:-.08em;line-height:1;}
.glide-mini-card__picture--store small {font-size:8px;font-weight:800;letter-spacing:.05em;margin-top:18px;}
.glide-mini-card__picture--store b {position:absolute;right:8%;bottom:9%;font-size:110px;color:#639e72;opacity:.40;line-height:1;}
.glide-mini-card__meta {padding:13px 13px 17px;display:grid;gap:7px;}
.glide-mini-card__meta span {font-size:8px;letter-spacing:.16em;color:#a7ffbc;font-weight:800;}
.glide-mini-card__meta strong {color:#f5f8ff;font-size:17px;font-weight:800;letter-spacing:-.04em;}
.glide-stage__caption {padding:18px 4px 2px;justify-content:center;gap:24px;color:#e3f3ef;}
.glide-stage__caption span {color:#c0ff8b;font-size:16px;}
.web-interlude__inner {z-index:2;}
/* Project cards emerge in 3D as the gallery scrolls into the actual viewport. */
.project-card { --tilt-x:0deg; --tilt-y:0deg; --spot-x:50%; --spot-y:40%;
  transform:
    translateY(calc(90px - var(--card-reveal) * 90px))
    translateZ(calc(-220px + var(--card-reveal) * 220px))
    rotateX(calc(18deg - var(--card-reveal) * 18deg + var(--tilt-x)))
    rotateY(var(--tilt-y));
  transition: transform .2s ease-out, opacity .16s ease, filter .16s ease;
  position:relative;
}
.project-card:hover {
  transform:
    translateY(calc(90px - var(--card-reveal) * 90px - 7px))
    translateZ(calc(-220px + var(--card-reveal) * 220px + 24px))
    rotateX(calc(18deg - var(--card-reveal) * 18deg + var(--tilt-x)))
    rotateY(var(--tilt-y)) scale(1.009);
}
.project-image {isolation:isolate;transition:box-shadow .24s ease,border-color .24s ease;}
.project-image::before {
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at var(--spot-x) var(--spot-y),rgba(211,255,207,.27),rgba(83,202,255,.12) 30%,transparent 60%);
  mix-blend-mode:screen;
  transition:opacity .26s ease;
}
.project-card.is-active .project-image::before,
.project-card:focus-within .project-image::before { opacity:1; }
.project-card.is-active .project-image,
.project-card:focus-within .project-image {
  box-shadow:0 24px 50px #0006,0 0 0 1px rgba(181,255,133,.75),0 0 45px rgba(132,233,176,.17);
}
.project-card.is-active .project-meta h3,
.project-card:focus-within .project-meta h3 {color:#d8ffab;}
.projects-grid.has-active-card .project-card:not(.is-active):not(:focus-within) { opacity:calc((.22 + var(--card-reveal) * .78) * .70); }
.image-overlay-arrow { z-index:3; }
@media(max-width:900px){
  .glide-stage__frames {width:min(760px,91vw);}
  .glide-mini-card__picture {height:155px;}
  .glide-mini-card__picture--store {padding:12px;}
  .glide-mini-card__picture--store span,.glide-mini-card__picture--store strong {font-size:23px;}
  .project-card {transform:translateY(calc(56px - var(--card-reveal)*56px)) translateZ(calc(-120px + var(--card-reveal)*120px)) rotateX(calc(10deg - var(--card-reveal)*10deg + var(--tilt-x))) rotateY(var(--tilt-y));}
  .project-card:hover {transform:translateY(calc(50px - var(--card-reveal)*56px)) translateZ(calc(-100px + var(--card-reveal)*120px)) rotateX(calc(10deg - var(--card-reveal)*10deg + var(--tilt-x))) rotateY(var(--tilt-y));}
}
@media(max-width:650px){
  .glide-stage__frames {width:95vw;padding:9px;border-radius:9px;}
  .glide-stage__cards {gap:6px;}
  .glide-mini-card__picture {height:95px;}
  .glide-mini-card__picture--store {padding:7px;}
  .glide-mini-card__picture--store span,.glide-mini-card__picture--store strong {font-size:15px;}
  .glide-mini-card__picture--store small {font-size:5px;margin-top:8px;}
  .glide-mini-card__picture--store b {font-size:45px;}
  .glide-mini-card__meta {padding:7px 6px 10px;gap:4px;}
  .glide-mini-card__meta span {font-size:6px;letter-spacing:.06em;}
  .glide-mini-card__meta strong {font-size:12px;}
  .glide-stage__label,.glide-stage__caption {font-size:7px;letter-spacing:.09em;}
  .glide-stage__label {padding:2px 0 8px;}
  .glide-stage__caption {padding:9px 2px 0;gap:10px;}
}
@media(hover:none),(pointer:coarse){
  .project-card:hover .project-image::before {opacity:0;}
  .project-card:hover {transform:translateY(calc(90px - var(--card-reveal)*90px)) translateZ(calc(-220px + var(--card-reveal)*220px)) rotateX(calc(18deg - var(--card-reveal)*18deg));}
}
@media(prefers-reduced-motion:reduce){
  .glide-stage{display:none;}
  .project-card,.project-card:hover{transform:none!important;filter:none!important;opacity:1!important;transition:none!important;}
  .project-image::before {display:none;}
  .projects-grid.has-active-card .project-card {opacity:1!important;}
}

/* Without JavaScript, keep projects readable rather than stuck in an entry state. */
html:not(.js-ready) .section-projects > .container,
html:not(.js-ready) .section-projects .project-card,
html:not(.js-ready) .web-interlude__inner {
  opacity: 1 !important; transform: none !important; filter: none !important;
}

/* v1.6 — labels on portfolio case previews */
.case-overlay-label{position:absolute;left:20px;bottom:22px;z-index:2;background:rgba(10,15,18,.86);border:1px solid rgba(255,255,255,.18);border-radius:100px;color:#f6f8f0;font-size:10px;font-weight:900;letter-spacing:.11em;padding:14px 18px;backdrop-filter:blur(9px);transition:transform .25s ease,background .25s ease}.project-image:hover .case-overlay-label{transform:translateY(-3px);background:rgba(20,34,24,.94)}@media(max-width:650px){.case-overlay-label{left:12px;bottom:12px;padding:12px 13px;font-size:9px}}

/* =====================================================================
   WEB 1.7 / cinematic atmosphere + consistent motion language
   ===================================================================== */
.motion-scene__grid {
  position:absolute; inset:-30% -25% -50%; pointer-events:none;
  background-image:linear-gradient(rgba(155,242,213,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(155,242,213,.11) 1px,transparent 1px);
  background-size:78px 78px;
  opacity:.22;
  mask-image:radial-gradient(ellipse 65% 50% at 58% 70%, #000, transparent);
  transform:perspective(900px) rotateX(59deg);
  transform-origin:center 55%;
  will-change:transform;
  mix-blend-mode:screen;
}
.motion-scene__grain {opacity:.085;}
.motion-scene::before {
  background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.07),transparent 19%),radial-gradient(circle at 82% 24%,rgba(196,255,179,.12),transparent 19%),radial-gradient(circle at 58% 84%,rgba(128,213,255,.12),transparent 24%);
  animation:scene-float 11s ease-in-out infinite alternate;
}
.hero-art .art-panel-main {animation:art-breathe 6s ease-in-out infinite alternate;}
.hero-art .art-sticker {animation:sticker-float 5s ease-in-out infinite alternate;}
@keyframes art-breathe {to {translate:0 -10px;filter:drop-shadow(0 16px 23px rgba(179,255,120,.13));}}
@keyframes sticker-float {to {translate:3px -13px;filter:drop-shadow(0 0 18px rgba(210,255,119,.18));}}
/* Project cards keep their existing scroll handoff and 3D cursor tilt. */
.project-card .project-image {isolation:isolate;transition:box-shadow .45s ease,border-color .45s ease;box-shadow:0 5px 30px rgba(0,0,0,.08);}
.project-card .project-image::after {content:"";position:absolute;inset:-150% -65%;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 41%,rgba(255,255,255,.25) 50%,transparent 58%);transform:translateX(-35%) rotate(13deg);transition:transform .95s cubic-bezier(.17,.67,.19,1),opacity .35s ease;}
.project-card:is(:hover,:focus-within) .project-image::after {opacity:.85;transform:translateX(50%) rotate(13deg);}
.project-card:is(:hover,:focus-within) .project-image {box-shadow:0 25px 72px rgba(13,29,36,.46),0 0 0 1px rgba(187,255,156,.22),0 0 36px rgba(105,218,255,.14);}
.project-card .project-image > img {transform:translate3d(0,0,0) scale(1);transition:transform .65s cubic-bezier(.18,.7,.19,1),filter .45s ease;}
.project-card:is(:hover,:focus-within) .project-image > img {transform:translate3d(calc((var(--spot-x,50%) - 50%)*.02),calc((var(--spot-y,40%) - 50%)*.02),0) scale(1.065);filter:saturate(1.12) contrast(1.04);}
.project-card .store-illustration {transition:transform .65s cubic-bezier(.18,.7,.19,1),filter .4s ease;}
.project-card:is(:hover,:focus-within) .store-illustration {transform:scale(1.047);filter:saturate(1.13);}
.project-card .project-meta h3 {transition:color .35s ease,translate .4s ease;}
.project-card:is(:hover,:focus-within) .project-meta h3 {color:#ddffaf;translate:5px 0;}
.project-card .case-overlay-label {z-index:3;}
.project-card .image-overlay-arrow {z-index:4;}
/* Service rows: follow-the-cursor light + type motion. */
.service-row {position:relative;isolation:isolate;overflow:hidden;--fx-x:50%;--fx-y:50%;}
.service-row::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(420px circle at var(--fx-x) var(--fx-y),rgba(180,255,108,.16),transparent 68%);opacity:0;transition:opacity .35s ease;}
.service-row.fx-active::before,.service-row:hover::before {opacity:1;}
.service-row .service-content,.service-row .service-icon,.service-row .service-num {transition:translate .35s cubic-bezier(.2,.7,.2,1),color .35s ease,rotate .35s ease;}
.service-row:hover .service-content {translate:7px 0;}
.service-row:hover .service-icon {rotate:45deg;color:var(--accent);translate:-5px -2px;}
.service-row:hover .service-num {color:#fff;translate:0 -3px;}
/* Four process cards: depth, spotlights and playful elevation. */
.steps-grid {perspective:1250px;}
.step-card {position:relative;isolation:isolate;overflow:hidden;--fx-x:50%;--fx-y:50%;--fx-rx:0deg;--fx-ry:0deg;transition:transform .4s cubic-bezier(.18,.65,.2,1),box-shadow .4s ease,border-color .4s ease;transform-style:preserve-3d;}
.step-card::before {content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:0;background:radial-gradient(350px circle at var(--fx-x) var(--fx-y),rgba(255,255,255,.4),transparent 62%);transition:opacity .35s ease;}
.step-card:last-child::before {background:radial-gradient(350px circle at var(--fx-x) var(--fx-y),rgba(198,255,120,.18),transparent 65%);}
.step-card:is(:hover,.fx-active)::before {opacity:1;}
.step-card.is-visible:is(:hover,.fx-active) {transform:perspective(1100px) rotateX(var(--fx-rx)) rotateY(var(--fx-ry)) translateY(-10px) scale(1.015);box-shadow:0 32px 52px rgba(0,0,0,.19);}
.step-card .step-symbol {transition:rotate .65s cubic-bezier(.16,.75,.2,1),translate .5s ease;}
.step-card:hover .step-symbol {rotate:13deg;translate:0 -8px;}
/* Contact stays legible while its giant typographic background moves. */
.contact-section::before {animation:contact-spin 40s linear infinite alternate;transform-origin:50% 50%;}
@keyframes contact-spin {to{transform:rotate(37deg) scale(1.07);}}
@media(max-width:700px){.motion-scene__grid{opacity:.10;background-size:58px 58px}.hero-art .art-panel-main,.hero-art .art-sticker{animation-duration:8s}.project-card .project-image::after{display:none}.step-card.is-visible:hover{transform:translateY(-4px);}}
@media(hover:none),(pointer:coarse){.service-row::before,.step-card::before{display:none}.step-card.is-visible:hover{transform:none}.project-card .project-image::after{display:none}}
@media(prefers-reduced-motion:reduce){.motion-scene__grid{display:none}.motion-scene::before,.hero-art .art-panel-main,.hero-art .art-sticker,.contact-section::before{animation:none!important}.step-card,.step-card.is-visible:hover,.project-card .project-image > img,.project-card:hover .project-image > img {transform:none!important;filter:none!important}.project-card .project-image::after{display:none}.service-row::before,.step-card::before{display:none}}
/* Keep case thumbnails crisp from the first moment they enter the viewport. */
.section-projects > .container,
.section-projects .project-card {filter:none!important}


/* ========================================================================
   WEB v1.8  |  KINETIC BRAND INTRO
   Runs only on initial visit in this tab, never blocks without JavaScript.
   ======================================================================== */
.web-intro[hidden] { display:none!important; }
.web-intro {
  position:fixed;inset:0;z-index:10000;overflow:hidden;isolation:isolate;
  color:#f5f9f4;pointer-events:auto;background:transparent;
  font-family:var(--font,'Manrope',Arial,sans-serif);
}
.web-intro__curtain {
  position:absolute;left:-1px;right:-1px;height:50.4%;z-index:0;
  background:radial-gradient(ellipse at 50% 100%,#14252a 0%,#091018 52%,#060b10 100%);
  transition:transform 1.04s cubic-bezier(.78,0,.19,1);
  will-change:transform;
}
.web-intro__curtain--top {top:-1px;border-bottom:1px solid rgba(220,255,193,.07)}
.web-intro__curtain--bottom {
  bottom:-1px;
  background:radial-gradient(ellipse at 50% 0%,#152a29 0%,#090f15 56%,#060b10 100%);
  border-top:1px solid rgba(220,255,193,.07);
}
.web-intro__canvas {position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.web-intro__content {position:relative;z-index:2;width:min(1380px,calc(100% - 110px));height:100%;margin:auto;display:flex;flex-direction:column;justify-content:space-between;padding:41px 0 39px;transition:opacity .42s ease,transform .8s cubic-bezier(.22,.7,.16,1),filter .8s ease;}
.web-intro__topline,.web-intro__footline {display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:10px;font-weight:900;letter-spacing:.19em;color:#a8b5b6;}
.web-intro__topline>span:first-child {display:flex;align-items:center;gap:10px;}
.web-intro__topline i {display:block;width:7px;height:7px;border-radius:50%;background:#d7ff79;box-shadow:0 0 18px #cfff77;animation:intro-dot-pulse 1.3s ease-in-out infinite alternate;}
.web-intro__center {position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;perspective:1000px;}
.web-intro__pretitle {color:#d8ff9c;letter-spacing:.57em;font-size:clamp(9px,1.06vw,13px);font-weight:850;margin-bottom:18px;opacity:0;transform:translateY(16px);animation:intro-reveal .55s .24s both;}
.web-intro__brand {display:flex;align-items:center;justify-content:center;font-family:var(--font,Arial,sans-serif);font-size:clamp(92px,19vw,256px);line-height:1.08;letter-spacing:-.115em;font-weight:900;white-space:nowrap;filter:drop-shadow(0 0 25px rgba(150,244,198,.20));}
.web-intro__brand span {color:#f3fff3;display:inline-block;opacity:0;transform:translate3d(0,70px,-180px) rotateX(28deg) scale(.77);filter:blur(22px);-webkit-text-stroke:1px rgba(214,255,209,.85);text-shadow:0 0 35px rgba(205,255,215,.21);animation:intro-letter .98s cubic-bezier(.17,.73,.18,1) both;}
.web-intro__brand span:nth-child(1){animation-delay:.41s}
.web-intro__brand span:nth-child(2){animation-delay:.60s}
.web-intro__brand span:nth-child(3){animation-delay:.79s}
.web-intro__brand b {font-weight:900;color:#d8ff78;opacity:0;transform:scale(0);margin-left:.02em;text-shadow:0 0 35px #c6ff5f77;animation:intro-dotpop .6s 1.13s cubic-bezier(.14,1.3,.24,1) both;}
.web-intro__subline {display:flex;gap:14px;align-items:center;color:#aabdc1;font-size:clamp(9px,1vw,12px);font-weight:850;letter-spacing:.26em;opacity:0;transform:translateY(14px);animation:intro-reveal .65s 1.28s both;text-align:center;}
.web-intro__subline span {color:#d6ff6e;font-size:17px;}
.web-intro__orbit {position:absolute;border:1px solid rgba(172,255,201,.12);border-radius:50%;width:min(72vw,740px);height:min(72vw,740px);box-shadow:inset 0 0 85px #67eac011,0 0 35px #9effd808;transform:rotateX(68deg) rotateZ(0);animation:intro-orbit 7s linear infinite;}
.web-intro__orbit--two {width:min(84vw,900px);height:min(84vw,900px);border-color:rgba(174,186,255,.09);animation-direction:reverse;animation-duration:10s;}
.web-intro__scanline {position:absolute;left:-35%;right:-35%;top:48.7%;height:2px;background:linear-gradient(90deg,transparent 7%,rgba(196,255,159,.05),rgba(240,255,223,.7),rgba(117,240,236,.1),transparent 91%);box-shadow:0 0 32px rgba(197,255,124,.5);z-index:2;opacity:0;transform:translateX(-60%) scaleX(.25);animation:intro-scan 1.2s 1.38s ease-in-out both;pointer-events:none;}
.web-intro__skip {border:1px solid rgba(221,245,222,.27);background:rgba(225,255,214,.07);color:#f8fff3;border-radius:50px;padding:11px 16px;font:inherit;letter-spacing:.08em;font-size:11px;cursor:pointer;transition:background .2s,border-color .2s;}
.web-intro__skip:hover,.web-intro__skip:focus-visible {background:#d9ff80;color:#07100f;border-color:#d9ff80;}
.web-intro__skip span {font-size:17px;margin-left:14px;}
.web-intro.is-opening .web-intro__curtain--top {transform:translate3d(0,-102%,0)}
.web-intro.is-opening .web-intro__curtain--bottom {transform:translate3d(0,102%,0)}
.web-intro.is-opening .web-intro__content {opacity:0;transform:translateY(-10vh) scale(1.13) rotateX(9deg);filter:blur(15px);pointer-events:none;}
.web-intro.is-opening .web-intro__canvas {opacity:0;transition:opacity .46s ease;}
.web-intro.is-opening .web-intro__scanline {opacity:0;transition:opacity .15s;}
html.intro-pending,html.intro-pending body {overflow:hidden;}
html.intro-pending .hero-copy h1,html.intro-pending .hero-lead,html.intro-pending .hero-actions,html.intro-pending .hero-art {opacity:0;filter:blur(9px);}
html.intro-revealing .hero-copy h1,html.intro-revealing .hero-lead,html.intro-revealing .hero-actions,html.intro-revealing .hero-art {opacity:1;filter:blur(0);transition:opacity 1.05s cubic-bezier(.22,1,.26,1),filter 1.05s ease;}
html.intro-revealing .hero-copy h1 {transition-delay:.08s;}
html.intro-revealing .hero-lead {transition-delay:.20s;}
html.intro-revealing .hero-actions {transition-delay:.33s;}
html.intro-revealing .hero-art {transition-delay:.15s;}
.intro-replay {background:transparent;border:0;padding:0;color:#bfe5a4;font:inherit;font-size:inherit;cursor:pointer;text-align:left;white-space:nowrap;}
.intro-replay:hover,.intro-replay:focus-visible {color:#edff91;text-decoration:underline;text-underline-offset:4px;}
@keyframes intro-letter {0%{opacity:0;transform:translate3d(0,70px,-180px) rotateX(28deg) scale(.77);filter:blur(22px)}70%{opacity:1;filter:blur(0)}100%{opacity:1;transform:translate3d(0,0,0) rotateX(0) scale(1);filter:blur(0)}}
@keyframes intro-dotpop {0%{opacity:0;transform:scale(0)}65%{opacity:1;transform:scale(1.45)}100%{opacity:1;transform:scale(1)}}
@keyframes intro-reveal {to{opacity:1;transform:translateY(0)}}
@keyframes intro-scan {0%{opacity:0;transform:translateX(-60%) scaleX(.25)}40%{opacity:1}85%{opacity:.75}100%{opacity:0;transform:translateX(60%) scaleX(1)}}
@keyframes intro-dot-pulse {to{opacity:.45;transform:scale(.65);box-shadow:0 0 6px #cfff77}}
@keyframes intro-orbit {to{transform:rotateX(68deg) rotateZ(360deg)}}
@media(max-width:650px) {
  .web-intro__content {width:calc(100% - 40px);padding:24px 0 28px;}
  .web-intro__topline,.web-intro__footline {font-size:8px;letter-spacing:.08em;}
  .web-intro__topline>span:last-child {display:none;}
  .web-intro__brand {font-size:clamp(84px,22vw,150px);}
  .web-intro__pretitle {letter-spacing:.29em;margin-bottom:12px;}
  .web-intro__subline {gap:7px;font-size:8px;letter-spacing:.08em;}
  .web-intro__subline span {font-size:12px;}
  .web-intro__footline>span {max-width:50%;line-height:1.5;}
  .web-intro__orbit {width:95vw;height:95vw;}
  .web-intro__orbit--two {width:120vw;height:120vw;}
  .web-intro__skip{padding:10px 12px;font-size:10px;}
  .web-intro__skip span {margin-left:5px;}
  .footer-links {flex-wrap:wrap;justify-content:flex-end;}
}
@media(prefers-reduced-motion:reduce) {
  .web-intro,.web-intro * {animation:none!important;transition:none!important;}
  .intro-replay{display:none!important;}
  html.intro-pending,html.intro-pending body{overflow:auto!important;}
  html.intro-pending .hero-copy h1,html.intro-pending .hero-lead,html.intro-pending .hero-actions,html.intro-pending .hero-art {opacity:1!important;filter:none!important;}
}