@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --paper: #f4f3ef;
  --paper-2: #ebeae5;
  --ink: #171717;
  --grey: #777773;
  --light-grey: #bcbcb7;
  --yellow: #f8bd18;
  --line: rgba(23, 23, 23, 0.16);
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.hero {
  min-height: 100svh;
  height: 100svh;
  position: relative;
  overflow: hidden;
  isolation: isolate;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
  radial-gradient(
    circle at 50% 45%,
    rgba(255,255,255,.55),
    transparent 42%
  ),
  var(--paper);

  animation: projector-breathe 7s ease-in-out infinite;
}

/* ---------------------------------------------------------
   PROJECTOR BREATHING
---------------------------------------------------------- */

@keyframes projector-breathe {

  0% {
    filter: brightness(1);
  }

  45% {
    filter: brightness(0.988);
  }

  52% {
    filter: brightness(1.008);
  }

  100% {
    filter: brightness(1);
  }

}

/* ---------------------------------------------------------
   FILM GRAIN
---------------------------------------------------------- */

.hero-noise {
  position: absolute;

  inset: -20%;

  z-index: 1;

  pointer-events: none;

  opacity: 0.035;

  background-image:
  repeating-radial-gradient(
    circle at 0 0,
    transparent 0 2px,
    #000 3px 3px
  );

  background-size:
  4px 4px;

  mix-blend-mode: multiply;

  animation:
  film-grain 0.18s steps(2) infinite,
  grain-breathe 5s ease-in-out infinite;
}


/* ---------------------------------------------------------
   MICRO GRAIN MOVEMENT
---------------------------------------------------------- */

@keyframes film-grain {

  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-1%, 1%);
  }

  50% {
    transform: translate(1%, -1%);
  }

  75% {
    transform: translate(1%, 1%);
  }

  100% {
    transform: translate(0, 0);
  }

}


/* ---------------------------------------------------------
   GRAIN BREATHING
---------------------------------------------------------- */

@keyframes grain-breathe {

  0% {
    opacity: 0.028;
  }

  50% {
    opacity: 0.048;
  }

  100% {
    opacity: 0.028;
  }

}

/* ---------------------------------------------------------
   VIEWFINDER
---------------------------------------------------------- */

.viewfinder {
  position: absolute;
  inset: 34px;
  z-index: 3;
  pointer-events: none;

  color: rgba(23, 23, 23, 0.48);

  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;

  text-transform: uppercase;
}

/* -----------------------------------------
   FRAME CORNERS
------------------------------------------ */

.vf-corner {
  position: absolute;

  width: 30px;
  height: 30px;

  border-color: rgba(23, 23, 23, 0.28);
  border-style: solid;
}

.vf-tl {
  top: 0;
  left: 0;

  border-width: 1px 0 0 1px;
}

.vf-tr {
  top: 0;
  right: 0;

  border-width: 1px 1px 0 0;
}

.vf-bl {
  bottom: 0;
  left: 0;

  border-width: 0 0 1px 1px;
}

.vf-br {
  bottom: 0;
  right: 0;

  border-width: 0 1px 1px 0;
}

/* =========================================================
   INDEX — FULL SCREEN MENU
========================================================= */

.menu-overlay {

    position: fixed;

    inset: 0;

    z-index: 10000;

    padding:
        120px 9vw;

    background:
        #101010;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.menu-close {

    position: absolute;

    top: 30px;

    right: 42px;

    border: 0;

    background:
        transparent;

    color:
        #ffffff;

    font-family:
        "DM Mono",
        monospace;

    font-size: 8px;

    letter-spacing: .15em;

    cursor: pointer;

    z-index: 10;

}


/* =========================================================
   NAVIGATION
========================================================= */

.menu-navigation {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.menu-navigation a {

    display: flex;

    align-items: baseline;

    gap: 25px;

    color: #ffffff;

    text-decoration: none;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            50px,
            7vw,
            100px
        );

    line-height: .9;

    letter-spacing:
        -.06em;

    font-weight: 300;

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        color .25s ease;

}


.menu-navigation a span {

    font-family:
        "DM Mono",
        monospace;

    font-size: 8px;

    letter-spacing: .08em;

    color:
        #e5b800;

}


.menu-navigation a:hover {

    color:
        #e5b800;

}


/* =========================================================
   MENU BUTTON
========================================================= */

.menu-trigger {

    position: relative;

    z-index: 10001;

    cursor: pointer;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .menu-overlay {

        padding:
            100px 25px;

    }


    .menu-navigation a {

        font-size:
            44px;

    }


    .menu-close {

        top: 25px;

        right: 20px;

    }

}

/* -----------------------------------------
   CAMERA METADATA
------------------------------------------ */

.vf-meta {
  position: absolute;

  display: flex;
  align-items: center;
  gap: 18px;

  white-space: nowrap;
}

.vf-top-left {
  top: 72px;
  left: 42px;
}

.vf-top-right {
  top: 72px;
  right: 42px;
}

.vf-bottom-left {
  bottom: 72px;
  left: 42px;
}

.vf-bottom-right {
  bottom: 72px;
  right: 42px;
}/* -----------------------------------------
   REC INDICATOR
------------------------------------------ */

.record-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rec-dot {
  display: inline-block;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--ink);

  vertical-align: middle;

  box-shadow: 0 0 0 rgba(23, 23, 23, 0);
}

/* -----------------------------------------
   FOCUS MARKS
------------------------------------------ */

.focus-mark {
  position: absolute;

  opacity: 0.45;

  background: var(--ink);
}

.focus-top,
.focus-bottom {
  width: 1px;
  height: 18px;

  left: 50%;

  transform: translateX(-50%);
}

.focus-top {
  top: 16px;
}

.focus-bottom {
  bottom: 16px;
}

.focus-left,
.focus-right {
  width: 18px;
  height: 1px;

  top: 50%;

  transform: translateY(-50%);
}

.focus-left {
  left: 16px;
}

.focus-right {
  right: 16px;
}

/* -----------------------------------------
   CENTER FOCUS SYSTEM
------------------------------------------ */

.focus-crosshair {
  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  font-family: var(--mono);

  font-size: 11px;

  opacity: 0.32;

  transition:
  opacity 0.3s ease;
}


/* -----------------------------------------
   AUTOFOCUS BOX
------------------------------------------ */

.focus-box {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 82px;
  height: 52px;

  transform:
  translate(-50%, -50%)
  scale(0.7);

  border: 1px solid rgba(23, 23, 23, 0.18);

  opacity: 0;

  transition:
  border-color 0.25s ease;
}


/* -----------------------------------------
   FOCUS CORNERS
------------------------------------------ */

.focus-corner {
  position: absolute;

  width: 9px;
  height: 9px;

  display: block;

  border-color: rgba(23, 23, 23, 0.62);
  border-style: solid;
}


/* top left */

.focus-corner-tl {
  top: -1px;
  left: -1px;

  border-width: 1px 0 0 1px;
}


/* top right */

.focus-corner-tr {
  top: -1px;
  right: -1px;

  border-width: 1px 1px 0 0;
}


/* bottom left */

.focus-corner-bl {
  bottom: -1px;
  left: -1px;

  border-width: 0 0 1px 1px;
}


/* bottom right */

.focus-corner-br {
  bottom: -1px;
  right: -1px;

  border-width: 0 1px 1px 0;
}


/* -----------------------------------------
   FOCUS LOCK LABEL
------------------------------------------ */

.focus-lock {
  position: absolute;

  left: 50%;
  top: calc(50% + 42px);

  transform:
  translateX(-50%)
  translateY(5px);

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: 0.16em;

  white-space: nowrap;

  color: var(--grey);

  opacity: 0;
}

/* -----------------------------------------
   EXPOSURE METER
------------------------------------------ */

.exposure-meter {
  position: absolute;

  left: 50%;
  bottom: 72px;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 7px;

  opacity: 0.42;

  white-space: nowrap;
}

.exposure-meter i {
  display: block;

  width: 80px;
  height: 1px;

  background:
  repeating-linear-gradient(
    90deg,
    var(--ink) 0 1px,
    transparent 1px 8px
  );
}

/* -----------------------------------------
   FRAME COUNTER
------------------------------------------ */

.frame-counter {
  position: absolute;

  left: 50%;
  bottom: 50px;

  transform: translateX(-50%);

  font-size: 7px;

  opacity: 0.45;

  letter-spacing: 0.18em;

  white-space: nowrap;
}

/* ---------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 32px 42px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-mini {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15em;
}

.brand-mini span {
  display: block;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .38em;
  margin-top: 4px;
  font-weight: 400;
}

.menu-trigger {
  border: 0;
  background: transparent;
  width: 42px;
  height: 42px;
  padding: 9px;
  display: grid;
  gap: 5px;
  align-content: center;
  cursor: pointer;
}

.menu-trigger span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transition: transform .35s ease, width .35s ease;
}

.menu-trigger:hover span:nth-child(2) {
  width: 65%;
}

/* ---------------------------------------------------------
   CINEMATIC FILM STRIP
---------------------------------------------------------- */

.film-track {
  position: absolute;

  width: 125%;
  height: 100%;

  left: -12.5%;
  top: 0;

  z-index: 2;

  pointer-events: none;

  overflow: visible;

  transform-origin: center center;
}

.film-svg {
  position: absolute;

  width: 100%;
  height: 100%;

  left: 0;
  top: 0;

  overflow: visible;
}

/* ---------------------------------------------------------
   MAIN FILM BODY
---------------------------------------------------------- */

.film-body {
  fill: none;

  stroke: var(--yellow);

  stroke-width: 78;

  stroke-linecap: butt;
  stroke-linejoin: round;

  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;

  filter:
  drop-shadow(0 8px 18px rgba(0,0,0,.07));
}

/* ---------------------------------------------------------
   FILM PERFORATIONS
---------------------------------------------------------- */

.film-perf {
  fill: none;

  stroke: var(--paper);

  stroke-width: 8;

  stroke-linecap: butt;

  stroke-dasharray: 4 17;

  stroke-dashoffset: 1000;

  opacity: .95;
}

/* ---------------------------------------------------------
   SUBTLE CENTER LINE
---------------------------------------------------------- */

.film-center-line {
  fill: none;

  stroke: rgba(23,23,23,.08);

  stroke-width: 1;

  stroke-dasharray: 3 12;

  stroke-dashoffset: 1000;
}
/* ---------------------------------------------------------
   LOGO
---------------------------------------------------------- */

/* ---------------------------------------------------------
   LOGO
---------------------------------------------------------- */

.hero-logo {
  position: absolute;

  width: min(610px, 48vw);

  left: 50%;
  top: 40%;

  z-index: 5;

  transform:
  translate(-50%, -50%)
  scale(0.94);

  opacity: 0;

  pointer-events: none;

  filter:
  blur(5px)
  contrast(0.92);

  /*
   * Keeps the isolation layer contained
   * inside the logo's own visual stack.
   */
  isolation: isolate;
}


.logo-isolation {
  position: absolute;

  left: -7%;
  top: 13%;

  width: 114%;
  height: 84%;

  z-index: -1;

  background: rgba(244, 243, 239, 0.96);

  /*
   * Organic oval rather than a rectangular box.
   */
  border-radius: 50%;

  /*
   * Slightly soft edge so it feels like
   * a cinematic paper/projection layer.
   */
  filter: blur(7px);

  opacity: 0.96;

  transform: scale(1.02);
}


.hero-logo::after {
  content: "";

  position: absolute;

  inset: -8% -10%;

  background:
  linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.75) 48%,
    transparent 58%
  );

  transform: translateX(-120%);

  pointer-events: none;

  mix-blend-mode: screen;
}

.hero-logo img {
  position: relative;

  z-index: 2;

  width: 100%;

  display: block;

  filter: contrast(1.05);
}

/* ---------------------------------------------------------
   HERO CONTENT
---------------------------------------------------------- */

.hero-content {
  position: relative;
  z-index: 7;
  text-align: center;
  margin-top: min(310px, 31vh);
}

.scene-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  margin: 0 0 18px;
  color: var(--grey);
  text-transform: uppercase;
}

.scene-label span {
  margin: 0 7px;
}

.hero-title {
  margin: 0 auto;

  max-width: 1100px;

  font-size: clamp(30px, 4.5vw, 72px);

  line-height: 0.96;

  letter-spacing: -0.055em;

  font-weight: 600;

  text-transform: uppercase;
}

.title-line {
  display: block;

  overflow: hidden;

  will-change: transform, opacity;
}

.title-line:first-child {
  color: var(--ink);
}

.title-accent {
  margin-top: 7px;

  color: var(--yellow);

  text-shadow:
  0 1px 0 rgba(0, 0, 0, 0.03);
}

.hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-top: 38px;
}
/* ---------------------------------------------------------
   PRIMARY CTA
---------------------------------------------------------- */

.frame-button {
  min-width: 225px;

  padding: 16px 18px;

  border: 1px solid var(--ink);

  display: inline-flex;

  justify-content: space-between;
  align-items: center;

  gap: 30px;

  font-family: var(--mono);

  font-size: 9px;

  letter-spacing: 0.12em;

  position: relative;

  overflow: hidden;

  transition:
  color 0.3s ease,
  transform 0.3s ease;
}

.frame-button::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 0;

  background: var(--yellow);

  z-index: -1;

  transition:
  height 0.4s cubic-bezier(.77,0,.18,1);
}

.frame-button:hover {
  color: var(--ink);

  transform: translateY(-2px);
}

.frame-button:hover::before {
  height: 100%;
}

.frame-button b {
  font-size: 17px;

  font-weight: 400;

  transition:
  transform 0.35s cubic-bezier(.77,0,.18,1);
}

.frame-button:hover b {
  transform: translateX(7px);
}

/* ---------------------------------------------------------
   SHOWREEL CTA
---------------------------------------------------------- */

.reel-button {
  font-family: var(--mono);

  font-size: 9px;

  letter-spacing: 0.12em;

  display: inline-flex;

  gap: 10px;

  align-items: center;

  position: relative;

  padding: 15px 0;
}

.reel-button::after {
  content: "";

  position: absolute;

  bottom: 8px;
  left: 0;

  width: 0;
  height: 1px;

  background: var(--yellow);

  transition: width 0.4s cubic-bezier(.77,0,.18,1);
}

.reel-button:hover::after {
  width: 100%;
}

.play-icon {
  font-size: 7px;

  transition:
  transform 0.3s ease;
}

.reel-button:hover .play-icon {
  transform: translateX(3px);
}

/* ---------------------------------------------------------
   LOWER UI
---------------------------------------------------------- */

.scroll-prompt {
  position: absolute;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .18em;
  color: var(--grey);
}

.scroll-line {
  display: block;
  width: 1px;
  height: 30px;
  background: var(--ink);
  transform-origin: top;
}

.hero-bottom-meta {
  position: absolute;

  bottom: 48px;

  left: 42px;
  right: 42px;

  z-index: 8;

  display: flex;
  justify-content: space-between;

  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .15em;

  color: var(--grey);
}

.shutter-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  z-index: 30;
  transform: scaleX(0);
  transform-origin: left;
}

.shutter-click {
  position: absolute;
  top: calc(50% + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 31;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .3em;
  opacity: 0;
}

/* ---------------------------------------------------------
   NEXT SCENES — TEMPORARY
---------------------------------------------------------- */

.scene-placeholder {
  min-height: 100vh;
  padding: 16vh 8vw;
  display: flex;
  align-items: center;
  background: var(--paper-2);
}

.scene-placeholder h2 {
  max-width: 900px;
  font-size: clamp(48px, 8vw, 130px);
  line-height: .9;
  letter-spacing: -.07em;
  margin: 20px 0;
}

.scene-label.dark {
  color: var(--grey);
}

.placeholder-copy {
  max-width: 520px;
  color: var(--grey);
  line-height: 1.7;
}

.scene-dark {
  background: #191919;
  color: var(--paper);
}

.scene-dark .scene-label {
  color: #858585;
}

/* ---------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media (max-width: 767px) {
  .viewfinder {
    inset: 22px;
    font-size: 7px;
  }

  .vf-meta {
    gap: 8px;
  }

  .vf-top-left,
  .vf-bottom-left {
    left: 25px;
  }

  .vf-top-right,
  .vf-bottom-right {
    right: 25px;
  }

  .site-header {
    padding: 22px 24px;
  }

  .hero-logo {
    width: min(420px, 78vw);
    top: 37%;
  }

  .hero-content {
    margin-top: 270px;
    padding: 0 18px;
  }

  .hero-title {
    font-size: clamp(29px, 9.5vw, 58px);
  }

  .hero-actions {
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
  }

  .frame-button {
    width: min(300px, 82vw);
  }

  .hero-bottom-meta {
    display: none;
  }

  .scroll-prompt {
    bottom: 27px;
  }

  .film-track {
    top: 33%;
    transform: rotate(-16deg);
  }

  .focus-box {
    width: 58px;
    height: 34px;
  }

  .exposure-meter {
    bottom: 22px;
  }

  .exposure-meter i {
    width: 55px;
  }

  .frame-counter {
    bottom: 8px;
  }

  .vf-meta {
    letter-spacing: .08em;
  }

  .vf-bottom-left span:nth-child(2),
  .vf-bottom-left span:nth-child(3),
  .vf-bottom-right span:nth-child(2) {
    display: none;
  }

  .film-track {
    width: 190%;

    left: -45%;

    top: 0;

    transform: scale(1.05);
  }

  .film-body {
    stroke-width: 62;
  }

  .film-perf {
    stroke-width: 6;

    stroke-dasharray: 3 13;
  }


}


/*Section 2*/

/* =========================================================
   SCENE 02 — THE PREMISE
========================================================= */

.premise-scene {
  position: relative;

  min-height: 100svh;

  height: 100svh;

  overflow: hidden;

  isolation: isolate;

  background: #111111;

  color: #eeeeea;
}

.premise-scene::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -3;

  background:
  radial-gradient(
    ellipse at 62% 45%,
    rgba(255,255,255,.045),
    transparent 42%
  ),
  radial-gradient(
    ellipse at 20% 80%,
    rgba(255,190,0,.025),
    transparent 35%
  );
}


.premise-scene::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -2;

  pointer-events: none;

  opacity: .025;

  background-image:
  repeating-radial-gradient(
    circle at 0 0,
    transparent 0 2px,
    #fff 3px 3px
  );

  background-size: 4px 4px;
}

/* =========================================================
   SCENE IDENTIFIER
========================================================= */

.premise-scene-id {
  position: absolute;

  top: 42px;
  left: 42px;

  z-index: 20;

  display: flex;

  align-items: center;

  gap: 12px;

  font-family: var(--mono);

  font-size: 8px;

  letter-spacing: .16em;

  color: rgba(255,255,255,.42);

  text-transform: uppercase;

  pointer-events: none;
}

.premise-scene-id span:first-child {
  color: rgba(255,255,255,.85);
}

/* =========================================================
   HUGE FRAME NUMBER
========================================================= */

.premise-frame-number {
  position: absolute;

  right: -4vw;
  bottom: -10vw;

  z-index: -1;

  font-family: var(--display);

  font-size: min(42vw, 620px);

  line-height: .7;

  font-weight: 400;

  letter-spacing: -.08em;

  color: rgba(255,255,255,.055);

  user-select: none;

  pointer-events: none;
}


/* =========================================================
   PREMISE CONTENT
========================================================= */

.premise-content {
  position: absolute;

  left: 9vw;

  top: 50%;

  width: min(720px, 48vw);

  transform: translateY(-50%);

  z-index: 4;
}


/* =========================================================
   KICKER
========================================================= */

.premise-kicker {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 32px;

  font-family: var(--mono);

  font-size: 8px;

  letter-spacing: .18em;

  color: rgba(255,255,255,.42);

  text-transform: uppercase;
}

.premise-line {
  width: 32px;

  height: 1px;

  background: var(--yellow);

  transform-origin: left;
}


/* =========================================================
   TITLE
========================================================= */

.premise-title {
  margin: 0;

  font-family: var(--display);

  font-size: clamp(48px, 5.2vw, 84px);

  line-height: .91;

  letter-spacing: -.055em;

  font-weight: 500;

  text-transform: uppercase;

  color: #eeeeea;
}

.premise-title-line {
  display: block;

  overflow: hidden;

  will-change: transform, opacity;
}


/* =========================================================
   EMOTIONAL STATEMENT
========================================================= */

.premise-statement {
  margin: 42px 0 0;

  font-family: var(--display);

  font-size: clamp(32px, 3.4vw, 58px);

  line-height: .95;

  letter-spacing: -.04em;

  color: var(--yellow);

  font-weight: 500;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.premise-description {
  width: min(380px, 90%);

  margin: 24px 0 0;

  font-family: var(--sans);

  font-size: 13px;

  line-height: 1.65;

  color: rgba(255,255,255,.48);
}


/* =========================================================
   IDEA INDEX
========================================================= */

.premise-index {
  margin-top: 42px;

  width: 145px;

  display: grid;

  grid-template-columns: auto 1fr auto;

  align-items: center;

  gap: 13px;

  font-family: var(--mono);

  font-size: 8px;

  letter-spacing: .14em;

  color: rgba(255,255,255,.4);
}

.premise-index span:first-child {
  color: var(--yellow);
}

.premise-index span:last-child {
  font-size: 12px;

  color: #eeeeea;
}


/* =========================================================
   STORYBOARD
========================================================= */

.storyboard-frame {
  position: absolute;

  right: 8vw;

  top: 50%;

  width: min(500px, 36vw);


  transform: translateY(-50%);

  z-index: 3;
}


/* =========================================================
   STORYBOARD TOP
========================================================= */

.storyboard-top,
.storyboard-bottom {
  display: flex;

  justify-content: space-between;

  align-items: center;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .14em;

  color: rgba(255,255,255,.38);

  text-transform: uppercase;
}

.storyboard-top {
  margin-bottom: 12px;
}

.storyboard-bottom {
  margin-top: 12px;
}


/* =========================================================
   STORYBOARD IMAGE AREA
========================================================= */

.storyboard-image {
  position: relative;

  aspect-ratio: 4 / 3;

  border: 1px solid rgba(255,255,255,.30);

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,.055),
    rgba(255,255,255,.012)
  );

  overflow: hidden;

  box-shadow:
  0 30px 80px rgba(0,0,0,.28);
}


/* subtle paper grid */

.storyboard-image::before {
  content: "";

  position: absolute;

  inset: 0;

  background-image:
  linear-gradient(
    rgba(255,255,255,.055) 1px,
    transparent 1px
  ),
  linear-gradient(
    90deg,
    rgba(255,255,255,.055) 1px,
    transparent 1px
  );

  background-size: 32px 32px;

  opacity: .35;
}


/* diagonal cinematic composition */

.storyboard-image::after {
  content: "";

  position: absolute;

  width: 150%;

  height: 1px;

  left: -25%;

  top: 50%;

  background: rgba(255,255,255,.14);

  transform: rotate(-17deg);
}

/* =========================================================
   ANIMATED STORYBOARD DRAWING
========================================================= */

.storyboard-drawing {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;

  z-index: 2;
}


/* =========================================================
   DRAWING LINES
========================================================= */

.draw-line {
  fill: none;

  stroke: rgba(255,255,255,.58);

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}


/* =========================================================
   HORIZON
========================================================= */

.storyboard-horizon {
  stroke: rgba(255,255,255,.34);

  stroke-width: 1.5;
}


/* =========================================================
   LIGHT
========================================================= */

.storyboard-sun {
  fill: none;

  stroke: var(--yellow);

  stroke-width: 2;

  opacity: .85;
}


.storyboard-light-1,
.storyboard-light-2,
.storyboard-light-3 {
  stroke: rgba(255,196,0,.32);

  stroke-width: 1;
}


/* =========================================================
   SUBJECT
========================================================= */

.storyboard-subject-head {
  fill: none;

  stroke: rgba(255,255,255,.72);

  stroke-width: 2;
}


.storyboard-subject-body,
.storyboard-subject-arm,
.storyboard-subject-arm-2,
.storyboard-subject-leg,
.storyboard-subject-leg-2 {
  stroke: rgba(255,255,255,.62);

  stroke-width: 2;
}


/* =========================================================
   COMPOSITION CORNERS
========================================================= */

.storyboard-frame-line {
  stroke: rgba(255,255,255,.24);

  stroke-width: 1;
}


/* =========================================================
   FOCUS TARGET
========================================================= */

.storyboard-focus {
  fill: none;

  stroke: var(--yellow);

  stroke-width: 1;

  opacity: .45;
}


.storyboard-focus-cross {
  stroke: rgba(255,196,0,.38);

  stroke-width: 1;
}


/* =========================================================
   CAMERA MOVEMENT
========================================================= */

.storyboard-camera-arrow {
  stroke: rgba(255,255,255,.3);

  stroke-width: 1;
}


.storyboard-arrow-head {
  stroke: var(--yellow);

  stroke-width: 1.5;
}


/* =========================================================
   STORY LABEL
========================================================= */

.storyboard-label {
  position: absolute;

  left: 50%;
  top: 50%;

  transform:
  translate(-50%, -50%);

  z-index: 5;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 3px;

  font-family: var(--mono);

  pointer-events: none;
}


.storyboard-label span {
  font-size: 6px;

  letter-spacing: .2em;

  color: rgba(255,255,255,.32);
}


.storyboard-label strong {
  font-family: var(--display);

  font-size: 30px;

  line-height: 1;

  font-weight: 400;

  color: rgba(255,255,255,.18);
}

/* =========================================================
   SVG DRAW REVEAL
========================================================= */

.draw-line {
  stroke-dasharray: 600;

  stroke-dashoffset: 600;
}


.storyboard-sun,
.storyboard-focus {
  transform-box: fill-box;

  transform-origin: center;
}
/* =========================================================
   STORYBOARD CORNERS
========================================================= */

.storyboard-corner {
  position: absolute;

  width: 20px;

  height: 20px;

  border-color: rgba(255,255,255,.42);

  border-style: solid;

  z-index: 3;
}

.storyboard-tl {
  top: 12px;
  left: 12px;

  border-width: 1px 0 0 1px;
}

.storyboard-tr {
  top: 12px;
  right: 12px;

  border-width: 1px 1px 0 0;
}

.storyboard-bl {
  bottom: 12px;
  left: 12px;

  border-width: 0 0 1px 1px;
}

.storyboard-br {
  bottom: 12px;
  right: 12px;

  border-width: 0 1px 1px 0;
}


/* =========================================================
   STORYBOARD CROSSHAIR
========================================================= */

.storyboard-crosshair {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 36px;
  height: 36px;

  transform: translate(-50%, -50%);

  border: 1px solid rgba(255,255,255,.2);

  z-index: 3;
}

.storyboard-crosshair::before,
.storyboard-crosshair::after {
  content: "";

  position: absolute;

  background: rgba(255,255,255,.2);
}

.storyboard-crosshair::before {
  width: 1px;
  height: 56px;

  left: 50%;
  top: -11px;
}

.storyboard-crosshair::after {
  width: 56px;
  height: 1px;

  left: -11px;
  top: 50%;
}


/* =========================================================
   STORYBOARD PLACEHOLDER
========================================================= */

.storyboard-placeholder {
  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 4px;

  font-family: var(--mono);

  color: rgba(255,255,255,.28);

  z-index: 2;
}

.storyboard-placeholder span {
  font-size: 7px;

  letter-spacing: .2em;
}

.storyboard-placeholder strong {
  font-family: var(--display);

  font-size: 38px;

  line-height: 1;

  font-weight: 400;
}


/* =========================================================
   BOTTOM PRODUCTION BAR
========================================================= */

.premise-footer {
  position: absolute;

  left: 42px;
  right: 42px;

  bottom: 30px;

  z-index: 20;

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .14em;

  color: rgba(255,255,255,.35);

  text-transform: uppercase;

  pointer-events: none;
}

.premise-scroll-mark {
  display: flex;

  align-items: center;

  gap: 12px;
}

.premise-scroll-mark i {
  display: block;

  width: 46px;

  height: 1px;

  background:
  repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.55) 0 1px,
    transparent 1px 7px
  );
}


/* =========================================================
   SCENE 02 INITIAL ANIMATION STATES
========================================================= */

.premise-scene-id,
.premise-kicker,
.premise-title-line,
.premise-statement,
.premise-description,
.premise-index,
.storyboard-frame,
.premise-footer {
  will-change: transform, opacity;
}

/* =========================================================
   CINEMATIC CUT INTO SCENE 02
========================================================= */

.premise-scene {
  clip-path: inset(0 0 0 0);

  transition:
  background-color .4s ease;
}

@media (max-width: 767px) {

  /* =====================================================
   SCENE 02 — MOBILE
====================================================== */

.premise-scene {
  min-height: 100svh;

  height: auto;

  padding:
  120px 25px
  100px;
}

.premise-scene-id {
  top: 30px;
  left: 25px;
}

.premise-content {
  position: relative;

  left: auto;
  top: auto;

  width: 100%;

  transform: none;

  z-index: 4;
}

.premise-title {
  font-size: clamp(
    43px,
    12vw,
    70px
  );
}

.premise-statement {
  margin-top: 30px;

  font-size: 38px;
}

.premise-description {
  font-size: 12px;

  max-width: 320px;
}

.storyboard-frame {
  position: relative;

  right: auto;

  top: auto;

  width: 100%;

  margin-top: 80px;

  transform: none;
}

.premise-frame-number {
  right: -10vw;

  bottom: 5vh;

  font-size: 70vw;
}

.premise-footer {
  position: relative;

  left: auto;
  right: auto;

  bottom: auto;

  margin-top: 70px;

  flex-direction: column;

  align-items: flex-start;

  gap: 16px;
}
}

/*section 3*/

/* =========================================================
   SCENE 03 — WHO WE ARE
========================================================= */

.about-scene {

  position: relative;

  min-height: 100svh;

  height: 100svh;

  overflow: hidden;

  isolation: isolate;

  background: #171717;

  color: #eeeeea;

}


/* =========================================================
   ATMOSPHERE
========================================================= */

.about-scene::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -3;

  background:

  radial-gradient(
    ellipse at 72% 45%,
    rgba(255,255,255,.055),
    transparent 34%
  ),

  radial-gradient(
    ellipse at 15% 85%,
    rgba(255,190,0,.025),
    transparent 35%
  );

}


.about-scene::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -2;

  pointer-events: none;

  opacity: .018;

  background-image:
  repeating-radial-gradient(
    circle at 0 0,
    transparent 0 2px,
    #fff 3px 3px
  );

  background-size: 4px 4px;

}


/* =========================================================
   SCENE IDENTIFIER
========================================================= */

.about-scene-id {

  position: absolute;

  top: 42px;

  left: 42px;

  z-index: 20;

  display: flex;

  align-items: center;

  gap: 12px;

  font-family: var(--mono);

  font-size: 8px;

  letter-spacing: .16em;

  color: rgba(255,255,255,.38);

  text-transform: uppercase;

}

.about-scene-id span:first-child {

  color: rgba(255,255,255,.85);

}


/* =========================================================
   GIANT FRAME NUMBER
========================================================= */

.about-frame-number {

  position: absolute;

  right: -3vw;

  bottom: -9vw;

  z-index: -1;

  font-family: var(--display);

  font-size: min(43vw, 640px);

  line-height: .7;

  font-weight: 400;

  letter-spacing: -.08em;

  color: rgba(255,255,255,.035);

  pointer-events: none;

}


/* =========================================================
   MAIN CONTENT
========================================================= */

.about-content {

  position: absolute;

  left: 9vw;

  top: 50%;

  width: min(620px, 44vw);

  transform: translateY(-50%);

  z-index: 5;

}


/* =========================================================
   KICKER
========================================================= */

.about-kicker {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 30px;

  font-family: var(--mono);

  font-size: 8px;

  letter-spacing: .18em;

  color: rgba(255,255,255,.42);

  text-transform: uppercase;

}

.about-kicker-line {

  width: 34px;

  height: 1px;

  background: var(--yellow);

  transform-origin: left;

}


/* =========================================================
   TITLE
========================================================= */

.about-title {

  margin: 0;

  font-family: var(--display);

  font-size: clamp(
    52px,
    6vw,
    92px
  );

  line-height: .88;

  letter-spacing: -.055em;

  font-weight: 500;

  text-transform: uppercase;

}

.about-title span {

  display: block;

}

.about-title-accent {

  color: var(--yellow);

}


/* =========================================================
   DESCRIPTION
========================================================= */

.about-description {

  width: min(430px, 90%);

  margin: 38px 0 0;

  font-family: var(--sans);

  font-size: 14px;

  line-height: 1.7;

  color: rgba(255,255,255,.48);

}


/* =========================================================
   SIGNATURE
========================================================= */

.about-signature {

  display: flex;

  align-items: center;

  gap: 16px;

  margin-top: 42px;

}

.about-signature-line {

  width: 42px;

  height: 1px;

  background: var(--yellow);

}

.about-signature div {

  display: flex;

  flex-direction: column;

  gap: 5px;

}

.about-signature strong {

  font-family: var(--mono);

  font-size: 9px;

  letter-spacing: .16em;

  font-weight: 400;

  color: rgba(255,255,255,.82);

}

.about-signature small {

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .14em;

  color: rgba(255,255,255,.32);

}


/* =========================================================
   PORTRAIT FRAME
========================================================= */

.about-portrait {

  position: absolute;

  right: 9vw;

  top: 50%;

  width: min(470px, 34vw);

  transform: translateY(-50%);

  z-index: 4;

}


/* =========================================================
   PORTRAIT META
========================================================= */

.about-portrait-header,
.about-portrait-footer {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .14em;

  color: rgba(255,255,255,.35);

  text-transform: uppercase;

}

.about-portrait-header {

  margin-bottom: 12px;

}

.about-portrait-footer {

  margin-top: 12px;

}


/* =========================================================
   IMAGE FRAME
========================================================= */

.about-image-frame {

  position: relative;

  aspect-ratio: 4 / 5;

  border: 1px solid rgba(255,255,255,.25);

  overflow: hidden;

  background:

  radial-gradient(
    ellipse at 50% 40%,
    rgba(255,255,255,.08),
    rgba(255,255,255,.015) 65%
  );

  box-shadow:
  0 35px 90px rgba(0,0,0,.3);

}

/* =========================================================
   SCENE 03 — PORTRAIT IMAGE
========================================================= */

.about-portrait-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  display: block;

  filter:
  grayscale(100%)
  contrast(1.08)
  brightness(.82);

  transform: scale(1.04);

  opacity: .92;

  transition:
  transform 1.2s cubic-bezier(.2,.7,.2,1),
  filter .8s ease;
}

/* =========================================================
   IMAGE PLACEHOLDER
========================================================= */

.about-image-placeholder {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 7px;

  font-family: var(--mono);

  color: rgba(255,255,255,.2);

}

.about-image-placeholder span {

  font-size: 7px;

  letter-spacing: .2em;

}

.about-image-placeholder strong {

  font-family: var(--display);

  font-size: 76px;

  line-height: 1;

  font-weight: 400;

}


/* =========================================================
   PORTRAIT GRID
========================================================= */

.about-image-frame::before {

  content: "";

  position: absolute;

  inset: 0;

  background-image:

  linear-gradient(
    rgba(255,255,255,.035) 1px,
    transparent 1px
  ),

  linear-gradient(
    90deg,
    rgba(255,255,255,.035) 1px,
    transparent 1px
  );

  background-size: 36px 36px;

  opacity: .45;

}


/* =========================================================
   PORTRAIT DIAGONAL LIGHT
========================================================= */

.about-image-frame::after {

  content: "";

  position: absolute;

  width: 150%;

  height: 1px;

  left: -25%;

  top: 52%;

  background: rgba(255,255,255,.12);

  transform: rotate(-13deg);

}


/* =========================================================
   FOCUS CORNERS
========================================================= */

.about-focus {

  position: absolute;

  width: 22px;

  height: 22px;

  z-index: 4;

  border-color: rgba(255,255,255,.42);

  border-style: solid;

}

.about-focus-tl {

  top: 14px;
  left: 14px;

  border-width: 1px 0 0 1px;

}

.about-focus-tr {

  top: 14px;
  right: 14px;

  border-width: 1px 1px 0 0;

}

.about-focus-bl {

  bottom: 14px;
  left: 14px;

  border-width: 0 0 1px 1px;

}

.about-focus-br {

  bottom: 14px;
  right: 14px;

  border-width: 0 1px 1px 0;

}


/* =========================================================
   CROSSHAIR
========================================================= */

.about-crosshair {

  position: absolute;

  left: 50%;
  top: 50%;

  width: 42px;
  height: 42px;

  transform:
  translate(-50%, -50%);

  border: 1px solid rgba(255,255,255,.18);

  z-index: 5;

}

.about-crosshair::before,
.about-crosshair::after {

  content: "";

  position: absolute;

  background: rgba(255,196,0,.32);

}

.about-crosshair::before {

  width: 1px;

  height: 62px;

  left: 50%;

  top: -11px;

}

.about-crosshair::after {

  width: 62px;

  height: 1px;

  top: 50%;

  left: -11px;

}


/* =========================================================
   PRODUCTION CREDITS
========================================================= */

.about-credits {

  position: absolute;

  left: 9vw;

  bottom: 12vh;

  z-index: 5;

  display: flex;

  align-items: center;

  gap: 16px;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .15em;

  color: rgba(255,255,255,.34);

  text-transform: uppercase;

}

.about-credits i {

  display: block;

  width: 3px;

  height: 3px;

  border-radius: 50%;

  background: var(--yellow);

}


/* =========================================================
   FOOTER
========================================================= */

.about-footer {

  position: absolute;

  left: 42px;

  right: 42px;

  bottom: 30px;

  z-index: 20;

  display: flex;

  justify-content: space-between;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .14em;

  color: rgba(255,255,255,.32);

  text-transform: uppercase;

}

@media (max-width: 767px) {
  /* =====================================================
   SCENE 03 — MOBILE
========================================================= */

.about-scene {

  min-height: auto;

  height: auto;

  padding:
  120px 25px
  100px;

}

.about-scene-id {

  top: 30px;

  left: 25px;

}

.about-content {

  position: relative;

  left: auto;

  top: auto;

  width: 100%;

  transform: none;

}

.about-title {

  font-size: clamp(
    46px,
    12vw,
    70px
  );

}

.about-description {

  font-size: 12px;

}

.about-portrait {

  position: relative;

  right: auto;

  top: auto;

  width: 100%;

  margin-top: 80px;

  transform: none;

}

.about-credits {

  position: relative;

  left: auto;

  bottom: auto;

  margin-top: 70px;

  flex-wrap: wrap;

  gap: 12px;

}

.about-footer {

  position: relative;

  left: auto;

  right: auto;

  bottom: auto;

  margin-top: 60px;

  flex-direction: column;

  gap: 14px;

}

.about-frame-number {

  right: -10vw;

  bottom: 10vh;

  font-size: 70vw;

}
}

/* =========================================================
   SCENE 04 — THE CRAFT
========================================================= */

.craft-scene {

  position: relative;

  min-height: 100svh;

  height: 100svh;

  overflow: hidden;

  isolation: isolate;

  background: #eeeeea;

  color: var(--ink);

}


/* =========================================================
   ATMOSPHERE
========================================================= */

.craft-scene::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -3;

  background:

  radial-gradient(
    ellipse at 70% 50%,
    rgba(23,23,23,.045),
    transparent 40%
  );

}


.craft-scene::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -2;

  pointer-events: none;

  opacity: .018;

  background-image:
  repeating-radial-gradient(
    circle at 0 0,
    transparent 0 2px,
    #171717 3px 3px
  );

  background-size: 4px 4px;

}


/* =========================================================
   SCENE ID
========================================================= */

.craft-scene-id {

  position: absolute;

  top: 42px;

  left: 42px;

  z-index: 20;

  display: flex;

  align-items: center;

  gap: 12px;

  font-family: var(--mono);

  font-size: 8px;

  letter-spacing: .16em;

  color: rgba(23,23,23,.38);

  text-transform: uppercase;

}

.craft-scene-id span:first-child {

  color: var(--ink);

}


/* =========================================================
   GIANT NUMBER
========================================================= */

.craft-frame-number {

  position: absolute;

  right: -4vw;

  bottom: -10vw;

  z-index: -1;

  font-family: var(--display);

  font-size: min(43vw, 640px);

  line-height: .7;

  font-weight: 400;

  letter-spacing: -.08em;

  color: rgba(23,23,23,.045);

  pointer-events: none;

}


/* =========================================================
   INTRO
========================================================= */

.craft-intro {

  position: absolute;

  left: 8vw;

  top: 13vh;

  z-index: 5;

  width: 360px;

}


.craft-kicker {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 25px;

  font-family: var(--mono);

  font-size: 8px;

  letter-spacing: .18em;

  color: rgba(23,23,23,.45);

  text-transform: uppercase;

}


.craft-kicker-line {

  width: 34px;

  height: 1px;

  background: var(--yellow);

}


.craft-title {

  margin: 0;

  font-family: var(--display);

  font-size: clamp(
    65px,
    8vw,
    125px
  );

  line-height: .78;

  letter-spacing: -.065em;

  font-weight: 500;

  text-transform: uppercase;

}


.craft-title span {

  display: block;

}


.craft-title-accent {

  color: var(--yellow);

}


.craft-description {

  width: 340px;

  margin: 28px 0 0;

  font-family: var(--sans);

  font-size: 14px;

  line-height: 1.7;

  color: rgba(23,23,23,.68);

}

/* =========================================================
   TIMELINE
========================================================= */

.craft-timeline {

  position: absolute;

  left: 8vw;

  right: 7vw;

  bottom: 15vh;

  height: 300px;

  z-index: 5;

}


/* =========================================================
   TIMELINE LINE
========================================================= */

.craft-progress {

  position: absolute;

  left: 0;

  right: 0;

  top: 30px;

  height: 1px;

  background: rgba(23,23,23,.14);

}


.craft-progress-fill {

  position: absolute;

  left: 0;

  top: 0;

  width: 0%;

  height: 1px;

  background: var(--yellow);

}


.craft-progress-marker {

  position: absolute;

  left: 0;

  top: 50%;

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: var(--yellow);

  transform:
  translate(-50%, -50%);

  box-shadow:
  0 0 0 5px rgba(255,196,0,.12);

}


/* =========================================================
   STAGES
========================================================= */

.craft-stage {

  position: absolute;

  top: 0;

  width: 30%;

  min-height: 240px;

}


.craft-stage-1 {

  left: 0;

}


.craft-stage-2 {

  left: 35%;

}


.craft-stage-3 {

  right: 0;

}


/* =========================================================
   STAGE NUMBER
========================================================= */

.craft-stage-number {

  position: absolute;

  top: 0;

  font-family: var(--mono);

  font-size: 8px;

  letter-spacing: .16em;

  color: rgba(23,23,23,.55);

}


/* =========================================================
   STAGE NAME
========================================================= */

.craft-stage-name {

  position: absolute;

  top: 55px;

  font-family: var(--display);

  font-size: clamp(
    30px,
    3vw,
    48px
  );

  line-height: .9;

  letter-spacing: -.04em;

  color: var(--ink);

}


/* =========================================================
   STAGE DESCRIPTION
========================================================= */

.craft-stage-description {

  position: absolute;

  top: 115px;

  width: 245px;

  font-family: var(--sans);

  font-size: 14px;

  line-height: 1.65;

  color: rgba(23,23,23,.68);

  font-weight: 400;

}

/* =========================================================
   SERVICES
========================================================= */

.craft-services {

  position: absolute;

  top: 175px;

  display: flex;

  flex-wrap: wrap;

  gap: 7px 8px;

  width: 270px;

}


.craft-services span {

  padding: 7px 10px;

  border: 1px solid rgba(23,23,23,.24);

  font-family: var(--mono);

  font-size: 11px;

  letter-spacing: .13em;

  color: rgba(23,23,23,.68);

  background: rgba(255,255,255,.18);

  white-space: nowrap;

  transition:
  border-color .3s ease,
  color .3s ease,
  background .3s ease;

}

/* =========================================================
   FINAL FRAME
========================================================= */

.craft-final-frame {

  position: absolute;

  right: 8vw;

  top: 14vh;

  z-index: 5;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

}


.craft-final-label {

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .18em;

  color: rgba(23,23,23,.35);

}


.craft-final-line {

  width: 90px;

  height: 1px;

  margin: 12px 0;

  background: var(--yellow);

}


.craft-final-frame strong {

  font-family: var(--display);

  font-size: 30px;

  line-height: 1;

  font-weight: 500;

  letter-spacing: -.04em;

}


/* =========================================================
   FOOTER
========================================================= */

.craft-footer {

  position: absolute;

  left: 42px;

  right: 42px;

  bottom: 30px;

  z-index: 20;

  display: flex;

  justify-content: space-between;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .14em;

  color: rgba(23,23,23,.32);

  text-transform: uppercase;

}

.craft-stage {

  transition:
    opacity .4s ease,
    transform .4s ease;

}


.craft-stage.is-active {

  opacity: 1 !important;

}


.craft-stage.is-active .craft-stage-number {

  color: var(--yellow);

}


.craft-stage.is-active .craft-stage-name {

  color: var(--ink);

}


.craft-stage.is-active .craft-services span {

  border-color: rgba(23,23,23,.32);

  color: rgba(23,23,23,.82);

}

@media (max-width: 767px){

  /* =====================================================
   SCENE 04 — MOBILE
====================================================== */

.craft-scene {

  min-height: auto;

  height: auto;

  padding:
  120px 25px
  100px;

}

.craft-scene-id {

  top: 30px;

  left: 25px;

}

.craft-intro {

  position: relative;

  left: auto;

  top: auto;

  width: 100%;

}

.craft-title {

  font-size: 70px;

}

.craft-description {

  width: 100%;

  max-width: 330px;

}

.craft-timeline {

  position: relative;

  left: auto;

  right: auto;

  bottom: auto;

  height: auto;

  margin-top: 90px;

}

.craft-progress {

  display: none;

}

.craft-progress-fill,
.craft-progress-marker {

  display: none;

}

.craft-stage {

  position: relative;

  left: auto;

  right: auto;

  width: 100%;

  min-height: 260px;

  padding-left: 0;

  margin-bottom: 50px;

}

.craft-stage-name {

  position: relative;

  top: auto;

  margin-top: 45px;

}

.craft-stage-description {

  position: relative;

  top: auto;

  margin-top: 18px;

}

.craft-services {

  position: relative;

  top: auto;

  margin-top: 25px;

  width: 100%;

}

.craft-final-frame {

  position: relative;

  right: auto;

  top: auto;

  margin-top: 30px;

  align-items: flex-start;

}

.craft-footer {

  position: relative;

  left: auto;

  right: auto;

  bottom: auto;

  margin-top: 70px;

  flex-direction: column;

  gap: 14px;

}

.craft-frame-number {

  right: -10vw;

  bottom: 10vh;

  font-size: 70vw;

}
}


/* =========================================================
   SCENE 05 — THE INVITATION
========================================================= */

.pitch-scene {

  position: relative;

  min-height: 220vh;

  background: #111111;

  color: #eeeeea;

  overflow: hidden;

  isolation: isolate;

}


/* =========================================================
   ATMOSPHERE
========================================================= */

.pitch-scene::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -4;

  background:

    radial-gradient(
      ellipse at 50% 25%,
      rgba(255,196,0,.045),
      transparent 30%
    ),

    radial-gradient(
      ellipse at 80% 70%,
      rgba(255,255,255,.025),
      transparent 35%
    );

}


.pitch-scene::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -3;

  pointer-events: none;

  opacity: .025;

  background-image:

    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 3px,
      rgba(255,255,255,.25) 4px
    );

}


/* =========================================================
   SCENE ID
========================================================= */

.pitch-scene-id {

  position: absolute;

  top: 42px;

  left: 42px;

  z-index: 30;

  display: flex;

  gap: 12px;

  align-items: center;

  font-family: var(--mono);

  font-size: 8px;

  letter-spacing: .16em;

  color: rgba(255,255,255,.35);

}

.pitch-scene-id span:first-child {

  color: rgba(255,255,255,.82);

}


/* =========================================================
   GIANT 05
========================================================= */

.pitch-frame-number {

  position: absolute;

  right: -3vw;

  bottom: -4vw;

  z-index: -2;

  font-family: var(--display);

  font-size: min(50vw, 760px);

  line-height: .7;

  letter-spacing: -.08em;

  color: rgba(255,255,255,.025);

  pointer-events: none;

}


/* =========================================================
   CAMERA HUD
========================================================= */

.pitch-camera-hud {

  position: absolute;

  top: 42px;

  right: 42px;

  display: flex;

  align-items: center;

  gap: 14px;

  z-index: 30;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .15em;

  color: rgba(255,255,255,.3);

}


.pitch-camera-hud i {

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: #ff3b30;

  box-shadow:
    0 0 10px rgba(255,59,48,.45);

}


/* =========================================================
   FOCUS FRAME
========================================================= */

.pitch-focus-frame {

  position: absolute;

  left: 50%;

  top: 21vh;

  width: min(76vw, 1050px);

  height: 60vh;

  transform:
    translateX(-50%);

  border: 1px solid rgba(255,255,255,.07);

  z-index: 1;

}


.pitch-corner {

  position: absolute;

  width: 35px;

  height: 35px;

  border-color: rgba(255,255,255,.3);

  border-style: solid;

}


.pitch-corner-tl {

  top: -1px;
  left: -1px;

  border-width: 1px 0 0 1px;

}


.pitch-corner-tr {

  top: -1px;
  right: -1px;

  border-width: 1px 1px 0 0;

}


.pitch-corner-bl {

  bottom: -1px;
  left: -1px;

  border-width: 0 0 1px 1px;

}


.pitch-corner-br {

  bottom: -1px;
  right: -1px;

  border-width: 0 1px 1px 0;

}


/* =========================================================
   CROSSHAIR
========================================================= */

.pitch-crosshair {

  position: absolute;

  left: 50%;
  top: 50%;

  width: 90px;
  height: 90px;

  transform:
    translate(-50%, -50%);

  border: 1px solid rgba(255,255,255,.08);

}


.pitch-crosshair::before,
.pitch-crosshair::after {

  content: "";

  position: absolute;

  background: rgba(255,196,0,.25);

}


.pitch-crosshair::before {

  width: 1px;

  height: 130px;

  left: 50%;

  top: -20px;

}


.pitch-crosshair::after {

  width: 130px;

  height: 1px;

  top: 50%;

  left: -20px;

}


.pitch-focus-label {

  position: absolute;

  left: 50%;

  top: calc(50% + 65px);

  transform:
    translateX(-50%);

  font-family: var(--mono);

  font-size: 6px;

  letter-spacing: .2em;

  color: rgba(255,255,255,.22);

}


/* =========================================================
   QUESTION
========================================================= */

.pitch-question {

  position: absolute;

  left: 11vw;

  top: 34vh;

  z-index: 10;

}


.pitch-kicker {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 30px;

  font-family: var(--mono);

  font-size: 8px;

  letter-spacing: .18em;

  color: rgba(255,255,255,.4);

}


.pitch-kicker-line {

  width: 38px;

  height: 1px;

  background: var(--yellow);

}


.pitch-title {

  margin: 0;

  font-family: var(--display);

  font-size: clamp(
    80px,
    10vw,
    155px
  );

  line-height: .78;

  letter-spacing: -.065em;

  font-weight: 500;

}


.pitch-title span {

  display: block;

}


.pitch-title-accent {

  color: var(--yellow);

}


/* =========================================================
   BARRIERS
========================================================= */

.pitch-barriers {

  position: absolute;

  left: 11vw;

  top: 105vh;

  z-index: 10;

}


.pitch-barrier {

  font-family: var(--display);

  font-size: clamp(
    45px,
    6vw,
    90px
  );

  line-height: .9;

  letter-spacing: -.05em;

  color: rgba(255,255,255,.22);

}


.pitch-no-problem {

  margin-top: 35px;

  font-family: var(--display);

  font-size: clamp(
    55px,
    7vw,
    105px
  );

  line-height: .85;

  letter-spacing: -.06em;

  color: var(--yellow);

}


/* =========================================================
   PROMISE
========================================================= */

.pitch-promise {

  position: absolute;

  right: 11vw;

  top: 112vh;

  width: min(400px, 30vw);

  z-index: 10;

}


.pitch-promise-label {

  display: block;

  margin-bottom: 22px;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .18em;

  color: rgba(255,255,255,.35);

}


.pitch-promise h3 {

  margin: 0;

  font-family: var(--display);

  font-size: clamp(
    28px,
    3vw,
    45px
  );

  line-height: .95;

  letter-spacing: -.04em;

  font-weight: 400;

}


.pitch-promise p {

  margin-top: 25px;

  font-family: var(--sans);

  font-size: 12px;

  line-height: 1.7;

  color: rgba(255,255,255,.42);

}


/* =========================================================
   ROLES
========================================================= */

.pitch-roles {

  position: absolute;

  left: 11vw;

  top: 155vh;

  right: 11vw;

  z-index: 10;

}


.pitch-roles-label {

  margin-bottom: 30px;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .18em;

  color: rgba(255,255,255,.3);

}


.pitch-role-list {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  border-top: 1px solid rgba(255,255,255,.1);

  border-bottom: 1px solid rgba(255,255,255,.1);

}


.pitch-role-list span {

  position: relative;

  padding: 28px 0;

  font-family: var(--display);

  font-size: clamp(
    20px,
    2.3vw,
    34px
  );

  letter-spacing: -.03em;

  color: rgba(255,255,255,.25);

  cursor: default;

  transition:
    color .35s ease,
    transform .35s ease;

}


.pitch-role-list span::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -1px;

  width: 0;

  height: 2px;

  background: var(--yellow);

  transition:
    width .4s ease;

}


.pitch-role-list span:hover {

  color: #ffffff;

  transform:
    translateY(-4px);

}


.pitch-role-list span:hover::after {

  width: 100%;

}


/* =========================================================
   FINAL CTA
========================================================= */

.pitch-cta {

  position: absolute;

  left: 50%;

  top: 170vh;

  width: 80vw;

  transform:
    translateX(-50%);

  text-align: center;

  z-index: 15;

}


.pitch-cta-label {

  display: block;

  margin-bottom: 25px;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .2em;

  color: rgba(255,255,255,.3);

}


.pitch-cta h3 {

  margin: 0 auto 35px;

  max-width: 850px;

  font-family: var(--display);

  font-size: clamp(
    48px,
    6vw,
    90px
  );

  line-height: .9;

  letter-spacing: -.055em;

  font-weight: 400;

}


.pitch-cta h3 span {

  color: var(--yellow);

}


/* =========================================================
   PITCH BUTTON
========================================================= */

.pitch-button {

  display: inline-flex;

  align-items: center;

  justify-content: space-between;

  gap: 80px;

  min-width: 260px;

  padding: 20px 24px;

  border: 1px solid rgba(255,255,255,.3);

  color: #ffffff;

  text-decoration: none;

  font-family: var(--mono);

  font-size: 8px;

  letter-spacing: .16em;

  transition:
    background .35s ease,
    color .35s ease,
    border-color .35s ease,
    transform .35s ease;

}


.pitch-button strong {

  font-size: 15px;

  font-weight: 400;

}


.pitch-button:hover {

  background: var(--yellow);

  border-color: var(--yellow);

  color: #111111;

  transform:
    translateY(-3px);

}


/* =========================================================
   FILM STRIP
========================================================= */

.pitch-film-strip {

  position: absolute;

  left: -5%;

  bottom: 14vh;

  width: 110%;

  height: 32px;

  display: flex;

  justify-content: space-around;

  align-items: center;

  background: var(--yellow);

  transform:
    rotate(-3deg);

  opacity: .9;

  z-index: 2;

}


.pitch-film-strip span {

  width: 16px;

  height: 9px;

  background: #111111;

  opacity: .7;

}


/* =========================================================
   FOOTER
========================================================= */

.pitch-footer {

  position: absolute;

  left: 42px;

  right: 42px;

  bottom: 30px;

  z-index: 30;

  display: flex;

  justify-content: space-between;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .14em;

  color: rgba(255,255,255,.25);

}

@media (max-width: 767px){
  /* =====================================================
   SCENE 05 — MOBILE
====================================================== */

.pitch-scene {

  min-height: 220vh;

}


.pitch-scene-id {

  top: 30px;

  left: 25px;

}


.pitch-camera-hud {

  top: 30px;

  right: 25px;

}


.pitch-frame-number {

  right: -10vw;

  bottom: 5vh;

  font-size: 75vw;

}


.pitch-focus-frame {

  top: 16vh;

  width: 88vw;

  height: 55vh;

}


.pitch-question {

  left: 25px;

  top: 30vh;

}


.pitch-title {

  font-size: 72px;

}


.pitch-barriers {

  left: 25px;

  top: 105vh;

}


.pitch-barrier {

  font-size: 48px;

}


.pitch-no-problem {

  font-size: 58px;

}


.pitch-promise {

  left: 25px;

  right: 25px;

  top: 125vh;

  width: auto;

}


.pitch-roles {

  left: 25px;

  right: 25px;

  top: 155vh;

}


.pitch-role-list {

  flex-direction: column;

  align-items: flex-start;

}


.pitch-role-list span {

  width: 100%;

  padding: 17px 0;

}


.pitch-cta {

  top: 190vh;

  width: calc(100% - 50px);

}


.pitch-cta h3 {

  font-size: 48px;

}


.pitch-button {

  width: 100%;

  min-width: 0;

  gap: 20px;

}


.pitch-film-strip {

  bottom: 8vh;

}


.pitch-footer {

  left: 25px;

  right: 25px;

  bottom: 25px;

  flex-direction: column;

  gap: 12px;

}
}

/* =========================================================
   SCENE 06 — THE WORK
========================================================= */

.work-scene {

  position: relative;

  min-height: 340vh;

  background: #eeeeea;

  color: var(--ink);

  overflow: hidden;

  isolation: isolate;

}


/* =========================================================
   BACKGROUND
========================================================= */

.work-scene::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -2;

  background:

    radial-gradient(
      ellipse at 50% 20%,
      rgba(255,196,0,.045),
      transparent 30%
    );

}


.work-scene::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  opacity: .018;

  pointer-events: none;

  background-image:
    repeating-radial-gradient(
      circle at 0 0,
      transparent 0 2px,
      #171717 3px 3px
    );

  background-size: 4px 4px;

}


/* =========================================================
   SCENE ID
========================================================= */

.work-scene-id {

  position: absolute;

  top: 42px;

  left: 42px;

  display: flex;

  align-items: center;

  gap: 12px;

  font-family: var(--mono);

  font-size: 8px;

  letter-spacing: .16em;

  color: rgba(23,23,23,.38);

}


.work-scene-id span:first-child {

  color: var(--ink);

}


/* =========================================================
   HEADER
========================================================= */

.work-header {

  position: absolute;

  top: 14vh;

  left: 9vw;

  width: 600px;

  z-index: 10;

}


.work-kicker {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 28px;

  font-family: var(--mono);

  font-size: 8px;

  letter-spacing: .18em;

  color: rgba(23,23,23,.48);

}


.work-kicker-line {

  width: 38px;

  height: 1px;

  background: var(--yellow);

}


.work-title {

  margin: 0;

  font-family: var(--display);

  font-size: clamp(
    65px,
    7vw,
    110px
  );

  line-height: .82;

  letter-spacing: -.065em;

  font-weight: 500;

}


.work-title span {

  display: block;

  color: var(--yellow);

}


.work-intro {

  width: 370px;

  margin-top: 32px;

  font-family: var(--sans);

  font-size: 12px;

  line-height: 1.7;

  color: rgba(23,23,23,.6);

}


/* =========================================================
   PROJECT
========================================================= */

.work-project {

  position: absolute;

  width: 56vw;

  max-width: 900px;

  z-index: 5;

}


.work-project-01 {

  top: 68vh;

  left: 9vw;

}


.work-project-02 {

  top: 150vh;

  right: 9vw;

}


.work-project-03 {

  top: 232vh;

  left: 9vw;

}


/* =========================================================
   PROJECT IMAGE
========================================================= */

.work-project-image {

  position: relative;

  width: 100%;

  height: 55vh;

  overflow: hidden;

  background: #d8d8d4;

}


.work-project-image img {

  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  transform: scale(1.03);

  filter:
    grayscale(25%)
    contrast(1.05);

  transition:
    transform 1.2s cubic-bezier(.2,.7,.2,1),
    filter .7s ease;

}


.work-project-shade {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.65),
      transparent 55%
    );

  opacity: .65;

  transition:
    opacity .6s ease;

}


/* =========================================================
   FOCUS CORNERS
========================================================= */

.work-focus-corners span {

  position: absolute;

  width: 35px;

  height: 35px;

  border-color: rgba(255,255,255,.65);

  border-style: solid;

  opacity: .5;

  transition:
    opacity .4s ease,
    width .4s ease,
    height .4s ease;

}


.work-focus-corners span:nth-child(1) {

  top: 18px;
  left: 18px;

  border-width: 1px 0 0 1px;

}


.work-focus-corners span:nth-child(2) {

  top: 18px;
  right: 18px;

  border-width: 1px 1px 0 0;

}


.work-focus-corners span:nth-child(3) {

  bottom: 18px;
  left: 18px;

  border-width: 0 0 1px 1px;

}


.work-focus-corners span:nth-child(4) {

  bottom: 18px;
  right: 18px;

  border-width: 0 1px 1px 0;

}


/* =========================================================
   PLAY
========================================================= */

.work-play {

  position: absolute;

  left: 50%;
  top: 50%;

  width: 70px;
  height: 70px;

  display: flex;

  align-items: center;
  justify-content: center;

  transform:
    translate(-50%, -50%)
    scale(.7);

  border: 1px solid rgba(255,255,255,.45);

  border-radius: 50%;

  opacity: 0;

  color: #ffffff;

  transition:
    opacity .5s ease,
    transform .5s cubic-bezier(.2,.7,.2,1);

}


.work-play span {

  margin-left: 3px;

  font-size: 13px;

}


/* =========================================================
   PROJECT INFO
========================================================= */

.work-project-info {

  position: relative;

  display: grid;

  grid-template-columns:
    55px
    1fr
    180px
    auto;

  align-items: end;

  gap: 20px;

  padding-top: 18px;

}


.work-project-number {

  font-family: var(--mono);

  font-size: 9px;

  letter-spacing: .15em;

  color: var(--yellow);

}


.work-project-type {

  display: block;

  margin-bottom: 7px;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .15em;

  color: rgba(23,23,23,.42);

}


.work-project-main h3 {

  margin: 0;

  font-family: var(--display);

  font-size: 32px;

  line-height: 1;

  letter-spacing: -.04em;

  font-weight: 500;

}


.work-project-meta {

  display: flex;

  flex-direction: column;

  gap: 6px;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .12em;

}


.work-project-meta span {

  color: rgba(23,23,23,.35);

}


.work-project-meta strong {

  font-weight: 400;

  color: rgba(23,23,23,.7);

}


/* =========================================================
   WATCH BUTTON
========================================================= */

.work-watch {

  display: inline-flex;

  align-items: center;

  gap: 22px;

  padding: 12px 15px;

  border: 1px solid rgba(23,23,23,.25);

  color: var(--ink);

  text-decoration: none;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .14em;

  transition:
    background .3s ease,
    color .3s ease,
    border-color .3s ease;

}


.work-watch strong {

  font-size: 13px;

  font-weight: 400;

}


.work-watch:hover {

  background: var(--yellow);

  border-color: var(--yellow);

}


/* =========================================================
   HOVER STATE
========================================================= */

.work-project:hover
.work-project-image img {

  transform: scale(1.09);

  filter:
    grayscale(0%)
    contrast(1.08);

}


.work-project:hover
.work-project-shade {

  opacity: .35;

}


.work-project:hover
.work-play {

  opacity: 1;

  transform:
    translate(-50%, -50%)
    scale(1);

}


.work-project:hover
.work-focus-corners span {

  opacity: 1;

  width: 45px;

  height: 45px;

}


/* =========================================================
   ENDING
========================================================= */

.work-ending {

  position: absolute;

  left: 50%;

  top: 316vh;

  transform:
    translateX(-50%);

  width: 80vw;

  text-align: center;

}


.work-ending span {

  display: block;

  margin-bottom: 20px;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .2em;

  color: rgba(23,23,23,.35);

}


.work-ending strong {

  display: block;

  font-family: var(--display);

  font-size: clamp(
    45px,
    6vw,
    90px
  );

  line-height: .9;

  letter-spacing: -.05em;

  font-weight: 400;

}


/* =========================================================
   FOOTER
========================================================= */

.work-footer {

  position: absolute;

  left: 42px;

  right: 42px;

  bottom: 30px;

  display: flex;

  justify-content: space-between;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .14em;

  color: rgba(23,23,23,.3);

}

@media (max-width: 767px){
  /* =====================================================
   SCENE 06 — MOBILE
====================================================== */

.work-scene {

  min-height: auto;

  padding:
    120px 25px
    100px;

}


.work-scene-id {

  top: 30px;

  left: 25px;

}


.work-header {

  position: relative;

  top: auto;

  left: auto;

  width: 100%;

}


.work-title {

  font-size: 65px;

}


.work-intro {

  width: 100%;

  max-width: 330px;

}


.work-project {

  position: relative;

  top: auto !important;

  left: auto !important;

  right: auto !important;

  width: 100%;

  margin-top: 100px;

}


.work-project-image {

  height: 58vh;

}


.work-project-info {

  display: block;

  padding-top: 15px;

}


.work-project-number {

  margin-bottom: 12px;

}


.work-project-main h3 {

  font-size: 30px;

}


.work-project-meta {

  margin-top: 20px;

}


.work-watch {

  margin-top: 20px;

}


.work-ending {

  position: relative;

  left: auto;

  top: auto;

  transform: none;

  width: 100%;

  margin-top: 120px;

}


.work-footer {

  position: relative;

  left: auto;

  right: auto;

  bottom: auto;

  margin-top: 80px;

  flex-direction: column;

  gap: 12px;

}


.work-frame-number {

  display: none;

}
}

/* =========================================================
   SCENE 07 — BEHIND THE SCENE
========================================================= */

.bts-scene {

  position: relative;

  min-height: 360vh;

  background: #e9e9e5;

  color: #171717;

  overflow: hidden;

  isolation: isolate;

}


/* =========================================================
   FILM GRAIN
========================================================= */

.bts-scene::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -2;

  pointer-events: none;

  opacity: .025;

  background-image:

    repeating-radial-gradient(
      circle at 0 0,
      transparent 0 2px,
      #111 3px 3px
    );

  background-size: 5px 5px;

}


/* =========================================================
   SCENE ID
========================================================= */

.bts-scene-id {

  position: absolute;

  top: 42px;

  left: 42px;

  display: flex;

  gap: 12px;

  align-items: center;

  font-family: var(--mono);

  font-size: 8px;

  letter-spacing: .16em;

  color: rgba(23,23,23,.4);

  z-index: 20;

}


.bts-scene-id span:first-child {

  color: #171717;

}


/* =========================================================
   CAMERA INFO
========================================================= */

.bts-camera-info {

  position: absolute;

  top: 42px;

  right: 42px;

  display: flex;

  gap: 16px;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .15em;

  color: rgba(23,23,23,.35);

}


/* =========================================================
   INTRO
========================================================= */

.bts-intro {

  position: absolute;

  top: 15vh;

  left: 10vw;

  z-index: 5;

}


.bts-kicker {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 30px;

  font-family: var(--mono);

  font-size: 8px;

  letter-spacing: .18em;

  color: rgba(23,23,23,.4);

}


.bts-kicker span:first-child {

  width: 38px;

  height: 1px;

  background: var(--yellow);

}


.bts-title {

  margin: 0;

  font-family: var(--display);

  font-size: clamp(
    70px,
    8vw,
    125px
  );

  line-height: .8;

  letter-spacing: -.065em;

  font-weight: 500;

}


.bts-title span {

  display: block;

}


.bts-title-accent {

  color: var(--yellow);

}


/* =========================================================
   GALLERY
========================================================= */

.bts-gallery {

  position: absolute;

  inset: 0;

  z-index: 4;

}


/* =========================================================
   PHOTO BASE
========================================================= */

.bts-photo {

  position: absolute;

  margin: 0;

  width: 27vw;

  max-width: 450px;

}


.bts-photo-01 {

  left: 8vw;

  top: 65vh;

}


.bts-photo-02 {

  right: 10vw;

  top: 58vh;

  width: 24vw;

}


.bts-photo-03 {

  left: 38vw;

  top: 92vh;

  width: 30vw;

}


.bts-photo-04 {

  left: 9vw;

  top: 128vh;

  width: 22vw;

}


.bts-photo-05 {

  right: 9vw;

  top: 125vh;

  width: 28vw;

}


.bts-photo-06 {

  left: 42vw;

  top: 151vh;

  width: 25vw;

}


/* =========================================================
   PHOTO IMAGE
========================================================= */

.bts-photo-image {

  position: relative;

  overflow: hidden;

  background: #d3d3cf;

}


.bts-photo-image::after {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      135deg,
      transparent 55%,
      rgba(255,196,0,.14)
    );

  mix-blend-mode: multiply;

  pointer-events: none;

}


.bts-photo img {

  display: block;

  width: 100%;

  height: 100%;

  aspect-ratio: 4 / 5;

  object-fit: cover;

  filter:
    grayscale(100%)
    contrast(1.05);

  transform: scale(1.04);

  transition:
    transform 1s cubic-bezier(.2,.7,.2,1),
    filter .7s ease;

}


/* Different compositions */

.bts-photo-02 img {

  aspect-ratio: 4 / 3;

}


.bts-photo-03 img {

  aspect-ratio: 16 / 10;

}


.bts-photo-05 img {

  aspect-ratio: 16 / 10;

}


.bts-photo-06 img {

  aspect-ratio: 4 / 3;

}


/* =========================================================
   PHOTO CAPTION
========================================================= */

.bts-photo figcaption {

  display: flex;

  justify-content: space-between;

  padding-top: 10px;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .14em;

  color: rgba(23,23,23,.45);

}


/* =========================================================
   PHOTO HOVER
========================================================= */

.bts-photo:hover img {

  transform: scale(1.1);

  filter:
    grayscale(0%)
    contrast(1.08);

}


.bts-photo:hover figcaption {

  color: #171717;

}


/* =========================================================
   FRAME NUMBER
========================================================= */

.bts-photo::before {

  content: attr(data-frame);

  position: absolute;

  top: 12px;

  left: 12px;

  z-index: 5;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .12em;

  color: #ffffff;

  mix-blend-mode: difference;

}


/* =========================================================
   STATEMENT
========================================================= */

.bts-statement {

  position: absolute;

  left: 50%;

  top: 188vh;

  transform: translateX(-50%);

  width: 70vw;

  text-align: center;

}


.bts-statement-label {

  display: block;

  margin-bottom: 25px;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .2em;

  color: rgba(23,23,23,.35);

}


.bts-statement h3 {

  margin: 0;

  font-family: var(--display);

  font-size: clamp(
    55px,
    7vw,
    105px
  );

  line-height: .85;

  letter-spacing: -.06em;

  font-weight: 400;

}


.bts-statement h3 span {

  color: var(--yellow);

}


.bts-statement p {

  width: 360px;

  margin: 35px auto 0;

  font-family: var(--sans);

  font-size: 12px;

  line-height: 1.7;

  color: rgba(23,23,23,.55);

}


/* =========================================================
   ROLES
========================================================= */

.bts-roles {

  position: absolute;

  top: 238vh;

  left: 9vw;

  right: 9vw;

  border-top: 1px solid rgba(23,23,23,.15);

}


.bts-role {

  display: grid;

  grid-template-columns: 80px 1fr;

  align-items: center;

  padding: 24px 0;

  border-bottom: 1px solid rgba(23,23,23,.15);

}


.bts-role span {

  font-family: var(--mono);

  font-size: 7px;

  color: var(--yellow);

}


.bts-role strong {

  font-family: var(--display);

  font-size: clamp(
    25px,
    3vw,
    45px
  );

  font-weight: 400;

  letter-spacing: -.035em;

  transition:
    transform .35s ease,
    color .35s ease;

}


.bts-role:hover strong {

  color: var(--yellow);

  transform: translateX(15px);

}


/* =========================================================
   ENDING
========================================================= */

.bts-ending {

  position: absolute;

  top: 310vh;

  left: 50%;

  width: 80vw;

  transform: translateX(-50%);

  text-align: center;

}


.bts-ending > span {

  display: block;

  margin-bottom: 22px;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .2em;

  color: rgba(23,23,23,.35);

}


.bts-ending-line {

  width: 80px;

  height: 1px;

  margin: 0 auto 30px;

  background: var(--yellow);

}


.bts-ending strong {

  display: block;

  font-family: var(--display);

  font-size: clamp(
    50px,
    6vw,
    90px
  );

  line-height: .85;

  letter-spacing: -.055em;

  font-weight: 400;

}


.bts-ending em {

  color: var(--yellow);

  font-style: normal;

}


/* =========================================================
   FOOTER
========================================================= */

.bts-footer {

  position: absolute;

  left: 42px;

  right: 42px;

  bottom: 30px;

  display: flex;

  justify-content: space-between;

  font-family: var(--mono);

  font-size: 7px;

  letter-spacing: .14em;

  color: rgba(23,23,23,.3);

}

@media (max-width: 767px){
  /* =====================================================
   SCENE 07 — MOBILE
====================================================== */

.bts-scene {

  min-height: auto;

  padding:
    120px 25px
    100px;

}


.bts-scene-id {

  top: 30px;

  left: 25px;

}


.bts-camera-info {

  top: 30px;

  right: 25px;

}


.bts-intro {

  position: relative;

  top: auto;

  left: auto;

}


.bts-title {

  font-size: 64px;

}


.bts-gallery {

  position: relative;

  inset: auto;

  margin-top: 100px;

}


.bts-photo {

  position: relative;

  top: auto !important;

  left: auto !important;

  right: auto !important;

  width: 100% !important;

  max-width: none;

  margin-bottom: 70px;

}


.bts-photo img {

  aspect-ratio: 4 / 5;

}


.bts-photo-02 img,
.bts-photo-03 img,
.bts-photo-05 img,
.bts-photo-06 img {

  aspect-ratio: 4 / 3;

}


.bts-statement {

  position: relative;

  top: auto;

  left: auto;

  transform: none;

  width: 100%;

  margin-top: 80px;

}


.bts-statement h3 {

  font-size: 55px;

}


.bts-statement p {

  width: 100%;

}


.bts-roles {

  position: relative;

  top: auto;

  left: auto;

  right: auto;

  margin-top: 100px;

}


.bts-role {

  grid-template-columns:
    50px 1fr;

}


.bts-role strong {

  font-size: 30px;

}


.bts-ending {

  position: relative;

  top: auto;

  left: auto;

  transform: none;

  width: 100%;

  margin-top: 130px;

}


.bts-ending strong {

  font-size: 52px;

}


.bts-footer {

  position: relative;

  left: auto;

  right: auto;

  bottom: auto;

  margin-top: 90px;

  flex-direction: column;

  gap: 12px;

}

}


/* =========================================================
   SCENE 08 — THE EXPERIENCE
   PINNED CINEMATIC SERVICE SEQUENCE
========================================================= */

.experience-scene {

    position: relative;

    min-height: 100vh;

    background: #111111;

    color: #eeeeea;

    overflow: hidden;

    isolation: isolate;

}


/* =========================================================
   ATMOSPHERE
========================================================= */

.experience-scene::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 70% 45%,
            rgba(255,196,0,.045),
            transparent 30%
        );

    pointer-events: none;

    z-index: -3;

}


.experience-scene::after {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .025;

    pointer-events: none;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 3px,
            rgba(255,255,255,.2) 4px
        );

    z-index: -2;

}


/* =========================================================
   SCENE ID
========================================================= */

.experience-scene-id {

    position: absolute;

    top: 42px;

    left: 42px;

    display: flex;

    gap: 12px;

    align-items: center;

    font-family: var(--mono);

    font-size: 8px;

    letter-spacing: .16em;

    color: rgba(255,255,255,.35);

    z-index: 30;

}


.experience-scene-id span:first-child {

    color: #ffffff;

}


/* =========================================================
   STATUS
========================================================= */

.experience-status {

    position: absolute;

    top: 42px;

    right: 42px;

    display: flex;

    gap: 12px;

    align-items: center;

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: .15em;

    color: rgba(255,255,255,.3);

    z-index: 30;

}


.experience-status-dot {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: var(--yellow);

    box-shadow:
        0 0 12px rgba(255,196,0,.6);

}


/* =========================================================
   INTRO
========================================================= */

.experience-intro {

    position: relative;

    height: 100vh;

    padding-top: 15vh;

    margin-left: 9vw;

    width: 620px;

    z-index: 5;

}


.experience-kicker {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 28px;

    font-family: var(--mono);

    font-size: 8px;

    letter-spacing: .18em;

    color: rgba(255,255,255,.38);

}


.experience-kicker span:first-child {

    width: 38px;

    height: 1px;

    background: var(--yellow);

}


.experience-title {

    margin: 0;

    font-family: var(--display);

    font-size: clamp(
        70px,
        8vw,
        125px
    );

    line-height: .8;

    letter-spacing: -.065em;

    font-weight: 400;

}


.experience-title span {

    display: block;

}


.experience-title-accent {

    color: var(--yellow);

}


.experience-intro p {

    width: 390px;

    margin-top: 35px;

    font-family: var(--sans);

    font-size: 12px;

    line-height: 1.7;

    color: rgba(255,255,255,.42);

}


/* =========================================================
   PINNED SERVICE STAGE
========================================================= */

.experience-stage {

    position: relative;

    width: calc(100% - 18vw);

    height: 100vh;

    margin-left: 9vw;

    margin-right: 9vw;

    margin-top: 0;

    overflow: hidden;

}


/* =========================================================
   SERVICE
========================================================= */

.experience-service {

    position: absolute;

    inset: 0;

    display: grid;

    grid-template-columns:
        70px
        minmax(420px, 48%)
        1fr;

    align-items: center;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


.experience-service.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/* =========================================================
   SERVICE NUMBER
========================================================= */

.experience-service-number {

    align-self: start;

    margin-top: 13vh;

    font-family: var(--mono);

    font-size: 9px;

    letter-spacing: .15em;

    color: var(--yellow);

}


/* =========================================================
   SERVICE CONTENT
========================================================= */

.experience-service-content {

    padding-bottom: 80px;

}


.experience-service-label {

    display: block;

    margin-bottom: 20px;

    font-family: var(--mono);

    font-size: 8px;

    letter-spacing: .2em;

    color: rgba(255,255,255,.38);

}


.experience-service-content h3 {

    margin: 0;

    font-family: var(--display);

    font-size: clamp(
        90px,
        11vw,
        180px
    );

    line-height: .75;

    letter-spacing: -.075em;

    font-weight: 400;

}


.experience-service-content p {

    width: 330px;

    margin-top: 35px;

    font-family: var(--sans);

    font-size: 12px;

    line-height: 1.7;

    color: rgba(255,255,255,.48);

}


/* =========================================================
   SERVICE VISUAL
========================================================= */

.experience-service-visual {

    position: relative;

    height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================================
   CAMERA
========================================================= */

.camera-body {

    position: relative;

    width: 310px;

    height: 190px;

    border: 1px solid rgba(255,255,255,.2);

    transform: rotate(-5deg);

}


.camera-body::before {

    content: "";

    position: absolute;

    left: -35px;

    top: 45px;

    width: 45px;

    height: 95px;

    border: 1px solid rgba(255,255,255,.15);

}


.camera-lens {

    position: absolute;

    right: -75px;

    top: 40px;

    width: 125px;

    height: 110px;

    border: 1px solid rgba(255,255,255,.3);

    border-radius: 50%;

}


.camera-lens::before {

    content: "";

    position: absolute;

    inset: 22px;

    border: 1px solid var(--yellow);

    border-radius: 50%;

}


.camera-lens::after {

    content: "";

    position: absolute;

    inset: 43px;

    border: 1px solid rgba(255,255,255,.25);

    border-radius: 50%;

}


.camera-detail {

    position: absolute;

    height: 1px;

    background: rgba(255,255,255,.18);

}


.camera-detail-1 {

    width: 70px;

    left: 30px;

    top: 35px;

}


.camera-detail-2 {

    width: 45px;

    left: 30px;

    top: 55px;

}


.camera-detail-3 {

    width: 80px;

    left: 30px;

    top: 130px;

}


/* =========================================================
   LIGHT
========================================================= */

.light-source {

    position: relative;

    width: 330px;

    height: 400px;

}


.light-head {

    position: absolute;

    left: 70px;

    top: 40px;

    width: 180px;

    height: 120px;

    border: 1px solid rgba(255,255,255,.2);

    transform: skewY(-8deg);

}


.light-head::after {

    content: "";

    position: absolute;

    inset: 20px;

    border: 1px solid var(--yellow);

}


.light-beam {

    position: absolute;

    left: 100px;

    top: 140px;

    width: 220px;

    height: 260px;

    background:
        linear-gradient(
            145deg,
            rgba(255,196,0,.15),
            transparent
        );

    clip-path:
        polygon(
            0 0,
            100% 100%,
            35% 100%
        );

}


.light-stand {

    position: absolute;

    left: 155px;

    top: 160px;

    width: 1px;

    height: 240px;

    background: rgba(255,255,255,.18);

}


/* =========================================================
   SOUND
========================================================= */

.sound-wave {

    display: flex;

    align-items: center;

    gap: 8px;

    height: 220px;

}


.sound-wave span {

    width: 3px;

    height: 50px;

    background: rgba(255,255,255,.2);

    transform: scaleY(.6);

}


.sound-wave span:nth-child(1),
.sound-wave span:nth-child(9) {
    height: 70px;
}


.sound-wave span:nth-child(2),
.sound-wave span:nth-child(8) {
    height: 110px;
}


.sound-wave span:nth-child(3),
.sound-wave span:nth-child(7) {
    height: 160px;
}


.sound-wave span:nth-child(4),
.sound-wave span:nth-child(6) {
    height: 190px;
}


.sound-wave span:nth-child(5) {

    height: 220px;

    background: var(--yellow);

}


/* =========================================================
   VFX
========================================================= */

.vfx-grid {

    position: relative;

    width: 330px;

    height: 330px;

    border: 1px solid rgba(255,255,255,.15);

    background-image:

        linear-gradient(
            rgba(255,255,255,.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.06) 1px,
            transparent 1px
        );

    background-size: 33px 33px;

}


.vfx-grid span {

    position: absolute;

    width: 12px;

    height: 12px;

    border: 1px solid var(--yellow);

}


.vfx-grid span:nth-child(1) {
    left: 25%;
    top: 25%;
}


.vfx-grid span:nth-child(2) {
    right: 25%;
    top: 25%;
}


.vfx-grid span:nth-child(3) {
    left: 25%;
    bottom: 25%;
}


.vfx-grid span:nth-child(4) {
    right: 25%;
    bottom: 25%;
}


/* =========================================================
   EDIT
========================================================= */

.edit-timeline {

    width: 420px;

    height: 180px;

    display: flex;

    align-items: center;

    gap: 5px;

    border-top:
        1px solid rgba(255,255,255,.15);

    border-bottom:
        1px solid rgba(255,255,255,.15);

}


.edit-timeline span {

    height: 90px;

    flex: 1;

    border:
        1px solid rgba(255,255,255,.12);

}


.edit-timeline span:nth-child(2),
.edit-timeline span:nth-child(5) {
    height: 130px;
}


.edit-timeline span:nth-child(3) {

    height: 160px;

    border-color: var(--yellow);

}


/* =========================================================
   COLOR
========================================================= */

.color-wheels {

    display: flex;

}


.color-wheels div {

    width: 150px;

    height: 150px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.15);

}


.color-wheels div:nth-child(1) {

    border-color:
        rgba(255,196,0,.7);

}


.color-wheels div:nth-child(2) {

    transform: translateX(-30px);

}


.color-wheels div:nth-child(3) {

    transform: translateX(-60px);

}


/* =========================================================
   SERVICE NAVIGATION
   NOW INSIDE THE PINNED STAGE
========================================================= */

.experience-navigation {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 78px;

    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    border-top:
        1px solid rgba(255,255,255,.12);

    border-bottom:
        1px solid rgba(255,255,255,.12);

    z-index: 20;

}


.experience-nav-item {

    position: relative;

    padding: 18px 10px;

    background: transparent;

    border: 0;

    border-right:
        1px solid rgba(255,255,255,.08);

    text-align: left;

    color: rgba(255,255,255,.28);

    cursor: pointer;

}


.experience-nav-item:last-child {

    border-right: 0;

}


.experience-nav-item span {

    display: block;

    margin-bottom: 9px;

    font-family: var(--mono);

    font-size: 7px;

    color: rgba(255,255,255,.2);

}


.experience-nav-item strong {

    font-family: var(--display);

    font-size: 20px;

    font-weight: 400;

}


.experience-nav-item::after {

    content: "";

    position: absolute;

    left: 10px;

    bottom: -1px;

    width: 0;

    height: 2px;

    background: var(--yellow);

    transition: width .4s ease;

}


.experience-nav-item.active {

    color: #ffffff;

}


.experience-nav-item.active::after {

    width: calc(100% - 20px);

}


/* =========================================================
   PROCESS LINE
   SAME PINNED COMPOSITION
========================================================= */

.experience-process {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 27px;

    display: flex;

    align-items: center;

    gap: 20px;

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: .15em;

    color: rgba(255,255,255,.25);

    z-index: 20;

}


.experience-process-line {

    position: relative;

    flex: 1;

    height: 1px;

    background:
        rgba(255,255,255,.1);

}


.experience-process-progress {

    width: 0%;

    height: 100%;

    background: var(--yellow);

}

/* =========================================================
   SCENE 08 — ENDING
========================================================= */

.experience-ending {

    position: relative;

    width: 80vw;

    /*
     * Small cinematic breathing space after
     * the pinned service sequence.
     */
    margin: 12vh auto 0;

    text-align: center;

    padding-bottom: 20vh;

}


.experience-ending > span {

    display: block;

    margin-bottom: 20px;

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: .2em;

    color: rgba(255,255,255,.25);

}


.experience-ending strong {

    display: block;

    font-family: var(--display);

    font-size: clamp(
        50px,
        7vw,
        105px
    );

    line-height: .85;

    letter-spacing: -.06em;

    font-weight: 400;

}


.experience-ending em {

    color: var(--yellow);

    font-style: normal;

}


/* =========================================================
   FOOTER
========================================================= */

.experience-footer {

    position: absolute;

    left: 42px;

    right: 42px;

    bottom: 30px;

    display: flex;

    justify-content: space-between;

    font-family: var(--mono);

    font-size: 7px;

    letter-spacing: .14em;

    color: rgba(255,255,255,.25);

}