/* r12 · 17.10 · after Grzegorz's round-11 notes. Loaded after r11-hero.css; only overrides and new pieces.
   Phone: card 1 plays the Post Malone clip; the card UI sits lower (less air above the tab bar); no search, no speaker;
   Jann's page without About and without the mini-player; big faces in "Who's going with you"; "Warm up" with play and one
   track playing; "Show where it is" → the map screen (our MAPA-01, English, zoomed in on ENEA Stage, friends and You).
   Page: tickets keep drifting after a tap; a big numbers screen; the day as the guest's journey with pushes; the counters
   become the report. */

/* ---------- 1 · the opening ---------- */
.h11 { height: 820vh; }

/* card 1: the clip fades in over the anchored photo once the phone stands */
.h11-cvid { position: absolute; left: 0; top: 0; max-width: none; opacity: 0; will-change: transform; }   /* r13: size, place and origin from r11-hero.js: laid over its part of the photo */
.h11-cvid.want.on { opacity: 1; }
.h11-kb.live { animation: none; }
.h11-cbg::before, .h11-cbg::after { z-index: 2; }
.h11-cui { z-index: 3; }

/* the top row: only the two tabs, centred; no speaker, no search */
.h11-ctop { justify-content: center; }
.h11-snd, .h11-srch { display: none; }

/* the card's UI, 48 pt lower: the time card ends 22 pt above the tab bar */
.h11-rail { top: calc(424 * var(--u)); }
.h11-chip { top: calc(540 * var(--u)); }
.h11-card.two .h11-chip { top: calc(498 * var(--u)); }
.h11-cname { top: calc(576 * var(--u)); }
.h11-cname.two { top: calc(534 * var(--u)); }
.h11-cavs { top: calc(632 * var(--u)); }
.h11-csong { top: calc(666 * var(--u)); }
.h11-ctime { top: calc(696 * var(--u)); }
.h11-cbg::after { height: calc(460 * var(--u)); }

/* who's going with you: big faces with names */
.jp-who { height: calc(380 * var(--u)); }
.jp-big { margin-top: calc(14 * var(--u)); display: flex; gap: calc(10 * var(--u)); }
.jp-big span { display: grid; justify-items: center; gap: calc(6 * var(--u)); width: calc(62 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 600; color: #F4F2F8; }
.jp-big i { width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%; background: #2A2026; box-shadow: 0 0 0 calc(2 * var(--u)) rgba(224,120,90,.55); display: grid; place-items: center; overflow: hidden; }
.jp-big i img { height: calc(36 * var(--u)); width: auto; max-width: none; }
.jp-big .jp-more { font-size: calc(15 * var(--u)); background: #2F2733; box-shadow: 0 0 0 calc(2 * var(--u)) rgba(255,255,255,.14); }
.jp-big b { font-weight: 600; }
.jp-who .jp-who-t { margin-top: calc(14 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.35; }
.jp-who .jp-card { margin-top: calc(14 * var(--u)); }

/* warm up: a play button on every row; the first one is playing */
.jp-hint { font-size: calc(12 * var(--u)); color: #B9B3C6; }
.jp-play { margin-left: auto; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; flex: none; color: #fff; letter-spacing: 0; }
.jp-play svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin-left: calc(2 * var(--u)); }
.jp-songs li.playing { margin: 0 calc(-10 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(224,120,90,.1); box-shadow: inset 0 0 0 1px rgba(224,120,90,.45); }
.jp-songs li.playing small { color: #E0785A; }
.jp-eqp { background: #E0785A; color: #1a0d09; }
.jp-eqp .h11-eq { display: flex; align-items: flex-end; gap: calc(2 * var(--u)); height: calc(14 * var(--u)); }
.jp-eqp .h11-eq i { width: calc(3 * var(--u)); background: #1a0d09; border-radius: 1px; }
.jp-tonight { height: calc(260 * var(--u)); }

/* show where it is: the last thing on the page, above the tab bar */
.jp-where { height: calc(160 * var(--u)); padding-top: calc(16 * var(--u)); }
.jp-where-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); width: calc(358 * var(--u)); height: calc(50 * var(--u)); border-radius: 999px; background: #C7E635; color: #0E1108; font-size: calc(15.5 * var(--u)); font-weight: 700; letter-spacing: calc(-.2 * var(--u)); transition: transform .1s ease-out; }
.jp-where-btn svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.jp-where-btn.press { transform: scale(.97); }
.jp-where .jp-note { margin-top: calc(10 * var(--u)); text-align: center; }

/* the map screen: pushed in from the right over Jann's page */
.h11-map { position: absolute; inset: 0; background: #1D2422; transform: translate3d(100%, 0, 0); will-change: transform; box-shadow: calc(-12 * var(--u)) 0 calc(40 * var(--u)) rgba(0,0,0,.5); overflow: hidden; z-index: 6; }
.h11-mapimg { position: absolute; left: 0; top: 0; width: calc(390 * var(--u)); height: calc(844 * var(--u)); overflow: hidden; }
.h11-mapimg img { position: absolute; left: calc(-111 * var(--u)); top: calc(-274 * var(--u)); width: calc(565.5 * var(--u)); height: calc(1223.8 * var(--u)); max-width: none; }   /* MAPA-01 at ×1.45, ENEA Stage at (195, 300) */
.h11-mapimg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(150 * var(--u)); background: linear-gradient(180deg, rgba(14,18,17,.96), rgba(14,18,17,.5) 60%, rgba(14,18,17,0)); }
.h11-mapimg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(300 * var(--u)); background: linear-gradient(0deg, #0E1211 0, #0E1211 62%, rgba(14,18,17,.85) 76%, rgba(14,18,17,0) 100%); }
.h11-route { position: absolute; left: 0; top: 0; width: calc(390 * var(--u)); height: calc(844 * var(--u)); pointer-events: none; }
.h11-mk { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: calc(3 * var(--u)); text-align: center; white-space: nowrap; }
.h11-mk i { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; background: #2A2026; box-shadow: 0 0 0 calc(2.5 * var(--u)) #fff, 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.5); display: grid; place-items: center; overflow: hidden; }
.h11-mk i img { height: calc(29 * var(--u)); width: auto; max-width: none; }
.h11-mk b { font-size: calc(12 * var(--u)); font-weight: 700; padding: calc(2 * var(--u)) calc(7 * var(--u)); border-radius: 999px; background: rgba(11,12,14,.78); }
.h11-mk small { font-size: calc(10.5 * var(--u)); color: #D9D4E0; margin-top: calc(-2 * var(--u)); text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.h11-mk.you i { box-shadow: 0 0 0 calc(2.5 * var(--u)) #C7E635, 0 0 0 calc(9 * var(--u)) rgba(199,230,53,.22), 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.5); }
.h11-mk.you b { background: #C7E635; color: #0E1108; }
.h11-mtop { position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u)); top: calc(56 * var(--u)); height: calc(44 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); z-index: 3; }
.h11-mback { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; background: rgba(40,34,44,.82); display: grid; place-items: center; flex: none; }
.h11-mback svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.h11-mchip { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); height: calc(36 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: 999px; background: rgba(11,12,14,.78); font-size: calc(13 * var(--u)); font-weight: 600; white-space: nowrap; }
.h11-mcards { position: absolute; left: calc(12 * var(--u)); top: calc(614 * var(--u)); width: calc(206 * var(--u)); display: grid; gap: calc(8 * var(--u)); z-index: 3; }
.h11-mc { position: relative; display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(60 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(11,12,14,.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); overflow: hidden; }
.h11-mc > svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); flex: none; color: #F4F2F8; }
.h11-mc > span:not(.h11-eq) { display: grid; line-height: 1.15; min-width: 0; }
.h11-mc small { font-size: calc(9.5 * var(--u)); letter-spacing: calc(.8 * var(--u)); text-transform: uppercase; color: #B9B3C6; font-weight: 600; }
.h11-mc b { font-size: calc(17 * var(--u)); font-weight: 800; display: flex; align-items: baseline; gap: calc(8 * var(--u)); }
.h11-mc b em { font-style: normal; font-size: calc(12 * var(--u)); font-weight: 500; color: #D9D4E0; }
.h11-mbar { position: absolute; left: calc(46 * var(--u)); right: calc(12 * var(--u)); bottom: calc(8 * var(--u)); height: calc(3 * var(--u)); border-radius: 2px; background: rgba(255,255,255,.14); }
.h11-mbar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 13%; border-radius: 2px; background: #C7E635; }
.h11-mc .h11-eq.big { margin-left: auto; display: flex; align-items: flex-end; gap: calc(3 * var(--u)); height: calc(22 * var(--u)); }
.h11-mc .h11-eq.big i { width: calc(3 * var(--u)); background: #C7E635; border-radius: 1px; }
.h11-mvault { position: absolute; right: calc(12 * var(--u)); top: calc(600 * var(--u)); width: calc(150 * var(--u)); padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(11,12,14,.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); display: grid; gap: calc(5 * var(--u)); z-index: 3; }
.h11-mvault b { font-size: calc(11 * var(--u)); letter-spacing: calc(1.2 * var(--u)); text-transform: uppercase; font-weight: 700; margin-bottom: calc(2 * var(--u)); }
.h11-mvault span { font-size: calc(12 * var(--u)); font-weight: 600; height: calc(26 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(8 * var(--u)); background: rgba(255,255,255,.07); display: flex; align-items: center; gap: calc(6 * var(--u)); white-space: nowrap; }
.h11-tab[data-active="map"] span:nth-child(3) { color: #C7E635; }

html.rm .h11-map { display: none; }

/* ---------- 2 · proof: tickets and the numbers ---------- */
.stubs4:hover .st-track, .stubs4:focus-within .st-track { animation-play-state: running; }   /* a tap lights the ticket and swaps the quote; the strip keeps drifting */
.stubs4.is-paused .st-track { animation-play-state: paused; }
.stub4 .st-k { white-space: nowrap; }

.bignums { padding: clamp(72px, 10vw, 140px) 0 clamp(56px, 7vw, 100px); border-top: 1px solid var(--line); }
.bignums .cap { margin-bottom: 18px; }
.bignums .h2 { max-width: 16ch; }
.bn-row { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); align-items: start; }
.bn { position: relative; padding-top: 22px; border-top: 1px solid var(--line); }
.bn b { display: block; font-size: clamp(64px, 9.4vw, 176px); font-weight: 850; letter-spacing: -.05em; line-height: .88; color: var(--lime); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.bn b small { font-size: .42em; letter-spacing: -.02em; margin-left: .06em; font-weight: 800; vertical-align: baseline; }
.bn .bn-l { display: block; margin-top: 18px; font-size: clamp(18px, 1.6vw, 24px); font-weight: 700; letter-spacing: -.01em; }
.bn p { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--mute); max-width: 30ch; }
.bn .bn-src { display: block; margin-top: 10px; font-size: 12px; color: var(--mute); opacity: .75; }
@media (max-width: 900px) { .bn-row { grid-template-columns: 1fr; gap: 36px; } .bn b { font-size: clamp(72px, 20vw, 120px); } }

/* ---------- 3 · the day as the guest's journey: pushes in a phone frame, the geofence, the report ---------- */
.kjr__push { position: absolute; left: calc(100% + 14px); top: 0; width: min(348px, 38vw); display: flex; gap: 12px; padding: 12px 14px 13px; border-radius: 20px; background: rgba(28,28,32,.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.1); color: #fff; opacity: 0; transform: translate3d(0, -12px, 0); transition: opacity .32s cubic-bezier(.2,.7,.2,1), transform .32s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.kjr__alert.kjr__push { position: absolute; left: auto; right: 0; }
.kjr__push.is-on { opacity: 1; transform: none; transition-delay: .35s; }
.kjr__push .kp-ic { width: 38px; height: 38px; border-radius: 9px; background: var(--lime); display: grid; place-items: center; flex: none; overflow: hidden; }
.kjr__push .kp-ic img { width: 24px; height: 24px; display: block; }
.kjr__push .kp-b { min-width: 0; flex: 1; }
.kjr__push .kp-h { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 750; }
.kjr__push .kp-h small { font-weight: 500; color: rgba(255,255,255,.55); font-size: 12.5px; }
.kjr__push p { margin: 2px 0 0; font-size: 14px; line-height: 1.35; color: rgba(255,255,255,.9); }
.kjr__push .kp-only { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(199,230,53,.14); color: var(--lime); font-size: 11.5px; font-weight: 700; }
.kjr__push .kp-only i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(199,230,53,.25); }
@media (min-width: 701px) { .kjr__alerts { width: min(360px, 40vw); } }
@media (max-width: 700px) { .kjr__alert.kjr__push { position: relative; left: 0; right: auto; width: auto; padding: 10px 12px 11px; } .kjr__push p { font-size: 13.5px; } .kjr__push .kp-only { white-space: nowrap; } .kjr__fence .f-t { display: none; } }

/* the geofence: the grounds outlined, the push's reach; outside is dimmed */
.kjr__fence { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .5s ease-out; z-index: 21; }
.kjr__fence.is-on { opacity: 1; }
.kjr__fence .f-out { fill: rgba(5,6,7,.55); fill-rule: evenodd; }
.kjr__fence .f-line { fill: none; stroke: var(--lime); stroke-width: .35; stroke-dasharray: 1.2 1; vector-effect: non-scaling-stroke; stroke-width: 2px; }
.kjr__fence .f-glow { fill: rgba(199,230,53,.07); }
.kjr__fence .f-t { font: 700 1.3px/1 var(--f); fill: var(--lime); letter-spacing: .1em; text-transform: uppercase; }

/* the route: dots from the gate to the stage */
.kjr__trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 22; opacity: 0; transition: opacity .4s ease-out; }
.kjr__trail.is-on { opacity: 1; }
.kjr__trail path { fill: none; stroke: var(--lime); stroke-width: .38; stroke-linecap: round; stroke-dasharray: .01 1.1; filter: drop-shadow(0 0 .3px rgba(0,0,0,.8)); }
.kjr__trail.is-on path { animation: kjr-trail 1.6s linear infinite; }
@keyframes kjr-trail { to { stroke-dashoffset: -1.11; } }

/* rain: the kit's streaks, denser, brighter and faster; the sky a little darker */
.kjr__storm::before { opacity: .85; background: repeating-linear-gradient(104deg, transparent 0 14px, rgba(215, 228, 255, .22) 14px 15.5px, transparent 15.5px 31px); animation-duration: .42s; }
.kjr__storm { background: linear-gradient(180deg, rgba(8, 12, 20, .7), rgba(8, 12, 20, .4) 55%, rgba(8, 12, 20, .6)); }
.kjr__storm::after { animation-duration: 9s; }

/* the counters become the report: the journey's sticky frame hands over to this one; the four numbers start where the counters
   were (the same row, the same gutter) and fly down onto the page; then the rest of the report fills in */
.kjr__counters li[data-k="3"] b { color: var(--lime); }
.rep { position: relative; height: 360vh; margin-top: -100vh; padding: 0; z-index: 3; }   /* starts while the day is still pinned: the counters hand over in place */
.rep-vp { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: rgba(10,10,11,0); }   /* alpha from r12.js: the photo fades to black under the counters */
.rep-head { position: absolute; left: 0; right: 0; top: clamp(28px, 5vh, 56px); z-index: 2; pointer-events: none; }
.rep-head .cap { margin-bottom: 12px; }
.rep-head .h2 { font-size: clamp(26px, 2.5vw, 36px); max-width: 300px; }
.rep-start { position: absolute; left: clamp(16px, 3.4vw, 48px); right: clamp(16px, 3.4vw, 48px); bottom: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; visibility: hidden; }
.rep-start i { display: block; height: 76px; }
.rep-stage { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); width: min(720px, calc(100% - 32px)); height: min(76vh, 920px); }
.rep-stack { position: absolute; inset: 0; }
.rep-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 6px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.9); opacity: 0; transition: transform .8s var(--ease), opacity .6s ease-out; }
.rep-stack img:nth-child(1) { transform: rotate(-5deg) translate(-26px, 14px); }
.rep-stack img:nth-child(2) { transform: rotate(3deg) translate(22px, 8px); }
.rep.is-pages .rep-stack img { opacity: 1; }
.rep.is-pages .rep-stack img:nth-child(1) { transform: rotate(-7deg) translate(-44px, 18px); }
.rep.is-pages .rep-stack img:nth-child(2) { transform: rotate(5deg) translate(40px, 10px); }
.rep-card { position: absolute; inset: 0; padding: clamp(22px, 3.4vw, 48px) clamp(22px, 3.6vw, 52px); border-radius: 6px; background: #F4F1EA; color: #0B0C0E; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(0,0,0,.06); display: flex; flex-direction: column; overflow: hidden; transform: translate3d(0, 6vh, 0) scale(.96); opacity: 0; will-change: transform, opacity; }
.rc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #4b4b4b; }
.rc-top b { color: #0B0C0E; }
.rc-tag { padding: 4px 8px; border-radius: 4px; background: var(--lime); color: #0B0C0E; letter-spacing: .1em; }
.rc-h { margin-top: clamp(18px, 3vh, 34px); font-size: clamp(26px, 3.4vw, 46px); font-weight: 850; letter-spacing: -.035em; line-height: .98; }
.rc-sub { margin-top: 10px; font-size: 14px; line-height: 1.4; color: #4b4b4b; max-width: 58ch; }
.rc-nums { margin-top: clamp(16px, 3vh, 30px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rc-slot { position: relative; padding-top: 12px; border-top: 2px solid #0B0C0E; display: grid; gap: 4px; min-height: 92px; }
.rc-slot small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #4b4b4b; }
.rc-slot b { font-size: clamp(26px, 2.8vw, 40px); font-weight: 850; letter-spacing: -.03em; line-height: 1; opacity: 0; transform: translateY(6px); transition: opacity .25s ease-out, transform .25s ease-out; }
.rc-slot.hi b { background: var(--lime); color: #0B0C0E; display: inline-block; padding: 0 6px; margin-left: -6px; border-radius: 3px; justify-self: start; }
.rc-slot span { font-size: 11.5px; line-height: 1.3; color: #4b4b4b; opacity: 0; transition: opacity .3s ease-out .1s; }
.rc-slot.filled b, .rc-slot.filled span { opacity: 1; transform: none; }
.rc-more { margin-top: clamp(14px, 2.6vh, 26px); border-top: 1px solid rgba(0,0,0,.14); flex: 1; min-height: 0; overflow: hidden; }
.rc-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,.08); font-size: 12.5px; line-height: 1.35; color: #3a3a3a; opacity: 0; transform: translateY(8px); transition: opacity .4s ease-out, transform .4s ease-out; }
.rc-row .rc-n { font-weight: 700; color: #777; font-variant-numeric: tabular-nums; }
.rc-row .rc-t b { display: block; font-weight: 750; color: #0B0C0E; font-size: 13.5px; }
.rc-row .rc-v { font-weight: 800; font-size: 15px; color: #0B0C0E; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep.is-more .rc-row { opacity: 1; transform: none; }
.rc-foot { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; gap: 16px; font-size: 10.5px; color: #666; }
.rc-foot img.rc-logo { display: inline-block; vertical-align: -3px; margin-left: 4px; width: 66px; height: 15px; }
.rep-flies { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 4; }
.rep-fly { position: absolute; left: 0; top: 0; display: grid; gap: 4px; padding: 14px 18px; border-radius: 16px; background: rgba(11,12,14,.66); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; transform-origin: 0 0; will-change: transform, opacity; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.rep-fly b { font-size: clamp(24px, 2.3vw, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.rep-fly span { font-size: 13.5px; color: rgba(255,255,255,.66); line-height: 1.25; white-space: nowrap; }
.rep-fly.lime b { color: var(--lime); }
.rep-acts { position: absolute; left: 0; right: 0; bottom: clamp(16px, 3vh, 32px); display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; opacity: 0; transform: translateY(10px); transition: opacity .4s ease-out, transform .4s ease-out; pointer-events: none; }
.rep.is-more .rep-acts { opacity: 1; transform: none; pointer-events: auto; }
.maths-wrap { padding: 0; } .maths-wrap .maths-sec { padding-top: clamp(64px, 9vw, 130px); }
.rc-foot > span:first-child { white-space: nowrap; }
@media (max-width: 760px) {
  .rep { height: 340vh; }
  .rep-head .h2 { font-size: 24px; }
  .rep-start { grid-template-columns: repeat(4, 1fr); gap: 6px; } .rep-start i { height: 54px; }
  .rep-stage { width: calc(100% - 24px); height: min(60vh, 640px); top: 50%; }
  .rep-head { top: 20px; } .rep-head .cap { margin-bottom: 8px; }
  .rc-nums { grid-template-columns: 1fr 1fr; gap: 10px; } .rc-slot { min-height: 70px; } .rc-slot span { display: none; }
  .rc-row { font-size: 11.5px; padding: 7px 0; } .rc-row .rc-t b { font-size: 12.5px; } .rc-row:nth-child(n+5) { display: none; }
  .rc-sub { display: none; }
  .rep-fly { padding: 9px 8px; border-radius: 12px; } .rep-fly b { font-size: 17px; } .rep-fly span { font-size: 10.5px; }
  .rep-acts { bottom: 14px; } .rep-acts .cta, .rep-acts .btn-o { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .rep { height: auto; } .rep-vp { position: relative; height: auto; padding: 64px 0 40px; }
  .rep-head { position: relative; top: auto; margin-bottom: 28px; } .rep-stage { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; }
  .rep-card { opacity: 1; transform: none; } .rc-slot b, .rc-slot span, .rc-row { opacity: 1; transform: none; } .rep-flies, .rep-start { display: none; }
  .rep-acts { position: relative; bottom: auto; margin-top: 24px; opacity: 1; transform: none; pointer-events: auto; }
}

/* ---------- praise (his comments 17.10): the whole block centred; the laurel opened so the leaves hold 4.8 without touching it ---------- */
.praise .sec-head.row { display: grid !important; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; text-align: center; gap: 28px; }
.praise .sec-head.row > * { margin: 0; }
.praise .h2, .praise .h2 .l2 { text-align: center; }
.praise .rating.big5 { justify-self: center; }
.rating.big5 .laurel { width: 440px; height: 173px; }
.rating.big5 .r-in { top: 22px; height: auto; }
.rating.big5 .r-in b { font-size: 104px; letter-spacing: -.05em; }
.rating.big5 .stores { justify-content: center; margin-top: 6px; gap: 6px 18px; }
@media (max-width: 640px) { .rating.big5 .laurel { width: 320px; height: 126px; } .rating.big5 .r-in { top: 14px; } .rating.big5 .r-in b { font-size: 76px; } }

/* ---------- case-studies.html ---------- */
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cs-card { padding: 22px 22px 20px; border-radius: 20px; background: #121214; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); display: grid; gap: 18px; align-content: start; }
.cs-logo { height: 34px; width: auto; max-width: 160px; object-fit: contain; justify-self: start; }
.cs-card .pq { margin: 0; }
.cs-card .pq blockquote { font-size: 17px; line-height: 1.4; }
@media (max-width: 900px) { .cs-grid { grid-template-columns: 1fr; } }

/* ---------- last round (his comments 17.10 16:00) ---------- */
.cprev-spot.is-ping::after { animation: none; display: none; }   /* no flash when the frame lands */
.cprev-spot { box-shadow: 0 0 0 3px var(--lime), 0 0 0 9999px rgba(10,10,11,.5); }
.korb__item img { width: 46%; height: 46%; object-fit: contain; }   /* every logo in the same box, the same visual size */
.korb__item img[src*="ticketmaster"] { width: 62%; height: 30%; }

.rep-head { opacity: 0; transition: opacity .4s ease-out; }
.rep.is-head .rep-head { opacity: 1; }
#journey .kjr__counters { transition: opacity .25s ease-out; }
#journey .kjr__counters.is-gone { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .rep { margin-top: 0; } .rep-vp { background: var(--ink); } .rep-head { opacity: 1; } }

/* industry screens: our artists, thumbnails, a flat map with pins where our stages are */
.gl4-list li { grid-template-columns: calc(var(--u) * 40) 1fr; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 9) calc(var(--u) * 18); }
.gl4-av { width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 4px; background: #d6d6d6; overflow: hidden; display: grid; place-items: center; font: 700 calc(var(--u) * 12)/1 Arial, Helvetica, sans-serif; color: #777; font-style: normal; }
.gl4-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl4-nm { display: grid; gap: calc(var(--u) * 2); }
.ab5 .ab5-ph img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; filter: saturate(.6); }
.ab5 .ab5-links { position: absolute; top: calc(var(--u) * 560); left: calc(var(--u) * 18); font-size: calc(var(--u) * 13); color: #2a6bd1; }
.ab5 .ab5-links a { color: #2a6bd1; text-decoration: underline; }
.smap .smap-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(1.55) contrast(.75); }
.smap .gl4-h { z-index: 2; } .smap .gl4-s { z-index: 2; background: #EFEFEF; left: 0; right: 0; padding: calc(var(--u) * 4) calc(var(--u) * 18) calc(var(--u) * 10); top: calc(var(--u) * 110); }
.smap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 60); background: #EFEFEF; z-index: 1; }
.smap-pin { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -100%); z-index: 2; display: grid; justify-items: center; gap: calc(var(--u) * 2); }
.smap-pin::after { content: ""; width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #d9382b; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.smap-pin b { font: 700 calc(var(--u) * 11)/1 Arial, Helvetica, sans-serif; color: #222; background: rgba(255,255,255,.9); padding: calc(var(--u) * 2) calc(var(--u) * 5); border-radius: 3px; white-space: nowrap; }
.smap-legend { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 72); padding: calc(var(--u) * 10) calc(var(--u) * 18); background: #fff; border-top: 1px solid #ddd; display: flex; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 11); color: #777; z-index: 2; }
.smap-legend span:nth-child(1) { color: #d9382b; } .smap-legend span:nth-child(2) { color: #3a6fd8; } .smap-legend span:nth-child(3) { color: #7a9a3a; }
.smap .gl4-tab { z-index: 2; }

/* the form: two fields first, the rest behind one tap */
.f-step2-btn { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 0; background: none; border: 0; color: var(--lime); font: 600 15px/1.3 var(--f); cursor: pointer; }
.f-step2-btn small { font-size: 12.5px; color: var(--mute); font-weight: 500; }
.f-more { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; grid-column: 1 / -1; }
.f-more .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .f-more { grid-template-columns: 1fr; } }

/* the demo phone in a real iPhone body */
.fin-ph { position: relative; width: 100%; aspect-ratio: 417.3 / 871.3; }
.fin-frame { position: absolute; left: -1.437%; top: -0.688%; width: 102.87%; height: 101.38%; max-width: none; pointer-events: none; z-index: 0; }
.fin-ph .phone.home { position: absolute; left: 3.27%; top: 1.567%; width: 93.46%; height: 96.87%; aspect-ratio: auto; border-radius: 12.65% / 5.85%; box-shadow: none; z-index: 1; }
.fin-phone .url { margin-top: 12px; }
@media (max-width: 760px) { .rc-foot { flex-direction: column; gap: 4px; } .rc-foot > span:first-child { white-space: nowrap; } }

/* ---------- v8 (20.10): no top bar on the landing page; the map lives; tickets light up lime ---------- */
body.no-nav .site-head { display: none; }
body.no-nav .menu { display: none !important; }
.stub4.is-on { background: var(--lime); box-shadow: 0 18px 30px -16px rgba(199,230,53,.55); }
.stub4.is-on .st-k, .stub4.is-on .st-p { color: #0E1108; }

/* the stage that is playing: a slow pink-and-lime pulse on the ENEA stage */
.h11-glow { position: absolute; left: calc(195 * var(--u)); top: calc(300 * var(--u)); width: calc(150 * var(--u)); height: calc(90 * var(--u)); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,120,150,.55), rgba(255,120,150,.18) 55%, transparent); mix-blend-mode: screen; animation: h11-glow 2.2s ease-in-out infinite; pointer-events: none; }
@keyframes h11-glow { 0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.92); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
/* the stage sign, flat and readable, where the baked isometric one was */
.h11-sign { position: absolute; left: calc(195 * var(--u)); top: calc(226 * var(--u)); transform: translate(-50%, 0); display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)) calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(11,12,14,.86); box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.1); white-space: nowrap; z-index: 2; }
.h11-sign .jp-dot { flex: none; animation: h11-dot 1.6s ease-in-out infinite; }
@keyframes h11-dot { 0%, 100% { box-shadow: 0 0 0 calc(3 * var(--u)) rgba(143,211,184,.25); } 50% { box-shadow: 0 0 0 calc(6 * var(--u)) rgba(143,211,184,.08); } }
.h11-sign span { display: grid; line-height: 1.15; }
.h11-sign small { font-size: calc(9.5 * var(--u)); letter-spacing: calc(.8 * var(--u)); text-transform: uppercase; color: #B9B3C6; font-weight: 600; }
.h11-sign b { font-size: calc(14 * var(--u)); font-weight: 800; color: #fff; }
.h11-sign::after { content: ""; position: absolute; left: 50%; bottom: calc(-6 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin-left: calc(-6 * var(--u)); background: rgba(11,12,14,.86); transform: rotate(45deg); }
/* "Me": the ring breathes like the iOS location dot */
.h11-mk.you i { animation: h11-me 2.4s ease-in-out infinite; }
@keyframes h11-me { 0%, 100% { box-shadow: 0 0 0 calc(2.5 * var(--u)) #C7E635, 0 0 0 calc(6 * var(--u)) rgba(199,230,53,.28), 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.5); } 50% { box-shadow: 0 0 0 calc(2.5 * var(--u)) #C7E635, 0 0 0 calc(16 * var(--u)) rgba(199,230,53,.06), 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.5); } }
/* the tram: a small lit carriage sliding down the line on the left, over and over */
.h11-tram { position: absolute; left: 0; top: 0; width: calc(13 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(3 * var(--u)); background: #2b2e33; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.6); display: grid; grid-template-rows: repeat(3, 1fr); gap: calc(3 * var(--u)); padding: calc(5 * var(--u)) calc(3 * var(--u)); animation: h11-tram 9s linear infinite; z-index: 1; }
.h11-tram i { display: block; border-radius: 1px; background: #F2D27A; box-shadow: 0 0 calc(6 * var(--u)) rgba(242,210,122,.9); }
.h11-tram::before { content: ""; position: absolute; left: 50%; top: calc(-10 * var(--u)); width: calc(20 * var(--u)); height: calc(30 * var(--u)); margin-left: calc(-10 * var(--u)); background: radial-gradient(closest-side, rgba(255,240,200,.55), transparent); }
@keyframes h11-tram { from { transform: translate3d(calc(2 * var(--u)), calc(40 * var(--u)), 0) rotate(-7deg); } to { transform: translate3d(calc(60 * var(--u)), calc(520 * var(--u)), 0) rotate(-7deg); } }
@media (prefers-reduced-motion: reduce) { .h11-glow, .h11-tram, .h11-mk.you i, .h11-sign .jp-dot { animation: none; } }