/* ==========================================================================
   Speed.ai v2: the hero (the field's own formation, "field"). Loads after site.css.
   Desktop: headline bottom-left on two lines, lede and CTAs in the lower-left six
   columns, four customer films as a small deck of stills bottom-right (a stats row until 2026-11-11). Phones: headline top, the field in a window
   below it, then the lede, CTAs and stacked stats.
   ========================================================================== */

/* the engine's canvas takes the large viewport's height, so a phone's URL bar showing and
   hiding never resizes it (no relayout while scrolling) */
.field-canvas { bottom: auto; height: 100vh; height: 100lvh; }

.hero {
  --hero-h: calc(var(--vh) * 100 - var(--note-h, 38px));
  position: relative;
  height: var(--hero-h);
  min-height: 620px;
  margin-top: calc(-1 * var(--masthead-h));   /* the field runs under the transparent header */
  color: var(--snow);
  overflow: hidden;
  isolation: isolate;
}
/* no WebGL: the same field as flat polygons, drawn from the viewport's top */
.hero__flat { position: absolute; left: 0; top: calc(-1 * var(--note-h, 38px)); z-index: 0; width: 100%; height: 100vh; height: 100lvh; }
.hero__flat[hidden] { display: none; }
/* a soft dark ground for the copy (no box): strongest behind the headline and lede,
   gone by the middle of the field; a whisper under the header */
.hero__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 64% 58% at 10% 100%, rgba(5, 5, 6, .88) 0%, rgba(5, 5, 6, .74) 36%, rgba(5, 5, 6, .32) 62%, rgba(5, 5, 6, 0) 82%),
    linear-gradient(to top, rgba(5, 5, 6, .92) 0%, rgba(5, 5, 6, .62) 18%, rgba(5, 5, 6, .2) 34%, rgba(5, 5, 6, 0) 46%),
    linear-gradient(to bottom, rgba(5, 5, 6, .6) 0, rgba(5, 5, 6, 0) 120px);
}

.hero__frame {
  position: relative; z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 1fr auto auto;
  column-gap: var(--col-gap);
  padding-top: calc(var(--masthead-h) + 32px);
  padding-bottom: clamp(32px, 6.4vh, 64px);
}
.hero__title {
  grid-column: 1 / span 10; grid-row: 2;
  align-self: end;
  max-width: 10.6em;
  margin-bottom: 32px;
  font-size: clamp(2.6rem, 5.85vw, 5.85rem);   /* 6.4% down from 6.25 (client, 2026-11-12: "resuce h1 size by 5-8%") */
  font-weight: 360;
  letter-spacing: -.048em;
  line-height: .98;
  text-wrap: balance;
}
/* line masks for the rise (SplitText); padding keeps descenders out of the clip */
.hero__title .fc-line-mask, .hero__title .fc-mask { display: block; padding: 0 .06em .12em 0; margin: 0 -.06em -.12em 0; }
.hero__title .fc-line { display: block; will-change: transform; }
.hero__window { display: none; }
.hero__body { grid-column: 1 / span 6; grid-row: 3; align-self: end; }
.hero__lede { max-width: 34em; }
/* The right of the hero: the four customer films (client, 2026-11-11). It spans the headline's
   row and the copy's, bottom-aligned, so its height never moves the headline.
   A small deck of their Vimeo stills at the right edge (client, 2026-11-12: "keep thumnails like
   before make it small and right aligned"). The rows of type that were tried in between (.hlist)
   are behind ?aside=list. */
.hero__aside { grid-column: 8 / span 5; grid-row: 2 / span 2; align-self: end; }
.hfilms { width: clamp(272px, 24vw, 372px); margin-left: auto; }
html:is(.aside-list, .aside-stats) .hfilms { width: 100%; }
.hfilms__label { margin-bottom: 10px; font-size: .8125rem; font-weight: 400; line-height: 1.4; color: var(--mist); }
.hlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
.hl {
  position: relative;
  display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 14px;
  height: 100%; padding: 16px 0;
  border-top: 1px solid var(--line-dark-2);
  transition: border-color 200ms var(--ease-out);
}
.hl:focus-visible { outline: 2px solid var(--snow); outline-offset: 2px; border-radius: 6px; }
.hl__face { width: 48px; height: 48px; overflow: hidden; border-radius: 12px; background: #101010; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
/* set on each image: the origin is the face, --z zooms about it, --tx and --ty bring it to the middle */
.hl__face img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--z, 1)); transition: transform 400ms var(--ease-out); }
/* the play mark sits on the face's corner, so the face stays clear */
.hl__play {
  position: absolute; left: 34px; top: calc(50% + 10px);
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--snow); color: #0A0A0B;
  box-shadow: 0 0 0 2px var(--carbon-0);
  transition: transform 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.hl__play svg { width: 8px; height: 8px; margin-left: 1px; }
.hl__out { display: block; font-size: 1rem; font-weight: 400; letter-spacing: -.015em; line-height: 1.3; color: var(--snow); text-wrap: balance; }
.hl__firm { display: block; margin-top: 3px; font-size: .8125rem; font-weight: 350; line-height: 1.35; color: var(--mist); }
@media (hover: hover) and (pointer: fine) {
  .hl:hover { border-top-color: rgba(255, 255, 255, .44); }
  .hl:hover .hl__face img { transform: translate(var(--tx, 0), var(--ty, 0)) scale(calc(var(--z, 1) * 1.06)); }
  .hl:hover .hl__play { transform: scale(1.12); background: var(--hl); }
}
.hl:active .hl__play { transform: scale(.94); }
html:not(.aside-list) .hlist { display: none; }
html.aside-list :is(.hfilms__deck, .hfilms__nav) { display: none; }
/* the deck is as tall as its front card: 82% of the width at 16:9 */
.hfilms__deck { position: relative; aspect-ratio: 16 / 7.38; }
.hfilm {
  position: absolute; left: 0; top: 0; width: 82%; height: 100%;
  transform-origin: 100% 50%;
  transition: transform 520ms var(--ease-out), filter 520ms var(--ease-out), opacity 300ms var(--ease-out), visibility 0s;
}
.hfilm a {
  position: relative; display: block; height: 100%;
  overflow: hidden; border-radius: 12px;
  background: #101010;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 20px 44px -20px rgba(0, 0, 0, .9);
}
.hfilm a:focus-visible { outline: 2px solid var(--snow); outline-offset: 3px; }
.hfilm img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* p: 0 the front card, 1 and 2 waiting behind it to the right, 3 out of sight */
.hfilm[data-p="0"] { z-index: 4; }
/* out of focus as well as dimmer, like the far rows of the field: no stray letters at the edge */
.hfilm[data-p="1"] { z-index: 3; transform: translate3d(11%, 0, 0) scale(.9); filter: brightness(.38) blur(2px); }
.hfilm[data-p="2"] { z-index: 2; transform: translate3d(21.95%, 0, 0) scale(.8); filter: brightness(.2) blur(3.5px); }
.hfilm[data-p="3"] { z-index: 1; transform: translate3d(-5%, 0, 0) scale(.96); opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 0s, 300ms; }
.hfilm__play {
  position: absolute; left: 9px; bottom: 9px;
  display: inline-flex; align-items: center; gap: 6px;
  height: 27px; padding: 0 11px 0 9px;
  border-radius: 999px;
  background: rgba(5, 5, 6, .78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  font-size: .75rem; font-weight: 450; color: var(--snow);
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), opacity 240ms var(--ease-out);
}
.hfilm__play svg { width: 9px; height: 9px; }
.hfilm:not([data-p="0"]) .hfilm__play { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .hfilm[data-p="0"] a:hover .hfilm__play { background: var(--snow); color: #0A0A0B; }
  .hfilm[data-p="1"] a:hover, .hfilm[data-p="2"] a:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .42), 0 28px 60px -24px rgba(0, 0, 0, .9); }
}
.hfilms__ctl { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hfilms__ctl > * { margin-top: 12px; }
html.aside-list .hfilms__ctl > * { margin-top: 8px; }
.hfilms__nav { display: inline-flex; align-items: center; gap: 8px; }
html:not(.js) .hfilms__nav { display: none; }
.hfilms__btn {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-dark-2);
  background: rgba(5, 5, 6, .5);
  color: var(--mist);
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.hfilms__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hfilms__btn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .hfilms__btn:hover { color: var(--snow); border-color: rgba(255, 255, 255, .34); } }
.hfilms__count { margin-left: 6px; font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--mist); }
.hfilms__count b { font-weight: 450; color: var(--snow); }
.hero__pause { margin-left: auto; }
/* the hero as it was (?aside=stats): the three figures, no films */
.hero__stats { display: none; width: 100%; }
html.aside-stats .hero__stats { display: grid; }
html.aside-stats :is(.hfilms__label, .hfilms__deck, .hfilms__nav) { display: none; }
html.aside-stats .hfilms__ctl > * { margin-top: 24px; }
.hero__pause {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 14px 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line-dark-2);
  background: rgba(5, 5, 6, .5);
  font-size: .8125rem; font-weight: 400; color: var(--mist);
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.hero__pause svg { width: 11px; height: 11px; }
.hero__pause:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .hero__pause:hover { color: var(--snow); border-color: rgba(255, 255, 255, .34); } }
/* the pause control matters only while the field runs */
html:not(.has-field) .hero__pause, .hero.is-static .hero__pause { display: none; }

/* intro states: JS owns them once the hero is live; a failsafe reveals the copy if the
   script never runs */
.js .hero:not(.is-live) .hero__title,
.js .hero:not(.is-live) [data-rise] { opacity: 0; animation: fc-failsafe .6s var(--ease-out) 3s forwards; }
@keyframes fc-failsafe { to { opacity: 1; } }

/* ==========================================================================
   the hero's label: on the featured lost call. The engine sets --x, --y (px) and --vis,
   and the eased parts --leader, --text and --dot. The leader leans at the logo's 15 degrees.
   (Its own classes, so the section labels' phone legend never applies to it.)
   ========================================================================== */
.hcall {
  --x: -9999px; --y: -9999px; --leader: 0; --text: 0; --dot: 0; --len: 64px;
  position: absolute; left: 0; top: 0; z-index: 3;
  width: 0; height: 0;
  visibility: hidden;
  pointer-events: none;
}
html.has-field .hcall { position: fixed; z-index: 5; transform: translate3d(var(--x), var(--y), 0); will-change: transform; }
/* Hero-bound (client, 2026-11-10): when no section below the hero uses the field, the canvas
   and the label belong to the hero and scroll away with it, instead of staying pinned to the
   screen behind the next section. The canvas starts at the page's top, so the label (placed in
   canvas pixels) is offset by the concept note above the hero. The last of the field fades
   into the ground at the hero's foot, so the next section starts clean. */
html.field-bound .field-canvas { position: absolute; }
html.field-bound.has-field .hcall { position: absolute; top: calc(-1 * var(--note-h, 38px)); z-index: 3; }
html.field-bound .hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 120px; pointer-events: none;
  background: linear-gradient(to top, var(--carbon-0) 0%, rgba(5, 5, 6, .86) 34%, rgba(5, 5, 6, 0) 100%);
}
html.field-bound .firms { background: var(--carbon-0); }
/* no WebGL: pinned (by the script) on the flat field's featured bar, fully drawn */
html:not(.has-field) .hcall.is-flat { --leader: 1; --text: 1; --dot: 1; visibility: visible; }
.hcall__dot {
  position: absolute; left: -3px; top: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--snow);
  box-shadow: 0 0 0 3px rgba(5, 5, 6, .55);
  opacity: var(--dot);
}
.hcall__leader {
  position: absolute; left: -.5px; bottom: 0;
  width: 1px; height: var(--len);
  background: linear-gradient(to top, rgba(245, 245, 244, .9), rgba(245, 245, 244, .45));
  transform-origin: 50% 100%;
  transform: rotate(15deg) scaleY(var(--leader));
}
.hcall__text {
  position: absolute;
  left: calc(var(--len) * .2588 + 12px);
  bottom: calc(var(--len) * .9659 - 18px);
  width: max-content; max-width: 280px;
  display: grid; justify-items: start; gap: 2px;
  opacity: var(--text);
  transform: translate3d(0, calc((1 - var(--text)) * 8px), 0);
}
/* a soft dark ground for the words, no edges: the field stays visible around it.
   Its blur is paint only; its box stays inside the label's own (no sideways scroll). */
.hcall__text::before {
  content: ""; position: absolute; inset: -12px -22px -12px -18px; z-index: -1;
  border-radius: 28px;
  background: rgba(5, 5, 6, .8);
  filter: blur(18px);
}
.hcall.is-flipped .hcall__text { left: auto; right: calc(var(--len) * -.2588 + 12px); justify-items: end; text-align: right; }
.hcall__tag {
  margin-bottom: 6px; padding: 2px 8px;
  border-radius: 999px; border: 1px solid var(--line-dark-2);
  background: rgba(5, 5, 6, .6);
  font-size: .6875rem; font-weight: 400; line-height: 1.4; color: var(--mist);
}
.hcall__title { display: inline-flex; align-items: center; gap: 7px; font-size: .9375rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; color: var(--snow); }
.hcall__title sup { font-size: .8em; vertical-align: .4em; margin-left: .05em; font-weight: 300; }
.hcall__mark { width: 9px; height: 14px; flex: none; fill: var(--hl); }
.hcall__body { font-size: .9375rem; font-weight: 350; line-height: 1.35; color: var(--snow); }
.hcall__time { font-size: .8125rem; font-weight: 350; line-height: 1.4; color: var(--mist); }

/* ---------- debug overlay (?debug) ---------- */
.fc-debug {
  position: fixed; left: 12px; bottom: 12px; z-index: 400; margin: 0;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(0, 0, 0, .72); color: #9f9;
  font: 11px/1.45 ui-monospace, Menlo, Consolas, monospace;   /* a QA tool, not the design */
  white-space: pre; pointer-events: none;
}

/* ==========================================================================
   breakpoints
   ========================================================================== */
@media (max-width: 1080px) {
  .hero__frame { grid-template-rows: 1fr auto auto auto; }
  .hero__title { grid-column: 1 / -1; margin-bottom: 24px; }
  .hero__body { grid-column: 1 / span 10; }
  /* the films become one row of four stills, the pause control at its end */
  .hero__aside { grid-column: 1 / -1; grid-row: 4; margin-top: 32px; }
  .hfilms { width: auto; margin-left: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 16px; }
  .hfilms__label { grid-column: 1 / -1; }
  .hlist { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hl { align-items: start; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 0 0; }
  .hl__face { width: 40px; height: 40px; border-radius: 10px; }
  .hl__play { left: 28px; top: 42px; width: 18px; height: 18px; }
  .hl__out { font-size: .9375rem; }
  html.aside-list .hfilms__ctl { grid-column: 1 / -1; }
  .hfilms__deck { aspect-ratio: auto; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 1px; }
  .hfilms__deck::-webkit-scrollbar { display: none; }
  .hfilm, .hfilm[data-p] { position: static; flex: 0 1 172px; min-width: 132px; width: auto; height: auto; aspect-ratio: 16 / 9; transform: none; filter: none; opacity: 1; visibility: visible; scroll-snap-align: start; }
  .hfilm a { border-radius: 10px; }
  .hfilm[data-p] .hfilm__play { left: 8px; bottom: 8px; width: 28px; height: 28px; padding: 0; justify-content: center; opacity: 1; }
  .hfilm__play span { display: none; }
  .hfilms__nav { display: none; }
  .hfilms__ctl > * { margin-top: 0; }
  .hero__stats { max-width: 600px; }
  html.aside-stats .hfilms__ctl > * { margin-top: 0; }
  /* the copy block is taller here: the ground under it rises with it */
  .hero__shade {
    background:
      radial-gradient(ellipse 80% 52% at 12% 100%, rgba(5, 5, 6, .9) 0%, rgba(5, 5, 6, .76) 40%, rgba(5, 5, 6, .3) 66%, rgba(5, 5, 6, 0) 86%),
      linear-gradient(to top, rgba(5, 5, 6, .96) 0%, rgba(5, 5, 6, .8) 30%, rgba(5, 5, 6, .36) 46%, rgba(5, 5, 6, 0) 58%),
      linear-gradient(to bottom, rgba(5, 5, 6, .6) 0, rgba(5, 5, 6, 0) 120px);
  }
}

@media (max-width: 640px) {
  .hero { height: auto; min-height: var(--hero-h); }
  .hero__frame { display: flex; flex-direction: column; height: auto; padding-top: calc(var(--masthead-h) + 20px); padding-bottom: 32px; }
  .hero__frame > * { align-self: stretch; }
  .hero__title { margin-bottom: 0; font-size: clamp(2.35rem, 10.7vw, 3.05rem); max-width: none; }
  .hero__window { display: block; height: clamp(250px, calc(var(--vh) * 41), 400px); }
  .hero__body .ctas { margin-top: 24px; }
  .hero__aside { margin-top: 36px; }
  .hfilms { display: block; }
  .hlist { grid-template-columns: minmax(0, 1fr); }
  .hl { align-items: center; padding: 12px 0; }
  .hl__play { top: calc(50% + 8px); }
  .hlist li:last-child .hl { border-bottom: 1px solid var(--line-dark-2); }
  .hfilms__deck { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .hfilm, .hfilm[data-p] { flex: 0 0 64%; }
  .hfilm[data-p] .hfilm__play { width: auto; height: 30px; padding: 0 12px 0 10px; }
  .hfilm__play span { display: inline; }
  .hfilms__ctl > *, html.aside-stats .hfilms__ctl > * { margin-top: 18px; }
  .hero__stats { max-width: none; }
  .hero__shade {
    background:
      linear-gradient(to bottom, rgba(5, 5, 6, .55) 0, rgba(5, 5, 6, 0) 160px),
      linear-gradient(to top, rgba(5, 5, 6, 1) 0%, rgba(5, 5, 6, .96) 42%, rgba(5, 5, 6, .6) 52%, rgba(5, 5, 6, 0) 62%);
  }
  .hcall { --len: 48px; }
  .hcall__text { max-width: 210px; }
  .hcall__title, .hcall__body { font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__pause { display: none; }
}