/* The Sebenza Static film (sales/motion/sebenza-static-30s). A thumbnail opens it in a
   lightbox; when it ends, the next step is one button away (Aston, 2026-10-19). */
.film{border:0;padding:0;margin:auto;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;display:none;color:#F6F5F8}
.film[open]{display:grid;place-items:center}
.film::backdrop{background:rgba(10,10,12,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.film__box{position:relative;width:min(1120px,calc(100vw - 32px))}
.film__video{display:block;width:100%;aspect-ratio:16/9;background:#000;border-radius:18px;overflow:hidden}
.film__close{position:absolute;right:0;top:-54px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(246,245,248,.12);color:#F6F5F8;font:300 30px/1 var(--font);cursor:pointer}
.film__close:hover{background:rgba(246,245,248,.22)}
.film__after{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:22px}
.film__cta{display:inline-flex;align-items:center;gap:.45em;margin:0;padding:17px 26px;border:0;border-radius:999px;background:#00FF48;color:#0A0A0C;font:500 17px/1 var(--font);letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:transform var(--t-fast,.2s) var(--ease,ease)}
.film__cta:hover{transform:translateY(-1px)}
.film.is-done .film__cta{animation:film-nudge .9s var(--ease,ease) 2}
@keyframes film-nudge{0%,100%{transform:none}35%{transform:scale(1.05)}}
.film__talk{appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;font-size:15px;opacity:.7;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.film__talk:hover{opacity:1}
/* the thumbnail that opens it */
.film__open{display:inline-flex;align-items:center;gap:16px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.film__thumb{position:relative;flex:none;width:168px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.film__thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease,ease)}
.film__open:hover .film__thumb img{transform:scale(1.05)}
.film__play{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(246,245,248,.94);display:grid;place-items:center;transition:transform var(--t-fast,.2s) var(--ease,ease)}
.film__play::after{content:"";margin-left:3px;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #0A0A0C}
.film__open:hover .film__play{transform:scale(1.08)}
.film__cap{display:block;font-size:15px;line-height:1.4}
.film__cap b{display:block;font-weight:500;letter-spacing:-.01em}
.film__cap span{opacity:.62}
.film__open:focus-visible{outline:2px solid currentColor;outline-offset:6px;border-radius:12px}
/* on the web design card */
.hub__film{grid-column:1 / -1;position:relative;z-index:2;margin-top:6px;padding-right:64px}   /* clear of the card's arrow */
.hub__film[hidden]{display:none}
/* on /start: a card under the ways, only on the first screen (Aston, 2026-10-19: under the form, not beside the cart) */
.start__film{display:flex;max-width:640px;margin-top:clamp(20px,3vw,28px)}
.start__film .film__thumb{width:168px}
.start__again{display:none;margin-top:12px;font-size:14px;opacity:.62}
.film__again{appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.film-seen .start__film{display:none!important}
.film-seen .start__again{display:block}
/* phones: the lightbox edge to edge, the close over the picture; the card's caption under its thumbnail */
@media (max-width:600px){
  .hub__film{padding-right:0}
  .hub__film .film__open{flex-direction:column;align-items:flex-start;gap:10px}
  .hub__film .film__thumb{width:168px}
  .hub__film .film__cap{padding-right:64px}
  .film__box{width:100vw}
  .film__video{border-radius:0}
  .film__close{top:12px;right:12px;z-index:2;background:rgba(10,10,12,.55)}
  .film__after{padding:0 16px}
  .film__cta{padding:15px 22px;font-size:16px}
  .film__thumb{width:112px}
}