/* Portfolio-only integration of the approved local motion concept. */
.portfolio-experience { color: #e9ebf3; font-family: var(--font-body); line-height: normal; background: #070911; }
.portfolio-experience h1, .portfolio-experience h2, .portfolio-experience h3, .portfolio-experience p { margin: 0; }
.portfolio-experience button { font: inherit; color: inherit; cursor: pointer; border: 0; }
.portfolio-experience a, .portfolio-experience button { -webkit-tap-highlight-color: transparent; }
.portfolio-experience :focus-visible { outline: 2px solid #a9b6ff; outline-offset: 7px; }
.portfolio-experience {
  --ink:#e9ebf3;
  --muted:#8991a5;
  --blue:#7b8cff;
  --bg:#070911;
  --gallery-rgb:85,109,167;
  --paper:#fbf8ef;
  --line:#ffffff20;
  --card-width:min(36vw,41svh,430px);
}

.portfolio-experience * {
  box-sizing:border-box;
}

.portfolio-experience .sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.portfolio-experience .eyebrow {
  font:10px/1.5 var(--font-mono);
  letter-spacing:.15em;
}

.portfolio-experience {
  height:360svh;
  position:relative;
}

.portfolio-experience .stage {
  height:100svh;
  min-height:700px;
  position:sticky;
  top:0;
  overflow:hidden;
  isolation:isolate;
}

.portfolio-experience .atmosphere {
  position:absolute;
  inset:0;
  z-index:-3;
  background:radial-gradient(ellipse at 51% 57%,rgba(var(--gallery-rgb),.22),transparent 49%),radial-gradient(ellipse at 50% 99%,rgba(var(--gallery-rgb),.11),transparent 60%);
  transition:background 1s;
}

.portfolio-experience .stage:after {
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-2;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.24' d='M0 0h180v180H0z'/%3E%3C/svg%3E")
}

.portfolio-experience .floor {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:30%;
  z-index:-1;
  background:linear-gradient(transparent,#05070ed9);
  pointer-events:none;
}

.portfolio-experience .stage-heading {
  position:absolute;
  left:4.2%;
  right:4.2%;
  top:123px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
}

.portfolio-experience .stage-heading .eyebrow {
  color:#969caf;
  display:flex;
  gap:16px;
  align-items:center;
}

.portfolio-experience .tiny-cross {
  font-size:17px;
  color:#9dacff;
}

.portfolio-experience .edition {
  color:#626a7b;
}

.portfolio-experience .stage-heading h1 {
  font-weight:400;
  font-size:clamp(38px,4.7vw,75px);
  line-height:1.08;
  letter-spacing:-.065em;
  margin-top:14px;
}

.portfolio-experience .stage-heading h1>span {
  color:#a7b1d0;
}

.portfolio-experience .intro {
  font-size:13px;
  color:#969eaf;
  line-height:1.7;
  padding-bottom:4px;
}

.portfolio-experience .scene {
  position:absolute;
  inset:230px 0 115px;
  perspective:1500px;
  perspective-origin:50% 48%;
  touch-action:pan-y;
}

.portfolio-experience .scene-orbit {
  width:90%;
  height:42%;
  border:1px solid #ffffff09;
  border-radius:50%;
  position:absolute;
  bottom:-1%;
  left:5%;
  transform:rotateX(75deg);
  pointer-events:none;
}

.portfolio-experience .scene-coordinate {
  position:absolute;
  top:47%;
  font:8px var(--font-mono);
  letter-spacing:.2em;
  color:#626b82;
  writing-mode:vertical-rl;
  z-index:0;
}

.portfolio-experience .left-coordinate {
  left:2.8%;
  transform:rotate(180deg);
}

.portfolio-experience .right-coordinate {
  right:2.8%;
}

.portfolio-experience .deck {
  position:absolute;
  left:50%;
  top:49%;
  width:0;
  height:0;
  transform-style:preserve-3d;
}

.portfolio-experience .project-card {
  position:absolute;
  width:var(--card-width);
  aspect-ratio:1024/1400;
  top:0;
  left:0;
  margin:0;
  transform-style:preserve-3d;
  will-change:transform;
  --client:#d6a038;
  --block:#193864;
  --depth:1;
  transform:translate(-50%,-50%);
}

.portfolio-experience .project-card.mykey {
  --client:#658b3e;
  --block:#94b95d;
  transform:translate(58%,-50%) rotateY(-35deg) scale(.76);
}

.portfolio-experience .project-card.sandk {
  --client:#d7a338;
  --block:#e9b94f;
  transform:translate(-158%,-50%) rotateY(35deg) scale(.76);
}

.portfolio-experience .card-pose {
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  position:relative;
  transition:transform .18s ease-out;
}

.portfolio-experience .card-front,
.portfolio-experience .card-back {
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
}

.portfolio-experience .card-front {
  transform:translateZ(2px);
  container-type:inline-size;
}

.portfolio-experience .paper {
  position:absolute;
  inset:0;
  background:var(--paper);
  background-image:radial-gradient(ellipse at 14% 8%,#fffefb,transparent 70%),linear-gradient(115deg,#fffef855,transparent 60%,#d9ceb125);
  box-shadow:0 38px 68px #0009,0 1px 0 #fff8 inset;
  border-radius:2px;
}

.portfolio-experience .card-edge {
  position:absolute;
  inset:0;
  border:1px solid #fff5;
  pointer-events:none;
  transform:translateZ(3px);
}

.portfolio-experience .card-copy {
  position:absolute;
  left:6.5%;
  top:3.8%;
  right:5%;
  color:#080a0b;
  transform:translateZ(calc(12px * var(--depth)));
}

.portfolio-experience .card-category {
  font:500 1.92cqw/1.5 var(--font-mono);
  letter-spacing:.2em;
  color:var(--client);
  display:flex;
  align-items:center;
  gap:2.6cqw;
  white-space:nowrap;
}

.portfolio-experience .card-category i {
  display:block;
  width:10cqw;
  height:.18cqw;
  background:var(--client);
}

.portfolio-experience .card-copy h2 {
  font:bold 11.65cqw/.9 Georgia,'Times New Roman',serif;
  letter-spacing:-.065em;
  margin-top:3.5cqw;
}

/* Keep the C&C subtitle clear of the raised browser and navy accent. */
.portfolio-experience .cc .card-copy h2 {
  font-size:10.4cqw;
}

.portfolio-experience .mykey .card-copy h2 {
  font-size:9.8cqw;
  line-height:.98;
}

.portfolio-experience .sandk .card-copy h2 {
  font-size:8.7cqw;
  line-height:1.06;
  letter-spacing:-.055em;
}

.portfolio-experience .card-tagline {
  font:400 1.85cqw var(--font-mono);
  letter-spacing:.17em;
  margin-top:2.5cqw;
  white-space:nowrap;
  color:#42434b;
}

.portfolio-experience .browser-crop {
  position:absolute;
  left:4.7%;
  top:37.15%;
  width:90.3%;
  height:42.7%;
  overflow:hidden;
  border-radius:1.8cqw;
  transform:translateZ(calc(31px * var(--depth)));
  box-shadow:0 12px 19px #1119;
  border:1px solid #ffffff50;
  background:#121827;
}

.portfolio-experience .browser-crop img {
  position:absolute;
  width:110.82%;
  max-width:none;
  height:auto;
  left:-5.3%;
  top:-87.05%;
  pointer-events:none;
}

.portfolio-experience .color-block {
  position:absolute;
  background:var(--block);
  transform:translateZ(calc(6px * var(--depth)));
}

.portfolio-experience .color-block-top {
  top:34.5%;
  right:2%;
  width:63%;
  height:27%;
}

.portfolio-experience .color-block-bottom {
  top:66%;
  left:2.6%;
  width:48%;
  height:16.3%;
}

.portfolio-experience .phone-crop {
  position:absolute;
  top:61%;
  left:70.3%;
  width:24.8%;
  height:37.1%;
  overflow:hidden;
  border-radius:4.2cqw;
  transform:translateZ(calc(79px * var(--depth))) rotateZ(-2deg);
  box-shadow:2px 11px 18px #0007;
  background:#161818;
  border:1px solid #fff7;
}

.portfolio-experience .phone-crop img {
  position:absolute;
  width:404.72%;
  max-width:none;
  height:auto;
  left:-284.58%;
  top:-164.58%;
  pointer-events:none;
}

.portfolio-experience .mykey .phone-crop {
  height:38.1%;
  top:60.8%;
}

.portfolio-experience .mykey .phone-crop img {
  top:-159.2%;
}

.portfolio-experience .sandk .phone-crop {
  height:36.6%;
}

.portfolio-experience .sandk .phone-crop img {
  top:-167.4%;
}

.portfolio-experience .card-client {
  position:absolute;
  left:6.7%;
  right:25%;
  top:86.1%;
  color:#0c0d10;
  transform:translateZ(calc(15px * var(--depth)));
}

.portfolio-experience .card-client i {
  display:block;
  width:5.5cqw;
  height:.32cqw;
  background:var(--client);
  margin-bottom:1.6cqw;
}

.portfolio-experience .card-client h3 {
  font:bold 7cqw/.93 Georgia,'Times New Roman',serif;
  letter-spacing:-.055em;
  white-space:nowrap;
}

.portfolio-experience .card-client>span {
  font:400 1.75cqw var(--font-mono);
  letter-spacing:.2em;
  display:block;
  margin-top:1.6cqw;
  color:#50525a;
}

.portfolio-experience .sandk .card-client {
  top:88%;
}

.portfolio-experience .sandk .card-client h3 {
  font-size:8.2cqw;
}

.portfolio-experience .card-back {
  transform:rotateY(180deg) translateZ(2px);
  background:#10151f;
  box-shadow:0 24px 60px #000b;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid #828ba43d;
  color:#f8f5e9;
}

.portfolio-experience .card-back:after {
  content:'';
  position:absolute;
  inset:4%;
  border:1px solid #ffffff15;
  pointer-events:none;
}

.portfolio-experience .back-mark {
  font-size:clamp(85px,12vw,160px);
  font-weight:500;
  letter-spacing:-.1em;
  line-height:1;
  margin-left:-.18em;
}

.portfolio-experience .back-mark>span {
  color:var(--client);
}

.portfolio-experience .back-kind {
  font:8px var(--font-mono);
  letter-spacing:.16em;
  margin-top:30px;
  color:var(--client);
}

.portfolio-experience .back-client {
  font-size:14px;
  margin-top:14px;
}

.portfolio-experience .back-index {
  position:absolute;
  bottom:8%;
  font:8px var(--font-mono);
  letter-spacing:.18em;
  color:#8690a3;
}

.portfolio-experience .gallery-bottom {
  position:absolute;
  bottom:30px;
  left:4.2%;
  right:4.2%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  z-index:10;
}

.portfolio-experience .project-caption>.eyebrow {
  font-size:8px;
  color:#8290ad;
  letter-spacing:.1em;
  display:block;
  margin-bottom:8px;
}

.portfolio-experience .project-caption>a {
  font-size:19px;
  letter-spacing:-.035em;
  display:flex;
  gap:15px;
  align-items:center;
  width:fit-content;
}

.portfolio-experience .project-caption>a:hover {
  color:white;
}

.portfolio-experience .project-caption>a>span:nth-child(2) {
  color:#889bcc;
  font-size:18px;
}

.portfolio-experience .project-scope {
  display:block;
  margin-top:4px;
  font-size:10px;
  color:#848d9e;
}

.portfolio-experience .scroll-prompt {
  background:#0d1220d6;
  border:1px solid #3f4a6869;
  border-radius:50px;
  display:flex;
  align-items:center;
  gap:15px;
  padding:14px 20px;
  text-align:left;
  transition:background .2s,border-color .2s;
}

.portfolio-experience .scroll-prompt:hover {
  background:#18223b;
  border-color:#7a8bba;
}

.portfolio-experience .scroll-prompt strong {
  font:500 9px var(--font-mono);
  letter-spacing:.12em;
  display:block;
  color:#d2dbff;
  animation:cue-pulse 2.4s ease-in-out infinite;
}

.portfolio-experience .scroll-prompt small {
  display:block;
  font-size:10px;
  color:#7e8ca8;
  margin-top:5px;
}

.portfolio-experience .mouse-icon {
  width:17px;
  height:26px;
  border:1px solid #7486b0;
  border-radius:10px;
  position:relative;
  flex-shrink:0;
}

.portfolio-experience .mouse-icon>i {
  height:5px;
  width:2px;
  position:absolute;
  top:5px;
  left:6px;
  background:#bed0ff;
  border-radius:2px;
  animation:scroll-dot 1.8s ease-in-out infinite;
}

.portfolio-experience .scroll-arrow {
  font-size:20px;
  color:#9caed7;
  margin-left:3px;
}

.portfolio-experience .project-navigation {
  justify-self:end;
  display:flex;
  gap:11px;
}

.portfolio-experience .project-step {
  background:transparent;
  min-width:43px;
  min-height:49px;
  position:relative;
  font:10px var(--font-mono);
  color:#717c93;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:11px;
}

.portfolio-experience .project-step i {
  width:28px;
  height:2px;
  background:#3a4358;
  transition:background .3s;
}

.portfolio-experience .project-step.selected {
  color:white;
}

.portfolio-experience .project-step.selected i {
  background:#afbee8;
}

.portfolio-experience .project-step:hover {
  color:white;
}

.portfolio-experience .journey-line {
  position:absolute;
  bottom:0;
  height:2px;
  left:0;
  right:0;
  background:#ffffff05;
}

.portfolio-experience .journey-line>span {
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,#576cbe,#c3d0ff);
  transform:scaleX(0);
  transform-origin:left;
}

@keyframes cue-pulse { 0%,100%{opacity:1}50%{opacity:.42} }

@keyframes scroll-dot { 0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(7px);opacity:1} }

@media(min-width:1700px) {
  .portfolio-experience .scene {
    inset:260px 0 130px;
  }

  .portfolio-experience .stage-heading {
    top:135px;
  }

  .portfolio-experience .gallery-bottom {
    bottom:40px;
  }
}

@media(max-height:760px) and (min-width:761px) {
  .portfolio-experience {
    --card-width:min(31vw,38svh);
  }

  .portfolio-experience .stage {
    min-height:620px;
  }

  .portfolio-experience .stage-heading {
    top:93px;
  }

  .portfolio-experience .stage-heading h1 {
    font-size:48px;
  }

  .portfolio-experience .scene {
    inset:175px 0 100px;
  }

  .portfolio-experience .gallery-bottom {
    bottom:22px;
  }

  .portfolio-experience .scroll-prompt {
    padding:10px 16px;
  }
}

@media(max-width:1000px) {
  .portfolio-experience .stage-heading h1 {
    font-size:49px;
  }

  .portfolio-experience .intro {
    font-size:11px;
  }

  .portfolio-experience .project-caption>a {
    font-size:16px;
  }

  .portfolio-experience .scroll-prompt small {
    display:none;
  }

  .portfolio-experience .scroll-prompt {
    gap:11px;
    padding:12px 16px;
  }

  .portfolio-experience .scroll-prompt strong {
    font-size:8px;
  }

  .portfolio-experience .gallery-bottom {
    gap:18px;
  }

  .portfolio-experience .project-navigation {
    gap:2px;
  }

  .portfolio-experience .scene {
    perspective:1200px;
  }
}

@media(max-width:760px) {
  .portfolio-experience {
    --card-width:min(60vw,39svh,370px);
  }

  .portfolio-experience .stage {
    min-height:650px;
  }

  .portfolio-experience .stage-heading {
    left:6%;
    right:6%;
    top:107px;
    display:block;
  }

  .portfolio-experience .stage-heading h1 {
    font-size:clamp(32px,6.8vw,50px);
    margin-top:12px;
  }

  .portfolio-experience .stage-heading .eyebrow {
    font-size:8px;
    gap:10px;
  }

  .portfolio-experience .intro {
    font-size:11px;
    margin-top:12px;
    line-height:1.5;
  }

  .portfolio-experience .intro br {
    display:none;
  }

  .portfolio-experience .scene {
    inset:224px 0 161px;
    perspective:1100px;
  }

  .portfolio-experience .scene-coordinate {
    display:none;
  }

  .portfolio-experience .gallery-bottom {
    left:6%;
    right:6%;
    bottom:22px;
    grid-template-columns:1fr auto;
    gap:14px;
  }

  .portfolio-experience .project-caption>a {
    font-size:17px;
  }

  .portfolio-experience .project-caption>.eyebrow {
    font-size:7px;
    margin-bottom:6px;
  }

  .portfolio-experience .project-scope {
    font-size:9px;
  }

  .portfolio-experience .scroll-prompt {
    grid-row:2;
    grid-column:1 / -1;
    justify-self:center;
    padding:11px 17px;
    gap:14px;
  }

  .portfolio-experience .scroll-prompt small {
    display:block;
    font-size:9px;
  }

  .portfolio-experience .scroll-prompt strong {
    font-size:8px;
  }

  .portfolio-experience .mouse-icon {
    width:14px;
    height:22px;
  }

  .portfolio-experience .mouse-icon>i {
    left:5px;
    height:4px;
    top:4px;
  }

  .portfolio-experience .scroll-arrow {
    font-size:18px;
  }

  .portfolio-experience .project-navigation {
    grid-row:1;
    grid-column:2;
    gap:0;
  }

  .portfolio-experience .project-step {
    min-width:34px;
    min-height:44px;
    font-size:9px;
  }

  .portfolio-experience .project-step i {
    width:22px;
  }

  .portfolio-experience .back-mark {
    font-size:95px;
  }

  .portfolio-experience .back-kind {
    font-size:6px;
    margin-top:22px;
  }

  .portfolio-experience .back-client {
    font-size:10px;
  }

  .portfolio-experience .back-index {
    font-size:6px;
  }
}

@media(max-width:380px) {
  .portfolio-experience .stage-heading h1 {
    font-size:31px;
  }

  .portfolio-experience .intro {
    font-size:10px;
  }

  .portfolio-experience .gallery-bottom {
    left:5%;
    right:5%;
  }

  .portfolio-experience .project-caption>a {
    font-size:14px;
  }

  .portfolio-experience .project-caption>.eyebrow {
    font-size:6px;
  }

  .portfolio-experience .project-step {
    min-width:29px;
  }

  .portfolio-experience .project-step i {
    width:18px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .portfolio-experience *,
.portfolio-experience *:before,
.portfolio-experience *:after {
    animation:none!important;
    transition:none!important;
  }

  .portfolio-experience {
    height:110svh;
  }

  .portfolio-experience .project-card {
    will-change:auto;
  }

  .portfolio-experience .scene-orbit {
    display:none;
  }
}

.portfolio-experience .card-front * {
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.portfolio-experience .sandk .card-copy h2 {
  font-size:7.8cqw;
  line-height:1.12;
  letter-spacing:-.06em;
}

.portfolio-experience .card-client {
  top:84.7%;
}

.portfolio-experience .scroll-prompt {
  border-color:#657aaf80;
  background:#141c30e8;
}

.portfolio-experience .scroll-prompt strong {
  font-size:10px;
  color:#e4eaff;
  font-weight:600;
}

@keyframes cue-pulse { 0%,100%{opacity:1}50%{opacity:.58} }

@media(max-width:1000px) {
  .portfolio-experience .scroll-prompt strong {
    font-size:9px;
  }
}

@media(max-width:380px) {
  .portfolio-experience .scroll-prompt strong {
    font-size:8px;
  }
}

.portfolio-experience .card-back {
  transform-style:flat;
}
/* Leave the existing Promotions link and production chat launcher their own row. */
.portfolio-experience { --card-width: min(36vw, 38svh, 410px); }
.portfolio-experience .gallery-bottom { bottom: 98px; }
.portfolio-experience .scene { bottom: 183px; }
.portfolio-experience .project-caption-region { min-width: 0; }
.portfolio-experience [hidden] { display: none !important; }
.portfolio-more .page-lede { max-width: 760px; margin-top: 24px; }
@media (max-width: 760px) {
  .portfolio-experience { --card-width: min(60vw, 36svh, 370px); }
  .portfolio-experience .gallery-bottom { bottom: 84px; }
  .portfolio-experience .scene { bottom: 224px; }
  .portfolio-experience .project-caption-region { grid-row: 1; grid-column: 1; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .portfolio-experience { --card-width: min(31vw, 33svh); }
  .portfolio-experience .gallery-bottom { bottom: 84px; }
  .portfolio-experience .scene { bottom: 177px; }
}
@media (max-height: 760px) and (max-width: 760px) {
  .portfolio-experience { --card-width: min(50vw, 28svh); }
  .portfolio-experience .stage-heading { top: 100px; }
  .portfolio-experience .intro { display: none; }
  .portfolio-experience .stage-heading h1 { font-size: 30px; }
  .portfolio-experience .scene { top: 184px; bottom: 211px; }
}
/* With JavaScript unavailable, show every project as an ordinary card. */
.portfolio-experience:not(.motion-ready) { height: auto; padding: 120px 0 50px; }
.portfolio-experience:not(.motion-ready) .stage { position: relative; height: auto; min-height: 0; overflow: hidden; }
.portfolio-experience:not(.motion-ready) .stage-heading { position: relative; top: auto; left: auto; right: auto; margin: 0 6% 40px; }
.portfolio-experience:not(.motion-ready) .scene { position: relative; inset: auto; perspective: none; }
.portfolio-experience:not(.motion-ready) .deck { position: relative; left: auto; top: auto; width: 100%; height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; padding: 0 6%; }
.portfolio-experience:not(.motion-ready) .project-card { position: relative; width: 100%; transform: none; --depth: 0; }
.portfolio-experience:not(.motion-ready) .card-back, .portfolio-experience:not(.motion-ready) .scene-coordinate, .portfolio-experience:not(.motion-ready) .scene-orbit { display: none; }
.portfolio-experience:not(.motion-ready) .gallery-bottom { position: relative; left: auto; right: auto; bottom: auto; display: block; margin: 35px 6% 0; }
.portfolio-experience:not(.motion-ready) .project-caption-region { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; }
.portfolio-experience:not(.motion-ready) .project-caption[hidden] { display: block !important; }
@media (max-width: 760px) {
  .portfolio-experience:not(.motion-ready) .deck { grid-template-columns: 1fr; max-width: 410px; margin: auto; }
  .portfolio-experience:not(.motion-ready) .project-caption-region { grid-template-columns: 1fr; gap: 24px; }
}