:root {
  --shades--black: #000;
  --shades--white: #d9dfe5;
  --orange-text: #f7b573;
  --primary--blue: #04a0f9;
  --blue-transparent-10: rgba(4, 160, 249, .1);
  --blue-glow: #1fd1fc;
  --off-white: #d1bc92;
  --shades--medium-grey: #adadad;
  --off-grey: #b3ad9b;
  --transition-frame-size: 60vh;
  --transition-frame-max-size: 48vh;
  --transition-frame-size-mobile: 90svw;
  --white-text-on-black: #e9e9e9;
  --white: white;
  --black: black;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  background-color: var(--shades--black);
  color: var(--shades--white);
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

h2 {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
}

h3 {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

h4 {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

h5 {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

p {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 150%;
}

.centered {
  text-align: center;
  margin-top: 4px;
}

.centered.yellow {
  color: #f7b573;
  text-shadow: 0 0 32px rgba(0, 0, 0, .5);
}

.centered.semi-bold {
  font-size: 20px;
  font-weight: 500;
}

.centered.highlight-text {
  color: #04a0f9;
}

.centered.highlight-text.semi-bold {
  text-transform: uppercase;
  font-size: 14px;
  text-decoration: none;
}

.button {
  max-width: 300px;
  min-width: 200px;
  border: 2px solid var(--primary--blue);
  background-color: var(--blue-transparent-10);
  color: var(--primary--blue);
  text-align: center;
  text-transform: uppercase;
  border-radius: 32px;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 32px;
  font-weight: 700;
  transition: transform .4s ease-out, box-shadow .4s, background-color .4s;
  position: relative;
}

.button:hover {
  border-color: var(--blue-glow);
  color: var(--blue-glow);
  -webkit-text-stroke-color: var(--blue-glow);
  text-shadow: 0 0 12px rgba(4, 111, 249, .8);
  background-color: rgba(4, 160, 249, 0);
  transform: scale(1.02);
  box-shadow: inset 0 0 12px rgba(4, 111, 249, .8), 0 0 12px rgba(4, 111, 249, .8);
}

.stage {
  max-width: 100vw;
  min-height: 130svh;
  background-color: var(--shades--black);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: visible;
}

.intro-desc-wrapper {
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 2%;
  display: flex;
}

.intro-desc {
  width: 650px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.stage-arrow {
  padding-top: 48px;
  padding-bottom: 0;
}

.nav {
  z-index: 99;
  width: 100%;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  margin-top: 32px;
  display: flex;
  position: absolute;
}

.logo {
  max-width: 200px;
  margin-right: auto;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

.transition-stack {
  height: 65vh;
  min-height: auto;
  min-width: auto;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  align-content: end;
  justify-content: center;
  align-items: end;
  justify-items: center;
  position: absolute;
  top: auto;
  bottom: 0;
}

.prop-to-watch-frame {
  height: 100vh;
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 45%), linear-gradient(#000, rgba(0, 0, 0, 0) 50%), linear-gradient(#000, rgba(0, 0, 0, 0) 60%), url('../images/Dune-Style-Landscape.webp');
  background-position: 0 0, 0 0, 0 0, 50% 0;
  background-repeat: repeat, repeat, repeat, no-repeat;
  background-size: auto, auto, auto, cover;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  bottom: auto;
  overflow: hidden;
}

.prop-to-watch-scroll-track {
  height: 250vh;
  background-color: #000;
  position: relative;
}

.copy {
  color: var(--shades--white);
  -webkit-text-stroke-color: var(--shades--white);
  margin-bottom: 0;
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 140%;
  position: relative;
  top: auto;
}

.transition-text-container {
  height: 35svh;
  max-width: 540px;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  text-align: center;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 120px;
  display: flex;
  position: relative;
}

.transition-text-container.creative-influence-text {
  justify-content: flex-end;
  display: none;
}

.transition-text-container.desert-watch-text {
  display: flex;
  position: absolute;
  bottom: 0;
}

.transition-text-container.desert-watch-text.scroll {
  z-index: 1;
  width: 100%;
  height: auto;
  max-width: 600px;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-content: flex-start;
  margin-bottom: -5vh;
  padding-bottom: 0;
  display: flex;
  position: absolute;
  top: 120vh;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}

.transition-text-container.real-watch-text {
  display: none;
}

.heading {
  color: var(--shades--white);
  -webkit-text-stroke-color: var(--shades--white);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Montserrat, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 100%;
  position: relative;
  top: auto;
}

.heading.prop {
  color: var(--off-white);
}

.black-occlusion {
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.prop-to-watch-texts {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  align-content: end;
  display: grid;
}

.particle-canvas {
  z-index: 9999;
  pointer-events: none;
  cursor: auto;
  position: absolute;
  top: 0;
  left: 0;
}

.dune-2-logo {
  aspect-ratio: auto;
  display: block;
  position: relative;
}

.ken-burns-fade {
  width: 100%;
  height: 100%;
  filter: blur(4px);
  mix-blend-mode: lighten;
  object-fit: cover;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.ken-burns-fade-2, .ken-burns-fade-3 {
  width: 100%;
  height: 100%;
  mix-blend-mode: lighten;
  object-fit: cover;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.transition-frame {
  width: 60vh;
  height: 60vh;
  max-height: 48vh;
  max-width: 48vh;
  pointer-events: none;
  object-fit: contain;
  margin-bottom: 10vh;
  position: absolute;
  top: 0;
  bottom: auto;
}

.edge-watch.transition-frame {
  pointer-events: auto;
}

.bright-watch.transition-frame {
  pointer-events: auto;
  display: block;
}

.edge-watch-mobile.transition-frame, .bright-watch-mobile.transition-frame {
  pointer-events: auto;
  display: none;
}

.dune-2-logo-bright {
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
}

.product-image {
  max-height: 350px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.teaser-reveals {
  width: 100%;
  height: 100vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.background-image.edge {
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: auto;
}

.background-image.bright {
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.background-image.case {
  opacity: .6;
  object-position: 92% 50%;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.visual-content {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: auto;
  overflow: hidden;
}

.foreground-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: auto;
  bottom: -15%;
  left: auto;
  right: -20%;
}

.foreground-image.bright {
  width: 115vw;
  max-width: 115vw;
  object-fit: cover;
  object-position: 100% 50%;
  top: auto;
  bottom: -10%;
  left: auto;
  right: -5%;
  overflow: visible;
}

.foreground-image.edge {
  width: 105vw;
  height: 80%;
  max-width: 105vw;
  object-fit: cover;
  object-position: 20% 50%;
  top: auto;
  bottom: 0%;
  left: -6%;
  right: auto;
}

.foreground-image.case {
  object-position: 80% 50%;
  bottom: 0%;
  right: 0%;
  overflow: visible;
}

.hero-desc {
  max-width: 500px;
  align-self: flex-start;
  padding-left: 24px;
  padding-right: 24px;
}

.dune-teaser-video {
  z-index: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  overflow: visible;
}

.dune-teaser-video.mobile-contain {
  bottom: 0%;
}

.watches-w-case {
  z-index: 3;
  width: 100%;
  height: 100vh;
  background-color: #000;
  justify-content: center;
  align-items: stretch;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  overflow: hidden;
}

.trailer {
  z-index: 4;
  width: 100%;
  height: 100vh;
  justify-content: center;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  overflow: hidden;
}

.watches-product-images {
  z-index: 5;
  width: 100%;
  min-height: 100vh;
  background-color: #000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.watches-grid {
  grid-column-gap: 128px;
  grid-row-gap: 128px;
  grid-template-rows: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.edge-watch-2 {
  z-index: 2;
  width: 100%;
  height: 100vh;
  background-color: #000;
  justify-content: center;
  align-items: stretch;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  overflow: hidden;
}

.grey-text {
  color: var(--shades--medium-grey);
  -webkit-text-stroke-color: var(--shades--medium-grey);
  font-size: 18px;
  line-height: 150%;
}

.grey-text.prop {
  color: var(--off-grey);
}

.highlight-text {
  color: #04a0f9;
}

.scrolltrack-teasers {
  width: 100%;
  height: 500vh;
  background-color: #000;
  position: relative;
}

.hero-desc-wrapper {
  width: 100%;
  max-width: 1200px;
  min-height: 90vh;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr .75fr;
  grid-auto-columns: 1fr;
  justify-content: flex-end;
  justify-items: center;
  display: flex;
}

.hero-desc-wrapper.text-left {
  z-index: 1;
  max-width: 1300px;
  justify-content: flex-start;
  align-self: center;
  align-items: center;
}

.hero-desc-wrapper.text-right {
  z-index: 1;
  max-width: 1300px;
  justify-content: flex-end;
  position: relative;
}

.hero-desc-wrapper.text-left {
  max-width: 1300px;
  justify-content: flex-start;
  align-self: center;
  align-items: center;
  position: relative;
}

.hero-desc-wrapper.text-right {
  z-index: 1;
  position: relative;
}

.xxl-bright-watch {
  z-index: 1;
  width: 100%;
  height: 100vh;
  background-color: #000;
  justify-content: center;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  overflow: hidden;
}

.hero-banner-heading {
  text-transform: uppercase;
  margin-top: 0;
  font-size: 52px;
  line-height: 59px;
}

.hero-banner-heading.light {
  font-weight: 300;
}

.dune-logo-white {
  width: 100%;
  margin-left: -14%;
  padding-bottom: 32px;
}

.product-desc {
  flex-direction: column;
  justify-content: center;
  margin-top: 32px;
  padding-right: 6%;
  display: flex;
}

.detail-shot-overlay {
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.grid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
}

.bright-lit {
  max-height: 350px;
  opacity: 0;
  display: block;
}

.hover-animation {
  width: 0;
  height: 0;
}

.grid-2 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
}

.edge-lit {
  max-height: 350px;
  opacity: 0;
  margin-left: auto;
  margin-right: auto;
}

.stage-dark-fade {
  width: 100%;
  height: 150vh;
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 14%), linear-gradient(rgba(0, 0, 0, .32), rgba(0, 0, 0, 0) 15%), linear-gradient(to top, #000, rgba(0, 0, 0, 0) 35%), linear-gradient(to top, #000 20%, rgba(0, 0, 0, 0) 45%);
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.stage-inner {
  width: 100%;
  height: 125vh;
  justify-content: center;
  align-self: center;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  overflow: hidden;
}

.stage-text {
  width: 100%;
  height: 100svh;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  position: relative;
}

.transition-watch-name {
  color: var(--shades--white);
  text-align: center;
  -webkit-text-stroke-color: var(--shades--white);
  margin-top: 28px;
  padding-right: 6%;
  font-size: 24px;
}

.limited-text {
  color: var(--primary--blue);
  text-align: center;
  margin-top: 5px;
  padding-right: 6%;
  font-size: 14px;
  display: none;
}

.transition-button-container {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding-top: 32px;
  padding-right: 6%;
  display: flex;
}

.button-container {
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
}

.button-container.dune-part {
  justify-content: flex-start;
  display: block;
}

.top-gradient {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(#000, rgba(255, 255, 255, 0) 38%);
  position: absolute;
  top: 0;
}

.link-block-bright, .link-block-edge {
  color: var(--shades--white);
  cursor: pointer;
  text-decoration: none;
}

.dropdown-current {
  color: var(--shades--white);
  -webkit-text-stroke-color: var(--shades--medium-grey);
  font-weight: 400;
}

.icon {
  color: var(--shades--medium-grey);
  font-weight: 400;
}

.dropdown {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  margin-left: 0;
}

.dropdown-toggle {
  width: 100%;
  justify-content: space-around;
  margin-right: auto;
  padding-left: 40px;
  display: flex;
}

.dropdown-link {
  color: var(--shades--white);
  background-color: rgba(0, 0, 0, 0);
  padding-left: 40px;
}

.dropdown-link.last-link {
  padding-bottom: 40px;
}

.dropdown-list {
  background-color: #ddd;
}

.w-dropdown-list {
  right: auto;
}

.dropdown-list.w--open {
  height: 350px;
  background-color: rgba(0, 0, 0, .6);
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
}

.edge-gradient {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(53deg, rgba(0, 0, 0, 0) 17%, rgba(0, 0, 0, .7) 64%);
  position: absolute;
}

.case-gradient {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
}

.trailer-copy {
  color: var(--shades--white);
  text-align: left;
}

.trailer-copy.choices {
  margin-top: 24px;
  padding-bottom: 0;
}

.trailer-gradient {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 64%);
  display: none;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.stage-cta {
  text-align: center;
  text-transform: uppercase;
  position: relative;
}

.stage-cta.centered.yellow {
  font-size: 18px;
  line-height: 24px;
}

.logo-wrapper {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 18vh 20vw 8vh;
  display: flex;
}

.logo-wrapper-inner {
  position: relative;
}

.legal-text {
  opacity: .7;
  color: #c5493b;
  text-shadow: 0 0 16px rgba(0, 0, 0, .2);
  font-size: 12px;
  position: absolute;
  top: auto;
  bottom: 16px;
  left: auto;
  right: 20px;
  transform: translate(50%, -500%)rotate(-90deg);
}

.map-section {
  width: 100%;
  min-height: 100vh;
  flex-direction: column;
  display: flex;
}

.map-section-heading {
  text-align: center;
  margin-top: 0;
  font-size: 35px;
}

.paragraph {
  text-align: center;
  line-height: 150%;
}

.map-desc-container {
  max-width: 650px;
  margin-top: 6rem;
  margin-bottom: 5rem;
}

.map-iframe-container {
  flex: 1;
  justify-content: center;
  display: flex;
  position: relative;
}

.html-embed {
  width: 100%;
  height: 100%;
  margin-top: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.logo-bar {
  margin: auto;
  max-width: 1024px;
  width: 100%;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 32px;
  display: flex;
  flex-wrap: wrap;
}

.logo-bar img {
  max-width: 20%;
}

.logos-left {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-content: end;
  align-items: flex-end;
  display: flex;
}

.logos-right {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  align-items: flex-end;
  display: flex;
}
@media screen and (max-width: 991px) {
  .transition-text-container.desert-watch-text.scroll {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .dune-2-logo {
    max-width: 100vw;
  }

  .transition-frame {
    width: 50vw;
    height: 50vw;
  }

  .edge-watch.transition-frame, .bright-watch.transition-frame {
    display: none;
  }

  .edge-watch-mobile.transition-frame, .bright-watch-mobile.transition-frame {
    display: block;
  }

  .dune-2-logo-bright {
    max-width: 100vw;
  }

  .background-image.edge {
    left: 0%;
  }

  .background-image.case {
    object-fit: cover;
    object-position: 0% 0%;
    padding-top: 0;
  }

  .foreground-image.bright {
    object-fit: cover;
    object-position: 80% 50%;
    bottom: -24%;
    overflow: visible;
  }

  .foreground-image.edge {
    height: 60%;
    object-position: 10% 50%;
  }

  .foreground-image.case {
    height: 60%;
    object-position: 100% 100%;
  }

  .hero-desc {
    padding-top: 64px;
  }

  .dune-teaser-video {
    width: 205vw;
    min-height: 100%;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: auto;
  }

  .dune-teaser-video.mobile-contain {
    width: 200vw;
  }

  .trailer {
    align-items: center;
    overflow: hidden;
  }

  .hero-desc-wrapper.text-left {
    flex-direction: column;
  }

  .hero-desc-wrapper.text-right {
    flex-direction: column;
    justify-content: flex-start;
  }

  .hero-desc-wrapper.text-right.trailer-desc {
    width: auto;
    justify-content: center;
  }

  .hero-desc-wrapper.text-right {
    flex-direction: column;
    justify-content: flex-start;
  }

  .hero-desc-wrapper.text-right.trailer-desc {
    width: auto;
    justify-content: center;
  }

  .xxl-bright-watch {
    background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('../images/Hero-Image-Watches-XXL-Bright-Watch.webp');
    background-position: 0 0, 72% 100%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
  }

  .detail-shot-overlay {
    background-image: linear-gradient(#000 26%, rgba(0, 0, 0, 0) 67%);
  }

  .slim-button-container {
    color: var(--primary--blue);
    justify-content: center;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 6%;
    text-decoration: none;
    display: flex;
  }

  .slim-button-container.bright {
    justify-content: center;
    align-items: center;
    padding-right: 0%;
    display: flex;
  }

  .slim-button-container.edge {
    padding-right: 0%;
  }

  .slim-button {
    border: 2px solid var(--primary--blue);
    background-color: var(--blue-transparent-10);
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: var(--primary--blue);
    border-radius: 30px;
    padding: 6px 20px;
  }

  .slim-button-text {
    -webkit-text-stroke-width: 0px;
    font-weight: 700;
  }

  .dropdown {
    margin-left: auto;
    margin-right: 0;
  }

  .dropdown-toggle {
    margin-right: 0;
  }

  .w-dropdown-list {
    right: 0;
  }

  .edge-gradient {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, .8) 64%);
  }

  .case-gradient {
    background-image: linear-gradient(#000, rgba(0, 0, 0, 0) 58%);
    display: block;
  }

  .trailer-copy {
    color: var(--shades--white);
  }

  .legal-text {
    color: #fd6c5b;
  }

  .logo-bar {
    padding-bottom: 32px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .logos-left, .logos-right {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
}

@media screen and (max-width: 767px) {
  .intro-desc-wrapper {
    padding-left: 64px;
    padding-right: 64px;
  }

  .nav {
    flex-direction: column;
    margin-top: 0;
  }

  .logo {
    padding-top: 16px;
    position: relative;
  }

  .transition-text-container {
    max-width: 700px;
    justify-content: flex-end;
    padding-bottom: 10svh;
    padding-left: 28px;
    padding-right: 28px;
  }

  .transition-text-container.creative-influence-text {
    max-width: 700px;
  }

  .transition-text-container.desert-watch-text.scroll {
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }

  .product-image {
    max-height: 300px;
  }

  .background-image.case {
    object-fit: cover;
    object-position: 87% 50%;
  }

  .foreground-image.edge {
    width: auto;
    object-fit: cover;
    object-position: 10% 50%;
    top: auto;
    bottom: 0%;
    left: auto;
    right: 0;
  }

  .hero-desc {
    max-width: 100%;
  }

  .watches-grid {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .dune-logo-white {
    margin-left: -13%;
  }

  .transition-watch-name {
    font-size: 16px;
  }

  .dropdown {
    margin-left: auto;
    margin-right: 0;
  }

  .logo-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .logo-bar {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    align-items: center;
  }

  .logo-bar img {
    max-width: 40%;
  }

  .imax-logo {
    padding-bottom: 0;
  }

  .logos-left {
    align-self: center;
  }
}

@media screen and (max-width: 479px) {
  p {
    font-size: 16px;
  }

  .centered {
    padding-left: 24px;
    padding-right: 24px;
  }

  .centered.yellow {
    color: var(--orange-text);
    padding-left: 16px;
    padding-right: 16px;
    font-size: 14px;
  }

  .button {
    background-color: var(--blue-transparent-10);
  }

  .stage {
    background-size: cover;
  }

  .intro-desc-wrapper {
    padding-left: 32px;
    padding-right: 32px;
    bottom: 48px;
  }

  .stage-arrow {
    padding-top: 16px;
  }

  .nav {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .transition-stack {
    height: 65vh;
    align-items: end;
    padding-bottom: 0;
  }

  .prop-to-watch-frame {
    height: 100vh;
  }

  .prop-to-watch-scroll-track {
    height: 280vh;
  }

  .copy {
    font-size: 16px;
  }

  .transition-text-container {
    max-width: none;
    padding-bottom: 60px;
    padding-left: 0;
    padding-right: 0;
  }

  .transition-text-container.creative-influence-text {
    padding-bottom: 24px;
    display: none;
  }

  .transition-text-container.desert-watch-text {
    padding-bottom: 24px;
  }

  .transition-text-container.desert-watch-text.scroll {
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
    top: 107vh;
  }

  .transition-text-container.real-watch-text {
    padding-bottom: 24px;
  }

  .heading.prop {
    color: var(--off-white);
  }

  .black-occlusion {
    height: 100vh;
  }

  .prop-to-watch-texts {
    padding-top: 50px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .dune-2-logo {
    width: 120vw;
    max-width: 130vw;
  }

  .ken-burns-fade {
    filter: blur(4px);
  }

  .transition-frame {
    width: 80svw;
    height: 80svw;
    margin-bottom: 15vh;
    top: auto;
    bottom: 0;
  }

  .edge-watch.transition-frame, .bright-watch.transition-frame {
    display: none;
  }

  .edge-watch-mobile.transition-frame, .bright-watch-mobile.transition-frame {
    display: block;
  }

  .dune-2-logo-bright {
    width: 120vw;
    max-width: 130vw;
  }

  .product-image {
    max-height: 350px;
  }

  .background-image.case {
    object-position: 81% 50%;
  }

  .foreground-image.bright {
    object-position: 78% 50%;
  }

  .foreground-image.edge {
    height: 60%;
    object-position: 20% 50%;
    overflow: visible;
  }

  .foreground-image.case {
    width: 120%;
    height: 38%;
    max-width: 120%;
    object-position: 85% 100%;
    margin-right: 0;
  }

  .hero-desc {
    padding-top: 32px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .dune-teaser-video.mobile-contain {
    width: 194vw;
    left: 0%;
  }

  .watches-w-case {
    align-items: center;
    display: flex;
  }

  .watches-product-images {
    padding-top: 120px;
    padding-bottom: 32px;
    position: relative;
  }

  .watches-grid {
    grid-column-gap: 150px;
    grid-row-gap: 150px;
    flex-direction: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    justify-items: center;
    padding-left: 16px;
    padding-right: 16px;
  }

  .grey-text {
    font-size: 16px;
    line-height: 150%;
  }

  .grey-text.prop {
    color: var(--off-grey);
    -webkit-text-stroke-color: var(--off-grey);
  }

  .scrolltrack-teasers {
    height: 500vh;
  }

  .hero-desc-wrapper.text-right {
    align-self: flex-start;
    align-items: center;
  }

  .hero-desc-wrapper.text-right.trailer-desc {
    justify-content: flex-start;
  }

  .xxl-bright-watch {
    width: auto;
    height: 100vh;
    background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('../images/Hero-Image-Watches-XXL-Bright-Watch.webp');
    background-position: 0 0, 75% 100%;
  }

  .hero-banner-heading {
    font-size: 36px;
    line-height: 38px;
  }

  .dune-logo-white {
    margin-left: 0;
  }

  .edge-lit {
    opacity: 0;
  }

  .stage-dark-fade {
    background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 14%), linear-gradient(rgba(0, 0, 0, .32), rgba(0, 0, 0, 0) 15%), linear-gradient(to top, #000, rgba(0, 0, 0, 0) 35%), linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0) 51%);
  }

  .transition-watch-name {
    margin-top: 4px;
    font-size: 16px;
    line-height: 20px;
    display: block;
  }

  .button-container.dune-part {
    justify-content: center;
    display: flex;
  }

  .text-block {
    font-size: 14px;
  }

  .slim-button-container {
    color: var(--primary--blue);
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    text-decoration: none;
    display: flex;
  }

  .slim-button-container.bright, .slim-button-container.edge {
    padding-top: 12px;
  }

  .slim-button {
    border: 1.5px solid var(--primary--blue);
    background-color: var(--blue-transparent-10);
    border-radius: 80px;
    margin-right: 6%;
    padding: 6px 20px;
  }

  .slim-button-text {
    letter-spacing: 0;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
  }

  .dropdown-current, .icon {
    font-size: 12px;
  }

  .dropdown {
    background-color: rgba(0, 0, 0, 0);
  }

  .dropdown-toggle {
    margin-top: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .dropdown-link {
    font-size: 12px;
  }

  .trailer-copy {
    text-align: center;
  }

  .trailer-copy.choices {
    display: none;
  }

  .trailer-gradient {
    display: block;
  }

  .stage-cta.centered.yellow {
    font-size: 14px;
    line-height: 20px;
  }

  .legal-text {
    opacity: .5;
    color: #bd8b5b;
    text-align: center;
    text-shadow: 0 0 32px rgba(0, 0, 0, .2);
    padding-left: 0;
    padding-right: 0;
    font-size: 10px;
    top: auto;
    bottom: -32px;
    left: auto;
    right: auto;
    transform: none;
  }

  .paragraph {
    margin-top: 24px;
  }

  .map-desc-container {
    margin: 2rem 16px;
  }

  .logo-bar {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .logos-left, .logos-right {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-direction: column;
    align-items: center;
  }
}

#w-node-_03144056-8485-02ec-665b-c992065b3ce6-898ad44c, #w-node-_03144056-8485-02ec-665b-c992065b3cd4-898ad44c, #w-node-_03144056-8485-02ec-665b-c992065b3cda-898ad44c {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_2937c63c-674a-24fb-c490-18b4d9d5d570-898ad44c {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: auto;
  justify-self: auto;
}

#w-node-_0a587f98-2e39-4729-0a67-9eda16555d3d-898ad44c, #w-node-b82c46f5-1c66-5d3d-7634-ddd0e84322b1-898ad44c, #w-node-_68359fdc-709e-85be-2468-259209fa0e20-898ad44c, #w-node-_9659b4e9-63c3-1565-1d30-341bee83f78f-898ad44c, #w-node-fa54f584-caad-003c-0fd5-bad35721cb40-898ad44c, #w-node-_03144056-8485-02ec-665b-c992065b3cdb-898ad44c, #w-node-_03144056-8485-02ec-665b-c992065b3cdd-898ad44c, #w-node-_03144056-8485-02ec-665b-c992065b3cdf-898ad44c, #w-node-_03144056-8485-02ec-665b-c992065b3ce1-898ad44c, #w-node-_03144056-8485-02ec-665b-c992065b3ce3-898ad44c {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_03144056-8485-02ec-665b-c992065b3ce5-898ad44c, #w-node-_03144056-8485-02ec-665b-c992065b3ceb-898ad44c, #w-node-_03144056-8485-02ec-665b-c992065b3cee-898ad44c {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_7d566816-272c-c4fe-e68f-d036c889e823-898ad44c {
  grid-area: 1 / 1 / 2 / 2;
  align-self: center;
  justify-self: start;
}

#w-node-_7d566816-272c-c4fe-e68f-d036c889e824-898ad44c {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_7d566816-272c-c4fe-e68f-d036c889e836-898ad44c {
  grid-area: 1 / 1 / 2 / 2;
  align-self: center;
  justify-self: start;
}

#w-node-_7d566816-272c-c4fe-e68f-d036c889e837-898ad44c {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_7d566816-272c-c4fe-e68f-d036c889e846-898ad44c, #w-node-_60a28063-fc0d-a780-9aa1-d7a6f70629aa-898ad44c {
  grid-area: 1 / 1 / 2 / 2;
  align-self: center;
  justify-self: start;
}

#w-node-_5ce33862-f78a-b633-d0d2-1de8622d48d8-898ad44c {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_7d566816-272c-c4fe-e68f-d036c889e84e-898ad44c {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: center;
}

#w-node-_7d566816-272c-c4fe-e68f-d036c889e84f-898ad44c, #w-node-_5face297-2ba0-1b6e-2257-a7d9dc9d38be-898ad44c {
  grid-area: 1 / 1 / 2 / 2;
  justify-self: center;
}

#w-node-a4a41302-a7e5-d1b3-121a-ea0eb0c33a77-898ad44c {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_7d566816-272c-c4fe-e68f-d036c889e859-898ad44c {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: center;
}

#w-node-_7d566816-272c-c4fe-e68f-d036c889e85a-898ad44c {
  grid-area: 1 / 1 / 2 / 2;
  justify-self: center;
}

#w-node-_237b7bd9-ef39-4073-9a6f-b2d02eb67a72-898ad44c {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_8ed98e2d-2fe7-0097-52f5-193149b2ae25-898ad44c {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

@media screen and (max-width: 479px) {
  #w-node-b82c46f5-1c66-5d3d-7634-ddd0e84322b1-898ad44c, #w-node-_60571264-61ee-6052-9f58-9b7fd70c2625-898ad44c {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_7d566816-272c-c4fe-e68f-d036c889e859-898ad44c {
    justify-self: stretch;
  }
}