#gs-portfolio .scotty-milling {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-bottom: 16px;
  background: #0a0a0a;
}

#gs-portfolio .scotty-milling img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#gs-portfolio .scotty-milling .scotty-milling-light { display: none; }

#gs-portfolio .scotty-milling[data-sweep-ready] .scotty-milling-base {
  filter: brightness(.42) saturate(.7);
}

#gs-portfolio .scotty-milling[data-sweep-ready] .scotty-milling-light {
  display: block;
  filter: brightness(1.35) saturate(1.2);
  mask-image: radial-gradient(circle at var(--scotty-light, 50%) 50%, #000 0 14%, transparent 34%);
}

#gs-portfolio .scotty-milling figcaption {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 6px 8px;
  background: #100e0de6;
  color: #f8e5d6;
  font: 9px/1.35 var(--mono);
  letter-spacing: .06em;
}

#gs-portfolio .loyalty-stage {
  --pass-tint: #b9ccac;
  --pass-angle: -8deg;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 222px;
  aspect-ratio: 1.6;
  margin-top: 20px;
  border: 1px solid #69806a;
  background: radial-gradient(ellipse at 50% 78%, #4b6550, #0b2421 73%);
  perspective: 820px;
}

#gs-portfolio .loyalty-stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 132%;
  height: 80%;
  bottom: -34%;
  background: repeating-linear-gradient(90deg, #c7d7bb27 0 1px, transparent 1px 23px),
              repeating-linear-gradient(0deg, #c7d7bb27 0 1px, transparent 1px 23px);
  mask-image: linear-gradient(transparent, #000 40%);
  transform: rotateX(53deg);
}

#gs-portfolio .loyalty-stage :is(.loyalty-stage-index, .loyalty-stage-foot) {
  position: absolute;
  left: 12px;
  color: #ccd9c2;
  font: 8px/1.45 var(--mono);
  letter-spacing: .09em;
}

#gs-portfolio .loyalty-stage-index { top: 10px; }
#gs-portfolio .loyalty-stage-foot { bottom: 10px; }

#gs-portfolio .loyalty-plate {
  position: relative;
  width: min(75%, 360px);
  aspect-ratio: 1.75;
  border-radius: 11px;
  color: #152e25;
  transform: rotateX(calc(9deg + var(--pass-x, 0deg))) rotateY(calc(var(--pass-angle) + var(--pass-y, 0deg))) rotateZ(-4deg);
  transform-style: preserve-3d;
  transition: transform .42s cubic-bezier(.2,.75,.25,1);
}

#gs-portfolio .loyalty-plate::before,
#gs-portfolio .loyalty-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid #e6e3b9;
  background: linear-gradient(130deg, #415e49, #9ba98b 64%, #304d3f);
  transform: translateZ(-5px) translateY(3px);
  box-shadow: 0 20px 31px #061513a8;
}

#gs-portfolio .loyalty-plate::after {
  transform: translateZ(-16px) translate(10px, 13px);
  opacity: .56;
  box-shadow: none;
}

#gs-portfolio .loyalty-plate-front {
  display: flex;
  flex-direction: column;
  justify-content: end;
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  padding: 10% 7% 7%;
  border: 1px solid #e6ead1;
  border-radius: inherit;
  background: linear-gradient(128deg, #fff6d6b0 0%, transparent 41%, #fffad778 64%, #102b2a2c 100%), var(--pass-tint);
  transform: translateZ(1px);
  transition: background-color .42s ease;
}

#gs-portfolio .loyalty-plate-top {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 11%;
  left: 7%;
  right: 7%;
}
#gs-portfolio .loyalty-plate :is(.loyalty-plate-top, .loyalty-plate-kicker) {
  font: 8px/1.4 var(--mono);
  letter-spacing: .06em;
}

#gs-portfolio .loyalty-plate-front strong {
  position: relative;
  margin-top: 3px;
  font: 500 clamp(18px, 2.2vw, 31px)/1.03 var(--display);
  letter-spacing: -.055em;
}

#gs-portfolio .loyalty-plate-detail { margin-top: 4px; font: 11px/1.25 var(--body); }

#gs-portfolio .loyalty-engraving {
  position: absolute;
  top: 18%;
  right: -2%;
  width: 46%;
  height: 72%;
  stroke: #345a48;
  stroke-opacity: .36;
  stroke-width: 1.15;
}

#gs-portfolio [data-loyalty-phase="1"] .loyalty-stage { --pass-tint: #dbbf95; --pass-angle: 7deg; }
#gs-portfolio [data-loyalty-phase="2"] .loyalty-stage { --pass-tint: #c8cfe1; --pass-angle: -2deg; }

.motion-paused #gs-portfolio .loyalty-plate { --pass-x: 0deg; --pass-y: 0deg; transition: none; }
.motion-paused #gs-portfolio .loyalty-plate-front { transition: none; }

@media (prefers-reduced-motion: reduce) {
  #gs-portfolio .loyalty-plate { --pass-x: 0deg; --pass-y: 0deg; transition: none; }
  #gs-portfolio .loyalty-plate-front { transition: none; }
}

#gs-portfolio .work-route-hero > .gs-wrap {
  gap: clamp(28px, 7vw, 110px);
}

#gs-portfolio .work-routes {
  min-width: 0;
  padding: clamp(18px, 3vw, 36px);
  background: #eeeae0;
  border: 1px solid #d3c9b8;
  color: #263a30;
}

#gs-portfolio .work-routes h2 {
  margin-bottom: 13px;
  font: 500 13px/1.45 var(--body);
}

#gs-portfolio .work-routes ol {
  list-style: none;
}

#gs-portfolio .work-routes li > a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  border-top: 1px solid #c7c0b0;
}

#gs-portfolio .work-routes strong,
#gs-portfolio .work-routes small {
  display: block;
}

#gs-portfolio .work-routes strong {
  font: 500 clamp(18px, 2.1vw, 26px)/1.15 var(--display);
  letter-spacing: -.035em;
}

#gs-portfolio .work-routes small {
  margin-top: 4px;
  color: #4f5d50;
  font: 12px/1.5 var(--body);
}

#gs-portfolio .work-route-number {
  color: #805b43;
  font: 10px/1 var(--mono);
}

#gs-portfolio .work-route-arrow { color: #805b43; font-size: 19px; }
#gs-portfolio .work-routes li > a:hover strong { color: #805b43; }

#gs-portfolio .work-route-all {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  border-top: 1px solid #c7c0b0;
  color: #574636;
  font: 600 12px/1.45 var(--body);
}

#gs-portfolio .work-routes a:focus-visible {
  outline: 2px solid #805b43;
  outline-offset: 4px;
}

@media (max-width: 750px) {
  #gs-portfolio .work-route-hero > .gs-wrap { gap: 24px; }
}