/* Ngao ya Jamii: production, stadium branding and match-day photography. */
.ngao-page { --ng-accent:#b0bdeb; background:#07090e; color:#edf0f8; }
.ng-story { overflow:clip; }
.ng-story h1,.ng-story h2 { margin:0; font-family:var(--body); font-weight:500; letter-spacing:-.065em; line-height:1.03; }
.ng-story h2 { font-size:clamp(42px,6.5vw,100px); }
.ng-story em { color:var(--ng-accent); font-style:normal; }
.ng-story p,.ng-story figure { margin:0; }
.ng-story img { display:block; width:100%; height:auto; }
.ng-hero { height:calc(100svh - var(--header)); overflow:hidden; background:#050b0a; }
.ng-hero img { height:100%; object-fit:cover; object-position:43% 66%; }
.ng-scroll { position:relative; }
.ng-build { padding:90px var(--edge); background:#0a0e1d; }
.ng-build-copy p { color:#9ca8bd; font-size:13px; line-height:1.6; margin:24px 0 0; }
.ng-track { margin-top:40px; }
.ng-card { min-width:0; margin-bottom:35px!important; }
.ng-media { position:relative; }
.ng-build-track .ng-card { max-width:430px; margin-inline:auto!important; }
.ng-build-track .ng-media { height:min(75svh,620px); background:#060a14; display:flex; align-items:center; justify-content:center; border-radius:4px; overflow:hidden; }
.ng-build-track .ng-media img,.ng-build-track video { display:block; height:100%; width:100%; object-fit:contain; }
.ng-story video { background:#050810; cursor:pointer; }
.ng-card figcaption { padding-top:17px; color:#bac5db; font-size:12px; }
.ng-steps { display:none; }
.ng-identity { background:#e8ebf0; color:#10192b; padding:100px var(--edge) 70px; }
.ng-identity em { color:#65759f; }
.ng-identity header { margin-bottom:60px; }
.ng-shirts { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ng-shirts figure { background:#fff; display:flex; align-items:center; }
/* The supplied shirt mockup includes viewer chrome along its top edge. */
.ng-shirts img { object-fit:contain; clip-path:inset(5% 0 0); }
.ng-identity-pair { display:grid; grid-template-columns:1.4fr 1fr; align-items:center; gap:8%; margin:70px 0 0; }
.ng-identity-pair figure:last-child { width:85%; margin-left:auto; }
.ng-venue { padding:30px 0 0; background:#070b13; }
.ng-wide { margin:0 var(--edge) 30px!important; }
.ng-wide img { max-height:85svh; object-fit:contain; }
.ng-venue-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:0 var(--edge); align-items:center; }
.ng-venue-grid figure:nth-child(even) { margin-top:14%; }
.ng-venue-grid img { height:auto; object-fit:contain; }
.ng-arrival { margin:90px 0 0!important; }
.ng-arrival img { max-height:90svh; object-fit:contain; }
.ng-match { padding:85px var(--edge) 50px; background:#06090d; }
.ng-match-copy { display:flex; align-items:end; justify-content:space-between; gap:25px; }
.ng-match-copy p { font-size:12px; color:#9ca9b6; }
.ng-match-track img { width:100%; height:auto; }
.ng-moment { background:#080e1a; padding:40px var(--edge); }
.ng-moment-frame figure { margin:0 0 35px!important; }
.ng-moment-frame figcaption { padding-top:15px; color:#b1bfd9; font-size:13px; }
.ng-moment-caption { display:none; }
.ng-ending { padding:35px var(--edge) 90px; }
.ng-ending-photos { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:25px; }
.ng-ending-photos figure:last-child { margin-top:16%; }
.ng-credits { display:flex; justify-content:space-between; align-items:end; gap:40px; padding-top:90px; }
.ng-credits p { color:#92a0b3; font-size:12px; line-height:1.9; }
.ng-credits a { display:flex; justify-content:space-between; gap:80px; padding:17px 0; margin-top:22px; border-bottom:1px solid #46516b; font-size:14px; }
.ng-credits a span { font-size:23px; color:var(--ng-accent); }
.ng-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; width:55px; height:55px; padding:14px; color:#fff; background:#060b18b8; border:1px solid #ffffff70; border-radius:50%; backdrop-filter:blur(12px); cursor:pointer; }
.ng-play svg { width:100%; height:100%; }
.ng-play[hidden],.ng-sound[hidden] { display:none; }
.ng-film-message { position:absolute; bottom:15px; left:15px; right:15px; text-align:center; font-size:12px; color:#fff; }

.ng-enhanced .ng-hero img { transform:scale(1.05) translateY(var(--ng-hero-y,0px)); }
.ng-enhanced .ng-scroll { padding:0; }
.ng-enhanced .ng-pin { position:sticky; top:0; height:100svh; padding:calc(var(--header) + 30px) 0 20px; display:flex; flex-direction:column; overflow:hidden; }
.ng-enhanced .ng-build { height:460svh; }
.ng-enhanced .ng-build-copy { position:absolute; z-index:2; left:var(--edge); top:48%; transform:translateY(-50%); width:36%; pointer-events:none; }
.ng-enhanced .ng-build-copy h2 { font-size:clamp(34px,5.5vw,86px); }
.ng-enhanced .ng-build-copy p { max-width:230px; font-size:12px; }
.ng-enhanced .ng-track { position:relative; flex:1; min-height:0; width:100%; margin:0 0 15px; perspective:1500px; }
.ng-enhanced .ng-card { position:absolute; top:50%; margin:0!important; opacity:var(--ng-alpha,0); transform:translate3d(calc(-50% + var(--ng-x,0px)),-50%,var(--ng-z,0px)) rotateY(var(--ng-rotate,0deg)) scale(var(--ng-scale,1)); z-index:var(--ng-order,0); pointer-events:none; will-change:transform,opacity; }
.ng-enhanced .ng-card.is-active { pointer-events:auto; }
.ng-enhanced .ng-build-track .ng-card { left:66%; height:min(100%,670px); width:min(430px,44vw); display:flex; flex-direction:column; }
.ng-enhanced .ng-build-track .ng-media { flex:1; min-height:0; height:auto; width:100%; box-shadow:0 25px 70px #0005; }
.ng-enhanced .ng-build-track figcaption { flex-shrink:0; min-height:40px; }
.ng-enhanced .ng-match { height:460svh; }
.ng-enhanced .ng-match-copy { margin:0 var(--edge) 30px; }
.ng-enhanced .ng-match-copy h2 { font-size:clamp(35px,5.6vw,86px); }
.ng-enhanced .ng-match-track .ng-card { left:50%; width:min(calc(100% - var(--edge)*2),calc((100svh - var(--header) - 180px)*1.5)); }
.ng-enhanced .ng-match-track img { max-height:100%; object-fit:contain; border-radius:3px; box-shadow:0 25px 80px #0006; }
.ng-enhanced .ng-steps { display:flex; justify-content:center; gap:8px; margin:0; flex-shrink:0; }
.ng-steps button { width:37px; height:25px; border:0; background:transparent; padding:11px 3px; cursor:pointer; }
.ng-steps button span { display:block; height:2px; background:#ffffff30; border-radius:2px; transition:background .3s; }
.ng-steps button[aria-current="true"] span { background:var(--ng-accent); }
.ng-enhanced .ng-build .ng-steps { padding-left:32%; }
.ng-enhanced [data-ng-reveal] { opacity:.15; transform:translateY(28px); transition:opacity .9s,transform 1.1s cubic-bezier(.2,.7,.2,1); }
.ng-enhanced [data-ng-reveal].is-visible { opacity:1; transform:none; }
.ng-enhanced .ng-moment { height:230svh; }
.ng-enhanced .ng-moment-frame { position:relative; flex:1; min-height:0; margin:0 var(--edge); }
.ng-enhanced .ng-moment-frame figure { position:absolute; inset:0; margin:0!important; }
.ng-enhanced .ng-moment-frame img { height:100%; object-fit:contain; }
.ng-enhanced .ng-moment-frame figure:first-child { opacity:calc(1 - var(--ng-moment,0)); }
.ng-enhanced .ng-moment-frame figure:last-child { opacity:var(--ng-moment,0); }
.ng-enhanced .ng-moment-frame figcaption { display:none; }
.ng-enhanced .ng-moment-caption { position:relative; display:block; height:30px; margin:22px var(--edge) 0; color:var(--ng-accent); font-size:13px; }
.ng-sound { position:fixed; z-index:55; bottom:20px; right:20px; display:grid; place-items:center; width:44px; height:44px; padding:10px; color:#fff; background:#050a17b8; border:1px solid #ffffff80; border-radius:50%; backdrop-filter:blur(12px); cursor:pointer; }
.ng-sound svg { width:23px; height:23px; }
.ng-sound .ng-muted,.ng-sound.is-muted .ng-volume { display:none; }
.ng-sound.is-muted .ng-muted { display:block; }
.menu-open .ng-sound { display:none; }
body[data-ng-media] #toTop { opacity:0; pointer-events:none; }
@supports(width:1cqh) {
    .ng-enhanced .ng-match-track { container-type:size; }
    .ng-enhanced .ng-match-track .ng-card { width:min(calc(100cqw - var(--edge)*2),calc(100cqh*1.5)); }
}
@media(max-width:700px) {
    .ng-hero img { object-position:43% center; }
    .ng-enhanced .ng-pin { padding-top:calc(var(--header) + 24px); }
    .ng-enhanced .ng-build-copy { position:static; transform:none; width:auto; margin:0 var(--edge) 25px; }
    .ng-enhanced .ng-build-copy h2 { font-size:clamp(34px,7vw,48px); }
    .ng-enhanced .ng-build-copy h2 br { display:none; }
    .ng-enhanced .ng-build-copy p { margin-top:12px; max-width:none; font-size:10px; }
    .ng-enhanced .ng-build-track .ng-card { left:50%; width:min(430px,calc(100% - 60px)); }
    .ng-enhanced .ng-build .ng-steps { padding-left:0; }
    .ng-identity { padding:70px var(--edge) 45px; }
    .ng-identity h2 { font-size:44px; }
    .ng-identity header { margin-bottom:35px; }
    .ng-shirts { gap:10px; }
    .ng-identity-pair { gap:20px; margin-top:40px; }
    .ng-identity-pair figure:last-child { width:100%; }
    .ng-venue-grid { gap:12px; }
    .ng-arrival { margin-top:50px!important; }
    .ng-match-copy { display:block; }
    .ng-match-copy p { margin-top:15px; font-size:10px; }
    .ng-ending { padding-bottom:65px; }
    .ng-ending-photos { grid-template-columns:1fr; gap:20px; }
    .ng-ending-photos figure:last-child { margin-top:0; }
    .ng-credits { flex-direction:column; align-items:start; gap:30px; padding-top:60px; }
    .ng-credits h2 { font-size:55px; }
}
@media(max-height:560px) and (orientation:landscape) {
    .ng-enhanced .ng-pin { padding-top:calc(var(--header) + 12px); padding-bottom:8px; }
    .ng-enhanced .ng-build-copy { position:absolute; top:50%; transform:translateY(-50%); width:36%; margin:0; }
    .ng-enhanced .ng-build-copy h2 { font-size:32px; }
    .ng-enhanced .ng-build-copy p { font-size:10px; max-width:200px; }
    .ng-enhanced .ng-build-track .ng-card { left:67%; width:min(32vw,300px); }
    .ng-enhanced .ng-match-copy { margin-bottom:15px; }
    .ng-enhanced .ng-match-copy h2 { font-size:28px; }
    .ng-enhanced .ng-match-copy p { margin:5px 0 0; }
    .ng-enhanced .ng-build .ng-steps { padding-left:34%; }
}
@media(prefers-reduced-motion:reduce) { .ng-story * { transition:none!important; } }