/* Gas Connect Limited — extracted from Gas_Connect.html (single-file build).
   source <style> block(s) 3,4 of 19
   Load order is significant: see index.html. */

/* ---- source <style id="svc-rows"> ---- */
/* ===== Services as editorial rows =====
   Replaces the orbit diagram and the accordion: each line gets one row —
   copy on one side, a three-photo mosaic on the other, sides alternating so
   the section reads as a rhythm rather than five identical cards. One tall
   photograph carries each line; the two stacked ones supply context. */
.svcrows{display:flex;flex-direction:column;margin-top:var(--sp-3)}
.svcrow{display:grid;grid-template-columns:minmax(17rem,.86fr) 1.14fr;
  gap:0 var(--sp-4);align-items:center;padding:var(--sp-4) 0;border-top:1px solid var(--line)}
.svcrow:last-child{border-bottom:1px solid var(--line)}
.svcrow--flip{grid-template-columns:1.14fr minmax(17rem,.86fr)}
.svcrow--flip .svcrow__body{order:2}
.svcrow--flip .svcrow__mosaic{order:1}
.svcrow__body{display:flex;flex-direction:column;gap:.9rem;max-width:46ch}
.svcrow__meta{display:flex;align-items:baseline;gap:.9rem;font-family:'IBM Plex Mono',monospace;
  font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.svcrow__tag{color:var(--ink-3)}
.svcrow__title{font-family:'Fraunces',serif;font-optical-sizing:auto;font-weight:400;
  font-size:clamp(1.35rem,1.05rem + .8vw,1.95rem);line-height:1.2;color:var(--ink);text-wrap:balance}
.svcrow__lede{font-size:var(--t-body);line-height:1.62;color:var(--ink-2);text-wrap:pretty}
.svcrow__subs{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-top:.2rem}
.svcrow__subs li{display:grid;grid-template-columns:1.5rem 1fr;gap:.6rem;
  font-size:var(--t-caption);color:var(--ink)}
.svcrow__k{font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--green);padding-top:.15rem}
.svcrow__cta{display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;
  font-family:'IBM Plex Mono',monospace;font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-deep);margin-top:.4rem;text-decoration:none}
.svcrow__cta:hover{color:var(--ink)}
.svcrow__mosaic{display:grid;grid-template-columns:1.25fr .75fr;
  grid-template-rows:1fr 1fr;gap:1.15rem;height:clamp(19rem,26vw,25rem)}
.svcrow--flip .svcrow__mosaic{grid-template-columns:.75fr 1.25fr}
/* frames: a hairline in the paper's own ink at low alpha, plus an inner
   paper-coloured inset so the edge reads as a mount rather than a border.
   No radius and no drop shadow — the section is set on lines elsewhere, and
   a shadow would make five rows of photos float off the page. */
.svcrow__ph{position:relative;overflow:hidden;background:var(--card);margin:0;
  padding:.45rem;border:1px solid var(--line);transition:border-color .5s var(--ease)}
.svcrow__ph::after{content:"";position:absolute;inset:.45rem;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(250,248,242,.32)}
.svcrow:hover .svcrow__ph{border-color:var(--line-strong)}
.svcrow__ph--lg{grid-row:1 / span 2}
.svcrow--flip .svcrow__ph--lg{grid-column:2;grid-row:1 / span 2}
.svcrow--flip .svcrow__ph:nth-of-type(2){grid-column:1;grid-row:1}
.svcrow--flip .svcrow__ph:nth-of-type(3){grid-column:1;grid-row:2}
.svcrow__ph .photo{position:absolute;inset:.45rem;background-size:cover;background-position:center;
  --duo:.12;--sat:.92;--pb:1;--pc:1.02;transition:transform 1.1s var(--ease)}
.svcrow:hover .svcrow__ph .photo{transform:scale(1.03)}
@media (max-width:900px){
  .svcrow,.svcrow--flip{grid-template-columns:1fr;gap:var(--sp-2)}
  .svcrow--flip .svcrow__body{order:1}
  .svcrow--flip .svcrow__mosaic{order:2}
  .svcrow__body{max-width:none}
  .svcrow__mosaic,.svcrow--flip .svcrow__mosaic{height:14rem;grid-template-columns:1.3fr .7fr}
  .svcrow--flip .svcrow__ph--lg{grid-column:1}
  .svcrow--flip .svcrow__ph:nth-of-type(2){grid-column:2;grid-row:1}
  .svcrow--flip .svcrow__ph:nth-of-type(3){grid-column:2;grid-row:2}
}

/* ---- source <style id="svc-rows-tail"> ---- */
/* ================= 01 ABOUT ================= */
/* Text column carries the wider share now: the copy measure was ending ~490px
   while the figure column held a square image inside a 4:3 box, so ~25% of that
   column rendered as empty paper between the last word and the tree. Wider text
   column + tighter gap + square figure box closes that channel from both sides. */
.origin{display:grid;grid-template-columns:1.04fr .96fr;grid-template-areas:"intro fig" "foundation fig";gap:var(--sp-3);align-items:center;position:relative}
.origin__intro,.origin__foundation{position:relative;z-index:2}
.origin__intro{grid-area:intro}
.origin__foundation{grid-area:foundation}
.origin__intro .lead,.origin__foundation .lead{max-width:64ch;text-wrap:pretty}

/* Partner lede photo: a full-width band between the thesis paragraph and the
   "what you get" list — width and aspect-ratio only, no height:100% fight,
   no grid row to overflow. Framed (bordered plate), medium duotone — this is
   a proof shot (an HSE-governed site), not the About section's atmosphere image. */
.partnerrow{display:grid;grid-template-columns:1.06fr .94fr;gap:var(--sp-3);align-items:center;margin-top:var(--sp-2)}
/* Bleed the figure toward the page edge: the asset's own alpha carries a wide
   transparent margin, so at column width the visible hands read small with a
   dead channel between them and the list. Growing the box grows the hands and
   pushes them across that channel; right-anchoring keeps them near the list. */
.partnerlede__fig{margin-left:calc(-.75 * var(--gutter))}
/* frameless, same dissolve treatment as the About flame-hands figure: the
   asset's own alpha already fades to transparent at the edges, so no border,
   no shadow, no duotone tint \u2014 anything here would just re-draw a box around
   an image designed to not have one. contain (not cover) so nothing crops. */
.partnerlede__fig .frame{width:100%;aspect-ratio:1/1;border-radius:0;
  overflow:visible;border:0;box-shadow:none;background:none}
.partnerlede__fig .photo{mix-blend-mode:normal;--duo:0;--sat:1;--pb:1;--pc:1.05;
  background-size:contain;background-repeat:no-repeat;background-position:right center}
/* The thesis above this row: 64ch was breaking mid-column and leaving a wedge of
   paper to its right. Wider measure + pretty rag fills the line to the row edge. */
#investors .thesis[data-aud="partner"]{max-width:74ch;text-wrap:pretty}
.partnerrow .explore--measure{max-width:none}
@media (max-width:900px){
  /* grid + align-items:center put the figure exactly in the middle of the
     row's full height — but the row height is set by the four-item list
     next to it, so the image ended up floating in the dead centre of a
     mostly-empty column, disconnected from anything above or below it
     (confirmed in testing). The figure already sits before the list in the
     markup, so a real float works here — same trick that already reads
     well on the investor lede figure below: text wraps around the top of
     the image, then the list continues full width once it clears. */
  .partnerrow{display:flex;flex-direction:column;gap:1.3rem}
  .partnerlede__fig{float:none;width:100%;max-width:none;margin:0}
  .partnerlede__fig .frame{aspect-ratio:16/10;overflow:visible}
  .partnerlede__fig .photo{background-size:contain;background-position:center center}
  #investors .thesis[data-aud="partner"]{max-width:64ch}
}
.vm{margin-top:var(--sp-4);display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);
  border-top:1px solid var(--line);padding-top:var(--sp-3)}
.vm div{display:block}
.vm .mono{color:var(--green);display:block;margin-bottom:.55rem}
.vm p{font-size:var(--t-body);color:var(--ink-2)}

/* Investor "Why this platform" lede: was a single full-width text column
   (eyebrow → h2 → two paragraphs) running the full measure with no visual
   at all — a long unbroken slab of copy and a lot of flat paper either side
   of the line length. Same grid shape as .origin / .partnerrow so the three
   lens sections share one visual language: text column left, a frameless
   feathered figure right, bleeding slightly past the column into the page's
   own margin the way the About and Partner figures already do. The figure
   is intentionally not framed/bordered/duotoned — it dissolves into the
   paper rather than sitting in a boxed plate, so drop in an asset whose own
   alpha already fades at the edges (matching earth-globe-feathered.png's
   treatment above) rather than a hard-edged photo. */
/* align-items:stretch (not center) — with :center, each column was only as
   tall as its own content, so the square photo (shorter than the two-
   paragraph text column) just sat at its own natural height starting from
   the row's top edge: no row height for it to actually center within.
   :stretch makes both columns fill the full row height; centering then
   happens inside the figure column itself (see below), which is what
   actually pushes the photo down into the middle of the leftover space
   rather than flush against the top. */
/* Investor "Why this platform" lede, take 2: the two-column grid put the
   headline and the photo side-by-side at equal height, which meant the
   headline was locked to the photo's vertical position. Dropped the grid —
   this is now plain block flow. The headline (eyebrow + h2) comes BEFORE the
   floated figure in source order, so it renders full-width, left-aligned,
   above the photo, completely unaffected by it. The figure is then floated
   left with shape-outside tracing a circle roughly matching the photo's own
   round silhouette, so the two paragraphs that follow don't just sit in a
   rigid column next to it — line lengths shrink and grow to actually curve
   around the shape, the way body text wraps a drop-cap image in print. */
/* .lead's sitewide max-width:56ch (set for ordinary full-width reading
   columns) was capping these paragraphs on top of the shape-outside wrap —
   the two constraints compounded, squeezing the first paragraph into a much
   narrower, taller column than the available wrap space actually allowed,
   then snapping back to a visibly wider block the moment the second
   paragraph clears the float. Letting these paragraphs use the full width
   the shape hands them removes that jump and lets the curve read smoothly. */
/* max-width:none and justify both existed only to serve the circular
   shape-outside wrap (justify hid the uneven word gaps a curving
   measure produces). With the float gone there is nothing to wrap, so
   these return to the sitewide reading measure and plain left align,
   matching the .thesis paragraph directly above them. */
/* the wrap width governs the measure now, so no ch cap; left-aligned because
   justifying a measure that changes on every line produces rivers */
.investorlede .lead,.investorlede .thesis{max-width:none;hyphens:manual;
  text-align:left;text-wrap:pretty}
/* 64ch, not the sitewide 56ch: .thesis directly above these uses 64ch and
   sits at almost the same font-size (20.35px vs 20.22px), so 64ch resolves
   to the same 832px. All three paragraphs in this block now share one left
   edge AND one right edge, which is what makes them read as a single
   argument instead of three stacked fragments. */
/* Was floated left with shape-outside tracing a circle, so the copy
   curved around it. That gave three paragraphs three different shapes:
   the thesis above at a 56ch measure, this one justified and tapering
   around the circle, and the last one full width again below the float
   -- they read as three unrelated blocks rather than one argument. The
   figure is now its own placed block AFTER the copy, so all three
   paragraphs share one left edge and one measure and the illustration
   reads as the summary of the build-out they describe. */
/* Floated left and placed AFTER the opening paragraph, so the copy runs
   over the top of the photo, hugs its side, and closes underneath it.
   shape-outside traces an ellipse rather than the original circle: the
   artwork is a landscape cluster in a 4/3 frame, so a circle inscribed in
   that box held the text away from a wedge of empty space either side of
   the art. An ellipse follows the box, and so the art, far more closely.
   shape-margin keeps the line ends off the artwork edge. */
/* Adopts the About sections handling, which does this far better than the
   float did. Two things make it work there: the figure is absolutely
   positioned across the full height of the block (top:0/bottom:0) so it
   scales with the copy instead of being a fixed-size object dropped into
   it, and it bleeds past the right gutter so the artwork reads at full
   size rather than being boxed inside the text measure. The float version
   could not do either: a float has to fit inside the block, so the more
   room the picture took the more it squeezed the copy, and both ended up
   cramped. Here they no longer compete for the same width. */
/* The contradiction behind every earlier attempt: a float takes its width OUT
   of the text block, so enlarging the picture always squeezed the copy, and
   capping the copy for a readable measure always shrank the picture. They were
   competing for one width. Switching to a grid cured the squeeze but removed
   the wrap -- the copy became a column beside the artwork, not around it.

   Resolved by taking the picture width from the GUTTER rather than from the
   text. The block keeps a capped, readable measure; the figure bleeds left
   past that measure by a full gutter, so it grows outside the column instead
   of inside it. The copy wraps its contour and neither has to give. */
.investorlede{display:block;max-width:58rem;position:relative}
.investorlede::after{content:"";display:block;clear:both}
.investorlede>p + p{margin-top:var(--sp-2)}
.investorlede__fig{float:left;width:clamp(280px,52%,440px);
  margin-left:calc(-1 * var(--gutter));margin-right:var(--sp-2);margin-bottom:.6em;
  shape-outside:ellipse(49% 49% at 50% 50%);shape-margin:.95rem;
  position:static;top:auto;bottom:auto;left:auto;right:auto;
  display:block;align-items:normal;pointer-events:auto;z-index:auto;max-width:none}
/* 4/5 (portrait) was right when this sat as a tall float beside curving
   copy. As a centred block under the copy the art is landscape, so a
   portrait frame plus background-size:contain letterboxed it with dead
   space above and below. 4/3 fits the illustration far more closely, and
   contain still guarantees nothing is cropped. */
/* margin-right:auto (not left) so the frame sits at the outer end of its
   box: the box bleeds past the left gutter, so the artwork has to hug
   that edge for the bleed to read. Mirrored from .origin, which pushes
   its frame the other way. */
.investorlede__fig .frame{aspect-ratio:4/3;width:100%;height:auto;border:0;box-shadow:none;
  background:none;border-radius:0;overflow:visible}
.investorlede__fig .photo{mix-blend-mode:normal;--duo:0;--sat:1;--pb:1;--pc:1.05;
  background-size:contain;background-repeat:no-repeat;background-position:center center}
.investorlede__fig.reveal{transform:translateY(20px) scale(.96);transition:opacity 1s ease,transform 1s var(--ease)}
.investorlede__fig.reveal.in{transform:none}

/* Investor lede wrap, tuned. Three complaints, three causes:
   1. Ragged rag — a centred ellipse curves most steeply exactly where the
      copy runs, so every line started at a different indent. Pushing the
      ellipse's centre left and widening it presents its FLATTEST flank to
      the text: the contour still follows the artwork, but line starts move
      by a few px rather than tens. hyphens:auto absorbs what's left.
   2. Disconnected — a full-gutter bleed plus .95rem shape-margin parked the
      photo out on bare paper with a channel between it and the copy. Half
      the bleed and a tighter shape-margin let the two overlap.
   3. Vertical alignment — 4/3 + contain letterboxed the landscape art, so
      the box's top edge sat well above the artwork while the copy aligned to
      the box. 5/4 with the art anchored to the bleed edge, plus a small
      negative top margin, lines the artwork's optical top up with the first
      line's cap height. */
/* ---- investor lede: dominant plate + short contour lead ----
   The artwork is a feathered cut-out, so it has no edge to butt a text column
   against — a grid always left a seam of bare paper between them. Here the
   picture leads at full size, bleeding past the gutter, and only the headline
   plus the opening paragraph hug its silhouette (generous shape-margin, so
   they sit near it without crowding it). The detail then clears the float and
   finishes as one clean column underneath. */
.investorlede--contour{display:grid;grid-template-columns:1.08fr .92fr;
  gap:var(--sp-3) var(--sp-4);align-items:center;max-width:none;margin-top:var(--sp-2)}
.investorlede--contour::after{content:none;display:none}
.investorlede--contour .il-plate{float:none;width:100%;margin:0 0 0 calc(-1 * var(--gutter));
  shape-outside:none;shape-margin:0;grid-row:1 / span 4;grid-column:1}
.investorlede--contour .il-lab,
.investorlede--contour .il-claim,
.investorlede--contour .thesis,
.investorlede--contour .il-tail{grid-column:2}
.investorlede--contour .il-plate .frame{width:100%;height:auto;aspect-ratio:1/1;
  border:0;box-shadow:none;background:none;border-radius:0;overflow:visible}
.investorlede--contour .il-plate .photo{mix-blend-mode:normal;--duo:0;--sat:1;--pb:1;--pc:1.05;
  background-size:contain;background-repeat:no-repeat;background-position:center center}
.investorlede--contour .il-plate.reveal{transform:translateY(20px) scale(.96);
  transition:opacity 1s ease,transform 1s var(--ease)}
.investorlede--contour .il-plate.reveal.in{transform:none}
.investorlede--contour .il-lab{font-family:'IBM Plex Mono',monospace;font-size:var(--t-label);
  letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:var(--sp-2)}
/* the claim, lifted out of the paragraph it used to sit inside */
.investorlede--contour .il-claim{font-family:'Fraunces',serif;font-optical-sizing:auto;
  font-weight:400;font-size:clamp(1.9rem,1.3rem + 1.5vw,2.7rem);line-height:1.14;
  letter-spacing:-.012em;color:var(--ink);margin:0 0 var(--sp-2);text-wrap:balance}
/* one straight column beside the picture: the contour wrap staircased every
   line start and dropped the last paragraph under the artwork, so the copy is
   a plain block now — both edges straight, which is also what makes justified
   setting legible here. Centred against the plate so no void opens below. */
.investorlede--contour .thesis{margin-top:0;font-size:clamp(1.08rem,1.02rem + .32vw,1.26rem);
  line-height:1.6;color:var(--ink-2);max-width:none;text-align:justify;text-justify:inter-word;
  text-wrap:pretty;hyphens:auto}
/* the copy used to clear the picture, which left a tall void of paper between
   the opening block and the closing one — the float is taller than the lines
   beside it. The tail now keeps flowing in the same column instead, wrapping
   down the cluster's right side and closing under it, so the void is filled
   by the argument itself. */
.investorlede--contour .il-tail{clear:none;display:block;padding-top:0;margin-top:var(--sp-2);border-top:0}
.investorlede--contour .il-tail .lead{margin-top:var(--sp-2);font-size:clamp(1.02rem,.98rem + .24vw,1.14rem);
  line-height:1.64;color:var(--ink-2);max-width:none;text-align:justify;text-justify:inter-word;
  text-wrap:pretty;hyphens:auto}
@media (max-width:900px){
  .investorlede--contour{grid-template-columns:1fr}
  .investorlede--contour .il-plate{width:100%;max-width:420px;
    margin:0 auto var(--sp-3);grid-row:auto;grid-column:1}
  .investorlede--contour .il-lab,
  .investorlede--contour .il-claim,
  .investorlede--contour .thesis,
  .investorlede--contour .il-tail{grid-column:1}
  .investorlede--contour .thesis{text-align:left;hyphens:manual}
  .investorlede--contour .il-tail{grid-template-columns:1fr}
  .investorlede--contour .il-tail .lead{max-width:none;text-align:left;hyphens:manual}
}
/* Second investor-lede figure: the "before" contrast shot (scattered charcoal
   and firewood piles). Floats right into the gap that opens up below the
   first paragraph, once the left figure went taller than the text beside it —
   clear:both on the second paragraph (below) keeps it clear of both floats. */
.investorlede__fig2{float:right;width:clamp(260px,34vw,380px);
  margin:var(--sp-2) 0 var(--sp-2) var(--sp-2)}
.investorlede__fig2 .frame{aspect-ratio:1343/1043;width:100%;height:auto;border:0;box-shadow:none;
  background:none;border-radius:0;overflow:visible}
.investorlede__fig2 .photo{mix-blend-mode:normal;--duo:0;--sat:1;--pb:1;--pc:1.05;
  background-size:contain;background-repeat:no-repeat;background-position:center center}
.investorlede__fig2.reveal{transform:translateY(20px) scale(.96);transition:opacity 1s ease,transform 1s var(--ease)}
.investorlede__fig2.reveal.in{transform:none}
/* Quote box moved off the icon-cluster's left column and floated right
   instead — it now queues into the open gap on the right edge, clear of
   the photo, rather than crowding in beside it. Boxed (not just a rule on
   the left, like the sitewide .pullquote) since this one has to read as a
   distinct object sitting in empty space, not a margin note beside a full
   column of text. */
.investorlede__quote{float:right;width:clamp(320px,38vw,440px);
  margin:3.2em 0 var(--sp-2) var(--sp-2);
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:var(--sp-3) var(--sp-3) var(--sp-2);position:relative}
.investorlede__quote::before{content:"“";position:absolute;top:-.1em;left:.5rem;
  font-family:'Fraunces',serif;font-style:italic;font-size:3.4rem;line-height:1;
  color:var(--green);opacity:.35}
.investorlede__quote{font-family:'Fraunces',serif;font-optical-sizing:auto;font-style:italic;
  font-weight:400;font-size:clamp(1.1rem,.95rem + .6vw,1.35rem);line-height:1.34;
  color:var(--ink-2);text-wrap:balance}
.investorlede__quote.reveal{transform:translateY(20px) scale(.96);transition:opacity 1s ease,transform 1s var(--ease)}
.investorlede__quote.reveal.in{transform:none}
@media (max-width:900px){
  .investorlede__quote{float:none;width:100%;margin:0 0 var(--sp-2)}
  .investorlede{grid-template-columns:1fr;grid-template-areas:"copy"}
  .investorlede__fig{position:static;left:auto;right:auto;display:block;
    width:100%;max-width:420px;margin:var(--sp-2) auto var(--sp-3)}
  .investorlede__fig .frame{width:100%;margin-left:0}
}
@media (max-width:900px){
  .investorlede__fig2{float:none;width:100%;max-width:320px;margin:0 auto var(--sp-2)}
}
@media (max-width:900px){
  /* the curvy shape-outside wrap reads as cramped/ragged at narrow widths,
     but a plain rectangular float works fine here — this figure already
     sits before the paragraph in the markup (unlike About/Partner, which
     needed real grid columns instead), so a normal float genuinely wraps
     the text around it rather than just sitting stacked above it. */
  /* this rule sits after the stacking block above and had max-width:none, so
     it was cancelling that cap and letting the artwork run the full column
     width -- 761px tall-ish at 899px, dominating the section. Same intent,
     capped. */
  .investorlede__fig{float:none;width:100%;max-width:420px;
    margin:var(--sp-2) auto var(--sp-3);shape-outside:none}
  /* contain, not an oversized background — nothing gets cropped */
  .investorlede__fig .frame{overflow:visible}
  .investorlede__fig .photo{background-size:contain}
  /* justify was tuned for the desktop shape-outside wrap, where variable line
     lengths hide the odd word-gap. A plain rectangular float at mobile width
     has the same problem — left-align instead. */
  .investorlede .lead{text-align:left;hyphens:none}
  /* the first .lead's inline margin-top exists purely to clear the taller
     desktop float (photo + heading together). The mobile float is shorter
     and sits right at the paragraph's own top, so that offset is dead
     weight here — text should start flush against the top of the image. */
  .investorlede__fig + .lead{margin-top:0 !important}
}
/* About figure: frameless — light areas dissolve into the paper, edges feather out,
   so the image blends with the page instead of sitting in a plate.
   height:100% (not a fixed aspect-ratio) lets it span the full row, matching the
   text column instead of sitting as a smaller boxed square beside it.
   margin-right bleeds it to the page's own right edge — .page has overflow:hidden,
   so this is safe: it clips at the border box, not the wrap's centred content box. */
/* Pulled off the grid and onto an absolute layer behind the text (z-index
   below .origin > div:first-child) so it can run larger than the text
   column would allow without disturbing the text's own layout. It's
   allowed to slide left under the copy — safe because the source PNG's
   own alpha already fades to transparent at its edges, and the text sits
   on a higher z-index above it, so legibility is untouched. */
.origin__fig{position:absolute;top:0;bottom:0;left:34%;right:calc(-1 * var(--gutter) - 1.5rem);
  z-index:1;display:flex;align-items:center;pointer-events:none}
/* 1/1 (was 4/3): with background-size:contain a square asset in a 4:3 box is
   height-limited, so it drew at 75% of the column width and sat centred —
   white on both sides. A square box lets it draw at full column width. */
.origin__fig .frame{aspect-ratio:1/1;width:72%;height:auto;margin-left:auto;border:0;box-shadow:none;background:none;border-radius:0;overflow:visible}
/* The photo file's own alpha already fades its edges to transparent — the
   CSS mask that used to sit here was left over from before that, and
   stacking a second fade on top of the image's own was over-cropping the
   visible hands/flame and reading as a washed-out overlay. Removed both:
   mask-image (redundant with real alpha) and the duotone tint (--duo:0). */
.origin__fig .photo{mix-blend-mode:normal;--duo:0;--sat:1;--pb:1;--pc:1.05;
  background-size:contain;background-repeat:no-repeat;background-position:left center}
/* Slightly slower + a touch of scale (vs. the generic .reveal translateY-only
   fade) so the tree photo reads as growing into the page rather than sliding
   up like a UI card — ties it to the hero photo dissolving in above it. */
.origin__fig.reveal{transform:translateY(20px) scale(.96);transition:opacity 1s ease,transform 1s var(--ease)}
.origin__fig.reveal.in{transform:none}
/* Leaves drift on their own layer above the text (the globe stays put
   behind everything) — small, low-opacity, and pointer-events:none so
   they read as ambient motion around the copy rather than decoration
   sitting on top of it. Partner-lens only, matching the globe artwork. */
.origin__leaves{position:absolute;inset:-4% -2% -4% 0;z-index:3;pointer-events:none;overflow:visible}
.origin__leaves .leaf{position:absolute;fill:var(--green);animation-name:leafDrift;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.origin__leaves .leaf--1{top:-2%;left:4%;width:15px;height:15px;opacity:.28;animation-duration:9.5s;animation-delay:.2s}
.origin__leaves .leaf--2{top:16%;left:-3%;width:20px;height:20px;opacity:.4;animation-duration:12s;animation-delay:1.4s}
.origin__leaves .leaf--3{top:38%;left:12%;width:13px;height:13px;opacity:.25;animation-duration:8.5s;animation-delay:2.6s}
.origin__leaves .leaf--4{top:58%;left:-4%;width:17px;height:17px;opacity:.35;animation-duration:11s;animation-delay:.7s}
.origin__leaves .leaf--5{top:80%;left:16%;width:14px;height:14px;opacity:.3;animation-duration:10s;animation-delay:3.2s}
.origin__leaves .leaf--6{top:4%;left:44%;width:12px;height:12px;opacity:.22;animation-duration:13s;animation-delay:1.9s}
.origin__leaves .leaf--7{top:94%;left:40%;width:15px;height:15px;opacity:.26;animation-duration:9s;animation-delay:2.1s}
@keyframes leafDrift{
  0%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(7px,-11px) rotate(9deg)}
  50%{transform:translate(-5px,-3px) rotate(-7deg)}
  75%{transform:translate(-9px,7px) rotate(5deg)}
  100%{transform:translate(0,0) rotate(0deg)}
}
@media (prefers-reduced-motion:reduce){
  .origin__leaves .leaf{animation:none}
}
.gauge{margin-top:var(--sp-4);display:flex;align-items:center;gap:1rem}
.gauge .mono{color:var(--ink-2);white-space:nowrap}
.gauge__bar{flex:1;height:2px;background:var(--line);position:relative}
.gauge__bar::before{content:"";position:absolute;inset:0;background:var(--green);transform-origin:left;
  transform:scaleX(0);transition:transform 1.4s var(--ease) .3s}
.gauge__bar::after{content:"";position:absolute;right:-1px;top:50%;width:9px;height:9px;border-radius:50%;
  background:var(--green);transform:translateY(-50%) scale(0);transition:transform .4s var(--ease) 1.5s}
.gauge.in .gauge__bar::before{transform:scaleX(1)}
.gauge.in .gauge__bar::after{transform:translateY(-50%) scale(1)}
.figures{margin-top:var(--sp-3);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);
  border-top:1px solid var(--line);padding-top:var(--sp-3)}
.figure__num{font-family:'Fraunces',serif;font-optical-sizing:auto;font-size:clamp(2.058rem,1.4rem + 2.2vw,3.33rem);
  font-weight:400;line-height:1;font-variant-numeric:tabular-nums}
.figure__num i{font-style:normal;color:var(--green)}
.figure__label{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-top:.6em;max-width:16ch;line-height:1.5}
/* core values */
.values{margin-top:var(--sp-4);margin-bottom:var(--sp-4);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:var(--sp-3) 0 var(--sp-4)}
.values__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-2);margin-top:var(--sp-2)}
.value{padding-top:.9rem;border-top:2px solid var(--green)}
.value__no{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.1em;color:var(--green)}
.value__n{font-family:'Fraunces',serif;font-optical-sizing:auto;font-size:var(--t-lead);font-weight:450;
  line-height:1.15;margin-top:.5rem}
.value__d{font-size:var(--t-label);color:var(--ink-2);margin-top:.5rem;line-height:1.5}

/* core-values curtain reveal */
.value--curtain{padding-top:.9rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.value--curtain .value__n{margin:0}
.value__curtain-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.65,0,.35,1)}
.value--curtain:hover .value__curtain-wrap,.value--curtain:focus-visible .value__curtain-wrap{grid-template-rows:1fr}
.value__curtain-inner{overflow:hidden;min-height:0}
/* scoped to .value--curtain specifically — this used to be a bare .value__d
   rule, which (later in source, equal specificity) beat the plain .value__d
   rule above and set opacity:0 on EVERY .value__d site-wide, including the
   "Ways to partner" / "Where capital goes" lists that were never curtains
   and had no hover/focus trigger to bring it back. Those descriptions were
   real content in the markup, just invisible outside of hover-capable
   narrow viewports where @media(hover:none) doesn't rescue them. */
.value--curtain .value__d{font-size:var(--t-label);color:var(--ink-2);line-height:1.5;padding-top:.6rem;
  opacity:0;transform:translateY(-6px);transition:opacity .4s ease .05s,transform .4s ease .05s}
.value--curtain:hover .value__d,.value--curtain:focus-visible .value__d{opacity:1;transform:none}
@media (hover:none){
  .value__curtain-wrap{grid-template-rows:1fr}
  .value--curtain .value__d{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){ .value__curtain-wrap,.value__d{transition-duration:.01ms} }

/* ================= 03 MARKETS ================= */
/* markets — feature-bento: six sectors, one promoted into a 2x2 feature */
.mb{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(200px,1fr);gap:1.15rem;
  grid-auto-flow:row dense;margin-top:var(--sp-4)}
.mb__feature{grid-column:1/3;grid-row:1/3;display:flex;flex-direction:column;overflow:hidden;position:relative;
  border:1px solid var(--line-strong);border-radius:16px;background:var(--card)}
.mb__media{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;
  background:linear-gradient(150deg,var(--linen),var(--mist))}
.mb__photo{position:absolute;inset:0;background-position:center;background-size:cover;
  transition:opacity .55s var(--ease),transform .8s var(--ease-spring)}
.mb__photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,30,25,.6),rgba(20,30,25,0) 55%)}
.mb__photo .mb__duo{content:"";position:absolute;inset:0;pointer-events:none;
  mix-blend-mode:color;opacity:var(--mb-duo,.38);transition:opacity .5s var(--ease)}
.mb__cap{position:absolute;left:1.1rem;bottom:1rem;z-index:2;color:var(--paper);
  font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.12em;text-transform:uppercase;
  opacity:.92;transition:opacity .5s var(--ease)}
.mb__body{padding:1.4rem 1.6rem 1.55rem;background:var(--linen);border-top:1px solid var(--line)}
.mb__desc{margin:0;font-size:var(--t-body);line-height:1.58;color:var(--ink-2);max-width:56ch;
  transition:opacity .5s var(--ease),transform .5s var(--ease-spring)}
.mb__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;
  transition:opacity .5s var(--ease),transform .5s var(--ease-spring)}
.mb__feature.is-swapping .mb__photo{opacity:0;transform:scale(1.04)}
.mb__feature.is-swapping .mb__cap{opacity:0}
.mb__feature.is-swapping .mb__desc,.mb__feature.is-swapping .mb__tags{opacity:0;transform:translateY(10px)}
.mb__feature.is-flash{animation:mbflash .7s var(--ease)}
@keyframes mbflash{0%{box-shadow:0 0 0 0 rgba(90,135,85,.34)}100%{box-shadow:0 0 0 0 rgba(90,135,85,0)}}
.mb__cell{display:flex;flex-direction:column;justify-content:space-between;gap:.5rem;text-align:left;
  padding:1.25rem 1.3rem 1.3rem;border:1px solid var(--line-strong);border-radius:14px;background:var(--paper);
  cursor:pointer;font:inherit;color:inherit;position:relative;overflow:hidden;
  transition:border-color .3s,background .3s,box-shadow .35s var(--ease)}
.mb__cell{transition:border-color .3s,background .3s,box-shadow .35s,transform .38s var(--ease-spring)}
.mb__cell:hover{border-color:var(--green);background:rgba(90,135,85,.06);box-shadow:0 14px 32px -16px rgba(46,64,43,.6);transform:translateY(-3px) scale(1.01)}
.mb__code{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);font-weight:600;letter-spacing:.14em;
  color:var(--ink-3);transition:color .3s}
.mb__cell:hover .mb__code{color:var(--green)}
.mb__icon{display:flex;align-items:center;margin-bottom:.3rem;color:var(--ink-3);width:20px;height:20px;
  transition:color .3s,transform .35s var(--ease-spring)}
.mb__icon svg{width:20px;height:20px;display:block;flex:none;shape-rendering:geometricPrecision}
.mb__cell:hover .mb__icon{color:var(--green);transform:scale(1.06)}
.mb__name{font-family:'Fraunces',serif;font-optical-sizing:auto;font-size:var(--t-lead);font-weight:450;
  line-height:1.14;color:var(--ink);text-wrap:balance;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.mb__go{position:absolute;right:1.05rem;top:1.05rem;font-family:'IBM Plex Mono',monospace;color:var(--green);
  opacity:0;transform:translateX(-5px);transition:opacity .3s,transform .3s var(--ease)}
.mb__cell:hover .mb__go{opacity:1;transform:none}
.mb__cell.is-swapping .mb__name,.mb__cell.is-swapping .mb__code{opacity:0;transform:translateY(8px)}
.mb.enter.in .mb__cell:active{transform:scale(.98);transition:transform .1s var(--ease)}
/* scroll-in entrance (replays on re-entry) */
.mb.enter .mb__feature,.mb.enter .mb__cell{opacity:0;transform:translateY(20px) scale(.96)}
.mb.enter.in .mb__feature,.mb.enter.in .mb__cell{opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.mb.enter.in .mb__feature{transition-delay:.04s}
.mb.enter.in .mb__cell:nth-of-type(1){transition-delay:.16s}
.mb.enter.in .mb__cell:nth-of-type(2){transition-delay:.25s}
.mb.enter.in .mb__cell:nth-of-type(3){transition-delay:.34s}
.mb.enter.in .mb__cell:nth-of-type(4){transition-delay:.43s}
.mb.enter.in .mb__cell:nth-of-type(5){transition-delay:.52s}
.mk-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.mk-tag{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green);background:rgba(90,135,85,.09);padding:.4em .85em;
  border-radius:999px;text-decoration:none;cursor:pointer;transition:background .25s,color .25s}
.mk-tag:hover{background:var(--green);color:var(--paper)}

/* ================= 04 PROJECTS ================= */
.banner{display:flex;align-items:flex-start;gap:.8rem;margin-top:var(--sp-3);padding:1rem 1.2rem;
  background:rgba(119,78,44,.07);border:1px dashed var(--brown);border-radius:12px;
  color:var(--brown-deep);font-size:var(--t-label);max-width:74ch}
.banner b{font-weight:600}
.banner .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--brown);margin-top:.5rem}
.filter{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:var(--sp-3) 0 var(--sp-2);padding-bottom:var(--sp-2);border-bottom:1px solid var(--line)}
.filter__lab{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-right:.4rem}
.chip{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.06em;text-transform:uppercase;
  padding:.5em 1em;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink-2);
  transition:background .25s,color .25s,border-color .25s}
.chip:hover{border-color:var(--green)}
.chip.is-on{background:var(--green);color:var(--paper);border-color:var(--green)}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:var(--sp-3)}
#projects{min-height:auto;justify-content:flex-start;padding-bottom:var(--sp-4)}
.pcard{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper);
  display:flex;flex-direction:column;transition:border-color .3s,box-shadow .3s,transform .3s var(--ease);text-align:left}
.pcard{transition:border-color .3s,box-shadow .35s,transform .4s var(--ease-spring)}
.pcard:hover{border-color:var(--green);box-shadow:var(--shadow)}
.pcard.is-hidden{display:none}
.pcard__media{
  height:260px;  /* fixed height — image is taller, parallaxes inside */
  background:linear-gradient(150deg,var(--linen),var(--mist));
  position:relative;
  overflow:hidden;  /* clip the taller photo */
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--line)
}
/* Photo inside pcard: taller than the container, centred, parallaxes via JS */
.pcard__media .photo{
  position:absolute;
  inset:-15% 0;  /* 30% taller total — gives parallax travel room */
  width:100%;
  will-change:transform;
  transition:none;  /* JS drives this, no CSS transition fighting it */
}
.pcard__ph{color:var(--tint-dim);font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.12em;
  text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.pcard__ph svg{opacity:.5}
.pcard__status{position:absolute;top:.9rem;left:.9rem;font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);
  letter-spacing:.1em;text-transform:uppercase;background:var(--brown);color:#fff;padding:.35em .8em;border-radius:999px}
.pcard__body{padding:1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.pcard__loc{color:var(--ink-3)}
.pcard__name{font-family:'Fraunces',serif;font-optical-sizing:auto;font-size:var(--t-h4);font-weight:400;line-height:1.1;letter-spacing:-.01em}
.pcard__sector{color:var(--ink-2);font-size:var(--t-body)}
.pcard__lines{display:flex;flex-wrap:wrap;gap:.4rem}
.ltag{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.06em;text-transform:uppercase;
  padding:.3em .7em;border-radius:999px;border:1px dashed var(--line-strong);color:var(--ink-2);opacity:.85}
.pcard__open{margin-top:auto;font-size:var(--t-label);font-weight:600;color:var(--green-deep);display:inline-flex;align-items:center;gap:.4em}
.pcard__open .a{transition:transform .3s var(--ease)}
.pcard:hover .pcard__open .a{transform:translateX(3px)}
.slot{color:var(--tint-dim);font-style:italic;font-family:'Fraunces',serif}
.template{margin-top:var(--sp-4);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 20px 60px rgba(14,60,45,.12);background:var(--paper)}
.template.is-collapsed{display:none}

/* head */
.template__head{background:linear-gradient(155deg,var(--linen) 0%,var(--mist) 100%);
  border-bottom:1px solid var(--line);padding:clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3vw,2.2rem) 0}
.tpl-head-inner{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-3);flex-wrap:wrap;margin-bottom:1.4rem}
.template__eyebrow{color:var(--ink-3);margin-bottom:.5rem}
.template__title{font-family:'Fraunces',serif;font-optical-sizing:auto;
  font-size:clamp(1.618rem,1.2rem + 1.6vw,2.618rem);font-weight:380;line-height:1.08;
  letter-spacing:-.015em;color:var(--ink)}

/* meta chips */
.tpl-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-start;padding-top:.4rem}
.tpl-chip{display:inline-flex;align-items:center;gap:.4em;
  font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.08em;text-transform:uppercase;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:.3rem .75rem;color:var(--ink-3);white-space:nowrap}
.tpl-chip--sector{border-color:var(--green);color:var(--green-deep);background:rgba(90,135,85,.07)}
.tpl-chip--duration{border-color:var(--line-strong)}

/* chain diagram */
.tpl-chain{padding:1.2rem 0 1.6rem;overflow-x:auto}
.tpl-chain svg{min-width:380px;display:block}

/* body */
.template__grid{display:grid;grid-template-columns:1.55fr .9fr;gap:0}
.template__main{padding:clamp(1.4rem,3vw,2.2rem);border-right:1px solid var(--line)}
.template__side{padding:clamp(1.4rem,3vw,2.2rem);background:var(--card)}
.block{padding-bottom:1.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--line)}
.block:last-child{border:0;margin:0;padding:0}
.block__k{color:var(--green);margin-bottom:.75rem}
.block__body{color:var(--ink-2);line-height:1.62}

/* delivered steps — numbered sequence */
.delivered-steps{list-style:none;counter-reset:steps;display:flex;flex-direction:column;gap:0}
.delivered-steps li{counter-increment:steps;display:grid;grid-template-columns:2rem 1fr;
  gap:.5rem;align-items:baseline;padding:.7rem 0;border-bottom:1px solid var(--line);
  font-size:var(--t-label);color:var(--ink-2);line-height:1.55}
.delivered-steps li:last-child{border-bottom:0}
.delivered-steps li::before{content:counter(steps,decimal-leading-zero);
  font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);font-weight:600;
  color:var(--green);letter-spacing:.06em;padding-top:.12em}

/* cta inside main */
.tpl-brief-cta{display:inline-flex}

/* sidebar */
.glance{list-style:none}
.glance li{padding:.85rem 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:5rem 1fr;gap:.5rem;align-items:baseline}
.glance li:first-child{padding-top:0}
.glance li:last-child{border-bottom:0}
.glance__k{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);padding-top:.12em}
.glance__v{font-weight:500;font-size:var(--t-body);color:var(--ink)}
.glance__v.slotv{color:var(--green-deep);font-style:normal;font-weight:600}

/* hse status bar */
.tpl-hsebar{display:flex;align-items:center;gap:.6rem;
  margin-top:1.2rem;padding:.7rem .9rem;
  background:rgba(90,135,85,.07);border:1px solid rgba(90,135,85,.22);
  border-radius:8px}
.tpl-hse-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 3px rgba(90,135,85,.2)}

/* ask block */
.tpl-ask{margin-top:1.2rem;padding:1rem;background:var(--linen);
  border:1px solid var(--line);border-radius:10px}
.tpl-ask__t{font-size:var(--t-label);color:var(--ink-2);line-height:1.55;margin-bottom:.7rem}
.tpl-ask__link{font-size:var(--t-caption);letter-spacing:.08em;color:var(--green-deep);
  text-decoration:none;display:inline-flex;align-items:center;gap:.3em;
  transition:gap .25s var(--ease)}
.tpl-ask__link:hover{gap:.6em}

/* eng diagram */
.eng-line{stroke:var(--line-strong);stroke-width:3;stroke-linecap:round}
.eng-line-on{stroke:var(--green);stroke-width:3;stroke-linecap:round}
.eng-node{fill:var(--paper);stroke:var(--line-strong);stroke-width:2}
.eng-node-on{fill:var(--green);stroke:var(--green)}
.eng-lab{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.05em;text-transform:uppercase}
.template__side{padding:clamp(1.6rem,3vw,2.4rem);background:var(--card)}
.glance{list-style:none}
.glance li{padding:.9rem 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:.25rem}
/* delivered-list replaced by delivered-steps */
.glance li:first-child{padding-top:0}
.glance__k{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.glance__v{font-weight:500}
.glance__v.slotv{color:var(--tint-dim);font-style:italic;font-weight:400}
/* metrics removed — replaced by tpl-ask block */
.metric__v,.metric__l{display:none}

/* ================= 05 INVESTORS ================= */
.thesis{margin-top:var(--sp-2);font-size:clamp(1rem,1rem + .5vw,1.272rem);color:var(--ink);line-height:1.55;max-width:64ch}
.thesis .hl{background:var(--tint);color:var(--green-deep);padding:0 .14em;border-radius:3px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* Replaces the old interactive drag-the-marker chart — a straight
   documentary photo band instead of a schematic. Near-documentary duotone
   (light touch, like Projects) so it reads as proof of work rather than
   styled illustration. */
.gapphoto{margin-top:var(--sp-3);position:relative;overflow:hidden;
  border-radius:16px;aspect-ratio:16/9;border:1px solid var(--line);box-shadow:var(--shadow)}
.gapphoto .photo{--duo:.12;--sat:1;--pb:1;--pc:1.04}
.pillars{margin-top:var(--sp-3)}
.pillar{display:grid;grid-template-columns:5.5rem 1fr;gap:1.6rem;padding:1.7rem 0;border-bottom:1px solid var(--line)}
.pillar:first-child{border-top:1px solid var(--line)}
.pillar__no{font-family:'IBM Plex Mono',monospace;font-size:var(--t-label);font-weight:600;color:var(--green)}
.pillar__claim{font-family:'Fraunces',serif;font-optical-sizing:auto;font-size:clamp(1.272rem,1rem + .7vw,1.618rem);
  font-weight:400;line-height:1.2;letter-spacing:-.01em}
.pillar__sup{color:var(--ink-2);margin-top:.5rem;max-width:58ch;font-size:var(--t-body)}
.pillar__mini{margin-top:1rem}
.mini-line{stroke:var(--green);stroke-width:3;stroke-linecap:round}
.mini-node{fill:var(--green)}
.mini-lab{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.06em;text-transform:uppercase;fill:var(--ink-3)}
/* stat-trio — a scannable "by the numbers" band, shown once, early, before the
   partner/investor narratives diverge. Big Fraunces numerals lead (not buried
   in prose) the way a trust strip should; the three items share the same
   green top-rule language as .value so it reads as this site's own idiom
   rather than a bolted-on widget. */
.stat-trio{margin:var(--sp-3) 0 var(--sp-4);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--sp-3) 0}
.stat-trio__item{position:relative;padding-top:.9rem}
.stat-trio__item::before{content:"";position:absolute;top:-1px;left:0;width:2.4rem;height:2px;background:var(--green)}
.stat-trio__item:nth-child(2)::before{background:var(--brown)}
.stat-trio__num{font-family:'Fraunces',serif;font-optical-sizing:auto;font-weight:450;
  font-size:var(--t-h1);line-height:1;color:var(--green-deep);letter-spacing:-.01em;display:block}
.stat-trio__item:nth-child(2) .stat-trio__num{color:var(--brown-deep)}
.stat-trio__label{margin-top:.55rem;font-size:var(--t-label);color:var(--ink-2);line-height:1.45;max-width:24ch}
@media(max-width:720px){
  .stat-trio{grid-template-columns:1fr;gap:var(--sp-2);padding:var(--sp-2) 0}
  .stat-trio__num{font-size:var(--t-h2)}
}
/* seam — a single diagonal cut between About and Services, in place of a hard
   horizontal line. Signals "new section" the way a sharp edge would in print,
   without adding a second visual system: it's just --tint, already in the
   palette, laid over the seam between the two gradients on either side. */
.seam{position:relative;height:52px;margin-top:-1px;overflow:hidden;pointer-events:none}
.seam svg{display:block;width:100%;height:100%}
.seam__fill{fill:var(--tint)}
@media(max-width:720px){.seam{height:34px}}
@media(prefers-reduced-motion:no-preference){.seam svg{transition:opacity .4s ease}}
/* proof band */
.proof{margin-top:var(--sp-4);display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-4);align-items:stretch;
  border-top:1px solid var(--line);padding-top:var(--sp-4)}
.proof__left{display:flex;flex-direction:column}
.proof__seal-zone{flex:1;display:flex;align-items:center;justify-content:center;min-height:8rem;padding:var(--sp-3) 0}
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-3)}
.rel-grid--single{grid-template-columns:1fr;max-width:22rem}
@media(max-width:980px){.rel-grid{grid-template-columns:1fr}.rel-grid--single{max-width:none}}
.rel-col{background:var(--linen);border:1px solid var(--line);border-radius:10px;padding:1.15rem 1.15rem 1.25rem}
.rel-col--clients{border-top:2px solid var(--green)}
.rel-col--partners{border-top:2px solid var(--brown)}
.rel-col__label{display:flex;align-items:baseline;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-bottom:.7rem;border-bottom:1px solid var(--line);margin-bottom:.2rem}
.rel-col__count{color:var(--ink-3);opacity:.55;letter-spacing:.06em}
.rel-card{position:relative;padding:.8rem 0 .8rem .85rem;border-bottom:1px solid var(--line);transition:padding-left .25s ease}
.rel-card::before{content:"";position:absolute;left:0;top:1rem;bottom:1rem;width:2px;border-radius:2px;
  background:var(--green);opacity:.4;transition:opacity .25s ease}
.rel-col--partners .rel-card::before{background:var(--brown)}
.rel-card:hover{padding-left:1.05rem}
.rel-card:hover::before{opacity:1}
.rel-card:last-child{border-bottom:none;padding-bottom:0}
.rel-card__name{font-family:'Fraunces',serif;font-size:var(--t-body);font-weight:450;line-height:1.3;color:var(--ink);display:block;margin-bottom:.3rem}
.rel-card__tag{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* partners ticker strip — no background fill and no top/bottom rules of its
   own: it used to sit in a flat --linen band with a brown rule above and a
   hairline below, which read as its own separate boxed section stacked on
   the page. Dropping both lets the section's own radial gradient (card →
   linen → paper) show straight through, so the ticker floats on the page
   rather than interrupting it. Extra margin-top (sp-5, not sp-3) gives the
   pullquote above it room to breathe before the ticker starts. */
.partners-ticker{margin-top:var(--sp-5);padding:1.1rem 0 1.3rem}
.partners-ticker__label{font-family:'IBM Plex Mono',monospace;font-size:clamp(0.85rem,0.78rem + 0.25vw,1rem);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);text-align:center;margin-bottom:.85rem}
.partners-ticker__mask{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 3.5rem,#000 calc(100% - 3.5rem),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 3.5rem,#000 calc(100% - 3.5rem),transparent 100%)}
.partners-ticker__track{display:flex;width:max-content;animation:pt-scroll 32s linear infinite}
.partners-ticker:hover .partners-ticker__track{animation-play-state:paused}
.partners-ticker__group{display:flex;align-items:center;flex-shrink:0}
.pt-item{display:flex;flex-direction:column;padding:0 clamp(1.4rem,3vw,2.2rem);white-space:nowrap}
.pt-item b{font-family:'Fraunces',serif;font-size:var(--t-body);font-weight:450;color:var(--ink)}
.pt-item i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:.3rem}
.pt-sep{color:var(--brown);opacity:.55;font-size:.6rem;flex-shrink:0}
@keyframes pt-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:640px){
  .partners-ticker__mask{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 1.5rem,#000 calc(100% - 1.5rem),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 1.5rem,#000 calc(100% - 1.5rem),transparent 100%)}
  .pt-item{padding:0 1rem}
  /* infinite auto-scroll has no hover-to-pause on touch, so on a phone this
     never stops moving — you can catch it mid-word on either edge at any
     given glance, which is exactly what happened in testing. These are real
     partner names, not ambient decoration; treat mobile like the existing
     reduced-motion fallback and make it a plain swipeable list instead. */
  .partners-ticker__track{animation:none;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .partners-ticker__group[aria-hidden="true"]{display:none}
}
@media(prefers-reduced-motion:reduce){
  .partners-ticker__track{animation:none;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .partners-ticker__group[aria-hidden="true"]{display:none}
}

/* certification seal */
.seal{display:inline-block;position:relative;transform:rotate(-2deg);
  border:1.5px solid var(--green);border-radius:10px;padding:.25rem;max-width:23rem}
.seal__in{border:1px solid rgba(90,135,85,.45);border-radius:7px;padding:1rem 1.15rem .95rem;
  text-align:center;font-family:'IBM Plex Mono',monospace;color:var(--green)}
.seal__top{font-size:var(--t-caption);letter-spacing:.3em;text-transform:uppercase;color:var(--green-deep);opacity:.75}
.seal__mark{font-family:'Fraunces',serif;font-size:clamp(1.3rem,1rem + .9vw,1.7rem);font-weight:500;
  letter-spacing:.06em;color:var(--green-deep);line-height:1.15;margin:.35rem 0 .1rem}
.seal__sub{font-size:var(--t-caption);font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.seal__rule{display:flex;align-items:center;gap:.55rem;margin:.7rem 0 .55rem}
.seal__rule::before,.seal__rule::after{content:"";flex:1;height:1px;background:rgba(90,135,85,.35)}
.seal__rule i{width:6px;height:6px;border-radius:50%;background:var(--green);display:block}
.seal__foot{font-size:calc(var(--t-caption) * .95);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);line-height:1.7}
@media(max-width:980px){.seal{transform:none;max-width:100%}}
.sdg{margin-top:var(--sp-3);padding-top:var(--sp-2);border-top:1px solid var(--line)}
.sdg p{font-size:var(--t-body);color:var(--ink-2);max-width:60ch}
/* capitalisation */
.cap-sec{margin-top:var(--sp-4);border-top:1px solid var(--line);padding-top:var(--sp-4)}
.pool-bar{display:flex;height:52px;border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-top:var(--sp-2)}
.pool-eq{background:var(--green);display:flex;align-items:center;padding:0 1rem;color:var(--paper)}
.pool-dt{background:var(--brown);display:flex;align-items:center;padding:0 1rem;color:#fff}
.pool-lab{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.08em;text-transform:uppercase}
.projects-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.9rem}
.pjt{border:1px solid var(--line);border-radius:12px;padding:1.1rem;background:var(--paper);
  transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.pjt:hover{border-color:var(--green);box-shadow:var(--shadow);transform:translateY(-2px)}
.pjt__h{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.8rem}
.pjt__split{height:10px;border-radius:999px;overflow:hidden;display:flex;background:var(--card)}
.pjt__eq{background:var(--green)}.pjt__dt{background:var(--brown)}
.pjt__legend{display:flex;justify-content:space-between;margin-top:.6rem;font-family:'IBM Plex Mono',monospace;
  font-size:var(--t-caption);letter-spacing:.05em;color:var(--ink-2)}
.cap-note{color:var(--ink-3);font-size:var(--t-label);margin-top:1.2rem}
/* briefing */
.brief{margin-bottom:var(--sp-4)}
.brief-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--sp-4);align-items:start;margin-top:var(--sp-2)}
/* stacked lens blocks: ledger at reading measure, routes horizontal, CTA full-bleed */
.explore--measure{max-width:58ch}
.values__grid.ways-grid{grid-template-columns:repeat(4,1fr)}
.btn--full{display:flex;width:100%;justify-content:center;margin-top:var(--sp-3)}
@media (max-width:1024px){ .values__grid.ways-grid{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .values__grid.ways-grid{grid-template-columns:1fr} .explore--measure{max-width:none} }
.explore{list-style:none;margin-top:var(--sp-3)}
.explore li{display:flex;gap:.9rem;padding:.85rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.explore li:first-child{border-top:1px solid var(--line)}
.explore .k{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);color:var(--green);flex:none;width:2.2rem}
.explore .v{color:var(--ink-2);font-size:var(--t-body)}
.explore .v b{color:var(--ink);font-weight:600}

/* ================= 06 CONTACT ================= */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);align-items:start}
/* Full viewport height (inherited from .page) keeps the photo background
   filling the section edge to edge like the hero. The wrap (brief+contact+
   foot together) doesn't stretch to fill that height — it sits at its own
   natural size and #contact centers it as one block. This used to produce a
   large, variable dead gap because of a double-padding bug on .brief and an
   orphaned separator rule on .reach-bar (both fixed above); with those gone,
   centering is safe and matches the hero's full-bleed-background look. */
#contact{justify-content:center}
#contact>.wrap{flex:none;display:flex;flex-direction:column}
#contact>.wrap>.contact{flex:none;align-content:normal}
.card{background:rgba(250,248,242,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:16px;padding:var(--sp-3);box-shadow:var(--shadow)}
.field{display:flex;flex-direction:column;gap:.5em;margin-bottom:var(--sp-2)}
.field label{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{background:rgba(255,255,255,.7);border:1px solid var(--line);
  border-radius:10px;padding:.85em 1em;font-size:var(--t-body);color:var(--ink);appearance:none;-webkit-appearance:none;transition:border-color .3s}
.field textarea{resize:vertical;min-height:5.2em}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);outline:none}
/* auto-fit rather than a fixed 1fr 1fr: this row never collapsed at any
   breakpoint, so Name and Organisation sat side by side down to 320px.
   minmax(180px,1fr) drops to one column when the card can't fit two, with
   no new breakpoint needed. */
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-2)}
.route-note{font-size:var(--t-label);color:var(--green);background:rgba(90,135,85,.16);border-radius:8px;
  padding:.7em 1em;margin-bottom:var(--sp-2);display:none}
.route-note.show{display:block}
.details{display:grid;gap:.6em;margin-top:var(--sp-3);font-size:var(--t-body)}
.details b{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);display:inline-block;min-width:5.6rem}

/* ===== reach-us — horizontal bar arrangement ===== */
.reach-bar{margin-top:var(--sp-4);padding-top:1.4rem;border-top:1px solid var(--line);max-width:none}
/* partner/investor hide the contact heading (eyebrow/h2/intro) above the
   reach-bar, since .brief already covers that ask — leaving the reach-bar's
   margin-top + rule meant to separate it FROM that heading as dead space
   with a floating, purposeless line. Drop both when there's nothing above
   to separate from. */
body[data-lens="partner"] .reach-bar,
body[data-lens="investor"] .reach-bar{margin-top:0;padding-top:0;border-top:none}
.reach-bar__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;
  row-gap:1.4rem;column-gap:1.5rem}
.reach-bar__item{display:flex;align-items:flex-start;gap:.65rem;flex:0 1 auto;text-decoration:none;color:inherit}
.reach-bar__item:has(a[href*="maps"]),.reach-bar__item.reach-bar__item--social{align-items:flex-start}
.reach-ico{flex:none;width:19px;height:19px;margin-top:.1rem;color:var(--green);opacity:.85;transition:color .3s}
.reach-ico svg{width:100%;height:100%;display:block}
.reach-bar__val{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.reach-bar__item .mono{color:var(--ink-3);font-size:var(--t-caption)}
.reach-bar__item,.reach-bar__item .reach-ed__social a{color:var(--ink);text-decoration:none;font-size:var(--t-body);line-height:1.4;transition:color .3s}
.reach-bar__val{background-image:linear-gradient(var(--green),var(--green));background-repeat:no-repeat;
  background-size:0% 1px;background-position:0 100%;transition:background-size .3s var(--ease)}
.reach-bar__item:hover .reach-bar__val,.reach-bar__item .reach-ed__social a:hover{background-size:100% 1px}
.reach-bar__item:hover,.reach-bar__item:hover .reach-ico,.reach-bar__item .reach-ed__social a:hover{color:var(--green-deep)}
.reach-bar__item--social{gap:.65rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:640px){.reach-bar__row{justify-content:flex-start}}
.reach-ed__social{display:inline-flex;align-items:baseline;gap:.5rem;font-size:var(--t-body)}
.reach-ed__social a{color:var(--ink);text-decoration:none;
  background-image:linear-gradient(var(--green),var(--green));background-repeat:no-repeat;
  background-size:0% 1px;background-position:0 100%;transition:background-size .3s var(--ease),color .3s}
.reach-ed__social a:hover{color:var(--green-deep);background-size:100% 1px}
.reach-ed__social .dot{color:var(--ink-3)}
@media (max-width:760px){
  .reach-bar__row{column-gap:1.6rem}
  .reach-bar__item{white-space:normal}
}
.foot{margin-top:var(--sp-4);padding-top:var(--sp-2);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-1);font-size:var(--t-label);color:var(--ink-3)}
.foot i{font-style:italic;color:var(--green)}

/* ================= 06 WHY IT MATTERS ================= */
.impact{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--sp-4);border-top:1px solid var(--line)}
.impact__col{padding-top:var(--sp-3);padding-right:var(--sp-4)}
.impact__col--2{border-left:1px solid var(--line);padding-left:var(--sp-4);padding-right:0}
.impact__lab{color:var(--brown);font-size:var(--t-caption);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.impact__list{list-style:none;margin-top:1.2rem;display:flex;flex-direction:column;gap:1rem}
.impact__item{display:flex;align-items:baseline;gap:.75rem;font-family:'Fraunces',serif;font-optical-sizing:auto;
  font-size:var(--t-body);line-height:1.25;font-weight:400;color:var(--ink)}
.impact__tick{flex:none;color:var(--green);transform:translateY(1px)}

/* ================= RESPONSIVE ================= */
/* ═══════════════════════════════════════════════════════
   RESPONSIVE SYSTEM
   Breakpoints: 980px (tablet), 760px (large mobile), 480px (small mobile)
   Strategy: collapse grids → stack → compress → touch-optimise
   ═══════════════════════════════════════════════════════ */

/* ── TABLET (≤980px) ─────────────────────────────────── */
@media (max-width:980px){

  /* nav: hide text links, keep CTA */
  /* nav: hide text links and show the burger at the SAME breakpoint.
     These used to be split (links off at 980, burger on at 760), which left
     761-980px — iPad portrait at 768 — with no navigation but the Contact button. */
  .nav__links{display:none}
  .nav__burger{display:flex}
  .nav__drawer{display:flex}
  .nav{gap:var(--sp-2)}

  /* hero: single column, tighten padding */
  .page--hero{padding-top:calc(4rem + var(--sp-2))}
  .page--hero .h1{max-width:100%}
  .page--hero .intake__sub{max-width:100%}
  .doors{grid-template-columns:1fr 1fr;gap:.8rem}
  /* .scrim--full's 110deg diagonal fades opacity left-to-right — built for a
     wide desktop column where a paragraph's line length stays well inside
     the strong-opacity zone. On a mobile column the same paragraph wraps
     across the FULL width, so words toward the end of each line (further
     right) land in the weak part of the gradient and lose contrast against
     the photo — visible on the hero subhead crossing the tank/sky horizon.
     A vertical fade keeps opacity constant across the text's full width. */
  #intake .scrim--full{background:linear-gradient(180deg,rgba(250,248,242,.93) 0%,rgba(250,248,242,.9) 45%,rgba(250,248,242,.8) 100%)}
  /* "who's reading" cards: translucent enough on desktop's calmer crop that
     the busy tank photo bleeds through and competes with the card copy —
     more noticeable at the smaller, denser mobile size. Bump opacity and
     add a light blur so the card reads as a surface, not a tint. */
  .door{background:rgba(250,248,242,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

  /* about: real side-by-side columns, not a stacked block. Text keeps the
     wider share (~62%); the image gets a fixed narrower column instead of
     the full-width slab it had before. contain (not cover, not an oversized
     background) means nothing gets cropped — the whole motif is visible,
     same as desktop, just smaller. */
  .origin{grid-template-columns:1fr;grid-template-areas:"intro" "fig" "foundation";gap:var(--sp-3);align-items:start}
  .origin__fig{position:static;margin-top:0;min-height:0;margin-right:0;inset:auto;pointer-events:auto}
  .origin__fig .frame{aspect-ratio:5/4;width:100%;height:auto;margin:0;overflow:visible}
  .origin__fig .photo{background-position:center center;background-size:contain}
  .origin__leaves{display:none}
  .vm{grid-template-columns:1fr 1fr;gap:var(--sp-2)}
  .figures{grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}
  .values__grid{grid-template-columns:1fr 1fr;gap:var(--sp-2)}

  /* services: stack split-pane, drawer content */
  .svcsplit{grid-template-columns:1fr;gap:1.6rem;align-items:start}
  .rail.rail--split{height:auto}
  .rail--split .outlet{flex:none}
  .drawer__grid{grid-template-columns:1fr;gap:1.6rem}
  .pillar{grid-template-columns:1fr;gap:.3rem}

  /* markets: 2-up grid, feature full-width on top */
  .mb{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(140px,auto)}
  .mb__feature{grid-column:1/3;grid-row:auto}
  .mb__media{min-height:240px}

  /* projects: single column */
  .pgrid{grid-template-columns:1fr 1fr;gap:1rem}
  .template__grid{grid-template-columns:1fr;gap:0}
  .template__main{border-right:0;border-bottom:1px solid var(--line)}
  .template__side{background:var(--linen)}
  .tpl-head-inner{flex-direction:column;gap:var(--sp-1)}
  .glance li{grid-template-columns:4.5rem 1fr}

  /* investors */
  .brief-grid{grid-template-columns:1fr;gap:var(--sp-3)}
  .proof{grid-template-columns:1fr;gap:var(--sp-3)}
  .proof__seal-zone{min-height:0;padding-top:var(--sp-2)}
  .rel-grid{grid-template-columns:1fr 1fr}
  /* capital-split cards (Project A/B/C) — no override existed below 1200px;
     the 3-up grid squeezed each card to ~1/3 of the content column with no
     floor, wrapping "Project · A" and the "Equity 60 / Debt 40" legend into
     unreadable slivers well before phone width. */
  .projects-row{grid-template-columns:1fr 1fr;gap:.8rem}

  /* contact */
  .contact{grid-template-columns:1fr;gap:var(--sp-3)}

  /* impact */
  .impact{grid-template-columns:1fr}
  .impact__col{padding-right:0}
  .impact__col--2{border-left:0;padding-left:0;border-top:1px solid var(--line);margin-top:var(--sp-3)}
}

/* ── LARGE MOBILE (≤760px) ───────────────────────────── */
@media (max-width:760px){

  /* lens toast stays near top on mobile */
  .lens-toast{top:4.2rem}

  /* page padding tighter */
  .page{padding:calc(4.2rem + var(--sp-2)) var(--gutter) var(--sp-4)}
  .page--hero{padding-bottom:5rem}

  /* nav: minimal */
  .nav{padding:.8rem var(--gutter)}
  .btn--solid{font-size:var(--t-label);padding:.5rem .9rem}

  /* hero: stack fully, reduce h1 tracking */
  .doors{grid-template-columns:1fr;gap:.65rem}
  .door{flex-direction:row;align-items:center;gap:1rem;padding:1rem 1.1rem}
  .door__kick{flex-direction:column;align-items:flex-start;gap:.1rem;line-height:1.2}
  .doors__hint{margin:-.15rem 0 .7rem}
  .doors__note{margin-top:.7rem}
  .door__body{flex:1}
  .door__go{align-self:center;margin-top:0;font-size:var(--t-body)}
  .proofstrip{margin-top:var(--sp-3)}
  .proofstrip__creds{flex-wrap:wrap;gap:.4rem .8rem}

  /* about: compress figures, 2×2 */
  .figures{grid-template-columns:1fr 1fr;gap:var(--sp-2)}
  .figure__num{font-size:clamp(1.618rem,5vw,2.618rem)}
  .vm{grid-template-columns:1fr;gap:var(--sp-2)}
  .gauge{flex-direction:column;align-items:flex-start;gap:.6rem}
  .gauge__bar{width:100%;max-width:280px}
  .values__grid{grid-template-columns:1fr}
  .pullquote{font-size:clamp(1.272rem,4vw,1.618rem);margin-top:var(--sp-3)}

  /* services: touch-optimised split rows */
  .svcsplit{grid-template-columns:1fr;gap:1.2rem}
  .rail--split .outlet{padding:0 1.7rem 0 1.1rem}
  .rail--split.anim .outlet{opacity:1 !important;transform:none !important}
  .drawer{border-radius:12px;border:1px solid var(--line);padding:1.6rem 1.4rem}

  /* markets: stacked feature + 2×3 cells */
  .mb{grid-template-columns:1fr 1fr;gap:.6rem}
  .mb__feature{grid-column:1/3}
  .mb__cell{justify-content:flex-start;gap:.7rem}
  .mb__cell:last-child{grid-column:1/-1}
  .mb__media{min-height:200px}
  .mb__body{padding:1rem 1.1rem 1.2rem}
  .mb__desc{font-size:var(--t-body)}
  .mb__cell{padding:.7rem .9rem}
  .mb__name{font-size:var(--t-body)}

  /* projects */
  .pgrid{grid-template-columns:1fr;gap:1rem}
  .pcard{border-radius:12px}
  .pcard__media{height:220px}
  .pcard__name{font-size:var(--t-lead)}
  .template{border-radius:14px}
  .template__head{padding:1.4rem 1.4rem 0}
  .tpl-meta{gap:.4rem}
  .tpl-chip{font-size:var(--t-caption);padding:.25rem .6rem}
  .delivered-steps li{grid-template-columns:1.8rem 1fr;gap:.4rem;padding:.6rem 0}

  /* investors: gap photo readable on mobile */
  .gapphoto{aspect-ratio:4/3}

  /* pillars */
  .pillars{margin-top:var(--sp-2)}
  .pillar{padding:1.2rem 0;gap:.4rem}
  .pillar__claim{font-size:var(--t-body)}

  /* rel grid clients/partners */
  .rel-grid{grid-template-columns:1fr;gap:var(--sp-2)}

  /* capital pool bar */
  .pool-bar{height:44px}
  .pool-lab{font-size:var(--t-caption)}

  /* contact: tighten form */
  .contact{gap:var(--sp-2)}
  select,textarea,input[type="text"]{font-size:16px} /* prevent iOS zoom */

  /* section bridges */
  .section-bridge{flex-direction:column;align-items:flex-start;gap:.5rem}
}

/* ── SMALL MOBILE (≤480px) ───────────────────────────── */
@media (max-width:480px){

  /* root spacing tighter */
  :root{--sp-3:1.6rem;--sp-4:2.8rem;--sp-5:4rem;--gutter:1rem}

  /* nav: no CTA button */
  .nav .btn--solid{display:none}

  /* hero: compress heavily */
  .page--hero{min-height:100dvh;justify-content:flex-start;padding-top:calc(3.8rem + var(--sp-2));padding-bottom:8rem}
  .door{padding:.85rem 1rem;gap:.85rem}
  .door__no{font-size:var(--t-caption)}
  .door__t{font-size:var(--t-body)}
  .door__d{font-size:var(--t-label)}

  /* about: 2×2 figures tight */
  .figures{gap:var(--sp-1)}
  .values__grid{gap:var(--sp-1)}
  .value{padding:1rem 1.1rem}

  /* services outlets: minimal */
  .outlet{padding:.85rem .9rem;gap:.8rem}
  .outlet__num{font-size:var(--t-h4)}
  .outlet__name{font-size:var(--t-body)}

  /* markets: single column cells */
  .mb{grid-template-columns:1fr}
  .mb__feature{grid-column:1/2}
  .mb__media{min-height:220px;aspect-ratio:4/3}
  .mb__cell{flex-direction:row;align-items:center;gap:.8rem;
    padding:.8rem .9rem;min-height:auto}
  .mb__icon{margin-bottom:0;flex:none}
  .mb__code{flex:none}
  .mb__name{flex:1;font-size:var(--t-body)}
  .mb__go{margin-left:auto}

  /* projects: tighten template */
  .template__main,.template__side{padding:1rem}
  .tpl-chain{padding:.8rem 0 1.2rem}
  .delivered-steps li{font-size:var(--t-label)}
  .glance li{grid-template-columns:4rem 1fr;gap:.4rem}

  /* pillar numbers smaller */
  .pillar__no{font-size:var(--t-lead)}

  /* contact form: full-width everything */
  .brief-grid{gap:var(--sp-2)}
  .explore li{grid-template-columns:1.8rem 1fr;gap:.6rem}

  /* capital-split cards: 2-up still leaves an orphaned third card on its own
     row with an empty cell beside it — one column reads cleanly instead */
  .projects-row{grid-template-columns:1fr}
}

/* ── SYMMETRIC MOBILE PASS (≤760px) ─────────────────────
   Desktop reads as an asymmetric editorial layout (floated figures,
   diagonal scrims, left-aligned copy). On a single narrow column that
   asymmetry just reads as clutter — centre headings, eyebrows and card
   content so every section balances on its own middle axis, the way the
   reference mobile layout does. Grids/columns already collapse to 1fr
   above; this pass only touches alignment, not structure. */
@media (max-width:760px){
  .h1,.h2,.lead,.pullquote{text-align:center;margin-inline:auto}
  .eyebrow{justify-content:center}
  .pullquote,.pullquote--wide{border-left:0;padding-left:0;border-top:2px solid var(--brown);padding-top:var(--sp-2)}

  /* hero */
  .intake>div{align-items:center;text-align:center}
  .doors__lab{justify-content:center}
  #heroCta{margin-inline:auto}
  .proofstrip{align-items:center}
  .proofstrip__creds{justify-content:center}
  .proofstrip__clients{justify-content:center}

  /* about */
  .origin__intro,.origin__foundation{text-align:center}
  .origin__fig{display:flex;justify-content:center}
  .vm{text-align:center}

  /* services: icon-over-label, centred like a package grid */
  .svc-explore{text-align:center;margin-top:2.2rem}
  #svcExplore .mono.eyebrow{margin-bottom:1rem !important}
  .svc-acc__item:first-child{border-top:none !important}
  .svc-acc__item:last-child{border-bottom:none !important}
  .svc-acc__item{position:relative}
  .svc-acc__head{flex-direction:column;text-align:center;gap:.55rem;padding:1.5rem 0}
  .svc-acc__item:first-child .svc-acc__head{padding-top:.4rem}
  .svc-acc__code{width:auto}
  .svc-acc__ic{width:2.6rem;height:2.6rem;margin:0 auto}
  .svc-acc__ic svg{width:1.4rem;height:1.4rem}
  .svc-acc__chev{position:absolute;right:0;top:1.5rem}
  .svc-acc__lede,.svc-acc__subs{text-align:left}

  /* markets */
  .mb__body{text-align:center}
  .mb__desc{margin-inline:auto}
  .mb__tags,.mk-tags{justify-content:center}

  /* projects */
  .pcard{text-align:center}
  .pcard__body{align-items:center}
  .pcard__lines{justify-content:center}
  .tpl-head-inner,.template__head{text-align:center}

  /* investors */
  .brief,.brief-grid>div:first-child{text-align:center}
  .rel-grid{justify-items:center}
  .rel-grid--single{justify-items:stretch;width:100%}
  .rel-grid--single .rel-col{width:100%}

  /* contact + footer */
  .contact>div:first-child{text-align:center}
  .reach-bar__row{justify-content:center}
  .reach-bar__item{flex-direction:column;align-items:center;gap:.4rem;text-align:center}
  .card{margin-inline:auto}
  .foot{background:var(--green-deep);color:rgba(250,248,242,.92);border-top:none;
    border-radius:14px;padding:1.5rem 1.4rem;margin-top:var(--sp-4);
    flex-direction:column;align-items:center;text-align:center;gap:.3rem}
  .foot i{color:var(--paper);opacity:.85}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important}
  html{scroll-behavior:auto}
  .reveal,.stagger>*{opacity:1;transform:none}
}
/* ===== mobile drawer lens buttons (separate from floating lens-card) ===== */
.drawer__lens{margin-top:2rem;display:flex;gap:.6rem;justify-content:center}
.lens-btn{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);font-weight:600;letter-spacing:.02em;
  border:1px solid var(--line-strong);background:transparent;color:var(--ink-2);padding:.45rem .85rem;
  border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.lens-btn:hover{color:var(--ink);border-color:var(--green)}
.lens-btn:active{transform:scale(.95);transition:transform .1s var(--ease)}
.lens-btn.is-on{background:var(--green);color:#fff;border-color:var(--green)}

/* ===== LENS SYSTEM — floating aperture =====
   Previously a pale translucent disc (rgba paper @ .92 + blur) sitting on a
   paper-toned page — against the site's cream/linen backgrounds that reads
   as almost nothing: a faint ring with a barely-there icon, which is exactly
   why it photographs as an empty box wherever it lands over light content
   (e.g. drifting into the investor lede's whitespace). Moved to a solid
   ink-deep fill so the disc itself carries visible weight against every
   section regardless of what's behind it, then lightened the icon to sit
   on that dark ground with real contrast instead of blending into it. */
.lens-fab{position:fixed;bottom:1.6rem;right:1.6rem;z-index:320;width:56px;height:56px;
  border-radius:50%;border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(120% 120% at 30% 22%,#2c4038 0%,var(--ink) 60%,#182420 100%);
  box-shadow:0 12px 28px rgba(15,22,18,.32),0 2px 8px rgba(15,22,18,.24),
    0 0 0 5px rgba(90,135,85,.14);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;transition:box-shadow .3s var(--ease),transform .3s var(--ease-spring),border-color .3s}
.lens-fab svg{width:32px;height:32px;display:block}
.lens-fab__ring{fill:none;stroke:rgba(250,248,242,.4);stroke-width:1.4;transition:stroke .3s}
.lens-fab__ring2{fill:none;stroke:var(--green-soft);stroke-width:1.5;opacity:.75;
  transform-origin:50% 50%;animation:lensbreathe 5s ease-in-out infinite}
.lens-fab__blade{fill:var(--green-soft);opacity:.95;transform-origin:50% 50%;transition:transform .4s var(--ease-spring)}
@keyframes lensbreathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.06)}}
.lens-fab:hover{border-color:rgba(255,255,255,.28);
  box-shadow:0 16px 34px rgba(15,22,18,.38),0 2px 8px rgba(15,22,18,.24),
    0 0 0 6px rgba(90,135,85,.22);transform:translateY(-2px)}
.lens-fab:hover .lens-fab__ring{stroke:rgba(250,248,242,.65)}
.lens-fab:hover .lens-fab__blade{transform:rotate(18deg) scale(.94)}
.lens-fab:active{transform:scale(.96)}
.lens-fab.is-open{border-color:rgba(255,255,255,.28)}
.lens-fab.is-open .lens-fab__blade{transform:rotate(48deg) scale(.9)}
.lens-fab__dot{position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;
  background:var(--green-soft);border:2px solid var(--ink);transition:background .25s}

/* stacked card, opens upward above the fab */
.lens-panel{position:fixed;bottom:5.4rem;right:1.6rem;z-index:315;
  display:flex;flex-direction:column;gap:.4rem;
  width:min(230px,calc(100vw - 2.2rem));
  transform-origin:bottom right;
  opacity:0;transform:translateY(10px) scale(.94);pointer-events:none;
  transition:opacity .28s var(--ease),transform .3s var(--ease-spring)}
.lens-panel.is-open{opacity:1;transform:none;pointer-events:auto}
.lens-panel__lab{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:.1rem .3rem .35rem}
.lens-card{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;
  padding:.75rem .9rem;border-radius:12px;border:1px solid var(--line);background:rgba(250,248,242,.96);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 22px rgba(20,30,25,.1);cursor:pointer;font:inherit;color:inherit;
  opacity:0;transform:translateY(8px);position:relative;
  transition:opacity .3s var(--ease),transform .35s var(--ease-spring),border-color .2s,background .2s}
.lens-panel.is-open .lens-card{opacity:1;transform:none}
.lens-panel.is-open .lens-card:nth-child(2){transition-delay:.03s}
.lens-panel.is-open .lens-card:nth-child(3){transition-delay:.07s}
.lens-panel.is-open .lens-card:nth-child(4){transition-delay:.11s}
.lens-card__name{font-family:'Fraunces',serif;font-optical-sizing:auto;font-size:var(--t-body);font-weight:500;color:var(--ink)}
.lens-card__desc{font-size:var(--t-label);color:var(--ink-3);line-height:1.4}
.lens-card:hover{border-color:var(--green);background:rgba(90,135,85,.07)}
.lens-card.is-on{border-color:var(--green);background:rgba(90,135,85,.09)}
.lens-card.is-on .lens-card__name{color:var(--green-deep)}
/* lens toast */
.lens-toast{position:fixed;top:4.2rem;left:50%;transform:translateX(-50%) translateY(-8px);z-index:500;
  background:var(--green);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);
  letter-spacing:.06em;text-transform:uppercase;padding:.35rem .9rem;border-radius:2rem;
  opacity:0;transition:opacity .25s ease,transform .25s ease;pointer-events:none;white-space:nowrap}
.lens-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:760px){
  .lens-fab{bottom:1.1rem;right:1.1rem;width:50px;height:50px}
  .lens-fab svg{width:28px;height:28px}
  .lens-panel{bottom:4.6rem;right:1.1rem;width:min(210px,calc(100vw - 2.2rem))}
}

/* Shared ticker glyph styles — used by the intro-screen ticker (.intro-ticker) */
.lt-item{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:var(--t-body);
  color:var(--ink-2);white-space:nowrap;padding:0 .5rem}
.lt-sep{color:var(--green);opacity:.6;font-size:.55rem;flex-shrink:0}
@keyframes lt-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* hard filter: hide sections not in the active lens */
body[data-lens="customer"] [data-aud]:not([data-aud~="customer"]),
body[data-lens="partner"]  [data-aud]:not([data-aud~="partner"]),
body[data-lens="investor"] [data-aud]:not([data-aud~="investor"]){display:none !important}

/* partner & investor convert via the briefing form above — Contact is details-only */
body[data-lens="partner"] .contact,
body[data-lens="investor"] .contact{grid-template-columns:1fr}
body[data-lens="partner"] #contact,
body[data-lens="investor"] #contact{padding-top:var(--sp-4)}
/* #investors only ever shows for the partner/investor lens; without this it
   vertically-centers its content in a forced full-viewport box, which is what
   left a dead gap of empty page between the briefing form and Contact below. */
#investors{justify-content:flex-start;padding-bottom:var(--sp-3)}
.wayfinder.is-hidden{opacity:0;pointer-events:none}

/* lens hint on the hero doors (shows which door is active) */
.door.is-lens{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:var(--paper)}
/* the tag reports what the page did, not who the visitor is — and only after a real choice */
.door__tag{display:none;white-space:nowrap;font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);letter-spacing:.1em;
  text-transform:uppercase;color:var(--green-deep);background:rgba(90,135,85,.14);
  padding:.25em .6em;border-radius:999px;margin-left:.5rem}
.door.is-lens .door__tag{display:inline-block}

/* per-lens accent color, applied via body[data-lens] so toast/fab pick it up */
body[data-lens="customer"]{--lens-accent:var(--green)}
body[data-lens="partner"]{--lens-accent:#3f6f8a}
body[data-lens="investor"]{--lens-accent:var(--brown)}
.lens-toast{background:var(--lens-accent,var(--green))}
.lens-fab__dot{background:var(--lens-accent,var(--green))}

/* progressive-disclosure expander */
.expander{margin-top:var(--sp-2)}
.expander__btn{font-family:'IBM Plex Mono',monospace;font-size:var(--t-label);font-weight:600;letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:.5em;background:transparent;border:1px solid var(--line);
  border-radius:999px;padding:.5rem .9rem;color:var(--ink-2);cursor:pointer;transition:border-color .2s,color .2s}
.expander__btn:hover{border-color:var(--green);color:var(--ink)}
.expander__btn .chev{transition:transform .3s}
.expander[data-open="1"] .expander__btn .chev{transform:rotate(90deg)}
.expander__panel{overflow:hidden;max-height:0;opacity:0;transition:max-height .45s ease,opacity .3s ease}
.expander[data-open="1"] .expander__panel{max-height:2400px;opacity:1;margin-top:var(--sp-2)}

/* ===== LENS-TAILORED PROOF / CTA ===== */
.callout{margin-top:var(--sp-4);padding:1.3rem clamp(1.2rem,3vw,1.8rem);border:1px solid var(--line);
  border-left:2px solid var(--green);border-radius:14px;background:linear-gradient(155deg,var(--linen),var(--mist));
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.1rem}
.callout__t{font-family:'Fraunces',serif;font-optical-sizing:auto;font-size:clamp(1rem,.95rem + .4vw,1.272rem);
  font-weight:450;line-height:1.3;color:var(--ink);max-width:48ch;flex:1 1 22rem}
.callout .btn{flex:none}
.contact-proof{font-size:var(--t-label);color:var(--ink-2);line-height:1.5;border-left:2px solid var(--green);
  padding-left:.9rem;margin-top:var(--sp-2);max-width:40ch}

/* ===== EVIDENCE / CREDIBILITY PARAGRAPH ===== */
.evidence__label{font-family:'IBM Plex Mono',monospace;font-size:var(--t-caption);color:var(--green);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:.5rem}
.evidence{font-family:'Inter',sans-serif;font-size:var(--t-body);color:var(--ink-2);font-weight:500;
  line-height:1.6;max-width:56ch;margin-top:var(--sp-3);padding-top:var(--sp-3);
  border-top:1px solid var(--line);position:relative;letter-spacing:.005em}