.portfolio-page{background:#020713}
.portfolio-page .site-nav .is-current{color:#e9fcff}.portfolio-page .site-nav .is-current:after{right:0}
.portfolio-hero{min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;padding:calc(var(--header) + 70px) max(var(--gutter),calc((100vw - var(--container))/2)) 100px;background:radial-gradient(circle at 78% 30%,rgba(20,126,161,.2),transparent 33%),radial-gradient(circle at 18% 92%,rgba(84,50,160,.13),transparent 31%),#020713}
.portfolio-hero:before{content:"";position:absolute;width:min(60vw,850px);aspect-ratio:1;right:-10%;top:-25%;border:1px solid rgba(103,232,249,.11);border-radius:50%;box-shadow:0 0 0 80px rgba(103,232,249,.015),0 0 0 180px rgba(103,232,249,.01)}
.portfolio-hero__grid{position:absolute;inset:48% -10% -38%;opacity:.22;background-image:linear-gradient(rgba(78,221,244,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(78,221,244,.13) 1px,transparent 1px);background-size:58px 58px;transform:perspective(700px) rotateX(64deg);transform-origin:center top;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000)}
.portfolio-hero__copy{position:relative;z-index:2;max-width:1040px}.portfolio-hero .eyebrow{margin-bottom:34px}.portfolio-hero h1{max-width:1020px;margin-bottom:38px;font-size:clamp(64px,8.7vw,142px);font-weight:520;line-height:.88;letter-spacing:-.065em;text-wrap:balance}.portfolio-hero__copy>p:last-child{max-width:640px;color:#a7bdc6;font-size:clamp(17px,1.5vw,22px);line-height:1.65}.portfolio-scroll{position:absolute;z-index:2;left:max(var(--gutter),calc((100vw - var(--container))/2));bottom:34px;color:#6d8995;font:400 8px Michroma,sans-serif;letter-spacing:.16em}.portfolio-scroll span{margin-left:10px;color:var(--cyan)}
.portfolio-number{color:#6d8995;font:400 8px Michroma,sans-serif;letter-spacing:.18em}.featured-project{position:relative;padding:150px max(var(--gutter),calc((100vw - var(--container))/2));display:grid;grid-template-columns:.76fr 1.24fr;gap:clamp(60px,8vw,125px);align-items:center;background:radial-gradient(circle at 73% 50%,rgba(34,211,238,.09),transparent 32%),linear-gradient(180deg,#020713,#051524 56%,#020713)}
.featured-copy{position:relative;z-index:2}.featured-copy .portfolio-number{margin-bottom:45px}.project-kicker{margin-bottom:15px;color:var(--cyan);font:400 8px Michroma,sans-serif;letter-spacing:.16em}.featured-copy h2{margin-bottom:24px;font-size:clamp(56px,7vw,104px);font-weight:520;line-height:.9;letter-spacing:-.06em}.featured-lead{max-width:500px;margin-bottom:22px;color:#dff8fc;font-size:clamp(21px,2vw,30px);line-height:1.25;letter-spacing:-.025em}.featured-copy>p:not(.portfolio-number):not(.project-kicker):not(.featured-lead){max-width:520px;color:#8da9b5;line-height:1.75}.project-services{list-style:none;margin:34px 0;padding:0;border-top:1px solid rgba(255,255,255,.1)}.project-services li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);color:#a9c1ca;font-size:12px}.project-services li:before{content:"";display:inline-block;width:5px;height:5px;margin:0 13px 2px 0;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px var(--cyan)}.portfolio-link{display:inline-flex;align-items:center;gap:15px;margin-top:8px;padding:13px 18px;border:1px solid rgba(103,232,249,.32);border-radius:999px;color:#d8faff;font-size:12px;font-weight:700;transition:.25s}.portfolio-link span{color:var(--cyan)}.portfolio-link:hover{border-color:var(--cyan);background:rgba(34,211,238,.08);transform:translateY(-2px)}
.featured-browser{position:relative;overflow:hidden;border:1px solid rgba(129,231,249,.27);border-radius:22px;background:#07111f;box-shadow:0 45px 100px rgba(0,0,0,.5),0 0 70px rgba(34,211,238,.06)}.featured-browser:before{content:"";position:absolute;z-index:-1;inset:-20%;border:1px solid rgba(103,232,249,.12);border-radius:50%}.browser-chrome,.project-bar{display:flex;align-items:center;gap:14px;background:#07111e;border-bottom:1px solid rgba(255,255,255,.07)}.browser-chrome{height:48px;padding:0 17px}.browser-chrome>span,.project-bar>span{display:flex;gap:6px}.browser-chrome i,.project-bar i{display:block;width:7px;height:7px;border-radius:50%}.browser-chrome i:first-child,.project-bar i:first-child{background:#ff6158}.browser-chrome i:nth-child(2),.project-bar i:nth-child(2){background:#ffbd2e}.browser-chrome i:last-child,.project-bar i:last-child{background:#28c840}.browser-chrome small{flex:1;color:#6c8793;font-size:8px}.browser-chrome b{padding:6px 8px;border-radius:99px;background:rgba(34,211,238,.08);color:#6edbea;font:400 6px Michroma,sans-serif;letter-spacing:.08em}.featured-screen{aspect-ratio:2.05/1;overflow:hidden}.featured-screen img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}.featured-browser:hover .featured-screen img{transform:scale(1.025)}
.portfolio-index{padding:150px max(var(--gutter),calc((100vw - var(--container))/2));background:#020713}.portfolio-index__head{display:flex;justify-content:space-between;align-items:end;gap:80px;margin-bottom:70px}.portfolio-index__head h2{margin:18px 0 0;font-size:clamp(56px,6.5vw,96px);font-weight:520;line-height:.92;letter-spacing:-.055em}.portfolio-index__head>p{width:min(38%,440px);margin-bottom:0;color:#8da7b2;line-height:1.75}
.portfolio-filters{display:flex;align-items:center;gap:8px;margin-bottom:52px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.1);overflow-x:auto}.portfolio-filters button{flex:0 0 auto;padding:11px 15px;border:1px solid rgba(103,232,249,.13);border-radius:999px;background:rgba(5,22,37,.5);color:#75909b;font-size:11px;cursor:pointer;transition:.22s}.portfolio-filters button span{margin-left:7px;color:#4f6974;font:400 7px Michroma,sans-serif}.portfolio-filters button:hover,.portfolio-filters button.is-active{border-color:rgba(103,232,249,.42);background:rgba(34,211,238,.08);color:#dffbff}.portfolio-filters button.is-active span{color:var(--cyan)}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:70px 34px}.project-card{min-width:0;transition:opacity .25s,transform .25s}.project-card[hidden]{display:none}.project-visual{display:block;overflow:hidden;border:1px solid rgba(121,220,237,.18);border-radius:18px;background:#07111f;box-shadow:0 25px 60px rgba(0,0,0,.35);transition:border-color .3s,box-shadow .3s,transform .3s}.project-visual:hover,.project-visual:focus-visible{border-color:rgba(103,232,249,.55);box-shadow:0 32px 76px rgba(0,0,0,.48),0 0 40px rgba(34,211,238,.08);transform:translateY(-5px)}.project-bar{height:40px;padding:0 13px}.project-bar small{min-width:0;overflow:hidden;color:#58737f;font-size:7px;text-overflow:ellipsis;white-space:nowrap}.project-visual>img{display:block;width:100%;height:auto;object-fit:contain;object-position:top;transition:transform .85s cubic-bezier(.2,.7,.2,1)}.project-visual:hover>img,.project-visual:focus-visible>img{transform:scale(1.012)}.project-meta{padding:27px 6px 0}.project-meta>p:first-child{margin-bottom:13px;color:#6f8c98;font:400 7px Michroma,sans-serif;letter-spacing:.14em}.project-meta>p:first-child span{margin-right:10px;color:var(--cyan)}.project-meta h3{margin-bottom:13px;font-size:clamp(27px,2.8vw,42px);font-weight:520;line-height:1.04;letter-spacing:-.04em}.project-meta>p:not(:first-child){max-width:600px;margin-bottom:20px;color:#829da8;line-height:1.65;font-size:13px}.project-meta>a{display:inline-flex;gap:10px;color:#c8f8ff;font-size:12px;font-weight:700}.project-meta>a span{color:var(--cyan)}.filter-empty{padding:70px 0;text-align:center;color:#78939e}
.portfolio-closing{min-height:740px;position:relative;overflow:hidden;display:grid;place-items:center;padding:130px var(--gutter);text-align:center;background:radial-gradient(circle at 50% 100%,rgba(34,211,238,.18),transparent 39%),#020713}.portfolio-closing:before{content:"";position:absolute;width:min(70vw,900px);aspect-ratio:1;left:50%;bottom:-74%;transform:translateX(-50%);border:1px solid rgba(103,232,249,.14);border-radius:50%;box-shadow:0 0 110px rgba(34,211,238,.07)}.portfolio-closing__line{position:absolute;left:8%;right:8%;top:24%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 16px var(--cyan)}.portfolio-closing>div{position:relative;z-index:2}.portfolio-closing h2{margin:20px 0 28px;font-size:clamp(52px,7.4vw,105px);font-weight:520;line-height:.92;letter-spacing:-.06em}.portfolio-closing>div>p:not(.eyebrow){max-width:620px;margin:0 auto 38px;color:#91aab5;font-size:17px;line-height:1.65}
.reveal-portfolio{opacity:1;transform:none}.js .reveal-portfolio{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}.js .reveal-portfolio.is-visible{opacity:1;transform:none}
@media (max-width:1050px){.featured-project{grid-template-columns:1fr;gap:65px}.featured-copy{max-width:720px}.portfolio-index__head{align-items:start}.portfolio-grid{gap:60px 24px}.portfolio-page .site-nav{gap:22px}}
@media (max-width:800px){.portfolio-hero{min-height:830px;padding:calc(var(--header) + 75px) 22px 90px;align-items:flex-start}.portfolio-hero h1{margin-top:80px;font-size:clamp(56px,15vw,82px)}.portfolio-scroll{left:22px}.featured-project,.portfolio-index{padding:100px 22px}.featured-project{gap:50px}.featured-copy .portfolio-number{margin-bottom:32px}.featured-browser{border-radius:15px}.browser-chrome b{display:none}.portfolio-index__head{display:block;margin-bottom:45px}.portfolio-index__head>p{width:100%;margin-top:28px}.portfolio-index__head h2{font-size:clamp(52px,14vw,76px)}.portfolio-grid{grid-template-columns:1fr;gap:60px}.portfolio-closing{min-height:650px;padding:110px 22px}.portfolio-closing h2{font-size:clamp(48px,13.5vw,74px)}}
@media (max-width:430px){.portfolio-hero{min-height:760px}.portfolio-hero h1{margin-top:56px}.featured-screen{aspect-ratio:1.65/1}.project-meta h3{font-size:31px}.portfolio-filters{margin-inline:-22px;padding-inline:22px}}
@media (prefers-reduced-motion:reduce){.featured-screen img,.project-visual,.project-visual>img,.reveal-portfolio{transition:none!important}}