here, so `.news p{color:var(--ink)}` would darken it; restore
the orange kicker color with a selector that outranks `.news p`. */
.news .kicker{margin-bottom:6px;color:var(--orange)}
.news h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,42px);letter-spacing:-.025em;line-height:1.04}
.news p{color:var(--ink-soft);margin-top:14px;max-width:none}
.news .field{display:flex;gap:10px;margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:7px 7px 7px 20px;box-shadow:0 10px 26px -18px rgba(10,15,12,.3)}
.news input{border:none;background:none;flex:1;font-family:var(--body);font-size:16px;color:var(--ink)}
.news input:focus{outline:none}
.news small{display:block;margin-top:14px;color:var(--ink-soft);font-size:13px;font-family:var(--mono)}
.news-art{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.news-art .ph{aspect-ratio:3/2;border-radius:18px;box-shadow:none}
.join{position:relative;z-index:2;padding-bottom:0; padding-top: 0;}
/* Pull the card down over the footer's top padding. Selector is deliberately
specific (0,4,0) so it beats the `.section > .wrap > .wp-block-group{margin-block:0}`
rhythm reset below, which would otherwise zero this overlap. */
.section.join > .wrap > .news{margin-bottom:-96px}
footer{position:relative;z-index:0;background:var(--dark);color:#9fb1a8;margin-top:0;padding:158px 0 34px}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--green) 28%,var(--orange) 72%,transparent);opacity:.55}
.foot-top{display:grid;grid-template-columns:1.5fr 2fr;gap:56px;align-items:start}
footer .bba-logo .bw-text{color:var(--logo-letters);font-size:26px}
footer .bba-logo .bw-blocks{grid-template-columns:repeat(2,9px);grid-auto-rows:9px;gap:2px}
footer .bba-logo .bw-blocks i{border-width:1.5px;border-radius:2px}
.foot-brand p.about{margin-top:20px;max-width:36ch;line-height:1.65;font-size:15px;color:#9fb1a8}
.socials{display:flex;gap:10px;margin-top:24px}
.socials a{width:42px;height:42px;border-radius:12px;border:1px solid #20302a;background:rgba(255,255,255,.02);display:grid;place-items:center;color:#cdd9d3;font-family:var(--mono);font-size:12px;font-weight:500;transition:.2s}
.socials a:hover{border-color:var(--green);background:var(--green);color:#fff;transform:translateY(-2px)}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
footer h4{color:#fff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;font-weight:600;font-family:var(--mono)}
footer ul{list-style:none}
footer li{padding:7px 0;font-size:15px}
footer li a{transition:.18s}
footer li a:hover{color:var(--green)}
.foot-bottom{border-top:1px solid #1c2a23;margin-top:56px;padding-top:26px;display:flex;justify-content:space-between;font-size:13px;color:#7c8c83;flex-wrap:wrap;gap:8px}
.foot-bottom .mono{font-family:var(--mono)}
.fade{opacity:0;transform:translateY(18px);animation:fu .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes fu{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}
.d2{animation-delay:.15s}
.d3{animation-delay:.25s}
.d4{animation-delay:.35s}
.d5{animation-delay:.45s}
@media(max-width:980px){
.hero-grid{grid-template-columns:1fr;gap:40px;position:relative}
.hero-grid>div:first-child{position:relative;z-index:2}
.hero-visual{position:absolute;top:-6px;right:-18px;width:46%;max-width:235px;min-height:0;opacity:.3;z-index:0;pointer-events:none;order:0;animation:none}
.hero-visual .net-svg{width:100%}
.mission-row{grid-template-columns:1fr;gap:36px}
.news{grid-template-columns:1fr;gap:34px}
}
@media(max-width:880px){
nav.links{display:none}
.nav{padding:0 12px 0 18px}
.burger{display:flex;flex-direction:column;justify-content:center;align-items:center;width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:#fff;cursor:pointer;gap:3px;padding:0}
.burger i{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}
.paths{grid-template-columns:1fr}
.stats{grid-template-columns:1fr 1fr}
.stat:nth-child(2){border-right:none}
.stat:nth-child(-n+2){border-top:none}
.stat:nth-child(n+3){border-top:1px solid #1c2a23}
.stat{padding:32px 22px}
.stat .n{font-size:clamp(32px,8.5vw,46px)}
.convener{padding:52px 30px 46px}
.convener .conv-blocks{width:112px;height:112px;gap:10px;top:-20px;right:-20px}
.section{padding:72px 0}
.wrap{padding:0 22px}
.foot-top{grid-template-columns:1fr;gap:40px}
}
@media(max-width:520px){
.hero{padding:44px 0 60px}
h1.display{font-size:clamp(33px,8.6vw,48px)}
.hero-visual{width:43%;max-width:180px;right:-12px;top:-2px;min-height:0;opacity:.28;animation:none}
.news,.path{padding:38px 26px}
.foot-cols{grid-template-columns:1fr 1fr;gap:24px}
.news-art{grid-template-columns:1fr 1fr}
.stat{padding:26px 16px}
.logo-row{gap:22px 30px}
.logo-row img{height:30px}
}
.eyebrow-m{padding-bottom:10px;display:inline-block;font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.kicker.center{display:flex;justify-content:center;margin-bottom:14px}
.feat{display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--line);border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 50px 90px -55px rgba(10,15,12,.4)}
.feat .img{position:relative;min-height:420px;background:linear-gradient(150deg,#2d3138,var(--dark))}
.feat .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat .badge{position:absolute;top:22px;left:22px;z-index:2;background:var(--green);color:#fff;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;border-radius:9px}
.feat .body{padding:52px;display:flex;flex-direction:column;justify-content:center}
.feat h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;line-height:1.05}
.feat .meta{margin:22px 0 0;display:flex;flex-direction:column;gap:13px}
.feat .meta div{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--ink)}
.feat .meta svg{flex:0 0 20px;color:var(--green-deep)}
.feat .blurb{color:var(--ink-soft);font-size:17px;margin:24px 0 30px;line-height:1.6}
.feat .feat-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
/* The featured card body is a flex column (align-items:stretch), so a bare CTA
button would stretch full-width — keep it natural width, like the mockup. */
.feat .body > .btn{align-self:flex-start}
.feat .all-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--green-deep);transition:color .25s ease}
.feat .all-link:hover{color:var(--orange)}
.mship{position:relative;border:1px solid var(--line);border-radius:30px;overflow:hidden;padding:60px;background:
radial-gradient(130% 130% at 100% 0%,var(--orange-soft),transparent 50%),
radial-gradient(130% 130% at 0% 100%,var(--green-soft),transparent 52%),#fff;
box-shadow:0 40px 80px -56px rgba(10,15,12,.4)}
.mship-grid{display:grid;grid-template-columns:1fr .9fr;gap:48px;align-items:center;position:relative;z-index:1}
.mship h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.025em;line-height:1.04;margin:10px 0 0}
.mship p{color:var(--ink-soft);margin-top:14px;font-size:18px;max-width:46ch}
.mship .m-cta{margin-top:28px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
/* Compact tier-row component (scoped to .tier-list so it doesn't collide with
the .tiers .tier pricing cards, which are a different component). */
.tier-list{display:flex;flex-direction:column;gap:12px}
.tier-list .tier{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 22px;box-shadow:0 18px 40px -34px rgba(10,15,12,.3);transition:.22s}
.tier-list .tier:hover{transform:translateY(-3px);border-color:rgba(14,137,78,.5)}
.tier-list .tier .t-block{flex:0 0 auto;width:36px;height:36px;display:grid;grid-template-columns:1fr 1fr;gap:3px}
.tier-list .tier .t-block i{border-radius:4px}
.tier-list .tier:nth-child(1) .t-block i:nth-child(1),.tier-list .tier:nth-child(1) .t-block i:nth-child(4){background:var(--green)}
.tier-list .tier:nth-child(1) .t-block i:nth-child(2),.tier-list .tier:nth-child(1) .t-block i:nth-child(3){background:var(--green-soft)}
.tier-list .tier:nth-child(2) .t-block i:nth-child(1),.tier-list .tier:nth-child(2) .t-block i:nth-child(4){background:var(--orange)}
.tier-list .tier:nth-child(2) .t-block i:nth-child(2),.tier-list .tier:nth-child(2) .t-block i:nth-child(3){background:var(--orange-soft)}
.tier-list .tier:nth-child(3) .t-block i:nth-child(1),.tier-list .tier:nth-child(3) .t-block i:nth-child(4){background:var(--ink)}
.tier-list .tier:nth-child(3) .t-block i:nth-child(2),.tier-list .tier:nth-child(3) .t-block i:nth-child(3){background:var(--line)}
.tier-list .tier .t-name{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.tier-list .tier .t-desc{font-size:14px;color:var(--ink-soft);margin-top:2px}
@media(max-width:980px){.feat{grid-template-columns:1fr}.feat .img{min-height:300px}.mship-grid{grid-template-columns:1fr;gap:34px}}
@media(max-width:520px){.feat .body,.mship{padding:36px 26px}}
.mcta{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;border:1px solid var(--line);border-radius:30px;padding:60px;overflow:hidden;background:linear-gradient(180deg,rgba(16,196,106,.10),#fff 220px)}
.mcta::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--green),var(--orange))}
.mcta .mc-blocks{position:absolute;top:-22px;right:-22px;display:grid;grid-template-columns:1fr 1fr;gap:12px;width:140px;height:140px;opacity:.16;pointer-events:none}
.mcta .mc-blocks i{border-radius:16px}
.mcta .mc-blocks i:nth-child(1){background:var(--green)}
.mcta .mc-blocks i:nth-child(2){background:var(--orange)}
.mcta .mc-blocks i:nth-child(3){background:var(--orange)}
.mcta .mc-blocks i:nth-child(4){background:var(--green)}
.mcta .mc-text{position:relative;z-index:1}
.mcta h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.03em;line-height:1.04;margin:14px 0 0}
.mcta p{color:var(--ink-soft);font-size:18px;margin-top:14px;max-width:52ch}
.mcta ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px}
.mcta li{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:500}
.mcta li svg{flex:0 0 18px}
.mcta .mc-cta{position:relative;z-index:1;display:flex;flex-direction:column;gap:13px}
.mcta .mc-cta .btn{justify-content:center}
@media(max-width:980px){.mcta{grid-template-columns:1fr;gap:30px;padding:44px 30px}}
.page-hero p.sub,.hero p.lead,.lead-2,.mission-row p.body,.sec-head p,.pillar p,.bio p,.res-card p,.ev-card .desc,.path>p,.news p,.podcast p,.feat .blurb,.mcta p,.tier li span,.split .prose p,.prose p,.cinfo .val{color:var(--ink)}
p + .btn{margin-top:0px}
.prose .btn{margin-top:22px}
.band .btn{margin-top:8px}
@media(max-width:640px){
.partners .logo-row{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px;align-items:center;justify-items:center;margin-top:30px}
.partners .logo-row a{width:100%}
.partners .logo-row img{height:36px;max-width:130px}
.partners .logo-row a:first-child img{height:58px}
.deco-blocks{left:-6px;top:-20px;width:62px;height:62px;gap:6px}
}
.mobile-menu{position:fixed;top:92px;left:50%;transform:translateX(-50%) translateY(-10px);width:95%;max-width:1600px;z-index:49;background:rgba(255,255,255,.97);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(232,236,231,.95);border-radius:18px;box-shadow:0 26px 54px -22px rgba(10,15,12,.4);padding:12px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,transform .24s ease,visibility .24s}
.mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mobile-menu a{display:block;font-family:var(--body);font-size:16px;font-weight:600;color:var(--ink);padding:13px 16px;border-radius:11px;transition:.18s}
.mobile-menu a:hover,.mobile-menu a.active{background:rgba(14,137,78,.1);color:var(--ink)}
.mobile-menu .mm-cta{margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.mobile-menu .mm-cta a{background:var(--green);color:#04210f;text-align:center;font-weight:700}
.mobile-menu .mm-cta a:hover{background:var(--green-hover)}
.burger i{transition:transform .25s ease,opacity .2s ease}
.burger.open i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
body.menu-open{overflow:hidden}
@media(min-width:881px){.mobile-menu{display:none}}
.quotes .intro{margin-bottom:40px;text-align:center}
.quotes .intro .deco-blocks{margin-left:auto;margin-right:auto}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.qcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px 32px;box-shadow:0 24px 50px -40px rgba(10,15,12,.3);transition:.25s,height .45s cubic-bezier(.2,.7,.2,1)}
.qcard:hover{transform:translateY(-5px);box-shadow:0 44px 70px -46px rgba(10,15,12,.4);border-color:rgba(14,137,78,.4)}
.qmark{font-family:var(--display);font-weight:800;font-size:54px;line-height:.5;color:var(--green);height:26px}
.qcard blockquote{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.42;letter-spacing:-.015em;color:var(--ink);margin:18px 0 26px;flex:1 1 auto}
.qby{display:flex;align-items:center;gap:14px;margin-top:auto}
.qby img,.qby .qav{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:2px solid var(--green-soft);background:var(--bg-soft)}
.qby .qav{display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:18px;color:#fff;border:none}
.qby .qav.g{background:linear-gradient(150deg,var(--green),var(--green-deep))}
.qby .qav.o{background:linear-gradient(150deg,var(--orange),#c95a06)}
/* Quote avatars: a headshot if one has been added, otherwise the initials tile.
Drop a core Image block with class `qav-img` into the figcaption and the
initials hide themselves; delete the image and they come back. */
.qby .qav-img{width:54px;height:54px;flex:0 0 auto;margin:0;border-radius:50%;overflow:hidden}
.qby .qav-img img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 25%;border:2px solid var(--green-soft);background:var(--bg-soft);display:block}
.qby:has(.qav-img) .qav{display:none}
.qname{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink)}
.qrole{font-family:var(--mono);font-size:11.5px;color:var(--green-deep);margin-top:3px;letter-spacing:.01em;line-height:1.35}
@media(max-width:880px){.qgrid{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
/* Quote carousel — .is-carousel is added by bba.js, so the plain grid above stays
the no-JS and block-editor view. Track slides one card at a time. */
.q-viewport{overflow:hidden}
.qgrid.is-carousel{display:flex;grid-template-columns:none;gap:22px;align-items:flex-start;transition:transform .9s cubic-bezier(.65,0,.35,1);will-change:transform}
.qgrid.is-carousel > .qcard{flex:0 0 calc((100% - 44px)/3);transition:.25s,height .9s cubic-bezier(.65,0,.35,1),opacity .9s ease}
/* Cards fade as they slide out of view and in as they arrive. */
.qgrid.is-carousel > .qcard[aria-hidden="true"]{opacity:0}
.q-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:34px}
.q-arrow{width:44px;height:44px;border-radius:100px;border:2px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:.2s;flex:0 0 auto}
.q-arrow:hover:not(:disabled){border-color:var(--ink);transform:translateY(-2px)}
.q-arrow:disabled{opacity:.35;cursor:default}
.q-arrow svg{width:17px;height:17px}
.q-dots{display:flex;gap:9px}
.q-dot{width:9px;height:9px;padding:0;border:none;border-radius:100px;background:var(--line);cursor:pointer;transition:.22s}
.q-dot.on{background:var(--green);width:26px}
/* While auto-advancing, the active dot fills up as a countdown to the next slide. */
.q-dot{position:relative;overflow:hidden}
.q-nav.is-running .q-dot.on{background:rgba(14,137,78,.22)}
.q-nav.is-running .q-dot.on::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--green);transform-origin:left;animation:q-fill var(--q-delay,4.5s) linear forwards}
@keyframes q-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:880px){
.qgrid.is-carousel{max-width:none;margin:0}
.qgrid.is-carousel > .qcard{flex:0 0 100%}
}
.hero{position:relative;padding:64px 0 88px}
.lead-2{color:var(--ink);font-size:20px;max-width:90ch}
.mission-media::before{content:"";position:absolute;right:-15px;bottom:-15px;width:101%;height:101%;border-radius:26px;background:linear-gradient(135deg,var(--green),var(--orange));opacity:.2;z-index:0}
.partners .cap{font-size:18.5px;color:var(--ink);margin-top:14px}
.convener{position:relative;background:radial-gradient(120% 100% at 100% 0%,#13211b,var(--dark));color:#fff;border-radius:30px 30px 0 0;padding:84px 64px 70px;overflow:hidden;border:1px solid #1c2a23;border-bottom:none}
.convener p{position:relative;margin-top:24px;font-size:20px;color:#c5d2cc;max-width:60ch}
.stats-band{background:var(--dark-2);border:1px solid #1c2a23;border-top:none;border-radius:0 0 30px 30px;overflow:hidden}
.stat{padding:40px 34px;border-right:1px solid #1c2a23;border-top:1px solid #1c2a23}
.stat .l{margin-top:9px;font-size:14px;color:#90a39a;font-family:var(--mono);letter-spacing:.02em}
.join{position:relative;z-index:2;padding-top:0;padding-bottom:0}
@media(max-width:980px){
.hero-grid{grid-template-columns:1fr;gap:40px}
.hero-visual{min-height:360px;order:2}
.mission-row{grid-template-columns:1fr;gap:36px}
.news{grid-template-columns:1fr;gap:34px}
}
@media(max-width:520px){
.hero{padding:44px 0 60px}
h1.display{font-size:clamp(33px,8.6vw,48px)}
.net-svg{width:88%}
.hero-visual{min-height:320px}
.news,.path{padding:38px 26px}
.foot-cols{grid-template-columns:1fr 1fr;gap:24px}
.news-art{grid-template-columns:1fr 1fr}
.stat{padding:26px 16px}
.logo-row{gap:22px 30px}
.logo-row img{height:30px}
}
.page-hero{position:relative;text-align:center;padding:118px 0 64px}
.page-hero .eyebrow{margin:0 auto;margin-bottom:20px;}
.page-hero h1{font-family:var(--display);font-weight:800;font-size:clamp(42px,6vw,80px);letter-spacing:-.038em;line-height:1;margin-top:22px}
.page-hero h1 .grn{color:var(--green-deep)}
.page-hero p.sub{font-size:20px;color:var(--ink);max-width:62ch;margin:20px auto 0}
.sec{padding:88px 0}
.sec.tint{background:var(--bg-soft)}
/* The newsletter band hangs over the footer; when the section above it is
tinted, carry the tint down behind it so there's no white strip in between.
The box's -96px bottom margin collapses through .join, so the band's own box
reaches 96px into the footer — stop the tint there or it paints over the
footer's top edge and the box no longer looks like it overlaps. */
.sec.tint + .join{background:linear-gradient(var(--bg-soft),var(--bg-soft)) top/100% calc(100% - 96px) no-repeat}
.sec-head{text-align:center;max-width:720px;margin:0 auto 52px}
.sec-head h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,4vw,46px);letter-spacing:-.03em;line-height:1.05;margin:14px 0 0}
.sec-head p{color:var(--ink);font-size:18px;margin-top:14px}
.kicker.center{display:flex;justify-content:center}
.tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:44px}
.tab{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;padding:11px 20px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;transition:.2s}
.tab:hover{border-color:var(--green);color:var(--ink)}
.tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.feat .img{position:relative;min-height:440px;background:linear-gradient(150deg,#13211b,var(--dark))}
.feat .body{padding:52px}
.ev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ev-card{position:relative;border:1px solid var(--line);border-radius:18px;background:#fff;padding:26px 26px 24px;display:flex;flex-direction:column;box-shadow:0 20px 44px -36px rgba(10,15,12,.32);transition:.25s}
.ev-card:hover{transform:translateY(-6px);box-shadow:0 44px 70px -46px rgba(10,15,12,.42);border-color:rgba(14,137,78,.4)}
.ev-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px 13px;margin-bottom:18px}
/* Date row matches the past-event cards: tinted calendar tile, date beside it. */
.ev-date{display:flex;align-items:center;gap:13px;min-width:0}
.ev-date .mo{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--green-deep);text-transform:uppercase}
.ev-top .tag{margin-left:auto}
.ev-top:has(.tag.community) .past-ic{background:var(--orange-soft);color:#a85410}
.ev-top:has(.tag.community) .mo{color:#a85410}
.tag{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:8px;background:var(--green-soft);color:var(--green-deep)}
.tag.community{background:var(--orange-soft);color:#a85410}
.ev-card h3{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.02em;line-height:1.15;margin-bottom:10px}
.ev-card .desc{color:var(--ink-soft);font-size:15px;line-height:1.55;margin-bottom:18px}
.ev-meta{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.ev-meta div{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-soft)}
.ev-meta svg{flex:0 0 16px;color:var(--green-deep)}
.ev-card .cta{margin-top:auto}
.ev-card .cta .btn{width:100%;justify-content:center}
.ext{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;font-weight:700;font-size:15px;padding:13px 20px;border-radius:13px;border:1.5px solid var(--line);background:#fff;color:var(--ink);transition:.2s}
.ext:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
.past-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.past-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;transition:.25s;box-shadow:0 18px 40px -36px rgba(10,15,12,.3)}
.past-card:hover{transform:translateY(-5px);box-shadow:0 40px 64px -46px rgba(10,15,12,.4)}
.past-thumb{position:relative;aspect-ratio:16/10;background:linear-gradient(150deg,#1d6a52,#0f3b2c);display:grid;place-items:center;overflow:hidden}
.past-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.past-thumb .wm{position:relative;font-family:var(--display);font-weight:800;font-size:34px;color:rgba(255,255,255,.22);letter-spacing:.04em}
.past-body{padding:20px}
.past-body .mo{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--green-deep)}
.past-body h4{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em;margin:6px 0 4px}
.past-body .att{font-size:13.5px;color:var(--ink-soft)}
.past-links{display:flex;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.past-links a{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.past-links a:hover{color:var(--green-deep)}
.past-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:36px;gap:20px;flex-wrap:wrap}
.past-head h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.4vw,42px);letter-spacing:-.03em}
.past-head p{color:var(--ink-soft);margin-top:8px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--green-deep);transition:color .25s ease}
.link-arrow:hover{color:var(--orange)}
/* Nudge the arrow with a transform rather than widening the gap: animating
gap reflows the link (and its right-aligned row) on every frame. */
.link-arrow svg,.rail-card .all svg{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.link-arrow:hover svg,.rail-card .all:hover svg{transform:translateX(4px)}
.band{position:relative;border-radius:28px;overflow:hidden;text-align:center;padding:72px 48px;color:#fff;background:radial-gradient(120% 120% at 0% 0%,#15271f,var(--dark))}
.band h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.03em}
.band p{color:#c5d2cc;font-size:18px;max-width:60ch;margin:16px auto 30px}
.band .conv-blocks{position:absolute;top:-26px;right:-26px;display:grid;grid-template-columns:1fr 1fr;gap:14px;width:160px;height:160px;opacity:.85}
.band .conv-blocks i{border-radius:18px}
.band .conv-blocks i:nth-child(1){background:var(--green)}
.band .conv-blocks i:nth-child(2){background:var(--orange)}
.band .conv-blocks i:nth-child(3){background:var(--orange)}
.band .conv-blocks i:nth-child(4){background:var(--green)}
.note-line{text-align:center;color:var(--ink-soft);font-size:15px;margin-top:40px}
.note-line a{font-weight:700;color:var(--green-deep);transition:color .25s ease}
.note-line a:hover{color:var(--orange)}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{border:1px solid var(--line);border-radius:18px;background:#fff;padding:34px;box-shadow:0 20px 44px -38px rgba(10,15,12,.3);transition:.25s}
.card:hover{transform:translateY(-5px);box-shadow:0 40px 64px -46px rgba(10,15,12,.4)}
.card .ic{width:50px;height:50px;border-radius:13px;display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:11px;background:var(--green-soft);margin-bottom:18px}
.card .ic.o{background:var(--orange-soft)}
.card .ic i{border-radius:4px;background:var(--green)}
.card .ic.o i{background:var(--orange)}
.card .ic i:nth-child(2){background:var(--orange)}
.card .ic.o i:nth-child(2){background:var(--green)}
.card h3{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.02em;margin-bottom:9px}
.card p{color:var(--ink-soft);font-size:15.5px;line-height:1.6}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.prose p{color:var(--ink-soft);font-size:18px;line-height:1.7;margin-bottom:16px}
.prose ul{margin:0 0 16px;padding-left:24px}
.prose li{color:var(--ink-soft);font-size:18px;line-height:1.7;margin-bottom:8px}
.prose li::marker{color:var(--green)}
.prose h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.03em;line-height:1.06;margin-bottom:8px}
.podcast{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 44px 84px -55px rgba(10,15,12,.4)}
.podcast .art{position:relative;overflow:hidden;background:radial-gradient(90% 80% at 25% 15%,rgba(25,224,124,.16),transparent 60%),radial-gradient(70% 60% at 90% 100%,rgba(255,122,20,.12),transparent 60%),var(--dark);min-height:330px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:26px;padding:40px 36px}
.podcast .art::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000,transparent 75%);mask-image:radial-gradient(circle at 50% 45%,#000,transparent 75%);pointer-events:none}
.podcast .pc-stack{position:relative;display:flex;align-items:flex-end}
.podcast .pc-cover{width:170px;height:170px;border-radius:16px;transform:rotate(-4deg);box-shadow:0 30px 50px -24px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
.podcast .pc-guest{margin:0 0 -6px -34px;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:100px;padding:6px 18px 6px 6px;box-shadow:0 20px 40px -22px rgba(0,0,0,.7)}
.podcast .pc-guest img{width:52px;height:52px;border-radius:100px;object-fit:cover;object-position:50% 20%;border:2px solid var(--green-bright)}
.podcast .pc-guest figcaption{display:flex;flex-direction:column;line-height:1.25}
.podcast .pc-guest b{color:#fff;font-size:14.5px;font-weight:700}
.podcast .pc-guest span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}
.podcast .pc-player{position:relative;display:flex;align-items:center;gap:16px;width:100%;max-width:380px;padding:10px 18px 10px 10px;border-radius:100px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:.25s}
.podcast .pc-player:hover{background:rgba(255,255,255,.09);border-color:rgba(25,224,124,.45)}
.podcast .pc-player .play{flex:0 0 auto;width:52px;height:52px;border-radius:100px;background:var(--green-bright);color:#04210f;display:grid;place-items:center;box-shadow:0 12px 30px -10px var(--green-glow);transition:.25s}
.podcast .pc-player:hover .play{transform:scale(1.07)}
.podcast .pc-player .play svg{margin-left:3px}
.podcast .wave{flex:1;display:flex;align-items:center;gap:3px;height:34px}
.podcast .wave i{flex:1;height:var(--h);min-height:3px;border-radius:3px;background:rgba(255,255,255,.28);transition:background .25s}
.podcast .wave i:nth-child(-n+9){background:var(--green-bright)}
.podcast .pc-player:hover .wave i{animation:pc-wave 1s ease-in-out infinite alternate}
.podcast .pc-player:hover .wave i:nth-child(3n){animation-delay:-.4s}
.podcast .pc-player:hover .wave i:nth-child(3n+1){animation-delay:-.7s}
@keyframes pc-wave{to{transform:scaleY(.45)}}
@media(prefers-reduced-motion:reduce){.podcast .pc-player:hover .wave i{animation:none}}
.podcast .dur{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.65)}
.podcast .pc-body{padding:48px}
.podcast .ep{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.podcast h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.025em;line-height:1.1;margin:8px 0 14px}
.podcast p{color:var(--ink-soft);font-size:16px;line-height:1.6;margin-bottom:24px}
.podcast .where{display:flex;gap:10px;flex-wrap:wrap}
.podcast .where a{font-family:var(--mono);font-size:12.5px;padding:9px 15px;border:1px solid var(--line);border-radius:10px;color:var(--ink-soft);transition:.2s}
.podcast .where a:hover{border-color:var(--green);color:var(--green-deep)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.member{text-align:center}
.member .ph-av{aspect-ratio:1;border-radius:20px;overflow:hidden;background:linear-gradient(150deg,var(--green-soft),#fff);border:1px solid var(--line);margin-bottom:16px;position:relative}
.member .ph-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.member h4{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em}
.member .role{font-family:var(--mono);font-size:12px;color:var(--green-deep);margin-top:4px;letter-spacing:.03em}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
/* The mockup sizes "Send us a message." inline; the port left it as a bare
with no rule, so it fell back to the UA default (~26px). Restore it. */
.contact-grid h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;margin-bottom:10px}
/* Kill WordPress's injected 24px flow margin on the intro paragraph so the gap
under the H2 matches the mockup (the H2's own 10px margin-bottom). */
.contact-grid h2 + p{margin-top:0}
.cfield{display:block;margin-bottom:18px}
.cfield label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.cfield input,.cfield textarea,.cfield select{width:100%;border:1px solid var(--line);border-radius:13px;padding:14px 16px;font-family:var(--body);font-size:16px;color:var(--ink);background:#fff;transition:.2s}
.cfield input:focus,.cfield textarea:focus,.cfield select:focus{outline:none;border-color:var(--green)}
.cfield textarea{min-height:140px;resize:vertical}
/* ---- Gravity Forms (contact) — restyle the orbital theme to match the
mockup's .cfield form. Scoped to .contact-grid; body prefix lifts specificity
above Gravity Forms' own .gform_wrapper .gfield rules. ---- */
body .contact-grid .gform_wrapper .gform_heading{display:none} /* "* indicates required fields" */
body .contact-grid .gform_wrapper .gform_validation_container{display:none !important} /* honeypot */
body .contact-grid .gform_wrapper .gform_fields{display:block} /* our margins control spacing */
body .contact-grid .gform_wrapper .gfield{margin-bottom:18px}
body .contact-grid .gform_wrapper .gfield_label{display:block;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
body .contact-grid .gform_wrapper .gfield_required{display:none} /* mockup labels carry no asterisk */
body .contact-grid .gform_wrapper .ginput_container{margin-top:0}
body .contact-grid .gform_wrapper .gfield input,
body .contact-grid .gform_wrapper .gfield select,
body .contact-grid .gform_wrapper .gfield textarea{width:100%;height:auto;border:1px solid var(--line);border-radius:13px;padding:14px 16px;font-family:var(--body);font-size:16px;line-height:1.4;color:var(--ink);background:#fff;transition:.2s;box-shadow:none}
body .contact-grid .gform_wrapper .gfield select{padding-right:44px;appearance:none;-webkit-appearance:none;background-repeat:no-repeat;background-position:right 16px center;background-size:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23566B61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
body .contact-grid .gform_wrapper .gfield input:focus,
body .contact-grid .gform_wrapper .gfield select:focus,
body .contact-grid .gform_wrapper .gfield textarea:focus{outline:none;border-color:var(--green);box-shadow:none}
body .contact-grid .gform_wrapper .gfield textarea{min-height:140px;resize:vertical}
body .contact-grid .gform_wrapper .gform_footer{margin:4px 0 0;padding:0}
/* !important: Gravity Forms' orbital "framework" styles .button through
--gf-local-* custom properties in a rule that outranks a plain class chain. */
body .contact-grid .gform_wrapper .gform_footer .gform_button{display:inline-flex;align-items:center;gap:9px;width:auto;font-family:var(--body);font-weight:700;font-size:15px;padding:14px 24px !important;border-radius:13px !important;border:1.5px solid transparent !important;background:var(--green) !important;color:#04210f !important;cursor:pointer;transition:.22s;box-shadow:0 10px 22px -12px rgba(16,196,106,.65),0 2px 5px -2px rgba(11,122,69,.35)}
body .contact-grid .gform_wrapper .gform_footer .gform_button:hover{background:var(--green-hover) !important;transform:translateY(-2px);box-shadow:0 18px 32px -12px rgba(14,137,78,.7),0 3px 7px -2px rgba(11,122,69,.4)}
/* ---- Gravity Forms (newsletter) — email + button in one pill, like the
mockup's .news .field. Same body-prefix specificity trick as the contact form. ---- */
body .news .gform_wrapper{margin-top:24px}
body .news .gform_wrapper form{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:7px 7px 7px 20px;box-shadow:0 10px 26px -18px rgba(10,15,12,.3);transition:border-color .2s}
body .news .gform_wrapper form:focus-within{border-color:var(--green)}
body .news .gform_wrapper .gform-body{flex:1;min-width:0}
body .news .gform_wrapper .gform_fields{display:block}
body .news .gform_wrapper .gform_validation_container{display:none !important} /* honeypot */
body .news .gform_wrapper .gform_validation_errors{display:none} /* one field: the inline message is enough */
body .news .gform_wrapper .gfield input{width:100%;height:auto;border:none;background:none;box-shadow:none;padding:10px 0;font-family:var(--body) !important;font-size:16px !important;color:var(--ink)}
body .news .gform_wrapper .gfield input:focus{outline:none;box-shadow:none}
body .news .gform_wrapper .gfield input::placeholder{font-size:16px !important;color:#757575 !important;opacity:1}
body .news .gform_wrapper .gform_footer{margin:0;padding:0;flex:0 0 auto}
/* !important: GF's orbital framework sets its own height, type and shadow on .button; match .btn.btn-green. */
body .news .gform_wrapper .gform_footer .gform_button{display:inline-flex;align-items:center;height:auto !important;min-height:0 !important;font-family:var(--body) !important;font-weight:700 !important;font-size:15px !important;line-height:24px !important;padding:14px 24px !important;border-radius:13px !important;border:1.5px solid transparent !important;background:var(--green) !important;color:#fff !important;cursor:pointer;transition:.22s;box-shadow:0 10px 22px -12px rgba(16,196,106,.65),0 2px 5px -2px rgba(11,122,69,.35) !important}
body .news .gform_wrapper .gform_footer .gform_button:hover{background:var(--green-hover) !important;transform:translateY(-2px);box-shadow:0 18px 32px -12px rgba(14,137,78,.7),0 3px 7px -2px rgba(11,122,69,.4) !important}
/* Errors: GF puts the message under the input inside the pill; float it below instead. */
body .news .gform_wrapper .gfield{position:relative}
body .news .gform_wrapper .gfield_validation_message{position:absolute;left:-20px;top:calc(100% + 14px);margin:0;padding:0;border:none;background:none;font-size:13.5px;color:#c0392b;white-space:nowrap}
body .news .gform_wrapper.gform_validation_error{margin-bottom:30px}
body .news .gform_confirmation_message{margin-top:24px;background:var(--green-soft);border:1px solid rgba(14,137,78,.25);border-radius:14px;padding:16px 20px;font-size:16px;color:var(--ink)}
body .news .gform_confirmation_message strong{color:var(--green-deep)}
@media(max-width:480px){
body .news .gform_wrapper form{padding:6px 6px 6px 16px;gap:8px}
body .news .gform_wrapper .gform_footer .gform_button{padding:14px 18px !important}
body .news .gform_wrapper .gfield_validation_message{left:-16px}
}
.cinfo{border:1px solid var(--line);border-radius:20px;padding:36px;background:var(--bg-soft)}
.cinfo .row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.cinfo .row:last-child{border-bottom:none}
.cinfo .row svg{flex:0 0 20px;color:var(--green-deep);margin-top:2px}
.cinfo .row .lab{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.cinfo .row .val{font-size:16px;font-weight:600;margin-top:2px}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.res-card{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;transition:.25s;box-shadow:0 18px 40px -36px rgba(10,15,12,.3);display:flex;flex-direction:column}
.res-card:hover{transform:translateY(-5px);box-shadow:0 40px 64px -46px rgba(10,15,12,.4)}
.res-thumb{aspect-ratio:16/9;background:linear-gradient(150deg,var(--green-soft),#fff);display:grid;place-items:center;border-bottom:1px solid var(--line)}
.res-thumb.o{background:linear-gradient(150deg,var(--orange-soft),#fff)}
.res-body{padding:26px;display:flex;flex-direction:column;flex:1}
.res-type{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}
.res-card h3{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em;margin:8px 0 8px}
.res-card p{color:var(--ink-soft);font-size:15px;line-height:1.55;margin-bottom:18px}
.res-card .rl{margin-top:auto;font-weight:700;color:var(--green-deep);display:inline-flex;gap:8px;align-items:center}
.pillars{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.pillar{flex:0 1 430px;border:1px solid var(--line);border-radius:18px;background:#fff;padding:32px;box-shadow:0 20px 44px -38px rgba(10,15,12,.3);transition:.25s}
.pillar:hover{transform:translateY(-5px);box-shadow:0 40px 64px -46px rgba(10,15,12,.4)}
.pillar .ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:20px;background:var(--green-soft);color:var(--green-deep)}
.pillar.alt .ic{background:var(--orange-soft);color:#a85410}
.pillar .ic svg{width:27px;height:27px}
.pillar h3{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;margin-bottom:9px}
.pillar p{color:var(--ink);font-size:15.5px;line-height:1.6}
.bio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:1180px){.bio-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.bio-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bio-grid{grid-template-columns:1fr}}
.bio{border:1px solid var(--line);border-radius:18px;background:#fff;padding:26px;box-shadow:0 18px 40px -38px rgba(10,15,12,.3);transition:.25s}
.bio:hover{transform:translateY(-4px);box-shadow:0 40px 64px -46px rgba(10,15,12,.4);border-color:rgba(14,137,78,.4)}
.bio .av{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:19px;color:#fff;margin-bottom:16px}
.bio .av.g{background:linear-gradient(150deg,var(--green),var(--green-deep))}
.bio .av.o{background:linear-gradient(150deg,var(--orange),#c95a06)}
.bio h4{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em}
.bio .role{font-family:var(--mono);font-size:11.5px;color:var(--green-deep);margin:5px 0 12px;letter-spacing:.03em;text-transform:uppercase}
.bio p{color:var(--ink-soft);font-size:14.5px;line-height:1.6}
@media(max-width:980px){.pillars{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.pillars{grid-template-columns:1fr}}
@media(max-width:980px){
.feat,.podcast,.contact-grid,.split{grid-template-columns:1fr}
.feat .img{min-height:300px}
.ev-grid,.cards-3,.res-grid{grid-template-columns:1fr 1fr}
.past-grid,.team-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
.ev-grid,.cards-3,.cards-2,.res-grid,.past-grid,.team-grid{grid-template-columns:1fr}
.feat .body,.podcast .pc-body,.band{padding:36px 26px}
.podcast .art{padding:34px 20px;gap:22px}
.podcast .pc-cover{width:130px;height:130px}
.podcast .pc-guest{margin-left:-26px;padding-right:14px;white-space:nowrap}
.podcast .pc-guest img{width:44px;height:44px}
.sec{padding:64px 0}
}
.bio{border:1px solid var(--line);border-radius:18px;background:#fff;padding:22px 22px 24px;box-shadow:0 18px 40px -38px rgba(10,15,12,.3);transition:.25s}
.bio:hover{transform:translateY(-4px);box-shadow:0 40px 64px -46px rgba(10,15,12,.4)}
.bio-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.bio .hs{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2.5px solid var(--green-soft);background:var(--bg-soft)}
.bio .li{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--ink-soft);border:1px solid var(--line);transition:.2s;flex:0 0 auto}
.bio .li:hover{color:#fff;background:#0A66C2;border-color:#0A66C2}
/* Board bio cards — photo across the top, then name/role with the LinkedIn
badge beside them, then the bio. Stacked this way the cards stay readable at
three or four across (see .bio-grid above).
.bio-top is display:contents so the figure and the LinkedIn link become direct
grid children and can sit in different rows without touching the markup.
Columns: [text] [LinkedIn]. The badge spans the name+role rows and is centred
against them; the photo and the bio paragraph span both columns.
The photo cancels the card's side padding with negative inline margins and is
clipped by the card's overflow, so it runs edge to edge.
Photos come from headshots/board/ — 480px-wide crops with matched face size
and a small gap above the head, so a square window from the top keeps every
head at the same height. Most are 480x600; a few are shorter (down to 488px)
where the source photo ran out below the shoulders. */
.bio{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto 1fr;column-gap:12px;padding:0 22px 24px;overflow:hidden;align-items:start}
.bio-top{display:contents}
/* Core's flow layout adds margin-block-start to every non-first child; zero it
so the explicit margins below are the only thing controlling spacing.
.bio-top must be listed too: display:contents changes layout, not selector
matching, so the LinkedIn link is still a CHILD of .bio-top and was picking up
a 24px top margin that fought align-self:center and pushed it 12px low. */
.bio > *, .bio-top > *{margin-block:0}
/* The img is taken out of flow so the aspect-ratio box alone sets the height. */
.bio .hs{grid-column:1 / -1;grid-row:1;position:relative;aspect-ratio:1;margin:0 -22px 20px;width:auto;height:auto;padding:0;border:0;border-radius:0;background:var(--green-soft);overflow:hidden}
.bio .hs img{position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-fit:cover;object-position:center 15%;display:block}
.bio h4{grid-column:1;grid-row:2;line-height:1.25}
.bio .role{grid-column:1;grid-row:3;margin:3px 0 0;line-height:1.45}
.bio .li{grid-column:2;grid-row:2 / span 2;align-self:center}
.bio > p:not(.role){grid-column:1 / -1;grid-row:4;margin:14px 0 0}
@media(max-width:560px){
/* One card per row on phones, so go back to the photo alongside the text —
a full-width square photo would fill the whole screen. */
.bio{grid-template-columns:38% 1fr auto;grid-template-rows:auto;column-gap:18px;padding:22px 18px 22px 0;align-items:stretch}
.bio .hs{grid-column:1;grid-row:1 / span 3;aspect-ratio:auto;margin:-22px 0;height:calc(100% + 44px);width:100%}
.bio .hs img{object-position:center 30%}
.bio h4{grid-column:2;grid-row:1}
.bio .role{grid-column:2;grid-row:2}
.bio .li{grid-column:3;grid-row:1 / span 2}
.bio > p:not(.role){grid-column:2 / span 2;grid-row:3;margin:12px 0 0;align-self:start}
}
.mission-media::before{content:"";position:absolute;right:-15px;bottom:-15px;width:101%;height:101%;border-radius:26px;background:linear-gradient(135deg,var(--green),var(--orange));opacity:.2;z-index:0}
.logo-strip{display:flex;flex-wrap:wrap;gap:30px 56px;justify-content:center;align-items:center}
.logo-strip img{height:46px;width:auto;max-width:190px;object-fit:contain;transition:.25s}
.logo-strip a:hover img{transform:translateY(-3px)}
.tiers{display:flex;flex-direction:column;gap:18px}
.tier-row{border:1px solid var(--line);border-radius:18px;background:#fff;padding:26px 30px;display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center;box-shadow:0 18px 40px -38px rgba(10,15,12,.3)}
.tier-row .t-head{display:flex;align-items:center;gap:12px}
.tier-row .t-chip{width:30px;height:30px;display:grid;grid-template-columns:1fr 1fr;gap:3px;flex:0 0 auto}
.tier-row .t-chip i{border-radius:4px}
.tier-row.platinum .t-chip i{background:#9fb1a8}
.tier-row.gold .t-chip i{background:#E0A82E}
.tier-row.silver .t-chip i{background:#AEB8BC}
.tier-row.bizpartner .t-chip i{background:var(--green)}
.tier-row.startup .t-chip i{background:var(--orange)}
.tier-row.community .t-chip i{background:var(--green-deep)}
.tier-row .t-label{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em}
/* Equal-width tiles that wrap to a new row instead of squeezing; each logo
scales to fit inside its tile's padding, so wide wordmarks never spill out. */
.tier-row .slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.tier-row .slot{height:64px;min-width:0;margin:0;padding:0 16px;border:1px dashed var(--line);border-radius:12px;background:var(--bg-soft);display:grid;place-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9fb1a8}
.tier-row .slot img{width:auto;height:auto;max-width:100%;max-height:34px;object-fit:contain;mix-blend-mode:multiply}
/* Sponsor logos link out to each company site. Make the whole tile the click
target and echo the hover lift used by the homepage logo row. */
.tier-row .slot a{display:grid;place-items:center;width:100%;height:100%;transition:.25s}
.tier-row .slot:has(a):hover{border-style:solid;border-color:var(--green);background:#fff}
.tier-row .slot a:hover{transform:translateY(-2px)}
@media(max-width:760px){.tier-row{grid-template-columns:1fr;gap:16px}}
.sponsor-invite{margin-top:88px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(16,196,106,.08),#fff 160px);padding:38px 44px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.sponsor-invite .si-text{flex:1 1 320px}
.sponsor-invite h3{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.02em;margin-bottom:8px}
.sponsor-invite p{color:var(--ink);font-size:17px;line-height:1.55;max-width:80ch}
.sponsor-invite .btn{margin-top:0;flex:0 0 auto}
@media(max-width:600px){
.tier-row .slots{grid-template-columns:1fr 1fr;gap:12px}
.tier-row .slot{padding:0 12px}
.tier-row .slot img{max-height:30px}
}
.feat .img{position:relative;min-height:440px;background:linear-gradient(150deg,#2d3138,var(--dark))}
.past-card{border:1px solid var(--line);border-radius:18px;background:#fff;padding:26px 24px 22px;transition:.25s;box-shadow:0 18px 40px -36px rgba(10,15,12,.3);display:flex;flex-direction:column}
.past-card:hover{transform:translateY(-5px);box-shadow:0 40px 64px -46px rgba(10,15,12,.4);border-color:rgba(14,137,78,.4)}
.past-row{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.past-ic{width:44px;height:44px;border-radius:12px;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;flex:0 0 auto}
.past-ic svg{width:22px;height:22px}
.past-card.alt .past-ic{background:var(--orange-soft);color:#a85410}
.past-card .mo{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--green-deep);text-transform:uppercase}
.past-card h4{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;margin-bottom:9px;line-height:1.15}
.past-card .att{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft)}
.past-card .att svg{width:16px;height:16px;color:var(--ink-soft)}
.past-links{display:flex;gap:16px;margin-top:auto;padding-top:16px;border-top:0}
.photo-strip{width:100vw;margin-left:calc(50% - 50vw);margin-top:6px;margin-bottom:6px}
/* In page content the strip is an alignfull block: WordPress's constrained
layout would otherwise cap it at the 1480px content width (with !important
margins that beat the 100vw bleed above). Full-width blocks only need to
cancel the root padding. */
.photo-strip.alignfull{width:auto;max-width:none;margin-top:0;margin-bottom:0;margin-left:calc(var(--wp--style--root--padding-left,0px) * -1) !important;margin-right:calc(var(--wp--style--root--padding-right,0px) * -1) !important}
.strip-row{display:flex;gap:0;height:clamp(210px,26vw,340px)}
.strip-img{flex:1 1 0;overflow:hidden;position:relative}
.strip-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.strip-img:hover img{transform:scale(1.06)}
@media(max-width:760px){.strip-row{height:190px}.strip-img:nth-child(n+4){display:none}}
.res-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.res-grid .res-card{flex:0 1 340px}
.res-thumb{position:relative;aspect-ratio:16/10;background:var(--bg-soft);display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
/* Contain (not crop) — these images carry text — inside a 20px frame; the soft
brand tint shows through the letterbox. Absolute box so contain is reliable. */
.res-thumb img{position:absolute;inset:20px;width:calc(100% - 40px);height:calc(100% - 40px);object-fit:contain}
.res-card .res-thumb:has(img){background:linear-gradient(150deg,var(--green-soft),#fff)}
/* ---- Resources page refinements ---- */
/* Featured image: contain it (it has text) on the dark panel, framed by 32px. */
.feat .img img{position:absolute;inset:32px;width:calc(100% - 64px);height:calc(100% - 64px);object-fit:contain}
/* Card eyebrow (Toolkit/Guide/…) is a
, so .res-card p was overriding it to
15px/ink — restore the mockup's small orange label. */
.res-card p.res-type{font-size:11.5px;color:var(--orange)}
/* Tighten the gap between a card's title and its description (WP injects 24px). */
.res-body h3 + p{margin-top:0}
/* Featured CTA: WordPress injects a 24px top margin on the 2nd flow child (the
scorecard link); zero it so the button and link center on each other. */
.feat .feat-cta > *{margin-block:0}
.cinfo .csoc-wrap .lab{margin-bottom:10px}
.csoc{display:flex;gap:12px;flex-wrap:wrap}
.csoc a{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid var(--line);border-radius:12px;color:var(--ink);font-weight:600;font-size:14.5px;transition:.2s}
.csoc a:hover{border-color:var(--green);color:var(--green-deep);background:var(--green-soft)}
.tier-row.bizpartner .t-chip i:nth-child(1),.tier-row.bizpartner .t-chip i:nth-child(4){background:var(--green)}
.tier-row.bizpartner .t-chip i:nth-child(2),.tier-row.bizpartner .t-chip i:nth-child(3){background:var(--orange)}
.tier-row.startup .t-chip i:nth-child(1),.tier-row.startup .t-chip i:nth-child(4){background:var(--orange)}
.tier-row.startup .t-chip i:nth-child(2),.tier-row.startup .t-chip i:nth-child(3){background:var(--green)}
/* Only the become-a-member pricing cards (.tiers > .tier) use the 3-col grid;
the members sponsor tiers (.tiers > .tier-row) keep the flex column above. */
.tiers:has(> .tier){display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.tier{position:relative;border:1px solid var(--line);border-radius:20px;background:#fff;padding:42px 34px 34px;box-shadow:0 28px 56px -42px rgba(10,15,12,.32);display:flex;flex-direction:column;transition:.25s}
.tier:hover{transform:translateY(-6px);box-shadow:0 50px 80px -46px rgba(10,15,12,.4)}
.tier::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;border-radius:20px 20px 0 0;background:var(--green)}
.tier.feat::before{background:var(--orange)}
.tier.feat{border-color:rgba(255,122,20,.4)}
.tier .tag-pop{position:absolute;top:18px;right:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#a85410;background:var(--orange-soft);padding:5px 10px;border-radius:7px}
.tier .tname{font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:-.02em}
.tier .tfor{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-top:7px}
.tier ul{list-style:none;margin:22px 0 28px;flex:1}
.tier li{display:flex;gap:11px;align-items:flex-start;padding:13px 0;border-top:1px solid rgba(10,15,12,.07)}
.tier li:first-child{border-top:none}
.tier li svg{flex:0 0 18px;margin-top:3px}
.tier li b{font-weight:600;font-size:15px}
.tier li span{color:var(--ink-soft);display:block;font-size:13.5px;margin-top:3px;line-height:1.5}
.tier .btn{justify-content:center;width:100%}
@media(max-width:980px){.tiers:has(> .tier){grid-template-columns:1fr;max-width:520px;margin:0 auto}}
/* ============================================================
WordPress block-editor integration
Maps core blocks onto the BBA design system so the mockup
renders identically whether authored in the editor or here.
============================================================ */
/* Header/footer template parts render as /