.hero h1 > span { display: block; color: inherit; }
.hero h1 .hero-accent { color: var(--red); }
.hero-image-original { display: none; }
.hero-transition-logo { display: none; }

body.hero-bright-layout .hero {
  display: flex;
  align-items: center;
  background: #fff;
  color: #050505;
}
body.hero-bright-layout .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, #fff 0%, #fff 35%, #ffffffed 42%, #ffffff38 54%, transparent 63%);
  pointer-events: none;
}
body.hero-bright-layout .hero-copy { width: 49%; max-width: 720px; }
body.hero-bright-layout .hero h1 { font-size: clamp(3.4rem, 4.5vw, 5.2rem); }
body.hero-bright-layout .hero-logo,
body.hero-bright-layout .hero-slashes { display: none; }
body.hero-bright-layout .hero-portrait { inset: 0 0 0 auto; width: 74%; height: 100%; }
body.hero-bright-layout .hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center; clip-path: none; }
body.hero-bright-layout .hero p { color: #30343a; }
body.hero-bright-layout .hero .button-red { box-shadow: 0 12px 28px #e1061240; }

body[data-hero-style="blend"] .hero {
  background: #020202;
  color: #fff;
}
body[data-hero-style="blend"] .hero::before {
  background: linear-gradient(90deg, #020202 0%, #020202 35%, #020202f5 41%, #020202b8 48%, #02020242 57%, transparent 66%);
}
body[data-hero-style="blend"] .hero-copy { width: 42%; max-width: 610px; }
body[data-hero-style="blend"] .hero p { color: #e1e4e9; max-width: 480px; }
body[data-hero-style="blend"] .hero-portrait { width: 70%; }
body[data-hero-style="blend"] .hero-portrait img { object-position: 54% center; }
body[data-hero-style="blend"] .hero-transition-logo {
  display: block;
  position: absolute;
  z-index: 5;
  left: 49%;
  top: 50%;
  width: clamp(76px, 8vw, 118px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 20px #0008);
}

body[data-hero-style="original"] .hero-image-bright { display: none; }
body[data-hero-style="original"] .hero-image-original { display: block; }

@media (min-width: 801px) {
  body[data-hero-style="blend"] .hero-copy { transform: translateY(95px); }
  body[data-hero-style="blend"] .hero-logo { display: none; }
  body[data-hero-style="blend"] .hero-transition-logo {
    display: block;
    position: absolute;
    left: 17%;
    top: 22px;
    width: clamp(140px, 14vw, 170px);
    transform: translateX(-50%);
    filter: drop-shadow(0 12px 26px #0009);
  }
}

@media (max-width: 800px) {
  body.hero-bright-layout .hero { display: block; min-height: 820px; padding: 42px 24px 310px; }
  body.hero-bright-layout .hero::before { top: auto; bottom: 0; height: 330px; background: linear-gradient(180deg, #fff 0%, transparent 22%); }
  body.hero-bright-layout .hero-copy { width: 100%; }
  body.hero-bright-layout .hero h1 { font-size: 3.25rem; }
  body.hero-bright-layout .hero p { max-width: 340px; }
  body.hero-bright-layout .hero-portrait { inset: auto 0 0; width: 100%; height: 330px; }
  body.hero-bright-layout .hero-portrait img { object-position: 66% center; }

  body[data-hero-style="blend"] .hero { min-height: 850px; background: #020202; padding-bottom: 330px; }
  body[data-hero-style="blend"] .hero::before {
    height: 350px;
    background: linear-gradient(180deg, #020202 0%, #020202e8 10%, #0202024d 25%, transparent 42%);
  }
  body[data-hero-style="blend"] .hero-transition-logo {
    left: 50%;
    top: auto;
    bottom: 292px;
    width: 76px;
  }
  body[data-hero-style="blend"] .hero-portrait { height: 350px; }
}