/* The brand book's typefaces (docs/ENWEALTH BRAND BOOK FINAL.pdf, section 09):
   Heuristica for headers and sub-headers, Open Sans for body copy — "Do not
   substitute" either. Both are SIL Open Font License (licences beside the
   files), self-hosted so the site renders the same with no third-party request.

   Open Sans ships as a variable font: one file per subset covers weights
   300-800, and the latin-ext subset downloads only for a page that uses it.
   Heuristica: Bold only — headings are bold, and the page-weight budget
   (cms/tools/budget.py) does not have room for faces a page barely uses.
   Subset to Latin-1 and typographic punctuation: 17 KB. No italic: the book
   shows none, so taglines and quotes are set upright in Bold too. */
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('/assets/fonts/open-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('/assets/fonts/open-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Heuristica';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/heuristica-bold.woff2') format('woff2');
  unicode-range:U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+20AC, U+2122;
}
:root{
      /* TYPE FAMILIES — the brand book's two (see fonts.css). */
      --font-head:"Heuristica",Georgia,"Times New Roman",serif;
      --font-body:"Open Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

      /* ==========================================================
         BRAND PALETTE
         Two brand colours, everything else derived from them.
           Aubergine  #35004F   rgb(53,0,79)
           Lime       #8FC641   rgb(143,198,65)

         Contrast notes (measured, sRGB):
           white on #35004F ......... 16.6:1   AAA
           #8FC641 on #35004F ........ 8.2:1   AAA
           #35004F on white ......... 16.6:1   AAA
           #8FC641 on white .......... 2.0:1   DECORATIVE ONLY - never text
           #16001F on #8FC641 ........ 9.2:1   AAA  (the lime Impact band)
           --muted on white .......... 6.0:1   AA
           --accent-ink on white ..... 5.1:1   AA   (lime dark enough to read)

         HEADINGS (--heading #97BB58), set at the client's request:
           on #16001F footer ......... 9.1:1   AAA
           on #1F002E dark bands ..... 8.7:1   AAA
           on #35004F aubergine ...... 7.6:1   AAA
           on #FFFFFF cards .......... 2.2:1   FAILS AA (needs 4.5, or 3 large)
           on #F8F5FA page ground .... 2.0:1   FAILS AA
           on the #8FC641 Impact band  1.1:1   invisible - excluded below
         It reads well on every dark ground and fails on every light one. That
         is a known, accepted trade; do not "fix" it by silently reverting.
         ========================================================== */
      --brand-plum:#35004f;
      --brand-lime:#8fc641;

      /* Aubergine ramp */
      --plum-900:#260033;   /* deepest ink: text, and text on lime */
      --plum-800:#35004f;   /* dark sections, hero scrim */
      --plum-700:#35004f;   /* gradient partner */
      --plum-500:#4a146b;   /* lifted purple, gradients and hover */
      --plum-300:#7a4e96;   /* mid tint */
      --plum-100:#efe8f4;   /* tinted surface */

      /* Lime ramp */
      --lime-600:#8fc641;   /* pressed / gradient partner */

      /* ------------------------------------------------------------------
         TYPE SCALE — eight steps, and every size on the site is one of them.
         Six are fixed and named below; the display and h1 steps are clamped
         and still expressed inline (see the clamp() declarations further
         down — they are the next thing to consolidate).

         The rule that keeps a system a system: pick the nearest step and
         accept it. If a heading feels slightly too large, the fix is less
         content in it, not a new size. Adding --fs-13 here is how this file
         got to thirty-two sizes the first time.
         ------------------------------------------------------------------ */
      --fs-label:12px;   /* 800 weight, .12em caps — eyebrows, metadata */
      --fs-small:14px;   /* captions, card supporting copy, nav */
      --fs-body:16px;    /* the default for everything anyone reads */
      --fs-lede:18px;    /* standfirsts, section intros */
      --fs-h3:20px;      /* card titles, taglines, quotes, captions */
      --fs-h2:28px;      /* the support drawer's title */

      /* DISPLAY SCALE — the fluid steps. Headings that must hold a page at
         320px and at 1600px cannot be one fixed size, so these are clamps
         rather than pixels. Ten different clamps existed before this block;
         they were the same four intentions written four slightly different
         ways each. Named, they are choosable. */
      --fs-d1:clamp(38px,4.6vw,62px);         /* h1, every page's headline */
      --fs-d2:clamp(34px,4vw,54px);           /* h2, section openers */
      --fs-d3:clamp(28px,3.4vw,42px);         /* smaller section headings */
      --fs-d2-sm:clamp(28px,7.2vw,34px);      /* h2 on small or short screens */
      --fs-body-fluid:clamp(15px,1.15vw,17px);/* hero body copy */

      /* Display numerals are their own role: heavy, tight, tabular figures.
         Each was a fixed size plus a media override; as one fluid value the
         override is no longer needed at all. */
      --fs-num:clamp(27px,2.8vw,38px);        /* stat band */
      --fs-num-sm:clamp(26px,2.2vw,30px);     /* fund yield */

      /* SPACING — a 4px base. Eight steps cover every gap on the site:
         component padding, grid gaps, section rhythm. The names are the
         multiplier, so --space-6 is 6x4px, and the gaps in the numbering
         (there is no --space-5) are deliberate: they are the steps nobody
         needed, and leaving them out is what stops the scale drifting back
         into a continuum. */
      --space-1:4px;
      --space-2:8px;
      --space-3:12px;
      --space-4:16px;
      --space-6:24px;
      --space-8:32px;
      --space-12:48px;
      --space-20:80px;

      /* The journey vignette is an ILLUSTRATION of a dashboard, not page
         text. Its labels are drawn at the scale of the thing depicted, and
         they scale together as one object. Forcing them onto the text scale
         above would not make the system tidier, it would break the drawing.
         Deliberately scoped, deliberately outside the eight steps. */
      --vig-axis:8.5px;
      --vig-label:9px;
      --vig-icon:10px;
      --vig-row:11px;

      /* The ecosystem orbit is a drawing in the same sense: its wordmark and
         spaced capitals scale with the figure (cqi, resolved inside .orbit),
         not with the page. */
      --orbit-word:clamp(18px,4.4cqi,26px);
      --orbit-caps:clamp(9px,1.9cqi,11px);
      --orbit-tag:clamp(8px,1.7cqi,10px);

      --accent-ink:#527c17; /* the only lime safe as text on light */
      --accent-soft:#f1f9e7;

      /* Roles */
      --bg:#f8f5fa;
      --surface:#ffffff;
      --surface-2:#f1ecf5;
      --text:#260033;
      --heading:#97bb58;   /* client-specified heading colour - see note below */
      --muted:#6b5e74;
      --line:#e4dcea;
      --primary:#35004f;
      --accent:#8fc641;
      --hero:#35004f;
      --success:#527c17;

      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --shadow:0 24px 72px rgba(30,10,40,.14);
      --max:1220px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font-body);
      background:var(--bg);
      color:var(--text);
      line-height:1.5;
    }
    img{max-width:100%;display:block}
    /* <picture> carries no semantics and contributes no box of its own, so take
       it out of the layout entirely: the <img> stays the direct layout child of
       whatever wraps it, and every rule written against that parent still
       applies. Without this the hero breaks - .hero-media img is height:100%,
       which resolved against .hero-media's definite height but resolves to auto
       against an inline <picture>, collapsing the full-bleed crop. */
    picture{display:contents}
    a{text-decoration:none;color:inherit}
    button{font:inherit;cursor:pointer}
    .container{width:min(var(--max),calc(100% - 32px));margin:auto}
    .section{padding:86px 0}
    /* A label in spaced small capitals: no pill, no dot, no rule beside it
       (the client's checklist, 2026-09-30; the user, 2026-10-01). */
    .eyebrow{
      display:inline-flex;align-items:center;gap:var(--space-2);
      color:var(--primary);
      font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase
    }
    .eyebrow.on-dark{color:var(--accent)}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      height:48px;padding:0 var(--space-4);border-radius:999px;border:1px solid var(--line);
      background:#fff;color:var(--text);font-weight:700;font-size:var(--fs-small);
      transition:.2s ease;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
    .btn.dark{background:var(--text);border-color:var(--text);color:#fff}
    /* On dark grounds the aubergine primary disappears into the background,
       so the CTA flips to lime with aubergine ink. */
    .dark .btn.primary,
    .newsletter .btn.primary{
      background:var(--accent);border-color:var(--accent);color:var(--plum-900);
      box-shadow:0 14px 34px rgba(22,0,31,.42)
    }
    .dark .btn.primary:hover,
    .newsletter .btn.primary:hover{background:#8fc641;border-color:#8fc641}
    .btn.ghost{background:transparent}
    .btn.small{height:40px;padding:0 14px;font-size:var(--fs-small)}
    .muted{color:var(--muted)}

    /* The label step, as a class. Before this existed it was typed out inline
       nine times — font-size, weight, tracking and case, restated at every
       call site. That is how a scale quietly acquires a step nobody agreed
       to: not by decision, but by copy-paste. */
    .label{
      font-size:var(--fs-label);font-weight:800;
      letter-spacing:.12em;text-transform:uppercase
    }

    /* A section heading pitched below the default h2. It was written inline as
       a flat 42px, which beat the mobile h2 rule and left these three headings
       at 42px on a 390px screen. As a step it scales down like everything
       else. */
    .h2-compact{font-size:var(--fs-d3)}
    .grid{display:grid;gap:var(--space-4)}
    .card{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius-xl);
      box-shadow:0 8px 24px rgba(30,10,40,.05);
      overflow:hidden;
    }
    h1,h2,h3,h4{margin:0;color:var(--heading);font-family:var(--font-head)}
    h1{font-size:var(--fs-d1);line-height:1.08;letter-spacing:-.018em}
    h2{font-size:var(--fs-d2);line-height:1.02;letter-spacing:-.015em}
    h3{font-size:var(--fs-h3);letter-spacing:-.007em}
    p{margin:0}
    /* Body text justified on every screen, with words broken by hyphens so
       the gaps stay even (the user, 2026-10-09): every paragraph, and the
       text of bullet lists — the editor's own lists (RichText marks them
       .rich-list) and the tick and icon lists. Headings, buttons, menus,
       forms and tables keep their alignment. :where() so any component that
       aligns its text wins. Left as they were: paragraphs set as titles,
       quotes or figures in the heading face, where stretched word gaps
       read as a fault; the cover opening's At a glance row, five short
       facts to a row; the roles under board names, and the board cards'
       summaries, a column too narrow to justify without gaps (2026-10-12),
       as are the points with round icons beside a photograph, two columns in
       half the width (2026-10-14); and the few panels centred on purpose. */
    :where(p, :is(.rich-list, .check-list, .glance-icons, .prod-ticks, .ref-ticks, .prose-points) > li, .ref-items ul > li){
      text-align:justify;-webkit-hyphens:auto;hyphens:auto
    }
    :is(.wheel-center, .preview-bar, .story-empty, .story-action, .ref-tile, .spokes-hub, .icon-points) :is(p, li),
    :is(.award-summary-quote, .backdrop-slogan, .board-excerpt, .board-role, .calc-figure, .closing-line, .cover-sub, .feature-quote, .feature-sub,
      .form-done-title, .pay-card-title, .pboard-role, .prose-panel-note, .talk-office),
    :is(.talk-quote, .feature-words, .story-card blockquote) p{text-align:inherit;-webkit-hyphens:manual;hyphens:manual}
    .lead{font-size:var(--fs-lede);line-height:1.78;color:var(--muted)}
    .section-head{
      display:flex;justify-content:space-between;gap:var(--space-8);align-items:end;margin-bottom:var(--space-8)
    }
    .section-head p{max-width:560px}

    /* NAV */
    .nav{
      position:sticky;top:0;z-index:1000;
      backdrop-filter:blur(14px);
      background:rgba(248,245,250,.88);
      border-bottom:1px solid rgba(228,220,234,.9);
    }
    .nav-inner{
      position:relative;height:72px;display:flex;align-items:center;gap:20px
    }
    /* Separates identity from navigation, so the bar reads as two zones
       rather than one undifferentiated strip. */
    .nav-rule{
      width:1px;height:26px;background:var(--line);flex:0 0 auto
    }
    .brand{
      display:flex;align-items:center;
      flex:0 0 auto;
    }
    /* Supplied brand lockup: aubergine wordmark + lime symbol, transparent PNG.
       Sized by height so the 3.86:1 artwork keeps its ratio at any nav height. */
    .brand-logo{
      height:46px;width:auto;display:block
    }
    .nav-links{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0}
    /* Static, so the mega panel positions against .nav-inner, not its tab.
       Centred under a tab, the panel for the leftmost one ran off the screen. */
    .nav-item{position:static}
    /* Tabs, not floating links: the active section is filled, so the header
       tells you where you are. 6px radii keep it distinct from the pill
       language used in page content. */
    .nav-tab{
      height:40px;padding:0 var(--space-3);border:0;background:transparent;border-radius:6px;
      font-weight:600;font-size:var(--fs-small);color:var(--text);letter-spacing:-.002em;
      white-space:nowrap;transition:background .16s ease,color .16s ease
    }
    /* A tab that links out rather than opening a panel (Foundation) needs
       centring a button gets for free. */
    a.nav-tab{display:inline-flex;align-items:center}
    .nav-tab:hover,.nav-item.open .nav-tab{background:var(--surface-2)}
    body[data-nav] .nav-tab[data-nav]{}
    body[data-nav="individuals"] .nav-tab[data-nav="individuals"],
    body[data-nav="businesses"]  .nav-tab[data-nav="businesses"],
    body[data-nav="fund"]        .nav-tab[data-nav="fund"],
    body[data-nav="foundation"]  .nav-tab[data-nav="foundation"],
    body[data-nav="about"]       .nav-tab[data-nav="about"]{
      background:var(--primary);color:#fff
    }

    /* Header actions: two quiet ghosts and one solid CTA. */

    .nav-cta{
      height:38px;padding:0 var(--space-4);border:0;border-radius:6px;
      background:var(--primary);color:#fff;font-size:var(--fs-small);font-weight:700;
      display:inline-flex;align-items:center;gap:var(--space-2);transition:.16s ease
    }
    .nav-cta:hover{background:var(--plum-500)}
    .mega{
      position:absolute;left:50%;transform:translateX(-50%);
      top:calc(100% - 2px);width:min(900px,92vw);display:none;
      background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden
    }
    .nav-item.open .mega{display:grid}
    .mega-inner{display:grid;grid-template-columns:1.2fr 1fr;min-height:280px}
    .mega-main{padding:var(--space-6);border-right:1px solid var(--line)}
    .mega-side{padding:var(--space-6);background:linear-gradient(180deg,#faf7fc,#efe8f4)}
    .mega-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:var(--space-4)}
    /* Three links leave an odd gap in a two-column grid too. */
    .mega-grid:has(> :last-child:nth-child(3)) > :last-child{grid-column:1 / -1}
    .mega-link{
      border:1px solid var(--line);border-radius:18px;padding:var(--space-4);background:#fff
    }
    .mega-link b{display:block;margin-bottom:6px}
    .mega-link span{font-size:var(--fs-small);color:var(--muted);line-height:1.55}
    .mega-side .feature{
      border-radius:20px;padding:20px;background:var(--primary);color:#fff;height:100%;
      display:flex;flex-direction:column;justify-content:space-between
    }
    .mega-side .feature h3{margin-top:var(--space-4);font-size:var(--fs-h3)}
    .mega-side .feature p{
      margin-top:var(--space-3);color:rgba(255,255,255,.72);
      font-size:var(--fs-small);line-height:1.7
    }
    .nav-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto}
    .dropdown-wrap{position:relative}
    .dropdown-menu{
      position:absolute;right:0;top:52px;display:none;width:260px;
      background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:10px
    }
    .dropdown-wrap.open .dropdown-menu{display:block}
    .dropdown-menu a{
      display:flex;align-items:center;gap:var(--space-3);
      padding:var(--space-3) var(--space-3);border-radius:12px;font-size:var(--fs-small)
    }

    /* Country flags -------------------------------------------------
       Inline SVG rather than emoji: Windows renders regional-indicator
       emoji as bare letter pairs (KE, UG) instead of flags, and the demo
       has to look right on the client's machine. */
    .flag-sprite{position:absolute;width:0;height:0;overflow:hidden}
    .flag{
      width:20px;height:14px;flex:0 0 auto;display:block;border-radius:2px;
      box-shadow:0 0 0 1px rgba(22,0,31,.16)
    }
    /* Inside the pill buttons the ring reads as a seam, so soften it. */
    .btn .flag{box-shadow:0 0 0 1px rgba(22,0,31,.10)}
    .dropdown-menu a:hover{background:#f7f3fa}

    /* A portal entry carries a name and a line saying which portal it is, so it
       stacks rather than sitting on one row. `.portal-soon` is a <span>, not an
       <a> — the field's own description says a portal that is not live "renders
       as text, not as a link that disappoints" — so it repeats the padding the
       anchor rule above would otherwise have given it. */
    /* Inside a dropdown, `.dropdown-menu a` (which centres a row) outranks a
       class alone, so the entry names the menu too. */
    .portal-entry,.dropdown-menu .portal-entry{flex-direction:column;align-items:flex-start;gap:2px}
    .dropdown-menu .portal-soon{
      display:flex;flex-direction:column;align-items:flex-start;gap:2px;
      padding:var(--space-3);border-radius:12px;font-size:var(--fs-small);
      color:var(--muted);cursor:default
    }
    .portal-note{font-size:var(--fs-label);color:var(--muted);font-weight:400}
    .mobile-list .portal-soon{display:block;color:var(--muted)}
    .mobile-search{padding:0 var(--space-4) var(--space-2)}
    .mobile-search input{
      width:100%;padding:var(--space-3);border:1px solid var(--line);
      border-radius:12px;font-size:var(--fs-small)
    }
    /* Contextual sub-bar. Appears on section pages only; says where you are
       and what else lives in this section. */
    .subnav{
      background:var(--surface-2);border-bottom:1px solid var(--line)
    }
    .subnav-inner{
      display:flex;align-items:center;gap:var(--space-6);height:46px
    }
    .subnav-crumb{
      flex:0 0 auto;font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;
      text-transform:uppercase;color:var(--primary)
    }
    a.subnav-crumb:hover{text-decoration:underline}
    .subnav-links{
      display:flex;align-items:center;gap:var(--space-6);overflow-x:auto;scrollbar-width:none
    }
    .subnav-links::-webkit-scrollbar{display:none}
    .subnav-links a{
      white-space:nowrap;font-size:var(--fs-small);font-weight:600;color:var(--muted);
      padding:14px 0;border-bottom:2px solid transparent;transition:.16s ease
    }
    .subnav-links a:hover{color:var(--primary)}
    .subnav-links a.is-current{color:var(--primary);border-bottom-color:var(--accent)}

    .mobile-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:12px;width:44px;height:44px}
    .mobile-menu{
      display:none;padding:0 0 var(--space-4)
    }
    .mobile-panel{
      border:1px solid var(--line);background:#fff;border-radius:20px;overflow:hidden
    }
    .mobile-item summary{
      list-style:none;cursor:pointer;padding:var(--space-4) var(--space-4);font-weight:700;border-bottom:1px solid var(--line)
    }
    .mobile-item summary::-webkit-details-marker{display:none}
    /* A top-level mobile entry with no sub-menu, styled to match its neighbours. */
    .mobile-link{
      display:block;padding:var(--space-4) var(--space-4);font-weight:700;border-bottom:1px solid var(--line)
    }
    .mobile-item .mobile-list{
      padding:0 var(--space-4) 14px var(--space-4);background:#faf8fc
    }
    .mobile-item .mobile-list a{
      display:block;padding:var(--space-3) 0;border-bottom:1px dashed #ece4f0;font-size:var(--fs-small);color:#4a3c56
    }
    .mobile-actions{display:flex;gap:10px;padding:14px var(--space-4);flex-wrap:wrap}

    /* ============================================================
       HERO — full-bleed slider
       ============================================================ */
    .hero{
      position:relative;
      /* 72% of the viewport, not all of it. Leaving the next section visibly
         cut is what tells people the page continues - a full-height hero reads
         as the end of the page and measurably reduces scrolling. Capped so it
         is not a mural on a large monitor, floored so it does not crush the
         caption on a 768px laptop. */
      /* width must be definite, or aspect-ratio resolves the other way and
         computes width from height - 591px tall became 1621px wide on a phone. */
      width:100%;
      aspect-ratio:2077 / 757;      /* the artwork's ratio - no crop when it fits */
      min-height:clamp(440px,56vh,660px);
      max-height:780px;
      overflow:hidden;
      background:var(--bg);
      color:var(--text);
      isolation:isolate
    }
    .hero-track{position:absolute;inset:0}

    .hero-slide{
      position:absolute;inset:0;
      opacity:0;visibility:hidden;
      transition:opacity .9s cubic-bezier(.4,0,.2,1),visibility .9s
    }
    .hero-slide.is-active{opacity:1;visibility:visible}

    .hero-media{position:absolute;inset:0;overflow:hidden}
    .hero-media img{
      width:100%;height:100%;object-fit:cover;
      object-position:var(--focal,50% 50%);
      transform:scale(1.02);
      transition:transform 12s linear
    }
    /* Slow Ken Burns drift on the visible slide only. */
    .hero-slide.is-active .hero-media img{transform:scale(1.055)}

    /* Two-axis scrim: vertical for the tab rail, horizontal for the caption.
       Sized so text clears WCAG AA over any photograph underneath. */
    /* Lighten, do not darken. The photography already reserves a pale
       left-hand region for the caption; this only guarantees contrast over it
       and fades out before it reaches the subject. */
    .hero-media:after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(90deg,
        rgba(248,245,250,.96) 0%,
        rgba(248,245,250,.90) 24%,
        rgba(248,245,250,.55) 42%,
        rgba(248,245,250,.10) 58%,
        rgba(248,245,250,0) 68%)
    }

    /* CAPTION */
    .hero-caption{
      position:absolute;left:0;right:0;top:0;bottom:112px;
      display:flex;flex-direction:column;justify-content:center;
      z-index:2;max-width:var(--max)
    }
    .hero-caption > *{max-width:660px}
    .hero-kicker{
      /* The caption is a flex column, so this must opt out of stretching or
         the pill spans the full caption width. */
      display:inline-flex;align-self:flex-start;align-items:center;gap:var(--space-2);
      padding:var(--space-2) 14px;border-radius:999px;
      background:rgba(255,255,255,.72);border:1px solid var(--line);
      backdrop-filter:blur(10px);
      font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
      color:var(--primary)
    }
    /* Only the first slide's headline is the page's h1; the others are h2s
       (one h1 a page, the SEO pass, 2026-10-22) set exactly like it. */
    .hero-caption :is(h1,h2){
      margin-top:var(--space-6);
      font-size:var(--fs-d1);line-height:1.06;letter-spacing:-.018em;
      color:var(--heading);text-wrap:balance
    }
    .hero-caption p{
      margin-top:var(--space-4);font-size:var(--fs-body-fluid);line-height:1.7;
      color:var(--muted);max-width:500px
    }
    .hero-cta{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-6)}

    /* Caption entrance — each element eases up in sequence. */
    .js .hero-slide .hero-kicker,
    .js .hero-slide .hero-caption :is(h1,h2),
    .js .hero-slide .hero-caption p,
    .js .hero-slide .hero-cta{
      opacity:0;transform:translateY(22px)
    }
    .js .hero-slide.is-active .hero-kicker,
    .js .hero-slide.is-active .hero-caption :is(h1,h2),
    .js .hero-slide.is-active .hero-caption p,
    .js .hero-slide.is-active .hero-cta{
      opacity:1;transform:none;
      transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)
    }
    .js .hero-slide.is-active .hero-kicker{transition-delay:.16s}
    .js .hero-slide.is-active .hero-caption :is(h1,h2){transition-delay:.26s}
    .js .hero-slide.is-active .hero-caption p{transition-delay:.36s}
    .js .hero-slide.is-active .hero-cta{transition-delay:.46s}

    /* On a short screen the caption has proportionally less room, so the
       display size steps down rather than colliding with the tab rail. */
    @media (min-width:901px) and (max-height:820px){
      .hero-caption :is(h1,h2){font-size:var(--fs-d3);margin-top:var(--space-4)}
      .hero-caption p{margin-top:14px;font-size:var(--fs-body)}
      .hero-cta{margin-top:var(--space-6)}
    }

    /* CHROME — tabs, counter, controls */
    .hero-chrome{
      position:absolute;left:0;right:0;bottom:0;z-index:3;
      padding-bottom:var(--space-6);
      /* Its own ground: the controls sit over photography that is light on the
         left and dark on the right, so they cannot rely on the image. */
      background:linear-gradient(180deg,rgba(248,245,250,0) 0%,rgba(248,245,250,.86) 26%,rgba(248,245,250,.96) 100%);
      backdrop-filter:blur(6px)
    }
    .hero-chrome-inner{
      display:flex;align-items:flex-end;justify-content:space-between;gap:28px
    }
    .hero-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;flex:1;max-width:760px}
    .hero-tab{
      position:relative;
      display:block;text-align:left;
      background:transparent;border:0;
      padding:20px 20px 0 0;
      color:var(--muted);
      transition:color .25s ease
    }
    .hero-tab:hover{color:var(--text)}
    .hero-tab.is-active{color:var(--text)}
    .tab-rail{
      display:block;height:2px;border-radius:999px;
      background:var(--line);overflow:hidden;margin-bottom:14px
    }
    .tab-fill{
      display:block;height:100%;width:0;background:var(--primary);border-radius:999px
    }
    /* The rail is a readout of the dwell timer, not the clock itself.
       It is paused by default and only runs while the carousel is playing,
       so pausing freezes the bar exactly where it stands. */
    .hero-tab.is-active .tab-fill{
      animation:tabFill var(--dwell,6s) linear forwards;
      animation-play-state:paused
    }
    .hero.is-playing .hero-tab.is-active .tab-fill{animation-play-state:running}
    .hero-tab.is-seen .tab-fill{width:100%}
    @keyframes tabFill{from{width:0}to{width:100%}}
    .tab-title{
      display:block;font-size:var(--fs-small);font-weight:700;letter-spacing:-.003em;line-height:1.35
    }

    .hero-controls{display:flex;align-items:center;gap:10px;padding-bottom:2px}
    .hero-count{
      font-size:var(--fs-small);font-weight:800;letter-spacing:.08em;color:var(--muted);
      margin-right:6px;font-variant-numeric:tabular-nums
    }
    .hero-count .count-now{color:var(--text)}
    .hero-count .count-sep{margin:0 var(--space-1);color:var(--muted)}
    .hero-arrow{
      width:44px;height:44px;flex:0 0 auto;
      display:grid;place-items:center;
      border-radius:50%;
      border:1px solid var(--line);
      background:rgba(255,255,255,.72);
      backdrop-filter:blur(10px);
      color:var(--text);transition:.2s ease
    }
    .hero-arrow:hover{background:#fff;border-color:var(--primary);color:var(--primary)}
    .hero-arrow:active{transform:scale(.94)}
    .hero-toggle .icon-play{display:none}
    .hero.is-paused .hero-toggle .icon-pause{display:none}
    .hero.is-paused .hero-toggle .icon-play{display:block}

    @media (max-width:900px){
      .hero{
        height:auto;
        aspect-ratio:auto;
        min-height:min(70vh,620px);
        min-height:min(70svh,620px);   /* ignored where svh is unsupported */
      }
      /* Slides stack in one grid cell instead of being absolutely positioned,
         so the tallest caption sets the hero's height. Absolute slides cannot
         drive height, which left the caption overflowing a hero shorter than
         its own content. Grid stacking also means no jump between slides,
         because the track is always sized to the tallest. */
      .hero-track{position:relative;display:grid}
      .hero-slide{position:relative;inset:auto;grid-area:1/1}
      /* A 2.74:1 banner cannot hold a side-composed layout on a phone: only
         about a fifth of its width fits, so the caption would land on whatever
         happens to be in that strip. Until portrait crops exist, the photo
         becomes a soft backdrop and the caption stays fully legible. */
      .hero-media img{object-position:58% 50% !important}
      .hero-media:after{
        background:linear-gradient(180deg,
          rgba(248,245,250,.95) 0%,
          rgba(248,245,250,.90) 52%,
          rgba(248,245,250,.78) 100%)
      }

      .hero-caption{
        /* bottom and display must be reset: a leftover bottom:124px on a
           relatively positioned box shifts it up by 124px. */
        position:relative;top:auto;bottom:auto;transform:none;display:block;
        padding-top:120px;padding-bottom:250px
      }
      .hero-caption p{max-width:none}
      .hero-chrome-inner{flex-direction:column;align-items:stretch;gap:var(--space-4)}
      .hero-tabs{max-width:none}
      .hero-controls{justify-content:flex-start}
      /* Titles would wrap to three lines in a narrow column; numbers carry it. */
      .tab-title{display:none}
      .hero-tab{padding-right:var(--space-3)}
    }
    @media (max-width:640px){
      .hero-caption{padding-top:84px;padding-bottom:240px}
      .hero-cta{flex-direction:column;align-items:stretch}
      .hero-cta .btn{width:100%}
      .hero-chrome{padding-bottom:var(--space-6)}
    }

    /* STATS */
    .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
    .stat{padding:var(--space-6)}
    .stat .num{
      font-size:var(--fs-num);font-weight:700;letter-spacing:-.013em;
      /* Equal-width digits so a counting number does not shimmer. */
      font-variant-numeric:tabular-nums;display:inline-block
    }
    .stat .cap{font-size:var(--fs-small);color:var(--muted);margin-top:6px}

    /* JOURNEYS */
    .journeys{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
    /* The vignette is taller than the old glyph tile, so the card's height now
       comes from its content. The 268px floor it used to carry is gone. */
    .journey{
      padding:var(--space-6);display:flex;flex-direction:column;justify-content:space-between
    }
    /* Still used by the Impact pillars and the Individuals solutions grid. */
    .icon{
      width:46px;height:46px;border-radius:14px;background:#efe8f4;color:var(--primary);
      display:grid;place-items:center;font-size:var(--fs-h3);font-weight:900;margin-bottom:var(--space-6)
    }

    /* Journey vignettes -------------------------------------------
       Each card leads with a small panel showing the product itself - a fund
       list, a projection, a cover schedule, an administration queue - instead
       of a glyph. For a pensions administrator the product is the interface,
       so this says what Enwealth does rather than how it feels.

       Drawn here rather than shipped as four images. Decoration is the wrong
       thing to spend image requests on, and there is no product photography to
       use; the gradient comes off the aubergine ramp so it stays in the brand
       family rather than being a colour invented for one component.

       The content is structural on purpose: labels and shapes, never a yield,
       balance or percentage. A figure in here would be a claim, carrying the
       same disclosure obligations as the fund cards in #investments.

       aria-hidden on the container, not on the SVGs: the heading and body
       below already say what each card is, so reading out "Funds, Money
       market, Dollar, Balanced" ahead of them is noise rather than access. */
    .journey-vignette{
      aspect-ratio:2/1;
      border-radius:var(--radius-md);
      background:linear-gradient(158deg,var(--plum-500) 0%,var(--plum-700) 46%,var(--plum-800) 100%);
      overflow:hidden;margin-bottom:20px;padding:var(--space-3) 14px;
      display:flex;flex-direction:column;gap:var(--space-2)
    }

    .vig-rows li{padding-bottom:var(--space-1);border-bottom:1px solid rgba(255,255,255,.1)}
    .vig-rows li:last-child{padding-bottom:0;border-bottom:0}

    /* The chart is the flexible row, so it needs min-height:0 - without it a
       flex item refuses to shrink below its intrinsic height and pushes the
       panel out of its 2:1 ratio. */

    /* Lime straight off the ramp: 6.6:1 on the composited pill ground. */
    .vig-pill.is-done{background:rgba(143,198,65,.2);color:var(--accent)}
    .vig-pill.is-due{background:rgba(255,255,255,.14);color:rgba(255,255,255,.78)}
    .arrow{color:var(--primary);font-weight:800;margin-top:var(--space-6)}

    /* ECOSYSTEM */
    .dark{
      background:var(--hero);color:#fff
    }
    .dark .lead,.dark .section-head p{color:rgba(255,255,255,.68)}
    .ecosystem{
      display:grid;grid-template-columns:1fr .95fr;gap:var(--space-6);align-items:center
    }
    /* The orbit: pillars on concentric rings around the brand, drawn in light
       lines and white cards so it reads on the aubergine ground. .orbit is the
       size container and everything inside is sized in cqi, so the figure
       scales as one piece from a phone to the desktop column. */
    .orbit{position:relative;width:100%;max-width:560px;margin:auto;container-type:inline-size}
    .wheel{
      width:100%;                /* without this it shrinks to its centre disc */
      aspect-ratio:1;border-radius:50%;position:relative;display:grid;place-items:center
    }
    .orbit-ring{
      position:absolute;left:50%;top:50%;aspect-ratio:1;border-radius:50%;
      transform:translate(-50%,-50%);pointer-events:none
    }
    .orbit-ring.r1{width:97%;border:1px solid rgba(255,255,255,.1)}
    .orbit-ring.r2{width:79%;border:1px dotted rgba(155,114,174,.45)}
    .orbit-ring.r3{width:68%;border:1px solid rgba(255,255,255,.08)}
    .orbit-ring.r4{width:53%;border:1px solid rgba(155,114,174,.4)}
    .orbit-dot{
      position:absolute;left:calc(50% + var(--nx));top:calc(50% + var(--ny));
      width:8px;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
      background:var(--accent);pointer-events:none
    }
    .orbit-dot.violet{background:#9b72ae}
    /* d1-d6 sit on the inner ring (radius 26.5%), d7-d10 on the dotted one
       (39.5%), each at an angle that clears the cards. */
    .d1{--nx:0%;--ny:-26.5%}
    .d2{--nx:26.5%;--ny:0%}
    .d3{--nx:18.74%;--ny:18.74%}
    .d4{--nx:0%;--ny:26.5%}
    .d5{--nx:-18.74%;--ny:18.74%}
    .d6{--nx:-26.5%;--ny:0%}
    .d7{--nx:22.66%;--ny:-32.36%}
    .d8{--nx:34.88%;--ny:18.55%}
    .d9{--nx:0%;--ny:39.5%}
    .d10{--nx:-34.88%;--ny:18.55%}
    .wheel-center{
      position:relative;z-index:1;width:40%;aspect-ratio:1;border-radius:50%;
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6cqi;
      padding:0 5cqi;text-align:center;color:var(--primary);
      background:#fff;
      box-shadow:0 30px 70px rgba(8,0,14,.5)
    }
    /* Nodes are placed polar rather than by hand-tuned edge offsets, so seven
       of them sit evenly on the ring instead of leaving gaps. --nx/--ny are the
       offsets from centre; the translate re-centres each card on its point. */
    .wheel-node{
      position:absolute;z-index:2;
      left:calc(50% + var(--nx));
      top:calc(50% + var(--ny));
      transform:translate(-50%,-50%);
      display:flex;align-items:center;gap:2cqi;
      padding:1.2cqi 3cqi 1.2cqi 1.2cqi;border:0;border-radius:999px;white-space:nowrap;
      background:#fff;color:var(--text);font-family:inherit;font-weight:700;font-size:var(--fs-small);
      box-shadow:0 14px 34px rgba(8,0,14,.38)
    }
    /* Right-hand cards carry the icon on their outer edge; Grow, at the top,
       stacks it above the label and lets it break the card's edge. */
    .wheel-node.flip{flex-direction:row-reverse;padding:1.2cqi 1.2cqi 1.2cqi 3cqi}
    .wheel-node.stack{flex-direction:column;gap:1cqi;padding:0 4.4cqi 2.2cqi;border-radius:5cqi}
    .wheel-node.stack .node-icon{margin-top:-3.6cqi;box-shadow:0 0 0 1cqi #fff}
    .node-icon{
      display:grid;place-items:center;flex:0 0 auto;
      width:clamp(30px,7.6cqi,44px);aspect-ratio:1;border-radius:50%;
      background:var(--accent-soft);color:var(--primary)
    }
    .node-icon.lilac{background:#ece3f6}
    .node-icon svg{width:54%;height:54%}
    .orbit-note{
      position:absolute;margin:0;font-size:var(--orbit-caps);font-weight:600;letter-spacing:.22em;
      text-transform:uppercase;line-height:1.8;color:#9b72ae
    }
    .orbit-note.top{top:-2%;right:0}
    .orbit-note.top::after{content:"";display:block;width:64px;height:1px;margin-top:var(--space-3);background:currentColor;opacity:.6}
    .orbit-note.bottom{bottom:-4%;left:0;display:flex;align-items:center;gap:var(--space-6)}
    .orbit-note.bottom::before{content:"";width:48px;height:1px;background:currentColor;opacity:.6}
    /* On a phone the corners are taken by the cards, and a 12px label keeps the
       outer cards inside the figure. The hub grows so the tagline stays on one
       line inside the disc. */
    @media (max-width:640px){
      .orbit .orbit-note{display:none}
      .wheel-node{font-size:var(--fs-label)}
      .wheel-center{width:46%}
      .orbit .wheel-center .hub-copy{letter-spacing:.04em}
    }
    .n1{--nx:0.00%;--ny:-38.00%}   /* Grow */
    .n2{--nx:29.71%;--ny:-23.69%}   /* Invest */
    .n3{--nx:37.05%;--ny:8.46%}   /* Protect */
    .n4{--nx:16.49%;--ny:34.24%}   /* Retire */
    .n5{--nx:-16.49%;--ny:34.24%}   /* Impact */
    .n6{--nx:-37.05%;--ny:8.46%}   /* Digital */
    .n7{--nx:-29.71%;--ny:-23.69%}   /* Advise */

    /* DIGITAL / INVESTMENTS / INSIGHTS */
    .tiles-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
    /* Five tiles (the Enwealth Capital funds): five across on a wide screen,
       and where the grid pairs tiles up, the odd one out takes the full row. */
    @media (min-width:1081px){.tiles-4.tiles-5{grid-template-columns:repeat(5,1fr)}}
    @media (min-width:641px) and (max-width:1080px){.tiles-5 > :last-child{grid-column:1 / -1}}
    .portal-tile,.fund-tile{padding:var(--space-6)}
    .tag{
      display:inline-flex;padding:var(--space-2) 10px;border-radius:999px;background:#f1ecf5;color:#5c4d68;font-size:var(--fs-label);font-weight:700
    }

    .insights{
      display:grid;grid-template-columns:1.5fr .75fr .75fr;gap:var(--space-4)
    }
    .article{
      position:relative;min-height:300px;border-radius:28px;overflow:hidden;color:#fff;display:flex;align-items:end
    }
    .article img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .article:after{
      content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.65))
    }
    .article .content{position:relative;z-index:1;padding:var(--space-6)}
    /* The overlay card's text sits on a photograph, so it is white whatever
       utility classes are used inside it. These rules were missing because the
       partial that used .article was retired before it shipped, which left a
       component in the stylesheet that renders green-on-grey the moment
       anything uses it again. */
    .article .content h3,
    .article .content h3 a{color:#fff}
    .article .content p{color:rgba(255,255,255,.86)}
    .article .content .cap{color:rgba(255,255,255,.72)}
    .article.small{min-height:240px}

    /* FOOTPRINT */
    .footprint{
      display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-4)
    }
    .map-card{padding:var(--space-6);background:linear-gradient(150deg,#f1ecf5,#fbf9fd)}
    .map-wrap{
      border-radius:22px;background:transparent;position:relative;
      display:flex;flex-direction:column;gap:14px
    }

    /* Africa map -------------------------------------------------
       Geometry generated from Natural Earth (public domain) by
       tools/build_map.py - see that script to regenerate or reframe. */
    .africa-map{width:100%;height:auto;display:block;overflow:visible}
    .africa-map .country{
      fill:#ded1e8;stroke:#f6f2f9;stroke-width:1;
      transition:fill .2s ease
    }
    .africa-map .country.is-market{fill:var(--primary)}
    .africa-map .country.is-hot{fill:var(--plum-500)}

    .pin-hit{fill:transparent}          /* generous touch target */
    .pin-halo{
      fill:var(--accent);opacity:.28;
      transform-box:fill-box;transform-origin:center;
      transition:opacity .2s ease,transform .2s ease
    }
    .pin-dot{
      fill:var(--accent);stroke:#fff;stroke-width:2.5;
      transform-box:fill-box;transform-origin:center;
      transition:transform .2s ease
    }
    .pin-link{cursor:pointer}
    .pin-link:hover .pin-halo,.pin-link:focus-visible .pin-halo{opacity:.5;transform:scale(1.25)}
    .pin-link:hover .pin-dot,.pin-link:focus-visible .pin-dot{transform:scale(1.2)}
    .pin-link:focus-visible{outline:none}
    .pin-link:focus-visible .pin-dot{stroke:var(--primary);stroke-width:3.5}
    /* Gentle pulse so the pins read as interactive rather than decoration. */
    @keyframes pinPulse{0%{opacity:.28;transform:scale(1)}50%{opacity:.12;transform:scale(1.4)}100%{opacity:.28;transform:scale(1)}}
    .africa-map .pin-halo{animation:pinPulse 3.2s ease-in-out infinite}
    .pin-link:nth-of-type(2) .pin-halo{animation-delay:.5s}
    .pin-link:nth-of-type(3) .pin-halo{animation-delay:1s}

    .map-legend{
      list-style:none;margin:0;padding:0;
      display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)
    }
    .map-link{
      display:inline-flex;align-items:center;gap:var(--space-2);
      font-size:var(--fs-small);font-weight:700;color:var(--text);
      padding:6px 0
    }
    .map-link .muted{font-weight:500}
    .map-link:hover{color:var(--primary)}
    .legend-dot{
      width:10px;height:10px;border-radius:50%;background:var(--accent)
    }

    /* Market cards beside the map */
    .footprint-copy{padding:28px;display:flex;flex-direction:column;justify-content:center}
    .market-grid{display:grid;gap:10px;margin-top:var(--space-6)}
    .market-card{
      display:grid;gap:var(--space-1);
      padding:var(--space-4) var(--space-4);border:1px solid var(--line);border-radius:16px;
      background:var(--surface);transition:.18s ease
    }
    .market-card:hover{border-color:var(--primary);transform:translateX(3px)}
    .market-head{display:flex;align-items:center;gap:10px;font-size:var(--fs-body)}
    .market-card .muted{font-size:var(--fs-small)}
    .market-card .arrow{margin-top:6px;font-size:var(--fs-small)}

    /* Country microsite pages */
    .country-hero-grid{
      display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-top:var(--space-8)
    }
    .country-card{padding:var(--space-6);display:grid;gap:var(--space-4);justify-items:start}
    .country-flag{width:56px;height:39px;border-radius:4px;box-shadow:0 0 0 1px rgba(22,0,31,.16)}
    .country-name{font-size:var(--fs-h3)}
    .country-facts{margin:0;display:grid;gap:var(--space-3);width:100%}
    .country-facts div{display:grid;gap:2px}
    .country-facts dt{
      font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)
    }
    .country-facts dd{margin:0;font-size:var(--fs-body);font-weight:700}
    /* An office's address, phones and email: set as the facts are, but as text
       someone copies or taps rather than a label to read. */
    .country-facts address{font-style:normal}
    .country-facts dd a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
    /* Not .figures-note: that class already sets pale text for a dark section. */
    .country-note{margin:0;max-width:34ch}
    /* Three tiles (Uganda's schemes and funds): three across on a wide screen,
       and where the grid pairs tiles up, the odd one out takes the full row. */
    @media (min-width:1081px){.tiles-4.tiles-3{grid-template-columns:repeat(3,1fr)}}
    @media (min-width:641px) and (max-width:1080px){.tiles-3 > :last-child{grid-column:1 / -1}}

    @media (max-width:1080px){
      .country-hero-grid{grid-template-columns:1fr}
    }

    /* IMPACT */
    /* The one full-field lime band on the page. Impact is the section that
       should feel energetic, and lime carries dark text at 9.2:1 - it can
       never carry white, so everything inside flips to aubergine ink. */
    .green{
      background:linear-gradient(160deg,var(--brand-lime),var(--lime-600));
      color:var(--plum-900)
    }
    .green .section-head p,.green .lead{color:rgba(22,0,31,.74)}
    /* The one place --heading is not used: #97BB58 on this lime ground is
       1.1:1, which is not low contrast but invisible - the heading would simply
       not be there. Aubergine ink stays. */
    .green h2,.green h3{color:var(--plum-900)}
    .impact-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
    .impact-card{
      min-height:220px;padding:var(--space-6);border:1px solid rgba(22,0,31,.16);
      background:rgba(255,255,255,.34);border-radius:24px
    }
    /* Icon tiles invert: aubergine tile, lime glyph. */
    .green .icon{background:var(--primary);color:var(--accent)}

    /* CTA / FOOTER */
    .cta{padding:42px}
    footer{
      background:var(--primary);color:#fff;padding:56px 0 28px
    }
    .footer-grid{
      display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:var(--space-8)
    }
    footer p,footer a{color:rgba(255,255,255,.66);font-size:var(--fs-small);line-height:1.85}
    /* The CMS front end uses h2 for these so the heading outline does not jump
       two levels on a page whose content heading is h1; the static build's h4 is
       correct there, because its pages carry h2s and h3s above the footer. Both
       look the same, which is the point. */
    footer h4,
    footer .footer-heading{margin:0 0 14px;font-size:var(--fs-h3)}
    .copyright{
      border-top:1px solid rgba(255,255,255,.1);
      margin-top:var(--space-8);padding-top:var(--space-6);color:rgba(255,255,255,.45);font-size:var(--fs-label);
      display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap
    }
    .copyright p{margin:0}
    .legal-links{display:flex;gap:var(--space-6);flex-wrap:wrap}
    .legal-links a{font-size:var(--fs-label);color:rgba(255,255,255,.45);line-height:1.6}
    .legal-links a:hover{color:var(--accent)}
    @media (max-width:640px){
      .copyright{flex-direction:column;align-items:flex-start;gap:14px}
      .legal-links{gap:var(--space-4)}
    }

    /* REVEAL */
    /* Progressive enhancement: content stays visible if JavaScript is disabled. */
    .reveal{opacity:1;transform:none;transition:.5s ease}
    .js .reveal{opacity:0;transform:translateY(12px)}
    .js .reveal.show{opacity:1;transform:none}

    /* RESPONSIVE */
    @media (max-width:1080px){
      .ecosystem,.footprint,.insights,.section-head,.tiles-4,.stats,.journeys,.impact-cards,.footer-grid{grid-template-columns:1fr 1fr}
      .section-head{display:block}
      .section-head p{margin-top:14px}
    }
    /* "Customer Support" is a much longer label than "Help" was, and between
       the desktop nav and the 900px breakpoint it pushes the actions row past
       the container. Drop it early - the floating button and the mobile menu
       both still reach the panel. */
    /* Left-aligned tabs are wider than the old centred links, so the optional
       action drops out earlier. Support stays reachable via the floating
       button and the mobile menu. */
    @media (max-width:1280px){
      .nav-actions .support-open{display:none}
    }
    @media (max-width:1180px){
      .nav-tab{padding:0 10px}
      .nav-inner{gap:14px}

    }
    @media (max-width:900px){
      .nav-links,.nav-actions .desktop-only{display:none}
      .mobile-toggle{display:block}
      .mobile-menu.show{display:block}
      .ecosystem,.footprint,.insights,.tiles-4,.stats,.journeys,.impact-cards,.footer-grid{grid-template-columns:1fr}
    }
    @media (max-width:640px){
      .container{width:min(100% - 20px,var(--max))}
      .section{padding:64px 0}
      .nav-inner{height:68px}
      .hero-actions,.mobile-actions{flex-direction:column;align-items:stretch}
      .btn{width:100%}
    }

        

    /* ============================================================
       ACCESSIBILITY
       ============================================================ */

    /* Skip link: first tab stop, visually hidden until focused. */
    .skip-link{
      position:absolute;left:16px;top:-100px;z-index:2000;
      background:var(--primary);color:#fff;font-weight:700;font-size:var(--fs-small);
      padding:var(--space-3) var(--space-4);border-radius:0 0 14px 14px;
      transition:top .18s ease
    }
    .skip-link:focus{top:0}

    /* Visible keyboard focus everywhere. The demo previously had no :focus
       styles at all, which makes keyboard navigation impossible to follow. */
    :focus-visible{
      outline:3px solid var(--primary);
      outline-offset:3px;
      border-radius:6px
    }
    .dark :focus-visible,
    .green :focus-visible,
    footer :focus-visible,
    .article:focus-visible,
    .mega-side :focus-visible{
      outline-color:var(--accent)
    }
    /* Don't paint focus rings on mouse clicks. */
    :focus:not(:focus-visible){outline:none}

    /* Screen-reader-only helper for context that is visual-only. */
    .sr-only{
      position:absolute;width:1px;height:1px;padding:0;margin:-1px;
      overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
    }

    /* Respect the OS "reduce motion" setting: no autoplay easing, no parallax
       zoom, no scroll reveal transitions. Content stays fully visible. */
    @media (prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important
      }
      /* No Ken Burns drift, no caption stagger, no auto-filling tab rail. */
      .hero-media img,.hero-slide.is-active .hero-media img{transform:scale(1.02)}
      .hero.is-playing .hero-tab.is-active .tab-fill{animation:none;width:100%}
      .js .hero-slide .hero-kicker,
      .js .hero-slide .hero-caption :is(h1,h2),
      .js .hero-slide .hero-caption p,
      .js .hero-slide .hero-cta{opacity:1;transform:none}
      .js .reveal{opacity:1;transform:none}
    }

    /* Interactive ecosystem wheel ------------------------------- */
    .wheel-node{transition:box-shadow .2s ease,transform .2s ease}
    .wheel-node:hover,.wheel-node.is-active{
      box-shadow:0 0 0 2px var(--accent),0 18px 40px rgba(8,0,14,.5);
      transform:translate(-50%,-50%) scale(1.05)
    }
    .wheel-center picture{display:contents}
    .wheel-center .hub-mark{display:block;width:11.5cqi;height:auto}
    .wheel-center .hub-label{
      font-size:var(--orbit-word);font-weight:800;letter-spacing:.02em;line-height:1.1
    }
    .wheel-center .hub-rule{width:9cqi;height:2px;border-radius:2px;background:var(--accent)}
    .wheel-center .hub-copy{
      font-size:var(--orbit-tag);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
      line-height:1.5;color:var(--plum-300);white-space:nowrap
    }
    /* A selected pillar swaps the hub label for its name and a sentence, which
       reads better in ordinary case than in spaced capitals. */
    .wheel-center.is-node .hub-label{letter-spacing:.04em;margin-right:0}
    .wheel-center.is-node .hub-copy{
      font-size:var(--fs-label);font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);
      white-space:normal
    }

    /* CTA lead form ---------------------------------------------- */
    .cta-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}
    .cta-points{
      list-style:none;padding:0;margin:var(--space-6) 0 0;display:grid;gap:10px
    }
    .cta-points li{
      position:relative;padding-left:var(--space-6);font-size:var(--fs-small);color:var(--muted)
    }
    .cta-points li:before{
      content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;
      background:var(--accent);box-shadow:inset 0 0 0 3px var(--surface)
    }
    .lead-form{
      background:var(--surface-2);border:1px solid var(--line);
      border-radius:var(--radius-lg);padding:var(--space-6);display:grid;gap:var(--space-4)
    }
    .footer-contact{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid rgba(255,255,255,.12)}
    .footer-contact-list{list-style:none;padding:0;margin:var(--space-2) 0 0;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6)}
    .footer-contact-list li{font-size:var(--fs-small)}
    .footer-contact-list address{font-style:normal}

    /* The honeypot. It has to be genuinely unreachable for a person and still
       present in the document for a bot to find and fill in.

       Off-screen rather than display:none on purpose: the crawlers worth
       catching skip a field that is not rendered, and the ones that do not
       would be caught by anything. aria-hidden and tabIndex=-1 in the markup
       keep it away from screen readers and the keyboard, so nobody reaches it
       by any route a person actually has.

       If this rule ever goes missing the field becomes visible, people fill it
       in, and their enquiries are discarded in silence — which is why
       tools/verify-frontend.sh asserts the stylesheet still carries it. */
    .lead-form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

    .lead-form-ack{
      background:var(--accent-soft);border:1px solid var(--accent);
      border-radius:var(--radius-lg);padding:var(--space-6);
      color:var(--text);font-size:var(--fs-lede)
    }
    /* The thanks that replaces a sent form: a tick beside the words. */
    .form-done:not([hidden]){display:flex;align-items:flex-start;gap:var(--space-4)}
    .form-done:focus{outline:none}
    .form-done-tick{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--plum-900)}
    .form-done-title{font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.25;color:var(--plum-900)}
    .form-done p + p{margin-top:var(--space-2);font-size:var(--fs-small)}
    .lead-form-error{
      background:#fdecea;border:1px solid #d8562f;border-radius:var(--radius-lg);
      padding:var(--space-4);color:#7a2413;font-size:var(--fs-small);margin:0
    }
    .form-row{display:grid;gap:var(--space-2);border:0;padding:0;margin:0;min-width:0}
    .form-row > label,.form-row legend{
      font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
      color:#4a3c56;padding:0
    }
    /* A tick box reads with its own words beside it (2026-10-23). */
    .form-row-checkbox > .field-check{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-small);font-weight:600;letter-spacing:0;text-transform:none;line-height:1.45;color:var(--text);cursor:pointer}
    .form-row-checkbox > .field-check input{flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:var(--plum)}
    /* tel and textarea were missing: the form this component was written for
       had neither, and a CMS form can carry both. Without them a phone field
       renders unstyled and a message box renders as a two-line inline stub. */
    .lead-form input[type=text],
    .lead-form input[type=email],
    .lead-form input[type=tel],
    .lead-form textarea,
    .lead-form select{
      width:100%;height:48px;padding:0 14px;font:inherit;font-size:var(--fs-small);
      background:var(--surface);color:var(--text);
      border:1px solid var(--line);border-radius:12px
    }
    /* Shares the inputs' rule so the horizontal padding stays one value and the
       text lines up down the form; only the shape differs. */
    .lead-form textarea{
      height:auto;min-height:140px;padding-block:var(--space-3);resize:vertical
    }
    .lead-form textarea:hover{border-color:#cdbcd8}
    .lead-form select{padding-right:var(--space-8)}
    .lead-form input:hover,.lead-form select:hover{border-color:#cdbcd8}
    .lead-form input[aria-invalid=true]{border-color:#b3261e;background:#fff6f5}
    .field-error{font-size:var(--fs-label);font-weight:600;color:#b3261e}

    /* Segmented radio group styled as pills. */
    .segmented{display:flex;flex-wrap:wrap;gap:var(--space-2)}
    .segmented input{position:absolute;opacity:0;width:1px;height:1px}
    .segmented label{
      padding:var(--space-2) 14px;border-radius:999px;border:1px solid var(--line);
      background:var(--surface);font-size:var(--fs-small);font-weight:700;cursor:pointer;
      transition:.18s ease
    }
    .segmented label:hover{border-color:var(--primary)}
    .segmented input:checked + label{
      background:var(--primary);border-color:var(--primary);color:#fff
    }
    .segmented input:focus-visible + label{
      outline:3px solid var(--primary);outline-offset:3px
    }
    .lead-form .btn{width:100%}
    .form-status{font-size:var(--fs-small);font-weight:700;color:var(--success);min-height:1.2em}
    .form-note{font-size:var(--fs-label);color:var(--muted);line-height:1.6}

    @media (max-width:900px){
      .cta-grid{grid-template-columns:1fr;gap:28px}
    }
    @media (max-width:640px){
      .cta{padding:var(--space-6)}
      .lead-form{padding:20px}
    }

    /* ============================================================
       INNER PAGE (Individuals)
       ============================================================ */
    .breadcrumb{
      display:flex;gap:10px;align-items:center;font-size:var(--fs-small);color:var(--muted);
      padding-top:var(--space-8)
    }
    .breadcrumb a{color:var(--primary);font-weight:700}
    .breadcrumb a:hover{text-decoration:underline}

    .page-hero{position:relative;padding:0 0 62px;overflow:hidden}
    /* The inner-page hero's button row. It had only a phone rule, so at every
       width the buttons sat against the intro and against each other; this is
       the homepage hero's .hero-cta spacing. */
    .hero-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-6)}
    /* An opening with no buttons (Why Enwealth, 2026-10-08) keeps no gap for them. */
    .hero-actions:empty{display:none}
    .page-hero-grid{
      display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-top:38px
    }
    /* With no card beside it, the text takes the full width rather than
       leaving the right half empty (the client's checklist, 2026-09-30). */
    .page-hero-grid > :only-child{grid-column:1 / -1}
    .page-hero-grid > :only-child .measure{max-width:none}
    .page-hero h1{font-size:var(--fs-d1)}
    .page-hero-card{padding:var(--space-6);position:relative;z-index:1}

    /* The hero is two columns down to tablet, then stacks. Without this the
       "At a glance" card keeps its .9fr track at every width and its content
       overflows the viewport — the same collapse .country-hero-grid does at
       the same breakpoint. */
    @media (max-width:1080px){
      .page-hero-grid{grid-template-columns:1fr;gap:28px}
    }
    .stage-list{display:grid;gap:10px;margin-top:var(--space-4)}
    .stage{
      display:block;padding:var(--space-4) var(--space-4);border:1px solid var(--line);border-radius:16px;
      background:var(--surface);transition:.18s ease
    }
    .stage:hover{border-color:var(--primary);transform:translateX(3px)}
    .stage b{display:block;font-size:var(--fs-h3)}
    .stage span{font-size:var(--fs-small);color:var(--muted)}

    /* Life stages */
    .stage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
    .stage-card{padding:var(--space-6);display:flex;flex-direction:column}
    .stage-age{
      display:inline-block;align-self:flex-start;margin-bottom:14px;
      padding:6px var(--space-3);border-radius:999px;background:var(--surface-2);
      color:var(--primary);font-size:var(--fs-label);font-weight:800;letter-spacing:.06em
    }
    .check-list{list-style:none;padding:0;margin:var(--space-4) 0 0;display:grid;gap:var(--space-2)}
    .check-list li{
      position:relative;padding-left:var(--space-6);font-size:var(--fs-small);line-height:1.6;color:#4a3c56
    }
    .check-list li:before{
      content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:3px;
      background:var(--accent)
    }

    /* Solutions (on dark) */
    .solution-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
    .solution{
      padding:var(--space-6);border-radius:var(--radius-xl);
      border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);
      display:flex;flex-direction:column
    }
    .solution p{margin-top:10px;color:rgba(255,255,255,.72);font-size:var(--fs-small);line-height:1.7;flex:1}
    .solution .arrow{margin-top:20px}

    /* How it works */
    .steps{
      list-style:none;padding:0;margin:0;
      display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);counter-reset:step
    }
    .step{padding:var(--space-6)}
    .step-num{
      width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
      background:var(--primary);color:#fff;font-weight:900;font-size:var(--fs-lede);margin-bottom:var(--space-4)
    }

    /* FAQ */
    .faq-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start}
    .faq-list{display:grid;gap:10px}
    .faq-item{
      border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden
    }
    .faq-item summary{
      list-style:none;cursor:pointer;padding:var(--space-4) 20px;font-weight:700;font-size:var(--fs-body);
      display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:after{
      content:"+";font-size:var(--fs-h3);font-weight:800;color:var(--primary);flex:0 0 auto
    }
    .faq-item[open] summary:after{content:"–"}
    .faq-item[open] summary{border-bottom:1px solid var(--line)}
    .faq-body{padding:var(--space-4) 20px 20px}
    .faq-body p{font-size:var(--fs-body);line-height:1.75;color:var(--muted)}

    @media (max-width:1080px){
      .faq-layout{grid-template-columns:1fr}
      .stage-grid,.solution-grid,.steps{grid-template-columns:1fr 1fr}
    }
    @media (max-width:640px){
      .stage-grid,.solution-grid,.steps{grid-template-columns:1fr}
      .breadcrumb{padding-top:var(--space-6)}
    }

    /* ============================================================
       SUPPORT DRAWER
       ============================================================ */

    /* Floating entry point, shown by JS and pinned in one corner for the whole
       page. Labelled rather than a bare bubble: a chat-style bubble promises
       live chat we are not staffing. */
    .support-fab{
      position:fixed;right:22px;bottom:22px;z-index:1200;
      display:inline-flex;align-items:center;gap:var(--space-2);
      height:48px;padding:0 20px;border-radius:999px;border:0;
      background:var(--primary);color:#fff;font-weight:700;font-size:var(--fs-small);
      box-shadow:0 14px 34px rgba(22,0,31,.34);
      opacity:0;transform:translateY(10px);
      transition:opacity .28s ease,transform .28s ease,background .2s ease
    }
    .support-fab.is-visible{opacity:1;transform:none}
    .support-fab:hover{background:var(--plum-500)}
    .support-fab[hidden]{display:none}

    .support-layer{position:fixed;inset:0;z-index:1300}
    .support-layer[hidden]{display:none}
    .support-scrim{
      position:absolute;inset:0;background:rgba(22,0,31,.55);
      opacity:0;transition:opacity .3s ease
    }
    .support-layer.is-open .support-scrim{opacity:1}

    .support-drawer{
      position:absolute;top:0;right:0;height:100%;
      width:min(430px,100%);
      background:var(--surface);
      display:flex;flex-direction:column;
      box-shadow:-30px 0 70px rgba(22,0,31,.28);
      transform:translateX(100%);
      transition:transform .34s cubic-bezier(.4,0,.2,1)
    }
    .support-layer.is-open .support-drawer{transform:none}

    .support-head{
      display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);
      padding:var(--space-6) var(--space-6) var(--space-4);
      background:linear-gradient(150deg,var(--primary),var(--plum-700));color:#fff
    }
    .support-eyebrow{
      margin:0;font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;
      text-transform:uppercase;color:var(--accent)
    }
    .support-head h2{font-size:var(--fs-h2);letter-spacing:-.01em;margin-top:var(--space-2);color:var(--heading)}
    .support-close{
      flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;
      border-radius:50%;border:1px solid rgba(255,255,255,.28);
      background:rgba(255,255,255,.10);color:#fff;transition:.2s ease
    }
    .support-close:hover{background:rgba(255,255,255,.22)}

    .support-status{
      display:flex;align-items:center;gap:var(--space-2);margin:0;
      padding:var(--space-3) var(--space-6);font-size:var(--fs-label);font-weight:700;
      background:var(--surface-2);color:#4a3c56;border-bottom:1px solid var(--line)
    }
    .status-dot{
      width:8px;height:8px;border-radius:50%;background:var(--muted);flex:0 0 auto
    }
    .support-status.is-open .status-dot{
      background:var(--accent-ink);box-shadow:0 0 0 4px rgba(143,198,65,.28)
    }
    .support-status.is-closed .status-dot{background:#b3261e}

    .support-body{flex:1;overflow-y:auto;padding:var(--space-6) var(--space-6);display:grid;gap:var(--space-6)}

    .support-triage{border:0;padding:0;margin:0;display:grid;gap:10px}
    .support-triage legend{
      padding:0;font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;
      text-transform:uppercase;color:#4a3c56
    }
    .support-triage .segmented label{font-size:var(--fs-label);padding:var(--space-2) var(--space-3)}

    .channel-list{display:grid;gap:10px}
    .channel{
      display:flex;align-items:center;gap:14px;
      padding:14px;border:1px solid var(--line);border-radius:16px;
      background:var(--surface);transition:.18s ease
    }
    .channel:hover{border-color:var(--primary);transform:translateX(3px)}
    .channel-icon{
      flex:0 0 auto;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
      background:var(--plum-100);color:var(--primary)
    }
    .channel-whatsapp .channel-icon{background:#f1f9e7;color:#527c17}
    .channel-copy{display:grid;gap:2px;min-width:0}
    .channel-copy b{font-size:var(--fs-small)}
    .channel-value{font-size:var(--fs-small);color:var(--primary);font-weight:700;word-break:break-word}
    .channel-meta{font-size:var(--fs-label);color:var(--muted)}

    .support-tasks h3,.support-form h3{
      font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
      color:var(--heading);margin-bottom:var(--space-3)
    }
    .support-tasks ul{list-style:none;padding:0;margin:0;display:grid;gap:2px}
    .support-tasks li[hidden]{display:none}
    .support-tasks a{
      display:block;padding:var(--space-3) var(--space-3);border-radius:11px;font-size:var(--fs-small);
      color:var(--text);transition:.15s ease
    }
    .support-tasks a:before{content:"";display:inline-block;width:16px;height:16px;margin-right:10px;vertical-align:-3px;background:var(--primary);-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
    .support-tasks a:hover{background:var(--surface-2)}

    .support-form{display:grid;gap:14px}
    .support-form textarea{
      width:100%;padding:var(--space-3) 14px;font:inherit;font-size:var(--fs-small);line-height:1.6;
      background:var(--surface);color:var(--text);
      border:1px solid var(--line);border-radius:12px;resize:vertical
    }
    .support-form textarea:hover{border-color:#cdbcd8}
    .support-form .btn{width:100%}

    .support-foot{
      border-top:1px solid var(--line);background:var(--surface-2);
      padding:var(--space-4) var(--space-6);display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center
    }
    .support-foot a{font-size:var(--fs-small);font-weight:700;color:var(--primary)}
    .support-foot a:hover{text-decoration:underline}
    .support-foot .form-note{flex-basis:100%;margin:0}

    @media (max-width:640px){
      .support-fab{right:14px;bottom:14px;height:46px;padding:0 var(--space-4)}
      .support-drawer{width:100%}
      .support-head{padding:20px var(--space-4) var(--space-4)}
      .support-status,.support-body,.support-foot{padding-left:var(--space-4);padding-right:var(--space-4)}
    }

    /* ============================================================
       MOBILE OPTIMISATION
       Measured at 375px before this block: the page ran to 13,012px
       (about 35 phone screens, nearly twice the desktop page) and 22
       interactive elements sat under the 44px touch guideline.
       ============================================================ */
    @media (max-width:640px){

      /* Vertical rhythm was still desktop-scale on a phone. */
      .section{padding:var(--space-12) 0}
      .section-head{margin-bottom:var(--space-6)}
      h2{font-size:var(--fs-d2-sm)}
      .lead{font-size:var(--fs-body);line-height:1.7}

      /* Cards carried fixed min-heights that were sensible in a four-across
         grid and became dead space once they stacked one per row. */
      .journey,.impact-card,.stage-card,.solution,.step{min-height:0}
      .journey,.portal-tile,.fund-tile,.impact-card,.stat,.stage-card,
      .solution,.step,.map-card{padding:20px}

      /* A number and a caption pair up comfortably at this width. */
      .stats{grid-template-columns:1fr 1fr;gap:var(--space-3)}
      .stat .cap{font-size:var(--fs-label);margin-top:var(--space-1)}

      /* The impact pillars are short enough to pair up too. */
      .impact-cards{grid-template-columns:1fr 1fr;gap:var(--space-3)}
      .impact-card .icon{width:38px;height:38px;font-size:var(--fs-lede);margin-bottom:var(--space-3)}
      .impact-card p{font-size:var(--fs-small)}

      .icon{width:40px;height:40px;font-size:var(--fs-lede);margin-bottom:var(--space-4)}

      .journey{min-height:0}
      .arrow{margin-top:var(--space-4)}

      /* Hero: stop it filling the viewport exactly, so the next section peeks
         and the page reads as scrollable without adding a scroll cue. */
      .hero-caption{padding-top:72px;padding-bottom:196px}
      /* Bare "01 02 03" tells a phone visitor nothing, so give the active
         slide its label back while the others stay numerals. */
      .hero-tab.is-active .tab-title{display:block;font-size:var(--fs-label)}

      /* --- 44px minimum touch targets --- */
      .footer-grid{gap:var(--space-6)}
      .legal-links{gap:2px var(--space-4)}
      .breadcrumb{padding-top:var(--space-4)}

      /* Map on a phone: the pins are only ~16px across at this scale, and
         Kenya and Uganda sit close enough that a finger-sized hit area would
         overlap them. So the pins stay a visual indicator and the legend
         beneath the map is the reliable way to open a market. */
      .pin-dot{r:14}
      .pin-halo{r:30}
      .map-legend{gap:0;flex-direction:column;align-items:flex-start}
      .map-card{padding:var(--space-4)}

      /* --- Comparable card rows scroll sideways instead of stacking ---
         Four full-width cards per section is what made the page 35 screens
         long. These are sets of like-for-like items (goals, portals, funds),
         which is exactly what a snap row suits. Cards are 78% wide so the
         next one always peeks - the affordance that tells you it scrolls. */
      .journeys,.tiles-4{
        display:flex;
        grid-template-columns:none;
        gap:var(--space-3);
        overflow-x:auto;
        overscroll-behavior-x:contain;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        /* Bleed to the screen edges so the peeking card is not cut off
           awkwardly inside the container gutter. */
        margin-left:-10px;margin-right:-10px;
        padding:2px 10px 10px
      }
      .journeys::-webkit-scrollbar,.tiles-4::-webkit-scrollbar{display:none}
      .journeys > *,.tiles-4 > *{
        flex:0 0 78%;
        scroll-snap-align:start
      }
      /* A scroll row that has been given keyboard focus needs a visible ring. */
      .journeys:focus-visible,.tiles-4:focus-visible{
        outline:3px solid var(--primary);outline-offset:4px;border-radius:20px
      }
    }

    /* ============================================================
       IMPACT DEBT FUND microsite
       ============================================================ */

    /* Callouts for anything that must not be mistaken for approved copy. */
    .fund-note{
      margin-top:var(--space-6);padding:var(--space-4) var(--space-4);border-radius:14px;
      background:#fdf6e3;border:1px solid #f0e2b6;
      color:#6f5a1b;font-size:var(--fs-small);line-height:1.7
    }
    .fund-note strong{color:#4d3d0e}

    /* Board */
    .director-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
    .director{padding:var(--space-6);display:grid;gap:6px;justify-items:start;align-content:start}
    .director-avatar{
      width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
      background:var(--plum-100);color:var(--primary);margin-bottom:10px
    }
    .director-avatar svg{width:28px;height:28px}
    .director h3{font-size:var(--fs-h3)}
        /* Rendered only while proof_pack.PLACEHOLDER is set. Deliberately loud:
       a named director on a financial services site is a statement about a
       real appointment, and the card is what gets screenshotted. */
    /* Legal pages are prose and nothing else — no cards, no grid. The measure
       is what makes them readable, and it is already a utility. */
    .legal-body h2{
      font-size:var(--fs-h3);margin-top:var(--space-12);margin-bottom:var(--space-4);
    }
    .legal-body h2:first-child{margin-top:0}
    .legal-body p{margin-bottom:var(--space-4);color:var(--muted)}
    .legal-body ul{
      margin:0 0 var(--space-4);padding-left:var(--space-6);color:var(--muted);
    }
    .legal-body li{margin-bottom:var(--space-2)}

    /* A data table. The design system had none, because the static site shows
       every number in a card — a fund's performance history is the first thing
       here that is genuinely tabular, and the CMS can produce more. */
    /* Search. Written rather than assumed: the last two components this front
       end needed turned out not to exist, one of them only after it shipped. */

    .search-form{display:flex;gap:var(--space-3);max-width:34rem}
    .search-form input{
      flex:1;height:48px;padding:0 var(--space-4);font:inherit;
      font-size:var(--fs-small);background:var(--surface);color:var(--text);
      border:1px solid var(--line);border-radius:12px
    }
    .search-form input{min-width:0}
    .search-form .btn{flex:0 0 auto;width:auto}

    .search-results{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
    .search-results li{
      background:var(--surface);border:1px solid var(--line);
      border-radius:var(--radius-lg);padding:var(--space-6)
    }
    .search-results h2{font-size:var(--fs-h3)}
    .search-results p{max-width:var(--measure,68ch)}

    .fund-table{
      width:100%;border-collapse:collapse;margin-top:var(--space-4);
      font-size:var(--fs-small)
    }
    .fund-table th,.fund-table td{
      padding:var(--space-3) var(--space-4);text-align:right;
      border-bottom:1px solid var(--line)
    }
    .fund-table th:first-child,.fund-table td:first-child{text-align:left}
    .fund-table thead th{
      font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;
      text-transform:uppercase;color:var(--muted);border-bottom-width:2px
    }
    .fund-table tbody th{font-weight:600}
    .fund-table td{font-variant-numeric:tabular-nums}

    /* Label on the left, figure on the right: an allocation, a holdings list, a
       row of sample values. Previously these borrowed .vig-rows, which is the
       dashboard illustration's list — outside it the two halves butt together
       and read as one word. */
    .spec-list{list-style:none;margin:var(--space-4) 0 0;padding:0}
    .spec-list li{
      display:flex;justify-content:space-between;gap:var(--space-4);
      padding:var(--space-3) 0;border-bottom:1px solid var(--line)
    }
    .spec-list li:last-child{border-bottom:0}
    .spec-list li > span:last-child{
      font-variant-numeric:tabular-nums;color:var(--text);font-weight:600
    }

    .director-flag{
      display:inline-block;margin-left:var(--space-2);
      padding:var(--space-1) var(--space-2);border-radius:3px;
      background:var(--accent-soft);color:var(--accent-ink);
      border:1px solid var(--line);
      font-family:inherit;font-size:var(--fs-label);font-weight:800;
      letter-spacing:.12em;text-transform:uppercase;vertical-align:middle;
    }

.director-role{
      font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
      color:var(--accent-ink)
    }
    .director .muted{font-size:var(--fs-small);line-height:1.6}
    /* The real board has no cleared portraits yet, so each card carries the
       director's initials where the photograph will go. */
    .director-avatar.initials{font-weight:800;font-size:var(--fs-lede);letter-spacing:.04em}

    /* About Enwealth. The company's values have no descriptions of their own,
       so they are named as a row of pills rather than padded out into cards. */
    .value-list{
      list-style:none;padding:0;margin:var(--space-4) 0 0;
      display:flex;flex-wrap:wrap;gap:var(--space-3)
    }
    .value-list li{
      padding:var(--space-3) var(--space-6);border-radius:999px;
      background:var(--accent-soft);color:var(--primary);font-weight:700
    }
    /* Pieces written for light grounds that these pages also set on dark ones:
       a stat card is white, so its number must not inherit the section's white
       text, and a check list's fixed ink disappears on aubergine. */
    .dark .card.stat .num{color:var(--text)}
    .dark .check-list li{color:rgba(255,255,255,.78)}

    @media (max-width:1080px){
      .director-grid{grid-template-columns:1fr 1fr}
    }

    @media (max-width:640px){
      .director-grid{grid-template-columns:1fr}
      .director{padding:20px}
    }

    /* ============================================================
       IMPACT STORIES — figures + auto-scrolling testimonials
       ============================================================ */

    /* Figures panel: aubergine gives the numbers weight without adding
       another full-bleed band to the page rhythm. */
    .impact-figures{
      background:linear-gradient(150deg,var(--primary),var(--plum-700));
      color:#fff;border-radius:var(--radius-xl);padding:var(--space-8) var(--space-8);
      margin-bottom:var(--space-6)
    }
    .figures-head{
      display:flex;flex-wrap:wrap;gap:10px var(--space-4);align-items:baseline;
      justify-content:space-between;
      padding-bottom:var(--space-6);margin-bottom:var(--space-6);
      border-bottom:1px solid rgba(255,255,255,.16)
    }
    .figures-label{
      font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
      color:var(--accent)
    }
    .figures-note{
      font-size:var(--fs-label);font-weight:600;letter-spacing:.04em;
      color:rgba(255,255,255,.55)
    }
    .figures-grid{
      display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);margin:0
    }
    .figure dt{
      font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
      color:rgba(255,255,255,.62);margin-bottom:var(--space-3)
    }
    .figure dd{margin:0;display:flex;flex-direction:column;gap:var(--space-1)}
    .figure-num{
      font-size:var(--fs-num);font-weight:700;
      line-height:1;font-variant-numeric:tabular-nums;font-family:var(--font-head)
    }
    .figure-sub{font-size:var(--fs-small);color:rgba(255,255,255,.66);line-height:1.5}

    /* Testimonials */
    .voices{margin-top:var(--space-6)}
    .voices-head{
      display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
      margin-bottom:var(--space-4)
    }
    .voices-title{
      font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
      color:var(--muted)
    }
    .voices-toggle{
      display:inline-flex;align-items:center;gap:var(--space-2);
      height:36px;padding:0 14px;border-radius:999px;
      border:1px solid var(--line);background:var(--surface);
      color:var(--text);font-size:var(--fs-label);font-weight:700;transition:.18s ease
    }
    .voices-toggle:hover{border-color:var(--primary);color:var(--primary)}
    .voices-toggle .icon-play{display:none}
    .voices.is-paused .voices-toggle .icon-pause{display:none}
    .voices.is-paused .voices-toggle .icon-play{display:block}

    .marquee{
      overflow-x:auto;overflow-y:hidden;
      scrollbar-width:none;
      /* Fade the edges so cards enter and leave rather than being cut off. */
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
      mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
      padding:var(--space-1) 0 var(--space-2)
    }
    .marquee::-webkit-scrollbar{display:none}
    .marquee:focus-visible{outline:3px solid var(--primary);outline-offset:4px;border-radius:20px}
    .marquee-track{
      display:flex;gap:var(--space-4);list-style:none;margin:0;padding:0;width:max-content
    }
    /* The animation only runs once JS has cloned the set, so without JS the
       row is simply a scrollable list rather than a track with a visible gap. */
    .voices.is-ready .marquee{overflow-x:hidden}
    .voices.is-ready .marquee-track{animation:voicesScroll var(--voices-duration,64s) linear infinite}
    .voices.is-ready .marquee:hover .marquee-track,
    .voices.is-ready .marquee:focus-within .marquee-track,
    .voices.is-ready.is-paused .marquee-track{animation-play-state:paused}
    @keyframes voicesScroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 8px))}}

    .voice{
      flex:0 0 clamp(280px,26vw,360px);
      background:var(--surface);border:1px solid var(--line);
      border-radius:var(--radius-lg);padding:var(--space-6);
      display:flex;flex-direction:column;gap:14px
    }
    .voice-tag{
      align-self:flex-start;
      font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
      color:var(--accent-ink);background:var(--accent-soft);
      padding:var(--space-1) 10px;border-radius:999px
    }
    .voice blockquote{margin:0;flex:1}
    .voice blockquote p{
      font-size:var(--fs-body);line-height:1.65;color:var(--text);margin:0;
      /* A real quotation mark, hung so the text edge stays flush. */
      text-indent:-.42em
    }
    .voice blockquote p::before{content:"\201C"}
    .voice blockquote p::after{content:"\201D"}
    .voice cite{
      font-style:normal;display:flex;flex-direction:column;gap:2px;
      padding-top:14px;border-top:1px solid var(--line)
    }
    .voice cite b{font-size:var(--fs-small);font-weight:700}
    .voice cite span{font-size:var(--fs-label);color:var(--muted)}

    @media (max-width:900px){
      .figures-grid{grid-template-columns:1fr 1fr;gap:var(--space-6)}
    }
    @media (max-width:640px){
      .impact-figures{padding:var(--space-6) 20px}
      .figures-grid{gap:var(--space-4)}
      .figure dt{margin-bottom:var(--space-2)}
      .voice{flex-basis:clamp(250px,78vw,300px);padding:20px}
    }

    /* Short phones: the hero is content-sized, so on a 667-740px viewport it
       would fill the screen. Trim the caption rather than clip it, so the next
       section still peeks. */
    @media (max-width:900px) and (max-height:760px){
      .hero-caption{padding-top:44px;padding-bottom:158px}
      .hero-caption :is(h1,h2){font-size:var(--fs-d2-sm);margin-top:var(--space-4)}
      .hero-caption p{font-size:var(--fs-small);margin-top:14px}
      .hero-cta{margin-top:var(--space-6);gap:10px}
      /* The numerals still carry the position; the label is the first thing
         to give up when vertical space is scarce. */
      .hero-tab.is-active .tab-title{display:none}
      .hero-chrome{padding-bottom:20px}
    }

    /* No autoplay for reduced motion: the row stays a manually scrollable list. */
    @media (prefers-reduced-motion:reduce){
      .voices.is-ready .marquee{overflow-x:auto}
      .voices.is-ready .marquee-track{animation:none}
    }

    /* ============================================================
       NEWSLETTER + SOCIAL
       ============================================================ */

    /* Sits between the light CTA and the near-black footer, so it steps the
       page down rather than dropping straight to the darkest band. */
    .newsletter{
      background:linear-gradient(150deg,var(--primary),var(--plum-700));
      color:#fff;padding:64px 0
    }
    .newsletter-inner{
      display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start
    }
    .newsletter-eyebrow{
      background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff
    }
    .newsletter-copy h2{
      margin-top:var(--space-4);font-size:var(--fs-d3);color:var(--heading)
    }
    .newsletter-copy p{
      margin-top:14px;max-width:44ch;font-size:var(--fs-body);line-height:1.75;
      color:rgba(255,255,255,.74)
    }

    .newsletter-form{display:grid;gap:var(--space-4);padding-top:6px}
    .newsletter-field{display:flex;gap:10px;flex-wrap:wrap}
    .newsletter-field input{
      flex:1 1 16rem;min-width:0;height:52px;padding:0 var(--space-4);
      font:inherit;font-size:var(--fs-body);
      background:rgba(255,255,255,.10);color:#fff;
      border:1px solid rgba(255,255,255,.26);border-radius:999px;
      transition:.18s ease
    }
    .newsletter-field input::placeholder{color:rgba(255,255,255,.5)}
    .newsletter-field input:hover{border-color:rgba(255,255,255,.45)}
    .newsletter-field input:focus{
      outline:none;border-color:var(--accent);background:rgba(255,255,255,.16)
    }
    .newsletter-field input[aria-invalid="true"]{
      border-color:#ff9d94;background:rgba(255,120,110,.14)
    }
    .newsletter-field .btn{height:52px;flex:0 0 auto;padding:0 var(--space-6)}

    .newsletter-topics{border:0;padding:0;margin:0;display:grid;gap:10px}
    .newsletter-topics legend{
      padding:0;font-size:var(--fs-label);font-weight:700;letter-spacing:.06em;
      color:rgba(255,255,255,.6)
    }
    .topic-set{display:flex;flex-wrap:wrap;gap:var(--space-2)}
    .topic-set input{position:absolute;opacity:0;width:1px;height:1px}
    .topic-set label{
      padding:var(--space-2) 14px;border-radius:999px;cursor:pointer;
      border:1px solid rgba(255,255,255,.26);color:rgba(255,255,255,.86);
      font-size:var(--fs-small);font-weight:700;transition:.18s ease
    }
    .topic-set label:hover{border-color:#fff;color:#fff}
    .topic-set input:checked + label{
      background:var(--accent);border-color:var(--accent);color:var(--plum-900)
    }
    .topic-set input:focus-visible + label{outline:3px solid var(--accent);outline-offset:3px}

    .newsletter-status{
      font-size:var(--fs-small);font-weight:700;color:var(--accent);min-height:1.2em;margin:0
    }
    .newsletter-consent{
      font-size:var(--fs-label);line-height:1.65;color:rgba(255,255,255,.55);margin:0
    }

    /* Social row in the copyright bar */
    .copyright-end{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}
    .social{display:flex;gap:var(--space-2);list-style:none;margin:0;padding:0}
    .social a{
      width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
      border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.72);
      transition:.18s ease
    }
    .social a:hover{
      border-color:var(--accent);color:var(--plum-900);background:var(--accent)
    }

    @media (max-width:900px){
      .newsletter-inner{grid-template-columns:1fr;gap:28px}
    }
    @media (max-width:640px){
      .newsletter{padding:44px 0}
      .newsletter-field{flex-direction:column}
      .newsletter-field input,.newsletter-field .btn{width:100%;flex:0 0 auto}
      .copyright-end{gap:var(--space-4)}
    }

    /* Touch targets apply from the same width the nav goes mobile, not from
       640px - the range between the two is tablets, which are touch devices. */
    @media (max-width:900px){
      footer a{display:inline-block;padding:var(--space-3) 0;line-height:1.45}
      .legal-links a{display:inline-block;padding:14px 0}
      .breadcrumb a{display:inline-block;padding:var(--space-3) 0}
      .arrow{display:inline-flex;align-items:center;min-height:44px}
      .mobile-item .mobile-list a{padding:var(--space-3) 0}
      .support-tasks a{padding:var(--space-3) var(--space-3)}
      .support-foot a{padding:var(--space-2) 0}
      .btn.small{height:44px}
      .voices-toggle{height:44px;padding:0 var(--space-4)}
      .social a{width:44px;height:44px}
      .map-link{padding:var(--space-3) 0}
    }

    /* ==================================================================
       FLOW UTILITIES

       These replace the ninety-six style="" attributes the markup used to
       carry. They are last in the file on purpose: an inline style beat every
       rule above, including the mobile overrides, so only a declaration at the
       end of the cascade reproduces that behaviour exactly. Nothing here
       changes how the site looks — this pass moved the declarations, it did
       not re-decide them.

       The values ARE the scale: every one is a step on the 4px base above.
       Fifteen utilities at eleven ad-hoc values collapsed to eight, and the
       largest correction was 8px on a single section.

       This is also what lets the CSP drop 'unsafe-inline' from style-src. A
          style="" attribute needs it as surely as a <style> block does, which
          is why removing the last of them is a security change and not only a
          tidiness one.
       ================================================================== */
    .mt-3{margin-top:var(--space-3)}
    .mt-4{margin-top:var(--space-4)}
    .mt-6{margin-top:var(--space-6)}
    .mt-12{margin-top:var(--space-12)}
    .mb-6{margin-bottom:var(--space-6)}

    .pt-4{padding-top:var(--space-4)}
    .pt-6{padding-top:var(--space-6)}
    .pt-12{padding-top:var(--space-12)}

    /* Line length. One rule replaces the four max-widths that were guessing at
       it — 560, 600, 620 and 640px were four answers to one question. Set in
       ch rather than px so the measure follows the type size: ~65 characters
       at the lede size lands near 640px, and at body size near 560px, which is
       what those numbers were reaching for. */
    .measure{max-width:65ch}

    /* Ink colours for text sitting on a coloured band rather than the page. */
    .ink-green{color:rgba(22,0,31,.74)}
    .ink-dark{color:rgba(255,255,255,.72)}

    /* Component variants for a dark or tinted ground. Each element reads its
       own base rule first, then only the properties that must change. */
    .icon.on-dark{background:rgba(255,255,255,.1);color:var(--accent)}
    .arrow.on-dark{color:var(--accent)}
    .btn.ghost.on-dark{border-color:rgba(255,255,255,.2);color:#fff}
    .eyebrow.on-light{color:var(--plum-900)}

    /* ============================================================
       THE HOMEPAGE, IN GLAD'S DESIGN (2026-09-16)
       ============================================================ */
.hero{color:#260033}
.hero-kicker{padding:0;border:0;border-radius:0;background:none;backdrop-filter:none}
.hero-cta .btn.watch::before{content:"▷";display:inline-grid;place-items:center;width:25px;height:25px;margin-right:8px;border:1px solid #8fc641;border-radius:50%;font-size:12px}
.hero-insights{position:absolute;z-index:3;right:clamp(22px,4vw,72px);top:clamp(20px,5%,54px);width:292px;display:grid;gap:10px}
/* Each card a way in: a drawn picture, its words, an arrow. Illustrative
   figures only, never anybody's balance. */
.insight-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:14px;padding:13px 14px 13px 15px;background:rgba(252,252,248,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.85);border-radius:18px;box-shadow:0 10px 28px rgba(53,0,79,.12);color:#260033;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
a.insight-card:hover{transform:translateX(-4px);border-color:#8fc641;box-shadow:0 14px 32px rgba(53,0,79,.18)}
a.insight-card:focus-visible{outline:3px solid #8fc641;outline-offset:2px}
.insight-vis svg{display:block;width:48px;height:48px}
.insight-vis .spark{fill:none;stroke:#8fc641;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.insight-vis .spark-area{fill:rgba(143,198,65,.18)}
.insight-vis circle{fill:#527c17}
.insight-vis .ring-bg{fill:none;stroke:#eef5e2;stroke-width:6}
.insight-vis .ring-fg{fill:none;stroke:#8fc641;stroke-width:6;stroke-linecap:round}
.insight-vis text{fill:#35004f;font-size:11.5px;font-weight:800;text-anchor:middle}
.insight-vis rect{fill:#8fc641}
.insight-vis rect:last-child{fill:#527c17}
.insight-label{display:block;color:#625b7f;font-size:11.5px;line-height:1.25}
.insight-copy strong{display:block;margin-top:3px;font-size:15px;line-height:1.2;letter-spacing:-.01em}
.insight-copy b{display:block;margin-top:4px;color:#527c17;font-size:11.5px;line-height:1.25}
.insight-go{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f1f9e7;color:#35004f;transition:background .2s ease,transform .2s ease}
a.insight-card:hover .insight-go{background:#8fc641;transform:translateX(2px)}
.insight-security{margin-top:0;margin-left:62px;padding:13px 16px;border-radius:16px;background:rgba(82,124,23,.86);color:#fff;font-size:12px;font-weight:700;line-height:1.25;box-shadow:0 10px 22px rgba(53,0,79,.18)}
.home-metrics{padding-bottom:var(--space-10)}
.home-metrics .stat{display:flex;align-items:flex-start;gap:18px}
.stat-icon{width:55px;height:55px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;font-size:30px;font-weight:800}
.home-metrics .stat .num{font-size:var(--fs-num-sm)}
.home-metrics .stat .cap{line-height:1.45}
@media (max-width:1000px){
  .hero-insights{transform:scale(.82);transform-origin:top right;right:10px}
}
@media (max-width:760px){
  .hero-insights{display:none}
  .home-metrics .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .home-metrics .stats{grid-template-columns:1fr}
}
.goals-section{position:relative;overflow:hidden}
.goals-section .container{position:relative;z-index:1}
.goals-section .section-head{max-width:1240px;margin:0 auto var(--space-8);align-items:center}
.goals-section .section-head h2::first-line{color:#260033}
.goals-section .section-head h2::after{content:"";display:block;width:140px;height:0}
.goals-section .lead{color:#625b7f;max-width:44ch}
.goals-section .journeys{width:min(100%,1240px);margin:0 auto;gap:16px}
.goals-section .journey{padding:28px;border:1px solid #e4d6e8;border-radius:18px}

.goals-section .journey h3{font-size:var(--fs-h3)}
.goals-section .journey p{font-size:var(--fs-small);line-height:1.55;color:#625b7f}
.goals-section .journey .arrow{display:inline-flex;align-items:center;gap:10px;margin-top:var(--space-4);font-weight:800;font-size:var(--fs-small)}
.goals-section .journey .arrow i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-style:normal;font-size:23px;transition:transform .2s ease}
.goals-section .journey .arrow:hover i{transform:translateX(4px);background:#f1f9e7}
@media (max-width:1080px){
  .goals-section .journeys{gap:var(--space-4)}
}

.ecosystem-section{position:relative;overflow:hidden;padding-bottom:0}
.ecosystem-section>.container{position:relative;z-index:1;padding-bottom:var(--space-12)}
@media (max-width:640px){
  .ecosystem-section>.container{padding-bottom:var(--space-8)}
}
.digital-section .container{position:relative;z-index:1}
.digital-section .section-head{max-width:1240px;margin:0 auto var(--space-8);align-items:center}
.digital-section .lead{color:#625b7f;max-width:43ch}
.digital-section .tiles-4{width:min(100%,1240px);margin:0 auto;gap:16px}
.digital-section .portal-tile{padding:28px;display:flex;flex-direction:column;border:1px solid #e4d6e8;border-radius:18px}

.digital-section .portal-tile h3{font-size:var(--fs-h3)}
.digital-section .portal-tile p{font-size:var(--fs-small);line-height:1.55;color:#625b7f}
.digital-section .portal-tile .arrow{display:grid;place-items:center;width:48px;height:48px;margin-top:auto;margin-left:auto;border-radius:50%;font-size:25px;font-weight:700;transition:transform .2s ease,background .2s ease}
.digital-section .portal-tile .arrow:hover{transform:translateX(4px);background:#f1f9e7}
.impact-stories-section .section-head,.cta-section .cta{max-width:1240px;margin-inline:auto}
.impact-stories-section .lead,.footprint-section .lead,.cta-section .lead{color:#625b7f}
.impact-stories-section .voices-title{color:#260033}
.footprint-section .footprint{max-width:1240px;margin:auto;gap:20px}
.footprint-section .map-card,.footprint-section .footprint-copy{border:1px solid #e4d6e8;border-radius:18px}
.footprint-section .market-card{border-color:#e4d6e8;background:#fff;border-radius:12px}
.footprint-section .market-card:hover{border-color:#8fc641}
.footprint-section .market-card .arrow{color:#527c17}
.impact-section{position:relative;overflow:hidden}
.impact-section .container{position:relative;z-index:1;max-width:1240px}
.impact-section .impact-cards{gap:16px}
.impact-section .impact-card{padding:28px;border-radius:18px}
.impact-section .impact-card h3{font-size:var(--fs-h3)}
.cta-section .cta{padding:42px;border:1px solid #e4d6e8;border-radius:20px}
.cta-section .lead-form{border-color:#e4d6e8;background:#f1f9e7}
.cta-section .cta-points li::before{background:#527c17}
.footer-grid{max-width:1240px;margin:auto}
.copyright{max-width:1240px;margin-left:auto;margin-right:auto}
@media (max-width:640px){
  .impact-section .impact-card,.cta-section .cta{padding:26px}
  .impact-stories-section .impact-figures{padding:var(--space-6) 20px}
}
.investments-section .container{position:relative;z-index:1}
.investments-section .section-head{max-width:1540px;margin:0 auto var(--space-8);align-items:center}
.investments-section .lead{color:#625b7f;max-width:43ch}
.investments-section .tiles-5{width:min(100%,1540px);margin:0 auto;gap:16px}

.section-head{gap:clamp(20px,3vw,40px);margin-bottom:clamp(24px,3vw,32px)}
.section-head > *{min-width:0}
.section-head h2{max-width:18ch}
.section-head .lead{max-width:42ch}
.goals-section .section-head,.digital-section .section-head, .investments-section .section-head{margin-bottom:clamp(24px,3vw,32px)}
.goals-section .journey,.digital-section .portal-tile, .investments-section .fund-tile{min-height:clamp(280px,26vw,336px)}
.impact-section .impact-card{min-height:clamp(168px,16vw,204px)}
@media (max-width:1080px){
  .section-head h2{max-width:22ch}
  .goals-section .journey,.digital-section .portal-tile, .investments-section .fund-tile{min-height:0;padding:24px}
  .investments-section .tiles-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .investments-section .tiles-5 > :last-child{grid-column:1 / -1}
  .impact-stories-section .figures-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .container{width:min(100% - 32px,var(--max))}
  .section-head{margin-bottom:24px}
  .section-head h2{max-width:none}
  .lead{font-size:var(--fs-body);line-height:1.65}
  .goals-section .journeys,.digital-section .tiles-4, .investments-section .tiles-5{width:100%;gap:12px}
  .goals-section .journey,.digital-section .portal-tile, .investments-section .fund-tile{padding:22px}
  .impact-stories-section .figures-grid{grid-template-columns:1fr 1fr;gap:var(--space-4)}
  .footprint-section .footprint{gap:12px}
  .cta-section .cta{padding:24px}
}
:root{--brand-plum:#35004f;--brand-lime:#8fc641;--plum-900:#260033;--plum-800:#35004f;--plum-700:#35004f;--plum-500:#5a2670;--plum-300:#9b72ae;--plum-100:#f7f2f8;--lime-600:#8fc641;--accent-ink:#527c17;--accent-soft:#f1f9e7;--bg:#f3f0f6;--surface:#ffffff;--surface-2:#f7f2f8;--text:#260033;--heading:#35004f;--muted:#62556a;--line:#e4d6e8;--primary:#35004f;--accent:#8fc641;--hero:#35004f;--success:#527c17}
.nav-tab:hover,.nav-tab.is-open{color:#35004f}
.nav-cta:hover{background:var(--plum-500);border-color:var(--plum-500)}
.card{background:#fff;border-color:rgba(53,0,79,.14);box-shadow:0 10px 30px rgba(53,0,79,.075)}
.eyebrow,.goals-section .eyebrow,.digital-section .eyebrow,.investments-section .eyebrow, .impact-stories-section .eyebrow,.footprint-section .eyebrow,.cta-section .eyebrow{color:#35004f}
.goals-section .section-head h2,.digital-section .section-head h2,.investments-section .section-head h2, .impact-stories-section h2,.footprint-section h2,.cta-section h2{color:#35004f}
.hero-cta .btn.primary,.ecosystem-section .hero-actions .btn:first-child, .cta-section .lead-form .btn.primary{background:#35004f;border-color:#35004f;color:#fcfcf8}
.hero-cta .btn.watch::before{border-color:#8fc641;color:#527c17}
.hero-caption :is(h1,h2),.hero-caption :is(h1,h2)::first-line{color:#35004f}
.hero-arrow:hover{border-color:#35004f;color:#35004f}
.stat-icon,.journey-icon,.portal-icon,.fund-icon{background:var(--lime);color:var(--plum)}
.home-metrics .stat,.goals-section .journey,.digital-section .portal-tile,.investments-section .fund-tile, .footprint-section .map-card,.footprint-section .footprint-copy,.cta-section .cta{background:#fff;border-color:rgba(53,0,79,.13);box-shadow:0 10px 28px rgba(53,0,79,.065)}
.goals-section .journey h3,.digital-section .portal-tile h3,.investments-section .fund-tile h3{color:#35004f}
.goals-section .journey .arrow,.digital-section .portal-tile .arrow,.investments-section .fund-tile .arrow{color:#35004f}
.goals-section .journey .arrow i,.digital-section .portal-tile .arrow,.investments-section .fund-tile .arrow{background:#f1f9e7;color:#527c17}
.tag,.digital-section .tag,.investments-section .tag{background:#f7f2f8;color:#35004f}
.market-card{background:rgba(252,252,248,.82);border-color:rgba(53,0,79,.14)}
.market-card:hover{border-color:#35004f}
.map-card{background:rgba(252,252,248,.82)}
.impact-section .eyebrow{color:#8fc641}
.impact-section h2{color:#8fc641}
.impact-section .lead{color:rgba(252,252,248,.78)}
.impact-section .impact-card{background:rgba(252,252,248,.94);border-color:rgba(143,198,65,.28);box-shadow:0 10px 28px rgba(0,0,0,.16)}
.impact-section .impact-card h3{color:#35004f}
.impact-section .impact-card .icon{background:#f1f9e7;color:#527c17}
.impact-section .ink-green{color:#62556a}
.impact-stories-section .impact-figures,.newsletter{background:#35004f}
.impact-stories-section .figures-label,.newsletter-eyebrow{color:#8fc641}
.newsletter .btn.primary{background:#8fc641;border-color:#8fc641;color:#260033}
footer{background:#35004f}
.social a:hover{background:#8fc641;border-color:#8fc641;color:#260033}
.hero-media::after{background:linear-gradient(90deg,rgba(243,240,246,.64) 0%,rgba(243,240,246,.08) 44%,rgba(38,0,51,0) 72%)}
.hero-caption > *{max-width:560px}
.hero-caption :is(h1,h2){font-weight:700}
.hero-tab.is-active{color:#35004f}
@media (max-width:900px){
  .hero-media::after{background:linear-gradient(180deg,rgba(243,240,246,.96),rgba(243,240,246,.84) 58%,rgba(243,240,246,.66))}
}
.goals-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,.8fr);grid-template-areas:"heading intro" "image list";row-gap:34px;align-items:start}
.goals-heading{grid-area:heading}
.goals-heading h2{max-width:11ch;line-height:1.08}
.goals-intro{grid-area:intro;align-self:center;margin:0;max-width:38ch}
.goals-image{grid-area:image;overflow:hidden;box-shadow:0 16px 40px rgba(53,0,79,.11)}
.goals-image img{width:100%;height:100%;object-fit:cover;object-position:68% center}
.goals-list{grid-area:list;align-self:stretch;display:grid;grid-template-rows:repeat(4,1fr);border-top:1px solid rgba(53,0,79,.18)}
.goal-row{display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:18px;align-items:center;border-bottom:1px solid rgba(53,0,79,.18);transition:background .2s ease}
.goal-row:hover{background:rgba(143,198,65,.07)}
.goal-copy{display:grid;gap:6px}
.goal-copy b{font-size:var(--fs-h3)}
.goal-copy span{font-size:var(--fs-small);line-height:1.55}
.goal-arrow{display:grid;place-items:center;width:54px;height:54px;border:1px solid rgba(53,0,79,.28);border-radius:50%;font-size:24px;transition:.2s ease}
.goal-row:hover .goal-arrow,.goal-row:last-child .goal-arrow{background:#8fc641;border-color:#8fc641;color:#260033}
@media (max-width:900px){
  .goals-layout{grid-template-columns:1fr;grid-template-areas:"heading" "intro" "image" "list"}
  .goals-image{max-width:680px;width:100%}
  .goals-list{max-width:680px;width:100%}
}
@media (max-width:640px){
  .goal-row{grid-template-columns:minmax(0,1fr) 44px;gap:12px}
  .goal-arrow{width:44px;height:44px}
  .goal-copy span{font-size:var(--fs-label)}
}
.digital-section,.investments-section{position:relative;overflow:hidden}
.digital-layout{display:grid;grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);grid-template-areas:"heading image" "links links";align-items:center}
.digital-heading{grid-area:heading;max-width:43rem}
.digital-heading h2,.capital-heading h2{line-height:1.08}
.digital-heading .lead,.capital-heading .lead{max-width:39rem}
.digital-image{grid-area:image;overflow:hidden;box-shadow:0 1.5rem 3.5rem rgba(53,0,79,.12)}
.digital-image img,.capital-image img{width:100%;height:100%;object-fit:cover;display:block}
.digital-image img{object-position:center}
.digital-links{grid-area:links;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(53,0,79,.14)}
.digital-link{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:start;padding:0 1.55rem;color:inherit;text-decoration:none;border-right:1px solid rgba(53,0,79,.14)}
.digital-link:first-child{padding-left:0}
.digital-link:last-child{border-right:0;padding-right:0}
.digital-link-icon{display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;font-size:1.8rem;line-height:1}
.digital-link-copy{display:grid;gap:.45rem;font-size:var(--fs-small);line-height:1.45}
.digital-link-copy b,.capital-name b{font-size:var(--fs-h3);line-height:1.2}
.digital-link-arrow,.capital-arrow{display:grid;place-items:center;width:3.25rem;height:3.25rem;border:1px solid rgba(53,0,79,.2);border-radius:50%;font-size:1.35rem;transition:.2s ease}
.digital-link:hover .digital-link-arrow,.capital-row:hover .capital-arrow{background:#8fc641;border-color:#8fc641;transform:translateX(.2rem)}
.capital-layout{display:grid;grid-template-columns:minmax(23rem,.85fr) minmax(35rem,1.15fr);grid-template-areas:"heading list" "image list";align-items:stretch}
.capital-heading{grid-area:heading;max-width:42rem}
.capital-image{grid-area:image;overflow:hidden;box-shadow:0 1.5rem 3.5rem rgba(53,0,79,.1)}
.capital-image img{object-position:center}
.capital-list{grid-area:list;display:grid;align-content:stretch}
.capital-row{display:grid;grid-template-columns:minmax(11rem,1fr) minmax(15rem,1.5fr) 3.3rem;gap:1.15rem;align-items:center;color:inherit;text-decoration:none;border-bottom:1px solid rgba(53,0,79,.15)}
.capital-row:first-child{border-top:1px solid rgba(53,0,79,.15)}
.capital-name{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap}
.capital-name .tag{font-size:.72rem;padding:.4rem .7rem}
.capital-description{font-size:var(--fs-small);line-height:1.45}
.capital-arrow{justify-self:end}
@media (max-width:980px){
  .digital-layout{grid-template-columns:1fr;grid-template-areas:"heading" "image" "links"}
  .digital-links{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .digital-link:nth-child(2){border-right:0}
  .digital-link:nth-child(3){padding-left:0}
  .capital-layout{grid-template-columns:1fr;grid-template-areas:"heading" "image" "list"}
  .capital-list{max-width:none}
}
@media (max-width:620px){
  .digital-link,.digital-link:first-child,.digital-link:last-child{padding:1.1rem 0;border-right:0;border-bottom:1px solid rgba(53,0,79,.14);min-height:0}
  .digital-link:last-child{border-bottom:0}
  .capital-row{gap:.8rem}
  .capital-name .tag{font-size:.65rem}
}
.impact-layout{display:grid;grid-template-columns:minmax(28rem,.86fr) minmax(38rem,1.14fr);grid-template-areas:"image heading" "image intro" "image programmes";column-gap:4.8rem;row-gap:1.5rem;align-items:start}
.impact-image{position:relative;grid-area:image;margin:0;overflow:hidden}
.impact-image img{width:100%;height:100%;object-fit:cover;display:block}
.impact-heading{align-self:end}
.impact-heading h2{line-height:1.08}
.impact-intro{max-width:38rem}
.impact-programmes{display:grid;align-self:stretch}
.impact-programme{display:grid;grid-template-columns:4.15rem minmax(13rem,1fr) 3.25rem;gap:1.1rem;align-items:center;border-bottom:1px solid rgba(53,0,79,.15)}
.impact-programme:first-child{border-top:1px solid rgba(53,0,79,.15)}
.impact-icon{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;font-size:1.6rem}
.impact-programme-copy{display:grid;grid-template-columns:minmax(10rem,1fr) minmax(14rem,1.35fr);gap:2rem;align-items:center;line-height:1.45}
.impact-programme-copy b{align-self:stretch;display:flex;align-items:center;padding-right:1.5rem;border-right:1px solid rgba(53,0,79,.16);font-size:var(--fs-h3)}
.impact-programme-arrow{display:grid;place-items:center;width:3.25rem;height:3.25rem;border:1px solid rgba(53,0,79,.2);border-radius:50%;font-size:1.4rem}
.impact-stories-section .section-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr);align-items:center}
.impact-stories-section .section-head .lead{margin:0}
@media (max-width:980px){
  .impact-layout{grid-template-columns:1fr;gap:1.5rem}
  .impact-image{max-width:45rem}
  .impact-programmes{max-width:52rem}
  .impact-stories-section .section-head{grid-template-columns:1fr}
}
@media (max-width:620px){
  .impact-icon{width:2.8rem;height:2.8rem;font-size:1.3rem}
  .impact-programme-copy{font-size:var(--fs-small)}
  .impact-stories-section .section-head{display:block}
  .impact-stories-section .section-head .lead{margin-top:1rem}
}
@media (min-width:981px){
  .impact-section>.impact-layout{max-width:none;margin:0;display:grid;column-gap:0;row-gap:1.2rem;align-items:start}
  .impact-eyebrow{justify-self:start;margin-bottom:1.25rem}
  .impact-heading{align-self:start}
  .impact-heading h2{max-width:40rem}
  .impact-intro{align-self:start;max-width:22rem;font-size:var(--fs-lede);line-height:1.48}
  .impact-programme{grid-template-columns:4.25rem minmax(0,1fr) 3.25rem;gap:1.25rem}
  .impact-programme-copy{grid-template-columns:minmax(11rem,1fr) minmax(15rem,1.35fr);gap:2rem}
  .impact-programme-arrow{justify-self:end}
  .impact-section .eyebrow{color:#35004f}
}
@media (max-width:980px){
  .impact-layout{grid-template-areas:"eyebrow" "heading" "intro" "image" "programmes"}
  .impact-eyebrow{justify-self:start}
  .impact-heading h2{margin-top:0}
}
.hero-caption{bottom:11.6rem;left:max(6vw,4.5rem)}
.hero-cta .btn.primary{min-width:12.8rem}
.hero-tab{padding-top:.9rem}
.home-metrics{position:relative;z-index:4;margin-top:-1.1rem}
.ecosystem-section h2{line-height:1.08}
.ecosystem-section .lead{max-width:42rem;line-height:1.55}
.ecosystem-section .hero-actions .btn:last-child{background:transparent}
.ecosystem-section .orbit-ring.r1,.ecosystem-section .orbit-ring.r2,.ecosystem-section .orbit-ring.r3,.ecosystem-section .orbit-ring.r4{border-color:rgba(53,0,79,.14)}
.ecosystem-section .orbit-dot,.ecosystem-section .orbit-dot.violet{background:#8fc641}
.ecosystem-section .wheel-center .hub-label{color:#35004f}
.ecosystem-section .wheel-center .hub-copy{color:#705b7c}
.ecosystem-section .wheel-center .hub-rule{background:#8fc641}
.ecosystem-section .wheel-node{border-color:rgba(53,0,79,.06)}
.ecosystem-section .wheel-node:hover,.ecosystem-section .wheel-node.is-active{box-shadow:0 0 0 2px #8fc641,0 .9rem 2rem rgba(53,0,79,.14)}
@media (max-width:900px){
  .hero-caption{left:var(--gutter,24px);bottom:auto}
  .home-metrics{margin-top:0}
}
@media (min-width:901px){
  .nav-inner{width:min(100% - 9rem,1640px);max-width:none}
  .hero-slide,.hero-track{height:100%}
  /* A slide's own crop position (its focal field) where it has one. */
  .hero-media img{object-position:var(--focal,78% 50%)!important}
  .hero-caption :is(h1,h2){width:10ch}
  .hero-caption p{width:38rem;margin-top:1.2rem}
  .hero-chrome{bottom:0}
  .hero-controls{padding-right:7.1rem}
  .home-metrics{margin-top:0;padding-top:0;padding-bottom:2.25rem}
  .home-metrics .stats{grid-template-columns:repeat(4,minmax(0,1fr));margin:-.1rem auto 0}
}
@media (min-width:981px){
  .section{padding-top:3.75rem;padding-bottom:3.75rem}
  .impact-stories-section .section-head{margin-bottom:2.25rem}
  .impact-stories-section .impact-figures{padding:1.7rem 2.2rem}
  .impact-stories-section .voice{min-height:16rem}
  .ecosystem-section>.container{padding-bottom:3.5rem}
  .ecosystem{gap:2.5rem}
  .orbit{max-width:37rem;justify-self:end}
}
@media (max-width:980px){
  .section{padding-top:3.25rem;padding-bottom:3.25rem}
}
@media (max-width:620px){
  .section{padding-top:2.75rem;padding-bottom:2.75rem}
}
@media (min-width:981px){
  .impact-section{padding-top:3.15rem!important;padding-bottom:4.35rem!important}
  .impact-eyebrow,.impact-heading,.impact-programmes{margin-left:3rem}
  .impact-intro{margin-right:3rem}
  .impact-image{height:31rem!important}
  .impact-image img{object-fit:cover}
  .impact-programmes{margin-top:1rem}
}
/* --warm is the page's ground: a pale lavender drawn from the brand purple,
   with cards, forms and panels in white on it (Enwealth found the site too
   white and plain; the user chose this, 2026-10-01). */
:root{--plum:#35004f;--plum-dark:#260033;--lime:#8fc641;--lime-soft:#f1f9e7;--warm:#f3f0f6;--plum-tint:#f7f2f8;--copy:#625b7f;--hair:rgba(53,0,79,.15)}
body{background:var(--warm);color:var(--plum-dark)}
.section{padding:64px 0;background:var(--warm)}
.nav{background:rgba(252,252,248,.96);border-color:var(--hair)}
.nav-cta{background:var(--plum);border-color:var(--plum)}
.hero{height:720px;min-height:720px;background:var(--warm)}
.hero-media{left:41%;clip-path:ellipse(76% 100% at 68% 50%)}
.hero-media:after{background:linear-gradient(90deg,rgba(243,240,246,.84),rgba(243,240,246,.07) 43%,transparent 68%)}
.hero-caption.container{width:min(100% - 9rem,1640px);max-width:none;left:50%;transform:translateX(-50%);bottom:174px;padding:0}
.hero-kicker{color:var(--plum)}
.hero-caption :is(h1,h2){max-width:10ch;font-family:var(--font-head);line-height:1.08;color:var(--plum)}
.hero-caption p{max-width:38rem;color:var(--copy);font-size:var(--fs-lede);line-height:1.52}
.hero-cta{margin-top:1.75rem}
.hero-cta .btn.primary{background:linear-gradient(110deg,var(--lime),#8fc641);border-color:var(--lime);color:var(--plum-dark)}
.hero-cta .btn.watch{background:rgba(252,252,248,.82);border-color:rgba(53,0,79,.3);color:var(--plum)}
.hero-chrome{padding-bottom:27px;background:linear-gradient(180deg,transparent,rgba(243,240,246,.92))}
.hero-chrome-inner{width:min(100% - 9rem,1640px);max-width:none;padding:0}
.hero-tabs{max-width:52rem}
.tab-fill{background:var(--lime)}
.hero-arrow{background:rgba(252,252,248,.9);border-color:var(--hair);color:var(--plum)}
.home-metrics{margin-top:0;padding:36px 0;background:var(--warm)}
.home-metrics .stats{width:min(100% - 8rem,1750px);max-width:none;gap:0;padding:34px 38px;border:1px solid rgba(53,0,79,.08);border-radius:42px;background:#fff;box-shadow:0 18px 40px rgba(53,0,79,.07)}
.home-metrics .stat{min-height:88px;padding:0 30px;border:0;border-right:1px solid var(--hair);border-radius:0;box-shadow:none;background:transparent}
.home-metrics .stat:first-child{padding-left:0}
.home-metrics .stat:last-child{padding-right:0;border-right:0}
.stat-icon{background:var(--lime);color:var(--plum)}
.home-metrics .stat .num{color:var(--plum)}
.goals-section{background:var(--warm)}
.goals-layout{gap:34px 64px}
.goals-heading h2{font-family:var(--font-head);color:var(--plum)}
.goals-intro{color:var(--copy)}
.goals-image{height:460px;border-radius:0 96px 96px 0}
.goals-list{border-color:var(--hair)}
.goal-row{min-height:0;padding:16px 8px;border-color:var(--hair);color:var(--plum)}
.goal-copy span{color:var(--copy)}
.goal-arrow{border-color:rgba(53,0,79,.25)}
.goal-row:last-child .goal-arrow{background:var(--lime);border-color:var(--lime)}
.ecosystem-section{background:var(--warm);color:var(--plum)}
.ecosystem-section .eyebrow{color:#625b7f}
.ecosystem-section h2{font-family:var(--font-head);color:var(--plum)}
.ecosystem-section .lead{color:var(--copy)}
.ecosystem-section .hero-actions .btn:first-child{background:var(--plum);border-color:var(--plum);color:var(--warm)}
.ecosystem-section .hero-actions .btn:last-child{border-color:rgba(53,0,79,.35);color:var(--plum)}
.ecosystem-section .orbit-ring{border-color:rgba(53,0,79,.14)!important}
.ecosystem-section .orbit-dot{background:#8fc641!important}
.ecosystem-section .wheel-center{background:#fff;box-shadow:0 18px 36px rgba(53,0,79,.12)}
.ecosystem-section .wheel-node{background:var(--warm);color:var(--plum);box-shadow:0 10px 22px rgba(53,0,79,.1)}
.ecosystem-section .node-icon,.ecosystem-section .node-icon.lilac{background:var(--lime-soft);color:var(--accent-ink)}
.ecosystem-section .orbit-note{color:#8fc641}
.digital-section,.investments-section{background:var(--warm)}
.digital-layout{gap:36px 64px}
.digital-heading h2,.capital-heading h2{font-family:var(--font-head);color:var(--plum)}
.digital-heading .lead,.capital-heading .lead{color:var(--copy)}
.digital-image{height:352px;border-radius:96px 0 0 96px}
.digital-links{padding-top:24px;border-color:var(--hair)}
.digital-link{min-height:120px;border-color:var(--hair)}
.digital-link-icon{background:var(--plum-tint);color:var(--plum)}
.digital-link-copy{color:var(--copy)}
.digital-link-copy b,.capital-name b{color:var(--plum)}
.digital-link-arrow,.capital-arrow{border-color:rgba(53,0,79,.22);color:var(--plum)}
.capital-layout{gap:28px 56px}
.capital-image{min-height:310px;border-radius:0 88px 88px 0}
.capital-row{padding:15px 0;border-color:var(--hair)}
.capital-description{color:var(--copy)}
.capital-name .tag{background:var(--plum-tint);color:var(--plum)}
.impact-stories-section{background:var(--warm)}
.impact-stories-section .section-head{gap:64px}
.impact-stories-section h2{color:var(--plum)}
.impact-stories-section .lead{color:var(--copy)}
.impact-stories-section .impact-figures{background:var(--plum);border-radius:22px;box-shadow:0 18px 38px rgba(53,0,79,.16)}
.impact-stories-section .voice{background:#fff;border-color:var(--hair);box-shadow:0 12px 28px rgba(53,0,79,.06)}
.impact-stories-section .voice-tag{background:var(--lime-soft);color:var(--accent-ink)}
.impact-section{background:var(--warm)!important;color:var(--plum)}
.impact-section>.impact-layout{width:min(100% - 9rem,1640px);margin-inline:auto;padding:0;grid-template-columns:42% 35% 23%;grid-template-areas:". eyebrow eyebrow" "image heading intro" "image programmes programmes";gap:19px 0}
.impact-eyebrow{grid-area:eyebrow;margin:0 0 12px 48px}
.impact-heading{grid-area:heading;margin-left:48px}
.impact-heading h2{margin:0;color:var(--plum)}
.impact-intro{grid-area:intro;margin:0 48px 0 16px;color:var(--copy)}
.impact-image{grid-column:1;grid-row:2 / 4;width:100%;height:496px;min-height:0;border-radius:24px;box-shadow:0 12px 28px rgba(53,0,79,.1)}
.impact-image img{object-position:center 35%}
.impact-programmes{grid-area:programmes;margin:8px 48px 0}
.impact-programme{min-height:99px;border-color:var(--hair)}
.impact-icon{background:var(--lime);color:var(--plum)}
.impact-programme-copy{color:var(--copy)}
.impact-programme-copy b{color:var(--plum);border-color:var(--hair)}
.impact-programme-arrow{border-color:rgba(53,0,79,.22);color:var(--plum)}
@media (max-width:980px){
  .section{padding:52px 0}
  .hero{height:auto;min-height:0;max-height:none}
  .hero-caption.container,.hero-chrome-inner{width:min(100% - 32px,1640px);left:auto;transform:none}
  /* The caption is relative here: the desktop bottom:174px would lift it under
     the header, and its padding:0 left the buttons under the controls. The
     controls follow the caption in the flow, so the tallest slide makes room. */
  .hero-caption.container{bottom:auto;padding:24px 0 28px}
  .hero-chrome{position:relative;bottom:auto}
  /* The desktop ellipse clip is a straight seam at this height: the photo
     fades in from the left instead. */
  .hero-media{left:18%;clip-path:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);mask-image:linear-gradient(90deg,transparent,#000 55%)}
  .home-metrics .stats{width:min(100% - 32px,1750px);grid-template-columns:repeat(2,1fr);border-radius:24px}
  .home-metrics .stat:nth-child(2){border-right:0}
  .home-metrics .stat:nth-child(n/**/+3){margin-top:20px}
  .goals-image{height:336px}
  .digital-layout,.capital-layout{gap:28px}
  .digital-image,.capital-image{height:304px}
  .impact-section>.impact-layout{width:min(100% - 32px,1640px);grid-template-columns:1fr;grid-template-areas:"eyebrow" "heading" "intro" "image" "programmes"}
  .impact-eyebrow,.impact-heading,.impact-intro,.impact-programmes{margin-left:0;margin-right:0}
  .impact-image{grid-column:auto;grid-row:auto;height:336px}
  .impact-programme{min-height:92px}
}
@media (max-width:620px){
  .section{padding:44px 0}
  .home-metrics .stats{grid-template-columns:1fr;padding:24px;border-radius:18px}
  .home-metrics .stat{border:0;border-bottom:1px solid var(--hair);padding:18px 0}
  .home-metrics .stat:last-child{border-bottom:0}
  .goals-image,.digital-image,.capital-image,.impact-image{height:256px;border-radius:20px}
  .digital-links{grid-template-columns:1fr}
  .digital-link{min-height:0;padding:18px 0;border-right:0;border-bottom:1px solid var(--hair)}
  .capital-row{grid-template-columns:1fr 44px}
  .capital-description{grid-column:1/3}
  .impact-programme{grid-template-columns:50px 1fr 44px;gap:10px;min-height:0;padding:16px 0}
  .impact-programme-copy{grid-template-columns:1fr;gap:6px}
  .impact-programme-copy b{border:0;padding:0}
  .impact-programme-arrow{width:44px;height:44px}
}

    /* Green text is the one text green, --accent-ink (5.1:1 on the warm
       ground); lime is never text on a light ground (2026-09-30). */
    .ecosystem-section .orbit-note{color:#527c17}

    /* Three fixes to the design as supplied, found at a 1400px laptop width.
       The impact programmes put title and description side by side in a column
       too narrow for both, so the description ran under the arrow; below
       1500px they stack. The four digital links left ~130px of text each; below
       1440px they go two across, as they already did below 980px. And two
       texts kept the colour an earlier dark-ground pass gave them: the impact
       intro (near-white on the warm page) and the newsletter eyebrow (lime on a
       pale pill). */
    @media (max-width:1500px){
      .impact-programme-copy{grid-template-columns:minmax(0,1fr);gap:.3rem}
      .impact-programme-copy b{border-right:0;padding-right:0}
    }
    @media (min-width:981px) and (max-width:1440px){
      .digital-links{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.75rem}
      .digital-link:nth-child(2){border-right:0;padding-right:0}
      .digital-link:nth-child(3){padding-left:0}
    }
    .impact-section .impact-intro{color:var(--copy)}
    .newsletter .newsletter-eyebrow{background:rgba(252,252,248,.10);border-color:rgba(143,198,65,.35)}

    /* The CMS footer's column headings are h2 (see Chrome.tsx), and the design's
       :root pass made h2 plum — plum on the plum footer, all but invisible. The
       static footer's h4 never met that rule. */
    footer .footer-heading{color:#fff}

    /* ============================================================
       EVERY OTHER PAGE, IN THE HOMEPAGE'S LANGUAGE (2026-09-17)
       ============================================================
       The homepage pass above made the ground warm site-wide but left the
       inner pages in their earlier dress: boxed cards in rows of four, and
       aubergine bands. Worse, `.section{background:var(--warm)}` beat `.dark`'s
       ground but not its white ink, so every audience band, the About journey
       and the newsletter heading rendered white on near-white.

       This carries the homepage's vocabulary to the shared components rather
       than to any page, so the static build and the CMS (which render the same
       classes) change together:
         - bright warm ground; no dark bands between the hero and the footer
         - like-for-like items as open columns on a hairline, each opened by a
           short lime rule (the hero kicker's dash), not as shadowed boxes
         - icons as lime-soft discs with deep-green ink (the stat strip's)
         - numbers as light plum numerals (the goal rows')
         - lists and FAQs as hairline rows with a round arrow/toggle
       Scoped away from the homepage's own sections, which keep their rules. */

    /* --- Hero ------------------------------------------------------------ */
    .page-hero{
      padding-bottom:clamp(48px,6vw,88px);
      background:var(--warm)
    }
    .page-hero-grid{gap:clamp(32px,5vw,72px)}
    .page-hero h1{line-height:1.08;color:var(--plum)}
    .page-hero .lead{color:var(--copy)}
    .page-hero .hero-actions .btn.primary{
      background:var(--lime);border-color:var(--lime);
      color:var(--plum-dark)
    }
    .page-hero .hero-actions .btn:not(.primary){
      background:rgba(252,252,248,.82);border-color:rgba(53,0,79,.3);color:var(--plum)
    }
    .page-hero-card,.country-card{
      padding:clamp(24px,2.6vw,36px);border-radius:28px;
      background:rgba(255,255,255,.72);border-color:rgba(53,0,79,.08);
      box-shadow:0 18px 40px rgba(53,0,79,.07)
    }
    .page-hero-card .check-list{gap:0}
    .page-hero-card .check-list li{padding:12px 0 12px 22px;border-bottom:1px solid var(--hair)}
    .page-hero-card .check-list li:last-child{border-bottom:0}
    .page-hero-card .check-list li:before{top:19px}
    .page-hero-card .btn.small.primary{background:var(--plum);border-color:var(--plum)}
    .stage-list{gap:0;border-top:1px solid var(--hair)}
    .stage{
      position:relative;padding:14px 48px 14px 0;border:0;border-bottom:1px solid var(--hair);
      border-radius:0;background:transparent
    }
    .stage:after{
      content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
      width:36px;height:36px;border:1px solid rgba(53,0,79,.22);
      border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335004f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat;transition:.2s ease
    }
    .stage:hover{border-color:var(--hair);transform:none;background:rgba(143,198,65,.07)}
    .stage:hover:after{background-color:var(--lime);border-color:var(--lime)}
    .stage b{color:var(--plum)}
    .stage span{color:var(--copy)}
    .subnav{background:rgba(243,240,246,.96);border-bottom-color:var(--hair)}
    .breadcrumb{color:var(--copy)}
    .breadcrumb a{color:var(--plum)}

    /* --- Section heads ---------------------------------------------------- */
    .section h2{color:var(--plum)}
    .section-head .lead,.faq-layout .lead,.section .measure.lead{color:var(--copy)}

    /* --- Open columns in place of boxed cards ----------------------------- */
    .tiles-4 > .card,.journeys > .card,.stage-grid > .card,.steps > .card,
    .director-grid > .card,.solution-grid > .solution,.impact-cards > .impact-card{
      position:relative;min-height:0;padding:28px 8px 8px 0;
      background:transparent;border:0;border-top:1px solid var(--hair);
      border-radius:0;box-shadow:none;overflow:visible
    }
    .tiles-4 > .card:before,.journeys > .card:before,.stage-grid > .card:before,
    .steps > .card:before,.director-grid > .card:before,.solution-grid > .solution:before,
    .impact-cards > .impact-card:before{
      content:"";position:absolute;left:0;top:-2px;width:44px;height:3px;border-radius:2px;
      background:var(--lime)
    }
    .tiles-4,.journeys,.stage-grid,.steps,.solution-grid,.director-grid,.impact-cards{column-gap:clamp(24px,3vw,44px);row-gap:clamp(28px,3vw,40px)}
    .tiles-4 > .card h3,.journeys > .card h3,.stage-card h3,.step h3,.solution h3,
    .director h3,.impact-card h3{color:var(--plum)}
    .tiles-4 > .card p,.journeys > .card p,.stage-card p,.step p,.solution p,
    .director .muted,.impact-card p{color:var(--copy);font-size:var(--fs-small);line-height:1.6}
    .tiles-4 > .card .arrow,.journeys > .card .arrow,.solution .arrow,.arrow.on-dark{
      display:inline-flex;align-items:center;gap:8px;color:var(--plum);font-size:var(--fs-small)
    }
    .tiles-4 > .card .arrow:hover,.solution .arrow:hover{color:#527c17}
    .tiles-4 > .card .eyebrow{background:transparent;border:0;padding:0;box-shadow:none;color:#527c17}
    .tiles-4 > .card .tag{background:var(--plum-tint);color:var(--plum)}

    /* Figures: a big plum number over a quiet caption. The homepage's strip
       (.home-metrics) is the one .stats that keeps its panel. */
    .section:not(.home-metrics) .stats{column-gap:clamp(24px,3vw,44px);row-gap:clamp(28px,3vw,40px)}
    .section:not(.home-metrics) .stats > .card.stat{
      position:relative;min-height:0;padding:28px 8px 8px 0;background:transparent;border:0;
      border-top:1px solid var(--hair);border-radius:0;box-shadow:none;overflow:visible
    }
    .section:not(.home-metrics) .stats > .card.stat:before{
      content:"";position:absolute;left:0;top:-2px;width:44px;height:3px;border-radius:2px;background:var(--lime)
    }
    .section:not(.home-metrics) .stats > .card.stat .cap{color:var(--copy)}
    .tiles-4 > .card.stat .num,.card.stat .num{color:var(--plum)}
    .tiles-4 > .card.stat .cap{color:var(--copy)}

    /* Icons, stage ages, step numbers, avatars */
    .icon,.icon.on-dark,.green .icon{
      width:56px;height:56px;border-radius:50%;background:var(--lime-soft);color:#527c17
    }
    .stage-age{background:var(--lime-soft);color:#527c17}
    .step-num{
      width:auto;height:auto;margin-bottom:var(--space-3);border-radius:0;background:none;
      color:#b5aac2;font-size:var(--fs-num);place-items:start
    }
    .director-avatar{background:var(--lime-soft);color:#527c17}
    .director-role{color:#527c17}
    .check-list li{color:var(--copy)}
    .check-list li:before{border-radius:50%;width:8px;height:8px;top:8px;background:var(--lime)}

    /* --- The bands that were dark, and the lime band, made light ---------- */
    .section.dark,.section.green{
      background:linear-gradient(180deg,var(--warm) 0%,#f1f9e7 22%,#f1f9e7 70%,var(--warm) 100%);
      color:var(--plum-dark)
    }
    .section.dark h2,.section.dark h3,.section.green h2,.section.green h3{color:var(--plum)}
    .dark .lead,.dark .section-head p,.green .lead,.green .section-head p,
    .dark .check-list li,.ink-green,.dark p{color:var(--copy)}
    /* "on-dark" sections are drawn light here, so their labels are plum,
       the numbered list's too since its band went white (2026-10-13). */
    .eyebrow.on-dark,.eyebrow.on-light{color:var(--plum)}
    .btn.ghost.on-dark{border-color:rgba(53,0,79,.3);color:var(--plum)}
    .dark .btn.primary{background:var(--plum);border-color:var(--plum);color:var(--warm)}
    .dark .btn.primary:hover{background:var(--plum-500);border-color:var(--plum-500)}

    /* --- FAQ as hairline rows --------------------------------------------- */
    .faq-list{gap:0;border-top:1px solid var(--hair)}
    .faq-item{border:0;border-bottom:1px solid var(--hair);border-radius:0;background:transparent;overflow:visible}
    .faq-item summary{padding:20px 0;color:var(--plum)}
    .faq-item summary:after{
      display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(53,0,79,.22);
      border-radius:50%;font-size:var(--fs-lede);line-height:1;color:var(--plum);transition:.2s ease
    }
    .faq-item summary:hover:after,.faq-item[open] summary:after{background:var(--lime);border-color:var(--lime);color:var(--plum-dark)}
    .faq-item[open] summary{border-bottom:0}
    .faq-body{padding:0 56px 22px 0}
    .faq-body p{color:var(--copy)}

    /* --- Tables, lists, notes, search ------------------------------------- */
    .fund-table th,.fund-table td,.spec-list li{border-color:var(--hair)}
    .fund-table thead th{color:var(--copy)}
    .search-results li{background:transparent;border:0;border-top:1px solid var(--hair);border-radius:0;padding:24px 0}
    .search-results li:last-child{border-bottom:1px solid var(--hair)}
    .legal-body h2{letter-spacing:-.01em}
    .legal-body p,.legal-body ul{color:var(--copy)}
    .value-list li{background:var(--lime-soft);color:var(--plum)}
    .fund-note{border-radius:16px}

    /* --- Newsletter and footer: the dark close the homepage keeps --------- */
    .newsletter-copy h2{color:#fff}
    .newsletter .newsletter-eyebrow{color:#8fc641}
    footer h4{color:#fff}

    @media (max-width:640px){
      .page-hero-card,.country-card{border-radius:20px}
      .faq-body{padding-right:0}
      /* The phone rows scroll sideways; open columns keep their rule. */
      .tiles-4 > .card,.journeys > .card{padding-right:16px}
    }

    /* ============================================================
       CUSTOMER SUPPORT, THE HERO'S DASHBOARD AND VIDEO (2026-09-17)
       ============================================================ */

    /* The floating button: an aubergine pill inside a warm ring and a plum
       keyline, so it holds its edge over a photograph and over the warm page. */
    .support-fab{
      height:56px;padding:0 26px;gap:10px;
      border:3px solid rgba(252,252,248,.92);
      background:var(--plum);color:#fff;font-size:var(--fs-body);font-weight:750;letter-spacing:-.003em;
      box-shadow:0 0 0 3px var(--plum),0 16px 36px rgba(38,0,51,.3)
    }
    .support-fab svg{width:20px;height:20px}
    .support-fab:hover{background:var(--plum-500)}
    .support-fab:focus-visible{outline:3px solid var(--lime);outline-offset:5px}
    @media (max-width:640px){
      .support-fab{height:50px;padding:0 18px;font-size:var(--fs-small)}
    }

    /* The drawer's heading was --heading, which the homepage pass made plum:
       plum on the plum head, the invisible "How can we help?". */
    .support-head h2{color:#fff}
    .support-head{background:var(--plum)}
    .support-eyebrow{color:#8fc641}
    .support-drawer{background:var(--warm)}
    .support-status{background:var(--plum-tint);border-color:var(--hair)}
    .channel{background:#fff;border-color:var(--hair)}
    .channel:hover{border-color:var(--plum)}
    .channel-icon{background:var(--plum-tint);color:var(--plum)}
    .channel-whatsapp .channel-icon{background:var(--lime-soft);color:#527c17}
    .support-foot{background:var(--plum-tint);border-color:var(--hair)}
    .support-form .lead-form-ack,.support-form .lead-form-error{margin:0}

    /* Watch video: the design's play mark, and one modal player. */
    .hero-cta .btn.watch{cursor:pointer}
    .video-dialog{
      width:min(960px,calc(100% - 32px));padding:0;border:0;border-radius:20px;
      background:#000;overflow:visible
    }
    .video-dialog::backdrop{background:rgba(22,0,31,.78)}
    .video-frame{aspect-ratio:16/9;border-radius:20px;overflow:hidden}
    .video-frame iframe,.video-frame video{display:block;width:100%;height:100%;border:0}
    .video-close{
      position:absolute;top:-52px;right:0;width:40px;height:40px;border-radius:50%;
      border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;font-size:24px;line-height:1
    }
    .video-close:hover{background:rgba(255,255,255,.24)}
    /* Where the carousel's controls or a slide's buttons pass under the
       button's corner, it fades out where it is; visibility waits for the fade
       so it is not cut short, and returns at once when the button comes back. */
    .support-fab.is-visible.is-tucked{
      opacity:0;visibility:hidden;
      transition:opacity .28s ease,transform .28s ease,background .2s ease,visibility 0s linear .28s
    }

    /* ============================================================
       BRAND TYPOGRAPHY (2026-09-17) — docs/ENWEALTH BRAND BOOK FINAL.pdf
       ============================================================
       Headers and sub-headers in Heuristica, body copy in Open Sans; purple
       #35004F and green #8FC641 as the only brand colours (already the pair
       on :root). Every h1-h4 takes --font-head from the base rule; these are
       the sub-headers that are not headings in the markup — the bold titles in
       the homepage's numbered rows and links, the life-stage and market names —
       and the display numerals. Labels, buttons, navigation and eyebrows stay
       in Open Sans. Tracking and sub-1 line heights tuned for Inter at 750 were
       relaxed across the file when the families changed: a serif set that
       tight collides and clips. */
    .goal-copy b,.capital-name b,.digital-link-copy b,.impact-programme-copy b,
    .stage b,.country-name,.num{
      font-family:var(--font-head)
    }
    /* One type system (audit 2026-09-29): h1 --fs-d1, h2 --fs-d2 (--fs-d3
       compact), card titles, taglines, pull-quotes and captions --fs-h3, all
       Heuristica Bold and upright; display numerals Heuristica Bold on
       --fs-num; eyebrows Open Sans --fs-label at 800, .12em capitals; lede,
       body and card copy --fs-lede, --fs-body, --fs-small. */
    .step-num{font-family:var(--font-head);font-weight:700}
    h1,h2,.num{font-weight:700}
    h3,h4,.goal-copy b,.capital-name b,.digital-link-copy b,.impact-programme-copy b,.stage b{font-weight:700;letter-spacing:0}
    /* The book shows no italic: an em in a heading or a Heuristica line marks
       colour, not slant. */
    :is(h1,h2,h3,h4,.hero-aside-caption,.talk-tagline,.numbered-closing,.closing-line,.feature-words,.prose-panel-note,.award-summary-quote) em{font-style:normal}

    /* Colour, to the brand book's section 04: purple #35004F and green #8FC641.
       Every other value in this file is one of those two taken lighter or
       darker for a job — #260033 deep purple for text only (every dark ground,
       from the footer to the photo scrims, is #35004F itself, 2026-09-30),
       #625B7F plum-grey copy, #F7F2F8 and #E4D6E8 purple tint and hairline,
       #527C17 the one green dark enough to read as text (--accent-ink), #F1F9E7
       its tint — plus white, the warm ground,
       and the red and amber that mean error and caution. The slate greys,
       teal-blacks, eight near-greens and blue lilacs the design passes added
       were folded into those ramps on 2026-09-17. */

    /* ============================================================
       EIGHT TABS (2026-09-17)
       ============================================================
       The header names the businesses: About Us, Pension, Insurance,
       Investments, Corporate Trustee, Diaspora & Expatriates Fund, Impact Debt
       Fund, Foundation. On one line beside the brand and the actions that is
       ~1,500px, and a 1400px laptop has 1,256. So: the Customer Support text
       link leaves the desktop bar (the floating button is on every page and
       opens the same panel); a long label wraps to two short lines inside its
       tab; the market switcher keeps its globe and flag and drops the name
       below 1500px; and below 1180px the bar hands over to the menu panel. */
    @media (min-width:901px){
      .nav-actions .support-open{display:none}
      /* Tabs keep their natural width; only a label longer than the cap wraps. */
      .nav-item{flex:0 0 auto}
      .nav-tab{white-space:normal;line-height:1.15;text-align:left;max-width:9.5rem}
    }
    @media (max-width:1500px){
      .trigger-country span:not(.sr-only){display:none}
      .nav-tab{max-width:7.5rem;padding:0 10px}
    }
    @media (min-width:901px) and (max-width:1440px){
      .nav-inner{width:calc(100% - 4rem);gap:14px}
      .nav-tab{padding:0 8px}
    }
    @media (min-width:901px) and (max-width:1119px){
      .nav-links,.nav-actions .desktop-only{display:none}
      .mobile-toggle{display:block}
      .mobile-menu.show{display:block}
    }
    /* The card beside a menu panel is plum; the brand pass made headings plum. */
    .mega .feature h3{color:#fff}
    .mega .feature p{color:rgba(255,255,255,.78)}

    /* ============================================================
       THE HOMEPAGE MOCKUPS (2026-09-17)
       ============================================================
       Style from the refined homepage mockups, in the brand book's faces:
       the hero photograph in an arch with a caption panel beside it, the
       figure strip with line icons and a link to the impact section, section
       labels as a rule and spaced capitals, italic captions over the section
       photographs, and line icons in soft discs. */

    /* Line icons, wherever a mark sits in a disc. */
    .stat-icon svg,.digital-link-icon svg,.impact-icon svg{width:26px;height:26px;display:block}
    .stat-icon,.impact-icon{display:grid;place-items:center;background:var(--lime);color:var(--plum)}
    .digital-link-icon{display:grid;place-items:center;background:var(--plum-tint);color:var(--plum)}
    .btn svg{flex:0 0 auto;margin-left:10px;transition:transform .2s ease}
    .btn:hover svg{transform:translateX(3px)}

    /* Section labels: spaced capitals. */
    .goals-section .eyebrow,.ecosystem-section .eyebrow,.digital-section .eyebrow,
    .investments-section .eyebrow,.impact-section .eyebrow{color:var(--plum)}
    .ecosystem-section .eyebrow{color:#625b7f}


    /* Photographs: one large curve on the side facing the text. */
    @media (min-width:981px){
      .goals-image{height:500px;border-radius:0 clamp(140px,13vw,240px) clamp(140px,13vw,240px) 0}
      .capital-image{min-height:380px;border-radius:0 clamp(120px,11vw,200px) clamp(120px,11vw,200px) 0}
      .digital-image{height:440px;border-radius:clamp(140px,13vw,240px) 0 0 clamp(140px,13vw,240px)}
      .impact-image{border-radius:0 clamp(140px,13vw,240px) clamp(140px,13vw,240px) 0}
    }

    /* Digital: four columns, each an icon disc, its words, and an arrow at the foot. */
    .digital-link{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:22px;row-gap:14px}
    .digital-link-icon{grid-row:1 / span 2;width:72px;height:72px;border-radius:50%}
    .digital-link-arrow{grid-column:2;justify-self:end;width:52px;height:52px}
    .digital-link-copy b{font-family:var(--font-head)}
    @media (min-width:1441px){
      .digital-links{grid-template-columns:repeat(var(--digital-cols,4),minmax(0,1fr))}
    }

    /* Impact: icons in green discs. */
    .impact-icon{width:3.6rem;height:3.6rem;border-radius:50%}

    /* The figure strip, and its link to the bigger picture. */
    .home-metrics .stat-icon{width:62px;height:62px;border-radius:50%}
    .home-metrics .stat .num{font-family:var(--font-head)}
    .stat-link{
      display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0;
      padding:0 0 0 30px;border-left:1px solid var(--hair);color:var(--plum);text-decoration:none
    }
    .stat-link-eyebrow{font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
    .stat-link-label{display:inline-flex;align-items:center;gap:10px;font-weight:700}
    .stat-link-label .ar{color:#625b7f;transition:transform .2s ease}
    .stat-link:hover .stat-link-label .ar{transform:translateX(4px);color:var(--plum)}
    @media (min-width:1500px){
      .home-metrics .stats:has(.stat-link){grid-template-columns:repeat(4,minmax(0,1fr)) minmax(12rem,.9fr)}
      .home-metrics .stat:nth-last-child(2){border-right:0}
    }
    @media (max-width:900px){
      .stat-link{grid-column:1 / -1;min-height:0;padding:20px 0 0;border-left:0;border-top:1px solid var(--hair);margin-top:12px}
      .hero-media:after{background:linear-gradient(180deg,rgba(243,240,246,.9),rgba(243,240,246,.8) 60%,rgba(243,240,246,.35))}
    }

    /* The hero: the photograph in an arch, controls on it, a caption panel beside it. */
    .hero-aside{display:none}
    @media (min-width:981px){
      /* As tall as the window allows once the header (--head-h) and the
         top of the figure strip under it (90px: its
         numbers) are on screen, so a 1366x768 or 1280x720 laptop opens on
         both; never taller than the design's 640px, never so short the
         caption crowds. */
      .hero{height:clamp(460px,calc(100vh - var(--head-h) - 90px),640px);height:clamp(460px,calc(100svh - var(--head-h) - 90px),640px);min-height:0;background:var(--warm)}
      .hero-media{left:43%;right:0;clip-path:none;border-radius:50% 0 0 50% / 50% 0 0 50%}
      .hero-media::after{background:none}
      /* A fine arc just outside the photograph's curve. */
      .hero::before{
        content:"";position:absolute;z-index:1;pointer-events:none;top:-6%;bottom:-6%;left:calc(43% - 34px);
        aspect-ratio:1;border:1px solid rgba(143,198,65,.35);border-right:0;border-top-color:transparent;
        border-bottom-color:transparent;border-radius:50%
      }
      .hero-caption.container{bottom:auto;top:50%;transform:translate(-50%,-50%)}
      .hero-caption :is(h1,h2){width:auto;max-width:15ch;font-size:var(--fs-d1)}
      .hero-caption p{width:auto;max-width:36rem}
      .hero-chrome{left:auto;right:calc(15% + 24px);bottom:22px;padding:0;background:none;backdrop-filter:none}
      .hero-chrome-inner{width:auto;display:flex}
      .hero-tabs{display:none}
      .hero-controls{padding-right:0;gap:14px}
      .hero-count{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--plum);box-shadow:0 8px 20px rgba(0,0,0,.12)}
      .hero-arrow{width:46px;height:46px;background:#fff;border-color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.14)}
      .hero-aside{
        display:flex;flex-direction:column;position:absolute;z-index:3;top:0;right:0;bottom:0;
        width:15%;min-width:13rem;padding:clamp(56px,7vw,110px) clamp(20px,2.4vw,44px) 0 0;
        pointer-events:none
      }
      .hero-aside-caption{
        margin:0;font-family:var(--font-head);font-weight:700;color:var(--plum);
        font-size:var(--fs-h3);line-height:1.3
      }
      .hero-aside-caption::after{content:"";display:block;width:56px;height:2px;margin:26px 0 22px;background:var(--lime)}
      .hero-aside-tagline{margin:0;display:grid;gap:4px;color:#625b7f;font-size:var(--fs-lede);line-height:1.3}
      /* The green curve at the panel's foot, and the note in it. */
      .hero-aside::after{
        content:"";position:absolute;z-index:-1;right:-10%;bottom:-30%;width:170%;aspect-ratio:1;border-radius:50%;
        background:var(--lime-soft)
      }
      .hero-aside-note{
        position:absolute;bottom:38px;right:clamp(20px,2.4vw,44px);width:10rem;margin:0;
        color:var(--plum-dark);font-size:var(--fs-body);line-height:1.35
      }
      .hero-aside-note::before{content:"";display:block;width:48px;height:2px;margin-bottom:14px;background:var(--lime)}
      .hero-insights{right:calc(15% + 24px)}
    }
    /* The panel needs the width: from 1200px (laptops, 2026-09-24; it was
       1500px) the photograph stops short of it and fades out, as the design
       draws it; below, the photograph runs to the edge and the panel is not
       shown. */
    @media (min-width:1200px){
      .hero-media{right:14%;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
    }
    @media (min-width:981px) and (max-width:1199px){
      .hero-aside{display:none}
      .hero-chrome{right:28px}
      .hero-insights{right:24px}
    }
    /* The strip's link takes its own column only where there is room for it. */
    @media (min-width:901px) and (max-width:1499px){
      .home-metrics .stats:has(.stat-link){grid-template-columns:repeat(4,minmax(0,1fr))}
      .home-metrics .stat:nth-last-child(2){border-right:0}
      .home-metrics .stat.stat-link{min-height:0}
      .stat-link{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:flex-end;gap:18px;padding:18px 0 0;margin-top:18px;border-left:0;border-top:1px solid var(--hair)}
    }
    /* Three digital links sit three across, four four across. */
    @media (min-width:981px){
      .digital-links:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
      .digital-links:has(> :nth-child(3):last-child) .digital-link:nth-child(2){border-right:1px solid var(--hair);padding-right:1.55rem}
      .digital-links:has(> :nth-child(3):last-child) .digital-link:nth-child(3){padding-left:1.55rem}
    }

    /* ============================================================
       THE HEADER MOCKUP (2026-09-18)
       ============================================================
       An aubergine strip, and the bar as a white row whose top edge lies over
       the strip's lower 18px. Both run the full width of the window, square,
       from its top edge (the user, 2026-10-09; they had floated 16px in, with
       rounded corners). Sticky with a negative top: the visible part of the
       strip scrolled away and the card stayed, until THE WHOLE HEADER STAYS
       below. Overrides the NAV block and the EIGHT TABS pass; their
       breakpoints (the bar hands over to the menu panel below 1120px) still
       hold. */
    .nav{
      --nav-tuck:18px;--nav-top-h:64px;
      top:calc(-1 * (var(--nav-top-h) - var(--nav-tuck)));
      padding:0;
      background:transparent;border:0;backdrop-filter:none
    }
    .nav-top{
      position:relative;
      height:var(--nav-top-h);padding-bottom:var(--nav-tuck);
      background:var(--plum);
      color:rgba(255,255,255,.9);font-size:var(--fs-small)
    }
    .nav-top-inner{
      height:100%;display:flex;align-items:center;gap:var(--space-6);padding:0 clamp(var(--space-6),3vw,var(--space-12))
    }
    .nav-top a{color:inherit}
    .nav-top a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
    .nav-top-tag{display:inline-flex;align-items:center;gap:var(--space-3);white-space:nowrap}
    /* A short rule between groups, drawn on the group rather than as markup. */
    .nav-top-links,.nav-top-social,.nav-market,.nav-top-email{
      position:relative;padding-left:var(--space-6)
    }
    :is(.nav-top-links,.nav-top-social,.nav-market,.nav-top-email)::before{
      content:"";position:absolute;left:0;top:calc(50% - 10px);height:20px;
      border-left:1px solid rgba(255,255,255,.3)
    }
    .nav-top-links,.nav-top-social{display:flex;align-items:center;list-style:none;margin:0}
    .nav-top-links li + li{margin-left:var(--space-3);padding-left:var(--space-3);border-left:1px solid rgba(255,255,255,.3)}
    .nav-top-social{gap:var(--space-4)}
    .nav-top-social a{display:inline-flex}
    .nav-top-end{margin-left:auto;display:flex;align-items:center;gap:var(--space-6)}
    .nav-top-contact{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap}
    /* The mobile beside the office line where the row holds both (2026-10-08):
       narrower, it pushed Log in onto two lines. The support panel and the
       contact sections carry it at every width. */
    .nav-top-mobile{display:none}
    @media (min-width:1280px){.nav-top-mobile{display:inline-flex}}
    .nav-market .trigger-country{
      display:inline-flex;align-items:center;gap:var(--space-2);height:36px;padding:0 var(--space-1);
      border:0;background:transparent;color:inherit;font:inherit;font-weight:600
    }
    .nav-market .trigger-country span:not(.sr-only){display:inline}
    .nav-market .dropdown-menu{top:44px;color:var(--text)}
    /* The strip makes no stacking context of its own, so the card lies over
       it while the strip's menu still opens over the card. */
    .nav-market .dropdown-menu{z-index:3}
    .nav-market .dropdown-menu a:hover{text-decoration:none}

    .nav-inner{
      position:relative;z-index:2;
      width:auto;max-width:none;height:88px;margin:calc(-1 * var(--nav-tuck)) 0 0;
      padding:0 clamp(var(--space-4),2vw,var(--space-8));gap:var(--space-4);
      background:#fff;box-shadow:0 18px 44px rgba(38,0,51,.10)
    }
    .nav-rule{height:44px}
    .nav-links{gap:var(--space-1)}
    /* Five tabs since 2026-09-18, so every label keeps to one line again. */
    .nav-tab{
      white-space:nowrap;max-width:none;
      display:inline-flex;align-items:center;gap:var(--space-2);height:52px;
      font-weight:600;color:var(--plum-dark);background:transparent
    }
    .nav-tab:hover,.nav-item.open .nav-tab{background:var(--plum-100);color:var(--plum)}
    .nav-chev{flex:0 0 auto;transition:transform .16s ease}
    .nav-item.open .nav-chev,.dropdown-wrap.open .nav-chev{transform:rotate(180deg)}
    .nav-actions{gap:var(--space-3)}
    .nav-actions .nav-rule{height:52px}
    /* The market picker in the bar, where Training was (2026-09-23): a soft
       lime pill. Training itself is now a link in the strip. */
    .nav-actions .nav-market{padding-left:0}
    .nav-actions .nav-market::before{display:none}
    .nav-actions .nav-market .trigger-country{height:60px;padding:0 var(--space-6);border-radius:16px;background:var(--lime-soft);color:var(--plum-dark);font-size:var(--fs-small);font-weight:700;transition:background .16s ease}
    .nav-actions .nav-market .trigger-country:hover{background:#e3f2cf}
    .nav-actions .nav-market .dropdown-menu{top:calc(100% + 8px);right:0;left:auto}
    .nav-top-training{display:inline-flex;align-items:center;gap:6px}
    .nav-top-training svg{color:var(--lime)}
    .nav-search-btn{
      display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;
      background:var(--plum-100);color:var(--plum-dark);transition:background .16s ease
    }
    .nav-search-btn:hover{background:#ece2ef}
    .nav-cta{
      height:60px;padding:0 var(--space-6);gap:var(--space-3);border-radius:999px;
      background:var(--plum);border-color:var(--plum);font-size:15px;
      box-shadow:0 10px 24px rgba(38,0,51,.22)
    }
    .nav-cta:hover{background:var(--plum)}
    .nav-arrow{transition:transform .16s ease}
    .nav-cta:hover .nav-arrow{transform:translateX(3px)}
    .nav-actions .dropdown-menu{top:70px}
    .mobile-toggle{color:var(--plum-dark)}

    /* Everything on one line needs ~1,900px; below that the long labels wrap
       (EIGHT TABS) and the pills shed their arrows, then Training its word. */
    @media (max-width:1700px){
      .nav-arrow{display:none}
      .nav-actions .nav-market .trigger-country,.nav-cta{height:52px;padding:0 var(--space-4)}
      .nav-top-social{display:none}
    }
    @media (max-width:1500px){
      .nav-actions .nav-market .trigger-country,.nav-cta{height:48px;padding:0 var(--space-4)}
      .nav-search-btn{width:48px;height:48px}
      .nav-inner{padding:0 var(--space-4)}
      .nav-tab{gap:var(--space-1);padding:0 var(--space-2)}
      .nav-actions{gap:var(--space-2)}
    }
    /* The strip's links are the three that left the tabs, and long; below
       1500px the email gives way to them (it is in the footer and on the
       contact page). The tagline stays at every width, as the client asked. */
    @media (min-width:1120px) and (max-width:1499px){
      .nav-top-email{display:none}
    }
    @media (max-width:1119px){
      .nav-inner > .nav-rule{display:none}
      .nav-top-links,.nav-top-email{display:none}
      .nav-inner{height:72px}
    }
    /* The header's logo large enough that its slogan reads (the client's
       checklist, 2026-09-30): about 12px type at 68px tall. Phones keep the
       sizes below, where the strip above spells the slogan out. */
    @media (min-width:1120px){.nav .brand-logo{height:68px}}
    @media (min-width:641px) and (max-width:1119px){.nav .brand-logo{height:56px}}
    @media (max-width:640px){
      .nav{--nav-top-h:56px;--nav-tuck:14px}
      .nav-inner{height:64px}
      .nav-top-inner{gap:var(--space-3);padding:0 var(--space-4)}
      /* On a phone the tagline takes the phone number's place; the number
         is in the menu panel's support link and the footer. */
      .nav-top-contact{display:none}
      .nav-market{padding-left:0}
      .nav-market::before{display:none}
      .brand-logo{height:38px}
    }
    /* Small phones: the row must fit, or the menu button leaves the card. */
    @media (max-width:420px){
      .nav-inner{gap:10px}
      .brand{flex:0 1 auto;min-width:0}
      .brand-logo{height:32px;max-width:100%;object-fit:contain;object-position:left center}
      .nav-actions{gap:8px}
      .nav-actions .nav-market .trigger-country{height:44px;padding:0 12px;gap:6px}
    }
    @media (max-width:374px){
      .nav-actions .nav-market .trigger-country span:not(.sr-only){display:none}
    }

    /* ============================================================
       THE WHOLE HEADER STAYS, TWO ROWS WITH ONE JOB EACH (2026-10-02)
       ============================================================
       The strip no longer scrolls away: the header sticks at the top of the
       screen, all of it. The purple row is the brand and the
       reader's own business: the logo (from 1120px, in its reverse colours,
       carrying the slogan; below that the tagline, and the logo is in the
       card), Training, the phone, then the market picker and search as
       outlined controls and Portals as the one filled button, in lime. The
       white card is everything to read: the tabs, then the group's other
       sites after a rule, in the tabs' own type. Below 1120px the card holds
       the logo and the menu button alone.

       Both rows share one side padding, --nav-pad, so the logo, the first
       tab's label and the tagline start on one line and the right ends meet.

       --head-h is the stuck header's height at each width; what sits under
       it (the section tabs, the sticky side panels, a jump to an #anchor)
       reads it rather than a number of its own. */
    :root{--head-h:118px}
    .nav{top:0;--nav-pad:24px;--ctl-h:34px}
    .nav-top-inner,.nav-inner{padding:0 var(--nav-pad)}
    .nav-top-inner{gap:var(--space-4)}
    .nav-top-brand,.nav-more-links{display:none}
    .nav-top-end{gap:var(--space-4)}
    .nav-top .desktop-only{display:none}
    @media (min-width:901px){.nav-top .desktop-only{display:inline-flex}}

    /* The purple row's controls: outlined on purple; Portals filled. */
    .nav-top .nav-market{padding-left:0}
    .nav-top .nav-market::before{display:none}
    .nav-top .nav-market .trigger-country{
      height:var(--ctl-h);gap:var(--space-2);padding:0 var(--space-4);border:1px solid rgba(255,255,255,.4);border-radius:999px;
      background:transparent;color:#fff;font-size:var(--fs-small);font-weight:600;transition:background .16s ease,border-color .16s ease
    }
    .nav-top .nav-market .trigger-country:hover{border-color:#fff;background:rgba(255,255,255,.1)}
    /* "Client Service portals" is outlined like the picker; "Join" is the one
       filled button. The label is three words (2026-10-19) and stays on one
       line: where the row is short of room, the open search is narrower. */
    .nav-top .trigger-portal{
      display:inline-flex;align-items:center;gap:var(--space-2);height:var(--ctl-h);padding:0 var(--space-4);white-space:nowrap;
      border:1px solid rgba(255,255,255,.4);border-radius:999px;background:transparent;color:#fff;
      font:inherit;font-size:var(--fs-small);font-weight:600;cursor:pointer;transition:background .16s ease,border-color .16s ease
    }
    .nav-top .trigger-portal:hover{border-color:#fff;background:rgba(255,255,255,.1)}
    /* Search: a circle that opens leftward on hover or focus, and stays open
       while it holds a query — the search field's own: the market's hidden
       field has no placeholder, so it always read as holding one. It is
       first in the row, so it grows into the empty middle and nothing beside
       it moves. */
    .nav-search{
      align-items:center;width:var(--ctl-h);height:var(--ctl-h);margin:0;
      border:1px solid rgba(255,255,255,.4);border-radius:999px;overflow:hidden;
      transition:width .25s ease,background .16s ease,border-color .16s ease
    }
    .nav-search input{
      flex:1 1 auto;width:0;min-width:0;height:100%;padding:0;border:0;outline:0;
      background:transparent;color:#fff;font:inherit;font-size:var(--fs-small);opacity:0;transition:opacity .16s ease
    }
    .nav-search input::placeholder{color:rgba(255,255,255,.7)}
    .nav-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
    .nav-search-icon{flex:0 0 auto;display:grid;place-items:center;width:calc(var(--ctl-h) - 2px);height:100%;color:#fff;cursor:pointer}
    .nav-search:is(:hover,:focus-within),.nav-search:has([type=search]:not(:placeholder-shown)){width:240px;border-color:#fff;background:rgba(255,255,255,.1)}
    /* Closed, the field has no padding, or it would push the icon out of the circle. */
    .nav-search:is(:hover,:focus-within) input,.nav-search:has([type=search]:not(:placeholder-shown)) input{opacity:1;padding-left:var(--space-4)}
    .nav-search:focus-within{box-shadow:0 0 0 2px var(--lime)}
    @media (max-width:1279px){
      .nav-search:is(:hover,:focus-within),.nav-search:has([type=search]:not(:placeholder-shown)){width:200px}
    }
    /* Open, it takes only the room the row has, so nothing is pushed off the
       right ("Client Service portals" is ~115px wider than "Log in" was,
       2026-10-19). Below 1120px the tagline, which the logo under it
       repeats, gives way while the search is open. */
    .nav-top-tag,.nav-top-brand,.nav-top-end > *{flex-shrink:0}
    .nav-top-end{min-width:0}
    .nav-top-end > .nav-search{flex-shrink:1;min-width:var(--ctl-h)}
    .nav-top-inner:has(.nav-search:is(:hover,:focus-within),.nav-search [type=search]:not(:placeholder-shown)) .nav-top-tag{display:none}
    @media (prefers-reduced-motion:reduce){.nav-search,.nav-search input{transition:none}}
    .nav-top .nav-cta{
      align-items:center;height:var(--ctl-h);padding:0 var(--space-6);gap:var(--space-2);border:0;border-radius:999px;
      background:var(--lime);color:var(--plum-dark);font-size:var(--fs-small);font-weight:700;box-shadow:none
    }
    .nav-top .nav-cta:hover{background:#a2d35c;color:var(--plum-dark);text-decoration:none}
    /* Join in the phone menu's button row: lime, as in the strip. */
    .mobile-actions .nav-join{background:var(--lime);border-color:var(--lime);color:var(--plum-dark)}
    .nav-top .dropdown-menu{top:calc(100% + 10px);right:0;left:auto;z-index:3;color:var(--text)}

    /* From 1120px, not 1280px (2026-10-06): a 1280px laptop with Edge's
       sidebar or vertical tabs open is ~1230px wide and got the menu button.
       The row needs ~1190px at 12px a side, so --tab-pad narrows from 12px
       at 1280px to 6px at 1120px, where the row still fits beside a 17px
       Windows scrollbar. The labels stay 14px. */
    @media (min-width:1120px){
      :root{--head-h:144px}
      .nav{--nav-top-h:98px;--nav-pad:clamp(24px,2.4vw,44px);--ctl-h:44px;--tab-pad:clamp(6px,calc(3.75vw - 36px),12px)}
      .nav-top-brand{display:flex}
      /* The card's actions hold only the menu button, which this width does
         not need; as an empty flex item it still took a gap at the right. */
      .nav-top-tag,.nav-bar-brand,.nav-inner > .nav-actions{display:none}
      .nav-top-end{gap:var(--space-6)}
      /* The tabs' labels start where the logo does: a tab is padded --tab-pad. */
      .nav-inner{height:64px;padding:0 calc(var(--nav-pad) - var(--tab-pad));gap:var(--space-2)}
      .nav-links{gap:0}
      .nav-tab{height:44px;padding:0 var(--tab-pad)}
      /* The group's other sites in the tabs' own type (the user, 2026-10-06);
         only the rule before them sets them apart. */
      .nav-more-links{
        display:flex;align-items:center;gap:0;margin:0 0 0 auto;padding:0 0 0 var(--tab-pad);
        list-style:none;border-left:1px solid var(--hair)
      }
      .nav-more-links a{
        display:inline-flex;align-items:center;height:44px;padding:0 var(--tab-pad);border-radius:6px;
        font-size:var(--fs-small);font-weight:600;line-height:1.15;letter-spacing:-.002em;color:var(--plum-dark);
        white-space:nowrap;transition:background .16s ease,color .16s ease
      }
      .nav-more-links a:hover{background:var(--plum-100);color:var(--plum);text-decoration:none}
    }
    @media (max-width:640px){
      :root{--head-h:106px}
      .nav{--nav-pad:16px;--ctl-h:32px}
      .nav-top .nav-market .trigger-country{padding:0 var(--space-3)}
    }
    @media (max-width:374px){
      .nav-top .nav-market .trigger-country span:not(.sr-only){display:none}
    }
    :root{--stick-top:calc(var(--head-h) + 32px)}
    html{scroll-padding-top:var(--head-h)}
    /* A page in a section has its tabs stuck under the header too (62px). */
    html:has([data-subnav]){scroll-padding-top:calc(var(--head-h) + 62px);--stick-top:calc(var(--head-h) + 62px + 24px)}

    /* The tabs' panels (2026-10-02): no card beside them, and a column per
       heading the menu gives its links, each with its own rule. */
    .mega:not(:has(.mega-side)){width:max-content;max-width:min(1100px,calc(100vw - 48px))}
    .mega-inner:not(:has(.mega-side)){grid-template-columns:minmax(0,1fr)}
    .mega-inner:not(:has(.mega-side)) .mega-main{border-right:0}
    .mega-columns{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,max-content)}
    .mega-columns .mega-col{padding:0 var(--space-6)}
    .mega-columns .mega-col:first-child{padding-left:0}
    .mega-columns .mega-col:last-child{padding-right:0}
    .mega-columns .mega-col + .mega-col{border-left:1px solid var(--hair)}
    .mega-columns .mega-grid{grid-template-columns:minmax(0,1fr)}
    /* The same headings in the phone menu's lists. */
    .mobile-group{
      display:block;padding:var(--space-3) var(--space-2) var(--space-1);
      font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--copy)
    }

    /* The footer's first column: the head office's email on group pages and
       Enwealth's own accounts, which left the header's strip (2026-10-02). */
    .footer-email{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4)}
    .footer-social{display:flex;gap:var(--space-3);margin:var(--space-4) 0 0;padding:0;list-style:none}
    footer .footer-social a{
      display:inline-grid;place-items:center;width:40px;height:40px;padding:0;
      border:1px solid rgba(255,255,255,.3);border-radius:50%;color:#fff;transition:border-color .16s ease,color .16s ease
    }
    footer .footer-social a:hover{border-color:var(--lime);color:var(--lime)}

    /* ============================================================
       HEADER PANELS (2026-09-18)
       ============================================================
       The tab panels as a compact list: two columns of plain rows that tint on
       hover and show an arrow, beside a slim card whose height follows its
       content. The boxed links made About Us 560px tall for eight words. */
    .mega{width:min(760px,92vw);border-radius:20px}
    .mega-inner{grid-template-columns:minmax(0,1fr) 260px;min-height:0}
    .mega-main{padding:var(--space-6)}
    .mega-grid{gap:var(--space-1) var(--space-4);margin-top:var(--space-3)}
    .mega-link{
      display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-2);align-items:center;
      padding:var(--space-2) var(--space-3);border:0;border-radius:10px;background:transparent;
      color:var(--plum-dark);transition:background .16s ease,color .16s ease
    }
    .mega-link b{grid-column:1;margin:0;font-size:var(--fs-small);font-weight:600;line-height:1.35}
    .mega-link span{grid-column:1;font-size:var(--fs-label);line-height:1.4}
    .mega-link::after{
      content:"";grid-column:2;grid-row:1 / span 2;width:7px;height:7px;
      border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);
      opacity:0;transition:opacity .16s ease
    }
    .mega-link:hover,.mega-link:focus-visible{background:var(--plum-100);color:var(--plum)}
    .mega-link:hover::after,.mega-link:focus-visible::after{opacity:1}
    .mega-side{padding:var(--space-4)}
    .mega-side .feature{height:auto;padding:var(--space-6) var(--space-4) var(--space-4);border-radius:16px;gap:var(--space-4)}
    .mega-side .feature h3{margin-top:var(--space-2);line-height:1.25}
    .mega-side .feature p{margin-top:var(--space-2)}

    /* The strip's links turn white on hover; its menu is white, so not there. */
    .nav-top .dropdown-menu a{color:var(--text)}
    .nav-top .dropdown-menu a:hover{color:var(--plum);background:var(--plum-100);text-decoration:none}

    /* The phone menu. It lives inside the sticky header, so taller than the
       screen its foot was out of reach: it scrolls inside itself instead. The
       sub-menus say whether they are open. */
    @media (max-width:1119px){
      /* As wide as the header card above it, not the page container. */
      .mobile-menu{width:auto;max-width:none;margin:0;padding:var(--space-2) 0 var(--space-4)}
      .mobile-menu.show{
        max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);
        overflow-y:auto;overscroll-behavior:contain
      }
      .mobile-panel{border-radius:20px;box-shadow:0 18px 44px rgba(38,0,51,.10)}
      .mobile-item summary,.mobile-link{
        display:flex;align-items:center;justify-content:space-between;min-height:52px;
        padding:var(--space-3) var(--space-4);font-weight:600;color:var(--plum-dark)
      }
      .mobile-item summary::after{
        content:"";width:8px;height:8px;margin-right:var(--space-1);
        border-right:2px solid currentColor;border-bottom:2px solid currentColor;
        transform:rotate(45deg) translateY(-2px);transition:transform .16s ease
      }
      .mobile-item[open] summary{background:var(--plum-100)}
      .mobile-item[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
      .mobile-item .mobile-list{padding:var(--space-1) var(--space-4) var(--space-3)}
      .mobile-item .mobile-list a{padding:var(--space-3) var(--space-2);border-bottom:0;border-radius:8px}
      .mobile-item .mobile-list a:active{background:var(--plum-100)}
    }

    /* A statement's badge (the CMS's statement grid, 2026-09-18): an award or
       certificate, whole and small above the title, on either ground. */
    .statement-badge{display:flex;align-items:center;height:88px;margin-bottom:var(--space-4)}
    .statement-badge picture{display:contents}
    .statement-badge img{display:block;max-height:88px;max-width:100%;width:auto;height:auto;object-fit:contain;border-radius:8px}

    /* The CMS's draft preview (2026-09-18): says, above everything, that this
       is not what visitors see, and how to leave. */
    .preview-bar{
      position:relative;z-index:1100;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
      gap:var(--space-2) var(--space-4);padding:var(--space-2) var(--space-4);
      background:#ffd166;color:var(--plum-dark);font-size:var(--fs-small);text-align:center
    }
    .preview-bar a{font-weight:700;text-decoration:underline;color:inherit}

    /* A tab's panel opens under that tab (2026-09-18): site.js sets
       --mega-left from the tab's position when the panel opens, and keeps it
       inside the header. Before, every panel was centred on the whole bar. */
    .mega{left:var(--mega-left,50%);transform:none;top:calc(100% + var(--space-2))}

    /* ============================================================
       THE ABOUT PAGE DESIGNS (2026-09-18)
       ============================================================
       The page opening with a photograph and figures, numbered points (light
       cards / dark list), the timeline, prose beside a photograph, and the
       board. Every caption and closing line is optional and shows only when
       an editor writes one. */
    .rule-under::after{content:"";display:block;width:64px;height:4px;margin-top:var(--space-4);border-radius:2px;background:var(--lime)}

    /* The opening: text, an arched photograph, the card. */
    .page-hero-photo .page-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.75fr) minmax(0,.95fr);gap:var(--space-12)}
    .page-hero-figure{position:relative;margin:0;padding:var(--space-8) 0}
    .page-hero-figure::before,.page-hero-figure::after{content:"";position:absolute;background:var(--lime);z-index:0}
    .page-hero-figure::before{right:-8px;top:0;width:96px;height:96px;border-radius:0 24px 0 96px}
    .page-hero-figure::after{left:-32px;bottom:0;width:128px;height:128px;border-radius:0 0 0 128px}
    .page-hero-figure picture,.page-hero-figure > img{position:relative;z-index:1;display:block}
    .page-hero-figure img{width:100%;height:auto;aspect-ratio:3/4.4;object-fit:cover;border-radius:200px 200px 24px 24px}
    .hero-figures{display:flex;flex-wrap:wrap;gap:var(--space-8);margin:var(--space-12) 0 0}
    .hero-figures div{position:relative;padding-right:var(--space-8);border-right:1px solid var(--hair)}
    .hero-figures div:last-child{border-right:0}
    .hero-figures dt{font-family:var(--font-head);font-size:var(--fs-num);line-height:1;color:var(--plum)}
    .hero-figures dd{margin:var(--space-3) 0 0;font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--copy)}
    .hero-figures dd::after{content:"";display:block;width:32px;height:3px;margin-top:var(--space-3);border-radius:2px;background:var(--lime)}
    .closing-line{display:flex;align-items:center;gap:var(--space-6);margin-top:var(--space-12);font-family:var(--font-head);font-size:var(--fs-h3);color:var(--plum)}
    .closing-line::after{content:"";flex:1;height:1px;background:var(--hair)}

    /* Numbered points. */
    .numbered-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);gap:var(--space-12);align-items:start}
    .numbered-intro h2{line-height:1.08}
    .numbered-figure{position:relative;margin:var(--space-12) 0 0}
    .numbered-figure img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:24px 200px 24px 24px}
    .numbered-items{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
    .numbered-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4)}
    .numbered-icon{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--lime-soft);color:var(--plum)}
    .numbered-item h3{margin-top:var(--space-4);font-family:var(--font-head);font-size:var(--fs-h3);color:var(--plum)}
    .numbered-item h3::after{content:"";display:block;width:40px;height:2px;margin-top:var(--space-3);background:var(--lime)}
    .numbered-item p{margin-top:var(--space-4);color:var(--copy);line-height:1.6}
    /* Light: cards, three then two. */
    /* The cards fill the height of the heading and photograph beside them, so
       no empty band opens under the last row (2026-09-21). */
    .numbered-light .numbered-grid{align-items:stretch}
    .numbered-light .numbered-body{display:flex;flex-direction:column}
    .numbered-light .numbered-items{flex:1;grid-template-columns:repeat(6,minmax(0,1fr))}
    .numbered-light .numbered-item{grid-column:span 2;padding:var(--space-6);border:1px solid var(--hair);border-radius:20px;background:#fff;box-shadow:0 12px 30px rgba(53,0,79,.05)}
    .numbered-light .numbered-count-5 .numbered-item:nth-child(n+4),
    .numbered-light .numbered-count-4 .numbered-item,
    .numbered-light .numbered-count-2 .numbered-item{grid-column:span 3}
    /* The list: two columns, hairlines, on a white band. It was the purple
       band until the client found the site too purple (2026-10-13); the
       ground value is still "dark". Two classes, to outrank .section.dark's
       pale gradient. */
    .section.numbered-dark{color:var(--text);background:#fff}
    .section.numbered-dark h2{color:var(--plum)}
    .numbered-dark .numbered-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
    .numbered-dark .numbered-item{padding:var(--space-8) var(--space-8) var(--space-8) 0;border-bottom:1px solid var(--hair)}
    .numbered-dark .numbered-item:nth-child(even){padding-left:var(--space-8);padding-right:0;border-left:1px solid var(--hair)}
    .numbered-dark .numbered-item:nth-last-child(-n+2){border-bottom:0}
    .numbered-dark .numbered-top{justify-content:flex-start;align-items:center}
    .numbered-dark .numbered-top::after{content:"";flex:1;height:1px;background:var(--hair)}
    .numbered-dark .numbered-icon{width:56px;height:56px;background:var(--lime-soft);color:var(--plum)}
    .section.numbered-dark .numbered-item h3{color:var(--plum)}
    .numbered-dark .numbered-item h3::after{display:none}
    .numbered-dark .numbered-item p{color:var(--copy)}
    .numbered-dark :focus-visible{outline-color:var(--plum)}
    .numbered-closing{
      display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);margin-top:var(--space-8);
      padding:var(--space-6) var(--space-8);border:1px solid var(--hair);border-radius:24px
    }
    .numbered-closing em{font-family:var(--font-head);font-size:var(--fs-h3);font-weight:700;line-height:1.3}
    .numbered-closing span{font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
    .numbered-dark .numbered-closing{border-color:var(--hair);background:var(--warm)}

    /* The timeline. */
    .timeline-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr);gap:var(--space-12);align-items:start}
    .timeline-figure{position:relative;margin:var(--space-12) 0 0}
    .timeline-figure img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:80px 200px 200px 80px}
    .timeline-list{position:relative;list-style:none;margin:0;padding:0 0 0 var(--space-12)}
    .timeline-list::before{content:"";position:absolute;left:23px;top:var(--space-8);bottom:var(--space-8);width:1px;background:var(--hair)}
    .timeline-list li{position:relative;display:grid;grid-template-columns:12rem minmax(0,1fr);gap:var(--space-8);padding:var(--space-8) 0;border-bottom:1px solid var(--hair)}
    .timeline-list li:last-child{border-bottom:0}
    .timeline-list li::before{
      content:"";position:absolute;left:calc(-1 * var(--space-12) + 4px);top:var(--space-8);width:24px;height:24px;border-radius:50%;
      background:var(--lime);border:8px solid #fff;box-shadow:0 0 0 1px var(--hair),0 6px 16px rgba(53,0,79,.08)
    }
    .timeline-marker b{display:block;font-family:var(--font-head);font-size:var(--fs-num);line-height:1;color:var(--plum)}
    .timeline-marker span{display:block;margin-top:var(--space-3);font-weight:700;font-size:var(--fs-small);color:var(--plum)}
    .timeline-list p{color:var(--copy);line-height:1.65}
    .timeline-card{
      display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--space-8);margin-top:var(--space-6);
      padding:var(--space-8);border-radius:28px;background:#fff;box-shadow:0 18px 44px rgba(53,0,79,.07)
    }
    .timeline-card-part + .timeline-card-part{padding-left:var(--space-8);border-left:1px solid var(--hair)}
    .round-icon{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--lime);color:var(--plum)}
    .timeline-card-part h3{display:inline-block;margin-left:var(--space-3);vertical-align:middle;font-size:var(--fs-h3);color:var(--plum)}
    .timeline-card-part p{margin-top:var(--space-4);font-size:var(--fs-small);line-height:1.65;color:var(--copy)}
    .timeline-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(6rem,1fr));gap:var(--space-4);margin:var(--space-4) 0 0}
    .timeline-figures dt{font-family:var(--font-head);font-size:var(--fs-num);line-height:1;color:var(--plum)}
    .timeline-figures dd{margin:var(--space-2) 0 0;font-size:var(--fs-small);color:var(--copy)}
    .timeline-figures dd::after{content:"";display:block;width:28px;height:3px;margin-top:var(--space-3);background:var(--lime)}

    /* Prose beside a photograph. */
    .prose-photo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-12);align-items:center}
    .prose-photo h2{margin-bottom:var(--space-6)}
    .prose-photo p{color:var(--copy);font-size:var(--fs-body);line-height:1.7}
    /* The frame behind the photograph reaches 4% past it on the right; below
       1280px that is wider than the page's margin, and /about scrolled
       sideways by 5-7px. Clipped here, which, unlike hidden, keeps no scroll box. */
    .prose-photo{overflow-x:clip}
    .prose-photo-figure{position:relative;margin:0}
    .prose-photo-figure::before{content:"";position:absolute;inset:8% -4% -8% 12%;border-radius:200px 32px 200px 32px;background:linear-gradient(135deg,var(--lime-soft),transparent 60%),var(--plum);z-index:0;clip-path:polygon(70% 0,100% 0,100% 100%,40% 100%)}
    .prose-photo-figure picture,.prose-photo-figure > img{position:relative;z-index:1;display:block}
    .prose-photo-figure img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:200px 40px 200px 40px}

    /* The board. */
    .board-eyebrow{display:inline-flex;align-items:center;gap:var(--space-4);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--copy);font-weight:800}
    /* All of it on one grid, three to a row (the user, 2026-10-08). The rule
       between columns is every cell's right border, pushed 1px past its track
       and clipped at the grid's edge, so it holds wherever a cell spans. The
       spans come from the block: the heading may take the first cell. */
    .board-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;overflow:clip}
    .board-head{grid-column:1 / -1;margin-bottom:var(--space-12)}
    .board-head-cell{grid-column:auto;margin:0 -1px 0 0;padding:var(--space-6) var(--space-8) var(--space-6) 0;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
    .board-card{position:relative;display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:var(--space-6);padding:var(--space-6);border-bottom:1px solid var(--hair);border-right:1px solid var(--hair);margin-right:-1px;grid-column:span var(--span-3,1);container-type:inline-size}
    .board-portrait{position:relative;overflow:hidden;border-radius:12px;background:#dfe2e6;aspect-ratio:3/4;border-bottom:6px solid var(--lime)}
    .board-card:nth-of-type(even) .board-portrait{border-bottom-color:var(--plum)}
    .board-portrait img{display:block;width:100%;height:100%;object-fit:cover}
    .board-portrait-empty{position:absolute;inset:0;background:center/44px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1aa' stroke-width='1.5'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 17-5-5-9 8'/%3E%3C/svg%3E")}
    .board-body h3{font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.25;color:var(--plum)}
    /* The role reads as the name's subtitle, in the body face as it is typed;
       the eyebrow's wide caps stood apart from the name and the summary
       (the user, 2026-10-12). */
    .board-role{margin-top:var(--space-2);font-size:var(--fs-small);font-weight:600;line-height:1.4;color:var(--plum)}
    /* The whole card is the link to the person's page (2026-09-21). */
    .board-body h3 a{color:inherit;text-decoration:none}
    .board-body h3 a::after{content:"";position:absolute;inset:0}
    .board-excerpt{margin-top:var(--space-3);font-size:var(--fs-small);line-height:1.55;color:var(--copy);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
    /* A card spanning a row carries a longer opening, and the lines to show it. */
    @container (min-width:36rem){.board-excerpt{-webkit-line-clamp:5;max-width:72ch}}
    .board-more{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--hair);font-weight:600;font-size:var(--fs-small);color:var(--plum)}
    .board-more .ar{transition:transform .2s}
    .board-links{display:flex;align-items:flex-end;gap:var(--space-4)}
    .board-linkedin{position:relative;z-index:1;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--plum-100);color:var(--plum)}
    .board-card:hover .board-more .ar,.board-card:focus-within .board-more .ar{transform:translateX(4px)}
    .board-card:hover h3,.board-card:focus-within h3{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:4px}
    .board-card:focus-within{outline:3px solid var(--lime);outline-offset:-3px}
    .board-body h3 a:focus-visible{outline:none}

    @media (max-width:1080px){
      .page-hero-photo .page-hero-grid{grid-template-columns:1fr}
      .page-hero-figure{max-width:26rem}
      .numbered-grid,.timeline-grid,.prose-photo-grid{grid-template-columns:1fr}
      .numbered-light .numbered-items,.numbered-dark .numbered-items{grid-template-columns:repeat(2,minmax(0,1fr))}
      /* :nth-child(n) lifts this past the count-5 / count-4 spans above. */
      .numbered-light .numbered-items > .numbered-item:nth-child(n){grid-column:auto}
      .board-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .board-head-cell{grid-column:1 / -1;margin:0 0 var(--space-12);padding:0;border:0}
      .board-card{grid-column:span var(--span-2,1)}
    }
    @media (max-width:640px){
      .numbered-light .numbered-items,.numbered-dark .numbered-items,.board-grid{grid-template-columns:1fr}
      .numbered-dark .numbered-item,.numbered-dark .numbered-item:nth-child(even){padding:var(--space-6) 0;border-left:0}
      .numbered-dark .numbered-item:nth-last-child(2){border-bottom:1px solid var(--hair)}
      /* An icon-only top row sits beside the heading instead of above it. */
      .numbered-item:has(> .numbered-top > .numbered-icon){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--space-4)}
      .numbered-item:has(> .numbered-top > .numbered-icon) .numbered-top::after{display:none}
      .numbered-item:has(> .numbered-top > .numbered-icon) .numbered-icon{width:48px;height:48px}
      .numbered-item:has(> .numbered-top > .numbered-icon) h3{margin-top:0}
      .numbered-item:has(> .numbered-top > .numbered-icon) > :not(.numbered-top):not(h3){grid-column:1 / -1}
      .board-card{grid-template-columns:6.5rem minmax(0,1fr);grid-column:auto}
      .timeline-list{padding-left:var(--space-8)}
      .timeline-list::before{left:11px}
      .timeline-list li{grid-template-columns:1fr;gap:var(--space-3)}
      .timeline-list li::before{left:calc(-1 * var(--space-8) - 6px);width:22px;height:22px;border-width:6px}
      .timeline-card-part + .timeline-card-part{padding-left:0;border-left:0}
      .hero-figures{gap:var(--space-4)}
      .hero-figures div{padding-right:var(--space-4)}
    }

    /* ============================================================
       THE AWARDS PAGE DESIGN (2026-09-21)
       ============================================================
       The opening beside the next block: text, the At a glance card and a
       photograph on the left, the award cards on the right. The award photos
       are small (86-352px wide), so none is drawn larger than it is. */
    .page-hero-aside-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:var(--space-12);align-items:stretch;margin-top:38px}
    /* The cards run longer than the text; the photograph's panel takes up the
       difference, so no blank band opens under it. */
    .page-hero-aside-main{display:flex;flex-direction:column}
    .page-hero-aside-main .page-hero-trophy{flex:1}
    /* A flex column stretches its children; the eyebrow pill keeps its own width. */
    .page-hero-aside-main > .eyebrow{align-self:flex-start}
    .page-hero-aside h1{line-height:1.06}
    .page-hero-aside .page-hero-card{margin-top:var(--space-8)}
    .glance-icons{list-style:none;margin:0;padding:0}
    /* At a glance at body size in the text colour (the client, 2026-10-13: "too small"). */
    .glance-icons li{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--hair);font-size:var(--fs-body);line-height:1.5;color:var(--text)}
    .glance-icons li:last-child{border-bottom:0}
    .glance-icons .round-icon{flex:0 0 auto;width:44px;height:44px}
    .page-hero-trophy{
      display:grid;place-items:center;gap:var(--space-4);margin:var(--space-8) 0 0;padding:var(--space-8);min-height:240px;border-radius:24px;
      background:var(--lime-soft)
    }
    .page-hero-trophy img{display:block;max-width:100%;height:auto;filter:drop-shadow(0 14px 22px rgba(38,0,51,.18))}
    .page-hero-trophy figcaption{font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--plum)}

    .rule-eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--plum)}
    .award-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-8)}
    .award-card{
      display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;gap:0 var(--space-4);
      padding:var(--space-4);border:1px solid var(--hair);border-radius:18px;background:#fff;box-shadow:0 12px 30px rgba(53,0,79,.06)
    }
    .award-stage{grid-column:1 / -1;display:grid;place-items:center;height:128px;padding:var(--space-3);border-radius:12px;background:linear-gradient(135deg,#f1f2f5,#e6e8ec)}
    .award-stage picture{display:contents}
    .award-stage img{display:block;max-width:100%;max-height:104px;width:auto;height:auto;object-fit:contain;border-radius:4px}
    .award-body{padding:var(--space-4) var(--space-2) var(--space-2)}
    .award-body::before{content:"";display:block;width:32px;height:3px;margin-bottom:var(--space-3);border-radius:2px;background:var(--lime)}
    .award-body h3{font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.25;color:var(--plum)}
    .award-body p{margin-top:var(--space-2);font-size:var(--fs-small);line-height:1.55;color:var(--copy)}
    .award-zoom{align-self:center;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--lime-soft);color:var(--plum)}
    .award-zoom:hover,.award-zoom:focus-visible{background:var(--plum);color:#fff}

    /* The enlarged photograph (site.js). */
    .zoom-dialog{max-width:min(92vw,720px);padding:var(--space-6);border:0;border-radius:20px;background:#fff;box-shadow:0 30px 80px rgba(38,0,51,.35)}
    .zoom-dialog::backdrop{background:rgba(38,0,51,.6)}
    .zoom-dialog img{display:block;margin:0 auto;max-width:100%;max-height:70vh;width:auto;height:auto;image-rendering:auto}
    .zoom-dialog p{margin-top:var(--space-4);text-align:center;font-size:var(--fs-small);color:var(--copy)}
    .zoom-close{position:absolute;top:var(--space-3);right:var(--space-3);width:40px;height:40px;border:0;border-radius:50%;background:var(--lime-soft);color:var(--plum);font-size:1.4rem;line-height:1;cursor:pointer}

    @media (max-width:1080px){
      .page-hero-aside-grid{grid-template-columns:1fr}
      .page-hero-aside-main .page-hero-trophy{flex:none}
    }
    @media (max-width:640px){
      .award-grid{grid-template-columns:1fr}
    }

    /* ============================================================
       NO EMPTY BANDS BESIDE CONTENT (2026-09-21)
       ============================================================
       The client's rule: content fills the width, rather than sitting in a
       narrow column beside empty space. */

    /* Text alone: the heading across, the text in two columns under it. A
       short text keeps one column, at a readable width, from the left. */
    .prose-text h2{margin-bottom:var(--space-6)}
    .prose-columns{columns:2;column-gap:clamp(32px,4vw,64px)}
    .prose-columns > :first-child{margin-top:0}
    .prose-columns li,.prose-columns blockquote{break-inside:avoid}
    .prose-columns h2,.prose-columns h3,.prose-columns h4{break-after:avoid}
    .prose-single{max-width:75ch}
    @media (max-width:900px){.prose-columns{columns:1}}

    /* Card grids: rows as even as the count allows, the last row filling the
       width (the renderer sets each card's --span of twelve). */
    @media (min-width:1081px){
      .balanced{grid-template-columns:repeat(12,minmax(0,1fr))}
      .balanced > *{grid-column:span var(--span,3)}
    }
    @media (min-width:641px) and (max-width:1080px){
      .balanced > :last-child:nth-child(odd){grid-column:1 / -1}
    }

    /* An intro beside a long list of questions stays in view while they
       scroll, so its column is never empty on screen. Below the sticky bar. */
    @media (min-width:1081px){
      .faq-layout > :first-child{position:sticky;top:var(--stick-top,120px)}
    }

    /* The timeline's card, split: the statement under the photograph, the
       figures under the dates, so the two columns end together. */
    .timeline-intro .timeline-card{margin-top:var(--space-12)}

    /* A section heading with no intro beside it may run wider, rather than
       wrapping to three lines in the left half beside nothing. */
    @media (min-width:1081px){
      .section-head > :only-child h2{max-width:32ch}
    }

    /* ============================================================
       THE PENSION DESIGNS (2026-09-21)
       ============================================================
       Product cards, the numbered two-column list, the opening with its
       photograph full height on the right, and the Talk to us panel. */

    /* At a glance lines that open a page. */
    .glance-link{display:flex;align-items:center;gap:var(--space-4);width:100%;color:inherit;text-decoration:none}
    .glance-link > span:not(.round-icon){flex:1;font-weight:600;color:var(--plum)}
    .glance-link > .ar{color:var(--plum);transition:transform .2s}
    .glance-link:hover > .ar,.glance-link:focus-visible > .ar{transform:translateX(3px)}

    /* Product cards; the whole card is the link, and it turns aubergine
       under the pointer or keyboard focus. */
    /* Desktop columns come from .balanced (rows of up to four); tablet and phone below. */
    .cap-cards{display:grid;gap:var(--space-4)}
    .cap-card{
      position:relative;display:flex;flex-direction:column;padding:var(--space-6);min-height:220px;
      border:1px solid var(--hair);border-radius:14px;background:#fbfcf6;transition:background .25s,color .25s,border-color .25s
    }
    .cap-card h3{margin-top:var(--space-4);font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.2;color:var(--plum)}
    .cap-card h3 a{color:inherit;text-decoration:none}
    .cap-card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
    .cap-card p{margin-top:var(--space-3);flex:1;color:var(--copy);line-height:1.55}
    .cap-card-more{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);padding-bottom:4px;border-bottom:2px solid var(--lime);align-self:flex-start;font-weight:700;font-size:var(--fs-small);color:var(--plum)}
    .cap-card:hover,.cap-card:focus-within{background:var(--plum);border-color:transparent;color:#fff}
    .cap-card:hover h3,.cap-card:focus-within h3,
    .cap-card:hover .cap-card-more,.cap-card:focus-within .cap-card-more{color:#fff}
    .cap-card:hover p,.cap-card:focus-within p{color:rgba(255,255,255,.82)}
    .cap-card h3 a:focus-visible{outline:none}
    .cap-card:focus-within{box-shadow:0 0 0 3px var(--lime)}

    /* The numbered two-column list, a hairline down the middle. */
    .num-rows{
      list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,72px);
      background:linear-gradient(var(--hair),var(--hair)) 50% 0/1px 100% no-repeat
    }
    .num-row{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:0 var(--space-4);align-items:start;padding:var(--space-6) 0;border-bottom:1px solid var(--hair)}
    .num-row-icon{display:grid;place-items:start center;padding-top:2px;color:var(--plum)}
    .num-row-body h3{font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.25;color:var(--plum)}
    .num-row-body h3 a{color:inherit;text-decoration:none}
    .num-row-body h3 a::after{content:"";position:absolute;inset:0}
    .num-row-body p{margin-top:var(--space-2);font-size:var(--fs-small);line-height:1.6;color:var(--copy)}
    .num-row-arrow{align-self:center;color:var(--plum);transition:transform .2s}
    .num-row-link:hover h3,.num-row-link:focus-within h3{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:4px}
    .num-row-link:hover .num-row-arrow,.num-row-link:focus-within .num-row-arrow{transform:translateX(4px)}

    /* The opening with its photograph full height on the right. */
    .page-hero-bleed{position:relative}
    .page-hero-bleed-photo{position:absolute;top:0;right:0;bottom:0;width:40%;margin:0;z-index:0}
    .page-hero-bleed-photo picture{display:block;height:100%}
    .page-hero-bleed-photo img{display:block;width:100%;height:100%;object-fit:cover}
    .page-hero-bleed .container{position:relative;z-index:1}
    .page-hero-bleed .page-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
    .page-hero-bleed .page-hero-card{max-width:380px;background:#fff;box-shadow:0 24px 60px rgba(38,0,51,.16)}

    /* Talk to us: an aubergine panel to the left edge, the form in a card. */
    .talk-section{padding:0;background:var(--warm)}
    .talk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
    .talk-panel{
      padding:clamp(56px,7vw,96px) clamp(32px,4vw,64px) clamp(56px,7vw,96px) max(16px,calc((100vw - var(--max)) / 2));
      background:var(--plum);color:#fff
    }
    .talk-panel h2{color:#fff;line-height:1.02}
    .talk-intro{margin-top:var(--space-6);max-width:30ch;font-size:var(--fs-lede);line-height:1.55;color:rgba(255,255,255,.88)}
    .talk-contact{list-style:none;margin:var(--space-8) 0 0;padding:0;display:grid;gap:var(--space-4)}
    .talk-contact li{display:flex;align-items:center;gap:var(--space-3);color:#fff}
    .talk-contact svg{flex:0 0 auto;color:var(--lime)}
    .talk-contact a{color:#fff;text-decoration:none}
    .talk-contact a:hover{text-decoration:underline}
    .talk-tagline{margin-top:var(--space-12)}
    .talk-tagline::before{content:"";display:block;width:40px;height:2px;margin-bottom:var(--space-6);background:var(--lime)}
    .talk-tagline em{font-family:var(--font-head);font-size:var(--fs-h3);color:rgba(255,255,255,.92);font-weight:700;line-height:1.3}
    .talk-form{padding:clamp(40px,5vw,72px) max(16px,calc((100vw - var(--max)) / 2)) clamp(40px,5vw,72px) clamp(32px,4vw,56px)}
    .talk-form .lead-form{
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-5,20px);margin:0;max-width:none;
      padding:clamp(24px,3vw,36px);border:1px solid var(--hair);border-radius:20px;background:#fff;box-shadow:0 18px 44px rgba(53,0,79,.06)
    }
    .talk-form .lead-form > *{grid-column:1 / -1;margin:0}
    .talk-form .lead-form > .form-row-text,.talk-form .lead-form > .form-row-email{grid-column:auto}
    /* A phone number straight after a name pairs with it, and the email after
       them takes the row (the USA Register form, 2026-09-22). */
    .talk-form .lead-form > .form-row-text + .form-row-tel{grid-column:auto}
    .talk-form .lead-form > .form-row-text + .form-row-tel + .form-row-email{grid-column:1 / -1}
    .talk-form .lead-form > button{justify-self:start}
    .talk-form .lead-form-ack{margin:0}

    @media (max-width:1080px){
      .page-hero-bleed{display:flex;flex-direction:column-reverse}
      .page-hero-bleed-photo{position:static;width:100%;height:280px}
      .page-hero-bleed .page-hero-grid{grid-template-columns:1fr}
      .cap-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media (max-width:900px){
      .num-rows{grid-template-columns:1fr;background:none}
      .talk-grid{grid-template-columns:1fr}
      .talk-panel,.talk-form{padding-left:16px;padding-right:16px}
    }
    @media (max-width:640px){
      .cap-cards{grid-template-columns:1fr}
      .talk-form .lead-form{grid-template-columns:1fr}
      .talk-form .lead-form > .form-row-text,.talk-form .lead-form > .form-row-email,.talk-form .lead-form > .form-row-text + .form-row-tel{grid-column:1 / -1}
      .num-row{grid-template-columns:36px minmax(0,1fr) auto}
    }
    .talk-form .lead-form .btn.primary{background:var(--lime);border-color:var(--lime);color:var(--plum-dark)}

    /* The CMS's line icons (cms/src/frontend/icons.tsx). */
    .ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
    .ich{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
    /* The arrow and the header's chevron, drawn once each (icons.tsx, Chrome.tsx).
       None of the brand fonts has a \2192 glyph, so a typed arrow falls back to
       whatever the device has; every arrow is this drawing instead. */
    :root{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
    .ar,.chev{display:inline-block;flex:0 0 auto;vertical-align:middle;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
    .ar{width:18px;height:18px;--m:var(--arrow)}
    .arrow > .ar{margin-left:.4em}
    .ar-16{width:16px;height:16px}
    .ar-20{width:20px;height:20px}
    .chev{width:14px;height:14px;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}

    /* A person's own page: the portrait stays in view beside the biography. */
    .person-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);gap:clamp(32px,5vw,80px);align-items:start}
    .person-aside{position:sticky;top:var(--stick-top,120px)}
    /* A block, as on the board: in a grid the photo kept its own proportions
       and sat off the frame's foot or ran under it (2026-10-13). */
    .person-portrait{display:block}
    .person-linkedin{display:inline-block;margin-top:var(--space-4);font-weight:600;font-size:var(--fs-small);color:var(--plum)}
    .person-back{display:flex;width:max-content;align-items:center;gap:var(--space-2);font-weight:600;font-size:var(--fs-small);color:var(--plum);text-decoration:none}
    .person-back .ar{transform:rotate(180deg)}
    .person-back:hover{text-decoration:underline}
    .person-main h1{line-height:1.05}
    /* Titles and letters after the name, on this page only (2026-10-08). */
    .person-honours{margin-top:var(--space-3);font-size:var(--fs-body);font-weight:600;color:var(--copy)}
    .person-main .board-role{margin-top:var(--space-3);font-size:var(--fs-body)}
    /* Every board they sit on, under their title (2026-10-13). */
    .person-seats{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:var(--space-3)}
    .person-seats li{font-size:var(--fs-small);line-height:1.45;font-weight:600;color:var(--plum)}
    .person-seats li span{display:block;font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--copy)}
    .person-bio{margin-top:var(--space-8)}
    /* A biography of more than one paragraph in two columns beside the
       portrait, not one narrow column with the right of the page empty. */
    @media (min-width:1080px){.person-bio:has(p + p){column-count:2;column-gap:var(--space-12)}}
    .person-bio p{font-size:var(--fs-body);line-height:1.75;color:var(--copy)}
    .person-bio p + p{margin-top:var(--space-4)}
    @media (max-width:900px){
      .person-grid{grid-template-columns:1fr}
      .person-aside{position:static;max-width:260px}
    }

    /* ============================================================
       FORM FIELDS (2026-09-21)
       ============================================================
       One field for every form on the site — the enquiry forms, Talk to us
       and the support drawer, whose inputs had been left to the browser.
       48px tall, 16px text (so a phone does not zoom in on focus), a clear
       focus ring, and a drawn arrow on selects. */
    :is(.lead-form,.support-form) :is(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=url],select,textarea){
      display:block;width:100%;height:48px;margin:0;padding:12px 16px;
      font:inherit;font-size:1rem;line-height:1.4;color:var(--plum-dark);
      background-color:#fff;border:1px solid #d6cbdf;border-radius:12px;box-shadow:0 1px 2px rgba(38,0,51,.04);
      transition:border-color .15s ease,box-shadow .15s ease;-webkit-appearance:none;appearance:none
    }
    :is(.lead-form,.support-form) textarea{height:auto;min-height:140px;resize:vertical}
    :is(.lead-form,.support-form) select{
      padding-right:44px;cursor:pointer;background-repeat:no-repeat;background-position:right 16px center;background-size:16px;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335004f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    }
    :is(.lead-form,.support-form) :is(input,select,textarea):hover{border-color:#b9a4c9}
    :is(.lead-form,.support-form) :is(input,select,textarea):focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 4px rgba(143,198,65,.35)}
    :is(.lead-form,.support-form) :is(input,textarea)::placeholder{color:#8a7f96}
    :is(.lead-form,.support-form) :is(input,select,textarea)[aria-invalid=true],
    :is(.lead-form,.support-form) :is(input,select,textarea):user-invalid{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.12)}
    :is(.lead-form,.support-form) :is(input,select,textarea):disabled{background-color:#f4f2f6;color:#8a7f96;cursor:not-allowed}
    .support-form .form-row{gap:var(--space-2)}

    /* ============================================================
       CAREERS AND AWARDS (2026-09-22)
       ============================================================
       The large opening: the headline set big, a line under it, values
       under the buttons. With a photograph, it takes the right 40% full
       height and the quote card sits over its edge; without one, the quote
       and the keywords take the right-hand column. */
    .page-hero-feature{padding:clamp(40px,5vw,72px) 0 clamp(48px,5vw,76px);background:linear-gradient(115deg,var(--warm) 30%,var(--plum-tint))}
    .page-hero-feature:after{display:none}
    .feature-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,4vw,64px);align-items:center}
    .feature-main h1{margin-top:var(--space-6);line-height:1.02}
    .feature-sub{margin-top:var(--space-4);font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.3;color:var(--plum);font-weight:700}
    .feature-main .lead{margin-top:var(--space-4);max-width:58ch}
    .feature-values{list-style:none;margin:var(--space-8) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
    .feature-values li{display:flex;align-items:center;gap:10px;color:var(--plum)}
    .feature-values .ic{flex:0 0 auto}
    .feature-values b{display:block;font-size:var(--fs-small);line-height:1.3}
    .feature-values small{display:block;font-size:.8rem;line-height:1.35;color:var(--copy)}
    .feature-side{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-8);align-items:start}
    .feature-quote{font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.3;color:var(--plum);font-weight:700}
    .feature-quote::after{content:"";display:block;width:40px;height:3px;margin-top:var(--space-4);border-radius:2px;background:var(--lime)}
    .feature-words ul{list-style:none;margin:0;padding:0}
    .feature-words li{font-size:var(--fs-label);font-weight:800;line-height:2.3;letter-spacing:.12em;text-transform:uppercase;color:var(--copy)}
    .feature-words ul + p{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--hair)}
    .feature-words p{font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.3;color:var(--plum);font-weight:700}
    /* Without a photograph: two soft arcs across the ground. */
    .page-hero-feature:not(.has-photo)::before{
      content:"";position:absolute;inset:0 0 0 45%;pointer-events:none;opacity:.6;
      background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M-40 520C360 380 700 560 1040 300S1400 60 1500 40' stroke='%238fc641' stroke-width='2'/%3E%3Cpath d='M-40 470C380 360 720 500 1060 250S1420 30 1500 0' stroke='%23d9c28a' stroke-width='1.5'/%3E%3C/svg%3E") center/100% 100% no-repeat
    }
    .page-hero-feature.has-photo .feature-grid{grid-template-columns:minmax(0,1fr) calc(40vw - max(16px,(100vw - var(--max)) / 2) + 60px);gap:var(--space-6)}
    .feature-photo{position:absolute;top:0;right:0;bottom:0;width:40%;margin:0}
    .feature-photo picture{display:block;height:100%}
    .feature-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:78% 30%}
    .feature-photo::after{content:"";position:absolute;inset:0 auto 0 0;width:22%;background:linear-gradient(90deg,var(--plum-tint),transparent)}
    .has-photo .feature-side{display:block;width:250px;padding:var(--space-8) var(--space-6);border-radius:28px;background:rgba(252,252,248,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 24px 60px rgba(38,0,51,.14)}
    .has-photo .feature-words{margin-top:var(--space-6)}
    .page-hero-feature .btn .ar{margin-right:-4px}

    /* Text in a white panel, with a card beside it. */
    .prose-panel{padding:10px 0;background:var(--plum-tint)}
    .prose-panel:last-of-type{padding-bottom:clamp(48px,6vw,80px)}
    .page-hero + .prose-panel{padding-top:clamp(24px,3vw,40px)}
    .prose-panel-grid{display:grid;gap:20px}
    .prose-panel-grid.with-card{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr)}
    .prose-panel-main,.prose-panel-card.card{padding:clamp(24px,3vw,40px);border:1px solid var(--hair);border-radius:24px;background:#fff;box-shadow:0 18px 44px rgba(53,0,79,.06)}
    .prose-panel-main.wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.42fr);gap:clamp(24px,3vw,48px);align-items:center}
    .prose-panel-main .prose-single p,.prose-panel-main .prose-columns p{color:var(--copy);line-height:1.7}
    .prose-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
    .prose-points li{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-small);line-height:1.4;color:var(--plum)}
    .prose-points .round-icon{flex:0 0 auto;width:48px;height:48px}
    .prose-panel-note{font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.3;color:var(--plum-300);transform:rotate(-5deg);font-weight:700}
    .prose-panel-note::after{content:"";display:block;width:32px;height:2px;margin-top:var(--space-4);background:var(--lime)}
    /* A photograph in the line's place (Careers, 2026-10-22): a wider third column. */
    .prose-panel-main.wide.with-photo{grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,.8fr)}
    /* Beside a photograph the points have a third of the room: one a line. */
    .with-photo .prose-points{grid-template-columns:minmax(0,1fr)}
    .prose-panel-photo{aspect-ratio:4/5;overflow:hidden;border-radius:18px;background:var(--plum-tint)}
    .prose-panel-photo picture,.prose-panel-photo img{display:block;width:100%;height:100%}
    .prose-panel-photo img{object-fit:cover;object-position:50% 62%}
    /* The card is as tall as the panel beside it; its lines spread to fill it. */
    .prose-panel-card.card{display:flex;flex-direction:column;align-items:flex-start}
    .prose-panel-card .glance-icons{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;width:100%}
    .prose-panel-card h2{font-size:var(--fs-h3)}
    .prose-panel-card h2::after{content:"";display:block;width:40px;height:3px;margin-top:var(--space-3);border-radius:2px;background:var(--lime)}
    .prose-panel-card .glance-icons li{border-bottom:0;padding:var(--space-2) 0;font-size:var(--fs-body);color:var(--plum)}

    /* The award gallery: photographs standing free, a filter, a count. */
    .award-gallery{padding-top:clamp(32px,4vw,56px)}
    .award-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(32px,4vw,48px)}
    .award-filter[hidden]{display:none}
    .award-filter button{min-height:44px;padding:0 20px;border:1px solid var(--hair);border-radius:999px;background:#fff;font:inherit;font-size:var(--fs-small);font-weight:600;color:var(--plum);cursor:pointer;box-shadow:0 6px 16px rgba(53,0,79,.05)}
    .award-filter button:hover{border-color:var(--plum-300)}
    .award-filter button[aria-pressed=true]{background:var(--plum);border-color:var(--plum);color:#fff}
    .award-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(32px,3.5vw,48px) clamp(20px,3vw,40px)}
    /* Rows as even as the count allows (9 -> 3+3+3), from the renderer's --span. */
    @media (min-width:1081px){
      .award-list{grid-template-columns:repeat(12,minmax(0,1fr))}
      .award-item{grid-column:span var(--span,3)}
    }
    .award-item[hidden]{display:none}
    .award-photo{display:grid;place-items:end center;height:180px;margin-bottom:var(--space-6);background:radial-gradient(ellipse 55% 14% at 50% 97%,rgba(53,0,79,.13),transparent 72%)}
    .award-photo picture{display:contents}
    .award-photo img{display:block;max-width:78%;max-height:176px;width:auto;height:auto;object-fit:contain;border-radius:6px;filter:drop-shadow(0 16px 20px rgba(38,0,51,.2))}
    .award-photo .ic{margin-bottom:var(--space-6);color:var(--plum-300)}
    .award-item h3{font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.25;color:var(--plum)}
    .award-item h3::before{content:"";display:block;width:32px;height:3px;margin-bottom:var(--space-3);border-radius:2px;background:var(--lime)}
    .award-item p{margin-top:var(--space-2);font-size:var(--fs-small);line-height:1.55;color:var(--copy)}
    .award-more{display:inline-flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);font-size:var(--fs-small);font-weight:700;color:var(--plum);text-decoration:none}
    .award-more-arrow{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--lime-soft);transition:background .2s}
    .award-more:hover .award-more-arrow,.award-more:focus-visible .award-more-arrow{background:var(--lime)}
    .award-summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(24px,3vw,44px);margin-top:clamp(56px,7vw,88px);padding:clamp(24px,3vw,36px) clamp(24px,3vw,44px);border:1px solid var(--hair);border-radius:24px;background:#fff;box-shadow:0 18px 44px rgba(53,0,79,.06)}
    .award-summary h2{max-width:11ch;font-size:var(--fs-h3);line-height:1.15}
    .award-summary h2::before{content:"";display:block;width:32px;height:3px;margin-bottom:var(--space-3);border-radius:2px;background:var(--lime)}
    .award-summary ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
    .award-summary li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);border-left:1px solid var(--hair);color:var(--plum)}
    .award-summary li .ic{flex:0 0 auto}
    .award-summary li span{font-size:var(--fs-small);line-height:1.35;color:var(--copy)}
    .award-summary b{display:block;font-size:var(--fs-num);line-height:1.15;color:var(--plum);font-family:var(--font-head);font-weight:700}
    .award-summary .reach span{font-size:var(--fs-small);font-weight:700;color:var(--plum)}
    .award-summary-quote{max-width:17ch;padding-left:var(--space-6);border-left:1px solid var(--hair);font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.3;color:var(--plum);font-weight:700}

    @media (max-width:1180px){
      .award-summary{grid-template-columns:auto minmax(0,1fr)}
      .award-summary-quote{grid-column:1 / -1;max-width:none;padding:var(--space-4) 0 0;border-left:0;border-top:1px solid var(--hair)}
    }
    @media (max-width:1080px){
      .feature-grid,.page-hero-feature.has-photo .feature-grid{grid-template-columns:1fr}
      .page-hero-feature.has-photo{display:flex;flex-direction:column;padding-top:0}
      .feature-photo{position:relative;width:100%;height:320px;margin-bottom:var(--space-8)}
      .feature-photo::after{display:none}
      .has-photo .feature-side{width:auto;max-width:420px}
      .prose-panel-grid.with-card,.prose-panel-main.wide,.prose-panel-main.wide.with-photo{grid-template-columns:1fr}
      .prose-panel-photo{aspect-ratio:3/2}
      .award-list{grid-template-columns:repeat(3,minmax(0,1fr))}
    }
    @media (max-width:900px){
      .feature-values,.award-summary ul{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-4)}
      .award-summary{grid-template-columns:1fr}
      .award-list{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media (max-width:640px){
      .feature-side{grid-template-columns:1fr}
      .prose-points,.award-list{grid-template-columns:1fr}
      .award-summary li{border-left:0;padding-left:0}
    }

    /* ============================================================
       THE DIASPORA FUND (2026-09-22)
       ============================================================
       A photograph to one edge of the page, its inner corners curved, the
       caption in italics over it; the text on the other side. */
        /* One rhythm down the page: every gap between the opening and the photo
       sections is 2 × --pad, and each photograph is as tall as its text. */
    .page-hero-left,.statements-photo{--pad:clamp(32px,4vw,56px)}
    .page-hero-left{padding:var(--pad) 0}
    .page-hero-left-photo{position:absolute;top:var(--pad);bottom:var(--pad);left:0;width:calc(50% - 24px);margin:0;overflow:hidden;border-radius:0 72px 72px 0}
    .page-hero-left-photo picture{display:block;height:100%}
    .page-hero-left-photo img{display:block;width:100%;height:100%;object-fit:cover}
    .page-hero-left-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,rgba(53,0,79,.5),rgba(53,0,79,.08) 55%,transparent)}
    .page-hero-left-body{width:calc(50% - 24px);margin-left:auto}
    .page-hero-left-body .hero-actions{padding-top:var(--space-6);border-top:1px solid var(--hair)}
    .page-hero-left-body .page-hero-card{margin-top:var(--space-8)}
    .page-hero-left .btn .ar{margin-right:-4px}

    .statements-photo{padding:var(--pad) 0}
    .statements-photo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:stretch}
    .photo-left .statements-photo-grid > .slant-photo{order:-1}
    .statements-photo-body h2{font-size:var(--fs-d3);line-height:1.1}
    .icon-points{list-style:none;margin:var(--space-8) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8) clamp(24px,3vw,40px)}
    .icon-points li{display:flex;align-items:flex-start;gap:var(--space-4)}
    /* An odd last point takes the whole row, so no half row stands empty. */
    .icon-points li:last-child:nth-child(odd){grid-column:1 / -1}
    .icon-points .round-icon{flex:0 0 auto}
    .icon-points h3{font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.3;color:var(--plum)}
    .point-link{color:inherit;text-decoration:none}
    .point-link svg{display:inline-block;margin-left:6px;vertical-align:-3px;color:#527c17;transition:transform .2s ease}
    .point-link:hover{text-decoration:underline;text-underline-offset:3px}
    .point-link:hover svg{transform:translateX(3px)}
    .icon-points p{margin-top:var(--space-2);font-size:var(--fs-small);line-height:1.6;color:var(--copy)}
    /* Long points one to a row, a hairline between them, and the photograph
       held in view beside them while they are read (the client, 2026-10-15:
       two columns of them in half the width was crowded). Desktop only:
       below 1081px the text has the whole width and two columns fit. */
    @media (min-width:1081px){
      .long-points .statements-photo-grid{align-items:start}
      .long-points .slant-photo{position:sticky;top:var(--stick-top,120px);height:min(620px,calc(100vh - var(--stick-top,120px) - 48px))}
      .long-points .icon-points{grid-template-columns:1fr;gap:0}
      .long-points .icon-points li{padding:var(--space-6) 0;border-top:1px solid var(--hair)}
      .long-points .icon-points li:first-child{padding-top:0;border-top:0}
      .long-points .icon-points li:last-child{padding-bottom:0}
    }

    @media (max-width:1080px){
      .page-hero-left{display:flex;flex-direction:column}
      .page-hero-left{padding-top:0}
      .page-hero-left-photo{position:relative;inset:auto;width:auto;height:300px;margin:0 16px var(--space-8) 0;border-radius:0 48px 48px 0}
      .page-hero-left{padding-top:0}
      .page-hero-left-body{width:auto}
      .statements-photo-grid{grid-template-columns:1fr}
      .photo-left .statements-photo-grid > .slant-photo{order:0}
    }
    @media (max-width:640px){
      .icon-points{grid-template-columns:1fr}
      /* The award filter scrolls sideways rather than wrapping into rows. */
      .award-filter{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;padding:4px 16px 8px 0;scrollbar-width:none}
      .award-filter button{flex:0 0 auto}
    }
    @media (max-width:1080px){.page-hero-feature:not(.has-photo)::before{display:none}}

    /* ============================================================
       TALK TO US, FROSTED (2026-09-22)
       ============================================================
       With the Settings photograph: the photo blurred behind the section
       under a light wash, dark text on it, the form on frosted glass, a line
       in small capitals at the right. */
    .talk-frosted{position:relative;overflow:hidden;background:var(--warm)}
    .talk-frosted .talk-grid{position:relative;z-index:1;grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr);gap:clamp(32px,4vw,64px);align-items:center;padding:clamp(56px,7vw,96px) 0}
    .talk-frosted .talk-panel{padding:0;background:none;color:var(--plum-dark)}
    .talk-frosted .talk-panel h2{margin-top:var(--space-4);color:var(--plum)}
    .talk-frosted .talk-intro{color:var(--copy)}
    .talk-frosted .talk-contact li,.talk-frosted .talk-contact a{color:var(--plum-dark)}
    .talk-frosted .talk-contact svg{box-sizing:content-box;padding:12px;border-radius:50%;background:var(--lime);color:var(--plum)}
    .talk-frosted .talk-tagline em{line-height:1.25;color:var(--plum)}
    .talk-frosted .talk-form{padding:0}
    .talk-frosted .talk-form .lead-form{
      background:#fff;border-color:var(--hair);
      box-shadow:0 10px 30px rgba(53,0,79,.06)
    }
    @media (max-width:1080px){
      .talk-frosted .talk-grid{grid-template-columns:1fr}
    }

    /* The FAQ band (2026-09-22): lavender ground, the questions in a white card. */
    .faq-band{background:var(--plum-tint)}
    .faq-band .faq-list{padding:var(--space-2) clamp(20px,2.4vw,32px);border:1px solid var(--hair);border-radius:24px;background:#fff;box-shadow:0 18px 44px rgba(53,0,79,.06)}
    .faq-band .faq-item:last-child{border-bottom:0}
    .faq-band .faq-layout .h2-compact{margin-top:var(--space-4)}

    /* The framed opening (the Diaspora Fund, 2026-09-22): the text and a
       rounded photograph side by side, their tops and bottoms level; the At a
       glance lines as one row across the width underneath. */
    .page-hero-framed{padding:clamp(32px,4vw,56px) 0}
    .framed-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,4vw,56px);align-items:stretch}
    .framed-grid h1{line-height:1.04}
    .framed-glance{margin-top:clamp(28px,3vw,40px);padding:var(--space-6) clamp(20px,2.4vw,32px)}
    .framed-glance ul{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
    .framed-glance li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);border-left:1px solid var(--hair);font-size:var(--fs-small);line-height:1.45;color:var(--copy)}
    .framed-glance li:first-child{border-left:0;padding-left:0}
    .framed-glance .round-icon{flex:0 0 auto;width:52px;height:52px}
    @media (max-width:1080px){
      .framed-grid,.page-hero-curved .framed-grid{grid-template-columns:minmax(0,1fr)}
      .framed-glance ul{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-4)}
      .framed-glance li{border-left:0;padding-left:0}
    }
    @media (max-width:640px){
      .framed-glance ul{grid-template-columns:1fr}
    }

    /* The slanted frame (the Diaspora Fund's photographs, 2026-09-22): a
       rounded parallelogram inside the grid, a thin lime outline offset
       behind it, the caption on a plum panel at its foot. The frame is skewed
       and its picture and caption counter-skewed, so neither leans. The
       margin keeps the slant's overhang inside the column. */
    .slant-photo{position:relative;min-height:380px;margin:14px clamp(24px,3vw,40px) 0}
    .slant-photo::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:2px solid rgba(143,198,65,.6);border-radius:52px;transform:skewX(-7deg);pointer-events:none}
    .slant-clip{position:absolute;inset:0;overflow:hidden;border-radius:52px;transform:skewX(-7deg);box-shadow:0 26px 60px rgba(38,0,51,.16);background:var(--plum-tint)}
    .slant-clip picture{position:absolute;inset:0 -9%;transform:skewX(7deg)}
    .slant-clip img{display:block;width:100%;height:100%;object-fit:cover}
    .page-hero-framed .slant-photo{min-height:360px}
    @media (max-width:1080px){
      .slant-photo,.page-hero-framed .slant-photo{min-height:0;aspect-ratio:16 / 10;margin:14px 28px 0}
    }
    @media (max-width:640px){
      .slant-photo{margin:14px 20px 0}
    }

    /* ============================================================
       INSURANCE (2026-09-22)
       ============================================================
       The curved opening: the framed layout with the photograph's left edge
       one long curve, inside the grid. */
    .curve-photo{position:relative;margin:0;min-height:380px;overflow:hidden;border-radius:50% 32px 32px 50% / 50% 32px 32px 50%;box-shadow:0 26px 60px rgba(38,0,51,.14)}
    .curve-photo picture{position:absolute;inset:0}
    .curve-photo img{display:block;width:100%;height:100%;object-fit:cover}
    .page-hero-curved .framed-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}

    /* Cards with a photograph at the foot: one row of up to five, the photo
       fading up into the white card. The whole card is the link. */
    .pcards{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:var(--space-8)}
    .pcard{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:var(--space-6) var(--space-6) 0;border:1px solid var(--hair);border-radius:24px;background:#fff;box-shadow:0 18px 44px rgba(53,0,79,.06);transition:transform .2s,box-shadow .2s}
    .pcard:hover,.pcard:focus-within{transform:translateY(-4px);box-shadow:0 26px 56px rgba(53,0,79,.12)}
    .pcard-top{display:flex;align-items:center;justify-content:space-between;color:var(--plum)}
    .pcard h3{margin-top:var(--space-4);font-size:var(--fs-h3);line-height:1.3;color:var(--plum)}
    .pcard h3 a{color:inherit;text-decoration:none}
    .pcard h3 a::after{content:"";position:absolute;inset:0;z-index:2}
    .pcard p{margin-top:var(--space-3);font-size:var(--fs-small);line-height:1.55;color:var(--copy)}
    .pcard-more{display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-4);font-size:var(--fs-small);font-weight:700;color:var(--plum)}
    .pcard:hover .pcard-more .ar{transform:translateX(3px)}
    .pcard-photo{position:relative;margin:auto calc(-1 * var(--space-6)) 0;padding-top:var(--space-6);height:190px}
    .pcard-photo picture{position:absolute;inset:var(--space-6) 0 0}
    .pcard-photo img{display:block;width:100%;height:100%;object-fit:cover}
    .pcard-photo::before{content:"";position:absolute;z-index:1;inset:var(--space-6) 0 auto;height:48px;background:linear-gradient(#fff,rgba(255,255,255,0))}

    /* A list beside a photograph: each point in a green number circle. */
    .prose-photo ul{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:var(--space-3)}
    .prose-photo ul li{display:flex;align-items:center;gap:var(--space-4);font-size:var(--fs-body);color:var(--plum-dark)}
    /* A tick, not a number: the points have no order (2026-10-01). */
    .prose-photo ul li::before{content:"";flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='%2335004f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

    @media (max-width:1080px){
      .page-hero-curved .framed-grid{grid-template-columns:minmax(0,1fr)}
      .pcards{grid-template-columns:repeat(3,minmax(0,1fr))}
      .curve-photo{min-height:0;aspect-ratio:16 / 10;border-radius:32px}
    }
    @media (max-width:640px){
      .pcards{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media (max-width:420px){
      .pcards{grid-template-columns:1fr}
    }

    /* ============================================================
       IMPACT DEBT FUND (2026-09-22)
       ============================================================
       The oval opening: text, the At a glance card and a tall oval
       photograph with a thin lime ring, all inside the grid. */
    .page-hero-oval{padding:clamp(32px,4vw,56px) 0}
    .oval-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.62fr);gap:clamp(24px,3vw,44px);align-items:center}
    .oval-grid h1{line-height:1.04}
    .oval-card{padding:clamp(22px,2.4vw,32px);border-radius:28px;background:rgba(255,255,255,.82);box-shadow:0 22px 50px rgba(53,0,79,.1)}
    .oval-card ul{list-style:none;margin:var(--space-4) 0 0;padding:0}
    .oval-card li{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--hair);font-size:var(--fs-small);line-height:1.45;color:var(--copy)}
    .oval-card li:last-child{border-bottom:0}
    .oval-card li b{display:block;font-family:var(--font-head);font-size:var(--fs-h3);color:var(--plum)}
    .oval-card .round-icon{flex:0 0 auto;width:48px;height:48px}
    .oval-photo{position:relative;margin:0 12px;aspect-ratio:3 / 5;max-height:560px}
    .oval-photo::before{content:"";position:absolute;inset:-12px;border:2px solid rgba(143,198,65,.55);border-radius:999px;pointer-events:none}
    .oval-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:999px;box-shadow:0 26px 60px rgba(38,0,51,.16)}

    /* A photograph on the left of a prose section: the shaped frame mirrored. */
    .prose-photo.photo-left .prose-photo-figure{order:-1;transform:scaleX(-1)}
    .prose-photo.photo-left .prose-photo-figure img{transform:scaleX(-1)}
    .prose-photo.photo-left .prose-photo-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}

    /* The wheel: cards either side of a round photograph in a two-tone ring. */
    .wheel-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:var(--space-8)}
    .wheel-col{display:grid;gap:var(--space-4)}
    .wheel-card{position:relative;z-index:1;display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-6);border:1px solid var(--hair);border-radius:22px;background:#fff;box-shadow:0 16px 40px rgba(53,0,79,.06)}
    .wheel-card .round-icon{flex:0 0 auto;width:56px;height:56px}
    .wheel-card h3{margin-top:2px;font-family:var(--font-head);font-size:var(--fs-h3);color:var(--plum)}
    .wheel-card p{margin-top:var(--space-2);font-size:var(--fs-small);line-height:1.5;color:var(--copy)}
    /* Each card's line to the ring: drawn by site.js, above the cards and ring. */
    .wheel-lines{position:absolute;inset:0;z-index:2;overflow:visible;pointer-events:none}
    .wheel-lines path{fill:none;stroke-width:1.5}
    .wheel-lines .wl-left{stroke:var(--plum)}
    .wheel-lines .wl-right{stroke:var(--accent-ink)}
    .wheel-lines circle.wl-left{fill:var(--plum)}
    .wheel-lines circle.wl-right{fill:var(--accent-ink)}
    .wheel-hub{position:relative;aspect-ratio:1;border-radius:50%;padding:clamp(22px,2.4vw,34px);background:conic-gradient(#dcebc6 0 50%,var(--plum) 50% 100%);box-shadow:0 26px 60px rgba(38,0,51,.14)}
    .wheel-hub picture{display:block;width:100%;height:100%;overflow:hidden;border:6px solid #fff;border-radius:50%}
    .wheel-hub img{display:block;width:100%;height:100%;object-fit:cover}
    /* Words along the ring: a thicker ring to carry them, set on its midline. */
    .wheel-hub.has-words{padding:11%}
    .wheel-words{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
    .wheel-words text{font-family:var(--font-body);font-size:3.3px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;dominant-baseline:central}
    .wheel-words .wheel-word-l{fill:#fff}
    .wheel-words .wheel-word-r{fill:var(--plum)}
    /* A short line over the photograph, on a frosted panel, a lime rule beneath. */
    /* The link under the cards: a round arrow and a label in capitals. */
    .wheel-link{display:flex;width:max-content;align-items:center;gap:var(--space-4);margin:var(--space-8) 0 0 auto;font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--plum)}
    .wheel-link-ring{display:grid;place-items:center;width:52px;height:52px;border:1.5px solid var(--plum);border-radius:50%;transition:background .2s ease,color .2s ease}
    .wheel-link:hover .wheel-link-ring,.wheel-link:focus-visible .wheel-link-ring{background:var(--plum);color:#fff}

    @media (max-width:1080px){
      .oval-grid{grid-template-columns:minmax(0,1fr) minmax(0,.7fr)}
      .oval-grid > :first-child{grid-column:1 / -1}
      .wheel-grid{grid-template-columns:minmax(0,1fr)}
      .wheel-hub{order:-1;width:min(320px,76vw);justify-self:center}
      .wheel-link{margin-right:auto}
      .prose-photo.photo-left .prose-photo-grid{grid-template-columns:minmax(0,1fr)}
      /* Stacked, the photograph fills the width: keep its shape inside it. */
      .prose-photo-figure::before{right:0}
    }
    @media (max-width:640px){
      .oval-grid{grid-template-columns:minmax(0,1fr)}
      .oval-photo{aspect-ratio:4 / 5;max-height:420px;justify-self:center;width:min(300px,80vw)}
      .prose-photo.photo-left .prose-photo-figure{order:0}
    }

    /* ============================================================
       IMPACT DEBT FUND — ABOUT (2026-09-22)
       ============================================================
       The arched opening: text, the photograph in an arch with its
       caption on a frosted card, the At a glance lines down a line. */
    .page-hero-arch{padding:clamp(32px,4vw,56px) 0}
    .arch-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr) minmax(0,.72fr);gap:clamp(24px,3vw,48px);align-items:center}
    .arch-grid h1{line-height:1.04}
    .arch-photo{position:relative;margin:0;aspect-ratio:4 / 5;max-height:560px}
    .arch-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:999px 999px 28px 28px;box-shadow:0 26px 60px rgba(38,0,51,.16)}
    .arch-photo::before{content:"";position:absolute;inset:-12px -12px 24px;border:2px solid rgba(143,198,65,.5);border-bottom:0;border-radius:999px 999px 0 0;pointer-events:none}
    .arch-glance ul{position:relative;list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:var(--space-4)}
    .arch-glance li{position:relative;display:flex;align-items:center;gap:var(--space-4)}
    .arch-fact{flex:1;padding:14px 16px;border:1px solid var(--hair);border-radius:16px;background:#fff;font-size:var(--fs-small);line-height:1.45;color:var(--copy);box-shadow:0 10px 26px rgba(53,0,79,.05)}

    /* The pair: two numbered cards either side of a tall photograph. */
    .pair-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px) minmax(0,1fr);gap:clamp(24px,3.5vw,56px);align-items:center;margin-top:var(--space-8)}
    .pair-grid.no-photo{grid-template-columns:repeat(2,minmax(0,1fr))}
    .pair-card{padding:clamp(24px,2.6vw,36px);border:1px solid var(--hair);border-radius:24px;background:#fff;box-shadow:0 18px 44px rgba(53,0,79,.07)}
    .pair-top{display:flex;align-items:center;gap:var(--space-4)}
    .pair-top .round-icon{width:60px;height:60px}
    .pair-card h3{margin-top:var(--space-6);font-family:var(--font-head);font-size:var(--fs-h3);color:var(--plum)}
    .pair-card p{margin-top:var(--space-3);line-height:1.65;color:var(--copy)}
    .pair-photo{position:relative;margin:0 12px;aspect-ratio:3 / 5;max-height:480px}
    .pair-photo::before{content:"";position:absolute;inset:-12px;border:2px solid rgba(143,198,65,.5);border-radius:999px;pointer-events:none}
    .pair-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:999px;box-shadow:0 26px 60px rgba(38,0,51,.16)}

    /* The board: the chair leads on aubergine, the rest follow as rows —
       portrait, name and role on the left, a clamped biography on the right
       (2026-09-23). The role under the name, as on About's board (2026-10-08). */
    .pboard-head{display:flex;align-items:center;gap:var(--space-4)}
    .pboard-initials{flex:0 0 auto;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--plum);font-family:var(--font-head);font-size:1.15rem;color:#fff;box-shadow:0 0 0 4px var(--accent-soft)}
    .pboard-role{margin-top:var(--space-2);font-size:var(--fs-small);font-weight:600;line-height:1.4;color:var(--accent-ink)}
    .pboard-head h3{font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.25;color:var(--plum)}
    .pboard-bio .legal-body{max-width:none}
    .pboard-bio p,.pboard-summary{font-size:var(--fs-small);line-height:1.65;color:var(--copy)}
    a.pboard-more{display:inline-block}
    .pboard-bio p + p{margin-top:var(--space-3)}
    .pboard-bio.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
    .pboard-more{margin-top:var(--space-3);padding:0;border:0;background:none;font:inherit;font-size:var(--fs-small);font-weight:700;color:var(--plum);text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:5px;cursor:pointer}
    .pboard-lead{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.6fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:var(--space-8);padding:clamp(28px,4vw,48px);border-radius:28px;background:linear-gradient(135deg,var(--plum) 0%,var(--plum-500) 100%);color:#fff;box-shadow:0 24px 60px rgba(38,0,51,.18)}
    .pboard-lead::after{content:"";position:absolute;left:-110px;bottom:-150px;width:300px;height:300px;border:2px solid rgba(143,198,65,.3);border-radius:50%;pointer-events:none}
    .pboard-lead .pboard-head{flex-direction:column;align-items:flex-start;gap:20px}
    .pboard-lead .pboard-initials{width:96px;height:96px;font-size:2rem;background:#fff;color:var(--plum);box-shadow:0 0 0 5px var(--plum),0 0 0 7px var(--lime)}
    .pboard-lead .pboard-role{color:var(--lime)}
    .pboard-lead h3{font-size:var(--fs-h3);color:#fff}
    .pboard-lead .pboard-text{position:relative;z-index:1;padding-left:clamp(0px,3vw,48px);border-left:1px solid rgba(255,255,255,.18)}
    .pboard-lead .pboard-bio p,.pboard-lead .pboard-summary{font-size:var(--fs-body);line-height:1.75;color:rgba(255,255,255,.86)}
    .pboard-lead .pboard-bio.is-clamped{-webkit-line-clamp:5}
    .pboard-lead .pboard-more{color:#fff}
    .pboard-list{margin-top:var(--space-6);border:1px solid var(--hair);border-radius:24px;background:#fff;box-shadow:0 14px 36px rgba(53,0,79,.06)}
    .pboard-list.no-lead{margin-top:var(--space-8)}
    .pboard-row{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.6fr);gap:clamp(24px,4vw,64px);align-items:start;padding:clamp(22px,2.6vw,32px) clamp(22px,3vw,40px)}
    .pboard-row + .pboard-row{border-top:1px solid var(--hair)}
    .pboard-row.no-bio{padding-block:clamp(16px,2vw,22px)}

    @media (max-width:1080px){
      .arch-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
      .arch-grid > :first-child{grid-column:1 / -1}
      .pair-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .pair-photo{grid-column:1 / -1;order:-1;justify-self:center;width:min(260px,60vw);aspect-ratio:4 / 5}
    }
    @media (max-width:640px){
      .arch-grid,.pair-grid,.pboard-lead,.pboard-row{grid-template-columns:minmax(0,1fr)}
      .pboard-row{gap:var(--space-4)}
      .pboard-lead::after{display:none}
      .pboard-lead .pboard-head{flex-direction:row;align-items:center}
      .pboard-lead .pboard-initials{width:72px;height:72px;font-size:1.5rem}
      .pboard-lead .pboard-text{padding-left:0;padding-top:20px;border-left:0;border-top:1px solid rgba(255,255,255,.18)}
      .arch-photo{justify-self:center;width:min(320px,84vw)}
    }

    /* ============================================================
       TESTIMONIALS AND GALLERY (the USA site, 2026-09-22)
       ============================================================ */
    .story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-8)}
    .story-card{position:relative;margin:0;padding:var(--space-8) var(--space-6) var(--space-6);border:1px solid var(--hair);border-radius:22px;background:#fff;box-shadow:0 14px 36px rgba(53,0,79,.06)}
    .story-mark{display:block;height:34px;font-family:var(--font-head);font-size:4.2rem;line-height:1;color:var(--lime)}
    .story-card blockquote{margin:var(--space-2) 0 0}
    .story-card blockquote p{font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.3;color:var(--plum);font-weight:700}
    .story-card figcaption{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--hair);font-size:var(--fs-small);color:var(--copy)}
    .story-card figcaption b{display:block;color:var(--plum)}
    .story-empty{max-width:640px;margin:var(--space-8) auto 0;padding:var(--space-8);border:1.5px dashed rgba(143,198,65,.7);border-radius:24px;background:var(--accent-soft);text-align:center}
    .story-empty p{font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.3;color:var(--plum);font-weight:700}
    .story-action{margin-top:var(--space-8);text-align:center}

    .photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-8)}
    .photo-tile{margin:0}
    .photo-tile a{display:block;overflow:hidden;border-radius:20px;box-shadow:0 14px 34px rgba(38,0,51,.1)}
    .photo-tile img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;transition:transform .4s ease}
    .photo-tile a:hover img,.photo-tile a:focus-visible img{transform:scale(1.04)}
    .photo-tile figcaption{margin-top:var(--space-3);font-size:var(--fs-small);line-height:1.45;color:var(--copy)}
    @media (max-width:1080px){
      .story-grid,.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media (max-width:640px){
      .story-grid,.photo-grid{grid-template-columns:minmax(0,1fr)}
    }

    /* ============================================================
       ENWEALTH CAPITAL (2026-09-23)
       ============================================================
       An emphasised heading sets its closing words on a line of their
       own, in italics ("Funds built for / your next chapter."). The
       calculator, the documents in tabs and the testimonials are styled
       in sections.css, which only the pages carrying them load. */

    /* The section menu (2026-09-24, in place of the wheel): a bar of tabs
       that stays under the header's card as the page scrolls. site.js sets
       --subnav-top to the card's height and brings the current tab into
       view; the bar scrolls sideways when the section has more pages than
       fit, fading at its edge so the next tab reads as more to come. */
    .subnav{position:sticky;top:var(--subnav-top,0);z-index:950;margin-top:12px;background:rgba(243,240,246,.94);border-bottom:1px solid var(--hair);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
    .subnav-inner{height:auto;min-height:62px;gap:20px}
    .subnav-crumb{display:inline-flex;align-items:center;gap:8px;color:var(--plum)}
    .subnav-links{gap:6px;padding:8px 0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);padding-right:40px}
    .subnav-links a{padding:9px 16px;border:0;border-radius:999px;color:var(--copy);font-weight:600}
    .subnav-links a:hover{color:var(--plum);background:var(--lime-soft)}
    .subnav-links a.is-current{background:var(--lime);color:var(--plum-dark)}
    .subnav-sep{flex:0 0 auto;width:1px;height:22px;margin:0 6px;background:var(--hair)}
    @media (max-width:760px){
      .subnav-crumb{display:none}
      .subnav-inner{min-height:56px}
    }
    .pager{display:flex;gap:16px;padding:40px 0}
    .pager a{flex:0 1 380px;display:grid;gap:4px;padding:18px 22px;border:1px solid var(--hair);border-radius:18px;background:#fff;font-family:var(--font-head);font-size:var(--fs-h3);color:var(--plum)}
    .pager a:hover{border-color:var(--plum)}
    .pager span{font:800 var(--fs-label)/1.4 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
    .pager-next{margin-left:auto;text-align:right}

/* ============================================================
   LIME TOUCHES (2026-10-05)
   ============================================================
   Lime, the brand's second colour, covered 0.2-0.7% of a page; the user chose
   small regular touches over another large field ("L2" on the options page):
   a lime rule under each section heading, icon discs in solid lime with purple
   icons (above, where each disc is drawn), the current page's tab in the
   section bar (above), a lime edge on the footer, and every main button lime
   with purple words, as the hero and Join buttons already were. Lime is a fill
   or a line here, never text on the light ground, where it is too faint. The
   button selectors repeat the block stylesheets' own (product.css), which load
   before this file, so they tie on specificity and this one wins. */
html main :is(.section-head,.prod-head,.board-head,.doctabs-head,.talk-panel,.prod-glance-main,.statements-photo-body,.goals-heading,.capital-heading,.impact-heading) h2::after{
  content:"";display:block;width:64px;height:4px;margin-top:14px;border-radius:2px;background:var(--lime)
}
html footer:not([class]){border-top:6px solid var(--lime)}
html .btn.primary,html .hero-cta .btn.primary,html .page-hero .hero-actions .btn.primary,html .page-hero-card .btn.small.primary,
html .dark .btn.primary,html .cta-section .lead-form .btn.primary,html .ecosystem-section .hero-actions .btn:first-child,
html .btn.prod-btn,html .page-hero.prod-hero .hero-actions .btn.prod-btn{background:var(--lime);border-color:var(--lime);color:var(--plum-dark)}
html .btn.primary:hover,html .page-hero .hero-actions .btn.primary:hover,html .dark .btn.primary:hover,
html .btn.prod-btn:hover,html .page-hero.prod-hero .hero-actions .btn.prod-btn:hover{background:#a2d35c;border-color:#a2d35c;color:var(--plum-dark)}

/* ============================================================
   PHONES, 2026-10-23 (the user: "some things are a bit squeezed, font
   sizes etc"). Measured over all 104 pages at 390px and 360px: no page
   scrolled sideways, but long reading sat at 14px in narrow cards, a page
   headline took four lines of the first screen, text ran 10px from the
   glass, the support pill covered card text and the page tabs were under
   the 44px touch size. The user's choices: small text up and headlines
   down, justified text kept with hyphenation, a round support button.
   Desktop and tablet are untouched.
   ============================================================ */
@media (max-width:640px){
  /* One step down for the headline, one up for supporting copy. */
  :root{--fs-d1:34px;--fs-small:15px}
  /* Long reading in a panel is body copy, not a card's caption. */
  html :is(.fund-notice-section p, .art-findings li p:not(.art-figure), .statements-photo p, .prod-section :is(p, li)){font-size:var(--fs-body)}
  /* A long word in a heading wraps rather than running past the edge. */
  h1,h2,h3{overflow-wrap:break-word}
  /* Justified lines stay justified (and hyphenated, above); balancing the
     lines first leaves fewer stretched gaps at this width. */
  :where(p){text-wrap:pretty}
  /* 16px from the glass, as every other screen keeps; 10px read as cramped. */
  .container{width:min(var(--max),calc(100% - 32px))}
  /* Page tabs at the touch size. */
  .subnav-links a{padding:12px 16px}
  /* The values' choices scroll sideways: fade the edge so the cut-off one
     reads as "more this way", as the page tabs do. */
  .vm-picks{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);padding-right:40px}
  /* Customer Support as a round button: the pill covered the text of
     whatever card sat under it. Its name stays for screen readers. */
  .support-fab{width:52px;height:52px;padding:0;justify-content:center;gap:0}
  .support-fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .support-fab svg{width:24px;height:24px}
}