.hero {
  --hero-offset: 99px;
  /* The lamp's box, shared with the spotlight, which rests on the lamp's
     glass: centred, 37.5% of the way down (y 105 of the 280 viewBox). */
  --lamp-height: min(calc((100svh - var(--hero-offset)) * .68), 580px);
  --lamp-right: max(5vw, 32px);
  --lamp-top: calc(50% - var(--lamp-height) * .54);
  --spot-x: calc(100% - var(--lamp-right) - var(--lamp-height) * 5 / 14);
  --spot-y: calc(var(--lamp-top) + var(--lamp-height) * .375);
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: calc(100vh - var(--hero-offset));
  min-height: calc(100svh - var(--hero-offset));
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  background:
    radial-gradient(110% 85% at 80% 40%, #2c312f, transparent 62%),
    var(--stage);
  color: var(--paper);
}

.hero-lamp {
  position: absolute;
  top: var(--lamp-top);
  right: var(--lamp-right);
  height: var(--lamp-height);
  aspect-ratio: 200 / 280;
}

/* The lamp's light, centred on the glass. */
.hero-lamp::before {
  content: "";
  position: absolute;
  top: 37.5%;
  left: 50%;
  width: 230%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(253 178 1 / 32%), rgb(253 178 1 / 9%) 45%, transparent);
  translate: -50% -50%;
}

.hero-lamp svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

/* The logo's tilted amber bulb: its outline draws itself, then it fills
   with light. Both base bars are yellow. */
.hero-lamp-glass {
  --lamp-off: rgb(255 255 255 / 28%);
  --lamp-on: var(--amber);
  fill: var(--amber);
  fill-rule: evenodd;
  stroke: var(--lamp-on);
  /* Thin enough not to close the slit between the rim and the glass. */
  stroke-width: 1.2;
  stroke-dasharray: 1;
  filter: drop-shadow(0 0 18px rgb(253 178 1 / 45%));
}

/* The bars glow with the bulb: they flicker on with it, then breathe. */
.hero-lamp-base,
.hero-lamp-cap {
  fill: var(--bulb-base);
  filter: drop-shadow(0 0 6px rgb(252 204 12 / 75%));
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 7vw, 104px) max(6vw, 36px);
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(20px, 2.6vw, 34px);
  color: rgb(255 255 255 / 72%);
  font-size: clamp(.82rem, 1.1vw, 1rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--yellow);
}

.hero h1 {
  display: flex;
  flex-direction: column;
  gap: .02em;
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 7.6vw, 9.5rem);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.hero-title-line {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: .2em;
  white-space: nowrap;
}

/* Resting state is "lit"; the entrance plays each word in as an unlit
   outline and flickers it on (see hero-word-power). */
.hero-word {
  --hero-word-color: var(--paper);
  --hero-word-glow: 0 0 .4em rgb(252 204 12 / 18%);
  flex: 0 0 auto;
  display: inline-block;
  color: var(--hero-word-color);
  -webkit-text-stroke-width: max(1px, .012em);
  -webkit-text-stroke-color: transparent;
  text-shadow: var(--hero-word-glow);
}

.hero-word--idea {
  --hero-word-color: var(--yellow);
  --hero-word-glow: 0 0 .25em rgb(252 204 12 / 45%), 0 0 .9em rgb(252 204 12 / 30%);
}

.hero-copy {
  max-width: 44ch;
  margin: clamp(24px, 3vw, 40px) 0 0;
  color: rgb(255 255 255 / 72%);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 3.4vw, 44px);
}

/* Same seamless loop as the client logos: the list is cloned in JS and both
   copies slide by their own width. */
.hero-ticker {
  display: flex;
  overflow: hidden;
  background: var(--yellow);
  color: var(--primary);
}

.hero-ticker-track {
  display: flex;
  min-width: 100%;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-ticker.is-looping .hero-ticker-track {
  animation: hero-ticker 36s linear infinite;
}

.hero-ticker-track li {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
  padding: 16px clamp(20px, 2.4vw, 36px) 14px 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A four-point spark between services. */
.hero-ticker-track li::after {
  content: "";
  width: .6em;
  aspect-ratio: 1;
  background: currentColor;
  clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%);
}

@keyframes hero-ticker {
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

/* Hero entrance: the title rises in as unlit outlines while the lamp draws
   itself, then the lamp flickers on (~1.4s) and the words switch on after it,
   "Ideas." last, in yellow, glowing on afterwards. */
.hero.is-entering .hero-eyebrow,
.hero.is-entering .hero-copy,
.hero.is-entering .hero-actions,
.hero.is-entering .hero-ticker {
  animation: hero-enter 1000ms cubic-bezier(.22, 1, .36, 1) both;
}

.hero.is-entering .hero-eyebrow { animation-delay: 0ms; }

.hero.is-entering .hero-copy { animation-delay: 760ms; }

.hero.is-entering .hero-actions { animation-delay: 880ms; }

.hero.is-entering .hero-ticker { animation-delay: 1000ms; }

.hero.is-entering .hero-lamp-base {
  animation:
    hero-enter 1000ms cubic-bezier(.22, 1, .36, 1) 700ms both,
    hero-bar-power 700ms step-end 1400ms both,
    hero-bar-glow 3200ms ease-in-out 2400ms infinite alternate;
}

.hero.is-entering .hero-lamp-cap {
  animation:
    hero-enter 1000ms cubic-bezier(.22, 1, .36, 1) 820ms both,
    hero-bar-power 700ms step-end 1480ms both,
    hero-bar-glow 3200ms ease-in-out 2600ms infinite alternate;
}

.hero.is-entering .hero-word {
  animation:
    hero-word-rise 900ms var(--ease-out) calc(120ms + var(--item) * 90ms) both,
    hero-word-power 700ms step-end calc(1500ms + var(--item) * 110ms) both;
}

.hero.is-entering .hero-word--idea {
  animation:
    hero-word-rise 900ms var(--ease-out) calc(120ms + var(--item) * 90ms) both,
    hero-word-power 700ms step-end calc(1500ms + var(--item) * 110ms) both,
    hero-idea-glow 2400ms ease-in-out 2800ms infinite alternate;
}

.hero.is-entering .hero-lamp-glass {
  animation:
    hero-lamp-draw 1300ms cubic-bezier(.65, 0, .35, 1) 200ms both,
    hero-lamp-power 700ms step-end 1400ms both,
    hero-lamp-fill 700ms step-end 1400ms both;
}

.hero.is-entering .hero-lamp::before {
  animation:
    hero-glow-power 700ms step-end 1400ms both,
    hero-glow-breathe 3200ms ease-in-out 2400ms infinite alternate;
}

.hero.is-entering .stage-spot {
  animation: hero-fade 1200ms ease 1800ms both;
}

@keyframes hero-word-rise {
  from {
    opacity: 0;
    transform: translateY(.45em);
  }
}

/* With step-end each keyframe holds until the next, so the light snaps
   off/on like a bulb catching rather than fading. */
@keyframes hero-word-power {
  0%, 14%, 28% {
    color: transparent;
    -webkit-text-stroke-color: rgb(255 255 255 / 45%);
    text-shadow: none;
  }

  8%, 22%, 40%, 100% {
    color: var(--hero-word-color);
    -webkit-text-stroke-color: transparent;
    text-shadow: var(--hero-word-glow);
  }
}

@keyframes hero-idea-glow {
  from {
    text-shadow: var(--hero-word-glow);
  }

  to {
    text-shadow: 0 0 .2em rgb(252 204 12 / 28%), 0 0 .6em rgb(252 204 12 / 14%);
  }
}

@keyframes hero-lamp-draw {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes hero-lamp-power {
  0%, 14%, 28% { stroke: var(--lamp-off); }
  8%, 22%, 40%, 100% { stroke: var(--lamp-on); }
}

@keyframes hero-lamp-fill {
  0%, 14%, 28% { fill-opacity: 0; }
  8%, 22% { fill-opacity: .5; }
  40%, 100% { fill-opacity: 1; }
}

@keyframes hero-glow-power {
  0%, 14%, 28% { opacity: 0; }
  8%, 22% { opacity: .55; }
  40%, 100% { opacity: 1; }
}

@keyframes hero-glow-breathe {
  to {
    opacity: .7;
    scale: .92;
  }
}

/* The bars catch with the bulb (step-end: snapping on, not fading)... */
@keyframes hero-bar-power {
  0%, 14%, 28% {
    fill: rgb(255 255 255 / 22%);
    filter: none;
  }

  8%, 22%, 40%, 100% {
    fill: var(--bulb-base);
    filter: drop-shadow(0 0 6px rgb(252 204 12 / 75%));
  }
}

/* ...then their glow breathes with the bulb's light. */
@keyframes hero-bar-glow {
  to {
    filter: drop-shadow(0 0 2px rgb(252 204 12 / 35%));
  }
}

@keyframes hero-fade {
  from {
    opacity: 0;
  }
}

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1024px) {
  /* The lamp lifts into the space above the text, which settles lower. */
  .hero {
    --hero-offset: 149px;
    --lamp-height: min(46vw, 420px);
    --lamp-top: 32px;
  }

  .hero-lamp {
    opacity: .75;
  }

  /* .hero-content {
    justify-content: flex-start;
  } */

  .hero h1 {
    font-size: 9.6vw;
  }
}

@media (max-width: 680px) {
  /* The lamp stands large behind the title, dimmed so the text stays readable. */
  .hero {
    --hero-offset: 124px;
    --lamp-height: 100vw;
    --lamp-right: 15vw;
    --lamp-top: 30px;
  }

  .hero-content {
    padding: 48px 24px 44px;
  }

  /* The bulb is solid yellow, so it stays faint behind the text here. */
  .hero-lamp {
    opacity: .2;
  }

  .hero-eyebrow {
    font-size: .74rem;
    letter-spacing: .1em;
  }

  /* The small text sits over the lamp: brighter, with a soft dark edge. */
  .hero-eyebrow,
  .hero-copy {
    color: rgb(255 255 255 / 88%);
    text-shadow: 0 1px 8px rgb(24 27 26 / 90%);
  }

  .hero h1 {
    font-size: 12.4vw;
  }

  .hero-title-line {
    flex-wrap: wrap;
  }

  .hero-ticker-track li {
    padding-block: 13px 11px;
    font-size: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ticker {
    display: block;
  }

  .hero-ticker .hero-ticker-track {
    flex-wrap: wrap;
    justify-content: center;
    padding-inline: max(6vw, 24px);
    animation: none !important;
  }

  .hero-ticker-track li:last-child::after {
    display: none;
  }

  .hero-ticker-track[aria-hidden="true"] {
    display: none;
  }
}