/* ============================================================
   CoBSMEs — Coalition of Black SMEs · Regina, Saskatchewan
   Site-wide stylesheet
   ------------------------------------------------------------
   Extends the APPROVED homepage design system across all pages.
   Do not change brand tokens without client sign-off.
   ============================================================ */

/* ---------- SELF-HOSTED FONTS (offline) ---------- */
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/poppins-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/poppins-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/poppins-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/poppins-latin-800-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Roboto'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/roboto-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Roboto'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/roboto-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Roboto'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/roboto-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Roboto'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/roboto-latin-700-normal.woff2') format('woff2');
}

/* ---------- BRAND TOKENS (approved — do not modify) ---------- */
:root{
  --teal-950:#0a3630;
  --teal-900:#0c4a41;
  --teal-800:#0e5c50;
  --teal-700:#14786a;
  --teal-600:#1a9583;
  --mint-100:#eaf6f2;
  --mint-200:#d8efe8;
  --yellow:#ffd400;
  --yellow-dark:#f0c400;
  --ink:#12211d;
  --gray-700:#4b5b56;
  --gray-500:#7c8b86;
  --line:#e4ece9;
  --white:#ffffff;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(10,54,48,.08);
  --shadow-lg:0 20px 50px rgba(10,54,48,.14);
}

/* ---------- BASE ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Roboto',sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
h1,h2,h3,h4{font-family:'Poppins',sans-serif; line-height:1.15; letter-spacing:-0.01em;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
button{font-family:'Roboto',sans-serif;}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--yellow); color:var(--teal-950); font-weight:700;
  padding:10px 18px; border-radius:0 0 10px 0;
}
.skip-link:focus{left:0;}
:focus-visible{outline:3px solid var(--teal-600); outline-offset:2px; border-radius:4px;}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-700);
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:999px; font-weight:600; font-size:15px;
  border:2px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  font-family:'Roboto',sans-serif;
}
.btn:hover{transform:translateY(-2px);}
.btn-yellow{background:var(--yellow); color:var(--teal-950); box-shadow:0 8px 22px rgba(255,212,0,.35);}
.btn-yellow:hover{background:var(--yellow-dark);}
.btn-outline-dark{background:transparent; border-color:rgba(255,255,255,.55); color:#fff;}
.btn-outline-dark:hover{background:rgba(255,255,255,.12);}
.btn-outline-teal{background:transparent; border-color:var(--teal-800); color:var(--teal-800);}
.btn-outline-teal:hover{background:var(--mint-100);}
.btn-teal{background:var(--teal-800); color:#fff;}
.btn-teal:hover{background:var(--teal-900);}
.btn-sm{padding:10px 18px; font-size:13.5px;}

/* ---------- PLACEHOLDER PHOTO BLOCKS (client to swap in real photography) ---------- */
.ph{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  display:flex; align-items:flex-end;
  background:linear-gradient(135deg,var(--teal-700),var(--teal-900));
}
.ph::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 20% 20%, rgba(255,255,255,.14) 0, transparent 40%),
                    radial-gradient(circle at 80% 70%, rgba(255,212,0,.16) 0, transparent 45%);
}
.ph-tag{
  position:relative; z-index:1; margin:16px; padding:8px 14px; border-radius:999px;
  background:rgba(10,54,48,.55); backdrop-filter:blur(6px);
  color:#fff; font-size:12px; font-weight:600; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:6px;
}

/* ---------- LOGO (approved placeholder mark — replace with official files only) ---------- */
.logo{display:flex; align-items:center; gap:10px;}
.logo-mark{
  width:42px; height:42px; border-radius:12px;
  background:conic-gradient(from 210deg, #ffd400, #6fbf3c, #0e5c50, #ffd400);
  flex:none;
}
.logo-text .name{font-family:'Poppins',sans-serif; font-weight:800; font-size:20px; color:var(--ink); line-height:1;}
.logo-text .tag{font-size:9px; font-weight:600; letter-spacing:.08em; color:var(--gray-500); text-transform:uppercase;}

/* ---------- NAV ---------- */
header.site-header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line); transition:box-shadow .25s ease;}
header.site-header.scrolled{box-shadow:0 6px 24px rgba(10,54,48,.08);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1240px; margin:0 auto; gap:18px;}
nav.links{display:flex; gap:30px; align-items:center;}
nav.links a{font-size:14.5px; font-weight:600; color:var(--gray-700); padding:6px 0; border-bottom:2px solid transparent; transition:color .15s, border-color .15s;}
nav.links a.active, nav.links a:hover{color:var(--teal-800); border-color:var(--teal-800);}
.nav-right{display:flex; align-items:center; gap:18px;}
.nav-phone{font-size:13.5px; font-weight:600; color:var(--gray-700); display:flex; align-items:center; gap:6px; white-space:nowrap;}
.menu-btn{
  display:none; background:none; border:none; cursor:pointer; width:44px; height:44px;
  align-items:center; justify-content:center; border-radius:10px;
}
.menu-btn:hover{background:var(--mint-100);}
.menu-btn .bars{position:relative; width:22px; height:2px; background:var(--teal-900); border-radius:2px; transition:background .2s;}
.menu-btn .bars::before,.menu-btn .bars::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:var(--teal-900); border-radius:2px; transition:transform .25s, top .25s;
}
.menu-btn .bars::before{top:-7px;}
.menu-btn .bars::after{top:7px;}
.menu-btn[aria-expanded="true"] .bars{background:transparent;}
.menu-btn[aria-expanded="true"] .bars::before{top:0; transform:rotate(45deg);}
.menu-btn[aria-expanded="true"] .bars::after{top:0; transform:rotate(-45deg);}

/* Mobile drawer */
.mobile-nav{
  display:none; position:fixed; top:74px; left:0; right:0; bottom:0; z-index:49;
  background:#fff; padding:22px 32px 40px; overflow-y:auto;
  transform:translateY(-8px); opacity:0; transition:transform .25s ease, opacity .25s ease;
}
.mobile-nav.open{display:block; transform:translateY(0); opacity:1;}
.mobile-nav a{
  display:block; padding:16px 4px; font-family:'Poppins',sans-serif; font-weight:600; font-size:18px;
  color:var(--ink); border-bottom:1px solid var(--line);
}
.mobile-nav a.active{color:var(--teal-800);}
.mobile-nav .btn{margin-top:22px; justify-content:center; width:100%;}
body.nav-locked{overflow:hidden;}

@media (max-width:1080px){
  nav.links{display:none;}
  .nav-phone{display:none;}
  .menu-btn{display:flex;}
}

/* ---------- SECTIONS ---------- */
section{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:44px;}
.section-head h2{font-size:32px; font-weight:800; margin-top:12px;}
.section-head p{color:var(--gray-700); font-size:15.5px; margin-top:12px; line-height:1.6;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---------- HOME HERO ---------- */
.hero{
  background:linear-gradient(120deg, var(--teal-950) 0%, var(--teal-800) 55%, var(--teal-600) 100%);
  position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
}
.hero-grid{
  max-width:1240px; margin:0 auto; padding:64px 32px 0;
  display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center;
  position:relative; z-index:1;
}
.hero h1{font-size:46px; font-weight:800; color:#fff; margin:18px 0 16px;}
.hero h1 span{color:var(--yellow);}
.hero p{color:rgba(255,255,255,.85); font-size:16.5px; line-height:1.6; max-width:480px; margin-bottom:30px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:8px;}
.hero-photo{position:relative;}
.hero-photo .ph{aspect-ratio:4/5; width:100%;}
.stat-float{
  position:absolute; background:rgba(10,54,48,.72); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:14px 18px; color:#fff;
  box-shadow:var(--shadow-lg);
}
.stat-float .num{font-family:'Poppins',sans-serif; font-weight:800; font-size:22px; color:var(--yellow);}
.stat-float .lbl{font-size:11.5px; color:rgba(255,255,255,.8); font-weight:600;}
.stat-float.s1{top:6%; right:-13%;}
.stat-float.s2{top:42%; right:-18%;}
.stat-float.s3{bottom:6%; right:-11%;}
.hero-bottom-space{height:70px;}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; padding-top:40px;}
  .hero h1{font-size:34px;}
  .stat-float{position:static; margin:10px 8px 0 0; display:inline-flex; gap:8px; align-items:baseline;}
  .hero-photo{order:-1;}
}

/* ---------- INTERIOR PAGE HERO ---------- */
.page-hero{
  background:linear-gradient(120deg, var(--teal-950) 0%, var(--teal-800) 55%, var(--teal-600) 100%);
  position:relative; overflow:hidden; padding:84px 0 76px; color:#fff;
}
.page-hero::after{
  content:""; position:absolute; right:-140px; top:-140px; width:440px; height:440px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
}
.page-hero .wrap{position:relative; z-index:1;}
.page-hero .eyebrow{color:var(--yellow);}
.page-hero h1{font-size:42px; font-weight:800; margin:16px 0 14px; max-width:760px;}
.page-hero h1 span{color:var(--yellow);}
.page-hero p{color:rgba(255,255,255,.85); font-size:16.5px; line-height:1.65; max-width:640px;}
.page-hero .hero-ctas{margin-top:28px;}
.breadcrumb{font-size:13px; color:rgba(255,255,255,.65); font-weight:600; margin-bottom:6px;}
.breadcrumb a:hover{color:#fff;}
@media (max-width:720px){
  .page-hero{padding:56px 0 52px;}
  .page-hero h1{font-size:31px;}
}

/* ---------- NEWS CAROUSEL (home + news page) ---------- */
.news{background:var(--mint-100);}
.news-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; gap:20px; flex-wrap:wrap;}
.news-nav{display:flex; gap:10px;}
.circle-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; color:var(--teal-900);
  transition:background .15s, color .15s, border-color .15s;
}
.circle-btn:hover, .circle-btn.on{background:var(--teal-800); border-color:var(--teal-800); color:#fff;}
.carousel{position:relative; overflow:hidden;}
.carousel-track{display:flex; transition:transform .55s cubic-bezier(.25,.7,.25,1);}
.carousel-slide{flex:0 0 100%; min-width:100%;}
.news-card{background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; display:grid; grid-template-columns:1fr 1fr;}
.news-card .ph{border-radius:0; aspect-ratio:auto; min-height:320px;}
.news-copy{padding:44px 44px;}
.news-copy .date{color:var(--gray-500); font-size:13px; margin-left:10px;}
.news-copy h3{font-size:24px; font-weight:700; margin:16px 0 12px;}
.news-copy p{color:var(--gray-700); font-size:15px; line-height:1.65; margin-bottom:18px;}
.pill{display:inline-block; background:var(--teal-900); color:#fff; font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:6px; letter-spacing:.04em;}
.link-arrow{color:var(--teal-800); font-weight:700; font-size:14px;}
.link-arrow:hover{text-decoration:underline;}
.dots{display:flex; gap:6px; justify-content:center; margin-top:26px;}
.dots button{width:7px; height:7px; border-radius:50%; background:var(--line); border:none; cursor:pointer; padding:0; transition:width .25s, background .25s;}
.dots button.on{background:var(--teal-800); width:20px; border-radius:5px;}
@media (max-width:860px){.news-card{grid-template-columns:1fr;} .news-copy{padding:30px;} .news-card .ph{min-height:220px;}}

/* ---------- MISSION (home) ---------- */
.mission-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.mission-copy .eyebrow{margin-bottom:10px;}
.mission-copy h2{font-size:34px; font-weight:800;}
.mission-box{background:var(--mint-100); border-left:4px solid var(--teal-800); border-radius:var(--radius-sm); padding:22px 24px; margin:22px 0 26px; color:var(--gray-700); font-size:15.5px; line-height:1.65;}
.icon-trio{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.icon-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:20px 18px; transition:box-shadow .2s, transform .2s;}
.icon-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
.icon-circle{width:40px; height:40px; border-radius:50%; background:var(--mint-200); display:flex; align-items:center; justify-content:center; margin-bottom:12px; color:var(--teal-800);}
.icon-card h3{font-size:15px; font-weight:700; margin-bottom:6px;}
.icon-card p{font-size:13px; color:var(--gray-700); line-height:1.55;}
.mission-photo .ph{aspect-ratio:4/3;}
@media (max-width:900px){.mission-grid{grid-template-columns:1fr;} .icon-trio{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.icon-trio{grid-template-columns:1fr;}}

/* ---------- WHO WE ARE (dark band) ---------- */
.who{background:var(--teal-900); color:#fff; position:relative; overflow:hidden;}
.who::before{content:""; position:absolute; left:-100px; bottom:-140px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(255,212,0,.10), transparent 70%);}
.who-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:center; position:relative; z-index:1;}
.who-copy .eyebrow{color:var(--yellow);}
.who-copy h2{font-size:32px; font-weight:800; margin:14px 0 16px;}
.who-copy p{color:rgba(255,255,255,.82); font-size:15.5px; line-height:1.7; margin-bottom:14px;}
.who-photo .ph{aspect-ratio:1/1;}
@media (max-width:900px){.who-grid{grid-template-columns:1fr;}}

/* ---------- WHAT WE DO ---------- */
.whatwedo{padding-top:0;}
.whatwedo .section-head{margin:0 auto 44px; text-align:center; max-width:600px;}
.wwd-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.wwd-card{background:var(--teal-800); border-radius:var(--radius-lg); padding:32px 28px; color:#fff; position:relative; overflow:hidden; transition:transform .2s, box-shadow .2s;}
.wwd-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.wwd-card:nth-child(2){background:var(--teal-700);}
.wwd-card:nth-child(3){background:var(--teal-900);}
.wwd-icon{width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-size:22px;}
.wwd-card h3{font-size:20px; font-weight:700; margin-bottom:6px;}
.wwd-card .kicker{color:var(--yellow); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; display:block;}
.wwd-card p{font-size:14px; color:rgba(255,255,255,.82); line-height:1.6;}
@media (max-width:900px){.wwd-grid{grid-template-columns:1fr;}}

/* ---------- IMPACT + VALUES ---------- */
.impactbar{background:var(--mint-100);}
.impact-inner{background:linear-gradient(120deg, var(--teal-950), var(--teal-800)); border-radius:var(--radius-lg); padding:44px 48px; color:#fff;}
.impact-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; align-items:flex-start; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.16); margin-bottom:32px;}
.impact-top h2{font-size:26px; font-weight:800; max-width:360px;}
.impact-top .eyebrow{color:var(--yellow); margin-bottom:8px;}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
.stat-row .num{font-family:'Poppins',sans-serif; font-weight:800; font-size:30px; color:var(--yellow);}
.stat-row .lbl{font-size:13px; color:rgba(255,255,255,.82); margin-top:4px;}
.values-row{display:flex; gap:28px; margin-top:32px; flex-wrap:wrap; align-items:center;}
.values-row .eyebrow{color:rgba(255,255,255,.7);}
.value-chip{font-weight:700; font-size:14px; padding:8px 18px; border:1px solid rgba(255,255,255,.3); border-radius:999px;}
@media (max-width:900px){.stat-row{grid-template-columns:1fr 1fr;} .impact-inner{padding:34px 24px;}}

/* ---------- PROGRAM CARDS ---------- */
.programs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.prog-card{border:1px solid var(--line); border-radius:var(--radius-md); padding:26px 22px; transition:box-shadow .2s, transform .2s; background:#fff;}
.prog-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
.prog-icon{width:46px; height:46px; border-radius:12px; background:var(--mint-200); color:var(--teal-800); display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:20px;}
.prog-card h3{font-size:16.5px; font-weight:700; margin-bottom:8px;}
.prog-card p{font-size:13.5px; color:var(--gray-700); line-height:1.55;}
.programs-cta{text-align:center; margin-top:36px;}
@media (max-width:900px){.programs-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.programs-grid{grid-template-columns:1fr;}}

/* ---------- EVENTS + CALENDAR ---------- */
.events{background:var(--mint-100);}
.events-top{background:linear-gradient(120deg,var(--teal-900),var(--teal-700)); border-radius:var(--radius-lg); padding:34px 40px; color:#fff; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:34px;}
.events-top h3{font-size:24px; font-weight:800; margin:8px 0 10px;}
.events-top p{color:rgba(255,255,255,.82); font-size:14px; max-width:420px;}
.events-grid{display:grid; grid-template-columns:.95fr 1.3fr; gap:24px; align-items:start;}
.cal-card{background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:26px;}
.cal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; font-weight:700; font-family:'Poppins',sans-serif;}
.cal-head button{background:none; border:1px solid var(--line); width:32px; height:32px; border-radius:50%; cursor:pointer; color:var(--teal-900); font-size:15px; transition:background .15s, color .15s;}
.cal-head button:hover{background:var(--teal-800); color:#fff; border-color:var(--teal-800);}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; text-align:center; font-size:12.5px;}
.cal-grid .dow{color:var(--gray-500); font-weight:700; padding-bottom:6px;}
.cal-grid .day{padding:8px 0; border-radius:8px; color:var(--gray-700);}
.cal-grid .day.today{background:var(--teal-800); color:#fff; font-weight:700;}
.cal-grid .day.evt{background:var(--mint-200); color:var(--teal-800); font-weight:700; cursor:pointer; position:relative;}
.cal-grid .day.evt:hover{background:var(--yellow); color:var(--teal-950);}
.cal-note{margin-top:16px; font-size:12px; color:var(--gray-500); line-height:1.5;}
.cal-note .swatch{display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--mint-200); margin-right:6px; vertical-align:-1px;}
.evt-list{display:flex; flex-direction:column; gap:16px;}
.evt-row{display:flex; gap:16px; align-items:center; background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow); padding:16px; transition:transform .18s, box-shadow .18s;}
.evt-row:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.evt-row .ph{width:88px; height:88px; border-radius:12px; flex:none;}
.evt-row .info{flex:1;}
.evt-row h4{font-size:15.5px; font-weight:700; margin-bottom:5px;}
.evt-row .meta{font-size:13px; color:var(--gray-500);}
@media (max-width:900px){.events-grid{grid-template-columns:1fr;}}
@media (max-width:560px){
  .evt-row{flex-wrap:wrap;}
  .evt-row .ph{width:100%; height:120px;}
}

/* ---------- SUCCESS STORIES ---------- */
.stories-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.story-card{border:1px solid var(--line); border-radius:var(--radius-md); padding:26px; background:#fff; transition:box-shadow .2s, transform .2s;}
.story-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
.story-top{display:flex; gap:12px; align-items:center; margin-bottom:14px;}
.avatar{width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--teal-700),var(--teal-900)); flex:none;}
.story-top .who-name{font-weight:700; font-size:14.5px;}
.story-top .biz{font-size:12.5px; color:var(--gray-500);}
.story-card blockquote{font-size:14.5px; color:var(--gray-700); line-height:1.6; font-style:italic; margin-bottom:14px;}
@media (max-width:900px){.stories-grid{grid-template-columns:1fr;}}

/* ---------- PARTNERS ---------- */
.partners{background:var(--mint-100);}
.partners-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px 34px;}
.partner-badge{
  font-family:'Poppins',sans-serif; font-weight:700; color:var(--gray-700); font-size:15px; opacity:.8;
  border:1px dashed var(--gray-500); border-radius:10px; padding:12px 20px; background:#fff;
  transition:opacity .15s;
}
.partner-badge:hover{opacity:1;}
.partner-badge small{display:block; font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-500); margin-bottom:2px;}

/* ---------- CTA BANNER ---------- */
.cta-banner{background:linear-gradient(120deg,var(--teal-900),var(--teal-600)); border-radius:var(--radius-lg); overflow:hidden; display:grid; grid-template-columns:1.2fr 1fr; align-items:center; max-width:1176px; margin:0 auto;}
.cta-copy{padding:48px 48px; color:#fff;}
.cta-copy h2{font-size:28px; font-weight:800; margin-bottom:10px;}
.cta-copy p{color:rgba(255,255,255,.85); font-size:15px; margin-bottom:24px;}
.cta-btns{display:flex; gap:14px; flex-wrap:wrap;}
.cta-photo{height:100%; display:flex; align-items:center; justify-content:center; padding:22px 22px 22px 0;}
.cta-photo .ph{border-radius:var(--radius-lg); aspect-ratio:5/4; height:auto; width:100%; box-shadow:0 20px 46px rgba(0,0,0,.22);}
@media (max-width:860px){.cta-banner{grid-template-columns:1fr; margin:0 20px;} .cta-photo{display:none;} .cta-copy{padding:40px 30px;}}

/* ---------- FOOTER (approved scope: logo · navigation · contact · social · copyright) ---------- */
footer{background:var(--teal-950); color:rgba(255,255,255,.78); padding:70px 0 26px; margin-top:90px;}
footer .logo-text .name{color:#fff;}
.foot-top{display:grid; grid-template-columns:1.5fr 1fr 1.2fr; gap:40px; padding-bottom:44px;}
.foot-brand p{font-size:13.5px; line-height:1.7; margin:16px 0 20px; max-width:300px;}
.foot-social{display:flex; gap:10px;}
.foot-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.24);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, border-color .15s;
}
.foot-social a:hover{background:var(--yellow); border-color:var(--yellow); color:var(--teal-950);}
.foot-social svg{width:15px; height:15px; fill:currentColor;}
.foot-col h5{color:#fff; font-size:13.5px; font-weight:700; margin-bottom:16px; letter-spacing:.02em; font-family:'Poppins',sans-serif;}
.foot-col ul li{margin-bottom:10px; font-size:13.5px; line-height:1.6;}
.foot-col ul li a:hover{color:#fff;}
.foot-bottom{margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; font-size:12.5px; flex-wrap:wrap; gap:10px;}
@media (max-width:820px){.foot-top{grid-template-columns:1fr;}}

/* ============================================================
   PAGE-SPECIFIC EXTENSIONS
   ============================================================ */

/* ---------- ABOUT ---------- */
.about-anchor-nav{
  background:#fff; border-bottom:1px solid var(--line); position:sticky; top:74px; z-index:40;
}
.about-anchor-nav .wrap{display:flex; gap:26px; overflow-x:auto; padding-top:0; padding-bottom:0;}
.about-anchor-nav a{
  font-size:13.5px; font-weight:700; color:var(--gray-700); padding:16px 2px;
  border-bottom:3px solid transparent; white-space:nowrap;
}
.about-anchor-nav a:hover, .about-anchor-nav a.current{color:var(--teal-800); border-color:var(--yellow);}
.mv-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.mv-card{border-radius:var(--radius-lg); padding:40px 38px; color:#fff; position:relative; overflow:hidden;}
.mv-card.mission{background:linear-gradient(135deg,var(--teal-900),var(--teal-700));}
.mv-card.vision{background:var(--teal-950);}
.mv-card::after{content:""; position:absolute; right:-70px; bottom:-70px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(255,212,0,.14), transparent 70%);}
.mv-card .eyebrow{color:var(--yellow);}
.mv-card h3{font-size:24px; font-weight:800; margin:12px 0 14px;}
.mv-card p{color:rgba(255,255,255,.86); font-size:15.5px; line-height:1.7; position:relative; z-index:1;}
@media (max-width:820px){.mv-grid{grid-template-columns:1fr;}}

.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.value-card{border:1px solid var(--line); border-radius:var(--radius-md); padding:30px 26px; background:#fff; transition:box-shadow .2s, transform .2s;}
.value-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
.value-card .icon-circle{width:48px; height:48px; font-size:20px;}
.value-card h3{font-size:18px; font-weight:700; margin:14px 0 8px;}
.value-card p{font-size:14px; color:var(--gray-700); line-height:1.6;}
@media (max-width:800px){.values-grid{grid-template-columns:1fr;}}

/* History timeline */
.history{background:var(--mint-100);}
.timeline{position:relative; max-width:760px; margin:0 auto; padding-left:34px;}
.timeline::before{content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--teal-800); opacity:.25; border-radius:2px;}
.tl-item{position:relative; padding:0 0 40px 20px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:""; position:absolute; left:-32px; top:4px; width:16px; height:16px; border-radius:50%;
  background:var(--yellow); border:3px solid var(--teal-800);
}
.tl-item .tl-year{font-family:'Poppins',sans-serif; font-weight:800; color:var(--teal-800); font-size:14px; letter-spacing:.06em; text-transform:uppercase;}
.tl-item h3{font-size:18px; font-weight:700; margin:6px 0 8px;}
.tl-item p{font-size:14.5px; color:var(--gray-700); line-height:1.65; max-width:560px;}

/* ---------- PROGRAMS & EVENTS PAGE ---------- */
.filter-bar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.filter-chip{
  padding:10px 20px; border-radius:999px; border:1.5px solid var(--line); background:#fff;
  font-size:13.5px; font-weight:700; color:var(--gray-700); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.filter-chip:hover{border-color:var(--teal-800); color:var(--teal-800);}
.filter-chip.on{background:var(--teal-800); border-color:var(--teal-800); color:#fff;}

.program-detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.pd-card{
  border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; overflow:hidden;
  display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s;
}
.pd-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-4px);}
.pd-card.hidden{display:none;}
.pd-card .ph{border-radius:0; height:170px;}
.pd-body{padding:28px 26px 26px; display:flex; flex-direction:column; flex:1;}
.pd-meta{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.tag{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 11px; border-radius:6px; background:var(--mint-200); color:var(--teal-800);
}
.tag.date{background:var(--teal-950); color:var(--yellow);}
.pd-body h3{font-size:20px; font-weight:700; margin-bottom:10px;}
.pd-body p{font-size:14.5px; color:var(--gray-700); line-height:1.65; margin-bottom:16px;}
.pd-facts{display:flex; flex-direction:column; gap:8px; margin-bottom:20px; font-size:13.5px; color:var(--gray-700);}
.pd-facts span{display:flex; align-items:center; gap:8px;}
.pd-facts .dot{width:6px; height:6px; border-radius:50%; background:var(--yellow); flex:none;}
.pd-body .btn{margin-top:auto; align-self:flex-start;}
@media (max-width:860px){.program-detail-grid{grid-template-columns:1fr;}}

.bbei-band{background:var(--teal-900); color:#fff; position:relative; overflow:hidden;}
.bbei-band::before{content:""; position:absolute; right:-100px; top:-120px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(255,212,0,.12), transparent 70%);}
.bbei-inner{position:relative; z-index:1; display:grid; grid-template-columns:1.2fr .8fr; gap:50px; align-items:center;}
.bbei-inner .eyebrow{color:var(--yellow);}
.bbei-inner h2{font-size:30px; font-weight:800; margin:14px 0 14px;}
.bbei-inner p{color:rgba(255,255,255,.84); font-size:15.5px; line-height:1.7;}
.bbei-points{margin-top:22px; display:flex; flex-direction:column; gap:12px;}
.bbei-points li{display:flex; gap:12px; font-size:14.5px; color:rgba(255,255,255,.88); line-height:1.55;}
.bbei-points .tick{color:var(--yellow); font-weight:800; flex:none;}
@media (max-width:860px){.bbei-inner{grid-template-columns:1fr;}}

/* ---------- COMMUNITY HUB ---------- */
.hub-subnav{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:74px; z-index:40;}
.hub-subnav .wrap{display:flex; gap:26px; overflow-x:auto;}
.hub-subnav a{font-size:13.5px; font-weight:700; color:var(--gray-700); padding:16px 2px; border-bottom:3px solid transparent; white-space:nowrap;}
.hub-subnav a:hover, .hub-subnav a.current{color:var(--teal-800); border-color:var(--yellow);}

.hub-benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px;}
.hub-benefit{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-md); padding:18px 20px; color:#fff;}
.hub-benefit .hub-benefit-title{font-size:14.5px; font-weight:700; margin-bottom:4px; color:var(--yellow);}
.hub-benefit p{font-size:12.5px; color:rgba(255,255,255,.8); margin:0; line-height:1.5;}
@media (max-width:760px){.hub-benefits{grid-template-columns:1fr;}}

.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.why-list{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:26px;}
.why-item{border:1px solid var(--line); border-radius:var(--radius-md); padding:20px 18px; background:#fff;}
.why-item h3{font-size:14.5px; font-weight:700; margin-bottom:6px; color:var(--teal-900);}
.why-item p{font-size:13px; color:var(--gray-700); line-height:1.55; margin:0;}
@media (max-width:900px){.why-grid{grid-template-columns:1fr;}}
@media (max-width:520px){.why-list{grid-template-columns:1fr;}}

.access-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.access-card{border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:#fff; transition:box-shadow .2s, transform .2s;}
.access-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
.access-card .ph{border-radius:0; height:130px;}
.access-card .body{padding:20px 18px;}
.access-card h3{font-size:16px; font-weight:700; margin-bottom:8px;}
.access-card p{font-size:13px; color:var(--gray-700); line-height:1.55;}
@media (max-width:980px){.access-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.access-grid{grid-template-columns:1fr;}}

.involve-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.involve-card{border:1px solid var(--line); border-radius:var(--radius-md); padding:26px 22px; background:#fff; transition:box-shadow .2s, transform .2s;}
.involve-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
.involve-card .step{font-family:'Poppins',sans-serif; font-weight:800; font-size:26px; color:var(--yellow); -webkit-text-stroke:1px var(--teal-800); margin-bottom:12px;}
.involve-card h3{font-size:16px; font-weight:700; margin-bottom:8px;}
.involve-card p{font-size:13px; color:var(--gray-700); line-height:1.55; margin-bottom:14px;}
@media (max-width:980px){.involve-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.involve-grid{grid-template-columns:1fr;}}

/* Directory */
.directory{background:var(--mint-100);}
.dir-controls{background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:26px; display:grid; grid-template-columns:1.3fr 1fr 1fr auto; gap:14px; align-items:end; margin-bottom:34px;}
.field label{display:block; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-500); margin-bottom:7px;}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-family:'Roboto',sans-serif; font-size:14px; color:var(--ink); background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--teal-700); box-shadow:0 0 0 3px rgba(26,149,131,.14);
}
.field textarea{resize:vertical; min-height:110px;}
.field .err{display:none; font-size:12px; color:#b4231f; margin-top:6px; font-weight:600;}
.field.invalid input, .field.invalid select, .field.invalid textarea{border-color:#d3423e;}
.field.invalid .err{display:block;}
@media (max-width:920px){.dir-controls{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.dir-controls{grid-template-columns:1fr;}}

.dir-count{font-size:14px; font-weight:600; color:var(--gray-700); margin-bottom:22px;}
.dir-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.biz-card{
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:26px;
  display:flex; flex-direction:column; gap:14px; transition:box-shadow .2s, transform .2s;
}
.biz-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px);}
.biz-card.hidden{display:none;}
.biz-head{display:flex; gap:16px; align-items:center;}
.biz-logo{
  width:64px; height:64px; border-radius:14px; flex:none;
  background:linear-gradient(135deg,var(--teal-700),var(--teal-900));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Poppins',sans-serif; font-weight:800; font-size:19px;
}
.biz-head h3{font-size:17.5px; font-weight:700;}
.biz-rate{font-size:12.5px; color:var(--gray-500); margin-top:4px;}
.biz-rate .stars{color:var(--yellow-dark); letter-spacing:1px;}
.biz-rate .open{color:var(--teal-700); font-weight:700;}
.biz-card > p{font-size:14px; color:var(--gray-700); line-height:1.6;}
.biz-contacts{font-size:13px; color:var(--gray-700); display:flex; flex-direction:column; gap:5px;}
.biz-contacts strong{color:var(--ink);}
.biz-foot{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:auto; padding-top:6px;}
.biz-tags{display:flex; gap:8px; flex-wrap:wrap;}
.biz-actions{display:flex; gap:8px;}
@media (max-width:860px){.dir-grid{grid-template-columns:1fr;}}

.dir-empty{
  display:none; text-align:center; background:#fff; border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:56px 30px; color:var(--gray-700);
}
.dir-empty.show{display:block;}
.dir-empty h3{font-size:19px; margin-bottom:8px; color:var(--ink);}

/* Add a Business form */
.form-card{background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:40px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.form-grid .full{grid-column:1 / -1;}
.form-actions{margin-top:28px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.form-success{
  display:none; background:var(--mint-100); border:1.5px solid var(--teal-600);
  color:var(--teal-900); border-radius:var(--radius-sm); padding:16px 20px;
  font-size:14px; font-weight:600; margin-top:22px; line-height:1.55;
}
.form-success.show{display:block;}
.upload-box{
  border:2px dashed var(--line); border-radius:10px; padding:22px; text-align:center;
  font-size:13.5px; color:var(--gray-500); background:var(--mint-100); cursor:pointer;
  transition:border-color .15s;
}
.upload-box:hover{border-color:var(--teal-700); color:var(--teal-800);}
@media (max-width:760px){.form-grid{grid-template-columns:1fr;} .form-card{padding:28px 22px;}}

/* ---------- NEWS PAGE ---------- */
.featured-article{display:grid; grid-template-columns:1.15fr 1fr; align-items:start; gap:0; background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden;}
.featured-article .ph{border-radius:0; height:380px;}
.featured-body{padding:48px 46px; display:flex; flex-direction:column; justify-content:center;}
.featured-body h2{font-size:29px; font-weight:800; margin:16px 0 14px;}
.featured-body p{color:var(--gray-700); font-size:15.5px; line-height:1.7; margin-bottom:22px;}
@media (max-width:880px){.featured-article{grid-template-columns:1fr;} .featured-article .ph{height:240px;} .featured-body{padding:32px 28px;}}

.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.news-item{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;
  display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s;
}
.news-item:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
.news-item.hidden{display:none;}
.news-item .ph{border-radius:0; height:170px;}
.news-item .body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1;}
.news-item h3{font-size:16.5px; font-weight:700; margin:12px 0 8px; line-height:1.35;}
.news-item p{font-size:13.5px; color:var(--gray-700); line-height:1.6; margin-bottom:16px;}
.news-item .link-arrow{margin-top:auto;}
.news-item .meta-line{font-size:12px; color:var(--gray-500); font-weight:600;}
@media (max-width:960px){.news-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.news-grid{grid-template-columns:1fr;}}

.linkedin-note{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  color:var(--gray-700); background:var(--mint-100); border:1px solid var(--line);
  border-radius:999px; padding:8px 16px; margin-top:18px;
}

/* ---------- CONTACT PAGE ---------- */
.contact-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:30px; align-items:start;}
@media (max-width:920px){.contact-grid{grid-template-columns:1fr;}}

.info-card{background:linear-gradient(160deg,var(--teal-950),var(--teal-800)); color:#fff; border-radius:var(--radius-lg); padding:36px 34px;}
.info-card h3{font-size:21px; font-weight:800; margin-bottom:8px;}
.info-card > p{color:rgba(255,255,255,.82); font-size:14px; line-height:1.6; margin-bottom:26px;}
.info-rows{display:flex; flex-direction:column; gap:20px;}
.info-row{display:flex; gap:14px; align-items:flex-start;}
.info-ic{width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; flex:none; font-size:17px;}
.info-row h4{font-size:13px; font-weight:700; color:var(--yellow); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px;}
.info-row p{font-size:14px; color:rgba(255,255,255,.88); line-height:1.55; margin:0;}
.info-row a:hover{text-decoration:underline;}
.info-card .foot-social{margin-top:28px;}

.map-ph{
  border-radius:var(--radius-lg); overflow:hidden; position:relative; min-height:320px;
  background:
    linear-gradient(rgba(216,239,232,.55), rgba(216,239,232,.55)),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(14,92,80,.14) 46px 47px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(14,92,80,.14) 46px 47px),
    var(--mint-100);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.map-pin{text-align:center; background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:22px 30px;}
.map-pin .pin{font-size:26px; margin-bottom:6px;}
.map-pin h4{font-size:15px; font-weight:700;}
.map-pin p{font-size:13px; color:var(--gray-700); margin-top:4px;}

/* FAQ accordion */
.faq{background:var(--mint-100);}
.faq-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px;}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;}
.faq-q{
  width:100%; background:none; border:none; text-align:left; cursor:pointer;
  padding:22px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:15.5px; color:var(--ink);
}
.faq-q:hover{color:var(--teal-800);}
.faq-q .chev{
  flex:none; width:30px; height:30px; border-radius:50%; background:var(--mint-200); color:var(--teal-800);
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800;
  transition:transform .28s ease, background .2s;
}
.faq-item.open .faq-q .chev{transform:rotate(45deg); background:var(--yellow); color:var(--teal-950);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .32s ease;}
.faq-a p{padding:0 24px 22px; font-size:14.5px; color:var(--gray-700); line-height:1.7;}

/* ============================================================
   INTRO ANIMATION — supplied video (logo reveal), plays once.
   The logo itself is not re-animated by us; we present the
   client-supplied video as-is and fade into the homepage when done.
   ============================================================ */
.intro-overlay{
  position:fixed; inset:0; z-index:100;
  background:linear-gradient(120deg, #0a3630 0%, #0e5c50 55%, #1a9583 100%);
  display:grid; place-items:center; overflow:hidden;
  transition:opacity .8s ease;
}
.intro-overlay.fade-out{opacity:0; pointer-events:none;}
.intro-overlay[hidden]{display:none;}
.intro-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.intro-skip{
  position:absolute; z-index:2; bottom:26px; left:50%; transform:translateX(-50%);
  background:rgba(10,54,48,.4); border:1px solid rgba(255,255,255,.3); color:rgba(255,255,255,.85);
  font-size:12px; font-weight:600; letter-spacing:.06em; padding:9px 18px; border-radius:999px; cursor:pointer;
  transition:background .15s;
}
.intro-skip:hover{background:rgba(10,54,48,.7);}
body.intro-active{overflow:hidden;}
body.page-enter main, body.page-enter footer, body.page-enter .site-header{opacity:0;}
body.page-shown main, body.page-shown footer, body.page-shown .site-header{opacity:1; transition:opacity .9s ease;}

/* ---------- SCROLL REVEAL ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-d1{transition-delay:.08s;}
.reveal-d2{transition-delay:.16s;}
.reveal-d3{transition-delay:.24s;}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{transition-duration:.01ms !important; animation-duration:.01ms !important;}
  .reveal{opacity:1; transform:none;}
  .intro-overlay{display:none !important;}
  body.intro-active{overflow:auto;}
  body.page-enter main, body.page-enter footer, body.page-enter .site-header{opacity:1;}
}

/* ---------- SMALL SCREENS ---------- */
@media (max-width:720px){
  section{padding:60px 0;}
  .wrap{padding:0 20px;}
  .nav{padding:14px 20px;}
  .section-head h2{font-size:26px;}
  .about-anchor-nav, .hub-subnav{top:70px;}
}

/* ---------- PRINT ---------- */
@media print{
  header.site-header, footer, .intro-overlay, .menu-btn, .btn{display:none !important;}
}

/* ============================================================
   APPENDED (build): minimal states not covered above.
   Calendar range-edge buttons need a disabled cue so users
   aren't left clicking an unresponsive arrow.
   ============================================================ */
.cal-head button:disabled{opacity:.32; cursor:not-allowed;}
.cal-head button:disabled:hover{background:none; color:var(--teal-900); border-color:var(--line);}
.cal-grid .day.empty{visibility:hidden;}

/* ============================================================
   APPENDED (revision): official logo image
   The header/footer .logo-mark and the intro mark now render the
   official CoBSMEs logo (assets/cobsmes-mark.png) instead of the
   gradient-square placeholder. Sizing matches the 42px placeholder
   box in the header; the intro reveals the mark at large size.
   The logo is only revealed — never recoloured, redrawn, or animated.
   ============================================================ */
img.logo-mark{
  width:42px; height:42px; object-fit:contain;
  background:none; border-radius:0; padding:0;
}
footer img.logo-mark{width:40px; height:40px;}

/* Intro: reveal the real logo image (keeps the .intro-mark reveal
   transition: opacity + scale + blur from .intro-mark / .intro-mark.show) */


/* ============================================================
   APPENDED (client revision pass): new components required by
   the approved review documents. Reuses existing tokens, radii,
   shadows, and card conventions — no new visual language.
   ============================================================ */

/* Utility: keep two words glued to the same line (heading wraps) */
.nowrap{white-space:nowrap;}

/* Photo-on-teal treatment: float photography over teal panels with
   a visible gutter and a soft frame, instead of edge-to-edge fill. */
.hero-photo .ph{box-shadow:0 24px 60px rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08);}
.bbei-inner .ph{margin:0; box-shadow:0 20px 50px rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.08);}
.who-photo .ph{box-shadow:0 20px 50px rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.08);}
.ph img{width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;}

/* ---------- SUPPORTERS ---------- */
.supporters-section{background:var(--mint-100);}
.supporters-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:22px; align-items:stretch;
}
.supporters-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  padding:26px 22px; height:112px; transition:box-shadow .2s, transform .2s;
}
.supporters-card:hover{box-shadow:var(--shadow); transform:translateY(-2px);}
.supporters-card img{max-width:100%; max-height:54px; width:auto; height:auto; object-fit:contain;}
@media (max-width:820px){.supporters-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.supporters-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:400px){.supporters-grid{grid-template-columns:1fr;}}

/* ---------- LEADERSHIP (About page) ---------- */
.leadership-group{margin-bottom:52px;}
.leadership-group:last-child{margin-bottom:0;}
.leadership-group .group-label{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--teal-700); margin-bottom:22px; display:block;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.leadership-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:28px;}
.leader-card{text-align:center;}
.leader-circle{
  width:84px; height:84px; border-radius:50%; margin:0 auto 14px;
  background:linear-gradient(120deg, var(--teal-900), var(--teal-600));
  color:var(--mint-100);
  display:flex; align-items:center; justify-content:center;
  font-family:'Poppins',sans-serif; font-weight:800; font-size:26px;
}
.leader-card h3{font-family:'Poppins',sans-serif; font-weight:700; font-size:15px; color:var(--ink); margin-bottom:3px;}
.leader-card .role{font-size:12.5px; color:var(--gray-500); font-weight:600;}
.leader-note{font-size:13.5px; color:var(--gray-500); margin-top:18px; font-style:italic;}

/* ============================================================
   APPENDED (image art-direction pass): fixed-height card
   thumbnails crop landscape source photos into wider boxes via
   object-fit:cover. A pure centre crop biases toward torso/table
   level rather than faces. Weighting the crop toward the upper area
   keeps faces and interaction as the focal point — kept gentle
   (40%, not a tighter figure) so it never crops through a hairline
   or forehead; a milder bias is safer than an aggressive one.
   Hero/portrait images processed individually in Python already
   carry their own calibrated crop and are unaffected by this rule.
   ============================================================ */
.pd-card .ph img,
.access-card .ph img,
.news-item .ph img,
.evt-row .ph img,
.featured-article .ph img,
.news-card .ph img{
  object-position: 50% 40%;
}

/* ============================================================
   APPENDED (Contact page revision): live Google Maps embed,
   replacing the offline map placeholder. This is the one
   component on the site that requires an internet connection
   to render the map tiles themselves; everything else remains
   fully offline. Uses the existing --radius-lg design token.
   ============================================================ */
.map-container {
    width: 100%;
    height: 420px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #f5f5f5;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ============================================================
   APPENDED (visual refinement): supporting photography for the
   homepage Programs cards. Photo sits secondary to the content —
   a small header strip with the existing mint/teal icon badge
   overlapping its edge — reusing existing tokens (--radius-md,
   --mint-200, --teal-800, --shadow). No new card pattern elsewhere.
   ============================================================ */
.prog-card{padding:0; overflow:hidden;}
.prog-card-body{padding:24px 22px 26px;}
.prog-media{height:160px; position:relative; background:var(--mint-100);}
.prog-media img{width:100%; height:100%; object-fit:cover; object-position:50% 40%; display:block;}
.prog-card .prog-icon{
  position:absolute; left:18px; bottom:-18px; margin-bottom:0;
  border:3px solid #fff; box-shadow:var(--shadow);
}

/* ============================================================
   APPENDED (visual refinement): Past Event Gallery grid.
   Reuses existing radius/shadow tokens and .section-head /
   .reveal conventions — a clean responsive grid, no captions.
   ============================================================ */
.event-gallery-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
.event-gallery-grid .gph{
  border-radius:var(--radius-md); overflow:hidden; aspect-ratio:3/2;
  box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s;
}
.event-gallery-grid .gph:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.event-gallery-grid .gph img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:860px){.event-gallery-grid{grid-template-columns:repeat(2, 1fr);}}
@media (max-width:520px){.event-gallery-grid{grid-template-columns:1fr;}}

/* ============================================================
   APPENDED (supporter logo revision): tiered supporter display —
   primary BEP supporters (larger) + Past Supporters (standard grid).
   Reuses existing .supporters-card/.supporters-grid tokens, just adds
   the tier label and a larger-card variant for the two primaries.
   ============================================================ */
.supporters-tier{margin-bottom:36px;}
.supporters-tier:last-child{margin-bottom:0;}
.supporters-tier-label{
  display:block; text-align:center; font-family:'Poppins',sans-serif;
  font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--teal-700); margin-bottom:18px;
}
.supporters-grid-primary{
  grid-template-columns:repeat(2, minmax(200px, 320px));
  justify-content:center; max-width:700px; margin:0 auto;
}
.supporters-card-primary{height:140px; padding:30px 28px;}
.supporters-card-primary img{max-height:70px;}
@media (max-width:560px){
  .supporters-grid-primary{grid-template-columns:1fr; max-width:320px;}
}

/* ============================================================
   APPENDED (Supporters revision): Past Supporters shown as a
   continuous, infinitely-looping logo ribbon rather than a static
   grid — acknowledges previous supporters without taking much
   vertical space. White background, equal spacing, subtle fade at
   both edges, and pauses on hover (desktop). The track holds two
   identical copies of the logo set; the animation translates by
   exactly -50% so the second copy lands where the first began,
   giving a seamless, gap-free loop. Respects prefers-reduced-motion
   (falls back to a static wrapping row). Reuses --line / --radius.
   ============================================================ */
.supporters-ribbon{
  position:relative; overflow:hidden; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-md);
  padding:24px 0;
  min-height:0;                 /* never adopt content as a minimum height */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.supporters-ribbon-track{
  display:flex; width:max-content; align-items:center;
  height:62px;                  /* fixed row height — track can't grow with images */
  min-height:0;                 /* cancel flex min-content auto-growth */
  animation:supporters-scroll 40s linear infinite;
  will-change:transform;
}
.supporters-ribbon:hover .supporters-ribbon-track{animation-play-state:paused;}
.supporters-ribbon-item{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  height:62px; margin:0 44px;
  min-height:0;                 /* ROOT FIX: a flex item's default min-height:auto
                                   lets an oversized logo force the cell — and the
                                   whole ribbon — tall. This pins it. */
  overflow:hidden;              /* clip any image that ignores max-height */
}
.supporters-ribbon-item img{
  max-height:54px !important;   /* !important overrides deployed theme img rules
                                   (e.g. height:auto / max-height:none) that were
                                   letting logos render at natural size */
  max-width:190px !important;
  width:auto !important; height:auto !important;
  object-fit:contain; display:block; opacity:.82; transition:opacity .2s;
}
.supporters-ribbon:hover .supporters-ribbon-item img{opacity:1;}
@keyframes supporters-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (max-width:640px){
  .supporters-ribbon-track{height:46px; animation-duration:26s;}
  .supporters-ribbon-item{height:46px; margin:0 26px;}
  .supporters-ribbon-item img{max-height:38px !important; max-width:132px !important;}
}
@media (prefers-reduced-motion: reduce){
  .supporters-ribbon-track{
    animation:none; flex-wrap:wrap; width:auto; height:auto;   /* allow static rows */
    justify-content:center; gap:16px 30px;
  }
  .supporters-ribbon{ -webkit-mask-image:none; mask-image:none; }
}

/* ============================================================
   APPENDED (Latest News revision): in-site Facebook post viewer.
   The Latest News carousel stays fully local; cards whose content
   source is a client-supplied Facebook post carry .is-fb and open
   the real embed inside #fbModal, so visitors stay on the site
   instead of being redirected to Facebook. The embed loads from
   facebook.com and needs a connection — when offline/blocked the
   dialog shows a short note + a direct link (see facebook-feed.js).
   ============================================================ */
.news-card.is-fb{cursor:pointer;}
.news-card.is-fb:focus-visible{outline:3px solid var(--teal-600); outline-offset:3px;}
.news-card .ph{position:relative;}
.fb-flag{
  position:absolute; top:12px; left:12px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(10,54,48,.82); color:#fff;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:11px; letter-spacing:.02em;
  padding:5px 11px; border-radius:999px;
}
.fb-flag svg{width:12px; height:12px; fill:#fff;}

.fb-modal{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px;}
.fb-modal[hidden]{display:none;}
.fb-modal-backdrop{position:absolute; inset:0; background:rgba(10,33,29,.55);}
.fb-modal-dialog{
  position:relative; z-index:1; background:#fff; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); width:100%; max-width:520px; max-height:90vh;
  display:flex; flex-direction:column; overflow:hidden;
  animation:fb-modal-in .22s cubic-bezier(.25,.7,.25,1);
}
@keyframes fb-modal-in{from{opacity:0; transform:translateY(12px) scale(.98);} to{opacity:1; transform:none;}}
.fb-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 14px 20px; border-bottom:1px solid var(--line); flex:none;
}
.fb-modal-brand{display:inline-flex; align-items:center; gap:8px; font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; color:var(--ink);}
.fb-modal-brand svg{width:18px; height:18px; fill:#1877F2;}
.fb-modal-close{
  width:34px; height:34px; border:0; border-radius:50%; background:var(--mint-100);
  color:var(--teal-800); font-size:22px; line-height:1; cursor:pointer; transition:background .15s;
}
.fb-modal-close:hover{background:var(--mint-200);}
.fb-modal-body{overflow:auto; -webkit-overflow-scrolling:touch; background:#f0f2f5; display:flex; justify-content:center; min-height:220px;}
.fb-modal-body iframe{border:0; width:100%; max-width:500px; display:block;}
.fb-modal-fallback{padding:44px 28px; text-align:center; color:var(--gray-700); font-size:14.5px; line-height:1.65;}
.fb-modal-fallback a{color:var(--teal-800); font-weight:700;}
body.fb-modal-open{overflow:hidden;}
@media (max-width:560px){.fb-modal{padding:12px;} .fb-modal-dialog{max-height:94vh;}}

/* ============================================================
   CLIENT REVIEW REVISIONS (2026-07-08)
   Grouped overrides so every change from the review sits in one
   place and can be traced. Nothing above this block was deleted.
   ============================================================ */

/* Header tabs — single line, regular weight, simple */
nav.links{ gap:24px; }
nav.links a{ font-weight:400; white-space:nowrap; }

/* Subheadings on a single line (with a small-screen safety valve) */
.wwd-card .kicker, .wwd-card h3,
.prog-card-body h3,
.icon-card h3,
.value-card h3{ white-space:nowrap; }
.whatwedo .section-head{ max-width:840px; }
.whatwedo .section-head h2{ white-space:nowrap; }
@media (max-width:600px){
  .wwd-card .kicker, .wwd-card h3,
  .prog-card-body h3,
  .icon-card h3,
  .value-card h3,
  .whatwedo .section-head h2{ white-space:normal; }
}

/* Remove emoji icons from every tile + centre tile content */
.wwd-icon, .prog-icon, .icon-circle{ display:none !important; }
.wwd-card, .prog-card-body, .icon-card, .value-card{ text-align:center; }
.wwd-card .kicker{ margin-left:auto; margin-right:auto; }

/* Feature tiles: teal GRADIENT instead of flat colour blocks */
.wwd-card{ background:linear-gradient(150deg, var(--teal-700) 0%, var(--teal-900) 100%) !important; }
.wwd-card:nth-child(2){ background:linear-gradient(150deg, var(--teal-600) 0%, var(--teal-800) 100%) !important; }
.wwd-card:nth-child(3){ background:linear-gradient(150deg, var(--teal-800) 0%, var(--teal-950) 100%) !important; }

/* Faint watermark logo on the right of every hero (replaces the hero image) */
.hero-grid{ grid-template-columns:1fr; padding-bottom:56px; }
.hero-copy{ max-width:640px; position:relative; z-index:1; }
.hero::before, .page-hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:clamp(-40px, 2vw, 40px); top:50%; transform:translateY(-50%);
  width:min(44%, 480px); aspect-ratio:1/1;
  background:url("../assets/cobsmes-mark.png") no-repeat center right; background-size:contain;
  opacity:.08;
}
.page-hero .wrap{ position:relative; z-index:1; }
@media (max-width:760px){ .hero::before, .page-hero::before{ opacity:.05; width:62%; } }

/* Latest News carousel — teal gradient panel, peeking next slide, on-tile arrows */
.news-peek{
  background:linear-gradient(135deg, var(--teal-900) 0%, var(--teal-700) 100%);
  border-radius:var(--radius-lg); padding:26px;
}
.news-peek .carousel-slide{
  flex:0 0 86%; min-width:86%; padding-right:22px; box-sizing:border-box; position:relative;
}
.news-peek .carousel-slide .news-card{ height:100%; }
.news-peek .carousel-slide[aria-hidden="true"]::after{
  content:""; position:absolute; inset:0 22px 0 0; border-radius:var(--radius-lg);
  background:linear-gradient(135deg, rgba(94,234,212,.80) 0%, rgba(20,184,166,.86) 100%);
  pointer-events:none;
}
.news-peek .car-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; color:var(--teal-900); font-size:18px; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; justify-content:center; transition:background .15s;
}
.news-peek .car-arrow:hover{ background:var(--mint-100); }
.news-peek .car-arrow.prev{ left:16px; }
.news-peek .car-arrow.next{ right:16px; }
.news-peek .dots{ margin-top:22px; }
.news-peek .dots button{ background:rgba(255,255,255,.45); }
.news-peek .dots button.on{ background:#fff; }
@media (max-width:860px){
  .news-peek{ padding:14px; }
  .news-peek .car-arrow{ width:40px; height:40px; }
}

/* ============================================================
   CLIENT REVIEW REVISIONS — ROUND 2 (2026-07-09)
   ============================================================ */

/* Brand icons (replace the removed emoji) — colored line icons sit in a
   rounded chip: light mint on white tiles, near-white on the dark teal tiles. */
.brand-icon{
  width:60px; height:60px; border-radius:16px; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--mint-100);
}
.brand-icon img{ width:38px; height:38px; object-fit:contain; display:block; }
.wwd-card .brand-icon, .value-card .brand-icon{ background:rgba(255,255,255,.92); }
/* programme cards: keep the icon chip left-aligned feel but centred body */
.prog-card-body .brand-icon{ margin-top:2px; }

/* Values tiles: graded teal (were flat white) + white text for contrast */
.value-card{
  background:linear-gradient(150deg, var(--teal-700) 0%, var(--teal-900) 100%) !important;
  border-color:transparent !important; color:#fff;
}
.value-card h3{ color:#fff; }
.value-card p{ color:rgba(255,255,255,.86); }

/* Specific subheadings forced to a single line on desktop (wrap on smaller screens) */
@media (min-width:1080px){
  .oneline{ white-space:nowrap; }
  .section-head:has(.oneline){ max-width:none; }
}

/* Directory: show a real logo when supplied (initials tile stays as fallback) */
.biz-logo.has-logo{ background:#fff; border:1px solid var(--line); padding:5px; overflow:hidden; }
.biz-logo.has-logo img{ width:100%; height:100%; object-fit:contain; border-radius:9px; display:block; }

/* ============================================================
   CLIENT REVIEW REVISIONS — ROUND 3 (2026-07-10)
   ============================================================ */

/* Call button: green (brand teal) instead of the red phone emoji */
.nav-phone{ color:var(--teal-600) !important; }
.nav-phone svg{ flex:none; }

/* Homepage hero: centre the copy + watermark (removes right-hand blank space) */
.hero .hero-grid{ justify-items:center; }
.hero .hero-copy{ margin-left:auto; margin-right:auto; text-align:center; }
.hero .hero-copy .hero-ctas{ justify-content:center; }
.hero::before{ right:auto; left:50%; transform:translate(-50%,-50%); opacity:.06; }

/* Sponsors: larger logos + label text for visibility */
.supporters-tier-label{ font-size:15px !important; }
.supporters-ribbon-track{ height:84px !important; }
.supporters-ribbon-item{ height:84px !important; margin:0 54px !important; }
.supporters-ribbon-item img{ max-height:74px !important; max-width:230px !important; }
@media (max-width:640px){
  .supporters-ribbon-track{ height:60px !important; }
  .supporters-ribbon-item{ height:60px !important; margin:0 30px !important; }
  .supporters-ribbon-item img{ max-height:52px !important; max-width:160px !important; }
}

/* ============================================================
   PHOTO CROP CORRECTIONS (client review — Colin, photo positioning)
   Each crop position below is MEASURED, not guessed: faces were detected
   in every photo (OpenCV) and each image was checked against the real
   rendered size of the container it appears in, so the in-focus subject
   stays framed and no one is cut at the forehead/chin. Replaces the old
   blanket 50% 40% crop. Horizontal stays centred (50%) unless noted.
   ============================================================ */
.ph img[src$="contact-friendly.jpg"], .prog-media img[src$="contact-friendly.jpg"], .gph img[src$="contact-friendly.jpg"]{ object-position:50% 0% !important; }
.ph img[src$="conversation.jpg"], .prog-media img[src$="conversation.jpg"], .gph img[src$="conversation.jpg"]{ object-position:50% 0% !important; }
.ph img[src$="gallery-1.jpg"], .prog-media img[src$="gallery-1.jpg"], .gph img[src$="gallery-1.jpg"]{ object-position:50% 0% !important; }
.ph img[src$="gallery-2.jpg"], .prog-media img[src$="gallery-2.jpg"], .gph img[src$="gallery-2.jpg"]{ object-position:50% 0% !important; }
.ph img[src$="gallery-3.jpg"], .prog-media img[src$="gallery-3.jpg"], .gph img[src$="gallery-3.jpg"]{ object-position:50% 0% !important; }
.ph img[src$="gallery-4.jpg"], .prog-media img[src$="gallery-4.jpg"], .gph img[src$="gallery-4.jpg"]{ object-position:50% 100% !important; }
.ph img[src$="gallery-5.jpg"], .prog-media img[src$="gallery-5.jpg"], .gph img[src$="gallery-5.jpg"]{ object-position:50% 0% !important; }
.ph img[src$="gallery-6.jpg"], .prog-media img[src$="gallery-6.jpg"], .gph img[src$="gallery-6.jpg"]{ object-position:50% 100% !important; }
.ph img[src$="gallery-7.jpg"], .prog-media img[src$="gallery-7.jpg"], .gph img[src$="gallery-7.jpg"]{ object-position:50% 0% !important; }
.ph img[src$="gallery-8.jpg"], .prog-media img[src$="gallery-8.jpg"], .gph img[src$="gallery-8.jpg"]{ object-position:50% 0% !important; }
.ph img[src$="gallery-9.jpg"], .prog-media img[src$="gallery-9.jpg"], .gph img[src$="gallery-9.jpg"]{ object-position:50% 0% !important; }
.ph img[src$="hub-banner.jpg"], .prog-media img[src$="hub-banner.jpg"], .gph img[src$="hub-banner.jpg"]{ object-position:50% 0% !important; }
.ph img[src$="hub-supporting.jpg"], .prog-media img[src$="hub-supporting.jpg"], .gph img[src$="hub-supporting.jpg"]{ object-position:50% 0% !important; }
.ph img[src$="join-movement.jpg"], .prog-media img[src$="join-movement.jpg"], .gph img[src$="join-movement.jpg"]{ object-position:50% 0% !important; }
.ph img[src$="networking-3.jpg"], .prog-media img[src$="networking-3.jpg"], .gph img[src$="networking-3.jpg"]{ object-position:50% 16% !important; }
.ph img[src$="news-spotlight.jpg"], .prog-media img[src$="news-spotlight.jpg"], .gph img[src$="news-spotlight.jpg"]{ object-position:50% 24% !important; }
.ph img[src$="pe-2027-event.jpg"], .prog-media img[src$="pe-2027-event.jpg"], .gph img[src$="pe-2027-event.jpg"]{ object-position:50% 30% !important; }
.ph img[src$="pe-black-business-week.jpg"], .prog-media img[src$="pe-black-business-week.jpg"], .gph img[src$="pe-black-business-week.jpg"]{ object-position:50% 18% !important; }
.ph img[src$="pe-black-history-month.jpg"], .prog-media img[src$="pe-black-history-month.jpg"], .gph img[src$="pe-black-history-month.jpg"]{ object-position:50% 30% !important; }
.ph img[src$="pe-business-scale-tech.jpg"], .prog-media img[src$="pe-business-scale-tech.jpg"], .gph img[src$="pe-business-scale-tech.jpg"]{ object-position:50% 40% !important; }
.ph img[src$="prog-funding-featured.jpg"], .prog-media img[src$="prog-funding-featured.jpg"], .gph img[src$="prog-funding-featured.jpg"]{ object-position:50% 0% !important; }
.ph img[src$="prog-funding.jpg"], .prog-media img[src$="prog-funding.jpg"], .gph img[src$="prog-funding.jpg"]{ object-position:50% 100% !important; }
.ph img[src$="speaker-podium.jpg"], .prog-media img[src$="speaker-podium.jpg"], .gph img[src$="speaker-podium.jpg"]{ object-position:50% 0% !important; }
.ph img[src$="speaker-presenting.jpg"], .prog-media img[src$="speaker-presenting.jpg"], .gph img[src$="speaker-presenting.jpg"]{ object-position:50% 0% !important; }
.ph img[src$="workshop-training.jpg"], .prog-media img[src$="workshop-training.jpg"], .gph img[src$="workshop-training.jpg"]{ object-position:50% 0% !important; }

/* Photo thumbnails were too short for group shots — with several people spread
   across the frame, no crop position could keep every face in view. Raising these
   two card image heights slightly gives the faces room (measured: needs ~180px
   and ~250px respectively). Card layouts are unaffected. */
.access-card .ph{ height:180px !important; }
.pd-card .ph{ height:250px !important; }

/* ============================================================
   INTRO ANIMATION — client review (no Skip button; immediate handoff;
   correct sizing on mobile).
   • The overlay no longer fades/lingers — it's removed the moment the
     video ends, so the homepage hero appears immediately.
   • The supplied video is 16:9 (1920x1080). On a tall phone screen,
     `cover` crops the sides hard and cuts the logo off. On narrow /
     portrait viewports we switch to `contain`, so the full frame is
     shown, letterboxed against the brand gradient — nothing is cut.
     Desktop keeps the full-bleed `cover` look.
   • Page content no longer fades in slowly behind it either.
   ============================================================ */
.intro-overlay{ transition:none !important; }
.intro-skip{ display:none !important; }              /* Skip button removed */
body.page-shown main, body.page-shown footer, body.page-shown .site-header{
  transition:none !important; opacity:1 !important;   /* immediate, no fade dwell */
}
@media (max-width:900px), (orientation:portrait){
  .intro-video{ object-fit:contain !important; }      /* no crop on mobile */
}

/* Board / leadership headshots — client-supplied photos in the circular tiles.
   Each image was cropped face-safe (face detected, head+shoulders, eyes on the
   upper third), so `cover` centring never cuts a forehead or chin. The initials
   gradient remains the fallback for anyone without a photo. */
.leader-circle.has-photo{
  width:120px; height:120px; padding:0; overflow:hidden;
  background:var(--mint-100); border:3px solid #fff; box-shadow:var(--shadow);
}
.leader-circle.has-photo img{
  width:100%; height:100%; object-fit:cover; object-position:50% 30%;
  border-radius:50%; display:block;
}
.leadership-grid{ grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); }
@media (max-width:640px){
  .leader-circle.has-photo{ width:104px; height:104px; }
}

/* ============================================================
   HERO ADJUSTMENTS (client review — 2026-07-14)
   ============================================================ */

/* Homepage hero: revert to LEFT-aligned copy with the faint watermark logo
   on the RIGHT (overrides the earlier centred version). */
.hero .hero-grid{ justify-items:start; }
.hero .hero-copy{ margin-left:0; margin-right:auto; text-align:left; }
.hero .hero-copy .hero-ctas{ justify-content:flex-start; }
.hero::before{
  left:auto; right:clamp(-40px, 2vw, 40px);
  transform:translateY(-50%); opacity:.08;
}

/* News & Updates hero: full-screen teal gradient (fills the viewport below the
   sticky 75px header), content vertically centred. Scoped to this page only. */
.page-hero--full{
  min-height:0;
  display:flex; align-items:center;
  padding-top:68px; padding-bottom:64px;
}
/* The flex column centres its child; make the inner wrap span full width so
   its own left padding (like every other hero) sets the text position,
   instead of the capped 1240px wrap being pushed to the middle. */
.page-hero--full .wrap{ width:100%; }
/* News & Updates hero: smaller, fainter watermark logo (scoped to this page only) */
.page-hero--full::before{ width:min(32%, 340px); opacity:.05; }
@media (max-width:640px){
  .page-hero--full{ min-height:0; padding-top:48px; padding-bottom:44px; }
}

/* Board/executive photo tiles: larger SQUARE (rounded) tiles. The initials
   tiles (Sanchita and the placeholder members) are untouched — they keep the
   circular gradient look. */
.leader-circle.has-photo{
  width:190px; height:190px; border-radius:20px;
}
.leader-circle.has-photo img{
  border-radius:13px;   /* inner radius inside the 3px white frame */
  object-position:50% 25%;
}
.leadership-grid{ grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); }
@media (max-width:640px){
  .leader-circle.has-photo{ width:150px; height:150px; border-radius:16px; }
  .leadership-grid{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
}

/* Homepage header shows the full organisation name (client request, agreed with
   Yinka). Reduced size + a fixed max-width so it wraps into a compact two-line
   lockup beside the logo mark and stays vertically centred. Scoped to the
   homepage only — other pages keep the short "CoBSMEs" brand text. */
.logo-text--full .name{
  font-size:12.5px;
  font-weight:700;
  line-height:1.2;
  max-width:210px;
  white-space:normal;
}
@media (max-width:420px){
  .logo-text--full .name{ font-size:11px; max-width:168px; }
}

/* Mobile now receives a true 9:16 vertical export, so it should FILL the phone
   screen edge-to-edge — the earlier `contain` letterbox fallback (which existed
   only to stop the 16:9 file being cropped) is no longer needed. Tablets in
   portrait still get the 16:9 file, so they keep `contain` to avoid cropping. */
@media (max-width:767px){
  .intro-video{ object-fit:cover !important; }
}

/* Email opt-in (consent) checkbox on the forms — feeds Constant Contact only
   when ticked (CASL). Small, calm, left-aligned above the submit button. */
.form-consent{
  display:flex; align-items:flex-start; gap:10px;
  margin:6px 0 18px; padding:12px 14px;
  background:var(--mint-100, #eafaf3); border:1px solid var(--line, #e2e8e5);
  border-radius:10px; cursor:pointer;
}
.form-consent input[type="checkbox"]{
  margin-top:2px; width:18px; height:18px; flex:none; accent-color:var(--teal-600, #1a9583); cursor:pointer;
}
.form-consent span{ font-size:14px; line-height:1.45; color:var(--gray-700, #40514c); }

/* ============================================================
   REVIEW BATCH (Sanchita, 31 Jul) — targeted styling
   ============================================================ */

/* Board/leadership group photo banner (About) */
.board-group-photo{ max-width:960px; margin:0 auto 34px; border-radius:16px; overflow:hidden;
  box-shadow:0 18px 44px rgba(10,54,48,.16); }
.board-group-photo img{ display:block; width:100%; height:auto; }

/* Homepage "Our Impact" — bigger, bold, centred */
.impact-emphasis .impact-top{ text-align:center; }
.impact-emphasis .impact-top > div{ margin:0 auto; }
.impact-emphasis .impact-top h2{ font-size:clamp(30px,3.4vw,44px); font-weight:800; }
.impact-emphasis .impact-top p{ margin-left:auto; margin-right:auto; }
.impact-emphasis .stat-row{ justify-content:center; }
.impact-emphasis .stat-row .num{ font-weight:800; }
.impact-emphasis .stat-row .lbl{ font-weight:600; }

/* Larger BEP label + bigger primary partner logos (Canada / PrairiesCan) */
.supporters-tier-label--bep{ font-size:clamp(17px,1.8vw,22px); font-weight:800; letter-spacing:.2px; }
.supporters-card-primary img{ max-height:96px; }
@media (max-width:640px){ .supporters-card-primary img{ max-height:72px; } }

/* Leadership + History sections — larger type */
#leadership .section-head h2{ font-size:clamp(28px,3.2vw,40px); }
#leadership .section-head p{ font-size:18px; }
#leadership .group-label{ font-size:19px; }
#history .section-head h2{ font-size:clamp(28px,3.2vw,40px); }
#history .section-head p, #history .timeline p{ font-size:17px; }
#history .tl-year{ font-size:19px; }

/* Footer — green background, larger text (all pages) */
footer{ background:#0e6b4f; }
footer, footer p, footer li, footer a{ font-size:16px; }
footer h4, footer .foot-title, footer .foot-col-title{ font-size:17px; }

/* Skip intro button (reintroduced per review) */
.intro-skip{
  position:absolute; bottom:28px; right:28px; z-index:10;
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.4);
  padding:10px 20px; border-radius:999px; font:600 15px/1 'Poppins',sans-serif;
  cursor:pointer; backdrop-filter:blur(4px); transition:background .2s, transform .2s;
}
.intro-skip:hover{ background:rgba(255,255,255,.28); transform:translateY(-1px); }
@media (max-width:767px){ .intro-skip{ bottom:20px; right:20px; padding:9px 16px; font-size:14px; } }

/* Numbered incorporation name in the header (homepage) */
.reg-number{ font-size:11px; line-height:1.2; color:var(--gray-600,#6b7c77); font-weight:500; margin-top:2px; letter-spacing:.2px; }
@media (max-width:767px){ .reg-number{ display:none; } }

/* Clickable news title (Elevating Black Entrepreneurship) */
.title-link{ color:inherit; text-decoration:none; transition:color .18s; }
.title-link:hover{ color:var(--teal-700); text-decoration:underline; }

/* Full on-page article (News page — Elevating Black Entrepreneurship) */
.article-section{ background:#fff; padding:64px 0; scroll-margin-top:90px; border-top:1px solid var(--line,#e2e8e5); }
.article-wrap{ max-width:760px; }
.article-title{ font-size:clamp(26px,3.2vw,38px); line-height:1.2; color:var(--ink); margin:8px 0 6px; }
.article-byline{ color:var(--gray-500,#7a8a85); font-size:15px; margin-bottom:26px; }
.article-wrap > p{ color:var(--gray-700,#40514c); font-size:17px; line-height:1.75; margin:0 0 18px; }
.article-wrap h3{ color:var(--teal-800,#0e5c50); font-size:22px; margin:34px 0 12px; }
.article-wrap ul{ margin:0 0 18px; padding-left:22px; }
.article-wrap li{ color:var(--gray-700,#40514c); font-size:17px; line-height:1.7; margin-bottom:9px; }
.article-wrap li strong{ color:var(--ink); }
.article-back{ margin-top:30px; padding-top:20px; border-top:1px solid var(--line,#e2e8e5); }

/* Past Events photo carousel (Programs & Events — BPES event photos) */
.events-carousel{ position:relative; max-width:1000px; margin:0 auto; }
.events-carousel .carousel-track{ display:flex; }
.events-carousel .carousel-slide{ flex:0 0 100%; width:100%; padding:0 6px; box-sizing:border-box; }
.events-carousel .event-photo{ border-radius:16px; overflow:hidden; box-shadow:0 18px 44px rgba(10,54,48,.16); aspect-ratio:16/9; }
.events-carousel .event-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.events-carousel .dots{ display:flex; gap:8px; justify-content:center; margin-top:18px; }

/* Pre-register floating tile — sits in the cohort band under "View Full Schedule" */
.prereg-tile{
  margin-top:26px; max-width:540px;
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  border-radius:16px; padding:22px 24px;
  box-shadow:0 20px 44px rgba(0,0,0,.24); backdrop-filter:blur(4px);
}
.prereg-tile-copy strong{ display:block; color:#fff; font-family:'Poppins',sans-serif; font-weight:700; font-size:19px; line-height:1.3; margin-bottom:4px; }
.prereg-tile-copy span{ display:block; color:rgba(255,255,255,.82); font-size:14px; line-height:1.5; }
.prereg-tile-btn{ flex:none; }
@media (max-width:640px){ .prereg-tile{ width:100%; } .prereg-tile-btn{ width:100%; text-align:center; } }

/* ============================================================
   Full-width calendar (homepage + Programs & Events)
   ============================================================ */
.cal-wrap{ width:100%; }
.cal-full{ width:100%; padding:32px clamp(20px,4vw,44px); }
.cal-full .cal-head{ margin-bottom:22px; font-size:20px; }
.cal-full .cal-head button{ width:40px; height:40px; font-size:18px; }
.cal-full .cal-grid{ gap:8px; font-size:16px; }
.cal-full .cal-grid .dow{ font-size:14px; padding-bottom:10px; }
.cal-full .cal-grid .day{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  padding:0; border-radius:12px; font-size:clamp(15px,1.6vw,19px); font-weight:500;
}
.cal-full .cal-grid .day.empty{ aspect-ratio:1/1; box-shadow:none; }
/* highlighted event days — clear and prominent */
.cal-full .cal-grid .day.evt{
  background:var(--mint-200); color:var(--teal-800); font-weight:800;
  box-shadow:inset 0 0 0 2px var(--teal-700);
}
.cal-full .cal-grid .day.evt::after{
  content:""; position:absolute; bottom:7px; left:50%; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--teal-700);
}
.cal-full .cal-grid .day.today{ background:var(--teal-800); color:#fff; font-weight:800; }
.cal-full .cal-note{ margin-top:20px; font-size:14px; }
.cal-full .cal-note .swatch{ width:14px; height:14px; }
@media (max-width:560px){
  .cal-full{ padding:22px 16px; }
  .cal-full .cal-grid{ gap:5px; }
  .cal-full .cal-grid .day{ font-size:14px; border-radius:9px; }
}

/* ============================================================
   REVISION BATCH (Sam, 02 Aug) — four targeted corrections only.
   Append-only overrides; no existing rules altered.
   1. BEP logos    — PrairiesCan lockup sized to match the Canada wordmark.
   2. Impact h2    — "Building More Than Businesses" on a single line.
   3. Footer       — brand teal gradient instead of flat green.
   4. Skip intro   — un-hidden and kept pinned bottom-right.
   ============================================================ */

/* 1 — BEP primary logos: the PrairiesCan lockup (706x96, 7.35:1) rendered
   much shorter than the compact Canada wordmark (366x87, 4.21:1) because both
   sat in equal-width cards. Give the wider lockup a proportionally wider card
   and let both fill their card, so they render at the same visual height. */
.supporters-grid-primary{
  grid-template-columns:minmax(220px,300px) minmax(300px,470px);
  max-width:820px;
}
.supporters-card-primary img{ width:100%; height:auto; max-width:100%; max-height:none; }
@media (max-width:560px){
  .supporters-grid-primary{ grid-template-columns:1fr; max-width:340px; }
}

/* 2 — "Our Impact" heading forced onto one line; wraps again on phones so it
   never overflows the panel. */
.impact-emphasis .impact-top h2{ max-width:none; white-space:nowrap; }
@media (max-width:560px){
  .impact-emphasis .impact-top h2{ white-space:normal; }
}

/* 3 — Footer uses the site's brand teal gradient (same token as the hero /
   News hero) instead of the flat green. */
footer{
  background:linear-gradient(120deg, var(--teal-950) 0%, var(--teal-800) 55%, var(--teal-600) 100%);
}

/* 4 — Skip-intro button: clear the stale display:none from the earlier
   "remove skip" round and keep it pinned bottom-right. */
.intro-skip{
  display:inline-flex !important; align-items:center; gap:6px;
  position:absolute; bottom:28px; right:28px; left:auto; transform:none; z-index:10;
}
@media (max-width:767px){ .intro-skip{ bottom:20px; right:20px; } }


/* ============================================================
   REVIEW FIXES (Sam, 04 Aug) — append-only.
   1. Centre the two trailing cards on the homepage Programs grid
      (5 cards in 3 columns leaves 2 left-aligned on row two).
   ============================================================ */
.programs-grid{ display:flex; flex-wrap:wrap; justify-content:center; }
.programs-grid > .prog-card{ flex:0 1 calc(33.333% - 15px); }
@media (max-width:900px){ .programs-grid > .prog-card{ flex:0 1 calc(50% - 11px); } }
@media (max-width:600px){ .programs-grid > .prog-card{ flex:0 1 100%; } }

/* ============================================================
   SANCHITA EMAIL — remaining items (Sam, 04 Aug). Append-only.
   Most of the email was already done in earlier rounds; these are
   the three still-outstanding sizing items:
   • Our Impact  — bolder, larger, fully centred (incl. stats).
   • BEP name    — larger heading.
   • BEP logos   — PrairiesCan + Canada rendered larger.
   ============================================================ */

/* Our Impact — bold subtitle, centred stat row, larger stats. */
.impact-emphasis .impact-top p{ font-weight:600; color:#fff; }
.impact-emphasis .stat-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:56px; }
.impact-emphasis .stat-row > div{ text-align:center; }
.impact-emphasis .stat-row .num{ font-size:46px; }
.impact-emphasis .stat-row .lbl{ font-size:15px; font-weight:700; color:#fff; }
@media (max-width:600px){
  .impact-emphasis .stat-row{ gap:30px; }
  .impact-emphasis .stat-row .num{ font-size:36px; }
}

/* BEP program name — larger. */
.supporters-tier-label--bep{ font-size:clamp(22px,2.6vw,30px) !important; }

/* BEP logos (PrairiesCan + Canada) — larger cards so both marks render bigger. */
.supporters-grid-primary{
  grid-template-columns:minmax(260px,360px) minmax(360px,560px);
  max-width:960px;
}
@media (max-width:560px){
  .supporters-grid-primary{ grid-template-columns:1fr; max-width:400px; }
}

/* ============================================================
   NEWS — internal article pull-quote (BBNE 2024 Minister message).
   ============================================================ */
.article-quote{
  margin:26px 0; padding:22px 26px; border-left:4px solid var(--teal-700);
  background:var(--mint-100); border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.article-quote p{ color:var(--gray-700,#40514c); font-size:17px; line-height:1.75; margin:0 0 14px; font-style:italic; }
.article-quote p:last-child{ margin-bottom:0; }
.article-quote .article-quote-cite{ font-style:normal; font-weight:700; color:var(--teal-800); font-size:15px; }

/* ============================================================
   HOMEPAGE — Upcoming Programs & Events list (replaces the
   completed-cohort band). Clean date-badged list linking to
   the full schedule on the Programs & Events page.
   ============================================================ */
.upcoming-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:26px; }
.upcoming-top h2{ font-size:clamp(26px,3vw,36px); font-weight:800; line-height:1.15; margin-top:4px; }
.upcoming-list{ display:flex; flex-direction:column; gap:12px; }
.upcoming-row{ display:flex; align-items:center; gap:20px; padding:16px 22px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-md); text-decoration:none;
  transition:box-shadow .2s, transform .2s, border-color .2s; }
.upcoming-row:hover{ box-shadow:var(--shadow); transform:translateY(-2px); border-color:var(--teal-600); }
.ur-date{ flex:0 0 auto; width:74px; padding:9px 0; text-align:center; display:flex; flex-direction:column;
  background:var(--mint-100); border-radius:var(--radius-sm); }
.ur-day{ font-family:'Poppins',system-ui,sans-serif; font-size:26px; font-weight:800; color:var(--teal-800); line-height:1; }
.ur-day-sm{ font-size:19px; padding-top:3px; }
.ur-mo{ font-size:11px; font-weight:700; color:var(--teal-700); text-transform:uppercase; letter-spacing:.05em; margin-top:5px; }
.ur-body{ flex:1 1 auto; min-width:0; }
.ur-title{ display:block; font-family:'Poppins',system-ui,sans-serif; font-size:17px; font-weight:700; color:var(--ink); }
.ur-meta{ display:block; font-size:13.5px; color:var(--gray-700); margin-top:3px; }
.ur-tag{ flex:0 0 auto; font-size:12px; font-weight:700; color:var(--teal-800); background:var(--mint-200);
  padding:5px 12px; border-radius:999px; white-space:nowrap; }
.ur-arrow{ flex:0 0 auto; color:var(--teal-600); font-size:20px; font-weight:800; }
@media (max-width:640px){
  .upcoming-row{ flex-wrap:wrap; gap:8px 14px; padding:14px 16px; }
  .ur-date{ width:56px; padding:7px 0; }
  .ur-day{ font-size:22px; }
  .ur-body{ flex:1 1 60%; }
  .ur-tag{ order:3; margin-left:70px; }
  .ur-arrow{ display:none; }
}

/* ============================================================
   APPENDED: Past Event galleries (Regina + Saskatoon).
   Reuse the existing .event-gallery-grid design language.
   Tighten the top gap where past-event sections stack under
   the Past Events carousel so the section rhythm stays even.
   ============================================================ */
.past-event{ padding-top:56px; scroll-margin-top:90px; }
.past-event + .past-event{ padding-top:0; }
@media (max-width:750px){ .past-event{ padding-top:40px; } }

/* Community Hub — BDFL location tiles centered across the full section width */
.bbei-locations{ justify-content:center; margin:34px 0 0; }

/* ---------- MOBILE HEADER POLISH ---------- */
/* Keep the header "Join Us Now" CTA on a single line (matches desktop),
   and tighten its footprint on the smallest screens so it never wraps
   or crowds the hamburger. Button style/colour unchanged. */
.site-header .btn-sm{ white-space:nowrap; }
@media (max-width:480px){
  .site-header .nav-right{ gap:12px; }
  .site-header .btn-sm{ padding:9px 15px; font-size:12.5px; }
}
@media (max-width:360px){
  .site-header .btn-sm{ padding:8px 13px; font-size:12px; }
}

/* ============================================================
   PAST EVENT GALLERY CAROUSELS (Regina + Saskatoon)
   Polished single-image carousel with overlaid arrows and a
   thumbnail strip. Reuses the site's radius / shadow / teal
   tokens so it matches the existing design language.
   ============================================================ */
.gallery-carousel{ position:relative; max-width:1000px; margin:0 auto; overflow:hidden; }
.gallery-carousel .carousel-track{ display:flex; }
.gallery-carousel .carousel-slide{ flex:0 0 100%; width:100%; }
.gallery-carousel .g-photo{
  border-radius:18px; overflow:hidden; aspect-ratio:16/9;
  box-shadow:0 18px 44px rgba(10,54,48,.16); background:var(--mint-100,#eef4f2);
}
.gallery-carousel .g-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Overlaid circular arrows — same visual family as .news-peek arrows */
.gallery-carousel .car-arrow{
  position:absolute; top:calc(50% - 46px); transform:translateY(-50%); z-index:6;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.94); color:var(--teal-900); font-size:18px;
  box-shadow:var(--shadow-lg); display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .15s;
}
.gallery-carousel .car-arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
.gallery-carousel .car-arrow:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }
.gallery-carousel .car-arrow.prev{ left:14px; }
.gallery-carousel .car-arrow.next{ right:14px; }

/* Thumbnail strip */
.gallery-thumbs{
  display:flex; gap:10px; margin-top:14px; padding:4px 2px 6px;
  overflow-x:auto; scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.gallery-thumbs::-webkit-scrollbar{ height:6px; }
.gallery-thumbs::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.gallery-thumbs button{
  flex:0 0 auto; width:96px; height:64px; padding:0; cursor:pointer;
  border-radius:10px; overflow:hidden; border:2px solid transparent;
  background:none; opacity:.62; transition:opacity .18s, border-color .18s, transform .18s;
}
.gallery-thumbs button img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-thumbs button:hover{ opacity:.9; }
.gallery-thumbs button.on{ opacity:1; border-color:var(--teal-700); }
.gallery-thumbs button:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }

@media (max-width:640px){
  .gallery-carousel .car-arrow{ width:40px; height:40px; font-size:16px; }
  .gallery-carousel .car-arrow.prev{ left:8px; }
  .gallery-carousel .car-arrow.next{ right:8px; }
  .gallery-thumbs button{ width:78px; height:52px; }
}

/* ============================================================
   News & Updates — final row of 2 cards, centred.
   The first 3 cards use the standard .news-grid (3 columns).
   The last 2 cards live in .news-grid-last2, a separate centred
   row. Each card keeps the SAME width as a 3-column grid cell
   ( (100% - 2*gap) / 3 ) and the same 22px gap, so nothing is
   stretched or resized — the pair simply centres with no empty
   third column. Tablet/mobile fall back to the shared rules.
   ============================================================ */
.news-grid-last2{
  display:flex; justify-content:center; gap:22px; margin-top:22px;
}
.news-grid-last2 > .news-item{
  /* Match a single cell of the 3-column grid above:
     three cells + two 22px gaps span 100%, so one cell is
     (100% - 44px) / 3. */
  flex:0 0 calc((100% - 44px) / 3);
  max-width:calc((100% - 44px) / 3);
}
@media (max-width:960px){
  /* Tablet: two columns, same as .news-grid — each card half width */
  .news-grid-last2 > .news-item{
    flex:0 0 calc((100% - 22px) / 2);
    max-width:calc((100% - 22px) / 2);
  }
}
@media (max-width:620px){
  /* Mobile: single column, full width, stacked */
  .news-grid-last2{ flex-direction:column; margin-top:22px; }
  .news-grid-last2 > .news-item{ flex:0 0 100%; max-width:100%; }
}

/* ============================================================
   Past Events — PrairiesCan funding-announcement intro + centred
   BDFL cohort headings. The PrairiesCan intro acts as the parent
   heading above the Regina and Saskatoon BDFL cohort galleries.
   Cohort headings are centred and kept on a single line on
   desktop (they exceed the default 640px section-head width),
   wrapping only on smaller screens.
   ============================================================ */
/* Let the centred cohort headings size to their content so the
   long "… — Regina/Saskatoon" title stays on one line, while the
   intro paragraph keeps a comfortable reading width. */
.bdfl-cohort-head{ max-width:none; }
.bdfl-cohort-head h2{ white-space:nowrap; }
.bdfl-cohort-head p{ max-width:920px; margin-left:auto; margin-right:auto; }

/* Tighten the gap between the PrairiesCan intro and the first
   cohort so the sections read as one grouped block. */
.prairiescan-intro + .past-event{ padding-top:0; }

@media (max-width:900px){
  /* Allow the long cohort headings to wrap on smaller screens. */
  .bdfl-cohort-head h2{ white-space:normal; }
}

/* ============================================================
   PRIVACY POLICY PAGE
   Uses the site design system. Content max-width 900px, Poppins
   headings / Roboto 17px body / 1.8 line-height. Numbered
   sections in white cards with gold accent numbers, sticky TOC
   on desktop, fully responsive.
   ============================================================ */
.pp-hero h1{ max-width:none; }
.pp-breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 6px; font-size:13px; font-weight:600; }
.pp-breadcrumb li{ color:rgba(255,255,255,.7); }
.pp-breadcrumb li a{ color:rgba(255,255,255,.7); }
.pp-breadcrumb li a:hover{ color:#fff; }
.pp-breadcrumb li + li::before{ content:"›"; margin-right:8px; color:rgba(255,255,255,.5); }
.pp-breadcrumb li[aria-current]{ color:#fff; }

.pp-section{ background:var(--mint-100); padding:56px 0 80px; }

/* Effective-date + meta callout */
.pp-meta{
  max-width:900px; margin:0 auto 40px; background:#fff; border-radius:16px;
  box-shadow:0 10px 30px rgba(10,54,48,.08); padding:26px 30px;
  border:1px solid var(--line,#e2e8e5);
  display:flex; flex-wrap:wrap; gap:22px 40px; align-items:flex-start;
}
.pp-effective{ display:flex; flex-direction:column; gap:4px; padding-right:34px; border-right:3px solid var(--yellow); }
.pp-effective-label{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-500); font-family:'Poppins',sans-serif; }
.pp-effective-date{ font-size:22px; font-weight:700; color:var(--teal-900); font-family:'Poppins',sans-serif; }
.pp-meta-details{ display:grid; grid-template-columns:repeat(2,minmax(180px,1fr)); gap:14px 30px; margin:0; flex:1; }
.pp-meta-details div{ display:flex; flex-direction:column; gap:2px; }
.pp-meta-details dt{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-500); font-family:'Poppins',sans-serif; }
.pp-meta-details dd{ margin:0; font-size:15px; color:var(--teal-900); font-weight:500; }

/* Two-column layout: sticky TOC + content */
.pp-layout{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:270px 1fr; gap:40px; align-items:start; }

/* Sticky Table of Contents */
.pp-toc{ position:sticky; top:96px; }
.pp-toc-title{ font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--teal-800); font-family:'Poppins',sans-serif; margin:0 0 14px; }
.pp-toc-list{ list-style:none; margin:0; padding:0; max-height:calc(100vh - 140px); overflow-y:auto; }
.pp-toc-list li{ margin:0; }
.pp-toc-list a{ display:flex; gap:10px; align-items:baseline; padding:7px 10px; border-radius:8px; font-size:13.5px; line-height:1.4; color:var(--gray-700); font-weight:500; transition:background .15s, color .15s; }
.pp-toc-list a:hover{ background:#fff; color:var(--teal-800); }
.pp-toc-list a.pp-active{ background:#fff; color:var(--teal-900); font-weight:600; box-shadow:0 2px 8px rgba(10,54,48,.06); }
.pp-toc-list .toc-num{ color:var(--yellow-dark); font-weight:700; font-family:'Poppins',sans-serif; min-width:18px; }

/* Content container — 900px cap */
.pp-content{ max-width:900px; }

/* Section cards */
.pp-card{
  background:#fff; border-radius:16px; box-shadow:0 8px 26px rgba(10,54,48,.07);
  border:1px solid var(--line,#e8efec); padding:36px 40px; margin-bottom:26px;
  scroll-margin-top:96px;
}
.pp-card h2{
  font-family:'Poppins',sans-serif; font-weight:600; font-size:23px; line-height:1.3;
  color:var(--teal-900); margin:0 0 18px; display:flex; align-items:baseline; gap:14px;
}
.pp-card .pp-num{
  flex:0 0 auto; color:var(--yellow-dark); font-weight:700; font-size:22px;
  font-family:'Poppins',sans-serif;
}
.pp-card h3{
  font-family:'Poppins',sans-serif; font-weight:600; font-size:17px; color:var(--teal-800);
  margin:24px 0 10px;
}
.pp-card p{ font-family:'Roboto',sans-serif; font-size:17px; line-height:1.8; color:var(--gray-700); margin:0 0 16px; }
.pp-card ul{ margin:0 0 16px; padding-left:22px; }
.pp-card li{ font-family:'Roboto',sans-serif; font-size:17px; line-height:1.8; color:var(--gray-700); margin-bottom:6px; }
.pp-card a{ color:var(--teal-700); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.pp-card a:hover{ color:var(--teal-900); }
.pp-card .pp-contact{
  font-style:normal; background:var(--mint-100); border-radius:12px; padding:18px 22px;
  margin:0 0 16px; font-family:'Roboto',sans-serif; font-size:16px; line-height:1.9; color:var(--teal-900);
}
.pp-card .pp-contact strong{ font-family:'Poppins',sans-serif; font-weight:600; }
.pp-card h1{ font-family:'Poppins',sans-serif; font-weight:700; }

/* ---- Responsive ---- */
@media (max-width:980px){
  .pp-layout{ grid-template-columns:1fr; gap:0; }
  .pp-toc{ position:static; margin-bottom:28px; background:#fff; border-radius:14px; padding:18px 20px; box-shadow:0 6px 20px rgba(10,54,48,.06); }
  .pp-toc-list{ max-height:none; columns:2; column-gap:24px; }
}
@media (max-width:720px){
  .pp-section{ padding:40px 0 60px; }
  .pp-meta{ padding:22px; gap:18px; }
  .pp-effective{ border-right:none; border-bottom:3px solid var(--yellow); padding-right:0; padding-bottom:14px; width:100%; }
  .pp-meta-details{ grid-template-columns:1fr; }
  .pp-card{ padding:26px 22px; }
  .pp-card h2{ font-size:20px; }
  .pp-toc-list{ columns:1; }
}

/* ============================================================
   HOMEPAGE HERO CAROUSEL — contained premium panel (FACE style)
   The carousel sits inside a centred, rounded card with the dark
   teal page gradient always visible around it. Three slides share
   identical dimensions; only content + background colour change.
   Right-to-left slide, 4s auto, continuous loop. Posters fixed.
   ============================================================ */
/* Page band behind the carousel — dark CoBSMEs teal gradient,
   always visible around the contained hero. */
.hero-carousel{
  position:relative; width:100%;
  background:linear-gradient(135deg, var(--teal-950) 0%, var(--teal-800) 55%, var(--teal-900) 100%);
  padding:44px clamp(16px, 4vw, 56px) 52px;
}
/* The framed container that clips the sliding track. */
.hero-carousel-frame{
  position:relative; max-width:1200px; margin:0 auto;
  border-radius:26px; overflow:hidden;
  box-shadow:0 30px 70px rgba(4,26,23,.42), 0 6px 18px rgba(4,26,23,.28);
}
.hero-carousel-track{
  display:flex; flex-wrap:nowrap; width:100%;
  will-change:transform;
  transition:transform .85s cubic-bezier(.65,0,.35,1);
}
.hero-carousel-track.no-anim{ transition:none; }

/* Fixed, identical slide dimensions across all three slides. */
.hero-slide{
  position:relative; flex:0 0 100%; width:100%;
  min-height:560px; height:clamp(560px, 72vh, 660px);
  display:flex; align-items:center; overflow:hidden;
  z-index:1;
}
.hero-slide.is-active{ z-index:2; }

/* ---- Shared inner layout (identical padding/spacing/columns) ---- */
.hero-slide-inner{
  position:relative; z-index:2;
  width:100%; max-width:1120px; margin:0 auto; padding:56px 60px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
}
/* Slide 1 has copy only (no poster) — single centred column, same padding. */
.hero-slide-inner--solo{ grid-template-columns:1fr; max-width:820px; }

.hero-slide-copy{ position:relative; z-index:2; max-width:600px; }
.hero-slide-copy .eyebrow{ display:block; margin-bottom:14px; }
.hero-slide-copy h1{
  font-family:'Poppins',sans-serif; font-weight:800; color:#fff;
  font-size:42px; line-height:1.12; margin:0 0 16px; letter-spacing:-.01em;
}
.hero-slide-copy h1 span{ color:var(--yellow); }
.hero-slide-copy h2{
  font-family:'Poppins',sans-serif; font-weight:800; color:#fff;
  font-size:38px; line-height:1.14; margin:0 0 16px; letter-spacing:-.01em;
}
.hero-slide-copy p{
  color:rgba(255,255,255,.9); font-size:16.5px; line-height:1.7; margin:0 0 20px; max-width:560px;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-consult-list{
  list-style:none; margin:0 0 14px; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:5px 22px; max-width:520px;
}
.hero-consult-list li{
  position:relative; padding-left:22px; color:rgba(255,255,255,.92);
  font-size:14px; line-height:1.45; font-weight:500;
}
.hero-consult-list li::before{
  content:"\2713"; position:absolute; left:0; top:0; color:var(--yellow); font-weight:700;
}
.hero-consult-note{ font-size:13.5px !important; color:rgba(255,255,255,.72) !important; font-style:italic; margin-bottom:18px !important; }

/* ---- Fixed (non-animated) poster ---- */
.hero-slide-poster{ display:flex; justify-content:center; align-items:center; position:relative; z-index:2; }

/* Slide 1 watermark logo — occupies the right column (mirrors the poster
   position on Slides 2 & 3). Right-aligned, vertically centred, large,
   low opacity, sitting behind the content. */
.hero-slide-watermark{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:clamp(8px, 3vw, 48px);
  pointer-events:none;
}
.hero-slide-watermark img{
  width:min(100%, 360px); height:auto; opacity:.10;
}
.hero-poster-float{
  width:min(100%, 380px); border-radius:18px; overflow:hidden;
  box-shadow:0 22px 50px rgba(4,26,23,.40), 0 6px 16px rgba(4,26,23,.26);
  /* No floating/bobbing/scaling — poster is anchored. */
}
.hero-poster-float img{ display:block; width:100%; height:auto; }

/* ---- Slide backgrounds (static premium gradients) ---- */
.hero-slide-bg{ position:absolute; inset:0; z-index:1; }
/* Slide 1 — teal gradient (ref image 2) */
.hero-slide-bg--welcome{
  background:linear-gradient(135deg, #06a798 0%, #0e5c50 55%, #0a3630 100%);
}
/* Slide 2 — brand gold -> bright CoBSMEs yellow (ref image 3). No teal blend. */
.hero-slide-bg--database{
  background:linear-gradient(100deg, #f5c800 0%, #ffd400 50%, #fff000 100%);
}
/* Slide 3 — teal, deep -> bright (ref image 4) */
.hero-slide-bg--consult{
  background:linear-gradient(120deg, #004841 0%, #0e7d6d 55%, #00e1c8 100%);
}
/* Subtle depth highlight, kept static. */
.hero-slide-bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 24%, rgba(255,255,255,.10), transparent 55%);
}

/* ---- Slide 2 typography: dark teal for contrast on yellow ---- */
.hero-slide--2 .hero-slide-copy .eyebrow{ color:var(--teal-900) !important; }
.hero-slide--2 .hero-slide-copy h2{ color:var(--teal-950); }
.hero-slide--2 .hero-slide-copy p{ color:var(--teal-900); }

/* ---- Slide 2 CTA: solid teal button, white text ---- */
.btn-hero-teal{
  background:var(--teal-800); color:#fff; border:2px solid var(--teal-800);
  box-shadow:0 8px 20px rgba(4,26,23,.22);
}
.btn-hero-teal:hover{ background:var(--teal-600); border-color:var(--teal-600); color:#fff; }

/* ---- Staggered entrance animation (text only; poster is fixed) ---- */
/* ---- Slide content is always rendered (no per-element entrance).
   Each slide behaves as one self-contained card: the whole slide —
   background, text, buttons, watermark/poster — moves together with
   the carousel's right-to-left transition. No delayed fade-in. ---- */
.hs-anim{ opacity:1; transform:none; }
@keyframes heroFadeUp{ to{ opacity:1; transform:translateY(0); } }

/* ---- Dots (centred beneath the carousel) ---- */
.hero-carousel-dots{
  display:flex; gap:12px; justify-content:center;
  margin:22px auto 0;
}
.hero-dot{
  width:11px; height:11px; border-radius:50%; border:2px solid rgba(255,255,255,.55);
  background:transparent; cursor:pointer; padding:0; transition:background .2s, transform .2s, border-color .2s;
}
.hero-dot:hover{ border-color:#fff; }
.hero-dot.is-active{ background:var(--yellow); border-color:var(--yellow); transform:scale(1.2); }
.hero-dot:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .hero-carousel-track{ transition:transform .3s ease; }
  .hs-anim{ opacity:1 !important; transform:none !important; }
  .hero-slide.is-active .hs-anim{ animation:none; }
}

/* ---- Responsive: tablet ---- */
@media (max-width:980px){
  .hero-carousel{ padding:32px 20px 40px; }
  .hero-slide{ height:auto; min-height:0; }
  .hero-slide-inner{ grid-template-columns:1fr; gap:26px; padding:44px 32px; text-align:center; }
  .hero-slide-copy{ max-width:100%; margin:0 auto; }
  .hero-slide-copy .eyebrow{ text-align:center; }
  .hero-consult-list{ margin-left:auto; margin-right:auto; text-align:left; }
  .hero-slide-poster{ order:-1; }
  .hero-slide-watermark{ display:none; }
  .hero-poster-float{ width:min(70%, 300px); }
  .hero-slide-copy h1{ font-size:32px; }
  .hero-slide-copy h2{ font-size:30px; }
  .hero-ctas{ justify-content:center; }
}

/* ---- Responsive: mobile ---- */
@media (max-width:600px){
  .hero-carousel{ padding:20px 14px 30px; }
  .hero-carousel-frame{ border-radius:20px; }
  .hero-slide-inner{ padding:34px 22px; gap:20px; }
  .hero-slide-copy h1{ font-size:26px; }
  .hero-slide-copy h2{ font-size:25px; }
  .hero-slide-copy p{ font-size:15px; }
  .hero-poster-float{ width:min(78%, 260px); }
  .hero-consult-list{ grid-template-columns:1fr; gap:5px; }
}