/* Shali's identity: navigation over the campaign, with a yellow curved finish. */
.snack-header{position:absolute;inset:0 0 auto;z-index:30;border:0;background:linear-gradient(180deg,rgba(10,15,18,.94),rgba(10,15,18,.6) 64%,transparent);color:#fff;padding-bottom:35px}
.snack-header .wrap{width:min(1400px,calc(100% - 100px))}
.snack-header .nav{height:120px;justify-content:center;gap:40px}
.snack-header .brand-logo{flex-shrink:0;align-self:center;padding:0;background:transparent;border-radius:0;box-shadow:none}
.snack-header .logo{width:132px;height:116px;object-fit:contain;filter:drop-shadow(0 3px 5px #0006)}
.snack-header .nav nav{gap:0;font-family:'Arial Narrow',Arial,sans-serif;font-size:16px;font-weight:800}
.snack-header nav>a,.brand-menu{padding:3px 19px;border-right:1px solid #ffffff9c;white-space:nowrap}
.snack-header .nav nav>a:hover,.snack-header nav>a.current,.brand-menu summary:hover{color:#ffe329}
.snack-header nav>.social-link{border:0;padding-right:0;display:flex;align-items:center}
.brand-menu{position:relative}
.brand-menu summary{cursor:pointer;list-style:none;display:flex;gap:10px;align-items:center}
.brand-menu summary::-webkit-details-marker{display:none}
.brand-menu summary:focus-visible{outline:3px solid #ffe329;outline-offset:6px}
.brand-dropdown{position:absolute;top:calc(100% + 18px);left:0;min-width:245px;padding:12px;background:#fff;color:#282956;border-radius:10px;box-shadow:0 12px 35px #0003;border-top:4px solid #ffce19}
.brand-dropdown a{display:block;padding:12px;font-size:14px;border-radius:5px}
.brand-dropdown a:hover{background:#fff2b6}
.reel{position:relative;background:#ffce19;padding-bottom:30px}
.reel .reel-stage{background:#333574}
.reel .slide:not(:last-of-type) img{object-fit:cover}
.reel .slide:last-of-type{background:#f5f4ee}
.reel .slide:last-of-type a{padding:115px 65px 30px}
.reel .reel-arrow{background:transparent;border:0;border-radius:0;font-size:64px;width:48px;height:66px;text-shadow:0 2px 5px #0009}
.reel .reel-navigation{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);background:none;z-index:5;padding:5px;gap:17px}
.reel .slide-tabs button{background:#806c14}
.reel .slide-tabs button[aria-current=true]{background:#292c61;box-shadow:0 0 0 3px #fff7}
.reel #autoplay{background:#fff9;border:0;color:#292c61}
.reel:after{content:'';position:absolute;left:-5%;bottom:22px;width:110%;height:45px;background:#ffce19;clip-path:polygon(0 0,9% 25%,21% 58%,36% 84%,50% 95%,66% 83%,80% 54%,92% 20%,100% 0,100% 100%,0 100%);pointer-events:none;z-index:3}
footer .footer-grid img{width:100px;height:auto}
@media(min-width:1400px){.snack-header .nav{gap:55px}.snack-header nav>a,.brand-menu{padding-inline:23px}}
@media(max-width:1100px){.snack-header .wrap{width:calc(100% - 48px)}.snack-header .nav{gap:20px;height:105px}.snack-header .logo{width:80px;height:78px}.snack-header nav>a,.brand-menu{padding-inline:12px}.snack-header .nav nav{font-size:13px}.reel .slide:last-of-type a{padding:100px 48px 25px}}
@media(max-width:760px){.snack-header{padding-bottom:22px}.snack-header .wrap{width:calc(100% - 32px)}.snack-header .nav{height:76px;justify-content:space-between}.snack-header .brand-logo{padding:8px 5px 5px;border-radius:0 0 13px 13px}.snack-header .logo{width:62px;height:61px}.snack-header .menu-toggle{display:block;color:white;border:1px solid #ffffff70;border-radius:6px;padding:3px 10px}.snack-header .nav nav{top:76px;left:16px;right:16px;padding:18px;background:#292b60;border-radius:10px;color:#fff;max-height:calc(100dvh - 100px);overflow:auto;font-size:15px}.snack-header .nav nav.open{gap:0}.snack-header nav>a,.brand-menu{border-right:0;border-bottom:1px solid #ffffff25;padding:14px 6px}.snack-header nav>.social-link{padding:14px 6px}.brand-dropdown{position:static;min-width:0;margin-top:14px;box-shadow:none}.reel .reel-stage{aspect-ratio:auto;height:360px}.reel .slide:not(:last-of-type) a{padding-top:76px}.reel .slide:not(:last-of-type) img{object-fit:contain}.reel .slide:last-of-type a{padding:85px 25px 25px}.reel .reel-arrow{font-size:40px;width:28px;height:48px}.reel:after{height:28px}.reel #previous{left:4px}.reel #next{right:4px}}
@media(prefers-reduced-motion:reduce){.reel .slide{transition:none}}
/* Transparent mark at every breakpoint: no colored tab or white canvas. */
@media(max-width:1100px){.snack-header .logo{width:110px;height:98px}}
@media(max-width:760px){.snack-header .brand-logo{padding:0;background:transparent;border-radius:0}.snack-header .logo{width:78px;height:74px}}
