.portfolio-introduction {
  position: fixed; inset: 0 0 auto; z-index: 15; display: flex; align-items: center;
  padding: 110px 5.5vw 50px; box-sizing: border-box; color: #172a55;
  background: radial-gradient(ellipse at 8% 80%,#e9c9ecb8,transparent 65%),radial-gradient(ellipse at 90% 20%,#b7d5ffd1,transparent 65%),linear-gradient(125deg,#e2d3f2ed,#d6e5f7d9);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  will-change: transform; visibility: hidden; font-size: 16px; line-height: 1.5;
}
.portfolio-intro-visible header { z-index: 20; }
.portfolio-intro-visible .home-hero { opacity: 0 !important; pointer-events: none !important; }
.portfolio-intro-visible .release-spirit { opacity: 0 !important; pointer-events: none !important; }
.portfolio-intro-card {
  width: 100%; padding: clamp(24px,3vw,55px); border: 1px solid #ffffffb8; border-radius: 36px;
  background: linear-gradient(135deg,#ffffff30,#ffffff10); box-shadow: inset 0 1px 0 #ffffff66,0 20px 90px #6d69ad0b;
  max-height: 100%; overflow: auto;
}
.portfolio-intro-label,.portfolio-intro-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 11px; letter-spacing: .05em; }
.portfolio-intro-label { border-bottom: 1px solid #ffffff8a; padding-bottom: 20px; }
.portfolio-intro-label > span:first-child { display: flex; align-items: center; gap: 10px; }
.portfolio-intro-label img { width: 15px; height: 15px; }
.portfolio-intro-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items: center; padding: clamp(28px,4.5vh,60px) 0; }
.portfolio-intro-eyebrow { font-size: 12px; letter-spacing: .08em; margin-bottom: 24px; }
.portfolio-intro-heading h2 { font-weight: 400; font-size: clamp(48px,5.4vw,100px); line-height: 1.03; letter-spacing: -.045em; }
.portfolio-intro-heading h2 em { font-family: TheSeasons,serif; font-style: italic; font-weight: 400; color: #375c99; }
.portfolio-intro-role { margin-top: 24px; font-size: 18px; color: #375c99; }
.portfolio-intro-lead { font-size: clamp(19px,1.7vw,29px); line-height: 1.35; letter-spacing: -.015em; }
.portfolio-intro-description { margin-top: 18px; font-size: 14px; line-height: 1.7; color: #344b75; }
.portfolio-intro-disciplines { margin-top: 24px; padding: 0; list-style: none; }
.portfolio-intro-disciplines li { display: flex; gap: 25px; border-top: 1px solid #ffffff8a; padding: 10px 0; font-size: 14px; }
.portfolio-intro-disciplines li span { font-size: 10px; opacity: .6; padding-top: 3px; }
.portfolio-intro-link { display: flex; justify-content: space-between; align-items: center; width: 200px; max-width: 100%; margin-top: 22px; padding: 8px 0; border-bottom: 1px solid #5474ab66; font-size: 14px; }
.portfolio-intro-link span { font-size: 23px; transition: transform .25s; }
.portfolio-intro-link:hover span { transform: translate(3px,-3px); }
.portfolio-intro-link:focus-visible { outline: 2px solid #375c99; outline-offset: 5px; }
.portfolio-intro-foot { border-top: 1px solid #ffffff8a; padding-top: 18px; opacity: .7; }
@media (max-width:767px) {
  .portfolio-introduction { padding: 88px 18px 24px; }
  .portfolio-intro-card { padding: 22px; border-radius: 26px; }
  .portfolio-intro-label,.portfolio-intro-foot { font-size: 9px; gap: 10px; }
  .portfolio-intro-label > span:last-child { max-width: 145px; text-align: right; }
  .portfolio-intro-label { padding-bottom: 14px; }
  .portfolio-intro-columns { grid-template-columns: 1fr; gap: 22px; padding: 24px 0; }
  .portfolio-intro-eyebrow { font-size: 10px; margin-bottom: 14px; }
  .portfolio-intro-heading h2 { font-size: 46px; }
  .portfolio-intro-role { margin-top: 12px; font-size: 14px; }
  .portfolio-intro-lead { font-size: 19px; }
  .portfolio-intro-description { font-size: 12px; margin-top: 12px; }
  .portfolio-intro-disciplines { margin-top: 16px; }
  .portfolio-intro-disciplines li { font-size: 12px; padding: 7px 0; }
  .portfolio-intro-link { font-size: 12px; margin-top: 12px; }
  .portfolio-intro-foot { padding-top: 14px; }
}
@media (min-width:768px) and (max-height:720px) {
  .portfolio-introduction { padding-top: 90px; padding-bottom: 25px; }
  .portfolio-intro-card { padding: 24px 36px; }
  .portfolio-intro-columns { padding: 24px 0; }
  .portfolio-intro-heading h2 { font-size: 64px; }
  .portfolio-intro-description { font-size: 13px; }
  .portfolio-intro-disciplines { margin-top: 14px; }
  .portfolio-intro-disciplines li { padding: 7px 0; }
}
@media (prefers-reduced-motion:reduce) { .portfolio-intro-link span { transition: none; } }

.portfolio-work-transition {
  position: fixed; inset: 0; z-index: 60; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 70%,#111632 0%,#060b1d 65%);
}
.portfolio-work-moving .portfolio-work-transition { pointer-events: auto; }
.portfolio-work-moving .portfolio-introduction { visibility: hidden !important; }
.portfolio-work-moving .release-spirit { pointer-events: none !important; }
.portfolio-work-landed .work-lead-in { visibility: hidden !important; }
.portfolio-work-landed header .cases-back {
  opacity: 1; height: 140px;
  background: linear-gradient(180deg,#060b1df5 0%,#060b1db3 48%,#060b1d00 100%);
}
