*{box-sizing:border-box}.icon{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex-shrink:0}:root{--check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}html{scroll-behavior:smooth;scroll-padding-top:110px;--bg:#f6f4f1;--surface:#fff;--text:#141416;--muted:#6f6f77;--border:#e2e0dc;--soft:#eceae6;--accent:#b3141c;--shadow:0 10px 30px #24241c08;color-scheme:light}html[data-theme=dark]{--bg:#0d0d0f;--surface:#17171a;--text:#f2f1ee;--muted:#9a9aa3;--border:#2a2a30;--soft:#1f1f23;--accent:#e5383b;--shadow:0 10px 30px #0002;color-scheme:dark}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',Arial,sans-serif;font-size:16px;line-height:1.55;transition:background .25s,color .25s}body:before{content:'';position:absolute;top:0;bottom:0;left:max(24px,calc((100% - 1200px)/2));right:max(24px,calc((100% - 1200px)/2));border-inline:1px solid var(--border);pointer-events:none;z-index:-1}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button{border:0}a,button{touch-action:manipulation}button:disabled{cursor:wait;opacity:.6}:focus-visible{outline:3px solid var(--accent);outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:550;line-height:1.09;letter-spacing:-.055em}p{color:var(--muted)}em{font-style:normal;color:var(--muted)}button{background:none}h2{font-size:clamp(32px,3.6vw,48px)}h3{font-size:23px;letter-spacing:-.04em}main,footer{position:relative}main{margin:auto}.site-header{position:fixed;z-index:20;top:25px;left:50%;transform:translate(-50%,0);transition:transform .95s cubic-bezier(.7,0,.2,1)}.site-header.at-bottom{transform:translate(-50%,var(--drop,0px))}.site-header nav{display:flex;align-items:center;gap:27px;padding:10px 13px 10px 22px;border:1px solid #ffffff45;background:var(--soft);border-radius:15px;box-shadow:0 3px 12px #00000003;white-space:nowrap}.site-header nav>a:not(.wordmark){font-size:13px;font-weight:550}.site-header nav>a:hover{color:var(--accent)}.wordmark{font-weight:750;font-size:31px;letter-spacing:-3px;line-height:1}.wordmark span{font-size:22px;display:inline-block;color:var(--accent);margin-left:5px;vertical-align:top;letter-spacing:0}.nav-divider{width:1px;height:21px;background:var(--border);margin-left:3px}.nav-contact{background:var(--surface);border-radius:9px;padding:9px 13px;font-size:12px;font-weight:600}.icon-button{height:36px;width:30px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:5px}.icon-button span{height:2px;width:18px;background:var(--text);transition:transform .2s}.icon-button[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.icon-button[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.site-header{pointer-events:none}.site-header nav{pointer-events:auto}#mobile-menu{margin-top:8px;pointer-events:none}#mobile-menu.open{pointer-events:auto}.hero{text-align:center;padding:158px 30px 0;position:relative;min-height:720px;display:flex;align-items:center;flex-direction:column}.availability{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:550;border:1px solid var(--border);padding:6px 11px;border-radius:30px;background:var(--surface);box-shadow:0 2px 4px #00000003}.availability i{height:6px;width:6px;background:#52896a;border-radius:50%;box-shadow:0 0 0 3px #52896a10}.signature{display:block;font-family:'Nothing You Could Do','Segoe Print',cursive;font-size:20px;color:var(--accent);letter-spacing:-.045em;font-weight:400;line-height:1.7}.hero-signature{margin-top:30px;margin-bottom:12px;font-size:23px}.hero h1{font-size:clamp(34px,3.7vw,52px);letter-spacing:.03em;line-height:1.08;font-weight:650;text-transform:uppercase}.hero h1>span{color:var(--muted)}.hero>p{font-size:16px;line-height:1.7;margin-top:24px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:45px;min-width:218px;padding:15px 23px;border:1px solid #52534f;border-radius:40px;background:linear-gradient(178deg,#4b4d48 0%,#292a27 35%,#121310 80%);box-shadow:inset 0 1px 0 #ffffff30,0 5px 8px #0002,0 17px 26px #00000018;color:#fff;font-size:14px;font-weight:500;line-height:1.5;transition:transform .6s cubic-bezier(.25,.8,.25,1),box-shadow .6s}.button>.arrow{width:20px;height:20px}.hero>.button{margin-top:28px}.quiet-link{font-size:11px;color:var(--muted);margin-top:23px}.quiet-link .icon{margin-left:6px;color:var(--text)}.hero-title{position:relative;width:fit-content;margin-inline:auto}.hero h1{position:relative}.hero h1.dotted .hw{color:transparent}.hero-dots{position:absolute;pointer-events:none}.hero-note{position:absolute;left:calc(100% + 26px);top:38%;width:max-content;text-align:left;transform:rotate(8deg);color:var(--muted);font-family:'Nothing You Could Do',cursive;font-size:15px;line-height:1.5}.hero-note svg{display:block;width:48px;height:56px;margin:4px 0 0 6px;stroke:var(--muted);stroke-width:1.2;fill:none;stroke-linecap:round;stroke-linejoin:round}.hero-avatar{display:block;width:52px;height:52px;border-radius:50%;object-fit:cover;margin:2px 0 0 12px;border:3px solid var(--surface);box-shadow:0 6px 16px #0000001f;transform:rotate(-8deg)}.hero-meta{display:flex;justify-content:space-between;width:min(1060px,100%);margin-top:auto;padding:46px 0 24px;font-family:monospace;font-size:9px;letter-spacing:.1em;color:var(--muted)}.hatched{background:repeating-linear-gradient(135deg,transparent,transparent 8px,var(--border) 8px,var(--border) 8.6px);border-block:1px solid var(--border)}.showcase-strip{overflow:hidden;padding:19px 0}.strip-track{display:flex;gap:18px;width:max-content;animation:strip-scroll 60s linear infinite}.showcase-strip:hover .strip-track,.showcase-strip:focus-within .strip-track{animation-play-state:paused}@keyframes strip-scroll{to{transform:translateX(calc(-50% - 9px))}}.strip-track>a{width:352px;flex-shrink:0}.strip-track .project-art{height:229px;border-radius:9px;padding:17px;box-shadow:0 2px 3px #00000010}.strip-track .mock-browser{font-size:7px}.strip-track .mock-nav{padding:12px}.strip-track .mock-content h3{font-size:26px}.strip-track .mock-content{padding:25px 19px}.strip-track .mock-nav b{font-size:9px}.strip-track .mock-nav>span{font-size:5px}.strip-track .mock-content small{font-size:5px}.strip-track .mock-cta{font-size:5px;margin-top:12px;padding:5px 8px}.strip-track .bottle{width:42px;height:98px;border-radius:10px 10px 6px 6px}.strip-track .bottle:before{height:19px;top:-18px;width:25px}.strip-track .bottle i{font-size:18px}.strip-track .bottle small{font-size:3px}.strip-track .bottle.two{height:78px}.strip-track .mock-bottom{font-size:4px;padding:7px 12px}.strip-track .flower{font-size:130px}.strip-track .creative-stamp{font-size:6px;padding:11px}.strip-track .dashboard{height:125px;font-size:6px}.strip-track .dash-main strong{font-size:7px}.strip-track .dash-stats span{font-size:13px}.strip-track .dash-main small{font-size:4px}.strip-track .chart{height:30px;margin-top:10px}.strip-track .dash-main{padding:10px}.section{max-width:1070px;margin:0 auto;padding:104px 0;text-align:center;border-bottom:1px solid var(--border)}.section-heading{margin-bottom:48px}.section-heading .signature{margin-bottom:9px}.section-heading p{font-size:14px;margin-top:15px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 32px}.project-card{display:block;text-align:left;padding:0;min-width:0}.project-art{height:325px;background:var(--project-color);border:5px solid var(--surface);outline:1px solid var(--border);border-radius:12px;padding:29px;overflow:hidden;box-shadow:0 4px 9px #00000005;transition:transform .35s,box-shadow .35s;color:#242724;position:relative}.project-card:hover .project-art{transform:translateY(-5px);box-shadow:0 16px 25px #00000010}.project-art:before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,#fff2,transparent 45%,#00000008);pointer-events:none}.mock-browser{height:100%;background:#f9f8f3;box-shadow:0 12px 25px #00000025;border-radius:3px;position:relative;overflow:hidden;isolation:isolate}.mock-nav{padding:16px 18px;display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2;border-bottom:1px solid #0000000c}.mock-nav b{font-size:11px;font-weight:700;letter-spacing:-.03em}.mock-nav>span{font-size:6px;letter-spacing:0}.mock-content{padding:31px 22px;position:relative;z-index:2;width:64%}.mock-content small{font-size:6px;display:block;letter-spacing:.06em;margin-bottom:9px}.mock-content h3{font-size:34px;font-weight:500;line-height:1.05;letter-spacing:-.065em}.mock-cta{display:inline-block;padding:7px 10px;font-size:6px;border-radius:2px;background:#242724;color:#fff;margin-top:21px;letter-spacing:0}.mock-visual{position:absolute;right:0;top:45px;bottom:20px;width:48%;z-index:1}.mock-bottom{position:absolute;bottom:0;width:100%;padding:10px 18px;display:flex;justify-content:space-between;font-size:5px;letter-spacing:.09em;z-index:3;background:inherit}.architecture .mock-content{width:62%}.architecture .mock-content h3{font-family:Georgia,serif;letter-spacing:-.065em;font-size:37px}.architecture .mock-visual{background:linear-gradient(145deg,#cbd5d3,#e1e4d8);width:42%;top:43px}.arch-building{position:absolute;inset:20% 0 0 12%;background:linear-gradient(90deg,#9d9b8c 0 12%,#d7d0bc 12% 57%,#ebe3cf 57%);clip-path:polygon(0 12%,60% 0,100% 18%,100% 100%,0 100%)}.arch-building:before{content:'';position:absolute;top:32%;left:20%;width:45%;height:64%;border-radius:50% 50% 0 0;background:linear-gradient(100deg,#121b18,#5a6451);box-shadow:inset 9px 4px #a29e8c}.arch-building:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 7px,#00000007 8px)}.arch-building span{position:absolute;left:70%;top:20%;width:20%;height:45%;background:#404d44;border:5px solid #b4ad98}.beauty .mock-browser{background:#f4f4e7;color:#374631}.beauty .mock-content h3{font-family:Georgia,serif;letter-spacing:-.055em;font-size:36px}.beauty .mock-visual{background:radial-gradient(ellipse at 60% 65%,#a0b88655,transparent 65%);display:flex;align-items:center;justify-content:center;gap:8px;padding-top:20px;transform:rotate(-10deg)}.bottle{width:67px;height:147px;border-radius:15px 15px 9px 9px;background:linear-gradient(95deg,#627947,#9dae7a 37%,#bbcca0 55%,#819960);position:relative;box-shadow:13px 17px 12px #52633130;display:flex;flex-direction:column;align-items:center;justify-content:center}.bottle:before{content:'';position:absolute;width:39px;height:29px;background:linear-gradient(90deg,#dfd8bc,#f5eed7,#b9b19a);top:-28px;border-radius:3px 3px 0 0}.bottle i{font-size:27px;color:#f7f5e7;font-family:Georgia,serif}.bottle small{font-size:5px;text-align:center;margin-top:20px;color:#f7f5e7}.bottle.two{height:110px;background:linear-gradient(95deg,#e5dfca,#f7f3e6,#cfc9b2);transform:translateY(18px)}.bottle.two:before{background:linear-gradient(90deg,#bdb69d,#d8d1b9,#b2aa91)}.bottle.two i,.bottle.two small{color:#4b6040}.saas .mock-browser{background:#181726;color:#fff}.saas .mock-content{padding-top:22px;width:100%;text-align:center}.saas .mock-content h3{font-size:27px;letter-spacing:-.045em}.saas .mock-content small{color:#afa4dd}.saas .mock-cta{margin-top:10px;background:#b9a5ff;color:#171322}.saas .mock-visual{top:auto;bottom:-53px;right:15%;width:70%;height:150px;transform:rotate(-5deg)}.dashboard{background:#fff;border:1px solid #e1dff0;border-radius:5px;height:170px;display:flex;box-shadow:0 7px 20px #0003;color:#35333f;overflow:hidden}.dash-side{display:flex;flex-direction:column;gap:.9em;padding:13px 9px;border-right:1px solid #e8e8ed;color:#8e7cac;font-size:10px;line-height:1.8}.dash-main{flex:1;padding:13px}.dash-main>small{display:block;font-size:6px;color:#827c90}.dash-main strong{font-size:10px;font-weight:500;display:block;margin-top:3px}.dash-stats{display:flex;gap:30px;margin-top:12px}.dash-stats span{font-size:19px;line-height:1;font-weight:600}.dash-stats small{display:block;font-size:5px;color:#92909b;margin-top:4px;font-weight:400}.chart{display:flex;align-items:end;gap:7px;height:60px;margin-top:15px;border-bottom:1px solid #eee}.chart i{flex:1;height:30%;background:#c7bced;border-radius:2px 2px 0 0}.chart i:nth-child(2n){height:55%}.chart i:nth-child(3n){height:70%}.chart i:nth-child(n+6){height:90%;background:#8e74c6}.saas .mock-bottom{display:none}.creative .mock-browser{background:#ffd950;color:#22241d}.creative .mock-content{width:85%;padding-top:28px}.creative .mock-content h3{font-size:44px;font-weight:750;line-height:.94;letter-spacing:-.06em}.creative .mock-content small{font-size:6px}.creative .mock-cta{background:none;color:inherit;border:1px solid #26291f;border-radius:30px}.creative .mock-visual{right:-15px;top:45px;width:48%;color:#ff6035;z-index:0}.flower{font-size:208px;line-height:1;transform:rotate(12deg);color:#f0612f}.flower .icon{stroke-width:2.6}.creative-stamp{position:absolute;bottom:12px;right:21px;padding:14px;border-radius:50%;background:#292a21;color:#ffe067;font-size:8px;line-height:1.2;transform:rotate(12deg)}.wellness .mock-browser{background:#eae5dc}.wellness .mock-content h3{font-family:Georgia,serif;font-size:37px}.wellness-orb{position:absolute;inset:8% 5%;border-radius:100px 100px 0 0;background:radial-gradient(ellipse at 30% 25%,#ddd5bc 0%,#7e8470 42%,#343d33 100%);box-shadow:10px 10px 30px #474f3220}.wellness-orb:after{content:'';position:absolute;inset:32% -10% -10% 15%;background:#c2b7a0;border-radius:50%;box-shadow:-10px -10px 45px #d3cbb9}.food .mock-browser{background:#f6eedc;color:#6b2d21}.food .mock-content h3{font-family:Georgia,serif;font-size:35px}.food .mock-cta{background:#7b392c}.plate{width:160px;height:160px;border-radius:50%;background:radial-gradient(#eee4cd 50%,#fff9ec 51%,#e5d9bd 68%,#f9f2e1 69%);position:absolute;top:20%;right:-5px;box-shadow:7px 16px 20px #74322120}.plate i{position:absolute;width:55px;height:27px;background:#57753c;transform:rotate(40deg);border-radius:90% 0;top:30%;left:30%}.plate i:nth-child(2){transform:rotate(100deg);left:48%}.plate i:nth-child(3){transform:rotate(170deg);top:50%}.plate i:nth-child(4){background:#b94c30;transform:rotate(10deg);top:45%;left:45%}.plate i:nth-child(5){background:#dc7a38;transform:rotate(60deg);left:25%;top:45%}.plate i:nth-child(6){background:#ded1a3;transform:rotate(-10deg);left:42%;top:55%}.finance .mock-content{width:63%}.finance .mock-content h3{font-size:32px}.finance .mock-visual{top:80px;right:-65px;width:65%;transform:rotate(-7deg)}.finance .mock-browser{background:#f5f9fa;color:#173b42}.project-caption{display:flex;justify-content:space-between;align-items:center;padding-top:18px}.project-caption h3{font-size:17px;letter-spacing:-.04em;font-weight:600}.project-caption h3>.arrow{margin-left:7px;width:17px;height:17px;vertical-align:-.15em;transition:transform .2s}.project-card:hover .project-caption h3>.arrow{transform:translateX(5px)}.project-caption p{font-size:12px;margin-top:6px}.project-caption p>span{margin:0 5px}.concept-tag{font-size:10px;padding:3px 8px;border:1px solid var(--border);border-radius:20px;color:var(--muted);align-self:flex-start}.outline{background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:0 3px 5px #00000003;min-width:200px}.selected>.button{margin-top:44px}.company-band{text-align:center;padding:22px 25px 28px}.eyebrow{font-family:monospace;font-size:10px;letter-spacing:.13em;color:var(--muted)}.logo-marquee{margin-top:21px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.logo-track{display:flex;align-items:center;gap:72px;width:max-content;padding-right:72px;animation:logo-scroll 85s linear infinite}.logo-track .reviews-clone{display:contents}.company-band:hover .logo-track,.company-band:focus-within .logo-track{animation-play-state:paused}@keyframes logo-scroll{to{transform:translateX(-50%)}}.company-band .co{white-space:nowrap}.company-band .co{font-size:17px;font-weight:650;letter-spacing:-.065em}.company-band .co:hover{color:var(--accent)}.services-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;text-align:left;padding:0 36px}.service-intro h3{font-size:29px;line-height:1.2;margin:25px 0 15px}.service-intro p{font-size:14px;max-width:270px}.stack-art{height:133px;position:relative;width:215px;margin-top:16px}.stack-art span{display:grid;place-items:center;position:absolute;width:94px;height:94px;background:linear-gradient(150deg,#65665e,#20221e);border:1px solid #96988c;border-radius:23px;color:#fff;font-size:40px;font-family:Georgia,serif;box-shadow:0 12px 18px #0003;transform:rotate(-16deg);top:20px;left:5px}.stack-art span:nth-child(2){left:75px;top:0;z-index:2;transform:rotate(9deg);font-family:monospace;font-size:28px}.stack-art span:last-child{width:62px;height:62px;left:147px;top:60px;transform:rotate(20deg);background:#b3141c;font-size:31px;border-color:#e5383b;z-index:3}.text-link{font-size:13px;padding:0;border-bottom:1px solid var(--text);margin-top:24px;display:inline-flex;align-items:center;gap:30px}.text-link span{font-size:24px}.service-list details{border-bottom:1px solid var(--border)}summary{list-style:none;cursor:pointer}summary::-webkit-details-marker{display:none}.service-list summary{padding:19px 0;display:flex;align-items:center;gap:17px;font-size:17px;font-weight:500;letter-spacing:-.03em}.service-icon{display:grid;place-items:center;min-width:29px;font-size:16px;letter-spacing:-.09em;font-weight:700}.plus{margin-left:auto;font-size:25px;font-weight:400;line-height:1;transition:transform .2s}.service-list details[open] .plus,.faq details[open] .plus{transform:rotate(45deg)}.service-list details p{padding:0 35px 22px 46px;font-size:13px;line-height:1.7}.about{display:grid;grid-template-columns:1fr 1fr;gap:80px;text-align:left}.about-copy h2{margin:13px 0 25px;font-size:43px}.about-copy>p{font-size:14px;line-height:1.8;margin-bottom:14px}.about-stats{display:flex;gap:33px;margin-top:31px}.about-stats strong{font-size:39px;letter-spacing:-.07em;font-weight:500;line-height:1}.about-stats strong span{color:var(--accent)}.about-stats small{display:block;font-size:10px;color:var(--muted);margin-top:9px}.experience{padding-top:16px}.experience>a{display:flex;align-items:center;gap:15px;border-bottom:1px solid var(--border);padding:20px 0}.experience>a:hover h3{color:var(--accent)}.experience h3{font-size:15px;letter-spacing:-.03em}.experience p{font-size:11px;margin-top:5px}.company-monogram{display:grid;place-items:center;background:var(--soft);border:1px solid var(--border);height:39px;width:39px;border-radius:10px;font-size:15px;font-weight:600;letter-spacing:-.05em}.role-status{margin-left:auto;font-size:9px;color:var(--muted)}.role-status.current{color:#518166}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}.process-art{height:174px;border:1px solid var(--border);border-radius:17px;position:relative;background:radial-gradient(ellipse at center,var(--surface),var(--bg));display:grid;place-items:center;overflow:hidden}.step{position:absolute;top:13px;left:15px;font-family:monospace;font-size:10px;color:var(--muted)}.process-art>div{height:77px;width:77px;display:grid;place-items:center;background:linear-gradient(145deg,#666860,#171915);border:1px solid #9d9f92;border-radius:19px;color:#fff;font-size:44px;box-shadow:8px 13px 15px #0002;transform:rotate(-9deg);font-weight:500}.process-grid article:nth-child(2) .process-art>div{transform:rotate(10deg);background:linear-gradient(145deg,#a39d86,#5a5e4c)}.process-grid article:nth-child(3) .process-art>div{font-family:monospace;font-size:29px;transform:rotate(-5deg)}.process-grid article:nth-child(4) .process-art>div{background:linear-gradient(145deg,#f79672,#b95132);transform:rotate(10deg);border-color:#efb097}.process-grid h3{margin:21px 0 12px;font-size:21px}.process-grid p{font-size:13px;line-height:1.7}.process-grid+.button{margin-top:40px}.collaboration-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;max-width:730px;margin:auto;text-align:left}.collaboration-grid article{padding:27px;background:var(--surface);border:1px solid var(--border);border-radius:21px;box-shadow:var(--shadow)}.pill{font-family:monospace;font-size:9px;letter-spacing:.025em;display:inline-block;background:var(--soft);padding:6px 10px;border-radius:20px}.pill.accent{background:#e4eddf;color:#4c6540}.collaboration-grid h3{font-size:25px;margin:24px 0 12px;line-height:1.12}.collaboration-grid p{font-size:13px;line-height:1.7}.collaboration-grid ul{list-style:none;padding:0;margin:24px 0;font-size:12px}.collaboration-grid li{margin-bottom:13px}.collaboration-grid li:before{content:'';display:inline-block;width:14px;height:14px;margin-right:11px;vertical-align:-2px;background:var(--muted);-webkit-mask:var(--check) center/contain no-repeat;mask:var(--check) center/contain no-repeat}.collaboration-grid .button{width:100%;font-size:13px;min-width:0;padding:12px 17px;gap:12px}.small-note{font-size:11px;margin-top:22px}.faq>.section-heading{max-width:none;margin-inline:auto}.faq>div:last-child{max-width:670px;margin:auto}.faq details{background:var(--surface);border-radius:27px;margin-top:12px;text-align:left;box-shadow:0 6px 18px #00000006;border:1px solid var(--border)}.faq summary{padding:20px 23px;display:flex;align-items:center;gap:22px;font-size:14px;line-height:1.5;font-weight:500}.faq .plus{background:var(--soft);border-radius:50%;width:27px;height:27px;flex-shrink:0;display:grid;place-items:center;font-size:22px}.faq details p{font-size:14px;padding:0 25px 25px;line-height:1.8}.closing{text-align:center;padding:91px 24px 79px}.closing h2{font-size:clamp(42px,6vw,78px);line-height:1.06;margin:17px 0 31px}.closing h2 em{color:var(--text)}.closing>p{font-size:12px;margin-top:23px}.closing .large{--pl:32px;--pr:30px;--gap:30px;padding-block:18px}.footer-line,.footer-bottom{max-width:1070px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-line{padding:28px 0;border-block:1px solid var(--border)}.footer-line p{font-size:11px}.footer-line>a:last-child{font-size:11px}.footer-bottom{font-size:10px;color:var(--muted);padding-top:23px}.footer-signature{font-family:'Nothing You Could Do',cursive;font-size:clamp(50px,13.5vw,175px);letter-spacing:-.06em;text-align:center;line-height:1.9;color:var(--text);opacity:.055;overflow:hidden;white-space:nowrap}.skip-link{position:fixed;top:-70px;left:15px;background:var(--surface);z-index:100;padding:10px;border:1px solid var(--text)}.skip-link:focus{top:15px}.portfolio-hero{padding:155px 24px 65px;text-align:center}.back-link{display:block;font-size:11px;color:var(--muted);margin-bottom:37px}.portfolio-hero h1{font-size:clamp(48px,6vw,76px);margin-top:14px}.portfolio-hero>p{font-size:14px;line-height:1.8;margin-top:23px}.portfolio-work{padding-top:12px}.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.filters button{border:1px solid var(--border);border-radius:30px;padding:10px 14px;font-size:12px;background:var(--surface)}.filters button span{font-family:monospace;font-size:9px;margin-left:10px;opacity:.6}.filters button.active{background:var(--text);border-color:var(--text);color:var(--bg)}.portfolio-count{text-align:left;font-size:10px;color:var(--muted);margin:31px 0 20px;letter-spacing:.04em}.portfolio-note{margin-top:65px;padding:30px;border:1px solid var(--border);background:var(--surface);border-radius:14px;text-align:left;display:flex;align-items:center;gap:23px}.portfolio-note>span{font-size:43px;color:var(--accent)}.portfolio-note h3{font-size:23px}.portfolio-note p{font-size:12px;margin-top:8px}.portfolio-note .button{margin-left:auto}dialog{border:1px solid var(--border);padding:42px;background:var(--bg);color:var(--text);border-radius:23px;width:min(640px,calc(100% - 32px));max-height:90dvh;box-shadow:0 24px 120px #0005}dialog::backdrop{background:#15171288;backdrop-filter:blur(7px)}.dialog-close{position:absolute;top:14px;right:15px;width:32px;height:32px;background:var(--soft);border-radius:50%;font-size:17px;line-height:1;display:grid;place-items:center}.contact-heading h2{font-size:38px;margin:10px 0 13px}.contact-heading h2>span{color:var(--accent)}.contact-heading .signature{font-size:16px}.contact-heading p{font-size:13px}.contact-heading{margin-bottom:25px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:block;font-size:12px;font-weight:500;margin-bottom:17px}input,select,textarea{display:block;width:100%;margin-top:7px;padding:12px 13px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px}textarea{resize:vertical;min-height:110px}input::placeholder,textarea::placeholder{color:var(--muted)}form .button{width:100%;margin-top:3px}.form-note{font-size:10px;line-height:1.6;text-align:center;margin-top:15px}.form-status{font-size:12px;margin-top:12px;color:var(--text)}#project-dialog{width:min(760px,calc(100% - 32px));padding:40px}.project-detail-category{font-size:11px;color:var(--accent);margin-bottom:10px}#project-title{font-size:39px;margin-bottom:14px}#project-detail>p{font-size:15px;margin-bottom:22px}.detail-tags{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 25px}.detail-tags span{padding:5px 10px;border:1px solid var(--border);border-radius:20px;font-size:11px}#project-detail .project-art{height:340px}.detail-note{padding:15px;border-radius:10px;background:var(--soft);font-size:12px!important}.project-card[hidden]{display:none}body.modal-open{overflow:hidden}
@media(min-width:1500px){body:before{position:fixed}.hero{min-height:770px;padding-top:185px}}
@media(max-width:1150px){.section{margin-inline:60px}.project-art{height:290px;padding:23px}.mock-content h3{font-size:29px}.architecture .mock-content h3,.beauty .mock-content h3{font-size:31px}.creative .mock-content h3{font-size:36px}.services-layout{gap:50px;padding:0 10px}.about{gap:45px}.process-grid{gap:20px}.footer-line,.footer-bottom{margin-inline:60px}.hero-note{left:calc(100% + 14px);font-size:13px}.company-band .co{font-size:14px}.project-caption p{font-size:11px}.hero h1{font-size:42px}}
@media(max-width:850px){.hero-note{display:none}.hero{min-height:675px;padding-top:155px}.hero h1{font-size:38px}.section{margin-inline:40px;padding-block:77px}.project-art{height:255px;padding:19px}.project-grid{gap:30px 22px}.mock-content{padding:26px 15px}.mock-nav{padding:12px}.mock-nav b{font-size:9px}.mock-content h3,.architecture .mock-content h3,.beauty .mock-content h3,.wellness .mock-content h3,.food .mock-content h3{font-size:27px}.creative .mock-content h3{font-size:31px}.mock-visual{top:37px}.bottle{width:49px;height:112px}.bottle:before{width:29px;height:21px;top:-20px}.bottle.two{height:86px}.bottle i{font-size:22px}.saas .mock-content h3{font-size:23px}.saas .mock-visual{bottom:-67px}.project-caption h3{font-size:14px}.concept-tag{font-size:9px}.logo-track{gap:40px;padding-right:40px}.services-layout{gap:30px}.service-list summary{font-size:15px}.about{grid-template-columns:1fr;gap:30px}.about-copy{max-width:540px}.about-stats{gap:60px}.experience{padding:25px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}.experience>a:last-child{border-bottom:0}.process-grid{grid-template-columns:1fr 1fr;gap:35px}.process-art{height:180px}.process-grid p{max-width:230px;margin:auto}.portfolio-note{flex-wrap:wrap}.portfolio-note .button{margin-left:64px}.footer-line,.footer-bottom{margin-inline:40px}.footer-line p{max-width:220px;text-align:center}.section-heading p{max-width:450px;margin-inline:auto}.finance .mock-content h3{font-size:25px}.plate{width:125px;height:125px}.flower{font-size:165px}}
@media(max-width:600px){body:before{left:14px;right:14px}.site-header{top:18px;width:calc(100% - 46px);max-width:390px}.site-header nav{gap:20px;justify-content:space-between;padding:10px 13px}.wordmark{font-size:28px}.nav-divider{display:none}.site-header nav>a:not(.wordmark){font-size:12px}.nav-contact{font-size:10px;padding:9px 10px}.site-header nav{gap:12px}.hero{padding:137px 25px 0;min-height:630px}.availability{font-size:10px}.hero-signature{font-size:21px;margin-top:29px;margin-bottom:15px}.hero h1{font-size:clamp(24px,7.2vw,36px);line-height:1.1;letter-spacing:.02em}.hero>p{font-size:13px;max-width:320px;margin-top:22px}.hero>p br{display:none}.hero>.button{margin-top:26px}.button{font-size:13px;padding:14px 21px;min-width:210px}.quiet-link{font-size:10px;margin-top:20px}.hero-meta{font-size:7px;padding-bottom:18px;padding-top:35px;gap:16px;text-align:left}.hero-meta>span:last-child{text-align:right}.showcase-strip{padding-block:14px}.strip-track{gap:14px;animation-name:strip-scroll-sm}@keyframes strip-scroll-sm{to{transform:translateX(calc(-50% - 7px))}}.strip-track>a{width:268px}.strip-track .project-art{height:181px;padding:12px}.strip-track .mock-content h3{font-size:22px}.strip-track .mock-content{padding:17px 12px}.strip-track .creative .mock-content h3{font-size:27px}.strip-track .mock-nav{padding:8px}.strip-track .mock-nav b{font-size:7px}.strip-track .mock-nav>span{font-size:4px}.strip-track .mock-visual{top:29px}.strip-track .bottle{width:32px;height:72px}.strip-track .bottle:before{width:20px;height:14px;top:-13px}.strip-track .bottle.two{height:59px}.strip-track .bottle i{font-size:14px}.strip-track .bottle small{margin-top:8px}.strip-track .flower{font-size:110px}.strip-track .saas .mock-visual{top:auto;bottom:-65px}.section{margin-inline:28px;padding-block:65px}.section-heading{margin-bottom:30px}.signature{font-size:18px}.section-heading .signature{margin-bottom:10px}h2{font-size:34px;letter-spacing:-.055em}.section-heading p{font-size:12px;line-height:1.8;max-width:290px;margin-top:15px}.project-grid{grid-template-columns:1fr;gap:30px}.project-art{height:285px;padding:24px}.mock-content{padding:29px 17px}.mock-content h3,.architecture .mock-content h3,.beauty .mock-content h3,.wellness .mock-content h3,.food .mock-content h3{font-size:32px}.creative .mock-content h3{font-size:39px}.saas .mock-content h3{font-size:27px}.project-caption{padding-top:14px}.project-caption h3{font-size:16px}.project-caption p{font-size:11px}.concept-tag{font-size:9px}.selected>.button{margin-top:32px}.company-band{padding:21px 24px 26px}.company-band>div{gap:18px 26px}.company-band .co{font-size:14px}.services-layout{grid-template-columns:1fr;gap:32px;padding:0}.service-intro{text-align:center}.service-intro p{max-width:270px;margin:auto}.stack-art{margin:0 auto}.service-intro h3{font-size:27px;margin-top:17px}.service-list summary{font-size:16px}.service-list details p{font-size:13px}.about-copy h2{font-size:36px}.about-copy>p{font-size:13px}.about-stats{gap:27px;justify-content:space-between}.about-stats strong{font-size:36px}.about-stats small{font-size:9px}.experience{padding:19px 16px}.experience>a{gap:10px}.experience h3{font-size:13px}.company-monogram{width:32px;height:32px;flex-shrink:0;font-size:12px}.role-status{font-size:8px}.experience p{font-size:10px}.process-grid{gap:28px 15px}.process-art{height:137px;border-radius:13px}.process-art>div{height:62px;width:62px;font-size:36px;border-radius:16px}.process-grid h3{font-size:19px;margin-top:16px}.process-grid p{font-size:11px}.collaboration-grid{grid-template-columns:1fr;gap:17px}.collaboration-grid article{padding:27px}.collaboration-grid h3{font-size:27px}.collaboration-grid p{font-size:13px}.collaboration-grid ul{font-size:12px}.collaboration-grid .button{padding:14px 18px}.small-note{font-size:10px;max-width:240px;margin-inline:auto}.faq summary{font-size:12px;padding:17px 19px;gap:13px}.faq details{border-radius:24px}.faq details p{font-size:12px;padding:0 20px 22px}.closing{padding:62px 25px 57px}.closing h2{font-size:46px}.closing .signature{font-size:17px}.closing>p{font-size:10px}.closing .large{min-width:250px;padding:15px 23px}.footer-line,.footer-bottom{margin-inline:28px}.footer-line p{display:none}.footer-line{padding:22px 0}.footer-line>a:last-child{font-size:10px}.footer-bottom{font-size:8px;padding-top:18px;gap:9px}.footer-signature{font-size:15vw;padding:10px 0 70px}.portfolio-hero{padding:129px 28px 42px}.back-link{margin-bottom:29px}.portfolio-hero h1{font-size:49px}.portfolio-hero>p{font-size:12px}.portfolio-hero>p br{display:none}.portfolio-work{padding-top:0}.filters{gap:7px}.filters button{font-size:10px;padding:8px 10px}.filters button span{font-size:8px;margin-left:6px}.portfolio-count{font-size:9px;margin-top:24px}.portfolio-note{padding:22px;gap:13px;margin-top:40px}.portfolio-note>span{font-size:31px}.portfolio-note>div{flex:1}.portfolio-note h3{font-size:20px}.portfolio-note p{font-size:11px}.portfolio-note .button{margin:7px 0 0 44px}.form-row{grid-template-columns:1fr;gap:0}dialog{padding:36px 22px 24px;max-height:92dvh}.contact-heading h2{font-size:31px}.contact-heading .signature{font-size:14px}.contact-heading p{font-size:12px}input,select,textarea{font-size:16px}#project-dialog{padding:39px 20px 23px}#project-title{font-size:31px}#project-detail>p{font-size:13px}#project-detail .project-art{height:260px;padding:15px}.detail-tags span{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.testimonials{padding-bottom:56px;border-bottom:0}.testimonials .section-heading{margin-bottom:0}.reviews-band{overflow:hidden;padding:26px 0;margin-bottom:0}.reviews-track{display:flex;gap:16px;width:max-content;animation:reviews-scroll 50s linear infinite}.reviews-band:hover .reviews-track,.reviews-band:focus-within .reviews-track{animation-play-state:paused}.reviews-clone{display:contents}@keyframes reviews-scroll{to{transform:translateX(calc(-50% - 8px))}}.review-card{width:300px;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;text-align:left;box-shadow:0 2px 3px #00000008}.review-person{display:flex;gap:11px;align-items:center;margin-bottom:14px}.review-avatar{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;background:var(--soft);color:var(--accent);font-size:13px;font-weight:650;flex-shrink:0}.review-person h3{font-size:15px;font-weight:600;margin:0;line-height:1.3}.review-person p{font-size:13px;color:var(--muted);margin:0;line-height:1.35}.review-text{font-size:14px;line-height:1.5;color:var(--muted);margin:0}.review-text b{color:var(--text);font-weight:550}
@media(max-width:600px){.testimonials{padding-bottom:40px}.review-card{width:260px;padding:18px}.reviews-track{animation-duration:40s}}
@media(prefers-reduced-motion:reduce){.reviews-band,.showcase-strip,.logo-marquee{overflow-x:auto}}

.wordmark .icon{stroke-width:3}.portfolio-note>span .icon{stroke-width:2.4}
.stack-art span .icon{width:44px;height:44px}.stack-art span:last-child .icon{width:30px;height:30px}
.service-icon .icon{width:18px;height:18px}
.process-art>div .icon{width:36px;height:36px;stroke-width:1.7}
.plus .icon{width:18px;height:18px;stroke-width:1.6}.faq .plus .icon{width:15px;height:15px;stroke-width:2}
.filters button>.icon{width:13px;height:13px;margin-right:7px;vertical-align:-2px}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;vertical-align:1px}
.back-link .icon,.site-header .icon,#mobile-menu .icon,.footer-line .icon,.hero-meta .icon,.role-status .icon{vertical-align:-.15em}
@media(max-width:600px){.process-art>div .icon{width:29px;height:29px}.stack-art span .icon{width:40px;height:40px}}
.icon-wix{width:1.45em;height:1.45em;margin-block:-.225em}.service-icon .icon-wix{width:26px;height:26px}
.filters button>.icon-wix{width:20px;height:20px;margin-block:-4px}
.hatched{background-color:var(--bg)}
body{position:relative}
.corner{position:fixed;z-index:25;display:flex;align-items:center;justify-content:center;gap:8px;height:44px;min-width:44px;padding:0 15px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:30px;box-shadow:0 4px 16px #0000000f;font-size:11px;font-weight:550;transition:transform .2s,box-shadow .2s}.corner:hover{transform:translateY(-2px);box-shadow:0 8px 22px #0000001a}
.corner-bl{bottom:22px;left:24px}.corner-bl .icon{width:16px;height:16px;color:var(--accent)}
.corner-br{bottom:22px;right:24px;width:46px;height:46px;min-width:0;padding:0;background:#25d366;border-color:#25d366;color:#fff;box-shadow:0 6px 18px #25d36650}.corner-br .icon{width:22px;height:22px}
#mobile-menu{position:absolute;left:0;right:0;top:100%}.at-bottom #mobile-menu{top:auto;bottom:100%;margin:0 0 8px}
.corner{transition:transform .5s cubic-bezier(.2,.9,.25,1),box-shadow .2s}
.mm-inner{padding:10px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 18px 40px #0000001f;clip-path:inset(0 0 100% 0 round 18px);transition:clip-path .6s cubic-bezier(.7,0,.2,1)}#mobile-menu.open .mm-inner{clip-path:inset(0 0 0 0 round 18px)}.at-bottom #mobile-menu .mm-inner{clip-path:inset(100% 0 0 0 round 18px)}.at-bottom #mobile-menu.open .mm-inner{clip-path:inset(0 0 0 0 round 18px)}
.mm-inner>a{display:flex;align-items:baseline;gap:14px;padding:12px 14px;border-radius:12px;font-size:22px;font-weight:550;letter-spacing:-.04em;opacity:0;transform:translateY(-14px);transition:opacity .25s,transform .5s cubic-bezier(.2,.9,.25,1),background .2s}.mm-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding:14px 4px 4px 14px;border-top:1px solid var(--border);opacity:0;transform:translateY(-14px);transition:opacity .25s,transform .5s cubic-bezier(.2,.9,.25,1)}.at-bottom .mm-inner>a,.at-bottom .mm-foot{transform:translateY(14px)}
#mobile-menu.open .mm-inner>a,#mobile-menu.open .mm-foot{opacity:1;transform:none;transition-delay:calc(.14s + var(--i)*.06s),calc(.14s + var(--i)*.06s),0s}
.mm-num{font-family:monospace;font-size:10px;letter-spacing:.08em;color:var(--muted);transition:color .2s}.mm-label{transition:transform .35s cubic-bezier(.2,.9,.25,1)}.mm-inner>a .icon{margin-left:auto;align-self:center;color:var(--accent);opacity:0;transform:translate(-8px,8px);transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.25,1)}.mm-inner>a:hover{background:var(--soft)}.mm-inner>a:hover .mm-label{transform:translateX(6px)}.mm-inner>a:hover .mm-num{color:var(--accent)}.mm-inner>a:hover .icon{opacity:1;transform:none}
.mm-status{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.mm-status i{width:6px;height:6px;border-radius:50%;background:#52896a;box-shadow:0 0 0 3px #52896a22}.button.mm-cta{--gap:14px;--pr:16px;--pl:18px;--grow-by:10px;padding-block:11px;font-size:12px}.mm-cta .btn-arrow{width:38px}
.button{white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;min-width:0;gap:calc(var(--gap,24px) + var(--grow,0px));padding:15px calc(var(--pr,26px) + var(--grow,0px)/2) 15px var(--pl,28px);transition:transform .6s cubic-bezier(.25,.8,.25,1),box-shadow .6s,gap .8s cubic-bezier(.25,.8,.25,1),padding .8s cubic-bezier(.25,.8,.25,1);border:1px solid #3b3c38;background:radial-gradient(120% 150% at 30% 0%,#4d4e49 0%,#1c1d1a 45%,#0b0c0a 100%);box-shadow:inset 0 1px 0 #ffffff29,inset 0 -8px 16px #00000055,0 10px 24px #0000002e;font-weight:600;letter-spacing:-.01em}
.button:before{content:'';position:absolute;z-index:-1;top:50%;left:0;width:150px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--glow,#ffffff5e) 0%,transparent 68%);transform:translate(-100%,-50%);opacity:0;transition:left 1.3s cubic-bezier(.25,.8,.25,1),transform 1.3s cubic-bezier(.25,.8,.25,1),opacity .6s}.button:hover:before{left:100%;transform:translate(-78%,-50%);opacity:1}
.button>.btn-arrow{width:62px;height:12px;flex-shrink:0;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;transition:transform .8s cubic-bezier(.25,.8,.25,1)}.btn-arrow .shaft{fill:currentColor;stroke:none;transform-box:fill-box;transform-origin:left center}.btn-label{transition:transform .8s cubic-bezier(.25,.8,.25,1)}
.button:hover{--grow:var(--grow-by,14px)}form .button{--grow-by:0px}.button:hover .btn-arrow .shaft{animation:shaft-draw 1.2s cubic-bezier(.25,.8,.25,1)}@keyframes shaft-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.button.outline{background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:0 3px 8px #0000000a}.button.outline{--glow:#00000014}html[data-theme=dark] .button.outline{--glow:#ffffff24}
html[data-theme=dark] .button:not(.outline){background:radial-gradient(120% 150% at 30% 0%,#fff 0%,#f0eee7 45%,#d6d3c8 100%);color:#151613;border-color:#fffdf6;box-shadow:inset 0 1px 0 #fff,inset 0 -8px 16px #0000001c,0 10px 26px #0000005c}html[data-theme=dark] .button:not(.outline){--glow:#e5383b59}
.roll{display:inline-flex;overflow:hidden;vertical-align:top;line-height:1.25}.roll i{position:relative;display:inline-block;font-style:normal;transition:transform .55s cubic-bezier(.7,0,.2,1) calc(var(--i)*28ms)}.roll i:after{content:attr(data-c);position:absolute;left:0;top:100%;color:var(--accent)}
.nav-link:hover .roll i,.nav-contact:hover .roll i,.nav-link:focus-visible .roll i,.nav-contact:focus-visible .roll i{transform:translateY(-100%)}.site-header nav>a.nav-link:hover{color:inherit}
.nav-link{position:relative}.nav-link:before{content:'';position:absolute;left:50%;bottom:-7px;width:4px;height:4px;border-radius:50%;background:var(--accent);transform:translateX(-50%) scale(0);transition:transform .45s cubic-bezier(.2,.9,.25,1) .1s}.nav-link:hover:before,.nav-link[aria-current=page]:before{transform:translateX(-50%) scale(1)}
.nav-contact{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:6px}.nav-contact:before{content:'';position:absolute;z-index:-1;top:50%;left:0;width:90px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#b3141c26 0%,transparent 68%);transform:translate(-100%,-50%);transition:left 1.1s cubic-bezier(.25,.8,.25,1),transform 1.1s cubic-bezier(.25,.8,.25,1)}.nav-contact:hover:before{left:100%;transform:translate(-70%,-50%)}.nav-contact .icon{transition:transform .6s cubic-bezier(.2,.9,.25,1)}.nav-contact:hover .icon{transform:rotate(45deg)}html[data-theme=dark] .nav-contact:before{background:radial-gradient(circle,#e5383b33 0%,transparent 68%)}
.ti{grid-area:1/1;transition:transform .7s cubic-bezier(.2,.9,.25,1),opacity .4s}.ti-sun{opacity:0;transform:rotate(-120deg) scale(.3)}html[data-theme=dark] .ti-sun{opacity:1;transform:none}html[data-theme=dark] .ti-moon{opacity:0;transform:rotate(120deg) scale(.3)}html:not([data-theme=dark]) .theme-toggle:hover .ti-moon{transform:rotate(-22deg) scale(1.1)}html[data-theme=dark] .theme-toggle:hover .ti-sun{transform:rotate(90deg) scale(1.1)}
.theme-switching *:not(.ti),.theme-switching *:before,.theme-switching *:after{transition:none!important}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}::view-transition-new(root){-webkit-mask:linear-gradient(90deg,#000 45%,transparent 55%) 100% 0/220% 100% no-repeat;mask:linear-gradient(90deg,#000 45%,transparent 55%) 100% 0/220% 100% no-repeat;animation:theme-wipe 1.1s cubic-bezier(.65,0,.25,1) both}@keyframes theme-wipe{to{-webkit-mask-position:0 0;mask-position:0 0}}
.theme-toggle{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;margin-right:-14px}.theme-toggle:hover{background:var(--surface)}.theme-toggle svg{fill:none;stroke:var(--text);stroke-width:1.5}
@media(max-width:600px){.corner-bl{left:14px;bottom:14px;height:40px}.corner-br{right:14px;bottom:14px;width:42px;height:42px}.corner-br .icon{width:20px;height:20px}.theme-toggle{margin-right:-6px}.mm-inner>a{font-size:20px}.mm-status{font-size:10px}.button.mm-cta{--gap:10px;--pr:13px;--pl:15px;--grow-by:8px;padding-block:10px}.button{--gap:20px;--pr:22px;--pl:24px;padding-block:14px}.mm-cta .btn-arrow{width:26px}.nav-up .corner{transform:translateY(-70px)}}
.curtain{timeline-scope:--footer}.curtain main{position:sticky}
.curtain footer{view-timeline:--footer block;z-index:5;border-radius:28px 28px 0 0;box-shadow:0 -18px 40px #00000026;overflow:hidden}
@supports(animation-timeline:view()){.curtain main>section:last-child{animation:faq-recede linear both;animation-timeline:--footer;animation-range:entry 0% contain 0%}@keyframes faq-recede{to{opacity:.25}}}
.site-header nav,.mm-inner{background:color-mix(in srgb,#ececec 72%,transparent);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border:1px solid color-mix(in srgb,var(--surface) 75%,transparent);box-shadow:0 10px 30px #0000001a,inset 0 1px 0 #ffffff80}
html[data-theme=dark] .site-header nav,html[data-theme=dark] .mm-inner{background:color-mix(in srgb,var(--surface) 55%,transparent);border-color:#ffffff1f;box-shadow:0 10px 30px #00000059,inset 0 1px 0 #ffffff14}
.mm-inner>a:hover{background:color-mix(in srgb,var(--text) 7%,transparent)}.mm-foot{border-top-color:color-mix(in srgb,var(--text) 10%,transparent)}.nav-contact{background:color-mix(in srgb,var(--surface) 85%,transparent)}
.nav-link{display:inline-flex;align-items:center}.nav-link .roll,.nav-contact .roll{vertical-align:middle;line-height:1.2;padding-top:1px}
.site-header nav,.mm-inner,html[data-theme=dark] .site-header nav,html[data-theme=dark] .mm-inner{border-color:transparent;box-shadow:none}
html:not([data-theme=dark]) .site-header nav,html:not([data-theme=dark]) .mm-inner{background:color-mix(in srgb,#ececec 55%,transparent);-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%)}
.mm-status{color:var(--text);font-weight:500}.nav-contact .icon{transition:transform .6s cubic-bezier(.2,.9,.25,1),color .4s}.nav-contact:hover .icon{color:var(--accent)}
.hero{isolation:isolate}
.rv{opacity:0;transform:translateY(34px);filter:blur(5px);transition:opacity 1s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0s),filter 1s cubic-bezier(.2,.8,.2,1) var(--d,0s)}.rv.in{opacity:1;transform:none;filter:none}
.service-intro{position:sticky;top:22vh;align-self:start}
.svc-wrap{position:relative;padding-left:30px}.svc-rail{position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--border);overflow:hidden}.svc-rail i{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(var(--p,.14));transition:transform .9s cubic-bezier(.2,.9,.25,1)}
@supports(animation-timeline:view()){.xp-rail i{animation:rail-fill linear both;animation-timeline:view();animation-range:cover 20vh cover calc(100% - 55vh)}}@keyframes rail-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.svc-list{list-style:none;margin:0;padding:0;text-align:left}.svc{display:grid;grid-template-columns:30px 44px 1fr;gap:16px;align-items:start;padding:24px 0;border-bottom:1px solid var(--border);opacity:.3;transition:opacity .7s cubic-bezier(.2,.8,.2,1)}.svc.active{opacity:1}
.svc-num{font-family:monospace;font-size:11px;letter-spacing:.06em;color:var(--muted);padding-top:12px;transition:color .5s}.svc.active .svc-num{color:var(--accent)}
.svc-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--soft);transition:background .6s,color .6s,transform .8s cubic-bezier(.2,.9,.25,1)}.svc-icon .icon{width:19px;height:19px}.svc-icon .icon-wix{width:28px;height:28px}.svc.active .svc-icon{background:var(--accent);color:#fff;transform:rotate(-8deg) scale(1.08)}
.svc-body h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.045em;line-height:1.15;padding-top:5px;transition:transform .8s cubic-bezier(.2,.9,.25,1)}.svc.active .svc-body h3{transform:translateX(6px)}
.svc-desc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s cubic-bezier(.2,.9,.25,1)}.svc-desc>p{min-height:0;overflow:hidden;margin:0;font-size:14px;line-height:1.7;max-width:440px;opacity:0;transform:translateY(8px);transition:opacity .6s .1s,transform .8s cubic-bezier(.2,.9,.25,1)}.svc.active .svc-desc{grid-template-rows:1fr}.svc.active .svc-desc>p{opacity:1;transform:translateX(6px)}.svc-body h3+.svc-desc{margin-top:10px}
.experience{position:relative;padding-left:32px}.experience>.eyebrow{display:block;margin-left:-32px}.xp-rail{position:absolute;left:6px;top:58px;bottom:34px;width:2px;border-radius:2px;background:var(--border);overflow:hidden}.xp-rail i{position:absolute;inset:0;background:var(--accent);transform-origin:top}
.experience>a.xp{position:relative;isolation:isolate;padding-inline:14px;margin-inline:-14px;border-radius:16px;border-bottom-color:transparent}.xp-node{position:absolute;left:-18px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--bg);border:2px solid var(--border);transition:border-color .6s,background .6s,box-shadow .6s}.xp.in .xp-node{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 16%,transparent)}.xp-current.in .xp-node{animation:node-pulse 2.2s cubic-bezier(.2,.8,.2,1) infinite}@keyframes node-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}100%{box-shadow:0 0 0 16px transparent}}
.company-monogram{transition:background .5s,color .5s,border-color .5s,transform .7s cubic-bezier(.2,.9,.25,1)}.xp:hover .company-monogram{background:var(--accent);color:#fff;border-color:var(--accent);transform:rotate(-8deg) scale(1.06)}.xp h3{transition:transform .6s cubic-bezier(.2,.9,.25,1),color .4s}.xp:hover h3{transform:translateX(6px);color:var(--accent)}.xp .role-status .icon{transition:transform .5s cubic-bezier(.2,.9,.25,1)}.xp:hover .role-status .icon{transform:translate(3px,-3px)}
.xp:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%);opacity:0;transition:opacity .5s}.xp:hover:before{opacity:1}
.about-stats b{font-weight:inherit;font-variant-numeric:tabular-nums}
.spot{position:relative;isolation:isolate}.spot:after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(240px circle at var(--sx,50%) var(--sy,50%),var(--accent),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s;pointer-events:none}.spot:hover:after{opacity:1}
@media(max-width:850px){.service-intro{position:static}.svc{opacity:1}.svc .svc-desc{grid-template-rows:1fr}.svc .svc-desc>p{opacity:1;transform:none}.svc-body h3{font-size:22px}}

.company-band .co{color:var(--text)}
.service-intro .button{margin-top:28px}
.experience{padding-left:0}.experience>.eyebrow{margin-left:0}
.xp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.xp{position:relative;padding:18px 18px 20px;border:1px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--surface) 70%,transparent);text-align:left;transition:border-color .5s,transform .7s cubic-bezier(.2,.9,.25,1)}
.xp:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.xp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.xp .role-status{margin-left:0}
.xp h3{font-size:15px;letter-spacing:-.03em}.xp p{font-size:11px;margin-top:5px}
.xp-current{border-color:color-mix(in srgb,var(--accent) 40%,var(--border));background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.xp-current .status-dot{animation:dot-pulse 2s cubic-bezier(.2,.8,.2,1) infinite}@keyframes dot-pulse{0%{box-shadow:0 0 0 0 #518166aa}100%{box-shadow:0 0 0 7px #51816600}}
@media(max-width:520px){.xp-grid{grid-template-columns:1fr}}
.faq .plus{transition:transform .6s cubic-bezier(.2,.9,.25,1)}.faq details.faq-closing .plus{transform:none}
.svc{grid-template-columns:44px 1fr 112px;gap:18px;align-items:center}.svc-body h3{font-size:clamp(20px,2vw,26px)}
.svc-img{width:112px;aspect-ratio:1;border-radius:20px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--accent) 22%,var(--surface)),var(--soft) 70%);clip-path:inset(50% 50% 50% 50% round 20px);opacity:0;transform:scale(.8) rotate(-6deg);transition:clip-path .9s cubic-bezier(.7,0,.2,1),opacity .5s,transform 1s cubic-bezier(.2,.9,.25,1)}
.svc.active .svc-img{clip-path:inset(0 0 0 0 round 20px);opacity:1;transform:rotate(3deg)}.svc-img img{width:100%;height:100%;object-fit:cover}.svc-img-ph .icon{width:38px;height:38px;color:color-mix(in srgb,var(--accent) 70%,var(--text))}.svc-img-ph .icon-wix{width:54px;height:54px}
@media(max-width:850px){.svc .svc-img{clip-path:inset(0 0 0 0 round 20px);opacity:1;transform:none;width:84px}.svc{grid-template-columns:44px 1fr 84px}}
@media(max-width:520px){.svc{grid-template-columns:40px 1fr}.svc .svc-img{display:none}}
.svc{position:relative;grid-template-columns:44px 1fr;padding-right:132px;min-height:0}.svc-img{position:absolute;right:0;top:50%;translate:0 -50%}
@media(max-width:850px){.svc{grid-template-columns:44px 1fr;padding-right:100px}}@media(max-width:520px){.svc{padding-right:0}}
@media(min-width:851px){.services-layout{grid-template-columns:.72fr 1.28fr;gap:64px}}
.svc{align-items:start;padding-right:222px}.svc-icon{margin-top:2px}
.svc-shot{position:absolute;right:0;top:50%;translate:0 -50%;width:200px;border-radius:12px;overflow:hidden;background:var(--surface);border:1px solid var(--border);box-shadow:0 14px 30px #00000014;clip-path:inset(50% 50% 50% 50% round 12px);opacity:0;transform:scale(.85) rotate(-4deg);transition:clip-path .9s cubic-bezier(.7,0,.2,1),opacity .5s,transform 1s cubic-bezier(.2,.9,.25,1)}
.svc.active .svc-shot{clip-path:inset(0 0 0 0 round 12px);opacity:1;transform:rotate(2deg)}
.svc-shot-bar{display:flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-bottom:1px solid var(--border);background:var(--soft)}.svc-shot-bar>i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--text) 18%,transparent)}.svc-shot-bar>i:first-child{background:#ff5f57}.svc-shot-bar>i:nth-child(2){background:#febc2e}.svc-shot-bar>i:nth-child(3){background:#28c840}
.svc-shot-tab{display:flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:6px 6px 0 0;background:var(--surface);font-size:8px;font-weight:600;color:var(--muted);align-self:flex-end;height:17px}.svc-shot-tab .icon{width:9px;height:9px}.svc-shot-tab .icon-wix{width:13px;height:13px}
.svc-shot-view{position:relative;height:125px;overflow:hidden}.svc-shot-view img{width:100%;height:100%;object-fit:cover}
.svc-shot-art{width:520px;height:325px;transform:scale(calc(200/520));transform-origin:0 0}.svc-shot-art .project-art{height:325px;border:0;outline:0;border-radius:0;box-shadow:none}
@media(max-width:850px){.svc{padding-right:170px}.svc .svc-shot{clip-path:inset(0 0 0 0 round 12px);opacity:1;transform:none;width:150px}.svc-shot-view{height:94px}.svc-shot-art{transform:scale(calc(150/520))}}
@media(max-width:520px){.svc{padding-right:0}.svc .svc-shot{display:none}}
.svc-shot-tab .icon-wix{display:none}
.hero-cols{display:none;--tw:180}.hc-col{width:calc(var(--tw)*1px);flex-shrink:0;height:100%;overflow:hidden}.hc-track{display:flex;flex-direction:column;gap:14px;padding-bottom:14px;will-change:transform}
.hc-tile{position:relative;flex-shrink:0;width:100%;border-radius:18px;overflow:hidden;background:var(--soft);transition:transform .7s cubic-bezier(.2,.9,.25,1)}
.hc-art{position:absolute;top:0;left:50%;width:520px;height:325px;margin-left:-260px;transform-origin:50% 0;pointer-events:none}.hc-art .project-art{height:325px;border:0;outline:0;border-radius:0;box-shadow:none}
.hc-screen{height:calc(var(--tw)*.625px)}.hc-screen .hc-art{transform:scale(calc(var(--tw)/520))}
.hc-laptop,.hc-phone,.hc-poster{height:calc(var(--tw)*1.25px);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 55%,#fff),var(--c))}
.hc-lap{position:absolute;left:8%;right:8%;top:50%;translate:0 -50%;filter:drop-shadow(0 10px 14px #0003)}.hc-lap-screen{position:relative;height:calc((var(--tw)*.84 - 8)*.625px + 10px);border:4px solid #1d1e1b;border-bottom-width:6px;border-radius:8px 8px 0 0;overflow:hidden;background:#000}.hc-lap-screen .hc-art{transform:scale(calc((var(--tw)*.84 - 8)/520))}.hc-lap>i{display:block;height:7px;margin:0 -7%;border-radius:0 0 9px 9px;background:linear-gradient(#d8d7d2,#9c9b96)}
.hc-ph{position:absolute;left:50%;top:50%;translate:-50% -50%;height:calc(var(--tw)*1.05px);aspect-ratio:9/19;border:5px solid #1d1e1b;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 12px 24px #00000038}.hc-ph .hc-art{transform:scale(calc((var(--tw)*1.05 - 10)/325))}
.hc-poster{display:flex;flex-direction:column;justify-content:space-between;padding:16px;color:#1d1e1b;text-align:left}.hc-poster small{font-size:9px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}.hc-poster b{font-size:calc(var(--tw)*.13px);line-height:1;letter-spacing:-.05em;font-weight:650}.hc-poster span{font-size:10px;font-weight:650}
.hero .hero-cols{display:flex;position:absolute;inset:0;z-index:-1;justify-content:space-between;padding:0 max(16px,calc((100% - 1330px)/2));--tw:168;-webkit-mask:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
@media(max-width:1180px){.hero .hero-cols{display:none}}
.hc-ph .hc-art{left:0;margin-left:0;transform-origin:0 0}

html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
.site-header nav{gap:0;justify-content:space-between}.wordmark{display:flex;align-items:center}
.wm-text{display:inline-block;max-width:46px;overflow:hidden;font-weight:inherit;transition:max-width .8s cubic-bezier(.7,0,.2,1),opacity .5s}
.nav-items{display:flex;align-items:center;gap:27px;margin:-10px 0 -10px 27px;padding:10px 0;max-width:760px;overflow:hidden;white-space:nowrap;opacity:1;visibility:visible;transition:max-width .8s cubic-bezier(.7,0,.2,1),margin .8s cubic-bezier(.7,0,.2,1),opacity .45s .2s,visibility 0s}
.nav-items>.nav-link{font-size:13px;font-weight:550}.theme-toggle{margin-right:0}
#menu-toggle{width:0;padding:0;margin-left:0;opacity:0;visibility:hidden;overflow:hidden;transition:width .8s cubic-bezier(.7,0,.2,1),margin .8s cubic-bezier(.7,0,.2,1),opacity .3s,visibility 0s .8s}
.at-bottom .wm-text{max-width:0;opacity:0}.at-bottom .wordmark span{margin-left:0}
.at-bottom .nav-items{max-width:0;margin-left:0;opacity:0;visibility:hidden;transition:max-width .8s cubic-bezier(.7,0,.2,1),margin .8s cubic-bezier(.7,0,.2,1),opacity .25s,visibility 0s .8s}
.at-bottom #menu-toggle{width:30px;padding:5px;margin-left:140px;opacity:1;visibility:visible;transition:width .8s cubic-bezier(.7,0,.2,1),margin .8s cubic-bezier(.7,0,.2,1),opacity .4s .35s,visibility 0s}
#mobile-menu{left:50%;right:auto;width:min(440px,calc(100vw - 28px));translate:-50% 0}
@media(max-width:760px){.nav-items>:not(.theme-toggle){display:none}.nav-items{margin-left:auto;gap:0}#menu-toggle{width:30px;padding:5px;margin-left:12px;opacity:1;visibility:visible}.at-bottom #menu-toggle{margin-left:110px}.site-header{transition:transform .95s cubic-bezier(.7,0,.2,1),width .8s cubic-bezier(.7,0,.2,1)}.site-header.at-bottom{width:230px}}
.site-header{display:flex;align-items:center;gap:10px}
.theme-float{flex-shrink:0;width:58px;height:58px;margin:0;border-radius:15px;pointer-events:auto;background:color-mix(in srgb,#ececec 55%,transparent);-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%);transition:background .3s}
html[data-theme=dark] .theme-float{background:color-mix(in srgb,var(--surface) 55%,transparent);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
.theme-float:hover{background:color-mix(in srgb,#ececec 85%,transparent)}html[data-theme=dark] .theme-float:hover{background:color-mix(in srgb,var(--surface) 85%,transparent)}
.corner{z-index:15}
@media(max-width:760px){.site-header,.site-header.at-bottom{width:calc(100% - 28px);max-width:none}.site-header nav{flex:1;min-width:0}.nav-items{display:none}#menu-toggle,.at-bottom #menu-toggle{margin-left:auto}.theme-float{width:56px;height:56px}}
.scroll-hud{position:fixed;top:0;left:0;right:0;z-index:22;pointer-events:none}
.sh-bar{height:2px;opacity:0;transition:opacity .5s}.sh-bar i{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 40%,transparent),var(--accent));transform-origin:0 50%;transform:scaleX(0)}
.sh-pill{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:50%;display:flex;align-items:center;gap:9px;height:38px;padding:0 15px 0 10px;border-radius:30px;color:var(--text);font-size:12px;font-weight:550;letter-spacing:-.01em;white-space:nowrap;pointer-events:none;background:color-mix(in srgb,#ececec 55%,transparent);-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%);box-shadow:0 8px 24px #0000000f;transform:translate(-50%,-170%) scale(.92);opacity:0;transition:transform .8s cubic-bezier(.2,.9,.25,1),opacity .45s}
html[data-theme=dark] .sh-pill{background:color-mix(in srgb,var(--surface) 60%,transparent);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);box-shadow:0 8px 24px #00000040}
.hud-on .sh-bar{opacity:1}.hud-on .sh-pill{transform:translate(-50%,0);opacity:1;pointer-events:auto}.hud-on .sh-pill:active{transform:translate(-50%,0) scale(.97)}
.sh-ring{width:20px;height:20px;transform:rotate(-90deg);flex-shrink:0}.sh-ring circle{fill:none;stroke-width:2.6;stroke:color-mix(in srgb,var(--text) 12%,transparent)}.sh-ring .sh-ring-fill{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.sh-label{display:inline-grid;overflow:hidden;height:18px;line-height:18px}.sh-label>span{grid-area:1/1;transition:transform .55s cubic-bezier(.2,.9,.25,1),opacity .4s}
.sh-pct{font-family:monospace;font-size:10px;color:var(--muted);min-width:28px;text-align:right;font-variant-numeric:tabular-nums}
.sh-pill .icon{width:0;margin-left:-9px;opacity:0;color:var(--accent);transition:width .45s cubic-bezier(.2,.9,.25,1),margin .45s cubic-bezier(.2,.9,.25,1),opacity .3s}.sh-pill:hover .icon,.sh-pill:focus-visible .icon{width:14px;margin-left:0;opacity:1}
html.has-cursor,html.has-cursor *{cursor:none!important}

::selection{background:transparent;color:inherit}::-moz-selection{background:transparent;color:inherit}img::selection{background:transparent}

.cur{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;transition:opacity .3s}html.has-cursor .cur.on{opacity:1}
.cur-a{position:fixed;left:0;top:0}.cur-a svg{display:block;width:22px;height:22px;margin:-2.3px 0 0 -3.7px;fill:var(--accent);stroke:#fff;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 2px 4px #00000040);transform-origin:3.7px 2.3px;transition:scale .3s cubic-bezier(.2,.9,.25,1)}.cur.down .cur-a svg{scale:.82}
.cur-tag{position:fixed;left:0;top:0;height:26px;border-radius:8px;overflow:hidden;background:var(--accent);color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 35%,transparent);transition:width .45s cubic-bezier(.2,.9,.25,1)}
.cur-tag-in{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;font-size:12px;font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.cur-ico:empty{display:none}.cur-ico svg{display:block;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.cur-ico .f{fill:currentColor;stroke:none}
html[data-theme=dark] .cur-tag{color:#1b1c19}html[data-theme=dark] .cur-a svg{stroke:#1b1c19}.project-card{perspective:1100px}.project-card .project-art{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s cubic-bezier(.2,.9,.25,1),box-shadow .7s}
.project-card:hover .project-art{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);box-shadow:0 30px 50px #00000024}
.project-card .mock-browser{transition:transform .8s cubic-bezier(.2,.9,.25,1),box-shadow .8s}.project-card:hover .mock-browser{transform:translateY(-8px) scale(1.025);box-shadow:0 28px 44px #00000038}
.project-art:after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,30%),#ffffff55,transparent 60%);mix-blend-mode:soft-light;opacity:0;transition:opacity .6s}.project-card:hover .project-art:after{opacity:1}
.project-caption h3{transition:color .4s}.project-card:hover .project-caption h3{color:var(--accent)}.concept-tag{transition:background .4s,color .4s,border-color .4s}.project-card:hover .concept-tag{background:var(--accent);border-color:var(--accent);color:#fff}
dialog,#project-dialog{padding:0;overflow:hidden;max-height:90dvh}.dlg-scroll{max-height:90dvh;overflow-y:auto;overscroll-behavior:contain;padding:42px}#project-dialog .dlg-scroll{padding:40px}
.dlg-scroll::-webkit-scrollbar{width:12px}.dlg-scroll::-webkit-scrollbar-track{background:transparent;margin-block:24px}.dlg-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 20%,transparent);border-radius:20px;border:4px solid transparent;background-clip:padding-box}.dlg-scroll::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--accent) 60%,transparent)}
dialog[open]{animation:dlg-in .6s cubic-bezier(.2,.9,.25,1)}dialog[open]::backdrop{animation:bd-in .45s ease-out}dialog.dlg-closing{animation:dlg-out .32s cubic-bezier(.5,0,.75,0) forwards}dialog.dlg-closing::backdrop{animation:bd-out .32s ease-in forwards}
@keyframes dlg-in{from{opacity:0;transform:translateY(34px) scale(.96)}}@keyframes dlg-out{to{opacity:0;transform:translateY(22px) scale(.97)}}@keyframes bd-in{from{opacity:0}}@keyframes bd-out{to{opacity:0}}
#contact-dialog[open] .contact-heading>*,#contact-dialog[open] #contact-form>*{animation:fld-in .7s cubic-bezier(.2,.9,.25,1) both}@keyframes fld-in{from{opacity:0;transform:translateY(14px)}}
#contact-dialog[open] .contact-heading>:nth-child(2){animation-delay:.05s}#contact-dialog[open] .contact-heading>:nth-child(3){animation-delay:.1s}#contact-dialog[open] #contact-form>:nth-child(1){animation-delay:.14s}#contact-dialog[open] #contact-form>:nth-child(2){animation-delay:.18s}#contact-dialog[open] #contact-form>:nth-child(3){animation-delay:.22s}#contact-dialog[open] #contact-form>:nth-child(4){animation-delay:.26s}#contact-dialog[open] #contact-form>:nth-child(5){animation-delay:.3s}#contact-dialog[open] #contact-form>:nth-child(6){animation-delay:.34s}#contact-dialog[open] #contact-form>:nth-child(n+7){animation-delay:.38s}
.fld{margin-bottom:16px;text-align:left}.fld label{display:block;margin:0 0 7px;font-size:12px;font-weight:550}.fld label em{font-style:normal;font-weight:450;font-size:11px;color:var(--muted);margin-left:4px}
.fld input,.fld select,.fld textarea{margin-top:0;transition:border-color .3s,box-shadow .3s,background .3s}.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.fld select{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8b85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:15px}
.fld.invalid input,.fld.invalid select,.fld.invalid textarea{border-color:#d9534f;box-shadow:0 0 0 4px #d9534f1f}.fld-err{display:block;margin-top:6px;font-size:11px;line-height:1.4;color:#d9534f}.fld-err:empty{display:none}
.fld-count{display:block;margin-top:5px;text-align:right;font-family:monospace;font-size:10px;color:var(--muted)}.fld.invalid .fld-count{margin-top:-15px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status:not(:empty){color:#d9534f;text-align:center}
.form-submit .spinner{display:none;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{rotate:360deg}}.form-submit.loading .spinner{display:block}.form-submit.loading .btn-arrow{display:none}.form-submit.loading{opacity:.85}
.form-success{text-align:center;padding:26px 0 8px}.form-success:not([hidden]){animation:fld-in .7s cubic-bezier(.2,.9,.25,1)}.success-mark svg{width:78px;height:78px;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.success-mark circle{stroke-dasharray:151;stroke-dashoffset:151;animation:draw .8s .1s cubic-bezier(.65,0,.35,1) forwards}.success-mark path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s .8s cubic-bezier(.65,0,.35,1) forwards}@keyframes draw{to{stroke-dashoffset:0}}
.form-success .signature{margin-top:14px}.form-success h2{font-size:38px;margin:6px 0 12px}.form-success h2:focus{outline:none}.success-text{max-width:430px;margin:0 auto 26px;font-size:14px;line-height:1.7}
@media(max-width:600px){.dlg-scroll{padding:30px 22px}.form-row{grid-template-columns:1fr;gap:0}}
.experience{padding-top:6px}
.now-card{margin-top:20px;padding:6px;border-radius:26px;background:color-mix(in srgb,var(--text) 4%,transparent);border:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.now-in{position:relative;overflow:hidden;padding:24px 26px 22px;border-radius:20px;text-align:left;background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--accent) 16%,var(--surface)),var(--surface) 55%);box-shadow:inset 0 1px 0 #ffffff14}
.now-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.now-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:30px;font-family:monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#3f7a58;background:#51816618}
.now-badge i{width:6px;height:6px;border-radius:50%;background:#51a173;animation:dot-pulse 2s cubic-bezier(.2,.8,.2,1) infinite}
.now-mono{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--accent);color:#fff;font-weight:700;font-size:18px;transform:rotate(-6deg);transition:transform .8s cubic-bezier(.2,.9,.25,1)}.now-card:hover .now-mono{transform:rotate(6deg) scale(1.06)}
.now-in h3{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.05em;line-height:1.05}.now-in>p{font-size:13px;margin-top:6px}
.now-foot{display:flex;align-items:center;gap:12px;margin-top:22px;font-family:monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.now-line{flex:1;height:1px;background:linear-gradient(90deg,var(--accent),transparent);transform-origin:left;transform:scaleX(.15);transition:transform 1.1s cubic-bezier(.2,.9,.25,1)}.now-card:hover .now-line,.now-card.in .now-line{transform:scaleX(1)}
.prev-label{display:block;margin:30px 0 4px;text-align:left;font-family:monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.prev-list{list-style:none;margin:0;padding:0;text-align:left}
.prev{position:relative;display:grid;grid-template-columns:26px 34px 1fr auto;align-items:center;gap:14px;padding:15px 4px;border-bottom:1px solid var(--border);overflow:hidden}
.prev:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 80%);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.9,.25,1)}.prev{isolation:isolate}.prev:hover:before{transform:scaleX(1)}
.prev-num{font-family:monospace;font-size:10px;color:var(--muted);transition:color .4s}
.prev-mono{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--soft);font-size:12px;font-weight:650;transition:background .5s,color .5s,transform .7s cubic-bezier(.2,.9,.25,1)}
.prev-name{font-size:16px;font-weight:600;letter-spacing:-.03em;transition:transform .6s cubic-bezier(.2,.9,.25,1),color .4s}
.prev-role{font-size:11px;color:var(--muted)}
.prev:hover .prev-num,.prev:hover .prev-name{color:var(--accent)}.prev:hover .prev-name{transform:translateX(6px)}.prev:hover .prev-mono{background:var(--accent);color:#fff;transform:rotate(-8deg)}
html[data-theme=dark] .now-badge{color:#7cc79c}
@media(max-width:520px){.prev{grid-template-columns:22px 30px 1fr}.prev-role{grid-column:3;margin-top:-10px}.now-in{padding:20px}}
@media(min-width:851px){.about-copy{position:sticky;top:16vh;align-self:start}}
@keyframes dlg-out{0%{opacity:1;transform:none}70%{opacity:1;transform:translateY(16px) scale(.975)}100%{opacity:0;transform:translateY(26px) scale(.96)}}@keyframes bd-out{0%,55%{opacity:1}100%{opacity:0}}
dialog.dlg-closing *{animation:none!important}
.platforms{padding-top:20px}.plat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;text-align:left;max-width:900px;margin:0 auto}
.plat-card{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:300px;padding:26px 24px 22px;border-radius:24px;overflow:hidden;background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--border);transition:transform .8s cubic-bezier(.2,.9,.25,1),border-color .5s,box-shadow .8s}
.plat-card:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(130% 90% at 100% 0%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 60%);opacity:0;transition:opacity .6s}
.plat-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));box-shadow:0 30px 50px #0000001c}.plat-card:hover:before{opacity:1}
.plat-card:last-child:nth-child(odd){grid-column:1/-1}
.plat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.plat-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--text);color:var(--bg);transition:background .5s,color .5s,transform .8s cubic-bezier(.2,.9,.25,1)}.plat-icon .icon{width:24px;height:24px}.plat-icon .icon-wix{width:34px;height:34px}
.plat-card:hover .plat-icon{background:var(--accent);color:#fff;transform:rotate(-8deg) scale(1.05)}
.plat-count{font-family:monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:5px 10px;border-radius:30px;border:1px solid var(--border)}
.plat-card h3{font-size:24px;letter-spacing:-.045em;line-height:1.1;margin-bottom:10px}.plat-card>p{font-size:13px;line-height:1.65;max-width:300px}
.plat-peek{position:absolute;left:24px;right:24px;bottom:-150px;height:150px;border-radius:12px 12px 0 0;overflow:hidden;box-shadow:0 -10px 30px #00000026;transform:translateY(20px) rotate(-2deg);transition:transform .9s cubic-bezier(.2,.9,.25,1),opacity .5s;opacity:0}
.plat-peek-art{width:520px;height:325px;transform:scale(calc(300/520));transform-origin:0 0}.plat-peek-art .project-art{height:325px;border:0;outline:0;border-radius:0}
.plat-card:hover .plat-peek{transform:translateY(-92px) rotate(-2deg);opacity:1}
.plat-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:26px;font-size:13px;font-weight:600;transition:opacity .4s,transform .7s cubic-bezier(.2,.9,.25,1)}.plat-go .arrow{width:16px;height:16px;transition:transform .6s cubic-bezier(.2,.9,.25,1)}.plat-card:hover .plat-go{opacity:0;transform:translateY(10px)}
.plat-hero{padding-bottom:40px}.plat-hero-icon{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 18px;border-radius:20px;background:var(--accent);color:#fff;transform:rotate(-6deg);box-shadow:0 18px 34px color-mix(in srgb,var(--accent) 35%,transparent)}.plat-hero-icon .icon{width:30px;height:30px}.plat-hero-icon .icon-wix{width:44px;height:44px}
.plat-hero>p{max-width:520px;margin-inline:auto}
.plat-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:34px}.plat-tabs a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:30px;font-size:12px;font-weight:550;color:var(--muted);border:1px solid transparent;transition:color .4s,border-color .4s,background .4s}.plat-tabs a .icon{width:14px;height:14px}.plat-tabs a .icon-wix{width:19px;height:19px}
.plat-tabs a:hover{color:var(--text);border-color:var(--border)}.plat-tabs a[aria-current=page]{color:var(--bg);background:var(--text)}
.plat-empty{padding:60px 20px;border:1px dashed var(--border);border-radius:20px}.plat-empty h3{font-size:24px}.plat-empty p{margin-top:8px;font-size:13px}

@media(max-width:600px){.plat-grid{grid-template-columns:1fr}.plat-card{min-height:0}.plat-peek{display:none}.plat-card:hover .plat-go{opacity:1;transform:none}}
.plat-hero h1 em{color:var(--accent)}
.plat-card:last-child:nth-child(odd){flex-direction:row;flex-wrap:wrap;align-items:flex-end;column-gap:40px;min-height:0}.plat-card:last-child:nth-child(odd) .plat-top{width:100%}.plat-card:last-child:nth-child(odd)>h3,.plat-card:last-child:nth-child(odd)>p{flex:1 1 260px}.plat-card:last-child:nth-child(odd) .plat-go{margin-top:0}
.plat-card:last-child:nth-child(odd) .plat-peek{left:auto;right:24px;width:300px}
@media(max-width:600px){.plat-card:last-child:nth-child(odd){display:flex;flex-direction:column;align-items:stretch}}
.ask-btn{height:38px;padding:0 14px 0 12px;gap:8px;font-size:12px;font-weight:600}.ask-btn .ask-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent);animation:ask-ping 2.4s cubic-bezier(.2,.8,.2,1) infinite}@keyframes ask-ping{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ask-btn[aria-expanded=true]{background:var(--text);color:var(--bg);border-color:var(--text)}
.chat{position:fixed;left:24px;bottom:72px;z-index:24;display:flex;flex-direction:column;width:min(380px,calc(100vw - 28px));height:min(560px,calc(100dvh - 120px));border-radius:24px;overflow:hidden;background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);border:1px solid var(--border);box-shadow:0 30px 70px #00000033;transform-origin:16px calc(100% + 30px);opacity:0;transform:translateY(14px) scale(.9);transition:opacity .35s,transform .55s cubic-bezier(.2,.9,.25,1)}
.chat.open{opacity:1;transform:none}
.chat-head{display:flex;align-items:center;gap:11px;padding:14px 12px 14px 14px;border-bottom:1px solid var(--border)}
.chat-avatar{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border-radius:12px;background:var(--text);color:var(--bg);font-weight:750;font-size:14px;letter-spacing:-1px}.chat-avatar span{color:var(--accent);font-size:11px;margin-left:1px}.chat-avatar .icon{stroke-width:3}
.chat-who{flex:1;min-width:0}.chat-who b{display:block;font-size:14px;letter-spacing:-.02em}.chat-who small{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}.chat-who small i{width:6px;height:6px;border-radius:50%;background:#51a173}
.chat-ico{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:10px;color:var(--text);transition:background .3s,color .3s}.chat-ico:hover{background:var(--soft)}.chat-ico .icon{width:17px;height:17px}
.chat-voice .v-off{display:none}.chat.muted .chat-voice .v-on{display:none}.chat.muted .chat-voice .v-off{display:block}.chat:not(.muted) .chat-voice{color:var(--accent)}
.chat-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 8px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.msg{max-width:86%;padding:10px 13px;border-radius:16px;font-size:13.5px;line-height:1.55;text-align:left;animation:msg-in .45s cubic-bezier(.2,.9,.25,1)}@keyframes msg-in{from{opacity:0;transform:translateY(8px)}}
.msg p{margin:0;color:inherit}.msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:5px;color:var(--text)}.msg.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px}
html[data-theme=dark] .msg.me{color:#1b1c19}
.msg.bot.speaking{border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}.msg.bot.speaking:after{content:'';display:block;width:34px;height:10px;margin-top:6px;background:linear-gradient(var(--accent),var(--accent)) 0 50%/3px 4px no-repeat,linear-gradient(var(--accent),var(--accent)) 7px 50%/3px 10px no-repeat,linear-gradient(var(--accent),var(--accent)) 14px 50%/3px 6px no-repeat,linear-gradient(var(--accent),var(--accent)) 21px 50%/3px 9px no-repeat,linear-gradient(var(--accent),var(--accent)) 28px 50%/3px 5px no-repeat;animation:wave .7s ease-in-out infinite alternate}@keyframes wave{to{background-size:3px 9px,3px 4px,3px 10px,3px 5px,3px 8px}}
.msg.typing{display:flex;gap:4px;padding:13px 14px}.msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dot 1s ease-in-out infinite}.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}@keyframes dot{50%{transform:translateY(-4px);opacity:.5}}
.chat-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}.chat-chips:empty{padding:0}
.chip{padding:7px 11px;border-radius:30px;border:1px solid var(--border);background:var(--surface);font-size:12px;font-weight:550;color:var(--text);animation:msg-in .45s cubic-bezier(.2,.9,.25,1) both;transition:border-color .3s,color .3s,background .3s}.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip:nth-child(2){animation-delay:.05s}.chip:nth-child(3){animation-delay:.1s}.chip:nth-child(4){animation-delay:.15s}.chip:nth-child(n+5){animation-delay:.2s}
.chat-form{display:flex;align-items:center;gap:4px;margin:0 12px;padding:5px 5px 5px 14px;border-radius:30px;border:1px solid var(--border);background:var(--surface);transition:border-color .3s,box-shadow .3s}.chat-form:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}
.chat-input{flex:1;min-width:0;margin:0;padding:8px 0;border:0;background:none;font-size:13.5px;outline:none!important;box-shadow:none!important}
.chat-mic{border-radius:50%}.chat.listening .chat-mic{background:var(--accent);color:#fff;animation:ask-ping 1.4s infinite}
.chat-send{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:50%;background:var(--text);color:var(--bg);transition:transform .4s cubic-bezier(.2,.9,.25,1),background .3s}.chat-send:hover{background:var(--accent);transform:rotate(-12deg)}.chat-send .icon{width:16px;height:16px}
.chat-foot{margin:8px 0 10px;font-size:10px;text-align:center;color:var(--muted)}
@media(max-width:600px){.chat{left:14px;bottom:64px;height:min(540px,calc(100dvh - 150px))}.nav-up .chat{bottom:134px}}
.chat[hidden]{display:none}.chat:not(.open){pointer-events:none}
.msg.bot.voicing:after{content:'';display:block;width:34px;height:4px;margin-top:8px;border-radius:4px;background:linear-gradient(90deg,transparent,var(--accent),transparent) 0 0/200% 100%;opacity:.7;animation:voicing 1.1s linear infinite}@keyframes voicing{from{background-position:100% 0}to{background-position:-100% 0}}
/* Portfolio screenshot cards: the site's first screen in a browser frame; hovering glides down the whole page. */
.shot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 24px;text-align:left}
.shot{display:flex;flex-direction:column;gap:15px;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left}
.shot[hidden]{display:none}
.shot-frame{position:relative;display:block;border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--border);box-shadow:0 18px 34px -26px #0000004a;transition:transform .8s cubic-bezier(.2,.9,.25,1),box-shadow .8s cubic-bezier(.2,.9,.25,1),border-color .5s}
.shot-bar{display:flex;align-items:center;gap:5px;height:28px;padding:0 10px;background:var(--soft);border-bottom:1px solid var(--border)}
.shot-bar i{flex:none;width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--muted) 32%,transparent)}
.shot-bar i:first-child{background:color-mix(in srgb,var(--accent) 70%,transparent)}
.shot-bar span{flex:0 1 auto;min-width:0;margin:0 auto;transform:translateX(-12px);padding:3px 12px;border-radius:20px;background:var(--surface);font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot.rv{filter:none}
.shot-view{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--soft);container-type:size}
/* The hover scroll moves the image with transform (GPU), not object-position, so the page never repaints while it glides. */
.shot-view img{position:absolute;left:0;top:0;width:100%;height:auto;transform:translateY(0);transition:transform 1.1s cubic-bezier(.6,0,.2,1),opacity .4s}
.shot:not(.no-pan):hover .shot-view img,.shot:not(.no-pan):focus-visible .shot-view img{will-change:transform;transform:translateY(calc(-100% + 100cqh));transition:transform var(--pan) cubic-bezier(.45,.05,.55,.95) .12s}
.shot.no-pan .shot-view img{height:100%;object-fit:cover;object-position:top;transition:transform 1s cubic-bezier(.2,.9,.25,1),opacity .4s}
.shot.no-pan:hover .shot-view img{transform:scale(1.04)}
.shot:hover .shot-frame,.shot:focus-visible .shot-frame{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));box-shadow:0 34px 50px -28px #00000057}
.shot:focus-visible{outline:none}
.shot:focus-visible .shot-frame{outline:2px solid var(--accent);outline-offset:3px}
.shot.is-open .shot-view img{opacity:0;transition:none}
.shot-cap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 3px}
.shot-cap>span:first-child{min-width:0}
.shot-cap b{display:block;font-size:15px;font-weight:600;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-cap small{display:block;margin-top:3px;font-size:11px;color:var(--muted)}
.shot-go{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);color:var(--muted);transition:background .4s,color .4s,border-color .4s,transform .7s cubic-bezier(.2,.9,.25,1)}
.shot-go .icon{width:14px;height:14px}
.shot:hover .shot-go{background:var(--text);border-color:var(--text);color:var(--bg);transform:rotate(90deg)}
@media(max-width:850px){.shot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}}
@media(max-width:520px){.shot-grid{grid-template-columns:1fr;gap:28px}.shot-cap b{font-size:14px}}
/* Hub cards: three real screenshots fan up from the bottom edge on hover. */
.plat-peek{display:flex;gap:10px;bottom:-150px;height:150px;border-radius:0;overflow:visible;box-shadow:none;transform:translateY(20px)}
.plat-peek img{flex:1;min-width:0;height:100%;object-fit:cover;object-position:top;border-radius:10px 10px 0 0;border:1px solid var(--border);border-bottom:0;box-shadow:0 -10px 26px #00000026;transition:transform .9s cubic-bezier(.2,.9,.25,1)}
.plat-peek img:nth-child(1){transform:rotate(-4deg) translateY(16px)}
.plat-peek img:nth-child(3){transform:rotate(4deg) translateY(16px)}
.plat-card:hover .plat-peek{transform:translateY(-96px)}
.plat-card:hover .plat-peek img:nth-child(1){transform:rotate(-6deg) translate(-6px,10px)}
.plat-card:hover .plat-peek img:nth-child(3){transform:rotate(6deg) translate(6px,10px)}
.plat-card:last-child:nth-child(odd) .plat-peek{left:auto;width:min(420px,50%)}
/* Screenshot viewer: our own fancybox-style lightbox (always dark, so screenshots pop in either theme). */
html.lb-open{overflow:hidden}
.lb{--lb-ease:cubic-bezier(.2,.9,.25,1);position:fixed;inset:0;z-index:50;display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:#f3f2ed}
.lb[hidden]{display:none}
.lb-bg{position:absolute;inset:0;z-index:-1;background:#0e0f0dde;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .5s}
.lb.in .lb-bg{opacity:1}
.lb-top,.lb-thumbs,.lb-nav{opacity:0;transition:opacity .45s,transform .7s var(--lb-ease)}
.lb-top{display:flex;align-items:center;gap:16px;padding:16px 20px;transform:translateY(-14px)}
.lb-thumbs{transform:translateY(14px)}
.lb.in .lb-top,.lb.in .lb-thumbs,.lb.in .lb-nav{opacity:1;transform:none;transition-delay:.12s}
.lb-count{flex:1 0 0;font-family:monospace;font-size:12px;letter-spacing:.08em;color:#a8aaa2}
.lb-count b{color:#fff;font-weight:600}
.lb-title{flex:0 1 auto;min-width:0;text-align:center}
.lb-title strong{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-title small{display:block;margin-top:2px;font-size:11px;color:#a8aaa2}
.lb-tools{flex:1 0 0;display:flex;justify-content:flex-end;gap:6px}
.lb-btn{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid #ffffff1f;background:#ffffff12;color:#fff;transition:background .3s,border-color .3s,transform .6s var(--lb-ease),opacity .45s}
.lb-btn:hover{background:#ffffff26;border-color:#ffffff33}
.lb-btn:active{transform:scale(.92)}
.lb-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lb-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb-play[aria-pressed=true]{background:var(--accent);border-color:var(--accent)}
.lb-play[aria-pressed=false] svg{fill:currentColor;stroke-width:1.5;transform:translateX(1px)}
.lb-grid[aria-pressed=true]{background:#ffffff26}
.lb-stage{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;gap:22px;padding:0 20px;touch-action:pan-y}
.lb-nav{width:50px;height:50px}
.lb-nav svg{width:20px;height:20px}
.lb-prev{transform:translateX(-14px)}
.lb-next{transform:translateX(14px)}
.lb-frame{position:relative;display:flex;flex-direction:column;width:min(var(--fw,1080px),100%);height:var(--fh,100%);max-height:100%;margin:0;border-radius:14px;overflow:hidden;background:#f6f5f2;color:#20211f;box-shadow:0 50px 90px -30px #000c,0 0 0 1px #ffffff1c;transform-origin:0 0}
.lb-frame.sized{transition:width .5s var(--lb-ease),height .5s var(--lb-ease)}
.lb-bar{flex:none;display:flex;align-items:center;gap:10px;height:38px;padding:0 8px 0 14px;background:#ecebe6;border-bottom:1px solid #dcdbd5}
.lb-dots{display:flex;gap:6px;flex:1 0 0}
.lb-dots i{width:10px;height:10px;border-radius:50%;background:#d0cfc8}
.lb-dots i:first-child{background:#ff6159}.lb-dots i:nth-child(2){background:#ffbd2e}.lb-dots i:nth-child(3){background:#28c941}
.lb-url{flex:0 1 auto;min-width:0;max-width:52%;padding:4px 14px;border-radius:8px;background:#fff;font-size:11.5px;color:#737570;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-visit{flex:1 0 0;display:flex;justify-content:flex-end}
.lb-visit>span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;background:#20211f;color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap;transition:background .3s}
.lb-visit:hover>span{background:var(--accent)}
.lb-visit svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lb-visit.none{pointer-events:none}
.lb-visit.none>span{background:none;color:#737570;font-weight:500}
.lb-visit.none svg{display:none}
.lb-view{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;outline:none;touch-action:pan-y}
.lb-view::-webkit-scrollbar{display:none}
.lb-view img{display:block;flex:none;width:100%;height:auto;margin-block:auto;user-select:none;-webkit-user-drag:none}
.lb-load{position:absolute;left:0;right:0;top:38px;height:2px;overflow:hidden;opacity:0;transition:opacity .3s;z-index:1}
.lb-load:before{content:'';position:absolute;inset:0;width:40%;background:var(--accent);animation:lb-load 1s cubic-bezier(.4,0,.2,1) infinite}
.lb-frame.loading .lb-load{opacity:1}
@keyframes lb-load{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.lb-prog{position:absolute;right:5px;top:46px;bottom:8px;width:4px;border-radius:4px;background:#00000012;pointer-events:none;transition:opacity .4s}
.lb-prog i{display:block;width:100%;height:100%;border-radius:4px;background:color-mix(in srgb,var(--accent) 85%,#000);transform-origin:top;transform:scaleY(var(--p,0))}
.lb-frame.short .lb-prog{opacity:0}
.lb-thumbs{display:flex;gap:8px;overflow-x:auto;padding:14px 20px 18px;scrollbar-width:none;justify-content:safe center}
.lb-thumbs::-webkit-scrollbar{display:none}
.lb.no-thumbs .lb-thumbs{display:none}
.lb.no-thumbs .lb-stage{padding-bottom:20px}
.lb-thumb{flex:none;width:76px;height:56px;padding:0;border-radius:9px;overflow:hidden;border:2px solid transparent;background:#ffffff14;opacity:.42;transition:opacity .35s,border-color .35s,transform .6s var(--lb-ease)}
.lb-thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.lb-thumb:hover{opacity:.8}
.lb-thumb[aria-current=true]{opacity:1;border-color:var(--accent);transform:translateY(-3px)}
.lb-thumb:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:700px){
  .lb-top{padding:12px 12px 10px;gap:10px;flex-wrap:wrap}
  .lb-count{order:1;flex:1 0 auto}.lb-tools{order:2;flex:0 0 auto}.lb-title{order:3;flex:1 0 100%;text-align:left}
  .lb-btn{width:36px;height:36px}
  .lb-full{display:none}
  .lb-stage{padding:0 10px}
  .lb-nav{position:absolute;bottom:14px;z-index:2;width:42px;height:42px;background:#0e0f0dcc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .lb-prev{left:18px}.lb-next{right:18px}
  .lb-url{display:none}
  .lb-thumb{width:56px;height:42px}
  .lb-thumbs{padding:10px 12px 14px}
}
@media(prefers-reduced-motion:reduce){.shot-view img,.shot-frame,.lb *{transition:none!important}}
/* Performance: pulses grow a ring with transform + opacity (GPU) instead of animating box-shadow (a repaint every frame). */
.ask-btn .ask-dot,.now-badge i,.xp-current .status-dot{position:relative;animation:none;box-shadow:none}
.ask-dot:after,.now-badge i:after,.xp-current .status-dot:after{content:'';position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:0;pointer-events:none;will-change:transform,opacity}
.ask-dot:after{color:color-mix(in srgb,var(--accent) 50%,transparent);animation:ring-ping 2.4s cubic-bezier(.2,.8,.2,1) infinite}
.now-badge i:after,.xp-current .status-dot:after{color:#518166aa;animation:ring-ping-sm 2s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ring-ping{0%{transform:scale(1);opacity:1}70%,100%{transform:scale(3);opacity:0}}
@keyframes ring-ping-sm{0%{transform:scale(1);opacity:1}100%{transform:scale(3.3);opacity:0}}
.offscreen .strip-track,.offscreen .logo-track,.offscreen .reviews-track{animation-play-state:paused}
.hc-track{will-change:transform}
.filters+.shot-grid{margin-top:44px}
/* Real-work mockups (home): browser window, laptop and phone frames around site screenshots. Plain images, so they're light to scroll and animate. */
.wm-browser{display:flex;flex-direction:column;border-radius:10px;overflow:hidden;background:#fff;border:1px solid #0000000f;box-shadow:0 16px 30px -14px #00000055}
.wm-bar{flex:none;display:flex;align-items:center;gap:4px;height:22px;padding:0 9px;background:#ecebe6;border-bottom:1px solid #dcdbd5}
.wm-bar i{flex:none;width:6px;height:6px;border-radius:50%;background:#d0cfc8}
.wm-bar i:first-child{background:#ff6159}.wm-bar i:nth-child(2){background:#ffbd2e}.wm-bar i:nth-child(3){background:#28c941}
.wm-bar span{min-width:0;max-width:62%;margin:0 auto;transform:translateX(-12px);padding:2px 10px;border-radius:5px;background:#fff;font-size:8px;line-height:1.4;color:#737570;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-screen{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#f3f2ee}
.wm-screen img,.wm-screen video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.wm-phone{position:relative;display:block;aspect-ratio:300/650;border:4px solid #1d1e1b;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 18px 30px -12px #00000070}
.wm-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.wm-notch{position:absolute;top:5px;left:50%;z-index:1;width:34%;height:8px;translate:-50% 0;border-radius:8px;background:#1d1e1b}
.wm-laptop{display:block}
.wm-lid{position:relative;display:block;aspect-ratio:16/10;border:4px solid #1d1e1b;border-bottom-width:6px;border-radius:8px 8px 0 0;overflow:hidden;background:#000}
.wm-lid img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.wm-laptop>i{display:block;height:7px;margin:0 -8%;border-radius:0 0 9px 9px;background:linear-gradient(#e4e3de,#9c9b96);box-shadow:0 10px 16px -6px #00000045}
/* hero tiles */
.hc-screen{height:auto;background:none;border-radius:12px}
.hc-screen .wm-browser{border-radius:12px;box-shadow:none}
.hc-laptop .wm-laptop{position:absolute;left:9%;right:9%;top:50%;translate:0 -50%}
.hc-phone .wm-phone{position:absolute;left:50%;top:50%;height:84%;translate:-50% -50%}
/* strip */
.strip-track>a{position:relative;display:block}
/* "Small details" cards: browser window plus the phone version, lifting apart on hover */
.feat-art{padding:0}
.feat-art .wm-browser{position:absolute;left:7%;top:11%;width:75%;transition:transform .8s cubic-bezier(.2,.9,.25,1),box-shadow .8s}
.feat-art .wm-phone{position:absolute;right:6%;bottom:-7%;width:20%;transition:transform .9s cubic-bezier(.2,.9,.25,1)}
.project-card:hover .feat-art .wm-browser{transform:translateY(-8px) scale(1.02);box-shadow:0 28px 44px -16px #00000060}
.project-card:hover .feat-art .wm-phone{transform:translateY(-16px) rotate(-3deg)}
@media(max-width:600px){.wm-bar{height:18px}.wm-bar span{font-size:7px}.feat-art .wm-browser{width:78%}}
/* Strip hover: the card lifts while its neighbours step back, the full page scrolls inside the frame, and an info bar slides up. */
.strip-track>a{transition:opacity .5s,transform .8s cubic-bezier(.2,.9,.25,1)}
.strip-track:hover>a:not(:hover){opacity:.45}
.strip-track .wm-browser{box-shadow:0 2px 3px #00000010;transition:box-shadow .8s cubic-bezier(.2,.9,.25,1)}
.strip-track>a:hover .wm-browser{box-shadow:0 30px 44px -18px #000000a0,0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)}
.strip-track .wm-screen{container-type:size}
.strip-track .wm-screen img{bottom:auto;height:auto;object-fit:fill;transform:translateY(0);transition:transform 1s cubic-bezier(.6,0,.2,1)}
.strip-track>a:hover .wm-screen img{will-change:transform;transform:translateY(calc(-100% + 100cqh));transition:transform var(--pan) cubic-bezier(.45,.05,.55,.95) .25s}
.strip-info{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:46px 14px 13px;background:linear-gradient(transparent,#0d0e0ce8 70%);color:#fff;text-align:left;opacity:0;transform:translateY(12px);transition:opacity .45s,transform .7s cubic-bezier(.2,.9,.25,1);pointer-events:none}
.strip-info>span:first-child{min-width:0}
.strip-info b{display:block;font-size:15px;font-weight:650;letter-spacing:-.02em}
.strip-info small{display:block;margin-top:2px;font-size:10.5px;color:#ffffffb3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip-go{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:20px;background:var(--accent);color:#fff;font-size:11px;font-weight:650;transform:translateX(8px);opacity:0;transition:transform .7s cubic-bezier(.2,.9,.25,1) .08s,opacity .45s .08s}
.strip-go .arrow{width:13px;height:13px}
.strip-track>a:hover .strip-info,.strip-track>a:focus-visible .strip-info{opacity:1;transform:none}
.strip-track>a:hover .strip-go,.strip-track>a:focus-visible .strip-go{opacity:1;transform:none}
/* Platform pages: platform switcher as one segmented control, categories as a single scrollable rail (never two lines). */
.plat-tabs{display:flex;flex-wrap:nowrap;width:fit-content;max-width:100%;margin:34px auto 0;padding:5px;gap:2px;border:1px solid var(--border);border-radius:40px;background:color-mix(in srgb,var(--surface) 70%,transparent);overflow-x:auto;scrollbar-width:none}
.plat-tabs::-webkit-scrollbar{display:none}
.plat-tabs a{flex:none;padding:9px 15px;border:0;white-space:nowrap}
.plat-tabs a:hover{border:0;background:var(--soft)}
.plat-tabs a[aria-current=page]{box-shadow:0 6px 16px -8px #00000060}
.portfolio-work .filters{flex-wrap:nowrap;justify-content:safe center;gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(50% - min(620px,50vw - 20px));padding:4px 24px;scroll-padding-inline:24px}
.portfolio-work .filters::-webkit-scrollbar{display:none}
.portfolio-work .filters.overflowing{-webkit-mask:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.portfolio-work .filters button{flex:none;display:inline-flex;align-items:center;gap:8px;padding:8px 8px 8px 15px;border-color:transparent;background:transparent;color:var(--muted);font-size:12.5px;font-weight:550;white-space:nowrap;transition:color .35s,background .35s,border-color .35s}
.portfolio-work .filters button:hover{color:var(--text);border-color:var(--border)}
.portfolio-work .filters button span{display:grid;place-items:center;min-width:24px;height:20px;margin:0;padding:0 6px;border-radius:20px;background:var(--soft);font-size:9.5px;opacity:1;color:var(--muted);transition:background .35s,color .35s}
.portfolio-work .filters button.active{background:var(--text);border-color:var(--text);color:var(--bg)}
.portfolio-work .filters button.active span{background:color-mix(in srgb,var(--bg) 18%,transparent);color:var(--bg)}
@media(max-width:600px){.portfolio-work .filters{padding-inline:16px}.portfolio-work .filters button{font-size:11.5px;padding:7px 7px 7px 13px}}
/* Hero mockup columns: the page guide lines stay hidden behind them (they show again wherever the columns aren't). */
.hero .hc-col{background:var(--bg)}
/* Tablets have room beside the heading too, so the columns show there in a slimmer size. */
@media(min-width:701px) and (max-width:1180px){
  .hero .hero-cols{display:flex;--tw:118;padding:0 14px}
  .hero{padding-inline:150px}
  .hero-note{display:none}
}
@media(min-width:701px) and (max-width:900px){.hero .hero-cols{--tw:96;padding:0 10px}.hero{padding-inline:120px}.hc-tile{border-radius:14px}}
.portfolio-work .filters{gap:3px}
.portfolio-work .filters button{gap:7px;padding:8px 7px 8px 13px;font-size:12px}
@media(max-width:1180px){.hc-tile .wm-phone{border-width:3px;border-radius:13px}.hc-tile .wm-notch{height:5px;top:3px}.hc-tile .wm-lid{border-width:3px;border-bottom-width:4px;border-radius:6px 6px 0 0}}
.portfolio-work .filters{margin-inline:calc(50% - min(670px,50vw - 12px));padding-inline:16px;scroll-padding-inline:16px}
/* Hero: with the mockup columns on screen, the page guide lines stay hidden across the whole hero (they show on phones, where the columns don't). */
@media(min-width:701px){.hero{background:var(--bg)}}
/* Platform pages: one Filter button; categories live in a sidebar that slides in from the left. */
.cat-bar{display:flex;align-items:center;justify-content:center;gap:8px}
.cat-open{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border:1px solid var(--border);border-radius:40px;background:var(--surface);color:var(--text);font-size:13px;font-weight:600;transition:border-color .35s,box-shadow .6s cubic-bezier(.2,.9,.25,1)}
.cat-open:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));box-shadow:0 16px 30px -20px #00000080}
.cat-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--text);color:var(--bg);transition:background .4s,transform .6s cubic-bezier(.2,.9,.25,1)}
.cat-ico .icon{width:15px;height:15px}
.cat-open:hover .cat-ico{background:var(--accent);color:#fff;transform:rotate(-10deg)}
.cat-open>i{width:1px;height:16px;background:var(--border)}
.cat-current{font-weight:500;color:var(--muted);max-width:44vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-open.filtered .cat-current{color:var(--accent);font-weight:600}
.cat-open>.icon-chevron-down{width:15px;height:15px;color:var(--muted);transform:rotate(-90deg);transition:transform .5s cubic-bezier(.2,.9,.25,1)}
.cat-open[aria-expanded=true]>.icon-chevron-down{transform:rotate(90deg)}
.cat-clear{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted);transition:color .3s,border-color .3s}
.cat-clear:hover{color:var(--accent);border-color:var(--accent)}
.cat-clear .icon{width:14px;height:14px}
.cat-clear[hidden]{display:none}
.cat-bar+.shot-grid{margin-top:40px}
html.cat-lock{overflow:hidden}
.cat-panel{position:fixed;inset:0;z-index:45}
.cat-panel[hidden]{display:none}
.cat-scrim{position:absolute;inset:0;background:#0e0f0d73;opacity:0;transition:opacity .5s}
.cat-panel.open .cat-scrim{opacity:1}
.cat-sheet{position:absolute;left:12px;top:12px;bottom:12px;display:flex;flex-direction:column;width:min(390px,calc(100vw - 24px));border-radius:24px;background:var(--bg);border:1px solid var(--border);box-shadow:0 40px 80px -24px #000000a0;overflow:hidden;transform:translateX(calc(-100% - 30px));transition:transform .62s cubic-bezier(.2,.9,.25,1)}
.cat-panel.open .cat-sheet{transform:none}
.cat-sheet header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:24px 22px 18px;border-bottom:1px solid var(--border);text-align:left}
.cat-sheet h2{margin-top:4px;font-size:25px;letter-spacing:-.045em;line-height:1.1}
.cat-x{flex:none;display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:transform .6s cubic-bezier(.2,.9,.25,1),border-color .3s}
.cat-x:hover{transform:rotate(90deg);border-color:var(--accent)}
.cat-x .icon{width:15px;height:15px}
.cat-list{flex:1;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;gap:3px;padding:12px 10px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.cat-list button{display:flex;align-items:center;gap:14px;width:100%;padding:9px 12px 9px 9px;border:1px solid transparent;border-radius:16px;background:none;color:var(--text);font-size:14px;font-weight:550;text-align:left;transition:background .3s,border-color .3s}
.cat-list button:hover{background:var(--surface);border-color:var(--border)}
.cat-list button.active{background:var(--text);border-color:var(--text);color:var(--bg)}
.cat-list button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cat-list button span{margin:0;opacity:1}
.cat-thumb{position:relative;flex:none;width:58px;height:44px}
.cat-thumb img{position:absolute;width:46px;height:35px;border-radius:7px;object-fit:cover;object-position:top;border:1px solid var(--border);box-shadow:0 4px 10px -4px #00000040;transition:transform .5s cubic-bezier(.2,.9,.25,1)}
.cat-thumb img:first-child{left:0;top:0;z-index:1}
.cat-thumb img:nth-child(2){right:0;bottom:0;transform:rotate(6deg)}
.cat-list button:hover .cat-thumb img:first-child{transform:translate(-2px,-2px) rotate(-4deg)}
.cat-list button:hover .cat-thumb img:nth-child(2){transform:translate(2px,2px) rotate(10deg)}
.cat-list .cat-name{flex:1;min-width:0;font-family:inherit;font-size:14px}
.cat-list .cat-n{flex:none;padding:3px 8px;border-radius:20px;background:var(--soft);color:var(--muted);font-family:monospace;font-size:10.5px}
.cat-list button.active .cat-n{background:color-mix(in srgb,var(--bg) 18%,transparent);color:var(--bg)}
.cat-panel.open .cat-list button{animation:cat-in .6s cubic-bezier(.2,.9,.25,1) backwards;animation-delay:calc(var(--i) * 40ms + 140ms)}
@keyframes cat-in{from{opacity:0;transform:translateX(-16px)}}
.cat-foot{display:flex;align-items:center;justify-content:space-between;padding:15px 22px;border-top:1px solid var(--border);font-size:12.5px;color:var(--muted)}
.cat-foot a{display:inline-flex;align-items:center;gap:7px;color:var(--text);font-weight:600}
.cat-foot .icon{width:14px;height:14px}
@media(prefers-reduced-motion:reduce){.cat-sheet,.cat-scrim{transition:none}.cat-panel.open .cat-list button{animation:none}}
/* Cursor shapes: every pointer shape is drawn in the accent colour with a light outline; the active one (data-shape) pops in.
   Each shape lines its hotspot up with the real pointer position: arrow tip, fingertip, or the centre for the others. */
.cur-a svg{position:absolute;left:0;top:0;opacity:0;scale:.55;transition:opacity .16s,scale .38s cubic-bezier(.2,1.4,.35,1)}
.cur-a .s-arrow{margin:-2.3px 0 0 -3.7px}
.cur-a .s-pointer{width:24px;height:24px;margin:-1.4px 0 0 -11.3px;transform-origin:11.3px 1.4px}
.cur-a .s-grab,.cur-a .s-grabbing{width:24px;height:24px;margin:-10px 0 0 -12px;transform-origin:12px 10px}
.cur-a .s-zoom{width:26px;height:26px;margin:-11.3px 0 0 -11.3px;transform-origin:11.3px 11.3px}
.cur-a .s-close,.cur-a .s-cross{width:24px;height:24px;margin:-12px 0 0 -12px;transform-origin:12px 12px}
.cur-a .s-text{width:22px;height:24px;margin:-12px 0 0 -11px;transform-origin:11px 12px}
.cur[data-shape=arrow] .s-arrow,.cur[data-shape=pointer] .s-pointer,.cur[data-shape=grab] .s-grab,.cur[data-shape=zoom] .s-zoom,.cur[data-shape=close] .s-close,.cur[data-shape=text] .s-text,.cur[data-shape=cross] .s-cross{opacity:1;scale:1}
.cur.down[data-shape=grab] .s-grab{opacity:0;scale:.8}
.cur.down[data-shape=grab] .s-grabbing{opacity:1;scale:1}
.cur.down[data-shape=arrow] .s-arrow,.cur.down[data-shape=pointer] .s-pointer,.cur.down[data-shape=zoom] .s-zoom,.cur.down[data-shape=close] .s-close,.cur.down[data-shape=cross] .s-cross{scale:.82}
.cur-a .s-zoom path:first-child{fill:none;stroke:var(--accent);stroke-width:3.4;stroke-linecap:round}
.cur-a .s-zoom,.cur-a .s-close{overflow:visible}
.cur-a .w{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.cur-a .s-text path{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;paint-order:stroke;filter:drop-shadow(0 0 1.2px #fff) drop-shadow(0 2px 3px #00000040)}
.cur-a .s-cross circle:first-child{fill:color-mix(in srgb,var(--accent) 22%,transparent)}
.cur-a .s-cross path{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round}
.cur-a .s-cross .dot{fill:var(--accent);stroke:none}
.cur.down .cur-a svg{transition:opacity .12s,scale .2s cubic-bezier(.2,.9,.25,1)}
html[data-theme=dark] .cur-a .w{stroke:#1b1c19}
html[data-theme=dark] .cur-a .s-text path{filter:drop-shadow(0 0 1.2px #1b1c19) drop-shadow(0 2px 3px #00000060)}
/* the old "press" shrink applied to the single arrow; shapes handle it above */
.cur.down .cur-a svg.s-grab{scale:.8}
/* Hero columns can be dragged up and down (see app.js); no text selection or image dragging gets in the way. */
.hc-col{touch-action:none;user-select:none;-webkit-user-select:none}
.hc-col img{-webkit-user-drag:none}
/* Partner rows: an accent line draws along the bottom, the monogram gets a ring and the name eases over; the other rows step back. */
.prev:before{display:none}
.prev:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.9,.25,1)}
.prev:not(.rv){transition:opacity .45s}
.prev-list:hover .prev:not(:hover){opacity:.42}
.prev:hover:after{transform:scaleX(1)}
.prev:hover .prev-name{color:var(--text);transform:translateX(5px)}
.prev:hover .prev-num{color:var(--accent)}
.prev:hover .prev-mono{background:var(--soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);transform:none}
.prev-role{transition:color .4s}
.prev:hover .prev-role{color:var(--text)}
.prev:after{height:2px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 30%,transparent))}
/* Partner logos: colour icon tiles in the list, one-colour marks (tinted with the text colour) in the moving band. */
.prev-mono.has-logo{overflow:hidden;padding:0;background:none;box-shadow:0 0 0 1px var(--border)}
.prev-mono.has-logo img{display:block;width:100%;height:100%;object-fit:cover}
.prev:hover .prev-mono.has-logo{background:none;box-shadow:0 0 0 1.5px var(--accent);transform:rotate(-6deg)}
.company-band .co{display:inline-flex;align-items:center;gap:10px}
.co-mark{flex:none;width:22px;height:22px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;opacity:.85;transition:transform .5s cubic-bezier(.2,.9,.25,1)}
.company-band .co:hover .co-mark{transform:rotate(-8deg) scale(1.08)}
/* ---- First-visit loader: the wireframe draws itself, fills in, then the whole sheet lifts like a curtain. ---- */
.loader,.pt{display:none}
html.is-loading,html.pt-in{overflow:hidden}
html.is-loading .loader{display:grid}
.loader{position:fixed;inset:0;z-index:100;place-items:center;background:var(--bg);color:var(--text);clip-path:inset(0 0 0 0);transition:clip-path 1.05s cubic-bezier(.76,0,.24,1)}
.loader.leave{clip-path:inset(0 0 100% 0)}
.ld-stage{display:grid;justify-items:center;gap:26px;transition:transform 1.05s cubic-bezier(.76,0,.24,1),opacity .55s}
.loader.leave .ld-stage{transform:translateY(-70px);opacity:0}
.ld-sketch{width:min(300px,68vw);height:auto;overflow:visible}
.ld-sketch .d{fill:var(--surface);fill-opacity:0;stroke:var(--text);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;animation:ld-draw .6s cubic-bezier(.65,0,.35,1) forwards;animation-delay:calc(var(--i) * 55ms + 80ms);transition:fill-opacity .7s cubic-bezier(.2,.9,.25,1),stroke .7s}
@keyframes ld-draw{to{stroke-dashoffset:0}}
.ld-sketch.built .d{fill-opacity:1;stroke:color-mix(in srgb,var(--text) 14%,transparent);transition-delay:calc(var(--i) * 45ms)}
.ld-sketch .f-soft{fill:var(--soft)}.ld-sketch .f-text{fill:var(--text)}.ld-sketch .f-muted{fill:var(--muted)}.ld-sketch .f-accent{fill:var(--accent)}
.ld-sketch .f-tint{fill:color-mix(in srgb,var(--accent) 22%,var(--surface))}
.ld-sketch .dot{fill:var(--muted)}
.ld-sketch.built .dot:nth-of-type(1){fill:#ff6159}.ld-sketch.built .dot:nth-of-type(2){fill:#ffbd2e}.ld-sketch.built .dot:nth-of-type(3){fill:#28c941}
.ld-word{position:relative;width:200px;height:34px;margin:0;font-family:'Nothing You Could Do','Segoe Print',cursive;font-size:21px;color:var(--accent);letter-spacing:-.04em}
.ld-word span{position:absolute;inset:0;text-align:center;opacity:0;transform:translateY(12px);transition:opacity .45s,transform .7s cubic-bezier(.2,.9,.25,1)}
.ld-word[data-step="0"] span:nth-child(1),.ld-word:not([data-step]) span:nth-child(1),.ld-word[data-step="1"] span:nth-child(2),.ld-word[data-step="2"] span:nth-child(3){opacity:1;transform:none}
.ld-word[data-step="1"] span:nth-child(1),.ld-word[data-step="2"] span:nth-child(2){transform:translateY(-12px)}
.ld-foot{position:absolute;left:clamp(16px,4vw,40px);right:clamp(16px,4vw,40px);bottom:clamp(18px,4vh,36px);display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.ld-count{font-size:clamp(56px,9vw,120px);font-weight:600;letter-spacing:-.07em;line-height:.78;font-variant-numeric:tabular-nums}
.ld-name{font-family:monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right;line-height:1.7}
.ld-bar{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0))}
/* ---- Page transition: a panel naming the destination covers the page, the next page opens under it and it lifts away. ---- */
.pt{position:fixed;inset:0;z-index:99;place-items:center;background:var(--text);color:var(--bg);clip-path:inset(100% 0 0 0);transition:clip-path .72s cubic-bezier(.76,0,.24,1)}
.pt.pt-show,html.pt-in .pt{display:grid}
.pt.pt-cover,html.pt-in .pt{clip-path:inset(0 0 0 0)}
html.pt-in .pt.pt-leave{clip-path:inset(0 0 100% 0);transition:clip-path .9s cubic-bezier(.76,0,.24,1)}
.pt-box{display:grid;justify-items:center;gap:6px;padding:0 20px;text-align:center;transition:transform .8s cubic-bezier(.76,0,.24,1),opacity .5s}
.pt.pt-show:not(.pt-cover) .pt-box{transform:translateY(60px);opacity:0}
.pt.pt-cover .pt-box{transition-delay:.12s}
.pt.pt-leave .pt-box{transform:translateY(-70px);opacity:0}
.pt-kicker{font-family:'Nothing You Could Do','Segoe Print',cursive;font-size:21px;color:var(--accent);letter-spacing:-.04em}
.pt-title{display:flex;align-items:center;gap:.2em;font-size:clamp(44px,8.5vw,112px);font-weight:600;letter-spacing:-.065em;line-height:1.05}
.pt-mark{display:inline-grid;color:var(--accent)}
.pt-mark .icon{width:.62em;height:.62em;animation:pt-spin 1.8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes pt-spin{to{transform:rotate(180deg)}}
.pt-bar{position:absolute;left:0;bottom:0;width:100%;height:2px;overflow:hidden}
.pt-bar:before{content:'';position:absolute;inset:0;width:35%;background:var(--accent);animation:pt-load 1.1s cubic-bezier(.65,0,.35,1) infinite}
@keyframes pt-load{from{transform:translateX(-100%)}to{transform:translateX(290%)}}
@media(prefers-reduced-motion:reduce){.loader,.pt,.pt-box,.ld-stage,.ld-word span{transition:none!important}.ld-sketch .d{animation:none;stroke-dashoffset:0}.pt-mark .icon,.pt-bar:before{animation:none}}
.ld-sketch .dot{opacity:0;animation:ld-dot .5s cubic-bezier(.2,.9,.25,1) .55s forwards}@keyframes ld-dot{to{opacity:1}}
/* Simple pages (WordPress: privacy policy, posts): readable text column. */
.page-content .prose{max-width:720px;margin:0 auto;text-align:left;font-size:16px;line-height:1.8}
.page-content .prose>*+*{margin-top:1.1em}
.page-content .prose h2{font-size:26px;letter-spacing:-.04em;line-height:1.2;margin-top:1.8em}
.page-content .prose h3{font-size:20px;letter-spacing:-.03em;margin-top:1.5em}
.page-content .prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.page-content .prose ul,.page-content .prose ol{padding-left:1.3em}
.page-content .prose img{max-width:100%;height:auto;border-radius:12px}
/* Hero centre: a live status bar (availability, Karachi time, rolling platform), two actions side by side and a short proof line. */
.hero-status{display:inline-flex;align-items:center;padding:4px;border:1px solid var(--border);border-radius:40px;background:color-mix(in srgb,var(--surface) 85%,transparent);font-size:11.5px;font-weight:550;box-shadow:0 12px 30px -20px #00000040}
.hm-item{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;white-space:nowrap;color:var(--muted)}
.hm-item b{color:var(--text);font-weight:650;font-variant-numeric:tabular-nums}
.hm-status{gap:8px;padding:6px 13px 6px 11px;border-radius:30px;background:var(--text);color:var(--bg)}
.hm-status i{position:relative;width:7px;height:7px;border-radius:50%;background:#4ade80}
.hm-status i:after{content:'';position:absolute;inset:0;border-radius:50%;background:#4ade80;animation:ring-ping 2.4s cubic-bezier(.2,.8,.2,1) infinite}
.hm-sep{width:1px;height:14px;background:var(--border)}
.hm-time{padding-right:10px}
.hm-words{position:relative;display:inline-block;height:1.35em;overflow:hidden;vertical-align:bottom;transition:width .55s cubic-bezier(.2,.9,.25,1)}
.hm-words b{position:absolute;left:0;top:0;white-space:nowrap;color:var(--accent);transform:translateY(105%);opacity:0;transition:transform .6s cubic-bezier(.2,.9,.25,1),opacity .35s}
.hm-words b.on{position:relative;transform:none;opacity:1}
.hm-words b.out{transform:translateY(-105%);opacity:0}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px}
.hero-ghost{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:1px solid var(--border);border-radius:40px;background:color-mix(in srgb,var(--surface) 60%,transparent);font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.5;color:var(--text);transition:border-color .4s,background .4s}
.hero-ghost .icon{width:15px;height:15px;transition:transform .7s cubic-bezier(.2,.9,.25,1)}
.hero-ghost:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));background:var(--surface)}
.hero-ghost:hover .icon{transform:translateY(4px)}
.hero>p.hero-proof{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 14px;margin-top:24px;font-size:12px;line-height:1.4;color:var(--muted)}
.hero-proof span{display:inline-flex;align-items:center;gap:5px}
.hero-proof span+span:before{content:'';width:4px;height:4px;margin-right:9px;border-radius:50%;background:color-mix(in srgb,var(--muted) 45%,transparent)}
.hero-proof b{color:var(--text);font-weight:650}
@media(max-width:600px){
  .hero-status{font-size:10.5px}.hm-sep-2,.hm-rotate{display:none}.hm-item{padding:5px 10px}
  .hero-actions{flex-direction:column;gap:10px;margin-top:24px}
  .hero>p.hero-proof{font-size:11px;max-width:none;gap:6px 10px}
  .hero-proof span+span:before{margin-right:5px}
}
/* Hero as a design file: the heading is "selected" (accent frame, corner handles, frame name and live size),
   and collaborators' cursors (Client, Wahab) move around and leave comments. */
.hero-title .sel{position:absolute;inset:-16px -24px -18px;z-index:2;pointer-events:none;border:1.5px solid var(--accent);border-radius:2px;clip-path:inset(0 100% 100% 0);transition:clip-path 1.2s cubic-bezier(.65,0,.35,1) .35s}
.hero-title .sel.on{clip-path:inset(-40px -60px -40px -60px)}
.sel .sh{position:absolute;width:9px;height:9px;background:var(--bg);border:1.5px solid var(--accent);border-radius:2px;transform:scale(0);transition:transform .5s cubic-bezier(.2,1.4,.35,1) 1.2s}
.sel.on .sh{transform:scale(1)}
.sel .tl{left:-5px;top:-5px}.sel .tr{right:-5px;top:-5px}.sel .bl{left:-5px;bottom:-5px}.sel .br{right:-5px;bottom:-5px}
.sel-name{position:absolute;left:-2px;bottom:calc(100% + 8px);display:inline-flex;align-items:center;gap:7px;padding:4px 9px 4px 8px;border-radius:5px;background:var(--accent);color:#fff;font-size:11px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .5s 1.35s,transform .7s cubic-bezier(.2,.9,.25,1) 1.35s}
.sel-name i{position:relative;width:6px;height:6px;border-radius:50%;background:#bbf7d0}
.sel-name i:after{content:'';position:absolute;inset:0;border-radius:50%;background:#bbf7d0;animation:ring-ping 2.4s cubic-bezier(.2,.8,.2,1) infinite}
.sel-size{position:absolute;left:50%;top:calc(100% + 9px);padding:3px 7px;border-radius:5px;background:var(--accent);color:#fff;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;transform:translate(-50%,-6px);transition:opacity .5s 1.5s,transform .7s cubic-bezier(.2,.9,.25,1) 1.5s}
.sel-size b{font-weight:700}
.sel.on .sel-name,.sel.on .sel-size{opacity:1;transform:translate(0,0)}
.sel.on .sel-size{transform:translate(-50%,0)}
html[data-theme=dark] .sel-name,html[data-theme=dark] .sel-size{color:#1b1c19}
/* collaborators */
.ghosts{position:absolute;inset:0;z-index:4;pointer-events:none}
.ghost{position:absolute;left:0;top:0;opacity:0;transition:opacity .45s;--g:#7c6cf0}
.ghost.on{opacity:1}
.g-wahab{--g:#18a46b}
.ghost svg{display:block;width:20px;height:20px;margin:-2px 0 0 -3px;fill:var(--g);stroke:#fff;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 2px 4px #00000040);transition:scale .18s}
.ghost.click svg{scale:.8}
.g-tag{position:absolute;left:14px;top:17px;padding:3px 8px;border-radius:6px;background:var(--g);color:#fff;font-size:11px;font-weight:650;white-space:nowrap;box-shadow:0 6px 14px color-mix(in srgb,var(--g) 35%,transparent)}
.g-tag span{font-weight:500;opacity:.8}
.g-bubble{position:absolute;left:14px;top:44px;max-width:220px;padding:9px 12px;border-radius:4px 14px 14px 14px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:12.5px;font-weight:500;line-height:1.4;text-align:left;white-space:nowrap;box-shadow:0 14px 30px -12px #00000045;opacity:0;transform:translateY(8px) scale(.94);transform-origin:0 0;transition:opacity .35s,transform .55s cubic-bezier(.2,1.2,.35,1)}
.g-bubble.on{opacity:1;transform:none}
.g-bubble:before{content:'';display:inline-block;width:6px;height:6px;margin:0 7px 1px 0;border-radius:50%;background:var(--g)}
@media(max-width:899px){.ghosts{display:none}}
@media(max-width:600px){.hero-title .sel{inset:-12px -10px -14px}.sel-name{font-size:10px}.sel-size{font-size:9px}}
@media(prefers-reduced-motion:reduce){.hero-title .sel,.sel .sh,.sel-name,.sel-size{transition:none}}
/* Room around the selected heading: frame label above, size tag below, note clear of the frame. */
.hero-signature{margin-bottom:40px}
.hero-title{margin-bottom:26px}
.hero-note{left:calc(100% + 52px)}
@media(max-width:600px){.hero-signature{margin-bottom:34px}.hero-title{margin-bottom:20px}}
@media(max-width:600px){.hero-signature{margin-bottom:46px}.hero-title{margin-bottom:34px}}
/* ---- Wahab Dev brand: hanko seal logo, crimson & ink palette ---- */
::selection{background:var(--accent);color:#fff}
.brand-mark{display:inline-grid;flex:none}
.brand-mark .seal{display:block;width:100%;height:100%;overflow:visible}
.wordmark{gap:10px;letter-spacing:0;font-size:inherit}
.wordmark .brand-mark{width:34px;height:34px;margin:0;color:inherit;font-size:inherit;transition:transform .7s cubic-bezier(.2,.9,.25,1)}
.wordmark:hover .brand-mark{transform:rotate(-6deg) scale(1.06)}
.wm-text{max-width:130px;font-size:21px;font-weight:800;letter-spacing:-.05em;line-height:1;white-space:nowrap}
.wm-text i{font-style:normal;font-weight:500;opacity:.5;margin-left:4px;letter-spacing:-.03em}
.at-bottom .wordmark{gap:0}
.at-bottom .wordmark .brand-mark{margin-left:0}
.footer-line .wordmark .brand-mark{width:30px;height:30px}
.footer-line .wm-text{font-size:19px}
/* tomoe in seal G turn when the logo is hovered, like a sharingan activating */
.seal-tomoe{transform-origin:32px 32px;transform-box:view-box}
.wordmark:hover .seal-tomoe,.chat-avatar:hover .seal-tomoe{animation:seal-spin 1.1s cubic-bezier(.65,0,.35,1)}
@keyframes seal-spin{to{transform:rotate(360deg)}}
/* chat avatar: the seal itself */
.chat-avatar{background:none;padding:0}
.chat-avatar .brand-mark{width:38px;height:38px}
/* loader: when the sketch is built, the seal stamps down on its corner */
.ld-stage{position:relative}
.ld-seal{position:absolute;right:-18px;top:calc(min(300px,68vw)*.533 - 46px);width:58px;height:58px;opacity:0;transform:scale(1.9) rotate(-14deg);filter:drop-shadow(0 10px 18px #00000040);pointer-events:none}
.loader.stamped .ld-seal{opacity:1;transform:rotate(-7deg);transition:transform .42s cubic-bezier(.3,1.5,.5,1),opacity .2s}
.loader.stamped .ld-sketch{animation:ld-shake .32s .12s}
@keyframes ld-shake{30%{transform:translateY(2px)}60%{transform:translateY(-1px)}}
.ld-name{font-weight:700;color:var(--text)}
/* page transition: a spinning sharingan instead of the asterisk */
.pt-mark .sharingan{width:.66em;height:.66em;animation:pt-spin 1.6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes pt-spin{to{transform:rotate(360deg)}}
.pt-mark .icon{display:none}
@media(max-width:600px){.wm-text{font-size:18px}.wordmark .brand-mark{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){.loader.stamped .ld-seal{transition:none}}
/* ---- Itachi layer ---- */
/* crows */
.crow{display:block;width:100%;height:auto;overflow:visible}
.crow path{fill:currentColor}
.crow-burst{position:fixed;z-index:70;width:34px;color:var(--text);pointer-events:none}
/* footer: a red moon rises behind the closing call to action, crows cross it */
.closing{position:relative;isolation:isolate}
html:not([data-theme=dark]) @keyframes crow-cross{0%{transform:translate(0,0)}50%{transform:translate(55vw,-26px)}100%{transform:translate(115vw,-8px)}}
.offscreen .flock .cw,.offscreen html:not([data-theme=dark]) .closing h2{color:var(--text)}
/* scroll HUD: the progress ring is a sharingan; a tomoe appears at a third, two thirds and the end of the page */
.sh-ring .tomoes path{fill:var(--accent);opacity:0;transform:rotate(-60deg) scale(.3);transform-box:fill-box;transform-origin:center;transition:opacity .5s,transform .9s cubic-bezier(.2,1.4,.35,1)}
.scroll-hud[data-tomoe="1"] .tm1,.scroll-hud[data-tomoe="2"] .tm1,.scroll-hud[data-tomoe="2"] .tm2,.scroll-hud[data-tomoe="3"] .tomoes path{opacity:1;transform:none}
.sh-pupil{fill:var(--accent)}
.scroll-hud[data-tomoe="3"] .tomoes{animation:seal-spin 1.2s cubic-bezier(.65,0,.35,1);transform-box:fill-box;transform-origin:center}
/* cursor over the hero heading: a sharingan that turns */
.cur-a .s-sharingan{width:28px;height:28px;margin:-14px 0 0 -14px;transform-origin:14px 14px;fill:none;stroke:none;filter:drop-shadow(0 3px 6px #00000050)}
.s-sharingan .iris{fill:var(--accent);stroke:#fff;stroke-width:3.5}
.s-sharingan .inner{fill:none;stroke:#0d0d0f;stroke-width:1.4;opacity:.55}
.s-sharingan .pupil,.s-sharingan .tm{fill:#0d0d0f;stroke:none}
.s-sharingan .spin{transform-box:view-box;transform-origin:32px 32px}
.cur[data-shape=sharingan] .s-sharingan{opacity:1;scale:1}
.cur[data-shape=sharingan] .s-sharingan .spin{animation:seal-spin 1.6s cubic-bezier(.65,0,.35,1) infinite}
html[data-theme=dark] .s-sharingan .iris{stroke:#1b1c19}
/* process: kanji numerals behind the step numbers */
.process-art{position:relative;overflow:hidden}
/* Tsukuyomi (easter egg) */
.tsukuyomi{position:fixed;inset:0;z-index:98;display:grid;place-items:center;overflow:hidden;cursor:pointer;background:radial-gradient(circle at 50% 42%,#3b0307 0,#120002 55%,#000 100%);opacity:0;transition:opacity .7s}
.tsukuyomi[hidden]{display:none}
.tsukuyomi.on{opacity:1}
html.in-tsukuyomi{overflow:hidden}
.ts-moon{position:absolute;left:50%;top:44%;width:min(54vh,64vw);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-38%) scale(.7);
  background:radial-gradient(circle at 36% 32%,#ff6b5e 0,#e5383b 24%,#9e0f17 60%,#3d0408 100%);box-shadow:0 0 160px 40px #e5383b55;transition:transform 2.2s cubic-bezier(.2,.9,.25,1)}
.tsukuyomi.on .ts-moon{transform:translate(-50%,-50%) scale(1)}
.ts-flock{position:absolute;inset:0}
.ts-flock .cw{position:absolute;left:-90px;top:var(--y);width:calc(46px*var(--s));color:#000;animation:crow-cross var(--t) linear var(--d) infinite backwards}
.ts-text{position:relative;display:grid;justify-items:center;gap:6px;color:#f6f4f1;text-align:center;opacity:0;transform:translateY(16px);transition:opacity .9s .6s,transform 1.2s cubic-bezier(.2,.9,.25,1) .6s}
.tsukuyomi.on .ts-text{opacity:1;transform:none}
.ts-text b{font-family:'Noto Serif JP',serif;font-weight:900;font-size:clamp(70px,13vw,160px);line-height:1;color:#0b0001;text-shadow:0 0 1px #ffb3ad}
.ts-text span{font-size:13px;font-weight:700;letter-spacing:.5em;text-transform:uppercase;color:#ffd7d3}
.ts-text small{margin-top:18px;font-size:12px;color:#ffffff99}
@media(prefers-reduced-motion:reduce){.flock .cw,.ts-flock .cw,.crow-w{animation:none}.ts-moon,.ts-text{transition:none}}
.sh-ring .sh-pupil{fill:var(--accent);stroke:none}
/* ---- round 2: crows, rising moon, stamps, scroll triggers, smooth scroll ---- */
/* Lenis */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:hidden}
/* crows: black silhouettes; wings flap about the body line */
.crow{color:#060607}
@keyframes crow-flap{from{transform:scaleY(1)}to{transform:scaleY(.18)}}
html[data-theme=dark] .flock .crow,html[data-theme=dark] .crow-burst .crow{filter:drop-shadow(0 0 1px #ffffff40)}
.crow-burst{width:44px;color:#060607}
.crow-burst .crow-w{animation-duration:.22s}
/* footer: the moon rises from the horizon behind the button */
.tsuki{position:absolute;inset:0 -60px;z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(#000 70%,transparent);mask:linear-gradient(#000 70%,transparent)}
.moon{position:absolute;left:50%;top:44%;width:min(640px,96vw);aspect-ratio:1;border-radius:50%;translate:-50% 0;
  background:radial-gradient(circle at 50% 46%,#ef4a43 0,#d6232a 34%,#a8121a 66%,#5c070c 100%);
  box-shadow:0 0 140px 30px color-mix(in srgb,var(--accent) 34%,transparent),0 0 0 1px #ff8a8018}
.moon b{position:absolute;inset:0;border-radius:50%;opacity:.55;background:
  radial-gradient(circle at 30% 30%,#0000001f 0 7%,transparent 7.5%),radial-gradient(circle at 64% 22%,#00000016 0 4%,transparent 4.5%),
  radial-gradient(circle at 58% 48%,#00000014 0 10%,transparent 10.5%),radial-gradient(circle at 38% 62%,#00000012 0 5%,transparent 5.5%),
  radial-gradient(circle at 76% 40%,#00000010 0 6%,transparent 6.5%)}
html:not([data-theme=dark]) .moon{box-shadow:0 0 120px 20px #b3141c40}
@supports (animation-timeline:view()){
  .moon{animation:moon-rise linear both;animation-timeline:--footer;animation-range:entry 0% entry 100%}
  @keyframes moon-rise{from{transform:translateY(38%) scale(.86);filter:brightness(.6)}to{transform:none;filter:none}}
}
.closing h2,.closing>p{position:relative}
.closing .button{position:relative;z-index:1}
.flock .cw{position:absolute;left:-90px;top:var(--y);width:calc(48px*var(--s));animation:crow-cross var(--t) linear var(--d) infinite backwards}
@keyframes crow-cross{0%{transform:translate(0,0) rotate(2deg)}50%{transform:translate(58vw,-22px) rotate(-3deg)}100%{transform:translate(118vw,6px) rotate(1deg)}}
.ts-flock .cw{width:calc(54px*var(--s))}
.ts-flock .crow{color:#000}
@media(max-width:600px){.moon{top:52%}}
/* process: palette tiles and a hanko stamp with the step's kanji */
/* headings: words rise from their line */
h2.words .wl{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
h2.words .wl>span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.9,.25,1) calc(var(--wi) * 55ms + 80ms)}
h2.words.seen .wl>span{transform:none}
/* parallax: phone vs browser in the featured cards; footer signature drifts sideways */
@supports (animation-timeline:view()){
  .feat-art .wm-phone{animation:par-phone linear both;animation-timeline:view();animation-range:cover}
  @keyframes par-phone{from{translate:0 46px}to{translate:0 -46px}}
  .feat-art .wm-browser{animation:par-browser linear both;animation-timeline:view();animation-range:cover}
  @keyframes par-browser{from{translate:0 -12px}to{translate:0 12px}}
    @keyframes sig-drift{from{translate:8% 0;opacity:0}to{translate:-2% 0}}
}
@media(prefers-reduced-motion:reduce){h2.words .wl>span{transform:none}.process-art .kanji{opacity:1;transform:rotate(-7deg)}.moon{animation:none}}
.flock .cw{width:calc(70px*var(--s))}
@keyframes crow-flap2{from{transform:scaleY(1)}to{transform:scaleY(.42)}}
/* ---- round 3: side-view crows, the moon's eye, the sharingan process ---- */
/* crows: the wing flips about the shoulder for a real downstroke; the far wing lags a beat */
.crow-w{transform-box:view-box;transform-origin:52px 31px;animation:crow-beat .56s cubic-bezier(.45,0,.55,1) infinite alternate}
.crow-far{opacity:.55;animation-delay:-.1s}
@keyframes crow-beat{from{transform:scaleY(1)}to{transform:scaleY(-.72)}}
.crow-eye{fill:var(--accent)}
.flock .cw{width:calc(64px*var(--s))}
.crow-burst .crow-w{animation-duration:.2s}
/* the moon's eye: dark tomoe turn slowly on the moon; reaching for the button turns them into the Mangekyō */
.moon{color:#2a0205}
.moon-eye{position:absolute;inset:14%;width:72%;height:72%;mix-blend-mode:multiply;opacity:.55;overflow:visible}
.me-tomoe,.me-ms{transform-box:view-box;transform-origin:32px 32px;transition:opacity .7s,transform 1.4s cubic-bezier(.2,.9,.25,1)}
.me-tomoe{animation:seal-spin 26s linear infinite}
.me-ms{opacity:0;transform:rotate(-120deg) scale(.6)}
.closing:has(.button:hover) .me-tomoe,.closing:has(.button:focus-visible) .me-tomoe{opacity:0;transform:scale(1.4)}
.closing:has(.button:hover) .me-ms,.closing:has(.button:focus-visible) .me-ms{opacity:1;transform:none}
.closing:has(.button:hover) .moon{box-shadow:0 0 180px 50px color-mix(in srgb,var(--accent) 48%,transparent)}
.moon{transition:box-shadow 1s}
.offscreen .me-tomoe{animation-play-state:paused}
/* process: the sharingan matures with the project (1 → 2 → 3 tomoe → Mangekyō) */
.process-art .step{display:inline-flex;align-items:center;gap:7px}
.process-art .step i{font-style:normal;font-family:'Noto Serif JP',serif;font-weight:900;font-size:12px;color:var(--accent)}
.eye-wrap{position:relative;display:block;width:86px;height:86px}
.eye{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 14px 20px color-mix(in srgb,var(--accent) 30%,transparent))}
.eye-iris{fill:url(#eye-grad);fill:var(--accent)}
.eye-edge{fill:none;stroke:#2a0205;stroke-width:1.6}
.eye-ring{fill:none;stroke:#2a0205;stroke-width:1.2;opacity:.55}
.eye-ink{fill:#1a0204}
.eye-spin{transform-box:view-box;transform-origin:32px 32px}
.process-grid article:hover .eye-spin{animation:seal-spin 1.4s cubic-bezier(.65,0,.35,1)}
.process-grid article:hover .eye-ms .eye-spin{animation:seal-spin 2.4s linear infinite}
.eye-badge{position:absolute;right:-8px;bottom:-6px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--text);color:var(--bg);border:3px solid var(--surface);box-shadow:0 6px 14px -6px #00000080}
.eye-badge .icon{width:14px;height:14px}
.eye-stage{position:absolute;left:0;right:0;bottom:12px;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* the eye opens as the card scrolls into view */
.process-grid article .eye{transform:scaleY(.08);opacity:.4;transition:transform .7s cubic-bezier(.2,1.1,.3,1) calc(var(--d,0ms) + 250ms),opacity .4s calc(var(--d,0ms) + 250ms)}
.process-grid article.seen .eye{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){.process-grid article .eye{transform:none;opacity:1}.me-tomoe{animation:none}}
.moon-eye{inset:auto;left:27%;top:7%;width:46%;height:46%;opacity:.78}
/* ---- round 4 ---- */
/* steps: the original icon tiles, in the brand palette */
.process-grid article:nth-child(2) .process-art>div{background:linear-gradient(145deg,#a39d86,#5a5e4c)}
.process-grid article:nth-child(4) .process-art>div{background:linear-gradient(145deg,#e5383b,#8e0f15);border-color:#f06a6a}
/* now card: the seal */
.now-mono.brand-mark{width:46px;height:46px;padding:0;background:none;border-radius:0;--seal-paper:var(--surface)}
/* crows taking off from the logo: big, black, heavy wingbeats */
.crow-burst{width:76px;color:#060607}
.crow-burst .crow-w{animation-duration:.34s}
html[data-theme=dark] .crow-burst .crow{filter:drop-shadow(0 0 1.5px #ffffff55)}
/* footer signature: one line, full content width, aligned with the logo and "Back to top" */
.footer-signature{display:flex;justify-content:center;max-width:1070px;margin:0 auto;padding:6px 0 60px;line-height:1.15;opacity:.09;overflow:visible}
.footer-signature span{display:block;white-space:nowrap;letter-spacing:-.04em}
@media(max-width:1180px){.footer-signature{max-width:none;margin-inline:60px}}
@media(max-width:600px){.footer-signature{margin-inline:25px;padding-bottom:90px}}
/* page transition: the seal stamps down, then the destination appears with a crimson underline */
.pt{--seal-paper:var(--text)}
.pt-box{gap:10px}
.pt-seal{display:block;width:clamp(64px,8vw,96px);height:clamp(64px,8vw,96px);margin-bottom:14px;opacity:0;transform:scale(1.7) rotate(-16deg)}
.pt-seal .seal{width:100%;height:100%}
.pt.pt-cover .pt-seal,html.pt-in .pt-seal{opacity:1;transform:rotate(-5deg);transition:transform .5s cubic-bezier(.3,1.5,.5,1) .18s,opacity .2s .18s}
.pt-kicker{font-size:22px}
.pt-title{display:block;font-size:clamp(46px,8.5vw,112px)}
.pt-line{display:block;width:min(260px,40vw);height:3px;margin-top:14px;border-radius:3px;background:var(--accent);transform:scaleX(0);transition:transform .7s cubic-bezier(.65,0,.35,1) .35s}
.pt.pt-cover .pt-line,html.pt-in .pt-line{transform:scaleX(1)}
.pt-bar{display:none}
.footer-signature{padding-top:44px}
@media(max-width:600px){.footer-signature{padding-top:30px}}
/* Keep the oversized footer lettering on the same edges as the copyright row. */
.footer-signature{justify-content:flex-start}
@media(max-width:600px){.footer-signature{margin-inline:28px}}
/* Hero comment: a design-review comment pinned beside the heading (fits the "live design file" hero). */
.hero-comment{display:flex;align-items:flex-start;gap:10px;width:max-content;top:30%;left:calc(100% + 40px);transform:rotate(3deg);font-family:inherit;color:var(--text);transition:transform .7s cubic-bezier(.2,.9,.25,1)}
.hero-comment:hover{transform:rotate(0) translateY(-4px)}
.hcm-pin{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:4px;border-radius:50% 50% 50% 6px;background:var(--surface);box-shadow:0 10px 24px -8px #00000055,0 0 0 1px var(--border);transform-origin:0 100%;animation:pin-drop .8s cubic-bezier(.3,1.5,.5,1) 1.4s backwards}
.hcm-pin img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.hcm-pin .brand-mark{width:34px;height:34px}
.hero-comment:hover .hcm-pin{animation:pin-wiggle .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes pin-drop{from{transform:translateY(-26px) scale(.6);opacity:0}}
@keyframes pin-wiggle{30%{transform:rotate(-10deg)}60%{transform:rotate(6deg)}}
.hcm-card{min-width:186px;padding:11px 13px 10px;border-radius:4px 14px 14px 14px;background:var(--surface);border:1px solid var(--border);box-shadow:0 22px 40px -22px #00000060;text-align:left;animation:card-in .7s cubic-bezier(.2,.9,.25,1) 1.7s backwards}
@keyframes card-in{from{opacity:0;transform:translate(-8px,6px) scale(.94)}}
.hcm-head{display:flex;align-items:center;gap:6px;font-size:12px}
.hcm-head b{font-weight:700}
.hcm-time{color:var(--muted);font-size:11px}
.hcm-online{position:relative;width:7px;height:7px;margin-left:auto;border-radius:50%;background:#22c55e}
.hcm-online:after{content:'';position:absolute;inset:0;border-radius:50%;background:#22c55e;animation:ring-ping 2.4s cubic-bezier(.2,.8,.2,1) infinite}
.hcm-card p{margin:6px 0 9px;font-family:'Nothing You Could Do',cursive;font-size:17px;line-height:1.35;letter-spacing:-.02em;color:var(--text)}
.hcm-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px;border-top:1px solid var(--border);font-size:11px;color:var(--muted)}
.hcm-like{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;border:1px solid var(--border);border-radius:20px;background:var(--bg);color:var(--muted);font:inherit;font-weight:600;transition:color .3s,border-color .3s,background .3s}
.hcm-like svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.hcm-like:hover,.hcm-like[aria-pressed=true]{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.hcm-like[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 10%,var(--bg))}
.hcm-like[aria-pressed=true] svg{fill:color-mix(in srgb,var(--accent) 25%,transparent)}
.hcm-reply{font-weight:550}
@media(prefers-reduced-motion:reduce){.hcm-pin,.hcm-card{animation:none}}
.hero-comment{left:calc(100% - 22px);top:60%;gap:7px;transform:rotate(2deg)}
.hcm-pin{width:36px;height:36px;padding:3px}
.hcm-pin .brand-mark{width:28px;height:28px}
.hcm-card{min-width:0;width:142px;padding:9px 11px 8px}
.hcm-card p{font-size:15px;margin:5px 0 8px}
.hcm-head{font-size:11.5px}.hcm-time{font-size:10.5px}
.hcm-foot{font-size:10.5px;padding-top:7px}
/* calmer hero: the comment is just a pin; its card opens on hover */
.hero-comment{left:calc(100% - 14px);top:64%;align-items:flex-start}
.hcm-card{position:absolute;left:44px;top:-4px;opacity:0;transform:translate(-8px,4px) scale(.94);transform-origin:0 0;pointer-events:none;animation:none;transition:opacity .35s,transform .55s cubic-bezier(.2,1.2,.35,1)}
.hero-comment:hover .hcm-card,.hero-comment:focus-within .hcm-card{opacity:1;transform:none;pointer-events:auto}
.hcm-pin{position:relative}
.hcm-pin:after{content:'1';position:absolute;right:-5px;top:-5px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;border:2px solid var(--bg);transition:transform .3s}
.hero-comment:hover .hcm-pin:after{transform:scale(0)}
.hero-title{margin-bottom:12px}
/* hero: no accidental text selection while dragging around; frame handles can be dragged to resize the heading */
.hero{-webkit-user-select:none;user-select:none}
.hero-title{transform-origin:50% 50%}
.sel .sh{pointer-events:auto;cursor:nwse-resize;transition:transform .5s cubic-bezier(.2,1.4,.35,1) 1.2s,background .25s}
.sel .tr,.sel .bl{cursor:nesw-resize}
.sel .sh:before{content:'';position:absolute;inset:-10px}
.sel .sh:hover,.sel.resizing .sh{background:var(--accent);transform:scale(1.35);transition-delay:0s}
.sel.resizing{border-style:dashed}
/* Keep the entrance feel without blurring large sections during scroll. */
.rv{filter:none;transition:opacity .55s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .65s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.loader{transition:clip-path .55s cubic-bezier(.76,0,.24,1)}
.ld-stage{transition:transform .55s cubic-bezier(.76,0,.24,1),opacity .35s}
.hero{overflow-x:clip}