.portfolio-page{max-width:1180px}
.portfolio-intro{max-width:800px;margin-bottom:58px}
.portfolio-intro .page-lead{margin-bottom:30px}
.portfolio-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.portfolio-project{overflow:hidden;border:1px solid var(--line);border-radius:20px;background:rgba(15,23,42,.78);transition:transform .2s,border-color .2s}
.portfolio-project:hover{transform:translateY(-3px);border-color:rgba(84,213,227,.42)}
.portfolio-project-featured{grid-column:1/-1;display:grid;grid-template-columns:1.08fr .92fr;align-items:center}
.portfolio-project-image{height:290px;overflow:hidden;background:linear-gradient(135deg,rgba(79,140,255,.16),rgba(156,124,255,.12))}
.portfolio-project-featured .portfolio-project-image{height:100%;min-height:380px}
.portfolio-project-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.portfolio-project-copy{padding:24px}
.portfolio-project-featured .portfolio-project-copy{padding:40px}
.portfolio-project-copy .project-type{margin:0 0 12px;color:var(--cyan);font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}
.portfolio-project-copy h2{margin:0 0 12px;color:#fff;font-family:var(--display);font-size:clamp(23px,2.5vw,32px);line-height:1.16;letter-spacing:-.6px}
.portfolio-project-featured .portfolio-project-copy h2{font-size:clamp(30px,4vw,45px)}
.portfolio-project-copy>p:not(.project-type){margin:0 0 19px;color:var(--muted);font-size:14px;line-height:1.7}
.portfolio-project-copy>a{color:#e5edff;font-size:12px;font-weight:700;text-decoration:none}
.portfolio-project-copy>a span{margin-left:5px;color:var(--cyan)}
.portfolio-note{margin-top:54px;padding:30px;border:1px solid rgba(84,213,227,.25);border-radius:18px;background:linear-gradient(110deg,rgba(79,140,255,.12),rgba(156,124,255,.08))}
.portfolio-note .eyebrow{margin:0 0 14px;font-size:10px}
.portfolio-note h2{max-width:650px;margin:0 0 12px;font-family:var(--display);font-size:clamp(27px,4vw,38px);line-height:1.15}
.portfolio-note>p:not(.eyebrow){max-width:760px;margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.7}
@media(max-width:760px){.portfolio-project-featured{grid-template-columns:1fr}.portfolio-project-featured .portfolio-project-image{min-height:0;height:300px}.portfolio-project-featured .portfolio-project-copy{padding:26px}}
@media(max-width:560px){.portfolio-projects{grid-template-columns:1fr;gap:16px}.portfolio-intro{margin-bottom:38px}.portfolio-project-image{height:240px}.portfolio-note{padding:23px}}