/* FundProcess — production stylesheet
   Tokens are measured from the approved design (FundProcess Website.dc.html).
   Do not introduce colours, sizes or spacing values that are not declared here. */

:root{
  /* --sbw is the scrollbar width, set by nav.js; every full-bleed measurement is
     taken against the client width, not 100vw, which includes the gutter */
  --sbw:0px;
  --vw:calc(100vw - var(--sbw));

  /* surfaces */
  --paper:#faf9f5;          /* default page ground */
  --paper-2:#f5f3ed;        /* alternating section ground */
  --paper-3:#f0ede4;        /* image wells, inset panels */
  --loden:#16211a;          /* dark surface: buttons, footer, trust */
  --loden-raised:#1e2a20;   /* cards on loden */
  --rule:#e2ded3;           /* hairline on paper */
  --rule-strong:#cfcabb;    /* hairline on image wells */
  --rule-soft:#eae6df;      /* hairline inside cards */
  --rule-dark:#2e3a2c;      /* hairline on loden */

  /* ink */
  --ink:#101512;            /* headlines */
  --ink-body:#45423a;        /* body copy */
  --ink-muted:#6e6a5f;      /* labels, captions */
  --ink-faint:#726c63;      /* micro-labels, eyebrows in cards — AA at 10px */
  --ink-decor:#a9a49c;      /* decorative only: arrows, placeholder wells */
  --ink-on-loden-bright:#eef1e8;
  --ink-on-loden:#c7cdbf;   /* body on loden */
  --ink-on-loden-muted:#8b9385;

  /* accents — one green, two functional tints */
  --green:#246d1e;
  --green-tint:#edf3ea;
  --green-rule:#cfe0c9;          /* accent on paper */
  --green-on-loden:#31ae1c; /* accent on loden */
  --clay:#a8492c;           /* exceptions, breaches */
  --brass:#8a6d1f;          /* warnings, pending */

  /* type */
  --display:'Source Serif 4',Georgia,'Times New Roman',serif;
  --text:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* spacing */
  --gutter:56px;
  --section-y:84px;
  --gap-block:44px;      /* intro copy → first content block */
  --max:1120px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-body);
  font:400 16px/1.6 var(--text);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--green)}

h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--ink);letter-spacing:-.015em;margin:0}
h1{font-size:54px;line-height:1.06;max-width:17ch;text-wrap:balance}
h2{font-size:38px;line-height:1.12;max-width:26ch;text-wrap:balance}
h3{font-family:var(--text);font-size:15px;font-weight:600;line-height:1.4;letter-spacing:0}
p{margin:0;text-wrap:pretty}
figure,blockquote,dl,dd,ol,ul{margin:0;padding:0}
figure{min-width:0}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0;border-top:1px solid var(--rule)}
/* 2b — three tiers, so the page has a cadence instead of one padding value:
   --air for the sections that carry an argument, plain for ordinary sections,
   --tight for scannable indexes that do not need contemplation space. */
.section--air{padding-top:calc(var(--section-y) * 1.42);padding-bottom:calc(var(--section-y) * 1.42)}
.section--tight{padding-top:calc(var(--section-y) * .78);padding-bottom:calc(var(--section-y) * .78)}
.section--alt{background:var(--paper-2)}
.section--loden{background:var(--loden);border-top-color:var(--rule-dark)}
.section--loden h2{color:var(--ink-on-loden-bright)}
.section--loden p{color:var(--ink-on-loden)}
.section--loden .lede{color:var(--ink-on-loden)}

.head-row .lede{margin-top:16px}

/* header CTA as a plain link (no button in the navigation) */
.nav-cta-link{
  font:500 13px var(--text);color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule-strong);padding-bottom:2px;flex:none;
}
.nav-cta-link:hover{border-bottom-color:var(--green);color:var(--green)}
.nav-cta-link:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* 8b — reveal on scroll, one section at a time. The hidden state is only ever
   applied by reveal.js, so the page is fully visible without JavaScript. */
.rv{opacity:0;transform:translateY(8px)}
.rv--in{opacity:1;transform:none;transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* eyebrow label */
.eyebrow{
  font:500 10.5px/1.4 var(--text);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-muted);
  margin:0 0 26px;
}
.section--loden .eyebrow{color:var(--green-on-loden)}

/* pretty prevents last-line orphans; hyphens:none keeps fund vocabulary whole */
.lede{
  font-size:17px;line-height:1.62;color:var(--ink-body);margin-top:18px;max-width:66ch;
  text-wrap:pretty;hyphens:none;
}

/* ---------- shared utilities ----------
   Each of these replaced an inline declaration repeated across several pages. */
.more{margin-top:26px}                       /* the onward link that closes a section */
/* placeholder for an asset that is not yet produced — deliberately loud, so it
   can never be mistaken for finished design in a review */
/* ── the application view ──────────────────────────────────────────
   Authored at 1180px and scaled down, so it reads as an impression of the
   product at desktop scale rather than a table to be read. */
/* ── the application view ──────────────────────────────────────────
   An operations overview in the site's own sand and green, laid out to a
   laptop's proportions. Sand throughout; no colour outside the tokens. */
.trust__shot{align-self:center;justify-self:end;width:96%;max-width:600px}

/* the laptop: a bezel, a screen and a base, all in the page's own inks */
.laptop{width:100%}
.laptop__screen{margin:0 4%}
/* the lid: a thin silver frame around a black bezel — the black is what makes it
   read as a screen rather than a drawing of one */
.laptop__screen{
  position:relative;border-radius:13px;padding:3px;
  background:linear-gradient(166deg,#e6e3dd 0%,#d2cfc8 42%,#c0bdb6 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(120,117,110,.5);
}
.laptop__bezel{
  position:relative;border-radius:11px;
  background:#0e100f;
  padding:10px 8px 20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.laptop__bezel::before{
  content:"";position:absolute;left:50%;top:4px;transform:translateX(-50%);
  width:3px;height:3px;border-radius:50%;background:#2b2f2c;
}
.laptop__bezel::after{
  content:"";position:absolute;left:50%;bottom:7px;transform:translateX(-50%);
  width:54px;height:4px;border-radius:2px;background:rgba(250,249,245,.11);
}
/* the base: wider than the lid, flat, with the hinge notch */
.laptop__base{
  position:relative;height:11px;width:100%;
  background:linear-gradient(180deg,#e2dfd8 0%,#cfccc5 34%,#b6b3ac 74%,#9d9a94 100%);
  border-radius:0 0 14px 14px;
  clip-path:inset(0 round 0 0 14px 14px);
  box-shadow:0 16px 26px -16px rgba(16,21,18,.42);
}
.laptop__base span{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:11%;height:4px;border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,rgba(16,21,18,.24),rgba(16,21,18,.04));
}

/* the screen: authored at 1180x738 and scaled to the bezel, so it reads as a
   screenshot rather than a legible table. --shot-s is measured in nav.js
   because scale() needs a unitless number. */
.shot{
  position:relative;overflow:hidden;
  background:var(--paper);aspect-ratio:760/475;
}
.shot__inner{
  position:absolute;top:0;left:0;width:760px;height:475px;
  display:flex;flex-direction:column;
  transform:scale(var(--shot-s, 1));transform-origin:top left;
}
.shot__chrome{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:12px 20px;border-bottom:1px solid var(--rule);background:transparent;
}
.shot__brand{display:flex;align-items:center;gap:9px;flex:none}
.shot__brand svg{height:30px;width:auto;display:block;flex:none}
.shot__word{
  font:600 19px/1 var(--display);letter-spacing:-.008em;color:var(--ink);white-space:nowrap;
}
.shot__word span{color:var(--green)}
.shot__tools{display:flex;align-items:center;gap:10px;color:var(--ink-faint);margin-left:auto}
.shot__tools svg{width:15px;height:15px;display:block}
.shot__tools em{
  font:500 8.5px/1 var(--text);font-style:normal;letter-spacing:.06em;color:var(--ink-body);
  border:1px solid var(--rule-strong);border-radius:50%;
  width:20px;height:20px;display:flex;align-items:center;justify-content:center;
}
.shot__cols{display:flex;flex:1;min-height:0}
.shot__main{flex:1;min-width:0}
.shot__main{background:var(--paper)}
/* the AI boundary, which is this section's whole argument: AI prepares, a named
   person decides, the platform executes. Abstract either side, legible in the
   middle, with the audit trail running underneath. */
.shot__main{display:flex;flex-direction:column}
.shot__zones{display:grid;grid-template-columns:1fr 1.42fr 1fr;flex:1;min-height:0}
.shot__zone{
  position:relative;padding:24px 20px;display:flex;flex-direction:column;
}
/* a gradient rule between zones rather than a border, in the mark's own run */
.shot__zone + .shot__zone::before{
  content:"";position:absolute;left:0;top:20px;bottom:20px;width:1px;
  background:linear-gradient(180deg,rgba(207,202,187,0),#cfcabb 22%,#cfcabb 78%,rgba(207,202,187,0));
}
.shot__zone--human{background:var(--green-tint)}
.shot p.shot__zk{
  font:600 13px/1.4 var(--text);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint);margin:0;
}
.shot__zone--human .shot__zk{color:var(--green)}
/* the abstract work: hairlines rather than blocks */
.shot__stack{flex:1;display:flex;flex-direction:column;justify-content:center;gap:15px}
.shot__bar{height:1.5px;background:var(--ink-body);display:block}
.shot p.shot__zn{font:400 13px/1.5 var(--text);color:var(--ink-body);margin:0;max-width:22ch}
.shot__decide{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px}
.shot__decide::before{
  content:"";display:block;height:2px;width:58px;
  background:linear-gradient(90deg,#a8b58c,#3f7a4a 62%,#16211a);
}
.shot__seal{display:block}
.shot__seal svg{width:34px;height:34px;display:block}
.shot__seal circle{stroke-width:1.2}
.shot__seal path{stroke-width:2}
.shot p.shot__who{
  font:400 19px/1.2 var(--display);letter-spacing:-.012em;color:var(--ink);margin:0;max-width:16ch;
}
.shot__zone--human .shot__zn{color:var(--ink-muted)}
.shot__trail{
  display:flex;align-items:center;gap:16px;
  padding:13px 20px;border-top:1px solid var(--rule);background:transparent;
}
.shot__tk{
  font:600 11px/1 var(--text);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);
  white-space:nowrap;
}
.shot__tdots{display:flex;align-items:center;gap:0;flex:1;height:3px;position:relative}
.shot__tdots i{display:none}
.shot__tdots::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#c9d2b9,#3f8043 58%,#16211a);
}

.frame__note{
  font:400 12.5px/1.6 var(--text);color:#2a78d6;
  max-width:54ch;text-align:center;padding:30px;margin:0;
}
.frame__note::before{
  content:"Image / animation to insert";display:block;
  font:600 10.5px/1.4 var(--text);letter-spacing:.26em;text-transform:uppercase;
  color:#2a78d6;margin-bottom:10px;
}
.frame:has(.frame__note){border-style:dashed;border-color:#9dc0ea;background:#f7faff}
.section--loden .frame:has(.frame__note){background:#1b2a24;border-color:#3f6591}
.section--loden .frame__note,.section--loden .frame__note::before{color:#7fb0e8}
/* the consequence clause is set in full ink against muted body copy, as the
   platform pages do — green stays for links and figures */
.consq{font-style:normal;color:var(--ink)} /* the consequence half of a step */
.subhead{                                    /* a second-level heading inside a section */
  font:400 24px/1.28 var(--display);letter-spacing:-.01em;color:var(--ink);margin:42px 0 0;
}
.emph{font-weight:500;color:var(--ink)}      /* inline emphasis in body copy */

/* ---------- buttons ---------- */
.fp-btn{
  display:inline-flex;align-items:center;gap:12px;
  font:600 10.5px var(--text);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--loden);
  padding:13px 24px;
  border:1px solid var(--loden);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.fp-btn:hover{background:#0e1712;border-color:#0e1712;color:var(--paper)}
.btn__arrow{font-size:12px;letter-spacing:0;line-height:1}
/* the arrow on a solid loden button: the paper green fails on it at 2.59:1 */
.fp-btn:not(.btn--outline) .btn__arrow{color:var(--green-on-loden)}
.site-foot .fp-btn .btn__arrow,.section--loden .fp-btn:not(.btn--outline) .btn__arrow{color:var(--green)}

/* C — the outlined field, for the one CTA on a page that is not its close.
   Same hairline language as the solution index, the step rail and the footer. */
.btn--outline{background:transparent;color:var(--ink);border-color:var(--loden)}
.btn--outline:hover{background:var(--loden);border-color:var(--loden);color:var(--paper)}
.btn--outline .btn__arrow{color:var(--green)}
.btn--outline:hover .btn__arrow{color:var(--green-on-loden)}

/* both variants inverted on the loden ground */
.section--loden .fp-btn,.site-foot .fp-btn{background:var(--paper);border-color:var(--paper);color:var(--loden)}
.section--loden .fp-btn:hover,.site-foot .fp-btn:hover{background:#fff;border-color:#fff;color:var(--loden)}
.section--loden .btn--outline{background:transparent;border-color:#6d7a69;color:var(--paper)}
.section--loden .btn--outline:hover{background:var(--paper);border-color:var(--paper);color:var(--loden)}
.section--loden .btn--outline .btn__arrow{color:var(--green-on-loden)}

.btn--sm{padding:10px 17px;font-size:9.5px;letter-spacing:.16em}
.link{
  font:500 13.5px var(--text);
  color:var(--ink);
  border-bottom:1px solid #b5afa2;
  padding-bottom:3px;
}
.link:hover{border-bottom-color:var(--green)}
.link-arrow{font:500 13.5px var(--text);color:var(--green)}
.link-arrow:hover{color:var(--ink)}
/* On loden the link keeps one unambiguous colour — a gradient inside the words
   would cost the hover state its meaning. The gradient goes under it instead,
   drawn on hover, using the same sage-to-green run as the rules elsewhere. */
.link-arrow--on-loden{color:var(--green-on-loden)}
.link-arrow--on-loden:hover{color:var(--ink-on-loden)}
@media (prefers-reduced-motion:reduce){
  }

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
}

.field--trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--paper);color:var(--ink);
  font:500 13px var(--text);text-decoration:none;
  padding:12px 18px;border:1px solid var(--rule);
}
.skip-link:focus{left:var(--gutter);top:10px}
main{display:block}
/* current section in the header */
.site-nav [aria-current]{color:var(--ink)}
.site-nav > [aria-current]::after,
.site-nav .fp-nav-item[data-current] > a::after{
  content:"";display:block;height:1px;background:var(--green);
  margin-top:5px;
}

/* ---------- header ---------- */
:root{--headh:85px;--headh-sm:67px}
html{scroll-padding-top:calc(var(--headh) + 12px);overflow-x:clip}
body{overflow-x:clip}
.site-head{
  display:flex;align-items:center;gap:30px;
  padding:26px var(--gutter);
  max-width:var(--max);margin:0 auto;
  position:sticky;top:0;z-index:20;
  transition:padding .32s cubic-bezier(.4,0,.2,1);
}
/* full-bleed backdrop, since the bar itself is width-capped.
   At the top of the page it is opaque paper with no rule; once scrolled it
   becomes translucent, blurs what passes under it, and draws its hairline. */
.site-head::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;
  width:var(--vw);transform:translateX(-50%);
  background:var(--paper);
  border-bottom:1px solid transparent;
  z-index:-1;
  transition:background .32s cubic-bezier(.4,0,.2,1),
             border-color .32s cubic-bezier(.4,0,.2,1),
             backdrop-filter .32s cubic-bezier(.4,0,.2,1);
}
.site-head.is-scrolled{padding-top:17px;padding-bottom:17px}
.site-head.is-scrolled::before{
  background:rgba(250,249,245,.72);
  border-bottom-color:var(--rule);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-head.is-scrolled::before{background:rgba(250,249,245,.97)}
}
@media (prefers-reduced-motion:reduce){
  .site-head,.site-head::before{transition:none}
}
.site-head__brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.site-head__mark{height:32px;width:auto;display:block}
.site-head__word{
  font:600 21px/1 var(--display);letter-spacing:-.008em;color:var(--ink);
  white-space:nowrap;
}
.site-head__word span{color:var(--green)}
.site-head__brand:hover .site-head__word span{color:var(--ink)}
.site-head__brand:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.site-nav{display:flex;gap:26px;font:500 13px var(--text);color:var(--ink-body)}
@media (max-width:1100px){
  .stat__n{font-size:46px}
  .site-head{gap:22px}
  .site-head__mark{height:28px}
  .site-head__word{font-size:19px}
  :root{--headh:81px;--headh-sm:63px}
  .site-nav{gap:20px}
  .util{font-size:12px}
}

/* ---------- navigation menus ----------
   A senior fund operations buyer arrives knowing their institution type, not
   our page names. The menus put both taxonomies one hover away, so nobody has
   to guess which top-level label hides their solution. Hover opens them for
   the mouse; focus and click open them for keyboard and touch. */
.fp-nav-item{position:relative;display:flex;align-items:center}
.fp-nav-item > a{display:inline-flex;align-items:center;gap:6px}
.nav-item__chev{
  width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-1px);opacity:.5;transition:opacity .2s ease;
}
.fp-nav-item:hover .nav-item__chev,.fp-nav-item.is-open .nav-item__chev{opacity:1}

.nav-menu{
  position:absolute;top:100%;left:-24px;
  margin-top:26px;
  background:var(--paper);border:1px solid var(--rule);
  box-shadow:0 18px 40px -26px rgba(16,21,18,.22);
  padding:20px 22px 8px;z-index:20;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.fp-nav-item:hover .nav-menu,.fp-nav-item:focus-within .nav-menu,.fp-nav-item.is-open .nav-menu{
  opacity:1;visibility:visible;transform:none;
}
/* the gap between the bar and the panel would otherwise break the hover */
.nav-menu::before{content:"";position:absolute;left:0;right:0;top:-26px;height:26px}

/* one column: each panel is only as wide as its longest label */
.nav-menu--platform{width:246px}
.nav-menu--solutions{width:296px}

.nav-menu--why{width:284px}
.nav-menu--company{width:212px}
/* the last two open leftward from their own trigger, so they cannot reach past the gutter */
.nav-menu--why,.nav-menu--company{left:auto;right:-24px}

.nav-menu__h{
  font:600 9.5px/1.4 var(--text);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 14px;
}
.nav-menu__h--hidden{visibility:hidden}
.nav-menu a.fp-nav-link{display:block;text-decoration:none;padding:8px 0}
.nav-menu a.fp-nav-link:first-of-type{padding-top:0}
.nav-menu a.fp-nav-link strong{
  display:block;font:500 13.5px/1.4 var(--text);color:var(--ink);font-weight:500;
  transition:color .18s ease;
}
.nav-menu a.fp-nav-link span{display:block;font:400 12px/1.5 var(--text);color:var(--ink-muted);margin-top:3px}
.nav-menu a.fp-nav-link:hover strong{color:var(--green)}
.site-head__spacer{flex:1}
.util{display:inline-flex;align-items:center;gap:6px;font:500 12.5px var(--text);color:var(--ink-muted)}
.util:hover{color:var(--ink)}
.fp-divider{width:1px;height:18px;background:var(--rule)}
.nav-toggle{display:none}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 52%;align-items:stretch}
.hero__inner{
  grid-column:1;grid-row:1;
  position:relative;z-index:1;
  padding:104px var(--gutter) 112px;
  padding-left:max(var(--gutter), calc(var(--vw) / 2 - (var(--max) / 2)));
}
.hero__inner > *{max-width:540px}
.hero__media{grid-column:1 / -1;grid-row:1;position:relative;overflow:hidden}
.hero__media img{
  position:absolute;top:0;bottom:0;left:0;right:auto;
  width:100%;height:100%;
  object-fit:cover;object-position:46% 40%;
  filter:saturate(.52) contrast(.98) brightness(1.02);
  animation:heroPan 30s ease-in-out infinite alternate;
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,
    var(--paper) 0%, var(--paper) 44%,
    rgba(250,249,245,.99) 50%, rgba(250,249,245,.94) 57%,
    rgba(250,249,245,.6) 64%, rgba(250,249,245,.22) 73%,
    rgba(250,249,245,.08) 86%, rgba(250,249,245,.04) 100%);
}
@keyframes heroPan{
  from{transform:translateX(126px) scale(1.12)}
  to{transform:translateX(126px) scale(1.15)}
}
/* the six tools, named over the darkened half of the hero image */
.hero__tools{
  /* sized from its own content so the left and right insets read as one margin;
     right edge on the content column, first row on the headline's first line */
  grid-column:2;grid-row:1;align-self:start;justify-self:end;
  position:relative;z-index:2;
  width:max-content;max-width:268px;
  margin-top:131px;
  margin-right:max(var(--gutter), calc(var(--vw) / 2 - (var(--max) / 2)));
  background:rgba(240,237,228,.92);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  border:0;
  padding:8px 20px;
}
.hero__tools ul{list-style:none;margin:0;padding:0}
.hero__tools li{
  display:flex;align-items:center;gap:12px;padding:10px 0;
  color:var(--green);
}
.hero__tools li + li{border-top:1px solid #ddd7c8}
.hero__tools li svg{flex:none}
.hero__tools li span{font:400 11.5px/1.3 var(--text);color:#3a372f;letter-spacing:.005em;white-space:nowrap}
@media (max-width:860px){.hero__tools{display:none}}
@media (max-width:1060px) and (min-width:861px){
  .hero__tools{max-width:238px;margin-top:117px;padding:8px 18px}
  .hero__tools li span{font-size:11.5px}
}

.hero__actions{display:flex;align-items:center;gap:32px;margin-top:36px;flex-wrap:wrap}
/* the hero holds two columns down to 860px — the nav breakpoint at 1040px was stacking
   it on iPad landscape and in narrow review panes, hiding the intended composition */
@media (min-width:861px) and (max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr) 40%}
  .hero__inner{padding:76px var(--gutter) 84px;padding-left:max(var(--gutter), calc(var(--vw) / 2 - (var(--max) / 2)))}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero__inner{grid-area:2/1;padding:44px var(--gutter) 56px}
  .hero__media{grid-area:1/1;height:280px}
  .hero__media::after{background:linear-gradient(180deg,rgba(250,249,245,0) 40%,rgba(250,249,245,.9) 100%)}
}

/* ---------- clients + scale band ----------
   Who runs on FundProcess and at what scale are one argument, so they share a
   band, a label and a single rule. On paper rather than a tint: a coloured
   strip behind a client list reads as an advertisement. The marks are one
   neutral ink so eight brand palettes read as a register, and the figures
   carry the green accent so the block builds from quiet to loud. */
.clients{background:var(--paper)}
.clients__inner{
  padding-top:34px;padding-bottom:58px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.clients__label{
  font:500 9.5px/1.5 var(--text);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 20px;
}
/* An even rhythm rather than space-between: justified logos take their spacing
   from the marks' own widths, which is what makes a proof strip read as a slide.
   The eight marks sum to 594px, so the gap is derived from the room actually
   left over — one line wherever it fits, a deliberate 4+4 when it cannot. */
/* the band carries a heading on the Company page, where it is a section rather
   than a proof strip under the hero */
.clients__h{
  font:400 28px/1.24 var(--display);letter-spacing:-.014em;color:var(--ink);
  margin:0 0 34px;max-width:36ch;text-wrap:balance;
}
@media (max-width:820px){
  .clients__h{font-size:23px}
}

.logos__row{
  display:flex;align-items:center;justify-content:flex-start;
  gap:clamp(18px, calc((100% - 594px) / 7), 44px);
  flex-wrap:nowrap;min-width:0;
}
@media (max-width:820px){
  .logos__row{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:26px 20px;justify-items:start;align-items:center;
  }
}
@media (max-width:520px){
  .logos__row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Sopiad and GlobalNET were the two that read well: desaturated to grey but
   keeping their own ink and openness, rather than crushed to solid black.
   That treatment now governs all eight, so the row reads as one line. */
/* The marks ship pre-tinted to --ink-muted rather than filtered at runtime, and
   set the way a typographer sets a row of wordmarks. Each is cropped to its own
   ink, scaled so its letters fill one 15px band — x-height on a lowercase mark,
   cap height on a capitalised one — then composed onto a common 22px box with
   EVERY BASELINE PINNED AT THE SAME y, so the letters sit on one line and
   descenders hang below it. Deynecourt (.73), GlobalNET and Sopiad (.94) and the
   L4B monogram (.86) are trimmed by eye against the row, which measurement alone
   cannot judge. Ink is one weight for all eight, trimmed at most 15%. */
.logos__row img{display:block;transition:opacity .22s ease}
.logos__row:hover img{opacity:.45}
.logos__row img:hover{opacity:1}

/* qualifies the reader under the proof band without moving the Solutions
   chapter out of its place in the argument */
.clients__who{
  display:flex;justify-content:space-between;align-items:baseline;gap:28px;flex-wrap:wrap;
  margin:34px 0 0;padding-top:20px;border-top:1px solid var(--rule);
}
.clients__who p{
  font:400 13.5px/1.65 var(--text);color:var(--ink-muted);margin:0;max-width:74ch;
}
.clients__who a{white-space:nowrap}

.stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;
  margin-top:48px;
}
.stats > div{display:flex;flex-direction:column}
.stat__n{
  font:400 54px/1 var(--display);letter-spacing:-.026em;color:var(--green);
  margin:0;font-variant-numeric:tabular-nums;
}
/* label above the value, each figure on its own rule — the way a financial
   table is set, so the category is read before the number */
.stats--ruled{gap:26px}
.stats--ruled > div{border-top:1px solid var(--ink);padding-top:14px}
.stats--ruled .stat__k{
  font:500 9.5px/1.4 var(--text);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 12px;
}
.stats--ruled .stat__n{font-size:40px}
.stats--ruled .stat__l{margin-top:10px;min-height:0;max-width:24ch;font-size:12.5px}
.stat__l{
  font:400 13px/1.5 var(--text);color:var(--ink-muted);
  margin:16px 0 0;max-width:21ch;min-height:39px;
}

/* ---------- generic grids ---------- */
.grid{display:grid;gap:0}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gap-md{gap:16px}
.gap-lg{gap:26px}

.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:44px}

/* chain of stages (03) */
/* three the platform prepares, one a person signs — the split is the argument,
   so it is drawn once at group level rather than hidden in four equal boxes */
/* the benefit figure reads as part of the claim, not as a pull-quote under it */
.claim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,270px);gap:0 56px;align-items:start}
.claim__fig{border-top:1px solid var(--ink);padding-top:16px}
.claim__n{
  font:400 44px/1 var(--display);letter-spacing:-.026em;color:var(--green);
  margin:0;font-variant-numeric:tabular-nums;
}
.claim__l{font:400 12.5px/1.5 var(--text);color:var(--ink-muted);margin:12px 0 0}
@media (max-width:820px){
  .claim{grid-template-columns:1fr;gap:26px}
  .claim__fig{max-width:none}
}

.chain{
  display:grid;grid-template-columns:minmax(0,3fr) 34px minmax(0,1.12fr);
  gap:0;align-items:start;margin-top:var(--gap-block);
}
.chain__tag{
  font:500 9.5px/1.4 var(--text);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-muted);margin:0 0 14px;
}
.chain__group--human .chain__tag{color:var(--green)}
.chain__bar{height:2px}
.chain__bar--auto{background:linear-gradient(90deg,#c9d2b9,#7fa075)}
.chain__bar--human{background:linear-gradient(90deg,#3f7a4a,var(--loden))}
.chain__three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.chain__group--human .chain__three{grid-template-columns:minmax(0,1fr)}
.chain__step{padding:20px 24px 0 0}
.chain__three .chain__step + .chain__step{border-left:1px solid var(--rule);padding-left:24px}
.chain__group--human .chain__step{padding-right:0}
.chain__step h3{font:400 20px/1.22 var(--display);letter-spacing:-.008em;margin:0 0 8px}
.chain__arrow{
  align-self:start;justify-self:center;
  font:400 15px var(--text);color:var(--green);padding-top:44px;
}
.chain__body{font:400 13px/1.6 var(--text);color:var(--ink-muted);margin:0}
.chain__group--human .chain__body{color:var(--ink)}

/* stage strip (04) */
.stages{
  position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;align-items:stretch;margin-top:var(--gap-block);padding-bottom:16px;
}
.stages::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#c3cdb0,#7fa075 45%,var(--green));
}
.stages .fp-arrow{display:none}
.stage{border:0;background:transparent;padding:0 26px 26px 0}
.stages .stage + .stage,.stages .fp-arrow + .stage{border-left:1px solid var(--rule);padding-left:26px}
.stages .stage:last-of-type{padding-right:0}
.stage h3{font:400 22px/1.2 var(--display);letter-spacing:-.01em;margin:0}
.stage__k{font:500 9.5px/1.4 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 12px}
.fp-arrow{font:400 16px var(--text);color:var(--ink-muted)}
/* the band hangs from the rule the three stages already close on, rather than
   introducing a second rule or a dark fill of its own */
.ai-band{
  margin:16px 0 0;padding:0;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px 28px;flex-wrap:wrap;
}
.ai-band p{
  margin:0;font:400 13px/1.6 var(--text);color:var(--ink-body);max-width:64ch;
}
.ai-band strong{color:var(--ink);font-weight:500}

/* designers (04) */
.designers{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 44px;
  margin-top:44px;border-top:1px solid var(--rule);padding-top:40px;
}
.designer{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;align-items:start}

/* A/B on the page for review — the proposed treatment: borderless field, larger
   mark, the Studio page's own icon set. Remove the losing block after the call. */
.designers--tiles{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:38px 44px;margin-top:var(--gap-block);
  border-top:1px solid var(--rule);padding-top:40px;
}
/* the borderless field holds three across further down than the bordered tile did */
@media (max-width:820px){
  .designers--tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 30px}
}
.designers--tiles .designer{grid-template-columns:54px minmax(0,1fr);gap:14px}
.designers--tiles .designer__icon{
  width:54px;height:54px;border:0;border-radius:8px;background:var(--paper-3);
}
.designers--tiles .designer > div{padding-top:4px}
@media (max-width:640px){
  .designers--tiles .designer{grid-template-columns:54px minmax(0,1fr);gap:14px}
  .designers--tiles .designer__icon{width:56px;height:56px}
}
.designer__icon{
  width:56px;height:56px;flex:none;
  background:var(--paper-3);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
}
.designer__icon svg{display:block}
.designer h3{font:400 15.5px/1.3 var(--display);letter-spacing:-.006em;color:var(--ink);margin:0 0 6px}
.designer p{font:400 13px/1.6 var(--text);color:var(--ink-muted);margin:0;max-width:32ch}

/* ---------- the operating chain, drawn (02) ----------
   A schematic, not a screenshot: everything a fund operation receives enters
   on the left, the Financial Core System does the work, everything the
   operation owes anyone leaves on the right.

   Geometry is authored once in a locked 1040x440 box. The connective curves
   live in an SVG on that exact viewBox and the labels are positioned as
   percentages of the same box, so lines and labels stay tangent at any width
   without a single magic number in two places. Labels are live HTML, not SVG
   text, so they keep the webfont and stay editable.

   The wires carry the same gold-to-green ramp as the mark: raw inputs at the
   perimeter, prepared work at the core. A signal travels each wire on a long
   offset loop so the diagram reads as something running, not something
   printed. */
.chainmap{position:relative;width:100%;aspect-ratio:1040/336;margin-top:34px}
.chainmap__wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.chainmap__wires path{vector-effect:non-scaling-stroke}
.chainmap__flow{
  stroke-dasharray:16 320;stroke-linecap:round;
  animation:cmFlow 7s linear infinite;
}
@keyframes cmFlow{from{stroke-dashoffset:336}to{stroke-dashoffset:0}}

.chainmap__node{
  position:absolute;top:0;width:20.2%;
  display:flex;align-items:center;gap:10px;
  transform:translateY(-50%);
}
.chainmap__node--in{left:0;justify-content:flex-end;text-align:right}
.chainmap__node--out{right:0}
.chainmap__node svg{flex:none}
.chainmap__node p{
  font:500 10.5px/1.45 var(--text);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);margin:0;
}

/* the bloom is drawn behind the disc, so the core sits in light rather than
   inside a hard outline */
.chainmap__core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:17.4%;aspect-ratio:1;border-radius:50%;
  display:grid;grid-template-rows:auto auto;align-content:center;justify-items:center;
  gap:9px;
  text-align:center;box-sizing:border-box;padding:0 8px;
  background:
    radial-gradient(circle at 50% 42%, #ffffff 0%, var(--paper) 58%, rgba(250,249,245,.86) 100%);
  box-shadow:
    0 0 0 1px rgba(138,109,31,.34),
    0 0 0 11px rgba(250,249,245,.72),
    0 0 44px 20px rgba(36,109,30,.09),
    0 20px 44px -28px rgba(138,109,31,.34);
}
.chainmap__core img{width:58%;height:auto;display:block;margin:0 0 0 -4%}
.chainmap__core p{
  font:500 9.5px/1.6 var(--text);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin:0;
}
.chainmap__foot{
  font:400 13px/1.6 var(--text);color:var(--ink-muted);
  margin:26px 0 0;max-width:70ch;
;text-wrap:balance}


/* Below the point where a 210px label column stops holding two words, the
   diagram becomes what it always was underneath: two lists and a core. */
@media (max-width:900px){
  .chainmap{aspect-ratio:auto;display:grid;grid-template-columns:1fr;gap:0;margin-top:34px}
  .chainmap__wires{display:none}
  .chainmap__node,.chainmap__core{position:static;transform:none;width:auto}
  .chainmap__node{
    justify-content:flex-start;text-align:left;
    border-top:1px solid var(--rule);padding:13px 0;
  }
  .chainmap__core{
    width:100%;aspect-ratio:auto;border-radius:0;
    border:1px solid rgba(138,109,31,.34);
    background:linear-gradient(100deg,#fffdf8 0%,var(--paper) 60%,rgba(36,109,30,.05) 100%);
    box-shadow:none;
    flex-direction:row;gap:14px;justify-content:flex-start;padding:20px 22px;margin:8px 0;
  }
  .chainmap__core img{width:auto;height:26px;margin:0}
  .chainmap__core p{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .chainmap__flow{animation:none;stroke-dasharray:none;opacity:.5}
}

/* solution cards (05) — ruled fields rather than boxes. The border-and-fill
   treatment made six equal rectangles; a hairline plus air reads as an index,
   which is the register the rest of the page uses. */
.cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin-top:34px;
  border-top:1px solid var(--rule);
}
.card{
  display:block;padding:22px 28px 24px 0;
  border-bottom:1px solid var(--rule);
}
.card + .card{border-left:1px solid var(--rule);padding-left:28px}
.cards .card:nth-child(3n+1){border-left:0;padding-left:0}
.card:hover{background:transparent}
.card__icon{display:block;line-height:0;margin-bottom:12px;opacity:.9}
.card:hover .card__icon{opacity:1}
.card h3{
  font:400 19px/1.28 var(--display);color:var(--ink);
  margin:0 0 7px;letter-spacing:-.008em;
}
.card__arrow{color:var(--green);font-family:var(--text);font-size:15px}
.card p{font:400 13px/1.55 var(--text);color:var(--ink-muted);margin:0;max-width:26ch}

/* quotes (06) */
/* four voices of equal weight, but ruled columns rather than four cards —
   the border box was the only thing making this read as a slide */
/* Four across with the full quotes, so the only lever on the measure is total
   width: the band steps outside the 1120 column to the page gutters, and the
   internal padding comes down. At 1440 that is ~40 characters a line instead of
   the 20 the boxed column allowed. */
.quotes{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  margin-top:var(--gap-block);border-top:1px solid var(--ink);
  margin-left:calc(50% - var(--vw) / 2 + var(--gutter));
  margin-right:calc(50% - var(--vw) / 2 + var(--gutter));
}
.quote{
  border:0;background:transparent;padding:22px 18px 4px 0;margin:0;
  display:flex;flex-direction:column;gap:16px;
}
.quote + .quote{border-left:1px solid var(--rule);padding-left:18px}
.quotes .quote:last-child{padding-right:0}
.quote__logo{height:28px;display:flex;align-items:center}
/* every client mark is pre-normalised onto one 3:1 canvas with its ink trimmed
   and scaled to equal optical area, so a single height renders them all at
   matching visual weight — max-height alone cannot normalise mixed aspects. */
.quote__logo img{height:28px;width:104px;object-fit:contain;object-position:left center;opacity:.9}
.quote blockquote{
  margin:0;flex:1;
  font:400 15px/1.52 var(--display);color:var(--ink);
  letter-spacing:-.004em;text-wrap:pretty;hyphens:none;
}
.quote figcaption{padding-top:4px}
.quote__firm{display:block;font:500 11.5px/1.35 var(--text);color:var(--ink)}
.quote__type{letter-spacing:.01em}
.quote__type{display:block;margin-top:3px;font:400 11px/1.35 var(--text);color:var(--ink-muted)}
/* the aggregate figures close the section on their own ruled row */
.quotes__foot--row{
  display:flex;justify-content:space-between;align-items:baseline;gap:28px;flex-wrap:wrap;
}
.quotes__foot--row p{margin:0}
.quotes__foot{
  font:400 13px/1.5 var(--text);color:var(--ink-muted);
  margin-top:26px;border-top:1px solid var(--rule);padding-top:20px;
}
/* Four across at every width, as briefed. Below the bleed threshold the band
   loses its extra room, so the type and padding tighten instead of the grid
   folding — the copy stays whole and the four voices stay on one line. */
@media (max-width:1100px){
  .quotes{margin-left:0;margin-right:0}
  .quote{padding-right:13px}
  .quote + .quote{padding-left:13px}
  .quote blockquote{font-size:13.5px;line-height:1.5;letter-spacing:0}
  .quote__logo,.quote__logo img{height:24px}
  .quote__logo img{width:88px}
}
@media (max-width:820px){
  }
@media (max-width:620px){
  .quotes{grid-template-columns:1fr}
  .quotes .quote{border-left:0 !important;padding-left:0 !important;padding-right:0}
  .quotes .quote + .quote{border-top:1px solid var(--rule);margin-top:22px;padding-top:22px}
}

/* steps (07) — the wireframe's rule-over-number treatment, with the arrows
   that make the four read as a sequence rather than four parallel options */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin-top:var(--gap-block)}
/* each step takes the next slice of the mark's gradient, so the four read as one
   movement that darkens towards production — no arrows, no drawn rail */
.step{position:relative;border-top:0;padding-top:20px}
.step::after{content:"";position:absolute;top:0;left:0;right:0;height:2px}
.step:nth-of-type(1)::after{background:linear-gradient(90deg,#c9d2b9,#a8b58c)}
.step:nth-of-type(2)::after{background:linear-gradient(90deg,#a8b58c,#7fa075)}
.step:nth-of-type(3)::after{background:linear-gradient(90deg,#7fa075,#3f7a4a)}
.step:nth-of-type(4)::after{background:linear-gradient(90deg,#3f7a4a,var(--loden))}
.step + .step::before{display:none}
.step p.step__n{
  font:500 10.5px/1.4 var(--text);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 14px;
}
.step:last-of-type p.step__n{color:var(--green)}
.step h3{font:400 24px/1.14 var(--display);letter-spacing:-.012em;margin:0 0 10px}
.step p:not(.step__n){font:400 13px/1.6 var(--text);color:var(--ink-body);margin:0}
.steps__arrow{display:none}
/* the supporting line and the onward link sit on one ruled row */
.steps__foot{
  display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;
  margin-top:30px;border-top:1px solid var(--rule);padding-top:20px;
}
.steps__foot p{font:400 13px/1.55 var(--text);color:var(--ink-muted);margin:0}

/* trust chain (08) */
.trust{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.trustchips{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:32px}
.chip-group{display:inline-flex;align-items:center;gap:10px}
.chip{
  background:var(--loden-raised);border:1px solid var(--rule-dark);
  padding:12px 16px;font:500 12.5px var(--text);color:#fff;
}
.chip-arrow{color:var(--ink-on-loden-muted)}
.frame{
  border:1px solid var(--rule-strong);background:var(--paper-3);
  min-height:240px;display:flex;align-items:center;justify-content:center;
}
.section--loden .frame{border-color:var(--rule-dark);background:var(--loden-raised)}

/* recognition, not explanation: six names on hairlines, two columns, no descriptions.
   The Solutions section carries what each one covers. */
.instl{
  display:grid;grid-template-columns:1fr 1fr;gap:0 44px;
  margin-top:var(--gap-block);border-top:1px solid var(--ink);
}
.instl__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:15px 0 16px;border-bottom:1px solid var(--rule);
  text-decoration:none;
}
.instl__row{font:400 19px/1.35 var(--display);letter-spacing:-.008em;color:var(--ink);transition:color .18s ease}
.instl__row:hover{color:var(--green)}

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

/* ---------- legal documents ---------- */
.legaldoc{max-width:74ch}
.legaldoc h2{font:400 26px/1.2 var(--display);letter-spacing:-.012em;color:var(--ink);margin:52px 0 14px}
.legaldoc h2:first-of-type{margin-top:34px}
.legaldoc p{font:400 15px/1.78 var(--text);color:var(--ink-body);margin:0 0 16px}
.legaldoc ol,.legaldoc ul{margin:0 0 16px;padding-left:20px}
.legaldoc li{font:400 15px/1.78 var(--text);color:var(--ink-body);margin:0 0 8px}
.legaldoc strong{font-weight:600;color:var(--ink)}
.legaldoc em{font-style:italic}
.legaldoc a{color:var(--green)}
.legaldoc p.legaldoc__meta{
  font:500 10.5px/1.4 var(--text);letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 26px;
}
.legaldoc table{border-collapse:collapse;width:100%;margin:0 0 18px}
.legaldoc th{
  font:500 10.5px/1.4 var(--text);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);text-align:left;padding:0 18px 10px 0;border-bottom:1px solid var(--ink);
}
.legaldoc td{font:400 14px/1.7 var(--text);color:var(--ink-body);padding:14px 18px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.legaldoc td:last-child,.legaldoc th:last-child{padding-right:0}

/* editorial note for the FundProcess team — never published as-is */
.propose{margin-top:64px;border:1px dashed #9dc0ea;background:#f7faff;padding:30px 32px 26px}
.propose p.propose__k{
  font:600 10.5px/1.4 var(--text);letter-spacing:.26em;text-transform:uppercase;
  color:#2a78d6;margin:0 0 14px;
}
.propose h3{font:400 20px/1.25 var(--display);color:var(--ink);margin:0 0 10px}
.propose p.propose__lead{font:400 13px/1.68 var(--text);color:#24486e;margin:0}
/* each point paired with its recommendation: number, the issue, then what to do */
.propose__list{margin-top:22px;border-top:1px solid #bcd6f2}
.propose__row{
  display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,1.1fr);gap:0 30px;
  align-items:start;padding:18px 0 19px;border-bottom:1px solid #bcd6f2;
}
.propose p.propose__n{
  font:500 11px/1.6 var(--text);letter-spacing:.06em;color:#7ba4d4;margin:0;
}
.propose h4{
  font:500 13.5px/1.45 var(--text);color:#12385e;margin:0 0 6px;
}
.propose__row > div > p{font:400 13px/1.68 var(--text);color:#24486e;margin:0}
.propose__rec{border-left:1px solid #bcd6f2;padding-left:26px}
.propose p.propose__rk{
  font:600 9.5px/1.4 var(--text);letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 6px;color:#2a78d6;
}
.propose__rec--applied p.propose__rk{color:#1f7a3a}
.propose__rec--decision p.propose__rk{color:#8a5610}
.propose__rec--drafted p.propose__rk{color:#8a5610}
.propose__rec--closed p.propose__rk{color:#546779}
.propose__rec p{font:400 13px/1.68 var(--text);color:#24486e;margin:0}
.propose strong{font-weight:600;color:#12385e}
@media (max-width:820px){
  .propose__row{grid-template-columns:26px minmax(0,1fr);gap:0 16px}
  .propose__rec{grid-column:2;border-left:0;padding-left:0;margin-top:14px;padding-top:14px;border-top:1px solid #bcd6f2}
}

/* post-submit confirmation, on its own row under the button */
.form__sent{flex-basis:100%;margin:12px 0 0;font:400 13px/1.6 var(--text);color:var(--green)}

/* close (09) */
.fp-close{text-align:center}
.fp-close h2{margin:0 auto;max-width:24ch}
.fp-close .lede{margin:18px auto 36px}
.close__actions{display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap}
.close__alt{font:400 13px/1.6 var(--text);color:var(--ink-muted);margin-top:22px}

.fp-breadcrumb a{color:var(--ink-muted);text-decoration:none;transition:color .18s ease}
.fp-breadcrumb a:hover{color:var(--green)}

/* the six solutions are parallel, not sequential: each page offers the other five.
   Same band, label and type as the next-step strip, so the two read as one family. */
.siblings{background:var(--paper);border-top:1px solid var(--rule)}
.siblings__inner{max-width:var(--max);margin:0 auto;padding:30px var(--gutter) 34px}
.siblings__k{
  font:500 10.5px/1.4 var(--text);letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 18px;
}
.siblings__row{display:flex;flex-wrap:wrap;gap:14px 30px}
.siblings__row a{
  display:inline-flex;align-items:baseline;gap:9px;
  font:400 18px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink);
  text-decoration:none;transition:color .18s ease;
}
.siblings__row a span{font:400 15px/1 var(--text);color:var(--green);opacity:.55;transition:opacity .18s ease,transform .22s cubic-bezier(.4,0,.2,1)}
.siblings__row a:hover{color:var(--green)}
.siblings__row a:hover span{opacity:1;transform:translateX(3px)}

/* sequential navigation: one step forward through a section, on the page's own
   grid, above the close */
.nextup{background:var(--paper);border-top:1px solid var(--rule)}
.nextup__link{
  display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:0 24px;align-items:baseline;
  max-width:var(--max);margin:0 auto;padding:30px var(--gutter) 34px;
  text-decoration:none;
}
.nextup__k{
  font:500 10.5px/1.4 var(--text);letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-faint);
}
.nextup__t{
  font:400 26px/1.16 var(--display);letter-spacing:-.012em;color:var(--ink);
  transition:color .18s ease;
}
.nextup__s{display:none}
.nextup__a{font:400 22px/1 var(--text);color:var(--green);transition:transform .2s ease}
.nextup__link:hover .nextup__t{color:var(--green)}
.nextup__link:hover .nextup__a{transform:translateX(5px)}
@media (max-width:700px){
  .nextup__link{grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;padding:24px var(--gutter) 26px}
  .nextup__k{grid-column:1 / -1}
  .nextup__t{font-size:22px}
}

.fp-nav-item.is-here > a{color:var(--ink)}
.fp-nav-item.is-here{position:relative}
.fp-nav-item.is-here::after{
  content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;background:var(--green);
}

/* review label — temporary, removed once a version is chosen */
.abmark + .partners{margin-top:6px}
.abmark{
  font:600 10.5px/1.4 var(--text);letter-spacing:.26em;text-transform:uppercase;
  color:#1f5fae;margin:var(--gap-block) 0 12px;
}


/* a closing note on a section, not a second intro */
.sectfoot{
  font:400 13.5px/1.62 var(--text);color:var(--ink-muted);
  margin:26px 0 0;max-width:70ch;text-wrap:pretty;
}

/* a heading inside a step, not a section title */

.dim{color:var(--ink-faint)}

/* a lede close under its subhead */
.lede--tight{margin-top:12px}

/* a second lede following the first */
.lede--follow{margin-top:30px}

/* the claim and the comparison side by side: the quadrant is checked while the
   claim is read, not after it */
.opts{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0 56px;
  align-items:start;
}
.opts__say .lede{max-width:34ch}
.opts .quadwrap{margin-top:6px}
@media (max-width:900px){
  .opts{grid-template-columns:1fr;gap:34px}
  .opts .quadwrap{margin-top:0}
}

/* ---------- footer ---------- */
.site-foot{background:var(--loden);color:var(--ink-on-loden);padding:48px var(--gutter) 26px}
.site-foot__inner{max-width:var(--max);margin:0 auto}
.site-foot__top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:64px;align-items:start}
.site-foot__brand{display:flex;align-items:center;gap:9px;text-decoration:none;padding-top:1px}
.site-foot__mark{height:26px;width:auto;display:block;flex:none}
.site-foot__word{
  font:600 17px/1 var(--display);letter-spacing:-.008em;color:var(--paper);
  white-space:nowrap;
}
.site-foot__word span{color:var(--green-on-loden)}

.site-foot__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 32px}

/* These must sit after the .site-foot rules, not up with the other
   breakpoints: at equal specificity the later rule wins, so declaring them
   earlier let the four-column base override them and the footer never
   collapsed - columns squeezed to 8px, labels overlapping, and the whole
   document 88px wider than the phone, which is what made mobile Safari widen
   the layout viewport and band the side of every page. */
@media (max-width:860px){
  .site-foot__top{grid-template-columns:1fr;gap:26px}
  .site-foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 30px}
}
@media (max-width:560px){
  .site-foot__cols{grid-template-columns:1fr;gap:20px}
}
.site-foot__h{
  font:600 10px/1.4 var(--text);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-on-loden-muted);margin:0 0 8px;
}
.site-foot a:not(.site-foot__brand),.site-foot p:not(.site-foot__h){font:400 12.5px/22px var(--text);color:var(--ink-on-loden);margin:0;display:block}
.site-foot a:hover{color:#fff}
.site-foot__base{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--rule-dark);margin-top:44px;padding-top:22px;
}
.site-foot__base p{font:400 11.5px/22px var(--text)}
/* the legal line runs inline and takes the room it needs — the block rule above
   is for the link columns, not for a sentence */
.site-foot .site-foot__base a:not(.site-foot__brand){display:inline}
.site-foot__base p:first-child{flex:1 1 auto;min-width:0}
.site-foot__util{display:flex !important;gap:8px}
.site-foot__util a{display:inline}
.site-foot__util span{color:var(--ink-on-loden-muted)}

/* ---------- solution pages ---------- */
.fp-breadcrumb{font:500 12px/1.4 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 20px}
.fp-breadcrumb span{color:var(--rule-strong);margin:0 6px}
.fp-breadcrumb strong{color:var(--ink);font-weight:600}

/* the same glass as the header, so the two bars read as one piece of chrome
   rather than a translucent bar sitting on a solid one */
.subnav{
  border-bottom:1px solid var(--rule-strong);
  background:rgba(250,249,245,.72);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  position:sticky;top:calc(var(--headh-sm) - 1px);z-index:3;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .subnav{background:rgba(250,249,245,.97)}
}
.subnav__inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  display:flex;gap:26px;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.subnav a{
  font:500 12.5px var(--text);color:var(--ink-muted);
  padding:14px 0;border-bottom:2px solid transparent;white-space:nowrap;
}
.subnav a:hover{color:var(--ink)}
.subnav a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--green)}

/* page hero */
.page-hero{padding-top:72px;padding-bottom:56px}
/* the trust page opens on loden: the reassurance ground carries the hero */
.hero-loden{padding-top:0;padding-bottom:0}
.hero-loden .page-hero{padding-top:64px;padding-bottom:64px}
.hero-loden .fp-breadcrumb{color:var(--ink-on-loden-muted)}
.hero-loden .fp-breadcrumb a{color:var(--ink-on-loden-muted)}
.hero-loden .fp-breadcrumb a:hover{color:var(--green-on-loden)}
.hero-loden .fp-breadcrumb span{color:#3d4a3c}
.hero-loden .fp-breadcrumb strong{color:var(--ink-on-loden)}
.hero-loden h1{color:var(--ink-on-loden-bright)}
.hero-loden .lede{color:var(--ink-on-loden)}
.hero-loden .link{color:var(--ink-on-loden);text-decoration-color:#4a5648}
.hero-loden .link:hover{color:var(--green-on-loden);text-decoration-color:var(--green-on-loden)}
.page-hero h1{font-size:44px;max-width:22ch}
.page-hero .lede{margin-top:22px;max-width:70ch}
.page-hero__actions{display:flex;align-items:center;gap:32px;margin-top:36px;flex-wrap:wrap}

/* 2×2 challenge quadrants */
/* four sand fields, as every peer set on the platform pages is — the crossed
   hairlines were the last framed grid on the solution pages */
.quad{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(4,auto);gap:14px;margin-top:var(--gap-block);
}
.quad > div{
  display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:10px;
  background:var(--paper-2);padding:24px 22px 26px;
}
/* the grid follows the item count: three across, four as 2×2, five with the last
   spanning — no per-page class */
.quad:has(> div:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto}
.quad:has(> div:nth-child(3):last-child) > div{grid-row:span 2}
.quad > div:last-child:nth-child(odd){grid-column:1 / -1}
.quad:has(> div:nth-child(3):last-child) > div:last-child{grid-column:auto}
.quad h3{font:400 16.5px/1.28 var(--display);letter-spacing:-.006em;color:var(--ink);margin:0}
.quad p{font:400 13px/1.62 var(--text);color:var(--ink-muted);margin:0}

/* three contact routes */
.routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:var(--gap-block)}
.routes > div{background:var(--paper);padding:30px 28px;display:flex;flex-direction:column}
.routes p.k{font:500 10px var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px}
.routes h2{font:400 22px/1.22 var(--display);color:var(--ink);margin:0 0 12px}
.routes p{font:400 13.5px/1.62 var(--text);color:var(--ink-muted);margin:0}
.routes .go{margin-top:auto;padding-top:22px}
@media (max-width:880px){.routes{grid-template-columns:1fr}}

/* enquiry form */
.form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 24px;margin-top:var(--gap-block);max-width:760px}
.field{display:flex;flex-direction:column;gap:8px}
.field--wide{grid-column:1 / -1}
.field label{font:500 11.5px var(--text);letter-spacing:.04em;color:var(--ink-muted)}
.field input,.field select,.field textarea{
  font:400 14px var(--text);color:var(--ink);
  background:var(--paper);border:1px solid var(--rule-strong);
  padding:12px 14px;border-radius:0;
}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.form__actions{grid-column:1 / -1;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.form__note{font:400 12.5px var(--text);color:var(--ink-faint);margin:0}
@media (max-width:640px){.form{grid-template-columns:1fr}}

/* office details */
.office{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:var(--gap-block)}
.office p.k{font:500 10px var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px}
.office address{font:400 14px/1.7 var(--text);color:var(--ink-muted);font-style:normal;margin:0}
.office .legal{font:400 12.5px/1.7 var(--text);color:var(--ink-faint);margin:0}
@media (max-width:760px){.office{grid-template-columns:1fr;gap:28px}}

/* people */

/* partners: a portrait beside the biography, one row each, divided by a hairline.
   The photograph is the container, so there is no card. */
.partners{display:grid;gap:0;margin-top:var(--gap-block);border-top:1px solid var(--ink)}
.partners article{
  display:grid;grid-template-columns:186px minmax(0,1fr);gap:40px;
  align-items:start;padding:34px 0 36px;border-bottom:1px solid var(--rule);
}
.partners img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.partner__role{
  font:500 10.5px/1.4 var(--text);letter-spacing:.24em;text-transform:uppercase;
  color:var(--green);margin:0 0 10px;
}
.partners h3{font:400 27px/1.16 var(--display);letter-spacing:-.014em;color:var(--ink);margin:0 0 14px}
.partners article > div > p:not([class]){
  font:400 15px/1.62 var(--text);color:var(--ink-body);margin:0;max-width:56ch;
}
.partner__link{margin:18px 0 0}
/* the team, as a third entry in the same rhythm — only two people are pictured,
   so this has to read as a statement rather than a caption */
.partners__team{
  display:grid;grid-template-columns:186px minmax(0,1fr);gap:40px;
  align-items:baseline;padding:34px 0 2px;
}
.partners__team .partner__role{margin:0}
.partners__team p:not([class]){
  font:400 21px/1.38 var(--display);letter-spacing:-.01em;color:var(--ink);
  margin:0;max-width:46ch;text-wrap:balance;
}
@media (max-width:700px){
  .partners__team{grid-template-columns:1fr;gap:12px;padding-top:26px}
}
@media (max-width:700px){
  .partners article{grid-template-columns:1fr;gap:22px;padding:28px 0 32px}
  .partners img{max-width:186px}
}

/* hairline-joined cards: the 1px gap over a rule ground gives shared hairlines
   rather than borders, which is the site's own language */
.people{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-top:var(--gap-block);
}
.people article{background:var(--paper);padding:0 0 24px}
.people--two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}
.people article > :not(.portrait){margin-left:24px;margin-right:24px}
.people .portrait{background:var(--paper-3);border-bottom:1px solid var(--rule);aspect-ratio:4/5;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px;font:500 8.5px var(--text);letter-spacing:.14em;color:var(--ink-decor)}
.people h3{font:400 19px/1.24 var(--display);letter-spacing:-.008em;color:var(--ink);margin:22px 24px 4px}
.people p.role{font:500 11.5px/1.4 var(--text);letter-spacing:.02em;color:var(--green);margin:0 24px 12px}
.people p.bio{font:400 12.5px/1.62 var(--text);color:var(--ink-muted);margin:0 24px}
/* credentials: a marked list, because each line is a separate verifiable fact */
.people ul.cv{list-style:none;margin:0 24px;padding:0;display:grid;gap:8px}
.people ul.cv li{
  position:relative;padding-left:14px;
  font:400 12.5px/1.55 var(--text);color:var(--ink-body);
}
.people ul.cv li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:5px;height:5px;background:var(--green);
}
img.portrait{display:block;width:100%;height:auto;object-fit:cover;border-bottom:1px solid var(--rule)}
@media (max-width:760px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.people{grid-template-columns:1fr}}

/* open roles list */
.rolelist{border-top:1px solid var(--rule);margin-top:var(--gap-block)}
.rolelist > div{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--rule)}
.rolelist h3{font:400 20px/1.2 var(--display);color:var(--brass);margin:0}
.rolelist p:not(.rolelist__note){font:400 13px var(--text);color:var(--ink-muted);margin:0}
.rolelist a{font:500 13px var(--text);color:var(--green);justify-self:end}
.rolelist--one{grid-template-columns:1fr}
/* the one open role, set out on the page rather than only behind a link */
/* job metadata as a definition list, in one panel — the convention a job
   description uses, rather than four columns of body text */
.rolefacts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin:0;background:var(--paper-2);
}
.rolefacts > div{padding:18px 22px 20px;border-top:1px solid var(--rule)}
.rolefacts > div:nth-child(-n+3){border-top:0}
.rolefacts > div:not(:nth-child(3n+1)){border-left:1px solid var(--rule)}
.rolefacts dt{
  font:500 10px/1.4 var(--text);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 7px;
}
.rolefacts dd{font:400 14px/1.5 var(--text);color:var(--ink);margin:0}
@media (max-width:700px){
  .rolefacts{grid-template-columns:1fr}
  .rolefacts > div{border-top:1px solid var(--rule)}
  .rolefacts > div:first-child{border-top:0}
  .rolefacts > div:not(:nth-child(3n+1)){border-left:0}
}
.roledetail{margin-top:38px}
.roledetail .lede{margin:0 0 30px;max-width:64ch}
.roledetail__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
.roledetail__cols > div{padding-top:18px;border-top:2px solid var(--green)}
.roledetail .k{
  font:500 10.5px/1.4 var(--text);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 12px;
}
.roledetail ul{margin:0;padding-left:17px}
.roledetail li{font:400 13.5px/1.62 var(--text);color:var(--ink-body);margin:0 0 8px}
.roledetail li:last-child{margin-bottom:0}
.roledetail__start{
  font:400 13px/1.62 var(--text);color:var(--ink-muted);
  margin:30px 0 0;padding-top:18px;border-top:1px solid var(--rule);max-width:74ch;
}
@media (max-width:700px){
  .roledetail__cols{grid-template-columns:1fr;gap:26px}
}
.rolelist__note{font:400 13.5px/1.6 var(--text);color:var(--ink-muted);margin:26px 0 0}
@media (max-width:820px){.rolelist > div{grid-template-columns:1fr;gap:8px}.rolelist a{justify-self:start;margin-top:8px}}

/* three eras */
.eras{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:22px;align-items:stretch;margin-top:var(--gap-block)}
.era{border-top:2px solid var(--rule);padding-top:20px}
.era--now{border-top-color:var(--green)}
.era p.k{font:500 10px var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px}
.era--now p.k{color:var(--green)}
.era h3{font:400 21px/1.24 var(--display);color:var(--ink);margin:0 0 10px}
.era p{font:400 13px/1.6 var(--text);color:var(--ink-muted);margin:0}
.eras__arrow{align-self:center;font:400 17px var(--text);color:var(--ink-decor)}
@media (max-width:900px){.eras{grid-template-columns:1fr;gap:26px}.eras__arrow{display:none}}

/* four metrics */
.stats--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats--4{grid-template-columns:repeat(4,minmax(0,1fr))}


/* a single gradient rule opening a set — the mark's own run, sage into loden */
.gradbar{height:2px;margin-top:var(--gap-block);background:linear-gradient(90deg,#c9d2b9,#7fa075 46%,var(--loden))}
.gradbar + .signposts{margin-top:0;border-top:0}

/* three signposts */
.signposts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:var(--gap-block)}
.signposts > div{background:var(--paper);padding:28px 26px}
.signposts p.k{font:500 10px var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px}
.signposts h3{font:400 21px/1.26 var(--display);color:var(--ink);margin:0 0 10px}
.signposts p{font:400 13.5px/1.6 var(--text);color:var(--ink-muted);margin:0}
.signposts a{display:inline-block;font:500 13px var(--text);color:var(--green);margin-top:18px}
@media (max-width:880px){.signposts{grid-template-columns:1fr}}

/* editorial photograph slot */

/* client story cards */
.stories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:var(--gap-block)}
.stories article{background:var(--paper);padding:28px 26px 26px;display:flex;flex-direction:column}
.stories .logo{height:30px;display:flex;align-items:center;margin-bottom:22px}
.stories .logo img{max-height:24px;max-width:130px;width:auto;height:auto;display:block}
.stories .type{font:500 10px var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 8px}
.stories h2{font:400 22px/1.2 var(--display);color:var(--ink);margin:0 0 12px}
.stories p{font:400 13.5px/1.62 var(--text);color:var(--ink-muted);margin:0}
.stories .who{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:20px;border-top:1px solid var(--rule)}
.stories .who .face{width:34px;height:34px;border-radius:50%;background:var(--paper-3);border:1px solid var(--rule);flex:none;display:flex;align-items:center;justify-content:center;font:500 7px var(--text);letter-spacing:.1em;color:var(--ink-faint)}
.stories .who p{font:400 12px/1.45 var(--text);color:var(--ink-faint);margin:0}
@media (max-width:880px){.stories{grid-template-columns:1fr}}

/* story template — slots awaiting content */
.tmpl{border:1px solid var(--rule);background:var(--paper);margin-top:var(--gap-block)}
.tmpl__band{background:var(--paper-2);border-bottom:1px solid var(--rule);padding:18px 30px;display:flex;flex-wrap:wrap;gap:30px}
.tmpl__band div p:first-child{font:500 9.5px var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 6px}
.tmpl__band div p:last-child{font:400 13.5px var(--text);color:var(--ink);margin:0}
.tmpl__body{padding:34px 30px 36px}
.slot{font:400 13.5px/1.62 var(--text);color:var(--brass);margin:0}
.tmpl ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.tmpl li{display:flex;gap:12px;font:400 13.5px/1.6 var(--text);color:var(--brass)}
.tmpl li span{color:var(--ink-decor);flex:none}
.tmpl h3{font:500 13.5px var(--text);color:var(--ink);margin:34px 0 10px;padding-top:22px;border-top:1px solid var(--rule)}
.tmpl blockquote{margin:32px 0 0;padding:24px 0 0;border-top:1px solid var(--rule)}
.tmpl blockquote p{font:400 20px/1.45 var(--display);color:var(--brass);margin:0}

/* specification list — labels awaiting values */
.speclist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:var(--gap-block)}
.speclist > div{background:var(--paper);padding:22px 24px;min-height:96px}
.speclist h3{font:500 13.5px var(--text);color:var(--ink);margin:0 0 8px}
.speclist p{font:400 12.5px/1.6 var(--text);color:var(--ink-muted);margin:0}
.speclist p.tbc{font:400 12px var(--text);color:var(--brass);margin:0}
.conn p.tbc,.tbc{font:400 12px/1.6 var(--text);color:var(--brass);margin:0}
@media (max-width:860px){.speclist{grid-template-columns:1fr}}

/* two governance guarantees */
.guarantee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px 40px;margin-top:var(--gap-block)}
.guarantee > div{padding-top:20px;border-top:1px solid var(--rule)}
.guarantee h3{font:500 14px var(--text);color:var(--ink);margin:0 0 10px}
.guarantee p{font:400 13.5px/1.6 var(--text);color:var(--ink-muted);margin:0}
.guarantee p.why{color:var(--green);margin-top:10px}
@media (max-width:820px){.guarantee{grid-template-columns:1fr;gap:26px}}

/* the big range metric */

/* three parties, clear boundaries */
/* three sand fields, as every other card set on the site: the bordered 1px-gap
   grid was the last framed table. Shared row tracks keep the three outcomes
   on one baseline whatever the copy length. */
/* the portals treatment: a green rule over each column, no field, and the
   consequence line marked by a short hairline rather than a full-width one */
.parties{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto auto;gap:0 40px;margin-top:var(--gap-block);
}
.parties > div{
  display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:12px;
  padding:20px 0 4px;border-top:2px solid var(--green);
}
.parties h3{font:400 20px/1.2 var(--display);letter-spacing:-.008em;color:var(--ink);margin:0;max-width:16ch}
.parties p:not(.out){font:400 13px/1.62 var(--text);color:var(--ink-muted);margin:0}
.parties p.out{
  position:relative;font:400 13px/1.55 var(--text);color:var(--ink);margin:0;
  padding-top:16px;text-wrap:balance;
}
.parties p.out::before{
  content:"";position:absolute;left:0;top:0;width:26px;height:1px;background:var(--rule-strong);
}
@media (max-width:860px){.parties{grid-template-columns:1fr;grid-template-rows:none;gap:0}
  .parties > div{grid-row:auto;grid-template-rows:auto auto auto;padding:20px 0 26px}}

/* dependency list */
/* the four dependencies as fields, in the same construction as the AI page's
   principle pair: raised panels on loden, a green rule opening each one */
.deps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:auto auto;gap:12px;margin-top:var(--gap-block);
}
.deps > div{
  display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:14px;
  background:var(--paper-2);padding:22px 22px 26px;border-top:0;
}
.deps h3{
  font:400 17px/1.24 var(--display);letter-spacing:-.008em;color:var(--ink);margin:0;
  padding-bottom:13px;border-bottom:1px solid var(--rule-strong);
}

.deps p{font:400 12.5px/1.6 var(--text);color:var(--ink-muted);margin:0}
.section--loden .deps > div{background:var(--loden-raised)}
.section--loden .deps h3{color:var(--ink-on-loden);border-bottom-color:#425040}
.section--loden .deps p:not(.deps h3){color:var(--ink-on-loden-muted)}
@media (max-width:700px){.deps{grid-template-columns:1fr;grid-template-rows:none;gap:10px}
  .deps > div{grid-row:auto;grid-template-rows:auto auto}}

/* two-axis positioning map */
.quadmap{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(4,auto);gap:14px;
  margin-top:var(--gap-block);position:relative;
}
.quadmap > div{
  display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:10px;
  background:var(--paper-2);padding:24px 22px 26px;min-height:0;
}
.quadmap > div.is-fp{
  background:linear-gradient(152deg, var(--loden-raised) 0%, var(--loden) 68%);
  border-top:0;
}
.quadmap > div.is-fp h3{color:var(--ink-on-loden-bright)}
.quadmap > div.is-fp p{color:var(--ink-on-loden)}
.quadmap h3{font:400 16.5px/1.28 var(--display);letter-spacing:-.006em;color:var(--ink);margin:0}
.quadmap p{font:400 13px/1.6 var(--text);color:var(--ink-muted);margin:0;max-width:40ch}
.quadwrap{display:grid;grid-template-columns:auto 1fr;gap:14px;margin-top:var(--gap-block)}
.quadwrap__y{
  display:flex;align-items:center;justify-content:center;
  font:500 10px var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
  writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
}
.quadwrap .quadmap{margin-top:0}
.quadwrap__x{
  grid-column:2;display:flex;justify-content:flex-end;padding-top:13px;
  font:500 10px var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}
@media (max-width:760px){.quadmap{grid-template-columns:1fr}.quadwrap{grid-template-columns:1fr}.quadwrap__y{writing-mode:horizontal-tb;transform:none;justify-content:flex-start}.quadwrap__x{grid-column:1}}

/* duration bars */
.dur{margin-top:30px;border-top:1px solid var(--rule)}
.dur__row{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:start;padding:16px 0;border-bottom:1px solid var(--rule)}
.dur__row:has(+ .dur__scale){border-bottom:0}
.dur__row.is-fp{border-bottom:0}
.dur__row h3{font:400 15.5px/1.3 var(--display);letter-spacing:-.006em;color:var(--ink);margin:0}
/* set exactly as the header lockup: Source Serif 600, -.008em, green second half */
.wm,.dur__row h3.wm{font-family:var(--display);font-weight:600;letter-spacing:-.008em}
.wm span{color:var(--green)}
.section--loden .wm span{color:var(--green-on-loden)}
.section--loden .wm{color:var(--ink-on-loden)}
.dur__row p{font:400 12.5px/1.55 var(--text);color:var(--ink-muted);margin:7px 0 0}
.dur__row.is-fp p{color:var(--ink)}
.dur__track{position:relative;height:10px;background:var(--paper-3);margin-top:3px}
.dur__fill{position:absolute;left:0;top:0;bottom:0;background:var(--ink-muted)}
.dur__fill.is-fp{background:var(--green)}
.dur__break{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--paper);box-shadow:0 0 0 1px var(--ink)}
.dur__scale{display:grid;grid-template-columns:200px 1fr;gap:26px;padding-top:9px}
.dur__scale div{display:flex;justify-content:space-between;font:500 9.5px var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)}
.dur__scale div:last-child{position:relative;padding-top:14px}
.dur__scale div:last-child::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(16,21,18,.12),rgba(16,21,18,.9));
}
@media (max-width:700px){.dur__row,.dur__scale{grid-template-columns:1fr;gap:10px}}

/* the chain, end to end */
/* two shared tracks: the label, then the title or the list — the "Assemble" stage
   carries a list where the others carry a title, and both belong in one row */
.flow__stage p.k{
  font:500 9.5px/1.4 var(--text);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-muted);margin:0;
}
.flow__stage h3{font:400 21px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink);margin:0}
.flow__body{font:400 13px/1.6 var(--text);color:var(--ink-muted);margin:0}
@media (max-width:820px){.flow__arrow{display:none}}

/* already-there triplet */
/* three fields, on the stages' own column grid so the two blocks line up */
/* the reuse argument as a ruled index: label left, statement right, one hairline
   per row — the durability table's language, so the page does not repeat the
   three-column treatment used by the parties module above */
.reuse{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:0 40px;margin-top:34px;border-top:0}
.reuse > div{
  display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:11px;
  padding:18px 0 4px;border-top:2px solid var(--green);
}
.reuse .k{
  font:400 16px/1.28 var(--display);letter-spacing:-.006em;text-transform:none;
  color:var(--ink);margin:0;
}
.reuse p:not(.k){font:400 13px/1.62 var(--text);color:var(--ink-muted);margin:0}
@media (max-width:700px){
  .reuse{grid-template-columns:1fr;grid-template-rows:none;gap:0}
  .reuse > div{grid-row:auto;grid-template-rows:auto auto;padding:18px 0 22px}
}

.already{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto;gap:14px;margin-top:30px;
}
.already > div{
  display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:10px;
  background:var(--paper-2);padding:22px 22px 24px;
}
.already h3{
  font:500 9.5px/1.4 var(--text);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-muted);margin:0;
}
.already p{font:400 14.5px/1.5 var(--display);letter-spacing:-.004em;color:var(--ink);margin:0}
@media (max-width:820px){.already{grid-template-columns:1fr;grid-template-rows:none;gap:10px}
  .already > div{grid-row:auto;grid-template-rows:auto auto}}

/* environment fit — kept / platform / who works in it */
/* three columns on hairlines, as the stages and the "already" block are: the
   arrows are gone (the site states direction with rules, not glyphs) and the
   middle column is the only one that changes tone, because it is the answer */
.envfit{
  display:grid;grid-template-columns:1fr 1.15fr 1fr;
  grid-template-rows:auto auto;gap:0;align-items:stretch;
  margin-top:var(--gap-block);border-top:1px solid var(--ink);
}
.envfit__col{
  display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:14px;
  background:none;border:0;padding:22px 26px 24px 0;
}
.envfit__col + .envfit__col{border-left:1px solid var(--rule);padding-left:26px}
.envfit__col:last-of-type{padding-right:0}
.envfit__col.is-fp{background:var(--paper-2);padding:22px 26px 24px}
.envfit__col p.k{
  font:500 9.5px/1.4 var(--text);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-muted);margin:0;
}
.envfit__col.is-fp p.k{
  font:600 15px/1.2 var(--display);letter-spacing:-.008em;text-transform:none;color:var(--ink);
}
.envfit__col.is-fp p.k span{color:var(--green)}
.envfit__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.envfit__col li{font:400 13.5px/1.5 var(--text);color:var(--ink-body)}
.envfit__col.is-fp p:not(.k){font:400 15px/1.55 var(--display);letter-spacing:-.004em;color:var(--ink);margin:0}
.envfit__arrow{display:none}
@media (max-width:900px){.envfit{grid-template-columns:1fr;grid-template-rows:none;border-top:0}
  .envfit__col{grid-row:auto;grid-template-rows:auto auto;padding:20px 0 0;border-top:1px solid var(--rule)}
  .envfit__col + .envfit__col{border-left:0;padding-left:0}
  .envfit__col.is-fp{padding:20px 22px 22px}.envfit__arrow{display:none}}

/* long view — three columns */
.longview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 40px;margin-top:var(--gap-block)}
.longview > div{padding-top:20px;border-top:1px solid var(--rule)}
.longview h3{font:400 16.5px/1.28 var(--display);letter-spacing:-.006em;color:var(--ink);margin:0 0 10px}
.section--loden .longview > div{border-top-color:#425040}
.section--loden .longview h3{color:var(--ink-on-loden)}
.section--loden .longview p{color:var(--ink-on-loden-muted)}
.longview p{font:400 13.5px/1.6 var(--text);color:var(--ink-muted);margin:0}
@media (max-width:900px){.longview{grid-template-columns:1fr;gap:26px}}

.roles{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto auto auto;gap:14px;margin-top:var(--gap-block);
}
/* three sand fields, as the six tools and the connectivity set are — the ruled
   columns with numbered green labels were the last framed grid on these pages */
.roles > div{
  display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:14px;
  justify-items:center;text-align:center;
  background:var(--paper-2);padding:34px 26px 36px;border-top:0;
}
.roles__icon{
  width:54px;height:54px;border-radius:8px;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.roles__icon svg{width:24px;height:24px;display:block}
.roles h3{font:400 17px/1.3 var(--display);letter-spacing:-.006em;color:var(--ink);margin:0;max-width:18ch}
.roles p:not(.roles__why){font:400 13px/1.62 var(--text);color:var(--ink-muted);margin:0;max-width:34ch}
.roles__why{
  position:relative;font:400 13px/1.55 var(--text);color:var(--ink);margin:0;
  padding-top:18px;max-width:32ch;text-wrap:balance;
}
.roles__why::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:26px;height:1px;background:var(--rule-strong);
}
/* a note on the grid above, not a second intro */
.roles__foot{
  font:400 13.5px/1.6 var(--text);color:var(--ink-muted);margin:15px 0 0;
  max-width:46ch;text-wrap:balance;
}
.roles__foot + .more{margin-top:36px}
.roles__foot .emph{color:var(--ink);font-weight:500}
@media (max-width:900px){.roles{grid-template-columns:1fr;grid-template-rows:none;gap:10px}
  .roles > div{grid-row:auto;grid-template-rows:auto auto auto auto}}

/* AI control chain (Platform › FundProcess AI) */
/* the AI boundary reads as a record with an accountable party per line, which is
   what a due-diligence reader is looking for — not three boxes and two arrows */
.ledger{margin-top:var(--gap-block)}
.ledger__head{
  display:grid;grid-template-columns:14px minmax(0,1fr) 210px;gap:0 24px;
  align-items:baseline;padding-bottom:12px;
}
.ledger__head p{
  font:500 10.5px/1.4 var(--text);letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-faint);margin:0;
}
.ledger__bar{height:2px;background:linear-gradient(90deg,#c9d2b9,#7fa075 46%,var(--loden))}
.ledger__row{
  display:grid;grid-template-columns:14px minmax(0,1fr) 210px;gap:0 24px;
  align-items:start;padding:22px 0;border-bottom:1px solid var(--rule);
}
.ledger__mark{display:block;width:3px;height:100%;min-height:48px}
.ledger__row--ai .ledger__mark{background:linear-gradient(180deg,#c9d2b9,#a8b58c)}
.ledger__row--human .ledger__mark{background:linear-gradient(180deg,#7fa075,var(--green))}
.ledger__row--exec .ledger__mark{background:linear-gradient(180deg,var(--green),var(--loden))}
.ledger__row h3{
  font:400 22px/1.15 var(--display);letter-spacing:-.008em;margin:0 0 7px;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ledger__row--ai h3{background-image:linear-gradient(96deg,#2f6d35,#246d1e)}
.ledger__row--human h3{background-image:linear-gradient(96deg,#276a2a,#1b4f21)}
.ledger__row--exec h3{background-image:linear-gradient(96deg,#2f6d35,var(--loden))}
.ledger__row p:not(.ledger__who){font:400 13.5px/1.6 var(--text);color:var(--ink-body);margin:0}
.ledger__row--human p:not(.ledger__who){color:var(--ink)}
.ledger__who{font:400 13px/1.6 var(--text);color:var(--ink-muted);margin:0}
.ledger__row--human .ledger__who{color:var(--green)}
.ledger__ring{margin-top:16px;font:400 13px/1.55 var(--text);color:var(--ink-muted);text-wrap:balance}

/* the same module on the dark ground — the ledger is used in both places */
.section--loden .ledger__head p{color:var(--ink-on-loden-muted)}
.section--loden .ledger__bar{background:linear-gradient(90deg,#4c5a45,#31ae1c 46%,#c7cdbf)}
.section--loden .ledger__row{border-bottom-color:var(--rule-dark)}
.section--loden .ledger__row h3{background-image:none;color:var(--ink-on-loden);-webkit-text-fill-color:currentColor}
.section--loden .ledger__row--human h3{color:var(--green-on-loden)}
.section--loden .ledger__row p:not(.ledger__who){color:var(--ink-on-loden)}
.section--loden .ledger__row--human p:not(.ledger__who){color:var(--ink-on-loden-bright)}
.section--loden .ledger__who{color:var(--ink-on-loden-muted)}
.section--loden .ledger__row--human .ledger__who{color:var(--green-on-loden)}
.section--loden .ledger__ring{color:var(--ink-on-loden-muted)}
.section--loden .ledger__row--ai .ledger__mark{background:linear-gradient(180deg,#4c5a45,#6f8a63)}
.section--loden .ledger__row--human .ledger__mark{background:linear-gradient(180deg,#6f8a63,var(--green-on-loden))}
.section--loden .ledger__row--exec .ledger__mark{background:linear-gradient(180deg,var(--green-on-loden),#c7cdbf)}

.aichain{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;margin-top:var(--gap-block)}
.aichain__step{flex:1 1 240px;background:var(--paper-2);border:1px solid var(--rule);padding:24px}
.aichain__step h3{font:500 14px var(--text);color:var(--ink);margin:0 0 9px}
.aichain__step p{font:400 13px/1.6 var(--text);color:var(--ink-muted);margin:0}
.aichain__arrow{align-self:center;font:400 16px var(--text);color:var(--ink-muted)}
.aichain__ring{margin-top:16px;border-top:1px solid var(--rule);padding-top:14px;font:400 13px/1.55 var(--text);color:var(--ink-muted)}
@media (max-width:820px){.aichain__arrow{display:none}}
@media (max-width:820px){
  .ledger__head{display:none}
  .ledger__row{grid-template-columns:3px minmax(0,1fr);gap:0 18px}
  .ledger__who{margin-top:10px;grid-column:2}
}

/* two-sided principle */
/* two sand fields separated by space, as the connectivity set is — the bordered
   two-cell table was the last framed grid on the page */
.princ{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:auto auto auto;gap:14px;margin-top:var(--gap-block);
}
.princ--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.princ > div{
  display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:10px;
  background:var(--paper-2);padding:24px 22px 26px;
}
.princ .princ__k{
  font:400 26px/1.12 var(--display);letter-spacing:-.012em;color:var(--ink);margin:0;
}
.princ h3{
  font:500 14px/1.45 var(--text);letter-spacing:0;color:var(--ink);margin:0;
  padding-top:15px;border-top:1px solid var(--rule-strong);
}
.princ p:not(.princ__k){font:400 13.5px/1.65 var(--text);color:var(--ink-muted);margin:0}
/* the open variant: no field ground, each item opening on the green rule —
   the treatment used by the autonomy pair and the reuse row */
.conn.conn--open > div,.princ.princ--open > div{
  background:transparent;padding:18px 0 4px;border-top:2px solid var(--green);
}
.conn--open h3{font:400 17px/1.28 var(--display);letter-spacing:-.008em}
.princ--open .princ__k{font:400 17px/1.28 var(--display);letter-spacing:-.008em}
.princ--open h3{padding-top:0;border-top:0}
.section--loden .guarantee h3{color:var(--ink-on-loden-bright)}
.section--loden .guarantee p{color:var(--ink-on-loden)}
.section--loden .guarantee > div{border-top-color:var(--rule-dark)}
.section--loden .princ > div{background:var(--loden-raised)}
.section--loden .princ.princ--open > div{background:transparent;padding:18px 0 4px}
.section--loden .conn--open > div,.section--loden .princ--open > div{border-top-color:var(--green-on-loden)}
.section--loden .stat__k{color:var(--ink-on-loden-muted)}
.section--loden .stat__n{color:var(--ink-on-loden-bright)}
.section--loden .stat__l{color:var(--ink-on-loden-muted)}
.section--loden .stats--ruled > div{border-top-color:var(--rule-dark)}
.section--loden .princ .princ__k{color:var(--ink-on-loden)}
.section--loden .princ h3{color:var(--ink-on-loden);border-top-color:#425040}
.section--loden .princ p:not(.princ__k){color:var(--ink-on-loden-muted)}
@media (max-width:800px){.princ,.princ--3{grid-template-columns:1fr;grid-template-rows:none;gap:10px}
.princ > div{grid-row:auto;grid-template-rows:auto auto auto}}

/* guarantees — four rows */
/* the guarantees take the ledger's construction: labelled columns, a gradient bar,
   and a mark carrying the run down each row */
.guar{margin-top:var(--gap-block)}
.guar__head{
  display:grid;grid-template-columns:14px minmax(0,1fr) 300px;gap:0 24px;
  align-items:baseline;padding-bottom:12px;
}
.guar__head p{
  font:500 10.5px/1.4 var(--text);letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-faint);margin:0;
}
.guar__bar{height:2px;background:linear-gradient(90deg,#c9d2b9,#7fa075 46%,var(--loden))}
.guar__row{
  display:grid;grid-template-columns:14px minmax(0,1fr) 300px;gap:0 24px;
  align-items:start;padding:22px 0;border-bottom:1px solid var(--rule);
}
.guar__mark{display:block;width:3px;height:100%;min-height:48px}
.guar__row--a .guar__mark{background:linear-gradient(180deg,#c9d2b9,#a8b58c)}
.guar__row--b .guar__mark{background:linear-gradient(180deg,#a8b58c,#7fa075)}
.guar__row--c .guar__mark{background:linear-gradient(180deg,#7fa075,var(--green))}
.guar__row--d .guar__mark{background:linear-gradient(180deg,var(--green),var(--loden))}
.guar__row h3{
  font:400 20px/1.2 var(--display);letter-spacing:-.008em;color:var(--ink);margin:0 0 7px;
}
.guar__row p:not(.guar__why){font:400 13.5px/1.6 var(--text);color:var(--ink-body);margin:0}
.guar__why{font:400 13.5px/1.6 var(--text);color:var(--ink-muted);margin:0;text-wrap:balance}
@media (max-width:900px){.guar__head{display:none}
  .guar__row{grid-template-columns:3px minmax(0,1fr);gap:0 18px}
  .guar__why{margin-top:10px;grid-column:2}}

/* back office capability grid */
/* six sand fields, as the connectivity set and the six tools are — the framed
   1px grid was the last one in the platform section */
.bo{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(4,auto);gap:14px;margin-top:var(--gap-block);
}
.bo > div{
  display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:10px;
  background:var(--paper-2);padding:24px 22px 26px;
}
.bo h3{font:400 16.5px/1.28 var(--display);letter-spacing:-.006em;color:var(--ink);margin:0}
.bo p{font:400 13px/1.62 var(--text);color:var(--ink-muted);margin:0}
@media (max-width:900px){.bo{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,auto)}}
@media (max-width:560px){.bo{grid-template-columns:1fr;grid-template-rows:none;gap:10px}
  .bo > div{grid-row:auto;grid-template-rows:auto auto}}

/* three columns on an ink rule, divided by hairlines rather than filled — the
   same construction as the five pillars on Overview */
.ports{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto auto;gap:0 40px;
  margin-top:var(--gap-block);
}
.ports > div{
  display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:12px;
  padding:20px 0 4px;border-top:2px solid var(--green);
}
.ports h3{font:400 20px/1.2 var(--display);letter-spacing:-.008em;color:var(--ink);margin:0;max-width:16ch}
.ports p:not(.ports__why){font:400 13px/1.62 var(--text);color:var(--ink-muted);margin:0}
.ports__why{
  position:relative;font:400 13px/1.55 var(--text);color:var(--ink);margin:0;
  padding-top:16px;text-wrap:balance;
}
.ports__why::before{
  content:"";position:absolute;left:0;top:0;width:26px;height:1px;background:var(--rule-strong);
}
@media (max-width:900px){
  .ports{grid-template-columns:1fr;grid-template-rows:none;gap:0}
  .ports > div{grid-row:auto;grid-template-rows:auto auto auto;padding:20px 0 26px}
}

/* six designers — a numbered tool set on one continuous hairline grid */
@media (max-width:940px){
}
@media (max-width:640px){
}

/* two-column enabler pair */
.pair{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto auto;gap:0 40px;margin-top:var(--gap-block);
}
.pair > div{display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:12px;position:relative;padding-top:17px}
.pair > div::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
}
.pair > div:nth-child(1)::before{background:linear-gradient(90deg,#c3cdb0,#93aa83)}
.pair > div:nth-child(2)::before{background:linear-gradient(90deg,#93aa83,var(--green))}
.pair h3{font:400 22px/1.24 var(--display);letter-spacing:-.01em;color:var(--ink);margin:0}
.pair p{font:400 14.5px/1.65 var(--text);color:var(--ink-muted);margin:0;max-width:52ch}
@media (max-width:800px){.pair{grid-template-columns:1fr;grid-template-rows:none;row-gap:30px}
  .pair > div{grid-row:auto;grid-template-rows:auto auto}}

/* worked example — six numbered steps */
.built{margin-top:var(--gap-block);border-top:1px solid var(--rule)}
.built__q{font:400 19px/1.5 var(--display);color:var(--ink);margin:0 0 30px;max-width:60ch;font-style:italic}
.built__row{display:grid;grid-template-columns:52px 190px 1fr;gap:22px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule)}
.built__n{font:400 15px var(--display);color:var(--green)}
.built__row h3{font:500 14px var(--text);color:var(--ink);margin:0}
.built__row p{font:400 13.5px/1.6 var(--text);color:var(--ink-muted);margin:0}
@media (max-width:700px){.built__row{grid-template-columns:40px 1fr;gap:8px 16px}.built__row p{grid-column:2}}

/* ecosystem grid — five components */
/* five components, five columns, one row — as the wireframe has it. Vertical
   hairlines rather than bordered cards, and no dark fill inside a paper section. */
.eco{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
  grid-template-rows:auto auto auto auto;
  margin-top:var(--gap-block);border-top:1px solid var(--ink);
}
.eco a{
  display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:8px;
  padding:22px 18px 22px 0;text-decoration:none;
}
.eco a + a{border-left:1px solid var(--rule);padding-left:18px}
.eco__n{font:500 10px/1 var(--text);letter-spacing:.2em;color:var(--ink-faint);transition:color .18s ease}
.eco a:hover .eco__n{color:var(--green)}
.eco h2{
  font:400 16px/1.25 var(--display);letter-spacing:-.006em;color:var(--ink);margin:0;
  transition:color .18s ease;
}
.eco a:hover h2{color:var(--green)}
.eco a > p:last-child{font:400 12.5px/1.55 var(--text);color:var(--ink-muted);margin:0}
.eco__foot{
  position:relative;grid-column:1/-1;
  padding-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:30px;
}
.eco__foot::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,#c3cdb0,#7fa075 45%,var(--green));
}
.eco__foot div p{font:400 13px/1.6 var(--text);color:var(--ink-muted);margin:0}
.eco__foot .eco__k{
  font:500 10.5px/1.4 var(--text);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin:0 0 5px;
}
@media (max-width:820px){
  .eco{grid-template-columns:1fr;grid-template-rows:none}
  .eco__foot{grid-template-columns:1fr;gap:18px}
  .eco a{grid-row:auto;grid-template-rows:auto auto auto}
  .eco a{padding:20px 0}
  .eco a + a{border-left:0;border-top:1px solid var(--rule);padding-left:0}}


/* which team uses which designer: four pairs on hairlines, so the mapping reads at
   a glance instead of as a sentence. Shared row tracks keep the two lines aligned. */
.who{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:auto auto;gap:14px;margin-top:var(--gap-block);
}
.who > div{
  display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:16px;
  background:var(--paper-2);padding:24px 22px 26px;
}
.who h3{
  position:relative;font:400 16px/1.25 var(--display);letter-spacing:-.006em;
  color:var(--ink);margin:0;padding-top:15px;
}
.who h3::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--green)}
.who__t{display:grid;gap:12px;align-content:start}
.who__t span{
  display:grid;grid-template-columns:32px minmax(0,1fr);gap:11px;align-items:center;
  font:400 13px/1.4 var(--text);color:var(--ink-muted);
}
.who__t i{
  width:32px;height:32px;border-radius:8px;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.who__t i svg{width:19px;height:19px;display:block}
@media (max-width:900px){
  .who{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto)}
}
@media (max-width:600px){
  .who{grid-template-columns:1fr;grid-template-rows:none;gap:10px}
  .who > div{grid-row:auto;grid-template-rows:auto auto;padding:20px 22px 22px}
}

/* one sentence, centred: the only place on the site where a statement is set as a
   statement rather than as a document. Valid only while the section holds nothing else. */
/* engineering credibility, set apart from the argument it supports */
.guarantee p.proofline,p.proofline{
  font:400 12.5px/1.68 var(--text);color:var(--ink-muted);
  margin:16px 0 0;padding-top:15px;border-top:1px solid var(--rule-strong);
}

.evidence__note{
  font:400 13.5px/1.6 var(--text);color:var(--ink-muted);
  margin:34px 0 0;max-width:none;text-wrap:nowrap;
}
@media (max-width:820px){
  /* white-space:normal first: text-wrap:pretty alone is dropped by browsers
     that do not support it (Safari), leaving the base text-wrap:nowrap in
     force, so the sentence never wrapped and pushed the page 224px wider than
     the phone. The longhand undoes it everywhere; pretty is then a bonus. */
  .evidence__note{white-space:normal;text-wrap:pretty;font-size:13px}
}
.section--loden .evidence__note{color:var(--ink-on-loden-muted)}

.mission{padding-top:calc(var(--section-y) * 1.4);padding-bottom:calc(var(--section-y) * 1.4)}
.mission .wrap{max-width:920px;text-align:center}
.mission .eyebrow{margin-bottom:26px}
.mission h2{
  max-width:29ch;margin:0 auto;
  font-size:40px;line-height:1.16;letter-spacing:-.018em;
  color:var(--ink-on-loden-bright);text-wrap:balance;
}
@media (max-width:820px){
  .mission h2{font-size:29px;max-width:22ch}
  .mission h2 br{display:none}
}

/* ---------- the platform in motion ----------
   One continuous take: a NAV pack from bank feed to investor portal, one component
   at a time. Five phases in a single fixed frame over 25s — the frame never moves,
   its contents change state. Content is the real product (Monitoring Matrix columns
   and sub-funds, AUM Dashboard figures). Paper ground, palette tokens only. */
.take{--dur:25s;--ph:5s;margin-top:40px}
.take--six{--dur:30s;--ph:5s;--cols:6}
.take--six .take__stage{animation-name:takeCut6}
.take--six .take__rail li{animation-name:takeRail6}
.take--six .take__rail li::before{animation-name:takeSweep6}
.take__frame{
  display:grid;align-content:center;min-height:186px;
  border:1px solid var(--rule);background:var(--paper-2);
  padding:24px 26px;
}
.take__stage{
  grid-area:1/1;opacity:0;
  animation:takeCut var(--dur) linear infinite;animation-delay:calc(var(--s) * var(--ph));
}
@keyframes takeCut{
  0%{opacity:0}
  2%,17%{opacity:1}
  19.5%,100%{opacity:0}
}
@keyframes takeCut6{
  0%{opacity:0}
  1.6%,14.2%{opacity:1}
  16.2%,100%{opacity:0}
}
.take__k{
  font:500 9.5px/1.4 var(--text);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 14px;
}

/* 01 — the bank feed, in the AUM Dashboard's own EUR and USD figures */
.take__feed{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.take__feed div{
  display:grid;grid-template-columns:52px 40px 1fr;gap:14px;align-items:baseline;
  padding:7px 0;border-bottom:1px solid var(--rule);
  opacity:0;transform:translateX(-12px);
  animation:takeRow var(--dur) cubic-bezier(.3,0,.2,1) infinite;animation-delay:var(--d);
}
.take__feed span{font:400 11px var(--text);color:var(--ink-faint)}
.take__feed b{
  font:400 12.5px var(--text);font-variant-numeric:tabular-nums;
  color:var(--ink);text-align:right;font-weight:400;
}
@keyframes takeRow{
  0%,1%{opacity:0;transform:translateX(-12px)}
  4%,17%{opacity:1;transform:none}
  19.5%,100%{opacity:0;transform:none}
}

/* the stage's statement, with the domains it touches as tags — not as steps */
.take__line{
  font:400 19px/1.42 var(--display);letter-spacing:-.008em;color:var(--ink);
  margin:0;max-width:34ch;
  opacity:0;animation:takeFade var(--dur) ease infinite;animation-delay:calc(var(--s) * 5s);
}
.take__tags{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0;
  opacity:0;animation:takeFade var(--dur) ease infinite;animation-delay:calc(var(--s) * 5s + .3s);
}
.take__tags span{
  font:500 9.5px/1.4 var(--text);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);
}

/* 02 — the process being configured, step by step */
.take__build{display:grid;grid-template-columns:1fr 1fr;gap:12px 44px}
.take__build div{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;
  opacity:0;animation:takeFade var(--dur) ease infinite;animation-delay:calc(var(--d) + 5s);
}
.take__build i{width:7px;height:7px;background:var(--green);display:block}
.take__build p{font:400 13.5px/1.4 var(--text);color:var(--ink);margin:0}
@keyframes takeFade{
  0%,1%{opacity:0}
  4%,17%{opacity:1}
  19.5%,100%{opacity:0}
}

/* 03 — the real Monitoring Matrix, resolving */
.mm{width:100%;border-collapse:collapse;table-layout:fixed}
.mm thead th{
  font:500 8px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);text-align:center;padding:0 0 8px;
  border-bottom:1px solid var(--rule-strong);font-weight:500;
}
.mm thead th:first-child{width:32%}
.mm tbody th{
  font:400 11px/1.3 var(--text);color:var(--ink-muted);text-align:left;font-weight:400;
  padding:7px 14px 7px 0;border-bottom:1px solid var(--rule);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mm td{padding:7px 0;border-bottom:1px solid var(--rule);text-align:center}
.mm tbody tr:last-child th,.mm tbody tr:last-child td{border-bottom:0}
.mm td i{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--rule-strong);
  animation:mdot var(--dur) steps(1,end) infinite;animation-delay:calc(var(--d) + 10.2s);
}
.mm td i.is-amber{animation-name:mdotAmber}
.mm td i.is-red{animation-name:mdotRed}
@keyframes mdot{
  0%,1%{background:var(--rule-strong)}
  2%,17%{background:var(--green)}
  19.5%,100%{background:var(--rule-strong)}
}
@keyframes mdotAmber{
  0%,1%{background:var(--rule-strong)}
  2%,17%{background:var(--brass)}
  19.5%,100%{background:var(--rule-strong)}
}
@keyframes mdotRed{
  0%,1%{background:var(--rule-strong)}
  2%,17%{background:var(--clay)}
  19.5%,100%{background:var(--rule-strong)}
}
.take__sign{
  display:flex;align-items:center;gap:9px;margin:14px 0 0;
  font:400 12px var(--text);color:var(--ink);
  opacity:0;animation:takeFade var(--dur) ease infinite;animation-delay:12.1s;
}
.take__sign span{width:11px;height:11px;background:var(--green);display:block}

/* 04 — the pack assembling */
.take__pack{display:grid;grid-template-columns:1fr 1fr;gap:7px 20px}
.take__pack div{
  border:1px solid var(--rule-strong);background:var(--paper);padding:9px 12px;
  opacity:0;transform:translateY(8px);
  animation:takeUp var(--dur) cubic-bezier(.3,1,.35,1) infinite;animation-delay:calc(var(--d) + 15s);
}
.take__pack div:first-child{border-color:var(--green-rule)}
.take__pack p{font:400 12px/1.3 var(--text);color:var(--ink);margin:0}
@keyframes takeUp{
  0%,1%{opacity:0;transform:translateY(8px)}
  4%,17%{opacity:1;transform:none}
  19.5%,100%{opacity:0;transform:translateY(8px)}
}

/* 05 — the investor portal */
.take__portal{border:1px solid var(--rule-strong);background:var(--paper)}
.take__portal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;border-bottom:1px solid var(--rule);
}
.take__portal-head b{width:74px;height:3px;background:var(--green);display:block}
.take__portal-head span{width:22px;height:3px;background:var(--rule-strong);display:block}
.take__portal-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:10px 14px;border-bottom:1px solid var(--rule);
  opacity:0;animation:takeFade var(--dur) ease infinite;animation-delay:calc(var(--d) + 20.2s);
}
.take__portal-row:last-child{border-bottom:0}
.take__portal-row p{font:400 12px var(--text);color:var(--ink);margin:0}
.take__portal-row span{width:44px;height:3px;background:var(--green-rule);display:block}

/* Studio's own six phases. Same shell, same inks — only the artefacts differ. */
.sd__map{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.sd__map div{
  display:grid;grid-template-columns:1fr 30px 1fr;gap:12px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--rule);
  opacity:0;animation:takeFade var(--dur) ease infinite;animation-delay:var(--d);
}
.sd__map span{font:400 12.5px var(--text);color:var(--ink-faint)}
.sd__map i{height:1px;background:var(--green);display:block}
.sd__map b{font:400 13px var(--text);color:var(--ink);font-weight:400}

.sd__q{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.sd__q-row{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--rule);
  opacity:0;animation:takeFade var(--dur) ease infinite;animation-delay:var(--d);
}
.sd__q-row p{font:400 13px var(--text);color:var(--ink);margin:0}
.sd__q-row span{height:14px;border:1px solid var(--rule-strong);background:var(--paper);display:block}
.sd__q-row span.is-wide{width:118px}
.sd__q-row span.is-narrow{width:52px}

.sd__calc{display:grid;gap:0}
.sd__calc div{
  display:grid;grid-template-columns:1fr 220px;gap:24px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--rule);
  opacity:0;animation:takeFade var(--dur) ease infinite;animation-delay:var(--d);
}
.sd__calc p{font:400 13px var(--text);color:var(--ink-muted);margin:0}
.sd__calc span{height:3px;background:var(--ink-faint);display:block}
.sd__calc .sd__calc-out{border-bottom:0;padding-top:13px}
.sd__calc .sd__calc-out p{color:var(--ink)}
.sd__calc .sd__calc-out span{background:var(--green);height:4px}

.sd__flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.sd__node{
  display:grid;gap:8px;justify-items:start;padding-right:26px;
  opacity:0;animation:takeFade var(--dur) ease infinite;animation-delay:var(--d);
}
.sd__node + .sd__node{border-left:1px solid var(--rule);padding-left:26px}
.sd__node i{width:9px;height:9px;background:var(--green);display:block}
.sd__node p{font:400 13.5px var(--text);color:var(--ink);margin:0}

.sd__rep{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:start}
.sd__rep div{
  display:grid;gap:7px;align-content:start;
  aspect-ratio:1/1.28;border:1px solid var(--rule-strong);background:var(--paper);
  padding:14px 14px 0;
  opacity:0;transform:translateY(10px);
  animation:takeUp var(--dur) cubic-bezier(.3,1,.35,1) infinite;animation-delay:var(--d);
}
.sd__rep div:first-child{border-color:var(--green-rule)}
.sd__rep span{height:2px;background:var(--rule-strong);display:block}
.sd__rep span:first-child{background:var(--ink-faint);width:62%}
.sd__rep span:last-child{width:78%}

/* the rail: which of the five components is speaking */
.take__rail{
  list-style:none;display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));
  gap:0;margin:0;padding:0;border-top:1px solid var(--rule);
}
.take__rail li{
  position:relative;padding:12px 14px 0 0;
  font:400 12px/1.35 var(--text);color:var(--ink-faint);
  animation:takeRail var(--dur) linear infinite;animation-delay:calc(var(--s) * var(--ph));
}
.take__rail li + li{border-left:1px solid var(--rule);padding-left:14px}
.take__rail li::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:left;
  animation:takeSweep var(--dur) linear infinite;animation-delay:calc(var(--s) * var(--ph));
}
.take__rail li + li::before{left:14px}
.take__rail span{display:block;font:500 9px/1 var(--text);letter-spacing:.2em;margin-bottom:6px}
@keyframes takeRail{
  0%{color:var(--ink-faint)}
  2%,18%{color:var(--ink)}
  20%,100%{color:var(--ink-faint)}
}
@keyframes takeRail6{
  0%{color:var(--ink-faint)}
  1.6%,15%{color:var(--ink)}
  16.6%,100%{color:var(--ink-faint)}
}
@keyframes takeSweep{
  0%{transform:scaleX(0)}
  20%{transform:scaleX(1)}
  20.01%,100%{transform:scaleX(0)}
}
@keyframes takeSweep6{
  0%{transform:scaleX(0)}
  16.66%{transform:scaleX(1)}
  16.67%,100%{transform:scaleX(0)}
}

@media (prefers-reduced-motion:reduce){
  .take *{animation:none !important}
  .take__stage{grid-area:auto;opacity:1;margin-bottom:26px}
  .take__stage:last-child{margin-bottom:0}
  .take__feed div,.take__build div,.take__pack div,.take__portal-row,.take__sign,
  .sd__map div,.sd__q-row,.sd__calc div,.sd__node,.sd__rep div{opacity:1;transform:none}
  .mm td i.is-green{background:var(--green)}
  .mm td i.is-amber{background:var(--brass)}
  .mm td i.is-red{background:var(--clay)}
  .take__rail li{color:var(--ink)}
  .take__rail li::before{transform:scaleX(1)}
}
@media (max-width:820px){
  .take__frame{padding:18px}
  .sd__map,.sd__q,.take__feed,.take__build,.take__pack{grid-template-columns:1fr}
  .sd__rep{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sd__flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
  .take__rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .take__rail li:nth-child(2n+1){border-left:0;padding-left:0}
  .take__rail li:nth-child(2n+1)::before{left:0}
  .take__rail li:nth-child(n+3){margin-top:12px}
  .mm thead th:first-child{width:40%}
  .take__feed div{grid-template-columns:46px 34px 1fr;gap:10px}
}

/* three operational outcomes, each with a why-it-matters rule */
.outc{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto auto;gap:0 30px;margin-top:var(--gap-block);
}
/* shared row tracks, so the three "why it matters" rules sit on one line and the
   gradient reads as a single run across the row rather than three loose marks */
.outc > div{display:grid;grid-row:span 3;grid-template-rows:subgrid}
.outc h3{font:500 15px/1.4 var(--text);color:var(--ink);margin:0 0 10px}
.outc p:not(.outc__why){font:400 13.5px/1.6 var(--text);color:var(--ink-muted);margin:0}
.outc__why{
  position:relative;align-self:start;
  margin-top:16px;padding-top:15px;
  font:400 13px/1.55 var(--text);color:var(--ink);
}
/* the mark's own run, picked up from the homepage's stage rule and carried across
   the three columns in sequence: sage on the left, green where it lands */
.outc__why::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
}
.outc > div:nth-child(1) .outc__why::before{background:linear-gradient(90deg,#c3cdb0,#a5b891)}
.outc > div:nth-child(2) .outc__why::before{background:linear-gradient(90deg,#a5b891,#7fa075)}
.outc > div:nth-child(3) .outc__why::before{background:linear-gradient(90deg,#7fa075,var(--green))}
@media (max-width:900px){.outc{grid-template-columns:1fr;grid-template-rows:none;row-gap:26px}
  .outc > div{grid-row:auto;grid-template-rows:auto auto auto}}

/* connectivity list */
/* six connection classes as six discrete panels — sand fields separated by real
   space, no rules and no numbers, so they read as a set rather than a sequence.
   Shared row tracks keep the titles and copy on one line across all six. */
.conn{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(4,auto);gap:14px;margin-top:var(--gap-block);
}
.conn div{
  display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:10px;
  background:var(--paper-2);padding:24px 22px 26px;
}
.conn h3{
  font:400 16px/1.25 var(--display);letter-spacing:-.006em;color:var(--ink);margin:0;
}
.conn p{font:400 13px/1.6 var(--text);color:var(--ink-muted);margin:0}
@media (max-width:900px){.conn{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,auto)}}
@media (max-width:560px){.conn{grid-template-columns:1fr;grid-template-rows:none;gap:10px}
  .conn div{grid-row:auto;grid-template-rows:auto auto;padding:22px}}

/* enterprise foundation chips */
/* eight platform properties as a ruled index, not a tag cloud: each sits on its own
   hairline in a four-up grid, so the set reads as an inventory of what the platform
   guarantees rather than a bag of keywords. */
.chips{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px 34px;margin-top:var(--gap-block);
}
.chips span{
  font:400 14px/1.35 var(--text);color:var(--ink-on-loden);
  border-top:1px solid var(--rule-dark);padding-top:13px;
}
@media (max-width:900px){
  .chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px}
}

/* solutions index cards */
/* six sand fields, as the connectivity set and the six tools are */
.solgrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(4,auto);gap:14px;margin-top:var(--gap-block);
}
.solcard{
  display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:12px;
  background:var(--paper-2);padding:26px 24px 28px;text-decoration:none;
  transition:background .18s ease;
}
.solcard:hover{background:var(--paper-3)}
.solcard:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.solcard h2{font:400 19px/1.24 var(--display);letter-spacing:-.008em;color:var(--ink);margin:0;max-width:none}
/* the site's own arrow, at the end of the title so the card keeps one axis */
.solcard__a{
  display:inline-block;font:400 15px/1 var(--text);color:var(--green);
  opacity:.55;transition:opacity .18s ease,transform .22s cubic-bezier(.4,0,.2,1);
}
.solcard:hover .solcard__a{opacity:1;transform:translateX(3px)}
.solcard p{font:400 13.5px/1.6 var(--text);color:var(--ink-muted);margin:0;flex:1}
.solcard:hover h2{color:var(--green)}
.solcard h2{transition:color .18s ease}
@media (max-width:1040px){.solgrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,auto)}}
@media (max-width:700px){.solgrid{grid-template-columns:1fr;grid-template-rows:none;gap:10px}
  .solcard{grid-row:auto;grid-template-rows:auto auto}}

/* four shared foundations */
.founds{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:auto auto;gap:14px;margin-top:var(--gap-block);
}
.founds > div{
  display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:10px;
  background:var(--paper-2);padding:22px 22px 26px;
  border-top:2px solid var(--green);
}
.founds h3{font:400 16.5px/1.28 var(--display);letter-spacing:-.006em;color:var(--ink);margin:0}
.founds p{font:400 13px/1.62 var(--text);color:var(--ink-muted);margin:0}
@media (max-width:900px){.founds{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto)}}
@media (max-width:560px){.founds{grid-template-columns:1fr;grid-template-rows:none;gap:10px}
  .founds > div{grid-row:auto;grid-template-rows:auto auto}}

/* header fits before it collapses */
.site-nav a,.site-head .util,.site-head .fp-btn{white-space:nowrap}
@media (max-width:1240px){
  .site-head{gap:26px;padding-left:32px;padding-right:32px}
  .site-nav{gap:22px}
}

/* client logo row — each mark capped individually so optical size matches
   despite aspect ratios from 1.95 to 5.61; a single shared height cap
   renders wide wordmarks tiny and square canvases unreadable. */
/* statement left, the type-matched client right: logos are compared horizontally,
   copy is read vertically, so the two do not share a column */
/* three measures across, on the site's ruled-figure treatment */
.proof__fig{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;
  margin:var(--gap-block) 0 0;
}
.proof__fig > div{padding-top:22px;border-top:1px solid #425040}
.proof__fig dt{font:400 34px/1 var(--display);letter-spacing:-.014em;color:var(--ink-on-loden-bright)}
.proof__fig dd{
  font:400 12.5px/1.55 var(--text);color:var(--ink-on-loden-muted);
  margin:10px 0 0;max-width:24ch;text-wrap:balance;
}
@media (max-width:760px){
  .proof__fig{grid-template-columns:1fr;gap:0}
  .proof__fig > div + div{margin-top:18px}
}

.logorow{display:flex;align-items:center;gap:56px;flex-wrap:wrap;margin-top:var(--gap-block)}
/* pre-inked assets, as the homepage band uses — no runtime filter */
.logorow img{display:block;height:22px;width:auto;object-fit:contain;object-position:left center}
.logorow__note{font:400 12.5px/1.6 var(--text);color:var(--ink-muted);margin:26px 0 0;max-width:62ch}
@media (max-width:640px){
  .logorow{gap:36px}
  .logorow img{height:20px;width:auto}
}

/* three-problem row */
.probs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:var(--gap-block)}
.probs__k{font:500 9.5px/1.4 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 12px}
.probs p{font:400 13.5px/1.55 var(--text);color:var(--ink-muted);margin:8px 0 0}
@media (max-width:900px){.probs{grid-template-columns:1fr;gap:22px}}

/* portrait proof placeholder */
.proof__portrait{display:flex;align-items:center;gap:14px;margin-top:20px}
.proof__portrait span{width:44px;height:44px;border-radius:50%;background:var(--paper-3);border:1px solid var(--rule);flex:none}
.proof__portrait p{font:400 12.5px/1.5 var(--text);color:var(--ink-muted);margin:0}

/* before / after */
/* before and after paired line by line, on the ledger's construction: the reader
   compares one row at a time instead of reading two lists */
.ba{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;
  margin-top:var(--gap-block);
}
.ba__k{
  font:400 12.5px/1.4 var(--text);color:var(--ink-faint);margin:0;
  padding-bottom:11px;border-bottom:1px solid var(--ink);
}
.ba__k--after{color:var(--ink);border-bottom:2px solid var(--green)}
.ba__b,.ba__a{
  font:400 13.5px/1.55 var(--text);margin:0;
  padding:14px 0;border-top:1px solid var(--rule);
}
.ba__b{color:var(--ink-muted)}
.ba__a{color:var(--ink)}
/* the label pair is always children 1-2, so the first data row is 3-4; :first-of-type
   cannot express this because every child is a <p> */
.ba > p:nth-child(3),.ba > p:nth-child(4){border-top:0;padding-top:16px}

.metric{
  display:grid;grid-template-columns:minmax(240px,auto) 1fr;gap:52px;align-items:stretch;
  border:0;
  background:linear-gradient(152deg, var(--loden-raised) 0%, var(--loden) 62%);
  /* loden is a full-width surface everywhere else on the site, so the band bleeds to
     the viewport while its content stays on the content column */
  margin:44px calc(50% - var(--vw) / 2) 0;
  padding:40px max(var(--gutter), calc(var(--vw) / 2 - var(--max) / 2 + var(--gutter))) 44px;
}
/* one solid figure, no effect: the number is the argument */
/* set on the display scale, with the loden heading's face, weight and tracking */
.metric__n{font:400 54px/1.04 var(--display);letter-spacing:-.015em;color:var(--ink-on-loden-bright);margin:0}
.metric__l{font:400 13.5px/1.5 var(--text);letter-spacing:0;text-transform:none;color:var(--ink-on-loden-muted);margin:12px 0 0;max-width:22ch;text-wrap:balance}
/* the explanation sits with the figure rather than floating in the middle of it:
   its first line aligns to the figure's x-height, and a shorter measure gives it
   three lines against the figure block's three */
.metric p:not(.metric__n):not(.metric__l){
  font:400 13.5px/1.62 var(--text);color:var(--ink-body);margin:0;
  max-width:54ch;padding:4px 0 0 44px;color:var(--ink-on-loden);
  border-left:1px solid #3c4a3a;
}

/* nine domains as a ruled index, not nine tiles: the reader is checking coverage,
   and an ink rule with hairline rows scans faster than a grid of cards */
.domains{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:auto;gap:0 40px;
  margin-top:var(--gap-block);padding-top:18px;
  border-top:1px solid var(--ink);
}
/* These must follow the base rule above, not sit with the other breakpoints:
   at equal specificity the later rule wins, so declared earlier they never
   applied and the grid stayed three columns on a phone - 83px per column,
   pushing the page 18px wider than the screen. */
@media (max-width:820px){
  .domains{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px}
}
@media (max-width:560px){
  .domains{grid-template-columns:1fr;gap:0}
}
.domain{border:0;background:none;border-bottom:1px solid var(--rule)}
/* the glyph sits in a paper field on the sand card — the same 54px inset the
   three AI roles and the portal columns use */
/* the glyph sits inline with its title — no tile, so the index stays compact */
.ico{display:block;line-height:0;margin:2px 0 0}
.ico svg{width:20px;height:20px;display:block}
.domain{padding:16px 0 20px;display:grid;grid-template-columns:22px minmax(0,1fr);gap:0 12px;align-items:start}
.domain > h3{font:400 15.5px/1.3 var(--display);letter-spacing:-.006em;color:var(--ink);margin:0;grid-column:2}
.domain p{font:400 12.5px/1.58 var(--text);color:var(--ink-muted);margin:7px 0 0;grid-column:2}

/* numbered process rail */
/* a real sequence, so the run is earned: a gradient bar opens it and each step
   carries the next segment of sage into loden */
.rail__bar{
  height:2px;margin-top:var(--gap-block);
  background:linear-gradient(90deg,#c9d2b9,#7fa075 46%,var(--loden));
}
.rail{margin-top:var(--gap-block)}
.rail__bar + .rail{margin-top:0}
/* the mark column and the bar-dependent spacing exist only where the markup does:
   the solution pages have span/* the solutions rail carries a mark + number + title + copy; the implementation
   rails carry number + title + copy and their own top rule */
.rail__row{
  display:grid;grid-template-columns:40px 210px 1fr;gap:0 22px;align-items:start;
  padding:13px 0 19px;border-top:1px solid var(--rule);
}
.rail__row:has(.rail__mark){grid-template-columns:3px 40px 210px 1fr}
/* the bar replaces this row's hairline, so it needs the interval a row would have had */
.rail:has(.rail__mark) .rail__row:first-child{border-top:0;padding-top:33px}
.rail__mark{display:block;width:3px;height:100%;min-height:34px}
.rail__row--a .rail__mark{background:linear-gradient(180deg,#c9d2b9,#a8b58c)}
.rail__row--b .rail__mark{background:linear-gradient(180deg,#a8b58c,#93b083)}
.rail__row--c .rail__mark{background:linear-gradient(180deg,#93b083,#7fa075)}
.rail__row--d .rail__mark{background:linear-gradient(180deg,#7fa075,#3f7a4a)}
.rail__row--e .rail__mark{background:linear-gradient(180deg,#3f7a4a,#2d6338)}
.rail__row--f .rail__mark{background:linear-gradient(180deg,#2d6338,var(--loden))}
.rail__row h3{font:400 15.5px/1.3 var(--display);letter-spacing:-.006em;color:var(--ink);margin:0}
.rail__n{font:400 15px/1.5 var(--text);letter-spacing:.04em;color:var(--ink-faint);margin:0}
.rail__row p:not(.rail__n){font:400 13.5px/1.55 var(--text);color:var(--ink-muted);margin:0}

/* platform cards */
.plat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:var(--gap-block)}
.plat > div{border:1px solid var(--rule);background:var(--paper);padding:22px;display:flex;flex-direction:column;gap:10px}
.plat p{font:400 12.5px/1.55 var(--text);color:var(--ink-muted);margin:0;flex:1}

/* proof */
.proof{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center;margin-top:var(--gap-block);border:1px solid var(--rule);background:var(--paper);padding:30px}
.proof blockquote{margin:0;font:400 19px/1.5 var(--display);color:var(--ink)}
.proof__metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}
.proof__metrics p:first-child{font:400 26px/1 var(--display);color:var(--ink);margin:0}
.proof__metrics p:last-child{font:400 11.5px/1.4 var(--text);color:var(--ink-muted);margin:8px 0 0}

@media (max-width:1100px){
  .stat__n{font-size:46px}
  .plat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-hero h1{font-size:38px}
}
@media (max-width:900px){
  .subnav{position:static}
  .quad{grid-template-columns:1fr;grid-template-rows:none;gap:10px}
  .quad > div{grid-row:auto;grid-template-rows:auto auto}
  .ba{grid-template-columns:1fr;gap:0}
  .ba__k--after{margin-top:26px}
  .ba__b,.ba__a{padding:12px 0}
  .metric{grid-template-columns:1fr;gap:18px}
  .rail__row{grid-template-columns:3px 1fr;gap:0 16px}
  .rail__row h3,.rail__row p{grid-column:2}
  .rail__n{margin-bottom:4px}
  .proof{grid-template-columns:1fr;gap:26px}
}
@media (max-width:820px){
  }
@media (max-width:620px){
  .plat{grid-template-columns:1fr}
  .page-hero h1{font-size:30px}
  .proof__metrics{grid-template-columns:1fr;gap:14px}
}

/* mobile navigation panel — built by nav.js from the header links */
.nav-mobile{display:none}
@media (max-width:820px){
  .nav-mobile{display:block;background:var(--paper);border-bottom:1px solid var(--rule);padding:8px var(--gutter) 22px;position:sticky;top:var(--headh-sm);z-index:19;max-height:calc(100vh - var(--headh-sm));overflow-y:auto}
  .nav-mobile[hidden]{display:none}
  .nav-mobile__main{display:flex;flex-direction:column}
  .nav-mobile__main a{font:400 21px/1.2 var(--display);color:var(--ink);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--rule)}
  .nav-mobile__sub{display:flex;flex-direction:column;padding:4px 0 10px 18px;border-bottom:1px solid var(--rule)}
  .nav-mobile__sub a{font:400 14px/1.4 var(--text) !important;color:var(--ink-muted) !important;padding:9px 0 !important;border-bottom:0 !important}
  .nav-mobile__sub a:hover{color:var(--ink) !important}
  .nav-mobile__util{display:flex;flex-wrap:wrap;gap:20px;padding-top:18px}
  .nav-mobile__util a{font:500 13px var(--text);color:var(--ink-muted);text-decoration:none}
  .nav-mobile a:hover{color:var(--green)}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .stat__n{font-size:46px}
  :root{--gutter:40px;--section-y:72px}
  h1,.metric__n{font-size:46px}
  h2{font-size:33px}
  .designers:not(.designers--tiles),.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards .card:nth-child(3n+1){border-left:1px solid var(--rule);padding-left:28px}
  .cards .card:nth-child(2n+1){border-left:0;padding-left:0}
  .quotes{gap:0}
}
@media (max-width:820px){
  .site-nav,.site-head .util,.site-head .fp-divider{display:none}
  .nav-menu{display:none}
  .nav-toggle{display:inline-flex;margin-left:auto;background:none;border:0;font:500 12.5px var(--text);color:var(--ink);cursor:pointer}
}
@media (max-width:940px){
  .trust{grid-template-columns:1fr;gap:32px}
}
/* keep the full desktop menu down to the collapse point by tightening the bar */
@media (max-width:1100px) and (min-width:821px){
  .site-head{gap:20px}
  .site-nav{gap:19px;font-size:12.5px}
  .site-head .util{font-size:12px}
}
/* below ~1000px the five nav items, both utilities and the CTA no longer fit.
   The nav and the demo CTA are what matter; Contact us lives in the footer and
   in the nav menus, so it and its divider stand down here. */
@media (max-width:1000px) and (min-width:821px){
  .site-head{gap:14px}
  .site-nav{gap:13px}
  .site-head__word{font-size:19px}
  .site-head__mark{height:28px}
  .site-head .util--contact,.site-head .fp-divider{display:none}
}
@media (max-width:860px){
  .stats > div{padding:0}
  .stats:not(.stats--4){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px 24px}
  .stats:not(.stats--4) > div + div{border-left:0;border-top:0;padding-left:0}
  .stats--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
  .stats--4 > div,.stats--4 > div + div{border-left:0;border-top:0;padding:0}
  /* the benefit figure reads as part of the claim, not as a pull-quote under it */
.claim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,270px);gap:0 56px;align-items:start}
.claim__fig{border-top:1px solid var(--ink);padding-top:16px}
.claim__n{
  font:400 44px/1 var(--display);letter-spacing:-.026em;color:var(--green);
  margin:0;font-variant-numeric:tabular-nums;
}
.claim__l{font:400 12.5px/1.5 var(--text);color:var(--ink-muted);margin:12px 0 0}
@media (max-width:820px){
  .claim{grid-template-columns:1fr;gap:26px}
  .claim__fig{max-width:none}
}

  .chain{grid-template-columns:1fr;gap:34px}
  .chain__arrow{display:none}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 38px}
  .stages{grid-template-columns:1fr;gap:14px}
  .stages .fp-arrow{display:none}
}

@media (max-width:820px){
  .link-arrow,.link{padding:8px 0;display:inline-block}
}
@media (max-width:620px){
  :root{--gutter:22px;--section-y:56px}
  h1{font-size:34px;max-width:none}
  h2{font-size:26px}
  .lede{font-size:15.5px}
  .designers,.cards,.quotes,.chain,.steps{grid-template-columns:1fr}
  .cards .card{border-left:0 !important;padding-left:0 !important;padding-right:0}
  .step + .step::before{display:none}
  .steps__foot{flex-direction:column;align-items:flex-start;gap:14px}
  .stats:not(.stats--4){grid-template-columns:1fr;gap:22px}
  .fp-btn{width:100%;text-align:center}
  .hero__actions{gap:18px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}


/* ---------- 404 ----------
   404c: centred on its own axis, no image, the number first and largest so the
   code needs no explaining. */
.p404{padding-top:132px;padding-bottom:132px;text-align:center}
.p404 .wrap{display:flex;flex-direction:column;align-items:center}
.p404__n{
  font:400 clamp(76px,9vw,124px)/1 var(--display);letter-spacing:-.04em;
  color:var(--ink);margin:0 0 10px;font-variant-numeric:tabular-nums;
}
.p404 h1{max-width:22ch;margin:0}
.p404 .lede{max-width:48ch;margin-top:16px}
.p404__acts{margin-top:36px;justify-content:center}
@media (max-width:640px){
  .p404{padding-top:88px;padding-bottom:96px}
}

/* the primary CTA never wraps */
.fp-btn{white-space:nowrap}

/* The header is a nowrap flex row whose children do not shrink, so below about
   460px the brand, the demo link and the burger stop fitting and the row runs
   off the right. html clips the overflow rather than scrolling it, so on a
   phone the burger simply is not reachable: at 375px its centre is off screen
   and at 360px it is gone entirely, leaving no way to open the navigation.
   The overflow also makes mobile Safari widen the layout viewport to fit the
   row, which is what puts a blank band down the side of every page.
   nav.js clones the demo link into the mobile panel, so hiding it here does
   not lose the route. */
@media (max-width:459px){
  .site-head{gap:14px;padding-left:var(--gutter);padding-right:var(--gutter)}
  .site-head .nav-cta-link{display:none}
}
.nav-mobile__cta{margin-top:16px}
.nav-mobile__cta .nav-cta-link{display:inline-block}

/* Grid and flex items default to min-width:auto, so they refuse to shrink
   below their content. Inside the narrow take frame that forced a 305px track
   into a 240px box and pushed /platform/studio past a 320px screen. */
@media (max-width:620px){
  .take__stage,.sd__map,.take__frame{min-width:0}
  /* the value bar is a fixed 220px track plus a 24px gap, which cannot fit a
     240px content box; minmax lets it give way instead of overflowing */
  .sd__calc div{grid-template-columns:1fr minmax(0,120px);gap:14px}
}

/* The three-part band (Data acquisition / Calculations / Analysis) stayed a
   three-column grid on phones: 110px a column, so the headings collided and
   the body text wrapped to one or two words a line. It reads as a stack. */
@media (max-width:700px){
  .chain__three{grid-template-columns:minmax(0,1fr);gap:0}
  /* the column separator becomes a row rule. Specificity has to match
     .chain__step + .chain__step, which sets the left border and indent. */
  .chain__three .chain__step,
  .chain__three .chain__step + .chain__step{
    border-left:0;padding-left:0;padding-right:0;
    border-top:1px solid var(--rule);padding-top:18px;margin-top:18px
  }
  .chain__three .chain__step:first-child{border-top:0;padding-top:0;margin-top:0}
}

/* .quad:has(> div:nth-child(3):last-child) forces three columns for the
   three-up variant. :has() takes its argument's specificity, so that rule
   outranks the plain .quad mobile override and kept three 104px columns on a
   phone - text shredded to two words a line and spilling past the box edge.
   The override has to match that specificity to win. */
@media (max-width:700px){
  .quad,
  .quad:has(> div:nth-child(3):last-child){
    grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:10px
  }
  .quad > div,
  .quad:has(> div:nth-child(3):last-child) > div{grid-row:auto;grid-column:auto}
}

/* Same :has() trap as .quad. .rail__row:has(.rail__mark) sets a four-track
   template and outranks the plain .rail__row mobile override, so on a phone
   the heading and body sat in a 40px column - one word per line, on all seven
   solution pages. The override must carry the same specificity. */
@media (max-width:700px){
  .rail__row,
  .rail__row:has(.rail__mark){grid-template-columns:3px minmax(0,1fr);gap:0 14px}
  .rail__row > *{grid-column:2;min-width:0}
  .rail__row > .rail__mark{grid-column:1;grid-row:1 / -1}
  .rail__n{margin-bottom:4px}
}

/* heroPan hardcodes translateX(126px), which places the image inside the
   right-hand column of the desktop two-column hero. On a phone the media
   spans the full width, so that same 126px shifts the image off its own
   frame and leaves a blank band down the left. Same zoom, no offset. */
@keyframes heroPanMobile{
  from{transform:scale(1.06)}
  to{transform:scale(1.12)}
}
@media (max-width:860px){
  .hero__media img{animation-name:heroPanMobile}
}