/* ============================================================
SIPI v10 — Components
Extracted from docs/v2-source-of-truth/sipi_v10_mock.html (Task A2)
Nav, buttons, flip-card, TAO/two-col swipe reveals, Grand Challenges
cards, Leverage Points cards, sidebar overlay, event modal, consort
marquee, testimonials, PROSPER accordion, support form, engagement
tabs/forms, events, insights, stages, footer.
Selectors preserved exactly as in mock (no renames).
============================================================ */
/* --- Buttons --- */
.btn-p{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;background:var(--navy);color:#fff;font-size:13px;font-weight:500;letter-spacing:.04em;border:1px solid var(--navy);transition:background .25s ease,border-color .25s ease;border-radius:var(--r)}
.btn-p:hover{background:var(--teal-dark);border-color:var(--teal-dark)}
.btn-o{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;background:transparent;color:#fff;font-size:13px;font-weight:500;letter-spacing:.04em;border:1px solid rgba(255,255,255,.45);transition:background .25s ease,border-color .25s ease;border-radius:var(--r)}
.btn-o:hover{background:rgba(255,255,255,.08);border-color:#fff}
/* .btn-o--dark: outline button styled for placement on a LIGHT
* background (e.g. /about/ jump-link nav). Uses --navy text + a
* mid-grey border instead of the white-on-dark base. */
.btn-o--dark{color:var(--navy);border-color:var(--border);text-decoration:none}
.btn-o--dark:hover{background:var(--off);border-color:var(--gold-text);color:var(--gold-text)}
.btn-o--dark:focus-visible{outline:2px solid var(--gold-text);outline-offset:2px}
/* a11y: --gold-text bg gives ~4.9 contrast against white text vs --gold's
* 2.79 (fails AA). Same hue, slightly darker. Hover state untouched. */
.btn-t{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;background:var(--gold-text);color:#fff;font-size:13px;font-weight:500;letter-spacing:.04em;border:1px solid var(--gold-text);transition:background .25s ease;border-radius:var(--r)}
.btn-t:hover{background:var(--teal-dark);border-color:var(--teal-dark)}
.btn-lnk{font-size:13px;color:var(--gold-text);font-weight:500;letter-spacing:.02em;border-bottom:1px solid var(--gold-text);padding-bottom:2px;transition:color .2s ease,border-color .2s ease;cursor:pointer}
.btn-lnk:hover{color:var(--teal-dark);border-color:var(--teal-dark)}
/* --- Nav (header bar, logo, links, dropdown, CTAs) --- */
.nav{position:fixed;top:0;left:0;right:0;z-index:1001;height:72px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--border)}
/* Desktop-only backdrop-filter. CRITICAL: must NOT apply on mobile —
backdrop-filter creates a CSS containing block that traps the
.nav-links drawer's position:fixed to .nav's 72px-tall box instead
of the viewport. v1.0.36 had this override in layouts.css but lost
the cascade because components.css loads later at the same selector
specificity. v1.0.37 gates the rule directly here so the load-order
between layouts.css and components.css can no longer reintroduce
the regression. */
@media (min-width:861px){
.nav{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}
.nav-inner{max-width:var(--con);margin:0 auto;padding:0 var(--gut);height:100%;display:flex;align-items:center;gap:36px}
.logo{display:flex;align-items:center;gap:12px;cursor:pointer;text-decoration:none}
/* Canonical SIPI medallion. The PNG already contains the wordmark; render
at a slightly larger size than the legacy text-mark so the curved
"SWISS IMPACT & PROSPERITY · INITIATIVE" text is legible. */
.logo-img,.logo .custom-logo{
display:block;height:48px;width:auto;max-width:none;
transition:transform .25s ease;
}
.logo:hover .logo-img,.logo:hover .custom-logo{transform:scale(1.04)}
@media (max-width:560px){.logo-img,.logo .custom-logo{height:42px}}
/* Legacy text-fallback rules retained for the rare case the PNG fails to
load — graceful degradation only, normally hidden by .logo-img above. */
.logo-mark{width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-family:var(--ff-display);font-size:18px;font-weight:500;letter-spacing:.04em}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-name{font-family:var(--ff-display);font-size:18px;font-weight:500;color:var(--heading);letter-spacing:.02em}
.logo-sub{font-size:9.5px;font-weight:500;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;margin-top:2px}
/* Desktop-only inline nav row. CRITICAL same as .nav backdrop-filter
(v1.0.37): unconditional display:flex here was overriding the
layouts.css mobile drawer rule (display:none) due to cascade order
(components.css loads after layouts.css at same specificity). The
drawer was always visible regardless of .open class, hiding the bug
for 5 audit iterations. v1.0.38 gates this rule to desktop only. */
@media (min-width:861px){
.nav-links{display:flex;align-items:center;gap:32px;margin-left:auto}
}
.nl{position:relative;font-size:13px;font-weight:500;color:var(--text);cursor:pointer;letter-spacing:.01em;padding:8px 0;transition:color .2s ease}
.nl:hover{color:var(--gold-text)}
/* Caret indicator on dropdown nav items — replaced 2026-05-05 (theme
1.0.85) per Anjali "icon should be clearer". Was a CSS-rendered ›
character at 14px rotated 90deg (visually muddy on small screens);
now an inline SVG chevron rendered via background-image so we get a
crisp scalable glyph that respects --gold color and animates cleanly
on hover. Stroke colour hardcoded as %23B8973E (= var(--gold)) inside
the data URI because background-image can't read CSS variables — if
we ever change the gold token we'd need to update both places. */
.nl-drop::after {
content: "";
display: inline-block;
width: 12px;
height: 8px;
margin-left: 8px;
vertical-align: middle;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
transform: translateY(-1px);
transition: transform .25s ease;
}
.nl-drop:hover::after,
.nl-drop.on::after,
.nl-drop:focus-within::after {
transform: translateY(-1px) rotate(180deg);
}
.dd{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-md);min-width:280px;max-height:min(70vh, 480px);overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease;border-radius:var(--r);z-index:90}
/* 2026-05-19 — Anjali docx General tab nav rule: "Update navigation
* dropdown behavior so users can scroll inside the dropdown immediately
* on hover/open. Keep the dropdown open while the cursor is inside the
* dropdown area." Previously the 14px gap between trigger and panel
* (top:calc(100%+14px)) broke hover when the cursor moved through it,
* collapsing the dropdown. The transparent ::before bridge below
* extends the panel's hit area up into that gap so hover stays active. */
.dd::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;background:transparent}
/* Hover, click-toggle (.on, set by nav.js for touch), and keyboard
focus (:focus-within) all open the dropdown. Together this satisfies
Anjali's 2026-05-05 ask "click through drop-down menu items without
first clicking on the menu items" while staying WCAG-compliant for
keyboard users — they Tab to the parent, dropdown opens, Tab again
into the child items. */
.nl-drop:hover .dd,
.nl-drop.on .dd,
.nl-drop:focus-within .dd {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.ddi{display:block;padding:16px 22px;font-size:13.5px;font-weight:500;color:var(--text);border-bottom:1px solid var(--border);transition:background .15s ease,color .2s ease;cursor:pointer}
.ddi:last-child{border-bottom:0}
.ddi:hover{background:var(--off);color:var(--gold-text)}
.ddi-sub{display:block;font-size:11px;font-weight:300;color:var(--muted);margin-top:3px;letter-spacing:0;text-transform:none}
.nav-ctas{display:flex;align-items:center;gap:14px;margin-left:24px}
.nav-cta-ghost{padding:9px 18px;font-size:12.5px;font-weight:500;color:var(--text);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:border-color .2s ease,color .2s ease}
.nav-cta-ghost:hover{border-color:var(--gold-text);color:var(--gold-text)}
.nav-cta{padding:9px 18px;font-size:12.5px;font-weight:500;color:#fff;background:var(--navy);border:1px solid var(--navy);border-radius:var(--r);cursor:pointer;transition:background .2s ease,border-color .2s ease}
.nav-cta:hover{background:var(--teal-dark);border-color:var(--teal-dark)}
/* --- Flip card (home hero trio) --- */
.flip-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-top:48px}
.flip-card{height:420px;perspective:1400px;cursor:pointer;background:#fff}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
/* Flip trigger split 2026-05-08 (theme 1.0.96) per Anjali "On mobile
devices, the cards don't flip back". The single :hover rule below
was firing on touch devices too because :hover sticks after a tap on
touch — once the user tapped a card, the :hover state persisted +
the JS click toggled .flipped, and re-tapping removed .flipped but
:hover kept the rotation, so the card couldn't unflip on mobile.
Solution: scope :hover-flip to mouse-pointer devices only via
`(hover: hover) and (pointer: fine)`. Touch devices now rely
exclusively on the .flipped class toggled by flip-cards.js, which
toggles cleanly both ways. */
@media (hover: hover) and (pointer: fine) {
.flip-card:hover .flip-inner{transform:rotateY(180deg)}
}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-front,.flip-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column}
.flip-front{background:#fff}
.flip-front-img{flex:1;background-size:cover;background-position:center;position:relative;border-bottom:2px solid var(--gold)}
.flip-front-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.55))}
.flip-front-cap{position:absolute;bottom:24px;left:24px;right:24px;color:#fff;z-index:2}
.flip-front-cap .lbl{color:rgba(255,255,255,.78)}
.flip-front-cap h3{font-family:var(--ff-display);font-size:28px;font-weight:300;line-height:1.2;color:#fff}
.flip-front-foot{padding:18px 24px;background:#fff;display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
/* "Tap to flip" indicator — U+293F (curved-loop arrow). The deployed version
* was mojibake'd to ⤿ (3 garbage chars) at some point during the editor /
* file-transfer pipeline; restored to the canonical character matching the
* v10 source-of-truth (docs/v2-source-of-truth/sipi_v10_mock.html). */
.flip-front-foot::after{content:"⤿";color:var(--gold-text);font-size:16px}
.flip-back{transform:rotateY(180deg);background:var(--off);padding:42px 32px;justify-content:center}
.flip-back .lbl{color:var(--gold)}
.flip-back h3{font-family:var(--ff-display);font-size:24px;font-weight:300;color:var(--heading);margin-bottom:18px}
.flip-back p{font-size:15.5px;line-height:1.7;color:var(--text);margin-bottom:24px;font-weight:300}
/* --- TAO swipe-over (3-cell slide-up reveal) --- */
.tao-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-top:48px}
.tao-cell{position:relative;height:380px;background:#fff;overflow:hidden;cursor:pointer}
.tao-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s cubic-bezier(.4,.2,.2,1)}
.tao-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,28,44,.65))}
.tao-cap{position:absolute;left:28px;right:28px;bottom:28px;color:#fff;z-index:2}
.tao-cap .num{font-family:var(--ff-display);font-size:64px;font-weight:300;line-height:1;color:rgba(255,255,255,.32);margin-bottom:4px}
.tao-cap h3{font-family:var(--ff-display);font-size:28px;font-weight:400;color:#fff}
.tao-overlay{position:absolute;inset:0;background:var(--navy);color:#fff;padding:36px 32px;display:flex;flex-direction:column;justify-content:center;transform:translateY(100%);transition:transform .5s cubic-bezier(.4,.2,.2,1);z-index:3}
.tao-cell:hover .tao-overlay{transform:translateY(0)}
.tao-overlay .lbl{color:var(--gold-pale)}
.tao-overlay h4{font-family:var(--ff-display);font-size:24px;font-weight:300;margin:6px 0 14px;color:#fff}
.tao-overlay p{font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.78);font-weight:300}
/* --- Two-column swipe-over --- */
.tc-row{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);margin-top:48px}
.tc-cell{position:relative;height:480px;overflow:hidden;cursor:pointer;background:#fff}
.tc-img{position:absolute;inset:0;background-size:cover;background-position:center}
.tc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,28,44,.10) 0%,rgba(5,28,44,.85) 100%)}
.tc-cap{position:absolute;left:36px;right:36px;bottom:40px;color:#fff;z-index:2}
.tc-cap .lbl{color:var(--gold-pale)}
.tc-cap h3{font-family:var(--ff-display);font-size:36px;font-weight:300;color:#fff;line-height:1.18;margin:8px 0}
.tc-cap p{font-size:15.5px;color:rgba(255,255,255,.78);max-width:420px;font-weight:300;line-height:1.7}
.tc-overlay{position:absolute;inset:0;background:rgba(8,80,65,.96);color:#fff;padding:48px 40px;display:flex;flex-direction:column;justify-content:center;transform:translateX(-100%);transition:transform .55s cubic-bezier(.4,.2,.2,1);z-index:3}
.tc-cell:hover .tc-overlay{transform:translateX(0)}
.tc-overlay .lbl{color:var(--gold-pale)}
.tc-overlay h4{font-family:var(--ff-display);font-size:30px;font-weight:300;margin:8px 0 18px;color:#fff;line-height:1.2}
.tc-overlay p{font-size:16px;line-height:1.7;color:rgba(255,255,255,.85);font-weight:300;margin-bottom:24px;max-width:480px}
/* --- Grand Challenges cards --- */
.gc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-top:32px}
.gc-card{position:relative;height:520px;background:#fff;cursor:pointer;overflow:hidden;display:flex;flex-direction:column}
.gc-img{height:280px;background-size:cover;background-position:center;position:relative;border-bottom:3px solid}
.gc-card[data-domain="health"] .gc-img{border-bottom-color:var(--health)}
.gc-card[data-domain="food"] .gc-img{border-bottom-color:var(--food)}
.gc-card[data-domain="circ"] .gc-img{border-bottom-color:var(--circ)}
.gc-body{padding:32px 30px;flex:1;display:flex;flex-direction:column}
.gc-body .lbl{margin-bottom:8px;color:var(--muted)}
.gc-card[data-domain="health"] .gc-body .lbl{color:var(--health)}
.gc-card[data-domain="food"] .gc-body .lbl{color:var(--food)}
.gc-card[data-domain="circ"] .gc-body .lbl{color:var(--circ)}
.gc-body h3{font-family:var(--ff-display);font-size:26px;font-weight:300;line-height:1.22;color:var(--heading);margin-bottom:14px}
.gc-body p{font-size:15.5px;line-height:1.7;color:var(--muted);font-weight:300;flex:1}
.gc-foot{margin-top:18px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-text);display:flex;align-items:center;gap:8px;transition:gap .25s ease}
.gc-card:hover .gc-foot{gap:14px}
.gc-foot::after{content:"›";font-size:18px}
/* --- Leverage Points cards --- */
.lp-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);margin-top:32px}
.lp-card{position:relative;height:340px;background:#fff;cursor:pointer;overflow:hidden;display:flex;flex-direction:column}
.lp-img{height:140px;background:linear-gradient(135deg,var(--navy2),var(--teal-dark));position:relative}
.lp-img::before{content:attr(data-letter);position:absolute;left:24px;bottom:14px;font-family:var(--ff-display);font-size:54px;font-weight:300;color:var(--gold-pale);opacity:.7;line-height:1}
.lp-body{padding:24px 24px 28px;flex:1;display:flex;flex-direction:column}
.lp-body .lbl{margin-bottom:8px}
.lp-body h3{font-family:var(--ff-display);font-size:22px;font-weight:300;color:var(--heading);margin-bottom:12px;line-height:1.25}
.lp-body p{font-size:15px;line-height:1.7;color:var(--muted);font-weight:300;flex:1}
.lp-foot{margin-top:16px;font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-text)}
/* --- Sidebar overlay (Grand Challenges + Leverage Points detail) --- */
.sb-overlay{position:fixed;inset:0;background:rgba(5,28,44,.42);z-index:200;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
.sb-overlay.open{opacity:1;visibility:visible}
.sb-panel{position:fixed;top:0;right:0;width:min(640px,92vw);height:100vh;background:#fff;z-index:210;transform:translateX(100%);transition:transform .45s cubic-bezier(.4,.2,.2,1);overflow-y:auto}
.sb-overlay.open .sb-panel{transform:translateX(0)}
.sb-head{padding:32px 40px 24px;border-bottom:1px solid var(--border);position:sticky;top:0;background:#fff;z-index:5;display:flex;justify-content:space-between;align-items:flex-start}
.sb-head-text .lbl{margin-bottom:8px;color:var(--gold)}
.sb-head-text h3{font-family:var(--ff-display);font-size:32px;font-weight:300;color:var(--heading);line-height:1.15}
.sb-close{font-size:24px;color:var(--muted);width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--border);border-radius:var(--r);transition:border-color .2s ease,color .2s ease}
.sb-close:hover{border-color:var(--gold);color:var(--gold)}
.sb-body{padding:32px 40px 56px}
.sb-body p.lead-text{font-size:16px;color:var(--muted);margin-bottom:32px}
.sb-body .sub-h{font-family:var(--ff-display);font-size:18px;font-weight:500;color:var(--heading);margin:32px 0 14px;letter-spacing:0}
.sb-body ul{list-style:none;padding:0;margin:0}
.sb-body ul li{padding:12px 0;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text);display:flex;justify-content:space-between;align-items:center;font-weight:300}
.sb-body ul li:last-child{border-bottom:0}
.sb-body ul li span{font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.sb-actions{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}
/* --- Event modal --- */
.modal-overlay{position:fixed;inset:0;background:rgba(5,28,44,.55);z-index:200;display:none;align-items:center;justify-content:center;padding:48px}
.modal-overlay.open{display:flex}
.modal{background:#fff;max-width:640px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-lg);position:relative}
.modal-img{height:240px;background-size:cover;background-position:center;background-color:var(--navy)}
.modal-body{padding:36px 40px}
.modal-body .lbl{color:var(--gold);margin-bottom:8px}
.modal-body h3{font-family:var(--ff-display);font-size:30px;font-weight:300;color:var(--heading);margin-bottom:16px;line-height:1.2}
.modal-meta{display:flex;gap:24px;padding:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:24px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.modal-meta strong{color:var(--text);font-weight:500}
.modal-body p{font-size:16px;line-height:1.7;color:var(--text);font-weight:300;margin-bottom:20px}
.modal-close{position:absolute;top:18px;right:18px;width:36px;height:36px;display:grid;place-items:center;background:rgba(255,255,255,.92);font-size:22px;color:var(--text);border-radius:var(--r);box-shadow:var(--shadow-sm);z-index:3}
.modal-close:hover{background:var(--gold);color:#fff}
/* --- Consortium / partner-logo strip (marquee) --- */
.consort-strip{margin-top:48px;display:flex;flex-wrap:wrap;gap:1px;background:var(--border);align-items:stretch}
.consort-cell{flex:1 1 calc(20% - 1px);min-width:170px;height:88px;background:#fff;display:grid;place-items:center;padding:16px 20px;font-family:var(--ff-display);font-size:14px;font-weight:500;color:var(--muted);text-align:center;letter-spacing:.02em;transition:background .2s ease,color .2s ease}
.consort-cell:hover{background:var(--off);color:var(--heading)}
/* --- Testimonials row --- */
.test-row{display:flex;gap:1px;background:var(--border);overflow-x:auto;margin-top:48px;scroll-snap-type:x mandatory;scrollbar-width:none}
.test-row::-webkit-scrollbar{display:none}
.test-card{flex:0 0 min(440px,86vw);background:#fff;padding:42px 36px;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between}
.test-quote{font-family:var(--ff-display);font-size:21px;font-weight:300;line-height:1.45;color:var(--heading);margin-bottom:24px;font-style:italic}
.test-quote::before{content:"“";color:var(--gold);font-size:48px;line-height:0;display:block;margin-bottom:8px;font-family:var(--ff-display)}
.test-attr{padding-top:20px;border-top:1px solid var(--border)}
.test-attr-name{font-size:13.5px;font-weight:500;color:var(--text);margin-bottom:2px}
.test-attr-role{font-size:11.5px;color:var(--muted);letter-spacing:.04em}
/* --- Final CTA band --- */
.fcta{padding:clamp(80px,10vw,140px) 0;background:var(--navy);color:#fff;text-align:center}
.fcta h2{font-family:var(--ff-display);font-size:clamp(36px,5vw,60px);font-weight:300;color:#fff;line-height:1.15;margin-bottom:24px;max-width:880px;margin-left:auto;margin-right:auto}
.fcta p{font-size:17px;color:rgba(255,255,255,.7);max-width:560px;margin:0 auto 40px;font-weight:300}
.fcta-actions{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center}
/* --- PROSPER accordion --- */
.acc{margin-top:48px;border-top:1px solid var(--border)}
.acc-item{border-bottom:1px solid var(--border)}
.acc-trigger{padding:28px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;transition:padding .25s ease}
.acc-trigger:hover{padding-left:8px}
.acc-trigger-text .lbl{color:var(--gold-text);margin-bottom:6px;font-size:10px}
.acc-trigger-text h3{font-family:var(--ff-display);font-size:24px;font-weight:300;color:var(--heading);margin-bottom:6px;line-height:1.25}
.acc-trigger-text p{font-size:13.5px;color:var(--muted);font-weight:300}
.acc-chev{font-size:22px;color:var(--gold);transition:transform .3s ease;flex-shrink:0;width:24px;text-align:center}
.acc-item.open .acc-chev{transform:rotate(45deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .4s ease}
.acc-item.open .acc-body{max-height:6000px} /* v1.0.49: bumped from 1400 — Wave 6B added 3 expandable indicator cards that can push fully-open pillars past 2000px */
.acc-body-inner{padding:0 0 36px;display:grid;grid-template-columns:1.4fr 1fr;gap:48px}
.acc-body-inner .col-h{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);margin-bottom:12px}
.acc-body-inner p{font-size:16px;line-height:1.7;color:var(--text);font-weight:300;margin-bottom:18px}
.acc-body-inner ul{list-style:none}
.acc-body-inner ul li{padding:8px 0;font-size:13px;color:var(--text);border-bottom:1px solid var(--border);font-weight:300}
.acc-body-inner ul li:last-child{border-bottom:0}
/* --- Support form (donation) --- */
.support-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:start;margin-top:48px}
.support-form{background:var(--off);padding:48px 40px;border-top:3px solid var(--gold)}
.support-form .lbl{margin-bottom:8px}
.support-form h3{font-family:var(--ff-display);font-size:26px;font-weight:300;color:var(--heading);margin-bottom:28px}
.cycle-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);margin-bottom:28px}
.cycle-opt{background:#fff;padding:14px 8px;text-align:center;font-size:12.5px;font-weight:500;color:var(--text);cursor:pointer;letter-spacing:.04em;transition:background .2s ease,color .2s ease}
.cycle-opt.on{background:var(--navy);color:#fff}
.cycle-opt:not(.on):hover{background:var(--off2)}
.amt-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);margin-bottom:28px}
.amt-opt{background:#fff;padding:18px 8px;text-align:center;font-family:var(--ff-display);font-size:18px;font-weight:400;color:var(--text);cursor:pointer;transition:background .2s ease,color .2s ease}
.amt-opt.on{background:var(--gold);color:#fff}
.amt-opt:not(.on):hover{background:var(--off2)}
.amt-custom{display:flex;align-items:center;gap:0;border:1px solid var(--border);margin-bottom:28px}
.amt-custom-prefix{padding:14px 16px;background:var(--off);font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.06em}
.amt-custom input{flex:1;border:0;padding:14px 16px;font-size:15px;color:var(--text);font-family:var(--ff-body);outline:none;background:#fff}
.support-min{font-size:11px;color:var(--muted);margin-bottom:24px;letter-spacing:.04em}
.support-actions{display:flex;gap:12px;flex-wrap:wrap}
.support-side h3.h3{margin-bottom:18px}
.support-side p{font-size:16px;line-height:1.7;color:var(--muted);font-weight:300;margin-bottom:18px}
.support-side .lbl{margin-top:32px}
/* --- Tabs (Join / Engage) --- */
.tabs-bar{display:flex;gap:0;border-bottom:1px solid var(--border);margin-top:48px;flex-wrap:wrap}
.tab{padding:18px 28px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;letter-spacing:.04em;transition:color .2s ease,border-color .2s ease}
.tab.on{color:var(--gold-text);border-bottom-color:var(--gold-text)}
.tab:hover:not(.on){color:var(--text)}
.tab-panel{display:none;padding:48px 0}
.tab-panel.on{display:block}
/* --- Benefit row (Join tabs) --- */
.benefit-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-bottom:48px}
.ben-card{background:#fff;padding:36px 28px;display:flex;flex-direction:column;cursor:pointer;transition:background .2s ease}
.ben-card:hover{background:var(--off)}
.ben-card .lbl{color:var(--gold-text);margin-bottom:8px}
.ben-card h4{font-family:var(--ff-display);font-size:22px;font-weight:300;color:var(--heading);margin-bottom:14px;line-height:1.25}
.ben-card p{font-size:15.5px;line-height:1.7;color:var(--muted);font-weight:300;flex:1}
/* --- Engagement form (generic form elements) --- */
.engage-form{background:var(--off);padding:48px 40px;border-top:3px solid var(--gold);max-width:720px}
.fg{margin-bottom:20px}
.fl{display:block;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.fi,.fsel,.fta{width:100%;padding:13px 16px;border:1px solid var(--border);background:#fff;font-size:14px;color:var(--text);font-family:var(--ff-body);font-weight:300;outline:none;border-radius:var(--r);transition:border-color .2s ease}
.fi:focus,.fsel:focus,.fta:focus{border-color:var(--gold)}
.fta{min-height:96px;resize:vertical}
.fsub{padding:14px 32px;background:var(--navy);color:#fff;font-size:13px;font-weight:500;letter-spacing:.04em;border:0;border-radius:var(--r);cursor:pointer;transition:background .2s ease;margin-top:8px}
.fsub:hover{background:var(--teal-dark)}
/* --- Events page filters + cards --- */
.event-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:48px;margin-bottom:32px}
.ef-pill{padding:8px 18px;border:1px solid var(--border);background:transparent;font-family:inherit;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;border-radius:var(--r);transition:border-color .2s ease,color .2s ease}
.ef-pill:hover,.ef-pill.on,.ef-pill[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.ef-pill:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* Filter-pills.js: cards filtered out get [hidden] which we soften with a fade. */
.ins-card[hidden],.event-card[hidden]{display:none !important}
.ins-card,.event-card{transition:opacity .15s ease}
/* Event flip-card layout — refactored 2026-05-05 (theme 1.0.91) per
Anjali: front face shows image + tags + date + title + location
(at-a-glance), back face shows description + Read-more link
(full detail on flip). Inherits the .flip-card / .flip-inner /
.flip-front / .flip-back base CSS (lines ~120-145) for the 3D
transform. Gap bumped from 1px → 28px so cards have visible
breathing room ("less cluttered" per Anjali). */
.event-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;background:transparent;margin-top:24px}
/* The .event-card variant lives on top of .flip-card so all flip
mechanics (rotateY, backface-visibility, .flipped toggle, hover
trigger, keyboard) work unchanged. We only override the height
default (was 420px) — events have more body content so we go
taller. */
.event-card.flip-card{height:480px;background:#fff;border-radius:var(--r);box-shadow:0 1px 4px rgba(0,0,0,.06);overflow:hidden}
/* Front face — image fills top region (flex:1 on .flip-front-img),
meta info fills bottom region (date / title / location). */
.event-card .flip-front{background:#fff}
.event-card .flip-front-img{flex:0 0 200px;background-size:cover;background-position:center;background-color:var(--navy);position:relative;border-bottom:0}
/* Suppress the default .flip-front-img::after gradient overlay since
we want the tag chips legible at the top of the image, not faded
at the bottom. */
.event-card .flip-front-img::after{content:none}
/* `backface-visibility: hidden` added 2026-05-08 (theme 1.0.96) per
Anjali "tags appear on the flip side, mirrored". The .event-tags
container is `position: absolute` inside `.flip-front-img` so its
own stacking context can break the parent's backface-hide on some
browsers (Safari especially), causing the tag chips to render
mirrored on the back face during/after the flip. Setting
backface-visibility on the tags directly forces them to honour the
3D backface culling regardless of stacking context. */
.event-tags{position:absolute;top:14px;left:14px;right:14px;display:flex;flex-wrap:wrap;gap:6px;z-index:2;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.event-tag{background:rgba(255,255,255,.95);padding:5px 11px;font-size:10.5px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;color:var(--gold-text);border-radius:var(--r);line-height:1.2}
.event-tag--year{background:var(--gold-text);color:#fff}
.event-body{padding:22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.event-date{font-size:11.5px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;color:var(--muted)}
/* Title font size bumped 18 → 21px and back-face title 18 → 21px,
back-face desc 13.5 → 15px on 2026-05-08 (theme 1.0.96) per Anjali
"for readability, the title and body fonts could be increased". */
.event-title{font-family:var(--ff-display);font-size:21px;font-weight:500;color:var(--heading);margin:0;line-height:1.3}
.event-loc{font-size:12.5px;color:var(--muted);font-weight:300}
/* Back face — navy bg, white text, full description + Read-more.
Reuses the .flip-back base inset:0 positioning. The dark gradient
overlay logic that .flip-back[style*="background-image"] applies
does NOT apply here because we have no background-image on the
back — solid navy fill, white type.
Specificity is bumped to `.event-card .flip-back .X` (0,3,0) on the
inner-element rules so they beat the generic `.flip-back h3`
(0,1,1) and `.flip-back p` (0,1,1) base rules — those set
color: var(--heading) / var(--text) which would render as
near-black-on-navy (= invisible). */
.event-card .flip-back{background:var(--navy);color:#fff;padding:28px 26px;display:flex;flex-direction:column;gap:14px;justify-content:flex-start;text-align:left}
.event-card .flip-back .event-back-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.event-card .flip-back .event-back-date{font-size:11.5px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.78)}
/* `h3.event-back-title` and `p.event-back-desc` qualify the selector
with the element type, lifting specificity to (0,3,1) so it beats
the generic .flip-back h3 / .flip-back p (0,1,1) rules unambiguously.
The earlier (0,3,0) attempt should have won by class count alone but
in practice didn't — believed to be a quirk of how WP-Super-Cache or
a plugin re-orders/inlines rules at runtime. The type qualifier is
the safest fix. */
.event-card .flip-back h3.event-back-title{font-family:var(--ff-display);font-size:21px;font-weight:500;color:#fff;margin:0;line-height:1.3}
.event-card .flip-back p.event-back-desc{font-size:15px;line-height:1.65;color:rgba(255,255,255,.92);font-weight:300;margin:0;flex:1}
.event-card .flip-back .event-link--back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:#fff;letter-spacing:.02em;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:2px;text-decoration:none;align-self:flex-start;margin-top:auto;transition:color .2s ease,border-color .2s ease}
.event-card .flip-back .event-link--back:hover,
.event-card .flip-back .event-link--back:focus-visible{color:var(--gold-pale);border-color:var(--gold-pale)}
/* Mobile carousel: events become a horizontal swipe row with snap.
Each card sized to ~85vw so the next one peeks visibly, signalling
scrollability. Carousel container needs to stay overflow-x:auto so
the flip-card 3D transform isn't clipped — but the cards themselves
keep their flip behaviour. */
@media (max-width:860px){
.event-row{display:flex;grid-template-columns:none;gap:14px;background:transparent;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:0 24px 8px;margin:0 -24px;scrollbar-width:none}
.event-row::-webkit-scrollbar{display:none}
.event-card.flip-card{flex:0 0 calc(100vw - 72px);max-width:380px;scroll-snap-align:center;height:460px}
}
/* --- Insights cards (swipe-over variant) --- */
.ins-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-top:48px}
.ins-card{position:relative;height:440px;background:#fff;cursor:pointer;overflow:hidden}
.ins-img{position:absolute;inset:0;background-size:cover;background-position:center;background-color:var(--navy)}
.ins-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.55))}
.ins-meta{position:absolute;left:24px;right:24px;bottom:24px;color:#fff;z-index:2}
.ins-tag{font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-pale);margin-bottom:8px}
.ins-title{font-family:var(--ff-display);font-size:22px;font-weight:300;color:#fff;line-height:1.25}
.ins-overlay{position:absolute;inset:0;background:rgba(8,80,65,.95);color:#fff;padding:36px 28px;transform:translateX(100%);transition:transform .55s cubic-bezier(.4,.2,.2,1);z-index:3;display:flex;flex-direction:column}
.ins-card:hover .ins-overlay{transform:translateX(0)}
.ins-overlay .ins-tag{color:var(--gold-pale);margin-bottom:14px}
.ins-overlay h3{font-family:var(--ff-display);font-size:22px;font-weight:300;color:#fff;margin-bottom:16px;line-height:1.3}
.ins-overlay p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.85);font-weight:300;flex:1;margin-bottom:18px}
.ins-overlay .btn-lnk{color:var(--gold-pale);border-color:var(--gold-pale);align-self:flex-start}
/* --- Stage row (About roadmap, etc.) --- */
.stage-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-top:48px}
.stage-cell{background:#fff;padding:36px 28px;display:flex;flex-direction:column}
.stage-cell .lbl{color:var(--gold-text);margin-bottom:8px}
.stage-cell h4{font-family:var(--ff-display);font-size:22px;font-weight:300;color:var(--heading);margin-bottom:14px;line-height:1.3}
.stage-cell p{font-size:13.5px;line-height:1.75;color:var(--muted);font-weight:300}
/* --- Footer --- */
.foot{background:var(--navy);color:#fff;padding:72px 0 36px}
.foot-inner{max-width:var(--con);margin:0 auto;padding:0 var(--gut)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.foot-brand{font-family:var(--ff-display);font-size:24px;font-weight:300;color:#fff;margin-bottom:16px;letter-spacing:.01em}
.foot p{font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.6);font-weight:300;margin-bottom:20px}
.foot-col-h{font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-pale);margin-bottom:16px}
.foot-col a{display:block;font-size:13px;color:rgba(255,255,255,.78);font-weight:300;padding:6px 0;transition:color .2s ease;cursor:pointer}
.foot-col a:hover{color:var(--gold)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
/* a11y: was rgba(255,255,255,.45) (~3.4 contrast on navy, fails AA for
* normal text). Bumped to .75 (~6.4 contrast) — still visually quiet but
* passes AA cleanly. */
.foot-bottom span{font-size:11.5px;color:rgba(255,255,255,.75);letter-spacing:.04em}
/* Footer responsive — added 2026-05-08 (theme 1.0.96) per Anjali
"Make the footer mobile responsive". Was a fixed 1.4fr-1fr-1fr-1fr
grid that squeezed 4 columns into any viewport width. Now:
- >960px: 4-column desktop (unchanged)
- 640-960px: 2-column tablet (brand top, then 2x2 cols)
- <640px: single-column stack with reduced section padding so the
footer doesn't dominate the mobile screen. */
@media (max-width:960px){
.foot-grid{grid-template-columns:1fr 1fr;gap:36px}
.foot-grid > div:first-child{grid-column:1 / -1;margin-bottom:8px}
}
@media (max-width:640px){
.foot{padding:56px 0 28px}
.foot-grid{grid-template-columns:1fr;gap:28px;margin-bottom:32px}
.foot-grid > div:first-child{margin-bottom:0}
.foot-bottom{flex-direction:column;align-items:flex-start;gap:10px;text-align:left}
.foot-bottom span{font-size:11px;line-height:1.6}
}
/* --- Template node hidden by default --- */
.tpl{display:none}
/* --- Reduced motion overrides --- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
.flip-card:hover .flip-inner,.flip-card.flipped .flip-inner{transform:none}
.tao-cell:hover .tao-overlay,.tc-cell:hover .tc-overlay,.ins-card:hover .ins-overlay{transform:none;opacity:1}
.sb-overlay.open .sb-panel{transform:translateX(0)}
}
/* ============================================================
v1.0.6 — Nav polish + Language switcher dropdown (UX Pro Max)
============================================================ */
/* Sticky-on-scroll: subtle shadow when scrolled past hero */
.nav.is-scrolled{
box-shadow:0 1px 0 rgba(13,36,56,.06),0 12px 28px -18px rgba(13,36,56,.18);
background:rgba(255,255,255,.985);
}
/* Language switcher — pill-style toggle with native-name dropdown */
.lang-switcher{position:relative;display:inline-flex}
.lang-toggle{
display:inline-flex;align-items:center;gap:6px;
padding:6px 10px;font:500 12.5px/1 var(--ff-sans);
color:var(--text);background:transparent;
border:1px solid var(--border);border-radius:999px;
cursor:pointer;transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.lang-toggle:hover{border-color:var(--gold);color:var(--gold)}
.lang-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(184,151,62,.32);border-color:var(--gold)}
.lang-toggle .lang-globe{flex:none;color:currentColor;opacity:.7}
.lang-toggle .lang-current{letter-spacing:.04em;text-transform:uppercase}
.lang-toggle .lang-caret{flex:none;color:currentColor;opacity:.55;transition:transform .18s ease}
.lang-switcher.is-open .lang-toggle{border-color:var(--navy);color:var(--navy)}
.lang-switcher.is-open .lang-caret{transform:rotate(180deg)}
.lang-menu{
position:absolute;top:calc(100% + 8px);right:0;min-width:170px;
margin:0;padding:6px;list-style:none;
background:#fff;border:1px solid var(--border);border-radius:12px;
box-shadow:0 8px 24px -10px rgba(13,36,56,.18),0 2px 6px rgba(13,36,56,.06);
z-index:90;
}
.lang-menu li{margin:0}
.lang-item{
display:flex;align-items:baseline;justify-content:space-between;gap:14px;
padding:9px 12px;border-radius:8px;
font:400 13.5px/1.2 var(--ff-sans);color:var(--text);text-decoration:none;
transition:background .15s ease,color .15s ease;
}
.lang-item:hover,.lang-item:focus-visible{background:rgba(13,36,56,.04);color:var(--navy);outline:none}
.lang-item.is-active{color:var(--navy);font-weight:500;background:rgba(184,151,62,.08)}
.lang-item.is-active::before{
content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--gold);margin-right:6px;flex:none;align-self:center;
}
.lang-item-native{flex:1}
.lang-item-short{font-size:11px;letter-spacing:.06em;opacity:.55;text-transform:uppercase}
@media (max-width:760px){
.lang-menu{right:auto;left:0;min-width:160px}
}
/* Flip-card CTA — when rendered as (links via native browser nav) */
.flip-back .btn-lnk{
display:inline-flex;align-items:center;gap:8px;
margin-top:14px;padding:10px 18px;
font:500 13px/1 var(--ff-sans);text-decoration:none;
color:var(--navy);background:#fff;
border:1px solid var(--border);border-radius:999px;
cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.flip-back .btn-lnk:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.flip-back .btn-lnk:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(184,151,62,.32)}
/* ============================================================
v1.0.7 — Grand Challenges card enhancement (UX Pro Max)
============================================================ */
/* Card lift + accent on hover/focus */
.gc-card{
border:0;text-align:left;width:100%;
transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s cubic-bezier(.4,0,.2,1);
}
.gc-card:hover,.gc-card:focus-visible{
transform:translateY(-4px);
box-shadow:0 24px 40px -22px rgba(13,36,56,.28),0 6px 12px -8px rgba(13,36,56,.10);
z-index:2;
}
.gc-card:focus-visible{outline:none}
.gc-card:focus-visible .gc-img{box-shadow:inset 0 0 0 3px rgba(184,151,62,.55)}
/* gc-img is the gradient header — host the icon top-left + metric block bottom-left */
.gc-img{
position:relative;display:block;color:rgba(255,255,255,.92);
padding:24px 28px 22px;
display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
height:280px;
}
.gc-icon{flex:none;color:var(--gold-pale);opacity:.85}
/* Metric block: big number + unit + anchor */
.gc-metric{display:flex;flex-direction:column;gap:2px;color:#fff;line-height:1.05}
.gc-metric-num{
font-family:var(--ff-display);font-weight:300;font-size:54px;letter-spacing:-.01em;
color:var(--gold-pale);
}
.gc-metric-unit{
font-size:11.5px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
color:rgba(255,255,255,.78);margin-top:4px;
}
.gc-metric-anchor{
font-size:11px;font-weight:400;color:rgba(255,255,255,.55);
letter-spacing:.04em;margin-top:1px;
}
/* gc-foot becomes a clear link affordance with chevron */
.gc-body .gc-foot{
align-self:flex-start;margin-top:18px;display:inline-flex;align-items:center;gap:8px;
font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
color:var(--gold);transition:gap .25s ease,color .25s ease;
}
.gc-body .gc-foot::after{content:"›";font-size:16px;line-height:1}
.gc-card:hover .gc-body .gc-foot{gap:14px;color:var(--navy)}
.gc-card[data-domain="health"]:hover .gc-body .gc-foot{color:var(--health)}
.gc-card[data-domain="food"]:hover .gc-body .gc-foot{color:var(--food)}
.gc-card[data-domain="circ"]:hover .gc-body .gc-foot{color:var(--circ)}
/* Stack body items: lbl small, h3 punch, paragraph muted, foot bottom */
.gc-body{padding:32px 30px 28px;flex:1;display:flex;flex-direction:column;background:#fff}
.gc-body p{font-size:13.5px;line-height:1.7;color:var(--muted);margin:0 0 0;flex:1}
.gc-body h3{margin-bottom:14px}
/* Mobile: stack instead of 3-column */
@media (max-width:880px){
.gc-row{grid-template-columns:1fr;gap:1px}
.gc-card{height:auto;min-height:480px}
.gc-img{height:220px;padding:20px 22px}
.gc-metric-num{font-size:42px}
.gc-body{padding:26px 22px 24px}
}
/* ============================================================
v1.0.8 — Leverage Points card enhancement (UX Pro Max)
============================================================ */
/* Card lift + accent on hover/focus */
.lp-card{
border:0;text-align:left;width:100%;
transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s cubic-bezier(.4,0,.2,1);
}
.lp-card:hover,.lp-card:focus-visible{
transform:translateY(-3px);
box-shadow:0 18px 32px -20px rgba(13,36,56,.24),0 4px 10px -6px rgba(13,36,56,.10);
z-index:2;
}
.lp-card:focus-visible{outline:none}
.lp-card:focus-visible .lp-img{box-shadow:inset 0 0 0 3px rgba(184,151,62,.55)}
/* lp-img header: add icon top-left, letter stays bottom-left from existing CSS */
.lp-img{
display:flex;justify-content:flex-start;align-items:flex-start;
padding:18px 24px 0;
}
.lp-icon{flex:none;color:var(--gold-pale);opacity:.85}
/* Body layout: label, h3, body p (flex:1), anchor metadata, foot CTA */
.lp-body{padding:22px 24px 24px;flex:1;display:flex;flex-direction:column;gap:0}
.lp-body p{margin:0}
.lp-body p + p{margin-top:6px}
.lp-anchor{
margin-top:12px;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
color:var(--gold);opacity:.78;
}
.lp-body .lp-foot{
margin-top:14px;align-self:flex-start;
display:inline-flex;align-items:center;gap:8px;
font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
color:var(--navy);transition:gap .25s ease,color .25s ease;
}
.lp-body .lp-foot::after{content:"›";font-size:15px;line-height:1}
.lp-card:hover .lp-foot{gap:13px;color:var(--gold)}
/* Responsive: 4-col → 2-col → 1-col */
@media (max-width:1024px){
.lp-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
.lp-row{grid-template-columns:1fr}
.lp-card{height:auto;min-height:280px}
}
/* ============================================================
v1.0.9 — Leverage Points polish: layout + positioning + alignment
============================================================ */
/* Card grows to content; min height ensures consistent rhythm in row */
.lp-card{height:auto;min-height:380px}
/* Header (gradient image area) — give it more breathing room (160 vs 140)
* + icon goes TOP-RIGHT (was top-left, fighting the big letter at bottom-left). */
.lp-img{
height:160px;
display:flex;justify-content:flex-end;align-items:flex-start;
padding:18px 22px 0;
}
.lp-icon{width:24px;height:24px;color:var(--gold-pale);opacity:.55}
/* Big letter (existing ::before) — bigger + more presence */
.lp-img::before{
font-size:64px;opacity:.85;
left:22px;bottom:14px;
letter-spacing:-.02em;
}
/* Body — consistent padding + clear rhythm.
* Use margin-top:auto on .lp-anchor to push anchor+foot to bottom regardless
* of body description length. */
.lp-body{padding:24px 22px 22px;flex:1;display:flex;flex-direction:column}
.lp-body .lbl{margin:0 0 10px;font-size:11px;letter-spacing:.10em;color:var(--gold-text)}
.lp-body h3{
font-family:var(--ff-display);font-size:23px;font-weight:300;line-height:1.22;
color:var(--heading);margin:0 0 14px;
}
.lp-body > p{
font-size:13.5px;line-height:1.65;color:var(--muted);margin:0;font-weight:300;
}
/* Anchor: pinned just above the foot, separated from body by margin-top:auto */
.lp-body .lp-anchor{
margin-top:auto;padding-top:18px;
font-size:10.5px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
color:var(--gold);opacity:.9;
}
/* Foot: subtle top divider, full-width feel even though it's inline-flex */
.lp-body .lp-foot{
margin-top:12px;padding-top:12px;
border-top:1px solid var(--border);
align-self:stretch; /* makes the divider span full body width */
display:flex;align-items:center;justify-content:space-between;
font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
color:var(--navy);transition:color .25s ease;
}
.lp-body .lp-foot::after{
content:"›";font-size:16px;line-height:1;color:var(--gold);
transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.lp-card:hover .lp-foot{color:var(--gold)}
.lp-card:hover .lp-foot::after{transform:translateX(4px)}
/* Hover lift unchanged from v1.0.8 — but tighten focus ring */
.lp-card:focus-visible .lp-img{box-shadow:inset 0 0 0 2px rgba(184,151,62,.65)}
/* Responsive review: 4-col → 2-col @1024 → 1-col @600
* On 2-col layout, give cards more height to balance the wider layout. */
@media (max-width:1024px){
.lp-card{min-height:340px}
}
@media (max-width:600px){
.lp-card{min-height:auto}
.lp-img{height:140px}
.lp-img::before{font-size:54px}
}
/* ============================================================
v1.0.10 — Leverage Points refinement: drop letter, icon inline with label
============================================================ */
/* Hide the big letter overlay (data-letter no longer emitted on .lp-img) */
.lp-img::before{content:none}
/* Hide the gradient-area icon (we no longer place an icon there) */
.lp-img > .lp-icon{display:none}
/* Slim the gradient header — now purely decorative (no letter, no icon) */
.lp-img{
height:96px;
display:block;padding:0;
}
/* Inline label: icon + text together, baseline-aligned, gold accent */
.lp-body .lbl{
display:inline-flex;align-items:center;gap:9px;
margin:0 0 12px;
font-size:11px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
color:var(--gold);
}
.lp-lbl-icon{
flex:none;color:var(--gold);opacity:.95;
/* small-icon stroke calibrated for 16px */
}
/* Card height adjusts since header is slimmer */
.lp-card{min-height:340px}
@media (max-width:1024px){.lp-card{min-height:320px}}
@media (max-width:600px){.lp-img{height:72px}}
/* ============================================================
v1.0.11 — Grand Challenges refined to mirror Leverage Points lockup
============================================================ */
/* Slim the gradient header — now purely decorative, no metric overlay, no icon
* (was ~280px before; cut to a clean 160px to match LP visual rhythm). */
.gc-img{
height:160px;
display:block;padding:0;
}
.gc-img > .gc-icon,
.gc-img > .gc-metric{display:none} /* legacy markup safe-hide */
/* Card grows to content; min-height ensures consistent rhythm in row */
.gc-card{height:auto;min-height:460px}
/* Inline label — icon + text, baseline-aligned, in domain accent color */
.gc-body .lbl{
display:inline-flex;align-items:center;gap:9px;
margin:0 0 12px;
font-size:11px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
color:var(--gold);
}
.gc-card[data-domain="health"] .gc-body .lbl,
.gc-card[data-domain="health"] .gc-lbl-icon{color:var(--health)}
.gc-card[data-domain="food"] .gc-body .lbl,
.gc-card[data-domain="food"] .gc-lbl-icon{color:var(--food)}
.gc-card[data-domain="circ"] .gc-body .lbl,
.gc-card[data-domain="circ"] .gc-lbl-icon{color:var(--circ)}
.gc-lbl-icon{flex:none;opacity:.95}
/* Body padding consistent with LP rhythm */
.gc-body{padding:24px 28px 24px;flex:1;display:flex;flex-direction:column}
.gc-body h3{
font-family:var(--ff-display);font-size:26px;font-weight:300;line-height:1.22;
color:var(--heading);margin:0 0 14px;
}
.gc-body > p{
font-size:14px;line-height:1.7;color:var(--muted);margin:0;font-weight:300;
}
/* Anchor — pinned just above the foot (margin-top:auto), gold caps */
.gc-body .gc-anchor{
margin-top:auto;padding-top:18px;
font-size:10.5px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
color:var(--gold);opacity:.9;
}
/* Foot — divider above + chevron animates X+4 on hover */
.gc-body .gc-foot{
margin-top:12px;padding-top:12px;
border-top:1px solid var(--border);
align-self:stretch;
display:flex;align-items:center;justify-content:space-between;
font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
color:var(--navy);transition:color .25s ease;
}
.gc-body .gc-foot::after{
content:"›";font-size:16px;line-height:1;color:var(--gold);
transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.gc-card:hover .gc-foot{color:var(--gold)}
.gc-card[data-domain="health"]:hover .gc-foot{color:var(--health)}
.gc-card[data-domain="food"]:hover .gc-foot{color:var(--food)}
.gc-card[data-domain="circ"]:hover .gc-foot{color:var(--circ)}
.gc-card:hover .gc-foot::after{transform:translateX(4px)}
/* Focus ring — match LP */
.gc-card:focus-visible .gc-img{box-shadow:inset 0 0 0 2px rgba(184,151,62,.65)}
/* Mobile already responsive from earlier — bump min-height */
@media (max-width:880px){
.gc-card{min-height:auto}
.gc-img{height:120px}
}
/* ============================================================
v1.0.12 — Consortium / founding partners (UX Pro Max + research-verified)
============================================================ */
/* Two-column founding-partner grid */
.founder-grid{
display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
background:var(--border);
margin-top:36px;
}
.founder-card{
display:flex;flex-direction:column;
padding:32px 32px 28px;background:#fff;text-decoration:none;color:inherit;
transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s cubic-bezier(.4,0,.2,1);
}
.founder-card:hover,
.founder-card:focus-visible{
transform:translateY(-4px);
box-shadow:0 24px 40px -22px rgba(13,36,56,.28),0 6px 12px -8px rgba(13,36,56,.10);
z-index:2;
outline:none;
}
.founder-card-head{margin-bottom:18px}
.founder-tag{
margin:0 0 8px;font-size:11px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
color:var(--gold);
}
.founder-name{
margin:0;
font-family:var(--ff-display);font-weight:300;font-size:30px;line-height:1.18;
color:var(--heading);letter-spacing:-.005em;
display:flex;align-items:center;min-height:42px;
}
.founder-logo{
display:block;height:42px;width:auto;max-width:160px;
/* InTent SVG ships with white-fill paths optimised for navy backgrounds.
If a future logo ships with non-white fill, override per-partner rather
than using opacity tricks (which kill brand fidelity). */
filter:none;opacity:1;
}
/* B Lab Switzerland — portrait-orientation logo (B-circle + "Lab" text).
Override default landscape sizing to give the portrait mark visual weight
comparable to InTent's landscape logo on the matching founder-card. */
.founder-logo--blab{height:54px;max-width:38px}
/* WP-standard a11y utility — used to keep brand name in the accessibility
tree when the visible label is logo-only. */
.screen-reader-text{
position:absolute;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
height:1px;width:1px;margin:-1px;padding:0;border:0;overflow:hidden;
word-wrap:normal !important;
}
.founder-body{
margin:0 0 18px;font-size:14px;line-height:1.7;color:var(--muted);font-weight:300;
flex:1;
}
.founder-meta{
display:flex;flex-wrap:wrap;gap:10px;align-items:center;
font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);opacity:.7;
padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--border);
}
.founder-meta span[aria-hidden]{opacity:.5;color:var(--gold)}
.founder-link{
display:inline-flex;align-items:center;gap:8px;
font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
color:var(--navy);transition:color .25s ease,gap .25s ease;
}
.founder-card:hover .founder-link{color:var(--gold);gap:13px}
/* People-counts strip */
.consort-stats{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:var(--border);
margin-top:42px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.consort-stat{
background:#fff;padding:24px 20px 22px;
display:flex;flex-direction:column;align-items:flex-start;gap:6px;
}
.consort-stat-num{
font-family:var(--ff-display);font-weight:300;font-size:42px;line-height:1;
color:var(--gold);letter-spacing:-.01em;
}
.consort-stat-label{
font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);
}
/* Co-builder block — Sounding Board affiliations */
.cobuilder-block{margin-top:48px}
.cobuilder-eyebrow{
margin:0 0 16px;font-size:11px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
color:var(--muted);
}
.cobuilder-strip{
display:flex;flex-wrap:wrap;gap:1px;
margin:0;padding:0;list-style:none;
background:var(--border);
border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.cobuilder-cell{
flex:1 1 calc(20% - 1px);min-width:160px;
background:#fff;padding:18px 20px;
display:flex;align-items:center;justify-content:center;
font-family:var(--ff-display);font-size:15px;font-weight:300;line-height:1.25;
color:var(--heading);text-align:center;
letter-spacing:-.005em;
}
.cobuilder-more{
font-style:italic;color:var(--gold);font-size:13.5px;
}
.cobuilder-foot{
margin:18px 0 0;text-align:right;
font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
}
.cobuilder-foot a{
color:var(--navy);text-decoration:none;
display:inline-flex;align-items:center;gap:8px;
transition:color .25s ease,gap .25s ease;
}
.cobuilder-foot a:hover{color:var(--gold);gap:13px}
/* Responsive */
@media (max-width:880px){
.founder-grid{grid-template-columns:1fr}
.consort-stats{grid-template-columns:repeat(2,1fr)}
.founder-card{padding:26px 24px 22px}
.founder-name{font-size:25px}
.cobuilder-cell{flex:1 1 calc(50% - 1px);font-size:14px}
}
@media (max-width:560px){
.consort-stats{grid-template-columns:1fr}
.cobuilder-cell{flex:1 1 100%}
}
/* ============================================================
v1.0.13 — People grids: Founder card + Foundation Board grid
+ Sounding Board face wall
============================================================ */
/* Featured / Founder card (lead) */
.person-card{
display:flex;gap:32px;align-items:flex-start;
margin:18px 0 26px;padding:24px;
background:rgba(13,36,56,.02);
border-left:3px solid var(--gold);
border-radius:6px;
}
.person-card .person-photo{
flex:none;width:160px;height:160px;
border-radius:50%;object-fit:cover;
background:rgba(13,36,56,.05);
}
.person-card .person-meta{flex:1;min-width:0}
.person-card .person-name{
margin:0 0 4px;font-family:var(--ff-display);font-weight:300;
font-size:26px;color:var(--heading);line-height:1.2;
}
.person-card .person-role{
margin:0 0 12px;font-size:13px;letter-spacing:.04em;color:var(--gold);font-weight:500;
}
.person-card .person-bio{
margin:0 0 14px;font-size:14px;line-height:1.7;color:var(--text);font-weight:300;
}
.person-card .person-link{
display:inline-flex;align-items:center;gap:6px;
font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
color:var(--navy);text-decoration:none;
transition:color .2s ease,gap .2s ease;
}
.person-card .person-link:hover{color:var(--gold);gap:11px}
/* Person grid — large tiles (Foundation Board) and small tiles (Sounding Board) */
.people-grid{
display:grid;gap:18px;
margin:18px 0 28px;
}
.people-grid--lg{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.people-grid--sm{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.person-tile{
margin:0;padding:14px;
display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
background:#fff;border:1px solid var(--border);border-radius:8px;
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.person-tile:hover{
transform:translateY(-2px);
box-shadow:0 6px 14px -8px rgba(13,36,56,.18);
border-color:rgba(184,151,62,.35);
}
/* Headshot styling — scoped with :not(.ptile-link-icon) so the small
LinkedIn icon below the role text doesn't accidentally inherit the
96px circle crop + slate-blue background intended for portraits.
Without this exclusion the LinkedIn img was rendering as a tinted
circle thumbnail at 96×96 (Anjali screenshot, 2026-05-04). */
.person-tile img:not(.ptile-link-icon){
width:96px;height:96px;border-radius:50%;
object-fit:cover;background:rgba(13,36,56,.05);
}
.people-grid--lg .person-tile img:not(.ptile-link-icon){width:120px;height:120px}
.person-tile figcaption{display:flex;flex-direction:column;gap:3px;line-height:1.3}
.person-tile .ptile-name{
font-family:var(--ff-display);font-weight:400;font-size:14.5px;color:var(--heading);
letter-spacing:-.005em;
}
.people-grid--lg .person-tile .ptile-name{font-size:16px;font-weight:500}
/* LinkedIn icon under role on team tiles. Inline-flex so it sits inline
with the figcaption stack; currentColor lets us swap to gold on hover
without touching the SVG markup. */
.ptile-link{
display:inline-flex;align-items:center;justify-content:center;
width:22px;height:22px;margin-top:6px;
color:var(--muted);text-decoration:none;border-radius:4px;
transition:color .25s ease,transform .25s ease;
}
/* Reset border-radius/object-fit/background here too — even with the
:not() exclusion above, hostile CSS overrides downstream (e.g.,
future utility classes) shouldn't be able to re-circle-crop the
LinkedIn icon. Belt and suspenders. */
.ptile-link svg,.ptile-link .ptile-link-icon{
width:18px;height:18px;display:block;
border-radius:0;background:transparent;object-fit:contain;
}
/* SVG served as ![]()
can't inherit currentColor — use a CSS filter that
tints solid-color SVGs. The filter values map black -> muted slate at
rest, then to gold (#B8973E) on hover. Calculated via codepen.io/
sosuke/pen/Pjoqqp using the brand swatches. */
.ptile-link-icon{
filter:invert(36%) sepia(8%) saturate(316%) hue-rotate(170deg) brightness(95%) contrast(92%);
transition:filter .25s ease;
}
.ptile-link:hover .ptile-link-icon,
.ptile-link:focus-visible .ptile-link-icon{
filter:invert(60%) sepia(35%) saturate(745%) hue-rotate(11deg) brightness(96%) contrast(88%);
}
.ptile-link:hover,.ptile-link:focus-visible{color:var(--gold);transform:translateY(-1px)}
.ptile-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.person-tile .ptile-role{
font-size:11px;line-height:1.45;color:var(--muted);
letter-spacing:.01em;
}
/* Placeholder tiles (no photo yet — show initials in a circle) */
.person-tile--placeholder{
background:linear-gradient(180deg,#fff,rgba(13,36,56,.02));
}
.person-tile--placeholder .ptile-initials{
display:flex;align-items:center;justify-content:center;
width:120px;height:120px;border-radius:50%;
background:var(--navy);color:var(--gold-pale);
font-family:var(--ff-display);font-size:36px;font-weight:300;
letter-spacing:.05em;
}
.people-grid--sm .person-tile--placeholder .ptile-initials{
width:96px;height:96px;font-size:28px;
}
/* Mobile */
@media (max-width:560px){
.person-card{flex-direction:column;gap:18px;padding:20px}
.person-card .person-photo{width:120px;height:120px}
.people-grid--lg{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.people-grid--sm{grid-template-columns:repeat(2,1fr);gap:10px}
.person-tile img:not(.ptile-link-icon),.people-grid--lg .person-tile img:not(.ptile-link-icon){width:88px;height:88px}
}
/* ============================================================
v1.0.14 — B Corp ecosystem marquee + S&TC placeholder tiles
============================================================ */
/* SIPI Consortium marquee — 40 institutional logos, 8-col desktop grid.
(Was the legacy B Corp marquee; .bcorp-* classes preserved as aliases
below so any cached HTML still styles correctly during deploy.) */
.consort-block,.bcorp-block{margin-top:40px}
.consort-eyebrow,.bcorp-eyebrow{
margin:0 0 16px;font-size:11px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
color:var(--muted);
}
.consort-strip,.bcorp-strip{
display:grid;grid-template-columns:repeat(8,1fr);gap:1px;
margin:0;padding:0;list-style:none;
background:var(--border);
border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.consort-cell,.bcorp-cell{
background:#fff;
display:flex;align-items:center;justify-content:center;
padding:18px 14px;height:84px;
transition:background .2s ease,transform .2s ease;
}
.consort-cell:hover,.bcorp-cell:hover{
background:rgba(184,151,62,.04);
transform:translateY(-1px);
}
.consort-cell img,.bcorp-cell img{
max-width:100%;max-height:48px;width:auto;height:auto;
object-fit:contain;
filter:grayscale(100%);opacity:.75;
transition:filter .25s ease,opacity .25s ease;
}
.consort-cell:hover img,.bcorp-cell:hover img{filter:grayscale(0);opacity:1}
.consort-foot,.bcorp-foot{
margin:18px 0 0;text-align:right;
font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
}
.consort-foot a,.bcorp-foot a{
color:var(--navy);text-decoration:none;
display:inline-flex;align-items:center;gap:8px;
transition:color .25s ease,gap .25s ease;
}
.consort-foot a:hover,.bcorp-foot a:hover{color:var(--gold);gap:13px}
@media (max-width:1024px){
.consort-strip,.bcorp-strip{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:560px){
.consort-strip,.bcorp-strip{grid-template-columns:repeat(3,1fr)}
.consort-cell,.bcorp-cell{height:72px;padding:14px 10px}
.consort-cell img,.bcorp-cell img{max-height:38px}
}
/* --- FAQ accordion ---------------------------------------------------------
* Reusable Q&A list rendered by parts/faq-accordion.php.
* Native / — no JS. State hooks off [open] attribute.
* Visual language matches .acc (PROSPER pillar accordion): navy headings,
* gold accents, hairline border-bottom dividers, generous vertical rhythm.
*/
.faq-header{margin-bottom:32px}
.faq-list{border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{
list-style:none;cursor:pointer;
display:flex;justify-content:space-between;align-items:center;gap:24px;
padding:22px 0;
font-family:var(--ff-display);font-size:18px;font-weight:400;
color:var(--heading);line-height:1.35;
transition:padding .2s ease,color .2s ease;
}
/* Remove the native disclosure marker in WebKit + Firefox + IE/Edge legacy */
.faq-q::-webkit-details-marker{display:none}
.faq-q::marker{content:""}
.faq-q:hover{padding-left:6px;color:var(--gold)}
.faq-q:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.faq-q-text{flex:1 1 auto;min-width:0}
/* Gold caret — pure CSS chevron rotates 90° when open */
.faq-chev{
flex-shrink:0;width:14px;height:14px;
border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
transform:rotate(45deg);transform-origin:center;
transition:transform .25s ease;
margin-right:6px;margin-bottom:4px;
}
.faq-item[open] .faq-chev{transform:rotate(225deg);margin-bottom:-2px}
.faq-a{
padding:4px 0 26px;max-width:720px;
font-size:16px;line-height:1.7;font-weight:300;
color:var(--muted);
}
.faq-a p{margin-bottom:14px}
.faq-a p:last-child{margin-bottom:0}
.faq-a a{color:var(--gold);border-bottom:1px solid var(--gold);transition:color .2s ease}
.faq-a a:hover{color:var(--heading);border-color:var(--heading)}
/* Smooth open/close — animate padding so closed state feels tighter */
.faq-item{transition:padding .2s ease}
.faq-item[open]{padding-bottom:2px}
/* Reduce motion — flatten transitions */
@media (prefers-reduced-motion:reduce){
.faq-q,.faq-chev,.faq-item{transition:none}
}
/* Mobile — tighter rhythm, slightly smaller question type */
@media (max-width:680px){
.faq-q{padding:18px 0;font-size:16.5px;gap:16px}
.faq-a{padding:2px 0 20px;font-size:15.5px}
}
/* ============================================================
v1.0.26 — Newsletter signup form (.newsletter-form)
Two variants:
.newsletter-form--footer → compact, lives inside .foot
.newsletter-form--standalone → full layout, used in post content
Both share the same DOM. Brand: navy bg, gold accent on focus,
cream text. Inputs 17px to match site rhythm.
============================================================ */
.newsletter-form{font-family:var(--ff-body,'DM Sans',sans-serif)}
.newsletter-form *{box-sizing:border-box}
/* ----- Standalone variant (in-page) ----- */
.newsletter-form--standalone{
max-width:760px;margin:48px auto;padding:40px 36px;
background:#fff;border:1px solid var(--border,#e6e2d6);border-radius:8px;
color:var(--text,#1a2939);
}
.newsletter-form--standalone .newsletter-form__intro{margin-bottom:24px}
.newsletter-form--standalone .newsletter-form__heading{
font-family:var(--ff-display,'Cormorant Garamond',serif);
font-size:32px;font-weight:300;line-height:1.2;color:var(--heading,#0a1f44);
margin:0 0 8px;
}
.newsletter-form--standalone .newsletter-form__lead{
font-size:15.5px;line-height:1.65;color:var(--muted,#6b6f74);margin:0;
}
/* ----- Footer variant (inside .foot) ----- */
.newsletter-form--footer{
background:transparent;color:rgba(255,255,255,.85);
padding:32px 0 36px;margin:0 0 36px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.newsletter-form--footer .newsletter-form__inner{
display:grid;grid-template-columns:1fr 1.6fr;gap:32px;align-items:start;
max-width:var(--con,1200px);margin:0 auto;padding:0 var(--gut,24px);
}
.newsletter-form--footer .newsletter-form__intro{margin:0}
.newsletter-form--footer .newsletter-form__heading{
font-family:var(--ff-display,'Cormorant Garamond',serif);
font-size:24px;font-weight:300;line-height:1.25;letter-spacing:.01em;
color:#fff;margin:0 0 8px;
}
.newsletter-form--footer .newsletter-form__lead{
font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.55);
font-weight:300;margin:0;
}
@media (max-width:880px){
.newsletter-form--footer .newsletter-form__inner{grid-template-columns:1fr;gap:20px}
}
/* ----- Form rows ----- */
.newsletter-form__form{display:grid;gap:14px}
.newsletter-form__row{display:grid;gap:12px}
.newsletter-form__row--inputs{grid-template-columns:1.6fr 1fr auto;align-items:end}
@media (max-width:680px){
.newsletter-form__row--inputs{grid-template-columns:1fr}
}
/* ----- Field labels ----- */
.newsletter-form__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.newsletter-form__label{
font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
}
.newsletter-form--standalone .newsletter-form__label{color:var(--heading,#0a1f44)}
.newsletter-form--footer .newsletter-form__label{color:var(--gold-pale,#d4be7a)}
/* ----- Inputs ----- */
.newsletter-form input[type="email"],
.newsletter-form input[type="text"]{
width:100%;min-height:48px;padding:12px 14px;
font-family:inherit;font-size:17px;line-height:1.4;
border-radius:6px;
transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.newsletter-form--standalone input[type="email"],
.newsletter-form--standalone input[type="text"]{
background:#fff;color:var(--text,#1a2939);border:1px solid var(--border,#cfcabb);
}
.newsletter-form--footer input[type="email"],
.newsletter-form--footer input[type="text"]{
background:rgba(255,255,255,.06);color:#fff;
border:1px solid rgba(255,255,255,.18);
}
.newsletter-form--footer input::placeholder{color:rgba(255,255,255,.4)}
.newsletter-form input[type="email"]:focus,
.newsletter-form input[type="text"]:focus{
outline:none;border-color:var(--gold,#b8973e);
box-shadow:0 0 0 3px rgba(184,151,62,.28);
}
/* ----- Submit button ----- */
.newsletter-form__submit{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:48px;padding:0 22px;
font-family:inherit;font-size:14.5px;font-weight:500;letter-spacing:.05em;
text-transform:uppercase;border-radius:6px;cursor:pointer;
transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease;
}
.newsletter-form--standalone .newsletter-form__submit{
background:var(--navy,#0a1f44);color:#fff;border:1px solid var(--navy,#0a1f44);
}
.newsletter-form--standalone .newsletter-form__submit:hover{
background:var(--gold,#b8973e);border-color:var(--gold,#b8973e);
}
.newsletter-form--footer .newsletter-form__submit{
background:var(--gold,#b8973e);color:#0a1f44;border:1px solid var(--gold,#b8973e);
}
.newsletter-form--footer .newsletter-form__submit:hover{
background:#fff;border-color:#fff;color:#0a1f44;
}
.newsletter-form__submit:focus-visible{
outline:none;box-shadow:0 0 0 3px rgba(184,151,62,.45);
}
/* ----- Interest checkboxes (standalone only) ----- */
.newsletter-form__interests{
border:0;padding:0;margin:4px 0 4px;
display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 18px;
}
.newsletter-form__legend{
font-size:13.5px;font-weight:500;color:var(--heading,#0a1f44);
margin:0 0 8px;padding:0;width:100%;
}
.newsletter-form__check{
display:flex;align-items:flex-start;gap:10px;
font-size:14.5px;line-height:1.45;color:var(--text,#1a2939);
cursor:pointer;padding:4px 0;
}
.newsletter-form__check input[type="checkbox"]{
width:18px;height:18px;min-width:18px;margin-top:2px;
accent-color:var(--gold,#b8973e);cursor:pointer;
}
/* ----- Consent ----- */
.newsletter-form__consent{
display:flex;align-items:flex-start;gap:12px;
font-size:13.5px;line-height:1.55;
margin-top:4px;
}
.newsletter-form--standalone .newsletter-form__consent{color:var(--text,#1a2939)}
.newsletter-form--footer .newsletter-form__consent{color:rgba(255,255,255,.7)}
.newsletter-form__consent input[type="checkbox"]{
width:20px;height:20px;min-width:20px;margin-top:2px;
accent-color:var(--gold,#b8973e);cursor:pointer;
}
.newsletter-form__consent a{color:var(--gold,#b8973e);text-decoration:underline;text-underline-offset:2px}
.newsletter-form--footer .newsletter-form__consent a{color:var(--gold-pale,#d4be7a)}
.newsletter-form__consent a:hover{color:var(--gold-pale,#d4be7a)}
/* ----- Honeypot ----- */
.newsletter-form__honey{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* ----- Small print ----- */
.newsletter-form__small{
font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.45);
margin:0;letter-spacing:.02em;
}
.newsletter-form__small a{color:var(--gold-pale,#d4be7a);text-decoration:underline;text-underline-offset:2px}
/* ----- Banner (success / error / validation flash) ----- */
.newsletter-form__banner{
padding:14px 16px;border-radius:6px;font-size:14.5px;line-height:1.5;
border:1px solid transparent;margin-bottom:8px;
}
.newsletter-form--standalone .newsletter-form__banner[data-state=ok]{background:#e8f4ec;border-color:#bcddc7;color:#1d4a2f}
.newsletter-form--standalone .newsletter-form__banner[data-state=err]{background:#fbeae5;border-color:#f0c0b3;color:#7a1f0c}
.newsletter-form--footer .newsletter-form__banner[data-state=ok]{background:rgba(212,190,122,.12);border-color:rgba(212,190,122,.4);color:var(--gold-pale,#d4be7a)}
.newsletter-form--footer .newsletter-form__banner[data-state=err]{background:rgba(177,54,30,.16);border-color:rgba(177,54,30,.45);color:#f6b8a4}
.newsletter-form__banner:focus{outline:2px solid var(--gold,#b8973e);outline-offset:2px}
/* ----- Footer-scoped paragraph reset (the global .foot p rule has high
specificity in cascade order; we re-assert lead size + line-height) ----- */
.foot .newsletter-form--footer p.newsletter-form__lead{
font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.55);
font-weight:300;margin:0;
}
.foot .newsletter-form--footer p.newsletter-form__small{
margin-top:2px;
}
/* ============================================================
v1.0.35 — Vision & Mission section (home page, NEW)
Anjali's website-architecture restructure 2026-04-29.
3-column row: [fixed | flip | fixed]. The middle card is a
flip-card (parts/flip-card.php) with the .vision-card--flip
modifier; outer cards are .vision-card--fixed.
============================================================ */
.vision-row{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1px;
background:var(--border);
margin-top:48px;
}
.vision-card--fixed{
background:#fff;
padding:42px 36px;
display:flex;
flex-direction:column;
justify-content:flex-start;
border-radius:var(--r);
min-height:340px;
}
.vision-card--fixed .vision-card-h{
font-family:var(--ff-display);
font-size:clamp(24px,2.4vw,30px);
font-weight:300;
line-height:1.2;
color:var(--heading);
margin:0 0 18px;
letter-spacing:.005em;
}
.vision-card--fixed .vision-card-h::after{
content:"";display:block;width:32px;height:1px;
background:var(--teal);margin-top:14px;
}
.vision-card--fixed .vision-card-body{
font-size:15.5px;line-height:1.7;color:var(--text);
font-weight:300;margin:0;
}
/* Flip card sits inside .vision-row — keep it grid-cell-aligned.
* height:100% (vs height:auto) ensures the card fills the grid row track
* even when its children are position:absolute (which give the .flip-card
* zero intrinsic content height). Without this the card collapsed to
* min-height:340px while the side .vision-card--fixed cells expanded to
* their body-text height (~600px), producing a visible height mismatch
* and a clipped back-face image. */
.vision-row .flip-card.vision-card--flip{height:100%;min-height:340px}
/* Tablet: 2-up; on phones we switch to a horizontal carousel. */
@media (max-width:960px){
.vision-row{grid-template-columns:repeat(2,1fr)}
}
/* ============================================================
v1.0.35 — Cobuilder strip carousel (Consortium logos)
Replace the grid layout with a horizontal-scroll snap carousel.
Active on ALL screen sizes (per Anjali docx item 5).
The legacy .consort-strip rule (8-col grid further down) is
overridden by .consort-strip--carousel below.
============================================================ */
.consort-strip--carousel{
display:flex;
flex-wrap:nowrap;
overflow-x:auto;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
gap:1px;
padding:0;margin:0;list-style:none;
background:var(--border);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
scrollbar-width:thin;
/* hide vertical scrollbar artefact in Safari */
scrollbar-color:rgba(0,0,0,.18) transparent;
}
.consort-strip--carousel::-webkit-scrollbar{height:6px}
.consort-strip--carousel::-webkit-scrollbar-thumb{
background:rgba(0,0,0,.18);border-radius:3px;
}
.consort-strip--carousel .consort-cell{
flex:0 0 auto;
width:clamp(160px,22vw,210px);
min-width:160px;
height:84px;
background:#fff;
display:flex;align-items:center;justify-content:center;
padding:18px 14px;
scroll-snap-align:start;
/* override grid-mode placement */
grid-column:auto;
}
.consort-strip--carousel .consort-cell img{
max-width:100%;max-height:48px;width:auto;height:auto;
object-fit:contain;
filter:grayscale(100%);opacity:.75;
transition:filter .25s ease,opacity .25s ease;
}
.consort-strip--carousel .consort-cell:hover img{filter:grayscale(0);opacity:1}
/* ============================================================
v1.0.35 — Carousel scroll-position dots (assets/js/carousel-dots.js)
The JS module renders