/* ============================================================
   SECTIONS — per-section layout, in document order
   Depends on: tokens.css, base.css, components.css
   ============================================================ */

/* ============================================================
   S1 — HERO: full-bleed key visual, multi-plane parallax
   ============================================================ */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden}
.hero__plane{position:absolute;inset:-8% 0 0;z-index:0;will-change:transform}
.hero__plane img{width:100%;height:112%;object-fit:cover;object-position:center}
/* Dual light pool plus a vertical scrim, purely for text legibility. */
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(80% 66% at 22% 60%,rgba(255,106,61,.28),transparent 62%),
    radial-gradient(60% 50% at 88% 24%,rgba(43,127,224,.24),transparent 60%),
    linear-gradient(180deg,rgba(5,9,20,.92) 0%,rgba(5,9,20,.4) 42%,rgba(5,9,20,.96) 92%);
}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:var(--space-11)}
.hero__lockup{height:clamp(60px,8vw,110px);width:auto;object-fit:contain;margin-bottom:var(--space-6)}
.hero h1{
  font-size:var(--text-display-xl);font-weight:900;text-transform:uppercase;
  letter-spacing:var(--tracking-display);color:var(--ink-100);max-width:15ch;
  margin-block:var(--space-4) var(--space-5);
}
.hero h1 em{font-style:normal;color:var(--heat-500);display:block}
.hero__strip{
  display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center;
  border-top:1px solid var(--line-strong);padding-top:var(--space-4);
  margin-bottom:var(--space-7);max-width:56ch;
}
.hero__strip span{
  font-family:var(--font-mono);font-size:var(--text-micro);
  letter-spacing:.08em;text-transform:uppercase;color:var(--cool-200);
}
.hero__cue{
  display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-9);
  color:var(--ink-700);font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
}
.hero__cue span{
  display:block;width:1px;height:42px;
  background:linear-gradient(var(--heat-500),transparent);
  animation:cue 2.4s var(--ease-in-out) infinite;
}
@keyframes cue{0%,100%{transform:scaleY(.35);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ============================================================
   BAND — full-bleed ribbon scene break between chapters
   ============================================================ */
.band{position:relative;overflow:hidden;height:clamp(170px,24vw,320px)}
.band img{position:absolute;inset:0;width:100%;height:132%;object-fit:cover;will-change:transform}
.band::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 100% at 50% 50%,rgba(255,106,61,.16) 10%,rgba(5,9,20,.9)),
             linear-gradient(180deg,rgba(5,9,20,.78),transparent 42%,rgba(5,9,20,.78));
}
.band__label{
  position:absolute;inset:auto 0 var(--space-6);z-index:2;text-align:center;
  padding-inline:var(--container-padding);
  font-family:var(--font-display);font-weight:800;
  font-size:var(--text-display-s);text-transform:uppercase;
  letter-spacing:var(--tracking-label);color:var(--ember-300);
}

/* ============================================================
   S2 — ABOUT + past-event marquee
   ============================================================ */
.about{display:grid;gap:var(--space-8);grid-template-columns:1fr}
@media (min-width:900px){.about{grid-template-columns:6fr 6fr;gap:var(--space-10)}}
.about__quote{
  align-self:center;padding-left:var(--space-6);border-left:2px solid var(--heat-500);
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-display-m);line-height:var(--leading-title);
  text-transform:uppercase;letter-spacing:var(--tracking-display);
  color:var(--ink-100);text-wrap:balance;
}
.about__quote b{color:var(--heat-500);font-weight:inherit}

/* Infinite linear marquee. The track is duplicated in JS so the
   -50% translate loops seamlessly. Pauses on hover and focus. */
.marquee{
  margin-top:var(--space-9);overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex;gap:var(--grid-gap);width:max-content;
  animation:slide var(--duration-marquee) linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{animation-play-state:paused}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee .slot{width:clamp(210px,25vw,320px);aspect-ratio:16/10;flex:none}

/* ============================================================
   S3 — LEADERSHIP DIALOGUES: horizontal pin-scroll

   The tall .pinwrap supplies scroll travel; .pinstage sticks to the
   viewport; js/motion.js translates .pintrack on the X axis as the
   wrapper passes through. Below 900px, or under reduced motion, the
   whole mechanism collapses to a plain vertical stack.
   ============================================================ */
.pinwrap{position:relative}
.pinstage{position:relative;padding-block:var(--section-padding-y)}
.pinstage__head{margin-bottom:var(--space-6)}
.pintrack-wrap{padding-inline:var(--container-padding)}
.pintrack{display:grid;gap:var(--grid-gap);grid-template-columns:1fr}
.pinbar{display:none}

@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  /* five scenes: ~four viewports of travel */
  .pinwrap{height:420vh}
  .pinstage{
    position:sticky;top:0;height:100vh;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;gap:var(--space-7);
    padding-block:0;
  }
  .pintrack{display:flex;gap:var(--grid-gap);width:max-content;will-change:transform}
  .scene{width:min(44vw,540px);flex:none;min-height:clamp(300px,38vh,420px)}
  .pinbar{
    display:block;height:2px;background:var(--line);
    max-width:var(--container-max);margin-inline:auto;
    width:calc(100% - var(--container-padding) * 2);
  }
  .pinbar span{
    display:block;height:100%;width:100%;background:var(--heat-500);
    transform:scaleX(.02);transform-origin:left;
  }
}

/* ============================================================
   S4 — THE NEXT ZERO AWARDS
   ============================================================ */
.awards{position:relative;overflow:hidden}
.awards__tex{position:absolute;inset:0;z-index:0;opacity:.34}
.awards__tex img{width:100%;height:100%;object-fit:cover}
.awards::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(66% 86% at 72% 20%,rgba(255,106,61,.34),transparent 62%),
             linear-gradient(180deg,rgba(5,9,20,.92),rgba(5,9,20,.8));
}
.awards .container{position:relative;z-index:2}
.awards__grid{display:grid;gap:var(--space-8);align-items:end}
@media (min-width:900px){.awards__grid{grid-template-columns:7fr 5fr}}
.awards__title{color:var(--heat-500);margin-top:var(--space-3)}
.awards__sub{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-display-s);text-transform:uppercase;
  letter-spacing:var(--tracking-display);color:var(--ink-100);margin-top:var(--space-3);
}

/* ============================================================
   S5 — VOICES OF GSA
   ============================================================ */
.voices{display:grid;gap:var(--grid-gap);grid-template-columns:1fr}
@media (min-width:760px){.voices{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1120px){
  .voices{grid-template-columns:repeat(3,1fr)}
  .voices>:first-child{grid-column:span 2}
}

/* ============================================================
   S7 — ECOSYSTEM + SECTORS (sticky panel, scrolling register)
   ============================================================ */
.eco{display:grid;gap:var(--space-8);grid-template-columns:1fr}
@media (min-width:960px){.eco{grid-template-columns:5fr 7fr;gap:var(--space-8)}}
.eco__visual{align-self:start}
@media (min-width:960px){
  .eco__visual{position:sticky;top:calc(var(--nav-h) + var(--space-6))}
}
.eco__frame{
  position:relative;overflow:hidden;display:grid;place-items:center;aspect-ratio:1/1;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:var(--space-8);
}
.eco__frame::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(62% 62% at 50% 46%,rgba(255,106,61,.2),transparent 72%);
}
.eco__frame img{position:relative;width:min(58%,220px);height:auto;object-fit:contain}
.eco__meter{position:relative;margin-top:var(--space-5);display:grid;gap:var(--space-3)}
.eco__bar{height:2px;background:var(--line);overflow:hidden}
.eco__bar span{
  display:block;height:100%;width:100%;background:var(--heat-500);
  transform:scaleX(.14);transform-origin:left;
  transition:transform var(--duration-base) var(--ease-out);
}
.eco__label{
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-700);
}
.eco__label b{color:var(--heat-500);font-variant-numeric:tabular-nums}
.eco__list{border-top:1px solid var(--line-strong)}
.eco__item{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-4);align-items:center;
  padding-block:var(--space-5);border-bottom:1px solid var(--line);
  color:var(--ink-500);
  transition:color var(--duration-base) var(--ease-out);
}
.eco__item h3{
  font-size:var(--text-display-s);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tracking-display);color:inherit;
}
.eco__tick{
  width:8px;height:8px;background:var(--line-strong);flex:none;
  transition:background-color var(--duration-base) var(--ease-out),
             box-shadow var(--duration-base) var(--ease-out);
}
.eco__item.is-active{color:var(--ink-100)}
.eco__item.is-active .folio{color:var(--heat-500)}
.eco__item.is-active .eco__tick{background:var(--heat-500);box-shadow:0 0 16px rgba(255,106,61,.7)}

.sectors{margin-top:var(--space-9);padding-top:var(--space-7);border-top:1px solid var(--line)}

/* ============================================================
   S8 — KEY THEMES: deliberately uneven panel sizes
   ============================================================ */
.themes{display:grid;gap:var(--grid-gap);grid-template-columns:1fr}
@media (min-width:680px){
  .themes{grid-template-columns:repeat(6,1fr)}
  .theme{grid-column:span 2}
  .theme--lg{grid-column:span 4;min-height:clamp(200px,24vw,280px)}
  .theme--lg h3{font-size:var(--text-display-m);color:var(--heat-500)}
  .theme--lg::before{background:linear-gradient(0deg,rgba(255,106,61,.22),transparent 60%)}
  .theme--lg .theme__icon{color:var(--heat-400)}
  .theme--lg:hover{border-color:var(--heat-500);box-shadow:var(--glow-heat)}
  .theme--md{grid-column:span 3}
}

/* ============================================================
   S9 — WHY ATTEND
   ============================================================ */
.why{display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:820px){.why{grid-template-columns:repeat(2,1fr);column-gap:var(--space-10)}}
.why__row{
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);
  padding-block:var(--space-6);border-bottom:1px solid var(--line);
}
.why__row h3{
  font-size:var(--text-display-s);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tracking-display);color:var(--ink-100);
}
.why__n{
  font-family:var(--font-display);font-weight:900;font-size:var(--text-display-s);
  color:var(--heat-600);font-variant-numeric:tabular-nums;
}

/* ============================================================
   S10 — GSA AT A GLANCE
   ============================================================ */
.stats{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}

/* ============================================================
   S11 — CLOSING CTA
   ============================================================ */
.close{position:relative;overflow:hidden;text-align:center}
.close::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(66% 100% at 50% 100%,rgba(255,106,61,.34),transparent 62%);
}
.close .container{position:relative}
.close .label{justify-content:center}
.close__title{
  font-size:var(--text-display-xl);max-width:18ch;margin-inline:auto;
  color:var(--ink-100);margin-top:var(--space-4);
}
.close .btn-row{justify-content:center;margin-top:var(--space-7)}

/* ============================================================
   FOOTER — colophon and co-brand credit
   ============================================================ */
.foot{
  background:var(--void);padding-block:var(--space-9) var(--space-7);
  position:relative;z-index:1;border-top:1px solid var(--line);
}
.foot__grid{display:grid;gap:var(--space-7);align-items:start}
@media (min-width:820px){.foot__grid{grid-template-columns:1fr auto}}
.foot__emblem{height:clamp(48px,5.4vw,68px);width:auto;object-fit:contain}
.foot__line{margin-top:var(--space-4);font-size:var(--text-small);color:var(--ink-500);max-width:46ch}
.foot__credit{display:grid;gap:var(--space-4);justify-items:start}
@media (min-width:820px){.foot__credit{justify-items:end}}
.foot__credit img{width:clamp(170px,21vw,230px);height:auto;border-radius:var(--radius)}
.foot__spectrum{margin-top:var(--space-7)}
.foot__note{
  margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:.06em;color:var(--ink-700);
}