/* ============ NAILA SAEED - WARD 7 :: PREMIUM ENHANCE LAYER ============ */
/* Adds: hero video bg + glow orbs + portrait pulse, priority card photos, */
/* Serving Ward 7 section, community band, glow polish. Brand: #5C2D91/#3A1D5C/#C9A24B. */

/* ---------- HERO: video background + readability veil ---------- */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:.34;filter:saturate(1.05) contrast(1.02)}
/* keep existing .hero__bg radial glows layered above the video */
.hero .hero__bg{z-index:1}
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(150deg,rgba(42,20,68,.86) 0%,rgba(92,45,145,.74) 46%,rgba(106,58,166,.68) 100%),
    radial-gradient(120% 90% at 50% 120%,rgba(42,20,68,.85),transparent 60%);}
.hero__grid{z-index:3}
.hero__scroll{z-index:4}

/* ---------- Glow orbs (drifting, pulsing radial gradients) ---------- */
.orb{position:absolute;border-radius:50%;filter:blur(46px);pointer-events:none;z-index:1;
  mix-blend-mode:screen;will-change:transform,opacity}
.orb--1{width:340px;height:340px;top:-60px;left:-40px;
  background:radial-gradient(circle,rgba(201,162,75,.5),transparent 68%);
  animation:orbFloat 16s ease-in-out infinite}
.orb--2{width:420px;height:420px;bottom:-120px;right:-80px;
  background:radial-gradient(circle,rgba(138,90,200,.55),transparent 70%);
  animation:orbFloat 22s ease-in-out infinite reverse}
.orb--3{width:240px;height:240px;top:38%;right:24%;
  background:radial-gradient(circle,rgba(224,192,120,.4),transparent 70%);
  animation:orbPulse 9s ease-in-out infinite}
@keyframes orbFloat{
  0%{transform:translate(0,0) scale(1);opacity:.85}
  33%{transform:translate(40px,30px) scale(1.08);opacity:1}
  66%{transform:translate(-26px,18px) scale(.96);opacity:.8}
  100%{transform:translate(0,0) scale(1);opacity:.85}}
@keyframes orbPulse{
  0%,100%{transform:scale(1);opacity:.55}
  50%{transform:scale(1.18);opacity:.95}}

/* Soft section orbs (lighter, behind content on white sections) */
.orb--soft{filter:blur(70px);mix-blend-mode:normal;opacity:.5;z-index:0}
.orb--m1{width:380px;height:380px;top:-80px;right:-120px;
  background:radial-gradient(circle,rgba(201,162,75,.22),transparent 70%);
  animation:orbFloat 20s ease-in-out infinite}
.orb--w1{width:420px;height:420px;bottom:-140px;left:-120px;
  background:radial-gradient(circle,rgba(92,45,145,.18),transparent 70%);
  animation:orbFloat 24s ease-in-out infinite reverse}
.meet,.ward7{position:relative;overflow:hidden}
.meet .wrap,.ward7 .wrap{position:relative;z-index:2}

/* ---------- HERO portrait: glow ring + gentle pulse ---------- */
.hero__photo{position:relative}
.hero__ring{position:absolute;inset:-22px;z-index:0;border-radius:34px;
  background:conic-gradient(from 0deg,rgba(201,162,75,.0),rgba(201,162,75,.55),rgba(138,90,200,.45),rgba(201,162,75,.0));
  filter:blur(26px);opacity:.8;animation:ringSpin 14s linear infinite}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.hero__frame{animation:framePulse 6s ease-in-out infinite}
@keyframes framePulse{
  0%,100%{box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12),0 0 0 10px rgba(255,255,255,.06),0 0 0 0 rgba(201,162,75,.0)}
  50%{box-shadow:0 44px 90px -28px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.16),0 0 0 10px rgba(255,255,255,.08),0 0 44px 6px rgba(201,162,75,.32)}}
/* keep her real photo upright + face well-placed in the portrait frame */
.hero__frame img{object-position:50% 26%}

/* ---------- INTRO photo: real face, upright ---------- */
.intro__photo img{object-position:50% 30%}

/* ---------- PRIORITY CARDS: photo top + hover lift + gold underline ---------- */
.card{padding:0;display:flex;flex-direction:column}
.card__media{position:relative;height:150px;overflow:hidden;border-radius:18px 18px 0 0;flex:none}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(42,20,68,.05),rgba(42,20,68,.28))}
.card:hover .card__media img{transform:scale(1.07)}
.card__body{padding:26px 28px 30px;position:relative}
.card__body h3{display:inline-block;position:relative;padding-bottom:6px}
.card__body h3::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-l));transition:width .35s var(--ease)}
.card:hover .card__body h3::after{width:46px}
.card__icon{margin-top:-50px;margin-bottom:16px;position:relative;z-index:2;border:3px solid #fff;
  box-shadow:0 10px 22px -10px rgba(58,29,92,.4)}
/* the colored left bar from style.css still applies and animates on hover */

/* ---------- MEET photo: keep real Naila upright (landscape -> portrait frame) ---------- */
.meet__photo img{object-position:50% 30%}

/* ---------- SERVING WARD 7 SECTION ---------- */
.ward7{padding:110px 0;background:linear-gradient(180deg,var(--soft),#fff)}
.ward7__grid{display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:center}
.ward7__map{position:relative}
.ward7__frame{position:relative;border-radius:22px;overflow:hidden;z-index:2;
  border:1px solid rgba(92,45,145,.14);
  box-shadow:0 30px 70px -28px rgba(58,29,92,.45),0 0 0 10px rgba(255,255,255,.6),0 0 0 11px rgba(201,162,75,.35)}
.ward7__frame img{width:100%;display:block}
.ward7__glow{position:absolute;inset:-24px;z-index:1;border-radius:30px;
  background:radial-gradient(circle at 50% 60%,rgba(201,162,75,.34),transparent 62%);
  filter:blur(30px);animation:orbPulse 8s ease-in-out infinite}
.ward7__copy h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:20px}
.ward7__copy p{margin-bottom:16px}
.ward7__list{list-style:none;margin:22px 0 28px;display:flex;flex-direction:column;gap:13px}
.ward7__list li{display:flex;align-items:flex-start;gap:12px;font-size:1.02rem;color:var(--ink);font-weight:500}
.ward7__list li span{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:.85rem;color:#fff;font-weight:700;margin-top:1px;
  background:linear-gradient(135deg,var(--purple),var(--purple-d));
  box-shadow:0 8px 18px -8px rgba(92,45,145,.6)}

/* ---------- COMMUNITY IMPACT BAND (full-width image) ---------- */
.band{position:relative;padding:128px 0;color:#fff;text-align:center;overflow:hidden;isolation:isolate}
.band__media{position:absolute;inset:0;z-index:-2}
.band__media img{width:100%;height:100%;object-fit:cover;object-position:50% 56%}
.band__overlay{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(120deg,rgba(42,20,68,.9) 0%,rgba(58,29,92,.78) 50%,rgba(92,45,145,.72) 100%),
    radial-gradient(70% 90% at 50% 0%,rgba(201,162,75,.22),transparent 60%)}
.band__inner{max-width:820px;margin:0 auto}
.band__inner h2{color:#fff;font-size:clamp(1.9rem,3.8vw,2.8rem);margin-bottom:18px;line-height:1.15}
.band__inner p{color:rgba(255,255,255,.92);font-size:1.12rem;max-width:640px;margin:0 auto}

/* ---------- GET INVOLVED: video background ---------- */
.involved{isolation:isolate}
.involved__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;
  z-index:0;opacity:.5}
.involved .involved__overlay{z-index:1;opacity:1;mix-blend-mode:normal;
  background:linear-gradient(150deg,rgba(42,20,68,.92),rgba(92,45,145,.82) 70%)}
.involved::before{z-index:1}
.involved__inner{z-index:2}

/* ---------- soft pulsing section dividers (premium glow accents) ---------- */
.priorities,.meet,.ward7,.gallery,.contact{position:relative}
.priorities::before,.gallery::before,.contact::before{content:"";position:absolute;left:50%;top:0;
  transform:translateX(-50%);width:min(560px,70%);height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.7),transparent);
  opacity:.55;animation:dividerPulse 5.5s ease-in-out infinite}
@keyframes dividerPulse{0%,100%{opacity:.3;width:min(420px,55%)}50%{opacity:.75;width:min(560px,70%)}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .ward7__grid{grid-template-columns:1fr;gap:44px}
  .ward7__map{max-width:520px;margin:0 auto}
  .hero__video{opacity:.28}
}
@media(max-width:640px){
  .ward7{padding:74px 0}
  .band{padding:90px 0}
  .card__media{height:160px}
  .orb--1,.orb--2,.orb--3{filter:blur(40px)}
  .hero__ring{inset:-14px}
}

/* ---------- reduced motion: calm everything ---------- */
@media(prefers-reduced-motion:reduce){
  .orb,.hero__frame,.hero__ring,.ward7__glow,.priorities::before,.gallery::before,.contact::before{animation:none}
  .hero__video,.involved__video{opacity:.3}
}

/* ===== FIX: hero is above the fold -> never let its reveal stay hidden ===== */
.hero .reveal{opacity:1 !important;transform:none !important}
.hero__title{color:#fff}
.hero__sub{color:rgba(255,255,255,.93)}
.hero__video{opacity:.30}
.hero__veil{background:
  linear-gradient(150deg,rgba(30,14,50,.93) 0%,rgba(74,35,118,.84) 46%,rgba(92,45,145,.80) 100%),
  radial-gradient(120% 90% at 50% 120%,rgba(30,14,50,.9),transparent 60%);}

/* ===== make hero background video clearly visible (dark behind text, light over video) ===== */
.hero__video{opacity:.66 !important;filter:saturate(1.14) contrast(1.05) brightness(1.05)}
.hero__veil{background:
  linear-gradient(100deg, rgba(44,21,72,.92) 0%, rgba(58,29,92,.78) 32%, rgba(74,38,120,.46) 64%, rgba(86,44,138,.30) 100%),
  radial-gradient(120% 80% at 50% 120%, rgba(40,18,66,.55), transparent 60%) !important;}

/* ===== header: bigger transparent logo ===== */
.nav__brand img{height:58px !important;width:auto !important;max-width:none !important}
.nav.scrolled .nav__brand img{height:48px !important}
.nav__inner{align-items:center}
/* ===== intro: show the FULL banner uncropped, full width ===== */
.intro__grid{grid-template-columns:1fr !important;gap:30px !important;max-width:980px;margin:0 auto}
.intro__photo img{aspect-ratio:auto !important;object-fit:contain !important;width:100% !important;height:auto !important;
  border-radius:18px;box-shadow:0 26px 64px -30px rgba(58,29,92,.45)}
.intro__accent{display:none !important}
/* ===== get involved: make background video clearly visible ===== */
.involved__video{opacity:.60 !important;filter:saturate(1.12) brightness(1.06)}
.involved .involved__overlay{background:linear-gradient(150deg,rgba(44,21,72,.80),rgba(92,45,145,.60) 72%) !important}

/* ============================================================= */
/* ===== JULY 2026 UPDATE: photo galleries, timeline, quotes, */
/* =====   captioned photos, stat highlights, intro modal    == */
/* ============================================================= */

/* ---- Homepage "Rooted in our community" two-photo feature ---- */
.rooted{padding:104px 0;background:var(--white);position:relative}
.rooted__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.rooted__card{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);background:#fff;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.rooted__card:hover{transform:translateY(-6px);box-shadow:0 30px 70px -24px rgba(58,29,92,.5)}
.rooted__img{position:relative;aspect-ratio:16/10;overflow:hidden}
.rooted__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.rooted__card:hover .rooted__img img{transform:scale(1.06)}
.rooted__card figcaption{padding:20px 24px 24px;display:block}
.rooted__card figcaption strong{display:block;font-family:'Sora',sans-serif;color:var(--purple-d);font-size:1.12rem;margin-bottom:5px}
.rooted__card figcaption span{color:var(--body);font-size:.96rem}
@media(max-width:820px){.rooted{padding:70px 0}.rooted__grid{grid-template-columns:1fr;gap:22px}}

/* ---- Captioned photo gallery grid (inner pages) ---- */
.photo-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.pg-item{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);
  aspect-ratio:4/3;background:#eee;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pg-item:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.pg-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pg-item:hover img{transform:scale(1.08)}
.pg-item::after{content:none}
.pg-item figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:#fff;
  font-family:'Sora',sans-serif;font-weight:600;font-size:.96rem;letter-spacing:.01em;
  transform:translateY(6px);opacity:.92;transition:.35s;line-height:1.35}
.pg-item:hover figcaption{transform:translateY(0);opacity:1}
.pg-item--tall{aspect-ratio:3/4}
.pg-item--wide{grid-column:span 2;aspect-ratio:16/9}
@media(max-width:820px){.photo-gallery{grid-template-columns:1fr 1fr;gap:12px}.pg-item--wide{grid-column:span 2}}
@media(max-width:520px){.photo-gallery{grid-template-columns:1fr 1fr}.pg-item--wide,.pg-item--tall{grid-column:span 2;aspect-ratio:16/10}}

/* ---- Stat highlight strip (on-brand, animated on reveal) ---- */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:8px 0 4px}
.stat-strip .sh{background:linear-gradient(160deg,#fff,var(--soft));border:1px solid var(--line);border-radius:18px;
  padding:26px 18px;text-align:center;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.stat-strip .sh::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--purple));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.stat-strip .sh:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.stat-strip .sh:hover::before{transform:scaleX(1)}
.stat-strip .sh b{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:2.3rem;color:var(--purple);line-height:1;letter-spacing:-.02em}
.stat-strip .sh span{display:block;margin-top:9px;font-size:.86rem;color:var(--body);line-height:1.4}
@media(max-width:820px){.stat-strip{grid-template-columns:1fr 1fr}}

/* ---- Pull quote ---- */
.pullquote{position:relative;max-width:900px;margin:44px auto;padding:38px 34px 34px 68px;
  background:linear-gradient(135deg,rgba(92,45,145,.05),rgba(201,162,75,.07));
  border-left:5px solid var(--gold);border-radius:0 18px 18px 0}
.pullquote::before{content:"\201C";position:absolute;left:18px;top:6px;font-family:Georgia,serif;
  font-size:4.4rem;color:var(--gold);opacity:.45;line-height:1}
.pullquote p{font-family:'Sora',sans-serif;font-weight:500;font-size:1.28rem;line-height:1.5;color:var(--ink);margin:0 0 10px}
.pullquote cite{font-style:normal;font-size:.95rem;color:var(--purple-d);font-weight:600;font-family:'Sora',sans-serif}
@media(max-width:640px){.pullquote{padding:30px 22px 26px 52px}.pullquote p{font-size:1.12rem}}

/* ---- Simple vertical timeline ---- */
.timeline{position:relative;max-width:840px;margin:34px auto 0;padding-left:8px}
.timeline::before{content:"";position:absolute;left:16px;top:8px;bottom:8px;width:2.5px;
  background:linear-gradient(var(--gold),var(--purple));border-radius:2px}
.tl-item{position:relative;padding:0 0 30px 52px}
.tl-item:last-child{padding-bottom:4px}
.tl-item::before{content:"";position:absolute;left:8px;top:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;border:3.5px solid var(--purple);box-shadow:0 0 0 4px rgba(92,45,145,.12);z-index:2;transition:.35s}
.tl-item:hover::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 5px rgba(201,162,75,.22)}
.tl-item .tl-year{font-family:'Sora',sans-serif;font-weight:800;color:var(--purple);font-size:.92rem;letter-spacing:.04em}
.tl-item h4{margin:2px 0 5px;color:var(--ink);font-size:1.12rem;font-family:'Sora',sans-serif}
.tl-item p{margin:0;color:var(--body);font-size:.97rem}

/* ---- Feature split with captioned real photo (inner pages) ---- */
.feature-photo{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.feature-photo img{width:100%;display:block;transition:transform .7s var(--ease)}
.feature-photo:hover img{transform:scale(1.04)}
.feature-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 22px 16px;color:#fff;z-index:2;
  background:linear-gradient(transparent,rgba(42,20,68,.85));font-family:'Sora',sans-serif;font-size:.94rem;font-weight:500}

/* ---- Section fade/slide transitions (extra reveal variants) ---- */
.reveal-l{opacity:0;transform:translateX(-38px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-r{opacity:0;transform:translateX(38px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-l.in,.reveal-r.in{opacity:1;transform:none}
.reveal-z{opacity:0;transform:scale(.94);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-z.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal-l,.reveal-r,.reveal-z{opacity:1;transform:none;transition:none}}

/* ============================================================= */
/* ===== FIRST-VISIT INTRO MODAL (on-brand, dismissible) ====== */
/* ============================================================= */
.nintro-ov{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;
  padding:24px 16px;background:rgba(24,12,42,.66);backdrop-filter:blur(6px);opacity:0;transition:opacity .4s ease}
.nintro-ov.show{display:flex;opacity:1}
.nintro{position:relative;width:min(720px,96vw);max-height:92vh;overflow:hidden;background:#fff;border-radius:26px;
  box-shadow:0 50px 110px -30px rgba(24,12,42,.7);display:grid;grid-template-columns:.82fr 1.18fr;
  transform:translateY(24px) scale(.97);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.nintro-ov.show .nintro{transform:none;opacity:1}
.nintro__media{position:relative;background:linear-gradient(160deg,var(--purple-d),var(--purple))}
.nintro__media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.nintro__media::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(58,29,92,.15),rgba(42,20,68,.55))}
.nintro__badge{position:absolute;left:16px;bottom:16px;z-index:2;color:#fff}
.nintro__badge b{display:block;font-family:'Sora',sans-serif;font-weight:700;font-size:1.15rem;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.nintro__badge span{font-size:.8rem;color:var(--gold-l);font-weight:600;letter-spacing:.04em}
.nintro__body{padding:34px 34px 30px;overflow-y:auto}
.nintro__eyebrow{display:inline-block;font-family:'Sora',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple);background:rgba(92,45,145,.09);padding:.4em .9em;border-radius:100px;margin-bottom:14px}
.nintro__body h2{font-size:1.7rem;line-height:1.14;margin:0 0 12px;color:var(--ink)}
.nintro__body h2 .grad{background:linear-gradient(100deg,var(--gold) 10%,#b88f3c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nintro__body p{color:var(--body);font-size:1.01rem;line-height:1.6;margin:0 0 12px}
.nintro__making{background:linear-gradient(135deg,rgba(201,162,75,.14),rgba(92,45,145,.08));border:1px solid rgba(201,162,75,.3);
  border-radius:14px;padding:14px 16px;margin:6px 0 18px;font-size:.95rem;color:var(--purple-d);display:flex;gap:10px;align-items:flex-start}
.nintro__making b{font-family:'Sora',sans-serif}
.nintro__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.nintro__close{position:absolute;top:14px;right:14px;z-index:5;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.9);color:var(--purple-d);font-size:20px;line-height:1;box-shadow:0 6px 18px -6px rgba(0,0,0,.3);transition:.2s}
.nintro__close:hover{background:#fff;transform:rotate(90deg) scale(1.05)}
@media(max-width:640px){
  .nintro{grid-template-columns:1fr;max-height:94vh}
  .nintro__media{height:180px}
  .nintro__media img{object-position:50% 26%}
  .nintro__body{padding:24px 22px 26px}
  .nintro__body h2{font-size:1.42rem}
  .nintro__cta .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){.nintro-ov,.nintro{transition:none}}

/* ============================================================= */
/* ===== JULY 2026 v2 POLISH: no-crop galleries, Ward 7 map, === */
/* =====   Recognitions, Canada Day, Get-Involved fix, mobile == */
/* ============================================================= */

/* ---------------------------------------------------------------- */
/* FIX 1 — NEVER CROP FACES: show FULL photos on a soft brand card. */
/* GALLERIES — MASONRY: photos show at natural proportions. Never crop a face,   */
/* never leave empty card space (the two problems from the last pass). Columns    */
/* pack images of any height cleanly.                                             */
/* ------------------------------------------------------------------------------ */
.photo-gallery, .grid-gallery{display:block !important;column-count:3;column-gap:16px;grid-template-columns:none !important}
@media(max-width:900px){.photo-gallery,.grid-gallery{column-count:2}}
@media(max-width:540px){.photo-gallery,.grid-gallery{column-count:1;column-gap:0}}
.pg-item, .ph{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  display:block !important;position:relative;margin:0 0 16px;width:100%;
  height:auto !important;min-height:0 !important;aspect-ratio:auto !important;grid-column:auto !important;grid-row:auto !important;
  border-radius:16px;overflow:hidden;background:#160b28;border:1px solid rgba(201,162,75,.14);
  box-shadow:0 12px 30px -16px rgba(58,29,92,.5);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pg-item:hover, .ph:hover{transform:translateY(-4px);box-shadow:0 22px 46px -18px rgba(58,29,92,.6)}
.pg-item img, .ph img{
  width:100% !important;height:auto !important;display:block;
  object-fit:contain !important;object-position:50% 50% !important;padding:0 !important;background:transparent;
  transition:transform .7s var(--ease)}
.pg-item:hover img, .ph:hover img{transform:scale(1.04)}
.pg-item::after, .ph::after{content:none !important}
.pg-item figcaption, .ph figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;transform:none !important;opacity:1 !important;
  color:#fff;font-size:.9rem;font-weight:600;line-height:1.3;text-shadow:0 1px 6px rgba(0,0,0,.55);
  padding:34px 15px 13px;
  background:linear-gradient(to top,rgba(8,4,16,.92) 0%,rgba(8,4,16,.55) 45%,rgba(8,4,16,0) 100%)}
.pg-item--tall,.pg-item--wide,.ph--tall,.ph--wide{height:auto !important;aspect-ratio:auto !important;grid-column:auto !important}

/* Feature photos (already object-fit:contain via natural size) — cap height on
   very tall portraits so they never dominate, and give a soft brand backdrop. */
.feature-photo{background:linear-gradient(160deg,#241241,#160b28)}
.feature-photo img{max-height:560px;object-fit:contain;margin:0 auto;display:block}

/* about/contact split media: portrait headshots must show the full head */
.split__media img{object-position:50% 22%}

/* ---------------------------------------------------------------- */
/* NEW — WARD 7 MAP + "A CALL TO SERVE" (replaces Google Maps embed) */
/* ---------------------------------------------------------------- */
.ward7map{position:relative;padding:96px 0;overflow:hidden;
  background:linear-gradient(180deg,#fff,var(--soft))}
.ward7map .orb--soft{opacity:.5}
.ward7map .wrap{position:relative;z-index:2}
.ward7map__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.ward7map__figure{position:relative;margin:0}
.ward7map__frame{position:relative;z-index:2;border-radius:22px;overflow:hidden;
  border:1px solid rgba(92,45,145,.16);background:#160b28;
  box-shadow:0 34px 74px -30px rgba(58,29,92,.6),0 0 0 10px rgba(255,255,255,.7),0 0 0 11px rgba(201,162,75,.4)}
.ward7map__frame img{width:100%;display:block}
.ward7map__cap{margin:14px 2px 0;font-size:.9rem;color:var(--body);text-align:center}
.ward7map__cap b{color:var(--purple-d);font-family:'Sora',sans-serif}
.ward7map__glow{position:absolute;inset:-26px;z-index:1;border-radius:30px;
  background:radial-gradient(circle at 62% 52%,rgba(201,162,75,.32),transparent 62%);
  filter:blur(30px);animation:orbPulse 8s ease-in-out infinite}
.ward7map__copy .eyebrow{margin-bottom:14px}
.ward7map__copy h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:18px}
.callserve{position:relative;padding:26px 28px 24px 30px;border-radius:18px;
  background:linear-gradient(135deg,rgba(92,45,145,.06),rgba(201,162,75,.08));
  border-left:5px solid var(--gold)}
.callserve p{color:var(--ink);font-size:1.04rem;line-height:1.62;margin:0 0 12px}
.callserve p:last-of-type{margin-bottom:0}
.callserve .sig{display:block;margin-top:14px;font-family:'Sora',sans-serif;font-weight:700;
  color:var(--purple-d);font-size:1.02rem}
.ward7map__cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:900px){
  .ward7map{padding:64px 0}
  .ward7map__grid{grid-template-columns:1fr;gap:34px}
  .ward7map__figure{max-width:560px;margin:0 auto;width:100%}
}
@media(max-width:520px){
  .ward7map{padding:52px 0}
  .callserve{padding:20px 18px}
  .callserve p{font-size:.98rem}
  .ward7map__cta .btn{width:100%}
}

/* ---------------------------------------------------------------- */
/* NEW — RECENT RECOGNITIONS (framed certificate cards, full text)  */
/* ---------------------------------------------------------------- */
.recog{position:relative;padding:96px 0}
.recog__intro{max-width:820px;margin:0 auto 20px;text-align:center;color:var(--body);font-size:1.04rem;line-height:1.6}
.recog__intro b{color:var(--purple-d)}
.recog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
.recog-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.recog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
/* the certificate itself: shown FULLY (documents must never be cropped) */
.recog-card__doc{position:relative;padding:16px;background:linear-gradient(160deg,#f3eee1,#e7dcc4);
  display:flex;align-items:center;justify-content:center;min-height:230px}
.recog-card__doc img{max-width:100%;max-height:300px;width:auto;height:auto;display:block;
  object-fit:contain;border-radius:6px;
  box-shadow:0 12px 26px -12px rgba(40,24,10,.55),0 0 0 1px rgba(0,0,0,.06)}
.recog-card__body{padding:20px 22px 24px}
.recog-card__badge{display:inline-block;font-family:'Sora',sans-serif;font-weight:700;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  background:rgba(201,162,75,.12);padding:.36em .8em;border-radius:100px;margin-bottom:10px}
.recog-card__body h3{font-size:1.14rem;margin:0 0 8px;color:var(--ink);line-height:1.2}
.recog-card__body p{margin:0;color:var(--body);font-size:.94rem;line-height:1.55}
.recog-card__date{display:block;margin-top:10px;font-size:.82rem;font-weight:600;color:var(--purple)}
@media(max-width:900px){
  .recog{padding:64px 0}
  .recog-grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  .recog-card__doc img{max-height:none;width:100%}
}

/* Home teaser strip for recognitions (compact 3-up) */
.recogteaser{padding:92px 0;background:var(--white);position:relative}
.recogteaser__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.recogteaser__card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.recogteaser__card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.recogteaser__doc{padding:12px;background:linear-gradient(160deg,#f3eee1,#e7dcc4);
  display:flex;align-items:center;justify-content:center;min-height:170px}
.recogteaser__doc img{max-width:100%;max-height:210px;width:auto;object-fit:contain;border-radius:5px;
  box-shadow:0 8px 18px -10px rgba(40,24,10,.5)}
.recogteaser__card figcaption{padding:14px 16px 16px}
.recogteaser__card figcaption strong{display:block;font-family:'Sora',sans-serif;color:var(--purple-d);
  font-size:1rem;margin-bottom:3px}
.recogteaser__card figcaption span{color:var(--body);font-size:.86rem}
@media(max-width:820px){.recogteaser{padding:62px 0}.recogteaser__grid{grid-template-columns:1fr;max-width:460px;margin:30px auto 0}}

/* ---------------------------------------------------------------- */
/* NEW — CANADA DAY IN WARD 7 (national-pride community set)         */
/* ---------------------------------------------------------------- */
.canada{position:relative;padding:96px 0;background:linear-gradient(180deg,var(--soft),#fff)}
.canada__flagbar{height:6px;border-radius:6px;max-width:220px;margin:0 auto 22px;
  background:linear-gradient(90deg,#D80621 0 28%,#fff 28% 72%,#D80621 72% 100%);
  box-shadow:0 4px 14px -6px rgba(216,6,33,.5)}
.canada-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:200px;gap:16px;margin-top:32px}
.canada-cell{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#241241,#160b28);
  border:1px solid rgba(201,162,75,.16);box-shadow:var(--shadow-sm)}
.canada-cell img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.canada-cell:hover img{transform:scale(1.05)}
.canada-cell::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 46%,rgba(20,10,36,.82))}
.canada-cell figcaption{position:absolute;left:15px;right:15px;bottom:13px;z-index:2;color:#fff;
  font-family:'Sora',sans-serif;font-weight:600;font-size:.9rem;line-height:1.32;
  transform:translateY(5px);opacity:.94;transition:.35s}
.canada-cell:hover figcaption{transform:translateY(0);opacity:1}
/* layout spans across 6 cols: hero group wide+tall, portrait tall, rest fill */
.canada-cell--hero{grid-column:span 3;grid-row:span 2}
.canada-cell--tall{grid-column:span 2;grid-row:span 2}
.canada-cell--wide{grid-column:span 3}
.canada-cell--std{grid-column:span 2}
/* portrait image should keep faces: contain on the tall cell */
.canada-cell--tall img{object-fit:cover;object-position:50% 30%}
@media(max-width:900px){
  .canada{padding:64px 0}
  .canada-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:210px}
  .canada-cell--hero{grid-column:span 2;grid-row:span 2}
  .canada-cell--tall{grid-column:span 1;grid-row:span 2}
  .canada-cell--wide{grid-column:span 2}
  .canada-cell--std{grid-column:span 1}
}
@media(max-width:520px){
  .canada-grid{grid-template-columns:1fr 1fr;grid-auto-rows:160px;gap:10px}
  .canada-cell--hero{grid-column:span 2;grid-row:span 2}
  .canada-cell--tall{grid-column:span 1;grid-row:span 2}
  .canada-cell figcaption{font-size:.78rem;left:11px;right:11px;bottom:10px}
}
@media(max-width:400px){
  .canada-grid{grid-auto-rows:150px}
}

/* ---------------------------------------------------------------- */
/* FIX 5 — GET INVOLVED band: strong scrim so text is crisp + readable */
/* ---------------------------------------------------------------- */
/* Push her photo to one side on desktop AND lay a dark gradient scrim
   under all the text so headline/paragraph/buttons/phone line pop. */
.involved__video img{object-position:70% 40% !important}   /* frame her to the right */
.involved .involved__overlay{
  background:
    linear-gradient(90deg, rgba(24,12,42,.95) 0%, rgba(36,18,60,.9) 42%, rgba(58,29,92,.6) 78%, rgba(92,45,145,.42) 100%),
    radial-gradient(90% 120% at 20% 50%, rgba(20,10,36,.55), transparent 60%) !important}
.involved__inner{max-width:760px;margin-left:0;margin-right:auto;text-align:left}
.involved__inner .eyebrow{justify-content:flex-start}
.involved__btns{justify-content:flex-start}
.involved__contact{color:#fff}
.involved__contact a{color:var(--gold-l)}
/* a subtle text shadow guarantees legibility over any bright part of the photo */
.involved__inner h2,.involved__inner>p{text-shadow:0 2px 18px rgba(12,6,24,.55)}
@media(max-width:820px){
  .involved__inner{text-align:center;margin:0 auto}
  .involved__inner .eyebrow,.involved__btns{justify-content:center}
  .involved__video img{object-position:60% 35% !important}
  /* on mobile, darken further + center the scrim for max contrast */
  .involved .involved__overlay{
    background:linear-gradient(160deg, rgba(24,12,42,.94), rgba(58,29,92,.82) 70%) !important}
}

/* ---------------------------------------------------------------- */
/* FIX 6 — GLOBAL MOBILE HARDENING (390px / 430px)                  */
/* ---------------------------------------------------------------- */
/* Responsive images + no horizontal overflow anywhere */
img{max-width:100%}
html,body{overflow-x:hidden}
*{min-width:0}
@media(max-width:640px){
  /* generous tap targets on all buttons + nav links */
  .btn{min-height:46px;padding-top:.85em;padding-bottom:.85em}
  .nav__links a{padding:12px 6px}
  /* intro banner never overflows */
  .intro__photo img{max-height:none}
  /* band headings breathe */
  .band__inner h2{font-size:1.5rem}
}
@media(max-width:430px){
  .wrap{padding-left:18px;padding-right:18px}
  .hero__title{font-size:2rem}
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%}
  .stat-strip{grid-template-columns:1fr 1fr;gap:12px}
  .involved__btns .btn{width:100%}
}
@media(max-width:390px){
  .hero__title{font-size:1.85rem}
  .stat-strip .sh b{font-size:2rem}
}

/* first-visit intro popup: guarantee it fits the viewport with internal scroll */
@media(max-width:640px){
  .nintro-ov{padding:14px 12px;align-items:flex-start}
  .nintro{max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);grid-template-columns:1fr;
    overflow:hidden;display:flex;flex-direction:column}
  .nintro__media{height:150px;flex:none}
  .nintro__body{padding:20px 18px 22px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nintro__body h2{font-size:1.32rem}
  .nintro__body p{font-size:.96rem}
  .nintro__making{font-size:.9rem;padding:12px 13px}
  .nintro__cta{gap:10px}
  .nintro__cta .btn{width:100%}
}
@media(max-width:430px) and (max-height:720px){
  .nintro__media{height:118px}
  .nintro__body{padding:16px 16px 18px}
}

/* ---- A Call to Serve (full-width readable HTML block on home) ---- */
.callserve-sec{position:relative;padding:88px 0 96px;overflow:hidden;
  background:linear-gradient(180deg,#fff,var(--soft))}
.callserve-sec .wrap{position:relative;z-index:2}
.callserve-wrap{max-width:860px;margin:0 auto;text-align:center}
.callserve-wrap .section-head{text-align:center}
.callserve--lg{max-width:820px;margin:0 auto;text-align:left;
  padding:32px 34px 30px 38px;border-radius:20px;
  background:linear-gradient(135deg,rgba(92,45,145,.06),rgba(201,162,75,.09));
  border-left:6px solid var(--gold);box-shadow:var(--shadow-sm)}
.callserve--lg p{color:var(--ink);font-size:1.08rem;line-height:1.66;margin:0 0 14px}
.callserve--lg .sig{display:block;margin-top:14px;font-family:'Sora',sans-serif;font-weight:700;
  color:var(--purple-d);font-size:1.06rem;text-align:right}
.callserve-sec .ward7map__cta{margin-top:26px}
@media(max-width:640px){
  .callserve-sec{padding:60px 0 66px}
  .callserve--lg{padding:24px 20px;border-left-width:5px}
  .callserve--lg p{font-size:1rem}
  .callserve-sec .ward7map__cta .btn{width:100%}
}

/* ---- Contact page: on-brand Ward 7 location card (replaces broken map) ---- */
.ward7card{display:flex;gap:16px;align-items:center;padding:20px 22px;border-radius:18px;
  background:linear-gradient(135deg,var(--purple-dd),var(--purple));color:#fff;
  box-shadow:0 18px 40px -20px rgba(58,29,92,.6)}
.ward7card__badge{flex:none;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;
  font-family:'Sora',sans-serif;font-weight:800;font-size:1.7rem;color:#3a2a08;
  background:linear-gradient(135deg,var(--gold),#b88f3c);box-shadow:0 10px 22px -10px rgba(201,162,75,.7)}
.ward7card b{display:block;font-family:'Sora',sans-serif;font-size:1.08rem;margin-bottom:4px}
.ward7card span{color:rgba(255,255,255,.9);font-size:.92rem;line-height:1.5}
@media(max-width:520px){.ward7card{padding:16px 16px}.ward7card__badge{width:48px;height:48px;font-size:1.4rem}}

/* ---- Get Involved: clean split (fixes darkened-photo + overlap) ---- */
.involved--clean{position:relative;padding:84px 0;overflow:hidden;
  background:linear-gradient(135deg,#2a1145 0%,#3a1a6e 52%,#5c2d91 100%)}
.involved--clean .involved__video,.involved--clean .involved__overlay,.involved--clean::before{display:none !important}
.involved--clean .involved__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;position:relative;z-index:2}
.involved--clean .involved__copy{color:#fff;text-align:left}
.involved--clean .involved__copy .eyebrow{justify-content:flex-start}
.involved--clean .involved__copy h2{color:#fff;text-shadow:none}
.involved--clean .involved__copy p{color:rgba(255,255,255,.92);text-shadow:none}
.involved--clean .involved__btns{justify-content:flex-start;margin-top:22px}
.involved--clean .involved__contact{margin-top:18px;color:#fff}
.involved--clean .involved__contact a{color:var(--gold-l);font-weight:700}
.involved--clean .involved__photo img{width:100%;border-radius:20px;object-fit:cover;object-position:50% 18%;
  aspect-ratio:4/5;box-shadow:0 34px 66px -26px rgba(0,0,0,.55);border:3px solid rgba(255,255,255,.16)}
@media(max-width:820px){
  .involved--clean .involved__grid{grid-template-columns:1fr;text-align:center;gap:30px}
  .involved--clean .involved__copy{text-align:center}
  .involved--clean .involved__copy .eyebrow,.involved--clean .involved__btns{justify-content:center}
  .involved--clean .involved__photo{max-width:300px;margin:0 auto;order:-1}
}

/* ============================================================= */
/* ===== JULY 2026 v3 :: AWARDS SHOWCASE PAGE + BADGE CARDS ==== */
/* =====   sound toggle, richer scroll-reveal, count-up glow  == */
/* =====   (does NOT touch .involved--clean or masonry rules) == */
/* ============================================================= */

/* ---- Awards page hero band: "two decades of service" ---- */
.awardhero{position:relative;overflow:hidden;padding:118px 0 88px;
  background:linear-gradient(120deg,#2a1145 0%,#3a1a6e 52%,#5c2d91 100%);color:#fff;isolation:isolate}
.awardhero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 80% at 12% 20%,rgba(201,162,75,.28),transparent 60%),
    radial-gradient(55% 75% at 92% 90%,rgba(138,90,200,.4),transparent 62%)}
.awardhero .wrap{position:relative;z-index:2;text-align:center;max-width:900px}
.awardhero .eyebrow{justify-content:center}
.awardhero h1{color:#fff;font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.1;margin:6px 0 16px;text-shadow:0 2px 22px rgba(12,6,24,.45)}
.awardhero h1 .grad{background:linear-gradient(100deg,var(--gold-l),#f0d78a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.awardhero p{color:rgba(255,255,255,.92);font-size:1.12rem;max-width:680px;margin:0 auto 8px}
.awardhero__yrs{display:inline-flex;align-items:center;gap:14px;margin-top:22px;
  font-family:'Sora',sans-serif;font-weight:800;letter-spacing:.04em;
  background:rgba(255,255,255,.08);border:1px solid rgba(201,162,75,.4);border-radius:100px;padding:12px 24px}
.awardhero__yrs b{font-size:1.5rem;color:var(--gold-l)}
.awardhero__yrs span{font-size:.82rem;color:rgba(255,255,255,.82);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.awardhero__stats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px}
.awardhero__stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:16px;
  padding:16px 22px;min-width:150px}
.awardhero__stat b{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:2rem;color:#fff;line-height:1}
.awardhero__stat span{display:block;margin-top:6px;font-size:.8rem;color:rgba(255,255,255,.82)}
@media(max-width:640px){.awardhero{padding:90px 0 64px}.awardhero__stat{min-width:130px;padding:14px 16px}}

/* ---- Certificate showcase (documents shown FULLY, never cropped) ---- */
.certshow{position:relative;padding:88px 0}
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:36px}
.cert-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.cert-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.cert-card__doc{position:relative;padding:18px;background:linear-gradient(160deg,#f4efe2,#e7dcc4);
  display:flex;align-items:center;justify-content:center;min-height:260px}
.cert-card__doc img{max-width:100%;max-height:340px;width:auto;height:auto;display:block;object-fit:contain;
  border-radius:6px;box-shadow:0 14px 30px -12px rgba(40,24,10,.6),0 0 0 1px rgba(0,0,0,.06)}
.cert-card__body{padding:22px 24px 26px}
.cert-card__badge{display:inline-block;font-family:'Sora',sans-serif;font-weight:700;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  background:rgba(201,162,75,.12);padding:.36em .8em;border-radius:100px;margin-bottom:10px}
.cert-card__body h3{font-size:1.16rem;margin:0 0 8px;color:var(--ink);line-height:1.22}
.cert-card__body p{margin:0;color:var(--body);font-size:.94rem;line-height:1.55}
.cert-card__date{display:block;margin-top:12px;font-size:.82rem;font-weight:600;color:var(--purple)}
@media(max-width:900px){.certshow{padding:60px 0}.cert-grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  .cert-card__doc img{max-height:none;width:100%}}

/* ---- BADGE CARDS (business & community awards; gold/navy trophy) ---- */
.badges-sec{position:relative;padding:20px 0 90px}
.badges-intro{max-width:820px;margin:0 auto 8px;text-align:center;color:var(--body);font-size:1.04rem;line-height:1.6}
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.badge-card{position:relative;overflow:hidden;border-radius:18px;padding:30px 24px 26px;text-align:center;
  background:linear-gradient(165deg,#20103b 0%,#2e1652 60%,#3a1d5c 100%);
  border:1px solid rgba(201,162,75,.32);
  box-shadow:0 18px 42px -22px rgba(20,10,40,.85);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.badge-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,rgba(201,162,75,.22),transparent 55%)}
.badge-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(.4);opacity:.6;transition:.5s var(--ease)}
.badge-card:hover{transform:translateY(-8px);border-color:rgba(201,162,75,.6);
  box-shadow:0 30px 60px -24px rgba(20,10,40,.95),0 0 40px -8px rgba(201,162,75,.28)}
.badge-card:hover::after{transform:scaleX(1);opacity:1}
.badge-medal{position:relative;width:74px;height:74px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 30%,#f4dd94,#c9a24b 62%,#9c7a2f);
  box-shadow:0 10px 24px -8px rgba(201,162,75,.65),inset 0 2px 6px rgba(255,255,255,.5),inset 0 -3px 8px rgba(120,88,26,.6)}
.badge-medal svg{width:38px;height:38px;color:#3a2a08}
.badge-medal::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px dashed rgba(201,162,75,.5);animation:badgeSpin 22s linear infinite}
@keyframes badgeSpin{to{transform:rotate(360deg)}}
.badge-card h3{position:relative;font-size:1.08rem;color:#fff;margin:0 0 6px;line-height:1.25;font-family:'Sora',sans-serif}
.badge-card .issuer{position:relative;display:block;color:var(--gold-l);font-size:.9rem;font-weight:600;margin-bottom:4px}
.badge-card .yr{position:relative;display:inline-block;margin-top:8px;font-size:.74rem;font-weight:700;letter-spacing:.08em;
  color:rgba(255,255,255,.86);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  padding:.32em .8em;border-radius:100px}
@media(max-width:900px){.badge-grid{grid-template-columns:1fr 1fr;gap:16px}}
@media(max-width:520px){.badge-grid{grid-template-columns:1fr;gap:14px}.badges-sec{padding:10px 0 64px}}

/* scroll-reveal for badge cards: pop + rise (staggered via JS delay) */
.badge-card,.cert-card{opacity:0;transform:translateY(26px) scale(.96);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.badge-card.in,.cert-card.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.badge-card,.cert-card{opacity:1;transform:none;transition:none}.badge-medal::after{animation:none}}

/* ---- "As recognized by" logo collage strip on awards page ---- */
.awards-featured{padding:0 0 82px;text-align:center}
.awards-featured__frame{max-width:620px;margin:22px auto 0;padding:20px;border-radius:20px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.awards-featured__frame img{width:100%;height:auto;display:block;border-radius:10px}
.awards-featured p{max-width:640px;margin:0 auto;color:var(--body);font-size:.98rem}

/* ---- Homepage AWARDS TEASER (badge preview + link) ---- */
.awardteaser{position:relative;padding:92px 0;overflow:hidden;
  background:linear-gradient(180deg,#fff,var(--soft))}
.awardteaser .badge-grid{margin-top:30px}
.awardteaser__cta{text-align:center;margin-top:34px}
.awardteaser__ribbon{display:inline-flex;align-items:center;gap:10px;margin:0 auto 4px;
  font-family:'Sora',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--purple);background:rgba(92,45,145,.08);padding:.5em 1.1em;border-radius:100px}

/* ---------------------------------------------------------------- */
/* SUBTLE SOUND TOGGLE (fixed, small, unobtrusive) + reveal polish  */
/* ---------------------------------------------------------------- */
.sndtoggle{position:fixed;left:16px;bottom:16px;z-index:480;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(201,162,75,.5);cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(58,29,92,.94),rgba(42,20,68,.94));color:var(--gold-l);
  box-shadow:0 10px 26px -12px rgba(20,10,40,.7);transition:transform .25s var(--ease),box-shadow .25s var(--ease),opacity .25s}
.sndtoggle:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 14px 30px -12px rgba(20,10,40,.85)}
.sndtoggle svg{width:20px;height:20px;pointer-events:none}
.sndtoggle .snd-off-x{display:none}
.sndtoggle.is-muted{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.22)}
.sndtoggle.is-muted .snd-off-x{display:block}
.sndtoggle .snd-tip{position:absolute;left:52px;bottom:6px;white-space:nowrap;font-size:.72rem;font-weight:600;
  color:#fff;background:rgba(24,12,42,.92);border:1px solid rgba(201,162,75,.3);padding:5px 10px;border-radius:8px;
  opacity:0;transform:translateX(-6px);pointer-events:none;transition:.25s}
.sndtoggle:hover .snd-tip{opacity:1;transform:none}
@media(max-width:520px){.sndtoggle{left:12px;bottom:12px;width:38px;height:38px}.sndtoggle .snd-tip{display:none}}

/* soft press feedback on primary buttons (pairs with the click sound) */
.btn--gold:active,.btn--purple:active,.btn--white:active{transform:translateY(1px) scale(.985)}

/* gentle count-up pop for stat numbers when they finish */
.sh b.counted,.stat strong.counted,.awardhero__stat b.counted{animation:countPop .5s var(--ease)}
@keyframes countPop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}

/* extra classy hover lift for award/recognition rows already present */
.award{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.award:hover{transform:translateY(-4px)}

/* ---- Community page: prominent "1999-2026" years banner ---- */
.yearsbanner{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:30px 0 4px;padding:22px 26px;border-radius:18px;
  background:linear-gradient(135deg,#2a1145,#3a1d5c);color:#fff;
  box-shadow:0 22px 48px -24px rgba(42,20,68,.7);position:relative;overflow:hidden}
.yearsbanner::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 120% at 8% 50%,rgba(201,162,75,.28),transparent 60%)}
.yearsbanner__big{position:relative;font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(1.7rem,4vw,2.5rem);
  letter-spacing:.02em;color:var(--gold-l);white-space:nowrap}
.yearsbanner__txt{position:relative;font-size:1.02rem;color:rgba(255,255,255,.92);line-height:1.5;font-weight:500}
@media(max-width:560px){.yearsbanner{padding:18px 18px;gap:8px;flex-direction:column;align-items:flex-start;text-align:left}}

/* ---- new-photo gallery section intros keep tidy spacing ---- */
.commgal-head{margin-bottom:6px}

/* ============ MOBILE POLISH (overflow, sound toggle, rooted crop, back-to-top) ============ */
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
.wrap{box-sizing:border-box}
img,video,iframe{max-width:100%;height:auto}
p,.lead,.prose p,h1,h2,h3{overflow-wrap:break-word;word-wrap:break-word}
/* remove the sound / volume toggle on mobile (was overlapping the WhatsApp button) */
@media(max-width:820px){.sndtoggle{display:none !important}}
/* Rooted-in-community home cards: show the FULL photo, never crop a head */
.rooted__img{aspect-ratio:auto !important}
.rooted__img img{width:100% !important;height:auto !important;object-fit:contain !important}
/* Back-to-top button (appears on scroll, click = smooth scroll to top) */
.backtop{position:fixed;right:18px;bottom:94px;z-index:70;width:47px;height:47px;border:none;border-radius:50%;
  background:linear-gradient(135deg,#5c2d91,#3a1a6e);color:#fff;font-size:22px;line-height:1;cursor:pointer;
  box-shadow:0 12px 28px -8px rgba(58,29,92,.65);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s ease,transform .3s ease;display:grid;place-items:center}
.backtop.show{opacity:1;visibility:visible;transform:none}
.backtop:hover{filter:brightness(1.12);transform:translateY(-3px)}
@media(max-width:820px){.backtop{right:14px;bottom:86px;width:45px;height:45px}}

/* ===== Scrolled header: solid brand background (was white-on-white, hid the logo + menu) ===== */
.nav.scrolled{background:linear-gradient(90deg,#2a1145 0%,#3a1a6e 55%,#4a2a86 100%) !important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 24px -12px rgba(20,10,40,.55) !important}
.nav.scrolled .nav__links a{color:#fff !important}
.nav.scrolled .nav__links a:hover{color:var(--gold-l,#e9c877) !important}
.nav.scrolled .nav__burger span,
.nav.scrolled .nav__burger.x span{background:#fff !important}
.nav.scrolled .nav__cta{color:#3a2a08 !important}          /* gold Donate button keeps dark text */
.nav.scrolled .langsw{background:rgba(255,255,255,.14) !important}
.nav.scrolled .langsw button{color:#fff !important}
.nav.scrolled .langsw button.on{color:var(--gold-l,#e9c877) !important}
.nav.scrolled .nav__brand img{filter:none !important}       /* white logo now sits on dark, stays visible */