/* Portfolio: bold introduction, visual projects and restrained category navigation. */
.portfolio-page{background:#101c25}
.portfolio-page .site-header{position:relative;background:#102c42;border:0}
.portfolio-page .container{width:min(calc(100% - 4rem),1280px)}
.portfolio-hero{text-align:left;padding:clamp(4rem,8vw,8rem) 0;background:linear-gradient(115deg,#102c42 5%,#125777 58%,#147d87 100%);border-radius:0 0 clamp(50px,10vw,150px) 0}
.portfolio-hero::before{display:none}
.portfolio-hero h1{max-width:20ch;margin:0 0 2.2rem;font-size:clamp(2.8rem,6.3vw,6.7rem);font-weight:800;line-height:1.04;letter-spacing:-.055em}
.portfolio-hero h1 span{color:#a8edee}
.portfolio-hero .lede{margin:0 0 2rem;max-width:60ch;color:#e0eef4}
.portfolio-hero .eyebrow{color:#b7f2f4;margin-bottom:1.5rem}
.portfolio-jump{display:inline-flex;gap:1.5rem;align-items:center;min-height:44px;font-weight:700;color:white;text-decoration:none;border-bottom:1px solid #79cfdb}
.portfolio-jump::after{content:"↓";font-size:1.4rem}
.portfolio-section{padding:clamp(3.5rem,7vw,6.5rem) 0;background:#f7f8f6;color:#102733}
.portfolio-section .eyebrow{color:#146779}
.portfolio-section .section-head{max-width:none;padding-bottom:2rem;border-bottom:1px solid #b8c5ca;margin-bottom:1.5rem}
.portfolio-section h2{font-size:clamp(2rem,4vw,3.4rem)}
.filter-label{font-size:.85rem;color:#4e6570;margin-bottom:.75rem}
.portfolio-filters{display:flex;flex-wrap:wrap;column-gap:1.8rem;row-gap:.25rem;margin-bottom:1.25rem}
.portfolio-filter{position:relative;min-height:46px;padding:.6rem 0;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:#304f5c;font:inherit;font-size:.95rem;cursor:pointer}
.portfolio-filter:hover,.portfolio-filter[aria-pressed="true"]{border-bottom-color:#116c80;color:#083b4b}
.portfolio-filter[aria-pressed="true"]{font-weight:800}
.portfolio-count{color:#536971;font-size:.82rem;margin:1rem 0 2rem}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem 2rem}
.portfolio-card{position:relative;display:flex;flex-direction:column;min-width:0;border:0;background:transparent;border-radius:0}
.portfolio-card:only-child{grid-column:1/-1}
.portfolio-card[hidden],.portfolio-empty[hidden]{display:none}
.project-poster{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:center;overflow:hidden;min-height:420px;padding:2rem;background:#0b0d0e;border-radius:20px;color:#e9eef0}
.project-poster::after{content:"↗";position:absolute;top:1.5rem;right:1.5rem;display:grid;place-items:center;width:45px;height:45px;border:1px solid #7d8c93;border-radius:50%;font-size:1.5rem;transition:background .25s,color .25s,transform .25s}
.project-poster-kicker{align-self:flex-start;font-size:.7rem;letter-spacing:.18em;font-weight:700;color:#b2c0c7}
.project-logo{display:block;width:min(75%,580px);height:auto;object-fit:contain;mix-blend-mode:lighten;transition:transform .4s}
.project-poster-bottom{align-self:flex-start;font-size:.8rem;color:#b2c0c7;max-width:42ch}
.project-copy{display:grid;grid-template-columns:1fr auto;column-gap:2rem;padding:1.65rem 0 0}
.project-copy h2{grid-column:1;grid-row:1;font-size:clamp(1.8rem,3vw,2.7rem);letter-spacing:-.035em;margin-bottom:.6rem}
.project-copy .eyebrow{grid-column:1;grid-row:3;font-size:.7rem;letter-spacing:.06em;text-transform:none;color:#146779;margin:.65rem 0 0}
.project-copy p:not(.eyebrow){grid-column:1;grid-row:2;max-width:65ch;color:#526975;font-size:1.05rem;margin-bottom:.4rem}
.project-copy .button{grid-column:2;grid-row:1/4;align-self:center;border-radius:0;border:0;border-bottom:1px solid #79949d;padding:.6rem 0;gap:1rem;color:#123e4e;background:transparent}
.project-copy a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:20px}
.portfolio-card:focus-within{outline:3px solid #147b91;outline-offset:8px}
.portfolio-card:hover .project-logo{transform:scale(1.035)}
.portfolio-card:hover .project-poster::after{background:#a7eaee;color:#102733;transform:rotate(45deg)}
.portfolio-empty{padding:3rem 0;border-top:1px solid #bdccd0;color:#536971}
.portfolio-empty h3{color:#102733}.portfolio-empty a{color:#12667c}
.portfolio-demos{background:#142632}
.portfolio-demos .service-link-grid{margin-top:2rem}
.portfolio-demos .service-link-card{background:transparent;border:0;border-top:1px solid #42616d;border-radius:0;box-shadow:none;padding:2rem 0}
.portfolio-demos h2{font-size:clamp(2rem,4vw,3.4rem)}
.portfolio-page .cta{text-align:left;background:#0b1822;border-radius:0}
.portfolio-page .cta h2{max-width:18ch;font-size:clamp(2.8rem,6vw,5.5rem);margin-bottom:2rem}
.portfolio-page .cta .hero-actions{justify-content:flex-start}
.portfolio-page .cta .button{background:#a3e8ee;border-color:#a3e8ee;color:#0d2c3a}
.portfolio-page .cta .button--ghost{background:transparent;color:#a3e8ee}
.portfolio-home{background:#f7f8f6;color:#102733}
.portfolio-home .section-head .eyebrow{color:#146779}
.portfolio-home .lede{color:#526975}
.portfolio-home-link{margin-top:2.5rem}
.project-poster-wide{min-height:480px}
.project-detail-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:4rem;margin-block:4rem}
.project-detail-grid .service-link-card{background:#e8efee;border:0;box-shadow:none;color:#102733}
.project-detail-grid dt{font-weight:800}
.project-detail-grid dd{margin:0 0 1rem;color:#526975}
.project-detail-grid p{color:#526975}
.portfolio-section .service-card{background:transparent;border:0;border-top:1px solid #b8c5ca;box-shadow:none;border-radius:0;color:#102733;padding:2rem 0}
.portfolio-section .service-card p{color:#526975}
.project-note{margin-top:2rem;color:#526975;font-size:.95rem}
.portfolio-page .breadcrumb{padding-block:1.25rem}
@media(max-width:700px){
.portfolio-page .container{width:calc(100% - 2rem)}
.portfolio-hero{padding:3.5rem 0;border-bottom-right-radius:64px}
.portfolio-hero h1{font-size:clamp(2.5rem,9vw,4rem)}
.portfolio-grid,.project-detail-grid{grid-template-columns:1fr}
.portfolio-filters{column-gap:1.25rem}
.project-poster{min-height:290px;padding:1.25rem}
.project-logo{width:88%;margin-block:2.5rem}
.project-poster::after{width:34px;height:34px;top:1rem;right:1rem;font-size:1.2rem}
.project-copy{grid-template-columns:1fr}
.project-copy .button{grid-column:1;grid-row:4;justify-self:start;margin-top:1rem}
.project-detail-grid{gap:1.5rem;margin-block:2.5rem}
.project-poster-wide{min-height:320px}
}
@media(min-width:861px) and (max-width:1080px){.main-nav{gap:.65rem}.main-nav a{font-size:.82rem}}
@media(prefers-reduced-motion:reduce){.project-logo,.project-poster::after{transition:none}}

/* Replace a pending figure's placeholder with an img when project photos are available. */
.portfolio-section .service-card--with-photo{padding-top:0;border-top:0;overflow:hidden}
.service-photo{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:4/3;margin:0 0 1.5rem;border-radius:14px;overflow:hidden;background:#e7eeef;color:#42616e}
.service-photo--pending{border:1px dashed #9bb3bd;background:linear-gradient(145deg,#e6edef,#f0f4f3)}
.service-photo-placeholder{display:flex;flex-direction:column;align-items:center;gap:.8rem;padding:1.5rem;text-align:center}
.service-photo-placeholder span{font-size:.85rem;font-weight:600;letter-spacing:.04em}
.service-photo figcaption{position:absolute;inset:auto 1rem .85rem;text-align:center;font-size:.72rem;color:#536b76}
.service-photo img{width:100%;height:100%;object-fit:cover;display:block}
.service-photo:has(img){display:block}
@media(max-width:860px){.service-photo{aspect-ratio:16/10}}

/* Automatic service galleries: stable frame, crossfade and subtle zoom. */
.project-gallery{position:relative;isolation:isolate}
.gallery-stage{position:absolute;inset:0;background:#dce5e8}
.gallery-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s;pointer-events:none}
.gallery-slide.is-current{opacity:1;visibility:visible}
.gallery-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.025);transition:transform 5s ease}
.gallery-slide.is-current img{transform:scale(1)}
.gallery-slide img[hidden],.gallery-error[hidden]{display:none}
.gallery-error{position:absolute;inset:0;display:grid;place-items:center;color:#304f5c;background:#e7eeef;padding:1rem}
.gallery-controls{position:absolute;z-index:2;inset:auto .65rem .65rem;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.3rem;border-radius:10px;background:rgb(7 27 39 / 90%);color:#fff}
.gallery-controls button{min-width:44px;min-height:44px;padding:.45rem .65rem;border:1px solid #7495a4;border-radius:7px;background:transparent;color:#fff;font:inherit;font-size:.8rem;cursor:pointer}
.gallery-controls button:hover{background:#244d61}
.gallery-controls button:last-child{margin-left:auto}
.gallery-count{min-width:3rem;text-align:center;font-size:.8rem}
.gallery-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){.gallery-slide,.gallery-slide img{transition:none;transform:none}}