/* Hero headline word-morph (2026-07-20, v2).
   Line 1: "World Class". Line 2: "Human" + a rotating service word that
   gooey-morphs through Dubbing / Subtitling / Translators / Voice
   Artists / Sound Engineers / Partners / Audiences — reads "Human
   Dubbing", "Human Subtitling", …
   Technique per Mena's reference (stacked text layers + blur crossfade
   + SVG threshold filter #threshold, defined inline in index.html).
   Typography stays the template's own h1 — no imported fonts.
   The stage box is sized per word by hero-morph.js (with a width
   transition) so the "Human <word>" pair stays truly centered. */

.hvo-morph-line { display: block; white-space: nowrap; }

/* "Human" in the template's button green; the morph word solid white
   with extra weight — full-alpha text also makes the threshold goo
   read far crisper than the old 73%-grey did */
.hvo-morph-human { color: var(--base--green); }
.hvo-morph > span { color: #fff; font-weight: 700; }

/* Geometry, filter, weight and the phone layout now live in ONE place:
   the SHARED GOO STAGE block in title-morph/title-morph.css (2026-08-27).
   Do not restate them here; that duplication is what let the stages drift. */

/* ── Inline YouTube mark in the hero subline ─────────────────────────────
   Mena 2026-08-28: "Dubbing the world's biggest (YouTube Logo) YouTube
   channels".

   Deliberately the SAME treatment as the About section's "watch hours on
   [logo] YouTube", whose rules live in title-morph.css scoped to
   .section_about. Same em-relative sizing and the same -0.16em nudge, so the
   two marks on the page cannot drift apart. white-space:nowrap keeps the logo
   welded to the word it belongs to, which matters here because the line is
   forced to break after "channels". */
.section_hero .hvo-youtube-brand {
  display: inline;
  white-space: nowrap;
}

.section_hero .hvo-youtube-mark {
  display: inline-block;
  width: 1.35em;
  margin-right: 0.25em;
  line-height: 0;
  vertical-align: -0.16em;
}

.section_hero .hvo-youtube-mark img {
  display: block;
  width: 100%;
  height: auto;
}