/* VENTURE STUDIO + CAPITAL PARTNERS, ONE LANDING PAGE (user, 2026-10-20). Loaded after the shared sheets. Only what the page uses:
   the room, the header bar from hx-menu.js (data-bar="frame", its grid lines off), the hero with its film and the Ask Humo bar, the
   band that opens like the menu, the parallax panels, and people, profit, planet. The pathway cards and screens are gone; the
   previous sheet is in Downloads/HumoWeb-backups/venture-2026-10-20-before-landing. */

/* THE WHOLE WINDOW (user: "allow full viewport scroll, the content viewport looks limited to the middle"; "it should also scroll behind
   the header too"). The engine's stage normally stops short of the header and the foot; here it fills the window, so every section runs
   edge to edge and passes under the glass header as it scrolls. */
html[data-path="venture"]{--top:0px;--foot:0px;--vh:100svh}
html[data-path="venture"] .screen.vs-open{display:block;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none}
html[data-path="venture"] .screen.vs-open::-webkit-scrollbar{display:none}
/* the engine lays its system out as a centred grid, which shrinks a panel made only of positioned layers to nothing; here it is a block */
html[data-path="venture"] .screen.vs-open .sys{display:block;height:auto}

/* THE ROOM: near black with a trace of blue at the edges, under a frosted layer (slow fields of blue light, a fine grain, faint reeds).
   No stars, no Earth, no frame lines. */
html[data-path="venture"] .room{background:linear-gradient(118deg,rgba(var(--deep),.14) 0%,transparent 30%,transparent 82%,rgba(var(--deep),.08) 100%),#010103}
html[data-path="venture"] .room .stars,html[data-path="venture"] .room .globe,html[data-path="venture"] .hxf-frame{display:none!important}
html[data-path="venture"] .room::before{content:"";position:absolute;inset:-12%;pointer-events:none;opacity:.38;
  background:radial-gradient(38% 34% at 22% 28%,rgba(60,100,255,.26),transparent 70%),radial-gradient(34% 30% at 78% 22%,rgba(110,90,255,.16),transparent 70%),
    radial-gradient(46% 40% at 64% 82%,rgba(30,120,255,.18),transparent 72%);
  filter:blur(40px);animation:vsDrift 28s ease-in-out infinite alternate}
html[data-path="venture"] .room::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;mix-blend-mode:screen;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 7px,rgba(0,0,0,.05) 7px 8px,transparent 8px 14px),
    linear-gradient(180deg,rgba(200,220,255,.07),transparent 38%,transparent 70%,rgba(4,6,16,.35))}
@keyframes vsDrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(3%,-2%) scale(1.06)}100%{transform:translate(-3%,2%) scale(1.02)}}

/* 1. THE HERO. The film of the woman fills the room (scaled 1.2 on large screens, as in its reference); screen blending drops its black
   ground. The words sit low so her face stays clear above them. The hero holds still (sticky) while the band opens over it. */
html[data-path="venture"] .room .vs-bgfilm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%;mix-blend-mode:screen;pointer-events:none;transition:opacity .2s linear}
@media (min-width:1024px){ html[data-path="venture"] .room .vs-bgfilm{scale:1.2} }
html[data-path="venture"] .vs-pin{position:relative}
html[data-path="venture"] .vs-hero{position:sticky;top:0;z-index:0;min-height:var(--vh);display:grid;align-content:end;justify-items:center;text-align:center;padding-bottom:clamp(28px,6svh,72px)}
html[data-path="venture"] .vs-hero .q{margin:0 auto!important}
html[data-path="venture"].at0 .vs-hero .q h1{font-size:clamp(34px,min(4.2vw,7.4svh),70px);line-height:1.02;letter-spacing:-.03em}
html[data-path="venture"] .vs-hero .p-close{width:100%;margin-top:clamp(18px,3svh,32px)}
html[data-path="venture"] .vs-hero .p-close .pb{width:min(720px,100%)}

/* 2. THE BAND, from a reference layout: the headline left, a ruled lead right, a pill above it, a hairline down the centre; under it a
   film stage, round at the top and flush with the bottom of the window, with a frosted news bar. It is a solid fill, one window tall,
   and runs the full width; index.html grows it as a circle from the header's Menu glyph as the page scrolls. */
html[data-path="venture"] .vs-ed{position:relative;z-index:1;display:flex;flex-direction:column;min-height:var(--vh);
  margin:0 calc(var(--gut) * -1) 0 calc(var(--lead) * -1);padding:0 var(--gut) 0 var(--lead);background:linear-gradient(180deg,#03050d,#010103)}
html[data-path="venture"] .vs-band{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:". pill" "head lead";
  align-items:end;row-gap:clamp(28px,5svh,56px);padding:clamp(112px,15svh,150px) 0 clamp(26px,4.5svh,44px)}
html[data-path="venture"] .vs-div{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;transform-origin:top;
  background:linear-gradient(90deg,rgba(255,255,255,.015) 0 25%,rgba(255,255,255,.04) 25% 75%,rgba(255,255,255,.015) 75%)}
html[data-path="venture"] .vs-head{grid-area:head;margin:0;font-family:var(--title);font-weight:200;font-size:clamp(40px,min(4.86vw,7.8svh),78px);line-height:.966;letter-spacing:-.025em;white-space:nowrap;text-align:left}
html[data-path="venture"] .vs-head .ln{display:block;overflow:hidden;padding-bottom:.06em}
html[data-path="venture"] .vs-head .ln > span{display:block}
html[data-path="venture"] .vs-pill{grid-area:pill;justify-self:end;display:inline-flex;align-items:center;height:41px;padding:1px 20px 0;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:max(13px,1.29vw);font-weight:400;letter-spacing:-.02em;color:#0b1022;background:#dce8ff;transition:background .3s,translate .4s var(--ease)}
html[data-path="venture"] .vs-pill:hover{background:#fff;translate:0 -1px}
html[data-path="venture"] .vs-lead{grid-area:lead;justify-self:end;position:relative;width:min(520px,100%);margin:0;padding-left:21px;text-align:left;
  font-size:clamp(15px,min(1.6vw,2.56svh),20.5px);line-height:1.317;letter-spacing:.004em;color:rgba(220,232,255,.82)}
html[data-path="venture"] .vs-lead::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:max(1.5px,.19vw);background:#dce8ff}
html[data-path="venture"] .vs-stage{position:relative;flex:1;min-height:clamp(280px,44svh,560px);border-radius:5px 5px 0 0;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 52% 45%,#334a5f 0%,#142333 48%,#05090f 100%)}
html[data-path="venture"] .vs-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
html[data-path="venture"] .vs-news{position:absolute;left:50%;bottom:clamp(24px,4svh,40px);transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:min(800px,calc(100% - 40px));min-height:56px;padding:8px 8px 8px 20px;border-radius:2px;text-align:left;
  background:rgba(214,226,255,.86);-webkit-backdrop-filter:blur(24px) saturate(1.1);backdrop-filter:blur(24px) saturate(1.1)}
html[data-path="venture"] .vs-news p{margin:0;font-size:max(12px,1.37vw);font-weight:400;letter-spacing:-.02em;line-height:1.3;color:#0b1022}
html[data-path="venture"] .vs-news .vs-pill.dk{flex:none;height:40px;padding:1px 18px 0;font-size:max(12px,1.3vw);color:#dce8ff;background:#0b1022}
html[data-path="venture"] .vs-news .vs-pill.dk:hover{background:#1a2550}
/* before the band's entrance plays (class pend), everything that enters waits in its start pose */
html[data-path="venture"] .vs-ed.pend .vs-div{transform:scaleY(0)}
html[data-path="venture"] .vs-ed.pend .vs-head .ln > span{clip-path:inset(0 0 100% 0);transform:translateY(.72em)}
html[data-path="venture"] .vs-ed.pend .vs-lead,html[data-path="venture"] .vs-ed.pend .vs-band > .vs-pill{opacity:0;transform:translateY(10px)}
html[data-path="venture"] .vs-ed.pend .vs-news{opacity:0;transform:translate(-50%,10px) scale(.96,1)}

/* 3 and 5. FULL IMAGES WITH PARALLAX: each panel is the full window; the photograph is taller than the panel and drifts slower than the
   scroll, the line drifts a little the other way (index.html). */
html[data-path="venture"] .vs-px{position:relative;overflow:hidden;isolation:isolate;width:calc(100% + var(--gut) + var(--lead));height:var(--vh);min-height:480px;margin:0 calc(var(--gut) * -1) 0 calc(var(--lead) * -1);text-align:left}
html[data-path="venture"] .px-img{position:absolute;inset:-14% 0;z-index:-2;background-size:cover;background-repeat:no-repeat;will-change:transform;transform:scale(1.06)}
html[data-path="venture"] .vs-px::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(1,1,3,.7),rgba(1,1,3,.12) 34%,rgba(1,1,3,.2) 60%,rgba(1,1,3,.86)),linear-gradient(90deg,rgba(1,1,3,.55),transparent 60%)}
html[data-path="venture"] .px-tx{position:absolute;left:var(--lead);right:var(--gut);bottom:clamp(48px,10svh,110px);will-change:transform}
html[data-path="venture"] .px-tx span{display:block;margin-bottom:14px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(220,232,255,.7)}
html[data-path="venture"] .px-tx h2{margin:0;max-width:16ch;font-family:var(--title);font-weight:200;font-size:clamp(34px,min(4.8vw,8.4svh),76px);line-height:1;letter-spacing:-.03em;color:#fff}

/* 4. PEOPLE, PROFIT, PLANET (from a reference): a sticky column on the left with the heading, the three as buttons and Ask Humo; on the
   right, three cards that slide in from the right as they arrive, each with the Humanate mark, a title, a film and a line. */
html[data-path="venture"] .vs-ppp{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:clamp(96px,14svh,150px) 0 clamp(64px,12svh,140px);text-align:left}
html[data-path="venture"] .pp-l h2{margin:0;max-width:16ch;font-family:var(--title);font-weight:200;font-size:clamp(28px,min(3.4vw,6svh),46px);line-height:1.2;letter-spacing:-.02em;color:#fff}
html[data-path="venture"] .pp-nav{display:none;flex-direction:column;align-items:flex-start;gap:8px}
html[data-path="venture"] .pp-nav button{padding:11px 16px;border:0;border-radius:12px;cursor:pointer;font:inherit;font-size:15px;font-weight:400;color:rgba(255,255,255,.4);background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 .5px rgba(var(--b),.14);transition:color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
html[data-path="venture"] .pp-nav button:hover{color:rgba(255,255,255,.75)}
html[data-path="venture"] .pp-nav button.on{color:#fff;background:rgba(var(--neon),.12);box-shadow:inset 2px 0 0 #6fa2ff,inset 0 0 0 .5px rgba(var(--neon),.4)}
html[data-path="venture"] .pp-cta{display:none;align-items:center;gap:6px;width:fit-content;padding:4px 4px 4px 20px;border-radius:14px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 .5px rgba(var(--b),.18)}
html[data-path="venture"] .pp-cta p{margin:0 12px 0 0;font-size:14px;color:rgba(220,232,255,.82)}
html[data-path="venture"] .pp-cta .vs-pill{height:38px;font-size:14px;border-radius:11px}
html[data-path="venture"] .pp-r{display:flex;flex-direction:column;gap:clamp(24px,14svh,160px)}
html[data-path="venture"] .pp-card{display:grid;gap:18px;padding:clamp(22px,2.6vw,40px);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  box-shadow:inset 0 0 0 .5px rgba(var(--b),.18),inset 0 1px 0 rgba(255,255,255,.06);opacity:0;translate:64px 0;transition:opacity .7s ease-out,translate .7s ease-out}
html[data-path="venture"] .pp-card.in{opacity:1;translate:0 0}
html[data-path="venture"] .pp-mk{width:40px;height:40px;opacity:.8}
html[data-path="venture"] .pp-card h3{margin:0;font-family:var(--title);font-weight:300;font-size:clamp(20px,1.9vw,26px);line-height:1.2;letter-spacing:-.015em;color:#fff}
html[data-path="venture"] .pp-film{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:rgba(0,0,0,.3)}
html[data-path="venture"] .pp-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html[data-path="venture"] .pp-card p{margin:0;font-size:clamp(14px,1.1vw,16px);line-height:1.65;color:rgba(220,232,255,.6)}
@media (min-width:1025px){
  html[data-path="venture"] .vs-ppp{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(64px,7vw,190px);padding-top:0}
  html[data-path="venture"] .pp-l{position:sticky;top:0;height:var(--vh);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(112px,15svh,150px) 0 clamp(32px,6svh,64px)}
  html[data-path="venture"] .pp-nav,html[data-path="venture"] .pp-cta{display:flex}
  html[data-path="venture"] .pp-r{padding:calc(var(--vh) * .22) 0 calc(var(--vh) * .18)}
}
@media (min-width:1280px){ html[data-path="venture"] .vs-ppp{grid-template-columns:minmax(0,460px) minmax(0,1fr)} }

/* the headings' accent words carry the page title's light gradient */
html[data-path="venture"] .vs-head em,html[data-path="venture"] .px-tx h2 em,html[data-path="venture"] .pp-l h2 em{font-style:normal;background:linear-gradient(90deg,var(--c),var(--hi) 45%,#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* PHONES: the same order, stacked; no wash, no pin. */
@media (max-width:900px){
  html[data-path="venture"] .screen.vs-open{padding-top:0!important;padding-bottom:0!important}   /* the phone story layout pads the screen; this page runs edge to edge */
  html[data-path="venture"] .vs-hero{position:relative;min-height:calc(var(--vh) - var(--mbar,64px));padding:96px 0 24px}   /* the phone dock covers the last strip of the window */
  html[data-path="venture"] .vs-hero .p-close .pb-bar{flex-wrap:wrap}
  html[data-path="venture"] .vs-hero .p-close .pb-bar .pb-b:not(.send){display:none}
  html[data-path="venture"] .vs-hero .p-close .pb-bar .pb-chips{flex:1 1 0;min-width:0;flex-wrap:wrap;overflow:visible}
  html[data-path="venture"] .vs-hero .p-close .pb-bar .pb-chips button{font-size:12.5px;padding:7px 11px}
  html[data-path="venture"] .vs-ed{margin:0 -18px;padding:0 18px;min-height:0}
  html[data-path="venture"] .vs-band{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "lead" "pill";row-gap:18px;padding:88px 0 22px}
  html[data-path="venture"] .vs-div{display:none}
  html[data-path="venture"] .vs-head{white-space:normal;font-size:clamp(32px,calc((100vw - 40px) / 7.3),54px)}
  html[data-path="venture"] .vs-lead{width:auto;max-width:32em;justify-self:start;font-size:16.5px;line-height:1.42}
  html[data-path="venture"] .vs-pill{font-size:14px}
  html[data-path="venture"] .vs-stage{flex:none;min-height:max(300px,46svh);border-radius:5px}
  html[data-path="venture"] .vs-news{left:12px;right:12px;bottom:12px;width:auto;transform:none;gap:12px;padding:10px 8px 10px 14px}
  html[data-path="venture"] .vs-news p{font-size:13px}
  html[data-path="venture"] .vs-news .vs-pill.dk{height:36px;font-size:12.5px;padding:1px 12px 0}
  html[data-path="venture"] .vs-ed.pend .vs-news{transform:translateY(10px)}
  html[data-path="venture"] .vs-px{height:80svh;min-height:380px;margin:40px -18px 0}
  html[data-path="venture"] .px-tx{left:18px;right:18px;bottom:32px}
  html[data-path="venture"] .vs-ppp{padding:56px 0 48px}
}

@media (prefers-reduced-motion:reduce){
  html[data-path="venture"] .room::before{animation:none}
  html[data-path="venture"] .px-img,html[data-path="venture"] .px-tx{transform:none!important}
  html[data-path="venture"] .pp-card{opacity:1;translate:none;transition:none}
}

/* FIT TO SIZE (user, 2026-10-20: "everything looks too large, ensure things fit to size"). One pass, about a quarter smaller across the
   page: headings, the lead, the pills, the news bar, the panel lines and the people, profit, planet cards, which also get a measure. */
@media (min-width:901px){
  html[data-path="venture"].at0 .vs-hero .q h1{font-size:clamp(28px,min(3.1vw,5.4svh),50px)}
  html[data-path="venture"] .vs-hero .p-close .pb{width:min(600px,100%);padding:14px 14px 12px 18px;border-radius:16px}
  html[data-path="venture"] .vs-hero .p-close .pb-in{min-height:40px;font-size:15px}
  html[data-path="venture"] .vs-hero .p-close .pb-bar .pb-chips button{padding:7px 11px;font-size:12.5px;border-radius:9px}
  html[data-path="venture"] .vs-hero .p-close .pb-b{width:34px;height:34px}
  html[data-path="venture"] .vs-hero .p-close .pb-b.send{width:38px;height:38px;border-radius:10px}

  html[data-path="venture"] .vs-band{padding:clamp(96px,13svh,124px) 0 clamp(20px,3.4svh,34px);row-gap:clamp(20px,3.6svh,40px)}
  html[data-path="venture"] .vs-head{font-size:clamp(30px,min(3.5vw,5.8svh),56px)}
  html[data-path="venture"] .vs-lead{width:min(440px,100%);padding-left:16px;font-size:clamp(14px,min(1.12vw,2svh),17px);line-height:1.4}
  html[data-path="venture"] .vs-pill{height:34px;padding:1px 16px 0;font-size:13.5px}
  html[data-path="venture"] .vs-stage{min-height:clamp(240px,40svh,480px)}
  html[data-path="venture"] .vs-news{width:min(640px,calc(100% - 40px));min-height:46px;padding:6px 6px 6px 16px;bottom:clamp(20px,3.4svh,32px)}
  html[data-path="venture"] .vs-news p{font-size:clamp(13px,1vw,15px)}
  html[data-path="venture"] .vs-news .vs-pill.dk{height:32px;padding:1px 14px 0;font-size:13px}

  html[data-path="venture"] .px-tx span{font-size:10px;margin-bottom:10px}
  html[data-path="venture"] .px-tx h2{font-size:clamp(28px,min(3.3vw,5.8svh),52px)}
  html[data-path="venture"] .px-tx{bottom:clamp(40px,8svh,84px)}

  html[data-path="venture"] .pp-l h2{font-size:clamp(22px,min(2.3vw,4.2svh),34px)}
  html[data-path="venture"] .pp-nav button{padding:8px 13px;font-size:13.5px;border-radius:10px}
  html[data-path="venture"] .pp-cta{padding:3px 3px 3px 16px}
  html[data-path="venture"] .pp-cta p{font-size:13px}
  html[data-path="venture"] .pp-cta .vs-pill{height:32px;font-size:13px}
  html[data-path="venture"] .pp-r{gap:clamp(24px,10svh,110px)}
  html[data-path="venture"] .pp-card{max-width:640px;gap:14px;padding:clamp(18px,1.8vw,28px);border-radius:20px}
  html[data-path="venture"] .pp-mk{width:30px;height:30px}
  html[data-path="venture"] .pp-card h3{font-size:clamp(16px,1.3vw,20px)}
  html[data-path="venture"] .pp-film{border-radius:12px}
  html[data-path="venture"] .pp-card p{font-size:14px;line-height:1.6}
}
@media (min-width:1025px){ html[data-path="venture"] .vs-ppp{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(48px,6vw,140px)} }
@media (min-width:1280px){ html[data-path="venture"] .vs-ppp{grid-template-columns:minmax(0,380px) minmax(0,1fr)} }
@media (max-width:900px){
  html[data-path="venture"].at0 .vs-hero .q h1{font-size:clamp(26px,7.4vw,34px)}
  html[data-path="venture"] .vs-head{font-size:clamp(28px,calc((100vw - 40px) / 8.6),44px)}
  html[data-path="venture"] .vs-lead{font-size:15px}
  html[data-path="venture"] .px-tx h2{font-size:clamp(26px,7.6vw,36px)}
  html[data-path="venture"] .pp-l h2{font-size:clamp(22px,6.6vw,30px)}
  html[data-path="venture"] .pp-card h3{font-size:17px}
  html[data-path="venture"] .pp-card p{font-size:14px}
}
/* people, profit, planet keeps the full width of the page (it was shrinking to its content and drifting right), and the Ask Humo
   strip under its buttons stays on one line */
html[data-path="venture"] .vs-ppp{width:100%}
html[data-path="venture"] .pp-cta p{white-space:nowrap}
html[data-path="venture"] .pp-cta .vs-pill{white-space:nowrap;flex:none}
@media (min-width:1025px) and (max-width:1279px){ html[data-path="venture"] .pp-cta p{display:none} html[data-path="venture"] .pp-cta{padding:3px} }

/* THE CANVAS (user, 2026-10-20: "improve the canvas background"): index.html draws drifting light and silk lines into .vs-canvas, at a
   third of the window's resolution, so the browser's upscaling softens it. It replaces the CSS light fields; the grain stays on top. */
html[data-path="venture"] .room .vs-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
html[data-path="venture"] .room::before{display:none}
html[data-path="venture"] .room::after{opacity:.1}

/* THE HERO SCROLL (user, 2026-10-20, from the humo-liquid-glass site): the hero is a track 1500px longer than the window; its stage
   holds still while the framed film rises and opens (index.html sets the clip) and the photographs pass over it. The hero's words keep
   the liquid-glass gradient of that site's title. */
html[data-path="venture"] .vs-track{position:relative;height:calc(var(--rise,1500px) + var(--vh))}
html[data-path="venture"] .vs-hs{position:sticky;top:0;height:var(--vh);margin-bottom:calc(var(--vh) * -1);overflow:hidden;z-index:0;
  margin-left:calc(var(--lead) * -1);margin-right:calc(var(--gut) * -1)}
html[data-path="venture"] .vs-hs .vs-hero{position:absolute;inset:0;z-index:2;min-height:0;padding-left:var(--lead);padding-right:var(--gut);transform-origin:50% 70%}
html[data-path="venture"] .vs-rise{position:absolute;inset:0;z-index:1;opacity:0;clip-path:polygon(22% 65%,78% 65%,78% 95%,22% 95%);box-shadow:0 0 0 1px rgba(150,180,255,.2)}
html[data-path="venture"] .vs-rise video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html[data-path="venture"] .vs-rise .m{display:none}
@media (max-width:767px){ html[data-path="venture"] .vs-rise .d{display:none} html[data-path="venture"] .vs-rise .m{display:block} }
html[data-path="venture"] .vs-pimgs{position:relative;z-index:3;max-width:1024px;margin:0 auto;padding-top:200px;pointer-events:none}
html[data-path="venture"] .vs-pimgs img{display:block;aspect-ratio:1;object-fit:cover;box-shadow:0 30px 80px -30px rgba(0,0,0,.85);will-change:transform,opacity}
html[data-path="venture"] .vs-pimgs .a{width:33.333%}
html[data-path="venture"] .vs-pimgs .b{width:66.667%;margin:0 auto}
html[data-path="venture"] .vs-pimgs .c{width:33.333%;margin-left:auto}
html[data-path="venture"] .vs-pimgs .d{width:41.667%;margin-left:96px}
/* (the liquid-glass gradient on the title was dropped: the page splits the title into letters to animate it, and a clipped gradient cannot paint through them) */
/* the hero no longer needs the old pin: the band follows the track */
html[data-path="venture"] .vs-hero{position:absolute}
@media (max-width:900px){
  html[data-path="venture"] .vs-hs{margin-left:-18px;margin-right:-18px}
  html[data-path="venture"] .vs-hs .vs-hero{padding-left:18px;padding-right:18px;min-height:0}
  html[data-path="venture"] .vs-pimgs{padding-top:120px}
  html[data-path="venture"] .vs-pimgs .d{margin-left:24px}
}
/* reduced motion: no rising frame, the photographs sit in the page */
@media (prefers-reduced-motion:reduce){ html[data-path="venture"] .vs-rise{display:none} }
/* as in the source, the photographs begin below the first window, so the title and bar open clear; the track grows to hold them */
html[data-path="venture"] .vs-track{height:auto;min-height:calc(var(--rise,1500px) + var(--vh))}
html[data-path="venture"] .vs-pimgs{padding-top:calc(var(--vh) + 200px);padding-bottom:120px}
@media (max-width:900px){ html[data-path="venture"] .vs-pimgs{padding-top:calc(var(--vh) + 80px)} }

/* the rising frame shows a still of its film until the film can play */
html[data-path="venture"] .vs-rise{background:#05070f}

/* CONTENT DIVIDERS (user, 2026-10-20, from a reference): a hairline across the content width with a short bold label in its middle */
html[data-path="venture"] .vs-rule{display:flex;align-items:center;gap:16px;width:100%;margin:clamp(72px,12svh,120px) 0 0}
html[data-path="venture"] .vs-rule::before,html[data-path="venture"] .vs-rule::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1)}
html[data-path="venture"] .vs-rule span{flex:none;font-size:15px;font-weight:600;letter-spacing:-.005em;color:#fff;white-space:nowrap}
html[data-path="venture"] .vs-ed > .vs-rule{margin-top:clamp(92px,12svh,116px)}
html[data-path="venture"] .vs-ed > .vs-rule + .vs-band{padding-top:clamp(28px,5svh,48px)}
html[data-path="venture"] .vs-rule + .vs-ppp{padding-top:clamp(40px,7svh,72px)}
@media (min-width:1025px){ html[data-path="venture"] .vs-rule + .vs-ppp{padding-top:0} }
html[data-path="venture"] .vs-rule + .vs-px{margin-top:clamp(40px,7svh,72px)}
@media (max-width:900px){ html[data-path="venture"] .vs-rule{margin-top:56px;gap:12px} html[data-path="venture"] .vs-rule span{font-size:14px} html[data-path="venture"] .vs-ed > .vs-rule{margin-top:84px} }
/* the woman's film is gone (user, 2026-10-20: "delete the woman"), so the title and bar sit in the middle of the hero again */
@media (min-width:901px){ html[data-path="venture"] .vs-hs .vs-hero{align-content:center;padding-top:clamp(60px,8svh,90px);padding-bottom:0} }
@media (max-width:900px){ html[data-path="venture"] .vs-hs .vs-hero{align-content:center} }

/* A NEW HERO, MADE FOR THE SCROLL (user, 2026-10-20). The words fill the upper two thirds and the film's frame rests in view below them,
   rounded, flush with the foot of the window. A row of facts runs under the header; a cue in the corner fills as the hero plays.
   index.html moves the frame (inset clip) and lifts, shrinks and softens the words as the page scrolls. */
html[data-path="venture"] .vs-lane{position:relative}
html[data-path="venture"] .vs-hs .vs-hero{display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;
  padding:clamp(96px,12.5svh,124px) var(--gut) 0 var(--lead)!important;will-change:transform,opacity,filter}
html[data-path="venture"] .vs-meta{display:flex;justify-content:space-between;width:100%;padding-bottom:14px;margin-bottom:clamp(28px,7svh,72px);border-bottom:1px solid rgba(255,255,255,.08);
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(220,232,255,.55)}
html[data-path="venture"] .vs-meta span:first-child::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;border-radius:50%;vertical-align:1px;background:#6fa2ff;box-shadow:0 0 10px #6fa2ff}
html[data-path="venture"].at0 .vs-hs .vs-hero .q h1{font-size:clamp(40px,min(6vw,9svh),96px);line-height:.98;letter-spacing:-.035em}
html[data-path="venture"] .vs-sub{max-width:44ch;margin:clamp(14px,2.4svh,22px) auto 0;font-size:clamp(14px,1.1vw,17px);line-height:1.5;color:rgba(220,232,255,.7)}
html[data-path="venture"] .vs-hs .vs-hero .p-close{margin-top:clamp(18px,3.2svh,30px)}
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb{width:min(520px,100%);padding:10px 10px 10px 16px;border-radius:14px;background:rgba(255,255,255,.05)}
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb-in{min-height:0;font-size:14.5px}
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb-bar{margin-top:8px}
/* the frame at rest: the inset clip and its rounding are set from index.html; a fine edge of light marks it */
html[data-path="venture"] .vs-rise{opacity:1;clip-path:inset(74% 30% 0% 30% round 18px);box-shadow:none}
html[data-path="venture"] .vs-rise::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(1,1,3,.35),transparent 30%,transparent 70%,rgba(1,1,3,.5))}
/* the scroll cue: a short track in the lower left that fills as the hero plays */
html[data-path="venture"] .vs-cue{position:absolute;left:var(--lead);bottom:clamp(24px,4svh,40px);z-index:3;display:flex;align-items:center;gap:12px;
  font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(220,232,255,.55)}
html[data-path="venture"] .vs-cue i{position:relative;width:1px;height:46px;background:rgba(255,255,255,.14);overflow:hidden}
html[data-path="venture"] .vs-cue b{position:absolute;inset:0;background:linear-gradient(180deg,#6fa2ff,#dce8ff);transform:scaleY(0);transform-origin:top}
@media (max-width:900px){
  html[data-path="venture"] .vs-hs .vs-hero{padding:88px 18px 0!important}
  html[data-path="venture"] .vs-meta{font-size:9.5px;letter-spacing:.12em;margin-bottom:24px}
  html[data-path="venture"] .vs-meta span:last-child{display:none}
  html[data-path="venture"].at0 .vs-hs .vs-hero .q h1{font-size:clamp(34px,10vw,48px)}
  html[data-path="venture"] .vs-cue{left:18px;bottom:calc(var(--mbar,64px) + 16px)}
  html[data-path="venture"] .vs-rise{clip-path:inset(74% 14% 0% 14% round 18px)}
}
@media (prefers-reduced-motion:reduce){ html[data-path="venture"] .vs-rise{display:block;clip-path:inset(74% 30% 0% 30% round 18px)} html[data-path="venture"] .vs-cue b{transform:scaleY(.3)} }
@media (max-width:900px){ html[data-path="venture"] .vs-cue{display:none} }
/* without the facts row the title opens a little lower in the hero */
@media (min-width:901px){ html[data-path="venture"] .vs-hs .vs-hero{padding-top:clamp(150px,20svh,190px)!important} }
@media (max-width:900px){ html[data-path="venture"] .vs-hs .vs-hero{padding-top:110px!important} }

/* ============================================================================================================================
   SUI STYLE (user, 2026-10-20: "clone this design style for components and for background colour", the Sui brand identity on
   Behance; "keep my current font but make the current font extra light"). Pure black; electric blue #2b7fff with #6fa8ff light;
   hard corners; thin dark rules; small blue square icon tiles; small monospaced labels; photographs in a grey (was blue duotone, user 2026-10-25).
   Every word is set in the site's own Stack Sans Notch at its Extralight weight; only the small labels are monospaced.
   ============================================================================================================================ */
html[data-path="venture"]{--sui:#2b7fff;--sui-l:#6fa8ff;--sui-line:#161b26;--sui-card:#05070c;--mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace}

/* type: the current font, extra light, everywhere */
html[data-path="venture"] body,html[data-path="venture"] button,html[data-path="venture"] input,html[data-path="venture"] textarea,
html[data-path="venture"] .hxf-bar,html[data-path="venture"] .hxf-l a,html[data-path="venture"] .hxm{font-family:var(--title)!important;font-weight:200!important}
html[data-path="venture"] .q h1,html[data-path="venture"] h2,html[data-path="venture"] h3,html[data-path="venture"] b,html[data-path="venture"] strong{font-weight:200!important}
html[data-path="venture"] .vs-sub,html[data-path="venture"] .vs-lead,html[data-path="venture"] .pp-card p{letter-spacing:.005em}

/* the room: black, the canvas columns scaled up hard-edged, a fine dot grid, heavier grain */
html[data-path="venture"] .room{background:#000!important}
html[data-path="venture"] .room .vs-canvas{image-rendering:pixelated;image-rendering:crisp-edges}
html[data-path="venture"] .room::after{opacity:.16!important}
html[data-path="venture"] .room::before{display:block!important;content:"";position:absolute;inset:0;z-index:1;pointer-events:none;filter:none;animation:none;opacity:1;
  background:radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1.3px) 0 0/22px 22px}

/* small labels: monospaced, uppercase, tracked */
html[data-path="venture"] .vs-rule span,html[data-path="venture"] .px-tx span,html[data-path="venture"] .vs-cue,html[data-path="venture"] .pp-nav button,
html[data-path="venture"] .pp-cta p{font-family:var(--mono)!important;font-weight:400!important;font-size:11px!important;letter-spacing:.12em!important;text-transform:uppercase}
html[data-path="venture"] .vs-rule span{color:rgba(220,232,255,.75)}
html[data-path="venture"] .vs-rule::before,html[data-path="venture"] .vs-rule::after{background:var(--sui-line)}

/* hard corners and thin dark rules on every component */
html[data-path="venture"] .hxf-bar,html[data-path="venture"] .hxf-menu,html[data-path="venture"] .hxf-cta,html[data-path="venture"] .vs-pill,html[data-path="venture"] .vs-news,
html[data-path="venture"] .vs-stage,html[data-path="venture"] .pp-card,html[data-path="venture"] .pp-film,html[data-path="venture"] .pp-nav button,html[data-path="venture"] .pp-cta,
html[data-path="venture"] .vs-pimgs img{border-radius:2px!important}
html[data-path="venture"] .hxf-bar{background:rgba(0,0,0,.82)!important;box-shadow:inset 0 0 0 1px var(--sui-line),0 18px 40px -24px #000!important}

/* buttons: Sui blue rectangles */
html[data-path="venture"] .vs-pill{background:var(--sui);color:#fff;letter-spacing:0}
html[data-path="venture"] .vs-pill:hover{background:#4a92ff}
html[data-path="venture"] .vs-news .vs-pill.dk{background:#000;color:#fff}
html[data-path="venture"] .vs-news .vs-pill.dk:hover{background:var(--sui)}
html[data-path="venture"] .vs-news{background:#fff;border-radius:2px}
html[data-path="venture"] .vs-news p{color:#000}

/* the Ask Humo bar: a black panel with a thin rule, square send in Sui blue, square tags */

/* the band: the lead's rule is blue; the film stage is square */
html[data-path="venture"] .vs-lead::before{background:var(--sui)}
html[data-path="venture"] .vs-ed{background:#000}

/* people, profit, planet: Sui data cards: black panel, thin rule, a blue square tile top right, monospaced tabs */
html[data-path="venture"] .pp-card{position:relative;background:var(--sui-card)!important;box-shadow:inset 0 0 0 1px var(--sui-line)!important}
html[data-path="venture"] .pp-mk{position:absolute;top:clamp(18px,1.8vw,28px);right:clamp(18px,1.8vw,28px);width:34px!important;height:34px!important;padding:7px;background:var(--sui);opacity:1;filter:brightness(0) invert(1);box-sizing:border-box}
html[data-path="venture"] .pp-mk{filter:none;background:var(--sui) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6'%3E%3Cpath d='M4 19h16M7 16V9m5 7V5m5 11v-5'/%3E%3C/svg%3E") center/18px no-repeat;object-position:-999px}
html[data-path="venture"] .pp-card h3{padding-right:52px}
html[data-path="venture"] .pp-film{border-radius:0!important}
html[data-path="venture"] .pp-film video{filter:grayscale(1) brightness(.85) contrast(1.05)}
html[data-path="venture"] .pp-nav button{background:transparent!important;box-shadow:inset 0 0 0 1px var(--sui-line)!important;color:rgba(220,232,255,.45)!important}
html[data-path="venture"] .pp-nav button.on{background:var(--sui)!important;color:#fff!important;box-shadow:none!important}
html[data-path="venture"] .pp-cta{background:var(--sui-card)!important;box-shadow:inset 0 0 0 1px var(--sui-line)!important}

/* photographs and films in a grey (was blue duotone, user 2026-10-25), as in the Sui imagery */
html[data-path="venture"] .px-img,html[data-path="venture"] .vs-pimgs img{filter:grayscale(1) brightness(.82) contrast(1.08)}
html[data-path="venture"] .vs-px::after{background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.1) 34%,rgba(0,0,0,.2) 60%,rgba(0,0,0,.88)),linear-gradient(90deg,rgba(0,0,0,.6),transparent 60%)!important}
html[data-path="venture"] .vs-rise{box-shadow:inset 0 0 0 1px rgba(111,168,255,.25)}

/* the scroll cue and the header's call to action in Sui blue */
html[data-path="venture"] .vs-cue b{background:var(--sui)}
html[data-path="venture"] .hxf-l a[aria-current]::before{background:var(--sui)}
/* the monospaced line beside Ask Humo was too wide for the column and cut the button off; the button stands alone */
html[data-path="venture"] .pp-cta p{display:none!important}
html[data-path="venture"] .pp-cta{padding:0!important;box-shadow:none!important;background:none!important}
html[data-path="venture"] .pp-cta .vs-pill{height:38px;padding:1px 18px 0}

/* ASK HUMO, ONE ANSWER AT A TIME (user, 2026-10-20, from a reference). The chat page is black glass; under its header a glass orb, the
   question small and quoted, and the answer large in the middle, each word rising out of a blur in turn (index.html wraps the words and
   sets the pace). The thread behind is softened below; the bar stays at the foot. In the Sui style: square corners, extra-light type. */
html[data-path="venture"] .humo-p{background:rgba(0,0,0,.88)!important;-webkit-backdrop-filter:blur(26px) saturate(1.1)!important;backdrop-filter:blur(26px) saturate(1.1)!important}
html[data-path="venture"] .humo-p header b,html[data-path="venture"] .humo-p header span{opacity:.6}
html[data-path="venture"] .humo-p header button{border-radius:2px!important}
html[data-path="venture"] .vs-focus{flex:none;display:flex;flex-direction:column;align-items:center;text-align:center;width:min(760px,100% - 40px);max-height:62svh;margin:0 auto;padding:clamp(6px,2svh,24px) 0 8px;overflow-y:auto;scrollbar-width:none}
html[data-path="venture"] .vs-focus::-webkit-scrollbar{display:none}
html[data-path="venture"] .vs-orb{position:relative;flex:none;width:clamp(72px,9svh,96px);aspect-ratio:1;margin:0 auto clamp(18px,3svh,28px);border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 34% 27%,rgba(255,255,255,.95) 0 3%,rgba(255,255,255,.28) 8%,transparent 20%),radial-gradient(circle at 50% 56%,rgba(120,170,255,.5),rgba(20,40,96,.62) 52%,rgba(4,7,18,.92) 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 -12px 26px rgba(111,168,255,.38),0 0 46px rgba(60,120,255,.32);animation:vsOrb 4s ease-in-out infinite}
html[data-path="venture"] .vs-orb i{position:absolute;inset:12%;border-radius:50%;mix-blend-mode:screen;filter:blur(5px);
  background:conic-gradient(from 0deg,transparent,rgba(190,215,255,.9),transparent 28%,rgba(111,168,255,.75),transparent 58%,rgba(255,255,255,.8),transparent 84%);animation:vsSpin 7s linear infinite}
html[data-path="venture"] .vs-orb b{position:absolute;inset:32%;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,rgba(200,225,255,.6) 26%,transparent 70%);filter:blur(2px);animation:vsBreath 3.2s ease-in-out infinite}
html[data-path="venture"] .vs-orb.talk{animation:vsTalk .8s ease-in-out infinite}
html[data-path="venture"] .vs-orb.talk i{animation-duration:1.5s}
@keyframes vsSpin{to{rotate:360deg}}
@keyframes vsBreath{0%,100%{scale:.85;opacity:.75}50%{scale:1.1;opacity:1}}
@keyframes vsOrb{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 -12px 26px rgba(111,168,255,.38),0 0 40px rgba(60,120,255,.26)}50%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),inset 0 -12px 30px rgba(111,168,255,.5),0 0 60px rgba(60,120,255,.42)}}
@keyframes vsTalk{0%,100%{scale:1}50%{scale:1.05}}
html[data-path="venture"] .vs-fq{max-width:46ch;margin:0 0 clamp(10px,1.8svh,16px);font-size:14px;line-height:1.45;color:rgba(220,232,255,.55)}
html[data-path="venture"] .vs-fa{max-width:30ch;font-family:var(--title);font-weight:200;font-size:clamp(22px,min(2.4vw,4.2svh),34px);line-height:1.26;letter-spacing:-.012em;color:#fff}
html[data-path="venture"] .vs-fa b{font-weight:200}
html[data-path="venture"] .vs-fa a{color:var(--sui-l);text-decoration:underline;text-underline-offset:3px}
html[data-path="venture"] .vs-fa .gc-n{display:block;margin-top:10px;font-size:15px;line-height:1.45;color:rgba(220,232,255,.55)}
html[data-path="venture"] .vs-fa .gc-sum{max-width:520px;margin:16px auto 0;font-size:14px;line-height:1.4;text-align:left;letter-spacing:0}
html[data-path="venture"] .vs-fa .gc-sum li{border-top-color:#1b2130}
html[data-path="venture"] .vs-fa .w{display:inline-block}
html[data-path="venture"] .vs-focus.say .vs-fa .w{animation:vsWord .75s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * var(--step,45ms))}
html[data-path="venture"] .vs-focus.say .vs-fq{animation:vsWord .6s ease both}
@keyframes vsWord{from{opacity:0;filter:blur(8px);transform:translateY(.22em)}60%{opacity:.55}to{opacity:1;filter:blur(0);transform:none}}
/* the thread behind: the current exchange lives in the focus view; what came before is softened below it */
html[data-path="venture"] .humo-p .m.vs-cur{display:none}
html[data-path="venture"] .humo-p .th{filter:blur(7px);opacity:.32;pointer-events:none;-webkit-mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
html[data-path="venture"] .humo-p .th-in{justify-content:flex-start}
html[data-path="venture"] .humo-p .c button{border-radius:2px!important;font-family:var(--mono)!important;font-size:11px!important;letter-spacing:.1em!important;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){ html[data-path="venture"] .vs-focus.say .vs-fa .w,html[data-path="venture"] .vs-focus.say .vs-fq,html[data-path="venture"] .vs-orb,html[data-path="venture"] .vs-orb i,html[data-path="venture"] .vs-orb b{animation:none!important} }
/* the frame is hidden until you scroll (user, 2026-10-20: "this only appears on scroll"): at rest it is closed at the foot of the window */
html[data-path="venture"] .vs-rise{opacity:0;clip-path:inset(100% 30% 0% 30% round 2px)}
@media (max-width:900px){ html[data-path="venture"] .vs-rise{clip-path:inset(100% 14% 0% 14% round 2px)} }
@media (prefers-reduced-motion:reduce){ html[data-path="venture"] .vs-rise{display:none!important} }
/* ASK HUMO AS A GLASS BUBBLE (user, 2026-10-20: "this is stunning this style for ask humo button", the EQUA app on Behance: a clear
   soap-glass sphere, silver rim, a bright fleck of light at the top left, frost gathering at the foot, fine sparkles drifting inside).
   Kept as simple as EQUA: monochrome, no coloured edge, no shimmer. The buttons are glass capsules holding a small bubble; the chat's
   orb is the large bubble with the wordmark inside. */
html[data-path="venture"] .hxf-cta.hxf-cta,html[data-path="venture"] .vs-pill.vs-ai{position:relative;gap:10px!important;padding-left:6px!important;border:0!important;border-radius:999px!important;color:#fff!important;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 140% at 50% 120%,rgba(255,255,255,.16),transparent 55%),linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02) 46%,rgba(255,255,255,.05))!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -8px 16px -10px rgba(255,255,255,.4),0 10px 30px -14px rgba(0,0,0,.9)!important;
  animation:none!important;transition:box-shadow .3s ease,translate .3s ease}
html[data-path="venture"] .hxf-cta.hxf-cta:hover,html[data-path="venture"] .vs-pill.vs-ai:hover{translate:0 -1px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -8px 18px -9px rgba(255,255,255,.55),0 0 28px -6px rgba(255,255,255,.22)!important}
html[data-path="venture"] .hxf-cta.hxf-cta span,html[data-path="venture"] .vs-pill.vs-ai span{background:none!important;-webkit-text-fill-color:#fff!important;color:#fff;animation:none!important;letter-spacing:.005em}
/* the small bubble that sits at the start of each button, as EQUA's centre tab */
html[data-path="venture"] .hxf-cta .hxf-orb,html[data-path="venture"] .vs-pill.vs-ai .hxf-orb{width:26px!important;height:26px!important;border-radius:50%;filter:none;animation:vsBob 4s ease-in-out infinite!important;
  background:radial-gradient(circle at 32% 26%,#fff 0 6%,rgba(255,255,255,.35) 12%,transparent 26%),radial-gradient(circle at 50% 108%,rgba(255,255,255,.55),transparent 52%),
    radial-gradient(circle at 50% 50%,rgba(20,22,28,.15) 40%,rgba(255,255,255,.1) 64%,rgba(255,255,255,.4) 71%,transparent 73%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 0 8px rgba(255,255,255,.2),0 0 12px rgba(255,255,255,.18)!important}
html[data-path="venture"] .hxf-cta .hxf-orb::after,html[data-path="venture"] .vs-pill.vs-ai .hxf-orb::after{display:block!important;content:"";position:absolute;inset:0;border:0!important;border-radius:50%;transform:none;opacity:.8;animation:vsGlint 5s ease-in-out infinite!important;
  background:radial-gradient(circle at 36% 58%,#fff 0 .5px,transparent 1px),radial-gradient(circle at 60% 40%,#fff 0 .6px,transparent 1.1px),radial-gradient(circle at 66% 70%,#fff 0 .4px,transparent .9px),radial-gradient(circle at 48% 78%,#fff 0 .4px,transparent .9px)}
html[data-path="venture"] .pp-cta .vs-pill.vs-ai .hxf-orb{width:24px!important;height:24px!important}
@media (max-width:900px){ html[data-path="venture"] .hxf-cta .hxf-orb,html[data-path="venture"] .vs-pill.vs-ai .hxf-orb{width:22px!important;height:22px!important} html[data-path="venture"] .hxf-cta.hxf-cta,html[data-path="venture"] .vs-pill.vs-ai{padding-left:5px!important;gap:8px!important} }
/* the chat's orb: the large bubble, the wordmark floating in it */
html[data-path="venture"] .vs-orb{width:clamp(120px,19svh,190px);overflow:visible;animation:vsBob 5s ease-in-out infinite;
  background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.95) 0 2.5%,rgba(255,255,255,.3) 6%,transparent 15%),
    radial-gradient(circle at 50% 104%,rgba(255,255,255,.5),rgba(255,255,255,.12) 30%,transparent 50%),
    radial-gradient(circle at 50% 50%,rgba(14,16,22,.2) 46%,rgba(255,255,255,.06) 62%,rgba(255,255,255,.32) 70.5%,transparent 71.5%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 0 26px rgba(255,255,255,.16),inset 14px -22px 40px -18px rgba(255,255,255,.35),0 0 60px -10px rgba(255,255,255,.14)}
html[data-path="venture"] .vs-orb i{inset:0;mix-blend-mode:normal;filter:none;opacity:.8;animation:vsGlint 7s ease-in-out infinite;
  background:radial-gradient(circle at 26% 40%,#fff 0 .8px,transparent 1.6px),radial-gradient(circle at 40% 66%,#fff 0 .6px,transparent 1.4px),radial-gradient(circle at 58% 30%,#fff 0 1px,transparent 1.8px),
    radial-gradient(circle at 70% 58%,#fff 0 .6px,transparent 1.4px),radial-gradient(circle at 64% 78%,#fff 0 .8px,transparent 1.6px),radial-gradient(circle at 34% 24%,#fff 0 .5px,transparent 1.2px),
    radial-gradient(circle at 78% 40%,#fff 0 .5px,transparent 1.2px),radial-gradient(circle at 48% 86%,#fff 0 .7px,transparent 1.5px)}
html[data-path="venture"] .vs-orb b{inset:0;display:grid;place-items:center;background:none;filter:none;animation:none;font:500 clamp(13px,1.9svh,17px)/1 var(--mono);letter-spacing:.32em;text-indent:.32em;color:#fff;text-shadow:0 0 12px rgba(255,255,255,.5)}
html[data-path="venture"] .vs-orb b::before{content:"HUMO"}
html[data-path="venture"] .vs-orb.talk{animation:vsBob 5s ease-in-out infinite,vsTalk .9s ease-in-out infinite}
@keyframes vsGlint{0%,100%{opacity:.35;transform:translateY(1px)}50%{opacity:.9;transform:translateY(-1px)}}
@keyframes vsBob{0%,100%{translate:0 0}50%{translate:0 -3px}}
@media (prefers-reduced-motion:reduce){ html[data-path="venture"] .hxf-orb,html[data-path="venture"] .hxf-orb::after,html[data-path="venture"] .vs-orb,html[data-path="venture"] .vs-orb i{animation:none!important} }
/* the hero's text bar as frozen glass (user, 2026-10-20: "make the text bar frozen glass"): a heavy frost over the light behind, a pale
   milky tint, a bright rim with a sheen along the top and frost gathering at the foot, in the same family as the Ask Humo bubbles */
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb{position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 125%,rgba(255,255,255,.16),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05) 40%,rgba(255,255,255,.08))!important;
  -webkit-backdrop-filter:blur(30px) saturate(1.5) brightness(1.08)!important;backdrop-filter:blur(30px) saturate(1.5) brightness(1.08)!important;
  border:0!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -14px 26px -18px rgba(255,255,255,.5),0 24px 50px -28px rgba(0,0,0,.95)!important}
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.35;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb > *{position:relative}
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb-chips button:not(.go){background:rgba(255,255,255,.08)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)!important}
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb-b:not(.send){background:rgba(255,255,255,.06)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)!important}
/* the hero sits at the centre of the window, and the bar is symmetrical (user, 2026-10-20: "place this central and symetrically
   positioned ... make the tags smaller"): the title, line and bar centre as one block; the prompt is centred; the plus and send sit at
   equal ends with the three smaller tags centred between them */
@media (min-width:901px){ html[data-path="venture"] .vs-hs .vs-hero{justify-content:center!important;padding-top:0!important;padding-bottom:0!important} }
html[data-path="venture"] .vs-hs .vs-hero .p-close{display:flex;justify-content:center}
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb{width:min(540px,100%);padding:12px 10px 10px!important}
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb-in{display:flex;justify-content:center;width:100%;text-align:center}
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb-bar .pb-chips{flex:1 1 0;justify-content:center;align-items:center;gap:6px}
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb-chips button{height:auto!important;min-height:0!important;align-self:center;padding:6px 11px!important;font-size:12px!important;line-height:1.2!important;border-radius:999px!important}
@media (max-width:900px){ html[data-path="venture"] .vs-hs .vs-hero .p-close .pb-bar .pb-chips{flex-wrap:nowrap} html[data-path="venture"] .vs-hs .vs-hero .p-close .pb-chips button{padding:6px 9px!important;font-size:11px!important;white-space:nowrap} }
/* the tags sit beside the plus, left, at its height (user, 2026-10-20: "the tags are too large place them to the left of the plus on the
   same height level"): plus and tags share one 26px line, smaller type */
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb-bar{align-items:center;gap:6px}
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb-bar .pb-chips{justify-content:flex-start!important;gap:5px!important;flex-wrap:nowrap}
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb-bar .pb-b:not(.send){width:26px!important;height:26px!important;flex:none}
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb-bar .pb-b:not(.send) svg{width:12px;height:12px}
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb-chips button{height:26px!important;padding:0 10px!important;font-size:11.5px!important;line-height:26px!important;white-space:nowrap}
@media (max-width:900px){ html[data-path="venture"] .vs-hs .vs-hero .p-close .pb-bar .pb-b:not(.send){display:grid!important;place-items:center}
  html[data-path="venture"] .vs-hs .vs-hero .p-close .pb-chips button{padding:0 8px!important;font-size:10.5px!important} }
/* the chat space reads from the left and keeps two lines of room (user, 2026-10-20: "leave two line spaces for the chat space starting
   from the left") */
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb{padding:14px 12px 10px 16px!important}
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb-in{justify-content:flex-start!important;align-items:flex-start!important;text-align:left!important;min-height:3em!important;font-size:14.5px;line-height:1.5!important}
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb-bar{margin-top:6px!important}
/* BLACK FROZEN GLASS (user, 2026-10-20: "the background on ask humo should be black frozen glass"): the hero bar and the Ask Humo panel
   are smoked glass, a heavy frost over the light behind, tinted near black, with fine grain, a thin bright rim and a sheen on the top edge */
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb{
  background:radial-gradient(120% 90% at 50% 130%,rgba(255,255,255,.07),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 40%),rgba(6,8,12,.5)!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.4)!important;backdrop-filter:blur(28px) saturate(1.4)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.34),inset 0 -14px 26px -20px rgba(255,255,255,.3),0 24px 50px -28px #000!important}
html[data-path="venture"] .vs-hs .vs-hero .p-close .pb::before{opacity:.22}
html[data-path="venture"] .humo-p{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 30%),rgba(4,6,10,.62)!important;
  -webkit-backdrop-filter:blur(40px) saturate(1.4)!important;backdrop-filter:blur(40px) saturate(1.4)!important;
  border:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important}
html[data-path="venture"] .humo-p .gc-f{background:rgba(6,8,12,.55)!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:0!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.3)!important}
/* the pointer stays visible over the bar (user, 2026-10-20: "the mouse should also be visable on the text"): the page's circle cursor
   steps aside there, and the real one shows, a text beam over the prompt and a hand over the tags and buttons */
@media (hover:hover) and (pointer:fine){
  html[data-path="venture"] .vs-hero .p-close .pb-in{cursor:text!important}
  html[data-path="venture"] .vs-hero .p-close .pb,html[data-path="venture"] .vs-hero .p-close .pb button:not(.pb-in){cursor:pointer!important}
  html[data-path="venture"]:has(.vs-hero .p-close .pb:hover) .ptr{opacity:0!important;visibility:hidden} }
/* the band without its film (deleted, user 2026-10-20): it is only as tall as its words, with room after them before the next divider */
html[data-path="venture"] .vs-ed{min-height:0!important;padding-bottom:clamp(64px,12svh,140px)}
/* THE THREE CARDS UNDER THE BAND: a duotone photograph, a number, the name, a line and "Ask Humo"; hard corners and thin dark rules as
   the rest of the Sui pass; three across, one column on phones. The band is a full window again, the cards filling where the film was. */
html[data-path="venture"] .vs-ed{min-height:var(--vh)!important}
html[data-path="venture"] .vs-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:clamp(36px,6svh,64px)}
html[data-path="venture"] .vs-card{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:0 0 18px;border:0;border-radius:2px;text-align:left;font:inherit;color:#fff;cursor:pointer;
  background:#05070b;box-shadow:inset 0 0 0 1px var(--sui-line);overflow:hidden;transition:box-shadow .35s ease,translate .35s ease}
html[data-path="venture"] .vs-card:hover,html[data-path="venture"] .vs-card:focus-visible{translate:0 -3px;outline:0;box-shadow:inset 0 0 0 1px rgba(111,168,255,.55),0 24px 50px -30px rgba(43,127,255,.6)}
html[data-path="venture"] .vc-img{display:block;width:100%;aspect-ratio:16/10;background-size:cover;background-position:50% 50%;filter:grayscale(1) brightness(.8) contrast(1.08);transition:filter .5s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
html[data-path="venture"] .vs-card:hover .vc-img{filter:grayscale(1) brightness(.95) contrast(1.08)}
html[data-path="venture"] .vc-k{margin:16px 18px 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--sui-l)}
html[data-path="venture"] .vs-card h3{margin:8px 18px 0;font-family:var(--title);font-weight:200;font-size:clamp(20px,1.7vw,26px);line-height:1.15;letter-spacing:-.015em}
html[data-path="venture"] .vs-card p{margin:8px 18px 0;font-size:14px;line-height:1.5;color:rgba(220,232,255,.62)}
html[data-path="venture"] .vc-go{margin:auto 18px 0;padding-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(220,232,255,.5);transition:color .3s}
html[data-path="venture"] .vs-card:hover .vc-go{color:#fff}
@media (max-width:900px){ html[data-path="venture"] .vs-cards{grid-template-columns:minmax(0,1fr);margin-top:28px} }
/* the band shows the page canvas, the blue columns and dot grid, instead of solid black (user, 2026-10-20) */
html[data-path="venture"] .vs-ed{background:transparent!important}
/* Ask Humo lives only in the header and on the cards (user, 2026-10-20): no section pills, and no floating button */
html[data-path="venture"] .humo-b{display:none!important}
html[data-path="venture"] .vs-band{grid-template-areas:". ." "head lead"}
@media (max-width:900px){ html[data-path="venture"] .vs-band{grid-template-areas:"head" "lead"} }
/* larger reading text in the band (user, 2026-10-20: "this text also needs to be larger"): the lead beside the headline and the card lines */
html[data-path="venture"] .vs-lead{font-size:clamp(17px,1.5vw,23px)!important;line-height:1.5!important;max-width:34ch}
html[data-path="venture"] .vs-card p{font-size:clamp(15px,1.1vw,17px)}
@media (max-width:900px){ html[data-path="venture"] .vs-lead{font-size:17px!important} }

/* ============================================================================================================================
   FIT EVERY SECTION TO THE SCREEN (user, 2026-10-20: "ensure text and sizing are correctly positioned and correct for all screen sizes
   and not overwhelming and all visible on viewport each section, also optimised well for mobile"). Sizes follow the window's height
   as well as its width, so a short laptop shows a whole section at once; on phones the cards turn compact and the empty dock strip
   at the foot is gone (the header holds Menu and Ask Humo).
   ============================================================================================================================ */
/* the band: headline, lead and three cards inside one window */
html[data-path="venture"] .vs-ed > .vs-rule{margin-top:clamp(84px,12svh,116px)}
html[data-path="venture"] .vs-ed > .vs-rule + .vs-band{padding-top:clamp(16px,3.4svh,44px)}
html[data-path="venture"] .vs-head{font-size:clamp(34px,min(4.6vw,7.2svh),74px)}
html[data-path="venture"] .vs-lead{font-size:clamp(16px,min(1.5vw,2.8svh),22px)!important}
html[data-path="venture"] .vs-cards{margin-top:clamp(22px,4.4svh,60px)}
html[data-path="venture"] .vc-img{aspect-ratio:auto;height:clamp(96px,20svh,230px)}
html[data-path="venture"] .vs-card h3{font-size:clamp(18px,min(1.6vw,3svh),25px)}
html[data-path="venture"] .vs-card p{font-size:clamp(14px,min(1.05vw,2svh),16px)}
html[data-path="venture"] .vc-k{margin-top:clamp(10px,1.8svh,16px)}
html[data-path="venture"] .vc-go{padding-top:clamp(10px,1.8svh,16px)}
html[data-path="venture"] .vs-ed{padding-bottom:clamp(40px,8svh,120px)}
/* people, profit, planet: each card, film included, fits the window */
html[data-path="venture"] .pp-film{aspect-ratio:auto!important;height:clamp(140px,30svh,330px)}
html[data-path="venture"] .pp-card{gap:clamp(10px,1.8svh,18px)!important;padding:clamp(16px,min(2vw,3svh),32px)!important}
/* the specialists panel: its words clear the foot of the window */
html[data-path="venture"] .px-tx{bottom:clamp(40px,9svh,100px)}

@media (max-width:900px){
  /* no dock on these pages: the header carries Menu and Ask Humo */
  html[data-path="venture"]{--mbar:env(safe-area-inset-bottom,0px)!important}
  html[data-path="venture"] .m-bot{display:none!important}
  html[data-path="venture"] .m-cue{bottom:calc(env(safe-area-inset-bottom,0px) + 14px)!important}
  /* band */
  html[data-path="venture"] .vs-ed > .vs-rule{margin-top:72px}
  html[data-path="venture"] .vs-head{font-size:clamp(30px,9vw,40px)}
  html[data-path="venture"] .vs-lead{font-size:16px!important;line-height:1.5!important}
  /* the three cards turn compact: a square photograph beside the words, so all three fit one screen */
  html[data-path="venture"] .vs-cards{gap:10px;margin-top:26px}
  html[data-path="venture"] .vs-card{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:14px;padding:0;min-height:118px}
  html[data-path="venture"] .vc-img{grid-row:1 / 4;height:100%;min-height:118px}
  html[data-path="venture"] .vc-k{margin:12px 12px 0 0}
  html[data-path="venture"] .vs-card h3{margin:4px 12px 0 0;font-size:18px}
  html[data-path="venture"] .vs-card p{margin:4px 12px 12px 0;font-size:13.5px;line-height:1.4}
  html[data-path="venture"] .vc-go{display:none}
  /* people, profit, planet */
  html[data-path="venture"] .pp-film{height:clamp(130px,24svh,200px)}
  html[data-path="venture"] .pp-card h3{font-size:17px}
  html[data-path="venture"] .pp-card p{font-size:14px}
  /* specialists */
  html[data-path="venture"] .vs-px{height:72svh;min-height:360px}
  html[data-path="venture"] .px-tx{bottom:40px}
}

/* A CALMER SCALE, ROOM TO BREATHE (user, 2026-10-21: "text way too large, let the design breathe"): headlines a size or two down, the
   lead at reading size in a softer tone with a narrower measure, and more space between the parts */
html[data-path="venture"] .vs-head{font-size:clamp(28px,min(3vw,5svh),48px)!important;line-height:1.08}
html[data-path="venture"] .vs-lead{font-size:clamp(14.5px,min(1.05vw,2svh),16.5px)!important;line-height:1.65!important;max-width:38ch;color:rgba(220,232,255,.62)}
html[data-path="venture"] .vs-band{row-gap:clamp(24px,4svh,48px)}
html[data-path="venture"] .vs-cards{margin-top:clamp(40px,7svh,88px)}
html[data-path="venture"] .vs-card h3{font-size:clamp(17px,min(1.3vw,2.4svh),21px)}
html[data-path="venture"] .vs-card p{font-size:14px;line-height:1.55}
html[data-path="venture"] .pp-l h2{font-size:clamp(24px,min(2.4vw,4.2svh),38px)!important}
html[data-path="venture"] .px-tx h2{font-size:clamp(28px,min(3.4vw,6svh),54px)!important}
html[data-path="venture"].at0 .vs-hs .vs-hero .q h1{font-size:clamp(36px,min(5vw,8svh),80px)!important}
@media (max-width:900px){
  html[data-path="venture"] .vs-head{font-size:clamp(26px,7.6vw,32px)!important}
  html[data-path="venture"] .vs-lead{font-size:15px!important}
  html[data-path="venture"] .px-tx h2{font-size:clamp(24px,7vw,30px)!important}
  html[data-path="venture"].at0 .vs-hs .vs-hero .q h1{font-size:clamp(32px,9vw,42px)!important}
}

/* Ask Humo as a rectangle (user, 2026-10-21: "the ask humo button make it a rectangle button"): the same glass, hard 2px corners, the
   orb kept round inside it, the label given even padding on both sides */
html[data-path="venture"] .hxf-cta.hxf-cta{border-radius:2px!important;padding:0 14px 0 8px!important}
html[data-path="venture"] .hxf-cta .hxf-orb{width:20px!important;height:20px!important}
@media (max-width:900px){ html[data-path="venture"] .hxf-cta.hxf-cta{padding:0 12px 0 7px!important} html[data-path="venture"] .hxf-cta .hxf-orb{width:18px!important;height:18px!important} }

/* MENU AS A DETACHED SQUARE (user, 2026-10-21: "make the menu on the header detached square next to the header same colour"): the bar
   ends a square and a gap earlier; the Menu button sits in that space as its own square, the bar's height, in the bar's black glass */
html[data-path="venture"]{--hxsq:calc(53.5 * var(--hu));--hxgap:calc(8 * var(--hu))}
html[data-path="venture"] .hxf-bar{right:calc(var(--hbx) + var(--hxsq) + var(--hxgap))!important;overflow:visible!important}
html[data-path="venture"] .hxf-bar .hxf-menu{position:absolute;top:0;right:calc((var(--hxsq) + var(--hxgap)) * -1);width:var(--hxsq)!important;height:var(--hxsq)!important;border-radius:2px!important;
  background:rgba(0,0,0,.82)!important;-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);
  box-shadow:inset 0 0 0 1px var(--sui-line,var(--sg-line)),0 18px 40px -24px #000!important}
html[data-path="venture"] .hxf-bar .hxf-menu:hover{background:rgba(18,18,18,.9)!important}
@media (max-width:900px){ html[data-path="venture"]{--hxsq:52px;--hxgap:6px}
  html[data-path="venture"] .hxf-bar{right:calc(12px + var(--hxsq) + var(--hxgap))!important} }
/* a narrower header (user, 2026-10-21: "narrow the header more"): bar and square together span about 960 design units, centred */
@media (min-width:901px){ html[data-path="venture"]{--hbx:max(var(--hfx1),calc((100vw - 960 * var(--hu)) / 2))!important} html[data-path="venture"] .hxf-l{gap:calc(26 * var(--hu))!important} }
/* no pathway links on the bar (user, 2026-10-21: "remove menu items as the menu holds the items"): the lockup on the left, Ask Humo on
   the right, Menu in its square; with the middle gone the header is narrower again */
html[data-path="venture"] .hxf-l{display:none!important}
html[data-path="venture"] .hxf-bar{grid-template-columns:1fr auto!important}
@media (min-width:901px){ html[data-path="venture"]{--hbx:max(var(--hfx1),calc((100vw - 720 * var(--hu)) / 2))!important} }

/* ============================================================================================================================
   PHONE, AS AN INSTALLED APP (user, 2026-10-21: "on mobile ensure that components are correctly positioned like a progressive web app
   and behave like one ... some components are not symmetrically in the right position, like the landing page"). One 18px gutter for
   the header and the content, the opening screen centred top to bottom and side to side, tags that scroll inside the bar instead of
   being cut by the send button, and app-like touch: no tap flash, no double-tap zoom delay, no rubber-band bounce, no text resizing,
   a press state on every button, and room for the notch and the home indicator.
   ============================================================================================================================ */
@media (max-width:900px){
  html[data-path="venture"]{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
  html[data-path="venture"] body{overscroll-behavior:none}
  html[data-path="venture"] button,html[data-path="venture"] a,html[data-path="venture"] [role=button]{touch-action:manipulation;-webkit-user-select:none;user-select:none}
  html[data-path="venture"] button:active,html[data-path="venture"] a:active{transform:scale(.97);transition:transform .08s}
  html[data-path="venture"] .screen{overscroll-behavior-y:contain}
  /* the header on the same gutter as the page, below the notch */
  html[data-path="venture"] .hxf-bar{left:18px!important;right:calc(18px + var(--hxsq) + var(--hxgap))!important;top:calc(10px + env(safe-area-inset-top,0px))!important;padding:0 7px 0 14px!important}
  html[data-path="venture"]{--hxsq:48px;--hxgap:6px}
  html[data-path="venture"] .hxf-bar{height:48px!important}
  /* Ask Humo bars: the tags scroll sideways inside the bar; the send button is smaller and always whole */
  html[data-path="venture"] .p-close .pb-bar .pb-chips{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)!important;mask-image:linear-gradient(90deg,#000 88%,transparent)!important;padding-right:10px}
  html[data-path="venture"] .p-close .pb-bar .pb-chips::-webkit-scrollbar{display:none}
  html[data-path="venture"] .p-close .pb-chips button{flex:none}
  html[data-path="venture"] .p-close .pb-b.send{width:38px!important;height:38px!important;flex:none}
  html[data-path="venture"] .p-close .pb{width:100%!important}
}
@media (max-width:900px){
  /* the opening screen: title and bar centred in the window (they sat in the top third) */
  html[data-path="venture"] .vs-hs .vs-hero{justify-content:center!important;padding:calc(68px + env(safe-area-inset-top,0px)) 18px calc(56px + env(safe-area-inset-bottom,0px))!important}
  html[data-path="venture"] .vs-hs .vs-hero .p-close{width:100%}
}
@media (max-width:900px){ html[data-path="venture"] .p-close .pb-chips button.go{order:-1} }   /* the main action leads the tags on phones */

/* ASK HUMO RIBBON (phones): attached to the bottom edge at the centre, rounded on top, black frozen glass with a thin bright rim, a small
   grab handle above the label; it rises a little when pressed. The header keeps only the lockup and Menu on phones. */
html[data-path="venture"] .hx-ribbon{display:none}
@media (max-width:900px){
  html[data-path="venture"] .hxf-cta{display:none!important}
  html[data-path="venture"] .hxf-bar{grid-template-columns:1fr!important}
  html[data-path="venture"] .hx-ribbon{position:fixed;left:50%;bottom:0;z-index:160;display:flex;flex-direction:column;align-items:center;gap:6px;translate:-50% 0;
    min-width:150px;padding:8px 22px calc(12px + env(safe-area-inset-bottom,0px));border:0;border-radius:20px 20px 0 0;cursor:pointer;color:#fff;font:inherit;
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 50%),rgba(4,5,8,.72);-webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 1px 0 0 rgba(255,255,255,.12),inset -1px 0 0 rgba(255,255,255,.12),0 -14px 40px -18px rgba(0,0,0,.9);
    transition:translate .35s cubic-bezier(.2,.7,.2,1),opacity .3s}
  html[data-path="venture"] .hx-ribbon:active{transform:none;translate:-50% -3px}
  html[data-path="venture"] .hx-grab{width:34px;height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
  html[data-path="venture"] .hx-rb{display:flex;align-items:center;gap:9px;font-size:15px;letter-spacing:.005em}
  html[data-path="venture"] .hx-rb .hxf-orb{width:20px!important;height:20px!important}
  html[data-path="venture"].humo-full .hx-ribbon{translate:-50% 110%;opacity:0;pointer-events:none}
  html[data-path="venture"] .m-cue{display:none!important}
}
@media (max-width:900px){ html[data-path="venture"] .hx-rb .hxf-orb{border-radius:50%;filter:none;animation:none!important;
  background:radial-gradient(circle at 32% 26%,#fff 0 6%,rgba(255,255,255,.35) 12%,transparent 26%),radial-gradient(circle at 50% 108%,rgba(255,255,255,.55),transparent 52%),radial-gradient(circle at 50% 50%,rgba(20,22,28,.15) 40%,rgba(255,255,255,.1) 64%,rgba(255,255,255,.4) 71%,transparent 73%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 0 12px rgba(255,255,255,.18)!important}
  html[data-path="venture"] .hx-rb .hxf-orb::after{display:none!important} }
@media (max-width:900px){ html[data-path="venture"] .hxf-bar{grid-template-columns:1fr auto!important} }   /* the lockup stays centred in the bar */
/* HOW WE MEASURE AS A STACK (user, 2026-10-21: "how we measure cards on mobile make them a stack scroll"): on phones each card sticks
   under the header as you scroll and the next slides up over it, a few pixels lower, so they pile into a deck */
@media (max-width:900px){
  html[data-path="venture"] .pp-r{display:block!important;overflow:visible!important;padding-bottom:24px}
  html[data-path="venture"] .pp-card{position:sticky!important;top:calc(76px + env(safe-area-inset-top,0px));margin:0 0 22px!important;opacity:1!important;translate:none!important;
    box-shadow:inset 0 0 0 1px var(--sui-line),0 -18px 40px -12px rgba(0,0,0,.95)!important}
  html[data-path="venture"] .pp-card:nth-child(2){top:calc(88px + env(safe-area-inset-top,0px))}
  html[data-path="venture"] .pp-card:nth-child(3){top:calc(100px + env(safe-area-inset-top,0px))}
  html[data-path="venture"] .vs-ppp,html[data-path="venture"] .sys{overflow:visible!important}
}
@media (max-width:900px){ html[data-path="venture"] .pp-r{padding-bottom:34svh!important} }   /* the deck holds a moment once all three are stacked */

/* STUDIO PATTERNS: facts row, three steps, fields, closing call (user, 2026-10-21). Sui language: thin dark rules, monospaced labels,
   extra-light type, blue used only for numbers and the one primary action. */
html[data-path="venture"] .vs-facts,html[data-path="venture"] .vs-steps,html[data-path="venture"] .vs-fields,html[data-path="venture"] .vs-close{width:100%;text-align:left}
html[data-path="venture"] .vs-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(48px,9svh,110px) 0 0;box-shadow:inset 0 1px 0 var(--sui-line),inset 0 -1px 0 var(--sui-line)}
html[data-path="venture"] .vs-facts > div{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,4svh,40px) clamp(14px,1.6vw,26px)}
html[data-path="venture"] .vs-facts > div + div{box-shadow:inset 1px 0 0 var(--sui-line)}
html[data-path="venture"] .vs-facts b{font-family:var(--title);font-weight:200;font-size:clamp(24px,min(2.4vw,4.4svh),38px);line-height:1;letter-spacing:-.02em;color:#fff}
html[data-path="venture"] .vs-facts span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(220,232,255,.5)}
html[data-path="venture"] .vs-steps,html[data-path="venture"] .vs-fields,html[data-path="venture"] .vs-close{padding:clamp(28px,5svh,56px) 0 clamp(48px,9svh,110px)}
html[data-path="venture"] .vs-steps h2,html[data-path="venture"] .vs-fields h2,html[data-path="venture"] .vs-close h2{margin:0;font-family:var(--title);font-weight:200;font-size:clamp(24px,min(2.4vw,4.2svh),38px);line-height:1.1;letter-spacing:-.02em;color:#fff}
html[data-path="venture"] .vs-steps h2 em,html[data-path="venture"] .vs-fields h2 em,html[data-path="venture"] .vs-close h2 em{font-style:normal;color:var(--sui-l)}
html[data-path="venture"] .vs-steps ol{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin:clamp(24px,4.4svh,48px) 0 0;padding:0}
html[data-path="venture"] .vs-steps li{padding:clamp(18px,3svh,28px) clamp(16px,1.6vw,24px);background:var(--sui-card);box-shadow:inset 0 0 0 1px var(--sui-line);border-radius:2px}
html[data-path="venture"] .vs-steps small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--sui-l)}
html[data-path="venture"] .vs-steps h3{margin:clamp(14px,3svh,32px) 0 8px;font-family:var(--title);font-weight:200;font-size:clamp(17px,min(1.3vw,2.4svh),21px);color:#fff}
html[data-path="venture"] .vs-steps p{margin:0;font-size:14px;line-height:1.55;color:rgba(220,232,255,.62)}
html[data-path="venture"] .vs-fields ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:clamp(20px,3.6svh,36px) 0 0;padding:0;max-width:900px}
html[data-path="venture"] .vs-fields li{padding:9px 14px;font-size:14px;color:rgba(220,232,255,.8);box-shadow:inset 0 0 0 1px var(--sui-line);background:rgba(5,7,12,.6);border-radius:2px}
html[data-path="venture"] .vs-close{text-align:center;padding-top:clamp(80px,14svh,160px);padding-bottom:clamp(90px,16svh,180px)}
html[data-path="venture"] .vs-close h2{font-size:clamp(30px,min(3.6vw,6.4svh),56px)}
html[data-path="venture"] .vs-close p{margin:16px auto 0;max-width:46ch;font-size:15px;line-height:1.6;color:rgba(220,232,255,.62)}
html[data-path="venture"] .vs-close a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
html[data-path="venture"] .vs-close-b{display:flex;justify-content:center;gap:10px;margin-top:28px}
html[data-path="venture"] .vs-btn{height:42px;padding:0 20px;border:0;border-radius:2px;font:inherit;font-size:14px;color:#fff;cursor:pointer;background:var(--sui);transition:background .25s}
html[data-path="venture"] .vs-btn:hover{background:#4a92ff}
html[data-path="venture"] .vs-btn.ghost{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
html[data-path="venture"] .vs-btn.ghost:hover{background:rgba(255,255,255,.1)}
@media (max-width:900px){
  html[data-path="venture"] .vs-facts{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:48px}
  html[data-path="venture"] .vs-facts > div:nth-child(3){box-shadow:inset 0 1px 0 var(--sui-line)}
  html[data-path="venture"] .vs-facts > div:nth-child(4){box-shadow:inset 1px 0 0 var(--sui-line),inset 0 1px 0 var(--sui-line)}
  html[data-path="venture"] .vs-facts > div{padding:20px 14px}
  html[data-path="venture"] .vs-facts b{font-size:22px}
  html[data-path="venture"] .vs-facts span{font-size:10px}
  html[data-path="venture"] .vs-steps ol{grid-template-columns:minmax(0,1fr);gap:10px}
  html[data-path="venture"] .vs-steps h3{margin-top:10px}
  html[data-path="venture"] .vs-fields li{font-size:13px;padding:8px 12px}
  html[data-path="venture"] .vs-close{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
  html[data-path="venture"] .vs-close h2{font-size:30px}
  html[data-path="venture"] .vs-close-b .vs-btn{flex:1}
  /* the card actions show on phones too, now that each one says what it does */
  html[data-path="venture"] .vc-go{display:block!important;grid-column:2;margin:0 12px 12px 0;padding-top:0}
}
/* the ribbon without its handle line (user, 2026-10-21: "remove the line on the ask humo ribbon"); the chat's header reads only "Ask Humo" */
html[data-path="venture"] .hx-grab{display:none!important}
@media (max-width:900px){ html[data-path="venture"] .hx-ribbon{padding-top:13px!important} }
html[data-path="venture"] .humo-p header b{opacity:1!important}

/* ASK HUMO AS A FLOATING BUBBLE, BOTTOM RIGHT (user, 2026-10-21: "place it to the bottom right of viewport and just have it as a bubble
   motion Ask Humo without a border"): no tab, no box and no rim; the glass bubble floats and gently bobs, with "Ask Humo" beside it */
@media (max-width:900px){
  html[data-path="venture"] .hx-ribbon{left:auto!important;right:18px!important;bottom:calc(18px + env(safe-area-inset-bottom,0px))!important;translate:none!important;min-width:0!important;
    padding:0!important;border-radius:0!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
  html[data-path="venture"] .hx-ribbon:active{translate:none!important;transform:scale(.94)}
  html[data-path="venture"] .hx-rb{flex-direction:row-reverse;gap:10px;font-size:14px;text-shadow:0 1px 10px rgba(0,0,0,.9)}
  html[data-path="venture"] .hx-rb .hxf-orb{width:48px!important;height:48px!important;animation:hxBubble 4.2s ease-in-out infinite!important;
    box-shadow:inset 0 0 14px rgba(255,255,255,.18),0 0 26px rgba(255,255,255,.16),0 12px 30px -10px rgba(0,0,0,.9)!important}
  html[data-path="venture"].humo-full .hx-ribbon{translate:none!important;transform:scale(.6);opacity:0}
}
@keyframes hxBubble{0%,100%{translate:0 0;scale:1}50%{translate:0 -5px;scale:1.04}}
@media (prefers-reduced-motion:reduce){ html[data-path="venture"] .hx-rb .hxf-orb{animation:none!important} }
/* the fields slider: tall duotone cards running off the right edge, snapping; arrows on desktop, a swipe on phones */
html[data-path="venture"] .vf-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
html[data-path="venture"] .vf-nav{display:flex;gap:8px}
html[data-path="venture"] .vf-nav button{width:42px;height:42px;border:0;border-radius:2px;font:inherit;font-size:16px;color:#fff;cursor:pointer;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:background .25s}
html[data-path="venture"] .vf-nav button:hover{background:var(--sui)}
html[data-path="venture"] .vs-fields ul.vf-track{display:flex;flex-wrap:nowrap;gap:12px;max-width:none;margin:clamp(20px,3.6svh,36px) calc(var(--gut) * -1) 0 0;padding:0 var(--gut) 6px 0;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:0;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;outline:0}
html[data-path="venture"] .vf-track::-webkit-scrollbar{display:none}
html[data-path="venture"] .vf-track.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
html[data-path="venture"] .vs-fields .vf-track li{position:relative;flex:none;width:clamp(220px,22vw,300px);aspect-ratio:3/4;max-height:52svh;padding:0;overflow:hidden;scroll-snap-align:start;
  display:flex;flex-direction:column;justify-content:flex-end;background:#05070c;box-shadow:inset 0 0 0 1px var(--sui-line);border-radius:2px}
html[data-path="venture"] .vf-img{position:absolute;inset:0;background-size:cover;background-position:50% 50%;pointer-events:none;
  filter:grayscale(1) brightness(.8) contrast(1.08);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s}
html[data-path="venture"] .vf-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85))}
html[data-path="venture"] .vf-track li:hover .vf-img{transform:scale(1.05);filter:grayscale(1) brightness(.95) contrast(1.08)}
html[data-path="venture"] .vf-track small{position:relative;margin:0 18px 6px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--sui-l)}
html[data-path="venture"] .vf-track b{position:relative;margin:0 18px 18px;font-family:var(--title);font-weight:200;font-size:clamp(18px,1.5vw,22px);line-height:1.15;color:#fff}
@media (max-width:900px){
  html[data-path="venture"] .vf-nav{display:none}
  html[data-path="venture"] .vs-fields ul.vf-track{margin-right:-18px;padding-right:18px;gap:10px}
  html[data-path="venture"] .vs-fields .vf-track li{width:68vw;max-height:none;aspect-ratio:4/5}
}

/* ASK HUMO INSIDE A LIVING BUBBLE (user, 2026-10-21: "Ask Humo should be in the bubble ball and the bubble ball needs to be alive"):
   one glass sphere holding the words; it wobbles like a soap bubble, a light drifts round inside it, sparkles come and go and a soft
   glow breathes beneath it. Still under reduced motion. */
@media (max-width:900px){
  html[data-path="venture"] .hx-ribbon{width:84px;height:84px;border-radius:50%!important;overflow:visible}
  html[data-path="venture"] .hx-rb{position:relative;width:84px;height:84px;display:grid!important;place-items:center;gap:0!important;flex-direction:row!important;border-radius:50%;
    animation:hxWobble 5.5s ease-in-out infinite,hxFloat 4.2s ease-in-out infinite;
    background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.95) 0 3%,rgba(255,255,255,.3) 7%,transparent 16%),
      radial-gradient(circle at 50% 108%,rgba(255,255,255,.45),rgba(255,255,255,.1) 32%,transparent 52%),
      radial-gradient(circle at 50% 50%,rgba(10,12,18,.42) 50%,rgba(255,255,255,.07) 64%,rgba(255,255,255,.34) 70.5%,transparent 71.5%);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 0 22px rgba(255,255,255,.16),inset 10px -16px 28px -14px rgba(255,255,255,.35),0 14px 34px -12px rgba(0,0,0,.9)}
  /* the light that drifts round inside */
  html[data-path="venture"] .hx-rb::before{content:"";position:absolute;inset:8%;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:.75;
    background:conic-gradient(from 0deg,transparent,rgba(190,215,255,.55),transparent 30%,rgba(255,255,255,.35),transparent 60%,rgba(170,200,255,.45),transparent 88%);
    filter:blur(6px);animation:hxSwirl 7s linear infinite}
  /* the glow beneath, breathing */
  html[data-path="venture"] .hx-rb::after{content:"";position:absolute;inset:-14%;z-index:-1;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,rgba(150,185,255,.28),transparent 66%);animation:hxBreathe 3.4s ease-in-out infinite}
  html[data-path="venture"] .hx-rb > span{position:relative;z-index:2;width:62px;font-size:12.5px;line-height:1.1;text-align:center;letter-spacing:.01em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8)}
  /* the small orb becomes the sparkles inside */
  html[data-path="venture"] .hx-rb .hxf-orb{position:absolute!important;inset:0;width:auto!important;height:auto!important;background:none!important;box-shadow:none!important;animation:hxGlint 3.6s ease-in-out infinite!important;
    background-image:radial-gradient(circle at 24% 38%,#fff 0 .7px,transparent 1.4px),radial-gradient(circle at 70% 30%,#fff 0 .9px,transparent 1.6px),radial-gradient(circle at 64% 74%,#fff 0 .6px,transparent 1.3px),
      radial-gradient(circle at 36% 78%,#fff 0 .5px,transparent 1.2px),radial-gradient(circle at 80% 56%,#fff 0 .5px,transparent 1.2px)!important}
  html[data-path="venture"] .hx-rb .hxf-orb::after{display:none!important}
}
@keyframes hxWobble{0%,100%{border-radius:50% 50% 50% 50% / 50% 50% 50% 50%}25%{border-radius:53% 47% 51% 49% / 48% 53% 47% 52%}50%{border-radius:48% 52% 47% 53% / 52% 48% 53% 47%}75%{border-radius:51% 49% 53% 47% / 47% 51% 49% 53%}}
@keyframes hxFloat{0%,100%{translate:0 0;scale:1}50%{translate:0 -6px;scale:1.03}}
@keyframes hxSwirl{to{rotate:360deg}}
@keyframes hxBreathe{0%,100%{opacity:.5;scale:.92}50%{opacity:1;scale:1.06}}
@keyframes hxGlint{0%,100%{opacity:.3}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ html[data-path="venture"] .hx-rb,html[data-path="venture"] .hx-rb::before,html[data-path="venture"] .hx-rb::after,html[data-path="venture"] .hx-rb .hxf-orb{animation:none!important} }
/* POWERED BY SECTOR SPECIALISTS: the heading and line, then the logos running slowly right to left, white, fading at both edges */
html[data-path="venture"] .vs-spec{width:100%;padding:clamp(28px,5svh,56px) 0 clamp(48px,9svh,110px);text-align:left}
html[data-path="venture"] .vs-spec h2{margin:0;font-family:var(--title);font-weight:200;font-size:clamp(24px,min(2.4vw,4.2svh),38px);line-height:1.1;letter-spacing:-.02em;color:#fff}
html[data-path="venture"] .vs-spec h2 em{font-style:normal;color:var(--sui-l)}
html[data-path="venture"] .vs-spec p{max-width:46ch;margin:14px 0 0;font-size:15px;line-height:1.6;color:rgba(220,232,255,.62)}
html[data-path="venture"] .vs-mq{display:flex;overflow:hidden;margin-top:clamp(32px,6svh,64px);padding:clamp(22px,4svh,36px) 0;box-shadow:inset 0 1px 0 var(--sui-line),inset 0 -1px 0 var(--sui-line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
html[data-path="venture"] .vs-mq ul{flex:none;display:flex;align-items:center;gap:clamp(48px,6vw,96px);margin:0;padding:0 clamp(24px,3vw,48px);list-style:none;animation:vsMarq 46s linear infinite}
html[data-path="venture"] .vs-mq li{flex:none;display:flex;align-items:center}
html[data-path="venture"] .vs-mq img{display:block;width:auto;filter:brightness(0) invert(1);opacity:.7;transition:opacity .3s}
html[data-path="venture"] .vs-mq:hover ul{animation-play-state:paused}
html[data-path="venture"] .vs-mq li:hover img{opacity:1}
@keyframes vsMarq{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){ html[data-path="venture"] .vs-mq ul{animation:none} html[data-path="venture"] .vs-mq{overflow-x:auto} }
@media (max-width:900px){ html[data-path="venture"] .vs-mq ul{gap:44px;animation-duration:32s} html[data-path="venture"] .vs-mq img{transform:scale(.85)} }
/* a smaller bubble on phones (user, 2026-10-21: "ask humo button on mobile too big") */
@media (max-width:900px){ html[data-path="venture"] .hx-ribbon,html[data-path="venture"] .hx-rb{width:60px!important;height:60px!important}
  html[data-path="venture"] .hx-rb > span{width:46px;font-size:10px;line-height:1.05}
  html[data-path="venture"] .hx-ribbon{right:16px!important;bottom:calc(16px + env(safe-area-inset-bottom,0px))!important} }
/* the portraits row: runs the other way (left to right) under the logos, grey (was blue duotone, user 2026-10-25), example role beneath each */
html[data-path="venture"] .vs-mq.vs-ppl{margin-top:0;padding:clamp(18px,3svh,28px) 0;box-shadow:inset 0 -1px 0 var(--sui-line)}
html[data-path="venture"] .vs-ppl ul{gap:clamp(12px,1.2vw,18px);padding:0 clamp(6px,.6vw,9px);animation:vsMarqR 60s linear infinite}
html[data-path="venture"] .vs-ppl li{flex-direction:column;align-items:flex-start;gap:10px;width:clamp(130px,11vw,170px)}
html[data-path="venture"] .vp-img{display:block;width:100%;aspect-ratio:4/5;background-size:cover;background-position:50% 30%;border-radius:2px;box-shadow:inset 0 0 0 1px var(--sui-line);
  filter:grayscale(1) brightness(.82) contrast(1.06);transition:filter .4s}
html[data-path="venture"] .vs-ppl li:hover .vp-img{filter:none}
html[data-path="venture"] .vs-ppl b{font-family:var(--mono);font-weight:400!important;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(220,232,255,.6)}
@keyframes vsMarqR{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@media (max-width:900px){ html[data-path="venture"] .vs-ppl ul{animation-duration:44s} html[data-path="venture"] .vs-ppl li{width:118px} }
html[data-path="venture"] .vs-ppl ul{align-items:flex-start} html[data-path="venture"] .vs-ppl b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} @media (max-width:900px){ html[data-path="venture"] .vs-ppl li{width:128px} html[data-path="venture"] .vs-ppl b{font-size:9.5px} }

/* THE THREE CARDS, SIMPLER (user, 2026-10-21: "improve the cards under de-risking innovation, keep it simple and smooth, maybe 2 side by
   side and one under"): two cards side by side, the third full width beneath; each is a photograph with the words laid over its foot,
   no box inside a box. Hover lifts the photograph a touch and slides the action in; everything eases on one curve. */
@media (min-width:901px){
  html[data-path="venture"] .vs-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  html[data-path="venture"] .vs-card:nth-child(3){grid-column:1 / -1}
}
html[data-path="venture"] .vs-card{position:relative;display:flex!important;flex-direction:column;justify-content:flex-end;min-height:clamp(200px,30svh,300px);padding:clamp(18px,2.4svh,26px) clamp(18px,1.8vw,28px)!important;
  overflow:hidden;isolation:isolate;background:#05070c;box-shadow:inset 0 0 0 1px var(--sui-line)!important;transition:box-shadow .6s cubic-bezier(.2,.7,.2,1)!important;translate:none!important}
html[data-path="venture"] .vs-card:nth-child(3){min-height:clamp(170px,24svh,240px)}
html[data-path="venture"] .vs-card .vc-img{position:absolute!important;inset:0;z-index:-1;height:auto!important;min-height:0!important;grid-row:auto!important;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s ease}
html[data-path="venture"] .vs-card .vc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 20%,rgba(0,0,0,.55) 58%,rgba(0,0,0,.9))}
html[data-path="venture"] .vs-card:nth-child(3) .vc-img::after{background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.5) 50%,rgba(0,0,0,.1))}
html[data-path="venture"] .vs-card:hover .vc-img{transform:scale(1.04)}
html[data-path="venture"] .vs-card:hover{box-shadow:inset 0 0 0 1px rgba(111,168,255,.4)!important}
html[data-path="venture"] .vs-card .vc-k,html[data-path="venture"] .vs-card h3,html[data-path="venture"] .vs-card p,html[data-path="venture"] .vs-card .vc-go{margin-left:0!important;margin-right:0!important;grid-column:auto!important}
html[data-path="venture"] .vs-card .vc-k{margin-top:0!important}
html[data-path="venture"] .vs-card h3{margin-top:6px!important}
html[data-path="venture"] .vs-card p{max-width:46ch;margin-top:6px!important;margin-bottom:0!important;color:rgba(230,238,255,.72)}
html[data-path="venture"] .vs-card .vc-go{display:block!important;margin-top:14px!important;padding:0!important;color:#fff;opacity:.55;transform:translateX(-4px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
html[data-path="venture"] .vs-card:hover .vc-go{opacity:1;transform:none}
@media (max-width:900px){
  html[data-path="venture"] .vs-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  html[data-path="venture"] .vs-card{display:flex!important;min-height:200px!important;padding:14px!important;grid-template-columns:none!important}
  html[data-path="venture"] .vs-card:nth-child(3){grid-column:1 / -1;min-height:150px!important}
  html[data-path="venture"] .vs-card h3{font-size:16px!important}
  html[data-path="venture"] .vs-card p{font-size:12.5px!important;line-height:1.4}
  html[data-path="venture"] .vs-card .vc-go{font-size:10px;margin-top:10px!important;opacity:.8;transform:none}
}
/* fit the band and all three cards in one window; on phones a darker foot so the words read cleanly */
@media (min-width:901px){
  html[data-path="venture"] .vs-cards{margin-top:clamp(28px,4.6svh,56px)!important}
  html[data-path="venture"] .vs-card{min-height:clamp(170px,23svh,250px)!important}
  html[data-path="venture"] .vs-card:nth-child(3){min-height:clamp(130px,16svh,190px)!important}
}
@media (max-width:900px){
  html[data-path="venture"] .vs-card .vc-img::after{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.78) 45%,rgba(0,0,0,.94))!important}
  html[data-path="venture"] .vs-card:nth-child(3) .vc-img::after{background:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.7) 60%,rgba(0,0,0,.4))!important}
  html[data-path="venture"] .vs-card:not(:nth-child(3)) p{display:none}
  html[data-path="venture"] .vs-card{min-height:150px!important}
  html[data-path="venture"] .vs-card:nth-child(3){min-height:140px!important}
}
/* softer dots in the background (user, 2026-10-21: "make the dots softer and less heavy"): smaller, fainter, further apart */
html[data-path="venture"] .room::before{background:radial-gradient(circle,rgba(255,255,255,.045) .6px,transparent 1px) 0 0/26px 26px!important}
/* the canvas at full definition: smooth scaling, a finer grain */
html[data-path="venture"] .room .vs-canvas,html[data-path="venture"] .room .sx-canvas{image-rendering:auto!important}
html[data-path="venture"] .room::after{opacity:.07!important}

/* ============================================================================================================================
   THE BAND, REWRITTEN (user, 2026-10-21): one line, lit word by word as it scrolls, then three panels.
   ============================================================================================================================ */
html[data-path="venture"] .vs-band{display:block!important;padding-bottom:0!important}
html[data-path="venture"] .vs-div{display:none!important}
html[data-path="venture"] .vs-scrub{max-width:22ch;white-space:normal!important;font-size:clamp(30px,min(3.6vw,6.4svh),56px)!important;line-height:1.12!important;letter-spacing:-.025em}
html[data-path="venture"] .vs-scrub em{background:none!important;-webkit-text-fill-color:currentColor!important;color:inherit!important}
html[data-path="venture"] .vs-scrub .sw{color:rgba(220,232,255,.14);transition:color .45s cubic-bezier(.2,.7,.2,1)}
html[data-path="venture"] .vs-scrub .sw.on{color:#fff}
html[data-path="venture"] .vs-scrub em .sw.on{color:var(--sui-l)}

/* THE THREE PANELS: tall photographs side by side; the open one widens and shows its line and action, the others narrow to a title.
   Hover opens one on the desktop; on phones they stack and a tap opens one, a second tap acts. They rise in once the line is read. */
html[data-path="venture"] .vs-cards{display:flex!important;gap:12px!important;height:clamp(300px,46svh,460px);margin-top:clamp(36px,6svh,72px)!important;grid-template-columns:none!important}
html[data-path="venture"] .vs-cards .vs-card{flex:1 1 0!important;min-width:0;min-height:0!important;height:auto!important;grid-column:auto!important;
  padding:clamp(18px,2.4svh,26px) clamp(18px,1.6vw,26px)!important;opacity:0;transform:translateY(28px);
  transition:flex .9s cubic-bezier(.22,1,.36,1),opacity .8s ease,transform 1s cubic-bezier(.22,1,.36,1),box-shadow .6s!important}
html[data-path="venture"] .vs-cards.show .vs-card{opacity:1;transform:none}
html[data-path="venture"] .vs-cards.show .vs-card:nth-child(2){transition-delay:0s,.12s,.12s,0s!important}
html[data-path="venture"] .vs-cards.show .vs-card:nth-child(3){transition-delay:0s,.24s,.24s,0s!important}
html[data-path="venture"] .vs-cards .vs-card.open{flex:2.6 1 0!important}
html[data-path="venture"] .vs-cards .vs-card .vc-img::after{background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.82))!important}
html[data-path="venture"] .vs-cards .vs-card:not(.open) .vc-img{filter:grayscale(1) brightness(.5) contrast(1.05)!important}
html[data-path="venture"] .vs-cards .vs-card h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(17px,min(1.4vw,2.6svh),23px)!important}
html[data-path="venture"] .vs-cards .vs-card p,html[data-path="venture"] .vs-cards .vs-card .vc-go{display:block!important;max-height:0;opacity:0;overflow:hidden;transform:translateY(8px)!important;margin-top:0!important;
  transition:max-height .7s cubic-bezier(.22,1,.36,1),opacity .5s ease,transform .7s cubic-bezier(.22,1,.36,1),margin .7s!important}
html[data-path="venture"] .vs-cards .vs-card.open p{max-height:5em;opacity:1;transform:none!important;margin-top:8px!important;transition-delay:.25s!important}
html[data-path="venture"] .vs-cards .vs-card.open .vc-go{max-height:2em;opacity:1;transform:none!important;margin-top:14px!important;transition-delay:.35s!important}
html[data-path="venture"] .vs-cards .vs-card.open h3{white-space:normal}
@media (max-width:900px){
  html[data-path="venture"] .vs-scrub{font-size:clamp(26px,7.4vw,32px)!important}
  html[data-path="venture"] .vs-cards{flex-direction:column;height:auto;gap:8px!important}
  html[data-path="venture"] .vs-cards .vs-card{flex:none!important;height:84px!important;transition:height .8s cubic-bezier(.22,1,.36,1),opacity .8s ease,transform 1s cubic-bezier(.22,1,.36,1)!important}
  html[data-path="venture"] .vs-cards .vs-card.open{height:250px!important}
  html[data-path="venture"] .vs-cards .vs-card p{display:block!important}
  html[data-path="venture"] .vs-cards .vs-card .vc-img::after{background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.85))!important}
}
@media (prefers-reduced-motion:reduce){ html[data-path="venture"] .vs-cards .vs-card{opacity:1;transform:none;transition:none!important} html[data-path="venture"] .vs-scrub .sw{transition:none} }
html[data-path="venture"] .vs-cards .vs-card:not(.open) h3{white-space:normal;line-height:1.15}
@media (max-width:900px){
  html[data-path="venture"] .vs-cards{height:auto!important}
  html[data-path="venture"] .vs-cards .vs-card,html[data-path="venture"] .vs-cards .vs-card.open{flex:none!important;min-height:0!important}
  html[data-path="venture"] .vs-cards .vs-card{height:84px!important;justify-content:flex-end}
  html[data-path="venture"] .vs-cards .vs-card.open{height:250px!important}
}
@media (max-width:900px){
  html[data-path="venture"] .vs-cards .vs-card{height:76px!important;padding:0 16px 16px!important}
  html[data-path="venture"] .vs-cards .vs-card.open{height:250px!important;padding:16px!important}
  html[data-path="venture"] .vs-cards .vs-card:not(.open) .vc-k{display:none}
  html[data-path="venture"] .vs-cards .vs-card:not(.open) p,html[data-path="venture"] .vs-cards .vs-card:not(.open) .vc-go{display:none!important}
  html[data-path="venture"] .vs-cards .vs-card:not(.open) h3{margin:0!important;font-size:17px!important;white-space:nowrap}
}

/* HEADINGS IN THE LOGO'S LIGHT BLUE (user, 2026-10-25: "ensure the blue is light blue on headers like the logo"): the highlighted words
   take the mark's pale blue, #A8C1FF, flat, instead of the brighter Sui blue */
html[data-path="venture"]{--logo-l:#a8c1ff}
html[data-path="venture"] h1 em,html[data-path="venture"] h2 em,html[data-path="venture"] h3 em,html[data-path="venture"] .vs-head em{font-style:normal;color:var(--logo-l)!important;background:none!important;-webkit-text-fill-color:currentColor!important}
html[data-path="venture"] .vs-scrub em .sw{color:rgba(168,193,255,.16)}
html[data-path="venture"] .vs-scrub em .sw.on{color:var(--logo-l)}

/* OUR PORTFOLIO INTERESTS, PINNED (user, 2026-10-25: "should only start scroll when scroll triggers on section, adapt to mobile too"):
   the section holds still once it reaches the top of the window, the cards then travel sideways with the scroll, and the page moves on
   after the last card is in. The pin is a tall wrapper (.vf-pin, its height set in index.html) with the section sticky inside it. */
html[data-path="venture"] .vf-pin{position:relative;width:100%}
html[data-path="venture"] .vf-pin > .vs-fields{position:sticky;top:var(--vf-top,72px)}
html[data-path="venture"] .vf-pin .vf-track{scroll-snap-type:none!important}
html[data-path="venture"] .vf-bar{height:1px;margin-top:clamp(16px,2.6svh,24px);background:rgba(255,255,255,.1);position:relative;overflow:hidden}
html[data-path="venture"] .vf-bar i{position:absolute;inset:0;background:var(--logo-l);transform-origin:left;transform:scaleX(var(--p,0))}
@media (max-width:760px){
  html[data-path="venture"] .vf-pin > .vs-fields{top:var(--vf-top,64px);padding-top:18px;padding-bottom:18px}
  html[data-path="venture"] .vs-fields .vf-track li{width:72vw;aspect-ratio:4/5;max-height:58svh}
}
/* card numbers in grey, not blue (user, 2026-10-25: "01 - 03 must be grey"); the field numbers follow */
html[data-path="venture"] .vc-k,html[data-path="venture"] .vf-track small{color:rgba(255,255,255,.5)!important}

/* THE THREE CARDS IN FROZEN GLASS (user, 2026-10-25: "these cards make frozen glass", "on hover image appears"): at rest each card is a
   frosted pane over the page canvas, a pale rim on its top edge; the photograph fades in behind the words only on hover (and on phones,
   on the card that is open, since a tap opens it) */
html[data-path="venture"] .vs-cards .vs-card{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025))!important;
  -webkit-backdrop-filter:blur(22px) saturate(130%);backdrop-filter:blur(22px) saturate(130%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),inset 0 1px 0 rgba(255,255,255,.2)!important;isolation:isolate}
html[data-path="venture"] .vs-cards .vs-card .vc-img{opacity:0;transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease!important}
html[data-path="venture"] .vs-cards .vs-card:hover .vc-img,html[data-path="venture"] .vs-cards .vs-card:focus-visible .vc-img{opacity:1}
html[data-path="venture"] .vs-cards .vs-card:not(.open):hover .vc-img{filter:grayscale(1) brightness(.75) contrast(1.05)!important}
html[data-path="venture"] .vs-cards .vs-card:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.3)!important}
@media (hover:none){ html[data-path="venture"] .vs-cards .vs-card.open .vc-img{opacity:1} }

/* THE CARD ICONS AND HOVER (user, 2026-10-25: "instead of numbers add icons which are low occupacy which look good on the frozen glass
   like frozen glass icon and place the icon. also make the hover look nice"): a small frosted tile in the card's top corner holds a thin
   line icon at low opacity. On hover the photo comes up, the tile clears and lifts, the icon brightens to the logo blue, the words rise a
   little and the link slides in. */
html[data-path="venture"] .vs-cards .vs-card .vc-ic{position:absolute!important;top:clamp(14px,1.6vw,20px);left:clamp(14px,1.6vw,20px);margin:0!important;width:46px;height:46px;display:grid!important;place-items:center;border-radius:2px;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03));-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.24),0 8px 20px -10px rgba(0,0,0,.6);transition:transform .6s cubic-bezier(.22,1,.36,1),background .5s,box-shadow .5s}
html[data-path="venture"] .vc-ic svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.42;transition:opacity .5s,stroke .5s,transform .6s cubic-bezier(.22,1,.36,1)}
html[data-path="venture"] .vs-cards .vs-card:not(.open) .vc-ic{display:grid!important}
html[data-path="venture"] .vs-cards .vs-card h3,html[data-path="venture"] .vs-cards .vs-card p{transition:transform .6s cubic-bezier(.22,1,.36,1),max-height .6s,opacity .5s!important}
html[data-path="venture"] .vs-cards .vs-card:hover .vc-ic{transform:translateY(-2px);background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.06));box-shadow:inset 0 0 0 1px rgba(168,193,255,.45),inset 0 1px 0 rgba(255,255,255,.3),0 12px 28px -10px rgba(0,0,0,.7)}
html[data-path="venture"] .vs-cards .vs-card:hover .vc-ic svg{opacity:1;stroke:#a8c1ff;transform:scale(1.06)}
html[data-path="venture"] .vs-cards .vs-card:hover h3{transform:translateY(-3px)}
html[data-path="venture"] .vs-cards .vs-card:hover{box-shadow:inset 0 0 0 1px rgba(168,193,255,.3),inset 0 1px 0 rgba(255,255,255,.3),0 24px 50px -30px rgba(0,0,0,.9)!important}
html[data-path="venture"] .vs-cards .vs-card .vc-go{transition:opacity .5s,transform .6s cubic-bezier(.22,1,.36,1),max-height .6s!important}
html[data-path="venture"] .vs-cards .vs-card:hover .vc-go{letter-spacing:.14em}
@media (max-width:760px){
  html[data-path="venture"] .vs-cards .vs-card .vc-ic{top:auto;left:auto;right:12px;bottom:12px;width:38px;height:38px}
  html[data-path="venture"] .vs-cards .vs-card.open .vc-ic{top:12px;left:12px;right:auto;bottom:auto}
  html[data-path="venture"] .vc-ic svg{width:19px;height:19px}
}
@media (prefers-reduced-motion:reduce){ html[data-path="venture"] .vs-cards .vs-card .vc-ic,html[data-path="venture"] .vc-ic svg{transition:none} }

/* THE PIPELINE (2026-10-25): Research, Development, Commercialisation on one line under the portraits; the specialists drop onto their stage */
html[data-path="venture"] .vs-pipe{position:relative;margin-top:clamp(40px,7svh,80px);padding-top:8px}
html[data-path="venture"] .vs-pipe ol{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,48px)}
html[data-path="venture"] .vp-line{position:absolute;left:0;right:0;top:calc(var(--av,44px) + 52px);height:1px;background:rgba(255,255,255,.12);overflow:hidden;transform-origin:left;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.65,0,.35,1)}
html[data-path="venture"] .vs-pipe.in .vp-line{transform:none}
html[data-path="venture"] .vp-flow{position:absolute;top:0;bottom:0;width:22%;left:-22%;background:linear-gradient(90deg,transparent,#a8c1ff,transparent);opacity:0}
html[data-path="venture"] .vs-pipe.in .vp-flow{opacity:1;animation:vpFlow 4.2s cubic-bezier(.45,0,.55,1) 2.4s infinite}
@keyframes vpFlow{to{left:100%}}
html[data-path="venture"] .vs-pipe li{position:relative;text-align:left}
html[data-path="venture"] .vp-drop{display:flex;height:calc(var(--av,44px) + 30px);align-items:flex-end;padding-bottom:22px}
html[data-path="venture"] .vp-av{width:var(--av,44px);height:var(--av,44px);flex:none;border-radius:50%;overflow:hidden;margin-right:-10px;box-shadow:0 0 0 2px #05060a,0 10px 20px -10px #000;
  opacity:0;transform:translateY(-70px) scale(.9)}
html[data-path="venture"] .vp-av img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
html[data-path="venture"] .vs-pipe.in .vp-av{animation:vpDrop .9s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(.9s + var(--i) * .45s + var(--k) * .12s)}
@keyframes vpDrop{0%{opacity:0;transform:translateY(-70px) scale(.9)}60%{opacity:1}100%{opacity:1;transform:none}}
html[data-path="venture"] .vp-node{position:absolute;left:0;top:calc(var(--av,44px) + 52px);width:11px;height:11px;margin:-5px 0 0 0;border-radius:50%;background:#05060a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transition:background .5s,box-shadow .5s}
html[data-path="venture"] .vs-pipe.in .vp-node{animation:vpLit .6s ease both;animation-delay:calc(1.5s + var(--i) * .45s + .3s)}
@keyframes vpLit{to{background:#a8c1ff;box-shadow:0 0 0 4px rgba(168,193,255,.16),0 0 16px rgba(168,193,255,.6)}}
html[data-path="venture"] .vs-pipe small{display:block;margin-top:34px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.5)}
html[data-path="venture"] .vs-pipe b{display:block;margin-top:6px;font-family:var(--title);font-weight:200;font-size:clamp(20px,1.8vw,28px);letter-spacing:-.02em;color:#fff}
html[data-path="venture"] .vs-pipe p{margin:6px 0 0;font-size:13px;line-height:1.5;color:rgba(230,238,255,.55)}
html[data-path="venture"] .vs-pipe li > small,html[data-path="venture"] .vs-pipe li > b,html[data-path="venture"] .vs-pipe li > p{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1);transition-delay:calc(1.6s + var(--i) * .45s)}
html[data-path="venture"] .vs-pipe.in li > small,html[data-path="venture"] .vs-pipe.in li > b,html[data-path="venture"] .vs-pipe.in li > p{opacity:1;transform:none}
@media (max-width:760px){
  html[data-path="venture"] .vs-pipe{--av:38px}
  html[data-path="venture"] .vs-pipe ol{grid-template-columns:1fr;gap:26px;padding-left:28px}
  html[data-path="venture"] .vp-line{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto;transform-origin:top;transform:scaleY(0)}
  html[data-path="venture"] .vp-flow{width:auto;height:22%;left:0;right:0;top:-22%;background:linear-gradient(180deg,transparent,#a8c1ff,transparent)}
  @keyframes vpFlowV{to{top:100%}}
  html[data-path="venture"] .vs-pipe.in .vp-flow{animation-name:vpFlowV}
  html[data-path="venture"] .vp-node{left:-28px;top:calc(var(--av) + 8px)}
  html[data-path="venture"] .vp-drop{height:auto;padding-bottom:0}
  html[data-path="venture"] .vs-pipe small{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){ html[data-path="venture"] .vs-pipe *{animation:none!important;transition:none!important} html[data-path="venture"] .vp-av,html[data-path="venture"] .vs-pipe li > *{opacity:1!important;transform:none!important} html[data-path="venture"] .vp-line{transform:none} }
/* the hero's photos stay hidden on phones until the scroll starts (user, 2026-10-25: "the image on bottom left should not be shown until scroll starts") */
@media (max-width:767px){ html[data-path="venture"] .vs-pimgs{transition:opacity .5s ease} html[data-path="venture"] .vs-pimgs:not(.vs-on){opacity:0!important;visibility:hidden} }
/* four stages (Venture funding joins, 2026-10-25), and the roles as soft frozen-glass tags (user: "make this frozen glass soft tags") */
html[data-path="venture"] .vs-pipe ol{grid-template-columns:repeat(4,minmax(0,1fr))}
html[data-path="venture"] .vs-pipe p.vp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
html[data-path="venture"] .vp-tags span{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;font-size:12px;line-height:1;white-space:nowrap;color:rgba(235,241,255,.82);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.16);transition:box-shadow .3s,color .3s}
html[data-path="venture"] .vp-tags span:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(168,193,255,.4),inset 0 1px 0 rgba(255,255,255,.22)}
@media (max-width:1100px) and (min-width:761px){ html[data-path="venture"] .vs-pipe ol{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px} html[data-path="venture"] .vp-line{display:none} }

/* CONSISTENCY PASS (user, 2026-10-25: "polish the design and make it elite and delete unnecessary and inconsistent design elements"):
   one blue family, the logo's (#5E8EF7 deep, #A8C1FF light), in place of the brighter Sui blue on tabs, tiles and buttons; the photo
   panel's small label, which repeated the divider above it, is gone */
html[data-path="venture"]{--sui:#5e8ef7;--sui-l:#a8c1ff}
html[data-path="venture"] .vs-px .px-tx > span{display:none}
@media (max-width:760px){ html[data-path="venture"] .vs-pipe ol{grid-template-columns:1fr} html[data-path="venture"] .vp-line{display:block} }
/* THE SCROLL CUE AS A MOUSE (user, 2026-10-25: "instead of line next to scroll use the mouse"): a thin outlined mouse whose wheel rolls down */
html[data-path="venture"] .vs-cue i{width:20px;height:32px;border-radius:11px;background:none!important;box-shadow:inset 0 0 0 1.25px rgba(255,255,255,.55);overflow:visible}
html[data-path="venture"] .vs-cue b{inset:auto!important;left:50%!important;top:6px!important;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#a8c1ff!important;transform:none!important;animation:vsWheel 1.9s cubic-bezier(.45,0,.55,1) infinite}
@keyframes vsWheel{0%{opacity:0;translate:0 -2px}25%{opacity:1}70%{opacity:1;translate:0 9px}100%{opacity:0;translate:0 11px}}
@media (prefers-reduced-motion:reduce){ html[data-path="venture"] .vs-cue b{animation:none} }
/* the open chat shows the same orbit orb as the Ask Humo button, larger (user, 2026-10-25: "use same orbit icon when chat opens not the bubble") */
html[data-path="venture"] .vs-orb.vs-orb2{width:120px!important;height:120px!important;display:grid!important;place-items:center;background:none!important;box-shadow:none!important;border:0!important;animation:none!important;filter:none!important}
html[data-path="venture"] .vs-orb.vs-orb2::before,html[data-path="venture"] .vs-orb.vs-orb2::after{display:none!important}
html[data-path="venture"] .vs-orb.vs-orb2 .hxf-orb{--orb:56px}
html[data-path="venture"] .vs-orb.vs-orb2.talk .hxf-orb::after{animation-duration:1.1s!important}
@media (max-width:760px){ html[data-path="venture"] .vs-orb.vs-orb2{width:90px!important;height:90px!important} html[data-path="venture"] .vs-orb.vs-orb2 .hxf-orb{--orb:44px} }
/* the card icons without a border (user, 2026-10-25): soft glass only, no rim line */
html[data-path="venture"] .vs-cards .vs-card .vc-ic,html[data-path="venture"] .vs-cards .vs-card:hover .vc-ic{box-shadow:0 8px 20px -10px rgba(0,0,0,.6)!important}
/* THE CLOSE ON THE PHOTOGRAPH (2026-10-25): the line on the left, Ask Humo to its right, on every size */
html[data-path="venture"] .vs-join .px-tx{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(16px,3vw,40px)}
html[data-path="venture"] .vs-join .px-tx > span{display:none}
html[data-path="venture"] .vs-join .px-tx h2{max-width:14ch}
html[data-path="venture"] .vs-join .vs-jb{flex:none;margin-bottom:6px}
@media (max-width:760px){ html[data-path="venture"] .vs-join .px-tx h2{font-size:30px;max-width:11ch} html[data-path="venture"] .vs-join .vs-jb{height:44px;padding:0 16px 0 10px;font-size:13.5px} }
html[data-path="venture"] .vs-join .vs-jb span{display:inline;margin:0;font:inherit;font-size:14px;font-weight:400;letter-spacing:.005em;text-transform:none;color:#fff}
/* the card icons free of their squares (user, 2026-10-25: "icons should be free from the square and large and minimal and light weight glass
   look"): bare, large, hairline strokes in a pale glass tone with a faint glow; they brighten to the logo blue on hover */
html[data-path="venture"] .vs-cards .vs-card .vc-ic,html[data-path="venture"] .vs-cards .vs-card:hover .vc-ic{width:auto!important;height:auto!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important}
html[data-path="venture"] .vc-ic svg{width:44px!important;height:44px!important;stroke:rgba(235,241,255,.78)!important;stroke-width:.75!important;opacity:.7!important;filter:drop-shadow(0 0 6px rgba(168,193,255,.28)) drop-shadow(0 1px 0 rgba(255,255,255,.12))}
html[data-path="venture"] .vs-cards .vs-card:hover .vc-ic svg{opacity:1!important;stroke:#c9d8ff!important;filter:drop-shadow(0 0 10px rgba(168,193,255,.55));transform:translateY(-2px)!important}
@media (max-width:760px){ html[data-path="venture"] .vc-ic svg{width:34px!important;height:34px!important} }
/* the card photos on hover: low on black (user, 2026-10-25: "use cleaner dark images and lower occupacy on black on hover"); Fractional
   Support now uses the clean, dark team shot */
html[data-path="venture"] .vs-cards .vs-card .vc-img{background-color:#000}
html[data-path="venture"] .vs-cards .vs-card:hover .vc-img,html[data-path="venture"] .vs-cards .vs-card:focus-visible .vc-img{opacity:.42!important}
html[data-path="venture"] .vs-cards .vs-card:not(.open):hover .vc-img{opacity:.32!important}
@media (hover:none){ html[data-path="venture"] .vs-cards .vs-card.open .vc-img{opacity:.42!important} }
/* FULL COLOUR PHOTOGRAPHS (user, 2026-10-25: "use full colour on images but ensure white text is visable do not do grey"): no greyscale
   anywhere; the photos are only dimmed a touch, and the dark gradients under the words keep white text readable */
html[data-path="venture"] body .px-img,html[data-path="venture"] body .vs-pimgs img,html[data-path="venture"] body .vf-img,html[data-path="venture"] body .vp-img,
html[data-path="venture"] body .pp-film video,html[data-path="venture"] body .vp-av img{filter:brightness(.86) saturate(1.04) contrast(1.02)!important}
html[data-path="venture"] body .vs-cards .vs-card .vc-img,html[data-path="venture"] body .vs-cards .vs-card:not(.open) .vc-img,html[data-path="venture"] body .vs-cards .vs-card:not(.open):hover .vc-img{filter:brightness(.9) saturate(1.04)!important}
html[data-path="venture"] body .vf-track li:hover .vf-img{filter:brightness(.98) saturate(1.06)!important}
html[data-path="venture"] .vs-px::after{background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.15) 34%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.9)),linear-gradient(90deg,rgba(0,0,0,.62),transparent 62%)!important}
/* no inline Ask Humo pills (user, 2026-10-25: "delete this button"): the floating Ask Humo is the one way in */
html[data-path="venture"] .vs-pill.vs-ai,html[data-path="venture"] .vs-jb{display:none!important}

/* ===== 2026-10-25 PASS (user: "sector specialists timeline needs to have a fade at the end improve the look of this on mobile also startup
   capital fractional support and derisking program make it nicer ... ensure smooth scroll as it freezes on mobile") ===== */
/* the timeline fades out at its end */
html[data-path="venture"] .vp-line{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 72%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 72%,transparent 100%)}
/* the three offers: a calmer card, the words given more room, the link as a clear line */
html[data-path="venture"] .vs-cards .vs-card h3{font-weight:300!important;letter-spacing:-.015em}
html[data-path="venture"] .vs-cards .vs-card p{color:rgba(230,238,255,.78)}
html[data-path="venture"] .vs-cards .vs-card .vc-go{display:inline-flex!important;align-items:center;gap:8px;letter-spacing:.12em}
@media (max-width:760px){
  /* timeline: a vertical line that fades at the foot, each stage a soft glass card */
  html[data-path="venture"] .vp-line{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%)}
  html[data-path="venture"] .vs-pipe ol{gap:14px!important}
  html[data-path="venture"] .vs-pipe li{padding:16px 16px 18px;border-radius:2px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
  html[data-path="venture"] .vp-node{left:-29px!important;top:24px!important}
  html[data-path="venture"] .vs-pipe small{margin-top:12px!important}
  html[data-path="venture"] .vs-pipe b{font-size:22px!important}
  html[data-path="venture"] .vp-tags span{height:26px;font-size:11.5px}
  /* the three offers stacked as full cards: photo dim on black, icon, title, line and link all showing */
  html[data-path="venture"] .vs-cards{flex-direction:column!important;height:auto!important;gap:12px!important}
  html[data-path="venture"] .vs-cards .vs-card,html[data-path="venture"] .vs-cards .vs-card.open{height:auto!important;min-height:210px!important;padding:18px!important;flex:none!important;justify-content:flex-end}
  html[data-path="venture"] .vs-cards .vs-card .vc-img,html[data-path="venture"] .vs-cards .vs-card:not(.open) .vc-img{opacity:.38!important}
  html[data-path="venture"] .vs-cards .vs-card .vc-img::after{background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.85))!important}
  html[data-path="venture"] .vs-cards .vs-card .vc-ic,html[data-path="venture"] .vs-cards .vs-card.open .vc-ic{top:16px!important;left:16px!important;right:auto!important;bottom:auto!important;display:grid!important}
  html[data-path="venture"] .vs-cards .vs-card h3,html[data-path="venture"] .vs-cards .vs-card:not(.open) h3{font-size:22px!important;white-space:normal!important;margin:0!important}
  html[data-path="venture"] .vs-cards .vs-card p,html[data-path="venture"] .vs-cards .vs-card:not(.open) p{display:block!important;max-height:none!important;opacity:1!important;transform:none!important;margin-top:8px!important;font-size:14px!important}
  html[data-path="venture"] .vs-cards .vs-card .vc-go,html[data-path="venture"] .vs-cards .vs-card:not(.open) .vc-go{display:inline-flex!important;max-height:none!important;opacity:1!important;transform:none!important;margin-top:14px!important}
  /* smooth on phones: no live blur behind glass, which costs every frame on a phone */
  html[data-path="venture"] .vs-cards .vs-card,html[data-path="venture"] .vp-tags span,html[data-path="venture"] .vc-gl,html[data-path="venture"] .vs-card .vc-ic{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html[data-path="venture"] .vs-cards .vs-card{background:rgba(14,16,24,.9)!important}
  html[data-path="venture"] .vs-ppp .pp-l{position:relative!important;height:auto!important}
}