.portfolio-website{background:#000}
.portfolio-state-stage{position:absolute;left:0;top:0;z-index:1;width:4395px;height:5037px;overflow:hidden;background:#000;isolation:isolate}
.portfolio-state{position:absolute;left:0;top:0;display:block;width:4395px;height:auto;opacity:0;transform:translate3d(36px,0,0);transition:opacity .44s cubic-bezier(.22,.61,.36,1),transform .44s cubic-bezier(.22,.61,.36,1);pointer-events:none;user-select:none;-webkit-user-drag:none;backface-visibility:hidden;will-change:opacity,transform}
.portfolio-state.is-visible{z-index:2;opacity:1;transform:translate3d(0,0,0)}
.portfolio-state.from-left{transform:translate3d(-36px,0,0)}
.portfolio-state.from-right{transform:translate3d(36px,0,0)}
.portfolio-state.is-leaving-left{z-index:1;opacity:0;transform:translate3d(-36px,0,0)}
.portfolio-state.is-leaving-right{z-index:1;opacity:0;transform:translate3d(36px,0,0)}

/* Common glass header — same geometry and behavior as the approved Team page. */
.portfolio-glass-header{position:absolute;left:252px;top:180px;z-index:50;width:3891px;height:220px;display:flex;align-items:center;justify-content:space-between;padding:0 170px 0 110px;border:0;outline:0;border-radius:118px;background:rgba(8,20,35,.37);box-shadow:0 30px 90px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.045);-webkit-backdrop-filter:blur(48px) saturate(150%);backdrop-filter:blur(48px) saturate(150%);overflow:hidden;transform:translateZ(0)}
.portfolio-brand,.portfolio-menu{position:relative;z-index:1}
.portfolio-brand{display:flex;align-items:center;width:850px;height:190px;text-decoration:none;-webkit-tap-highlight-color:transparent}
.portfolio-brand img{display:block;width:850px;height:auto;max-height:190px;object-fit:contain;object-position:left center;user-select:none;-webkit-user-drag:none}
.portfolio-menu{display:flex;align-items:center;justify-content:flex-end;gap:235px;min-width:2320px;height:100%}
.portfolio-menu a{position:relative;display:flex;align-items:center;height:100%;color:#f3f2ef;font-family:"Junge",Georgia,serif;font-size:64px;line-height:1;font-weight:400;white-space:nowrap;text-decoration:none;text-shadow:0 3px 18px rgba(0,0,0,.3);transition:color 150ms ease;-webkit-tap-highlight-color:transparent}
.portfolio-menu a:hover,.portfolio-menu a:focus-visible,.portfolio-menu a.is-active{color:#079bdd}
.portfolio-menu a.is-active{font-weight:700}
.portfolio-menu a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:52px;height:5px;border-radius:5px;background:#079bdd}
.portfolio-menu a[href="team.html"]::after{content:none!important;display:none!important}
.portfolio-brand:focus-visible,.portfolio-menu a:focus-visible{outline:7px solid rgba(7,155,221,.92);outline-offset:8px;border-radius:18px}

/* Live sector bar precisely replaces the baked Figma tab bar. */
.portfolio-category-tabs{position:absolute;left:159px;top:1668px;z-index:38;width:4077px;height:357px;display:grid;grid-template-columns:20.5fr 26.5fr 22fr 31fr;align-items:stretch;padding:0;border:3px solid rgba(157,187,208,.26);border-radius:49px;background:rgba(0,0,0,.91);box-shadow:0 30px 92px rgba(0,137,198,.2),inset 0 1px 0 rgba(255,255,255,.035);-webkit-backdrop-filter:blur(32px) saturate(125%);backdrop-filter:blur(32px) saturate(125%);overflow:hidden;isolation:isolate}
.portfolio-category-tabs::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,13,21,.18),rgba(0,0,0,.88));pointer-events:none}
.portfolio-category-tabs button{position:relative;display:grid;place-items:center;width:100%;height:100%;padding:0 24px;border:0;background:transparent;color:#f4f2ef;font-family:"Playfair Display",Georgia,serif;font-size:72px;line-height:1.06;font-weight:700;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;isolation:isolate}
.portfolio-category-tabs button::before{content:"";position:absolute;z-index:-1;inset:42px 22px;border-radius:42px;background:linear-gradient(135deg,rgba(0,145,207,.34),rgba(0,67,101,.56));box-shadow:0 0 46px rgba(0,157,224,.42),inset 0 0 0 2px rgba(0,157,224,.42);opacity:0;transform:scale(.97);transition:opacity .18s ease,transform .18s ease}
.portfolio-category-tabs button.is-active::before{opacity:1;transform:scale(1)}
.portfolio-category-tabs button:not(.is-active):hover{color:#079bdd}
.portfolio-category-tabs button:not(.is-active):hover::before,.portfolio-category-tabs button:not(.is-active):focus-visible::before{opacity:.42;transform:scale(1)}
.portfolio-category-tabs button:focus-visible{outline:7px solid #079bdd;outline-offset:-13px}
.portfolio-category-tabs button span{position:relative;z-index:1;display:block}

.portfolio-live-footer{top:4089px}
@media(hover:none){.portfolio-menu a,.portfolio-category-tabs button::before{transition:none}}

/* Supplied company-image hover layer. Each image is matched by company name. */
.portfolio-hover-grid{
  position:absolute;
  left:0;
  top:0;
  z-index:32;
  width:4395px;
  height:100%;
  pointer-events:none;
  opacity:1;
  transition:opacity .18s ease;
}
.portfolio-hover-grid.is-switching{opacity:0}
.portfolio-hover-card{
  position:absolute;
  display:block;
  padding:0;
  border:0;
  border-radius:50px;
  overflow:hidden;
  background:transparent;
  color:#fff;
  pointer-events:auto;
  cursor:default;
  transform:translateZ(0);
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}
.portfolio-hover-card.has-image{cursor:pointer}
.portfolio-hover-card img{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transform:scale(1.035);
  transition:opacity .22s ease,transform .36s cubic-bezier(.22,.61,.36,1);
  user-select:none;
  -webkit-user-drag:none;
}
.portfolio-hover-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.08) 46%,rgba(0,0,0,.70) 100%);
  transition:opacity .22s ease;
}
.portfolio-hover-card .portfolio-hover-name{
  position:absolute;
  z-index:2;
  left:42px;
  right:42px;
  bottom:45px;
  display:block;
  color:#fff;
  font-family:"Junge",Georgia,serif;
  font-size:72px;
  line-height:1.1;
  font-weight:400;
  text-align:center;
  text-shadow:0 4px 18px rgba(0,0,0,.82);
  opacity:0;
  transform:translateY(15px);
  transition:opacity .22s ease,transform .22s ease;
}
.portfolio-hover-card.has-image:hover,
.portfolio-hover-card.has-image:focus-visible{
  outline:4px solid rgba(7,155,221,.58);
  outline-offset:-4px;
  box-shadow:0 28px 72px rgba(0,0,0,.48),0 0 45px rgba(7,155,221,.16);
}
.portfolio-hover-card.has-image:hover img,
.portfolio-hover-card.has-image:focus-visible img{opacity:1;transform:scale(1)}
.portfolio-hover-card.has-image:hover::before,
.portfolio-hover-card.has-image:focus-visible::before{opacity:1}
.portfolio-hover-card.has-image:hover .portfolio-hover-name,
.portfolio-hover-card.has-image:focus-visible .portfolio-hover-name{opacity:1;transform:none}
@media(hover:none){
  .portfolio-hover-card.has-image:active img,
  .portfolio-hover-card.has-image:active::before,
  .portfolio-hover-card.has-image:active .portfolio-hover-name{opacity:1}
}
.portfolio-hover-card.is-pinned img,
.portfolio-hover-card.is-pinned::before,
.portfolio-hover-card.is-pinned .portfolio-hover-name{opacity:1;transform:scale(1)}