* { box-sizing: border-box; }
@font-face {
  font-family: "Switzer";
  src: url("fonts/Switzer-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Switzer";
  src: url("fonts/Switzer-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-family: "Switzer", Helvetica, Arial, sans-serif;
}

body { background: #000; }

button { font-family: inherit; }

main {
  padding: 40px 32px 120px;
}

.video-block {
  max-width: 1420px;
  margin: 0 auto 72px;
}

.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 22px;
  overflow: hidden;
}

.video-frame video,
.chapter-video-frame video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

.video-frame video { object-fit: contain; }
.chapter-video-frame video { object-fit: cover; }

.intro {
  margin: 0 auto 36px;
  text-align: center;
}

.intro-title {
  font-size: clamp(46px, 8vw, 110px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: .9;
}

.intro-subtitle {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.progress {
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: .12em;
  opacity: .45;
  text-transform: uppercase;
}

.client-strip {
  max-width: 1420px;
  margin: 0 auto 18px;
  padding: 2px 0;
  overflow: hidden;
}

.client-row-window {
  height: 18px;
  overflow: hidden;
  position: relative;
}

.client-row-slider {
  display: flex;
  flex-direction: column;
  animation: clientSlide 22.2s infinite;
}

.client-row {
  height: 18px;
  flex: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 18px;
  text-transform: uppercase;
}

@keyframes clientSlide {
  0%, 20% { transform: translateY(0); }
  25%, 45% { transform: translateY(-25%); }
  50%, 70% { transform: translateY(-50%); }
  75%, 95% { transform: translateY(-75%); }
  100% { transform: translateY(0); }
}

.chapters {
  max-width: 1420px;
  margin: 0 auto 96px;
}

.chapter {
  border-top: 1px solid rgba(255,255,255,.22);
}

.chapter:last-child {
  border-bottom: 1px solid rgba(255,255,255,.22);
}

.chapter-button {
  width: 100%;
  min-height: 88px;
  padding: 28px 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-align: left;
}

.chapter-title {
  display: inline-block;
  font-size: clamp(20px, 2.25vw, 32px);
  font-weight: 600;
  letter-spacing: .075em;
  line-height: 1.1;
  text-transform: uppercase;
}

.chapter-body {
  overflow: hidden;
}

.chapter-inner {
  padding: 4px 0 54px;
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(420px, 1.28fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.chapter-copy {
  max-width: 620px;
  font-size: 14px;
  line-height: 1.8;
}

.chapter-copy p {
  margin: 0 0 5px;
}

.chapter-video-slot {
  min-width: 0;
}

.chapter-video-frame {
  width: 100%;
  background: #000;
  border-radius: 22px;
  overflow: hidden;
}

.chapter-video-frame.vertical {
  width: min(100%, 420px);
  aspect-ratio: 9 / 16;
  margin-left: auto;
}

.chapter-video-frame.square {
  width: min(100%, 620px);
  aspect-ratio: 1 / 1;
  margin-left: auto;
}

.chapter-video-frame.landscape {
  aspect-ratio: 16 / 9;
}

.chapter.is-opening .chapter-video-frame {
  opacity: .001;
}

.chapter.active .chapter-video-frame {
  opacity: 1;
  transition: opacity .28s ease;
}

.bottom-intro {
  margin-top: 118px;
  margin-bottom: 34px;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
  padding: 20px 0 40px;
  text-align: center;
}

.footer .contact {
  display: inline-flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .06em;
  cursor: pointer;
}

.footer .contact:hover { opacity: .45; }

.contact-copy.is-copied .contact-email::after {
  content: "  ·  COPIED";
  font-size: 9px;
  letter-spacing: .12em;
  opacity: .7;
}

@media (min-width: 769px) {
  .hero-reel .video-frame {
    width: min(100%, 1420px, calc((100svh - 300px) * 16 / 9));
    margin-left: auto;
    margin-right: auto;
  }

  .hero-reel {
    margin-bottom: clamp(36px, 6vh, 72px);
  }
}

@media (max-width: 768px) {
  main {
    padding: 24px 20px 90px;
  }

  .video-block {
    margin-bottom: 50px;
  }

  .video-frame,
  .chapter-video-frame {
    border-radius: 16px;
  }

  .intro {
    margin-bottom: 32px;
  }

  .client-strip {
    margin-bottom: 25px;
    padding: 2px 0;
  }

  .client-row-window {
    height: 44px;
  }

  .client-row-slider {
    animation: none;
    transition: transform .45s ease;
    will-change: transform;
  }

  .client-row {
    height: 44px;
    flex-basis: 44px;
    align-content: center;
    flex-wrap: wrap;
    gap: 5px 10px;
    white-space: normal;
    font-size: 7.5px;
    line-height: 1.25;
    text-align: center;
  }

  .chapters {
    margin-bottom: 70px;
  }

  .chapter {
    margin-bottom: 34px;
    border: 0;
  }

  .chapter:last-child {
    border: 0;
  }

  .chapter-button {
  min-height: 64px;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.24);
  border-bottom: 1px solid rgba(255,255,255,.24);
  text-align: center;
}

  .chapter-title {
    width: 100%;
    display: block;
    font-size: clamp(15px, 4.55vw, 18px);
    font-weight: 650;
    line-height: 1.08;
    letter-spacing: .11em;
    white-space: normal;
  }

  .chapter-inner {
    padding: 24px 0 8px;
    display: block;
  }

  .chapter-copy {
  max-width: 100%;
  margin: 0 auto 28px;
  font-size: 13.5px;
  line-height: 1.7;
  text-align: center;
}

  .chapter-video-frame.vertical,
  .chapter-video-frame.square,
  .chapter-video-frame.landscape {
    width: 100%;
    margin: 0;
  }

  .bottom-intro {
    margin-top: 84px;
    margin-bottom: 28px;
  }

  .footer {
    gap: 24px;
    flex-wrap: nowrap;
    padding-bottom: 20px;
  }

  .footer .contact {
    flex: 1 1 0;
    width: 0;
    align-items: center;
    font-size: 10px;
    line-height: 1.5;
  }

  .footer .contact span {
    display: block;
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-row-slider {
    animation: none;
  }

  .chapter-video-frame {
    transition: none !important;
  }
}
/* V16.1 — CENTERED VERTICAL DESKTOP CHAPTERS */
@media (min-width: 769px) {
  .chapter-button {
    text-align: center;
  }

  .chapter-inner {
    display: block;
    padding-top: 10px;
    padding-bottom: 70px;
  }

  .chapter-copy {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
  }

  .chapter-video-slot {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .chapter-video-frame.vertical {
    width: min(100%, 420px);
    margin: 0 auto;
  }

  .chapter-video-frame.square {
    width: min(100%, 620px);
    margin: 0 auto;
  }

  .chapter-video-frame.landscape {
    width: min(100%, 1100px);
    margin: 0 auto;
  }
}
/* Desktop only — shorter chapter divider lines */
@media (min-width: 769px) {

  /* Remove original borders */
  .chapter,
  .chapter:last-child {
    border-top: none !important;
    border-bottom: none !important;
    position: relative;
  }

  /* One divider above every chapter */
  .chapter::before {
    content: "";
    display: block;
    width: 72%;
    max-width: 900px;
    margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,.16);
  }

  /* Remove all bottom pseudo lines */
  .chapter::after {
    content: none;
  }

  /* Add ONE final divider below the last chapter */
  .chapter:last-child::after {
    content: "";
    display: block;
    width: 72%;
    max-width: 900px;
    margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,.16);
  }

}
/* Subtle iridescent text sheen */
.intro-title {
  color: transparent;
  background:
    linear-gradient(
      110deg,
      #ffffff 0%,
      #ffffff 34%,
      #cfebff 44%,
      #8db0cc 50%,
      #cfebff 56%,
      #ffffff 66%,
      #ffffff 100%
    );
  background-size: 220% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: iridescentSheen 9s ease-in-out infinite;
}

@keyframes iridescentSheen {
  0%,
  70%,
  100% {
    background-position: 100% 50%;
  }

  35% {
    background-position: 0% 50%;
  }
}
/* ---------- END CREDIT ---------- */

.end-credit{
    max-width:700px;
    margin:170px auto 120px;
    padding:0 24px;
    text-align:center;
}

.end-credit-block{
    font-family:"Switzer", Helvetica, Arial, sans-serif;
    text-transform:uppercase;
    font-size:10px;
    line-height:2.15;
    letter-spacing:.16em;
    opacity:.72;
}

@media (max-width:768px){

    .end-credit{
        margin:90px auto 70px;
        padding:0 20px;
    }

    .end-credit-block{
        font-size:8px;
        line-height:2;
        letter-spacing:.10em;
    }

}
/* Mobile end-credit correction */
@media (max-width: 768px) {
  .end-credit {
    width: 100%;
    max-width: none;
    margin: 90px auto 70px;
    padding: 0 10px;
    text-align: center;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .end-credit-block {
    font-size: 7px !important;
    line-height: 1.9;
    letter-spacing: .07em;
    text-align: center;
    white-space: nowrap;
    opacity: .72;
  }
}