/* Preview: hero slide media only. Slide 1 = video D; slides 2 and 3 = the full photo under the live darkening, with a flat-colour animated layer on top. */
.hm-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ink); }
.hm-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hm-full > .hm-zoom { z-index: 0; }
.hm-photo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; z-index: 0; opacity: 1; visibility: visible; clip-path: none; mask: none; -webkit-mask: none; } 
.hm-full > .hm-zoom { overflow: hidden; } /* clip the photo to its box, as the svg viewport did */ /* photo is a real <img>: visible from first paint, no JS or animation needed */
/* the photo zooms exactly like the live slide images (.hero-media img) */
.hm-zoom { position: absolute; inset: 0; transform: scale(1.06); transition: transform 7s linear; }
.hero-slide.is-active .hm-zoom { transform: scale(1); }
/* the animated layer sits above the live ::after darkening, below the copy, and is clipped below the header */
.hm-fx { position: absolute; inset: 0; z-index: 1; clip-path: inset(var(--header-h) 0 0 0); pointer-events: none; }
/* slide 2: its own chips ("Talk to your data") land after the pills fuse into the slash, as the tag row (restored concept C timing) */
.hero-slide.hm-run .hero-chips .chip-word { animation-name: hmChipIn; }
.hero-slide.hm-run .chip-row:nth-child(1) .chip-word:nth-child(1) { animation-delay: 3.75s; }
.hero-slide.hm-run .chip-row:nth-child(1) .chip-word:nth-child(2) { animation-delay: 3.85s; }
.hero-slide.hm-run .chip-row:nth-child(2) .chip-word:nth-child(1) { animation-delay: 3.95s; }
.hero-slide.hm-run .chip-row:nth-child(2) .chip-word:nth-child(2) { animation-delay: 4.05s; }
@keyframes hmChipIn { from { transform: translateY(14px) scale(.94); clip-path: inset(0 0 100% 0 round 999px); } to { transform: none; clip-path: inset(0 0 0 0 round 999px); } }
@media (max-width: 760px) {
  /* phones: the whole 4:3 cut shows, nothing cropped; the box keeps its live 340px height */
  .hm-video { object-fit: contain; object-position: 50% 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-slide.hm-run .hero-chips .chip-word { animation: none; } .hm-zoom { transition: none; } }
/* phones (<= 767px): the desktop ribbon/slash is replaced by a slim accent (hero-media.js, mobileLayout) */
.hm-fx .hm-off { display: none !important; }
/* slide 2 subline (the live homepage slides have none): the site's hero lead style (.feature-hero-copy p), upright Inter */
.hero-sub { font-family: var(--sans); font-style: normal; font-weight: 400; color: rgba(247,244,239,.85); font-size: 18px; line-height: 1.5; max-width: 30em; margin: -16px 0 32px; text-shadow: 0 2px 24px rgba(18,14,31,.35); }
@media (max-width: 760px) { .hero-sub { font-size: 16px; margin: -12px 0 24px; } }
/* four slides: on phones the dot strip is compacted so it fits inside the container (it ran 40px past the edge,
   which also scrolled the hero sideways when dot 4 took focus); each dot keeps a 44px-tall touch target */
@media (max-width: 760px) { .hero-dots { gap: 4px; margin-left: 6px; padding: 0 10px; flex: 0 1 auto; min-width: 0; } .hero-dot { width: 30px; flex: 0 1 30px; min-width: 22px; } }
/* slide 5 small line: upright Inter, paper text with a flat coral dot (no glow) */
.hero-eyebrow { font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 15px; letter-spacing: .02em; color: var(--paper); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; text-shadow: 0 2px 24px rgba(18,14,31,.35); }
.hero-eyebrow::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); flex: none; }
@media (max-width: 760px) { .hero-eyebrow { font-size: 14px; margin-bottom: 14px; } }
/* CX slide on wide screens: the headline runs on two lines (wider column), sized so it stays left of the faces in every shot */
@media (min-width: 761px) {
  .hm-cx .hero-title { max-width: 16ch; font-size: clamp(40px, calc((40vw - max(var(--gutter), (100vw - var(--container)) / 2) - 16px) / 7.9), 76px); }
}
@media (min-width: 761px) and (max-aspect-ratio: 3/2) {
  .hm-cx .hero-title { font-size: clamp(38px, calc((37.5vw - max(var(--gutter), (100vw - var(--container)) / 2) - 16px) / 7.9), 76px); }
}
/* slide 1: ex-Googlers headline (same size as slide 2; one line on desktop) */
.hero-title-s1 .nw { white-space: nowrap; }
@media (min-width: 761px) { .hero-title.hero-title-s1 { max-width: none; white-space: nowrap; } }

/* seamless hero hand-off (desktop): the incoming slide fades in (.75s, even ease) on top; the outgoing one stays opaque
   underneath until the fade is over (hm-leaving, set by hero-media.js), so there is no dark dip between slides */
@media (min-width: 761px) {
  .hero-slide { transition: opacity .75s cubic-bezier(.45,0,.25,1), visibility .75s; }
  .hero-slide.is-active { z-index: 2; }
  .hero-slide.hm-leaving { opacity: 1; visibility: visible; z-index: 1; transition: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-slide.hm-leaving { opacity: 0; visibility: hidden; } }

/* phones (<= 760px): the hero fills the screen (100svh, so the controls never sit under the browser toolbar). The footage
   runs edge to edge just under the logo bar in a 5:6 frame (120vw tall), which keeps the 4:3 phone cuts at a 1.6x crop instead of
   the ~2.9x a full-height crop needs, so faces and on-screen captions stay whole. The copy, button and controls sit at the
   bottom on the solid ink field and step up over the lower edge of the frame where the screen is short. The darkening
   is one flat, even ink tint (no gradient, no glow) so the white type passes WCAG AA wherever it overlaps the footage. */
@media (max-width: 760px) {
  .hero { height: 100vh; height: 100svh; min-height: 560px; background: #120E1F; }
  .hero-slide { position: absolute; inset: 0; }
  .hero-media { position: absolute; top: var(--header-h); left: 0; right: 0; bottom: auto; height: 120vw; max-height: calc(100% - var(--header-h)); }
  .hm-video { object-fit: cover; object-position: var(--hm-pos, 50% 50%); }
  .hero-media img, .hm-photo { object-position: var(--hm-pos, 50% 50%); }
  .hero-media::after { background: rgba(18,14,31,var(--hm-tint,.45)); }
  /* the subline can sit on the footage on short screens, so it is drawn at full strength to hold 4.5:1 */
  .hero-sub { color: #F7F4EF; }
  .hero-inner { position: absolute; inset: 0; height: auto; display: flex; flex-direction: column; justify-content: flex-end; margin: 0; padding-top: var(--header-h); padding-bottom: 104px; }
  .hero-chips { order: -1; margin: 0 0 20px; }
  .hero-title { margin-bottom: 20px; }
  /* the flat tint already carries the logo and menu, so the header's fading top scrim is dropped on the home hero */
  body.is-home:not(.is-light-hero) .site-header:not(.is-solid):not(.mega-open):not(.is-open)::before { content: none; }
  /* photo slides: hero-media.js crops each photo so the faces sit clear of the copy; the coral slash layer is left out on
     phones, where it has no room beside the faces and would show as a clipped sliver */
  .hm-fx { display: none; }
  /* per-slide framing in the 1.6x frame: people, screens and the CX captions stay inside the visible column */
  .hero-slide[aria-label="1 of 5"] { --hm-pos: 60% 50%; --hm-tint: .5; }
  .hero-slide[aria-label="2 of 5"] { --hm-pos: 55% 50%; --hm-tint: .5; }
  .hero-slide[aria-label="3 of 5"] { --hm-pos: 78% 50%; --hm-tint: .55; }
}
/* short phones (SE, small Android): the copy climbs well into the frame, so the same flat tint is set deeper to hold AA */
@media (max-width: 760px) and (max-height: 700px) {
  .hero-slide { --hm-tint: .62 !important; }
}