/* Layout: one navy page on a single grid. Every block sits on the same left edge: a narrow label rail on the left, content on the right. One small type scale throughout; watercolour mist drifts underneath. */
:root{
  --navy:#08142F;     /* page ground, same as the deck */
  --card:#0F1B3A;
  --rule:#2E4870;
  --blue:#6FA8DC;     /* the one highlight colour */
  --muted:#B8C4D6;
  --white:#FFFFFF;
  --font:'Inter','Helvetica Neue',Arial,sans-serif;
  --display:'Inter Tight','Inter','Helvetica Neue',Arial,sans-serif;
  --wrap:1400px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--navy);color:var(--white);font-family:var(--font);font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
a:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
p{margin:0}
h1,h2,h3,blockquote{margin:0;font-family:var(--display);font-weight:300;letter-spacing:-.02em;text-wrap:pretty}
.hl{color:var(--blue);font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.01em}
.wrap{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
section{position:relative;padding-block:clamp(72px,8vw,112px);overflow-x:clip}

/* ---- one type scale ---- */
.h2{font-size:clamp(26px,2.6vw,36px);line-height:1.2;max-width:40ch}
.lede{margin-top:20px;color:var(--muted);font-size:17px;max-width:62ch}
.label{font-size:13.5px;font-weight:400;color:var(--blue);display:flex;align-items:center;gap:12px;line-height:1.3}
.label::before{content:"";flex:none;width:24px;height:1px;background:var(--blue)}

/* ---- mist: the Let's Talk shading, carried through the page ---- */
.mist{position:absolute;z-index:0;pointer-events:none;background-size:cover;background-position:center;mix-blend-mode:screen;
  -webkit-mask:radial-gradient(closest-side,#000 35%,transparent);mask:radial-gradient(closest-side,#000 35%,transparent)}

/* ---- the story: one thread runs down the left from the first chapter to the last.
   Each chapter hangs off it as a glowing dot; sub-sections branch off it with a short line. No boxes, no rules between blocks. ---- */
.story{position:relative;--g:clamp(16px,4vw,48px);--in:36px}
.spine{position:absolute;z-index:1;top:clamp(96px,10vw,140px);bottom:clamp(150px,13vw,200px);width:1px;left:calc(max(0px,(100% - var(--wrap)) / 2) + var(--g));
  background:linear-gradient(180deg,transparent,rgba(111,168,220,.5) 120px,rgba(111,168,220,.5) calc(100% - 160px),transparent)}
.story .wrap{padding-left:calc(var(--g) + var(--in))}
.story section{padding-block:clamp(96px,10vw,140px)}
.blk{display:block}
.blk>.body{margin-top:24px}
.blk+.blk{margin-top:clamp(120px,12vw,180px)}
.blk .body{min-width:0}
.blk .body>*+*{margin-top:44px}
.blk .body>.h2+.lede{margin-top:22px}
.chap{position:relative;display:flex;align-items:baseline;gap:14px;font-family:var(--display);font-size:17px;font-weight:300;line-height:1.3;color:#DCE4EE}
.chap .no{font-family:var(--font);font-size:13px;font-weight:400;color:var(--blue);letter-spacing:.02em}
.chap::before{content:"";position:absolute;left:calc(-1 * var(--in) - 2.5px);top:calc(50% - 2.5px);width:5px;height:5px;border-radius:50%;background:#EAF3FC;box-shadow:0 0 0 3px #08142F,0 0 0 4px rgba(111,168,220,.75),0 0 0 7px #08142F,0 0 0 8px rgba(111,168,220,.4),0 0 0 11px #08142F,0 0 0 12px rgba(111,168,220,.2)}
.label{position:relative}
.label::before{position:absolute;left:calc(-1 * var(--in));top:calc(50% - .5px);width:calc(var(--in) - 10px);background:rgba(111,168,220,.5)}

/* ---- scenes: full-bleed landscape pages between chapters, melting into the navy ---- */
.scene{position:relative;z-index:2;height:clamp(420px,46vw,680px);display:flex;align-items:flex-end}
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 62%,transparent);mask:linear-gradient(180deg,transparent,#000 22%,#000 62%,transparent)}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,20,47,.55) 78%,transparent),radial-gradient(ellipse 50% 40% at 25% 78%,rgba(8,20,47,.55),transparent 70%)}
.scene .wrap{width:100%;padding-bottom:clamp(40px,5vw,72px)}
.scene p{position:relative;z-index:3;font-family:var(--display);font-weight:300;letter-spacing:-.02em;font-size:clamp(28px,3.2vw,46px);line-height:1.15;max-width:24ch;text-wrap:balance}

/* ---- buttons: corners that open ---- */
.btn{--c:var(--blue);--l:10px;position:relative;display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 20px;font-weight:400;font-size:14.5px;text-decoration:none;color:var(--white);background:
  linear-gradient(var(--c),var(--c)) left top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px var(--l) no-repeat,
  linear-gradient(var(--c),var(--c)) right bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px var(--l) no-repeat;
  transition:background-size .45s cubic-bezier(.2,.7,.2,1),background-color .3s}
.btn:hover{--l:100%;background-color:rgba(255,255,255,.06)}
.btn.fill{background-color:rgba(255,255,255,.12)}
.btn.fill:hover{background-color:rgba(255,255,255,.2)}
.btn i{font-style:normal;transition:transform .25s}
.btn:hover i{transform:translateX(4px)}

/* deck photo frame */
.brk{position:relative}
.brk::before,.brk::after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--blue);z-index:3;pointer-events:none}
.brk::before{top:-7px;left:-7px;border-right:0;border-bottom:0}
.brk::after{bottom:-7px;right:-7px;border-left:0;border-top:0}

/* ---- nav ---- */
.nav{position:absolute;inset:0 0 auto 0;z-index:10}
.nav .wrap{height:84px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.mark{font-family:'Work Sans',sans-serif;font-weight:300;font-size:20px;letter-spacing:.15em;text-decoration:none}
.nav nav{display:flex;align-items:center;gap:32px;font-weight:400;font-size:14.5px}
.nav nav a{text-decoration:none;color:rgba(255,255,255,.85)}
.nav nav a:hover{color:var(--white)}
.nav .btn{height:36px;padding:0 16px;font-size:14px}

/* ---- hero: a real 1861 photograph of a giant sequoia ---- */
.hero.grove{height:clamp(660px,94vh,960px);padding:0;overflow:hidden}
.gph{position:absolute;top:0;right:0;bottom:0;width:58%;margin:0}
.gph img{width:100%;height:100%;object-fit:cover;object-position:96% 60%;filter:saturate(.92)}
.gph::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--navy) 0%,rgba(8,20,47,.55) 18%,rgba(8,20,47,0) 45%),linear-gradient(180deg,rgba(8,20,47,.55) 0%,rgba(8,20,47,0) 18%,rgba(8,20,47,0) 70%,var(--navy) 100%)}
.gph figcaption{position:absolute;z-index:2;right:max(24px,calc((100vw - var(--wrap)) / 2 + 24px));bottom:44px;max-width:340px;padding:22px 24px;background:rgba(8,20,47,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-left:1px solid var(--blue)}
.gph figcaption p{margin:0;font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:17px;line-height:1.5;color:#EAF3FC}
.gph figcaption i{font-family:'Newsreader',Georgia,serif;font-size:16px;font-weight:300}
.gph figcaption span{display:block;margin-top:12px;font-size:11.5px;line-height:1.45;color:#9FB2C8}
.hero.grove .wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding-block:0}
.hero.grove .htext{max-width:600px}
@media (max-width:960px){.hero.grove{height:auto;display:flex;flex-direction:column}.hero.grove .wrap{order:1;height:auto;padding-top:112px}.gph{order:2;position:relative;width:100%;height:auto;margin-top:36px}.gph img{height:auto;object-position:50% 50%}.gph::after{background:linear-gradient(180deg,var(--navy) 0%,rgba(8,20,47,0) 22%,rgba(8,20,47,0) 55%,var(--navy) 100%)}.gph figcaption{position:relative;left:auto;right:auto;bottom:auto;margin:-28px 16px 0;max-width:none}.gph figcaption p{font-size:15px}}
/* ---- hero: tree rings, one a year, drawn outward forever ---- */
.hero.rings{height:clamp(640px,92vh,940px);padding:0;overflow:hidden}
.hero.rings canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero.rings::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,20,47,.85) 0%,rgba(8,20,47,.35) 45%,transparent 70%),linear-gradient(180deg,transparent 70%,var(--navy))}
.hero.rings .wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding-block:0}
.hero.rings .htext{max-width:620px}
.ringcap{position:absolute;z-index:2;right:max(var(--g,24px),calc((100% - var(--wrap)) / 2 + 24px));bottom:40px;display:flex;gap:14px;font-size:13px;color:var(--muted)}
.ringcap span:first-child{color:var(--blue);font-variant-numeric:tabular-nums}
@media (max-width:960px){.hero.rings::after{background:linear-gradient(180deg,rgba(8,20,47,.9) 0%,rgba(8,20,47,.55) 45%,rgba(8,20,47,.1) 70%,var(--navy))}.hero.rings .wrap{align-items:flex-start;padding-top:120px}.ringcap{left:16px;right:auto}}
/* ---- hero: archive newsreel of the industries our companies serve ---- */
.hero.reel{height:auto;min-height:clamp(620px,88vh,900px);display:flex;align-items:center;padding:clamp(120px,12vw,160px) 0 clamp(72px,8vw,110px);overflow:hidden}
.hero.reel .wrap{height:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,5vw,80px);align-items:center;padding-block:0}
.htext h1{font-size:clamp(38px,4vw,56px);line-height:1.08}
.htext p{margin-top:24px;color:#DCE4EE;font-size:17px;max-width:46ch}
.htext .ctas{margin-top:32px}
.film{margin:0;position:relative}
.gate{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:#0B1733;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.gate video{width:100%;height:100%;object-fit:cover;display:block}
.gate::after{content:"";position:absolute;inset:0;border-radius:6px;box-shadow:inset 0 0 60px 10px rgba(8,20,47,.55);pointer-events:none}
.film figcaption{display:flex;align-items:baseline;gap:12px;margin-top:16px;font-size:14px;color:#DCE4EE;min-height:1.5em}
.film .ix{color:var(--blue);font-size:13px}
.film .co2{margin-left:auto;color:var(--muted)}
@media (max-width:960px){.hero.reel .wrap{grid-template-columns:minmax(0,1fr)}.hero.reel{padding-top:110px}}
/* ---- hero ---- */
.hero{height:clamp(620px,92vh,920px);padding:0}
.hero .media{position:absolute;inset:0;overflow:hidden}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,47,.4) 0%,rgba(8,20,47,0) 22%,rgba(8,20,47,0) 45%,rgba(8,20,47,.55) 75%,var(--navy) 100%),radial-gradient(ellipse 60% 55% at 18% 72%,rgba(8,20,47,.5),transparent 70%)}
.hero .wrap{height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-block:0 88px}
.hero h1{font-size:clamp(38px,4.3vw,60px);line-height:1.08;max-width:28ch}
.hero .sub{margin-top:24px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.hero .sub p{color:#DCE4EE;font-size:17px;max-width:56ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap}

/* ---- companies ---- */
.cos{margin-top:clamp(56px,6vw,80px)}
.co{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,56px);align-items:center;padding-block:32px}
.co .vid{aspect-ratio:16/9;background:var(--card)}
.co .vid video{width:100%;height:100%;object-fit:cover}
.co .txt{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.co .logo{height:var(--h,30px);width:auto;max-width:220px;object-fit:contain;object-position:left;margin-bottom:6px}
.co .sector{font-size:13.5px;color:var(--blue);font-weight:400}
.co p{color:var(--muted)}

/* ---- four-up columns (ethos, criteria, numbers) ---- */
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.cols>div{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid var(--rule)}
.cols h3{font-size:19px;line-height:1.3}
.cols p{color:var(--muted);font-size:15px}
.cols .n{font-size:13.5px;color:var(--blue);font-weight:400}
.cols b{font-family:var(--display);font-weight:300;font-size:clamp(32px,3.2vw,44px);line-height:1.05;letter-spacing:-.02em}

/* ---- logos ---- */
.backers{display:flex;flex-wrap:wrap;align-items:center;gap:32px 72px;opacity:.85}
.backers img{max-height:34px;width:auto;max-width:150px;object-fit:contain}

.fine{color:var(--muted);font-size:15px}

/* ---- contact ---- */
.ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px}
.ways div{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid var(--rule)}
.ways h3{font-size:19px;line-height:1.3}
.ways p{color:var(--muted);font-size:15px;max-width:48ch}
.email{display:inline-block;font-family:var(--display);font-weight:300;font-size:clamp(22px,2.4vw,30px);text-decoration:none;border-bottom:1px solid var(--blue);padding-bottom:4px}
.email:hover{color:var(--blue)}

/* ---- footer ---- */
footer{position:relative;padding-block:24px 36px}
.f{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:32px 48px;padding-top:32px;border-top:1px solid var(--rule)}
.f p{color:var(--muted);font-size:15px;margin-top:10px}
.f nav{display:flex;gap:64px;flex-wrap:wrap}
.f nav div{display:flex;flex-direction:column;gap:8px;font-size:15px}
.f nav a{text-decoration:none;color:var(--muted)}
.f nav a:hover{color:var(--white)}
.f .k{color:var(--blue);font-weight:400;font-size:13.5px}
.f-base{margin-top:48px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:#7D8BA3;font-size:13.5px}

@media (max-width:960px){
  .bgart{display:none}
  .blk,.f{grid-template-columns:minmax(0,1fr)}
  .story{--in:24px}
  .co{grid-template-columns:minmax(0,1fr);gap:20px}
  .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav nav a.hide{display:none}
}
@media (max-width:600px){
  .ways{grid-template-columns:minmax(0,1fr)}
  .mist{opacity:.6!important}
  .hero video,.hero .poster{object-position:72% 50%}
  .hero .tint{background:linear-gradient(180deg,rgba(8,20,47,.35),rgba(8,20,47,.1) 25%,rgba(8,20,47,.65) 55%,var(--navy) 100%)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.btn i{transition:none}}

/* ---- tree scenes: a museum slice, and a real photograph ---- */
.slicesc{position:relative;z-index:2;padding-top:clamp(80px,9vw,130px);overflow:hidden}
.slicesc p,.treesc p{font-family:var(--display);font-weight:300;letter-spacing:-.02em;font-size:clamp(28px,3.2vw,46px);line-height:1.15;max-width:24ch;text-wrap:balance}
.slice{display:block;width:min(1500px,100%);margin:clamp(16px,2vw,32px) auto 0;height:auto}
.slice .sy{font:500 12px var(--font);letter-spacing:.08em;fill:#EAF3FC}
.slice .sl{font:italic 300 17px 'Newsreader',Georgia,serif;fill:#9FC3E6}
.treesc{position:relative;z-index:2;padding-block:clamp(96px,10vw,140px)}
.treesc .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:end}
.tph{margin:0}
.tph img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.tph figcaption{display:flex;flex-direction:column;gap:4px;margin-top:14px;font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:15.5px;color:#9FC3E6}
.tph .cr{font-family:var(--font);font-style:normal;font-size:12px;color:var(--muted)}
@media (max-width:960px){.treesc .wrap{grid-template-columns:minmax(0,1fr)}.slice{width:100%}.slice .sl{font-size:24px}.slice .sy{font-size:17px}}
.slicekey{display:none}
@media (max-width:600px){.slice text{display:none}.slicekey{display:grid;gap:8px;list-style:none;margin:8px 0 0;padding:0}.slicekey li{display:flex;gap:12px;align-items:baseline}.slicekey b{font-weight:500;font-size:12px;letter-spacing:.08em;min-width:84px}.slicekey i{font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:16px;color:#9FC3E6}}
/* ---- why a sequoia ---- */
.whytree{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center;margin-top:clamp(64px,7vw,104px)}
.whytree figure{margin:0}
.whytree img{display:block;width:100%;height:auto}
.whytree figcaption{margin-top:14px;font-size:13px;color:#DCE4EE;line-height:1.5}
.whytree figcaption i{font-family:'Newsreader',Georgia,serif;font-size:16px;font-weight:300}
.whytree figcaption span{display:block;margin-top:4px;font-size:11.5px;color:var(--muted)}
.wt h3{font-family:var(--display);font-weight:300;font-size:clamp(28px,3vw,40px);letter-spacing:-.02em;line-height:1.1;margin:0 0 20px}
.wt p{color:#DCE4EE;font-size:17px;line-height:1.6;max-width:48ch;margin:0 0 14px}
.rk{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--rule)}
.rk li{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:15px;color:#9FB2C8}
.rk b{font-weight:400;color:var(--white);display:flex;align-items:center;gap:12px}
.rk b::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:#EAF3FC;box-shadow:0 0 0 3px #08142F,0 0 0 4px rgba(111,168,220,.75),0 0 0 7px #08142F,0 0 0 8px rgba(111,168,220,.4);margin:0 6px 0 4px}
@media (max-width:960px){.whytree{grid-template-columns:minmax(0,1fr)}.rk li{grid-template-columns:1fr;gap:4px}}
/* ---- one gallery of Watkins prints ---- */
.gallery{position:relative;z-index:2;padding-block:clamp(96px,10vw,150px)}
.gl{font-family:var(--display);font-weight:300;letter-spacing:-.02em;font-size:clamp(28px,3.2vw,46px);line-height:1.15;max-width:24ch;margin:0 0 clamp(40px,5vw,64px)}
.prints{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);align-items:end}
.prints figure{margin:0}
.prints img{display:block;width:100%;height:auto;box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
.prints figure:nth-child(2){transform:translateY(-28px)}
.prints figcaption{margin-top:16px;font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;font-size:17px;color:#DCE4EE}
.gcr{margin-top:28px;font-size:12.5px;color:var(--muted)}
.wprint img{box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
@media (max-width:700px){.prints{grid-template-columns:minmax(0,1fr)}.prints figure:nth-child(2){transform:none}}
/* ---- single trees, sprinkled ---- */
.onetree{position:relative;z-index:2;padding-block:clamp(72px,8vw,120px)}
.onetree .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,88px);align-items:center}
.onetree.flip .wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.onetree.flip figure{order:2}
.onetree figure{margin:0}
.onetree img{display:block;width:100%;height:auto;box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
.onetree figcaption{margin-top:14px;font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;font-size:15px;color:#9FB2C8}
.onetree p{margin:0;font-family:var(--display);font-weight:300;letter-spacing:-.02em;font-size:clamp(28px,3.2vw,46px);line-height:1.15;max-width:20ch;text-wrap:balance}
@media (max-width:760px){.onetree .wrap,.onetree.flip .wrap{grid-template-columns:minmax(0,1fr)}.onetree.flip figure{order:0}.onetree figure{max-width:340px}}
/* ---- how a tree grows: one ancient tree, full bleed, with a small box over it ---- */
.growth{position:relative;z-index:2;min-height:clamp(640px,92vh,920px);display:flex;align-items:flex-end;overflow:hidden;background:var(--navy);color:#fff}
.growth .gbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%;filter:brightness(1.12) saturate(1.08) contrast(1.04)}
.growth::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--navy) 0%,rgba(8,20,47,0) 10%,rgba(8,20,47,0) 88%,var(--navy) 100%)}
.growth .wrap{position:relative;z-index:1;width:100%;display:flex;justify-content:flex-end;padding-bottom:clamp(40px,6vw,88px)}
.gbox{max-width:440px;padding:28px 30px;background:rgba(8,20,47,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-left:1px solid var(--blue)}
.gk{margin:0 0 14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9FC4EA}
.growth h2{margin:0 0 16px;font-family:var(--display);font-weight:300;font-size:clamp(26px,2.4vw,34px);line-height:1.12;letter-spacing:-.02em}
.growth h2 em{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;color:#DDEEFF}
.growth p{font-size:15.5px;line-height:1.6;color:#E3EEFA;margin:0}
.growth p.gwe{margin-top:14px;padding-top:14px;border-top:1px solid rgba(159,196,234,.25);font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:18px;line-height:1.45;color:#fff}
.growth p.gcr{margin-top:16px;font-size:11.5px;color:#9FB2C8}
@media (max-width:960px){.growth{display:block;min-height:0}.growth .gbg{position:relative;height:auto;aspect-ratio:3/2;object-position:30% 50%}.growth::after{display:none}.growth .wrap{display:block;margin-top:-36px;padding-bottom:56px}.gbox{max-width:none;padding:22px 20px}}
.onetree.inset{padding-block:clamp(40px,5vw,72px) clamp(72px,8vw,112px)}
/* ---- backed by: a grand band, logos spread across the width ---- */
.backed{position:relative;z-index:2;padding-block:clamp(96px,10vw,150px) 0}
.backed .bk{margin:0 0 16px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.backed h2{margin:0 0 clamp(48px,5vw,80px);font-family:var(--display);font-weight:300;font-size:clamp(32px,3.6vw,54px);line-height:1.1;letter-spacing:-.02em;max-width:22ch}
.bgrid{position:relative;z-index:3;background:var(--navy);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.bc{display:flex;align-items:center;justify-content:center;min-height:clamp(150px,15vw,240px);padding:24px;border-left:1px solid var(--rule)}
.bc:first-child{border-left:0}
.bc img{height:var(--h);max-height:min(var(--h),9vw);width:auto;max-width:78%;object-fit:contain;opacity:.92;transition:opacity .3s,transform .6s cubic-bezier(.2,.7,.2,1)}
.bc:hover img,.bc:hover .wm{opacity:1;transform:scale(1.04)}
.bc .wm{font-family:var(--font);font-weight:500;font-size:clamp(16px,1.7vw,24px);line-height:1.08;letter-spacing:.08em;text-transform:uppercase;color:#EAF3FC;opacity:.92;transition:opacity .3s,transform .6s cubic-bezier(.2,.7,.2,1)}
@media (max-width:900px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.bc:nth-child(3){border-left:0}.bc:nth-child(n+3){border-top:1px solid var(--rule)}.bc img{max-height:min(var(--h),14vw)}}
/* ---- footer clocks ---- */
.clocks{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,72px);margin-top:48px;padding-top:32px;border-top:1px solid var(--rule)}
.clock{display:flex;align-items:center;gap:16px}
.clock svg{width:64px;height:64px;flex:none}
.clock .face{fill:none;stroke:rgba(111,168,220,.45);stroke-width:1}
.clock .tick{stroke:rgba(234,243,252,.55);stroke-width:1.2}
.clock .hh{stroke:#EAF3FC;stroke-width:2.2;stroke-linecap:round}
.clock .mm{stroke:#EAF3FC;stroke-width:1.4;stroke-linecap:round}
.clock .ss{stroke:#6FA8DC;stroke-width:.9;stroke-linecap:round}
.clock .pin{fill:#6FA8DC}
.clock b{display:block;font-weight:400;font-size:15px;color:var(--white)}
.clock span{display:block;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:600px){.clocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.clock{flex-direction:column;align-items:flex-start;gap:10px}.clock svg{width:52px;height:52px}}
/* ---- founders wall: tall photos and colour tiles, joined edge to edge (after Index Ventures) ---- */
#voices .blk{margin-bottom:clamp(48px,5vw,72px)}
.wall{position:relative;z-index:2;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 0 4px}
.wall::-webkit-scrollbar{display:none}
.wall{cursor:grab}.wall.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}.wall.dragging *{pointer-events:none}
.tile{margin:0;flex:none;width:clamp(300px,38vw,560px);scroll-snap-align:start;position:relative}
.tile.ph img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--card);-webkit-user-drag:none;user-select:none}
.tile.ph figcaption{display:flex;justify-content:center;align-items:baseline;gap:8px;padding-top:14px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.tile.ph figcaption b{font-weight:500}
.tile.ph figcaption i{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:16px;letter-spacing:0;text-transform:none;color:var(--blue)}
.tile.q{aspect-ratio:1;align-self:flex-start;display:flex;flex-direction:column;padding:clamp(24px,2.6vw,36px);overflow:hidden;color:var(--navy)}
.tile.q::after{content:"";position:absolute;right:-1px;bottom:-1px;width:78%;aspect-ratio:1;background:currentColor;opacity:.5;-webkit-mask:url(ringarc.svg) no-repeat right bottom/contain;mask:url(ringarc.svg) no-repeat right bottom/contain;transform:scale(-1,-1);transform-origin:center;pointer-events:none}
.tile.q .lg{position:relative;z-index:1;height:var(--h,24px);width:auto;max-width:150px;object-fit:contain;object-position:left;align-self:flex-start;margin-bottom:auto}
.tile.q p{position:relative;z-index:1;margin:20px 0 0;font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:clamp(21px,2.1vw,32px);line-height:1.22;letter-spacing:-.01em;text-wrap:pretty}
.tile.q p::before{content:"\201C"}.tile.q p::after{content:"\201D"}
.tile.q footer{position:relative;z-index:1;margin-top:22px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.tile.q footer span{display:block;margin-top:4px;font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;font-size:15px;letter-spacing:0;text-transform:none;opacity:.8}
.tile.q.t1{background:#6FA8DC}
.tile.q.t1 .lg,.tile.q.t3 .lg{filter:brightness(0) saturate(0);opacity:.85}
.tile.q.t2{background:#1C3D6E;color:#EAF3FC}
.tile.q.t3{background:#E9E4D8}
#voices .ctl{margin-top:28px}
.ctl{display:flex;align-items:center;gap:20px;margin-top:32px}
.ctl .bar{flex:1;height:1px;background:var(--rule);position:relative;max-width:420px}
.ctl .bar i{position:absolute;left:0;top:0;height:1px;background:var(--blue);width:20%;transition:left .3s}
.ctl button{width:42px;height:42px;padding:0;justify-content:center;cursor:pointer;border:0;font:inherit;font-size:16px}

/* ---- graphics beside text ---- */
.split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:32px;align-items:start}
.split .art{margin-block:-150px -40px;margin-right:-40px;max-width:420px;justify-self:end}
.art{position:relative;pointer-events:none}
.art img{width:100%;height:auto}
.blk.has-bg{position:relative}
.bgart{position:absolute;z-index:-1;pointer-events:none;opacity:.9}

/* ---- how we help: icon cells ---- */
.helpg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.helpg div{padding:28px 28px 32px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:10px}
.helpg div:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--rule)}
.helpg svg{width:52px;height:52px;margin-bottom:10px;overflow:visible}
.helpg svg *{fill:none;stroke:var(--blue);stroke-width:1.1;vector-effect:non-scaling-stroke}
.helpg svg .g{fill:#EAF3FC;stroke:none;filter:drop-shadow(0 0 4px rgba(111,168,220,.95))}
.helpg svg .f{stroke-opacity:.45}
.helpg h3{font-size:19px;line-height:1.3}
.helpg p{color:var(--muted);font-size:15px}
@media (max-width:960px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split .art{max-width:300px;margin:0;justify-self:start}
  .helpg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .helpg div,.helpg div:not(:nth-child(3n+1)){padding:24px 20px 28px 0;border-left:0}
  .helpg div:nth-child(2n){padding-left:20px;border-left:1px solid var(--rule)}
}
@media (max-width:600px){
  .helpg{grid-template-columns:minmax(0,1fr)}
  .helpg div:nth-child(2n){padding-left:0;border-left:0}
}

/* ---- our promise: a sand-coloured section, after Index Ventures ---- */
#letter.sand{position:relative;z-index:2;background:#E7DFCF;color:#14213D}
#letter.sand .chap{color:#14213D}
#letter.sand .chap .no{color:#3B6EA5}
#letter.sand .chap::before{background:#14213D;box-shadow:0 0 0 3px #E7DFCF,0 0 0 4px rgba(20,33,61,.7),0 0 0 7px #E7DFCF,0 0 0 8px rgba(20,33,61,.35),0 0 0 11px #E7DFCF,0 0 0 12px rgba(20,33,61,.18)}
.promise{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,104px);align-items:start}
.pph{margin:0}
.pph img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 100%}
.pph figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-top:14px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.pph figcaption b{font-weight:500}
.pph figcaption i{font-family:'Newsreader',Georgia,serif;font-size:16px;text-transform:none}
.pph figcaption span{flex-basis:100%;font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:15px;letter-spacing:0;text-transform:none;color:#5A6378}
.ptext blockquote{margin:0 0 clamp(28px,3vw,44px);font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:clamp(32px,3.6vw,54px);line-height:1.12;letter-spacing:-.015em;text-wrap:pretty}
.ptext blockquote em{font-style:italic;color:#2F6EA8}
.ptext p{max-width:52ch;margin:0 0 14px;font-size:17px;line-height:1.6;color:#2B3550}
@media (max-width:960px){.promise{grid-template-columns:minmax(0,1fr)}.pph{max-width:420px}}

/* ===== round 27: trees beside the points, shared pages ===== */
.h2.belief{margin-top:64px;padding-top:0;border:0;max-width:30ch;font-size:clamp(26px,2.6vw,36px);line-height:1.2;color:var(--white)}
.h2.big{font-size:clamp(30px,3.4vw,48px);line-height:1.12;max-width:18ch;text-wrap:balance}
.split.tree{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,96px);align-items:center}
.tfig{margin:0;justify-self:end;width:100%;max-width:400px}
.tfig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.tfig figcaption{margin-top:14px;font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;font-size:15.5px;line-height:1.45;color:#C9D4E3}
.tfig figcaption span{display:block;margin-top:6px;font-family:var(--font);font-style:normal;font-size:11.5px;color:#8DA0B8}
.tfig figcaption a,.gph figcaption a.why,.more{color:var(--blue);text-decoration:none;font-family:var(--font);font-style:normal;font-size:13.5px;font-weight:400;white-space:nowrap}
.tfig figcaption a i,.gph figcaption a.why i,.more i{font-style:normal;display:inline-block;transition:transform .25s}
.tfig figcaption a:hover i,.gph figcaption a.why:hover i,.more:hover i{transform:translateX(4px)}
.gph figcaption a.why{display:inline-block;margin-top:12px}
@media (max-width:960px){.split.tree{grid-template-columns:minmax(0,1fr)}.tfig{justify-self:start;max-width:340px}}

/* mobile menu */
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;height:36px;display:flex;align-items:center;padding:0 14px;font-size:14px;font-weight:400;border:1px solid rgba(111,168,220,.5)}
.mnav summary::-webkit-details-marker{display:none}
.mnav div{position:absolute;right:0;top:44px;min-width:200px;display:flex;flex-direction:column;padding:10px 0;background:#0C1A3B;border:1px solid var(--rule);box-shadow:0 20px 40px -12px rgba(0,0,0,.6)}
.mnav div a{padding:10px 18px;text-decoration:none;font-size:15px}
.mnav div a:hover{background:rgba(255,255,255,.05)}
@media (max-width:960px){.mnav{display:block}.nav nav>.btn{display:none}}
.nav nav a.on{color:var(--white);box-shadow:inset 0 -1px 0 var(--blue)}

/* sub-page header */
.ph{padding-top:clamp(150px,16vw,220px)!important}
.ph h1{font-size:clamp(38px,4.6vw,66px);line-height:1.06;max-width:20ch;text-wrap:balance}
.ph .lede{font-size:18px;max-width:58ch;margin-top:26px}
.ph .lede+.lede{margin-top:14px}

/* team */
.emps{display:flex;flex-wrap:wrap;align-items:center;gap:28px clamp(28px,4vw,56px);padding-top:28px;border-top:1px solid var(--rule)}
.emps img{height:var(--h,26px);width:auto;filter:brightness(0) invert(1);opacity:.62}
.people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 28px}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;background:#0F1B3A}
.person h3{margin-top:18px;font-size:20px;line-height:1.25}
.person .role{margin-top:4px;font-size:13.5px;font-weight:400;color:var(--blue)}
.person p.bio{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.person a.li{display:inline-block;margin-top:12px;font-size:13px;color:#C9D4E3;text-decoration:none;border-bottom:1px solid var(--rule)}
.person a.li:hover{color:var(--white);border-color:var(--blue)}
@media (max-width:1100px){.people{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.people{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 16px}.person p.bio{font-size:13.5px}}

/* careers */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.cards3>div{padding-top:18px;border-top:1px solid var(--rule)}
.cards3 h3{font-size:21px;line-height:1.25}
.cards3 p{margin-top:10px;color:var(--muted);font-size:15.5px}
.offers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;max-width:980px}
.offers li{padding:16px 0;border-top:1px solid var(--rule);font-family:var(--display);font-size:19px;line-height:1.35}
.roles{border-bottom:1px solid var(--rule)}
.role-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,5fr) 32px;gap:24px;align-items:baseline;padding:26px 0;border-top:1px solid var(--rule);text-decoration:none;transition:background-color .3s}
.role-row:hover{background:rgba(255,255,255,.03)}
.role-row h3{font-size:23px;line-height:1.2}
.role-row .meta{font-size:13.5px;color:var(--blue);font-weight:400}
.role-row p{color:var(--muted);font-size:15px}
.role-row .ar{color:var(--blue);font-size:20px;transition:transform .25s}
.role-row:hover .ar{transform:translateX(5px)}
@media (max-width:960px){.cards3,.offers{grid-template-columns:minmax(0,1fr)}.role-row{grid-template-columns:minmax(0,1fr) 24px;gap:8px 16px}.role-row .meta,.role-row p{grid-column:1}.role-row .ar{grid-row:1;grid-column:2}}
.job{max-width:72ch}
.job h2{font-size:22px;line-height:1.3;margin-top:44px;padding-top:18px;border-top:1px solid var(--rule)}
.job p{margin-top:14px;color:#D2DBE7;font-size:16.5px}
.job ul{margin:16px 0 0;padding:0;list-style:none}
.job li{position:relative;padding:7px 0 7px 26px;color:#D2DBE7;font-size:16px}
.job li::before{content:"→";position:absolute;left:0;color:var(--blue)}
.back{display:inline-block;margin-bottom:28px;font-size:13.5px;color:var(--blue);text-decoration:none}

/* faq */
.faqcat+.faqcat{margin-top:72px}
.faqcat>h2{font-size:15px;font-family:var(--font);font-weight:400;color:var(--blue);letter-spacing:.01em;margin-bottom:8px}
.qa{border-top:1px solid var(--rule)}
.qa:last-child{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:24px;align-items:center;padding:22px 0;font-family:var(--display);font-size:clamp(19px,1.7vw,23px);line-height:1.3;letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";width:14px;height:14px;justify-self:end;background:linear-gradient(var(--blue),var(--blue)) center/14px 1px no-repeat,linear-gradient(var(--blue),var(--blue)) center/1px 14px no-repeat;transition:transform .3s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa summary:hover{color:#DDEEFF}
.qa p{padding:0 48px 26px 0;max-width:72ch;color:var(--muted);font-size:16px}
.faqwrap{max-width:900px}

/* why trees */
.wt-hero{position:relative;min-height:clamp(560px,88vh,880px);display:flex;align-items:flex-end;overflow:hidden;padding:0!important}
.wt-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:32% 50%;filter:brightness(1.1) saturate(1.06)}
.wt-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,47,.85) 0%,rgba(8,20,47,0) 22%,rgba(8,20,47,0) 45%,rgba(8,20,47,.82) 85%,var(--navy) 100%)}
.wt-hero .wrap{width:100%;padding-bottom:clamp(48px,6vw,96px)}
.wt-hero .k{font-size:13.5px;font-weight:400;color:#BFD8F2;letter-spacing:.02em}
.wt-hero h1{margin-top:14px;font-size:clamp(40px,5vw,72px);line-height:1.05;max-width:16ch}
.wt-hero .cr{margin-top:22px;font-size:11.5px;color:#9FB2C8}
.prose p{color:#D2DBE7;font-size:17.5px;line-height:1.65;max-width:60ch}
.prose p+p{margin-top:18px}
.grove-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 20px}
.grove-grid figure{margin:0}
.grove-grid img{width:100%;aspect-ratio:4/5;object-fit:cover}
.grove-grid h3{margin-top:14px;font-size:18px;line-height:1.25}
.grove-grid .pl{margin-top:2px;font-size:13px;color:var(--blue);font-weight:400}
.grove-grid p{margin-top:8px;font-size:14px;color:var(--muted);line-height:1.5}
.grove-grid .cr{display:block;margin-top:6px;font-size:11px;color:#7F93AD}
@media (max-width:1000px){.grove-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.closer{text-align:left}
.closer .ctas{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap}

/* ---- trees fade in beside the points, like the hero; one small label each ---- */
.split.tside{position:relative;display:flex;align-items:center;min-height:clamp(440px,42vw,620px)}
.split.tside>.txt{position:relative;z-index:2;max-width:58%}
.split.tside>.h2.big{position:relative;z-index:2;max-width:56%;margin:0}
.fade{position:absolute;z-index:1;top:-90px;bottom:-90px;left:52%;width:62vw;margin:0;pointer-events:none}
.fade img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 16%,#000 42%),linear-gradient(180deg,transparent 0,#000 22%,#000 76%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 16%,#000 42%),linear-gradient(180deg,transparent 0,#000 22%,#000 76%,transparent 100%);mask-composite:intersect}
.tlabel{position:absolute;z-index:3;right:0;bottom:-36px;margin:0;font-size:12px;line-height:1.4;color:#B9C8DA;letter-spacing:.01em;text-align:right}
.tlabel b{font-weight:500;color:#EAF3FC}
.tlabel a{color:var(--blue);text-decoration:none;margin-left:10px}
.gph figcaption span.tl{font-size:12px;color:#B9C8DA}
.gph figcaption span.tl b{font-weight:500;color:#EAF3FC}
.pcred{margin:0 auto;max-width:var(--wrap);padding:28px clamp(16px,4vw,48px) 0;font-size:11px;line-height:1.5;color:#6F84A0}
@media (max-width:960px){
  .split.tside{display:block;min-height:0}
  .split.tside>.txt,.split.tside>.h2.big{max-width:none}
  .fade{position:relative;top:auto;bottom:auto;left:auto;width:calc(100% + 2 * clamp(16px,4vw,48px));margin:20px calc(-1 * clamp(16px,4vw,48px)) 0;height:380px}
  .fade img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 74%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 74%,transparent 100%)}
  .tlabel{position:relative;right:auto;bottom:auto;margin-top:-28px;text-align:left}
}
/* why trees: a quiet gallery, staggered, one small label per tree */
.grove-grid{gap:16px}
.grove-grid figure{overflow:hidden}
.grove-grid img{display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.grove-grid figure:hover img{transform:scale(1.03)}
.grove-grid figcaption{margin-top:12px;font-size:12px;line-height:1.45;color:#9FB2C8}
.grove-grid figcaption b{display:block;font-family:var(--display);font-size:16px;font-weight:400;color:#EAF3FC;margin-bottom:2px}
@media (min-width:1001px){.grove-grid figure:nth-child(even){margin-top:64px}.grove-grid figure:nth-child(n+5){margin-top:-24px}.grove-grid figure:nth-child(n+5):nth-child(even){margin-top:40px}}
.wt-hero .cr b{font-weight:500;color:#EAF3FC}
.split.tside:has(>.h2.big){min-height:clamp(380px,34vw,500px)}
.split.tside+.cols,.split.tside+.h2{margin-top:clamp(72px,7vw,110px)}
.tlabel a{white-space:nowrap}
@media (max-width:960px){
  .fade{width:calc(100% + clamp(16px,4vw,48px));margin:20px calc(-1 * clamp(16px,4vw,48px)) 0 0;height:340px}
  .fade img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%),linear-gradient(180deg,transparent 0,#000 22%,#000 76%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18%),linear-gradient(180deg,transparent 0,#000 22%,#000 76%,transparent 100%)}
  .split.tside+.cols,.split.tside+.h2{margin-top:48px}
}

/* ===== round 29: founders wall after Index Ventures — portraits only; the quote comes up over the photo ===== */
.tile{width:clamp(260px,31vw,460px)}
.tile.ph{cursor:inherit;outline:none}
.tile.ph .pic{position:relative;overflow:hidden}
.tile.ph img{aspect-ratio:4/5}
.qv{position:absolute;inset:0;display:flex;flex-direction:column;padding:clamp(22px,2.4vw,34px);background:#6FA8DC;color:#0B1630;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.qv .nm{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(22px,2vw,30px);line-height:1.1}
.qv p{margin:14px 0 0;font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:clamp(20px,1.85vw,28px);line-height:1.22;letter-spacing:-.01em;text-wrap:pretty}
.qv p::before{content:"\201C"}.qv p::after{content:"\201D"}
.qv .role{margin-top:18px;font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase}
.qv .lg{margin-top:auto;height:var(--h,24px)!important;width:auto!important;max-width:150px;aspect-ratio:auto!important;object-fit:contain;object-position:left;background:none!important;filter:brightness(0);opacity:.8}
.tile.ph:hover .qv,.tile.ph:focus-visible .qv,.tile.ph.on .qv{opacity:1;transform:none}
.wall.dragging .qv{opacity:0!important}
.tile.ph figcaption{justify-content:flex-start}
@media (hover:none){.tile.ph figcaption::after{content:"Tap for quote";margin-left:auto;font-size:11px;letter-spacing:.04em;text-transform:none;opacity:.6}}

/* colour switch (mockup only): sand, after Index Ventures, or the navy we had */
.skin{position:fixed;z-index:50;left:16px;bottom:16px;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:rgba(20,20,20,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:400 12.5px var(--font);color:#fff;box-shadow:0 8px 24px -8px rgba(0,0,0,.4)}
.skin span{padding:0 10px 0 8px;opacity:.7}
.skin button{all:unset;cursor:pointer;padding:6px 12px;border-radius:999px}
.skin button[aria-pressed="true"]{background:#fff;color:#141414}

/* ===== sand: Index-style warm paper, near-black ink, deep blue italics ===== */
html.sand{--navy:#EEEBE5;--card:#E3DED5;--rule:rgba(21,32,58,.16);--blue:#2F6EA8;--muted:#4E5768;--white:#15203A;color-scheme:light}
html.sand body{background:#EEEBE5;color:#15203A}
html.sand .mist,html.sand .bgart{display:none}
html.sand .spine{background:linear-gradient(180deg,transparent,rgba(21,32,58,.28) 120px,rgba(21,32,58,.28) calc(100% - 160px),transparent)}
html.sand .chap{color:#15203A}
html.sand .chap::before{background:#15203A;box-shadow:0 0 0 3px #EEEBE5,0 0 0 4px rgba(21,32,58,.6),0 0 0 7px #EEEBE5,0 0 0 8px rgba(21,32,58,.3),0 0 0 11px #EEEBE5,0 0 0 12px rgba(21,32,58,.14)}
html.sand .nav nav a{color:#15203A}
html.sand .btn{--c:#15203A}
html.sand .btn:hover{background-color:rgba(21,32,58,.06)}
html.sand .btn.fill{background-color:#15203A;color:#EEEBE5}
html.sand .btn.fill:hover{background-color:#2A3756}
html.sand .mnav summary{border-color:rgba(21,32,58,.35)}
html.sand .mnav div{background:#F7F5F1;box-shadow:0 20px 40px -12px rgba(0,0,0,.18)}
html.sand .mnav div a:hover{background:rgba(21,32,58,.05)}
/* hero: the oak fades into paper */
html.sand .gph::after{background:linear-gradient(90deg,#EEEBE5 0%,rgba(238,235,229,.55) 18%,rgba(238,235,229,0) 45%),linear-gradient(180deg,rgba(238,235,229,.35) 0%,rgba(238,235,229,0) 16%,rgba(238,235,229,0) 72%,#EEEBE5 100%)}
html.sand .gph figcaption{background:rgba(247,245,241,.86);border-left-color:#15203A}
html.sand .gph figcaption p{color:#15203A}
html.sand .gph figcaption span,html.sand .gph figcaption span.tl{color:#4E5768}
html.sand .gph figcaption span.tl b,html.sand .tlabel b{color:#15203A}
html.sand .htext p,html.sand .hero .sub p{color:#3A4357}
html.sand .tlabel{color:#4E5768}
html.sand .pcred{color:#7A8090}
html.sand .h2.belief{color:#15203A}
/* companies: logos in ink */
html.sand .co .logo,html.sand .emps img{filter:brightness(0);opacity:.82}
html.sand .brk::before,html.sand .brk::after{border-color:#15203A}
/* how we help icons */
html.sand .helpg svg .g{fill:#15203A;filter:none}
/* promise: white paper on sand */
html.sand #letter.sand{background:#FBFAF7}
html.sand #letter.sand .chap::before{box-shadow:0 0 0 3px #FBFAF7,0 0 0 4px rgba(20,33,61,.7),0 0 0 7px #FBFAF7,0 0 0 8px rgba(20,33,61,.35),0 0 0 11px #FBFAF7,0 0 0 12px rgba(20,33,61,.18)}
/* backed by: one dark band, like Index's black block */
html.sand .backed{--navy:#14213D;--white:#fff;--muted:#B8C4D6;--rule:#2E4870;--blue:#6FA8DC;background:#14213D;color:#fff;padding-bottom:clamp(64px,7vw,104px)}
html.sand .backed .wrap{padding-left:clamp(16px,4vw,48px)}
/* footer clocks in ink */
html.sand .clock .face{stroke:rgba(21,32,58,.35)}
html.sand .clock .tick{stroke:rgba(21,32,58,.5)}
html.sand .clock .hh,html.sand .clock .mm{stroke:#15203A}
html.sand .clock .ss{stroke:#2F6EA8}
html.sand .clock .pin{fill:#2F6EA8}
html.sand .f-base{color:#6A7284}
/* founders wall */
html.sand .tile.ph figcaption i{color:#2F6EA8}
/* sub-pages */
html.sand .person a.li{color:#3A4357}
html.sand .role-row:hover{background:rgba(21,32,58,.035)}
html.sand .job p,html.sand .job li,html.sand .prose p{color:#2E3749}
html.sand .qa summary:hover{color:#2F6EA8}
html.sand .grove-grid figcaption{color:#4E5768}
html.sand .grove-grid figcaption b{color:#15203A}
html.sand .wt-hero{--white:#fff;color:#fff}
html.sand .wt-hero::after{background:linear-gradient(180deg,rgba(8,20,47,.55) 0%,rgba(8,20,47,.05) 26%,rgba(8,20,47,.1) 50%,rgba(8,20,47,.72) 100%)}
.tile.ph .pic>img{object-position:50% 30%}
html.sand .ctl button{color:#15203A}
html.sand .backed{padding-bottom:clamp(40px,4vw,64px)}
/* sand hero: the photo sits below the menu, so the links stay on paper */
@media (min-width:961px){html.sand .gph{top:84px}}
/* sand, over a full-bleed photo (Why trees): the menu stays light */
html.sand body:has(.wt-hero) .nav{--white:#fff;color:#fff}
html.sand body:has(.wt-hero) .nav nav a,html.sand body:has(.wt-hero) .mark{color:#fff}
html.sand body:has(.wt-hero) .nav .btn{--c:#fff}
html.sand body:has(.wt-hero) .mnav summary{border-color:rgba(255,255,255,.5)}
html.sand body:has(.wt-hero) .mnav div a{color:#15203A}
html.sand .wt-hero .hl{color:#A9CDF0}

/* ===== round 30: tighter rhythm; each chapter opens on a hairline ===== */
.story section{padding-block:clamp(64px,6.5vw,96px)}
.blk+.blk{margin-top:clamp(80px,8vw,120px)}
.story>section+section:not(.sand):not(.backed)::before,.story>section+div+section::before{content:"";position:absolute;z-index:2;top:0;height:1px;background:var(--rule);
  left:calc(max(0px,(100% - var(--wrap)) / 2) + var(--g));right:calc(max(0px,(100% - var(--wrap)) / 2) + var(--g))}
.story>section.sand+section::before{display:none}
.split.tside{min-height:clamp(380px,34vw,500px)}
.split.tside:has(>.h2.big){min-height:clamp(300px,26vw,400px)}
.fade{top:-48px;bottom:-48px}
.split.tside+.cols,.split.tside+.h2{margin-top:clamp(56px,5vw,80px)}
#voices .blk{margin-bottom:clamp(36px,4vw,56px)}
.cos{margin-top:clamp(32px,4vw,56px)}
.co{padding-block:24px}
.backed{padding-top:clamp(72px,7vw,110px)}
/* hero: just the tree's name, place and age */
.gph figcaption{padding:16px 20px;max-width:none}
.gph figcaption span.tl{margin-top:0}
.gph figcaption a.why{margin-top:8px}
@media (max-width:960px){.story section{padding-block:56px}.blk+.blk{margin-top:72px}.split.tside+.cols,.split.tside+.h2{margin-top:40px}}
.tile.ph{padding-top:0!important} /* .ph is also the sub-page header class */

/* ===== round 31: tree names as gallery labels — small, light italic, set on the photo itself ===== */
.gph figcaption,.tlabel,.grove-grid figcaption,.wt-hero .cr{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;font-size:12.5px;line-height:1.4;letter-spacing:.01em;color:rgba(255,255,255,.84)!important;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.gph figcaption b,.tlabel b,.grove-grid figcaption b,.wt-hero .cr b{display:inline;font:inherit;color:inherit!important;margin:0}
.gph figcaption span.tl{font-size:inherit;color:inherit!important;margin:0}
/* hero: no box, just the words on the oak */
.gph figcaption,html.sand .gph figcaption{background:none;border:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none;bottom:24%;max-width:none}
/* beside the points: bottom right, on the opaque part of the photo */
.tlabel{bottom:24%;right:0}
/* why trees gallery: label in the bottom corner of each picture */
.grove-grid figure{position:relative}
.grove-grid figure::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.32))}
.grove-grid figcaption{position:absolute;z-index:2;left:14px;right:14px;bottom:12px;margin:0}
.wt-hero .wrap{position:relative}
.wt-hero .cr{position:absolute;margin:0;right:clamp(16px,4vw,48px);bottom:clamp(18px,2.4vw,30px)}
@media (max-width:960px){
  .gph figcaption,html.sand .gph figcaption{position:absolute;margin:0;left:auto;right:16px;bottom:30%}
  .tlabel{position:relative;right:auto;bottom:auto;margin:-96px 0 72px;text-align:right;padding-right:4px}
  .wt-hero .cr{position:static;margin-top:20px}
}
.gph figcaption,.tlabel,.grove-grid figcaption,.wt-hero .cr{font-size:13.5px;font-weight:400;color:rgba(255,255,255,.92)!important;text-shadow:0 0 2px rgba(0,0,0,.35),0 1px 12px rgba(0,0,0,.7)}
.tlabel.on-light{color:rgba(21,32,58,.78)!important;text-shadow:0 0 10px rgba(255,248,236,.6)}
.grove-grid{align-items:start}
.grove-grid figure{align-self:start}
.grove-grid figure::after{height:30%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.22))}
.grove-grid figcaption{font-size:12.5px}
@media (max-width:960px){.gph figcaption,.tlabel{font-size:12px}}

/* ===== round 33 ===== */
/* the hero oak moves in the wind (a/wind.js draws over the photo) */
.gph canvas.wind{position:absolute;inset:0;width:100%;height:100%;display:block;filter:saturate(.92)}
@media (prefers-reduced-motion:reduce){.rb .r1,.rb .r2{animation:none;stroke-dashoffset:0}}

/* menu: sits open at the top, then gathers into a floating bar as you scroll;  */
.nav{position:fixed;transition:transform .4s}
.nav .wrap{transition:max-width .55s cubic-bezier(.2,.7,.2,1),height .45s,margin .45s,background-color .4s,box-shadow .4s,border-color .4s,border-radius .55s,padding .45s;border:1px solid transparent;border-radius:0}
.nav.float .wrap{max-width:860px;height:58px;margin-top:12px;border-radius:999px;padding-inline:26px 10px;background-color:rgba(8,20,47,.72);border-color:rgba(255,255,255,.1);box-shadow:0 14px 34px -16px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
html.sand .nav.float .wrap{background-color:rgba(247,245,241,.8);border-color:rgba(21,32,58,.1);box-shadow:0 14px 34px -18px rgba(21,32,58,.35)}
.nav.float nav{gap:26px}
.nav nav a.hide{position:relative;box-shadow:none!important}
.nav nav a.hide::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.nav nav a.hide:hover::after{transform:scaleX(1);transform-origin:left}
.nav nav a.hide.on::after{transform:scaleX(1);background:var(--blue)}
@media (max-width:960px){.nav.float .wrap{margin-inline:10px;padding-inline:18px 8px;height:54px}}

/* sub-pages: each part opens with a thin line and the same space as the homepage */
.story>section.ph+section::before{display:none!important}
section.ph+section .blk{padding-top:clamp(48px,5vw,72px);border-top:1px solid var(--rule)}
section.ph+section .blk+.blk{margin-top:clamp(72px,7vw,104px)}
/* careers: what we offer, five numbered points across the full width */
.offers{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 28px;max-width:none;counter-reset:o}
.offers li{counter-increment:o;padding:18px 0 0;font-size:18px;line-height:1.35}
.offers li::before{content:counter(o,decimal-leading-zero);display:block;margin-bottom:12px;font-family:var(--font);font-size:12.5px;color:var(--blue)}
@media (max-width:1100px) and (min-width:961px){.offers{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}}
@media (max-width:960px){.offers li{padding-bottom:16px}}
/* team: what founders say */
.tq3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.5vw,56px)}
.tq{margin:0;display:flex;flex-direction:column;justify-content:space-between;padding-top:24px;border-top:1px solid var(--rule)}
.tq blockquote{margin:0;font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:clamp(20px,1.65vw,24px);line-height:1.38;letter-spacing:-.005em;text-wrap:pretty}
.tq figcaption{display:flex;align-items:center;gap:12px;margin-top:32px}
.tq .av{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.tq figcaption span{display:flex;flex-direction:column;gap:2px;font-size:13.5px;line-height:1.3}
.tq figcaption b{font-weight:500}
.tq figcaption i{font-style:normal;color:var(--muted)}
.tq .lg{margin-left:auto;height:var(--h);width:auto;max-width:96px;object-fit:contain;filter:brightness(0) invert(1);opacity:.7}
html.sand .tq .lg{filter:brightness(0);opacity:.75}
@media (max-width:960px){.tq3{grid-template-columns:minmax(0,1fr)}}
/* one line per part is enough: no extra rules on the cards beneath it */
section.ph+section .cards3>div,section.ph+section .offers li{border-top:0;padding-top:0}
section.ph+section .cards3 h3{margin-top:0}

/* ===== round 34 ===== */
/* hero links: plain words; a painted ring forms round them on hover */
.htext .ctas{gap:56px;align-items:center;margin-top:36px}
.cbtn{--paint:#C0693F;position:relative;display:inline-flex;align-items:center;padding:12px 2px;font-size:16px;font-weight:400;color:var(--white);text-decoration:none}
.cbtn span{position:relative;z-index:1;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size .35s}
.cbtn:hover span,.cbtn:focus-visible span{background-size:0 1px}
.cbtn .paint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:visible;pointer-events:none;filter:url(#paintf)}
.paint path{fill:none;stroke:var(--paint);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s cubic-bezier(.55,.05,.25,1)}
.paint .p1{stroke-width:5;opacity:.5}
.paint .p2{stroke-width:2.6;opacity:.38;transition-delay:.08s}
.paint .p3{display:none}
.cbtn:hover .paint path,.cbtn:focus-visible .paint path{stroke-dashoffset:0}
.cbtn:focus-visible{outline:none}
html:not(.sand) .cbtn{--paint:#E2B477}
/* why we exist: three painted points, each with a highlighter stroke */
.pb{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:26px;max-width:54ch}
.pb li{position:relative;padding-left:46px;font-size:18px;line-height:1.6;color:var(--muted)}
.pb li::before{content:"";position:absolute;left:0;top:.05em;width:28px;height:28px;background:var(--c);-webkit-mask:url(art/dot.webp) center/contain no-repeat;mask:url(art/dot.webp) center/contain no-repeat;opacity:.9}
.pb .c1{--c:#5B93C9;--h:rgba(111,168,220,.42)}
.pb .c2{--c:#7FA36B;--h:rgba(140,182,118,.42)}
.pb .c3{--c:#D49A4A;--h:rgba(232,178,96,.46)}
.hlt{color:var(--white);padding:.05em .3em;margin:0 -.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone;background-repeat:no-repeat;background-position:0 55%;background-size:0% 100%;transition:background-size 1.1s cubic-bezier(.6,.05,.2,1)}
.pb.in .hlt{background-size:100% 100%}
.pb.in .c2 .hlt{transition-delay:.25s}.pb.in .c3 .hlt{transition-delay:.5s}
@media (prefers-reduced-motion:reduce){.hlt{background-size:100% 100%;transition:none}}
/* watercolour: more of it up front on navy, and a paper-and-pigment version on sand */
.hero.grove .mist{z-index:1}
.hero.grove .mist.hm1{opacity:.6}
.hero.grove .mist.hm2{opacity:.35}
html.sand .mist{display:block!important;mix-blend-mode:normal;opacity:.42!important}
html.sand .mist.sw-a{background-image:url(art/sand-wash-a.webp)!important}
html.sand .mist.sw-b{background-image:url(art/sand-wash-b.webp)!important}
html.sand .mist.sw-c{background-image:url(art/sand-wash-c.webp)!important}
html.sand .mist.sw-warm{background-image:url(art/sand-wash-warm.webp)!important}

html.sand .hero.grove .mist.hm1{opacity:.34!important}
html.sand .hero.grove .mist.hm2{opacity:.32!important}
html.sand .backed .mist{display:none!important}
/* backers: smaller logos, more air */
.backed h2{margin-bottom:clamp(64px,6.5vw,104px)}
.bc{min-height:clamp(170px,15vw,230px);padding:32px}
.bc .wm{font-size:clamp(14px,1.25vw,18px)}
html.sand .backed{padding-bottom:clamp(72px,7vw,112px)}
.backed{padding-top:clamp(96px,9vw,140px)}
/* a little more breathing room between parts */
.story section{padding-block:clamp(80px,8vw,124px)}
.blk+.blk{margin-top:clamp(96px,9vw,136px)}
@media (max-width:960px){.story section{padding-block:64px}.blk+.blk{margin-top:80px}.htext .ctas{gap:32px}.pb li{font-size:17px}}

.pb .c1 .hlt{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-5%25' y='-20%25' width='110%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09 .5' numOctaves='3' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3Cg filter='url(%23f)' fill='%238DB8E2'%3E%3Cpath d='M4.0 10.2 L12.0 9.5 L20.0 8.3 L28.0 9.7 L36.0 8.4 L44.0 8.7 L52.0 7.8 L60.0 10.3 L68.0 8.2 L76.0 9.4 L84.0 9.2 L92.0 7.9 L100.0 7.8 L108.0 7.7 L116.0 10.5 L124.0 10.6 L132.0 9.3 L140.0 9.6 L148.0 9.3 L156.0 8.0 L164.0 10.2 L172.0 8.0 L180.0 8.1 L188.0 9.0 L196.0 12.5 Q199 20 196.0 27.0 L188.0 29.6 L180.0 32.1 L172.0 30.8 L164.0 31.0 L156.0 29.5 L148.0 31.5 L140.0 29.6 L132.0 32.3 L124.0 30.8 L116.0 30.7 L108.0 29.9 L100.0 30.4 L92.0 31.5 L84.0 31.6 L76.0 29.7 L68.0 32.1 L60.0 30.5 L52.0 30.0 L44.0 32.0 L36.0 31.7 L28.0 31.6 L20.0 30.1 L12.0 32.6 L4.0 29.2 Q1 20 4.0 10.2Z' opacity='.55'/%3E%3Cpath d='M4.0 10.8 L12.0 9.8 L20.0 9.1 L28.0 8.9 L36.0 9.1 L44.0 9.0 L52.0 9.3 L60.0 8.9 L68.0 10.2 L76.0 7.6 L84.0 9.7 L92.0 7.5 L100.0 10.4 L108.0 8.5 L116.0 10.4 L124.0 8.4 L132.0 9.4 L140.0 8.2 L148.0 7.5 L156.0 10.5 L164.0 8.3 L172.0 8.5 L180.0 7.5 L188.0 8.0 L196.0 12.7 Q199 20 196.0 27.7 L188.0 30.0 L180.0 29.7 L172.0 30.1 L164.0 32.6 L156.0 31.3 L148.0 30.3 L140.0 30.6 L132.0 30.9 L124.0 29.9 L116.0 30.1 L108.0 31.2 L100.0 30.7 L92.0 31.7 L84.0 31.3 L76.0 29.7 L68.0 32.6 L60.0 30.1 L52.0 29.5 L44.0 30.8 L36.0 30.8 L28.0 31.7 L20.0 29.5 L12.0 29.6 L4.0 26.8 Q1 20 4.0 10.8Z' opacity='.35' transform='translate(2 1.5)'/%3E%3C/g%3E%3C/svg%3E")}
.pb .c2 .hlt{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-5%25' y='-20%25' width='110%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09 .5' numOctaves='3' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3Cg filter='url(%23f)' fill='%23A9C99A'%3E%3Cpath d='M4.0 10.2 L12.0 9.5 L20.0 8.3 L28.0 9.7 L36.0 8.4 L44.0 8.7 L52.0 7.8 L60.0 10.3 L68.0 8.2 L76.0 9.4 L84.0 9.2 L92.0 7.9 L100.0 7.8 L108.0 7.7 L116.0 10.5 L124.0 10.6 L132.0 9.3 L140.0 9.6 L148.0 9.3 L156.0 8.0 L164.0 10.2 L172.0 8.0 L180.0 8.1 L188.0 9.0 L196.0 12.5 Q199 20 196.0 27.0 L188.0 29.6 L180.0 32.1 L172.0 30.8 L164.0 31.0 L156.0 29.5 L148.0 31.5 L140.0 29.6 L132.0 32.3 L124.0 30.8 L116.0 30.7 L108.0 29.9 L100.0 30.4 L92.0 31.5 L84.0 31.6 L76.0 29.7 L68.0 32.1 L60.0 30.5 L52.0 30.0 L44.0 32.0 L36.0 31.7 L28.0 31.6 L20.0 30.1 L12.0 32.6 L4.0 29.2 Q1 20 4.0 10.2Z' opacity='.55'/%3E%3Cpath d='M4.0 10.8 L12.0 9.8 L20.0 9.1 L28.0 8.9 L36.0 9.1 L44.0 9.0 L52.0 9.3 L60.0 8.9 L68.0 10.2 L76.0 7.6 L84.0 9.7 L92.0 7.5 L100.0 10.4 L108.0 8.5 L116.0 10.4 L124.0 8.4 L132.0 9.4 L140.0 8.2 L148.0 7.5 L156.0 10.5 L164.0 8.3 L172.0 8.5 L180.0 7.5 L188.0 8.0 L196.0 12.7 Q199 20 196.0 27.7 L188.0 30.0 L180.0 29.7 L172.0 30.1 L164.0 32.6 L156.0 31.3 L148.0 30.3 L140.0 30.6 L132.0 30.9 L124.0 29.9 L116.0 30.1 L108.0 31.2 L100.0 30.7 L92.0 31.7 L84.0 31.3 L76.0 29.7 L68.0 32.6 L60.0 30.1 L52.0 29.5 L44.0 30.8 L36.0 30.8 L28.0 31.7 L20.0 29.5 L12.0 29.6 L4.0 26.8 Q1 20 4.0 10.8Z' opacity='.35' transform='translate(2 1.5)'/%3E%3C/g%3E%3C/svg%3E")}
.pb .c3 .hlt{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-5%25' y='-20%25' width='110%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09 .5' numOctaves='3' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3Cg filter='url(%23f)' fill='%23EDC17E'%3E%3Cpath d='M4.0 10.2 L12.0 9.5 L20.0 8.3 L28.0 9.7 L36.0 8.4 L44.0 8.7 L52.0 7.8 L60.0 10.3 L68.0 8.2 L76.0 9.4 L84.0 9.2 L92.0 7.9 L100.0 7.8 L108.0 7.7 L116.0 10.5 L124.0 10.6 L132.0 9.3 L140.0 9.6 L148.0 9.3 L156.0 8.0 L164.0 10.2 L172.0 8.0 L180.0 8.1 L188.0 9.0 L196.0 12.5 Q199 20 196.0 27.0 L188.0 29.6 L180.0 32.1 L172.0 30.8 L164.0 31.0 L156.0 29.5 L148.0 31.5 L140.0 29.6 L132.0 32.3 L124.0 30.8 L116.0 30.7 L108.0 29.9 L100.0 30.4 L92.0 31.5 L84.0 31.6 L76.0 29.7 L68.0 32.1 L60.0 30.5 L52.0 30.0 L44.0 32.0 L36.0 31.7 L28.0 31.6 L20.0 30.1 L12.0 32.6 L4.0 29.2 Q1 20 4.0 10.2Z' opacity='.55'/%3E%3Cpath d='M4.0 10.8 L12.0 9.8 L20.0 9.1 L28.0 8.9 L36.0 9.1 L44.0 9.0 L52.0 9.3 L60.0 8.9 L68.0 10.2 L76.0 7.6 L84.0 9.7 L92.0 7.5 L100.0 10.4 L108.0 8.5 L116.0 10.4 L124.0 8.4 L132.0 9.4 L140.0 8.2 L148.0 7.5 L156.0 10.5 L164.0 8.3 L172.0 8.5 L180.0 7.5 L188.0 8.0 L196.0 12.7 Q199 20 196.0 27.7 L188.0 30.0 L180.0 29.7 L172.0 30.1 L164.0 32.6 L156.0 31.3 L148.0 30.3 L140.0 30.6 L132.0 30.9 L124.0 29.9 L116.0 30.1 L108.0 31.2 L100.0 30.7 L92.0 31.7 L84.0 31.3 L76.0 29.7 L68.0 32.6 L60.0 30.1 L52.0 29.5 L44.0 30.8 L36.0 30.8 L28.0 31.7 L20.0 29.5 L12.0 29.6 L4.0 26.8 Q1 20 4.0 10.8Z' opacity='.35' transform='translate(2 1.5)'/%3E%3C/g%3E%3C/svg%3E")}
html:not(.sand) .pb .hlt{color:#fff}

/* ===== round 35: calmer, after Index — no numbers, no dots, no vertical line; small plain section labels ===== */
.spine{display:none!important}
.chap .no{display:none}
.chap::before,#letter.sand .chap::before,html.sand .chap::before,html.sand #letter.sand .chap::before{display:none!important}
.story{--in:0px}
.chap{font-family:var(--font);font-size:13px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)!important;margin-bottom:6px}
html.sand .chap{color:#2F6EA8!important}
.backed .chap,.backed .bk{color:#6FA8DC!important}
.gph video.hv{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;filter:saturate(.95)}
@media (max-width:960px){.gph video.hv{height:auto;aspect-ratio:4/3}}
.skin .skin-vo{margin-left:6px;padding:0 10px;font-size:12.5px;color:#fff;text-decoration:none;opacity:.8;white-space:nowrap}.skin .skin-vo:hover{opacity:1}

/* ===== round 36 ===== */
/* hero: more air between the lines */
.htext h1{line-height:1.16}
.htext p{margin-top:30px}
.htext .ctas{margin-top:40px}
/* hero links: a neat blue ring on hover */
.cbtn{--paint:#2F6EA8}
html:not(.sand) .cbtn{--paint:#8FC0EC}
.paint .p1{stroke-width:1.6;opacity:.9}
/* why we exist: one light blue highlight, plain blue dots */
.pb .c1 .hlt,.pb .c2 .hlt,.pb .c3 .hlt{background-image:linear-gradient(rgba(111,168,220,.30),rgba(111,168,220,.30))}
.hlt{padding:0 .12em;margin:0 -.06em;background-position:0 88%!important;background-size:0% 42%}
.pb.in .hlt{background-size:100% 42%}
@media (prefers-reduced-motion:reduce){.hlt{background-size:100% 42%}}
html:not(.sand) .pb .c1 .hlt,html:not(.sand) .pb .c2 .hlt,html:not(.sand) .pb .c3 .hlt{background-image:linear-gradient(rgba(111,168,220,.38),rgba(111,168,220,.38))}
.pb li::before{-webkit-mask:none;mask:none;width:6px;height:6px;border-radius:50%;top:.72em;left:6px;background:var(--blue);opacity:1}
.pb li{padding-left:32px}
/* the new rings photo: keep the heart of the stump in view */
.fade.stump img{object-position:50% 24%;filter:saturate(.9) contrast(1.02)}
/* sand: one quiet, tone-on-tone wash at the top only */
html.sand .mist{display:none!important}
html.sand .hero.grove .mist.hm1,html.sand .hero.grove .mist.hm2{display:block!important}
html.sand .hero.grove .mist.hm1{opacity:.55!important}
html.sand .hero.grove .mist.hm2{opacity:.45!important}
/* careers: calmer — a plain list of what we offer, and roles as one clean line each */
.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 48px;max-width:980px}
.offers li{position:relative;padding:0 0 0 22px!important;border:0!important;font-size:18px;line-height:1.45}
.offers li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--blue);margin:0}
.role-row{grid-template-columns:minmax(0,1fr) auto 32px;gap:32px;padding:24px 0}
.role-row p{display:none}
@media (max-width:960px){.offers{grid-template-columns:minmax(0,1fr)}.role-row{grid-template-columns:minmax(0,1fr) 24px}}
/* sand: no painted patches; just a soft band of warm light behind the headline, like sun on paper */
html.sand .hero.grove .mist.hm1,html.sand .hero.grove .mist.hm2{display:none!important}
html.sand .hero.grove::before{content:"";position:absolute;z-index:1;pointer-events:none;left:-10%;top:8%;width:70%;height:84%;background:radial-gradient(closest-side,rgba(255,252,244,.85),rgba(255,252,244,0));filter:blur(8px)}

/* ===== round 38 ===== */
/* the hero's painted ring, reused on other links */
.rl{position:relative}
.rl>.paint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:visible;pointer-events:none;filter:url(#paintf);--paint:#2F6EA8}
html:not(.sand) .rl>.paint{--paint:#8FC0EC}
.rl:hover>.paint path,.rl:focus-visible>.paint path,.role-row:hover h3>.paint path{stroke-dashoffset:0}
/* menu "Message us": plain words like the hero links, ring on hover (no corner brackets) */
.nav nav>.btn{background:none!important;height:auto;padding:6px 2px;margin-left:6px}
.nav nav>.btn:hover{background:none!important}
.role-row h3{justify-self:start}
.email.rl{border-bottom-color:transparent;transition:border-color .3s}
.email.rl:not(:hover){border-bottom-color:var(--blue)}
/* RECUR wordmark: answers the cursor — the letters open out and turn blue */
.nav .mark{transition:letter-spacing .55s cubic-bezier(.2,.7,.2,1),color .35s}
.nav .mark:hover,.nav .mark:focus-visible{letter-spacing:.32em;color:var(--blue)!important}
/* smaller clocks */
.clocks{gap:clamp(20px,4vw,56px);margin-top:36px;padding-top:24px}
.clock{gap:12px}
.clock svg{width:40px;height:40px}
.clock b{font-size:13.5px}
.clock span{font-size:12px}
@media (max-width:600px){.clock svg{width:36px;height:36px}}

/* ===== round 39: moving trees ===== */
.gph video.hv{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
@media (max-width:960px){.gph video.hv{height:auto;aspect-ratio:16/10}}
.fade video{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.95);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 16%,#000 42%),linear-gradient(180deg,transparent 0,#000 22%,#000 76%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 16%,#000 42%),linear-gradient(180deg,transparent 0,#000 22%,#000 76%,transparent 100%);mask-composite:intersect}
.fade.seq img{object-position:50% 45%}
@media (max-width:960px){.fade video{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%),linear-gradient(180deg,transparent 0,#000 22%,#000 76%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18%),linear-gradient(180deg,transparent 0,#000 22%,#000 76%,transparent 100%)}}

/* ===== round 40 ===== */
/* menu links: the painted ring draws round them on hover, instead of the underline */
.nav nav>a.hide.rl:hover::after{transform:scaleX(0)}
@media (max-width:600px){.skin span{display:none}.skin button{padding:6px 10px}}
/* phones: the hero video sits in the flow under the headline (an older full-bleed hero rule had pinned it, collapsing its frame) */
@media (max-width:960px){.hero .gph video.hv{position:relative;inset:auto}}

/* ===== round 41: sand watercolour, painted washes placed one per section across the site ===== */
.wc{display:none;position:absolute;z-index:-1;pointer-events:none;background:center/100% 100% no-repeat}
html.sand.wd .wc{display:block;opacity:.8}
html.sand.wd section{isolation:isolate}
html.sand.wd .mist{display:none!important}
html.sand.wd .hero.grove::before{display:none}
@media (max-width:960px){html.sand.wd .wc{opacity:.6}}
/* navy: the bright crown sits under the menu, so the top of the hero video fades further into navy */
html:not(.sand) .gph::after{background:linear-gradient(90deg,var(--navy) 0%,rgba(8,20,47,.55) 18%,rgba(8,20,47,0) 45%),linear-gradient(180deg,rgba(8,20,47,.92) 0%,rgba(8,20,47,.5) 12%,rgba(8,20,47,0) 26%,rgba(8,20,47,0) 70%,var(--navy) 100%)}
@media (max-width:960px){html:not(.sand) .gph::after{background:linear-gradient(180deg,var(--navy) 0%,rgba(8,20,47,0) 22%,rgba(8,20,47,0) 55%,var(--navy) 100%)}}

/* ===== round 42: cards ===== */
:root{--card:rgba(255,255,255,.035);--cardb:rgba(255,255,255,.09)}
html.sand{--card:#F7F5F0;--cardb:rgba(21,32,58,.09)}
.vc{position:relative;background:var(--card);border:1px solid var(--cardb);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.vc::before,.vc::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;transition:width .35s,height .35s}
.vc::before{left:-1px;top:-1px;border-left:1px solid var(--blue);border-top:1px solid var(--blue)}
.vc::after{right:-1px;bottom:-1px;border-right:1px solid var(--blue);border-bottom:1px solid var(--blue)}
.vc:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(8,20,47,.45)}
.vc:hover::before,.vc:hover::after{width:28px;height:28px}
/* thin-line icon on a soft painted pool */
.ic{position:relative;display:block;width:84px;height:84px;margin:-6px 0 18px -10px}
.ic::before{content:"";position:absolute;inset:0;background:var(--pool) center/contain no-repeat;opacity:.5}
html.sand .ic::before{opacity:.6}
.ic svg{position:absolute;left:16px;top:16px;width:52px;height:52px;overflow:visible}
.ic svg *{fill:none;stroke:var(--blue);stroke-width:1.15;vector-effect:non-scaling-stroke}
.ic svg .f{stroke-opacity:.5}
.ic svg .g{fill:#EAF3FC;stroke:none;filter:drop-shadow(0 0 4px rgba(111,168,220,.95))}
html.sand .ic svg .g{fill:var(--blue);filter:drop-shadow(0 0 3px rgba(47,110,168,.5))}
.vc:hover .ic svg{transform:translateY(-2px);transition:transform .35s}
/* careers: what it's like here */
.vc3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.vc3 .vc{padding:34px 32px 36px}
.vc3 h3{font-size:22px;line-height:1.25;margin:0}
.vc3 p{margin:12px 0 0;color:var(--muted);font-size:15.5px;line-height:1.6}
/* careers: what we offer */
.oc5{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.oc5 .vc{padding:26px 22px 28px;display:flex;flex-direction:column}
.oc5 .ic{width:72px;height:72px;margin:-4px 0 14px -8px}
.oc5 .ic svg{left:14px;top:14px;width:44px;height:44px}
.oc5 span{font-family:var(--display);font-size:17px;line-height:1.4}
@media (max-width:1100px){.oc5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:960px){.vc3{grid-template-columns:minmax(0,1fr);gap:16px}.oc5{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (max-width:560px){.oc5{grid-template-columns:minmax(0,1fr)}.oc5 .vc{flex-direction:row;align-items:center;gap:6px;padding:16px 18px}.oc5 .ic{flex:none;margin:-6px 0 -6px -8px}}
/* team: founder quotes as picture cards */
.tq3:has(.tqc){gap:24px;align-items:stretch}
.tq.tqc{padding:0;border-top:0;background:var(--card);border:1px solid var(--cardb);justify-content:flex-start;position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.tq.tqc:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(8,20,47,.45)}
.tqm{position:relative;aspect-ratio:16/9;overflow:hidden}
.tqm .tqp{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tq.tqc:hover .tqm .tqp{transform:scale(1.04)}
.tqm::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,47,0) 45%,rgba(8,20,47,.7) 100%)}
.tqm .lg,html.sand .tqm .lg{position:absolute;z-index:1;left:22px;bottom:18px;margin:0;filter:brightness(0) invert(1);opacity:.95}
.tqc blockquote{position:relative;padding:30px 28px 0;font-size:clamp(19px,1.45vw,21px)}
.tqc blockquote::before{content:"“";position:absolute;left:20px;top:-30px;width:52px;height:52px;border-radius:50%;background:var(--card);border:1px solid var(--cardb);display:flex;align-items:center;justify-content:center;font-size:44px;line-height:1;padding-top:14px;box-sizing:border-box;color:var(--blue)}
.tqc figcaption{margin-top:auto;padding:28px 28px 26px}
.tqc .av{width:52px;height:52px}
html.sand .tqc blockquote::before{background:#F7F5F0}
html:not(.sand) .tqc blockquote::before{background:#0E1C3D}
/* light/dark switch in the menu */
.nav .mode{all:unset;box-sizing:border-box;cursor:pointer;position:relative;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;margin-left:10px;color:inherit;border-radius:50%}
.nav .mode svg.moon,.nav .mode svg.sun{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.nav .mode:hover svg.moon,.nav .mode:hover svg.sun{transform:rotate(-24deg)}
.nav .mode:focus-visible{outline:1px solid var(--blue);outline-offset:2px}
html.sand .nav .mode .sun,html:not(.sand) .nav .mode .moon{display:none}
@media (max-width:960px){.nav .mode{margin-left:0;margin-right:6px}}
.tqc blockquote{max-width:none;text-wrap:wrap}
.tqc blockquote::before{left:auto;right:24px}
/* round 43: no quote badge on founder cards; "What we offer" = a simple two-column list with a fine blue tick */
.tqc blockquote::before{content:none;display:none}
.tqc blockquote{padding-top:28px}
.olist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;border-top:1px solid var(--rule)}
.olist li{position:relative;padding:18px 0 18px 34px;border-bottom:1px solid var(--rule);font-family:var(--display);font-size:18px;line-height:1.4}
.olist li::before{content:"";position:absolute;left:2px;top:calc(18px + .42em);width:12px;height:6px;border-left:1.3px solid var(--blue);border-bottom:1.3px solid var(--blue);transform:rotate(-45deg)}
@media (max-width:960px){.olist{grid-template-columns:minmax(0,1fr)}.olist li{font-size:17px;padding:16px 0 16px 32px}.olist li::before{top:calc(16px + .42em)}}
/* "What we offer": one column, every item on a single line */
.olist{grid-template-columns:minmax(0,1fr);max-width:820px}
.olist li{padding:17px 0 17px 36px;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.olist li::before{top:calc(17px + .45em)}
@media (max-width:960px){.olist li{white-space:normal;font-size:17px;padding:15px 0 15px 32px}.olist li::before{top:calc(15px + .42em)}}
/* phones: the side videos sit below their heading; the desktop 48px lift made them cover the heading text */
@media (max-width:960px){.fade{top:auto;bottom:auto}}

/* ===== round 45: modern mobile navigation ===== */
.mtog{display:none}
@media (max-width:960px){
  /* the bar: full width, compact; turns into a frosted strip once you scroll (no floating capsule on phones) */
  .nav .wrap,.nav.float .wrap{max-width:none;height:60px;margin:0;border-radius:0;padding-inline:clamp(16px,4vw,32px);border:0;box-shadow:none;background-color:transparent}
  .nav.float .wrap{background-color:rgba(8,20,47,.78);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
  html.sand .nav.float .wrap{background-color:rgba(238,235,229,.82);box-shadow:0 1px 0 rgba(21,32,58,.08)}
  .nav nav{gap:4px}
  .nav .mark{font-size:15px}
  .nav .mode{width:44px;height:44px;margin:0}
  .nav .mode>.paint{display:none}
  /* menu button: two lines that turn into a cross */
  .mtog{all:unset;box-sizing:border-box;position:relative;z-index:62;display:inline-flex;flex-direction:column;justify-content:center;gap:7px;width:44px;height:44px;padding:0 10px;margin-right:-10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mtog span{display:block;height:1.5px;width:100%;background:currentColor;border-radius:2px;transition:transform .4s cubic-bezier(.2,.7,.2,1),width .3s}
  .mtog span:last-child{width:70%;margin-left:auto}
  .mtog[aria-expanded="true"] span:first-child{transform:translateY(4.25px) rotate(45deg)}
  .mtog[aria-expanded="true"] span:last-child{width:100%;transform:translateY(-4.25px) rotate(-45deg)}
  .mtog:focus-visible{outline:1px solid var(--blue);outline-offset:-4px;border-radius:8px}
}
/* the full-screen menu sheet */
.msheet{position:fixed;inset:0;z-index:61;display:flex;flex-direction:column;padding:96px clamp(20px,6vw,40px) calc(28px + env(safe-area-inset-bottom));background:#08142F;color:#fff;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s;overflow-y:auto;overscroll-behavior:contain}
html.sand .msheet{background:#EEEBE5;color:#15203A}
.msheet::before{content:"";position:absolute;right:-30%;bottom:-10%;width:110%;aspect-ratio:1;background:url(art/wpool1.webp) center/contain no-repeat;opacity:.18;pointer-events:none}
html.sand .msheet::before{opacity:.28}
.msheet.open{opacity:1;visibility:visible;transition:opacity .35s}
.msheet nav{display:flex;flex-direction:column;position:relative}
.msheet nav a{display:flex;align-items:baseline;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);font-family:var(--display);font-weight:300;font-size:clamp(30px,8.5vw,40px);line-height:1.15;letter-spacing:-.02em;color:inherit;text-decoration:none;opacity:0;transform:translateY(14px);transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.2,1),color .2s}
html.sand .msheet nav a{border-bottom-color:rgba(21,32,58,.1)}
.msheet nav a::after{content:"→";font-family:var(--font);font-size:18px;opacity:.35;transition:transform .3s,opacity .3s}
.msheet nav a:active::after,.msheet nav a:hover::after{transform:translateX(4px);opacity:.8}
.msheet nav a.on{color:var(--blue)}
.msheet.open nav a{opacity:1;transform:none}
.msheet.open nav a:nth-child(1){transition-delay:.05s}.msheet.open nav a:nth-child(2){transition-delay:.1s}.msheet.open nav a:nth-child(3){transition-delay:.15s}.msheet.open nav a:nth-child(4){transition-delay:.2s}.msheet.open nav a:nth-child(5){transition-delay:.25s}
.msheet .mfoot{position:relative;margin-top:auto;padding-top:40px;display:flex;flex-direction:column;gap:6px;font-size:15px;opacity:0;transition:opacity .5s .3s}
.msheet.open .mfoot{opacity:1}
.msheet .mfoot a{color:inherit;text-decoration:none}
.msheet .mfoot .lbl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:4px}
html.menu-open,html.menu-open body{overflow:hidden}
html.menu-open .skin{display:none}
html.menu-open .nav .wrap{background-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.menu-open .nav{z-index:62}
@media (min-width:961px){.msheet{display:none}}
@media (prefers-reduced-motion:reduce){.msheet,.msheet nav a,.mtog span{transition:none!important}}
/* mockup colour pill: smaller on phones, and it slides away while you scroll down so it never sits on top of text */
.skin{transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s}
.skin.away{transform:translateY(calc(100% + 24px));opacity:0}
@media (max-width:600px){.skin{left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);font-size:12px}.skin.away{transform:translate(-50%,calc(100% + 24px))}.skin button{padding:6px 11px}}
/* the painted hover ring left a tiny dot (its round line-end) when undrawn: keep it invisible until hover */
.paint path{opacity:0!important;transition:stroke-dashoffset .8s cubic-bezier(.55,.05,.25,1),opacity .25s!important}
.cbtn:hover .paint path,.cbtn:focus-visible .paint path,.rl:hover>.paint path,.rl:focus-visible>.paint path,.role-row:hover h3>.paint path{opacity:.9!important}
.msheet::before{right:-45%;bottom:-18%;opacity:.12}
html.sand .msheet::before{opacity:.2}

/* ===== round 47: fixes from the independent cross-device review ===== */
/* 1. menu panel must not scroll sideways or drift: the watercolour now lives inside the panel's own edges */
.msheet{overflow-x:hidden}
.msheet::before{inset:0;right:0;bottom:0;width:auto;aspect-ratio:auto;background:url(art/wpool1.webp) no-repeat right -38vw bottom -24vw/120vw auto}
/* 2-3. mockup colour pill: on desktop it folds into a small "Colour" tab in the left margin and opens on hover or tap;
   on phones and tablets it lives inside the menu instead of floating over the page */
@media (min-width:961px){
  .skin{left:14px;bottom:14px;padding:4px;gap:0}
  .skin span{padding:6px 10px;cursor:pointer;opacity:.85}
  .skin button{display:none}
  .skin:hover button,.skin:focus-within button,.skin.open button{display:inline-block}
  .skin:hover span,.skin:focus-within span,.skin.open span{opacity:.6}
}
@media (max-width:960px){.skin{display:none!important}}
body>footer{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.mlook{display:flex;gap:6px;margin-top:18px;flex-wrap:wrap}
.mlook button{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;padding:0 16px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid rgba(255,255,255,.22);font-size:14px}
html.sand .mlook button{border-color:rgba(21,32,58,.2)}
.mlook button[aria-pressed="true"]{background:currentColor}
.mlook button[aria-pressed="true"] b{color:#08142F}
html.sand .mlook button[aria-pressed="true"] b{color:#EEEBE5}
.mlook b{font-weight:400}
/* 4. touch screens: hover effects must not stick after a tap (the arrow's corner box) */
@media (hover:none){.btn:hover{--l:10px;background-color:transparent}.vc:hover,.tq.tqc:hover{transform:none;box-shadow:none}.tq.tqc:hover .tqm .tqp{transform:none}.vc:hover::before,.vc:hover::after{width:14px;height:14px}}
/* 5. watercolour washes keep their painted proportions instead of being stretched to fill tall sections */
.wc{height:auto!important;aspect-ratio:3/2}
.wc.wc-left{aspect-ratio:2/3}
/* 6. founder carousel lines up with the page's left edge, and snaps to it */
#voices .wall{padding-inline:max(clamp(16px,4vw,48px),calc((100vw - var(--wrap)) / 2 + clamp(16px,4vw,48px)));scroll-padding-inline:max(clamp(16px,4vw,48px),calc((100vw - var(--wrap)) / 2 + clamp(16px,4vw,48px)))}
/* 7. the sticky bar flips to the opposite colour over a band of the other colour, instead of going muddy grey */
html.sand .nav.inv.float .wrap{background-color:rgba(8,20,47,.8);border-color:rgba(255,255,255,.1);box-shadow:0 14px 34px -16px rgba(0,0,0,.5)}
html:not(.sand) .nav.inv.float .wrap{background-color:rgba(247,245,241,.86);border-color:rgba(21,32,58,.1)}
html.sand .nav.inv nav a,html.sand .nav.inv .mark,html.sand .nav.inv .mode,html.sand .nav.inv .mtog{color:#fff!important}
html:not(.sand) .nav.inv nav a,html:not(.sand) .nav.inv .mark,html:not(.sand) .nav.inv .mode,html:not(.sand) .nav.inv .mtog{color:#15203A!important}
html.menu-open .nav.inv nav a,html.menu-open .nav.inv .mark,html.menu-open .nav.inv .mode,html.menu-open .nav.inv .mtog{color:inherit!important}
@media (max-width:960px){html.sand .nav.inv.float .wrap{box-shadow:0 1px 0 rgba(255,255,255,.08)}html:not(.sand) .nav.inv.float .wrap{box-shadow:0 1px 0 rgba(21,32,58,.08)}}
/* 8. iPad portrait: hero text starts on the same left edge as everything else */
@media (max-width:960px){.hero.grove .htext{margin-left:0;margin-right:0;max-width:640px}}
/* 9. comfortable tap targets on touch screens */
@media (pointer:coarse){body>footer a,.li,.back,.msheet .mfoot a{display:inline-flex;align-items:center;min-height:44px}}
/* 10. no lone last word in the big homepage headline */
.htext h1{text-wrap:balance}
/* 11. very wide screens: scale the whole layout up a little so it doesn't look small and sparse */
@media (min-width:1800px){:root{--wrap:1600px}html{font-size:17px}}
/* open menu: the bar is solid so scrolled links pass under it, never over the logo; tighter on short screens */
html.menu-open .nav .wrap{background-color:#08142F!important}
html.sand.menu-open .nav .wrap{background-color:#EEEBE5!important}
html.menu-open .nav.inv nav a,html.menu-open .nav.inv .mark,html.menu-open .nav.inv .mode,html.menu-open .nav.inv .mtog{color:inherit!important}
html.menu-open .nav{color:#fff}
html.sand.menu-open .nav{color:#15203A}
@media (max-height:760px){.msheet{padding-top:76px}.msheet nav a{padding:10px 0;font-size:clamp(26px,7.5vw,34px)}.msheet .mfoot{padding-top:24px}.msheet .mfoot .lbl[style]{margin-top:16px!important}}

/* R48 growing-tree graphic (index.html?rings=…, rings.html) */
figure.rg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rg-yr{position:absolute;font:400 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.rg-yr b{font:300 30px/1 "Work Sans",sans-serif;letter-spacing:0;margin-left:8px;color:var(--white);font-variant-numeric:tabular-nums}
.rg-home{position:absolute;z-index:1;margin:0;top:-90px;bottom:-60px;left:57%;right:calc(-1 * clamp(16px,4vw,48px));pointer-events:none}
.rg-home .rg-yr{left:8%;bottom:0}
@media (max-width:960px){
  .rg-home{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1/1;max-height:520px;margin:24px 0 0}
  .rg-home .rg-yr{left:0;bottom:0}
}
@media (max-width:960px){.rg-home[data-rg=pair],.rg-home[data-rg=wpair]{aspect-ratio:5/4}}

/* R50 team feedback: tighter side margins, bigger company rows */
.co .logo{height:calc(var(--h,30px) * 1.3);max-width:280px}
.co .sector{font-size:15px}
.co p{font-size:clamp(17px,1.35vw,20px);line-height:1.5}
@media (min-width:961px){.co{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(36px,4.5vw,72px)}}

/* R51: light/dark switch, promise list, painted grove */
.nav .mode{width:56px;height:44px;margin-left:12px;border-radius:999px}
.nav .mode .trk{position:relative;display:block;width:52px;height:28px;border-radius:999px;border:1px solid currentColor;box-sizing:border-box;opacity:.85;transition:background-color .35s,opacity .2s}
.nav .mode:hover .trk{opacity:1}
.nav .mode .trk svg{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;transform:none!important;display:block!important;opacity:.55}
.nav .mode .trk .sun{left:6px}
.nav .mode .trk .moon{right:6px}
.nav .mode .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:currentColor;transition:transform .4s cubic-bezier(.3,.7,.2,1)}
html:not(.sand) .nav .mode .knob{transform:translateX(24px)}
@media (max-width:960px){.nav .mode{width:56px;margin:0 4px 0 0}}
.ptext .plead{margin-bottom:22px}
.plist{list-style:none;margin:0;padding:0;max-width:60ch;border-top:1px solid rgba(21,32,58,.14)}
.plist li{text-wrap:pretty;position:relative;padding:16px 0 16px 30px;border-bottom:1px solid rgba(21,32,58,.14);font-size:17px;line-height:1.55;color:#2B3550}
.plist li::before{content:"";position:absolute;left:2px;top:calc(16px + .5em);width:12px;height:6px;border-left:1.3px solid #2F6EA8;border-bottom:1.3px solid #2F6EA8;transform:rotate(-45deg)}
.plist b{display:block;font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:21px;line-height:1.3;color:#15203A;margin-bottom:2px}
@media (max-width:960px){.plist li{font-size:16px;padding:14px 0 14px 28px}.plist li::before{top:calc(14px + .5em)}.plist b{font-size:19px}}
@media (max-width:960px){.rg-home.tree{aspect-ratio:1/1}}
/* R52: backer logos line up with the text column at every width; no rule under the navy band; team logos span the photo grid */
.brow{position:relative;z-index:3;background:var(--navy);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.brow .bgrid{border:0;background:none}
/* R53: each logo centred in its own box; the grid's outer edges are drawn and sit exactly on the text column, so the boxes line up with the heading above */
.brow .bc{justify-content:center;text-align:center;padding:24px clamp(16px,2vw,32px)}
.brow .bgrid{border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
.brow .bc img{max-width:100%}
body:has(#backers) footer .f{border-top:0}
.emps{justify-content:space-between;margin-top:clamp(40px,4vw,56px);margin-bottom:0}
@media (max-width:1069px){.emps{justify-content:flex-start}}
.ptext .psig{margin-top:26px;font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:24px;color:#2F6EA8}
.ptext blockquote{text-wrap:balance}
.brow .bc img[src*="prosus"]{position:relative;top:2px} /* optical: the "p" descender makes it sit high */
/* R54 legal pages + footer legal links */
.legal{max-width:760px;font-size:16.5px;line-height:1.7}
.legal>div{margin-bottom:36px}
.legal h2{font-family:var(--font);font-weight:400;font-size:clamp(20px,1.8vw,24px);margin:0 0 12px}
.legal p,.legal li{margin:0 0 12px}
.legal ul,.legal ol{padding-left:1.2em;margin:0 0 12px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.f-base .legal-links{display:flex;gap:20px}
.f-base .legal-links a{color:inherit;text-decoration:none}
.f-base .legal-links a:hover{text-decoration:underline;text-underline-offset:3px}
html.sand .f-base{color:#5A6274} /* legal line: 4.5:1 on sand */

/* front-page hero: full-bleed photos of the industries our companies serve, slowly drifting and crossfading,
   under one colour grade and a moving film grain. Dark in both themes, so the text and menu stay white over it. */
.hero.photo{--white:#fff;--muted:rgba(255,255,255,.86);position:relative;isolation:isolate;height:100vh;height:100svh;min-height:640px;padding:0;overflow:hidden;background:#0d1420;color:#fff}
.hero.photo .slides,.hero.photo .sl{position:absolute;inset:0}
.hero.photo .sl{opacity:0;transition:opacity 1.4s ease-out}
.hero.photo .sl.on{opacity:1}
.hero.photo .sl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.07) translateX(2.2%);transition:transform 8s cubic-bezier(.33,1,.68,1)}
.hero.photo .sl.on img{transform:none}
/* the grade: darken, a blue-to-amber colour wash, shade behind the words, then grain */
.hero.photo .gr1,.hero.photo .gr2,.hero.photo .gr3{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero.photo .gr1{background:#0d1420;opacity:.26}
.hero.photo .gr2{background:linear-gradient(180deg,#2e4a7a 0%,#3b5b8c 35%,#c46a2a 70%,#e08a3c 100%);mix-blend-mode:color;opacity:.12}
.hero.photo .gr3{background:linear-gradient(90deg,rgba(13,20,32,.72) 0%,rgba(13,20,32,.32) 45%,rgba(13,20,32,0) 70%),linear-gradient(180deg,rgba(13,20,32,.5) 0%,rgba(13,20,32,0) 22%,rgba(13,20,32,0) 70%,rgba(13,20,32,.6) 100%)}
.hero.photo .grain{position:absolute;inset:-60px;z-index:1;pointer-events:none;mix-blend-mode:overlay;opacity:.28;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.6 -0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-22px,14px)}33%{transform:translate(18px,-26px)}50%{transform:translate(-12px,30px)}67%{transform:translate(26px,8px)}83%{transform:translate(-30px,-12px)}100%{transform:translate(0,0)}}
.hero.photo .wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding-block:40px 0}
.hero.photo .htext{max-width:620px}
.hero.photo h1{color:#fff}
.hero.photo h1 .hl{color:#fff;opacity:.94}
.hero.photo .htext p{color:rgba(255,255,255,.88)}
.hero.photo .cbtn{--paint:#E2B477;color:#fff}
.hero.photo .ind{position:absolute;right:calc(max(0px,(100vw - var(--wrap)) / 2) + clamp(16px,4vw,48px));bottom:clamp(40px,7vh,88px);z-index:2;text-align:right;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.84);text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hero.photo .ind b{display:block;margin-top:6px;font-weight:400;color:#fff;font-size:13px;letter-spacing:.1em}
.hero.photo .ticks{display:flex;gap:5px;justify-content:flex-end;align-items:center;margin-top:14px}
.hero.photo .hpause{width:28px;height:28px;margin:-13px -6px -13px 4px;display:grid;place-items:center;background:none;border:0;color:#fff;opacity:.75;cursor:pointer;border-radius:50%}
.hero.photo .hpause:hover{opacity:1}.hero.photo .hpause:focus-visible{outline:2px solid #fff;outline-offset:1px}
.hero.photo.paused .ticks i.on::after{animation-play-state:paused}
.hero.photo .ticks i{width:16px;height:2px;background:rgba(255,255,255,.28);overflow:hidden;position:relative}
.hero.photo .ticks i.on::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:tick 6s linear forwards}
@keyframes tick{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* sand: the menu stays light while it sits on the photo, and returns to ink once it gathers into the floating bar */
html.sand:not(.menu-open) body:has(.hero.photo) .nav:not(.float){--white:#fff;color:#fff}
html.sand:not(.menu-open) body:has(.hero.photo) .nav:not(.float) nav a,html.sand:not(.menu-open) body:has(.hero.photo) .nav:not(.float) .mark{color:#fff}
html.sand:not(.menu-open) body:has(.hero.photo) .nav:not(.float) .btn{--c:#fff}
@media (max-width:760px){
  .hero.photo{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:36px}
  .hero.photo .wrap{height:auto;align-items:flex-end;padding-block:0}
  .hero.photo .ind{position:relative;right:auto;bottom:auto;text-align:left;margin:24px 16px 0}
  .hero.photo .ticks{justify-content:flex-start}
  .hero.photo .gr3{background:linear-gradient(180deg,rgba(13,20,32,.55) 0%,rgba(13,20,32,.3) 30%,rgba(13,20,32,.62) 55%,rgba(13,20,32,.85) 100%)}
}
@media (prefers-reduced-motion:reduce){.hero.photo .grain{animation:none}.hero.photo .hpause{display:none}.hero.photo .sl img{transition:none;transform:none}.hero.photo .ticks i.on::after{animation:none;transform:none}}

/* dark theme: a rule above the footer, matching the one over the clocks, so it is clear where the bottom starts */
html:not(.sand) body:has(#backers) footer .f{border-top:1px solid var(--rule)}
/* testimonial logos: show the whole logo, never cropped to fill its box */
.tile .lg{object-fit:contain!important}