@font-face{font-family:"Deck Sans";src:url("../font/poppins-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Deck Sans";src:url("../font/poppins-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Deck Sans";src:url("../font/poppins-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}

/* ============================================================
   25 JUMP STREET — SEASON 2026
   Interactive presentation. Design system built to the
   25JS Graphic Guidelines (Oct 2024).
   ============================================================ */

:root{
  /* Primary palette (logo) */
  --red:#F44725;
  --yellow:#FFFF7D;
  --white:#FFFFFF;
  /* Background palette */
  --beige:#FFC59D;
  --blue:#050076;
  --sky:#689DD9;
  /* Working tints */
  --blue-deep:#03004A;
  --blue-lift:#1A168F;
  --ink:#0B0630;

  --stage-w:1920px;
  --stage-h:1080px;

  --pad-x:132px;
  --pad-y:96px;

  --font:"fractul-variable","Fractul Variable","Fractul","Deck Sans","Poppins",
         -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --ease:cubic-bezier(.19,1,.22,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:#000;
  color:var(--white);
  font-family:var(--font);
  font-weight:400;
  letter-spacing:0;           /* brand rule: interlettering 0 */
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
button{font-family:inherit;letter-spacing:0;}

/* ------------------------------------------------------------
   STAGE — fixed 1920x1080 canvas, scaled to the viewport
   ------------------------------------------------------------ */
#viewport{
  position:fixed;inset:0;
  background:#000;
  overflow:hidden;
}
/* anchored dead centre, then scaled — deterministic at any viewport,
   including a phone held sideways */
#stage{
  position:absolute;left:50%;top:50%;
  width:var(--stage-w);height:var(--stage-h);
  transform-origin:center center;
  transform:translate(-50%,-50%);
  overflow:hidden;
  background:var(--blue);
}

/* ------------------------------------------------------------
   SLIDES
   ------------------------------------------------------------ */
.slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  pointer-events:none;
  transform:scale(1.04);
  transition:opacity .52s var(--ease-soft),
             transform .8s var(--ease),
             visibility 0s linear .8s;
}
.slide.is-active,.slide.is-prev{will-change:transform,opacity;}
.slide.is-active{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:scale(1);
  transition:opacity .48s var(--ease-soft),
             transform .9s var(--ease),
             visibility 0s;
  z-index:2;
}
.slide.is-prev{ transform:scale(.955) translateY(-2%); }

/* grounds */
.g-blue{background:var(--blue);}
.g-red{background:var(--red);}
.g-beige{background:var(--beige);color:var(--red);}
.g-white{background:var(--white);color:var(--blue);}
.g-sky{background:var(--sky);}
.g-ink{background:var(--ink);}

/* ------------------------------------------------------------
   GRADIENT ILLUSTRATIONS  (the brand signature)
   Concentric arc fields, sliced into offset bands exactly as the
   guidelines draw them. Dusk / Day / Dawn palettes, sampled from
   the brand book. Live, not baked: they drift, they slice, and
   they answer the pointer.
   ------------------------------------------------------------ */
.field{
  position:absolute;inset:0;overflow:hidden;z-index:0;
  --n:5; --px:0; --py:0; --slice:64px; --amp:1; --oy:118%; --ox:50%;
}
.field .band{position:absolute;overflow:hidden;}
.field .slip{position:absolute;inset:0;
  transition:transform 1.15s var(--ease);}
.field .art{position:absolute;
  animation:drift 24s ease-in-out infinite alternate;
  animation-delay:calc(var(--i) * -3.1s);
  animation-play-state:paused;}
/* only the slide on screen gets promoted layers and a running drift.
   34 slides x 141 gradient planes is more compositing memory than a
   phone renderer will grant, and it kills the web process. */
.slide.is-active .field .slip{will-change:transform;}
.slide.is-active .field .art{will-change:transform;animation-play-state:running;}

/* horizontal bands: the arc field cut into strips, each strip
   sliding against the next, exactly as the guidelines draw it */
.field.h .band{left:0;right:0;height:calc(100% / var(--n));
  top:calc(var(--i) * 100% / var(--n));}
.field.h .slip{transform:translateY(calc(
   var(--i) * var(--slice) * var(--amp)
   + var(--px) * (var(--i) - (var(--n) - 1) / 2) * 30px));}
.field.h .art{left:-4%;right:-4%;
  height:calc(100% * var(--n) + 900px);
  top:calc(var(--i) * -100% - 450px);}

/* vertical slices, the hero lockup treatment */
.field.v .band{top:0;bottom:0;width:calc(100% / var(--n));
  left:calc(var(--i) * 100% / var(--n));}
.field.v .slip{transform:translateX(calc(
   var(--i) * var(--slice) * var(--amp) * -1
   + var(--py) * (var(--i) - (var(--n) - 1) / 2) * 26px));}
.field.v .art{top:-4%;bottom:-4%;
  width:calc(100% * var(--n) + 900px);
  left:calc(var(--i) * -100% - 450px);}

@keyframes drift{
  0%  {transform:scale(1) translate(0,0);}
  100%{transform:scale(1.07) translate(-1%,-1.6%);}
}

/* ---- palettes, from the brand book's Dusk / Day / Dawn ---- */
.field.dawn .art{
  background:radial-gradient(var(--ew,118%) var(--eh,150%) at var(--ox) var(--oy),
    #9AA2C6 0%, #777FA3 6%, #565B9F 14%, #393C99 22%, #1A168F 30%,
    #0F067B 39%, #250D5B 49%, #5B2137 59%, #A13B13 69%, #C85014 77%,
    #8E3A1E 85%, #2A1050 94%, #0A0345 100%);
}
.field.day .art{
  background:radial-gradient(var(--ew,118%) var(--eh,150%) at var(--ox) var(--oy),
    #7FA6D8 0%, #5389C7 7%, #5D87C1 16%, #6378AD 26%, #726C9A 36%,
    #89577A 46%, #A5354B 56%, #CB2F16 66%, #F44725 75%,
    #CB8774 84%, #6378AD 93%, #3D4E8E 100%);
}
.field.dusk .art{
  background:radial-gradient(var(--ew,118%) var(--eh,150%) at var(--ox) var(--oy),
    #A9D2FF 0%, #8AC1FF 7%, #98BCEE 16%, #B1B5D2 26%, #E3BA9E 36%,
    #F0B283 46%, #F3925B 56%, #F47838 66%, #E86314 75%,
    #F0B283 85%, #B1B5D2 94%, #8AC1FF 100%);
}
/* the working ground for text-bearing slides: the blue core of the
   Dawn field, with the warm arcs pushed out to the far edge */
.field.deep .art{
  background:radial-gradient(var(--ew,140%) var(--eh,175%) at var(--ox) var(--oy),
    #3B3AA0 0%, #23219A 14%, #17128C 26%, #0F067B 38%, #0A0466 50%,
    #08033F 62%, #17063C 72%, #3C1430 82%, #6B2718 92%, #8E3A17 100%);
}
.field.deepwarm .art{
  background:radial-gradient(var(--ew,140%) var(--eh,175%) at var(--ox) var(--oy),
    #3B3AA0 0%, #2A2497 13%, #1B119A 24%, #140A7E 36%, #14053F 50%,
    #33103A 62%, #62221C 74%, #93381A 86%, #C04A16 100%);
}
.field.deepcool .art{
  background:radial-gradient(var(--ew,140%) var(--eh,175%) at var(--ox) var(--oy),
    #4D63B8 0%, #33409F 14%, #1F2296 26%, #131094 38%, #0B0570 52%,
    #0A0448 64%, #12124F 76%, #2E3E7E 88%, #4E77B4 100%);
}
.field.deep,.field.deepwarm,.field.deepcool{--slice:34px;--oy:134%;}

/* the hero lockup ground: a solid red field meeting sliced blue */
.divider .field{--oy:118%;--ew:88%;--eh:116%;--slice:120px;}
.divider .field.dusk{--oy:126%;}
.field.split{--ox:70%;--oy:120%;--ew:92%;--eh:120%;--slice:96px;}
.slide.cover .field{--oy:124%;--ew:96%;--eh:126%;}
.cover-hero + .field,.slide.cover .field{--oy:124%;--ew:96%;--eh:124%;}
.field.split::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:41.5%;z-index:2;
  background:radial-gradient(78% 105% at 38% 46%, #C9260C 0%, #E23A18 34%, #F44725 62%, #F44725 100%);
}

/* film grain, as in the brand's gradient illustrations */
.grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.3;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size:200px 200px;
}
.scrim{position:absolute;inset:0;z-index:2;pointer-events:none;}
.scrim.left{background:linear-gradient(90deg,rgba(5,0,118,.97) 0%,rgba(5,0,118,.94) 30%,rgba(5,0,118,.7) 50%,rgba(5,0,118,.18) 76%,rgba(5,0,118,0) 100%);}
.scrim.bottom{background:linear-gradient(0deg,rgba(4,0,70,.97) 0%,rgba(4,0,70,.8) 16%,rgba(4,0,70,.34) 36%,rgba(4,0,70,0) 62%);}
.scrim.full{background:linear-gradient(180deg,rgba(5,0,118,.9),rgba(5,0,118,.82));}
/* keeps long-form copy readable over a live field */
.scrim.work{background:linear-gradient(96deg,rgba(6,2,74,.93) 0%,rgba(6,2,74,.86) 46%,rgba(6,2,74,.72) 74%,rgba(6,2,74,.6) 100%);}

/* the field slices into place when a slide arrives */

.slide.is-active .field{animation:fieldin 1.35s var(--ease) both;}
@keyframes fieldin{
  from{opacity:0;transform:scale(1.06);}
  to{opacity:1;transform:scale(1);}
}

/* ------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------ */
.pad{position:absolute;inset:var(--pad-y) var(--pad-x);z-index:3;}
.cols{display:grid;gap:64px;height:100%;}
.c-6-6{grid-template-columns:1fr 1fr;}
.c-7-5{grid-template-columns:1.35fr 1fr;}
.c-5-7{grid-template-columns:1fr 1.35fr;}
.c-8-4{grid-template-columns:1.9fr 1fr;}
.v-center{align-items:stretch;align-content:stretch;}
.stack{display:flex;flex-direction:column;justify-content:center;height:100%;}
.stack.top{justify-content:flex-start;}
.between{display:flex;flex-direction:column;justify-content:space-between;height:100%;}

/* ------------------------------------------------------------
   TYPE
   Brand rules: one typeface, Regular, interlettering 0,
   titles alternate left / right justification, never centered.
   ------------------------------------------------------------ */
.kicker{
  font-size:19px;line-height:1;text-transform:uppercase;
  opacity:.72;margin:0 0 34px;
}
.kicker .n{opacity:1;}
.kicker.on-red{opacity:.9;}

.title{
  font-size:96px;line-height:.94;margin:0;
  max-width:15ch;
}
.title.xl{font-size:132px;max-width:13ch;}
.title.lg{font-size:112px;}
.title.sm{font-size:68px;max-width:18ch;}
.title.xs{font-size:52px;max-width:22ch;}
/* flush left, one edge, no stepping */
.title span{display:block;text-align:left;}
/* the guideline's alternating justification, kept available as an opt-in */
.title.stepped span:nth-child(even){text-align:right;}

.lede{font-size:31px;line-height:1.32;margin:34px 0 0;max-width:34ch;opacity:.95;}
.body{font-size:23px;line-height:1.52;margin:0;max-width:46ch;opacity:.88;}
.body + .body{margin-top:20px;}
.small{font-size:18px;line-height:1.5;opacity:.66;}
.micro{font-size:15px;line-height:1.4;text-transform:uppercase;opacity:.55;}

.rule{height:1px;background:currentColor;opacity:.25;margin:30px 0;width:100%;}
.mark-y{color:var(--yellow);}
.mark-r{color:var(--red);}
.mark-w{color:var(--white);}

ul.ticks{list-style:none;padding:0;margin:34px 0 0;}
ul.ticks li{
  font-size:23px;line-height:1.45;padding:0 0 0 34px;position:relative;
  margin-bottom:19px;max-width:47ch;opacity:.9;
}
ul.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:15px;height:1.5px;background:var(--yellow);
}
.g-beige ul.ticks li::before,.g-white ul.ticks li::before{background:var(--red);}

/* curved type — brand rule: curved typography is always yellow */
.arc{position:absolute;z-index:2;pointer-events:none;}
.arc text{fill:var(--yellow);font-family:var(--font);font-size:31px;letter-spacing:0;}

/* ------------------------------------------------------------
   REVEAL ANIMATION
   ------------------------------------------------------------ */
[data-anim]{
  opacity:0;transform:translateY(26px);
  transition:opacity .62s var(--ease-soft),transform .82s var(--ease);
}
.slide.is-active [data-anim]{opacity:1;transform:none;}
.slide.is-active [data-anim="1"]{transition-delay:.14s;}
.slide.is-active [data-anim="2"]{transition-delay:.22s;}
.slide.is-active [data-anim="3"]{transition-delay:.30s;}
.slide.is-active [data-anim="4"]{transition-delay:.38s;}
.slide.is-active [data-anim="5"]{transition-delay:.46s;}
.slide.is-active [data-anim="6"]{transition-delay:.54s;}
.slide.is-active [data-anim="7"]{transition-delay:.62s;}
.slide.is-active [data-anim="8"]{transition-delay:.70s;}
.slide.is-active [data-anim="9"]{transition-delay:.78s;}
.slide.is-active [data-anim="10"]{transition-delay:.86s;}
.slide.is-active [data-anim="11"]{transition-delay:.94s;}
.slide.is-active [data-anim="12"]{transition-delay:1.02s;}

/* type that wipes up from a mask */
.wipe{overflow:hidden;display:block;}
.wipe > span{display:block;transform:translateY(105%);transition:transform .95s var(--ease);}
.slide.is-active .wipe > span{transform:none;}
.slide.is-active .wipe:nth-of-type(2) > span{transition-delay:.09s;}
.slide.is-active .wipe:nth-of-type(3) > span{transition-delay:.18s;}
.slide.is-active .wipe:nth-of-type(4) > span{transition-delay:.27s;}

/* ------------------------------------------------------------
   MEDIA PANELS  (all photography is original to the 2026 deck)
   ------------------------------------------------------------ */
.media{
  position:relative;overflow:hidden;border-radius:4px;
  background:var(--blue-deep);
}
.media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.17);transition:transform 7.5s cubic-bezier(.16,.68,.26,1);}
.slide.is-active .media img{transform:scale(1);}
.media.full{position:absolute;inset:0;border-radius:0;z-index:0;}
.media.full.right{left:26%;}
.media.full.right::before{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(5,0,118,1) 0%,rgba(5,0,118,0) 26%);}
.media.full.texture{opacity:.42;}
.media.full.texture img{filter:saturate(.55) contrast(1.05);}
.media.tint img{filter:saturate(.92) contrast(1.04);}
.media.duo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(5,0,118,.55),rgba(244,71,37,.22));
  mix-blend-mode:multiply;
}
.media .cap{
  position:absolute;left:20px;bottom:16px;z-index:2;
  font-size:14px;text-transform:uppercase;opacity:.8;
}

/* ------------------------------------------------------------
   DIVIDERS
   ------------------------------------------------------------ */
.divider .pad{justify-content:flex-end;}
.divider .big{
  font-size:176px;line-height:.9;margin:0 0 34px;max-width:13ch;
}
.divider .big span{display:block;text-align:left;}
.divider .idx{
  position:absolute;right:var(--pad-x);top:var(--pad-y);
  font-size:19px;text-transform:uppercase;opacity:.7;z-index:4;
}

/* ------------------------------------------------------------
   STATS
   ------------------------------------------------------------ */
.stat{display:flex;flex-direction:column;gap:6px;}
.stat .num{font-size:104px;line-height:.92;color:var(--yellow);}
.stat .num.sm{font-size:74px;}
.stat .lbl{font-size:18px;text-transform:uppercase;opacity:.7;line-height:1.3;}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:52px 48px;}

.bars{display:flex;flex-direction:column;gap:26px;margin-top:12px;}
.bar{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:22px;}
.bar .k{font-size:17px;text-transform:uppercase;opacity:.72;line-height:1.25;}
.bar .track{height:38px;background:rgba(255,255,255,.1);position:relative;overflow:hidden;}
.bar .fill{
  position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(90deg,#A13B13,var(--red));
  transition:width 1.5s var(--ease) .35s;
}
.bar .fill.alt{background:linear-gradient(90deg,#393C99,var(--sky));}
.bar .v{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:19px;z-index:2;}

/* ------------------------------------------------------------
   PILLARS
   ------------------------------------------------------------ */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;height:100%;align-content:center;}
.pillar{
  border-top:2px solid rgba(255,255,255,.32);padding:30px 0 0;
  position:relative;transition:border-color .4s var(--ease-soft);
}
.pillar .n{font-size:74px;line-height:1;color:var(--yellow);margin-bottom:26px;display:block;}
.pillar h3{font-size:34px;line-height:1.1;margin:0 0 18px;font-weight:400;max-width:13ch;}
.pillar p{font-size:19px;line-height:1.5;margin:0;opacity:.78;}
.pillar::after{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--yellow);
  transition:width .9s var(--ease);}
.slide.is-active .pillar::after{width:100%;}
.slide.is-active .pillar:nth-child(2)::after{transition-delay:.12s;}
.slide.is-active .pillar:nth-child(3)::after{transition-delay:.24s;}
.slide.is-active .pillar:nth-child(4)::after{transition-delay:.36s;}

/* ------------------------------------------------------------
   THE STREET MAP
   ------------------------------------------------------------ */
.mapwrap{position:relative;width:100%;height:100%;}
#streetmap{width:100%;height:100%;overflow:visible;}
.pin{cursor:pointer;}
.pin .dot{transition:r .35s var(--ease),fill .3s var(--ease-soft);}
.pin .ring{opacity:0;transition:opacity .3s,r .5s var(--ease);}
.pin .nm{font-size:19px;fill:#fff;letter-spacing:0;transition:opacity .3s;}
.pin .ct{font-size:13px;fill:#fff;opacity:.6;text-transform:uppercase;}
.pin:hover .dot,.pin.on .dot{r:17;}
.pin:hover .ring,.pin.on .ring{opacity:.9;}
.pin.dim{opacity:.2;}
.pin.soon .dot{fill:none;stroke:var(--yellow);stroke-width:2.5;stroke-dasharray:5 5;}
.legend{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:26px;}
.tag{
  display:inline-flex;align-items:center;gap:10px;
  font-size:16px;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.28);padding:8px 15px;border-radius:100px;
  cursor:pointer;transition:background .25s,border-color .25s,opacity .25s;
}
.tag .sw{width:11px;height:11px;border-radius:50%;}
.tag:hover{border-color:rgba(255,255,255,.75);}
.tag.off{opacity:.32;}

/* ------------------------------------------------------------
   CARD GRIDS — click to expand
   ------------------------------------------------------------ */
.grid{display:grid;gap:20px;}
.grid.c6{grid-template-columns:repeat(6,1fr);}
.grid.c5{grid-template-columns:repeat(5,1fr);}
.grid.c4{grid-template-columns:repeat(4,1fr);}
.grid.c3{grid-template-columns:repeat(3,1fr);}
.card{
  position:relative;overflow:hidden;cursor:pointer;
  background:var(--blue-deep);border-radius:4px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .4s;}
.card .lab{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:52px 16px 15px;
  background:linear-gradient(0deg,rgba(4,0,58,.95) 12%,rgba(4,0,58,0));
  font-size:19px;line-height:1.12;
}
.card .plus{
  position:absolute;top:12px;right:12px;z-index:3;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.16);backdrop-filter:blur(4px);
  display:grid;place-items:center;font-size:19px;line-height:1;
  opacity:0;transform:scale(.7);transition:all .35s var(--ease);
}
.card:hover{transform:translateY(-7px);box-shadow:0 22px 48px rgba(0,0,0,.45);}
.card:hover img{transform:scale(1.08);}
.card:hover .plus{opacity:1;transform:scale(1);}
.card.tall{aspect-ratio:3/4.1;}
.card.wide{aspect-ratio:16/9.2;}

/* expanded overlay */
#lens{
  position:absolute;inset:0;z-index:40;display:none;
  background:rgba(3,0,52,.82);backdrop-filter:blur(13px);
}
#lens.on{display:block;}
#lens .box{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);
  width:1280px;height:660px;background:var(--blue);border-radius:6px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1.1fr;
  opacity:0;transition:opacity .4s var(--ease-soft),transform .6s var(--ease);
  box-shadow:0 40px 120px rgba(0,0,0,.6);
}
#lens.on .box{opacity:1;transform:translate(-50%,-50%) scale(1);}
#lens .box img{width:100%;height:100%;object-fit:cover;}
#lens .txt{padding:66px 62px;display:flex;flex-direction:column;justify-content:center;}
#lens .txt h3{font-size:56px;line-height:.98;margin:0 0 10px;font-weight:400;max-width:14ch;}
#lens .txt .tagline{font-size:19px;text-transform:uppercase;color:var(--yellow);margin:0 0 26px;}
#lens .txt p{font-size:21px;line-height:1.5;margin:0;opacity:.88;max-width:42ch;}
#lens .close{
  position:absolute;top:26px;right:30px;z-index:5;
  background:none;border:1px solid rgba(255,255,255,.4);color:#fff;
  width:44px;height:44px;border-radius:50%;font-size:20px;cursor:pointer;
  transition:background .25s;
}
#lens .close:hover{background:rgba(255,255,255,.16);}

/* ------------------------------------------------------------
   SPECIALS
   ------------------------------------------------------------ */
.shift{display:grid;gap:40px;}
.shift .row{border-left:3px solid;padding:6px 0 6px 30px;}
.shift .row.was{border-color:rgba(255,255,255,.28);opacity:.55;}
.shift .row.was .q{text-decoration:line-through;text-decoration-thickness:2px;}
.shift .row.now{border-color:var(--yellow);}
.shift .k{font-size:17px;text-transform:uppercase;opacity:.7;margin:0 0 10px;}
.shift .q{font-size:52px;line-height:1.06;margin:0;max-width:20ch;}
.shift .row.now .q{color:var(--yellow);}

.names{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;}
.name{
  border-bottom:1px solid rgba(255,255,255,.22);
  padding:24px 0 20px;
}
.name .n{font-size:46px;line-height:1;margin:0 0 8px;}
.name .r{font-size:17px;text-transform:uppercase;opacity:.66;margin:0;}

.segs{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.seg{
  border:1px solid rgba(255,255,255,.24);padding:28px 26px;border-radius:4px;
  transition:background .4s var(--ease-soft),border-color .4s;
}
.seg:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.5);}
.seg .t{font-size:28px;line-height:1.08;margin:0 0 12px;}
.seg .d{font-size:17px;line-height:1.45;opacity:.76;margin:0;}
.seg .ic{font-size:17px;color:var(--yellow);text-transform:uppercase;margin:0 0 18px;}

.money{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:6px;}
.money .cell{border-top:2px solid rgba(255,255,255,.3);padding-top:24px;}
.money .cell.hi{border-color:var(--yellow);}
.money .amt{font-size:62px;line-height:1;margin:0 0 10px;}
.money .cell.hi .amt{color:var(--yellow);}
.money .cur{font-size:24px;opacity:.6;}
.money .lbl{font-size:17px;text-transform:uppercase;opacity:.7;line-height:1.35;margin:0;}

.openrow{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.open{border:1px solid rgba(255,255,255,.25);padding:38px 34px;border-radius:4px;min-height:270px;
  display:flex;flex-direction:column;justify-content:space-between;}
.open.tba{border-style:dashed;opacity:.66;}
.open .n{font-size:40px;line-height:1.02;margin:0;}
.open .k{font-size:16px;text-transform:uppercase;color:var(--yellow);margin:0 0 auto;}
.open .d{font-size:18px;line-height:1.45;opacity:.76;margin:22px 0 0;}

/* ------------------------------------------------------------
   COVER + CLOSE
   ------------------------------------------------------------ */
.cover .logo{width:520px;}
.cover .meta{display:flex;gap:56px;}
.cover .meta div{font-size:17px;text-transform:uppercase;opacity:.8;line-height:1.5;}
.cover .meta strong{display:block;font-weight:400;opacity:.55;font-size:14px;margin-bottom:5px;}

/* ------------------------------------------------------------
   CHROME — progress rail, nav, menu
   ------------------------------------------------------------ */
#chrome{position:absolute;inset:auto 0 0 0;z-index:30;pointer-events:none;}
#rail{
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:rgba(255,255,255,.14);
}
#railfill{height:100%;width:0;background:var(--yellow);transition:width .6s var(--ease);}
#hud{
  position:absolute;bottom:26px;left:var(--pad-x);right:var(--pad-x);
  display:flex;justify-content:space-between;align-items:center;
  pointer-events:none;
}
#hud .chap{font-size:14px;text-transform:uppercase;opacity:.62;}
#hud .pg{font-size:14px;opacity:.62;}
#hud .tools{display:flex;gap:10px;pointer-events:auto;}
#hud button{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;
  font-size:15px;line-height:1;display:grid;place-items:center;
  transition:background .25s,border-color .25s;
}
#hud button:hover{background:rgba(255,255,255,.26);}
.on-light #hud .chap,.on-light #hud .pg{color:var(--blue);opacity:.7;}
.on-light #hud button{color:var(--blue);border-color:rgba(5,0,118,.3);background:rgba(5,0,118,.07);}
.on-light #rail{background:rgba(5,0,118,.16);}
.on-light #railfill{background:var(--red);}

/* click zones */
.zone{position:absolute;top:0;bottom:60px;width:16%;z-index:20;cursor:pointer;}
.zone.prev{left:0;}
.zone.next{right:0;}

#menu{
  position:absolute;inset:0;z-index:50;background:rgba(3,0,52,.96);
  display:none;padding:70px 80px;overflow:hidden;
}
#menu.on{display:block;}
#menu h4{font-size:17px;text-transform:uppercase;opacity:.6;margin:0 0 26px;font-weight:400;}
#menu .list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 34px;}
#menu .it{
  display:flex;gap:14px;align-items:baseline;padding:9px 12px;border-radius:3px;
  cursor:pointer;font-size:18px;transition:background .2s;
}
#menu .it:hover{background:rgba(255,255,255,.1);}
#menu .it.cur{background:var(--red);}
#menu .it .i{font-size:13px;opacity:.55;width:26px;flex:none;}
#menu .close{position:absolute;top:34px;right:40px;background:none;border:1px solid rgba(255,255,255,.4);
  color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:20px;}

/* intro splash */
#splash{
  position:absolute;inset:0;z-index:60;background:var(--blue);
  display:grid;place-items:center;transition:opacity .9s var(--ease-soft),visibility 0s .9s;
}
#splash.gone{opacity:0;visibility:hidden;pointer-events:none;}
#splash .inner{text-align:left;z-index:2;}
#splash img{width:340px;margin-bottom:30px;}
#splash .go{
  background:none;border:1px solid var(--yellow);color:var(--yellow);
  padding:15px 34px;border-radius:100px;font-size:17px;text-transform:uppercase;
  cursor:pointer;transition:background .3s,color .3s;
}
#splash .go:hover{background:var(--yellow);color:var(--blue);}

.hint-touch{display:none;}
@media (hover:none) and (pointer:coarse){
  .hint-desk{display:none;}
  .hint-touch{display:block;}
}

/* ------------------------------------------------------------
   PHONES — ask for landscape before anything else
   ------------------------------------------------------------ */
#rotate{display:none;}
@media (orientation:portrait) and (max-width:1100px){
  #rotate{
    display:grid;place-items:center;
    position:fixed;inset:0;z-index:200;
    background:
      radial-gradient(125% 80% at 50% 112%,
        #4A4FAE 0%, #2B2A9B 12%, #17128C 24%, #0F067B 36%, #0A0460 48%,
        #12053F 60%, #38122F 72%, #74301B 86%, #A64118 100%);
    padding:40px 30px;
  }
  #rotate .inner{max-width:340px;text-align:center;}
  #rotate img.mark{width:150px;margin:0 auto 40px;opacity:.95;}
  #rotate h2{
    font-size:27px;line-height:1.14;margin:34px 0 12px;font-weight:400;color:#fff;
  }
  #rotate p{
    font-size:15px;line-height:1.5;margin:0;color:#fff;opacity:.72;
  }
  #rotate .phone{
    width:62px;height:100px;margin:0 auto;
    border:2.5px solid var(--yellow);border-radius:11px;
    position:relative;
    animation:tipover 3s var(--ease) infinite;
  }
  #rotate .phone::after{
    content:"";position:absolute;left:50%;bottom:7px;transform:translateX(-50%);
    width:22px;height:2.5px;border-radius:2px;background:var(--yellow);opacity:.65;
  }
  @keyframes tipover{
    0%,18%   {transform:rotate(0deg);}
    42%,76%  {transform:rotate(-90deg);}
    96%,100% {transform:rotate(-90deg);}
  }
  #rotate .grain{opacity:.24;}
}
/* a phone held sideways but very short still gets the deck, scaled to fit */
@media (orientation:landscape) and (max-height:420px){
  #hud{bottom:14px;}
}

/* ------------------------------------------------------------
   PRINT / PDF MODE — every slide stacked, nothing hidden
   ------------------------------------------------------------ */
body.print{overflow:visible;background:#fff;}
body.print #viewport{position:static;display:block;}
body.print #stage{position:static;left:auto;top:auto;transform:none!important;
  width:var(--stage-w);height:auto;overflow:visible;}
body.print #rotate{display:none!important;}
body.print .slide{
  position:relative;inset:auto;width:var(--stage-w);height:var(--stage-h);
  opacity:1;visibility:visible;transform:none;transition:none;
  page-break-after:always;break-after:page;overflow:hidden;
}
body.print [data-anim]{opacity:1;transform:none;transition:none;}
body.print .wipe > span{transform:none;transition:none;}
body.print .media img{transform:none!important;transition:none;}
body.print .field .art{animation:none;transform:scale(1.03);}
body.print .slide.is-active .field{animation:none;}
body.print #chrome,body.print .zone,body.print #menu,body.print #splash,body.print #lens{display:none!important;}
body.print .card .plus{display:none;}
@page{size:1920px 1080px;margin:0;}

/* ---------- street map internals ---------- */
#streetmap .nm{font-size:21px;fill:#fff;letter-spacing:0;}
#streetmap .ct{font-size:12.5px;fill:#fff;opacity:.6;text-transform:uppercase;letter-spacing:0;}
#streetmap .street{font-size:15px;fill:#fff;opacity:.45;text-transform:uppercase;letter-spacing:0;}
#streetmap .blk{transition:opacity .38s var(--ease-soft);}
#streetmap .blk rect:first-child{transition:fill .3s var(--ease-soft);}
#streetmap .blk:hover rect:first-child{fill:rgba(255,255,255,.16);}
#streetmap .blk.dim{opacity:.16;}
.tag.sel{background:rgba(255,255,255,.16);border-color:#fff;opacity:1;}
.tag.sel.off{opacity:1;}

#streetmap .cs{font-size:12.5px;fill:#FFFF7D;opacity:.85;letter-spacing:0;}
.open{min-height:330px;}
/* the openings row now closes the slide, so it takes the space the
   old footing paragraph used to hold rather than leaving a gap */
.openrow{min-height:440px;}
.openrow .open{min-height:0;}

/* the padded frame already sets its own height via inset; do not let the
   layout helpers stretch it to the full stage */
.pad.between,.pad.cols,.pad.stack{height:auto;}

/* brand rule: on a red ground the typeface is white */
.g-red .mark-y,.g-red .pillar .n{color:var(--white);}
.g-red ul.ticks li::before{background:var(--white);}
.g-red .pillar{border-top-color:rgba(255,255,255,.45);}
.slide.g-red .pillar::after{background:var(--white);}
.pillar h3{min-height:3.4em;}
.pillar p{min-height:4.4em;}

/* keep every painted background when exporting to PDF */
*{-webkit-print-color-adjust:exact;print-color-adjust:exact;}

/* chapter breaks: hold the lower third for the headline and strapline */
.divider .scrim.bottom{
  background:linear-gradient(0deg,
    rgba(4,0,70,.97) 0%, rgba(4,0,70,.88) 20%, rgba(4,0,70,.6) 38%,
    rgba(4,0,70,.18) 58%, rgba(4,0,70,0) 76%);
}


/* ------------------------------------------------------------
   THE GUEST LIST  — portrait wall
   ------------------------------------------------------------ */
.wall{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;align-items:start;}
.guest{position:relative;}

.guest .shot{
  position:relative;overflow:hidden;border-radius:4px;aspect-ratio:2/3.35;
  background:var(--blue-deep);
}
.guest .shot img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.8) contrast(1.05) brightness(.92);
  transform:scale(1.04);
  transition:transform 1s var(--ease),filter .5s var(--ease-soft);
}
.guest .shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(5,0,118,.55),rgba(5,0,118,0) 55%);
  transition:opacity .45s;
}
.guest:hover .shot img{transform:scale(1);filter:saturate(1.05) contrast(1.02) brightness(1);}
.guest:hover .shot::after{opacity:.35;}
.guest .who{padding:16px 0 0;border-top:1px solid rgba(255,255,255,.26);margin-top:14px;
  transition:border-color .4s;}
.guest:hover .who{border-color:var(--yellow);}
.guest .gn{font-size:23px;line-height:1.08;margin:0 0 6px;min-height:2.1em;}
.guest .gr{font-size:14px;line-height:1.35;text-transform:uppercase;opacity:.6;margin:0;min-height:2.7em;}

/* ------------------------------------------------------------
   THE STREET MAP  — time of day
   ------------------------------------------------------------ */
.times{display:flex;align-items:center;gap:10px;}
.tbtn{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.26);
  color:#fff;font-size:16px;text-transform:uppercase;padding:11px 20px;
  border-radius:100px;cursor:pointer;transition:all .3s var(--ease-soft);
}
.tbtn:hover{background:rgba(255,255,255,.18);}
.tbtn.is-on{background:var(--yellow);color:var(--blue);border-color:var(--yellow);}
.tcount{font-size:15px;text-transform:uppercase;opacity:.6;margin-left:8px;}
#venueinfo{
  font-size:17px;line-height:1.4;min-height:24px;
  color:var(--yellow);opacity:0;transition:opacity .3s;
}
#venueinfo.on{opacity:1;}

#streetmap .blk{cursor:pointer;transition:opacity .38s var(--ease-soft);}
#streetmap .blk .lift{transition:none;}
/* hover is a slow colour lift, nothing shifts position */
#streetmap .blk .plate{transition:fill .65s var(--ease-soft),stroke .65s var(--ease-soft);}
#streetmap .blk .bar{transition:opacity .65s var(--ease-soft);}
#streetmap .blk .nm,#streetmap .blk .ct,#streetmap .blk .cs{
  transition:fill .65s var(--ease-soft),opacity .65s var(--ease-soft);}
#streetmap .blk:hover .plate{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.7);}
#streetmap .blk:hover .ct{opacity:.9;}
#streetmap .blk:hover .cs{opacity:1;}
#streetmap .blk .glow{opacity:0;transition:opacity .65s var(--ease-soft);}
#streetmap .blk:hover .glow{opacity:.55;}
#streetmap .blk.off{opacity:.14;}
#streetmap .road{transition:opacity .6s var(--ease-soft);}
#streetmap .sweep{animation:sweep 7s linear infinite;}
@keyframes sweep{
  from{transform:translateX(-420px);}
  to{transform:translateX(1320px);}
}
body.print #streetmap .sweep{animation:none;opacity:.35;}


/* ============================================================
   ROUND 3 EDITS
   ============================================================ */

/* ---- 1. the opening slide, centred and full bleed ---- */
.cover-hero .pad{align-items:center;text-align:center;}
.cover-hero .logo{width:430px;margin:0 auto;}
/* cover carries the mark alone: large, centred, nothing competing with it */
.cover-hero .logo.hero{width:1120px;max-width:82%;margin:0 auto;display:block;}
.slide.is-active .cover-hero .logo.hero{animation:heroin 1.6s var(--ease) both .15s;}
body.print .slide .cover-hero .logo.hero{animation:none;}
.title.center{max-width:none;text-align:center;}
.title.center span{text-align:center;}
.title.hero{font-size:168px;line-height:.92;}
.cover-hero .meta{display:flex;gap:0;justify-content:space-between;width:100%;text-align:left;}
.cover-hero .meta div{flex:1;}
.cover-hero .meta div:last-child{text-align:right;}
.vignette{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(68% 62% at 50% 48%,rgba(4,0,60,.62) 0%,rgba(4,0,60,.34) 46%,rgba(4,0,60,0) 78%);
}
.slide.is-active .cover-hero .title.hero{animation:heroin 1.6s var(--ease) both .15s;}
@keyframes heroin{
  from{opacity:0;transform:scale(1.08);letter-spacing:.04em;}
  to{opacity:1;transform:scale(1);letter-spacing:0;}
}
body.print .slide .cover-hero .title.hero{animation:none;}

/* ---- 2. stable hit area so the lift cannot flicker ---- */
#streetmap .hit{fill:transparent;}

/* ---- 3. the four pillars, stepped through ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:22px 0;}
.step{
  position:relative;cursor:pointer;
  border-top:2px solid rgba(255,255,255,.34);padding:26px 0 0;
  transition:opacity .55s var(--ease-soft),border-color .55s var(--ease-soft);
  opacity:.46;
}
.step.on{opacity:1;border-color:var(--white);}
.step .n{font-size:84px;line-height:1;display:block;margin-bottom:26px;}
.step h3{font-size:32px;line-height:1.08;margin:0 0 16px;font-weight:400;min-height:2.2em;}
.step p{font-size:20px;line-height:1.5;margin:0;opacity:.85;min-height:4.5em;}
/* the detail sits in reserved space, so nothing reflows when it appears */
.step .more{
  height:210px;margin-top:22px;position:relative;
  font-size:20px;line-height:1.55;
}
.step .more span{
  position:absolute;inset:0;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease-soft),transform .7s var(--ease);
}
.step.on .more span{opacity:1;transform:none;}
.step::after{
  content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--white);
  transition:width .8s var(--ease);
}
.step.on::after{width:100%;}
.stepdots{display:flex;gap:8px;margin-top:6px;}
.stepdot{width:60px;height:3px;background:rgba(255,255,255,.28);cursor:pointer;
  transition:background .45s var(--ease-soft),transform .45s var(--ease-soft);}
.stepdot.on{background:var(--white);transform:scaleY(2);}
body.print .step{opacity:1;}
body.print .step .more span{opacity:1;transform:none;}

/* ---- 4. the press wall ---- */
.presswall{display:grid;grid-template-columns:repeat(7,1fr);gap:16px;}
.mag{
  position:relative;border-radius:3px;overflow:hidden;aspect-ratio:356/466;
  box-shadow:0 14px 34px rgba(0,0,0,.42);
  animation:bob 9s ease-in-out infinite alternate;
  animation-play-state:paused;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.slide.is-active .mag{will-change:transform;animation-play-state:running;}
.mag img{width:100%;height:100%;object-fit:cover;}
.mag:hover{transform:translateY(-14px) scale(1.06) rotate(0deg)!important;
  box-shadow:0 28px 60px rgba(0,0,0,.62);z-index:4;}
@keyframes bob{
  0%  {transform:translateY(0) rotate(-.6deg);}
  100%{transform:translateY(-16px) rotate(.7deg);}
}
body.print .mag{animation:none;}
.logostrip{
  margin-top:26px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.logostrip .run{display:flex;gap:60px;width:max-content;animation:marquee 34s linear infinite;}
.logostrip img{height:92px;width:auto;filter:invert(1) brightness(1.6);opacity:.85;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
body.print .logostrip .run{animation:none;}

/* ---- 6 + 8. the lightbox fits its copy ---- */
#lens .box{
  width:1240px;height:auto;min-height:560px;max-height:840px;
  grid-template-columns:1fr 1.08fr;
}
#lens .box img{height:100%;min-height:560px;}
#lens .txt{padding:54px 56px;overflow:auto;}
#lens .txt h3{font-size:52px;margin:0 0 14px;}
#lens .txt .tagline{font-size:17px;margin:0 0 22px;}
#lens .txt p{font-size:21px;line-height:1.55;max-width:44ch;}

/* ---- 9. the money slides ---- */
.bigfig{font-size:172px;line-height:.86;color:var(--yellow);margin:0;display:block;white-space:nowrap;}
.bigfig .cur{display:block;font-size:30px;letter-spacing:0;text-transform:uppercase;opacity:.7;margin-bottom:10px;color:var(--white);}
.spend{margin:0;}
.spend .track{height:60px;background:rgba(255,255,255,.1);position:relative;overflow:hidden;border-radius:3px;}
.spend .seg{position:absolute;top:0;bottom:0;left:0;width:0;transition:width 1.5s var(--ease) .4s;}
.spend .seg.spent{background:linear-gradient(90deg,#A13B13,var(--red));}
.spend .seg.left{background:linear-gradient(90deg,#3B3AA0,var(--sky));}
.spend .key{display:flex;gap:38px;margin-top:18px;font-size:17px;text-transform:uppercase;opacity:.75;}
.spend .key i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:9px;font-style:normal;}
.figrow{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;}
.figrow .cell{border-top:2px solid rgba(255,255,255,.3);padding-top:22px;}
.figrow .amt{font-size:76px;line-height:1;margin:0 0 10px;}
.figrow .cur{font-size:26px;opacity:.6;}
.figrow .lbl{font-size:16px;text-transform:uppercase;opacity:.7;line-height:1.35;margin:0;}

/* ------------------------------------------------------------
   PHONE AND TABLET RENDER BUDGET
   A handset renderer gets a fraction of the GPU memory a laptop
   does, and iOS kills the web process outright when it is passed.
   Rotation is where it shows, because the whole stage re-rasterises
   at a new scale in a single frame. So on touch devices: only the
   slide on screen is rendered at all, the grain blend layer goes,
   the drift stops, and the arc planes stay inside their bands.
   ------------------------------------------------------------ */
@media (hover:none) and (pointer:coarse){
  body:not(.print) .slide:not(.is-active):not(.is-prev){
    content-visibility:hidden;
    contain-intrinsic-size:1920px 1080px;
  }
  body:not(.print) .slide{
    transform:none;
    transition:opacity .34s var(--ease-soft),visibility 0s linear .34s;
  }
  body:not(.print) .slide.is-active{
    transform:none;
    transition:opacity .34s var(--ease-soft),visibility 0s;
  }
  body:not(.print) .slide.is-prev{transform:none;}

  /* the blend layer forces a backdrop copy per slide */
  body:not(.print) .grain{display:none;}

  /* no drift, no parallax slip: static arcs read the same and cost nothing */
  body:not(.print) .field .art{
    animation:none!important;
    will-change:auto!important;
    transform:none!important;
  }
  body:not(.print) .field .slip{
    transition:none;
    will-change:auto!important;
  }
  /* keep each arc plane close to its band instead of 900px overhang */
  body:not(.print) .field.h .art{height:calc(100% * var(--n) + 240px);
    top:calc(var(--i) * -100% - 120px);}

  body:not(.print) .mag{animation:none;will-change:auto;}
}

@media (prefers-reduced-motion:reduce){
  .field .art{animation:none;}
  .mag{animation:none;}
}

/* print: every slide carries is-active, so keep the promotion off */
body.print .slide,
body.print .slide.is-active,
body.print .slide.is-active .field .art,
body.print .slide.is-active .field .slip,
body.print .slide.is-active .mag{will-change:auto!important;}