/* Campaign copy and strand exploration share a baseline, with independent
   space for the longest strand. ID scope supersedes legacy hero variants. */

/* Strand colour stays on the section; only the strand panel is ink. */
#hero.hero-section {
  background: var(--hero-bright);
}
#hero .hero-title-block,
#hero .hero-copy {
  background: transparent;
}

#hero .hero-title-block {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  /* Stretch: the black panel was align-self: start with height: auto, so it
     only ran as tall as its own content and stopped short of the copy
     column's height, leaving cream showing below it. Stretching the row lets
     the panel fill the full column height instead. */
  align-items: stretch;
  /* Tighter again: 26px still read as two things that belong together but
     were held apart. Down to a single hairline-adjacent gap. */
  gap: clamp(.5rem, 1vw, 1rem);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  min-height: 0;
}
#hero .hero-copy { min-width: 0; width: 100%; position: static; }

/* Restore the pre-presentation brand lockup: wordmark over a hanging
   two-line H1, strand mark beside “the Loop”. */
/* The headline sets the measure for everything under it. "Keep Humans in" is
   about 6.6x the title's own font-size wide, so expressing the measure in that
   em keeps the subtitle and the buttons ending on the headline's right edge as
   the clamped title scales. Retune the multiplier if the headline wording
   changes — it is tied to that string in Uncut Sans, not to anything generic. */
#hero .hero-copy {
  --hero-title-size: clamp(2.75rem, 5.4vw, 5.4rem);
  --hero-measure: min(calc(6.6 * var(--hero-title-size)), 100%);
}

#hero .hero-brand {
  display: grid;
  grid-template-columns: max-content auto;
  grid-template-rows: auto auto;
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  width: max-content;
  max-width: 100%;
  font-size: var(--hero-title-size);
}
#hero .hero-lockup {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: min(300px, 100%);
  height: auto;
  margin: 0 0 1.1rem auto;
}
#hero .hero-date {
  grid-column: 1;
  grid-row: 2;
  color: #FFFFFF;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .9;
  text-align: left;
  margin: 0;
}
#hero .hero-date__lines--mobile { display: none; }
#hero .hero-date__line { display: block; text-align: left; }
#hero .hero-date__line--loop { text-align: right; }
#hero .hero-brand__mark {
  grid-column: 2;
  grid-row: 2;
  display: block;
  align-self: center;
  width: 1.72em;
  height: 1.72em;
  background: var(--a27-ink, #231F20);
  -webkit-mask: var(--hero-mark) center / contain no-repeat;
  mask: var(--hero-mark) center / contain no-repeat;
}
#hero .hero-subtitle {
  /* Right-aligned, matching the headline above it. The box itself stays at
     the same left offset as the headline's max-content box — only the text
     inside it hugs the right edge. margin-left: auto would instead push the
     whole box out to the copy column's true right edge (580px here), past
     the headline's own right edge (429px), which misaligns the two rather
     than matching them. */
  text-align: right;
  margin: 1.5rem 0 0;
  max-width: var(--hero-measure);
  line-height: 1.35;
  font-size: var(--hero-body, clamp(1.12rem, 2vw, 1.45rem));
}
#hero .hero-subtitle strong { display: inline; margin: 0; font-weight: 700; }
/* Sized to their labels, not stretched. Two equal 1fr columns across a 42rem
   row padded both buttons to 336px whatever their text said, so "Get involved"
   sat in the same box as "Check your AI readiness". No gap, so they still read
   as one joined unit and the secondary keeps dropping its left border. */
#hero .hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  /* Aligned to the same left edge as the subtitle above. layout/hero.css
     centres this row, which was invisible while the buttons stretched across a
     grid; once they were sized to their labels the pair started sitting 88px
     in from the copy's edge while every other line began at 0, which read as
     the hero having three different alignments. */
  justify-content: flex-start;
  gap: 0;
  margin: 1rem 0 0;
  width: var(--hero-measure);
  max-width: 100%;
}
#hero .hero-cta__btn {
  /* Share the measure between them rather than each sizing to its own label,
     so the pair ends on the headline's edge instead of stopping short. */
  flex: 1 1 auto;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: .85rem 1rem;
  border: 1px solid var(--a27-ink);
  border-radius: 0;
  font-size: .82rem;
  justify-content: center;
}
#hero .hero-cta__btn--secondary { border-left-width: 0; }

#hero .hero-strand-feature {
  box-sizing: border-box;
  align-self: stretch;
  justify-self: stretch;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--a27-ink);
  color: var(--a27-cream);
  position: static;
  /* Now that the panel stretches to the copy column's height, its content —
     labels, icon+word, question — no longer fills the box on its own and sat
     top-heavy with dead space below. Centring it as a group as the box grows,
     rather than leaving it pinned to the top edge. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#hero .hero-strand-feature__themes { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: .4rem 1rem; margin: 0 0 2rem; max-width: none; }
#hero .hero-strand-feature__theme { color: var(--a27-cream); font-size: .7rem; letter-spacing: .06em; padding-block: .5rem; }
#hero .hero-strand-feature__theme.is-active { color: var(--hero-bright); border-color: currentColor; }
/* Row rather than column-reverse: icon and word sit on one line at every
   width instead of the icon stacking above the word above roughly 1050px. */
/* perspective restored: aiad27.css's .hero-strand-feature__stage carried
   perspective: 950px for the word's rotateX flip on strand change, but this
   ID-selector rule wins the cascade and didn't repeat it. Without perspective
   on an ancestor, rotateX has nothing to project into and the flip animation
   simply looked flat. */
#hero .hero-strand-feature__stage { display: flex; flex-direction: row; align-items: center; gap: 1.25rem; margin: 0; padding: 0; font-size: inherit; perspective: 950px; }
#hero .hero-strand-feature__mark { display: block; width: 6rem; height: 6rem; background: var(--hero-bright); }
#hero .hero-strand-feature__word { width: auto; font-size: clamp(2rem, 3.8vw, 3.5rem); letter-spacing: -.055em; line-height: 1.1; }
#hero .hero-strand-feature__summary { border-color: var(--a27-dim); margin: 1.25rem 0 0; padding: 1.25rem 0 0; font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.4; min-height: 5.2rem; }
@media (max-width: 1050px) {
  #hero .hero-title-block { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  #hero .hero-copy { --hero-title-size: clamp(2.4rem, 8vw, 4.2rem); }
  #hero .hero-strand-feature__stage { flex-direction: row; justify-content: space-between; align-items: center; gap: 1rem; }
  #hero .hero-strand-feature__word { font-size: clamp(2rem, 6vw, 3.5rem); }
  #hero .hero-strand-feature__mark { width: 4rem; height: 4rem; }
  #hero .hero-strand-feature__summary { min-height: 0; }
}
@media (max-width: 768px) {
  #hero .hero-brand {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    font-size: clamp(2.1rem, 10.5vw, 3.25rem);
    column-gap: 0;
  }
  #hero .hero-brand__mark { display: none; }
  /* Everything centred on mobile rather than the desktop's right-hung
     headline over a left-hung body. The right-alignment on the headline and
     the left axis shared by the subtitle/buttons/labels were both decisions
     made for a wide two-column hero; stacked full-width on a phone, a single
     centred column reads far more settled than either edge. */
  #hero .hero-brand { justify-items: center; }
  #hero .hero-lockup { width: min(260px, 100%); margin: 0 auto .85rem; }
  #hero .hero-date,
  #hero .hero-date__line,
  #hero .hero-date__line--loop { text-align: center; }
  /* One line instead of a different two-line split: two lines of the
     headline cost more vertical space than the phrase is worth at this
     width, so mobile gets the whole phrase on one line at a size small
     enough to fit it, rather than another way of breaking it in two. */
  #hero .hero-date__lines--desktop { display: none; }
  #hero .hero-date__lines--mobile { display: contents; }
  /* Measured against the actual rendered string in Uncut Sans Bold at -.045em
     tracking: the longest word "Keep Humans in the Loop" needs at most 31px
     to fit a 375px screen's column (343px) and 26px to fit 320px's (288px).
     7.4vw lands under both with room to spare — 27.75px and 23.7px — and
     clamps at 2rem so it never grows large enough to wrap on a wider phone. */
  #hero .hero-date__line--single {
    font-size: clamp(1.5rem, 7.4vw, 2rem);
    white-space: nowrap;
  }
  /* --hero-measure assumes the desktop headline, which is width: max-content
     and only as wide as its longest line. Here the headline switches to
     width: 100% instead — right-aligned inside the full column, not sized to
     its text — so the measure formula no longer describes where the headline
     actually ends. Without this the subtitle kept the desktop-derived measure
     (401px in a 699px column) while the headline filled the full 699px,
     wrapping "We are back for 2027..." onto a third line for no reason. */
  #hero .hero-subtitle { max-width: 100%; text-align: center; margin-inline: auto; }
  /* Side by side, not stacked: kept as one flex row rather than switching to
     a column, so the pair keeps a single accessible tap target per button
     without doubling the hero's vertical scroll length. Labels wrap onto a
     second line inside the narrower button rather than truncating. */
  #hero .hero-cta { width: 100%; }
  #hero .hero-cta__btn { font-size: .72rem; white-space: normal; line-height: 1.25; }
  #hero .hero-strand-feature__themes { justify-content: center; }
  #hero .hero-strand-feature__stage { justify-content: center; }
  #hero .hero-strand-feature__summary { text-align: center; }
}
@media (max-width: 470px) {
  /* Below 470px the subtitle wraps to 3-4 lines at the normal 17.92px size
     (measured: 3 lines at 455px, 4 at 320px) even though 480px and up hold at
     2 lines fine — the sentence just runs out of column width before the
     font shrinks. Probed the largest size that keeps it at 2 lines at both
     ends of this range (14.5px at 375px, 12px at 320px) and picked a clamp
     comfortably under both. Left untouched above this breakpoint so text
     everywhere else keeps its normal size. */
  #hero .hero-subtitle { font-size: clamp(.72rem, 3.6vw, .89rem); }
}
@media (max-width: 480px) {
  /* Was column-reverse, stacking the icon above the word and pulling both
     back to the left — it undid both the one-line layout and the centring
     set for mobile just above, since this query wins at the same width. Row
     plus centre keeps icon and word on one line, centred like the rest of
     the hero at this size. */
  #hero .hero-strand-feature__stage { flex-direction: row; justify-content: center; align-items: center; }
  #hero .hero-strand-feature__word { font-size: clamp(2rem, 8.2vw, 2.5rem); }
  /* The two CTA labels plus their padding need 306px and a 320px screen only
     has 288px to give them once the container's own gutters come out —
     18px short, so flex-wrap: wrap was dropping "Check your AI readiness"
     onto its own full-width row instead of staying beside "Get involved".
     Tighter padding recovers the 18px; nowrap stops it happening again. */
  #hero .hero-cta { flex-wrap: nowrap; }
  #hero .hero-cta__btn { padding-inline: .5rem; }
}