.portfolio-hero{padding:70px 6% 65px;display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center;background:radial-gradient(ellipse at 85% 50%,#d6efff,transparent 60%),#f7fbfe;overflow:hidden}.portfolio-hero h1{font-size:clamp(60px,6.3vw,98px)}.product-stage{position:relative;height:520px;perspective:1200px}.stage-label{font-size:10px;letter-spacing:3px;color:#467da1;position:absolute;top:24px;left:20px}.stage-desktop{position:absolute;width:94%;top:100px;left:0;border:8px solid #fff;border-radius:14px;box-shadow:0 35px 65px #164d7930;transform:rotateY(-8deg) rotateX(3deg);animation:float-desktop 9s ease-in-out infinite alternate}.stage-mobile{position:absolute;width:27%;height:310px;object-fit:contain;right:-3%;top:180px;filter:drop-shadow(0 22px 20px #143a6935);animation:float-phone 7s ease-in-out infinite alternate}.stage-caption{position:absolute;bottom:10px;left:20px;font-size:11px;color:#467da1;display:flex;gap:12px;align-items:center}.filter-row{display:flex;gap:10px;flex-wrap:wrap}.filter-row button{padding:13px 19px;border:1px solid #dce6ed;background:white;border-radius:30px;color:#446074;font-size:12px}.filter-row button.active{background:#146cc4;color:white;border-color:#146cc4}.filter-row span{margin-left:8px;opacity:.7}#result-count{font-size:11px;margin:20px 0}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.product-card{border:1px solid #dce6ed;border-radius:14px;overflow:hidden;background:white;transition:transform .35s,box-shadow .35s}.product-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px #174e7215}.product-card[hidden]{display:none}.product-picture{width:100%;height:260px;padding:22px;background:linear-gradient(135deg,#e9f3fa,#f4f7fa);border:0;position:relative;overflow:hidden}.product-picture img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 7px #15304415);transition:transform .6s}.product-picture:hover img{transform:scale(1.04)}.product-picture>span{position:absolute;bottom:10px;right:12px;background:#fff;padding:7px 10px;border-radius:30px;font-size:9px;color:#146cc4}.product-copy{padding:24px}.meta{display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#146cc4}.meta span:last-child{text-align:right;color:#738795}.product-copy h3{font-size:27px;margin:16px 0 8px}.product-copy p{font-size:13px;min-height:48px;margin:0 0 22px}.product-copy .link{display:flex;justify-content:space-between;width:100%;text-align:left}.capabilities{display:grid;grid-template-columns:1fr 1fr;gap:90px;background:#f2f7fa}.capabilities>div>p{max-width:470px}.competency-list article{display:flex;gap:26px;border-bottom:1px solid #d1e1eb;padding:22px 0}.competency-list article>span{color:#1597ce;font-size:12px;padding-top:7px}.competency-list h3{margin:0;font-size:20px}.competency-list p{margin:8px 0 0;font-size:12px}.portfolio-cta{background:linear-gradient(110deg,#edf9ff,#deeffa)}.portfolio-cta .actions{margin-bottom:0;flex-wrap:wrap}#project-modal{max-width:1180px}#modal-content{padding:48px}#modal-name{font-size:44px;margin:15px 0}#modal-content>p{max-width:750px}.modal-features{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.modal-features span{padding:8px 13px;border-radius:30px;background:#eaf4fb;font-size:11px;color:#246d9e}.modal-gallery{display:flex;gap:18px;background:#edf3f7;padding:25px;border-radius:10px;margin:30px 0;justify-content:center;flex-wrap:wrap}.modal-gallery a{flex:1 1 280px;min-width:0}.modal-gallery img{height:350px;object-fit:contain}.modal-gallery.mobile a{flex:1 1 150px;max-width:250px}.modal-gallery.mobile img{height:420px}.source-note{font-size:10px!important}.modal-links{display:flex;gap:24px;align-items:center;flex-wrap:wrap}@keyframes float-desktop{to{transform:translateY(-12px) rotateY(-4deg) rotateX(1deg)}}@keyframes float-phone{to{transform:translateY(10px) rotate(2deg)}}@media(max-width:1100px){.portfolio-hero{gap:30px}.product-stage{height:430px}.stage-mobile{height:250px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}header nav{gap:16px}.capabilities{gap:45px}}@media(max-width:760px){.portfolio-hero{grid-template-columns:1fr;padding:40px 5%}.portfolio-hero h1{font-size:65px}.product-stage{height:390px;max-width:540px;width:100%;margin:auto}.stage-desktop{top:60px}.stage-label{top:8px}.stage-mobile{top:125px;height:230px}.capabilities{grid-template-columns:1fr;gap:25px}.product-picture{height:230px;padding:15px}.product-copy{padding:20px}.meta{flex-direction:column;gap:5px}.meta span:last-child{text-align:left}.product-copy h3{font-size:23px}#modal-content{padding:28px 20px}#modal-name{font-size:34px}.modal-gallery{padding:12px}.modal-gallery img{height:auto;max-height:400px}.modal-gallery.mobile img{height:380px}.stage-caption{font-size:9px;left:0}}@media(max-width:480px){.product-grid{grid-template-columns:1fr}.product-picture{height:270px}.product-stage{height:310px}.stage-desktop{top:45px}.stage-mobile{top:100px;height:180px}.product-copy p{min-height:0}.filter-row{gap:7px}.filter-row button{font-size:10px;padding:11px 12px}.portfolio-hero .actions{gap:18px}.portfolio-hero h1{font-size:59px}}

/* Keep the complete site navigation visible on the portfolio page. */
.products-header{position:sticky;top:0;z-index:40;background:#fffffff5;box-shadow:0 3px 18px #15304408}.products-header #navigation{display:flex;gap:22px;white-space:nowrap}.products-header #navigation a[aria-current="page"]{color:#146cc4;font-weight:700;border-bottom:2px solid #24b6df;padding-block:10px}.products-header #menu{display:none}@media(max-width:1100px){html:has(.products-header){scroll-padding-top:165px}.products-header{height:auto;min-height:140px;display:flex;flex-wrap:wrap;gap:0;padding:12px 5% 0}.products-header .brand{margin-bottom:10px}.products-header #navigation{position:static;display:flex;flex-direction:row;align-items:center;width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding:8px 0 12px;gap:24px;border:0;background:transparent;font-size:12px;scrollbar-width:thin}.products-header #navigation a{flex:0 0 auto}.products-header #navigation .button{padding:10px 16px}.products-header #navigation a[aria-current="page"]{padding-block:10px}}@media(max-width:480px){.products-header{min-height:132px}.products-header #navigation{gap:20px;font-size:11px}}