body.has-branding.lf-preview-banner { padding-top: 230px; }
.lf-preview-banner .wrapper::before { opacity: 0; }
.lf-hero-preview { position: absolute; top: 0; left: 50%; width: min(100%,var(--max-width,1140px)); height: 230px; transform: translateX(-50%); z-index: 3; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .65s ease; background: #111; }
.lf-hero-preview.is-visible { opacity: 1; }
.lf-hero-preview video, .lf-hero-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 29%; }
.lf-hero-preview img { display: none; }
.lf-hero-preview.is-finished img { display: block; }
.lf-hero-preview.is-finished video { visibility: hidden; }
.lf-hero-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#111 0%,rgba(17,17,17,.28) 12%,rgba(17,17,17,.04) 35%,rgba(17,17,17,.04) 65%,rgba(17,17,17,.28) 88%,#111 100%),linear-gradient(0deg,rgba(17,17,17,.72),rgba(17,17,17,.08) 50%,rgba(17,17,17,.15)); }
.lf-hero-preview-toggle { position: absolute; right: max(14px,calc((100% - var(--max-width,1140px))/2 + 14px)); top: 190px; width: 26px; height: 26px; min-height: 0; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(17,17,17,.55); color: #fff; cursor: pointer; z-index: 4; font-size: 12px; line-height: 1; box-shadow: none; }
.lf-hero-preview-toggle:hover { background: rgba(17,17,17,.85); color: #fff; border-color: #7ac339; }
.lf-hero-preview-toggle:focus-visible { outline: 2px solid #7ac339; outline-offset: 3px; }
.lf-hero-preview-toggle[hidden] { display: none; }
@media(max-width:950px) {
  body.has-branding.lf-preview-banner { padding-top: 140px; }
  .lf-hero-preview { height: 140px; }
  .lf-hero-preview video, .lf-hero-preview img { object-position: center 38%; }
  .lf-hero-preview-toggle { top: 101px; right: 14px; }
  .lf-hero-preview::after { background: linear-gradient(90deg,rgba(17,17,17,.7),transparent 20%,transparent 80%,rgba(17,17,17,.7)),linear-gradient(0deg,rgba(17,17,17,.7),rgba(17,17,17,.1) 65%); }
}
@media(prefers-reduced-motion:reduce) { .lf-hero-preview { transition: none; } }

body.has-branding.lf-preview-banner-hidden { padding-top: 0; }
.lf-preview-banner-hidden .wrapper::before,.lf-preview-banner-hidden .wrapper::after { display: none; }
.lf-hero-preview-close { position: absolute; top: 14px; right: max(14px,calc((100% - var(--max-width,1140px))/2 + 14px)); width: 28px; height: 28px; min-height: 0; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; background: rgba(17,17,17,.4); z-index: 4; cursor: pointer; box-shadow: none; }
.lf-hero-preview-close::before { content: ""; position: absolute; inset: -7px; }
.lf-hero-preview-close:hover { background: rgba(17,17,17,.8); border-color: rgba(255,255,255,.65); }
.lf-hero-preview-close:focus-visible { outline: 2px solid #7ac339; outline-offset: 3px; }
.lf-hero-preview-reopen { display: inline-flex; align-items: center; min-height: 0; padding: 3px 9px; margin-top: 6px; font-size: 11px; line-height: 1.6; font-weight: 400; color: var(--tt-fade); background: transparent; border: 1px solid var(--bdc); border-radius: 4px; box-shadow: none; }
.lf-hero-preview-reopen:hover { color: var(--green); border-color: var(--green); background: transparent; }
.lf-hero-preview-reopen[hidden] { display: none; }
@media(max-width:950px) { .lf-hero-preview-close { right: 14px; } }
