.hero {
  grid-template-columns: 47% 53%;
  min-height: 690px;
  background: #12372c;
}
.hero-copy {
  padding-left: 11.1%;
  padding-right: 1%;
}
.hero h1 {
  font-size: var(--type-hero);
  width: 116%;
}
.hero-copy > p {
  font-size: var(--type-lead);
}
.portfolio-animation {
  position: relative;
  isolation: isolate;
  background: #102e26;
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  --stage-progress: 0%;
  --reveal: 72%;
}
.scene-heading {
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 28px 7% 0 8%;
}
.motion-toggle {
  height: 36px;
  width: 36px;
  border: 1px solid #567263;
  background: #12382aaa;
  color: #eadbb3;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.motion-toggle:hover {
  background: #315340;
}
.motion-symbol {
  font-size: 16px;
}
.portfolio-scene {
  height: 430px;
  position: relative;
  margin-top: -5px;
  overflow: hidden;
}
.city-camera {
  position: absolute;
  inset: 0;
  transform: translate(4%, 5%) scale(1.24);
  transition: transform 4.5s cubic-bezier(0.2, 0.55, 0.35, 1);
  transform-origin: 50% 60%;
}
.city-camera > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.city-base {
  filter: brightness(0.45) saturate(0.5);
}
.city-reveal {
  clip-path: inset(0 var(--reveal) 0 0);
  transition: clip-path 4.2s cubic-bezier(0.18, 0.65, 0.25, 1);
  filter: brightness(1.06);
}
.light-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 25%,
    #f7dfa914 45%,
    #fff0c329 50%,
    transparent 65%
  );
  mix-blend-mode: screen;
  transform: translateX(-100%);
  animation: architectural-light 24s ease-in-out infinite;
  pointer-events: none;
}
.scene-vignette {
  position: absolute;
  inset: -1px;
  background:
    linear-gradient(90deg, #102e26, transparent 15%, transparent 88%, #102e26),
    linear-gradient(0deg, #102e26, transparent 24%, transparent 80%, #102e26);
  pointer-events: none;
}
.portfolio-animation[data-stage="1"] {
  --reveal: 46%;
}
.portfolio-animation[data-stage="1"] .city-camera {
  transform: translate(1%, 3%) scale(1.14);
}
.portfolio-animation[data-stage="2"] {
  --reveal: 20%;
}
.portfolio-animation[data-stage="2"] .city-camera {
  transform: translate(-1%, 1%) scale(1.07);
}
.portfolio-animation[data-stage="3"] {
  --reveal: 0%;
}
.portfolio-animation[data-stage="3"] .city-camera {
  transform: translate(0, 0) scale(1);
}
.stage-caption {
  padding: 0 7% 0 8%;
  margin-top: -6px;
  min-height: 108px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  z-index: 2;
}
.stage-count {
  font-size: 12px;
  letter-spacing: 1px;
  color: #cbb884;
  padding-top: 9px;
  white-space: nowrap;
}
.stage-caption h2 {
  font-size: var(--type-subheading);
  line-height: 1.2;
  color: #f5f5ea;
  letter-spacing: -0.7px;
  margin: 0 0 9px;
}
.stage-caption p {
  font-size: 14px;
  color: #b5c8b8;
  line-height: 1.5;
  margin: 0;
  max-width: 52ch;
}
.story-steps {
  padding: 22px 7% 29px 8%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: auto;
  z-index: 3;
}
.story-step {
  border: 0;
  background: transparent;
  color: #9cb5a5;
  padding: 8px 0;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  font-family: inherit;
}
.step-track {
  display: block;
  height: 2px;
  background: #466151;
  margin-bottom: 13px;
  position: relative;
  overflow: hidden;
}
.step-track i {
  display: block;
  width: 0;
  height: 100%;
  background: #dec895;
}
.story-step.active .step-track i {
  width: var(--stage-progress);
}
.story-step.complete .step-track i {
  width: 100%;
}
.story-step.active,
.story-step:hover {
  color: #f1dfb0;
}
.step-label {
  font-size: 13px;
  display: flex;
  gap: 7px;
  line-height: 1.4;
}
.step-label b {
  font-weight: 400;
  color: #91a48e;
  font-size: 11px;
  padding-top: 2px;
}
.story-step.active .step-label b {
  color: #cbb884;
}
.portfolio-animation.paused .light-sweep {
  animation-play-state: paused;
}
.portfolio-animation.paused .city-camera,
.portfolio-animation.paused .city-reveal {
  transition: none;
}
@keyframes architectural-light {
  0%,
  10% {
    transform: translateX(-100%);
  }
  80%,
  100% {
    transform: translateX(100%);
  }
}
@media (min-width: 1600px) {
  .hero {
    min-height: 760px;
  }
  .hero-copy {
    padding-left: 14.9%;
  }
  .hero h1 {
    font-size: var(--type-hero);
  }
  .portfolio-scene {
    height: 490px;
  }
  .stage-caption h2 {
    font-size: var(--type-subheading);
  }
  .hero-copy > p {
    font-size: var(--type-lead);
  }
  .scene-heading {
    padding-top: 34px;
  }
  .story-steps {
    padding-bottom: 35px;
  }
}
@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 48% 52%;
    min-height: 650px;
  }
  .hero-copy {
    padding-left: 8.4%;
  }
  .hero h1 {
    font-size: var(--type-hero);
  }
  .hero-copy > p {
    font-size: var(--type-lead);
  }
  .portfolio-scene {
    height: 380px;
    margin-top: 10px;
  }
  .stage-caption {
    padding-left: 6%;
    padding-right: 6%;
    gap: 12px;
    min-height: 118px;
  }
  .stage-caption h2 {
    font-size: var(--type-subheading);
  }
  .stage-count {
    font-size: 11px;
  }
  .story-steps {
    padding-left: 6%;
    padding-right: 6%;
    gap: 10px;
    padding-top: 15px;
  }
  .step-label {
    font-size: 12px;
    display: block;
  }
  .step-label b {
    display: none;
  }
}
@media (max-width: 760px) {
  .hero-copy {
    padding: var(--hero-pt) 6% var(--hero-pb);
  }
  .hero h1 {
    font-size: var(--type-hero);
    width: auto;
  }
  .hero-copy > p {
    font-size: var(--type-lead);
  }
  .hero-bottom {
    display: none;
  }
  .portfolio-animation {
    min-height: 530px;
  }
  .scene-heading {
    padding: 22px 6% 0;
    font-size: 13px;
  }
  .portfolio-scene {
    height: 330px;
    margin-top: -10px;
  }
  .stage-caption {
    margin-top: -8px;
    min-height: 110px;
  }
  .stage-caption h2 {
    font-size: var(--type-subheading);
  }
  .stage-caption p {
    font-size: 14px;
  }
  .stage-count {
    font-size: 11px;
  }
  .story-steps {
    padding: 10px 6% 22px;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
  }
  .step-label {
    font-size: 12px;
    display: flex;
    gap: 6px;
  }
  .step-label b {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .city-camera,
  .city-reveal {
    transition: none;
  }
  .light-sweep {
    animation: none;
  }
}