.portfolio-page{background:var(--bg)}
.portfolio-header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;min-height:var(--header);padding:12px var(--pad);border-bottom:1px solid var(--line);background:rgba(2,5,10,.88)}
.portfolio-header .brand-lockup{width:clamp(176px,15vw,235px)}
.portfolio-header nav{display:flex;align-items:center;gap:clamp(18px,3vw,44px);color:#8e9aac;font:400 .58rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase}
.portfolio-header nav a,.portfolio-header nav span{padding:12px 0}.portfolio-header nav a:hover,.portfolio-header nav a:focus-visible{color:var(--cyan);outline:none}.portfolio-header nav span{color:#d4dde8;border-bottom:1px solid var(--cyan)}

.portfolio-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.55fr);align-items:end;gap:clamp(50px,8vw,150px);min-height:calc(84svh - var(--header));padding:clamp(90px,10vw,180px) var(--pad) clamp(80px,9vw,150px);overflow:hidden;border-bottom:1px solid var(--line)}
.portfolio-hero::before{position:absolute;inset:11% -12% auto auto;z-index:-1;width:min(72vw,1120px);height:72%;content:"";transform:skewX(-17deg);background:repeating-linear-gradient(180deg,transparent 0 98px,rgba(19,217,229,.13) 99px,transparent 100px)}
.portfolio-hero::after{position:absolute;right:4%;bottom:0;z-index:-1;width:46vw;max-width:760px;height:1px;content:"";transform:rotate(-12deg);transform-origin:right;background:linear-gradient(90deg,transparent,var(--blue),var(--cyan))}
.portfolio-hero-copy{max-width:1120px}.portfolio-hero h1{font-family:var(--display);font-size:clamp(4rem,9vw,10.4rem);font-weight:600;line-height:.84;letter-spacing:-.065em}.portfolio-hero h1 em,.portfolio-principle h2 em{color:transparent;font-style:normal;background:linear-gradient(100deg,#0662ff,#13d9e5);background-clip:text;-webkit-background-clip:text}.portfolio-hero-copy>p:last-child{max-width:760px;margin-top:42px;color:#bcc7d4;font-size:clamp(1.1rem,1.65vw,1.42rem);line-height:1.65}
.portfolio-register{display:grid;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}.portfolio-register span{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:18px;min-height:78px;border-bottom:1px solid var(--line);color:#8190a4;font:400 .58rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}.portfolio-register span:last-child{border-bottom:0}.portfolio-register b{color:var(--cyan);font-family:var(--display);font-size:1.4rem;font-weight:600;letter-spacing:-.03em}

.portfolio-index{max-width:var(--max);margin:0 auto;padding:clamp(92px,10vw,170px) var(--pad)}
.portfolio-index-head{display:grid;grid-template-columns:1fr minmax(300px,.45fr);align-items:end;gap:60px;margin-bottom:clamp(60px,8vw,110px)}.portfolio-index-head span{color:var(--cyan);font:400 .6rem/1.4 var(--mono);letter-spacing:.14em}.portfolio-index-head h2{margin-top:20px;font-family:var(--display);font-size:clamp(3rem,6.2vw,7rem);font-weight:600;line-height:.92;letter-spacing:-.055em}.portfolio-index-head p{max-width:510px;padding-bottom:8px}
.project-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(58px,7vw,116px) clamp(28px,4vw,68px)}
.project-card{grid-column:span 5;display:block;align-self:start;outline:none}.project-card--wide{grid-column:span 7}.project-card:nth-child(4n+2),.project-card:nth-child(4n+3){margin-top:clamp(48px,7vw,105px)}
.project-preview{position:relative;overflow:hidden;aspect-ratio:1.44/1;border:1px solid var(--line-strong);background:#050910;box-shadow:0 30px 80px rgba(0,0,0,.22);transition:border-color .3s ease,transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s ease}.project-preview::after{position:absolute;inset:0;content:"";pointer-events:none;background:linear-gradient(130deg,transparent 54%,rgba(19,217,229,.08)),linear-gradient(0deg,rgba(2,5,10,.32),transparent 35%)}.project-preview img{width:100%;height:calc(100% - 32px);object-fit:cover;object-position:top;transition:transform .75s cubic-bezier(.2,.7,.2,1),filter .6s ease}.project-preview--top img{object-position:center top}.project-card--passport .project-preview img{object-position:center}
.browser-bar{position:relative;z-index:2;display:grid;grid-template-columns:6px 6px 6px 1fr;align-items:center;gap:7px;height:32px;padding:0 12px;border-bottom:1px solid var(--line);background:#060b13}.browser-bar i{width:6px;height:6px;border-radius:50%;background:#344258}.browser-bar i:nth-child(2){background:#8c6b32}.browser-bar i:nth-child(3){background:#126876}.browser-bar span{justify-self:end;color:#68778d;font:400 .48rem/1 var(--mono);letter-spacing:.09em}
.project-preview figcaption{position:absolute;right:16px;bottom:14px;z-index:3;display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid rgba(19,217,229,.4);background:rgba(2,5,10,.84);color:#d7e1eb;font:400 .52rem/1 var(--mono);letter-spacing:.11em;text-transform:uppercase}.project-preview figcaption span{color:var(--cyan);font-size:.8rem}
.project-copy{display:grid;grid-template-columns:1fr auto;gap:0 24px;padding-top:28px;border-top:1px solid transparent;transition:border-color .3s ease}.project-number{grid-column:1/-1;margin-bottom:18px;color:var(--cyan);font:400 .56rem/1.4 var(--mono);letter-spacing:.12em}.project-copy h3{font-family:var(--display);font-size:clamp(2rem,3.25vw,4rem);font-weight:600;line-height:.95;letter-spacing:-.05em}.project-copy>p{grid-column:1/-1;max-width:720px;margin-top:18px;font-size:clamp(.98rem,1.05vw,1.08rem)}.project-copy ul{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0;padding:0;list-style:none}.project-copy li{padding:8px 10px;border:1px solid var(--line);color:#78869a;font:400 .5rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.project-card:hover .project-preview,.project-card:focus-visible .project-preview{transform:translateY(-7px);border-color:var(--cyan);box-shadow:0 34px 100px rgba(0,72,210,.14)}.project-card:hover .project-preview img,.project-card:focus-visible .project-preview img{transform:scale(1.018);filter:brightness(1.06)}.project-card:hover .project-copy,.project-card:focus-visible .project-copy{border-top-color:var(--line-strong)}

.portfolio-principle{position:relative;display:grid;grid-template-columns:.4fr 1.25fr .7fr;align-items:end;gap:clamp(28px,5vw,90px);min-height:62svh;padding:clamp(100px,11vw,190px) var(--pad);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(130deg,rgba(7,91,255,.08),transparent 55%)}.portfolio-principle::before{position:absolute;inset:auto -6% 20% 36%;height:1px;content:"";transform:rotate(-8deg);background:linear-gradient(90deg,var(--gold),var(--blue),var(--cyan),transparent)}.portfolio-principle>p:first-child{align-self:start;color:var(--gold);font:400 .6rem/1.4 var(--mono);letter-spacing:.14em}.portfolio-principle h2{position:relative;font-family:var(--display);font-size:clamp(3.2rem,6.8vw,8rem);font-weight:600;line-height:.9;letter-spacing:-.06em}.portfolio-principle>p:not(:first-child){position:relative;max-width:520px}.portfolio-principle a{grid-column:3;justify-self:start;margin-top:30px;padding:15px 18px;border:1px solid var(--line-strong);color:#dbe4ed;font:400 .58rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}.portfolio-principle a span{color:var(--cyan)}.portfolio-principle a:hover,.portfolio-principle a:focus-visible{border-color:var(--cyan);outline:none}

@media(max-width:1000px){.portfolio-hero{grid-template-columns:1fr;min-height:auto}.portfolio-register{grid-template-columns:repeat(3,1fr)}.portfolio-register span{grid-template-columns:1fr;gap:8px;padding:18px;border-right:1px solid var(--line)}.portfolio-register span:last-child{border-right:0}.portfolio-index-head{grid-template-columns:1fr}.project-grid{grid-template-columns:1fr 1fr}.project-card,.project-card--wide{grid-column:auto}.project-card:nth-child(4n+2),.project-card:nth-child(4n+3){margin-top:0}.portfolio-principle{grid-template-columns:1fr 1fr}.portfolio-principle>p:first-child{grid-column:1/-1}.portfolio-principle h2{grid-column:1/-1}.portfolio-principle a{grid-column:2}}
@media(max-width:700px){.portfolio-header .brand-lockup{flex:0 0 145px;width:145px}.portfolio-header nav a:first-child{display:none}.portfolio-header nav{flex:0 1 auto;gap:12px;font-size:.44rem;letter-spacing:.09em}.portfolio-hero{padding-top:82px}.portfolio-hero h1{font-size:clamp(3.6rem,18vw,6.2rem)}.portfolio-register{grid-template-columns:1fr}.portfolio-register span{grid-template-columns:48px 1fr;padding:0;border-right:0}.project-grid{grid-template-columns:1fr}.project-card{grid-column:1}.portfolio-index-head{gap:28px}.project-preview{aspect-ratio:1.24/1}.project-copy{padding-top:22px}.portfolio-principle{grid-template-columns:1fr}.portfolio-principle>p:first-child,.portfolio-principle h2,.portfolio-principle a{grid-column:1}.portfolio-principle a{margin-top:0}.portfolio-page .site-footer{display:block}.portfolio-page .footer-meta{margin-top:26px;display:grid;gap:12px}.portfolio-page .back-top{display:inline-block;margin-top:30px}}
@media(prefers-reduced-motion:reduce){.project-preview,.project-preview img{transition:none}.project-card:hover .project-preview,.project-card:focus-visible .project-preview,.project-card:hover .project-preview img,.project-card:focus-visible .project-preview img{transform:none}}