/* Hero styles. Light also applies to the following how-it-works section. */
.homepage .hero[data-hero-style=video-alt-white] {
  --hero-backdrop: #f6f7f5;
  --hero-backdrop-rgb: 246,247,245;
  --hero-fade-rgb: 246,247,245;
  --hero-text: #17211d;
  --hero-grid-rgb: 0,0,0;
  background: var(--hero-backdrop);
  color-scheme: light;
}
.homepage .hero[data-hero-style=video-alt-white] h1 { color: #17211d; }
.homepage .hero[data-hero-style=video-alt-white] h1 .hero-problem { color: #cf3038; }
.homepage .hero[data-hero-style=video-alt-white] .hero-description { color: #4e5b55; }
.homepage .hero[data-hero-style=video-alt-white] .hero-shade video { filter: brightness(.96) saturate(.85); }
.homepage .hero[data-hero-style=video-alt-white] .hero-button-primary { background-color: rgba(7,124,81,.94); border-color: #077c51; color: #fff; }
.homepage .hero[data-hero-style=video-alt-white] .hero-button-primary:hover { background-color: #086b49; border-color: #086b49; }
.homepage .hero[data-hero-style=video-alt-white] .hero-button-partners { background-color: rgba(30,36,34,.1); border-color: #17211d55; color: #17211d; }
.homepage .hero[data-hero-style=video-alt-white] .hero-button-partners:hover { background-color: rgba(30,36,34,.18); border-color: #17211d85; }
.homepage .hero[data-hero-style=video-alt-white] .hero-contact-card { background-color: rgba(255,255,255,.58); border-color: #162c2224; }
.homepage .hero[data-hero-style=video-alt-white] :is(.hero-button,.hero-contact-card) { box-shadow: inset 0 1px 0 #ffffffb3,0 2px 6px #0a24120a; }
.homepage .hero[data-hero-style=video-alt-white] :is(.hero-contacts h2,.hero-partners h2) { color: #58675f; }
.homepage .hero[data-hero-style=video-alt-white] .hero-contact-label { color: #6b7871; }
.homepage .hero[data-hero-style=video-alt-white] .hero-contact-value { color: #172b21; }
.homepage .hero[data-hero-style=video-alt-white] .hero-contact-icon { color: #087c51; }
.homepage .hero[data-hero-style=video-alt-white] .hero-partners { mix-blend-mode: normal; border-color: #172b211c; }
.homepage .hero[data-hero-style=video-alt-white] .hero-partner-logos img { filter: grayscale(1); mix-blend-mode: multiply; }
.homepage .hero[data-hero-style=video-alt-white] .hero-partner-logos [data-partner="ассоль"] img { filter: brightness(0); }
.homepage .hero[data-hero-style=video-alt-white] .hero-style-switch { background: rgba(255,255,255,.8); border-color: #162c2226; box-shadow: inset 0 1px 0 #ffffffb3; }
.homepage .hero[data-hero-style=video-alt-white] .hero-style-switch button { color: #647168; }
.homepage .hero[data-hero-style=video-alt-white] .hero-style-switch button:hover { color: #172b21; }
.homepage .hero[data-hero-style=video-alt-white] .hero-style-switch button[aria-pressed=true] { color: #075d3d; background: #087c5112; border-color: #087c511a; }

/* Transparent light variant: mirrored footage, light glass contacts and header. */
.homepage .hero[data-hero-style=video-alt-white] { --hero-fade-rgb: 246,247,245; }
.homepage .hero[data-hero-style=video-alt-white] .hero-contact-card {
  background-color: rgba(246,247,245,.68);
  border-color: #ffffff70;
  box-shadow: inset 0 1px 0 #ffffff99,0 2px 6px #00000014;
}
.homepage .hero[data-hero-style=video-alt-white] .hero-contact-label { color: #4e5b55; }
.homepage .hero[data-hero-style=video-alt-white] .hero-contact-value { color: #17211d; }
.homepage .hero[data-hero-style=video-alt-white] .hero-contact-icon { color: #087c51; }

/* Light how-it-works appearance. */
.homepage .hero[data-hero-style=video-alt-white]+.how-section {
  --how-paper: #f6f7f5;
  color: #17211d;
  color-scheme: light;
}
.homepage .hero[data-hero-style=video-alt-white]+.how-section #how-title { color: #17211d; }
.homepage .hero[data-hero-style=video-alt-white]+.how-section .how-intro { color: #58645d; }
.homepage .hero[data-hero-style=video-alt-white]+.how-section .transition-watermark { color: rgba(16,39,27,.025); }
.homepage .hero[data-hero-style=video-alt-white]+.how-section .how-help { background: #fff; border-color: #172b2126; }
.homepage .hero[data-hero-style=video-alt-white]+.how-section .how-help h3 { color: #17211d; }
.homepage .hero[data-hero-style=video-alt-white]+.how-section .how-help p { color: #58645d; }
.homepage .hero[data-hero-style=video-alt-white]+.how-section .how-help>a { color: #087c51; }
.homepage .hero[data-hero-style=video-alt-white]+.how-section .how-help>a:hover { color: #075d3d; }

/* Full-width footage with left-weighted dimming and background-only blur. */
.homepage .hero:is([data-hero-style=video-alt],[data-hero-style=video-alt-white]) .hero-shade video {
  left: -1%;
  width: 102%;
  filter: brightness(.82) saturate(.82);
}
.homepage .hero:is([data-hero-style=video-alt],[data-hero-style=video-alt-white]) .hero-shade video { transform: scaleX(-1); }
.homepage .hero:is([data-hero-style=video-alt],[data-hero-style=video-alt-white]) .hero-shade::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(98deg,#000 0%,#000 20%,rgba(0,0,0,.75) 42%,rgba(0,0,0,.3) 65%,transparent 88%);
  mask-image: linear-gradient(98deg,#000 0%,#000 20%,rgba(0,0,0,.75) 42%,rgba(0,0,0,.3) 65%,transparent 88%);
}
.homepage .hero:is([data-hero-style=video-alt],[data-hero-style=video-alt-white]) .hero-shade::after {
  z-index: 2;
  background: linear-gradient(98deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.86) 35%,rgba(0,0,0,.44) 65%,rgba(0,0,0,.32) 100%);
}
.homepage .hero:is([data-hero-style=video-alt],[data-hero-style=video-alt-white]) h1 { text-shadow: 0 1px 12px #00000040; }
.homepage .hero:is([data-hero-style=video-alt],[data-hero-style=video-alt-white]) .hero-description { color: #f0f0f0; text-shadow: 0 1px 6px #00000059; }
/* Transparent CC keeps the same footage, framing and blur with a white overlay. */
.homepage .hero[data-hero-style=video-alt-white] .hero-shade::after {
  background: linear-gradient(98deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.72) 28%,rgba(255,255,255,.18) 48%,rgba(255,255,255,0) 68%);
}
.homepage .hero[data-hero-style=video-alt-white] .hero-shade video { filter: brightness(.96) saturate(.85); }
.homepage .hero[data-hero-style=video-alt-white] h1 { text-shadow: none; }
.homepage .hero[data-hero-style=video-alt-white] .hero-description { color: #4e5b55; text-shadow: none; }
.homepage .hero .hero-logo-filters { position: absolute; overflow: hidden; pointer-events: none; }
.homepage .hero[data-hero-style=video-alt-white] .hero-partner-logos > span { opacity: 1; }
.homepage .hero[data-hero-style=video-alt-white] .hero-partner-logos [data-partner] img {
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.22));
  mix-blend-mode: normal;
}
/* Joy's source has an opaque white background; extract the mark before tinting. */
.homepage .hero[data-hero-style=video-alt-white] .hero-partner-logos [data-partner="bakun"] img {
  filter: url(#hero-joy-black) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.22));
}
.homepage .hero[data-hero-style=video-alt-white] .hero-contact-copy { color: #52605a; }
.homepage .hero[data-hero-style=video-alt-white] .hero-contact-copy:hover { color: #17211d; background: #17211d0a; }
.homepage .hero[data-hero-style=video-alt-white] .hero-contact-copy[data-copied=true] { color: #087c51; }
@media(max-width:480px) {
  .homepage .hero-controls { flex-direction: column; align-items: flex-end; }
  .homepage .hero-style-switch { max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .homepage .hero-style-switch button { flex-shrink: 0; white-space: nowrap; }
  .homepage .hero .hero-content { padding-top: 94px; }
}