/* Page-level refinements, loaded after site.css on every page. */
/* Photos: one calm, consistent frame so pages never scroll more than they need to */
.photo img{aspect-ratio:16/9;object-fit:cover}
.photo.wide img{aspect-ratio:3/1}
/* Board of Advisors: small, simple portraits */
.grid.people.advisors{gap:28px 24px}
.grid.people.advisors .person img{max-width:96px;border-radius:50%;background:var(--line)}
.grid.people.advisors .person h3{font-size:17px}
/* Chapter leaders: compact, tinted */
.grid.people.leaders{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:28px 20px}
.grid.people.leaders .person img{max-width:96px;border-radius:50%;filter:grayscale(1) contrast(1.03) sepia(.5) hue-rotate(228deg) saturate(1.2)}
.grid.people.leaders .person h3{font-size:17px}
@media (max-width:640px){.grid.people.leaders{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.people.advisors .person img{max-width:84px}.photo.wide img{aspect-ratio:2/1}}
/* Keep the desktop nav on one line between the collapse point and wide screens */
.nav a{white-space:nowrap}
@media (min-width:981px) and (max-width:1200px){.nav{gap:0}.nav a{padding:0 8px;font-size:14.5px}}
@media (min-width:981px) and (max-width:1080px){.nav a{padding:0 6px;font-size:13.5px}.nav a.btn{padding:0 12px}}

/* The "Which city?" box shows only when "Other" is chosen */
[data-city-other][hidden]{display:none !important}

/* ---------- Bringing the site to life: colour, motion, interaction ---------- */
.site-head{transition:box-shadow .25s ease}
.site-head.is-scrolled{box-shadow:0 6px 24px rgba(36,23,38,.08)}
/* Each pillar page opens in its own colour, as in the deck */
[data-pillar="community"]{--pillar:var(--ppi);--pillar-wash:var(--lav-wash)}
[data-pillar="capacity"]{--pillar:var(--teal);--pillar-wash:var(--teal-wash)}
[data-pillar="consulting"]{--pillar:var(--navy);--pillar-wash:var(--navy-wash)}
[data-pillar="about"]{--pillar:var(--gold);--pillar-wash:var(--gold-wash)}
[data-pillar] .page-hero{position:relative;background:linear-gradient(180deg,var(--pillar-wash) 0%,var(--paper) 100%);border-bottom:0;padding-bottom:clamp(48px,5.5vw,72px)}
[data-pillar] .page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:repeating-linear-gradient(90deg,var(--ppi) 0 56px,var(--teal) 56px 112px,var(--gold-bright) 112px 168px)}
[data-pillar] .page-hero .eyebrow,[data-pillar] .page-hero .eyebrow a{color:var(--pillar)}
/* A small accent line before each section label */
.sec-head .eyebrow::before{content:"";display:inline-block;width:20px;height:2px;background:currentColor;vertical-align:middle;margin-right:10px;transform:translateY(-2px)}
/* Cards respond to the pointer */
.card{transition:border-color .2s ease,transform .25s ease,box-shadow .25s ease}
a.card:hover,a.card:focus-visible{transform:translateY(-3px);box-shadow:0 14px 30px rgba(36,23,38,.10)}
div.card:hover{box-shadow:0 10px 24px rgba(36,23,38,.07)}
/* Photos sit in the brand duotone and come to full colour on hover */
.photo img{border-radius:var(--r);transition:filter .6s ease}
.photo:hover img{filter:none}
/* Testimonials */
.quote{position:relative;padding-top:44px;transition:transform .25s ease,box-shadow .25s ease}
.quote::before{content:"\201C";position:absolute;top:8px;left:22px;font:700 58px/1 var(--serif);color:var(--gold-bright)}
.quote:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(36,23,38,.08)}
/* Buttons and links */
.btn{transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(36,23,38,.14)}
main p a:not(.btn){text-decoration-thickness:1.5px;text-underline-offset:3px}
.facts .n{font-variant-numeric:tabular-nums}
/* Content rises gently into view (only when scripts run) */
.js-reveal .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js-reveal .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-reveal .rv{opacity:1;transform:none;transition:none}
  .card,.btn,.quote,.photo img,.site-head{transition:none}
  a.card:hover,a.card:focus-visible,.quote:hover,.btn:hover{transform:none}
}
/* Figures: numbers line up even when a label wraps to two lines */
.facts li{display:flex;flex-direction:column;justify-content:space-between}
/* The report cover stays a comfortable size on phones */
@media (max-width:640px){#spi-2026 > img{max-width:240px;margin:8px auto 0;display:block}}