/* ---------- MEDIA: graded stock video ---------- */
/* A media surface: a graded stock loop. */
.media { position: absolute; inset: 0; overflow: hidden; background: #111213; }
.media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* The clips were graded into the former navy; on the graphite page they play in black and white. */
.media video { filter: grayscale(1) contrast(1.05); }
.media__toggle {
  position: absolute; left: 16px; bottom: 16px; z-index: 3; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); color: #fff; cursor: pointer;
  background: rgba(17, 18, 19, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: .7; transition: opacity .2s;
}
.media__toggle:hover, .media__toggle:focus-visible { opacity: 1; }
.media__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.media__toggle svg { width: 14px; height: 14px; fill: currentColor; }

/* ---------- first screen: the brand ring opens into a full-screen video ---------- */
/* Static page (no JavaScript, reduced motion): a full-screen video with the line over it. */
.mi { position: relative; }
/* Capped like every screen-height block of the page, so a window as tall as the page leaves nothing to scroll. */
.mi__stage { position: relative; height: min(100vh, 4000px); height: min(100svh, 4000px); min-height: 560px; overflow: hidden; }
.mi__mask { position: absolute; inset: 0; }
/* The video inside the closed ring is dimmed so the white line over it reads; media.js lifts the dim
   (--mi-dim) as the ring opens. The static page sets nothing and shows the video undimmed. */
.mi__mask::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(17, 18, 19, var(--mi-dim, 0)); }
.mi__veil { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 50% 50%, rgba(17, 18, 19, .5), rgba(17, 18, 19, .15) 70%, rgba(17, 18, 19, .45)); }
/* The headline and lead sit in the middle of the screen over the mark; centred by flex, not translate (GSAP moves
   the block). */
.mi__copy {
  position: absolute; inset: 0; z-index: 2; padding: 0 24px; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 2.4vh, 24px);
  text-align: center; color: #fff; text-shadow: 0 2px 24px rgba(17, 18, 19, .9);
}
.mi__title { margin: 0; font: 700 var(--t-hero)/1.06 var(--font); letter-spacing: -.02em; }
.mi__title span { color: var(--accent); }
.mi__lead { margin: 0; max-width: 36ch; font-size: var(--t-large); line-height: 1.45; color: rgba(255, 255, 255, .86); }
@media (max-width: 560px) { .mi__lead { max-width: 30ch; } }
/* The scroll cue: centred at the foot of the first screen, on every width (the base .scroll-cue rules in
   landing.css give its look). */
.mi .mi__cue { display: block; left: 0; right: 0; top: auto; bottom: clamp(24px, 5vh, 48px); width: max-content; margin: 0 auto; color: #fff; }
.mi .mi__cue .scroll-cue__icon { width: 48px; height: 48px; background: rgba(17, 18, 19, .5); border-color: rgba(255,255,255,.3); }
.mi .mi__cue:hover .scroll-cue__icon { border-color: var(--accent); }
.motion .mi__mask:not(.is-open) {
  -webkit-mask: url(/assets/ecomm/ring-mask.svg) no-repeat; mask: url(/assets/ecomm/ring-mask.svg) no-repeat;
  -webkit-mask-size: var(--mw, auto) var(--mh, 56vh); mask-size: var(--mw, auto) var(--mh, 56vh);
  -webkit-mask-position: var(--mx, 50%) var(--my, 50%); mask-position: var(--mx, 50%) var(--my, 50%);
}
.motion .mi__mask, .motion [data-mi-line] { visibility: hidden; }
.motion [data-motion-failed] .mi__mask { -webkit-mask: none; mask: none; }

/* ---------- Act 2 and Security: the video behind the whole section ---------- */
.money-a, .security-b { position: relative; isolation: isolate; }
/* overflow: clip, not hidden: hidden would make this box the sticky video's scroll container. */
.sec-media { z-index: -1; overflow: clip; }
/* The video stays on screen while a tall section scrolls past (phones); pinned sections are one screen tall. */
.sec-media video { position: sticky; inset: auto; top: 0; height: min(100vh, 4000px); height: min(100svh, 4000px); }
.sec-media::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.money-a .sec-media::before {
  background: linear-gradient(90deg, rgba(30, 31, 33, .88), rgba(30, 31, 33, .62) 45%, rgba(30, 31, 33, .5) 70%, rgba(30, 31, 33, .7)); }
.security-b .sec-media::before {
  background: linear-gradient(180deg, rgba(30, 31, 33, .8), rgba(30, 31, 33, .42) 35%, rgba(30, 31, 33, .42) 75%, rgba(30, 31, 33, .8)); }
.media__toggle--section { z-index: 5; }