/* ============ TOKENS ============ */ :root{ --sea-card:url("sea-card.webp"); --ink: #0B0E15; /* deep marine near-black */ --ink-2: #141A26; /* raised dark surface */ --paper: #F9F9F9; /* neutral off-white */ --paper-2: #FFFFFF; --muted: #59626F; /* slate secondary text */ --muted-d: #8A93A1; /* muted on dark */ --line: #DADCD8; /* hairline on paper */ --line-d: rgba(255,255,255,.13); /* hairline on dark */ --signal: #1F5CFF; /* electric marine blue – the taut line */ /* Surt slots into the display/text stack; mono is the utility face */ --font-display: 'Surt','Schibsted Grotesk',system-ui,sans-serif; --font-text: 'Surt','Schibsted Grotesk',system-ui,sans-serif; --font-mono: 'JetBrains Mono',ui-monospace,monospace; --maxw: min(1840px, 100%); /* fluid: fill the viewport (minus gutters) up to a sane cap */ --gut: clamp(20px, 10vw, 220px); --ease: cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:108px} body{ background:var(--paper); color:var(--ink); font-family:var(--font-text); font-weight:400; -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden; } a{color:inherit;text-decoration:none} ::selection{background:var(--signal);color:#fff} /* ===== cross-page camera-pan transitions (driven by app.js) ===== */ .pan-frame{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:60;background:transparent;display:block} /* once a panned frame is the live page the shell must never show around it */ html.pan-live,html.pan-live body{margin:0;padding:0;overflow:hidden;background:var(--paper)} html.pan-live.pan-dark,html.pan-live.pan-dark body{background:#06182c} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)} .eyebrow{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); display:inline-flex;align-items:center;gap:.7em; } .eyebrow::before{ content:"";width:7px;height:7px;border-radius:50%; background:var(--signal);flex:none; } /* ============ NAV ============ */ header.nav{ position:fixed;top:0;left:0;right:0;z-index:50; background:#06182c;border-bottom:1px solid rgba(242,243,241,.14); transition:background .35s var(--ease),border-color .35s var(--ease); } /* home: banner fully transparent over the waves, solid navy once scrolled past them */ body:has(.hero) header.nav:not(.solid){background:transparent;border-bottom-color:transparent} header.nav.solid{ background:#06182c; -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid rgba(242,243,241,.14); } .nav-in{ display:flex;align-items:center;justify-content:space-between; height:92px; } .logo{ display:flex;align-items:center; } .logo-img{height:34px;display:block; filter:brightness(0) invert(1); /* white over the dark hero */ transition:filter .35s;} .nav.solid .logo-img{filter:brightness(0) invert(1)} /* stay cream on the dark banner */ nav.links{display:flex;gap:34px;align-items:center;margin-left:auto} nav.links a{ font-size:20px;color:var(--paper);position:relative;padding:4px 0;transition:color .35s; } .nav.solid nav.links a{color:var(--paper)} nav.links a::after{ content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0; background:var(--signal);transition:width .32s var(--ease); } nav.links a:hover::after,nav.links a:focus-visible::after{width:100%} .nav-cta{ font-size:15px;border:1px solid var(--paper);color:var(--paper);border-radius:3px; padding:11px 22px;letter-spacing:-.005em;transition:background .25s,color .25s,border-color .35s; } .nav-cta:hover{background:var(--paper);color:var(--ink)} .nav.solid .nav-cta{border-color:var(--paper);color:var(--paper)} .nav.solid .nav-cta:hover{background:var(--paper);color:var(--ink)} .menu-btn{display:none;background:none;border:0;font-size:0;cursor:pointer;color:var(--paper);padding:6px 0} /* hamburger: three lines drawn in currentColor so page-level color overrides apply */ .menu-btn::before{content:"";display:block;width:20px;height:14px; background:linear-gradient(currentColor,currentColor) top/100% 2px no-repeat, linear-gradient(currentColor,currentColor) center/100% 2px no-repeat, linear-gradient(currentColor,currentColor) bottom/100% 2px no-repeat} .nav.solid .menu-btn{color:var(--paper)} /* ============ HERO – dark, slick statement, founders floating right ============ */ .hero{ position:relative;overflow:hidden;color:var(--paper); background:linear-gradient(180deg,#06182c,#0a2c52 70%,#0a2c52); } /* abstract cream "wave" contour lines (drawn on canvas by app.js) */ .hero-lines{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none; -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%); mask-image:linear-gradient(180deg,#000 88%,transparent 100%);} /* signature forestay rigging / sail motif on the right */ .hero-rig{position:absolute;top:0;right:0;height:100%;width:min(50vw,780px);z-index:2; pointer-events:none;overflow:visible; -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%); mask-image:linear-gradient(180deg,#000 80%,transparent 100%); transform-origin:86% 6%;animation:rigSway 17s ease-in-out infinite} @keyframes rigSway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-1.2deg)}} .hero-rig .stay{stroke:rgba(255,251,243,.15);stroke-width:1;fill:none;vector-effect:non-scaling-stroke} .hero-rig .leech{stroke:rgba(255,251,243,.3);stroke-width:1;fill:none;vector-effect:non-scaling-stroke} .hero-rig .hull{stroke:rgba(255,251,243,.42);stroke-width:1.2;fill:none;vector-effect:non-scaling-stroke} .hero-rig .mast{stroke:rgba(214,232,255,.95);stroke-width:2;fill:none;vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 6px rgba(150,190,255,.85))} .hero-rig .head{fill:#eaf2ff;filter:drop-shadow(0 0 8px rgba(150,190,255,.95))} /* tint: brand-deepen + nav/text legibility + fade to paper at the waterline */ .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(78% 66% at 16% 74%, rgba(2,8,18,.66), transparent 58%), linear-gradient(180deg, rgba(4,12,24,.5) 0%, rgba(7,24,46,.10) 26%, rgba(7,22,42,.16) 64%, rgba(8,30,58,.28) 100%), linear-gradient(0deg, rgba(8,30,60,.20), rgba(8,30,60,.20));} /* realistic boat sprite; doubles as the steerable cursor */ .hero-boat{position:absolute;left:0;top:0;width:clamp(54px,5.4vw,84px);height:auto;display:block; z-index:3;pointer-events:none;will-change:transform;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18)); animation:sail 30s linear infinite;} .hero-boat.steered{animation:none} /* churned-foam wake left while steering */ .wake-layer{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 99%); mask-image:linear-gradient(180deg,#000 84%,transparent 99%);} .foam{position:absolute;width:15px;height:15px;border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.9),rgba(228,240,250,.28) 58%,transparent 72%); will-change:transform,opacity;animation:foamFade 1.5s ease-out forwards} @keyframes foamFade{0%{opacity:.85;transform:translate(-50%,-50%) scale(.4)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}} .hero.boat-active,.hero.boat-active *{cursor:none} @keyframes sail{ 0% {transform:translate(46vw,104vh) rotate(12deg) scale(.92);opacity:0} 8% {opacity:.95} 90% {opacity:.95} 100% {transform:translate(58vw,-12vh) rotate(12deg) scale(1.05);opacity:0}} .hero-stage{ position:relative;max-width:var(--maxw);margin:0 auto; padding-inline:var(--gut); height:clamp(620px,92vh,860px); } /* the statement + CTAs as one vertically-centred block over the sea */ .hero-content{position:absolute;left:var(--gut);top:46%;transform:translateY(-50%);z-index:4;max-width:860px} .hero-statement{ margin:0;max-width:none; font-family:var(--font-display);font-weight:400; font-size:clamp(1.55rem,2.95vw,2.6rem);line-height:1.2;letter-spacing:-.025em; } .hero-statement .bright{color:#F4F7FC;white-space:nowrap} .hero-statement .muted{display:block;margin-top:.55em;font-size:.82em;color:#90a4c6} .hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px} /* hero typing effect */ .type-cursor{display:inline-block;width:.08em;height:.92em;background:currentColor; margin-left:.07em;vertical-align:-.06em;animation:cursorBlink .85s steps(1) infinite} @keyframes cursorBlink{50%{opacity:0}} /* --- floating portraits --- */ .floats{display:contents} /* desktop: children position against .hero-stage */ .fc{ position:absolute;z-index:2;margin:0; --px:0px;--py:0px;translate:var(--px) var(--py); transition:translate .6s cubic-bezier(.2,.8,.2,1); opacity:0;animation:fcIn 1s var(--ease) var(--d,.3s) forwards; } @keyframes fcIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} .fc-float{width:100%;height:100%} .fc-inner{ position:relative;width:100%;height:100%;overflow:hidden; -webkit-mask-image:linear-gradient(to bottom,#000 54%,transparent 99%); mask-image:linear-gradient(to bottom,#000 54%,transparent 99%); } /* image area – drop an inside .fc-img; placeholder shows monogram */ .fc-img{position:absolute;inset:0;background:transparent} .fc-img img{width:100%;height:100%;object-fit:cover;display:block; filter:grayscale(.2);transition:filter .5s var(--ease)} .fc:hover .fc-img img{filter:none} .fc .mono{position:absolute;top:0;left:0;right:0;height:60%;display:flex; align-items:center;justify-content:center;font-family:var(--font-display); font-weight:300;color:#8fb0ff;font-size:clamp(1.7rem,2.6vw,2.4rem);opacity:.9} .fc .rig{position:absolute;top:0;left:32%;width:1.5px;height:60%; background:linear-gradient(#8fb0ff,transparent);opacity:.4} .fc .name{position:absolute;left:3px;bottom:13%;z-index:5; font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase; color:#dfe5f2;opacity:0;transform:translateY(4px);transition:.3s var(--ease)} .fc .name i{font-style:normal;color:#8694ad} .fc:hover .name{opacity:1;transform:none} /* placements on the right + drift (staggered so they never sync) */ .fc-a{top:13%;right:23%;width:clamp(165px,17vw,248px);height:clamp(210px,21vw,312px)} .fc-b{top:30%;right:3%;width:clamp(135px,14vw,205px);height:clamp(175px,18vw,258px)} .fc-c{top:49%;right:17%;width:clamp(150px,15vw,222px);height:clamp(190px,19vw,280px)} .fc-a .fc-float{animation:driftA 8s ease-in-out infinite} .fc-b .fc-float{animation:driftB 9.6s ease-in-out infinite .7s} .fc-c .fc-float{animation:driftC 7.4s ease-in-out infinite .4s} @keyframes driftA{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-15px) rotate(.4deg)}} @keyframes driftB{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-19px) rotate(-.5deg)}} @keyframes driftC{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(.4deg)}} .btn{ font-size:14px;padding:14px 26px;border-radius:3px; border:1px solid var(--ink);transition:.25s var(--ease); display:inline-flex;align-items:center;gap:.6em; } .btn-primary{background:var(--ink);color:var(--paper)} .btn-primary:hover{background:var(--signal);border-color:var(--signal)} .btn-ghost:hover{background:var(--ink);color:var(--paper)} .btn .arr{transition:transform .25s var(--ease)} .btn:hover .arr{transform:translateX(4px)} /* ============ PROOF / portfolio marquee ============ */ .proof{border-block:1px solid var(--line);padding:41px 0;overflow:hidden} /* logos fade in/out at both edges instead of clipping hard. Mask sits on the inner viewport so the .proof hairline borders stay full-width. */ .marquee-viewport{--mq-fade:clamp(48px,9vw,160px);overflow:hidden; margin-inline:clamp(24px,6vw,120px); -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--mq-fade),#000 calc(100% - var(--mq-fade)),transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 var(--mq-fade),#000 calc(100% - var(--mq-fade)),transparent 100%)} .proof-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em; text-transform:uppercase;color:var(--muted);margin-bottom:14px} .marquee{display:flex;align-items:center;gap:56px;height:40px;--logo-base:26px;width:max-content;animation:slide 80s linear infinite} .marquee span{font-family:var(--font-display);font-weight:500;font-size:24px; letter-spacing:-.02em;color:var(--ink);white-space:nowrap;opacity:.62; transition:opacity .3s} .marquee span:hover{opacity:1} .marquee img{height:calc(var(--h,1) * var(--logo-base));width:auto;display:block;object-fit:contain; transform:translate(calc(var(--x,0) * var(--logo-base)),calc(var(--y,0) * var(--logo-base))); opacity:.92;transition:.3s} .marquee a{display:block;line-height:0} .marquee img:hover{opacity:1} /* reco & fonoa: colored logos clash on hover – flip to solid black instead */ .marquee img[src*="reco"]:hover, .marquee img[src*="fonoa"]:hover{filter:brightness(0);opacity:1} /* Per-logo optical balancing now travels with the data, not the filename. app.js sets --h / --x / --y inline per logo from site/assets/design-layer.json (mqH / mqX / mqY, keyed by company slug). It used to be a block of img[src*="slug"] rules here, which silently stopped matching once the artwork came from the CMS under a different filename. Defaults live on .marquee img. */ .marquee .acq{display:inline-flex;align-items:flex-start;gap:.4em} .marquee .acq i{font-family:var(--font-mono);font-style:normal;font-size:8.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--signal);white-space:nowrap; border:1px solid color-mix(in srgb,var(--signal) 38%, transparent);border-radius:4px; padding:2px 5px;transform:translateY(3px)} @keyframes slide{to{transform:translateX(-50%)}} /* ============ SECTION SCAFFOLD ============ */ section.block{padding-block:clamp(96px,16.5vh,192px);position:relative} /* even, tighter rhythm between home sections 01/02/03 */ #approach{padding-bottom:clamp(24px,4vh,48px)} #companies{padding-top:clamp(24px,4vh,48px);padding-bottom:clamp(24px,4vh,48px)} #insights{padding-top:clamp(24px,4vh,48px)!important} .sec-head{display:flex;gap:18px;align-items:center;margin-bottom:52px} /* small section CTA – sits on the title row, flush right with the carousel arrows */ .sec-cta{margin-left:auto;display:inline-flex;align-items:center;gap:10px; font-family:var(--font-mono);font-size:14px;letter-spacing:.18em;text-transform:uppercase; color:#fff;text-decoration:none;border-radius:4px; padding:11px 16px;background:var(--signal);transition:background .22s var(--ease)} .sec-cta .arr{color:#fff;font-family:var(--font-display);font-size:18px;line-height:1;display:inline-flex;align-items:center;transition:transform .25s var(--ease)} .sec-cta:hover{background:#1746d6} .sec-cta:hover .arr{transform:translateX(4px)} .sec-no{font-family:var(--font-mono);font-size:12px;color:var(--signal); letter-spacing:.1em} .sec-title{font-family:var(--font-display);font-weight:300;color:#002479; font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.03em;line-height:1.02;white-space:nowrap;max-width:none} /* approach */ .principles{margin-top:clamp(36px,6vh,64px);display:grid;grid-template-columns:repeat(2,1fr);gap:16px; background:transparent;border:none;border-radius:0;overflow:visible} .principles{grid-auto-rows:1fr} .principle{position:relative;background:var(--paper);padding:32px 34px 32px;overflow:hidden;isolation:isolate; transition:color .4s var(--ease)} .principle::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--signal); z-index:2;transition:width .45s var(--ease)} .principle:hover::after{width:100%} /* borderless pillars: blend with the page, flip to the dark chart blue on hover */ .principle{border-radius:12px;border:none;background:transparent; transition:background .35s var(--ease),color .4s var(--ease)} .principle:hover{background:#06182c} .principle:hover .k{color:#9fc0ff} .principle:hover h3{color:#FFFCF3} .principle:hover p{color:#c9d5e8} .principle:hover .p-no{color:rgba(255,252,243,.6)} .principle>*{position:relative;z-index:1} .p-no{position:absolute;top:26px;right:30px;z-index:1;font-family:var(--font-mono);font-size:12px; letter-spacing:.08em;color:var(--muted);opacity:.55;transition:color .4s var(--ease),opacity .4s var(--ease)} .principle .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em; text-transform:uppercase;color:var(--signal);transition:color .4s var(--ease)} .principle h3{font-family:var(--font-display);font-weight:500;font-size:1.45rem; letter-spacing:-.02em;margin:18px 0 12px;line-height:1.1;transition:color .4s var(--ease)} .principle p{font-size:15px;color:var(--muted);line-height:1.55;transition:color .4s var(--ease)} .approach-close-row{margin-top:46px;display:flex;align-items:center;gap:34px;width:100%} .approach-close{margin-top:0;max-width:none;flex:none; font-family:var(--font-display);font-weight:300; font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.1;letter-spacing:-.025em;color:var(--ink)} .inflect-ico{width:96px;height:64px;flex:0 0 auto;color:var(--ink)} /* stats band – bordered & divided */ .stats{margin-top:44px;display:grid;grid-template-columns:repeat(5,1fr); border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper)} .stat{padding:30px 32px 32px;border-right:1px solid var(--line);position:relative} .stat:last-child{border-right:none} .stat-n{display:block;font-family:var(--font-display);font-weight:300; font-size:clamp(2.3rem,3.9vw,3.3rem);letter-spacing:-.035em;line-height:.95;color:var(--ink)} .stat-n em{font-style:normal;color:var(--signal)} .stat-l{display:block;margin-top:13px;font-family:var(--font-mono);font-size:10.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .footprint{margin:22px 0 0;max-width:none;font-size:16.5px;line-height:1.6;color:var(--muted)} /* portfolio carousel */ .pf{margin-top:16px} .pf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px} .pf-sub{margin:0;max-width:none;white-space:nowrap;font-family:var(--font-display);font-weight:400;font-size:clamp(1.3rem,1.9vw,1.7rem);letter-spacing:-.02em;color:var(--ink);line-height:1.2} .pf-nav{display:flex;gap:10px;flex:0 0 auto} .pf-btn{width:46px;height:46px;border-radius:4px;border:1px solid var(--line);background:var(--paper); color:var(--ink);font-size:18px;cursor:pointer;display:grid;place-items:center; transition:background .2s var(--ease),border-color .2s var(--ease),opacity .2s} .pf-btn:hover{background:var(--signal);color:#fff;border-color:var(--signal)} .pf-btn:disabled{opacity:.3;cursor:default;background:var(--paper);color:var(--ink);border-color:var(--line)} .pf-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;container-type:inline-size} .pf-viewport.dragging{scroll-snap-type:none;cursor:grabbing} .pf-viewport.dragging .pf-card{user-select:none} .pf-viewport::-webkit-scrollbar{display:none} .pf-track{display:flex;gap:18px} /* square photo cards on the home carousel: full-bleed image with corner overlays */ .pf-sq{position:relative;aspect-ratio:1/1;border-radius:0;overflow:hidden;display:block;background:#06182c} .pf-sq-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .pf-sq:hover .pf-sq-img{--h:1.03} .pf-sq-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:64px;color:rgba(255,252,243,.4)} .pf-sq-shade{position:absolute;inset:0;background: linear-gradient(rgba(5,16,34,.55),transparent 30%,transparent 62%,rgba(5,16,34,.72))} .pf-sq-logo{position:absolute;top:18px;left:20px;max-width:46%;object-fit:contain; filter:brightness(0) invert(1)} .pf-sq-founders{position:absolute;top:44px;right:20px;max-width:46%;text-align:right; font-size:15.5px;font-weight:600;color:#fff;line-height:1.35} .pf-sq-tag{position:absolute;left:20px;bottom:18px;right:20px; font-size:19px;font-weight:600;color:#fff;line-height:1.4;text-wrap:pretty} .pf-sq-series{position:absolute;right:20px;top:20px;text-align:right;font-family:var(--font-mono); font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:#fff} .pf-sq .pf-tag{top:auto;bottom:52px;right:20px} .pf-card.pf-sq{border:none;border-radius:0} .pf-card{flex:0 0 calc((100% - 18px)/2);scroll-snap-align:start;box-sizing:border-box; display:flex;flex-direction:column;overflow:hidden; border:1px solid var(--line);border-radius:16px;background:var(--paper); text-decoration:none;color:var(--ink); transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)} .pf-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ink) 28%,var(--line)); box-shadow:0 16px 36px -22px rgba(11,14,21,.4)} .pf-card .portrait{aspect-ratio:3/2;border-radius:0} .pf-card .portrait img{filter:none} .pf-card .portrait::after{display:none} .pf-card .portrait .mono{font-size:2.6rem} .pf-card:hover .portrait img{filter:none} .pf-card:hover .portrait::after{opacity:0} .pf-tag{position:absolute;top:11px;right:11px;font-family:var(--font-mono);font-size:9px; letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(11,14,21,.5); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:4px 9px;z-index:2} .pf-body{padding:20px 22px 18px;flex:1;display:flex;flex-direction:column;min-height:196px} .pf-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px} .pf-name{font-family:var(--font-display);font-weight:500;font-size:1.4rem;letter-spacing:-.02em;line-height:1.05} .pf-clogo{max-width:72%;object-fit:contain;object-position:left center} .pf-arr{color:var(--signal);opacity:0;transform:translateX(-6px);transition:.3s var(--ease)} .pf-card:hover .pf-arr{opacity:1;transform:none} .pf-role{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);margin-top:9px} .pf-desc{font-size:14px;color:var(--muted);line-height:1.5;margin-top:11px} .pf-headline{font-weight:700;font-size:24px;line-height:1.3;margin-top:13px;color:var(--ink);text-wrap:pretty} .pf-detail{font-size:16px;color:var(--muted);line-height:1.55;margin-top:8px;text-wrap:pretty} .pf-coinv{flex:1;min-width:0} .pf-coinv .pf-coinv-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:7px} .pf-coinv-ph{display:block;width:52px;height:16px;border-radius:2px;background:var(--line);opacity:.55} .pf-coinv-logo{display:block;width:auto;max-width:200px;max-height:96px;object-fit:contain;opacity:1;flex-shrink:0} .pf-track .pf-body{padding:14px 20px 10px;min-height:0} .pf-track .pf-headline{font-size:21px;margin-top:10px} .pf-track .pf-detail{font-size:15px;margin-top:6px} .pf-track .pf-foot{padding:11px 20px 14px;align-items:center} .pf-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px; padding:14px 22px 18px;border-top:1px solid var(--line)} .pf-round .pf-k{display:block;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.15em; text-transform:uppercase;color:var(--muted)} .pf-round b{display:block;margin-top:4px;font-family:var(--font-display);font-weight:400; font-size:1.02rem;color:var(--ink)} .pf-go{font-size:12.5px;color:var(--signal);white-space:nowrap} .pf-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px; background:var(--ink);color:var(--paper);border-radius:16px;padding:24px 30px;text-decoration:none; font-family:var(--font-display);font-weight:500;font-size:1.2rem;letter-spacing:-.015em; transition:background .25s var(--ease)} .pf-banner:hover{background:#1b2330} .pf-banner-arr{color:var(--signal);font-size:1.3rem;transition:transform .25s var(--ease)} .pf-banner:hover .pf-banner-arr{transform:translateX(6px)} @media (max-width:920px){.pf-card{flex-basis:100%}} /* wide screens: more cards per view instead of bigger cards */ @container (min-width:1360px){.pf-card{flex-basis:calc((100% - 36px)/3)}} @container (min-width:1900px){.pf-card{flex-basis:calc((100% - 54px)/4)}} @media (max-width:640px){.pf-head{flex-direction:column;align-items:flex-start} .pf-card{flex-basis:100%}} /* ===== Portfolio – view toggle + list view ===== */ .pf-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .pf-toolbar .filters{margin-bottom:0} .pf-views{display:inline-flex;border:1px solid var(--line);border-radius:3px;padding:3px;background:var(--paper-2)} .pf-view{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; padding:8px 17px;border-radius:2px;color:var(--muted);cursor:pointer;border:0;background:none; display:inline-flex;align-items:center;gap:.5em;transition:background .2s var(--ease),color .2s var(--ease)} .pf-view svg{width:13px;height:13px} .pf-view.on{background:var(--signal);color:#fff} .pf-toolbar .filter{border-radius:2px} .pf-toolbar .filter.on{background:var(--signal);border-color:var(--signal);color:#fff} /* ===== Portfolio – mosaic grid view ===== */ .pf-mosaic-wrap{container-type:inline-size;margin-top:26px} .pf-mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:16px; grid-auto-rows:calc((100cqw - 48px)/4)} .pf-tile{position:relative;display:block;overflow:hidden;border-radius:2px;text-decoration:none; background:linear-gradient(155deg,#242A3A,#0D1119 72%); transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .pf-tile:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(11,14,21,.55)} .pf-tile.big{grid-column:span 2;grid-row:span 2} /* testimonial tile – dark navy square that blends into the mosaic */ .pf-quote{background:#06182c;cursor:default;display:flex} .pf-quote:hover{transform:none;box-shadow:none} .pf-quote::after{display:none} .pf-quote-in{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;gap:18px; container-type:inline-size; padding:28px 30px 26px;width:100%;opacity:1;transition:opacity .45s var(--ease)} .pf-quote-in.fading{opacity:0} .pf-quote-kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:#8ea3c6} /* Sized against the TILE, not the viewport. The tile is a grid cell whose width depends on the column count, so a vw-based size made the quote a different size relative to its tile at every width - too small in the laptop band, too big when the tile went full width. cqw is the tile's own inline size (.pf-quote is the container), so the quote keeps the same proportion to the box it sits in at every breakpoint. The clamp only guards the extremes. */ .pf-quote-q{font-family:var(--font-display);font-weight:300;font-size:clamp(14px,3.85cqw,24px); line-height:1.45;letter-spacing:-.01em;color:var(--paper);margin:0;text-wrap:pretty} .pf-quote-att{display:flex;align-items:flex-end;justify-content:space-between;gap:16px} /* From 901px up the page is zoomed to 0.8 (see the laptop band rule further down), so the same cqw value reads ~20% smaller than it measures. Raise the ratio and the cap there rather than globally: below 901px the quote sits near its floor already, and lifting the ratio would re-inflate the narrow case the base rule was tuned for. */ @media (min-width:901px){ .pf-quote-q{font-size:clamp(16px,5cqw,34px)} } .pf-quote-who b{display:block;font-size:15.5px;font-weight:600;color:var(--paper)} .pf-quote-who span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:#8ea3c6} .pf-quote-logo{height:24px;width:auto;object-fit:contain; filter:brightness(0) invert(1) sepia(.14) saturate(.55) brightness(.99);opacity:1} .pf-tile-ph{position:absolute;inset:0} .pf-tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .7s var(--ease)} .pf-tile:hover .pf-tile-img{transform:scale(1.035)} .pf-tile-ph::before{content:"";position:absolute;inset:0; background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 1px,transparent 1px 64px)} .pf-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;z-index:1; background:linear-gradient(transparent,rgba(7,9,14,.82));pointer-events:none} .pf-tile-logo{position:absolute;top:18px;left:18px;z-index:2;max-width:46%;object-fit:contain;object-position:left top; filter:brightness(0) invert(1);opacity:.96} /* logos on bright photos – keep them black so they read */ .pf-tile-logo[src*="manta"], .pf-tile-logo[src*="mobeewave"], .pf-tile-logo[src*="howspace"], .pf-tile-logo[src*="scandit"], .pf-tile-logo[src*="k2view"], .pf-tile-logo[src*="wasabi"]{filter:brightness(0);opacity:.92} .pf-tile.small .pf-tile-logo{transform:scale(.78);transform-origin:top left} .pf-tile-wm{position:absolute;top:18px;left:18px;z-index:2;font-family:var(--font-display); font-weight:600;font-size:1.1rem;letter-spacing:-.01em;color:#fff} .pf-tile-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px; display:flex;align-items:center;justify-content:space-between;gap:16px} .pf-tile-info{min-width:0} .pf-tile-x{display:inline-block;font-family:var(--font-mono);font-size:9px;letter-spacing:.12em; text-transform:uppercase;color:#fff;background:rgba(8,10,16,.45); border:1px solid rgba(255,255,255,.4);border-radius:2px;padding:3px 7px;margin-bottom:8px} .pf-tile-founders{font-weight:600;font-size:16px;color:#fff;line-height:1.25; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pf-tile-desc{font-size:13.5px;color:rgba(255,255,255,.78);margin-top:3px;line-height:1.35; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pf-tile-stage{flex:0 0 auto;font-family:var(--font-mono);font-size:13px;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,255,255,.85)} .pf-tile.small .pf-tile-founders{font-size:13.5px} .pf-tile.small .pf-tile-desc{font-size:12px} .pf-tile.small .pf-tile-stage{font-size:11px} .pf-tile.small .pf-tile-foot{padding:13px 14px} @media(max-width:920px){.pf-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:calc((100cqw - 16px)/2)} .pf-tile.small .pf-tile-logo{transform:none}} /* wide screens only (true fullscreen, outside the laptop zoom band): a third big-tile column. Container width is inflated by the 80% zoom on laptops, so key off the real viewport instead. */ @media (min-width:1800px){ .pf-mosaic{grid-template-columns:repeat(6,1fr);grid-auto-rows:calc((100cqw - 80px)/6)} } .pf-list{margin-top:24px} .pf-lgrid{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.9fr) .8fr .95fr .85fr .8fr;gap:16px;align-items:center} .pf-lhead{padding:0 6px 15px;border-bottom:1px solid var(--ink); font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .pf-lrow{padding:24px 6px;min-height:88px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink); transition:background .2s var(--ease)} .pf-lrow .pf-lgrid{min-height:40px} .pf-lrow:hover{background:color-mix(in srgb,var(--ink) 3.5%,transparent)} .pf-ldetails{display:flex;align-items:center;gap:18px;min-width:0} .pf-lcolstack{display:flex;flex-direction:column;min-width:0} .pf-llogo{height:40px;width:auto;max-width:220px;object-fit:contain;object-position:left center;display:block} .pf-lrow:hover .pf-lmono{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))} .pf-lname{font-family:var(--font-display);font-weight:500;font-size:1.4rem;letter-spacing:-.022em; line-height:1.05;color:var(--signal);display:block} .pf-lfounders{font-size:16px;color:var(--muted);line-height:1.3; overflow-wrap:break-word;text-wrap:pretty} .pf-lcell{font-size:16px;color:var(--ink)} .pf-lcell.mut{color:var(--muted)} .pf-lstatus{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; display:inline-flex;align-items:center;gap:.5em} .pf-lstatus::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .pf-lstatus.ex{color:var(--signal)} .pf-lstatus.ac{color:#3d8a55} .pf-lcol-label{display:none} .pf-lrow.hide,.pf-card.hide,.pf-tile.hide{display:none} @media (max-width:820px){ .pf-lhead{display:none} .pf-lgrid{grid-template-columns:1fr 1fr;gap:8px 20px} .pf-lrow{padding:20px 4px} .pf-ldetails{grid-column:1 / -1;margin-bottom:14px} .pf-lcol-label{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);margin-bottom:4px} .pf-lname{font-size:1.25rem} /* status cell out of the grid – shown as a small box top-right, opposite the name */ .pf-lrow{position:relative} .pf-lgrid>div:last-child{position:absolute;top:20px;right:4px} .pf-lgrid>div:last-child .pf-lcol-label{display:none} .pf-lstatus{border:1px solid currentColor;border-radius:2px;padding:4px 8px;font-size:10px} .pf-lstatus::before{display:none} } @media (max-width:460px){.pf-view{justify-content:center}} /* dual CTA – pill buttons on the light strip above the banner */ .dual-cta-wrap{position:relative;z-index:6;margin-top:6px;padding-bottom:34px} .dual-cta{display:flex;gap:13px;flex-wrap:wrap} .pill{display:inline-flex;align-items:center;gap:.5em;border-radius:4px; font-family:var(--font-display);font-weight:500;font-size:15px;letter-spacing:-.01em; padding:13px 24px;white-space:nowrap;cursor:pointer; transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)} .pill .arr{transition:transform .25s var(--ease)} .pill:hover .arr{transform:translateX(4px)} .pill-primary{background:var(--signal);color:#fff;border:1px solid var(--signal); box-shadow:0 10px 30px -10px rgba(31,92,255,.6)} .pill-primary:hover{transform:translateY(-2px);background:#1a4fe0;border-color:#1a4fe0} .pill-ghost{background:rgba(255,255,255,.10);color:#fff; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.55)} .pill-ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.2);border-color:#fff} /* Sequoia-style hero CTAs: squared, flat, monochrome */ .hero-cta .pill{border-radius:3px;font-weight:500;font-size:15px; padding:12px 22px;box-shadow:none;letter-spacing:-.005em} .hero-cta .pill-primary{background:var(--signal);color:#fff;border:1px solid var(--signal)} .hero-cta .pill-primary:hover{transform:none;background:#1a4fe0;border-color:#1a4fe0} .hero-cta .pill-ghost{background:#fff;color:var(--ink,#0a1a30);border:1px solid #fff; -webkit-backdrop-filter:none;backdrop-filter:none} .hero-cta .pill-ghost:hover{transform:none;background:#f5f0e4;border-color:#f5f0e4} /* companies */ .co-bar{display:flex;justify-content:space-between;align-items:baseline; flex-wrap:wrap;gap:16px;margin-bottom:40px} .co-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--line);border:1px solid var(--line)} .co{background:var(--paper);aspect-ratio:1/.66;display:flex;flex-direction:column; justify-content:space-between;padding:24px;transition:background .3s,color .3s;cursor:pointer} .co .tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);transition:color .3s} .co .name{font-family:var(--font-display);font-weight:600;font-size:1.5rem; letter-spacing:-.02em} .co:hover{background:var(--ink);color:var(--paper)} .co:hover .tag{color:var(--signal)} /* insights */ .ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px} .ins{border-top:1.5px solid var(--ink);padding-top:20px;cursor:pointer; transition:border-color .3s} .ins:hover{border-color:var(--signal)} .ins .meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between} .ins h3{font-family:var(--font-display);font-weight:400;font-size:1.4rem; letter-spacing:-.02em;line-height:1.2;margin:18px 0 14px} .ins p{font-size:15px;color:var(--muted);line-height:1.55} .ins .more{font-size:14px;margin-top:18px;display:inline-flex;gap:.5em;color:var(--signal)} /* founders – LSVP-style portrait cards */ .founders-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px} .founder{cursor:pointer} .portrait{ aspect-ratio:3/4;position:relative;overflow:hidden; background:linear-gradient(150deg,var(--ink) 0%,var(--ink-2) 100%); } /* real photo: drop an inside .portrait – duotone applies automatically */ .portrait img{ width:100%;height:100%;object-fit:cover;display:block; filter:grayscale(1) contrast(1.04); transition:filter .55s var(--ease); } .portrait::after{ /* signal-blue duotone wash */ content:"";position:absolute;inset:0;background:var(--signal); mix-blend-mode:color;opacity:.92;transition:opacity .55s var(--ease);pointer-events:none; } .founder:hover .portrait img{filter:none} /* hover reveals natural colour */ .founder:hover .portrait::after{opacity:0} /* placeholder state (no photo yet): monogram + rigging line */ .portrait .mono{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:300;font-size:3.4rem; color:var(--signal);letter-spacing:-.02em; } .portrait .rig{position:absolute;top:0;right:26%;width:1.5px;height:100%; background:linear-gradient(var(--signal),transparent);opacity:.5} .founder .f-name{font-family:var(--font-display);font-weight:500;font-size:1.35rem; letter-spacing:-.02em;margin-top:20px;display:flex;justify-content:space-between;align-items:center} .founder .f-arr{color:var(--signal);opacity:0;transform:translateX(-6px); transition:.3s var(--ease)} .founder:hover .f-arr{opacity:1;transform:none} .founder .f-role{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);margin-top:8px} .founder .f-desc{font-size:14.5px;color:var(--muted);line-height:1.5;margin-top:12px;max-width:34ch} /* ============ CTA ============ */ .cta{position:relative;overflow:hidden;color:var(--paper);border-radius:0; background:var(--ink) url('cta-corridor.webp') center/cover no-repeat} .cta::before{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(12,14,17,.94) 0%,rgba(12,14,17,.82) 42%,rgba(12,14,17,.5) 100%)} .cta::after{content:"";position:absolute;inset:0; background:linear-gradient(120deg,rgba(20,52,110,.28),rgba(30,74,138,.16)); mix-blend-mode:color} .cta .wrap{position:relative;z-index:1;padding-block:clamp(72px,12vh,130px)} .cta .eyebrow{color:var(--muted-d)} .cta h2{font-family:var(--font-display);font-weight:300; font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.035em;line-height:1.02; max-width:18ch;margin:22px 0 34px} .cta h2 b{font-weight:600;color:var(--signal)} .cta .btn{border-color:var(--paper)} .cta .btn-primary{background:var(--paper);color:var(--ink)} .cta .btn-primary:hover{background:var(--signal);color:#fff;border-color:var(--signal)} /* slimmer CTA band for the interior pages */ .cta-slim .wrap{padding-block:clamp(44px,7vh,72px)} .cta-slim h2{font-size:clamp(1.7rem,3.6vw,2.7rem);margin:16px 0 26px} /* ============ FOOTER ============ */ footer{background:var(--ink-2);color:var(--muted-d);padding-block:56px 40px} .foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap; padding-bottom:40px;border-bottom:1px solid var(--line-d)} .foot-logo-img{height:26px;display:block;filter:brightness(0) invert(1)} .foot-cols{display:flex;gap:64px;flex-wrap:wrap} .foot-col h4{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em; text-transform:uppercase;color:var(--muted-d);margin-bottom:14px;font-weight:400} .foot-col a{display:block;color:var(--paper);font-size:14.5px;opacity:.82; margin-bottom:9px;transition:opacity .2s} .foot-col a:hover{opacity:1} /* Offices column: two short addresses, city label in the link colour */ .foot-addr{font-style:normal;color:var(--paper);opacity:.82;font-size:14.5px;line-height:1.45;margin-bottom:12px} .foot-addr:last-child{margin-bottom:0} .foot-addr b{display:block;font-weight:600;opacity:1;margin-bottom:2px} .foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px; padding-top:26px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em} .foot-sep{margin:0 10px;opacity:.55} .foot-legal{color:inherit;text-decoration:none;opacity:.85;transition:opacity .2s} .foot-legal:hover{opacity:1;text-decoration:underline;text-underline-offset:3px} /* ============ MOTION / REVEAL ============ */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} /* page arriving after a camera-pan: paint finished – no intro motion */ html.panned .reveal{transition:none} html.panned .fc{animation:none;opacity:1} html.panned .hero-statement .bright{opacity:1} /* ============ RESPONSIVE ============ */ @media(max-width:900px){ .hero{overflow:visible; background:radial-gradient(150% 42% at 82% 8%,rgba(95,150,255,.16),transparent 60%), linear-gradient(180deg,#05172a,#0c3a6b 70%,#0a2c52)} .hero-boat{display:none} .hero-stage{height:auto;padding-block:120px 48px} .hero-content{position:static;transform:none;max-width:none} .hero-statement{max-width:none;font-size:clamp(1.5rem,5.6vw,2rem)} /* the statement spans carry inline desktop sizes (60/38px) – halve them on mobile */ .hero-statement .bright{font-size:33px!important;white-space:normal} .hero-statement .muted{font-size:21px!important} .principles{grid-template-columns:1fr} .stats{grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr} .stat{border-right:none;border-bottom:1px solid var(--line);padding:14px 16px 16px} .stat .stat-l{margin-top:8px;font-size:9.5px;letter-spacing:.12em;white-space:nowrap} .stat:last-child{border-bottom:none} /* row 1: $650M full width; rows 2-3: two per row */ .stat:first-child{grid-column:1/-1} .stat:nth-child(2),.stat:nth-child(4){border-right:1px solid var(--line)} .stat:nth-child(4){border-bottom:none} .co-grid{grid-template-columns:repeat(2,1fr)} .founders-grid{grid-template-columns:1fr;gap:30px;max-width:420px} .ins-grid{grid-template-columns:1fr;gap:18px} .ins{padding-top:14px} .ins h3{margin:10px 0 8px} .ins .more{margin-top:10px} nav.links,.nav-cta{display:none} .menu-btn{display:block} /* banners (site nav + detail-sheet nav) at 1/3 height on mobile */ .nav-in{height:68px} .logo-img{height:22px} /* buttons 50% smaller on mobile */ .pill{font-size:13px;padding:9px 15px} .hero-cta .pill{font-size:13px;padding:9px 15px} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} .fc{opacity:1!important;transform:none!important;translate:none!important} .fc-float{transform:none!important} } /* ---- multi-page chrome ---- */ .page-hero{position:relative;padding:150px 0 66px;overflow:hidden;border-bottom:1px solid var(--line)} .page-hero::before{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(rgba(5,16,34,.72),rgba(5,16,34,.8)),url("sea.webp"); background-size:cover;background-position:center} .page-hero .wrap{position:relative;z-index:1} .page-hero .ph-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em; text-transform:uppercase;color:#9fc0ff;margin-bottom:16px} .page-hero h1{margin:0;color:#fff;font-family:var(--font-display);font-weight:400; font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.03em;line-height:1.04} .page-hero p{margin:16px 0 0;max-width:62ch;color:#cfdbed;font-size:1.08rem;line-height:1.5} .nav .links a.active{color:var(--paper)} header.nav:not(.solid) .links a.active{color:#fff} .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px} .team-card .portrait{aspect-ratio:1/1;border-radius:14px;overflow:hidden} .tc-name{margin-top:14px;font-family:var(--font-display);font-weight:500;font-size:1.15rem} .tc-role{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px} @media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}} /* ============================================================ TEAM – editorial staggered flow (Creandum-inspired), natural photos ============================================================ */ .team-hero{padding:150px 0 40px} .team-hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:start} .team-h{margin:0;font-family:var(--font-display);font-weight:300; font-size:clamp(2.6rem,6vw,5rem);line-height:1.02;letter-spacing:-.035em;color:var(--ink);max-width:13ch} .team-lead{padding-top:12px;max-width:46ch;justify-self:end} .team-lead p{font-size:1.34rem;line-height:1.62;color:var(--muted);text-align:justify} .team-lead p+p{margin-top:1.1em} /* The section right after a page hero (Approach / Insights / Partnerships) starts at the same distance as the Team page's .team-flow (52px), so the gap under the grey lead paragraph is identical across the four sub-pages. */ .team-hero+section.block{padding-top:52px} @media(max-width:820px){.team-hero{padding-top:128px} .team-hero .wrap{grid-template-columns:1fr;gap:26px}.team-lead{justify-self:start}} .team-flow{padding-top:52px;padding-bottom:clamp(72px,9vh,130px);position:relative;overflow:visible} /* the tall parallax columns overflow the shrunken section – clip them at main's box so the document's scrollable height ends at the footer (memOverlay is fixed: unaffected) */ main:has(.team-flow){overflow:clip} .team-flow .wrap{display:block} /* Sequoia-style segmented banner: Investors / Operators */ .team-tabs{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .team-tab{flex:1;position:relative;appearance:none;background:none;border:0;cursor:pointer; padding:19px 16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.18em; text-transform:uppercase;color:var(--muted);transition:color .22s var(--ease)} .team-tab .lbl{position:relative;z-index:1} .team-tab + .team-tab::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:1px;background:var(--line)} .team-tab:hover:not(.on){color:var(--ink)} .team-tab.on{color:#fff} .team-tab.on::after{content:"";position:absolute;inset:8px 9px;background:var(--signal);z-index:0} /* Segmented CTA – same principle as the team tabs (border rules + inset signal block) */ .pf-seg-cta{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line); text-decoration:none;margin-top:36px} .pf-seg-cta .seg{position:relative;padding:20px 22px;display:flex;align-items:center; font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase; transition:color .22s var(--ease)} .pf-seg-cta .seg .lbl{position:relative;z-index:1} .pf-seg-cta .seg--on{flex:1;justify-content:center;color:#fff} .pf-seg-cta .seg--on::after{content:"";position:absolute;inset:8px 9px;background:var(--signal); z-index:0;transition:background .22s var(--ease)} .pf-seg-cta .seg--arr{color:var(--muted);gap:12px} .pf-seg-cta .seg--arr::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:1px;background:var(--line)} .pf-seg-cta .seg--arr .arr{color:var(--signal);font-size:1.3rem;transition:transform .25s var(--ease)} .pf-seg-cta:hover .seg--on::after{background:#1746d6} .pf-seg-cta:hover .seg--arr{color:var(--ink)} .pf-seg-cta:hover .seg--arr .arr{transform:translateX(6px)} /* two centred columns below the banner */ .tf-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,110px); max-width:900px;margin:60px auto 0;align-items:start} .tf-col{display:flex;flex-direction:column;will-change:transform;backface-visibility:hidden} .tf-col--b{margin-top:78px} .tm{display:block;color:var(--ink);text-decoration:none;margin-bottom:clamp(60px,9vh,118px)} .tm:last-child{margin-bottom:0} .tf-col--a .tm:nth-child(3n+2){margin-top:44px} .tf-col--b .tm:nth-child(3n+1){margin-top:34px} .tm-photo{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:8px;background:transparent} .tm-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block; transition:transform .7s var(--ease)} .tm:hover .tm-photo img{transform:scale(1.035)} .tm-photo .mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:300;font-size:3rem;color:var(--muted);letter-spacing:-.02em} .tm-cap{text-align:center;margin-top:22px} .tm-name{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.2vw,2.05rem); letter-spacing:-.025em;line-height:1.08;color:var(--ink);transition:color .25s var(--ease)} .tm:hover .tm-name{color:var(--signal)} .tm-role{margin-top:9px;font-size:14.5px;color:var(--muted)} .tm.hide{display:none} .tm.nolink{cursor:default} @media(max-width:980px){.tf-cols{column-gap:30px;max-width:640px}.tf-col--b{margin-top:23px}} @media(max-width:560px){.tf-cols{grid-template-columns:1fr;max-width:360px;margin-top:32px}.tf-col--b{margin-top:0} .team-tab{padding:15px 10px;font-size:11px;letter-spacing:.12em} /* tighter card rhythm on phones */ .tm{margin-bottom:34px} .tf-col--a .tm:nth-child(3n+2){margin-top:0} .tf-col--b .tm:nth-child(3n+1){margin-top:0} .tm-cap{margin-top:12px}} /* insights: mobile filter dropdowns (hidden on desktop, pills hidden on mobile) */ .filters-mobile{display:none} @media(max-width:900px){ /* segmented CTAs collapse to a single slim button on phones: label + arrow inside */ .pf-seg-cta .seg--on{padding:10px 16px} .pf-seg-cta .seg--on::after{inset:4px 5px} .pf-seg-cta .seg--arr{display:none} .pf-seg-cta .seg--on .lbl::after{content:" \2192";font-size:1.05rem} /* all page heroes (team, approach, insights, partnerships): tight spacing on phones */ .team-hero{padding:88px 0 8px} .team-hero .wrap{gap:6px} .team-hero .team-lead{margin-top:0!important} /* intro copy under page titles: two steps smaller on phones, ragged-right (justify gaps too wide at this width) */ .team-lead p,.page-hero p{font-size:1.02rem;line-height:1.6;text-align:left} .team-hero+section.block,body:has(#pfFilters) section.block{padding-block:16px 48px} /* partnerships page: compress hero whitespace on phones */ body:has(#pfFilters) .team-hero{padding:88px 0 8px} body:has(#pfFilters) .team-hero .wrap{gap:6px} body:has(#pfFilters) .team-lead{margin-top:0!important} body:has(#pfFilters) section.block{padding-block:16px 48px} /* insights page: compress whitespace on phones */ body:has(#inSelects) .team-hero{padding:88px 0 16px} body:has(#inSelects) .team-hero .wrap{gap:6px} body:has(#inSelects) section.block{padding-block:20px 48px} #featWrap:empty{display:none} /* insights page: pills hidden behind a Filters button on mobile */ #inFilters,#inTopics{display:none} body.filters-open #inFilters, body.filters-open #inTopics{display:flex;flex-wrap:wrap} .filters-mobile{display:block;margin-bottom:14px} #filtersToggle{display:inline-flex;align-items:center;gap:8px;padding:10px 14px; font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase; color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:6px;cursor:pointer} #filtersToggle svg{transition:transform .25s var(--ease)} body.filters-open #filtersToggle svg{transform:rotate(180deg)} } /* ============ DESKTOP SCALING ============ Laptops (13–16") render the site too large; scale to 80% there. Big monitors (27"+, ≥1800px) stay at 100%. Phones/tablets are untouched. */ @media (min-width:901px) and (max-width:1799px){ html{zoom:.8} /* the vw gutters don't shrink with zoom, so the column is relatively narrower here – size the stat ledger down a step so the long rows keep to one line */ .stats-ledger .stat-n{font-size:56px} .stats-ledger .stat-l{font-size:18px} } /* big screens (true fullscreen, outside the laptop zoom band): 1/3 slimmer side gutters for a wider content column */ @media(min-width:1800px){ :root{--gut:clamp(20px,6.7vw,147px)} .mem-overlay .mem-ov-nav{--gut:clamp(20px,6.7vw,147px)} } /* ============ MOBILE QA PASS ============ */ @media(max-width:900px){ :root{--gut:clamp(10px,5vw,110px)} /* half the side buffer on phones */ /* text always wraps within the screen – nothing may fall off the edge */ .approach-close-row{flex-wrap:wrap;gap:18px;margin-top:32px} .approach-close{flex:1 1 100%;max-width:100%;white-space:normal} .approach-close br{display:none} .inflect-ico{display:none} /* approach figures stack on phones; long figures may wrap there */ .inv-figs{grid-template-columns:1fr!important} .inv-figs .inv-n{white-space:normal!important} /* principles cards: trim empty space on phones */ .principle{padding:20px 20px 22px} .principle h3{margin:10px 0 8px} .p-no{top:16px;right:18px} /* contact CTA band: ~70% height on phones */ .cta .wrap{padding-block:44px} .cta h2{margin:14px 0 22px} .cta .btn{font-size:13px;padding:9px 15px} /* partnerships grid tiles: logo + stage only on phones */ .pf-tile-founders,.pf-tile-desc{display:none} /* toolbar: filters + view toggle on one compact row, count on its own row below */ .pf-toolbar{gap:8px 10px} .pf-toolbar .filters{gap:6px;flex-wrap:nowrap} .pf-toolbar .filter{padding:7px 10px;font-size:10px;letter-spacing:.08em} .pf-view{padding:6px 9px;font-size:10px;letter-spacing:.08em} .pf-view svg{width:11px;height:11px} .pf-toolbar>div:last-child{display:contents!important} .pf-count{flex-basis:100%;order:3} h1,h2,h3,h4,p,a,span{overflow-wrap:break-word} html,body{overflow-x:hidden} /* Page-hero headlines (approach/insights/team/404) carry inline nowrap spans so the desktop line break is deliberate; on phones the line must be free to wrap. The size is clamped by viewport so "we know what it takes" fits a 375px iPhone. */ .team-h{font-size:clamp(2rem,9.5vw,3.2rem);max-width:none!important} .team-h span{white-space:normal!important} /* keep the
: the two nowrap spans have no whitespace between them, so hiding it fused "Hands-on" + "enterprise" into one word on phones (2026-10-05) */ .team-hero .wrap{grid-template-columns:1fr;gap:26px} .team-lead{max-width:none;justify-self:stretch} .team-lead p{text-align:left;font-size:1.12rem;line-height:1.55} /* Article bodies: a CMS table or wide figure must scroll inside its own box, never the page. td:first-child is nowrap on desktop for tidy tables; on phones it may wrap. */ .prose.rich,.art-body,.mem-bio{max-width:100%;min-width:0} /* The sheet grid must never grow past the viewport: grid items default to min-width:auto, so one wide table in .prose stretched the whole article column (title included) and the page scrolled sideways on a 393px phone. */ .mem-grid,.art-grid-d{grid-template-columns:minmax(0,1fr)!important;width:100%;max-width:100%;overflow-x:clip} .mem-left,.mem-right,.art-left,.art-right,.prose,.art-prose{min-width:0;max-width:100%} .mem-name,.art-title{font-size:clamp(1.9rem,8.6vw,3rem);max-width:none;overflow-wrap:anywhere} .art-dek{max-width:none} .prose.rich [data-rt-embed-type],.prose.rich table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .prose.rich table{width:max-content;min-width:100%} .prose.rich td:first-child{white-space:normal} .prose.rich img,.prose.rich figure,.prose.rich iframe,.prose.rich video{max-width:100%;height:auto} .prose.rich pre{white-space:pre-wrap;overflow-wrap:anywhere} .sec-title{white-space:normal;font-size:clamp(1.35rem,6.2vw,1.9rem)} .sec-head{margin-bottom:32px;gap:12px} .pf-sub{white-space:normal} /* in-focus cards: title only on phones */ .pf-detail{display:none} /* tighter footer */ footer{padding-block:30px 22px} .foot-top{gap:22px;padding-bottom:22px} .foot-cols{gap:28px} .foot-col h4{margin-bottom:9px} .foot-col a{margin-bottom:6px;font-size:13.5px} .foot-addr{font-size:13.5px;margin-bottom:9px} .foot-bot{padding-top:16px} /* logo marquee: slim band, smaller marks */ .proof{padding:23px 0} .marquee{gap:30px;height:32px;--logo-base:21px} /* per-logo scale rules above apply on mobile too */ /* hero: show headline + sub-line on phones */ .hero-statement .muted{display:inline;font-size:21px!important} /* home banner blends into the waves: transparent at top, solid again once scrolled */ body:has(.hero) header.nav:not(.solid){background:transparent;border-bottom-color:transparent} /* CTAs stacked: How we partner above See the portfolio */ .hero-cta{flex-direction:column;align-items:flex-start;gap:10px} .hero-cta .pill-ghost{order:1} .hero-cta .pill-primary{order:2} /* waves fill the phone screen: hero stage stretches so the logo band sits at the viewport bottom */ .hero-stage{padding-block:96px 40px;height:auto;min-height:calc(100svh - 75px); display:flex;flex-direction:column;justify-content:center} /* super-slim, transparent scrollbar that overlays rather than squishes the page */ /* super-slim, transparent scrollbar that overlays rather than squishes the page. Colour adapts: navy over cream surfaces, cream over navy surfaces (JS toggles .sb-light) */ html{scrollbar-width:thin;scrollbar-color:var(--sbc,rgba(6,24,44,.28)) transparent} html.sb-light{--sbc:rgba(255,252,243,.65)} html.mem-lock,html:has(main.mem){--sbc:rgba(255,252,243,.65)} ::-webkit-scrollbar{width:2px;height:2px;background:transparent} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--sbc,rgba(6,24,44,.28));border-radius:2px; border-top:20vh solid transparent;border-bottom:20vh solid transparent;background-clip:padding-box} } /* ============ MOBILE MENU OVERLAY ============ */ .mnav{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#06182c;color:#F4F7FC; padding:0 var(--gut,24px) 28px;display:flex;flex-direction:column;overflow-y:auto; transform:translateX(100%);visibility:hidden;transition:transform .38s cubic-bezier(.32,.72,.28,1),visibility 0s .38s} .mnav.open{transform:translateX(0);visibility:visible;transition:transform .38s cubic-bezier(.32,.72,.28,1)} /* menu header mirrors the banner: same height, logo same size/position */ .mnav-head{display:flex;align-items:center;justify-content:space-between;height:68px;flex:0 0 auto} .mnav-head .logo-img{height:22px;display:block;filter:brightness(0) invert(1)} .mnav-close{background:none;border:0;cursor:pointer;padding:8px 4px;color:#F4F7FC; font-size:30px;line-height:1;font-family:var(--font-display);font-weight:300} .mnav-links{display:flex;flex-direction:column;gap:12px;margin-top:28px} .mnav-links a{font-family:var(--font-display);font-weight:300;font-size:2.5rem;letter-spacing:-.03em; color:#F4F7FC;text-decoration:none;line-height:1.12} .mnav-sub{display:flex;flex-direction:column;gap:14px;margin-top:52px} .mnav-sub a{font-size:15px;color:#F4F7FC;text-decoration:none} .mnav-sub .arr{font-size:12px;color:#8ea3c6} .mnav-foot{margin-top:auto;padding-top:44px;font-family:var(--font-mono);font-size:11px; color:#8ea3c6;letter-spacing:.08em} /* ============================================================ COMPANY DETAIL PAGE ============================================================ */ .cd-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line); padding:150px 0 60px;color:#fff} .cd-hero::before{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(rgba(5,16,34,.74),rgba(5,16,34,.84)),url("sea.webp"); background-size:cover;background-position:center} .cd-hero .wrap{position:relative;z-index:1} .cd-back{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono); font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#9fc0ff;margin-bottom:28px; transition:color .25s} .cd-back:hover{color:#fff} .cd-badge-row{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap} .cd-chip{font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase; color:#dbe6f5;border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:5px 12px} .cd-chip.exited{color:#9fc0ff;border-color:rgba(159,192,255,.5)} .cd-name{margin:0;font-family:var(--font-display);font-weight:400;letter-spacing:-.03em;line-height:1.02; font-size:clamp(2.6rem,6vw,4.4rem)} .cd-lede{margin:20px 0 0;max-width:60ch;color:#cfdbed;font-size:1.14rem;line-height:1.5} .cd-logo{height:34px;width:auto;display:block;margin-bottom:24px; filter:brightness(0) invert(1);opacity:.95} .cd-body{display:grid;grid-template-columns:1.7fr 1fr;gap:64px;align-items:start} .cd-body p{text-align:justify} .cd-kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:var(--signal);margin-bottom:20px} .cd-thesis{font-family:var(--font-display);font-weight:300;font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.4;letter-spacing:-.015em;color:var(--ink)} .cd-facts{border:1px solid var(--line);border-radius:16px;background:var(--paper-2);overflow:hidden; position:sticky;top:92px} .cd-fact{display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:16px 22px;border-bottom:1px solid var(--line)} .cd-fact:last-of-type{border-bottom:0} .cd-fk{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .cd-fv{font-family:var(--font-display);font-weight:500;font-size:.98rem;text-align:right;color:var(--ink)} .cd-visit{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:16px 22px;background:var(--ink);color:#fff;font-family:var(--font-display);font-weight:500; font-size:.98rem;transition:background .25s var(--ease)} .cd-visit:hover{background:var(--signal)} .cd-visit .arr{transition:transform .25s var(--ease)} .cd-visit:hover .arr{transform:translate(3px,-3px)} .cd-related{border-top:1px solid var(--line);margin-top:0} .cd-related .co-grid{margin-top:32px} .cd-pager{display:flex;justify-content:space-between;gap:16px;margin-top:14px} .cd-pager a{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--muted); display:inline-flex;gap:.5em;align-items:center;transition:color .2s} .cd-pager a:hover{color:var(--signal)} @media(max-width:860px){.cd-body{grid-template-columns:1fr;gap:40px} .cd-facts{position:static}} /* ============================================================ INSIGHTS HUB + ARTICLE ============================================================ */ .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px} .filter{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:2px; padding:9px 17px;cursor:pointer;transition:.22s var(--ease)} .filter:hover{border-color:var(--ink)} .filter.on{background:var(--signal);color:#fff;border-color:var(--signal)} .feat{display:grid;grid-template-columns:1.15fr 1fr;gap:0;border:1px solid var(--line); border-radius:20px;overflow:hidden;margin-bottom:20px;background:var(--paper); transition:box-shadow .3s var(--ease),transform .3s var(--ease)} .feat:hover{box-shadow:0 24px 60px -34px rgba(11,14,21,.5);transform:translateY(-3px)} .feat-art{position:relative;min-height:340px;overflow:hidden;background:var(--ink)} .feat-art[style]{background-size:cover;background-position:center} .feat-art[style]::before{background:linear-gradient(150deg,rgba(6,24,44,0),rgba(5,16,34,.25))} .feat-art[style] .rig-lines{display:none} .feat-art::before{content:"";position:absolute;inset:0; background:linear-gradient(150deg,rgba(6,24,44,.35),rgba(5,16,34,.72)),url("sea.webp"); background-size:cover;background-position:center;transition:transform .8s var(--ease)} .feat:hover .feat-art::before{--h:1.05} .feat-art .rig-lines{position:absolute;inset:0;opacity:.5} .feat-body{padding:44px 44px 40px;display:flex;flex-direction:column} .feat-cat{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--signal);display:flex;gap:14px;align-items:center} .feat-cat i{font-style:normal;color:var(--muted)} .feat h3{font-family:var(--font-display);font-weight:400;letter-spacing:-.025em;line-height:1.1; font-size:clamp(1.7rem,3vw,2.5rem);margin:20px 0 16px;max-width:20ch} .feat p{font-size:16px;color:var(--muted);line-height:1.55;max-width:52ch} .feat .more{margin-top:auto;padding-top:26px;display:inline-flex;gap:.5em;color:var(--signal); font-size:14px;font-family:var(--font-display);font-weight:500} .feat .more .arr{transition:transform .25s var(--ease)} .feat:hover .more .arr{transform:translateX(5px)} .art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0; background:transparent;border-top:1px solid var(--line)} .art-grid>.art{border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .art-grid>.art:nth-child(3n){border-right:0} .art-cover{aspect-ratio:1361/492;background-size:cover;background-position:center;border-radius:8px;margin:-6px 0 22px;background-color:#06182c} .art{background:var(--paper);padding:32px 30px 34px;display:flex;flex-direction:column; text-decoration:none;color:var(--ink);transition:background .3s var(--ease)} .art:hover{background:var(--paper-2)} .art-meta{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; display:flex;justify-content:space-between;color:var(--muted)} .art-meta .c{color:var(--signal)} .art h3{font-family:var(--font-display);font-weight:500;font-size:1.32rem;letter-spacing:-.02em; line-height:1.16;margin:20px 0 13px} .art p{font-size:14.5px;color:var(--muted);line-height:1.55;flex:1} .art .more{margin-top:22px;display:inline-flex;gap:.5em;color:var(--signal);font-size:13.5px} .art .more .arr{transition:transform .25s var(--ease)} .art:hover .more .arr{transform:translateX(5px)} .art.hide{display:none} @media(max-width:900px){.feat{grid-template-columns:1fr}.feat-art{min-height:110px} .feat-body{padding:20px 18px 18px} .feat h3{font-size:1.25rem;margin:10px 0 8px} .feat p{font-size:13px} .feat .more{padding-top:12px} .art-grid{grid-template-columns:1fr} .art-grid>.art{border-right:0} .art{padding:16px 16px 18px} .art h4{font-size:1.02rem;margin:8px 0 8px} .art p{font-size:13px} .art .more{margin-top:10px;padding-top:0}} /* article reading page */ .article-head{position:relative;overflow:hidden;color:#fff;padding:148px 0 56px; border-bottom:1px solid var(--line)} .article-head::before{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(rgba(5,16,34,.76),rgba(5,16,34,.86)),url("sea.webp"); background-size:cover;background-position:center} .article-head .wrap{position:relative;z-index:1;max-width:820px} .article-cat{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:#9fc0ff;display:flex;gap:14px;align-items:center;margin-bottom:22px} .article-cat i{font-style:normal;color:#9aa9c2} .article-head h1{margin:0;font-family:var(--font-display);font-weight:400;letter-spacing:-.03em; line-height:1.08;font-size:clamp(2rem,4.4vw,3.2rem);max-width:22ch} .article-head .dek{margin:20px 0 0;color:#cfdbed;font-size:1.14rem;line-height:1.5;max-width:56ch} .article-meta{margin-top:26px;display:flex;gap:24px;font-family:var(--font-mono);font-size:11.5px; letter-spacing:.06em;color:#9fb2cf} .prose{max-width:none;margin:0} .art-authors{max-width:860px;margin:0 auto 44px;display:flex;flex-wrap:wrap;gap:14px 36px;padding-bottom:28px;border-bottom:1px solid #E4EAF4} .art-author{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit} .art-author img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:center top;background:#E4EAF4} .art-author .an{font-weight:600;color:var(--ink);font-size:1rem;line-height:1.2} .art-author .ar{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:#6b7688;margin-top:4px} .art-author .al{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:#1F5CFF;margin-top:4px} .art-author:hover .an{color:#1F5CFF} .art-author .al svg{width:12px;height:12px;fill:currentColor} .prose p{font-size:1.16rem;line-height:1.72;color:#2a323e;margin-bottom:1.5em;letter-spacing:-.005em;text-align:justify} .prose.rich h2{font-size:1.9rem;line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin:2.4em 0 .8em} .prose.rich h3,.prose.rich h4{font-size:1.32rem;line-height:1.3;color:var(--ink);margin:2em 0 .7em} .prose.rich ul,.prose.rich ol{margin:0 0 1.5em 1.4em;font-size:1.12rem;line-height:1.68;color:#2a323e} .prose.rich li{margin-bottom:.5em;text-align:justify} .prose.rich li ul,.prose.rich li ol{margin-top:.5em;margin-bottom:.5em} .prose.rich a{color:#1F5CFF;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px} .prose.rich a:hover{color:#002479} .prose.rich figure{margin:2.2em 0} .prose.rich img{max-width:100%;height:auto;display:block;border-radius:6px} .prose.rich figcaption{font-family:var(--font-mono);font-size:12px;color:#6b7688;margin-top:10px} .prose.rich blockquote{border-left:2px solid #1F5CFF;padding:.2em 0 .2em 1.2em;margin:2em 0;font-size:1.25rem;line-height:1.55;color:var(--ink)} .prose.rich key-takeaways{display:block;background:#F1F5FD;border:1px solid #D6E0F5;border-radius:8px;padding:22px 26px;margin:1.8em 0} .prose.rich key-takeaways h4{margin:0 0 .5em;font-size:1rem;font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#1F5CFF} .prose.rich key-takeaways p,.prose.rich key-takeaways li{font-size:1.06rem;margin:0;color:var(--ink)} .prose.rich key-takeaways ul{margin:.4em 0 0 1.2em} .prose.rich table{width:100%;border-collapse:collapse;margin:1.6em 0 2.4em;font-size:.94rem;line-height:1.45;color:#2a323e} .prose.rich th{text-align:left;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6b7688;padding:10px 12px 10px 0;border-bottom:1px solid #C9D3E6} .prose.rich td{padding:12px 12px 12px 0;border-bottom:1px solid #E4EAF4;vertical-align:top;text-align:left} .prose.rich td:first-child{font-weight:600;color:var(--ink);white-space:nowrap} .prose.rich [data-rt-embed-type]{overflow-x:auto} .prose.rich pre:empty,.prose.rich p:empty{display:none} .prose.rich strong{color:var(--ink)} .prose.rich .refs{margin-top:4em;padding-top:2em;border-top:1px solid #E4EAF4} .prose.rich .refs h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6b7688;margin:0 0 1em} .prose.rich .refs li,.prose.rich .refs p{font-size:.92rem;color:#6b7688;text-align:left;word-break:break-word} @media(max-width:760px){.prose.rich td:first-child{white-space:normal}} .prose .art-pending{font-size:.95rem;font-family:var(--font-mono);color:var(--muted); border:1px dashed var(--line);border-radius:2px;padding:14px 18px;margin-top:28px} .prose .art-pending a{color:var(--signal);text-decoration:underline} .article-foot{max-width:860px;margin:56px auto 0;padding-top:32px;border-top:1px solid var(--line); display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap} .article-foot .back{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--muted); display:inline-flex;gap:.5em;align-items:center;transition:color .2s} .article-foot .back:hover{color:var(--signal)} .next-read{text-align:right} .next-read .nl{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);display:block;margin-bottom:5px} .next-read a{font-family:var(--font-display);font-weight:500;font-size:1.05rem;color:var(--ink); transition:color .2s} .next-read a:hover{color:var(--signal)} @media(max-width:600px){.prose p:first-of-type::first-letter{font-size:2.6rem} .next-read{text-align:left}} /* portfolio grid (companies page – full list) */ .pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .pf-grid .pf-card{flex:initial} .pf-count{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--muted)} .pf-card.hide{display:none} @media(max-width:920px){.pf-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.pf-grid{grid-template-columns:1fr}} /* ============================================================ TEAM MEMBER DETAIL PAGE (member.html) – dark, sticky RHS photo ============================================================ */ .mem{background:#06182c;color:var(--paper)} .mem-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,3.5vh,40px) clamp(40px,6vw,96px); padding:132px 0 100px;align-items:start} /* back control: centred chevron pointing down (the sheet slides down), soft glow */ .mem-back{grid-column:1/-1;justify-self:center;order:-2;width:84px;height:84px;border-radius:8px; display:grid;place-items:center;align-content:center;gap:4px;color:var(--paper);text-decoration:none; background:radial-gradient(circle,rgba(159,192,255,.2),rgba(159,192,255,0) 72%); transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)} .mem-back svg{width:36px;height:36px;display:block} .mem-back .mem-back-lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.75} .mem-back:hover{color:#fff;transform:translateY(3px); background:radial-gradient(circle,rgba(159,192,255,.36),rgba(159,192,255,0) 72%)} .mem-name{font-family:var(--font-display);font-weight:300;letter-spacing:-.035em;line-height:.98; font-size:clamp(2.6rem,5.2vw,4.6rem);color:#fff;margin:0;text-wrap:balance} .mem-meta{margin-top:26px;font-size:1.15rem;letter-spacing:-.01em} .mem-meta b{color:#fff;font-weight:600} .mem-meta span{color:#8ea3c6} .mem-bio{margin-top:clamp(40px,7vh,72px);max-width:52ch} .mem-bio p{font-size:1.06rem;line-height:1.62;color:#c9d5e8;margin-bottom:1.35em;text-align:justify} /* The sheet is always dark, but it opens over pages with different --ink values (the company sheet can open over the team page and vice versa). Anything that would otherwise inherit a page-level colour is stated outright, or it renders dark on dark. */ .mem-bio p b,.mem-bio p strong{color:inherit} .cod-copy p{text-align:justify} .mem-bio p.lead{color:#fff;font-weight:600;font-size:1.12rem} /* Small footnote at the foot of the member column (CMS "Footnote", e.g. contractor status). */ .mem-note{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;line-height:1.5;color:#8ea3c6;max-width:52ch;margin-top:28px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)} .cod-copy p.lead{font-weight:400} .cod-copy p.lead b{font-weight:600;color:#fff} .mem-pf{margin-top:clamp(48px,8vh,86px)} .mem-pf-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px} .mem-pf-head .lbl{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8ea3c6} .mem-pf-head .ct{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:#8ea3c6} .mem-pf-head .ct em{font-style:normal;color:var(--signal)} /* Writing – insights pieces on the dark member sheet */ .mem-writing .mem-art-col{display:flex;flex-direction:column} .mem-art{display:block;border-top:1px solid rgba(242,243,241,.22);padding:22px 0 26px;text-decoration:none} .mem-art-meta{display:flex;justify-content:space-between;gap:16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8ea3c6;margin-bottom:12px} .mem-art h4{color:#fff;font-family:var(--font-display);font-weight:500;font-size:1.28rem;line-height:1.32;margin:0 0 10px} .mem-art p{color:#c9d5e8;font-size:.98rem;line-height:1.55;margin:0 0 14px} .mem-art-read{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--signal)} .mem-art-read .arr{display:inline-block;transition:transform .25s} .mem-art:hover .mem-art-read{color:#fff} .mem-art:hover .mem-art-read .arr{transform:translateX(4px)} .mem-pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0; border-top:1px solid rgba(242,243,241,.14);border-left:1px solid rgba(242,243,241,.14)} .mem-pf-grid>.mem-co{border-right:1px solid rgba(242,243,241,.14);border-bottom:1px solid rgba(242,243,241,.14)} .mem-co{background:#06182c;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center; padding:22px;transition:background .18s var(--ease);position:relative} .mem-co:hover{background:#dbe7f6} .mem-co img{max-height:42px;max-width:78%;object-fit:contain; filter:grayscale(1) brightness(0) invert(1);opacity:.82;transition:filter .18s var(--ease),opacity .18s var(--ease)} .mem-co:hover img{filter:none;opacity:1} /* modelml: very wide wordmark – give it near-full cell width so it doesn't look undersized */ .mem-co:has(img[src*="modelml"]){padding-left:12px;padding-right:12px} .mem-co img[src*="modelml"]{max-width:100%;max-height:50px} /* reco & fonoa: colored logos clash – flip to solid black on hover instead */ .mem-co:hover img[src*="reco"], .mem-co:hover img[src*="fonoa"]{filter:brightness(0);opacity:1} .mem-co span{font-family:var(--font-display);font-weight:500;font-size:1.15rem;letter-spacing:-.02em; color:#e7edf7;text-align:center;opacity:.9;transition:color .18s var(--ease)} .mem-co:hover span{color:#06182c;opacity:1} .mem-co i{position:absolute;top:9px;right:11px;font-family:var(--font-mono);font-style:normal; font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal)} .mem-right{position:sticky;top:104px;margin-top:86px} .mem-photo{aspect-ratio:4/5;overflow:hidden;background:#0b2545;border-radius:2px} .mem-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block} .mem-links{margin-top:22px;display:flex;justify-content:flex-end;gap:12px} .mem-sq{width:48px;height:48px;display:grid;place-items:center;color:var(--paper); border:1px solid rgba(242,243,241,.28);border-radius:3px;transition:.25s var(--ease)} .mem-sq svg{width:20px;height:20px} .mem-sq:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)} .mem-notfound{padding:160px 0 120px;text-align:center} /* advisor detail: What they bring bullet list */ .mem-brings ul{margin:0;padding:0;list-style:none;display:grid;gap:12px} .mem-brings li{position:relative;padding-left:24px;font-size:1.06rem;line-height:1.55;color:#fff;font-weight:600} .mem-brings li::before{content:"–";position:absolute;left:0;color:#8ea3c6} /* advisors tab: independence footnote – deliberately quiet, sits at the very bottom of the page */ .team-note{margin:0 auto;padding:8px 0 56px;font-size:11.5px;line-height:1.6;color:#9aa4b8;max-width:80ch;text-align:center} .mem-notfound h1{font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,5vw,3rem);color:#fff} .mem-notfound a{color:#9fc0ff;text-decoration:underline;margin-top:16px;display:inline-block} /* member detail as a slide-up sheet over the team page */ .mem, .mem-overlay{--maxw:min(1240px,100%);--gut:clamp(20px,calc((100vw - 1020px)/2),110px)} /* locks the content column at 1020px whenever there is room – no shrink/grow with viewport */ .mem-overlay{position:fixed;inset:0;z-index:90;background:#06182c;overflow-y:auto; -webkit-overflow-scrolling:touch;overscroll-behavior:contain; transform:translateY(100%);visibility:hidden; box-shadow:0 -30px 80px rgba(2,10,22,.45); transition:transform .6s cubic-bezier(.32,.72,.28,1),visibility 0s .6s} .mem-overlay.open{transform:none;visibility:visible; transition:transform .6s cubic-bezier(.32,.72,.28,1),visibility 0s 0s} .mem-overlay .mem-grid{padding-top:44px} /* dark banner inside the sheet – sticky so navigation is always reachable; banner wrap uses the site-wide gutters so it lines up with the page behind */ .mem-overlay .mem-ov-nav{position:sticky;top:0;left:auto;right:auto;z-index:5; --maxw:min(1840px,100%);--gut:clamp(20px,10vw,220px); background:#06182c;border-bottom:1px solid rgba(242,243,241,.14)} .mem-overlay .mem-ov-nav .links a{color:var(--paper)} .mem-overlay .mem-ov-nav .logo-img{filter:brightness(0) invert(1)} /* the sheet banner is always dark – its hamburger stays cream even on cream-nav pages */ header.nav.mem-ov-nav .menu-btn{color:var(--paper)} html.mem-lock,html.mem-lock body{overflow:hidden} @media(prefers-reduced-motion:reduce){.mem-overlay{transition:none}} @media(max-width:820px){.mem-grid{grid-template-columns:1fr;gap:28px} /* tighter top: less dead space above the close chevron, flatter control */ .mem-grid{padding-top:88px} .mem-overlay .mem-grid{padding-top:16px} .mem-back{width:84px;height:44px;border-radius:6px;gap:2px} .mem-back svg{width:26px;height:26px} /* phone order: name/role → photo → links (centred) → bio → assets */ .mem-left,.mem-right{display:contents} .mem-name{order:1} .mem-meta{order:2;margin-top:-20px} .mem-photo{order:3;width:100%;max-width:420px;margin:6px auto 0} .mem-links{order:4;justify-content:center;margin-top:0} .mem-bio{order:5;margin-top:8px} .mem-bio p{font-size:15px} .mem-bio p.lead{font-size:16px} .mem-brings li{font-size:15px} .mem-pf{order:6;margin-top:8px} .mem-pf-grid{grid-template-columns:repeat(2,1fr)} .mem-co{aspect-ratio:2/1;padding:18px} .mem-co img{max-height:34px} .mem-co img[src*="modelml"]{max-height:40px}} /* ============================================================ COMPANY DETAIL PAGE (company.html) – dark, mirrors member.html ============================================================ */ .cod-logo{display:block;max-width:320px;width:auto;object-fit:contain;object-position:left center; filter:grayscale(1) brightness(0) invert(1) opacity(.96)} .cod-wm{font-family:var(--font-display);font-weight:500;font-size:clamp(2.2rem,4.5vw,3.4rem); letter-spacing:-.03em;color:var(--paper);line-height:1} .cod-meta{margin-top:26px} .cod-status{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; display:inline-flex;align-items:center;gap:.55em;margin-left:16px;vertical-align:2px} .cod-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .cod-status.ac{color:#6fc48a} .cod-status.ex{color:#9fc0ff} .cod-site{display:inline-flex;align-items:baseline;gap:7px;margin-top:20px;font-family:var(--font-mono); font-size:12.5px;letter-spacing:.06em;color:#9fc0ff;border-bottom:1px solid rgba(159,192,255,.35); padding-bottom:3px;transition:color .25s var(--ease),border-color .25s var(--ease)} .cod-site .arr{font-size:11px} .cod-site:hover{color:#fff;border-color:#fff} .cod-copy{margin-top:clamp(40px,7vh,64px)} .cod-sec+.cod-sec{margin-top:clamp(32px,5vh,48px)} .cod-kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase; color:#8ea3c6;margin-bottom:14px} .cod-team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0; border-top:1px solid rgba(242,243,241,.14);border-left:1px solid rgba(242,243,241,.14)} .cod-team-grid>.cod-tm{border-right:1px solid rgba(242,243,241,.14);border-bottom:1px solid rgba(242,243,241,.14)} .cod-tm{background:#06182c;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:13px;padding:26px 14px;transition:background .18s var(--ease)} .cod-tm img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center top; border:1px solid rgba(242,243,241,.2)} .cod-tm span{font-size:.92rem;letter-spacing:-.01em;color:#e7edf7;text-align:center;opacity:.9; transition:color .18s var(--ease)} .cod-tm:hover{background:#dbe7f6} .cod-tm:hover span{color:#06182c;opacity:1} .cod-founder{margin-top:18px;display:flex;align-items:baseline;justify-content:space-between;gap:16px} .cod-founder .lbl{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase; color:#8ea3c6;flex-shrink:0} .cod-founder .who{display:flex;flex-direction:column;gap:7px;font-size:.98rem;color:#8ea3c6;text-align:right} .cod-founder .who b{color:#fff;font-weight:600} .cod-dates{margin-top:14px;flex-direction:column;align-items:flex-end;gap:4px} .cod-dates .lbl{margin:0} @media(max-width:820px){.cod-dates{align-items:flex-start}} /* Company sheet facts box: founders + dates stacked in one hairline frame at photo width */ .cod-facts{margin-top:18px;width:100%;box-sizing:border-box;border-top:1px solid rgba(242,243,241,.14);padding:18px 0 0;gap:0} .cod-facts .lbl{margin-top:14px} .cod-facts .lbl:first-child{margin-top:0} .cod-facts .who{gap:4px;max-width:100%} .cod-facts .who i{font-style:normal;color:#fff;font-weight:400} @media(max-width:820px){.cod-facts{order:4}.cod-facts .who{text-align:left}} /* Member profile facts (Education / Previous experience / Languages) under the photo. Rows are label over value, right-aligned to the photo edge; the LinkedIn + mail squares follow underneath. */ /* framed with the same hairlines as the portfolio grid; label/value colours as before */ .mem-facts{margin-top:18px;gap:0;width:100%;box-sizing:border-box;border-top:1px solid rgba(242,243,241,.14);border-bottom:1px solid rgba(242,243,241,.14);padding:18px 0} .mem-facts .lbl{margin-top:14px} .mem-facts .lbl:first-child{margin-top:0} .mem-facts .who{gap:4px;max-width:100%} .mem-facts .who b{font-weight:600;line-height:1.35} .mem-facts+.mem-links{margin-top:22px} @media(max-width:820px){.mem-facts{align-items:flex-start}.mem-facts .who{text-align:left}} @media(max-width:820px){.cod-team-grid{grid-template-columns:repeat(2,1fr)} /* mobile: site link + founders sit below the image, label stacked above the names */ .cod-founder{order:4;margin-top:8px;flex-direction:column;align-items:flex-start;gap:6px} .cod-founder .who{text-align:left;gap:5px} .cod-site{order:4;margin-top:10px} /* section rhythm: founders→what-they-do gap matches what-they-do→why-we-backed */ .cod-copy{margin-top:32px} .cod-sec+.cod-sec{margin-top:32px} /* team cells: same circles, shallower cells so they read less square */ .cod-tm{padding:14px 14px;gap:10px} /* logo sits flush – no leading gap above the meta line */ .cod-logo{margin:0} .cod-meta{margin-top:0}} /* ============================================================ FOUNDER TESTIMONIALS (approach.html) ============================================================ */ .testi-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start} .testi{margin:0;padding-top:28px;border-top:1px solid var(--line);position:relative} .testi::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:3px;background:var(--signal)} .testi-q{font-family:var(--font-display);font-weight:300;font-size:clamp(1.2rem,1.8vw,1.55rem); line-height:1.38;letter-spacing:-.02em;color:var(--ink);text-wrap:pretty} .testi-att{margin-top:28px;display:flex;align-items:center;gap:14px} .testi-att .who{display:flex;flex-direction:column;gap:3px} .testi-att .who b{font-weight:600;color:var(--ink);font-size:15.5px} .testi-att .who span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--muted)} .testi-att a{margin-left:auto;display:flex;align-items:center} .testi-logo{height:24px;width:auto;object-fit:contain;opacity:.9;transition:opacity .25s var(--ease)} .testi-att a:hover .testi-logo{opacity:1} @media(max-width:820px){.testi-grid{grid-template-columns:1fr;gap:36px}} /* approach – principles as editorial hairline rows (distinct from home-page cards) */ .prin-list{border-top:1px solid var(--line)} .prin{display:grid;grid-template-columns:64px 1fr 1.25fr;gap:clamp(20px,4vw,64px); align-items:start;padding:clamp(28px,4.5vh,42px) 0;border-bottom:1px solid var(--line)} .prin-no{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--signal);padding-top:8px} .prin-head .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em; text-transform:uppercase;color:var(--muted)} .prin-head h3{margin:10px 0 0;font-family:var(--font-display);font-weight:600; font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.025em;line-height:1.05;color:var(--ink)} .prin p{font-size:15.5px;line-height:1.6;color:var(--muted);max-width:58ch;padding-top:8px} @media(max-width:820px){.prin{grid-template-columns:1fr;gap:12px} .prin-no{padding-top:0}.prin p{padding-top:0}} /* approach – where we invest */ .invest{margin-top:clamp(48px,8vh,84px);display:grid;grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,90px);align-items:start} .inv-k{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.18em; text-transform:uppercase;color:var(--signal)} .inv-figs{display:grid;gap:clamp(36px,5vh,54px)} .inv-n{display:block;margin-top:14px;font-family:var(--font-display);font-weight:300; font-size:clamp(2.6rem,4.6vw,4rem);letter-spacing:-.035em;line-height:.95;color:var(--ink)} .inv-fig p{margin-top:12px;font-size:15.5px;color:var(--muted);line-height:1.55;max-width:40ch} .inv-themes .inv-k{margin-bottom:10px} .inv-theme{display:flex;align-items:baseline;gap:20px;padding:19px 0;border-bottom:1px solid var(--line)} .inv-theme:first-of-type{border-top:1px solid var(--line)} .inv-theme .no{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--muted)} .inv-theme .t{font-family:var(--font-display);font-weight:500;font-size:clamp(1.15rem,1.7vw,1.45rem); letter-spacing:-.02em;color:var(--ink)} /* geography as inline figure: dot separators between regions */ .inv-sep{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--signal); vertical-align:middle;margin:0 .28em;transform:translateY(-.35em)} /* geography band – full-width line with three stops, west to east */ .inv-geo-band{margin-top:clamp(48px,8vh,84px)} .inv-geo-band .inv-k{margin-bottom:30px} .inv-geo{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;padding-top:28px} .inv-geo::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)} .inv-stop{position:relative} .inv-stop::before{content:"";position:absolute;top:-34px;left:1px;width:11px;height:11px; border-radius:50%;background:var(--signal);box-shadow:0 0 0 6px rgba(31,92,255,.1)} .inv-stop .no{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em; color:var(--muted);margin-bottom:8px} .inv-stop .r{display:block;font-family:var(--font-display);font-weight:400; font-size:clamp(1.5rem,2.8vw,2.4rem);letter-spacing:-.03em;line-height:1;color:var(--ink)} @media(max-width:820px){.inv-geo{grid-template-columns:1fr;gap:34px;padding-top:0;padding-left:26px} .inv-geo::before{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto} .inv-stop::before{top:2px;left:-25px}} /* approach – B-FLEXION platform banner (compact) */ .bflex{margin-top:clamp(36px,6vh,60px);background:var(--paper);border:1px solid var(--line); border-radius:18px;padding:clamp(22px,4vw,48px);color:var(--ink)} .bflex-k{color:var(--signal);font-size:13px} .bflex-t{margin:16px 0 0;font-family:var(--font-display);font-weight:300; font-size:clamp(1.1rem,1.7vw,1.45rem);letter-spacing:-.015em;line-height:1.4; color:var(--muted);max-width:62ch} .bflex-t b{font-weight:600;color:var(--ink)} @media(max-width:820px){.bflex{padding:20px 22px;flex-direction:column;align-items:flex-start!important}.bflex-logo{height:72px!important;align-self:center}} @media(max-width:820px){.invest{grid-template-columns:1fr;gap:44px}} /* home – ledger stats: full-width hairline rows, staggered giant figures */ .stats-ledger{display:block;border:none;border-radius:0;background:transparent;overflow:visible;margin-top:88px;padding-left:33px} .stats-ledger .stat{border:none;padding:clamp(16px,2.5vh,28px) 0; display:flex;align-items:baseline;gap:20px;padding-left:var(--x,0)} .stats-ledger .stat-n{font-size:70px;color:#002479} .stats-ledger .stat-l{margin-top:0;flex:none;font-size:22px;letter-spacing:.14em} .stats-ledger .stat-multi{flex-wrap:wrap;row-gap:6px} .stats-ledger .stat-multi .stat-n{white-space:nowrap} .stats-ledger .stat-multi .stat-l{white-space:normal;min-width:0} @media(max-width:700px){ .stats-ledger{display:block!important;padding-left:0} .stats-ledger .stat{border-right:none;padding:18px 0;display:block} .stats-ledger .stat-n{font-size:clamp(2.2rem,9vw,3rem);display:block} .stats-ledger .stat-l,.stats-ledger .stat .stat-l{display:block;white-space:normal;flex:1 1 auto;min-width:0; margin-top:8px;font-size:13px;letter-spacing:.1em;line-height:1.5} .stats-ledger .stat-multi .stat-l+.stat-l{margin-top:2px} /* one-line locks are for desktop only */ .sec-title,.pf-sub{white-space:normal} } @media(max-width:900px){ /* the hero headline carries an inline nowrap for desktop; release it on small screens */ .hero-statement .bright{white-space:normal!important;font-size:clamp(2rem,8.5vw,3rem)!important} .hero-statement .muted{font-size:clamp(1.05rem,4.4vw,1.4rem)!important} } /* approach – stats band without the box */ .stats--plain{border:none;border-radius:0;background:transparent;overflow:visible} .stats--plain .stat{border:0;padding-left:0} /* ============================================================ APPROACH – "what we are looking for" panel (solid signal blue) ============================================================ */ .look{background:#1F5CFF;color:#F9F9F9;border-radius:12px;margin:0 0 40px; display:grid;grid-template-columns:minmax(200px,.75fr) 2.4fr;gap:24px clamp(20px,3vw,40px); padding:clamp(26px,3.4vw,44px) clamp(22px,3vw,40px) 0} .look-head{font-family:var(--font-display);font-weight:300;font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.05;letter-spacing:-.03em} .look-body{font-size:clamp(1.12rem,1.45vw,1.36rem);line-height:1.5;padding-right:clamp(0px,2vw,24px)} .look-lead{margin:0 0 1.6em;max-width:none} .look-list{margin:0;padding:0 0 0 1.15em;max-width:none} .look-list li{margin-bottom:.45em} .look-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px; margin-top:clamp(18px,2.4vw,30px);padding:18px 0 22px;border-top:1px solid rgba(249,249,249,.55); color:#F9F9F9;text-decoration:none;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase} .look-foot .arr{font-size:22px;letter-spacing:0;transition:transform .3s var(--ease)} .look-foot:hover .arr{transform:translateX(6px)} @media(max-width:760px){ .look{grid-template-columns:1fr;gap:14px;padding:22px 18px 0;border-radius:10px} .look-head{font-size:1.5rem} .look-head br{display:none} .look-head br + *{margin-left:0} .look-head{white-space:normal} .look-body{font-size:1rem;line-height:1.5;padding-right:0} .look-lead,.look-list{max-width:none;overflow-wrap:anywhere} .look-list{padding-left:1.1em} .look-foot{margin-top:14px;padding:14px 0 16px;font-size:11px} } /* ============================================================ ARR JOURNEY ANIMATION (approach.html) – dark panel, S-curve ============================================================ */ .arr-anim{margin-top:0;background:#06182c;border-radius:18px; padding:clamp(22px,4vw,48px);overflow:hidden} .arr-anim>.inv-k{color:#9fc0ff} .arr-title{margin:0;font-family:var(--font-display);font-weight:300;color:#FFFCF3; font-size:clamp(1.7rem,3.4vw,2.9rem);letter-spacing:-.03em;line-height:1.05} .arr-stage{position:relative;margin-top:18px} .arr-stage svg{display:block;width:100%;height:auto} #arrPath{stroke:#FFFCF3;stroke-width:2.5;fill:none;stroke-linecap:round} #arrPathGrey{stroke:rgba(255,252,243,.38);stroke-width:2.5;fill:none;stroke-linecap:round} .arr-dot{fill:var(--signal);stroke:#FFFCF3;stroke-width:2;opacity:0; transform-box:fill-box;transform-origin:center;transform:scale(.2); transition:opacity .45s var(--ease),transform .6s cubic-bezier(.34,1.56,.64,1)} .arr-dot.on{opacity:1;transform:scale(1)} .arr-conn{stroke:rgba(255,252,243,.45);stroke-width:1;stroke-dasharray:3 4;opacity:0; transition:opacity .5s var(--ease) .15s} .arr-conn.on{opacity:1} .arr-num{font-family:var(--font-mono);font-size:11px;font-weight:700;fill:#FFFCF3;text-anchor:middle;opacity:0; pointer-events:none;transition:opacity .3s var(--ease) .25s} .arr-num.on{opacity:1} .arr-call .t .n{display:inline-flex;align-items:center;justify-content:center;width:1.7em;height:1.7em;margin-right:.7em; border-radius:50%;background:var(--signal);color:#FFFCF3;border:1.5px solid #FFFCF3;font-size:.9em;letter-spacing:0;flex:none;vertical-align:middle} .arr-rail{display:none} .arr-call{position:absolute;width:27%;min-width:0;background:rgba(255,252,243,.06); border:1px solid rgba(255,252,243,.22);border-radius:8px;padding:clamp(7px,1.3vw,16px) clamp(8px,1.5vw,18px); opacity:0;transform:translateY(10px); transition:opacity .5s var(--ease) .2s,transform .5s var(--ease) .2s} .arr-call.on{opacity:1;transform:none} .arr-call .t{display:block;font-family:var(--font-mono);font-size:clamp(8.5px,1vw,13px);letter-spacing:.12em; text-transform:uppercase;color:#9fc0ff;margin-bottom:clamp(3px,.6vw,8px)} .arr-call p{margin:0;font-size:clamp(10.5px,1.35vw,17px);line-height:1.42;color:#e9f0fa} .arr-sub{margin:8px 0 0;font-size:clamp(12px,1.3vw,16px);line-height:1.45;color:rgba(255,252,243,.85)} @media(max-width:900px){ .arr-call{border-radius:6px} } @media(max-width:700px){ /* no room to float callouts on the curve: curve on top, callouts stacked in journey order */ .arr-sub i{font-size:16px!important} .arr-stage{display:flex;flex-direction:column;gap:12px;--railx:12px;--cardml:40px} .arr-stage svg{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden} .arr-conn{display:none} .arr-call{position:static!important;left:auto!important;top:auto!important;transform:none!important; width:auto;max-width:none;padding:14px 16px 14px 18px;margin-left:var(--cardml);opacity:1!important;position:relative!important} .arr-call .t{font-size:11px;margin-bottom:6px;display:flex;align-items:center} .arr-call .t .n{position:absolute;left:calc(var(--railx) - var(--cardml) - 12px);top:11px;width:24px;height:24px;margin:0;font-size:10px;line-height:1;padding:0; display:flex;align-items:center;justify-content:center;box-sizing:border-box; background:var(--signal);color:#FFFCF3;border:1.5px solid #FFFCF3;opacity:0;transform:scale(.4); transition:opacity .45s var(--ease),transform .6s cubic-bezier(.34,1.56,.64,1)} .arr-call.on .t .n{opacity:1;transform:none} .arr-call p{font-size:14px;line-height:1.45} #arrCall3{order:1}#arrCall0{order:2}#arrCall1{order:3}#arrCall2{order:4} /* vertical rail down the LHS of the cards – centred under the badges; grey lead-in like the arc, ivory after step 1 */ .arr-rail{display:block;position:absolute;left:var(--railx);transform:translateX(-50%);width:2.5px;background:transparent;pointer-events:none} .arr-rail-grey{position:absolute;left:0;top:0;width:100%;height:0;background:rgba(255,252,243,.38);border-radius:1px} .arr-rail-fill{position:absolute;left:0;top:0;width:100%;height:0;background:#FFFCF3;border-radius:1px} } /* ============================================================ ARTICLE DETAIL – dark sheet (matches member / company detail) ============================================================ */ .art-grid-d{grid-template-columns:minmax(0,1.55fr) minmax(0,.45fr);gap:clamp(20px,3.5vh,40px) clamp(40px,6vw,88px)} .art-kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#9fc0ff;display:flex;gap:14px;align-items:center;margin-bottom:22px} .art-kicker i{font-style:normal;color:#8ea3c6} .art-title{max-width:20ch} .art-dek{margin:24px 0 0;color:#c9d5e8;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.5;max-width:58ch;font-weight:300} .art-meta{margin-top:18px} .art-prose{margin-top:clamp(40px,7vh,72px)} /* dark sheet: every text node inside the body is white/light blue – callouts are the only exception */ .prose.rich.art-prose,.prose.rich.art-prose *:not(key-takeaways):not(key-takeaways *){color:#fff} .prose.rich.art-prose p{font-size:1.1rem;line-height:1.7} .prose.rich.art-prose a:not(key-takeaways *){color:#9fc0ff} .prose.rich.art-prose a:not(key-takeaways *):hover{color:#fff} .prose.rich.art-prose figcaption,.prose.rich.art-prose th, .prose.rich.art-prose .refs,.prose.rich.art-prose .refs *{color:#8ea3c6} .prose.rich.art-prose table th{color:#8ea3c6} .prose.rich.art-prose img{border-radius:4px;background:#0b2545} .prose.rich.art-prose blockquote{border-left-color:#9fc0ff} .prose.rich.art-prose th{border-bottom-color:rgba(242,243,241,.28)} .prose.rich.art-prose td{border-bottom-color:rgba(242,243,241,.14)} .prose.rich.art-prose .refs{border-top-color:rgba(242,243,241,.18)} .prose.rich.art-prose .art-pending{border-color:rgba(242,243,241,.28)} /* callouts: off-white box, dark blue type */ .prose.rich.art-prose key-takeaways{background:var(--paper);border-color:var(--paper)} .prose.rich.art-prose key-takeaways,.prose.rich.art-prose key-takeaways *{color:#002479} .prose.rich.art-prose key-takeaways a{color:#1F5CFF} .art-next{margin-top:clamp(48px,8vh,86px);padding-top:26px;border-top:1px solid rgba(242,243,241,.22)} .art-next .lbl{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8ea3c6;margin-bottom:10px} .art-next a{color:#fff;font-family:var(--font-display);font-weight:500;font-size:1.28rem;line-height:1.32;text-decoration:none} .art-next a .arr{display:inline-block;transition:transform .25s;color:var(--signal)} .art-next a:hover .arr{transform:translateX(4px)} .art-right{margin-top:86px} .art-side-lbl{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8ea3c6;margin-bottom:18px} .art-au{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;border-top:1px solid rgba(242,243,241,.18)} .art-au:last-child{border-bottom:1px solid rgba(242,243,241,.18)} .art-au-main{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;min-width:0} .art-au-main img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center top;background:#0b2545;flex:none} .art-au-main span{display:flex;flex-direction:column;min-width:0} .art-au-main b{color:#fff;font-weight:600;font-size:1rem;line-height:1.2} .art-au-main i{font-style:normal;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:#8ea3c6;margin-top:5px} .art-au-main:hover b{color:#9fc0ff} .art-au-li{width:40px;height:40px;flex:none} .art-au-li svg{width:18px;height:18px} @media(max-width:820px){ .art-grid-d{grid-template-columns:1fr} .art-left,.art-right{display:contents} .art-kicker{order:1}.art-title{order:1}.art-dek{order:2}.art-meta{order:2;margin-top:-16px} .art-side-lbl,.art-au{order:3} .art-prose{order:5;margin-top:8px} .art-next{order:6} .prose.rich.art-prose p{font-size:15px} } .art-kicker-top{grid-column:1/-1;margin-bottom:0} .art-cover-hero{grid-column:1/-1;border-radius:8px;overflow:hidden;background:#0b2545;margin-bottom:clamp(8px,2vh,20px); /* height cap: ~40% of the square source (1254x1254) – a 2.5:1 band, cropped to the centre */ aspect-ratio:2.5/1} .art-cover-hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:center} .art-grid-d .art-right{margin-top:0} @media(max-width:820px){.art-kicker-top{order:0}.art-cover-hero{order:0;margin-bottom:0}}