/* ===================================================================
   Solutions · Entertainment — page-specific layer.
   Loads AFTER base.css (tokens, reset, primitives, buttons, nav, footer).
   Shares the Solutions design system with solutions-sports.css: dark
   default, .section-light blocks flip to cream + field green via base.css's
   token swap, and .hl follows --accent (electric green on dark, field green
   on light). Beats 1–5 carry designed art (WebP, alpha) in their .s-art slots;
   beat 6 is still CSS/markup and real art can drop into the same slot.
   =================================================================== */

.hl { color: var(--accent); }

/* Shared section primitives ----------------------------------------- */
.s-block { padding: 14vh 0; position: relative; }
.s-block-inner { max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px); }

.s-split {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.05fr);
  gap: 6vw;
  align-items: center;
}
/* reverse column order: visual on the left, copy on the right */
.s-split-rl .s-art { order: -1; }

.s-stack-center { display: flex; flex-direction: column; align-items: center; gap: 7vh; }

/* band-flow — the content bands, in normal document flow.

   This was a "paper-stack": every band pinned with position:sticky at exactly
   100vh, sliding over the previous one, with a scroll-snap in the page JS
   settling between them.

   It was removed because of what 100vh cost. Measured on the Sports page,
   which carried the same construct, content filled 58-72% of each pinned band
   — about two screens of the page empty by construction. The height could not
   simply be reduced: the snap math was one viewport per paper, so a shorter
   band pushed every later pin point out of position. Pinning and the empty
   space were the same decision.

   Worse for the reader, a band that is exactly the viewport can never show
   what is coming. Bands in flow end above the fold and the next one peeks,
   which is what actually pulls someone down a long page.

   What did NOT go with it: the reveal-on-scroll, the word-stagger headlines,
   the IQ tag stagger. That was always the motion here; the pinning was
   scaffolding around it.

   Several rules elsewhere in this file existed only to squeeze a band into
   one viewport — height caps on the IQ and Engage art, tightened IQ card
   padding. Those are gone too: in flow the art can run at its natural size,
   which fills the band with content instead of leaving a void around it. If
   you are tempted to reintroduce a fixed height, that is the trade you are
   making. */
.band-flow > .s-block { padding-block: 8vh; }

.s-art-img, .s-hero-art-img { display: block; width: 100%; height: auto; }

.eyebrow { display: block; margin-bottom: 26px; }

.s-headline {
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.02;
  max-width: 22ch;
  margin-bottom: 22px;
}
.s-copy-center .s-headline { max-width: 24ch; margin-left: auto; margin-right: auto; }

.s-body {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--dim);
  max-width: 52ch;
}
.s-copy-center { text-align: center; }
.s-body-center { margin-left: auto; margin-right: auto; max-width: 64ch; }

/* CTA inside a beat's copy column — only the Connect beat has one (Access by
   Getty Images). Spacing only; the button itself is base.css's .btn, which
   already flips to field green inside .section-light. */
.s-copy-cta { margin-top: 28px; }

/* ===================================================================
   HERO
   =================================================================== */
.s-hero {
  position: relative;
  background: #000;
  padding: 22vh 0 0;
  overflow: hidden;
  border-bottom: 1px solid var(--hair);
  isolation: isolate;
}
.s-hero-grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(ellipse at 30% 30%, black 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, black 0%, transparent 72%);
}
.s-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px);
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(320px, 1fr);
  gap: 4vw;
  align-items: center;
  padding-bottom: 10vh;
}
/* Hero art column — holds the designed entertainment composition (transparent
   PNG → WebP, sits on the black signal-grid canvas). */
.s-hero-art { position: relative; display: flex; align-items: center; justify-content: center; }

.breadcrumb {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--dim);
  margin-bottom: 30px;
}
.breadcrumb a { color: var(--dim); transition: color .2s var(--ease); }
.breadcrumb a:hover { color: var(--text); }
.crumb-sep { color: var(--dim-2); }

.s-hero-headline { margin-bottom: 30px; }
.s-hero-lead {
  display: block;
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1.04;
  color: var(--text);
}
/* "Entertainment" is a long single word sharing the row with the art column —
   dial the clamp back so it never overflows the copy column on any viewport. */
.s-hero-sport {
  display: block;
  font-size: clamp(36px, 5.6vw, 84px);
  line-height: .9;
  margin-top: .06em;
}
.s-hero-sub {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.5;
  color: var(--dim);
  max-width: 46ch;
  margin-bottom: 30px;
}

.aud-line {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 18px;
  margin-bottom: 38px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dim);
}
.aud-line li { display: inline-flex; align-items: center; }
.aud-line li:not(:last-child)::after {
  content: "·"; margin-left: 18px; color: var(--accent);
}

.s-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Customer strip */
.customer-strip {
  position: relative; z-index: 2;
  margin: 0 max(5vw, calc((100vw - var(--max)) / 2 + 72px));
  border-top: 1px solid var(--hair);
  padding: 30px 0 40px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 32px;
}
.customer-marks {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 28px;
}
.customer-marks li {
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: clamp(15px, 1.5vw, 20px); letter-spacing: .03em;
  color: var(--text); opacity: .55;
  transition: opacity .2s var(--ease), color .2s var(--ease);
}
.customer-marks li:hover { opacity: 1; color: var(--accent); }

/* ---- Hero entrance: each line wipes in left→right, staggered top→bottom;
   words fade-rise on top. Auto-plays on load; disabled under reduced motion. */
.s-hero-lead .hl-line { display: block; }

/* The settled state uses a NEGATIVE inset so it leaves room for glyph
   overshoot: the display faces' ink box is taller than their line box, so a
   settled `inset(0 0 0 0)` shaves the curve off the bottom of the big hero
   word (the flat-bottomed "S"). Only the right edge animates — the wipe.
   clip-path can't transition to `none`; `em` scales with the clamped sizes. */
@keyframes heroTextIn {
  from { clip-path: inset(-0.4em 100% -0.4em -0.4em); transform: translateX(-18px); }
  to   { clip-path: inset(-0.4em);                    transform: translateX(0); }
}
@keyframes heroWordRise {
  from { opacity: 0; transform: translateY(0.5em); }
  to   { opacity: 1; transform: none; }
}
.s-hero-lead .hw, .s-hero-sport .hw {
  display: inline-block;
  animation: heroWordRise .6s cubic-bezier(.16,1,.3,1) both;
}
.s-hero-lead .hl-line:nth-child(1) .hw { animation-delay: calc(.30s + var(--i) * 70ms); }
.s-hero-lead .hl-line:nth-child(2) .hw { animation-delay: calc(.42s + var(--i) * 70ms); }
.s-hero-sport .hw                       { animation-delay: calc(.56s + var(--i) * 60ms); }

@keyframes heroPrintReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes heroPrintBar {
  0%   { left: 0;    opacity: 0; }
  10%  { opacity: .55; }
  90%  { opacity: .55; }
  100% { left: 100%; opacity: 0; }
}

.s-hero-copy .breadcrumb,
.s-hero-lead .hl-line,
.s-hero-sport,
.s-hero-sub,
.aud-line,
.s-hero-ctas {
  animation: heroTextIn .7s cubic-bezier(.16,1,.3,1) both;
}
.s-hero-copy .breadcrumb            { animation-delay: .15s; }
.s-hero-lead .hl-line:nth-child(1)  { animation-delay: .30s; }
.s-hero-lead .hl-line:nth-child(2)  { animation-delay: .42s; }
.s-hero-sport                       { animation-delay: .56s; animation-duration: .85s; }
.s-hero-sub                         { animation-delay: .85s; }
.aud-line                           { animation-delay: .98s; }
.s-hero-ctas                        { animation-delay: 1.12s; }

/* Hero art prints in left→right behind a glowing print-head line that tracks
   the leading edge — the same entrance solutions-sports.css uses, so the two
   vertical heroes read as one system. */
.s-hero-art-img {
  animation: heroPrintReveal 1.5s cubic-bezier(.45,0,.12,1) .5s both;
}
.s-hero-art::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 1px;
  background: var(--accent);
  box-shadow: 0 0 7px 0 rgba(182,245,0,.35);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  animation: heroPrintBar 1.5s cubic-bezier(.45,0,.12,1) .5s both;
}

@media (prefers-reduced-motion: reduce) {
  .s-hero-copy .breadcrumb,
  .s-hero-lead .hl-line,
  .s-hero-sport,
  .s-hero-sub,
  .aud-line,
  .s-hero-ctas,
  .s-hero-art-img { animation: none; }
  .s-hero-lead .hw, .s-hero-sport .hw { animation: none; }
  .s-hero-art::after { display: none; }
}

/* ===================================================================
   BEAT 3 — ENGAGE artwork (fan capture in / campaign-ready content out)
   =================================================================== */
.fan-stage { display: flex; justify-content: center; }
.fan-img { max-width: min(100%, 720px); }

#fans .s-headline { max-width: 40ch; }
#fans .s-body { max-width: 92ch; }

/* ===================================================================
   BEAT 4 — IQ SUITE: framed asset + resolving tags, definition cards
   =================================================================== */
.iq-head {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-bottom: 40px;
}
.iq-eyebrow { margin-bottom: 0; display: inline-flex; align-items: center; gap: 12px; }
.iq-eyebrow::before {
  content: ""; width: 9px; height: 9px; background: var(--accent); flex: 0 0 auto;
}
.iq-headline { max-width: 34ch; margin-bottom: 56px; }

.iq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: start; }
.iq-asset { display: flex; align-items: flex-start; justify-content: center; }

/* The designed asset carries the resolved talent / brand / sponsor tags, so it
   replaces the old CSS frame. Capped by width in the column; it used to be
   capped by HEIGHT on top of that, to stop the row driving the band past a
   single viewport back when bands were pinned to one. In flow it runs at its
   natural size. */
.iq-asset .s-art-img { max-width: 100%; }

.iq-detail { display: flex; flex-direction: column; }
.iq-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair); border-left: 1px solid var(--hair);
}
.iq-card {
  border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  padding: 24px 26px;
}
.iq-card h3 {
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: 20px; letter-spacing: .01em; color: var(--text); margin-bottom: 12px;
}
.iq-card p {
  font-family: var(--body); font-weight: 400;
  font-size: 14px; line-height: 1.5; color: var(--dim);
}
.reveal .iq-card {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.reveal.is-in .iq-card { opacity: 1; transform: none; }
.reveal.is-in .iq-card:nth-child(1) { transition-delay: .20s; }
.reveal.is-in .iq-card:nth-child(2) { transition-delay: .32s; }
.reveal.is-in .iq-card:nth-child(3) { transition-delay: .44s; }
.iq-body { margin-top: 28px; max-width: none; }


/* ===================================================================
   BAND FIT — no band may fill the viewport
   ===================================================================
   In flow, a band taller than the screen shows nothing of the next one, and
   the peek is the whole point of unpinning. Two shapes push past it: the IQ
   row, whose artwork is the tallest on the page, and the fans band,
   which stacks its copy ABOVE its art instead of beside it.

   Measured at 1440x813 before these rules, fans ran 831px and iq 814px, both past the 813px screen.

   These caps are viewport-relative, NOT fixed pixels. That distinction is the
   whole lesson of the pinned layout that used to live here: it capped art to
   fit a 100vh box, so the art was hostage to a height the content never
   chose. A vh cap just keeps the band proportional to whatever screen it
   lands on — at a taller window the art grows with it.

   34vh is not a guess: it is the value solutions-sports.css uses, and it is
   what brings this page's tallest band to 646px — the same as the tallest
   band on Sports. The four Solutions pages are meant to scroll alike.

   One caveat specific to this page: IQ's peek floors around 123px however far
   you drop the cap. Below 44vh the art is no longer what sets the band's
   height — the definition cards and body copy in .iq-detail are. Tightening
   the cap past this point shrinks the artwork for nothing. */
.band-flow #iq .iq-asset .s-art-img { width: auto; max-height: 44vh; }

/* IQ on this page is bound by its TEXT column, not its artwork: the three
   definition cards plus the body run 365px against the art's 358px, so the
   detail column is what sets the grid row. Capping the art further is wasted
   — measured, it buys 2px. These two margins are what actually move it,
   taking the band from 690px to 656px, in line with the 646px tallest band
   on Sports and the other Solutions pages.

   A smaller trim than the pinned layout used to make: that also cut card
   padding and h3 margins to force the band under 100vh. Only the two margins
   that pay for themselves are kept. */
.band-flow #iq .iq-headline { margin-bottom: 30px; }
.band-flow #iq .iq-body     { margin-top: 18px; }
#fans .s-stack-center { gap: 5vh; }
.band-flow #fans .fan-img { width: auto; max-height: 34vh; margin: 0 auto; }
/* ===================================================================
   SILO STAGE — full black, generous negative space, never explained
   =================================================================== */
.silo {
  position: relative; background: #000; color: #fff;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.silo-track { height: auto; }
.silo-stage {
  position: relative;
  min-height: 78vh;
  overflow: hidden;
  isolation: isolate;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: 8vh 5vw;
  gap: 5vh;
}
.silo-stage::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 56% 60% at 50% 50%, rgba(182,245,0,.10), transparent 70%);
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.silo.is-in .silo-stage::before { opacity: 1; transition-delay: .55s; }

.silo-hex {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, transparent 26%, #000 88%);
          mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, transparent 26%, #000 88%);
}
.silo-line {
  position: relative; z-index: 1;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: .98;
  font-size: clamp(34px, 5.4vw, 82px);
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .7s var(--ease-out);
}
.silo-line:nth-of-type(1) { transform: translateX(-60vw); }
.silo-line:nth-of-type(2) { transform: translateX(60vw); }
.silo.is-in .silo-line { transform: none; opacity: 1; }

.silo-line .hl { color: var(--accent); }
@keyframes siloIgnite {
  0%   { text-shadow: 0 0 0 rgba(182,245,0,0); }
  45%  { text-shadow: 0 0 46px rgba(182,245,0,.95), 0 0 16px rgba(182,245,0,.85); }
  100% { text-shadow: 0 0 20px rgba(182,245,0,.42); }
}
.silo.is-in .hl { animation: siloIgnite 1.1s var(--ease) both; animation-delay: .8s; }
.silo-quote { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .silo-line { opacity: 1; transform: none; transition: none; }
  .silo-line .hl { color: #B6F500; animation: none; text-shadow: 0 0 20px rgba(182,245,0,.42); }
  .silo-stage::before { opacity: 1; transition: none; }
  .silo-track { height: auto; }
  .silo-stage { position: static; height: auto; min-height: 60vh; }
}

/* ===================================================================
   CLOSE
   =================================================================== */
.s-close {
  background: #000; padding: 18vh 0; text-align: center;
  border-top: 1px solid var(--hair);
}
.s-close-inner { max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px); }
.close-stack {
  font-family: 'Oswald', sans-serif; font-weight: 500;
  text-transform: uppercase; letter-spacing: -0.015em; line-height: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.close-line {
  font-size: clamp(40px, 6.6vw, 104px);
  color: #fff;
  opacity: 0; transform: translateY(30px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.close-line.is-shown { opacity: 1; transform: none; }
.close-line.final { margin-top: 28px; }
.close-line.final .hl { color: #B6F500; }

.close-typing-line { color: #fff; }
.typewriter { display: inline-block; white-space: nowrap; }
.typewriter-word { color: #fff; font-variant-ligatures: none; }
.typewriter-caret {
  display: inline-block;
  width: .055em; height: .82em;
  margin-left: .06em; vertical-align: -0.06em;
  background: #B6F500;
  animation: typewriter-blink 1.05s steps(2, end) infinite;
}
@keyframes typewriter-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .close-line { transition: none; }
  .typewriter-caret { animation: none; opacity: .6; }
}
.s-close-ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 48px; }
.signature { margin-top: 44px; color: var(--dim-2); font-size: 11px; letter-spacing: .24em; }

/* ===================================================================
   SCROLL REVEAL
   =================================================================== */
/* The fade-up is on the INNER wrapper, never on the section.

   It used to sit on .reveal itself, which meant an unrevealed section was
   fully transparent — background included. That was invisible while every
   band was pinned at 100vh, because you never saw a band before you were
   inside it. In flow it broke the thing flow is for: the band peeking at the
   bottom of the screen was still at opacity 0, so instead of the next
   section's colour arriving you saw the dark body background through it. A
   cream band read as a black gap.

   Fading .s-block-inner instead keeps the section's own background painted at
   all times. The peek shows the real colour of what is coming, and the
   content animates in on top of it as you scroll. Everything keyed off
   .reveal.is-in (the IQ cards, the combo headlines) is unaffected — the class
   still lands on the section. */
.reveal > .s-block-inner {
  opacity: 0; transform: translateY(40px);
  transition: opacity .8s var(--ease-out), transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal.is-in > .s-block-inner { opacity: 1; transform: none; }

.reveal .s-art {
  opacity: 0;
  clip-path: inset(-80px 100% -80px -80px);
  transform: scale(1.07);
  transition: opacity .8s var(--ease-out) .2s,
              clip-path 1.1s cubic-bezier(.16,1,.3,1) .2s,
              transform 1.1s cubic-bezier(.16,1,.3,1) .2s;
}
.reveal.is-in .s-art { opacity: 1; clip-path: inset(-80px); transform: none; }

/* Scroll-in headline / body — "combo": wipe left→right while words fade-rise. */
/* Negative inset on the three non-animating edges, as in `heroTextIn` above —
   a settled `inset(0 0 0 0)` shaves the ink of the section headlines. */
[data-anim="combo"] {
  clip-path: inset(-0.4em 100% -0.4em -0.4em);
  transition: clip-path .85s cubic-bezier(.16,1,.3,1);
}
.reveal.is-in [data-anim="combo"] { clip-path: inset(-0.4em); }
[data-anim="combo"] .w {
  display: inline-block;
  opacity: 0; transform: translateY(1em);
  transition: opacity .6s var(--ease-out), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i) * 70ms);
  will-change: transform, opacity;
}
.reveal.is-in [data-anim="combo"] .w { opacity: 1; transform: none; }
.s-body[data-anim="combo"] { transition-delay: .18s; }
.s-body[data-anim="combo"] .w {
  transform: translateY(0.5em);
  transition-delay: calc(.22s + var(--i) * 10ms);
}

@media (prefers-reduced-motion: reduce) {
  .reveal > .s-block-inner { opacity: 1; transform: none; transition: none; }
  .reveal .s-art { opacity: 1; clip-path: none; transform: none; transition: none; }
  .reveal .iq-card { opacity: 1; transform: none; transition: none; }
  [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-anim] .w { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1024px) {
  .s-split { gap: 5vw; }
}

@media (max-width: 900px) {
  .s-hero { padding-top: 18vh; }
  .s-hero-inner { grid-template-columns: 1fr; gap: 7vh; }
  .s-hero-art-img { max-width: 520px; margin: 0 auto; }
  .s-split, .s-split-rl { grid-template-columns: 1fr; gap: 48px; }
  .s-split .s-art, .s-split-rl .s-art { order: -1; }   /* visuals lead when stacked */
  .s-split .s-copy { order: 1; }
  .iq-grid { grid-template-columns: 1fr; gap: 40px; }
  .iq-headline { max-width: 24ch; }
  .iq-asset { order: -1; }
  /* Grid/flex items default to min-width:auto and won't shrink below content —
     let every stacked column shrink so nothing overflows the viewport. */
  .iq-asset, .iq-detail, .iq-card,
  .s-copy, .s-art, .s-hero-copy, .s-hero-art { min-width: 0; }
  .s-art-img { max-width: 100%; }
}

@media (max-width: 600px) {
  .s-block { padding: 11vh 0; }
  .iq-cards { grid-template-columns: 1fr; }
  .iq-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .silo-track { height: auto; }
  .silo-stage { position: static; height: auto; min-height: 84vh; gap: 11vh; }
  .silo-line { white-space: normal; }
  .silo-line:nth-of-type(1), .silo-line:nth-of-type(2) { transform: none; }
}

/* ===================================================================
   RECEIPTS — the component is css/receipts.css, shared with the other
   three Solutions pages. Only this page's delta lives here.
   =================================================================== */
  .receipts-head { margin-bottom: 7vh; }
  .receipts-head .s-headline { max-width: 26ch; }