.project-page main {
  overflow: hidden;
}

.project-hero {
  min-height: 590px;
  padding-top: 138px;
  display: flex;
  align-items: center;
}

.project-hero-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 930px;
}

.project-return {
  display: inline-flex;
  min-height: 40px;
  margin-bottom: 30px;
  padding: 0 16px;
  font-size: 9px;
}

.project-hero h1 {
  margin: 18px 0 24px;
  font: 400 clamp(82px, 12vw, 170px)/.84 var(--display);
  letter-spacing: -.04em;
  text-transform: uppercase;
  max-width: 100%;
  overflow-wrap: normal;
}

.project-hero h1 span,
.project-title-pepinos .project-title-accent {
  color: var(--orange);
}

.project-title-pepinos {
  line-height: .9;
}

.project-title-pepinos .project-title-tail {
  display: inline;
}

.project-title-n {
  position: relative;
  display: inline-block;
}

.project-title-tilde {
  position: absolute;
  left: 50%;
  top: .22em;
  color: var(--orange);
  font: inherit;
  font-size: .34em;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
  transform: translate(-50%, -100%);
}

.project-hero-copy > p {
  max-width: 720px;
  margin: 0;
  color: var(--light-gray);
  font-size: 14px;
  line-height: 1.75;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

.project-tags span,
.software-list span {
  position: relative;
  padding: 8px 12px;
  color: #d5d5d8;
  border: 1px solid rgba(249,249,249,.13);
  border-radius: 99px;
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.project-glow {
  position: absolute;
  width: 430px;
  height: 430px;
  right: -190px;
  top: 80px;
  border-radius: 50%;
  background: rgba(232,80,2,.2);
  filter: blur(120px);
  pointer-events: none;
}

.project-gallery {
  padding-block: 24px 120px;
}

.project-carousel {
  position: relative;
  padding: clamp(18px, 3vw, 42px);
  overflow: hidden;
  touch-action: pan-y;
  border: 1px solid rgba(249,249,249,.17);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 30%),
    rgba(10,10,10,.82);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 1px 0 0 rgba(255,255,255,.08),
    0 30px 90px rgba(0,0,0,.48),
    0 0 42px rgba(232,80,2,.09);
}

.project-carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.035) 18%, transparent 38%);
  opacity: .55;
  pointer-events: none;
}

.project-carousel::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249,249,249,.7), transparent);
  pointer-events: none;
}

.carousel-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 45%, rgba(232,80,2,.11), transparent 43%),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(18,18,18,.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(249,249,249,.05);
}

.carousel-track {
  display: flex;
  gap: 0;
  width: 100%;
  transition: transform .55s cubic-bezier(.22,.8,.25,1);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  height: clamp(500px, 59vw, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}

.carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: min(72vh, 760px);
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.36));
}

.project-video-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(249,249,249,.17);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 30%),
    rgba(10,10,10,.82);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 1px 0 0 rgba(255,255,255,.08),
    0 30px 90px rgba(0,0,0,.48),
    0 0 42px rgba(232,80,2,.09);
}

.project-video-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.035) 18%, transparent 38%);
  opacity: .42;
  pointer-events: none;
}

.project-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(74vh, 760px);
  object-fit: contain;
  background: #050505;
}

.carousel-controls {
  position: absolute;
  z-index: 6;
  left: clamp(28px, 4vw, 60px);
  right: clamp(28px, 4vw, 60px);
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}

.carousel-arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: var(--text);
  border: 1px solid rgba(249,249,249,.2);
  border-radius: 50%;
  background: rgba(8,8,8,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 30px rgba(0,0,0,.38);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .25s ease, color .25s ease, border-color .25s ease;
}

.carousel-arrow:hover {
  color: var(--orange-light);
  border-color: rgba(232,80,2,.52);
  transform: scale(1.06);
}

.carousel-dots {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: clamp(27px, 4vw, 54px);
  display: flex;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(249,249,249,.14);
  border-radius: 99px;
  background: rgba(8,8,8,.66);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateX(-50%);
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(249,249,249,.35);
  cursor: pointer;
  transition: width .25s ease, border-radius .25s ease, background .25s ease;
}

.carousel-dot.active {
  width: 24px;
  border-radius: 99px;
  background: var(--orange);
  box-shadow: 0 0 12px rgba(232,80,2,.5);
}

.project-story {
  padding-block: 100px 120px;
  border-top: 1px solid var(--border);
}

.project-story-heading {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 48px;
}

.project-cover-heading {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 48px;
}

.project-story h2,
.project-cover-heading h2 {
  margin: 10px 0 0;
  font: 400 clamp(54px, 7vw, 92px)/.92 var(--display);
}

.project-story h2 span,
.project-cover-heading h2 span {
  color: var(--orange);
}

.project-story-intro {
  margin: 0;
  color: var(--light-gray);
  font-size: 14px;
  line-height: 1.8;
}

.project-story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.project-story-card {
  min-height: 285px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(8,8,8,.82));
}

.project-story-card b {
  color: var(--orange);
  font-size: 10px;
  letter-spacing: .1em;
}

.project-story-card h3 {
  margin: 58px 0 14px;
  font: 400 27px/1 var(--display);
  text-transform: uppercase;
}

.project-story-card p {
  margin: 0;
  color: #858a97;
  font-size: 12px;
  line-height: 1.75;
}

.project-software {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 34px;
  padding: 25px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(15,15,15,.68);
}

.project-software strong {
  font: 400 22px var(--display);
  text-transform: uppercase;
}

.software-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.software-list span {
  color: var(--orange-light);
  border-color: rgba(232,80,2,.28);
}

.project-final-cta {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.project-final-cta h2 {
  margin: 0 0 30px;
  font: 400 clamp(54px, 7vw, 88px)/.95 var(--display);
}

.project-final-cta h2 span {
  color: var(--orange);
}

.project-final-cta .button {
  min-width: 180px;
}

@media (max-width: 820px) {
  .project-hero {
    min-height: 540px;
    padding-top: 120px;
  }
  .project-hero h1 {
    font-size: clamp(70px, 15vw, 112px);
    line-height: .9;
  }
  .carousel-slide {
    height: clamp(440px, 78vw, 600px);
  }
  .project-story-heading {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .project-cover-heading {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .project-story-grid {
    grid-template-columns: 1fr;
  }
  .project-story-card {
    min-height: 230px;
  }
}

@media (max-width: 560px) {
  .project-page main,
  .project-page .section {
    max-width: 100%;
  }
  .project-page main {
    overflow-x: clip;
  }
  .project-page *,
  .project-page *::before,
  .project-page *::after {
    box-sizing: border-box;
  }
  .project-page .section {
    width: calc(100vw - 28px);
  }
  .project-hero-copy,
  .project-story-heading,
  .project-cover-heading,
  .project-story-grid,
  .project-software,
  .project-carousel,
  .project-video-frame,
  .project-story-intro,
  .project-hero-copy > p {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .project-hero-copy,
  .project-hero h1,
  .project-hero-copy > p,
  .project-hero .eyebrow {
    max-width: calc(100vw - 64px);
  }
  .project-hero-copy > p,
  .project-story-intro,
  .project-hero .eyebrow {
    overflow-wrap: anywhere;
  }
  .project-hero-copy > p,
  .project-story-intro,
  .project-hero .eyebrow {
    width: min(300px, calc(100vw - 96px)) !important;
    max-width: min(300px, calc(100vw - 96px)) !important;
  }
  .project-tags {
    max-width: 100%;
  }
  .project-hero {
    min-height: 500px;
    padding-top: 104px;
  }
  .project-return {
    margin-bottom: 24px;
  }
  .project-hero h1 {
    margin-block: 15px 20px;
    font-size: clamp(58px, 18vw, 82px);
    line-height: .94;
  }
  .project-title-pepinos .project-title-tail {
    display: block;
  }
  .project-hero-copy > p,
  .project-story-intro {
    font-size: 12px;
  }
  .project-gallery {
    padding-block: 10px 82px;
  }
  .project-carousel {
    padding: 14px;
    border-radius: 24px;
    border-color: rgba(249,249,249,.2);
    background:
      linear-gradient(135deg, rgba(255,255,255,.09), transparent 32%),
      rgba(12,12,12,.84);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.26),
      inset 1px 0 0 rgba(255,255,255,.09),
      0 24px 70px rgba(0,0,0,.46),
      0 0 34px rgba(232,80,2,.13);
  }
  .project-video-frame {
    border-radius: 24px;
    border-color: rgba(249,249,249,.2);
    background:
      linear-gradient(135deg, rgba(255,255,255,.09), transparent 32%),
      rgba(12,12,12,.84);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
  }
  .project-video {
    max-height: 72vh;
  }
  .carousel-viewport {
    border-radius: 16px;
  }
  .carousel-slide {
    height: 440px;
  }
  .carousel-slide img {
    max-width: 100%;
    max-height: 62vh;
    object-fit: contain;
  }
  .carousel-controls {
    left: 22px;
    right: 22px;
  }
  .carousel-arrow {
    width: 42px;
    height: 42px;
  }
  .carousel-dots {
    bottom: 22px;
    border-color: rgba(249,249,249,.2);
    background: rgba(10,10,10,.76);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 10px 28px rgba(0,0,0,.34),
      0 0 18px rgba(232,80,2,.1);
  }
  .project-story {
    padding-block: 80px 90px;
  }
  .project-story-card {
    min-height: 215px;
    padding: 23px;
    border-color: rgba(249,249,249,.18);
    background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(10,10,10,.86));
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.2),
      inset 1px 0 0 rgba(255,255,255,.07),
      0 18px 48px rgba(0,0,0,.36),
      0 0 24px rgba(232,80,2,.08);
  }
  .project-story-card h3 {
    margin-top: 38px;
  }
  .project-software {
    align-items: flex-start;
    flex-direction: column;
    border-color: rgba(249,249,249,.18);
    background: rgba(18,18,18,.76);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.2),
      0 18px 42px rgba(0,0,0,.32),
      0 0 22px rgba(232,80,2,.08);
  }
  .software-list {
    justify-content: flex-start;
  }
  .project-final-cta {
    min-height: 440px;
  }
  .project-final-cta h2 {
    max-width: min(100%, 340px);
    font-size: clamp(44px, 15vw, 64px);
    overflow-wrap: normal;
  }
}