/* Homepage "Our excellence" film (tools/build-film.mjs). --p (0..1, set by acs-film.js) grows the frame as it scrolls in. */
.acs-film {
  --navy: #061631; --blue: #1f8fd6; --green: #8dc63f; --ease: cubic-bezier(.22, 1, .36, 1); --p: 1;
  position: relative; overflow: hidden; padding: 96px 0 110px; color: #fff; isolation: isolate;
  background: radial-gradient(900px 500px at 50% 0%, #0d3266 0%, transparent 70%), var(--navy);
  font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
.acs-film *, .acs-film *::before, .acs-film *::after { box-sizing: border-box; }
.acs-film .acs-film__glow { position: absolute; inset: auto -20% -40% -20%; height: 70%; z-index: -1;
  background: radial-gradient(closest-side, rgba(31, 143, 214, .35), transparent), radial-gradient(closest-side at 30% 60%, rgba(141, 198, 63, .22), transparent); filter: blur(30px); }
.acs-film::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%); }

.acs-film .acs-film__head { max-width: 760px; margin: 0 auto 48px; padding: 0 24px; text-align: center; }
.acs-film .acs-film__eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--green); }
.acs-film .acs-film__h { margin: 0; font-family: inherit; font-size: clamp(32px, 4.4vw, 58px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; color: #fff; text-transform: none; }
.acs-film .acs-film__h span { background: linear-gradient(90deg, #6cc4ff, var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acs-film .acs-film__lead { margin: 18px auto 0; max-width: 600px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .72); }

/* a wide band with wavy top and bottom edges (same outline as the banner's wave), growing as it scrolls in */
.acs-film .acs-film__stage { position: relative; }
.acs-film .acs-film__shape { position: relative; margin: 0 auto; width: min(100% - 48px, 1440px, (100vh - 40px) * 16 / 9); transform: scale(calc(.86 + .14 * var(--p))); transform-origin: 50% 60%; will-change: transform;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55)) drop-shadow(0 0 70px rgba(31, 143, 214, calc(.35 * var(--p)))); }
.acs-film .acs-film__frame {
  position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #000;
  -webkit-mask: var(--acs-film-mask) center / 100% 100% no-repeat; mask: var(--acs-film-mask) center / 100% 100% no-repeat;
  --acs-film-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 560' preserveAspectRatio='none'%3E%3Cpath d='M0,44 C160,6 330,0 520,30 C700,58 860,60 1000,26 L1000,522 C820,478 640,492 470,526 C300,560 140,548 0,512 Z'/%3E%3C/svg%3E");
}
.acs-film .acs-film__accent { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.acs-film .acs-film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.acs-film .acs-film__shade { position: absolute; inset: 0; pointer-events: none; transition: opacity .5s;
  background: linear-gradient(180deg, rgba(6, 22, 49, .25) 0%, rgba(6, 22, 49, .05) 40%, rgba(6, 22, 49, .75) 100%); }

/* play cover */
.acs-film .acs-film__cover { position: absolute; inset: 61% 0 auto 0; display: flex; flex-direction: column; align-items: center; gap: 14px; transition: opacity .45s var(--ease); }
.acs-film .acs-film__play { position: relative; display: grid; place-items: center; width: 96px; height: 96px; padding: 0 0 0 4px; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--navy); background: #fff; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .6); transition: transform .4s var(--ease), background-color .3s; }
.acs-film .acs-film__play:hover { transform: scale(1.08); background: var(--green); }
.acs-film .acs-film__ring { position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); animation: acs-film-ring 2.4s var(--ease) infinite; }
.acs-film .acs-film__ring::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); animation: acs-film-ring 2.4s var(--ease) .6s infinite; }
@keyframes acs-film-ring { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.acs-film .acs-film__cta { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }

.acs-film .acs-film__chips { position: absolute; left: 6%; bottom: 14%; right: calc(6% + 70px); display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; transition: opacity .45s, transform .45s var(--ease); }
.acs-film .acs-film__chips li { padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.acs-film .acs-film__chips li:first-child { background: var(--green); border-color: var(--green); color: var(--navy); }
.acs-film .acs-film__mute { position: absolute; right: 6%; bottom: 14%; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color .25s; }
.acs-film .acs-film__mute:hover { background: rgba(255, 255, 255, .28); }
.acs-film .acs-film__ico-on { display: none; }
.acs-film .acs-film__mute[aria-pressed="true"] .acs-film__ico-on { display: block; }
.acs-film .acs-film__mute[aria-pressed="true"] .acs-film__ico-off { display: none; }
.acs-film .acs-film__bar { display: none; position: absolute; left: 6%; right: 6%; top: 12%; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .12); }
.acs-film .acs-film__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--green)); }

/* watching with sound: the native controls take over */
.acs-film.is-watching .acs-film__cover, .acs-film.is-watching .acs-film__shade, .acs-film.is-watching .acs-film__mute, .acs-film.is-watching .acs-film__bar { opacity: 0; pointer-events: none; }
.acs-film.is-watching .acs-film__chips { opacity: 0; transform: translateY(12px); pointer-events: none; }

@media (max-width: 760px) {
  .acs-film { padding: 64px 0 72px; }
  .acs-film .acs-film__head { margin-bottom: 32px; padding: 0 16px; }
  .acs-film .acs-film__lead { font-size: 15.5px; }
  .acs-film .acs-film__shape { transform: none; }
  .acs-film .acs-film__frame { aspect-ratio: 4 / 5; }
  .acs-film .acs-film__play { width: 76px; height: 76px; }
  .acs-film .acs-film__chips { left: 5%; right: calc(5% + 54px); bottom: 13%; gap: 7px; }
  .acs-film .acs-film__chips li { padding: 7px 12px; font-size: 12px; }
  .acs-film .acs-film__chips li:nth-child(n+3) { display: none; }
}
@media (max-width: 560px) {
  .acs-film .acs-film__chips { display: none; }
  .acs-film .acs-film__shape { width: calc(100% - 32px); }
  .acs-film .acs-film__mute { right: 5%; bottom: 13%; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .acs-film { --p: 1 !important; }
  .acs-film .acs-film__ring, .acs-film .acs-film__ring::after { animation: none; }
}