/* ============================================================
   INNOVATIVE FINANCE INITIATIVE — SHARED STYLESHEET
   Every page links this file. Change a value here and it
   updates everywhere. See style-guide.html for a visual index.
   ============================================================ */

/* ------------------------------------------------------------
   1. FONTS
   Body: Karla (free, Google Fonts — loaded via <link> in HTML).
   Display headings: Nourd (licensed/paid). Until the Nourd files
   are added to /fonts, headings fall back to "Baloo 2" (a free,
   rounded, heavy face that closely matches Nourd's letterforms).

   >>> TO ENABLE REAL NOURD:  download these files (already served by
       Webflow's CDN, base URL:
       https://cdn.prod.website-files.com/674037021bae78e363b36158/ )
       and drop them into /fonts/ with these exact names:
         nourd_semi_bold.ttf   (from ..._nourd_semi_bold.ttf)
         nourd_heavy.ttf       (from ..._nourd_heavy.ttf)
       Nothing else needs to change — the @font-face blocks below
       already point at them, and --font-display lists Nourd first.
       (Optional extras if ever needed: nourd_regular.ttf / _medium / _light.)
       NOTE: confirm your Nourd licence covers self-hosting on the new
       site — the developer can verify this.
   ------------------------------------------------------------ */
@font-face{                       /* names, sub-headings */
  font-family:"Nourd";
  src:url("fonts/nourd_semi_bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{                       /* big display headings (heavy) */
  font-family:"Nourd";
  src:url("fonts/nourd_heavy.ttf") format("truetype");
  font-weight:800 900; font-style:normal; font-display:swap;
}
/* Remaining weights — available if a design ever needs them */
@font-face{font-family:"Nourd";src:url("fonts/nourd_light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Nourd";src:url("fonts/nourd_regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Nourd";src:url("fonts/nourd_medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
@font-face{
  font-family:"Nourd Semi";
  src:url("fonts/nourd_semi_bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ------------------------------------------------------------
   2. DESIGN TOKENS  (the single source of truth for the brand)
   ------------------------------------------------------------ */
:root{
  /* Brand colours — New IFI Style Guide (2026) */
  --navy:#181a4e;        /* Night Tether — headers, dark surfaces  */
  --navy-2:#0f1138;      /* deepest navy — button ledge shadow     */
  --navy-soft:#2e3170;   /* softer navy — secondary emphasis       */
  --orange:#e8814b;      /* Fire Bloom — buttons, links, accent    */
  --orange-hover:#f87a3b;/* brighter orange hover state            */
  --orange-soft:#F9E9DD; /* pale orange — strip/pill backgrounds   */
  --orange-shadow:#b3612e;/* orange button ledge shadow             */
  --academy-green:#0d7a5f;/* format pills / tags                   */
  --teal:#2ba8a7;        /* Seafern — decorative flourishes        */
  --wisteria:#d5b4fb;    /* Wisteria Sky — decorative flourishes   */
  --li-blue:#2f6ab3;     /* LinkedIn icon circles                  */

  /* Backgrounds */
  --bg:#d2dce9;          /* Mist Echo — default page background    */
  --band:#d2dce9;        /* Mist Echo — alternating section band   */
  --cream:#f5ebdc;       /* Pale Dune — warm section (funders)     */
  --cream-2:#efe0cc;     /* darker Pale Dune — footer background   */
  --surface:#ffffff;     /* cards / navbar white                   */

  /* Text & Borders */
  --ink:#2a2d52;         /* body text (deep navy-grey)             */
  --muted:#6B7292;       /* secondary text, roles, captions        */
  --text-muted:#52537d;  /* nav link muted navy from IFI Academy   */
  --border-nav:#d8daec;  /* nav pill border from IFI Academy       */
  --card-border:#EDE3D5; /* card + logo borders (warm)             */
  --rule:#d9cdb6;        /* footer divider on cream                */

  /* Typography — Open Sauce Sans (body) + Nourd (display/buttons) */
  --font-display:"Nourd","Baloo 2",Arial,sans-serif;
  --font-body:"Open Sauce Sans","Inter",system-ui,sans-serif;
  --font-nav:"Nourd Semi", Arial, sans-serif;

  /* Type scale */
  --fs-display:clamp(36px,5.2vw,56px);
  --fs-h2:clamp(30px,4vw,42px);
  --fs-name:24px;
  --fs-lead:19px;
  --fs-body:16px;
  --fs-small:15px;

  /* Spacing & layout */
  --wrap:1200px;
  --container-wide:1290px;
  --gutter:clamp(24px,4vw,64px);
  --section-pad:90px;
  --radius:12px;
  --radius-lg:18px;
  --radius-pill:999px;
  --pill:999px;
  --radius-btn:8px;
  --radius-nav:2.875rem;
  --radius-dropdown:24px;
}

/* ------------------------------------------------------------
   3. BASE / RESET
   ------------------------------------------------------------ */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.4;       /* style guide: 1.4 for body text */
  font-size:var(--fs-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ------------------------------------------------------------
   4. LAYOUT HELPERS
   ------------------------------------------------------------ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
.section{position:relative;padding:var(--section-pad) 0;}
.section--band{background:var(--band);}
.section--cream{background:var(--cream);}
.section--white{background:var(--surface);}
.center{text-align:center;}

/* ------------------------------------------------------------
   5. TYPOGRAPHY
   .display        = big section title, solid navy (default)
   .display--muted = faded/ghost variant (use sparingly)
   ------------------------------------------------------------ */
.display{
  font-family:var(--font-display);
  font-weight:800;
  color:var(--navy);
  letter-spacing:-.02em;  /* style guide: -20 */
  line-height:1;          /* style guide: 1 */
  font-size:var(--fs-display);
}
.display--muted{opacity:.24;}      /* ghost/background heading      */
.h2-navy{
  font-family:var(--font-display);
  font-weight:800;
  color:var(--navy);
  letter-spacing:-.02em;
  font-size:var(--fs-h2);
}
.lead{max-width:820px;color:var(--muted);font-size:var(--fs-lead);}
.label{ /* small centred grey label above logo rows */
  text-align:center;color:var(--muted);font-weight:600;
  font-size:18px;margin:44px 0 22px;
}

/* ------------------------------------------------------------
   6. HEADER & NAVBAR  (IFI Academy floating pill style & spacing)
   ------------------------------------------------------------ */
.header, .nav {
  background: var(--surface);
  padding: 1.25rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header .container-wide, .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.container-wide {
  width: 100%;
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.header__logo, .nav-logo {
  display: inline-block;
  flex-shrink: 0;
}
.header__logo img, .nav-logo img {
  height: 44px;
  width: auto;
}

/* Floating Nav Pill */
.header__nav, .nav-menu {
  gap: 2rem;
  color: var(--text-muted);
  border: 1px solid var(--border-nav);
  border-radius: var(--radius-nav);
  justify-content: flex-start;
  align-items: center;
  margin-left: auto;
  padding: 1.3125rem 1.8125rem;
  font-family: var(--font-nav);
  font-weight: 700;
  display: flex;
  background: var(--surface);
}
.header__menu {
  gap: 2rem;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0;
  list-style-type: none;
  display: flex;
}
.header__link, .nav-menu a {
  color: var(--text-muted);
  padding: 0;
  transition: opacity .3s ease, color .3s ease;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}
.header__link:hover, .nav-menu a:hover {
  opacity: 1;
  color: var(--orange-hover);
}
.header__link.active, .nav-menu a.active {
  color: var(--orange);
}

/* Dropdown Pill & Floating Menu (from IFI Academy) */
.dropdown-wrapper, .nav-drop {
  position: relative;
}
.dropdown-toggle, .nav-drop-toggle {
  gap: 4px;
  color: var(--text-muted);
  border-radius: 48px;
  justify-content: flex-start;
  align-items: center;
  padding: 14px 24px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 150%;
  transition: background-color .4s ease, color .4s ease;
  display: inline-flex;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  white-space: nowrap;
}
.dropdown-toggle:hover,
.dropdown-wrapper.open .dropdown-toggle,
.dropdown-toggle.active,
.nav-drop:hover .nav-drop-toggle,
.nav-drop.open .nav-drop-toggle,
.nav-drop-toggle.active {
  color: #fff;
  background-color: var(--orange);
}
.dropdown-toggle-icon {
  margin: 0;
  font-size: 10px;
  transition: transform .3s ease;
  display: inline-block;
  border: none;
  background: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  margin-bottom: 2px;
}
.dropdown-wrapper.open .dropdown-toggle-icon,
.nav-drop.open .dropdown-toggle-icon {
  transform: rotate(225deg);
  margin-bottom: -2px;
}

.dropdown-margin-wrap, .nav-drop-menu {
  margin-top: 10px;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  display: none;
}
.dropdown-wrapper.open .dropdown-margin-wrap,
.nav-drop.open .nav-drop-menu,
.nav-drop.open .dropdown-margin-wrap {
  display: block;
}
.dropdown-padding-wrap {
  background-color: var(--surface);
  border: 0.5px solid var(--border-nav);
  border-radius: var(--radius-dropdown);
  padding: 24px;
  box-shadow: 0 10px 26px rgba(24,26,81,.08);
}
.dropdown-link-wrap {
  gap: 5px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.dropdown-link, .nav-drop-menu a {
  color: #5a5a5a;
  border-radius: 48px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  transition: color .4s ease, background-color .4s ease;
  display: block;
  white-space: nowrap;
}
.dropdown-link:hover,
.dropdown-link.active,
.nav-drop-menu a:hover,
.nav-drop-menu a.active {
  color: #fff;
  background-color: var(--orange);
}

/* Hamburger (3-line from IFI Academy) */
.menu-btn, .nav-toggle {
  cursor: pointer;
  flex-flow: column;
  justify-content: space-between;
  width: 2rem;
  height: 2rem;
  padding: .5rem .375rem;
  display: none;
  background: none;
  border: 0;
}
.menu-btn__line {
  background-color: #121212;
  width: 100%;
  height: .125rem;
  transition: transform .3s, opacity .3s;
}

/* ------------------------------------------------------------
   7. BUTTONS & PILLS  (3D raised style with push-down hover
      from the new IFI style guide — slide //06)
   ------------------------------------------------------------ */
.btn {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-nav);
  font-weight: 700;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-size: 16px;
  border: 1px solid transparent;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  /* 3D raised effect: hard ledge shadow + soft ambient */
  box-shadow: 0 4px 0 var(--navy-2), 0 6px 14px rgba(24,26,78,0.18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover {
  background: var(--orange);
  color: #fff;
  /* Push-down: button sinks, ledge shrinks */
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--orange-shadow), 0 2px 6px rgba(232,129,75,0.18);
}
.btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--orange-shadow), 0 1px 3px rgba(232,129,75,0.12);
}
.btn--orange {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 4px 0 var(--orange-shadow), 0 6px 14px rgba(232,129,75,0.25);
}
.btn--orange:hover {
  background: var(--orange-hover);
  color: #fff;
  transform: translateY(3px);
  box-shadow: 0 1px 0 #9a4e20, 0 2px 6px rgba(232,129,75,0.18);
}
.btn--orange:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #9a4e20, 0 1px 3px rgba(232,129,75,0.12);
}

/* Pill components from IFI Academy */
.pill-row {
  gap: 12px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.pill {
  gap: 8px;
  color: #52537d;
  text-align: center;
  border: 1px solid var(--border-nav);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-weight: 400;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.pill--dark {
  color: #fefbef;
  border-color: #656579;
}
.level-pill {
  background-color: var(--orange-hover);
  border-radius: var(--radius-pill);
  color: #fff;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}
.format-pill {
  background-color: var(--academy-green);
  border-radius: var(--radius-pill);
  color: #fff;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

/* ------------------------------------------------------------
   8. PERSON / TEAM CARD  (navy photo + teal corner bracket)
   ------------------------------------------------------------ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 40px;}
.member{position:relative;}
.member .photo{
  position:relative;aspect-ratio:366/281;background:var(--navy);
  border-radius:var(--radius);overflow:hidden;
}
.member.tall .photo{aspect-ratio:366/360;} /* fellows are taller */
.member .photo img{width:100%;height:100%;object-fit:cover;object-position:center top;}
/* teal corner bracket — sits OUTSIDE the top-left of the photo.
   Placed on .member (not .photo) so the card's overflow:hidden
   doesn't clip it. */
.member::before{
  content:"";position:absolute;top:-13px;left:-13px;width:58px;height:58px;
  border-top:3px solid var(--teal);border-left:3px solid var(--teal);
  border-top-left-radius:18px;z-index:2;pointer-events:none;
}
.member .meta{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-top:18px;}
.member .name{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:var(--fs-name);letter-spacing:-.01em;line-height:1.15;}
.member .role{color:var(--muted);font-size:16px;margin-top:4px;}

/* LinkedIn circle icon */
.li{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--li-blue);display:flex;align-items:center;justify-content:center;transition:transform .15s;}
.li:hover{transform:translateY(-2px);}
.li svg{width:18px;height:18px;fill:#fff;}

/* ------------------------------------------------------------
   9. LOGO WALLS  (funders) + MARQUEE (ecosystem partners)
   ------------------------------------------------------------ */
.logo-row{display:grid;gap:24px;}
.logo-row.cols-4{grid-template-columns:repeat(4,1fr);max-width:1000px;margin:0 auto;}
.logo-row.cols-6{grid-template-columns:repeat(6,1fr);}
.logo-card{
  background:var(--surface);border:1px solid var(--card-border);border-radius:var(--radius);
  height:120px;display:flex;align-items:center;justify-content:center;padding:22px;
}
.logo-card img{max-height:64px;max-width:100%;object-fit:contain;}

.marquee{overflow:hidden;padding:8px 0;position:relative;}
.marquee-track{display:flex;gap:22px;width:max-content;animation:scroll 60s linear infinite;}
.marquee.rev .marquee-track{animation-direction:reverse;animation-duration:72s;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee .logo-card{width:190px;height:120px;flex:0 0 auto;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ------------------------------------------------------------
   10. SPONSOR BLOCK  (solid heading ABOVE a centred logo)
   ------------------------------------------------------------ */
.sponsor{background:var(--cream);text-align:center;}
.sponsor .display{margin-bottom:36px;}
.sponsor img{height:150px;width:auto;margin:0 auto;}

/* ------------------------------------------------------------
   11. FOOTER
   ------------------------------------------------------------ */
footer{background:var(--cream-2);padding-top:70px;}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr .9fr .8fr;gap:40px;align-items:start;}
.contact-card{
  position:relative;background:var(--navy);border-radius:var(--radius-lg);color:#fff;
  padding:36px 32px;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
}
.contact-card::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,transparent 0 38px,rgba(255,255,255,.03) 38px 76px);
}
.contact-card .arrow{
  position:absolute;top:26px;right:28px;width:56px;height:56px;border:2px solid var(--orange);
  border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2;
}
.contact-card .arrow svg{width:22px;height:22px;stroke:var(--orange);}
.contact-card h3{font-family:var(--font-display);font-weight:800;font-size:38px;letter-spacing:-.02em;position:relative;z-index:2;}
.contact-card p{color:#c7cbe6;margin-top:10px;font-size:15px;max-width:230px;position:relative;z-index:2;}
.foot-logo img{height:78px;width:auto;}
.foot-links a{display:block;color:var(--navy);font-size:17px;margin-bottom:16px;transition:color .15s;}
.foot-links a:hover{color:var(--orange);}
.foot-col .colhead{font-weight:400;color:var(--navy);font-size:17px;margin-bottom:16px;}
.news a{display:flex;align-items:center;gap:10px;color:var(--navy);}
.news svg{width:20px;height:20px;fill:var(--orange);}
.foot-bottom{border-top:1px solid var(--rule);margin-top:56px;padding:26px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.foot-bottom .copy{color:var(--muted);font-size:var(--fs-small);}
.foot-bottom .legal{display:flex;gap:34px;}
.foot-bottom .legal a{color:var(--navy);font-size:var(--fs-small);}
.foot-bottom .legal a:hover{color:var(--orange);}

/* ------------------------------------------------------------
   12. CONTENT PAGES  (heroes, long-form prose, arrow lists, icon grids)
   ------------------------------------------------------------ */
/* Centred page hero: big title + intro */
.page-hero{text-align:center;padding-bottom:10px;}
.page-hero .lead{margin:18px auto 0;}

/* Long-form readable column (used on 101 / Missions / Manifesto) */
.prose{max-width:760px;margin:0 auto;}
.prose h2{font-family:var(--font-display);color:var(--navy);font-size:var(--fs-h2);letter-spacing:-.02em;margin:44px 0 14px;}
.prose h3{font-family:var(--font-display);color:var(--navy);font-size:22px;margin:30px 0 10px;}
.prose p{margin:0 0 16px;font-size:17px;}
.prose ul{margin:0 0 20px 22px;}
.prose li{margin:0 0 10px;}
.prose a{color:var(--orange);font-weight:700;} /* style guide: links = Open Sauce Bold */
.prose a.btn{color:#fff;}

/* Arrow list — orange → markers, for punchy value statements */
.arrow-list{list-style:none;display:grid;gap:18px;max-width:820px;margin:0 auto;}
.arrow-list li{position:relative;padding-left:40px;font-size:19px;}
.arrow-list li::before{content:"→";position:absolute;left:0;top:0;color:var(--orange);font-weight:700;font-size:22px;}
.arrow-list.left{margin:0;} /* left-aligned variant */

/* Icon grid — labelled icon cells (audiences, features) */
.icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;}
.icon-grid .cell{background:var(--surface);border:1px solid var(--card-border);border-radius:var(--radius);padding:22px 16px;text-align:center;}
.icon-grid .cell img{height:46px;margin:0 auto 14px;}
.icon-grid .cell .t{font-weight:600;color:var(--navy);}

/* ------------------------------------------------------------
   13. EMBED BLOCK  (Airtable / Softr / portal calendars & grids)
   Drop a live embed URL into the iframe's src. The height is fixed;
   adjust the --embed-h on the wrapper per page if a board needs more
   or less room (e.g. style="--embed-h:1200px").
   ------------------------------------------------------------ */
.embed-wrap{--embed-h:820px;max-width:var(--wrap);margin:0 auto;}
.embed{width:100%;background:var(--surface);border:1px solid var(--card-border);border-radius:var(--radius);overflow:hidden;}
.embed iframe{width:100%;height:var(--embed-h);border:0;display:block;}
.embed-note{ /* small caption under an embed while wiring it up */
  text-align:center;color:var(--muted);font-size:14px;margin-top:12px;
}

/* ------------------------------------------------------------
   14. HOME-PAGE PIECES  (split hero, feature cards, quote)
   ------------------------------------------------------------ */
/* Split hero: heading + taglines + CTA on the left, visual on the right */
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;min-height:66vh;padding:20px 0 40px;}
.hero-split .display{text-align:left;}
.hero-tagline{margin:26px 0 34px;font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.4vw,28px);line-height:1.35;color:#c4cdda;}
/* Home hero illustration: faint globe backdrop + partner logo bubbles ring */
.hero-illo{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:1/1;}
.hero-illo .globe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72%;height:auto;}
.hero-illo .bubble{
  position:absolute;aspect-ratio:1/1;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:3px solid transparent;box-shadow:0 8px 22px rgba(35,43,99,.10);
}
.hero-illo .bubble img{width:64%;height:64%;object-fit:contain;}

/* Feature cards: icon + title + text */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.feature{background:var(--surface);border:1px solid var(--card-border);border-radius:var(--radius);padding:30px;}
.feature img{height:44px;margin-bottom:16px;}
.feature h3{font-family:var(--font-display);color:var(--navy);font-size:20px;margin-bottom:8px;}
.feature p{color:var(--muted);font-size:15px;}

/* Pull quote */
.quote{max-width:920px;margin:0 auto;text-align:center;}
.quote blockquote{font-family:var(--font-display);color:var(--navy);font-weight:800;font-size:clamp(28px,4vw,42px);letter-spacing:-.02em;line-height:1.18;}
.quote .by{color:var(--muted);margin-top:22px;font-weight:600;}

/* ------------------------------------------------------------
   16. IFI-101 SPLIT BLOCKS  (heading/media + text, two-column)
   ------------------------------------------------------------ */
.split-hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.split-hero .display{text-align:left;}
.split-hero p{font-size:17px;margin:0 0 16px;}
.split-hero p:last-child{margin-bottom:0;}

.split-media{display:grid;grid-template-columns:.85fr 1fr;gap:60px;align-items:center;}
.split-media img{width:100%;max-width:458px;height:auto;}
.split-media .display{text-align:left;}
.split-media p{font-size:17px;margin:0 0 16px;}
.split-media p:last-child{margin-bottom:0;}
.split-media ul{margin:0 0 16px 20px;}
.split-media li{margin:0 0 8px;font-size:17px;}

.accent-teal{color:#2BA8A7;}
.accent-orange{color:var(--orange);}

/* Heading + white "build" card split (What We're Building page) */
.split-build{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;}
.build-heading{max-width:520px;flex:1 1 380px;}
.build-heading .display{text-align:left;}
.build-heading p{font-size:17px;margin:16px 0 0;}
.build-card{
  position:relative;background:var(--surface);border:1px solid #bfc1e0;border-radius:16px;
  padding:40px 30px;display:flex;flex-direction:column;gap:22px;max-width:560px;width:100%;flex:1 1 360px;
}
.build-card .connector{position:absolute;top:0;left:50%;transform:translate(-50%,-100%);width:121px;height:56px;}
.build-card .label{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:18px;}
.build-item{display:flex;align-items:center;gap:18px;}
.build-item img{flex:0 0 auto;width:36px;height:36px;}
.build-item p{margin:0;font-size:15px;color:var(--ink);line-height:1.5;}

/* Structures/Incentives/Strategies tabs + diagram + accordion */
.fs-tabs{display:flex;justify-content:center;gap:14px;margin:36px 0 0;flex-wrap:wrap;}
.fs-tab{
  font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--navy);
  background:var(--surface);border:1.5px solid var(--card-border);border-radius:var(--pill);
  padding:11px 24px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.fs-tab:hover{border-color:var(--orange);}
.fs-tab.active{background:var(--navy);border-color:var(--navy);color:#fff;}

.fs-diagram{margin:36px auto 0;max-width:720px;}
.fs-diagram img{display:none;width:100%;height:auto;}
.fs-diagram img.active{display:block;}

.accordion{max-width:820px;margin:56px auto 0;border-top:1px solid var(--card-border);}
.acc-item{border-bottom:1px solid var(--card-border);}
.acc-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:none;border:0;padding:24px 2px;font-family:var(--font-display);
  font-weight:700;color:var(--navy);font-size:20px;text-align:left;cursor:pointer;
}
.acc-plus{position:relative;flex:0 0 auto;width:20px;height:20px;}
.acc-plus::before,.acc-plus::after{content:"";position:absolute;top:50%;left:50%;background:var(--orange);transform:translate(-50%,-50%);}
.acc-plus::before{width:16px;height:2px;}
.acc-plus::after{width:2px;height:16px;transition:opacity .15s;}
.acc-item.open .acc-plus::after{opacity:0;}
.acc-body{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.acc-item.open .acc-body{max-height:5000px;}
.acc-body-in{padding:0 2px 28px;}
.acc-body-in p{margin:0 0 14px;font-size:16px;}
.acc-body-in ul{margin:0 0 14px 20px;}
.acc-body-in ul ul{margin-top:8px;}
.acc-body-in li{margin:0 0 8px;font-size:16px;}

/* Examples: case-study card grid */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px;}
.case{background:var(--surface);border:1px solid var(--card-border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;}
.case-head{padding:26px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;}
.case-head--rose{background:#F6EEFF;}
.case-head--pear{background:#FFF7EF;}
.case-head--green{background:#F2FFF6;}
.case-title{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:19px;letter-spacing:-.01em;line-height:1.2;}
.case-tag{flex:0 0 auto;font-size:12px;font-weight:600;padding:5px 12px;border-radius:var(--pill);white-space:nowrap;}
.case-tag--blue{background:#EFF8FF;color:#2E90FA;}
.case-tag--pear{background:#FEFBE8;color:#CA8504;}
.case-tag--green{background:#EDFCF2;color:#16B364;}
.case-body{padding:26px 24px;flex:1;display:flex;flex-direction:column;text-align:center;}
.case-sub{font-weight:600;color:var(--navy);margin-bottom:16px;font-size:15px;}
.case-body p{font-size:15px;color:var(--ink);margin:0 0 14px;flex:1;}
.case-body a{color:var(--orange);font-weight:600;font-size:15px;}

/* ------------------------------------------------------------
   15. RESPONSIVE
   ------------------------------------------------------------ */
@media(max-width:1100px){
  .icon-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:960px){
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .icon-grid,.feature-grid{grid-template-columns:repeat(2,1fr);}
  .hero-split{grid-template-columns:1fr;min-height:auto;}
  .hero-illo{max-width:420px;margin-top:8px;}
  .split-hero,.split-media{grid-template-columns:1fr;gap:24px;}
  .case-grid{grid-template-columns:repeat(2,1fr);}
  .build-heading,.build-card{max-width:100%;}
  .logo-row.cols-6{grid-template-columns:repeat(3,1fr);}
  .logo-row.cols-4{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .header__nav, .nav-menu {
    background-color: #fefbef;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(100dvh - 5.25rem);
    padding: 1.25rem;
    position: absolute;
    top: 5.25rem;
    left: 0;
    transform: translateY(-120%);
    transition: transform .3s ease;
    z-index: 99;
    border: none;
    border-radius: 0;
    box-shadow: 0 10px 26px rgba(24,26,81,.08);
  }
  .header__nav.open, .nav-menu.open {
    transform: translateY(0);
    display: flex;
  }
  .header__menu {
    background-color: #fefbef;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: auto;
    gap: 1.5rem;
    width: 100%;
  }
  .menu-btn, .nav-toggle {
    margin-left: auto;
    display: flex;
  }
  .dropdown-wrapper, .nav-drop {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    text-align: center;
  }
  .dropdown-toggle, .nav-drop-toggle {
    justify-content: center;
    width: 100%;
  }
  .dropdown-margin-wrap, .nav-drop-menu {
    min-width: 180px;
    transform: translateX(0);
    position: static;
    margin-top: 8px;
    box-shadow: none;
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
  }
  .dropdown-padding-wrap {
    border-radius: 20px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border-nav);
  }
  .dropdown-link, .nav-drop-menu a {
    text-align: center;
    width: 100%;
    margin-bottom: 4px;
  }
}
@media(max-width:600px){
  .grid-3,.icon-grid,.feature-grid,.logo-row.cols-6,.logo-row.cols-4,.case-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  :root{--section-pad:50px;}
}