/* ============================================================
   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 — values mirror the swatches in style-guide.html */
  --navy:#232B63;        /* Navy — headings, dark surfaces          */
  --navy-2:#171D48;      /* deepest navy — button ledge shadow      */
  --navy-soft:#3A4380;   /* softer navy — secondary emphasis        */
  --navy-rgb:35,43,99;   /* --navy as channels, for rgba() shadows  */
  --orange:#E8814B;      /* Orange — the single accent              */
  --orange-hover:#f87a3b;/* brighter orange hover state             */
  --orange-soft:#F9E9DD; /* pale orange — strip/pill backgrounds    */
  --orange-shadow:#b3612e;/* orange button ledge shadow             */
  --orange-ink:#a8571e;  /* darkened orange — accessible link text  */
  --teal-ink:#177a79;    /* darkened teal — accessible teal text     */
  --academy-green:#0d7a5f;/* format pills / tags                    */
  --teal:#17a398;        /* Teal — decorative flourishes only       */
  --wisteria:#d5b4fb;    /* Wisteria Sky — decorative flourishes    */
  --li-blue:#2f6ab3;     /* LinkedIn icon circles                   */

  /* Backgrounds */
  --bg:#f1f6fd;          /* default page background                 */
  --band:#dde6f1;        /* alternating section band (blue-grey)    */
  --cream:#FFFAF4;       /* warm section (funders / partners)       */
  --cream-2:#efe0cc;     /* warm footer background                  */
  --surface:#ffffff;     /* cards / navbar white                    */

  /* Text & Borders */
  --ink:#363E63;         /* body text                               */
  --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:not(.btn):not(.dropdown-link) {
  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:not(.btn):not(.dropdown-link):hover {
  opacity: 1;
  color: var(--orange-hover);
}
.header__link.active, .nav-menu a:not(.btn):not(.dropdown-link).active {
  color: var(--orange);
}

/* "What We're Building" nav dropdown (pill style 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(35, 43, 99,.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(35, 43, 99,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);
}
.btn--night {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 4px 0 var(--navy-2), 0 6px 14px rgba(35, 43, 99,0.18);
}
.btn--night:hover {
  background: var(--navy-soft);
  color: #fff;
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--navy-2), 0 2px 6px rgba(35, 43, 99,0.12);
}
.btn--night:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--navy-2), 0 1px 3px rgba(35, 43, 99,0.1);
}
.btn--outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  box-shadow: 0 3px 0 var(--navy);
  padding: 12px 28px;
}
.btn--outline:hover {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--navy);
  background: rgba(35, 43, 99, 0.05);
  color: var(--navy);
}
.btn--outline:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--navy);
}
.btn--outline-white {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 3px 0 rgba(255, 255, 255, 0.5);
  padding: 12px 28px;
}
.btn--outline-white:hover {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.btn--outline-white:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(255, 255, 255, 0.5);
}
.btn--teal, .btn--seafern {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 4px 0 #1b7a79, 0 6px 14px rgba(43,168,167,0.25);
}
.btn--teal:hover, .btn--seafern:hover {
  background: #33b8b7;
  color: #fff;
  transform: translateY(3px);
  box-shadow: 0 1px 0 #1b7a79, 0 2px 6px rgba(43,168,167,0.18);
}
.btn--teal:active, .btn--seafern:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #1b7a79, 0 1px 3px rgba(43,168,167,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:var(--muted);}
/* 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:var(--teal-ink);}
.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(35, 43, 99,.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;
  }
  .header__menu .btn {
    width: auto;
    margin-top: 0.5rem;
  }
}
@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;}
}

/* ------------------------------------------------------------
   17. MEMBERSHIP / JOIN US COMPONENTS
   ------------------------------------------------------------ */
.hero-dune, .hero-join-us {
  position: relative;
  background-color: var(--cream);
  background-image: linear-gradient(rgba(255, 250, 244, 0.68), rgba(255, 250, 244, 0.78)), url("images/join-us/ifi-join-us.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  min-height: clamp(260px, 32vh, 380px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 6.5vw, 80px) 0;
}
.hero-dune .wrap, .hero-join-us .wrap {
  width: 100%;
}
.hero-dune .lead, .hero-join-us .lead {
  margin: 18px auto 0;
  color: var(--navy);
  font-weight: 500;
}

.intro-wrap {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.intro-wrap p {
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 16px;
}

.segment-helper {
  margin-top: 36px;
  text-align: center;
}
.segment-helper .helper-label {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 14px;
}
.helper-pills {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.hbtn {
  background: var(--surface);
  border: 1.5px solid rgba(35, 43, 99, 0.16);
  border-radius: var(--pill);
  padding: 12px 22px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--navy);
  box-shadow: 0 3px 0 rgba(35, 43, 99, 0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.15s ease, background 0.15s ease;
}
.hbtn:hover {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(35, 43, 99, 0.12);
  border-color: var(--teal);
}
.hbtn.is-active {
  border-color: var(--orange);
  background: #fff8f3;
  color: var(--navy);
  box-shadow: 0 2px 0 var(--orange-shadow);
  transform: translateY(1px);
}
.hbtn b {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
}

.segment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin-top: 36px;
}
@media (max-width: 820px) {
  .segment-grid {
    grid-template-columns: 1fr;
  }
}

.segment-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1.5px solid rgba(35, 43, 99, 0.12);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 6px 18px rgba(35, 43, 99, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  scroll-margin-top: 110px;
  cursor: default;
}
.segment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(35, 43, 99, 0.1);
}

/* Brand top accent stripe on each card */
.segment-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--navy);
}
.card--builder::before { background: var(--orange); }
.card--explorer::before { background: var(--navy); }
.card--learner::before { background: var(--teal); }
.card--subscriber::before { background: var(--wisteria); }

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.card-badge {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: var(--pill);
  white-space: nowrap;
}
.card--builder .card-badge {
  background: #FBE7DC;
  color: var(--orange-shadow);
}
.card--explorer .card-badge {
  background: #E3E4EE;
  color: var(--navy);
}
.card--learner .card-badge {
  background: #DCF1F0;
  color: var(--teal-ink);
}
.card--subscriber .card-badge {
  background: #F1E7FD;
  color: #6d3fa8;
}

.card-desc {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--muted);
  margin-bottom: 28px;
  flex-grow: 1;
}
.card-action {
  margin-top: auto;
}

/* Persistent highlight when card is jumped to */
@keyframes cardSelectPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(232, 129, 75, 0.45);
    transform: translateY(-2px) scale(0.99);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(232, 129, 75, 0.3), 0 16px 36px rgba(35, 43, 99, 0.12);
    transform: translateY(-4px) scale(1.005);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(232, 129, 75, 0.4), 0 14px 32px rgba(35, 43, 99, 0.1);
    transform: translateY(-3px);
  }
}
.segment-card.is-highlighted {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(232, 129, 75, 0.4), 0 14px 32px rgba(35, 43, 99, 0.1);
  transform: translateY(-3px);
  animation: cardSelectPulse 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.academy-note {
  max-width: 880px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}

.movement-box {
  background: var(--surface);
  border: 1.5px solid rgba(43, 168, 167, 0.3);
  border-left: 5px solid var(--teal);
  border-radius: var(--radius);
  padding: 28px 34px;
  margin-top: 28px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(35, 43, 99, 0.04);
}
.movement-box h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  color: var(--navy);
  margin-bottom: 8px;
}
.movement-box p {
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0 auto;
  max-width: 660px;
}

/* FAQ Section */
.faq-kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
}
.faq-list {
  max-width: 820px;
  margin: 36px auto 0;
}
.faq-item {
  background: var(--surface);
  border: 1px solid rgba(35, 43, 99, 0.12);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item[open] {
  border-color: rgba(35, 43, 99, 0.25);
  box-shadow: 0 4px 16px rgba(35, 43, 99, 0.05);
}
.faq-summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color 0.15s ease;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary:hover { color: var(--orange); }
.faq-chev {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--teal-ink);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item[open] .faq-chev {
  transform: rotate(180deg);
}
.faq-answer {
  padding: 0 22px 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

/* Closer Section */
.closer-section {
  background: var(--navy);
  color: #ffffff;
  text-align: center;
  padding: clamp(70px, 9vw, 90px) 0;
}
.closer-section h2 {
  color: #ffffff;
  font-size: clamp(30px, 4.5vw, 44px);
  margin-bottom: 14px;
}
.closer-section .lead {
  color: rgba(255, 255, 255, 0.8);
  margin: 0 auto 34px;
}
.closer-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Reveal Animations */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}