@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; }
body { width: 360px; height: 600px; overflow: hidden; }
.banner {
  position: relative;
  display: block;
  width: 360px;
  height: 600px;
  overflow: hidden;
  background: #d5111e;
  color: #fff;
  text-decoration: none;
  font-family: "Montserrat", Arial, sans-serif;
}
.photo {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 127px, 100% 84px, 100% 308px, 0 353px);
  overflow: hidden;
}
.photo img {
  position: absolute;
  left: -137px;
  top: 84px;
  width: 640px;
  height: auto;
  display: block;
}
.shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.43) 42%, rgba(0,0,0,.08) 76%, rgba(0,0,0,.02) 100%),
    linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.19) 70%, rgba(0,0,0,.48) 100%);
}
.logo {
  position: absolute;
  left: 26px;
  top: 31px;
  width: 285px;
  height: auto;
  z-index: 3;
}
.headline {
  position: absolute;
  left: 24px;
  top: 178px;
  z-index: 4;
  color: #fff;
  letter-spacing: -1.7px;
  line-height: .96;
  white-space: nowrap;
}
.headline-light {
  font-weight: 300;
  font-size: 55px;
}
.headline-bold {
  margin-top: 13px;
  font-weight: 600;
  font-size: 59px;
  letter-spacing: -2px;
}
.bodycopy {
  position: absolute;
  left: 24px;
  top: 376px;
  width: 315px;
  z-index: 4;
  color: #fff;
  font-size: 24px;
  line-height: 1.42;
  font-weight: 300;
  letter-spacing: -.55px;
  opacity: 0;
  transition: opacity 600ms ease;
}
.bodycopy.visible { opacity: 1; }
.bodycopy strong { font-weight: 600; }
.bodycopy .line { display: block; min-height: 34px; }
.cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  transform: translateY(3px);
  background: currentColor;
  opacity: 1;
}
.cursor.blink { animation: blink 260ms steps(1) 4; }
.cursor.hide { opacity: 0; }
@keyframes blink { 50% { opacity: 0; } }
.cta {
  position: absolute;
  left: 24px;
  top: 524px;
  z-index: 5;
  color: #000;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.35px;
  opacity: 0;
  transition: opacity 350ms ease;
  white-space: nowrap;
}
.cta.visible { opacity: 1; }
.bottom-wedge {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: #fff;
  clip-path: polygon(0 600px, 100% 556px, 100% 600px, 0 600px);
}