/* Portfolio uses the homepage's typography, browser frames and shared buttons. */
.portfolio-page{background:var(--paper)}
.portfolio-page a:focus-visible,.portfolio-page button:focus-visible,.portfolio-page input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.portfolio-page .desktop-nav a[aria-current="page"]{color:var(--cyan)}
.portfolio-intro{padding:0;background:#061014;min-height:0;position:relative;overflow:hidden;isolation:isolate}
.portfolio-intro .page-glow{pointer-events:none}
.portfolio-stage{padding-top:62px;padding-bottom:60px;position:relative}
.portfolio-stage .eyebrow{font-size:12px;letter-spacing:.07em;color:#b8d1d1;margin-bottom:24px}
.portfolio-stage h1{font-size:clamp(52px,5.5vw,88px);line-height:1.04;letter-spacing:-.055em;font-weight:400;margin:0 0 24px;max-width:1100px}
.portfolio-stage>p{font-size:17px;line-height:1.6;color:#aebfc1;max-width:610px;margin:0}
.portfolio-library{padding-top:60px;padding-bottom:64px;scroll-margin-top:24px}
.portfolio-library-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:32px}
.portfolio-library-heading .eyebrow{font-size:12px;margin-bottom:15px}
.portfolio-library-heading h2{font-size:clamp(38px,4.2vw,64px);font-weight:400;line-height:1.08;letter-spacing:-.045em;margin:0}
.portfolio-library-heading h2 span{color:#6b8283}
.portfolio-library-heading>p{font-size:15px;line-height:1.6;color:var(--muted);margin:0;max-width:300px}
.portfolio-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;border-block:1px solid #cbd8d7;position:static;background:transparent}
.portfolio-toolbar .gallery-filters{display:flex;gap:7px;flex-wrap:wrap;margin:0}
.portfolio-toolbar .gallery-filters button{padding:10px 14px;border-radius:100px;border:1px solid transparent;color:#496164;background:transparent;font-size:14px;line-height:1.3;white-space:nowrap;transition:background .25s,color .25s}
.portfolio-toolbar .gallery-filters button.active{background:var(--ink);color:white;border-color:var(--ink)}
.portfolio-toolbar .gallery-filters button:hover{border-color:#87bcbc}
.portfolio-search{display:flex;align-items:center;gap:8px;min-width:160px;max-width:205px;flex:0 1 205px}
.portfolio-search>svg{width:18px;height:18px;color:#537c80;flex-shrink:0}
.portfolio-search input{width:100%;min-width:0;border:0;border-bottom:1px solid #a8c0c1;background:transparent;font-size:14px;padding:10px 0;color:#12383e;border-radius:0}
.portfolio-search input::placeholder{color:#628083}
.portfolio-results{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:22px 0 30px;font-size:12px;color:#658081}
.portfolio-results .gallery-count{margin:0;font-size:12px;color:#325457}
/* Individual branded browser cards with compact captions. */
.portfolio-page .gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start;padding:0;border-radius:0;background:transparent;border:0}
.portfolio-page .gallery-card{min-width:0;position:relative;border-radius:14px;overflow:hidden;isolation:isolate;background:#08181e;border:1px solid #a4e4e430;box-shadow:0 8px 24px #0002;scroll-margin-top:24px;transition:box-shadow .45s,border-color .45s}
.portfolio-page .gallery-card:hover{box-shadow:0 16px 40px #0004;border-color:#71c1c2}
.portfolio-page .gallery-card[hidden]{display:none!important}
.portfolio-window{min-width:0;background:#102026;position:relative;border-bottom:1px solid #d3eded16}
.portfolio-browser{height:34px;display:flex;align-items:center;gap:5px;padding:0 15px;border-bottom:1px solid #d3eded16;background:linear-gradient(180deg,#1c3036,#102026)}
.portfolio-browser i{height:5px;width:5px;border-radius:50%;background:#669294;opacity:.8;flex-shrink:0}
.portfolio-browser>span{min-width:0;flex:1;text-align:center;font-size:10px;letter-spacing:.035em;color:#a5b9bd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateX(-10px)}
.portfolio-browser>svg{width:11px;height:11px;flex-shrink:0;color:#85adaf}
.portfolio-page .gallery-image{width:100%;height:auto;aspect-ratio:1.5;position:relative;display:block;border:0;border-radius:0;background:#12262b;padding:0;overflow:hidden}
.portfolio-page .gallery-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;aspect-ratio:auto;transform:none;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.portfolio-page .gallery-image:hover img{transform:scale(1.025)}
.portfolio-page .gallery-image>span{position:absolute;inset:auto 16px 16px auto;display:flex;align-items:center;gap:8px;padding:9px 13px;background:#10262cec;border:1px solid #9be2e23b;color:#d2eeee;border-radius:100px;font-size:12px;opacity:1;transform:none;transition:background .25s}
.portfolio-page .gallery-image>span svg{width:16px;height:16px}
.portfolio-page .gallery-image:hover>span{background:#26575d}
.portfolio-window:after{content:'';height:3px;display:block;background:linear-gradient(90deg,#345b6033,#8eb1b855,#345b6033);pointer-events:none}
.portfolio-page .portfolio-project-info{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 20px;background:radial-gradient(ellipse at 0% 0%,#16434a99,transparent 75%),linear-gradient(120deg,#0d272d,#071319)}
.portfolio-page .gallery-meta{margin:0;display:block;min-width:0;flex:1}
.portfolio-page .gallery-meta>div>span{display:block;font-size:12px;color:#a8c7cb;margin:0 0 6px}
.portfolio-page .gallery-meta h2{font-size:clamp(22px,2vw,28px);font-weight:400;line-height:1.15;letter-spacing:-.025em;margin:0;color:#f1ffff;overflow-wrap:anywhere}
.portfolio-page .gallery-meta h2 a{color:inherit;text-decoration:none}.portfolio-page .gallery-meta h2 a:hover{color:var(--cyan)}
.portfolio-page .portfolio-card-actions{display:flex;align-items:center;gap:0;margin:0;flex:none}
.portfolio-page .portfolio-card-actions .button{font-size:14px;min-height:44px;padding-left:18px;gap:13px;white-space:nowrap}
.portfolio-page .portfolio-card-actions .button-icon{width:34px;height:34px}
/* Wide features keep the collection varied, with the image above the same short caption. */
.portfolio-page .gallery-card.portfolio-feature{grid-column:1/-1;display:block}
.portfolio-page .portfolio-feature .gallery-image{aspect-ratio:1.8}
.portfolio-load{text-align:center;margin-top:42px}.portfolio-load>p{font-size:12px;color:#648083;margin:15px 0 0}
.portfolio-load .button{font-size:16px}.portfolio-load button[hidden]{display:none}
.portfolio-empty{padding:60px 20px;text-align:center;border:1px dashed #b7cecd;border-radius:15px}.portfolio-empty[hidden]{display:none}
.portfolio-empty h3{font-size:28px;font-weight:400;letter-spacing:-.03em}.portfolio-empty p{color:#607d7d;margin:12px 0 24px}.portfolio-empty button{padding:13px 23px;border-radius:100px;background:var(--ink);color:white;font-size:15px}
.portfolio-page #image-viewer{background:#0b2026;color:#e0f5f5;max-height:94svh;padding:22px;border:1px solid #78bbbd5e}.portfolio-page #image-viewer::backdrop{background:#030b10dd;backdrop-filter:blur(8px)}.portfolio-page #viewer-title{font-size:20px;margin:0 100px 18px 0}.portfolio-page .viewer-close{position:sticky;top:0;float:right;background:#d8f5f3;color:#092f34;border-radius:100px;padding:9px 15px;font-size:14px}.portfolio-page #viewer-image{display:block;width:100%;height:auto}
.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}
@media(max-width:1100px){.portfolio-toolbar{align-items:start}.portfolio-search{max-width:180px}.portfolio-page .portfolio-project-info{gap:14px;padding:16px}.portfolio-page .portfolio-card-actions .button{font-size:13px;gap:9px;padding-left:14px}}
@media(max-width:960px){.portfolio-page .desktop-nav{display:none}.portfolio-page .menu-toggle{display:block}.portfolio-toolbar{flex-wrap:wrap;gap:14px}.portfolio-search{max-width:none;flex-basis:100%}.portfolio-page .gallery{gap:22px}.portfolio-page .portfolio-project-info{flex-wrap:wrap}.portfolio-page .gallery-meta{flex-basis:100%}.portfolio-page .portfolio-feature .gallery-meta{flex-basis:auto}}
@media(max-width:800px){.portfolio-stage{padding-top:42px;padding-bottom:42px}.portfolio-stage h1{font-size:clamp(44px,7vw,64px)}.portfolio-library{padding-top:44px}.portfolio-library-heading{align-items:start;flex-direction:column;gap:15px}.portfolio-library-heading>p{max-width:none}.portfolio-library-heading>p br{display:none}}
@media(max-width:600px){.portfolio-page .gallery{grid-template-columns:1fr;gap:20px}.portfolio-page .portfolio-feature .gallery-image{aspect-ratio:1.5}.portfolio-page .portfolio-project-info{gap:12px;padding:16px}.portfolio-page .gallery-meta,.portfolio-page .portfolio-feature .gallery-meta{flex-basis:100%}.portfolio-toolbar .gallery-filters{flex-wrap:nowrap;overflow-x:auto;width:100%;padding:3px 0 6px;scrollbar-width:thin;scrollbar-color:#8bbbbd transparent}.portfolio-results>span{display:none}.portfolio-library-heading h2{font-size:var(--mobile-title,34px)}.portfolio-page .gallery-meta h2{font-size:24px}.portfolio-page .portfolio-card-actions .button{font-size:14px;padding-left:16px;gap:12px}}
@media(max-width:520px){.portfolio-stage{padding-top:36px;padding-bottom:36px}.portfolio-stage .eyebrow{font-size:12px;margin-bottom:18px}.portfolio-stage h1{font-size:clamp(38px,10vw,48px);line-height:1.05;margin-bottom:20px}.portfolio-stage>p{font-size:16px;line-height:1.55}.portfolio-library{padding-top:36px;padding-bottom:44px}.portfolio-library-heading{margin-bottom:24px}.portfolio-library-heading .eyebrow{font-size:12px}.portfolio-library-heading>p{font-size:16px}.portfolio-toolbar{padding:14px 0}.portfolio-results{margin:18px 0 24px}.portfolio-browser{height:30px;padding-inline:12px}.portfolio-browser>span{font-size:9px}.portfolio-page .gallery-image>span{inset:auto 12px 12px auto;font-size:11px;padding:8px 11px}.portfolio-load{margin-top:30px}.portfolio-page #image-viewer{padding:15px}.portfolio-page #viewer-title{font-size:17px}}
@media(max-width:360px){.portfolio-page .brand,.portfolio-page .brand img{width:124px}.portfolio-page .header-right{gap:5px}.portfolio-page .portfolio-project-info{padding:14px}.portfolio-page .gallery-meta h2{font-size:22px}}
/* On narrow cards, share the second row between platform and live link. */
@media(max-width:960px){
 .portfolio-page .portfolio-project-info{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px}
 .portfolio-page .gallery-meta,.portfolio-page .gallery-meta>div{display:contents}
 .portfolio-page .gallery-meta h2{grid-column:1/-1;grid-row:1}
 .portfolio-page .gallery-meta>div>span{grid-column:1;grid-row:2;margin:0}
 .portfolio-page .portfolio-card-actions{grid-column:2;grid-row:2}
}
@media(prefers-reduced-motion:reduce){.portfolio-page .gallery-card,.portfolio-page .gallery-image img{transition:none}.portfolio-page .gallery-image:hover img{transform:none}}