/* v2 hero: full-bleed #0047FF with an ASCII signal field behind the type.
   Loaded after hero.css on v2.html only; every rule here is scoped to
   .hero-v2 so the live hero is untouched. */

.hero25.hero-v2 {
  min-height: 100svh;
  padding: 5.9rem 2.5rem 3.5rem;
  background: #0047ff;
  color: #fff;
}

/* No sky, no dark tail: the field canvas is the only background layer. */
.hero25.hero-v2::before,
.hero25.hero-v2::after {
  display: none;
}

.hero-v2-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* The glass panel becomes plain type on blue. */
.hero-v2 .hero25-panel {
  min-height: 0;
  padding: 0;
  gap: 1.5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hero-v2 .hero25-headline {
  color: #fff;
  /* Sized to its longest line so "Hire an AI native engineer" overhangs
     the 1120px panel rather than wrapping. The panel is transparent, so
     nothing shows the overhang. */
  width: max-content;
  max-width: calc(100vw - 2rem);
  margin-left: auto;
  margin-right: auto;
  text-wrap: initial;
  font-size: clamp(3.25rem, 7.8vw, 7.75rem);
  line-height: 0.98;
}

.hero-v2 .hero25-headline em {
  font-style: italic;
}

.hv2-line {
  white-space: nowrap;
}

/* --- headline animation ---
   Default (no JS) is the finished state: "weeks" struck and dimmed,
   "24 hours." visible. JS adds .hv2-pre before first paint to wind it
   back, then .is-struck draws the line and .is-revealed brings in the
   replacement. */
.hv2-strike {
  position: relative;
  display: inline-block;
  color: rgba(255, 255, 255, 0.42);
  transition: color 0.5s ease 0.25s;
}

.hv2-strike::after {
  content: "";
  position: absolute;
  left: -0.03em;
  right: -0.03em;
  top: 53%;
  height: 0.055em;
  border-radius: 1px;
  background: #fff;
  transform-origin: left center;
  transform: scaleX(1);
}

.hv2-after {
  display: inline-block;
  opacity: 1;
  transform: none;
}

.hero-v2.hv2-pre .hv2-strike {
  color: #fff;
}

.hero-v2.hv2-pre .hv2-strike::after {
  transform: scaleX(0);
}

.hero-v2.hv2-pre .hv2-after {
  opacity: 0;
  transform: translateY(0.22em);
}

.hero-v2.hv2-pre.is-struck .hv2-strike {
  color: rgba(255, 255, 255, 0.42);
}

.hero-v2.hv2-pre.is-struck .hv2-strike::after {
  transform: scaleX(1);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

.hero-v2.hv2-pre.is-revealed .hv2-after {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hv2-strike,
  .hv2-strike::after,
  .hv2-after {
    transition: none !important;
  }
}

/* --- rotating role ---
   "senior" cycles through the roles we place, and the article follows
   it ("a" / "an"). Nothing animates its width: the headline is laid out
   in its final state straight away, then every piece that moved (the
   lead, the slot, "engineer", the second line, the copy below) is
   translated back to where it was and eased into place. Transforms only,
   so the browser never re-lays out the display type mid-animation. */
.hv2-lead,
.hv2-tail,
.hv2-line {
  display: inline-block;
}

.hv2-rotate,
.hv2-article {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  text-align: left;
}

.hv2-flip {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}

.hv2-word {
  display: inline-block;
  transition: opacity 0.4s ease 0.1s, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s;
}

.hv2-word.is-in {
  opacity: 0;
  transform: translateY(0.25em);
}

.hv2-word.is-out {
  position: absolute;
  left: 0;
  top: 0;
}

.hv2-word.is-gone {
  opacity: 0;
  transform: translateY(-0.25em);
  transition: opacity 0.28s ease, transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hv2-flip,
  .hv2-word {
    transition: none !important;
  }
}

.hero-v2 .hero25-sub {
  color: rgba(255, 255, 255, 0.86);
  max-width: 50ch;
}

/* Input on blue: frosted white, white type, white submit with blue arrow. */
.hero-v2 .hero25-form {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow: 0 0.75rem 1.875rem rgba(0, 20, 90, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.hero-v2 .hero25-form:focus-within {
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0.75rem 1.875rem rgba(0, 20, 90, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.hero-v2 .hero25-input {
  color: #fff;
}

.hero-v2 .hero25-input::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.hero-v2 .hero25-submit {
  background: #fff;
  color: #0047ff;
}

.hero-v2 .hero25-submit:hover {
  background: #e6edff;
}

.hv2-note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.74);
  text-align: center;
}

.hero-v2 .hero25-logos {
  padding-top: 2rem;
}

.hero-v2 .hero25-logos-label {
  color: rgba(255, 255, 255, 0.72);
  text-shadow: none;
}

.hero-v2 .hero25-marquee-track {
  color: rgba(255, 255, 255, 0.95);
}

@media screen and (max-width: 767px) {
  .hero25.hero-v2 {
    min-height: 100svh;
    padding: 5.5rem 1rem 2.5rem;
  }

  .hv2-line {
    white-space: normal;
  }
}

/* --- island nav on blue ---
   The live island is dark glass with a navy CTA, tuned for the sky. On
   #0047ff that reads as a leftover. Frosted white, white type. Never blue
   text: the hover glider and the CTA are solid blue pills with white
   labels, darker than the frosted bar so they read as pills. */
.hero-v2 .hero25-nav {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow: 0 0.5rem 1.875rem rgba(0, 20, 90, 0.26);
}

.hero-v2 .hero25-nav a,
.hero-v2 .hero25-nav button {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: none;
}

.hero-v2 .hero25-nav a:hover,
.hero-v2 .hero25-nav button:hover,
.hero-v2 .hero25-nav .is-active {
  color: #ffffff;
}

.hero-v2 .hero25-nav .hero25-nav-glider {
  background: #0047ff;
  box-shadow: 0 1px 3px rgba(0, 20, 90, 0.3);
}

.hero-v2 .hero25-nav:not(.has-glider) a:hover,
.hero-v2 .hero25-nav:not(.has-glider) button:hover,
.hero-v2 .hero25-nav:not(.has-glider) .is-active {
  background: #0047ff;
}

.hero-v2 .hero25-nav .hero25-nav-cta {
  background: #0047ff;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 20, 90, 0.3);
}

.hero-v2 .hero25-nav .hero25-nav-cta:hover {
  background: #0039cc;
  color: #ffffff;
}

/* Once the island leaves the blue hero it sits over pale sections, where
   white type on frosted white vanishes. v2.js adds .is-off-hero when the
   hero has scrolled out: the glass stays, the type goes dark. */
.hero-v2 .hero25-nav.is-off-hero {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(18, 32, 60, 0.12);
  box-shadow: 0 0.5rem 1.875rem rgba(18, 32, 60, 0.12);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.hero-v2 .hero25-nav.is-off-hero a,
.hero-v2 .hero25-nav.is-off-hero button {
  color: #080807;
}

.hero-v2 .hero25-nav.is-off-hero a:hover,
.hero-v2 .hero25-nav.is-off-hero button:hover,
.hero-v2 .hero25-nav.is-off-hero .is-active {
  color: #ffffff;
}

.hero-v2 .hero25-nav.is-off-hero .hero25-nav-cta {
  color: #ffffff;
}

/* iOS Safari zooms the page when an input under 16px gets focus. The
   fluid root makes 1rem about 15.6px on phones, so pin the input. */
.hero-v2 .hero25-input {
  font-size: max(16px, 1rem);
}

.hv2-note {
  text-wrap: balance;
}

/* Blue-on-blue selection would disappear on the hero; invert it. */
.hero-v2 ::selection {
  background: #fff;
  color: #0047ff;
}