/* ═══════════════════════════════════════════════════════════════
   DIRIGO — the hero headline.

   One weight at one size in one colour is a heading, not a design. Here
   the line is broken into three registers that sit in the same breath:

     · solid ink        — the statement
     · outline only     — the same glyphs, drained, so the eye keeps moving
     · photographic     — the words about light, filled with light

   Each line rises out of its own mask on load and the two lines drift
   apart on scroll, so the block is never quite static.
   ═══════════════════════════════════════════════════════════════ */

.hl{
  display:grid;justify-items:center;gap:0;
  margin:0;text-align:center;
}
/* The mask is the parent; the line rises inside it. */
.hl-line{display:block;overflow:hidden;padding-block:.06em}
.hl-in{
  display:block;white-space:nowrap;
  font-weight:800;line-height:.94;letter-spacing:-.045em;
  transform:translateY(105%);
  will-change:transform;
}
.hl.lit .hl-in{
  transform:none;
  transition:transform 1.15s cubic-bezier(.16,1,.3,1);
}
.hl.lit .hl-line:nth-child(2) .hl-in{transition-delay:.13s}

.hl-a .hl-in{font-size:clamp(2.1rem,6.2vw,5.4rem)}
.hl-b .hl-in{font-size:clamp(2.4rem,7.3vw,6.5rem)}
/* A deliberate nudge off the centre line, so the two rows are not a stack. */
.hl-b{transform:translateX(clamp(-2.6rem,-2.4vw,-.6rem))}

.hl em{font-style:normal}

/* register 1 — solid */
.w-ink{color:var(--ink)}

/* register 2 — the glyph without its body */
.w-out{
  color:transparent;
  -webkit-text-stroke:clamp(1px,.11vw,2px) var(--ink);
  paint-order:stroke fill;
}

/* register 4 — flat brand blue
   #22b9ea sits at 2.3:1 on paper, under the 3:1 that even display text
   needs; --cyan-deep is the same family at 3.03:1. */
.w-cyan{color:var(--cyan-deep)}

/* register 3 — the words about light, filled with light */
.w-photo{
  background-image:url("../hero/headline-fill-w26.webp");
  background-size:cover;background-position:center 58%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* A hairline keeps the letters readable where the photo goes pale. */
  -webkit-text-stroke:.5px rgba(21,23,27,.28);
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .w-photo{color:var(--blue);-webkit-text-stroke:0}
}

/* ── the rotating word ───────────────────────────────────────────
   The second line names what gets produced, and that answer keeps
   changing. Two copies of the word ride one vertical move, so a turn is a
   single roll rather than a cross-fade. The slot is locked to the widest
   word before anything moves, or the whole line would reflow each time. */
.hl-slot{
  display:inline-block;position:relative;vertical-align:top;
  height:1.1em;overflow:hidden;
}
.hl-slot em{
  display:block;line-height:1.1;white-space:nowrap;
  transition:transform .66s cubic-bezier(.16,1,.3,1);
}
@media(prefers-reduced-motion:reduce){.hl-slot em{transition:none}}

@media(max-width:760px){
  /* Nowrap on a phone would overflow; let the registers wrap instead. */
  .hl-in{white-space:normal}
  .hl-b{transform:none}
  .w-out{-webkit-text-stroke-width:1px}
}

@media(prefers-reduced-motion:reduce){
  .hl-in{transform:none;transition:none}
  .hl-b{transform:none}
}