html,body{margin:0;background:#FFF7E8;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
*{box-sizing:border-box;}
a{color:#EC008C;text-decoration:none;}
a:hover{color:#B8006D;}
::selection{background:#EC008C;color:#fff;}
input,select,button{font-family:inherit;}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(50%)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-10px) rotate(var(--r,0deg))}}
@keyframes rise{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sprayIn{0%{opacity:0;filter:blur(14px);transform:scale(1.12) rotate(-6deg)}60%{opacity:1;filter:blur(2px)}100%{opacity:1;filter:blur(0);transform:rotate(-4deg)}}
@keyframes barUp{from{transform:translate(-50%,140%)}to{transform:translate(-50%,0)}}
@keyframes wordIn{0%{opacity:0;transform:translateY(.6em) rotate(-10deg) scale(.7);filter:blur(8px)}70%{opacity:1;transform:translateY(-.06em) rotate(2deg) scale(1.05);filter:blur(0)}100%{opacity:1;transform:none}}
@keyframes boxIn{from{opacity:0;transform:translateY(24px) rotate(-8deg) scale(.85)}}
@keyframes nameWiggle{0%,100%{transform:none;text-shadow:0 0 0 rgba(0,0,0,0)}12%{transform:rotate(-6deg) scale(1.1);text-shadow:.04em .06em 0 #EC008C}24%{transform:rotate(5deg) scale(1.08);text-shadow:.04em .06em 0 #121212}36%{transform:rotate(-2deg) scale(1.02)}48%{transform:none}}
@keyframes dance{0%,100%{transform:rotate(-1deg)}10%{transform:rotate(1.5deg) scale(1.02)}20%{transform:rotate(-1.5deg) scale(1.02)}30%{transform:rotate(1deg)}40%,90%{transform:rotate(-1deg)}}
@keyframes ringPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.015)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(236,0,140,.5)}70%{box-shadow:0 0 0 14px rgba(236,0,140,0)}}
.leaflet-container{font-family:Heebo,sans-serif;background:#F1ECE2;}
.leaflet-popup-content-wrapper{border-radius:18px;}
.leaflet-div-icon{background:transparent;border:0;}
image-slot[data-mini]::part(empty){opacity:0;}
image-slot[id^="logo-"]::part(frame){background:transparent;}
image-slot[src]::part(ring),image-slot[data-filled]::part(ring){display:none;}
header image-slot::part(image){object-position:center;}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.x0:hover{background:#fff !important;color:#EC008C !important}
.x1:hover{background:#121212 !important;color:#fff !important}
.x2:hover{transform:rotate(-3deg) scale(1.06) !important}
.x3:hover{transform:rotate(3deg) scale(1.08) !important}
.x4:hover{transform:rotate(-2deg) scale(1.06) !important}
.x5:focus{border-color:#EC008C !important;background:#fff !important}
.x6:hover{background:#121212 !important}
.x7:hover{transform:rotate(0) scale(1.04) !important}
.x8:hover{transform:rotate(0) scale(1.04) !important}
.x9:hover{background:#121212 !important}
.xa:hover{background:#121212 !important;color:#fff !important}
.xb:hover{background:#EC008C !important}
.xc:hover{background:#FFE600 !important}
.xd:focus{border-color:#EC008C !important}
.xe:hover{background:#EC008C !important}
.xf:hover{transform:translateY(-6px) rotate(0deg) !important;box-shadow:6px 8px 0 #EC008C !important}
.xg:hover{transform:scale(1.12) !important}
.xh:hover{transform:translateY(-4px) rotate(-.6deg) !important;box-shadow:0 28px 50px -26px rgba(18,18,18,.45) !important}
.xi:hover{border-color:#121212 !important}
.xj:hover{background:#121212 !important;color:#fff !important}
.xk:hover{color:#121212 !important;transform:rotate(0deg) translateY(-3px) !important;box-shadow:8px 9px 0 #EC008C !important}
.xl:hover{background:#EC008C !important}
.xm:hover{color:#121212 !important;transform:rotate(0deg) translateY(-3px) !important;box-shadow:8px 9px 0 #EC008C !important}
.xn:hover{translate:0 -6px !important;box-shadow:0 30px 60px -30px rgba(18,18,18,.55) !important}
.xo:hover{translate:0 -6px !important;box-shadow:0 30px 60px -30px rgba(18,18,18,.55) !important}
.xp:hover{translate:0 -6px !important;box-shadow:0 30px 60px -30px rgba(18,18,18,.55) !important}
.xq:hover{translate:0 -6px !important;box-shadow:0 30px 60px -30px rgba(18,18,18,.55) !important}
.xr:hover{translate:0 -6px !important;box-shadow:0 30px 60px -30px rgba(18,18,18,.55) !important}
.xs:hover{translate:0 -6px !important;box-shadow:0 30px 60px -30px rgba(18,18,18,.55) !important}
.xt:hover{color:#121212 !important;transform:translateY(-3px) !important}
.xu:hover{background:#121212 !important;color:#fff !important}
.xv:hover{background:#FFF7E8 !important}
.xw:hover{color:#121212 !important;transform:rotate(0deg) translateY(-3px) !important;box-shadow:8px 9px 0 #EC008C !important}
.xx:hover{background:#121212 !important;color:#fff !important}
.xy:hover{background:#fff !important;color:#0B2E17 !important}
.xz:hover{border-color:#EC008C !important;color:#EC008C !important}
.x10:focus{border-color:#EC008C !important;background:#fff !important}
.x11:focus{border-color:#EC008C !important;background:#fff !important}
.x12:focus{border-color:#EC008C !important;background:#fff !important}
.x13:hover{background:#EC008C !important}
.x14:hover{color:#EC008C !important;translate:0 -6px !important;rotate:-6deg !important}
.x15:hover{color:#EC008C !important;translate:0 -6px !important;rotate:-6deg !important}
.x16:hover{color:#EC008C !important;translate:0 -6px !important;rotate:-6deg !important}
.x17:hover{color:#EC008C !important;translate:0 -6px !important;rotate:-6deg !important}
.x18:hover{color:#EC008C !important;translate:0 -6px !important;rotate:-6deg !important}
.x19:hover{background:#EC008C !important;color:#fff !important}
.x1a:hover{color:#EC008C !important}
.x1b:hover{color:#EC008C !important}
.x1c:hover{color:#EC008C !important}
.x1d:hover{color:#EC008C !important}
.x1e:hover{color:#EC008C !important}
.x1f:hover{color:#EC008C !important}
.x1g:hover{color:#EC008C !important}
.x1h:hover{background:#EE2A7B !important}
.x1i:hover{background:#000 !important}
.x1j:hover{background:#1877F2 !important}
.x1k:hover{background:#25D366 !important}
.x1l:hover{color:#EC008C !important}
.x1m:hover{color:#EC008C !important}
.x1n:hover{background:#FFF7E8 !important}
.x1o:hover{background:#fff !important;color:#121212 !important}
.x1p:hover{background:#121212 !important}
.x1q:hover{background:#121212 !important;color:#fff !important}
.x1r:focus{border-color:#EC008C !important;background:#fff !important}
.x1s:hover{background:#121212 !important}
.x1t:hover{background:#121212 !important}
.x1u:hover{transform:translateY(-3px) scale(1.08) !important;z-index:2 !important}
.x1v:hover{color:#fff !important}
/* ---- responsive overrides (production). Inline styles come from the design, so rules use !important ---- */
.lbl-short{display:none}
.card-loc-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

@media (max-width: 999px) {
  /* top nav: 5 partner logos shrink instead of overflowing */
  .nav-logos{gap:8px !important}
  .nav-logos > span{display:none !important}
  .nav-logos > img{flex:0 1 auto !important;min-width:0 !important;max-width:22%}

  /* hero: X sticker away from the crown */
  .stk-x{top:9% !important;left:8% !important}

  /* "best for you": 2 columns, smaller tiles */
  .top-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important}
  .top-card{padding:14px 10px 12px !important;gap:6px !important}
  .top-card > span:nth-of-type(3){font-size:16px !important}
  .top-logo{width:64px !important;height:64px !important;border-radius:18px !important;font-size:26px !important}
  .top-heart{width:36px !important;height:36px !important;font-size:17px !important;top:6px !important;left:6px !important}

  /* filter bar: one compact row of 4 equal tabs + small second row */
  .filter-sticky{top:78px !important}
  .filter-bar{padding:6px !important;gap:6px !important;border-radius:18px !important}
  .filter-cats{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px !important;flex:1 1 100% !important;overflow:visible !important}
  .filter-cat{min-height:36px !important;padding:0 4px !important;font-size:13px !important;gap:4px !important;justify-content:center}
  .filter-cat .lbl-long,.filter-match .lbl-long{display:none}
  .filter-cat .lbl-short,.filter-match .lbl-short{display:inline}
  .cat-count{font-size:10px !important;padding:1px 5px !important}
  .filter-match{min-height:34px !important;padding:0 12px !important;font-size:12.5px !important;flex:1 1 auto !important}
  .filter-grade{font-size:12.5px !important;padding:0 !important;gap:6px !important;flex:1 1 auto !important}
  .filter-grade select{min-height:34px !important;font-size:13px !important;padding:0 8px !important;flex:1}

  /* cards: compact 2-column grid so nothing hides in a carousel */
  .cards-grid{gap:10px !important}
  .card{border-radius:22px !important}
  .card-band{height:62px !important}
  .card-band > img{width:110px !important}
  .card-gl{top:8px !important;left:8px !important;font-size:11.5px !important;padding:4px 7px !important;border-radius:8px !important;box-shadow:2px 2px 0 #121212 !important}
  .card-match{top:auto !important;bottom:7px !important;right:auto !important;left:8px !important;transform:none !important;font-size:10.5px !important;padding:3px 7px !important}
  .card-picked{display:none !important}
  .card-body{padding:0 12px 12px !important;gap:8px !important}
  .card-logo{width:58px !important;height:58px !important;margin-top:-30px !important;border-radius:16px !important}
  .card-name{font-size:17px !important}
  .card-loc{font-size:12px !important}
  .card-desc,.card-more{display:none !important}
  .card-pick{min-height:40px !important;padding:0 8px !important;font-size:13.5px !important}

  /* "more" section background: tile at native size instead of upscaling */
  .more-bg{background-size:900px auto !important;background-repeat:repeat !important}

  /* map: shorter, list not a nested scroller */
  .map-box{height:340px !important}
  .map-list{max-height:none !important;overflow:visible !important}

  /* item modal: bottom sheet with tappable backdrop above it */
  .modal-wrap{align-items:flex-end !important;padding:72px 0 0 !important}
  .modal-box{max-height:calc(100svh - 72px) !important;border-radius:28px 28px 0 0 !important}
  .modal-map{min-height:200px !important}
  .modal-map iframe{min-height:200px !important}

  /* join: shorter form */
  #join{padding:56px 0 !important}
  .join-intro{gap:12px !important}
  .join-card{padding:18px !important;border-radius:26px !important}
  .join-form{gap:12px !important}
  .form-grid{grid-template-columns:1fr 1fr !important;gap:10px !important}
  .f-name,.f-school{grid-column:1 / -1}
  .join-form input,.join-form select{min-height:48px !important}
  .privacy-text{font-size:12px !important;line-height:1.5 !important}

  /* connect: youth card full width, socials in a row under it */
  .connect-icons{display:grid !important;grid-template-columns:repeat(4,1fr);gap:10px !important;width:100%}
  .connect-icons > a{width:auto !important}
  .connect-card{grid-column:1 / -1;flex-direction:row !important;gap:14px !important;background:#FFF7E8;border:2px solid #121212;border-radius:22px;padding:10px 14px;box-shadow:4px 4px 0 #00AEEF}
  .connect-card > span{font-size:17px !important;font-weight:900 !important}

  /* footer: logo, then nav + contact side by side */
  .foot-grid{grid-template-columns:1fr 1fr !important;gap:24px 16px !important}
  .foot-logo,.foot-follow{grid-column:1 / -1}
  .foot-logo{align-items:center}
  .foot-logos{display:grid !important;grid-template-columns:repeat(3,1fr);gap:14px !important;padding:16px !important;justify-items:center}
  .foot-logos > img{width:100% !important;max-width:110px;height:48px !important}

  /* journey bar: count bubble instead of stacked avatars */
  .jbar:has(.jb-picked) .jb-name,.jb-avatars{display:none !important}
  .jb-count{display:flex !important}
  .jb-picked{gap:8px !important}
  .jb-wa{width:42px !important;height:42px !important}
  .jb-cta{padding:0 14px !important;font-size:14px !important}
}