@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
:root{--black:#090909;--white:#f4f3ef;--blue:#065bff;--muted:#989899;--line:#2b2b2d;font-family:'Space Grotesk',Arial,sans-serif;color:var(--white);background:var(--black);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #3682ff;outline-offset:7px}button{border:0}h1,h2,h3,p{margin:0}h1,h2,h3{letter-spacing:-.055em}p{font-size:17px;line-height:1.6}h2{font-size:clamp(44px,5.3vw,80px);font-weight:600;line-height:1.05}h3{font-weight:500}.blue{color:var(--blue)}.label{font-size:12px;letter-spacing:.1em;line-height:1.6;font-weight:500}.section{padding:112px 5.2%}.progress{position:fixed;top:0;left:0;height:2px;background:var(--blue);width:100%;transform-origin:left;transform:scaleX(0);z-index:40}.skip{position:fixed;left:20px;top:-60px;z-index:100;background:white;color:black;padding:14px}.skip:focus{top:12px}header{height:100px;padding:0 5.2%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(9,9,9,.92);position:relative;z-index:20}.logo{position:relative;display:block;width:170px;height:49px;flex-shrink:0}.logo img{display:block;width:100%;height:100%;object-fit:contain}nav{display:flex;gap:34px;font-size:14px}nav a{position:relative;padding:10px 0}nav a:after{content:'';position:absolute;bottom:2px;left:0;width:100%;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .25s}nav a:hover:after{transform:scaleX(1)}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:48px;background:var(--white);color:var(--black);padding:19px 24px;font-size:14px;font-weight:600;border-radius:3px;transition:background .25s,color .25s,transform .25s}.button span{font-size:21px;line-height:1;transition:transform .25s}.button:hover{background:var(--blue);color:white;transform:translateY(-2px)}.button:hover span{transform:translate(3px,-3px)}.button.small{padding:14px 18px;gap:25px}.menu{display:none}.hero{position:relative;min-height:calc(100svh - 100px);padding-top:43px;padding-bottom:24px;overflow:hidden}.hero-top{display:flex;justify-content:space-between;position:relative;z-index:2}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin:0 11px 2px 0}.hero h1{position:relative;z-index:2;font-weight:600;font-size:clamp(64px,7.8vw,122px);line-height:.98;margin:46px 0 34px;letter-spacing:-.062em}.word{display:inline-block;animation:enter .8s cubic-bezier(.2,.65,.3,1) both}.word:nth-child(2){animation-delay:.08s}.word:nth-child(4){animation-delay:.16s}.word:nth-child(6){animation-delay:.24s}.word:nth-child(7){animation-delay:.32s}.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;position:relative;z-index:2}.hero-bottom p{color:#a5a5a8;font-size:16px;margin-bottom:24px}.scroll-link{display:flex;align-items:center;gap:25px;color:#9a9a9c}.scroll-link span{border:1px solid #424244;border-radius:50%;height:44px;width:44px;display:grid;place-items:center;font-size:20px}.hero-baseline{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:49px;padding-top:20px;font-size:10px;color:#77777b}.hero-orbit{position:absolute;right:2%;top:12%;width:36vw;height:36vw;border:1px solid #ffffff09;border-radius:50%;transform:translate(var(--mx,0px),var(--my,0px));transition:transform .8s ease-out}.hero-orbit:before{content:'';position:absolute;inset:15%;border:1px solid #ffffff06;border-radius:50%}.hero-orbit i{position:absolute;right:15%;top:13%;width:5px;height:5px;background:var(--blue);border-radius:50%;box-shadow:0 0 90px 25px #065bff30}.light{background:var(--white);color:var(--black)}.section-heading{display:grid;grid-template-columns:1fr 2fr;gap:38px 30px;margin-bottom:65px}.section-heading>.label{grid-column:1/-1;color:#848488}.section-heading h2{grid-column:1/2;white-space:nowrap}.section-heading>p{justify-self:end;align-self:end;color:#858587;font-size:16px;max-width:330px}.services{border-top:1px solid #cacaca}.service{display:grid;grid-template-columns:.25fr 1.3fr 1fr 50px;gap:24px;padding:36px 0;border-bottom:1px solid #cacaca;align-items:center;transition:padding .3s,background .3s,color .3s}.number{align-self:start;font-size:14px;color:#79797a;margin-top:8px}.service h3{font-size:36px;line-height:1.08;letter-spacing:-.04em}.service p{font-size:16px;max-width:365px;color:#626266}.service-detail{display:block;font-size:10px;letter-spacing:.07em;margin-top:13px;color:var(--blue);opacity:0;transform:translateY(7px);transition:.3s}.service:hover,.service:focus-visible{padding-left:22px;padding-right:18px;background:#e8e9eb}.service:hover .service-detail,.service:focus-visible .service-detail{opacity:1;transform:none}.arrow{font-size:34px;justify-self:end;transition:transform .3s}.service:hover .arrow{transform:translate(4px,-4px);color:var(--blue)}.manifesto{background:var(--blue);overflow:hidden;padding-top:65px;padding-bottom:65px}.manifesto h2{font-size:clamp(64px,10.3vw,160px);line-height:.94;margin:75px 0 55px;font-weight:700;letter-spacing:-.055em}.manifesto-moving{display:block;will-change:transform}.manifesto-bottom{display:flex;justify-content:space-between;align-items:end}.asterisk{font-size:105px;line-height:1;font-family:inherit}.manifesto-bottom p{max-width:390px;font-size:19px}.process{padding-bottom:70px}.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:80px}.timeline article{padding-right:35px}.step{display:block;color:#397bff;font-size:14px;padding-bottom:25px;border-bottom:1px solid #343439;position:relative}.step i{position:absolute;bottom:-4px;left:0;width:7px;height:7px;background:var(--blue);border-radius:50%}.timeline h3{font-size:27px;margin:30px 0 15px}.timeline p{font-size:15px;color:#99999d}.projects{padding-top:80px}.project{margin-bottom:48px;min-width:0}.project-image{position:relative;display:block;width:100%;height:540px;overflow:hidden;text-align:left;background:#b9b5a9;padding:0}.project-image img{height:100%;width:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.3,1);filter:brightness(.82)}.project-image:hover img{transform:scale(1.04)}.project-overlay{position:absolute;inset:40px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-shadow:0 1px 12px #0003}.project-overlay strong{font-size:120px;font-weight:500;letter-spacing:-.075em;line-height:1}.project-overlay strong span{font-size:30px;vertical-align:top}.project-overlay>span:last-child{font-size:15px}.project-open{position:absolute;bottom:30px;right:30px;background:var(--white);color:#111;padding:14px 18px;border-radius:2px;font-size:13px;transform:translateY(8px);opacity:0;transition:.3s}.project-image:hover .project-open,.project-image:focus-visible .project-open{opacity:1;transform:none}.project-caption{display:flex;align-items:center;gap:28px;padding-top:22px}.project-caption h3{font-size:24px;margin-right:auto;letter-spacing:-.03em}.project-caption>span{font-size:11px;letter-spacing:.07em;color:#96969a}.project-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}.project-pair .project-image{height:440px}.project-pair .project-overlay{inset:30px;justify-content:space-between}.project-pair strong{font-size:90px}.terra{background:#bc663c}.onda{background:#0950d9}.faq .section-heading{margin-bottom:60px}.faq-list{margin-left:25%}.faq details{border-top:1px solid #c8c8c8}.faq details:last-child{border-bottom:1px solid #c8c8c8}.faq summary{display:flex;list-style:none;justify-content:space-between;gap:20px;align-items:center;cursor:pointer;font-size:22px;letter-spacing:-.03em;padding:27px 0}.faq summary::-webkit-details-marker{display:none}.faq summary span{font-size:30px;font-weight:400;color:var(--blue);transition:transform .25s}.faq details[open] summary span{transform:rotate(45deg)}.answer p{padding:0 45px 28px 0;color:#606064;font-size:16px;max-width:700px}.faq details[open] .answer{animation:enter .3s ease}.contact{position:relative;overflow:hidden;padding-top:85px;padding-bottom:85px}.contact>*:not(.contact-glow){position:relative}.contact h2{font-size:clamp(60px,8.8vw,138px);line-height:.98;letter-spacing:-.06em;margin-top:45px;font-weight:600}.contact-bottom{display:flex;justify-content:space-between;align-items:end;margin-top:35px}.contact-bottom p{color:#a7a7ab;margin-bottom:30px;font-size:16px}.contact-symbol{font-size:90px;color:var(--blue)}.contact-glow{position:absolute;width:600px;height:600px;right:-150px;bottom:-300px;background:radial-gradient(circle,#065bff18,transparent 65%);border:1px solid #ffffff07;border-radius:50%}footer{padding:0 5.2% 28px}.footer-top{border-top:1px solid var(--line);padding:40px 0;display:flex;align-items:center;justify-content:space-between}.social-pending{background:transparent;font-size:14px}.footer-bottom{border-top:1px solid var(--line);padding-top:23px;display:flex;justify-content:space-between;font-size:10px;color:#88888c}.reveal{opacity:1}.js-motion .reveal{opacity:0;transform:translateY(28px);clip-path:inset(0 0 5% 0);transition:opacity .65s,transform .65s cubic-bezier(.2,.6,.3,1),clip-path .65s}.js-motion .reveal.visible{opacity:1;transform:none;clip-path:inset(0)}.timeline article:nth-child(2){transition-delay:.1s}.timeline article:nth-child(3){transition-delay:.2s}.timeline article:nth-child(4){transition-delay:.3s}dialog{border:1px solid #444;background:#121214;color:white;padding:65px 45px 45px;max-width:680px;width:calc(100% - 32px);max-height:85svh}dialog::backdrop{background:#000b;backdrop-filter:blur(8px)}dialog h2{font-size:44px;margin:25px 0}dialog p{color:#b1b1b5}dialog .button{margin-top:25px}.dialog-close{position:absolute;top:18px;right:20px;background:none;padding:8px;font-size:14px}.dialog-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.dialog-tags span{padding:8px 12px;border:1px solid #555;font-size:12px}.disclosure{font-size:13px;margin-top:25px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:white;color:black;padding:15px 25px;z-index:100;opacity:0;pointer-events:none;transition:.2s;max-width:90vw;font-size:14px}.toast.shown{opacity:1}@keyframes enter{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}details::details-content{block-size:0;overflow:hidden;transition:block-size .35s,content-visibility .35s;transition-behavior:allow-discrete}details[open]::details-content{block-size:auto}}
@media(min-width:1600px){.section,header,footer{padding-left:max(5.2%,calc((100vw - 1440px)/2));padding-right:max(5.2%,calc((100vw - 1440px)/2))}.hero h1{font-size:128px}}
@media(max-width:900px){header nav{gap:20px}.section{padding:80px 6%}.hero{padding-top:35px;padding-bottom:24px;min-height:auto}.hero h1{font-size:9.3vw;margin-top:65px}.section-heading{display:flex;flex-wrap:wrap;gap:28px}.section-heading>.label{width:100%}.section-heading h2{white-space:normal}.section-heading>p{margin-left:auto}.service{grid-template-columns:35px 1fr 1fr 30px;gap:15px}.service h3{font-size:28px}.timeline{grid-template-columns:1fr 1fr;row-gap:45px}.project-image{height:430px}.project-pair .project-image{height:350px}.project-caption{flex-wrap:wrap;gap:10px}.project-caption h3{width:100%}.faq-list{margin-left:0}.footer-top nav{gap:18px}.hero-orbit{top:18%;right:-15%;width:65vw;height:65vw}.service-detail{opacity:1;transform:none}.project-open{opacity:1;transform:none}}
@media(max-width:620px){header{height:82px;padding:0 6%}.logo{transform:scale(.86);transform-origin:left center;width:130px}.header-cta{display:none}.menu{display:flex;align-items:center;gap:20px;background:none;font-size:14px}.menu span{font-size:27px}.menu[aria-expanded=true] span{transform:rotate(45deg)}header nav{display:none;position:absolute;top:81px;left:0;right:0;background:#111;padding:24px 6%;border-bottom:1px solid #333}header nav.open{display:flex;flex-direction:column;gap:12px}header nav a{font-size:24px}.section{padding:66px 6%}.hero{padding-top:30px;padding-bottom:20px;min-height:calc(100svh - 82px)}.hero-top .label{font-size:9px}.hero h1{font-size:clamp(44px,10.8vw,70px);line-height:1.04;letter-spacing:-.065em;margin:58px 0 34px}.hero-bottom{align-items:end}.hero-bottom p{font-size:14px;line-height:1.6}.hero-bottom .button{font-size:13px;padding:17px 18px;gap:38px}.scroll-link{font-size:0;gap:0}.scroll-link span{font-size:20px;width:38px;height:38px}.hero-baseline{margin-top:54px;font-size:8px;letter-spacing:.06em}.hero-baseline>span:last-child{display:none}.hero-orbit{top:17%;right:-38%;width:95vw;height:95vw}.section-heading{margin-bottom:38px}.section-heading h2{font-size:43px;line-height:1.08}.section-heading>p{margin-left:0;font-size:15px}.label{font-size:10px}.service{grid-template-columns:28px 1fr 25px;padding:28px 0;gap:12px}.service h3{font-size:27px}.service>div{grid-column:2;grid-row:2}.service p{font-size:14px}.service .arrow{grid-column:3;grid-row:1;font-size:28px}.service-detail{font-size:8px;line-height:1.5}.number{font-size:12px}.service:hover{padding-left:8px;padding-right:8px}.manifesto{padding-top:40px;padding-bottom:40px}.manifesto h2{font-size:12vw;margin:50px 0 38px;line-height:1}.manifesto-bottom{gap:30px;align-items:start}.manifesto-bottom p{font-size:15px;max-width:240px}.asterisk{font-size:65px}.timeline{margin-top:45px;gap:35px 22px}.timeline article{padding-right:0}.timeline h3{font-size:22px;letter-spacing:-.045em}.timeline p{font-size:14px;line-height:1.65}.projects{padding-top:35px}.project-image{height:360px}.project-overlay{inset:24px}.project-overlay strong{font-size:90px}.project-open{font-size:11px;bottom:18px;right:18px;padding:11px 14px}.project-caption h3{font-size:22px}.project-caption>.label{margin-left:auto}.project-pair{grid-template-columns:1fr;gap:0}.project-pair .project-image{height:390px}.project{margin-bottom:38px}.faq summary{font-size:19px;line-height:1.3;padding:23px 0}.answer p{font-size:15px;padding-right:12px}.contact h2{font-size:12.5vw;line-height:1.03;margin-top:35px}.contact-bottom{margin-top:40px}.contact-symbol{display:none}.contact-bottom p{font-size:15px}.footer-top{padding:26px 0;flex-wrap:wrap;gap:20px}.footer-top nav{order:3;width:100%;justify-content:space-between;font-size:13px}.footer-bottom{font-size:8px;gap:20px;line-height:1.7}.footer-bottom>span:nth-child(2){display:none}dialog{padding:60px 24px 30px}dialog h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js-motion .reveal{opacity:1;transform:none;clip-path:none}.manifesto-moving,.hero-orbit{transform:none!important}}
@media(max-width:620px){.logo{width:146px}.hero .scroll-link{font-size:0}.hero-bottom>div{min-width:0;flex:1}.hero-bottom .scroll-link{flex-shrink:0;margin-left:12px}.hero-bottom p{font-size:14px}}

.button,.project-open,.dialog-close,.menu{border-radius:999px}.hero .button,.header-cta{background:transparent;color:var(--white);border:1px solid #ffffff70}.hero .button:hover,.hero .button:focus-visible,.header-cta:hover,.header-cta:focus-visible{background:transparent;color:var(--white);border-color:var(--blue)}
/* Hero CTA: white pill, persistent black arrow circle. */
.hero{background:#000;color:#fff}.hero h1{color:#fff}
.hero .button{background:#fff;color:#000;border:1px solid transparent;padding:8px 8px 8px 25px;gap:34px;min-height:58px;transition:background .3s,color .3s,transform .3s}
.hero .button .cta-circle{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;background:#000;color:#fff;border-radius:50%;transform:none}
.hero .button .cta-circle span{display:block;font-size:21px;transition:transform .3s}
.hero .button:hover,.hero .button:focus-visible{background:var(--blue);color:#fff;border-color:transparent;transform:translateY(-2px)}
.hero .button:hover .cta-circle,.hero .button:focus-visible .cta-circle{background:#000;color:#fff;transform:none}
.hero .button:hover .cta-circle span,.hero .button:focus-visible .cta-circle span{transform:translate(2px,-2px)}
/* A native sticky section with scroll-driven character color, no wheel interception. */
.manifesto-track{background:var(--blue)}
.manifesto-track.is-pinned{height:250svh}
.manifesto-track .manifesto{min-height:100svh;padding-top:clamp(28px,5svh,65px);padding-bottom:clamp(28px,5svh,65px);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.manifesto-track.is-pinned .manifesto{position:sticky;top:0;height:100svh;min-height:0}
.manifesto-track .manifesto h2{font-size:clamp(38px,min(10vw,15svh),150px);line-height:.98;margin:0;letter-spacing:-.055em}
.manifesto-line{display:block;white-space:nowrap}.manifesto-letter{color:#fff}
.manifesto-track .manifesto-bottom{align-items:center;gap:24px}
.manifesto-track .asterisk{font-size:clamp(45px,10svh,105px)}
.manifesto-track .manifesto-bottom p{font-size:clamp(15px,2.1svh,19px);max-width:390px}
/* Equal portfolio tiles, with category filters and staggered reveals. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.project-filters{display:flex;flex-wrap:wrap;gap:12px;padding-bottom:32px;margin-bottom:36px;border-bottom:1px solid var(--line)}
.project-filters[hidden],.project-grid .project[hidden]{display:none}
.project-filters button{display:inline-flex;align-items:center;gap:20px;border:1px solid #45454a;background:transparent;color:#fff;border-radius:999px;padding:13px 21px;font-size:14px;transition:background .25s,border-color .25s,color .25s}
.project-filters button span{font-size:11px;opacity:.65}.project-filters button:hover{border-color:var(--blue)}
.project-filters button[aria-pressed=true]{background:var(--white);color:#090909;border-color:var(--white)}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 32px;align-items:start}
.project-grid .project{margin:0;transition-delay:var(--reveal-delay,0ms)}
.project-grid .project-image{height:auto;aspect-ratio:4/3;width:100%}
.project-grid .project-overlay{inset:30px;justify-content:space-between}
.project-grid .project-overlay strong{font-size:clamp(64px,7vw,106px)}
.project-grid .project-caption{display:flex;flex-wrap:wrap;gap:10px;padding-top:22px}
.project-grid .project-caption h3{width:100%;font-size:24px}
.project-grid .project-image img{transition:transform .7s cubic-bezier(.2,.6,.3,1),filter .7s}
.project-grid .project-image:hover img,.project-grid .project-image:focus-visible img{transform:scale(1.035);filter:brightness(.94)}
@media(max-width:620px){.hero .button{padding:7px 7px 7px 21px;gap:28px;min-height:54px}.hero .button .cta-circle{width:38px;height:38px}.project-grid{grid-template-columns:minmax(0,1fr);gap:38px}.project-grid .project-image{aspect-ratio:4/3}.project-grid .project-overlay{inset:24px}.project-grid .project-overlay strong{font-size:72px}.project-grid .project-caption h3{font-size:22px}.project-filters{gap:8px}.project-filters button{padding:12px 15px;gap:12px;font-size:13px}.manifesto-track .manifesto h2{font-size:clamp(32px,min(11.5vw,14svh),72px)}.manifesto-track .manifesto-bottom p{max-width:240px}.manifesto-track .manifesto-bottom{align-items:start}}
@media(prefers-reduced-motion:reduce){.manifesto-track.is-pinned{height:auto}.manifesto-track.is-pinned .manifesto{position:static;height:auto;min-height:auto}.manifesto-track .manifesto{min-height:auto;gap:45px}.manifesto-letter{color:#000!important}.project-grid .project{transition:none}.project-image:hover img,.project-image:focus-visible img{transform:none!important}.hero .button:hover,.hero .button:hover .cta-circle span{transform:none}}
/* Motion refinement only: the resting layout, palette and content stay unchanged. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.25,.75,.25,1)}
.word{animation-duration:1.1s;animation-timing-function:var(--ease-out)}
.word:nth-child(2){animation-delay:.12s}.word:nth-child(4){animation-delay:.24s}.word:nth-child(6){animation-delay:.36s}.word:nth-child(7){animation-delay:.48s}
.js-motion .reveal{clip-path:none;transform:translateY(28px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.js-motion .reveal.visible{clip-path:none;transform:none}
.js-motion .section-heading.reveal{opacity:1;transform:none}
.js-motion .section-heading.reveal>*{opacity:0;transform:translateY(24px);transition:opacity 1.05s var(--ease-out),transform 1.05s var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.js-motion .section-heading.reveal>h2{transition-delay:calc(var(--reveal-delay,0ms) + 100ms)}
.js-motion .section-heading.reveal>p{transition-delay:calc(var(--reveal-delay,0ms) + 200ms)}
.js-motion .section-heading.reveal.visible>*{opacity:1;transform:none}
.js-motion .project-grid .project{transition-duration:.95s;transition-timing-function:var(--ease-out)}
.button,.hero .button,.project-filters button{transition:background-color .45s var(--ease-soft),color .45s var(--ease-soft),border-color .45s var(--ease-soft),transform .45s var(--ease-out)}
.button span,.hero .button .cta-circle,.hero .button .cta-circle span{transition:transform .45s var(--ease-out)}
.button:hover,.hero .button:hover,.hero .button:focus-visible{transform:translateY(-1px)}
.button:hover span{transform:translate(2px,-2px)}
.hero .button:hover .cta-circle,.hero .button:focus-visible .cta-circle{transform:scale(1.025)}
nav a:after{transition:transform .4s var(--ease-out)}
.menu span,.faq summary span{transition:transform .45s var(--ease-out)}
.service{transition:background-color .45s var(--ease-soft),color .45s var(--ease-soft)}
.service:hover,.service:focus-visible{padding-left:0;padding-right:0}
.service h3,.service>div,.service .number{transition:transform .5s var(--ease-out)}
.service:hover h3,.service:hover>div,.service:focus-visible h3,.service:focus-visible>div{transform:translateX(5px)}
.service-detail{transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.arrow{transition:transform .45s var(--ease-out),color .45s var(--ease-soft)}
.service:hover .arrow{transform:translate(2px,-2px)}
.project-grid .project-image img{transition:transform .75s var(--ease-out),filter .75s var(--ease-soft)}
.project-grid .project-image:hover img,.project-grid .project-image:focus-visible img{transform:scale(1.025)}
.project-open{transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.project-overlay{transition:transform .65s var(--ease-out)}
.project-image:hover .project-overlay,.project-image:focus-visible .project-overlay{transform:translateY(-2px)}
.hero-orbit{transition:transform 1.35s var(--ease-out)}
.manifesto-track{position:relative;z-index:1}
.manifesto-letter{transition:none}
.faq details[open] .answer{animation:answer-enter .6s var(--ease-out)}
@keyframes answer-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@supports (interpolate-size:allow-keywords){details::details-content{transition:block-size .5s var(--ease-soft),content-visibility .5s;transition-behavior:allow-discrete}}
@media(max-width:620px){.service:hover,.service:focus-visible{padding-left:0;padding-right:0}}
@media(prefers-reduced-motion:reduce){.js-motion .reveal,.js-motion .section-heading.reveal>*{opacity:1;transform:none;transition:none}.hero .button:hover,.hero .button:focus-visible,.hero .button:hover .cta-circle,.hero .button:focus-visible .cta-circle,.hero .button:hover .cta-circle span,.hero .button:focus-visible .cta-circle span,.project-image:hover .project-overlay,.project-image:focus-visible .project-overlay,.service:hover h3,.service:hover>div,.service:focus-visible h3,.service:focus-visible>div,.button:hover,.button:hover span{transform:none}.manifesto-track .manifesto{transform:none!important}}
/* Dark glass navigation, keeping its existing dimensions and controls. */
header{position:sticky;top:0;background:rgba(10,10,10,.58);-webkit-backdrop-filter:blur(16px) saturate(115%);backdrop-filter:blur(16px) saturate(115%);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:none;transition:background-color .4s var(--ease-soft),backdrop-filter .4s var(--ease-soft),-webkit-backdrop-filter .4s var(--ease-soft),border-color .4s var(--ease-soft)}
header.is-scrolled{background:rgba(10,10,10,.76);-webkit-backdrop-filter:blur(20px) saturate(120%);backdrop-filter:blur(20px) saturate(120%);border-bottom-color:rgba(255,255,255,.1)}
@media(max-width:620px){header nav{background:rgba(10,10,10,.88);-webkit-backdrop-filter:blur(18px) saturate(115%);backdrop-filter:blur(18px) saturate(115%);border-bottom-color:rgba(255,255,255,.08)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){header,header.is-scrolled{background:rgba(10,10,10,.94)}}
/* Supplied orbital artwork: separate pointer drift and scroll transforms. */
.hero-orbit{right:-2%;top:6%;width:44%;height:auto;aspect-ratio:1;border:0;border-radius:0;pointer-events:none;z-index:1}
.hero-orbit:before{content:none}.hero-orb-image{display:block;width:100%;height:auto;mix-blend-mode:screen;transform-origin:50% 50%;will-change:transform}
.hero-top,.hero-bottom,.hero-baseline{position:relative;z-index:2}
.process-step{position:relative;outline:none}
.process-step:focus-visible{outline:1px solid #397bff;outline-offset:12px;border-radius:2px}
.process-step h3{transition:color .6s var(--ease-soft),transform .65s var(--ease-out)}
.process-step p{transition:color .6s var(--ease-soft),opacity .6s var(--ease-soft)}
.process-step .step{transition:color .6s var(--ease-soft)}
.process-step .step:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;opacity:.5;transition:transform .85s var(--ease-out),opacity .6s var(--ease-soft)}
.process-step .step i{z-index:1;transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-soft),background-color .6s var(--ease-soft)}
.process-step.is-current h3{color:#397bff;transform:translateY(-2px)}
.process-step.is-current p{color:#e5e5e8}
.process-step.is-current .step{color:#70a0ff}
.process-step.is-current .step i{transform:scale(1.3);box-shadow:0 0 16px 3px #065bff55}
.process-step.is-current .step:after,.process-step.is-complete .step:after{transform:scaleX(1)}
.process-step.is-current .step:after{opacity:1}
.process-step.is-complete p{color:#99999d}
@media(min-width:1600px){.hero-orbit{right:max(0%,calc((100vw - 1550px)/2));width:min(44%,660px)}}
@media(min-width:621px) and (max-width:900px){.hero-orbit{right:-8%;top:12%;width:48%;opacity:.8}}
@media(max-width:620px){.hero{display:grid;grid-template-columns:minmax(0,1fr)}.hero-top{grid-row:1}.hero h1{grid-row:2}.hero-orbit{grid-row:3;position:relative;top:auto;right:auto;justify-self:end;width:min(82%,290px);height:230px;aspect-ratio:auto;margin:-28px -16px -10px 0;opacity:1}.hero-orb-image{height:100%;object-fit:contain}.hero-bottom{grid-row:4}.hero-baseline{grid-row:5}}
@media(prefers-reduced-motion:reduce){.hero-orb-image{transform:none!important;will-change:auto}.process-step.is-current h3,.process-step.is-current .step i{transform:none}}
/* Mobile-only hero composition. Desktop rules are unchanged. */
@media(max-width:620px){
  .hero{display:flex;flex-direction:column;justify-content:center;min-height:calc(86svh - 82px);padding:36px 5% 48px;isolation:isolate}
  .hero-top{margin-bottom:32px}
  .hero h1{width:100%;font-size:clamp(40px,12.4vw,76px);line-height:1.04;letter-spacing:-.065em;margin:0 0 24px}
  .hero-bottom{display:block;width:100%}
  .hero-bottom p{font-size:15px;line-height:1.55;max-width:300px;margin-bottom:23px;animation:enter 1.05s var(--ease-out) .3s both}
  .hero-bottom p br{display:initial}
  .hero .button{min-height:64px;min-width:236px;padding:8px 8px 8px 24px;font-size:15px;gap:30px;animation:mobile-cta-enter 1.1s var(--ease-out) .45s backwards}
  .hero .button .cta-circle{width:46px;height:46px}
  .hero .button:active{background:var(--blue);color:#fff;transform:translateY(-1px)}
  .hero .button:active .cta-circle{background:#000;color:#fff}
  .hero .scroll-link,.hero-baseline{display:none}
  .hero-orbit{position:absolute;top:auto;right:-40px;bottom:-16px;grid-row:auto;justify-self:auto;width:270px;height:270px;max-width:78vw;margin:0;opacity:.38;z-index:0;animation:mobile-orb-enter 1.4s var(--ease-out) .15s both}
  .hero-orb-image{width:100%;height:100%;object-fit:contain}
  .hero-top,.hero h1,.hero-bottom{position:relative;z-index:2}
  .hero .word{animation-duration:1.1s}
  @keyframes mobile-cta-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
  @keyframes mobile-orb-enter{from{opacity:0;transform:translateY(12px)}to{opacity:.38;transform:translateY(0)}}
}
@media(max-width:620px) and (prefers-reduced-motion:reduce){.hero-orbit{opacity:.38}.hero-bottom p,.hero .button{opacity:1;transform:none}.hero .button:active{transform:none}}

/* Reference hero with a slightly smaller headline; original glass navbar retained. */






.hero{display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - 100px);padding:clamp(80px,8vw,155px) 6.5% clamp(70px,6vw,110px);background:#000;isolation:isolate}
.hero h1{margin:0 0 30px;font-size:clamp(60px,6.9vw,119px);font-weight:700;line-height:.91;letter-spacing:-.065em;width:100%;color:#fff}
.hero .hero-line{display:block;white-space:nowrap;animation:enter 1.1s var(--ease-out) both}
.hero .hero-line:nth-child(2){animation-delay:.12s}
.hero .hero-line:nth-child(3){animation-delay:.24s}
.hero .hero-line.blue{color:var(--blue)}
.hero-bottom{display:block}
.hero-bottom p{font-size:clamp(17px,1.58vw,26px);line-height:1.45;color:#aaa;max-width:600px;margin:0 0 30px;animation:enter 1.1s var(--ease-out) .35s both}
.hero .button{background:#fff;color:#000;border:0;border-radius:999px;min-height:70px;padding:9px 9px 9px 29px;gap:34px;font-size:18px;animation:enter 1.1s var(--ease-out) .45s backwards}
.hero .button .cta-circle{width:50px;height:50px;flex-shrink:0;background:#000;color:#fff}
.hero .button:hover,.hero .button:active,.hero .button:focus-visible{background:var(--blue);color:#fff}
.hero-graphics{position:absolute;inset:0 0 0 32%;z-index:0;pointer-events:none;transform:translate(var(--mx,0px),var(--my,0px));transition:transform 1.4s var(--ease-out);animation:graphics-enter 1.6s var(--ease-out) both}
.hero-graphics-motion{width:100%;height:100%;display:block;transform-origin:75% 65%}
.hero h1,.hero-bottom{position:relative;z-index:2}
@keyframes graphics-enter{from{opacity:0}to{opacity:1}}
@media(min-width:1500px){.hero .button{min-height:88px;font-size:23px;padding:10px 10px 10px 36px;gap:42px}.hero .button .cta-circle{width:64px;height:64px}.hero .button .cta-circle span{font-size:28px}.hero h1{margin-bottom:40px}.hero-bottom p{margin-bottom:38px}}
@media(min-width:621px) and (max-width:1000px){.hero{min-height:calc(90svh - 100px);padding-top:90px}.hero h1{font-size:7.5vw}}
@media(max-width:620px){.hero{min-height:calc(86svh - 82px);padding:43px 5% 54px;justify-content:center}.hero h1{font-size:9.55vw;font-weight:700;line-height:1.04;letter-spacing:-.065em;margin:0 0 25px}.hero-bottom p{font-size:15px;max-width:320px;margin-bottom:26px;line-height:1.55}.hero-bottom p br{display:none}.hero .button{min-height:64px;min-width:236px;font-size:15px;padding:8px 8px 8px 25px;gap:29px}.hero .button .cta-circle{width:46px;height:46px}.hero-graphics{inset:12% -35% -8% 12%;opacity:.6}.hero-graphics-motion{opacity:.6}}
@media(prefers-reduced-motion:reduce){.hero-graphics,.hero-graphics-motion{animation:none!important;transform:none!important;transition:none!important}.hero .hero-line,.hero-bottom p,.hero .button{animation:none!important;opacity:1;transform:none}}
@media(max-width:620px){.hero h1{font-size:10.2vw}}
/* Stack the existing process steps on phones, retaining scroll reveals. */
@media(max-width:767px){
  .process .timeline{grid-template-columns:minmax(0,1fr);gap:38px;margin-top:48px}
  .process .timeline article{padding-right:0;min-width:0}
  .process .timeline h3{margin-top:23px;margin-bottom:12px}
  .process .timeline p{max-width:100%}
}
/* Vector icon system: consistent rendering on every platform. */
.icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex-shrink:0}
.button>.icon{width:21px;height:21px;transition:transform .45s var(--ease-out)}
.button:hover>.icon{transform:translate(2px,-2px)}
.asterisk .icon,.contact-symbol .icon{width:1em;height:1em}
.mobile-navigation{display:none}
@media(max-width:620px){
  header{position:fixed;inset:0 0 auto;height:68px;padding:0 5%;background:rgba(10,10,10,.65);backdrop-filter:blur(16px) saturate(115%);-webkit-backdrop-filter:blur(16px) saturate(115%);z-index:32;border-bottom:1px solid #ffffff0d}
  header .logo{width:142px;height:43px;transform:none}
  header #navigation{display:none!important}
  header .menu{display:flex;gap:12px;align-items:center;min-height:44px;padding:0;background:none;font-size:13px}
  header .menu span{display:flex;align-items:center;justify-content:center;font-size:22px;transition:transform .6s var(--ease-out)}
  .hero{min-height:100svh;padding:104px 5% 58px;justify-content:center;overflow:hidden}
  .hero h1{font-size:9.7vw;line-height:1.04;margin:0 0 22px}
  .hero-bottom p{font-size:15px;line-height:1.55;max-width:330px;margin-bottom:24px}
  .hero .button{min-height:56px;min-width:210px;padding:7px 7px 7px 22px;gap:24px;font-size:14px}
  .hero .button .cta-circle{width:40px;height:40px}
  .hero-graphics{inset:0 -35% -6% 8%;opacity:.42}
  .hero-graphics-motion{opacity:.48}
  body.menu-open{position:fixed;width:100%;overflow:hidden;overscroll-behavior:none}
  .mobile-navigation{display:flex;position:fixed;z-index:31;inset:68px 0 0;height:calc(100svh - 68px);padding:36px 6% max(32px,env(safe-area-inset-bottom));flex-direction:column;justify-content:center;gap:40px;background:rgba(3,3,5,.985);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;visibility:hidden;pointer-events:none;overflow:auto;overscroll-behavior:contain;transition:opacity .6s var(--ease-out),visibility 0s .6s}
  .mobile-navigation.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .6s var(--ease-out),visibility 0s}
  .mobile-links{display:flex;flex-direction:column;gap:12px}
  .mobile-navigation a{width:fit-content;max-width:100%;padding:10px 0;font-size:clamp(28px,7.8vw,36px);line-height:1.2;letter-spacing:-.04em;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out),color .35s var(--ease-soft)}
  .mobile-navigation.open a{opacity:1;transform:none;transition-delay:.08s}
  .mobile-navigation.open .mobile-links a:nth-child(2){transition-delay:.14s}
  .mobile-navigation.open .mobile-links a:nth-child(3){transition-delay:.20s}
  .mobile-navigation.open .mobile-links a:nth-child(4){transition-delay:.26s}
  .mobile-navigation a:hover,.mobile-navigation a:active{color:var(--blue)}
  .mobile-navigation a:after{display:none}
  .mobile-navigation .mobile-menu-cta{font-size:14px;font-weight:500;letter-spacing:0;min-height:48px;padding:13px 19px;border-radius:999px;gap:26px;background:transparent;border:1px solid #ffffff38;color:white}
  .mobile-navigation.open .mobile-menu-cta{transition-delay:.32s}
  .mobile-navigation .mobile-menu-cta:hover,.mobile-navigation .mobile-menu-cta:active{background:var(--blue);color:#fff}
}
@media(max-width:620px) and (max-height:540px){.mobile-navigation{justify-content:flex-start;padding-top:20px;gap:20px}.mobile-links{gap:2px}.mobile-navigation a{font-size:25px;padding:7px 0}}
@media(prefers-reduced-motion:reduce){.mobile-navigation,.mobile-navigation a,header .menu span,.button>.icon{transition:none!important}.mobile-navigation a{transform:none}.button:hover>.icon{transform:none}}
/* Existing portfolio: two landscape websites, then three supplied social covers. */
.projects .project-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:52px 28px}
.projects .project[data-category=web]{grid-column:span 3}
.projects .project[data-category=social]{grid-column:span 2}
.projects .portfolio-card{display:block;transition:transform .3s var(--ease-soft),box-shadow .3s var(--ease-soft);outline-offset:8px}
.projects .project-grid .project-image{aspect-ratio:16/9;background:#111}
.projects .project[data-category=social] .project-image{aspect-ratio:1616/1264;background:#fff}
.projects .project-grid .project-image img{object-fit:contain;filter:none;transition:transform .35s var(--ease-soft)}
.projects .project-grid .project-caption{padding-top:20px;gap:9px;align-items:start}
.projects .project-grid .project-caption h3{font-size:24px;line-height:1.15;letter-spacing:-.035em}
.projects .project-caption>span{font-size:12px;letter-spacing:.01em;line-height:1.5;color:#aaa}
.projects .portfolio-visit{display:inline-flex;align-items:center;gap:13px;margin-top:18px;padding-bottom:5px;border-bottom:1px solid #ffffff30;font-size:13px;color:#f4f3ef;transition:border-color .3s,color .3s}
.projects .portfolio-visit .icon{width:17px;height:17px;transition:transform .3s var(--ease-soft)}
@media(hover:hover) and (pointer:fine){.projects .portfolio-card:hover{transform:translateY(-8px);box-shadow:0 16px 24px -22px #000b}.projects .portfolio-card:hover img{transform:scale(1.02);filter:none}.projects .portfolio-card:hover .portfolio-visit{color:#7ba8ff;border-color:#065bff}.projects .portfolio-card:hover .portfolio-visit .icon{transform:translate(2px,-2px)}}
.projects .portfolio-card:focus-visible{outline:2px solid #3682ff}
@media(min-width:621px) and (max-width:900px){.projects .project[data-category=social]{grid-column:span 3}.projects .project-grid{gap:40px 24px}}
@media(max-width:620px){.projects .project-grid{grid-template-columns:minmax(0,1fr);gap:38px}.projects .project[data-category]{grid-column:auto}.projects .project-grid .project-caption h3{font-size:22px}.js-motion .projects .project.reveal{transform:translateY(20px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);transition-delay:var(--reveal-delay,0ms)}.js-motion .projects .project.reveal.visible{transform:none}.projects .portfolio-visit{margin-top:15px}}
@media(prefers-reduced-motion:reduce){.projects .portfolio-card,.projects .portfolio-card img,.projects .portfolio-visit,.projects .portfolio-visit .icon,.js-motion .projects .project.reveal{transition:none!important;transform:none!important}.js-motion .projects .project.reveal{opacity:1}}
.projects .project[data-category=web] .project-image img{object-fit:cover;object-position:center top}
/* Round only the portfolio image viewport, retaining layout and hover. */
.projects .project-grid .project-image{border-radius:18px;overflow:hidden}
.footer-location{padding:0 0 28px}
.footer-location p{font-size:14px;line-height:1.65;color:#aaa;letter-spacing:0}
.footer-location p+p{color:#858589}
/* Match the existing header gutter without resizing the hero content. */
.hero{--hero-content-inset:5.2%;padding-inline:0}
.hero h1,.hero .hero-bottom{width:87%;margin-left:var(--hero-content-inset)}
@media(min-width:1600px){.hero{--hero-content-inset:max(5.2%,calc((100vw - 1440px)/2))}}
@media(max-width:620px){.hero{--hero-content-inset:5%}.hero h1,.hero .hero-bottom{width:90%}}
/* Reduce the header mark while preserving its left edge and navigation layout. */
header .logo img{width:90%;object-position:left center}
/* Contact keeps the editorial heading and gives the existing right column a form. */
.contact{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);column-gap:clamp(40px,5vw,80px)}
.contact>.label{grid-column:1/-1}
.contact h2{grid-column:1;grid-row:2}
.contact .contact-bottom{display:contents}
.contact .contact-symbol{grid-column:1;grid-row:3;justify-self:start;align-self:end;margin-top:35px}
.contact-symbol .icon{display:block;transform-origin:center}
.contact .contact-form{position:relative;z-index:1;grid-column:2;grid-row:2/span 2;align-self:start;min-width:0;margin-top:45px;display:flex;flex-direction:column;gap:28px}
.contact-field>label,.contact-services legend{display:block;font-size:12px;font-weight:500;letter-spacing:.035em;margin-bottom:12px;color:#dedee2}
.contact-field>label span{color:#858589;font-weight:400}
.contact-field input,.contact-field textarea{display:block;width:100%;min-width:0;font:inherit;font-size:15px;line-height:1.5;color:var(--white);background:#ffffff03;border:1px solid #ffffff26;border-radius:14px;padding:15px 17px;transition:border-color .35s var(--ease-soft),background-color .35s var(--ease-soft)}
.contact-field textarea{resize:vertical;min-height:116px}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:#858589;opacity:1}
.contact-field input:hover,.contact-field textarea:hover{border-color:#ffffff48}
.contact-field input:focus-visible,.contact-field textarea:focus-visible{outline:2px solid #3682ff;outline-offset:3px;border-color:#3682ff;background:#065bff08}
.contact-services{border:0;padding:0;margin:0;min-width:0}
.contact-services legend{padding:0}
.contact-options{display:flex;flex-wrap:wrap;gap:10px}
.service-choice{position:relative;cursor:pointer;max-width:100%}
.service-choice input{position:absolute;width:1px;height:1px;opacity:0;clip-path:inset(50%)}
.service-choice span{display:block;padding:12px 17px;border:1px solid #ffffff26;border-radius:999px;font-size:13px;line-height:1.4;color:#bdbdc3;transition:background-color .35s var(--ease-soft),border-color .35s var(--ease-soft),color .35s var(--ease-soft)}
.service-choice:hover span{border-color:#ffffff60;color:#fff}
.service-choice input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff}
.service-choice input:focus-visible+span{outline:2px solid #72a3ff;outline-offset:4px}
.contact .contact-form .button{align-self:start;gap:28px}
.contact .contact-error{font-size:12px;color:#ffb4b4;margin:9px 0 0;line-height:1.5}
.contact .contact-error[hidden]{display:none}
.contact-field input[aria-invalid=true]{border-color:#ffb4b4}
@media(max-width:1100px){.contact{grid-template-columns:minmax(0,1fr)}.contact .contact-form{grid-column:1;grid-row:4;width:min(100%,580px);justify-self:end;margin-top:35px}.contact .contact-symbol{grid-row:3}}
@media(max-width:620px){.contact .contact-form{margin-top:32px;gap:24px;width:100%}.contact .contact-form .button{width:100%}.contact-field input,.contact-field textarea{font-size:16px}.service-choice span{padding:12px 15px}}
@media(prefers-reduced-motion:reduce){.contact-symbol .icon{transform:none!important}.contact-field input,.contact-field textarea,.service-choice span{transition:none}}

.contact .contact-glow{pointer-events:none}
/* Hero refinement: quieter graphics and a slightly more compact content block. */
.hero h1{font-size:clamp(56.4px,6.486vw,111.86px);margin-bottom:25px}
.hero h1,.hero .hero-bottom{top:-38px}
.hero .button{min-height:64px;padding:8px 8px 8px 27px;gap:30px;font-size:17px}
.hero .button .cta-circle{width:46px;height:46px}
.hero-graphics-motion{opacity:.75}
@media(min-width:1500px){.hero h1{margin-bottom:34px}.hero .button{min-height:80px;padding:9px 9px 9px 33px;gap:38px;font-size:21px}.hero .button .cta-circle{width:58px;height:58px}.hero .button .cta-circle span{font-size:26px}}
@media(min-width:621px) and (max-width:1000px){.hero h1{font-size:7.05vw}}
@media(max-width:620px){.hero h1{font-size:9.118vw;margin-bottom:18px}.hero h1,.hero .hero-bottom{top:-22px}.hero .button{min-height:52px;min-width:198px;padding:7px 7px 7px 20px;gap:22px;font-size:13.5px}.hero .button .cta-circle{width:36px;height:36px}.hero-graphics-motion{opacity:.36}}
/* Editorial portfolio: shared card system, restrained depth and orbital accents. */
.projects{position:relative;isolation:isolate;overflow:hidden;padding-top:110px;padding-bottom:120px}
.projects:before{content:'';position:absolute;z-index:-1;pointer-events:none;right:-420px;top:110px;width:900px;height:1100px;border:1px solid #065bff16;border-radius:50%;transform:rotate(28deg);background:radial-gradient(ellipse at 45% 60%,#065bff09,transparent 64%)}
.projects:after{content:'';position:absolute;z-index:-1;pointer-events:none;right:10%;top:370px;width:3px;height:3px;border-radius:50%;background:#4285ff66;box-shadow:0 0 14px 3px #065bff26}
.projects .section-heading{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:34px 60px;margin-bottom:52px}
.projects .section-heading>.label{display:flex;align-items:center;gap:12px;color:#a4a4ac;font-size:11px;letter-spacing:.17em}
.projects .section-heading>.label:before{content:'';width:23px;height:1px;background:var(--blue)}
.projects .section-heading h2{white-space:normal}
.projects .section-heading>p{max-width:355px;font-size:15px;line-height:1.75;color:#96969e;padding-left:20px;border-left:1px solid #065bff80}
.projects .project-filters{gap:12px;padding-bottom:30px;margin-bottom:40px;border-color:#ffffff12}
.projects .project-filters button{padding:12px 21px;min-height:46px;gap:21px;border-color:#ffffff26;color:#b7b7bf;background:#ffffff02;font-size:13px}
.projects .project-filters button span{font-size:10px;font-variant-numeric:tabular-nums}
.projects .project-filters button[aria-pressed=true]{background:#f4f3ef;border-color:#f4f3ef;color:#090909}
.projects .project-filters button:hover{border-color:#ffffff70;color:#fff}
.projects .project-filters button[aria-pressed=true]:hover{color:#090909;border-color:#fff;background:#fff}
.projects .project-grid{gap:30px 26px;align-items:stretch}
.projects .project{margin-bottom:0;display:flex;min-width:0}
.projects .project[hidden]{display:none}
.projects .portfolio-card{display:flex;flex-direction:column;width:100%;height:100%;padding:10px;background:#101012;border:1px solid #ffffff15;border-radius:24px;transition:transform .3s var(--ease-soft),border-color .3s var(--ease-soft),background-color .3s var(--ease-soft),box-shadow .3s var(--ease-soft)}
.projects .project-grid .project-image{flex-shrink:0;border-radius:16px}
.projects .project-grid .project-caption{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:23px 14px 22px}
.projects .project-grid .project-caption h3{font-size:clamp(22px,1.9vw,29px);font-weight:500;line-height:1.2;letter-spacing:-.035em}
.projects .project[data-category=social] .project-caption h3{font-size:23px}
.projects .project-caption>span{font-size:12px;color:#92929c;line-height:1.5;letter-spacing:0;margin:0}
.projects .portfolio-visit{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:auto 14px 8px;padding:17px 0 0;border-bottom:0;border-top:1px solid #ffffff12;font-size:12px;color:#c5c5cc}
.projects .portfolio-visit .icon{width:34px;height:34px;padding:8px;border:1px solid #ffffff29;border-radius:50%;color:#e8e8ed;transition:transform .3s var(--ease-soft),background-color .3s var(--ease-soft),border-color .3s var(--ease-soft)}
@media(hover:hover) and (pointer:fine){.projects .portfolio-card:hover{transform:translateY(-7px);border-color:#065bff66;background:#121216;box-shadow:0 16px 34px -24px #000}.projects .portfolio-card:hover .portfolio-visit{color:#f4f3ef;border-color:#ffffff20}.projects .portfolio-card:hover .portfolio-visit .icon{transform:translate(2px,-2px);background:#065bff18;border-color:#065bff80}}
@media(min-width:621px) and (max-width:1000px){.projects .section-heading{grid-template-columns:minmax(0,1fr);gap:28px}.projects .section-heading>p{justify-self:start;max-width:440px}.projects .project-grid{gap:26px 20px}}
@media(max-width:620px){.projects{padding-top:76px;padding-bottom:80px}.projects .section-heading{grid-template-columns:minmax(0,1fr);gap:26px;margin-bottom:32px}.projects .section-heading>p{justify-self:start;max-width:100%;font-size:14px;padding-left:15px}.projects .project-filters{gap:8px;margin-bottom:28px;padding-bottom:24px}.projects .project-filters button{padding:11px 14px;gap:9px;font-size:12px;min-height:44px}.projects .project-grid{gap:26px}.projects .portfolio-card{padding:8px;border-radius:22px}.projects .project-grid .project-caption{padding:20px 12px;gap:8px}.projects .project-grid .project-caption h3{font-size:23px}.projects .portfolio-visit{margin:0 12px 8px;padding-top:15px}.projects:before{opacity:.55}.projects:after{opacity:.5}}
@media(prefers-reduced-motion:reduce){.projects .portfolio-card,.projects .portfolio-visit .icon,.projects .project-filters button{transition:none!important;transform:none!important}}
/* Whole-card focus; no dimensions or pointer behavior change. */
.projects .portfolio-card{opacity:1;filter:brightness(1);transition:opacity .35s ease,filter .35s ease,border-color .35s ease,box-shadow .35s ease,transform .35s ease,background-color .35s ease}
.projects .has-project-focus .project:not(.is-project-active) .portfolio-card{opacity:.35;filter:brightness(.4);border-color:#ffffff15;box-shadow:none;transform:none}
.projects .has-project-focus .is-project-active .portfolio-card{opacity:1;filter:brightness(1);border-color:#065bff99;box-shadow:0 0 22px -8px #065bff30}
@media(hover:none),(pointer:coarse){.projects .has-project-focus .project:not(.is-project-active) .portfolio-card{opacity:.3}}
@media(prefers-reduced-motion:reduce){.projects .portfolio-card{transition:none!important;transform:none!important}}
/* Hero CTA: restrained lift on mouse hover, with a smooth return. */
.hero .button{transition:background-color .45s var(--ease-soft),color .45s var(--ease-soft),border-color .45s var(--ease-soft),transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.hero .button:hover{transform:translateY(-5px);box-shadow:0 12px 24px -12px #065bff55}}
/* Existing orbit artwork gains diffuse light and independent depth layers. */
.hero-graphics-motion{opacity:.88}
.hero-depth{transform-box:view-box;transform-origin:center}
@media(max-width:620px),(hover:none),(pointer:coarse){.hero-graphics-motion{opacity:.48}.hero-lightfield{animation:hero-ambient-breathe 9s ease-in-out infinite;animation-play-state:paused}.hero-in-view .hero-lightfield{animation-play-state:running}}
@keyframes hero-ambient-breathe{0%,100%{opacity:.72}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero-depth{transform:none!important;animation:none!important}}

/* Center the manifesto headline within the remaining pinned space. */
.manifesto-track .manifesto h2{margin-block:auto}
.header-cta{justify-content:center}

/* Space Grotesk throughout, with a bold hero headline. */
.hero h1{font-weight:700}