/* Shared site chrome for Mix 1 v2: sticky mobile header and back-to-top. */
.totop{position:fixed;right:20px;bottom:20px;z-index:40;width:42px;height:42px;border-radius:50%;border:1px solid rgba(42,26,16,.12);background:rgba(255,248,239,.6);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);color:var(--ink);font:500 17px/1 Poppins,sans-serif;cursor:pointer;box-shadow:0 6px 18px -10px rgba(42,26,16,.45);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s,transform .3s,background .2s}
.totop.show{opacity:.85;transform:none;pointer-events:auto}
.totop:hover{opacity:1;background:rgba(255,248,239,.9)}
@media (max-width:760px){
body{padding-top:72px}
nav{position:fixed!important;top:0;left:0;right:0;z-index:30;max-width:none!important;border:1px solid transparent;transition:top .35s ease,left .35s ease,right .35s ease,padding .35s ease,border-radius .35s ease,background .35s,box-shadow .35s,border-color .35s}
/* liquid glass: mostly clear, heavy blur, bright rim light */
nav.stuck{top:8px;left:8px;right:8px;padding:8px 8px 8px 14px!important;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.1));backdrop-filter:blur(14px) saturate(200%) brightness(1.08);-webkit-backdrop-filter:blur(14px) saturate(200%) brightness(1.08);border-color:transparent;box-shadow:0 12px 32px -16px rgba(42,26,16,.4),inset 0 1px 1px rgba(255,255,255,.75),inset 0 -1px 1px rgba(255,255,255,.25),inset 0 0 18px rgba(255,255,255,.18)}
nav.stuck:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.15) 40%,rgba(255,255,255,.05) 60%,rgba(255,255,255,.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
nav.stuck img{height:38px!important;padding:4px 10px;border-radius:19px;background:rgba(255,255,255,.82);box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 2px 8px -4px rgba(42,26,16,.35)}
nav.stuck .b1{padding:8px 16px!important;font-size:13px!important;box-shadow:none}
nav.stuck .mb{width:38px!important;height:38px!important;font-size:15px!important}
nav img,nav .b1,nav .mb{transition:all .35s ease}
.totop{right:14px;bottom:14px;width:38px;height:38px;font-size:15px}
}
/* photo bands: real people, used across pages */
.pband{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:80px}
.pband.n4{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
.pband.n2{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.pband figure{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:4/5;background:var(--cream2)}
.pband.n2 figure{aspect-ratio:4/3}
.pband img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.pband figure:hover img{transform:scale(1.04)}
.pband .pcap{grid-column:1/-1;font-size:14px;color:var(--soft)}
@media (max-width:760px){
.pband,.pband.n4,.pband.n2{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -20px;padding:50px 20px 0;scrollbar-width:none;flex-wrap:nowrap}
.pband::-webkit-scrollbar{display:none}
.pband figure,.pband.n2 figure{flex:0 0 72%;scroll-snap-align:start;aspect-ratio:4/5;border-radius:22px}
.pband .pcap{display:none}
}
@media (min-width:761px){.pband.n4 figure,.pband.n2 figure{aspect-ratio:auto;height:340px}}
@media (max-width:760px){.pband,.pband.n4,.pband.n2{scroll-padding:0 20px}.pband figure,.pband.n2 figure{flex-basis:62%}}
@media (max-width:760px){.pband,.pband.n4,.pband.n2{margin:0}}
/* nav items are links: the whole pill is the click target */
nav .l span{padding:0!important}
nav .l span a{display:block;padding:9px 16px;border-radius:99px}
nav .l span:not(.on) a:hover{background:rgba(42,26,16,.06)}
nav .lg-h{display:block;line-height:0}
footer a:hover{color:#fff}
/* phone menu */
.mnav{position:fixed;inset:0;z-index:60;background:var(--ink);color:var(--cream);padding:14px 20px 30px;display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translateY(-12px);transition:opacity .3s,transform .3s}
body.mopen{overflow:hidden}body.mopen .mnav{opacity:1;pointer-events:auto;transform:none}
.mn-top{display:flex;justify-content:space-between;align-items:center}
.mn-top img{height:38px;background:#fff;border-radius:16px;padding:4px 10px}
.mn-x{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:none;color:#fff;font-size:16px;cursor:pointer}
.mnav ul{list-style:none;margin-top:30px;flex:1}
.mnav li{opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s;transition-delay:calc(var(--i)*35ms + 80ms)}
body.mopen .mnav li{opacity:1;transform:none}
.mnav li a{display:block;font:800 36px/1.25 'Bricolage Grotesque';letter-spacing:-.04em;text-transform:lowercase;padding:3px 0}
.mnav li a.on{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mnav li a i{font-style:normal;font-size:20px;opacity:.6}
.mn-d{text-align:center}
nav .mb{cursor:pointer}
/* newsletter forms and thank-you states */
.nf input{flex:1;min-width:0;border:0;background:none;padding:10px 16px;font:400 14px Poppins;color:inherit;outline:none}
.nf input::placeholder{color:inherit;opacity:.6}
.nf button{border:0;background:var(--grad);color:#fff;border-radius:99px;padding:10px 18px;font:600 14px Poppins;cursor:pointer}
.nf-ok{font-weight:600;font-size:15px;padding:12px 0}
.sent{grid-column:1/-1;text-align:center;padding:30px 10px}
.sent .ic{width:68px;height:68px;border-radius:50%;background:var(--grad);color:#fff;font-size:30px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
.sent h3{font-size:40px}.sent p{color:var(--soft);margin:10px auto 0;max-width:38ch}
@keyframes pop{from{transform:scale(.4);opacity:0}}


/* 1,000 Behind Youth campaign (1000.hereforyouth.org): a call-out beside the logo and a strip in the footer.
   Campaign colours: lime #DDEF00 on ink, wordmark in Bebas Neue. */
:root{--lime:#DDEF00}
.bhy-t{display:inline-flex;align-items:center;gap:8px;margin-left:6px;padding:6px 14px 6px 6px;border-radius:99px;background:#171914;color:#fff;font:600 13px Poppins;white-space:nowrap;transition:transform .25s,box-shadow .25s}
.bhy-t b{font:400 20px/1 'Bebas Neue';letter-spacing:.02em;background:var(--lime);color:#171914;border-radius:99px;padding:5px 10px 3px}
.bhy-t span{font:400 19px/1 'Bebas Neue';letter-spacing:.03em;padding-top:2px}
.bhy-t i{font-style:normal;color:var(--lime);transition:transform .25s}
.bhy-t:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(23,25,20,.6)}.bhy-t:hover i{transform:translate(2px,-2px)}
nav.stuck .bhy-t{padding:4px 12px 4px 4px}nav.stuck .bhy-t b{font-size:17px}nav.stuck .bhy-t span{font-size:16px}
@media (max-width:1180px){.bhy-t span{white-space:normal;width:min-content;font-size:13px;line-height:.92;padding-top:1px}.bhy-t{gap:7px;padding-right:12px;flex:none}.bhy-t i{display:none}nav .l span a{white-space:nowrap}}
@media (max-width:760px){.bhy-t{margin-left:0;padding:4px 10px 4px 4px;gap:6px}.bhy-t b{font-size:16px;padding:4px 8px 2px}.bhy-t span{font-size:12px}.bhy-t i{display:none}nav.stuck .bhy-t span{font-size:12px}}
@media (max-width:370px){nav .b1{padding:10px 14px!important}nav .mb,nav img{flex:none}}

footer .bhy{grid-column:1/-1;position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:230px;margin-top:10px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);color:#E9D9C8;overflow:hidden}
footer .bhy .tx{display:flex;flex-direction:column;align-items:flex-start;max-width:520px;position:relative;z-index:1;padding-bottom:26px}
footer .bhy .nm{font:400 clamp(40px,4.4vw,60px)/.9 'Bebas Neue';letter-spacing:.01em;color:#fff}
footer .bhy .nm b{font-weight:400;color:var(--lime)}
footer .bhy .ds{font-size:15px;line-height:1.55;margin:12px 0 18px;max-width:44ch}
footer .bhy .go{display:inline-flex;align-items:center;gap:8px;background:var(--lime);color:#171914;border-radius:99px;padding:11px 20px;font:600 14px Poppins;transition:background .2s}
footer .bhy .go i{font-style:normal;transition:transform .25s}
footer .bhy:hover .go{background:#fff}footer .bhy:hover .go i{transform:translateX(4px)}
footer .bhy .pp{position:relative;align-self:stretch;flex:none;width:300px}
footer .bhy .ci{position:absolute;left:50%;bottom:-130px;width:260px;height:260px;margin-left:-130px;border-radius:50%;background:var(--lime);transition:transform .5s}
footer .bhy img{position:absolute;bottom:0;width:auto;transition:transform .3s}
footer .bhy .g{left:14px;height:190px}footer .bhy .y{right:18px;height:218px;transition-delay:.05s}
footer .bhy:hover .ci{transform:scale(1.05)}footer .bhy:hover img{transform:translateY(-4px)}
@media (max-width:760px){
footer .bhy{flex-direction:column;align-items:stretch;gap:0;min-height:0}
footer .bhy .tx{padding-bottom:20px}footer .bhy .ds{font-size:14px}
footer .bhy .pp{width:100%;height:190px}footer .bhy .ci{width:210px;height:210px;margin-left:-105px;bottom:-105px}
footer .bhy .g{left:calc(50% - 128px);height:160px}footer .bhy .y{right:calc(50% - 122px);height:182px}
}

/* footer social icons (all pages, including the Programme page, which has no v3.css) */
footer .soc{display:flex;gap:10px;margin-top:6px}footer .soc a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--cream);transition:background .2s,transform .2s}footer .soc a:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}footer .soc svg{width:20px;height:20px}

/* form that couldn't be sent */
.f-err{grid-column:1/-1;flex-basis:100%;margin:12px 0 0;font:500 14px/1.45 Poppins;color:#B3261E}.f-err a{color:inherit;text-decoration:underline}
footer .f-err{color:#FFB4AB}