/* fund-page.css r2 — 2026-08-25.
 *
 * This stamp exists to move the file's content hash, and with it the URL this
 * stylesheet is served from. On 2026-08-25 the CSS URL for a fund page was
 * being rewritten in place and its predecessor deleted on every push, while
 * being served with a ten-year max-age; any CDN edge that read the file
 * mid-write would hold the wreckage indefinitely, for its visitors only. The
 * write path is fixed in 3.13.2, but a poisoned edge entry cannot be reasoned
 * away, so every fund's next push moves to a URL no cache has ever seen.
 * Bump the number here after any future cache incident. */

/* ═══ tokens/fonts.css ═══ */
/* ─────────────────────────────────────────────────────────────
   FONTS — Solving the World's Greatest Problems
   Three families, all served from Google Fonts.
   · Raleway   — primary sans: UI, body, deck headlines
   · Cardo     — editorial serif: hooks, quotes, social headers
   · DM Mono   — labels & data (ALWAYS uppercase, wide tracking)
   ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Cardo:ital,wght@0,400;0,700;1,400;1,700&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap');

/* ═══ tokens/colors.css ═══ */
/* ─────────────────────────────────────────────────────────────
   COLORS — Solving the World's Greatest Problems
   A near-monochrome system: black ground, gold as the ONLY accent.
   Gold draws the eye to the reframe, the number, the next step.
   ───────────────────────────────────────────────────────────── */
.fdm-fund-page {
  /* ---- Ground / neutrals (dark-first brand) ---- */
  --swgp-black:        #000000; /* primary ground */
  --swgp-off-black:    #0b0b0b; /* subtle alternate ground */
  --swgp-charcoal:     #161616; /* contrast ground / dimension */
  --swgp-charcoal-2:   #121110; /* card surface on black */
  --swgp-charcoal-3:   #0f0f0f; /* recessed surface */
  --swgp-white:        #ffffff;
  --swgp-light-gray:   #f4f4f4; /* light ground / card on white */

  /* ---- Gold accent ramp ---- */
  --swgp-gold:         #e4af54; /* PRIMARY accent — the only accent */
  --swgp-gold-light:   #e5cf8f; /* supporting gold, soft emphasis */
  --swgp-gold-deep:    #cb8d24; /* gold for use on light backgrounds */
  --swgp-gold-ink:     #1a1206; /* near-black text that sits ON gold */

  /* ---- Text on dark ground ---- */
  --swgp-text:         #ffffff;            /* primary text */
  --swgp-text-soft:    rgba(255,255,255,0.72); /* body copy */
  --swgp-text-muted:   rgba(255,255,255,0.50); /* labels, captions */
  --swgp-text-faint:   rgba(255,255,255,0.32); /* "before" / deemphasis */

  /* ---- Text on light ground ---- */
  --swgp-ink:          #161616;            /* primary text on light */
  --swgp-ink-soft:     rgba(24,24,24,0.70);
  --swgp-ink-muted:    rgba(24,24,24,0.50);

  /* ---- Lines / hairlines ---- */
  --swgp-line:         rgba(255,255,255,0.14); /* divider on dark */
  --swgp-line-soft:    rgba(255,255,255,0.10);
  --swgp-line-gold:    rgba(228,175,84,0.45);  /* gold rule / accent border */
  --swgp-line-gold-soft: rgba(228,175,84,0.20);
  --swgp-tint-gold:    rgba(228,175,84,0.10);  /* gold wash fill */

  /* ---- Semantic aliases (use these in components) ---- */
  --surface-page:      var(--swgp-black);
  --surface-alt:       var(--swgp-charcoal);
  --surface-card:      var(--swgp-charcoal-2);
  --surface-recessed:  var(--swgp-charcoal-3);
  --accent:            var(--swgp-gold);
  --accent-soft:       var(--swgp-gold-light);
  --on-accent:         var(--swgp-gold-ink);
  --text-strong:       var(--swgp-text);
  --text-body:         var(--swgp-text-soft);
  --text-label:        var(--swgp-text-muted);
  --border:            var(--swgp-line);
  --border-accent:     var(--swgp-line-gold);
}

/* ═══ tokens/typography.css ═══ */
/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY — Solving the World's Greatest Problems
   Three voices working together:
   · Raleway  — PRIMARY face. The default headline face system-wide. Black (900)/Bold
                for headlines, Light (300) for body. Headlines use tight NEGATIVE tracking.
   · Cardo    — SECONDARY face. Use ONLY in social carousel posts (hooks/
                headers/copy — esp. SWGP Funds). NOT in decks, docs, one-pagers,
                or any other surface — those are Raleway (incl. pull-quotes).
   · DM Mono  — eyebrows, labels, data. ALWAYS uppercase, WIDE tracking.
   ───────────────────────────────────────────────────────────── */
.fdm-fund-page {
  /* ---- Families ---- */
  --font-sans:    'Raleway', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Cardo', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Semantic family aliases */
  --font-display: var(--font-sans);  /* PRIMARY: default headlines = Raleway (all surfaces) */
  --font-editorial: var(--font-serif); /* SECONDARY: Cardo — SOCIAL POSTS ONLY, never decks/docs/pull-quotes */
  --font-body:    var(--font-sans);
  --font-label:   var(--font-mono);

  /* ---- Weights ---- */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black:     900; /* @kind font */
  /* Semantic: DEFAULT title/headline weight is Bold (700). Reserve
     ExtraBold/Black for rare, deliberate emphasis — not default titles. */
  --fw-title:     var(--fw-bold); /* @kind font */

  /* ---- Tracking ---- */
  --track-display: -0.045em; /* @kind font */
  --track-head:    -0.035em; /* @kind font */
  --track-tight:   -0.015em; /* @kind font */
  --track-normal:   0; /* @kind font */
  --track-label:    0.16em;  /* @kind font */
  --track-eyebrow:  0.32em;  /* @kind font */

  /* ---- Line heights ---- */
  --lh-display:  0.9; /* @kind font */
  --lh-head:     1.0; /* @kind font */
  --lh-snug:     1.16; /* @kind font */
  --lh-body:     1.46; /* @kind font */
  --lh-loose:    1.6; /* @kind font */

  /* ---- Type scale (rem; 1rem = 16px) ---- */
  --fs-eyebrow:  0.875rem; /* 14 — DM Mono label */
  --fs-caption:  0.9375rem;/* 15 */
  --fs-small:    1rem;     /* 16 */
  --fs-body:     1.1875rem;/* 19 */
  --fs-body-lg:  1.375rem; /* 22 */
  --fs-h5:       1.625rem; /* 26 */
  --fs-h4:       2rem;     /* 32 */
  --fs-h3:       2.75rem;  /* 44 */
  --fs-h2:       3.75rem;  /* 60 */
  --fs-h1:       5rem;     /* 80 */
  --fs-display:  7.5rem;   /* 120 */
}

/* ---- Ready-to-use type roles ---- */
.swgp-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.swgp-label {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-label);
}
.swgp-display {
  font-family: var(--font-display);
  font-weight: var(--fw-title);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  color: var(--text-strong);
}
.swgp-headline {
  font-family: var(--font-display);
  font-weight: var(--fw-title);
  letter-spacing: var(--track-head);
  line-height: var(--lh-head);
  color: var(--text-strong);
}
/* .swgp-hook — a deck/doc subheading or reframe line. Raleway by default
   (Cardo is reserved for social + genuine pull-quotes; see --font-editorial). */
.swgp-hook {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
/* .swgp-quote — a pull-quote. Raleway (Cardo is social-only). */
.swgp-quote {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
.swgp-body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.swgp-stat {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  color: var(--accent);
}

/* ═══ tokens/spacing.css ═══ */
/* ─────────────────────────────────────────────────────────────
   SPACING & RADIUS & LAYOUT — Solving the World's Greatest Problems
   Generous, deliberate spacing. Big air around big statements.
   ───────────────────────────────────────────────────────────── */
.fdm-fund-page {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.75rem;  /* 44 */
  --space-8:   3.5rem;   /* 56 */
  --space-9:   4.5rem;   /* 72 */
  --space-10:  6rem;     /* 96 */
  --space-12:  8rem;     /* 128 */

  /* ---- Radii — restrained. Brand skews square/architectural. ---- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  14px;   /* default card radius */
  --radius-lg:  20px;
  --radius-pill: 999px; /* chips, capsule buttons */

  /* ---- Container widths ---- */
  --container:      1200px;
  --container-wide: 1440px;
  --measure:        66ch;  /* readable body measure */

  /* ---- Slide / canvas references ---- */
  --slide-w: 1920px;
  --slide-h: 1080px;
  --social-w: 1080px;   /* IG / LinkedIn 4:5 */
  --social-h: 1350px;
  --story-w: 1080px;    /* 9:16 */
  --story-h: 1920px;
}

/* ═══ tokens/effects.css ═══ */
/* ─────────────────────────────────────────────────────────────
   EFFECTS — Solving the World's Greatest Problems
   Shadows are quiet (dark-on-dark). Motion is calm: gentle fades and
   small lifts, never bounce. Gold-tinted focus rings.
   ───────────────────────────────────────────────────────────── */
.fdm-fund-page {
  /* ---- Shadows (used sparingly; mostly on light or for floating CTA) ---- */
  --shadow-sm:  0 1px 6px rgba(0,0,0,0.45);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.40);
  --shadow-lg:  0 14px 44px rgba(0,0,0,0.50);
  --shadow-gold: 0 10px 30px rgba(228,175,84,0.22);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px rgba(228,175,84,0.45);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* ---- Hover/press conventions ---- */
  --press-scale: 0.98; /* @kind other */

  /* ---- Brand textures (reference paths from project root) ---- */
  --maze-mark:    url('assets/brand/maze_gold.png'); /* @kind other */
  --bg-gradient:  url('assets/brand/bg_gradient.png'); /* @kind other */
}

/* ═══ styles.css ═══ */
/* ═══════════════════════════════════════════════════════════════
   Solving the World's Greatest Problems — Design System
   Global stylesheet. This file is @import lines ONLY; consumers link
   this one file. All real rules live in the imported token files.
   ═══════════════════════════════════════════════════════════════ */
@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/effects.css');

/* ═══ page resets (from the design export's page-level styles, scoped) ═══ */
.fdm-fund-page a{color:var(--swgp-gold);text-decoration:none}
.fdm-fund-page a:hover{color:var(--swgp-gold-light)}
.fdm-fund-page button{background:none;border:none;font:inherit;color:inherit;cursor:pointer}
/* padding as well as margin. The theme sets p{padding-bottom:1em}, and resetting
 * only the margin left every paragraph on every fund page carrying a blank line
 * underneath it that no rule here accounted for. Sections space themselves with
 * flex gaps and explicit margins, so on top of that the copy read as double
 * spaced — and the gap looked innocent, because the extra line was inside the
 * paragraph's own box rather than between them. */
.fdm-fund-page p,.fdm-fund-page h1,.fdm-fund-page h2,.fdm-fund-page h3,.fdm-fund-page h4,.fdm-fund-page h5{margin:0;padding:0}
.fdm-fund-page img{display:block;max-width:100%}
/* The design export's page wrapper carried these; the shortcode wrapper takes them over. */
.fdm-fund-page{background:var(--swgp-black);color:var(--swgp-text)}
/* ...including the family. The exports set font-family only where they wanted
 * something other than the body face, so most text on a fund page inherits it
 * (55 of the 69 styled text elements on Online Events, for one). Without this
 * line that inheritance walks all the way out to the host <body>, and the page
 * silently wears whatever face the theme, a Divi template, or a page's own
 * leftover Custom CSS last declared there. Online Events had exactly that: a
 * page-local `body{font-family:'Montserrat'}` from the previous hand-built
 * design set every unqualified paragraph in Montserrat while the headings,
 * which do name a family, stayed Raleway. The page owns its own typography. */
.fdm-fund-page{font-family:var(--font-body)}

/* ═══ live-site hardening + polish ═══ */
/* Divi (and most themes) style bare h1–h5 with dark colors via element
 * selectors, which beat inheritance — force headings back to the page's
 * own color unless a section sets one inline. */
.fdm-fund-page :is(h1,h2,h3,h4,h5):not([style*="color"]){color:inherit!important}
/* Pill CTAs carry inline transition rules; give hover/active something to
 * animate (inline styles can't express :hover). */
.fdm-fund-page a[style*="radius-pill"]:hover,.fdm-fund-page button[style*="radius-pill"]:hover{transform:translateY(-2px);filter:brightness(1.1)}
.fdm-fund-page a[style*="radius-pill"]:active,.fdm-fund-page button[style*="radius-pill"]:active{transform:translateY(0) scale(.98)}
/* The "Your Guide" rail is position:sticky, but Divi/theme wrappers clip
 * with overflow:hidden, which disables sticky for all descendants. The
 * real ancestor chain is deep (et_pb_code_inner, entry-content,
 * main-content, et-boc, …), so unclip EVERY ancestor of a fund page —
 * :has(.fdm-fund-page) matches exactly the containing elements. Horizontal
 * protection is restored with overflow-x:clip on body, which (unlike
 * hidden on a wrapper) doesn't create a scroll container or break sticky. */
body :has(.fdm-fund-page){overflow:visible!important}
html{overflow-x:clip}
/* clip (not the theme's hidden) + explicit visible-y: hidden-x forces
 * overflow-y to compute "auto", which turns body into a scroll container
 * that never scrolls — silently un-anchoring every position:sticky on the
 * page (the guide rail). !important because the theme's body rule wins
 * the cascade otherwise. */
body{overflow-x:clip!important;overflow-y:visible!important}
/* Breathing room under the (possible) fixed header/admin bar when stuck. */
.fdm-fund-page [style*="position: sticky"]{top:32px!important}
/* Guide rail scroll-spy: the active section's label turns gold. !important
 * because the resting color is inline on the link. */
.fdm-fund-page .fdm-fp-nav{transition:color .25s ease}
.fdm-fund-page .fdm-fp-nav.is-active{color:var(--swgp-gold)!important}

/* ═══ scale + breathing room (Eric, 2026-07-31) ═══
 * The canvas draft was "compressed editorially" — the live page reads
 * small and dense. Lift the whole composition and open up the sections.
 * zoom scales the px-based inline styles uniformly (supported everywhere
 * we care about, incl. modern Firefox). */
.fdm-fund-page{zoom:1.08;--fdm-page-zoom:1.08}
/* Opt out of the lift. Sets BOTH, deliberately: --fdm-gutter below divides by
 * --fdm-page-zoom, so a page that changed one without the other would compute a
 * gutter for a zoom it is not using. That is exactly how the Foundation Courses
 * hero ended up 54px left of the logo. */
.fdm-fund-page.fdm-page-flat{zoom:1;--fdm-page-zoom:1}

/* ═══ THE PAGE GUTTER — the house rule for left and right margins ═══
 *
 * Content lines up with the site header: its left edge on the logo, its right
 * edge on the last menu button. Every page should use this rather than picking
 * a max-width, so the pages agree with each other and with the navigation.
 *
 *   padding-left:  var(--fdm-gutter);
 *   padding-right: var(--fdm-gutter);
 *
 * Apply it to whichever element owns a section's side padding, and give that
 * element max-width:none — the background stays full bleed and only the content
 * comes in. Centring a narrower box instead is the thing this replaces.
 *
 * Where it comes from: the header centres a --fdm-mega-max-w container and pads
 * it by --fdm-mega-pad-h, so its logo sits at (page - container) / 2 + pad from
 * the left. Reusing the menu's own variables (it emits them on :root) tracks
 * that at every width and keeps tracking it if the container is changed in Menu
 * settings. A fixed inset is only ever right at one window size.
 *
 * Written as 50% - (half the container - the pad) rather than the more obvious
 * (100% - container)/2 + pad because the two are equal but this form divides
 * cleanly by the zoom. Inside a zoomed element, percentages resolve against a
 * containing block that is 1/zoom as wide and the result is scaled back up, so
 * the fixed half has to be divided by the zoom for the sum to land on the logo.
 * That is what lets a page keep the 1.08 lift AND line up.
 *
 * max() floors it on windows narrower than the container, where the arithmetic
 * would otherwise go negative.
 *
 * EXEMPT: a deliberately narrow centred measure (an 800px column of body copy,
 * a centred closing line). A several-hundred-pixel gutter inside an 800px box
 * leaves almost no content width. Those keep their own cap and padding. */
.fdm-fund-page{
	--fdm-gutter: max(calc(var(--fdm-mega-pad-h, 48px) / var(--fdm-page-zoom, 1)), calc(50% - (var(--fdm-mega-max-w, 1440px) / 2 - var(--fdm-mega-pad-h, 48px)) / var(--fdm-page-zoom, 1)));
}
/* The floor is the header's OWN side padding, not a round number.
 *
 * In a window narrower than the container the header stops centring and its
 * content edge simply IS --fdm-mega-pad-h; the subtraction above meanwhile
 * falls through zero, so the floor is what answers for every width below the
 * container. A hardcoded 24px answered 4px wide of the header's 20px, which
 * put the content 6px inside the logo between 1281 and 1399. Using the
 * header's own number means the two agree by construction at those widths
 * too, and it still stops the arithmetic going negative, which is what a floor
 * is for.
 *
 * Divided by the zoom for the same reason the subtraction is: a fixed length
 * inside a zoomed element is scaled on the way out, so 20px of intended margin
 * has to be declared as 20/1.08 to land as 20. */
/* The header narrows its own side padding through the tablet band and again on
 * mobile, so content follows it rather than drifting out of line. */
@media (min-width: 981px) and (max-width: 1280px) {
	.fdm-fund-page{--fdm-gutter: calc(var(--fdm-mega-pad-h-tablet, 28px) / var(--fdm-page-zoom, 1))}
}
@media (max-width: 980px) {
	.fdm-fund-page{--fdm-gutter: calc(24px / var(--fdm-page-zoom, 1))}
}
/* Top-level sections: more vertical room between and within. */
.fdm-fund-page #a-problem,.fdm-fund-page #a-strategy,.fdm-fund-page #a-allocation,
.fdm-fund-page #a-stories,.fdm-fund-page #a-team,.fdm-fund-page #a-community{
	padding-top:84px!important;padding-bottom:96px!important;gap:42px!important}
/* Body copy breathes. */
.fdm-fund-page .swgp-body{line-height:1.62!important}
/* Pill CTAs: uniform size/typography matching the site's Divi buttons
 * (per the live theme: 13px / 700 / sentence case / radius 100px, sized
 * by padding). Colors stay per-button from the inline styles. */
.fdm-fund-page a[style*="radius-pill"],.fdm-fund-page button[style*="radius-pill"]{
	font-family:var(--font-sans)!important;font-size:13px!important;font-weight:700!important;
	letter-spacing:0!important;text-transform:none!important;line-height:1.4!important;
	padding:18px 40px!important;border-radius:100px!important}
/* Guide rail: same uniform button, slightly tighter side padding so it
 * fits the 264px column. */
.fdm-fund-page [style*="position: sticky"] a[style*="radius-pill"]{padding:16px 26px!important}

/* ═══════════════════════════════════════════════════════════
   MOBILE / TABLET — the draft was desktop-only; everything is
   inline-styled, so responsiveness lives here as breakpoint
   overrides keyed off the inline patterns.
   ═══════════════════════════════════════════════════════════ */

/* Grid tracks default to min-width:auto, so a wide child (a video embed, a
 * long unbroken string) can push a column past the viewport. With the page
 * clipping horizontal overflow that reads as text cut off at the edge. */
.fdm-fund-page [style*="grid-template-columns"] > * { min-width: 0; }
.fdm-fund-page [style*="grid-template-columns"] { min-width: 0; }

/* ═══ narrow desktop / landscape tablet (981 to 1200) ═══
 * The guide rail still holds its 264px column here, and the 8 percent zoom
 * inflates everything else, which together overflow the viewport. Drop the
 * zoom and let the paired columns stack so nothing is clipped. */
@media (min-width: 981px) and (max-width: 1200px) {
	/* BOTH, for the reason given where the lift is declared: --fdm-gutter and the
	 * hosted full-bleed breakout below both divide by --fdm-page-zoom, so dropping
	 * the zoom without dropping the variable computes them for a zoom this page is
	 * not using. This band had exactly that mismatch. */
	.fdm-fund-page { zoom: 1; --fdm-page-zoom: 1; }
	.fdm-fund-page [style*="padding: 0px 64px"] { padding: 0 32px 8px !important; }
	.fdm-fund-page [style*="grid-template-columns: 1.05fr 0.95fr"],
	.fdm-fund-page [style*="grid-template-columns: 1.15fr 0.85fr"],
	.fdm-fund-page [style*="grid-template-columns: 1fr 1.1fr"],
	.fdm-fund-page [style*="grid-template-columns: 1fr 1fr"],
	.fdm-fund-page [style*="grid-template-columns: 1fr 270px"],
	.fdm-fund-page [style*="grid-template-columns: 1fr 350px"] { grid-template-columns: 1fr !important; }
	.fdm-fund-page [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
	.fdm-fund-page [style*="grid-template-columns: 1fr 1.1fr 1.2fr"] { grid-template-columns: 1fr !important; }
	.fdm-fund-page [style*="columns: 2"] { columns: 1 !important; }
	.fdm-fund-page .fdm-bio-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (max-width: 980px) {
	/* Guide wrapper stops being a 264px rail + content grid. */
	.fdm-fund-page [style*="grid-template-columns: 264px 1fr"]{display:block!important}
	/* The rail becomes a sticky horizontal chip bar. */
	.fdm-fund-page [style*="position: sticky"]{
		position:sticky!important;top:0!important;z-index:60;
		display:flex!important;flex-direction:row!important;align-items:center;
		gap:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;
		padding:12px 20px!important;margin:0!important;
		background:var(--swgp-black);border-right:0!important;
		border-bottom:1px solid var(--swgp-line)}
	.fdm-fund-page [style*="position: sticky"] > div{
		display:flex!important;flex-direction:row!important;gap:18px}
	.fdm-fund-page [style*="position: sticky"] .swgp-eyebrow{display:none}
	.fdm-fund-page [style*="position: sticky"] a[style*="radius-pill"]{display:none!important}
	.fdm-fund-page .fdm-fp-nav{border-bottom:0!important;padding:6px 0!important;white-space:nowrap;flex:0 0 auto}

	/* Hero: donation form stacks under the copy; tighter gutters. */
	.fdm-fund-page [style*="grid-template-columns: 1fr 350px"]{
		grid-template-columns:1fr!important;padding:110px 28px 48px!important;gap:36px!important}

	/* Allocation partner cards stack. */
	.fdm-fund-page [style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:1fr!important}
	/* Flex children with big minimums stop forcing overflow. */
	.fdm-fund-page [style*="min-width: 420px"]{min-width:0!important}
	/* Cross-site bio cards: their inline grid is fixed 5-across. */
	.fdm-fund-page .fdm-bio-grid{grid-template-columns:repeat(3,1fr)!important}
	/* Content column gutters. */
	.fdm-fund-page [style*="padding: 0px 64px"]{padding:0 32px 8px!important}

	/* Strategy-in-a-nutshell wrapper: same side gutter treatment as the
	 * content column above, since it sits outside that column. */
	.fdm-fund-page [style*="padding: 52px 64px"]{padding:40px 32px!important}
	.fdm-fund-page [style*="grid-template-columns: 1fr 1.1fr 1.2fr"]{grid-template-columns:1fr!important;gap:24px!important}
}

@media (max-width: 740px) {
	/* zoom was a desktop scale-up; phones need the real viewport. BOTH, again:
	 * the gutter and the hosted breakout divide by --fdm-page-zoom. */
	.fdm-fund-page{zoom:1;--fdm-page-zoom:1}

	/* Stack EVERY layout grid… */
	.fdm-fund-page [style*="grid-template-columns"]{grid-template-columns:1fr!important}
	/* …except the small icon+text rows, which stay two-column. */
	.fdm-fund-page [style*="grid-template-columns: 92px 1fr"]{grid-template-columns:64px 1fr!important}
	.fdm-fund-page [style*="grid-template-columns: 48px 1fr"]{grid-template-columns:40px 1fr!important}

	/* Editorial two-column text flows single-column. */
	.fdm-fund-page [style*="columns: 2"]{columns:1!important}

	/* Type scale for small screens (keyed to the inline sizes). */
	.fdm-fund-page [style*="font-size: 84px"]{font-size:clamp(38px,11vw,56px)!important}
	.fdm-fund-page [style*="font-size: 41px"]{font-size:clamp(23px,6.3vw,31px)!important}
	.fdm-fund-page [style*="font-size: 56px"]{font-size:clamp(30px,8.5vw,40px)!important}
	.fdm-fund-page [style*="font-size: 38px"]{font-size:26px!important}
	.fdm-fund-page [style*="font-size: 34px"]{font-size:24px!important}
	.fdm-fund-page [style*="font-size: 25px"],.fdm-fund-page [style*="font-size: 24px"]{font-size:18px!important}

	/* Sections: compact but breathing. */
	.fdm-fund-page #a-problem,.fdm-fund-page #a-strategy,.fdm-fund-page #a-allocation,
	.fdm-fund-page #a-stories,.fdm-fund-page #a-team,.fdm-fund-page #a-community{
		padding-top:52px!important;padding-bottom:60px!important;gap:26px!important}
	.fdm-fund-page [style*="padding: 0px 64px"]{padding:0 18px 8px!important}

	/* Cards tighten. */
	.fdm-fund-page [style*="padding: 48px 52px"]{padding:26px 20px!important}
	.fdm-fund-page [style*="padding: 36px 40px"]{padding:24px 18px!important}
	.fdm-fund-page [style*="padding: 32px 36px"]{padding:24px 18px!important}

	/* Strategy-in-a-nutshell: already stacked to one column by the generic
	 * grid-template-columns rule above, but its 3 children keep the desktop
	 * divider styling (border-left + side padding) meant for sitting next to
	 * each other. Stacked, that reads as a stray vertical rule and lopsided
	 * left/right margins on each block. Swap the divider to a top border on
	 * every child but the first, matching how the desktop layout only shows
	 * a divider between blocks (never before the first one). */
	.fdm-fund-page [style*="padding: 52px 64px"]{padding:32px 20px!important}
	.fdm-fund-page [style*="grid-template-columns: 1fr 1.1fr 1.2fr"]{gap:20px!important}
	.fdm-fund-page [style*="grid-template-columns: 1fr 1.1fr 1.2fr"] > *{padding:0!important;border-left:0!important}
	.fdm-fund-page [style*="grid-template-columns: 1fr 1.1fr 1.2fr"] > *:not(:first-child){border-top:1px solid var(--swgp-line)!important;padding-top:18px!important}

	/* Hero: tighter still; big CTA full-width for thumb reach. */
	.fdm-fund-page [style*="grid-template-columns: 1fr 350px"]{padding:96px 18px 40px!important}
	.fdm-fund-page a[style*="radius-pill"],.fdm-fund-page button[style*="radius-pill"]{padding:16px 30px!important}

	/* Bio cards two-across on phones. */
	.fdm-fund-page .fdm-bio-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}

	/* Guide chip bar slightly tighter. */
	.fdm-fund-page [style*="position: sticky"]{padding:10px 14px!important;gap:14px}
}

@media (max-width: 740px) {
	/* "Let's chat" white capsule: flex-basis-0 text column crushed beside
	 * the button — stack it, and relax the full pill radius once stacked. */
	.fdm-fund-page [style*="padding: 28px 48px"]{flex-direction:column!important;align-items:flex-start!important;padding:24px 24px!important;gap:16px!important;border-radius:28px!important}
	/* Stacked former-columns lose their vertical divider indents. */
	.fdm-fund-page [style*="border-left: 1px solid"]{border-left:0!important;padding-left:0!important}
	/* Long words/URLs can't force sideways clipping. */
	.fdm-fund-page h1,.fdm-fund-page h2,.fdm-fund-page h3,.fdm-fund-page p{overflow-wrap:break-word}
	/* Hero headline safety margin on the clamp. */
	.fdm-fund-page [style*="font-size: 84px"]{font-size:clamp(34px,9.6vw,52px)!important}
}

/* ═══ split bar (fund stat graphic) ═══
 * A single proportion line running the full width under the copy: one
 * bar, two segments, labels above and totals below. Static by choice. */
.fdm-split { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 0; }
.fdm-split__heads { display: flex; gap: 16px; }
.fdm-split__head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fdm-split__name { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--swgp-text-muted); }
.fdm-split__val { font-family: var(--font-sans); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--swgp-text); }
.fdm-split__val span { color: var(--swgp-text-muted); font-weight: 400; font-size: 14px; margin-left: 8px; }
.fdm-split__bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; gap: 3px; background: transparent; }
.fdm-split__seg { height: 100%; border-radius: 999px; }
.fdm-split__foot { display: flex; justify-content: space-between; gap: 16px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--swgp-text-muted); }
@media (max-width: 640px) {
	.fdm-split__heads { flex-direction: column; gap: 10px; }
	.fdm-split__head { width: 100% !important; }
	.fdm-split__foot { flex-direction: column; gap: 4px; }
}

/* Cards in a row match the tallest one. The design's wrapper already
 * stretches to fill its grid cell, but the card box inside it only grew to
 * its own text, so a short card left a gap under it. */
.fdm-fund-page .sc-host-x[style*="height: 100%"] > div { height: 100%; }

/* ═══ video poster (click to play) ═══
 * A raw YouTube iframe paints its own chrome over the thumbnail: title bar,
 * channel avatar, and a Watch on YouTube strip, which double up with the
 * artwork's own title. This shows the clean frame instead and only loads
 * the player once someone actually clicks. */
.fdm-video {
	position: relative; display: block; width: 100%; padding: 0; border: 0;
	aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; cursor: pointer;
	background-color: var(--swgp-charcoal-3);
	/* !important: the theme resets background-size on button elements, which
	 * left the poster at natural size showing only its top left corner. */
	background-size: cover !important; background-position: center !important;
}
.fdm-video__play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 76px; height: 76px; border-radius: 999px;
	background: rgba(20, 14, 8, 0.55); border: 1px solid rgba(255, 255, 255, 0.6);
	display: flex; align-items: center; justify-content: center;
	transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.fdm-video__play::after {
	content: ""; width: 0; height: 0; margin-left: 5px;
	border-style: solid; border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #fff;
}
.fdm-video:hover .fdm-video__play, .fdm-video:focus-visible .fdm-video__play {
	background: var(--swgp-gold); border-color: var(--swgp-gold); transform: translate(-50%, -50%) scale(1.07);
}
.fdm-video:hover .fdm-video__play::after, .fdm-video:focus-visible .fdm-video__play::after { border-left-color: var(--swgp-gold-ink, #1a1206); }
.fdm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ═══ interactive map (region hotspots, no JS) ═══
 * The map ships as a white card, matching the deck. Invisible hotspots sit
 * over each label; hover or focus lifts a dark detail card. Buttons make it
 * work on touch and keyboard too. */
.fdm-map { margin-top: 10px; }
.fdm-map__card { background: #fff; border-radius: 16px; padding: 10px; overflow: visible; }
.fdm-map__stage { position: relative; }
.fdm-map__list { display: none; }
.fdm-map__img { display: block; width: 100%; height: auto; border-radius: 10px; }
.fdm-map__spot {
	position: absolute; transform: translate(-50%, -50%); border: 0; padding: 0; background: transparent;
	border-radius: 10px; cursor: pointer; font: inherit;
	box-shadow: 0 0 0 0 rgba(228, 175, 84, 0); transition: box-shadow .18s ease, background .18s ease;
}
.fdm-map__spot:hover, .fdm-map__spot:focus { outline: none; background: rgba(228, 175, 84, 0.18); box-shadow: 0 0 0 2px var(--swgp-gold); }
.fdm-map__tip {
	position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(6px);
	width: 232px; padding: 14px 16px; border-radius: 12px; text-align: left;
	background: #14110c; border: 1px solid var(--swgp-line-gold, rgba(228,175,84,0.45));
	box-shadow: 0 18px 40px rgba(0,0,0,0.45);
	opacity: 0; visibility: hidden; pointer-events: none; z-index: 5;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.fdm-map__spot:hover .fdm-map__tip, .fdm-map__spot:focus .fdm-map__tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* Hotspots near the edges would push a centred card past the map, so they
 * anchor to their own side instead. */
.fdm-map__spot--start .fdm-map__tip { left: 0; transform: translateX(0) translateY(6px); }
.fdm-map__spot--start:hover .fdm-map__tip, .fdm-map__spot--start:focus .fdm-map__tip { transform: translateX(0) translateY(0); }
.fdm-map__spot--end .fdm-map__tip { left: auto; right: 0; transform: translateX(0) translateY(6px); }
.fdm-map__spot--end:hover .fdm-map__tip, .fdm-map__spot--end:focus .fdm-map__tip { transform: translateX(0) translateY(0); }
.fdm-map__tip-name { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--swgp-gold); }
.fdm-map__tip-val { display: block; margin-top: 6px; font-family: var(--font-sans); font-weight: 700; font-size: 20px; color: #fff; }
.fdm-map__tip-note { display: block; margin-top: 6px; font-family: var(--font-body); font-weight: 300; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,0.72); }
.fdm-map__hint-mobile { display: none; }
.fdm-map__foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--swgp-text-muted); }
@media (max-width: 740px) {
	/* A world map with eight labels is unreadable on a phone. The card
	 * scrolls sideways at a legible width, and the same numbers repeat as a
	 * plain list underneath so nobody has to swipe to read the data. */
	.fdm-map__card { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px; }
	.fdm-map__stage { min-width: 700px; }
	/* No tooltips on phones: a centred card next to an edge hotspot gets
	 * clipped by the scroller, and the list below already carries every
	 * number. The map is simply a picture to swipe here. */
	.fdm-map__spot { pointer-events: none; }
	.fdm-map__tip { display: none; }
	.fdm-map__list { display: flex; flex-direction: column; margin-top: 14px; }
	.fdm-map__row {
		display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
		padding: 9px 2px; border-bottom: 1px solid var(--swgp-line-soft);
		font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
		text-transform: uppercase; color: var(--swgp-text-muted);
	}
	.fdm-map__row span:last-child { font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--swgp-text); }
	.fdm-map__row--focus { color: var(--swgp-gold); }
	.fdm-map__row--focus span:last-child { color: var(--swgp-gold); }
	.fdm-map__foot { flex-direction: column; gap: 4px; }
	.fdm-map__hint-desktop { display: none; }
	.fdm-map__hint-mobile { display: inline; }
}

/* ═══ readability: section markers pop harder (Eric: hard to see) ═══
 * Numbered markers (01 · The Problem, The Strategy in a Nutshell …) step
 * up from 18px/500 to 24px/700; the small sub-heads (The Problem / The
 * Solution / The Definition …) step up and brighten from muted gray to
 * light gold. */
/* line-height matters here: this rule nearly doubles the authored 18px to
 * 35px, and the markers are wide (uppercase + 0.32em tracking), so between
 * roughly 740px and 1100px they wrap to two lines. With no line-height of
 * their own those lines collided — "03: INITIAL / ALLOCATIONS" printed on
 * top of itself. */
.fdm-fund-page [style*="letter-spacing: 0.32em"]{font-size:35px!important;font-weight:700!important;line-height:1.16!important}
/* …but not the nutshell band header — only the numbered content markers grow. */
.fdm-fund-page > *:nth-child(2) [style*="letter-spacing: 0.32em"]{font-size:18px!important;font-weight:500!important}

.fdm-fund-page .swgp-label[style*="font-size: 11px"]{font-size:13.5px!important;color:var(--swgp-gold-light,#e9c98a)!important}
.fdm-fund-page .swgp-eyebrow[style*="font-size: 11px"],.fdm-fund-page .swgp-eyebrow[style*="font-size: 12px"]{font-size:13.5px!important}
@media (max-width: 740px) {
	.fdm-fund-page [style*="letter-spacing: 0.32em"]{font-size:18px!important}
}

/* Bio cards on fund pages: drop the gray card chrome — the photo keeps its
 * rounded corners and the name/role sit directly on the page black. The
 * card's own radius+clip must go too: with the chrome invisible it still
 * rounds the card's bottom corners and shaves the caption's descenders. */
.fdm-fund-page .fdm-bio-card{background:transparent!important;border-radius:0!important;overflow:visible!important}
.fdm-fund-page .fdm-bio-card > div[style*="aspect-ratio"]{border-radius:15px}
.fdm-fund-page .fdm-bio-card > div[style*="padding:12px"]{padding:12px 0 0!important}

/* ═══ allocation rotator (funds can hold 20+ allocations) ═══
 * The JS in the template turns the allocation card grid into a
 * snap-scrolling track: 3 cards per view, 2 on tablet, 1 on phone,
 * arrows underneath (hidden until the cards overflow). */
.fdm-fund-page .fdm-fp-alloc-track{
	display:flex!important;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
	scrollbar-width:none;-ms-overflow-style:none}
.fdm-fund-page .fdm-fp-alloc-track::-webkit-scrollbar{display:none}
.fdm-fund-page .fdm-fp-alloc-track > *{flex:0 0 calc((100% - 40px) / 3);scroll-snap-align:start;min-width:0}
@media (max-width: 980px){.fdm-fund-page .fdm-fp-alloc-track > *{flex-basis:calc((100% - 20px) / 2)}}
@media (max-width: 640px){.fdm-fund-page .fdm-fp-alloc-track > *{flex-basis:100%}}
.fdm-fp-alloc-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.fdm-fp-alloc-btn{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.24);color:var(--swgp-text);font-size:24px;line-height:1;
	cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 3px;
	transition:background .2s,border-color .2s,opacity .2s}
.fdm-fp-alloc-btn:hover{background:rgba(228,175,84,.25);border-color:var(--swgp-gold)}
.fdm-fp-alloc-btn:disabled{opacity:.35;cursor:default;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}

/* Divi paints blockquotes with its blue left border — not on this page. */
.fdm-fund-page blockquote{border-left:0!important;padding-left:0!important}

/* Outbound credential pills (independent reviewers) glow gold on hover. */
.fdm-fund-page a[rel="noopener"][style*="border-radius: 999px"]:hover{
	border-color:var(--swgp-gold)!important;color:var(--swgp-gold)!important}

/* ═══ contained composition (Eric: wall-to-wall → bring the content in) ═══
 * The black backdrop stays full-bleed; every content block below the hero
 * comes in to the page gutter, which tracks the navigation. The hero (header)
 * stays full-bleed edge to edge. */
/* ═══ heroes cannot overflow ═══
 * Every fund hero is a `1fr 350px` grid with an 84px headline beside the
 * donation form. A bare 1fr has an automatic minimum of min-content, so the copy
 * column will not shrink past its widest word; add the 350px card, the 56px gap
 * and the page gutters and the grid's own minimum exceeds the window somewhere
 * under about 1150px. Past that the hero spills over both edges — headline
 * clipped on the left, form clipped on the right — and html/body overflow-x:clip
 * cuts it rather than letting it scroll.
 *
 * minmax(0, …) lets both tracks shrink, and the two columns collapse at 1100
 * rather than waiting for the 980 breakpoint below, which is already too late
 * for a fixed 84px headline. Applies to all 13 heroes at once. */
.fdm-fund-page [style*="grid-template-columns: 1fr 350px"]{
	grid-template-columns:minmax(0,1fr) minmax(0,350px)}
.fdm-fund-page [style*="grid-template-columns: 1fr 350px"] > *{min-width:0}
@media (max-width: 1100px) {
	.fdm-fund-page [style*="grid-template-columns: 1fr 350px"]{
		grid-template-columns:minmax(0,1fr)!important}
	/* The headline is a fixed 84px rather than a clamp, so it needs bringing down
	   at the same point or it is wider than the column it now owns. */
	.fdm-fund-page [style*="grid-template-columns: 1fr 350px"] h1{
		font-size:clamp(38px,7vw,84px)!important}
}

/* ═══ the side margins are the house rule, not a number picked here ═══
 *
 * This was a centred 1320px column inside clamp(16px,3.5vw,48px) of page
 * padding, and it never lined up with the navigation. A fixed column cannot:
 * the menu centres a --fdm-mega-max-w container and pads it by
 * --fdm-mega-pad-h, so its content edge moves with the window while a 1320px
 * box does not. Measured against the logo, the nutshell and chat bands sat 31px
 * outside it at 1280, 42px at 1440, 52px at 1600 and 65px at 1920: drifting
 * further out the wider the window, which is the failure --fdm-gutter exists to
 * end. The 1320px came from the design being drawn as a ~1280px card, which was
 * a fair reading of a static mock and the wrong thing to encode.
 *
 * WHY THE GUTTER IS ON THE CHILDREN AND NOT ON THE WRAPPER.
 *
 * The obvious shape is padding on .fdm-fund-page, with negative margins on the
 * hero and the bands to cancel it. That is what the 1320px version did, and
 * with a fixed clamp() it worked because the same number came out everywhere.
 * It CANNOT work with the gutter, and the reason is quiet: --fdm-gutter is
 * built on 50%, and a percentage resolves against the element's own containing
 * block. Padding the wrapper narrows its content box, so a child's 50% is then
 * half of the NARROWED box, not half the window, and the two gutters are
 * different numbers. calc(var(--fdm-gutter) * -1) on a child therefore cancels
 * the wrong amount: measured at 1600, the child's gutter bottomed out on the
 * max() floor of 24px against the wrapper's 120px, and the hero sat 94px inside
 * the window instead of running wall to wall.
 *
 * So the wrapper carries no side padding at all, every child is full-bleed by
 * default, and each content block pads itself by the gutter. Every one of those
 * percentages then resolves against the same full-width containing block, which
 * is what makes them agree. It also deletes the two band rules this block used
 * to need: a band is now simply a child that has a background, so nothing has
 * to be excluded from a cap that no longer exists, and the :nth-child(2)
 * specificity trap that cost a release goes with them.
 *
 * The gutter divides by --fdm-page-zoom, so this keeps the 1.08 lift AND lands
 * on the logo. See the gutter block above for that arithmetic and for the one
 * exemption (a deliberately narrow centred measure keeps its own cap; nothing
 * at this level is one). */
.fdm-fund-page{padding-left:0;padding-right:0;padding-bottom:48px}
.fdm-fund-page > *{max-width:none;margin-left:0!important;margin-right:0!important}
.fdm-fund-page > *:not(:first-child){
	padding-left:var(--fdm-gutter)!important;
	padding-right:var(--fdm-gutter)!important}
/* The hero runs wall to wall. Named twice on purpose: :first-child is the
 * normal case, and div:first-of-type covers a partial that ships a top-level
 * <style> or <script> and takes the first-child slot away from it. That is the
 * same shift that once put the full-bleed band treatment on an invisible
 * <style> on the Henry page and boxed its nutshell while Trafficking's ran
 * full-bleed. */
.fdm-fund-page > div:first-of-type{padding-left:0!important;padding-right:0!important}
@media (max-width: 740px) {
	.fdm-fund-page{padding-bottom:24px}
	.fdm-fund-page > *:not(:first-child){padding-left:18px!important;padding-right:18px!important}
	.fdm-fund-page > div:first-of-type{padding-left:0!important;padding-right:0!important}
}

/* ═══ Foundation Courses opts out of the contained composition ═══
 * That block assumes the shared fund template: page side gutters on the
 * wrapper, no cap of its own on anything below the hero, and negative margins
 * that cancel the gutters for the hero and the two band sections.
 *
 * The course template breaks all three assumptions. Its sections are already
 * full-bleed and carry their own backgrounds and their own centered 1180px
 * inner container, and — the actual bug — the gutter-cancel rule above is
 * scoped to `> div:first-of-type`, while this template's first child is a
 * <section>. So the hero never cancelled the gutters and the background video
 * sat inset by up to 48px a side instead of running wall to wall.
 *
 * Rather than widen that rule (which would change every fund page), drop the
 * whole composition for this template only.
 *
 * The class is repeated in the selector, and that is not a typo. "Same
 * specificity, placed after them, so it wins on source order" was true of the
 * plain :nth-child(2) rule and NOT of the :nth-child(2 of :not(style):not(script))
 * one added later: that pseudo-class carries the specificity of its own
 * argument list, so the selector is (0,2,1) where this opt-out was (0,2,0), and
 * source order never got a say. The result was that the second and third
 * sections of an opted-out page kept the full-bleed band treatment: on
 * Foundation Courses, #trafficking and #courses-coming-soon sat 96px wider than
 * every other section and 48px to the left of them, and the page scrolled
 * sideways by 48px. Repeating the class makes this (0,3,0), which beats both.
 *
 * Anything added to that nth-child family later must be checked against this
 * number rather than assumed to lose on source order. */
.fdm-fund-page.fdm-course-page{padding-left:0;padding-right:0;padding-bottom:0}
.fdm-fund-page.fdm-course-page.fdm-course-page > *{
	max-width:none!important;
	margin-left:0!important;margin-right:0!important;
	padding-left:0!important;padding-right:0!important}

/* ═══ A page that hosts a fund page is not an article ═══
 * body.fdm-fp-hosted is added by the module wherever the shortcode renders.
 *
 * Every hand-built fund page was laid out in Divi, inside a Code module on a
 * full-width row, so the theme's article furniture was never in the way and
 * nobody had reason to notice it. A page carrying only the shortcode is an
 * ordinary post: the theme boxes it in the content column and prints the page
 * title above it. The first auto-provisioned page arrived looking like a
 * letterbox with a heading on top, and the markup was not the problem.
 *
 * Only the two things that actually interfere: the width cap and the title.
 * Not a blanket reset of the theme's layout, which is the sort of thing that
 * breaks on the next theme update. */
body.fdm-fp-hosted .entry-content,
body.fdm-fp-hosted .et_pb_post_content,
body.fdm-fp-hosted #left-area,
body.fdm-fp-hosted #main-content .container {
	max-width: none !important;
	width: auto !important;
	padding-left: 0 !important; padding-right: 0 !important;
	/* Vertical too. Divi pads the content wrapper top and bottom, and against
	   sections that paint their own background edge to edge that padding reads
	   as a white band above the hero and another under the last section. */
	padding-top: 0 !important; padding-bottom: 0 !important;
	margin-top: 0 !important; margin-bottom: 0 !important;
}
body.fdm-fp-hosted #main-content .container::before { display: none !important; }
body.fdm-fp-hosted #content-area,
body.fdm-fp-hosted article.page { padding: 0 !important; margin: 0 !important; }

/* The sidebar column.
 *
 * Divi's default page layout is right-sidebar: #left-area takes 79.125% and
 * floats, #sidebar takes the rest. Provisioning now sets the postmeta that
 * turns that off, but only on pages it creates — an existing page, or one
 * somebody made by hand, still has it. That is worth handling here rather than
 * in the meta alone, because the failure is not a tidy 21% of empty space: a
 * full-bleed child measures its 100vw breakout against that 79% parent, so the
 * page lurches left by a tenth of the window and the first characters of every
 * line are cut off the screen. */
body.fdm-fp-hosted #left-area {
	width: 100% !important; max-width: none !important;
	float: none !important; padding: 0 !important;
}
body.fdm-fp-hosted #sidebar { display: none !important; }
body.fdm-fp-hosted .entry-title,
body.fdm-fp-hosted .et_post_meta_wrapper > h1 { display: none !important; }
/* The container is centred, so the content still has to break out of whatever
   width survives. Belt to the rule above's braces: this works even where the
   theme's own selectors are named something else entirely.
 *
 * Divided by --fdm-page-zoom, and that is the whole point of this comment.
 * .fdm-fund-page carries zoom:1.08, and a vw length inside a zoomed element is
 * taken as the viewport width and THEN scaled, so a plain `width:100vw` made
 * the wrapper 1.08 viewports wide: 1382px in a 1280px window, centred by a
 * -51px margin, overhanging 51px each side. Percentages are zoom-transparent
 * (the containing block is divided by the zoom and the result scaled back), so
 * only the vw halves need correcting.
 *
 * Nothing looked broken, because body{overflow-x:clip} cut the overhang and a
 * full-bleed photograph does not mind being cropped. What it did break was
 * alignment: every side margin on the page was measured from a left edge 51px
 * off screen. The old composition floored its band padding at 64px, which
 * happened to land 13px inside the window and hid it; the gutter has no such
 * floor, so at 1280 the content went off the left edge and made the bug
 * visible. Off-screen content was the symptom. This is the cause. */
body.fdm-fp-hosted .fdm-fund-page,
body.fdm-fp-hosted .slg {
	width: calc(100vw / var(--fdm-page-zoom, 1));
	max-width: calc(100vw / var(--fdm-page-zoom, 1));
	margin-left: calc(50% - 50vw / var(--fdm-page-zoom, 1));
	margin-right: calc(50% - 50vw / var(--fdm-page-zoom, 1));
}

/* ═══ eyebrow bullets ═══
 * Every eyebrow the design tool emits opens with a small gold square before
 * its label. They go, everywhere, in one rule rather than by editing 32
 * instances across 25 section files, because the exports keep producing them:
 * a rule also covers pages not built yet.
 *
 * The bullets are empty spans, so :empty plus a gold *background* is enough to
 * name them. Both matter. The play triangle beside "Watch the trailer" is also
 * an empty span with a width, but it paints with border-left: var(--swgp-gold-ink)
 * and no background, so requiring "background:" immediately before the token
 * keeps it out. Four spellings because the exports vary in whitespace and in
 * whether they carry the hex fallback.
 *
 * Nothing needs doing about the space they left: the eyebrow is a flex row,
 * and a display:none child generates no box, so its gap is not drawn either. */
.fdm-fund-page span:empty[style*="width"][style*="background: var(--swgp-gold)"],
.fdm-fund-page span:empty[style*="width"][style*="background: var(--swgp-gold,"],
.fdm-fund-page span:empty[style*="width"][style*="background:var(--swgp-gold)"],
.fdm-fund-page span:empty[style*="width"][style*="background:var(--swgp-gold,"] { display: none; }

/* ═══ highlight bullets ═══
 * A short list of claims inside an allocation card.
 *
 * The marker is a ::before, not an element, and that is the whole point. The
 * first attempt drew each bullet as an empty span with a width and a gold
 * background, which is exactly what the rule directly above deletes. The dot
 * vanished — and worse, because a display:none child generates no box, the
 * text beside it became the row's FIRST grid item and landed in the 5px marker
 * column. Every highlight wrapped one word per line. Two lessons in one: read
 * the stylesheet before inventing a pattern, and a hidden grid child does not
 * hold its column. */
.fdm-fund-page .swgp-bullets { display: flex; flex-direction: column; gap: 10px; }
.fdm-fund-page .swgp-bullet { position: relative; padding-left: 16px; }
.fdm-fund-page .swgp-bullet::before {
	content: ""; position: absolute; left: 0; top: 0.58em;
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--swgp-gold); }


/* ═══ page-specific: fde-home ═══ */
/* ════════════════════════════════════════════════════════════════════
   FDE Home (redesign) — faithdrivenentrepreneur.org

   An FDE page, not a solving.org fund: scoped to .fde-home, never
   .fdm-fund-page. Everything the designer set is inline on the elements;
   this file supplies the design's base sheet (wrap, links, button), the
   hover states the mock expressed as a non-standard style-hover attribute,
   the video cards the mock drew as screenshots, the marquee, the lightbox,
   and every responsive rule (the mock has none). !important in the
   responsive block because what it overrides is an inline style.
   ════════════════════════════════════════════════════════════════════ */

.fde-home {
	--fde-orange: #ed5c2e;
	--fde-orange-deep: #d24a20;
	--fde-gold: #c8b378;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	background: #000;
	color: #161616;
	font-family: 'Raleway', -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
.fde-home *,
.fde-home *::before,
.fde-home *::after { box-sizing: border-box; }
.fde-home img { max-width: 100%; }
/* The approved render loaded Raleway italic at 400 and 600 only, so every
   italic accent ("not", "with you.", "image bearer") drew at 600. Matching
   it keeps the headlines on the line breaks the design shows. */
.fde-home em { font-style: italic; font-weight: 600; }

/* The design's centred 1200px column. */
.fde-home .fh-wrap { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; }

/* Breakout: the 2000-year history film runs wider than the column, 90% of
   the viewport, centred. Phones fall back to the normal gutters below. */
.fde-home .fh-wrap.fh-breakout { max-width: none; width: 90vw; padding-left: 0; padding-right: 0; }
@media (max-width: 720px) {
	.fde-home .fh-wrap.fh-breakout { width: auto; padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 430px) {
	.fde-home .fh-wrap.fh-breakout { padding-left: 16px; padding-right: 16px; }
}

.fde-home a { color: var(--fde-orange); text-decoration: none; }
.fde-home a:hover { color: var(--fde-orange-deep); }

/* ── Button (the mock's <x-import … Button size="lg">, computed) ───── */
.fde-home .fh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: 'Raleway', -apple-system, sans-serif;
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 0.01em;
	line-height: 1;
	padding: 16px 30px;
	border-radius: 4px;
	background: var(--fde-orange);
	border: 1.5px solid var(--fde-orange);
	color: #fff;
	cursor: pointer;
	transition: background 140ms var(--ease-out), transform 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.fde-home .fh-btn:hover { background: var(--fde-orange-deep); border-color: var(--fde-orange-deep); color: #fff; transform: translateY(-1px); }
.fde-home .fh-btn--outline { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.fde-home .fh-btn--outline:hover { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: #fff; }

/* Text links with the orange arrow ("Watch & Listen", the four ways). */
.fde-home .fh-textlink {
	font-family: 'Raleway', -apple-system, sans-serif;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #161616;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.fde-home .fh-textlink--light { color: #fff; gap: 10px; }
.fde-home .fh-textlink:hover,
.fde-home .fh-textlink--light:hover { color: var(--fde-orange); }

.fde-home .fh-scroll:hover span { color: rgba(255, 255, 255, 0.8) !important; }
.fde-home .fh-tabs a:hover { color: #fff !important; }

/* Blinking caret. */
@keyframes fhBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.fde-home .fh-caret { animation: fhBlink 1s steps(1) infinite; }

/* ── Reels and episodes ───────────────────────────────────────────── */
/* The mock drew these as screenshots of the live homepage's feed cards,
   play button and caption baked in. These are those cards, live. */
.fde-home .fh-rail::-webkit-scrollbar { display: none; }
.fde-home .fh-reel,
.fde-home .fh-pod {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	background: #161616;
	cursor: pointer;
	transform: translateY(0);
	transition: transform 180ms ease, box-shadow 220ms ease;
}
.fde-home .fh-reel { aspect-ratio: 9 / 16; scroll-snap-align: start; }
.fde-home .fh-pod { aspect-ratio: 16 / 9; border: 1px solid rgba(255, 255, 255, 0.14); }
.fde-home .fh-reel img,
.fde-home .fh-pod img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; margin: 0; }
.fde-home .fh-reel:hover,
.fde-home .fh-pod:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); }
.fde-home .fh-play {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 52px; height: 52px; border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	display: flex; align-items: center; justify-content: center;
	transition: background 200ms, transform 200ms;
}
.fde-home .fh-play span { width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
.fde-home .fh-reel:hover .fh-play,
.fde-home .fh-pod:hover .fh-play { background: var(--fde-orange); transform: translate(-50%, -50%) scale(1.08); }
.fde-home .fh-scrim {
	position: absolute; inset: auto 0 0 0;
	padding: 56px 12px 12px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0) 100%);
}
.fde-home .fh-name {
	color: #fff; font-family: 'Raleway', -apple-system, sans-serif;
	font-size: 13px; font-weight: 600; line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fde-home .fh-pod .fh-name { font-size: 15px; }

/* ── Stats ────────────────────────────────────────────────────────── */
/* One grid for all three rows (subgrid), so the labels line up however
   wide the numbers are. The ghost holds the final value's width so the
   count-up cannot shift the labels. */
.fde-home .fh-stats {
	display: grid;
	grid-template-columns: minmax(clamp(84px, 8vw, 116px), max-content) minmax(0, 1fr);
	column-gap: 28px;
}
.fde-home .fh-stat {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;
	align-items: center;
	padding: 28px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.fde-home .fh-stat-n {
	position: relative;
	font-family: 'Raleway', -apple-system, sans-serif;
	font-size: clamp(56px, 6vw, 84px);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 1;
	white-space: nowrap;
}
.fde-home .fh-ghost { visibility: hidden; }
.fde-home .fh-count { position: absolute; left: 0; top: 0; }
.fde-home .fh-stat-l { font-family: 'Raleway', -apple-system, sans-serif; }

/* ── Voices marquee ───────────────────────────────────────────────── */
@keyframes fhMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - 10px), 0, 0); } }
.fde-home .fh-marquee-track { animation: fhMarquee 72s linear infinite; }
.fde-home .fh-marquee:hover .fh-marquee-track { animation-play-state: paused; }

/* ── Films ────────────────────────────────────────────────────────── */
.fde-home .fh-film .fh-film-play,
.fde-home .fh-dear .fh-dear-play { transition: transform 180ms var(--ease-out); }
.fde-home .fh-film:hover .fh-film-play,
.fde-home .fh-dear:hover .fh-dear-play { transform: scale(1.08); }

/* ── Lightbox (moved to <body> by the script) ─────────────────────── */
.fh-modal {
	position: fixed; inset: 0; z-index: 2147483000;
	background: rgba(0, 0, 0, 0.88);
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
}
.fh-modal[hidden] { display: none; }
.fh-modal-box { width: min(1100px, 100%); }
.fh-modal-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
.fh-modal--vertical .fh-modal-box { width: min(420px, 100%, calc((100vh - 48px) * 9 / 16)); }
.fh-modal--vertical .fh-modal-frame { aspect-ratio: 9 / 16; }
.fh-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fh-modal-x {
	position: absolute; top: 14px; right: 18px;
	width: 44px; height: 44px; border: 0; border-radius: 999px;
	background: rgba(255, 255, 255, 0.12); color: #fff;
	font-size: 30px; line-height: 1; cursor: pointer;
}
.fh-modal-x:hover { background: #ed5c2e; }

/* ── Closing: the pledge roll (a beta of the SWGP home's band) ── */
.fde-home .fh-roll { overflow: hidden; padding: 0 0 88px; margin-top: -40px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fde-home .fh-roll[hidden] { display: none; }
.fde-home .fh-roll__track { display: flex; width: max-content; }
.fde-home .fh-roll__track.is-rolling { animation: fhRollNames 46s linear infinite; }
.fde-home .fh-roll:hover .fh-roll__track { animation-play-state: paused; }
.fde-home .fh-roll__item { display: flex; align-items: center; gap: 14px; padding: 0 28px; white-space: nowrap; }
.fde-home .fh-roll__mark { width: 6px; height: 6px; background: var(--fde-orange); flex: none; }
.fde-home .fh-roll__name { font-family: 'Raleway', -apple-system, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: #fff; }
.fde-home .fh-roll__place { font-family: 'Raleway', -apple-system, sans-serif; font-weight: 300; font-size: 15px; color: rgba(255,255,255,0.6); }
@keyframes fhRollNames { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
	.fde-home .fh-roll__track.is-rolling { animation: none; }
	.fde-home .fh-roll { overflow-x: auto; }
}

/* ── Responsive ───────────────────────────────────────────────────── */
.fde-home h1,
.fde-home h2 { overflow-wrap: break-word; }

@media (max-width: 1000px) {
}

@media (max-width: 720px) {
	.fde-home .fh-wrap { padding-left: 20px; padding-right: 20px; }
	.fde-home .fh-hero { min-height: 0 !important; }
	/* The phone menu is 65px tall: 170px puts the headline ~105px under it. */
	.fde-home .fh-hero-inner { grid-template-columns: 1fr !important; padding-top: 170px !important; padding-bottom: 56px !important; }
	.fde-home .fh-scroll { display: none !important; }
	.fde-home .fh-solving { padding-top: 72px !important; }
	.fde-home .fh-solving-head { grid-template-columns: minmax(0, 1fr) !important; }
	.fde-home .fh-tabs { justify-content: flex-start !important; gap: 22px !important; font-size: 14px !important; }
	.fde-home #fde-home-reels { margin-top: 28px !important; }
	.fde-home .fh-rail { grid-auto-columns: 62% !important; gap: 14px !important; }
	.fde-home #fde-home-pods { margin-top: 48px !important; padding-bottom: 72px !important; }
	.fde-home .fh-sec { padding-top: 72px !important; padding-bottom: 72px !important; }
	.fde-home .fh-stats { column-gap: 18px; }
	.fde-home .fh-stat { padding: 22px 0; }
	.fde-home .fh-stat-l { font-size: 17px !important; }
	.fde-home .fh-voices { padding: 72px 0 !important; }
	.fde-home .fh-voices .fh-marquee { margin-top: 36px !important; }
	.fde-home .fh-history .fh-wrap { padding-top: 72px !important; }
	.fde-home .fh-film { aspect-ratio: 4 / 5 !important; min-height: 0 !important; }
	.fde-home .fh-film-bar { padding: 24px !important; }
	.fde-home .fh-closing .fh-sec { padding-top: 88px !important; padding-bottom: 88px !important; }
	.fde-home .fh-reel:hover,
	.fde-home .fh-pod:hover,
	.fde-home .fh-btn:hover { transform: none; }
}

@media (max-width: 430px) {
	.fde-home .fh-wrap { padding-left: 16px; padding-right: 16px; }
	.fde-home .fh-btns .fh-btn { flex: 1 1 auto; }
	.fde-home .fh-face { width: 220px !important; }
	.fde-home .fh-face > div:first-child { width: 220px !important; height: 276px !important; }
	.fde-home .fh-face > div:nth-child(2) { font-size: 24px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.fde-home * { transition: none !important; }
	.fde-home .fh-caret { animation: none; }
	.fde-home .fh-marquee-track { animation: none; }
	.fde-home .fh-marquee { overflow-x: auto; }
}

/* ── How we run with you: the bento ─────────────────────────────────────
 * Four photo cards. Community leads (tall, left, across two rows), Content
 * and Conference stack to its right, Problems runs the full width beneath.
 * The photo fills each card under a dark fade, and the copy sits on the
 * fade in white. Hover: the photo eases in and the orange rule under the
 * title runs out. Headings and paragraphs state their own colour: Divi's
 * ID selector would otherwise colour them for a light page. */
.fde-home .fh-bento {
	margin-top: 56px;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: minmax(390px, auto);
	gap: 20px;
}
.fde-home .fh-bento__card {
	position: relative; overflow: hidden; isolation: isolate;
	grid-column: span 5;
	display: flex; flex-direction: column; justify-content: space-between;
	min-height: 390px; padding: 28px;
	border-radius: 20px; background: #161616; color: #fff;
}
.fde-home .fh-bento__card--lead { grid-column: span 7; grid-row: span 2; }
.fde-home .fh-bento__card--wide { grid-column: span 7; }
/* Coaching: the Culture Amplifier is the one offer here with a price and a
 * cohort, so it is the card that is set apart by an orange frame. */
.fde-home .fh-bento__card--feature { box-shadow: 0 0 0 2px var(--fde-orange); }
.fde-home .fh-bento__tag {
	margin-right: auto; margin-left: 10px;
	font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
	color: #fff; background: var(--fde-orange); border-radius: 999px; padding: 7px 12px; line-height: 1;
}
.fde-home .fh-bento__img {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; max-width: none; object-fit: cover; display: block;
	transform: scale(1.001); transition: transform 900ms var(--ease-out);
}
.fde-home .fh-bento__shade {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0) 26%),
		linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.62) 62%, rgba(0,0,0,0.9) 100%);
}
.fde-home .fh-bento__card--wide .fh-bento__shade {
	background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.72) 40%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0) 100%);
}
/* Problems: the photo's subject (the panel and its screen) is left of
 * centre, so this card carries its copy on the right and fades from there. */
.fde-home .fh-bento__card--flip { align-items: flex-end; }
.fde-home .fh-bento__card--flip .fh-bento__top { align-self: stretch; }
.fde-home .fh-bento__card--flip .fh-bento__body { max-width: 420px; }
.fde-home .fh-bento__card--wide.fh-bento__card--flip .fh-bento__shade {
	background: linear-gradient(270deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.72) 38%, rgba(0,0,0,0.1) 72%, rgba(0,0,0,0) 100%);
}
.fde-home .fh-bento__top { display: flex; align-items: center; justify-content: space-between; }
.fde-home .fh-bento__num {
	font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.18em;
	color: #fff; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.28);
	border-radius: 999px; padding: 6px 12px; line-height: 1; backdrop-filter: blur(6px);
}
.fde-home .fh-bento__icon {
	width: 42px; height: 42px; border-radius: 999px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--fde-orange); color: #fff;
}
.fde-home .fh-bento__body { max-width: 480px; }
.fde-home .fh-bento__card--lead .fh-bento__body { max-width: 540px; }
.fde-home h3.fh-bento__title {
	margin: 0; padding: 0 0 14px;
	font-family: 'Raleway', -apple-system, sans-serif; font-weight: 700;
	font-size: clamp(30px, 3vw, 40px); letter-spacing: -0.05em; line-height: 1.02;
	color: #fff !important;
	background: linear-gradient(var(--fde-orange), var(--fde-orange)) left bottom / 44px 3px no-repeat;
	transition: background-size 600ms var(--ease-out);
}
.fde-home .fh-bento__card--lead h3.fh-bento__title { font-size: clamp(40px, 4.4vw, 60px); }
.fde-home p.fh-bento__copy {
	margin: 16px 0 0; padding: 0;
	font-family: 'Raleway', -apple-system, sans-serif; font-size: 16px; line-height: 1.6;
	color: rgba(255,255,255,0.86) !important; text-wrap: pretty;
}
.fde-home .fh-bento__card--lead p.fh-bento__copy { font-size: 18px; }
.fde-home .fh-bento__links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 20px; }
.fde-home .fh-bento__links .fh-textlink { font-size: 15px; }
.fde-home .fh-bento__card:hover .fh-bento__img { transform: scale(1.05); }
.fde-home .fh-bento__card:hover h3.fh-bento__title { background-size: 100% 3px; }

@media (max-width: 1000px) {
	.fde-home .fh-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fde-home .fh-bento__card { grid-column: span 1; }
	.fde-home .fh-bento__card--lead { grid-column: 1 / -1; grid-row: auto; min-height: 460px; }
	.fde-home .fh-bento__card--wide { grid-column: span 1; }
}
@media (max-width: 720px) {
	.fde-home .fh-bento { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; }
	.fde-home .fh-bento__card, .fde-home .fh-bento__card--lead, .fde-home .fh-bento__card--wide { grid-column: auto; min-height: 420px; padding: 22px; }
	.fde-home .fh-bento__card--flip { align-items: stretch; }
	.fde-home .fh-bento__card--wide .fh-bento__shade,
	.fde-home .fh-bento__card--wide.fh-bento__card--flip .fh-bento__shade {
		background: linear-gradient(180deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0) 26%), linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.62) 62%, rgba(0,0,0,0.9) 100%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.fde-home .fh-bento__card:hover .fh-bento__img { transform: none; }
}