/* ==========================================================
   DP World ILT20 Season 5 — brand-alignment demo layer
   Loaded after styles.css. Only overrides; no layout rewrite.
   Palette (Brand Guidelines p.35–37):
   #38004F purple · #F00080 pink · #610886 purple 2 · #B9E249 green · #FFFFFF
   ========================================================== */

/* Cutmark subsets already ship – and — and curly quotes: let them render in Cutmark */
@font-face{font-family:"BC";src:url(/assets/fonts/CutmarkNarrow-Bold.woff2?v=pl2) format("woff2");font-weight:700 800;font-display:swap;unicode-range:U+00E9,U+2013,U+2014,U+2018,U+2019,U+201C,U+201D}
@font-face{font-family:"BC";src:url(/assets/fonts/CutmarkNarrow-Medium.woff2?v=pl2) format("woff2");font-weight:500 600;font-display:swap;unicode-range:U+00E9,U+2013,U+2014,U+2018,U+2019,U+201C,U+201D}

:root{
  --ink:#38004F;            /* page background: primary purple */
  --purple:#38004F;
  --p2:#610886;             /* secondary purple */
  --card:rgba(97,8,134,.55);
  --line:rgba(255,255,255,.16);
  --soft:#fff;
  --dim:rgba(255,255,255,.74);
}

/* ---------- global surfaces ---------- */
body{background:var(--ink)}
.nav{background:rgba(56,0,79,.94);border-bottom:1px solid rgba(240,0,128,.35)}
.sec-alt{background:var(--p2)}
.cur-menu,.tp-menu{background:var(--ink)}
.cur-menu li[aria-selected="true"] small{color:var(--p2)}
.sel select{background-color:var(--ink)}
.hero-art{background-color:var(--ink)}
.pcard img,.iggrid2 .igt{background:var(--p2)}
.stand td{border-bottom-color:var(--line)}
.stand tbody tr:hover{background:rgba(97,8,134,.6)}
.foot{background:var(--ink)}
.foot-legal{border-top-color:var(--line)}
.ig-follow{background:linear-gradient(var(--ink),var(--ink)) padding-box,linear-gradient(120deg,var(--pink),var(--p2) 55%,var(--lime)) border-box}
.ig-ico{background:linear-gradient(135deg,var(--pink),var(--p2))}
.btn-o:hover{color:var(--ink)}

/* ---------- Hero element (falcon calligraphy, Brand Guidelines p.49–56) ---------- */
.falcon{position:absolute;pointer-events:none;user-select:none;z-index:0;max-width:none}

/* hero: big gradient falcon, hard-cropped off the left edge, behind the copy */
.hero{background:var(--ink)}
.hero .falcon-hero{left:-12%;top:-18%;width:min(78vw,1100px);opacity:.9;transform:rotate(-8deg)}
.hero .falcon-hero-2{right:-14%;bottom:-38%;width:min(52vw,760px);opacity:.28;transform:rotate(14deg);z-index:1}
.hero-copy{z-index:3}
.hero h1{text-shadow:0 4px 30px rgba(56,0,79,.55)}
.hero-art{z-index:2}
.hero-art::after{background:linear-gradient(rgba(56,0,79,0),var(--ink))}
.hero-tags{margin-top:18px;font:600 16px/1 "BC";letter-spacing:.06em;text-transform:uppercase;color:#fff;opacity:.9}
.hero-tags span{color:var(--lime)}

/* stats: full pink field, purple element (in-stadia style, p.106) */
.stats{background:var(--pink)!important;isolation:isolate}
.stats .falcon-stats{right:-8%;top:-30%;width:min(60vw,820px);opacity:.9;transform:rotate(-10deg);z-index:0}
.stats .wrap{z-index:1}
.stats .h2{color:#fff}
.stats .pink-lines i{background:var(--lime);box-shadow:none}
.stats .stat-card{background:var(--ink);border:0;box-shadow:0 12px 28px rgba(56,0,79,.35)}
.stats .stat-card:hover{border:0;box-shadow:0 14px 34px rgba(56,0,79,.5)}
.stats .stat-number{color:var(--lime)}
.stats .fine{color:#fff;opacity:.85}

/* teams: green field with purple element (secondary colour as accent block) */
#teams{position:relative;overflow:hidden;isolation:isolate;background:var(--lime)}
#teams .falcon-teams{left:-10%;bottom:-40%;width:min(56vw,760px);opacity:.22;transform:rotate(10deg)}
#teams .wrap{position:relative;z-index:1}
#teams .h2{color:var(--ink)}
#teams .eyebrow{color:var(--ink);opacity:.8}
#teams .team{background:var(--ink);border-color:transparent;box-shadow:0 10px 24px rgba(56,0,79,.25)}
#teams .team-champ{border:2px solid var(--pink)}
#teams .tag{background:var(--pink);color:#fff}

/* final CTA: pink element cropped on the right edge */
.cta .falcon-cta{right:-10%;top:-20%;width:min(55vw,780px);opacity:.85;transform:rotate(12deg);z-index:-1}
.cta::before{background:linear-gradient(90deg,rgba(56,0,79,.94) 0%,rgba(56,0,79,.7) 45%,rgba(56,0,79,.2) 100%)}

.foot-tags{margin-top:14px;font:600 14px/1.4 "BC";letter-spacing:.06em;text-transform:uppercase;color:var(--lime)}

/* demo ribbon */
.demo-flag{position:fixed;left:12px;bottom:12px;z-index:60;padding:8px 12px;border-radius:4px;background:var(--lime);color:var(--ink);font:700 13px/1 "BC";letter-spacing:.08em;text-transform:uppercase;box-shadow:0 6px 18px rgba(0,0,0,.3)}

@media (max-width:899.98px){
  .hero .falcon-hero{left:-30%;top:auto;bottom:-6%;width:130vw;opacity:.55}
  .hero .falcon-hero-2{display:none}
  .stats .falcon-stats{right:-40%;top:-10%;width:120vw;opacity:.5}
  #teams .falcon-teams{width:110vw;left:-30%;bottom:-20%}
  .cta .falcon-cta{right:-40%;width:120vw;opacity:.6}
  .hero-tags{font-size:14px}
}
@media (prefers-reduced-motion:no-preference){
  .hero .falcon-hero{animation:falconIn 1.2s cubic-bezier(.2,.7,.2,1) both}
  @keyframes falconIn{from{opacity:0;transform:rotate(-14deg) scale(.94)}}
}

/* ===== v2: softer hero edge, no flat runs of colour ===== */
/* hero video fades out on the left AND bottom instead of ending on a hard line */
@media (min-width:900px){
  .hero-art{bottom:0;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,#000 50%,rgba(0,0,0,.6) 72%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,#000 50%,rgba(0,0,0,.6) 72%,transparent 100%);
    mask-composite:intersect}
  .hero-art::after{display:none}
}
.hero{border-bottom:0}

/* alt sections: purple 2 in the middle, melting into the base purple at both edges,
   so two alt sections in a row still read as two blocks */
.sec-alt{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,var(--ink) 0%,var(--p2) 18%,var(--p2) 82%,var(--ink) 100%)}
.sec-alt::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(70vw,900px);aspect-ratio:1600/1463;background:url(/s5/el/falcon-pink.webp?v=pl2) center/contain no-repeat;opacity:.1}
#stars::before{right:-18%;top:-22%;transform:rotate(-10deg)}
#matchday::before{left:-20%;bottom:-30%;transform:rotate(12deg);opacity:.08}
#reviews::before{right:-16%;top:-35%;transform:rotate(8deg);opacity:.14}
#tickets::before{left:-22%;top:-20%;transform:rotate(-14deg);opacity:.1}
#faq::before{right:-20%;bottom:-38%;transform:rotate(-6deg);opacity:.12}
#stats::before{display:none}
.stats{background:var(--pink)!important}

/* cards sit on the darker purple so they separate from the alt background */
.rev,.sec-alt .tier,.sec-alt .mdc,.sec-alt .pcard{background:var(--ink);border-color:rgba(255,255,255,.12)}
.rev .ava{background:var(--p2)}

/* base sections get a quiet diagonal tint so they are not flat either */
.sec:not(.sec-alt):not(#teams){background:radial-gradient(120% 80% at 100% 0%,rgba(97,8,134,.55),transparent 60%),var(--ink)}

/* short section: no forced full-screen height */
#reviews{min-height:0}

/* ===== v3: Cutmark Nr XBold / Nr Demi / Light (glyphs extracted from the brand guidelines PDF) ===== */
@font-face{font-family:"BC";src:url(/s5/fonts/Cutmark-NrXBold.woff2?v=pl2) format("woff2");font-weight:700 800;font-display:swap;unicode-range:U+0020,U+0021,U+0023,U+0024,U+0025,U+0026,U+002A,U+002B,U+002C,U+002D,U+002E,U+002F,U+0030,U+0031,U+0032,U+0033,U+0034,U+0035,U+0036,U+0037,U+0038,U+0039,U+003F,U+0040,U+0041,U+0042,U+0043,U+0044,U+0045,U+0046,U+0047,U+0048,U+0049,U+004A,U+004B,U+004C,U+004D,U+004E,U+004F,U+0050,U+0051,U+0052,U+0053,U+0054,U+0055,U+0056,U+0057,U+0058,U+0059,U+005A,U+0061,U+0062,U+0063,U+0064,U+0065,U+0066,U+0067,U+0068,U+0069,U+006A,U+006B,U+006C,U+006D,U+006E,U+006F,U+0070,U+0071,U+0072,U+0073,U+0074,U+0075,U+0076,U+0077,U+0078,U+0079,U+007A,U+02C6}
@font-face{font-family:"BC";src:url(/s5/fonts/Cutmark-NrDemi.woff2?v=pl2) format("woff2");font-weight:500 600;font-display:swap;unicode-range:U+0020,U+0021,U+0023,U+0024,U+0025,U+0026,U+002A,U+002C,U+002D,U+002E,U+0030,U+0031,U+0032,U+0033,U+0034,U+0035,U+0036,U+0037,U+0038,U+0039,U+003F,U+0040,U+0041,U+0042,U+0043,U+0044,U+0045,U+0046,U+0047,U+0048,U+0049,U+004A,U+004B,U+004C,U+004D,U+004E,U+004F,U+0050,U+0051,U+0052,U+0053,U+0054,U+0055,U+0056,U+0057,U+0058,U+0059,U+005A,U+0061,U+0062,U+0063,U+0064,U+0065,U+0066,U+0067,U+0068,U+0069,U+006A,U+006B,U+006C,U+006D,U+006E,U+006F,U+0070,U+0071,U+0072,U+0073,U+0074,U+0075,U+0076,U+0077,U+0078,U+0079,U+007A,U+02C6,U+2013,U+2044}
@font-face{font-family:"B";src:url(/s5/fonts/Cutmark-Light.woff2?v=pl2) format("woff2");font-weight:300 500;font-display:swap;unicode-range:U+0020,U+0021,U+0023,U+0024,U+0025,U+0026,U+0027,U+0028,U+0029,U+002A,U+002C,U+002D,U+002E,U+002F,U+0030,U+0031,U+0032,U+0033,U+0034,U+0035,U+0036,U+0037,U+0038,U+0039,U+003A,U+003F,U+0040,U+0041,U+0042,U+0043,U+0044,U+0045,U+0046,U+0047,U+0048,U+0049,U+004A,U+004B,U+004C,U+004D,U+004E,U+004F,U+0050,U+0051,U+0052,U+0053,U+0054,U+0055,U+0056,U+0057,U+0058,U+0059,U+005A,U+005B,U+005D,U+0061,U+0062,U+0063,U+0064,U+0065,U+0066,U+0067,U+0068,U+0069,U+006A,U+006B,U+006C,U+006D,U+006E,U+006F,U+0070,U+0071,U+0072,U+0073,U+0074,U+0075,U+0076,U+0077,U+0078,U+0079,U+007A,U+007C,U+00E9,U+2013,U+2014,U+2018,U+2019,U+201C,U+201D,U+2044}
body{font-weight:300;letter-spacing:.01em}
b,strong{font-weight:500}

/* ===== v4 ===== */
/* 1. hero: drop the second falcon that showed through the video fade */
.hero .falcon-hero-2{display:none}

/* 2. last season: video top lines up with the headline, not the eyebrow */
@media (min-width:901px){.last-media{margin-top:29px}}

/* 3. FAQ -> final CTA: no dark band, no seam */
#faq{background:linear-gradient(180deg,var(--ink) 0%,var(--p2) 18%,var(--p2) 100%)}
#faq::before{bottom:auto;top:-12%}
.cta-in{position:relative;z-index:1}
.cta::after{content:"";position:absolute;left:0;right:0;top:0;height:clamp(140px,22vh,240px);z-index:0;pointer-events:none;
  background:linear-gradient(180deg,var(--p2) 0%,rgba(97,8,134,.7) 35%,rgba(97,8,134,0) 100%)}
.cta .falcon-cta{top:8%}
.cta{border-top:0}

/* ===== v5: final CTA falcon moves to the left, behind the headline ===== */
.cta .falcon-cta{right:auto;left:-10%;top:4%;width:min(58vw,820px);opacity:.75;transform:rotate(-12deg)}
@media (max-width:899.98px){.cta .falcon-cta{left:-40%;width:120vw;opacity:.5}}

/* ===== v6: final CTA built like the hero — gradient falcon left, video right with soft fades ===== */
.cta{background:var(--ink)}
.cta .falcon-cta{left:-12%;right:auto;top:-14%;width:min(78vw,1100px);opacity:.9;transform:rotate(-8deg)}
.cta-h{text-shadow:0 4px 30px rgba(56,0,79,.55)}
.cta-side{background:rgba(56,0,79,.8)}
@media (min-width:900px){
  .cta::before{display:none}
  .cta>.vposter,.cta-v{left:auto;right:0;width:58%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 25%,#000 70%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 25%,#000 70%,transparent 100%);
    mask-composite:intersect}
}
@media (max-width:899.98px){.cta .falcon-cta{left:-40%;top:-6%;width:130vw;opacity:.55}}

/* ===== v7: hide the CTA poster frame once the video is playing ===== */
.cta>.vposter{transition:opacity .5s ease}
.cta:has(.cta-v.is-on)>.vposter{opacity:0}
.cta-v.is-on{opacity:1}

/* ===== v8: official Cutmark files from the ILT20 brand kit (Typography > Font), full character set ===== */
@font-face{font-family:"BC";src:url(/s5/fonts/Cutmark-NrXBold.woff2?v=pl2) format("woff2");font-weight:700 800;font-display:swap}
@font-face{font-family:"BC";src:url(/s5/fonts/Cutmark-NrDemi.woff2?v=pl2) format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:"B";src:url(/s5/fonts/Cutmark-Light.woff2?v=pl2) format("woff2");font-weight:300 500;font-display:swap}

/* ===== v9: keep at least one clearly visible falcon per block (Brand Guidelines p.53) ===== */
#teams .falcon-teams{opacity:.45}
@media (max-width:899.98px){
  .hero .falcon-hero{opacity:.75}
  .cta .falcon-cta{opacity:.75}
  #teams .falcon-teams{opacity:.4}
}

/* ===== v10: ILT20 feedback — white Teams / Venues sections ===== */
#teams{background:#fff!important}
#teams .falcon-teams{display:none}
#teams .team{background:var(--ink)}
#venues .venue{background:var(--ink)}

/* ===== v11: remaining off-palette fills ===== */
.seg,.tp-btn{background-color:rgba(97,8,134,.45)}
.rail-bar{background:rgba(97,8,134,.6)}

/* ===== v12: call feedback 13 Oct ===== */
/* hero = approved key visual (animation slot) + action bar */
.hero.hero-kv{display:block;min-height:0;padding:0;overflow:hidden;border-bottom:0;background:var(--ink)}
.hero-kv .kv,.hero-kv .kv img{display:block;width:100%;height:auto}
.kv-bar{position:relative;background:var(--ink)}
.kv-bar-in{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.kv-bar .hero-cities{margin:0;color:#fff}
.kv-bar .hero-sale{margin:0 0 0 auto;font:600 20px/1 "BC";text-transform:uppercase;color:#fff}
.kv-bar .hero-sale b{color:var(--lime);font-weight:800}
@media (max-width:899.98px){.kv-bar-in{flex-direction:column;align-items:stretch;text-align:center}.kv-bar .hero-sale{margin:0}.kv-bar .btn{width:100%}}

/* teams: two actions */
.t-acts{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:auto;padding:8px 14px 12px}
.t-acts .t-link{margin:0;min-height:36px}
.t-more{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid rgba(255,255,255,.3);border-radius:4px;font:600 14px/1 "BC",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;transition:background .25s,border-color .25s,color .25s}
.t-more:hover{background:#fff;border-color:#fff;color:var(--ink)}
.team{padding-bottom:0}

/* team picker: no "6" over a chosen crest */
.tp-crest[style*="url("]{background-color:transparent;background-size:contain}
.tp-crest[style*="url("]::before{content:none}

/* stats: falcon muted, per ILT */
.stats .falcon-stats{opacity:.18}

/* preloader veil (as on ilt20.ae) */
.veil{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 45%,var(--p2),var(--ink));transition:transform .8s cubic-bezier(.7,0,.2,1)}
.veil.up{transform:translateY(-100%)}
.veil-in{display:flex;flex-direction:column;align-items:center;gap:18px;animation:veilIn .5s cubic-bezier(.16,1,.3,1) both}
.veil-in img{width:170px;height:auto}
.veil-tag{font:800 26px/1 "BC",sans-serif;text-transform:uppercase;color:var(--lime);letter-spacing:.02em}
.veil-bar{width:180px;height:3px;background:rgba(255,255,255,.18);overflow:hidden;border-radius:2px}
.veil-bar i{display:block;height:100%;background:var(--lime);animation:veilBar .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes veilIn{from{opacity:0;transform:translateY(12px)}}
@keyframes veilBar{from{width:0}to{width:100%}}
html.veil-on{overflow:hidden}

/* ===== v13 ===== */
.stats .falcon-stats{opacity:.08}
/* preloader: same look as ilt20.ae's brand veil */
.veil{background:#140224;border-bottom:3px solid var(--lime);box-shadow:0 15px 40px rgba(0,0,0,.9);transition:transform .65s cubic-bezier(.77,0,.175,1);overflow:hidden}
.veil-glow{position:absolute;top:50%;left:50%;width:480px;height:480px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(240,0,128,.25) 0%,rgba(66,16,102,.45) 50%,transparent 70%);filter:blur(40px);animation:veilPulse 1.6s ease-in-out infinite alternate;pointer-events:none}
@keyframes veilPulse{from{transform:translate(-50%,-50%) scale(.9);opacity:.7}to{transform:translate(-50%,-50%) scale(1.15);opacity:1}}
.veil-in{position:relative;z-index:1;gap:0}
.veil-in img{width:clamp(140px,32vw,190px);margin-bottom:16px;filter:drop-shadow(0 0 25px rgba(240,0,128,.45))}
.veil-tag{margin-bottom:18px;font:800 clamp(.95rem,3.2vw,1.25rem)/1 "BC",sans-serif;letter-spacing:3px;background:linear-gradient(90deg,#fff 0%,var(--lime) 50%,#fff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#fff}
.veil-bar{width:130px;height:3px;background:rgba(255,255,255,.12);border-radius:3px}
.veil-bar i{background:linear-gradient(90deg,var(--pink),var(--lime));animation-duration:.45s}

/* ===== v14: ILT20 KV animation in the hero, full ticketing FAQ ===== */
.hero-kv .kv{position:relative;aspect-ratio:1600/616;background:#140224;overflow:hidden}
.hero-kv .kv-v,.hero-kv .kv-still,.hero-kv .kv-still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-kv .kv-still{opacity:0;transition:opacity .4s}
.hero-kv .kv.still .kv-still{opacity:1}
.hero-kv .kv.still .kv-v{display:none}

.faq-body{min-width:0}
.faq-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.faq-tools input{flex:1;min-width:220px;min-height:46px;padding:0 14px;border:1px solid var(--line);border-radius:6px;background:var(--ink);color:#fff;font:400 16px/1 "B",sans-serif}
.faq-tools input:focus{outline:2px solid var(--lime);outline-offset:1px}
.faq-n{font:600 15px/1 "BC",sans-serif;text-transform:uppercase;color:var(--lime)}
.faq-list summary{font-size:20px;line-height:1.15}
.faq-list summary a,.faq-a a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.faq-a p{padding:0 0 12px}
.faq-a p:last-child{padding-bottom:22px}
.faq-steps{margin:0 0 22px 22px;padding:0;color:#fff}
.faq-steps li{margin:4px 0}
.faq-more{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:20px}
@media (max-width:899.98px){.faq-list summary{font-size:18px}}

/* ===== v15 ===== */
.faq-pol{display:flex;flex-wrap:wrap;gap:8px 18px}
.faq-pol a{font:600 15px/1.2 "BC",sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.foot-pol{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px}
.foot-pol a{font-size:13px;color:var(--dim);text-decoration:underline;text-underline-offset:3px}

/* ===== v16: FAQ "show all" — smooth, no scroll jump ===== */
#faql{transition:height .55s cubic-bezier(.2,.8,.2,1);overflow:hidden;overflow-anchor:none}
.faq-more,.faq-body{overflow-anchor:none}
.faq-list details.fq-in{animation:fqIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes fqIn{from{opacity:0;transform:translateY(10px)}}
.faq-list .ans{transition:height .52s cubic-bezier(.4,0,.2,1);overflow-anchor:none}
.faq-list .ans>.faq-a{transition:opacity .4s ease .08s}
.faq-list details:not([open]) .ans>.faq-a{opacity:0}
/* the FAQ grows when expanded: keep it top-aligned so the content above never shifts
   (desktop sections are min-height:100svh with vertically centred content) */
#faq{justify-content:flex-start!important}
/* no scroll anchoring on this page: content that grows below the reading point must not pull the page */
html,body{overflow-anchor:none}
/* touch screens: no sticky hover on buttons, no tap delay */
.btn,.t-link,.t-more,.chip{touch-action:manipulation}
@media (hover:none){.btn-o:hover{background:transparent;color:#fff}.t-more:hover{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}}

/* ===== v17: mobile burger menu ===== */
.burger,.mnav{display:none}
@media (max-width:900px){
  .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;flex:none;width:42px;height:42px;padding:0 10px;margin-left:2px;border:1px solid rgba(255,255,255,.3);border-radius:4px;background:transparent;cursor:pointer;touch-action:manipulation}
  .burger i{display:block;height:2px;border-radius:2px;background:#fff}
  .burger i:nth-child(2){background:var(--lime)}
  .btn-nav{padding:8px 12px}
  .mnav{display:block;position:fixed;inset:0;z-index:90;background:rgba(20,2,36,.6);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
  .mnav.open{opacity:1;visibility:visible;transition:opacity .3s}
  .mnav-in{position:absolute;inset:0 0 0 auto;width:min(100%,420px);display:flex;flex-direction:column;gap:22px;padding:14px 20px 28px;overflow-y:auto;background:var(--ink);border-left:3px solid var(--lime);transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .mnav-in::before{content:"";position:absolute;z-index:-1;right:-30%;bottom:-8%;width:130%;aspect-ratio:1600/1463;background:url(/s5/el/falcon-pink.webp?v=pl2) center/contain no-repeat;opacity:.12;transform:rotate(-10deg);pointer-events:none}
  .mnav-in{isolation:isolate}
  .mnav.open .mnav-in{transform:none}
  .mnav-top{display:flex;align-items:center;justify-content:space-between;min-height:48px}
  .mnav-top img{height:40px;width:auto}
  .mnav-x{position:relative;width:42px;height:42px;border:1px solid rgba(255,255,255,.3);border-radius:4px;background:transparent;cursor:pointer;touch-action:manipulation}
  .mnav-x i{position:absolute;left:10px;right:10px;top:50%;height:2px;border-radius:2px;background:#fff}
  .mnav-x i:first-child{transform:rotate(45deg)}.mnav-x i:last-child{transform:rotate(-45deg)}
  .mnav-links{display:flex;flex-direction:column;margin-top:6px}
  .mnav-links a{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font:800 30px/1 "BC",sans-serif;text-transform:uppercase;color:#fff}
  .mnav-links a::after{content:"→";font-size:20px;color:var(--lime)}
  .mnav-links a.on{color:var(--lime)}
  .mnav.open .mnav-links a{animation:mnIn .45s cubic-bezier(.2,.8,.2,1) both}
  .mnav.open .mnav-links a:nth-child(2){animation-delay:.04s}.mnav.open .mnav-links a:nth-child(3){animation-delay:.08s}.mnav.open .mnav-links a:nth-child(4){animation-delay:.12s}.mnav.open .mnav-links a:nth-child(5){animation-delay:.16s}.mnav.open .mnav-links a:nth-child(6){animation-delay:.2s}
  @keyframes mnIn{from{opacity:0;transform:translateX(18px)}}
  .mnav-cta{width:100%}
  .mnav-pol{display:flex;flex-wrap:wrap;gap:8px 16px}
  .mnav-pol a{font-size:14px;color:var(--dim);text-decoration:underline;text-underline-offset:3px}
  .mnav-tags{margin-top:auto;font:600 14px/1.3 "BC",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--lime)}
  html.mnav-lock{overflow:hidden}
}

/* ===== v18: mobile sticky header + bottom ticket bar ===== */
/* overflow-x:hidden on body breaks position:sticky in iOS Safari; clip keeps the page from scrolling sideways without that */
body{overflow-x:clip}
.burger i:nth-child(2){background:#fff}
.mbar{display:none}
@media (max-width:900px){
  .nav{position:sticky;top:0;z-index:40}
  .mbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:35;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(56,0,79,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(240,0,128,.35);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .mbar.show{transform:none}
  .mbar .btn{width:100%;min-height:48px}
  html.mnav-lock .mbar{transform:translateY(110%)}
  .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* v19: softer bottom bar — longer ease-out glide + fade, button settles in just after the bar */
@media (max-width:900px){
  .mbar{opacity:0;transform:translateY(100%);transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .5s ease;will-change:transform,opacity}
  .mbar.show{opacity:1;transform:none}
  .mbar .btn{opacity:0;transform:translateY(10px) scale(.98);transition:opacity .45s ease .12s,transform .6s cubic-bezier(.22,1,.36,1) .12s}
  .mbar.show .btn{opacity:1;transform:none}
  html.mnav-lock .mbar{opacity:0;transform:translateY(100%)}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.mbar,.mbar .btn{transition:opacity .2s linear;transform:none}}

/* v20: fuller mobile menu — 11 sections, tighter rows */
@media (max-width:900px){
  .mnav-in{gap:18px}
  .mnav-links{margin-top:0}
  .mnav-links a{padding:11px 0;font-size:23px}
  .mnav-links a::after{font-size:17px}
  .mnav.open .mnav-links a:nth-child(7){animation-delay:.24s}.mnav.open .mnav-links a:nth-child(8){animation-delay:.28s}.mnav.open .mnav-links a:nth-child(9){animation-delay:.32s}.mnav.open .mnav-links a:nth-child(10){animation-delay:.36s}.mnav.open .mnav-links a:nth-child(11){animation-delay:.4s}
}

/* v21: menu must not pan sideways — the falcon layer overflowed the scrollable panel */
@media (max-width:900px){
  .mnav{overflow:hidden;overscroll-behavior:contain}
  .mnav-in{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
  .mnav-in::before{position:fixed;right:-20%;bottom:-6%;width:120%;max-width:none}
  .mnav-links a,.mnav-pol,.mnav-tags,.mnav-top{min-width:0;max-width:100%}
}
/* v22: falcon drawn as the panel's own background (no overflowing layer at all) */
@media (max-width:900px){
  .mnav-in::before{content:none}
  .mnav-in{overflow-x:clip;background:linear-gradient(rgba(56,0,79,.88),rgba(56,0,79,.88)),url(/s5/el/falcon-pink.webp?v=pl2) right -40% bottom -4%/125% auto no-repeat,var(--ink)}
}

/* v23: instant, smooth burger — always rendered off-screen, GPU slide, short stagger, light background art */
@media (max-width:900px){
  .mnav{display:block;visibility:hidden;opacity:0;transition:opacity .25s ease,visibility 0s linear .32s;contain:layout paint}
  .mnav.open{visibility:visible;opacity:1;transition:opacity .25s ease}
  .mnav-in{transform:translate3d(100%,0,0);transition:transform .32s cubic-bezier(.22,1,.36,1);will-change:transform;backface-visibility:hidden;
    background:linear-gradient(rgba(56,0,79,.88),rgba(56,0,79,.88)),url(/s5/el/falcon-pink-sm.webp?v=pl2) right -40% bottom -4%/125% auto no-repeat,var(--ink)}
  .mnav.open .mnav-in{transform:translate3d(0,0,0)}
  .mnav.open .mnav-links a{animation:mnIn2 .32s cubic-bezier(.22,1,.36,1) both}
  .mnav.open .mnav-links a:nth-child(1){animation-delay:.03s}.mnav.open .mnav-links a:nth-child(2){animation-delay:.045s}.mnav.open .mnav-links a:nth-child(3){animation-delay:.06s}.mnav.open .mnav-links a:nth-child(4){animation-delay:.075s}.mnav.open .mnav-links a:nth-child(5){animation-delay:.09s}.mnav.open .mnav-links a:nth-child(6){animation-delay:.105s}.mnav.open .mnav-links a:nth-child(7){animation-delay:.12s}.mnav.open .mnav-links a:nth-child(8){animation-delay:.135s}.mnav.open .mnav-links a:nth-child(9){animation-delay:.15s}.mnav.open .mnav-links a:nth-child(10){animation-delay:.165s}.mnav.open .mnav-links a:nth-child(11){animation-delay:.18s}
  @keyframes mnIn2{from{opacity:.25;transform:translate3d(14px,0,0)}}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.mnav-in{transition:none}.mnav.open .mnav-links a{animation:none}}

/* v24: ILT20's longer KV animation (1600x614) on desktop, square 768x768 version on phones */
.hero-kv .kv{aspect-ratio:1600/614}
@media (max-width:899.98px){.hero-kv .kv{aspect-ratio:1/1}}

/* v25: fixtures sit right under the hero (no big empty band) */
#matches{justify-content:flex-start!important;padding-top:clamp(28px,4vw,48px)!important}
@media (max-width:899.98px){#matches{padding-top:24px!important}}