/* Hero headline typewriter — used by the homepage hero AND the agency page-hero.
   Active only when the h1 carries [data-rotate], so no other page is affected.

   SIZING NOTE — why 48px on the homepage:
   The hero sits in .container.grid-2 (1160px). The headline column is HALF of
   that = 544px. Measured fit at 544px against the longest headline
   ("A website that doesn't need you to be technical", 47 chars):
       64px -> 3 lines
       52px -> 3 lines (this one only)
       48px -> 2 lines  <-- largest size where ALL SIX fit in 2 lines
   Do not raise this without re-measuring; and do not lower it expecting fewer
   lines — below ~48px the text still wraps at 2, it just gets smaller.
   Theme default was clamp(2.7rem, 6vw + 1rem, 5.6rem) = 89.6px.

   .page-hero is full-width (not a half column), so it keeps the same font size
   but does not inherit the 2-line constraint. */

.hero h1[data-rotate],
.page-hero h1[data-rotate] {
  min-height: 2.15em;          /* reserve space so the hero doesn't jump as lines wrap */
  display: block;
  max-width: 100%;
}

.hero h1[data-rotate] {
  font-size: clamp(1.9rem, 2.6vw + 0.9rem, 3rem);   /* max 48px */
}

.page-hero h1[data-rotate] {
  font-size: clamp(2rem, 3vw + 1rem, 3.4rem);       /* max 54px — full width, room to breathe */
}

/* Caret — MUST be scoped to ::before only. A bare `.page-hero h1[data-rotate]`
   in this selector list would put a pink block before the whole heading. */
.hero h1[data-rotate]::before,
.page-hero h1[data-rotate]::before {
  content: "";
  display: inline-block;
  width: 0.5ch;
  height: 0.92em;
  margin-right: 0.06em;
  transform: translateY(0.06em);
  background: var(--pink, #cc2b5e);
  animation: sotg-caret 1.05s steps(1) infinite;
}

@keyframes sotg-caret {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Mobile: homepage column is 358px. 30px is the largest size where all six fit 2 lines. */
@media (max-width: 640px) {
  .hero h1[data-rotate] {
    font-size: clamp(1.5rem, 6.2vw, 1.875rem);   /* max 30px */
    min-height: 2.4em;
  }
  .page-hero h1[data-rotate] {
    font-size: clamp(1.7rem, 6.8vw, 2.2rem);
    min-height: 2.4em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1[data-rotate]::before,
  .page-hero h1[data-rotate]::before { animation: none; }
}