/* The district page: a live 3D scene behind, chapters in front. */
body { background: radial-gradient(120% 80% at 70% 0%, #1b2075 0%, #0f1242 55%) fixed, var(--navy-950); }
#city { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; opacity: 0; transition: opacity 900ms var(--ease); }
#city.on { opacity: 1; }
#labels { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
main, footer { position: relative; z-index: 3; pointer-events: none; }
main a, main button, main summary, main li, main .panel, footer * { pointer-events: auto; }
footer { background: var(--navy-950); }

.lbl { position: absolute; left: 0; top: 0; padding: 5px 8px; border-radius: 6px; white-space: nowrap; pointer-events: auto;
  font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy-50);
  background: rgba(15, 18, 66, 0.72); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 300ms var(--ease), background 200ms var(--ease); }
.lbl.on { opacity: 1; }
.lbl:not(.on) { pointer-events: none; } /* hidden labels never catch the pointer */
.lbl.on.hot { background: var(--c, var(--mag-500)); color: var(--c-ink, #fff); box-shadow: none; }
.lbl.net { background: none; box-shadow: none; backdrop-filter: none; color: var(--navy-200); font-size: 12px; pointer-events: none; }
.tag { position: fixed; z-index: 1; /* inside <main>: over the text and the hero shading, under the cards (z-index 2) */ transform: translate(-50%, calc(-100% - 10px)) scale(0.96); }
.tag.show { transform: translate(-50%, calc(-100% - 10px)) scale(1); }

/* hero */
.c-hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 130px 0 32px; }
.c-kicker { grid-column: 1 / 13; margin: 0 0 18px; }
/* design: Host Grotesk 400, 92px at 1440, line-height 95%, letter-spacing -5% */
.c-h1 { grid-column: 1 / 10; margin: 0; font-family: var(--sans); font-weight: 400; font-style: normal; font-size: clamp(56px, 6.4vw, 92px); line-height: 0.95; letter-spacing: -0.05em; }
/* design: Host Grotesk 400, 19px, line-height 150%, letter-spacing 0 */
.c-sub { grid-column: 1 / 7; margin: 26px 0 30px; color: var(--navy-100); font-family: var(--sans); font-weight: 400; font-style: normal; font-size: 19px; line-height: 1.5; letter-spacing: 0; }
.c-actions { grid-column: 1 / 13; display: flex; flex-wrap: wrap; gap: 10px; }
.c-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: clamp(40px, 8vh, 80px) 0 0; border-top: 1px solid var(--line); }
.c-stats div { padding-top: 16px; }
.c-stats dt { font-size: clamp(32px, 3.2vw, 48px); line-height: 1; letter-spacing: -0.04em; color: var(--navy-50); }
.c-stats dd { margin: 8px 0 0; }
.c-hint { display: flex; align-items: flex-end; justify-content: flex-end; }
.c-hint dd { color: var(--mag-500); white-space: nowrap; }

/* statement */
.c-jump { min-height: 110vh; display: flex; align-items: center; }
.c-jump .reveal { max-width: 17em; text-shadow: 0 2px 30px rgba(15, 18, 66, 0.9); }

/* chapters */
.c-intro, .c-net, .c-plan, .c-doors, .c-founders, .c-investors { min-height: 100vh; display: flex; align-items: center; padding: 120px 0; }
.panel { grid-column: 1 / 6; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r); background: rgba(15, 18, 66, 0.72); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.panel .mono { margin: 0 0 14px; }
.panel h2 { margin: 0 0 18px; }
.panel .lede { margin: 0; font-size: 17px; }
.panel.wide { max-width: 1040px; }
.cos { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line); }
.cos a { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cos b { font-weight: 500; font-size: 19px; letter-spacing: -0.015em; color: var(--navy-50); transition: color 200ms var(--ease); }
.cos span { grid-column: 1; font-size: 14px; color: var(--navy-300); }
.cos i { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; opacity: 0; transform: translateX(-6px); transition: opacity 250ms var(--ease), transform 400ms var(--ease); }
.cos li:hover b { color: var(--c, var(--mag-500)); }
.cos li:hover i { opacity: 1; transform: none; color: var(--c, var(--mag-500)); }

.bog { display: grid; gap: 14px; margin-top: 28px; }
.bog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bog > div { padding: 20px; border-radius: 10px; background: rgba(27, 32, 117, 0.6); box-shadow: inset 0 0 0 1px var(--line); }
.bog h3 { margin: 0 0 10px; font-weight: 500; font-size: 20px; letter-spacing: -0.02em; color: var(--navy-50); }
.bog p { margin: 0; font-size: 15px; color: var(--navy-300); }

.c-doors .grid { row-gap: 14px; }
.door-p { grid-column: span 5; }
.door-p + .door-p { grid-column: 7 / span 5; }
.door-p p:not(.mono) { color: var(--navy-200); margin: 0 0 24px; }

@media (max-width: 1080px) { .panel { grid-column: 1 / 8; } }
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .c-h1 { font-size: clamp(52px, 15vw, 80px); }
  .c-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c-hint { display: none; }
  .c-intro, .c-net, .c-plan, .c-doors { min-height: auto; padding: 72px 0; }
  .c-net { padding-top: 38vh; }
  .bog { grid-template-columns: 1fr; }
  .door-p, .door-p + .door-p { grid-column: 1 / -1; }
}

/* polish */
.lbl.net { display: grid; gap: 4px; text-align: center; font-size: 13px; color: var(--navy-50); text-shadow: 0 2px 12px rgba(15,18,66,0.9); }
.lbl.net small { font-size: 10px; color: var(--navy-300); }
.c-net.flip .panel { grid-column: 8 / 13; }
.c-plan { align-items: flex-end; min-height: 112vh; }
.c-plan .panel.wide { max-width: none; width: 100%; background: rgba(15, 18, 66, 0.8); }
.c-doors .door-p { grid-column: 1 / 5; }
.c-doors .door-p + .door-p { grid-column: 9 / 13; }
html.diving main, html.diving footer, html.diving .top, html.diving #labels { opacity: 0; transition: opacity 500ms var(--ease); }
@media (max-width: 1080px) { .c-net.flip .panel { grid-column: 6 / 13; } .c-doors .door-p, .c-doors .door-p + .door-p { grid-column: span 6; } }
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) { .c-net.flip .panel { grid-column: 1 / -1; } .c-plan { min-height: auto; padding-top: 40vh; } }

/* network chapters: the list stays put while the camera visits each building */
.c-net { display: block; min-height: 0; padding: 0; height: calc(100vh + var(--n, 4) * 62vh); }
.c-net > .wrap { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; padding-top: 70px; }
.cos li.focus b { color: var(--c, var(--navy-50)); } /* the company in focus takes its venture's colour, like its bar */

.cos li.focus i { opacity: 1; transform: none; color: var(--c, var(--mag-500)); }
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) { .c-net { height: auto; padding: 40vh 0 72px; } .c-net > .wrap { position: static; height: auto; display: block; padding-top: 0; } }

/* keep the headline clean over the district */
.c-hero { position: relative; }
.c-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(15,18,66,0.82) 0%, rgba(15,18,66,0.55) 34%, rgba(15,18,66,0) 58%); }

/* company showcase */
.showcase { position: fixed; left: 0; top: 0; z-index: 5; width: min(380px, 30vw); border-radius: var(--r); overflow: hidden;
  background: rgba(15, 18, 66, 0.86); box-shadow: inset 0 0 0 1px var(--line), 0 30px 80px rgba(5, 7, 30, 0.5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transition: opacity 350ms var(--ease), visibility 0s linear 350ms; }
.showcase.on { opacity: 1; visibility: visible; transition: opacity 350ms var(--ease), visibility 0s; }
.showcase .shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.showcase .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; clip-path: inset(0 0 100% 0); transition: clip-path 700ms var(--ease), transform 1200ms var(--ease); }

.showcase .shot:hover img { transform: scale(1.03); }
.showcase .shot.logo { display: grid; place-items: center; }
.showcase .shot.logo img { width: auto; height: auto; max-width: 55%; max-height: 45%; object-fit: contain; }
.showcase .meta { padding: 20px 22px 22px; }
.showcase .where { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: 13px; color: var(--navy-300); }
.showcase .where span { color: var(--c, var(--navy-400)); } /* "1 of 4": in its venture's colour */
.showcase h3 { margin: 0 0 8px; font-weight: 500; font-size: 26px; letter-spacing: -0.025em; line-height: 1.1; color: var(--navy-50); }
.showcase .meta > p:not(.where) { margin: 0 0 18px; font-size: 15px; color: var(--navy-200); }
.showcase .btns { display: flex; gap: 8px; }
.showcase .btns .btn { flex: 1; height: 40px; }
.leader { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 400ms var(--ease); overflow: visible; }
.leader.on { opacity: 1; }
.leader path { fill: none; stroke: var(--c, var(--mag-500)); stroke-width: 1; }
.leader circle { fill: var(--c, var(--mag-500)); }
.panel h2 { margin-top: 0; }
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) { .showcase, .leader { display: none; } }

/* logos sit on navy, never on a white block */
.tag .shot.logo, .showcase .shot.logo { background: var(--navy-900); }
.tag .shot.logo img, .showcase .shot.logo img {  }
.tag .where { margin: 0 0 4px; font-size: 12px; color: var(--navy-300); }

/* short windows: the network panel and the showcase must fit below the nav */
.c-net > .wrap { padding-top: 88px; padding-bottom: 16px; }
.c-net .panel { max-height: calc(100vh - 112px); overflow: auto; scrollbar-width: none; }
.c-net .panel::-webkit-scrollbar { display: none; }
.showcase { width: min(380px, 30vw, calc((100vh - 150px) * 0.62)); }
@media (max-height: 860px) {
  .c-net .panel { padding: 22px 24px; }
  .c-net .panel h2 { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 10px; }
  .c-net .panel .lede { font-size: 15px; }
  .cos { margin-top: 16px; }
  .cos a { padding: 10px 0; }
  .cos b { font-size: 17px; }
  .cos span { font-size: 13px; }
  .showcase .meta { padding: 14px 16px 16px; }
  .showcase h3 { font-size: 21px; }
}
@media (max-height: 700px) { .cos span { display: none; } }

/* ---------- nav: a pill that opens into the menu ----------
   Opening: the pill widens to full width, the page dims, then the panel unfolds from inside the pill
   and its columns rise into place. Closing runs it backwards: fold first, then narrow.
   Timings and easing follow osmo.supply's nav. */
.top { --nav-ease: cubic-bezier(0.625, 0.05, 0, 1); left: 0; right: 0; width: auto; transform: none; padding: 0 var(--pad); pointer-events: none; }
.nav-dim { position: fixed; inset: 0; z-index: -1; background: rgba(5, 7, 30, 0.55); opacity: 0; visibility: hidden; transition: opacity 600ms var(--nav-ease), visibility 600ms var(--nav-ease); }
.nav-box { position: relative; width: 100%; max-width: 650px; margin: 0 auto; border-radius: 14px; background: #16195c; box-shadow: 0 30px 80px rgba(5, 7, 30, 0); pointer-events: auto;
  transition: max-width 900ms var(--nav-ease) 200ms, box-shadow 600ms var(--nav-ease); }
/* menu | logo | pitch: the logo holds the centre whatever the sides measure */
.pill { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.wordmark { margin-right: 0; justify-self: center; }
.pill .wordmark .logo { height: 38px; }
.pill .pitch { justify-self: end; height: 40px; padding: 0 10px; font: 400 13px/1.5 var(--sans); letter-spacing: 0; text-transform: none; background: linear-gradient(115deg, var(--mag-500), var(--mag-700) 87%); }
.menu-btn { justify-self: start; display: inline-flex; align-items: center; gap: 10px; height: 41px; padding: 0 14px 0 12px; border-radius: 8px; background: rgba(230, 231, 244, 0.18); box-shadow: inset 0 0 0 1px var(--line); color: var(--navy-50); font: 400 13px/1.5 var(--sans); transition: background 200ms var(--ease); }
.menu-btn:hover { background: rgba(230, 231, 244, 0.26); }
/* three bars that fold into an x */
.burger { position: relative; flex: none; width: 18px; height: 18px; }
.burger i { position: absolute; left: 1.7px; right: 1.7px; top: 50%; height: 1.2px; margin-top: -0.6px; border-radius: 1px; background: currentColor; transition: transform 600ms var(--nav-ease), opacity 300ms var(--nav-ease); }
.burger i:nth-child(1) { transform: translateY(-3.75px); }
.burger i:nth-child(3) { transform: translateY(3.75px); }
/* the panel: rows 0fr -> 1fr unfolds it to its content's height */
.nav-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 600ms var(--nav-ease); }
.nav-panel::before { content: ""; position: absolute; left: 12px; right: 12px; top: 65px; height: 1px; background: var(--line); opacity: 0; transition: opacity 600ms var(--nav-ease); }
.nav-clip { min-height: 0; overflow: hidden; }
.nav-cols { display: grid; grid-template-columns: minmax(max-content, 0.8fr) minmax(0, 1.4fr) minmax(max-content, 1fr); gap: 12px; max-height: calc(100dvh - 120px); overflow-y: auto; padding: 12px; scrollbar-width: none; }
.nav-col { display: flex; flex-direction: column; padding: 28px 20px 32px 32px; border-radius: 10px; background: rgba(230, 231, 244, 0.05);
  transform: translateY(2em); transition: transform 600ms var(--nav-ease); }
.nav-col:nth-child(2) { transition-delay: 75ms; }
.nav-col:nth-child(3) { transition-delay: 150ms; }
.ov-h { margin: 0 0 18px; color: var(--navy-300); }
.ov-main a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; color: var(--navy-50); transition: color 200ms var(--ease); }
.ov-main a:last-child { border-bottom: 0; }
.ov-main a:hover, .ov-main a:focus-visible { color: var(--mag-500); }
.ov-nets { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ov-nets a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 18px; color: var(--navy-50); transition: color 200ms var(--ease); }
.nav-talk .btn { align-self: flex-start; margin-top: auto; }
.ov-contact { margin: 0 0 24px; font-size: 16px; line-height: 1.8; color: var(--navy-200); }
.ov-contact a:hover, .ov-contact a:focus-visible { color: var(--mag-500); }

/* open */
.top[data-nav="open"] .nav-dim { opacity: 1; visibility: visible; pointer-events: auto; }
.top[data-nav="open"] .nav-box { max-width: 100%; box-shadow: 0 30px 80px rgba(5, 7, 30, 0.45); transition: max-width 600ms var(--nav-ease), box-shadow 600ms var(--nav-ease); }
.top[data-nav="open"] .nav-panel { grid-template-rows: 1fr; transition: grid-template-rows 900ms var(--nav-ease) 300ms; }
.top[data-nav="open"] .nav-panel::before { opacity: 1; transition: opacity 600ms var(--nav-ease) 100ms; }
.top[data-nav="open"] .nav-col { transform: none; transition: transform 900ms var(--nav-ease) 300ms; }
.top[data-nav="open"] .nav-col:nth-child(2) { transition-delay: 375ms; }
.top[data-nav="open"] .nav-col:nth-child(3) { transition-delay: 450ms; }
.top[data-nav="open"] .burger i:nth-child(1) { transform: rotate(-45deg) scaleX(0.85); }
.top[data-nav="open"] .burger i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.top[data-nav="open"] .burger i:nth-child(3) { transform: rotate(45deg) scaleX(0.85); }
.menu-open body { overflow: hidden; }
html.menu-open { overflow: hidden; }

/* the dive hides the page chrome */
html.diving .showcase, html.diving .leader, html.diving .tag { opacity: 0 !important; transition: opacity 250ms var(--ease); }

@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  /* logo | menu: the wordmark leads, the menu button sits at the right */
  .nav-box { border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line), 0 20px 50px rgba(5, 7, 30, 0.35); }
  .pill { display: flex; justify-content: space-between; padding: 9px 9px 9px 15px; border-radius: 16px; }
  .pill .pitch { display: none; }
  .pill .wordmark .logo { height: 26px; }
  .menu-btn { order: 2; } /* the same button as desktop, on the right */
  .nav-panel::before { top: 59px; }
  .nav-cols { grid-template-columns: 1fr; max-height: calc(100dvh - 104px); }
  .nav-col { padding: 22px 22px 24px; }
  .ov-main a { font-size: 20px; padding: 10px 0; }
  .ov-nets a { font-size: 16px; }
  .nav-talk .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .nav-dim, .nav-box, .nav-panel, .nav-panel::before, .nav-col, .burger i { transition: none !important; } }

.closing .mail { margin: 18px 0 0; font-size: 16px; color: var(--navy-200); }
.closing .mail a { transition: color 200ms var(--ease), background-size 450ms var(--ease); }
.closing .mail a:hover, .closing .mail a:focus-visible { color: var(--mag-500); }

/* email sheet */
.mailsheet { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: rgba(8, 10, 40, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 250ms var(--ease); pointer-events: auto; }
.mailsheet.on { opacity: 1; }
.ms-card { position: relative; width: min(460px, 100%); padding: 32px; border-radius: var(--r); background: var(--navy-900); box-shadow: inset 0 0 0 1px var(--line), 0 40px 100px rgba(5, 7, 30, 0.6); transform: translateY(12px); transition: transform 400ms var(--ease); }
.mailsheet.on .ms-card { transform: none; }
.ms-card h2 { margin: 0 0 8px; }
.ms-addr { margin: 0 0 24px; font-size: 18px; color: var(--navy-200); user-select: all; }
.ms-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ms-x { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border-radius: 8px; font-size: 24px; line-height: 1; color: var(--navy-300); }
.ms-x:hover { background: rgba(230, 231, 244, 0.08); color: var(--navy-50); }

/* companies without a site yet: a designed plate, not a bare logo */
.showcase .shot.logo, .tag .shot.logo { position: relative; background:
  radial-gradient(80% 90% at 50% 40%, rgba(56, 65, 209, 0.35), transparent 70%),
  repeating-linear-gradient(0deg, rgba(162,166,225,0.07) 0 1px, transparent 1px 22px),
  repeating-linear-gradient(90deg, rgba(162,166,225,0.07) 0 1px, transparent 1px 22px), var(--navy-900); }
.showcase .soon { position: absolute; left: 14px; bottom: 12px; padding: 5px 9px; border-radius: 6px; font-size: 12px; color: var(--navy-100); background: rgba(15,18,66,0.7); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- footer: a glass card over the live district, blurred, the wordmark bleeding off the bottom ---------- */
.foot { --wm: min(220px, 15.28vw); overflow: hidden; padding: 120px 0 calc(var(--wm) * 0.555); isolation: isolate; background: none; }
.foot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: auto; background: linear-gradient(180deg, rgba(15,18,66,0.55), rgba(15,18,66,0.35) 60%, rgba(15,18,66,0.85));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.foot-mark { position: absolute; left: calc(50% - var(--wm) * 3.364); bottom: calc(var(--wm) * -0.118); margin: 0; z-index: 0; pointer-events: none !important;
  font: 500 var(--wm)/1 var(--sans); letter-spacing: -0.04em; white-space: nowrap;
  background: linear-gradient(180deg, var(--navy-100) 10.7%, #12154b 93.2%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot-card { position: relative; z-index: 1; display: grid; gap: 40px; padding: 64px 64px 36px; border: 1px solid var(--line); border-radius: var(--r);
  background: rgba(15,18,66,0.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 30px 80px rgba(5,7,30,0.45); }
.foot-cols { display: grid; grid-template-columns: 360fr 250fr 210fr 332fr; }
.foot-brand { display: flex; flex-direction: column; gap: 28px; padding-right: 30px; }
.foot-brand .wordmark .logo { height: 40px; }
.foot-brand p { margin: 0; max-width: 300px; font-size: 15px; line-height: 1.55; color: var(--navy-200); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 0 30px; border-left: 1px solid var(--line); font-style: normal; }
.foot-col:last-child { padding-right: 0; }
.foot-col h2 { margin: 0; }
.foot-col p { margin: 0; }
.foot-links { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.foot-links li { display: flex; align-items: center; gap: 10px; }
.foot-links img { display: block; flex: none; }
.foot-links a, .foot-inv a, .social a, .foot-legal-links a { font-size: 15px; line-height: 1.55; color: var(--navy-100); }
.foot a.u { transition: color 200ms var(--ease), background-size 450ms var(--ease); }
.foot a.u:hover, .foot a.u:focus-visible { color: var(--mag-500); }
.foot-big { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.foot-big a { font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; color: var(--navy-50); }
.foot-inv { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.foot-inv span { font-size: 13px; line-height: 1.5; color: var(--navy-300); }
.social { display: flex; gap: 16px; }
.foot-legal { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--navy-300); }
.foot-legal-links { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.foot-legal-links i { width: 1px; height: 16px; background: var(--line); }
/* larger screens: 20px after each column's links; the link columns never narrow past their longest line (the brand gives) */
@media (min-width: 1081px) {
  .foot-cols { grid-template-columns: minmax(0, 360fr) minmax(max-content, 250fr) minmax(max-content, 210fr) minmax(max-content, 332fr); }
  .foot-col { padding-right: 20px; }
  .foot-col:last-child { padding-right: 0; }
}
@media (max-width: 1080px) {
  .foot-card { padding: 48px 40px 32px; }
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .foot-brand { grid-column: 1 / -1; padding-right: 0; }
  .foot-brand + .foot-col { border-left: 0; padding-left: 0; }
  .foot-legal { flex-wrap: wrap; }
}
/* tablets and small laptops (641–1080px): ventures, explore and get in touch in one row; get in touch holds the
   longest lines (the phone number, the email), so it takes the widest column */
@media (min-width: 641px) and (max-width: 1080px) {
  .foot-cols { grid-template-columns: minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 1.3fr); } /* no line wraps */
  .foot-col { padding: 0 28px; }
  .foot-col:last-child { padding-right: 0; }
}
/* tablets: a little tighter, so the three columns fit down to 641px */
@media (min-width: 641px) and (max-width: 820px) {
  .foot-col { gap: 16px; padding: 0 18px; }
  .foot-links a, .foot-inv a, .social a { font-size: 14px; }
  .foot-links li { gap: 8px; }
  .foot-big a { font-size: 17px; }
  /* get in touch can narrow to its longest line; the social links wrap before the number or an email would */
  .foot-cols { grid-template-columns: minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(min-content, 1.3fr); }
  .foot-big a, .foot-inv a { white-space: nowrap; }
  .social { flex-wrap: wrap; gap: 4px 14px; }
}
@media (max-width: 640px) {
  .foot { padding-top: 72px; }
  .foot-card { padding: 32px 20px 24px; gap: 32px; }
  .foot-cols { grid-template-columns: 1fr; row-gap: 28px; }
  .foot-col, .foot-brand + .foot-col { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .foot-big a { font-size: 20px; }
  .foot-legal { flex-direction: column; align-items: flex-start; }
}

/* company thumbnails only appear on phones; the logo tile only in the phones' venture card */
.cos .thumb, .cos .mark { display: none; }

@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  /* phones: each company is its own stop; its building shows above the card */
  .c-net { padding: 30vh 0 20vh; }
  .c-net .panel { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; max-height: none; overflow: visible; }
  .c-net .panel h2, .c-net .panel .lede { padding: 20px; margin: 0; background: rgba(15,18,66,0.86); }
  .c-net .panel h2 { border-radius: var(--r) var(--r) 0 0; padding-bottom: 8px; }
  .c-net .panel .lede { border-radius: 0 0 var(--r) var(--r); padding-top: 0; max-width: none; } /* as wide as the title above it, so the two read as one card */
  .cos { border: 0; margin-top: 0; }
  .cos li { min-height: 88vh; display: flex; align-items: flex-end; }
  .cos a, .cos li.focus a { display: block; width: 100%; padding: 14px; border-radius: var(--r); border: 0; background: rgba(15,18,66,0.9); box-shadow: inset 0 0 0 1px var(--line); }
  .cos li.focus a { box-shadow: inset 0 0 0 1px var(--c, var(--mag-500)); }
  .cos .thumb { display: block; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; margin-bottom: 12px; background: var(--navy-900); }
  .cos .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .cos .thumb.logo { display: grid; place-items: center; }
  .cos .thumb.logo img { width: auto; height: auto; max-width: 50%; max-height: 42%; object-fit: contain; }
  .cos b { display: block; font-size: 20px; }
  .cos span { display: block; margin-top: 4px; }
  .cos i { display: none; }
  /* lighter glass on phones */
  .panel, .closing .notch, .pill, .mailsheet { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .panel, .closing .notch { background: rgba(15,18,66,0.9); }
  /* (and none behind what moves: the principle cards as they stack, the names over the towers) */
  .c-principles .holds li, #labels .lbl { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .c-principles .holds li { background: rgba(15, 18, 66, 0.92); }
}

/* founders / investors / contact, content from novainnovation.ai */
.panel .sub { margin: 28px 0 12px; font-weight: 500; font-size: 15px; color: var(--navy-300); }
.brings { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.brings > div { padding: 16px; border-radius: 10px; background: rgba(27, 32, 117, 0.6); box-shadow: inset 0 0 0 1px var(--line); }
.brings h4 { margin: 0 0 6px; font-weight: 500; font-size: 17px; color: var(--navy-50); }
.brings p { margin: 0; font-size: 14px; color: var(--navy-300); }
.steps5 { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 28px; padding: 0; }
.steps5 li { counter-increment: s; padding-top: 14px; border-top: 1px solid var(--line); }
.steps5 li::before { content: counter(s, decimal-leading-zero); display: block; margin-bottom: 8px; font: 500 12px var(--mono); color: var(--mag-500); }
.steps5 b { display: block; font-weight: 500; font-size: 17px; color: var(--navy-50); }
.steps5 span { display: block; margin-top: 4px; font-size: 14px; color: var(--navy-300); }
.c-founders { align-items: flex-end; }
.c-investors .panel { grid-column: 8 / 13; }
.value { list-style: none; margin: 22px 0 18px; padding: 0; border-top: 1px solid var(--line); }
.value li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.value b { display: block; font-weight: 500; font-size: 18px; color: var(--navy-50); }
.value span { display: block; margin-top: 4px; font-size: 14px; color: var(--navy-300); }
.panel .fine { margin: 0 0 22px; font-size: 14px; color: var(--navy-200); }
.doors4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1040px; margin: 0 auto 28px; text-align: left; }
.doors4 a { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 12px; background: rgba(15, 18, 66, 0.55); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 300ms var(--ease), transform 500ms var(--ease); }
.doors4 a:hover { background: rgba(27, 32, 117, 0.7); }
.doors4 b { font-weight: 500; font-size: 20px; color: var(--navy-50); }
.doors4 span { font-size: 14px; color: var(--navy-300); }
.doors4 i { margin-top: auto; padding-top: 12px; font-style: normal; font-size: 14px; color: var(--mag-500); }
@media (max-width: 1080px) { .brings, .steps5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .doors4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-investors .panel { grid-column: 6 / 13; } }
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) { .brings, .steps5, .doors4 { grid-template-columns: 1fr; } .c-investors .panel { grid-column: 1 / -1; } .c-founders, .c-investors { min-height: auto; padding: 40vh 0 60px; } }

.foot-base { color: var(--navy-300); }

/* step chapters: the list stays while the district acts out each step */
.c-steps { position: relative; height: calc(100vh + var(--n, 4) * 62vh); }
.c-steps > .wrap { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; padding-top: 88px; padding-bottom: 16px; }
.c-steps .panel { grid-column: 1 / 6; max-height: calc(100vh - 112px); overflow: auto; scrollbar-width: none; }
.c-steps.flip .panel { grid-column: 8 / 13; }
.c-steps .panel h2 { font-size: clamp(34px, 3.8vw, 56px); margin-bottom: 14px; }
.c-steps .lede { font-size: 16px; }
.stepper { list-style: none; counter-reset: st; margin: 22px 0 24px; padding: 0; border-top: 1px solid var(--line); }
.stepper li { counter-increment: st; position: relative; padding: 13px 0 13px 44px; border-bottom: 1px solid var(--line); transition: padding 400ms var(--ease); }
.stepper li::before { content: attr(data-n); position: absolute; left: 0; top: 15px; font: 500 12px var(--mono); color: var(--navy-400); transition: color 300ms var(--ease); }
.stepper b { display: block; font-weight: 500; font-size: 18px; color: var(--navy-200); transition: color 300ms var(--ease); }
.stepper span { display: grid; grid-template-rows: 0fr; overflow: hidden; font-size: 14px; color: var(--navy-300); transition: grid-template-rows 500ms var(--ease), margin 500ms var(--ease); }
.stepper span::before { content: ""; }
.stepper li.on { box-shadow: inset 3px 0 0 var(--mag-500); padding-left: 56px; }
.stepper li.on::before { color: var(--mag-500); left: 14px; }
.stepper li.on b { color: var(--navy-50); }
.stepper li.done b { color: var(--navy-100); }
.stepper li.done::before { color: var(--navy-200); }
.stepper li span { max-height: 0; transition: max-height 500ms var(--ease), margin 500ms var(--ease); display: block; }
.stepper li.on span { max-height: 90px; margin-top: 6px; }
.lbl.slab { background: rgba(15,18,66,0.75); color: var(--navy-100); font-size: 10px; }
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) { .lbl.slab { padding: 0 4px; line-height: 1.25; border-radius: 3px; letter-spacing: 0.04em; } } /* phones, tablets: each name as tall as its layer (city.js) */
.lbl.you { background: var(--mag-500); color: #fff; box-shadow: none; }
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .c-steps { height: auto; padding: 40vh 0 60px; }
  .c-steps > .wrap { position: static; height: auto; display: block; padding: 0; }
  .c-steps .panel { max-height: none; }
  .stepper li span { max-height: none; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .stepper li span { max-height: none; } }

/* building to company page: an aperture opens from the tower */
.aperture { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(120% 90% at 80% 0%, #1b2075 0%, #0f1242 60%);
  clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%)); transition: clip-path 800ms cubic-bezier(0.7, 0, 0.2, 1); }
.aperture.open { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); }
.aperture div { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 0 24px; opacity: 0; transform: translateY(14px); transition: opacity 350ms var(--ease) 380ms, transform 600ms var(--ease) 380ms; }
.aperture.open div { opacity: 1; transform: none; }
.aperture span { font-size: 15px; color: var(--navy-300); }
.aperture b { font-weight: 400; font-size: clamp(44px, 6vw, 96px); line-height: 1; letter-spacing: -0.045em; color: var(--navy-50); }
/* on the company page it closes: the aperture shrinks into the page */
.aperture.closing { clip-path: circle(150% at 50% 40%); transition: none; }
.aperture.closing.go { clip-path: circle(0% at 50% 40%); transition: clip-path 750ms cubic-bezier(0.7, 0, 0.2, 1) 250ms; }
.aperture.closing div { opacity: 1; transform: none; }
.aperture.closing.go div { opacity: 0; transform: translateY(-10px) scale(0.98); transition: opacity 300ms var(--ease), transform 500ms var(--ease); }
@media (prefers-reduced-motion: reduce) { .aperture { display: none; } }

/* ---------- phones ---------- */
.swipe { display: none; }
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  /* networks: a swipeable row of company cards; the building shows above */
  .c-net { height: auto; min-height: 100svh; padding: 0 0 48px; display: flex; flex-direction: column; justify-content: flex-end; }
  .c-net > .wrap { position: static; height: auto; display: block; padding: 0 var(--pad); }
  .c-net .panel h2 { font-size: 30px; }
  .c-net .panel .lede { font-size: 15px; }
  .swipe { display: flex; align-items: baseline; gap: 4px; margin: 14px 2px 10px; font: 500 13px var(--mono); color: var(--navy-200); }
  .swipe i { margin-left: auto; font-style: normal; font-family: var(--sans); font-size: 13px; color: var(--navy-400); }
  /* wide cards, with the next one peeking in at the right edge as a cue to swipe; the gap matches the gutter,
     so nothing of the previous card shows on the left */
  .cos { display: flex; gap: var(--pad); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .cos::-webkit-scrollbar { display: none; }
  .cos li { flex: 0 0 calc(100% - 40px); min-height: 0; display: block; scroll-snap-align: start; scroll-snap-stop: always; }
  .cos li:last-child { margin-right: 40px; } /* so the last card can snap to the same place as the others */
  .cos a, .cos li.focus a { height: 100%; }
  .cos .thumb { margin-bottom: 10px; }
  .cos b { font-size: 18px; }
  .cos span { font-size: 13px; }

  /* less empty space between chapters, but room to see the district */
  .c-intro, .c-plan { padding: 30vh 0 48px; min-height: auto; }
  .c-steps { padding: 30vh 0 48px; }
  .c-jump { min-height: 80vh; }

  /* hero: the district in the top half, the words below */
  .c-hero { padding-bottom: 24px; }
  .c-hero::before { background: linear-gradient(180deg, rgba(15,18,66,0) 30%, rgba(15,18,66,0.85) 58%, rgba(15,18,66,0.95) 100%); }
  .c-h1 { font-size: clamp(46px, 13.5vw, 64px); }
  .c-sub { font-size: 16px; margin: 18px 0 22px; }
  .c-actions .btn { flex: 1; }
  .c-stats { margin-top: 32px; }
  .c-stats dt { font-size: 28px; }
  .c-stats dd { font-size: 10px; letter-spacing: 0.04em; }


  /* founders / investors: tighter step lists */
  .stepper li { padding: 11px 0 11px 36px; }
  .stepper li.on { padding-left: 46px; }
  .stepper b { font-size: 16px; }

  .closing h2 { font-size: 32px; }
}

/* company rows: highlight without moving anything the pointer can land on */
.cos li { position: relative; }
.cos li::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--c, var(--mag-500)); transform: scaleY(0); transform-origin: center; transition: transform 350ms var(--ease); pointer-events: none; }
.cos li.focus::before { transform: scaleY(1); }
.cos li:hover::before { transform: scaleY(1); }
.cos a > b, .cos a > span:not(.thumb) { transition: transform 450ms var(--ease), color 200ms var(--ease); }
.cos li.focus a > b, .cos li.focus a > span:not(.thumb), .cos li:hover a > b, .cos li:hover a > span:not(.thumb) { transform: translateX(14px); }
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .cos li::before { display: none; }
  .cos li.focus a > b, .cos li.focus a > span:not(.thumb), .cos li:hover a > b, .cos li:hover a > span:not(.thumb) { transform: none; }
}

/* hover looks like the company in focus (bar, shift, colour) but in a duller shade of the venture's colour,
   so the two never read as the same; the row in focus keeps its full colour */
@media (hover: hover) and (min-width: 821px) and (min-aspect-ratio: 401/500), (hover: hover) and (min-width: 1181px) {
  .cos li { --c-dull: color-mix(in srgb, var(--c, #e002f7) 50%, #6b6f8f); }
  .cos li:not(.focus):hover::before { transform: scaleY(1); background: var(--c-dull); opacity: 0.6; }
  .cos li:not(.focus):hover b, .cos li:not(.focus):hover i { color: var(--c-dull); }
}

/* showcase: content crossfades; the image reveals once it has loaded */
.showcase .body { transition: opacity 220ms var(--ease), transform 320ms var(--ease); }
.showcase.swap .body { opacity: 0; transform: translateY(6px); }
.showcase .shot img { clip-path: inset(0 0 100% 0); transition: clip-path 650ms var(--ease), transform 1200ms var(--ease); }
.showcase .shot.ready img { clip-path: inset(0 0 0 0); }
.showcase.on .shot img:not(.ready *) { }

.ov-nets a { position: relative; }
.ov-nets a > small { transition: transform 400ms var(--ease); }
.ov-nets a:hover > small { transform: translateX(-6px); }

/* step lists: the active step is marked without changing any row's size */
.stepper li, .stepper li.on { padding-left: 44px; }
.stepper li.on::before { left: 0; }
.stepper li { box-shadow: none; }
.stepper li::after { content: ""; position: absolute; left: -12px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--mag-500); transform: scaleY(0); transition: transform 350ms var(--ease); }
.stepper li.on::after { transform: scaleY(1); }
.stepper li.on { box-shadow: none; }
.stepper b, .stepper li > span { transition: transform 450ms var(--ease), color 300ms var(--ease); }
.stepper li.on b, .stepper li.on > span { transform: translateX(8px); }

/* ---------- phones: founders, investors and the four networks show the district ---------- */
.dots, .step-nav, .net-open { display: none; }
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  /* founders / investors: one screen, the panel at its foot; the steps move only by swipe or arrow */
  /* pinned: the card stays at the foot of the screen while the page scrolls through the steps (a swipe or an
     arrow moves the page to that step, page.js) */
  .c-steps { height: calc(100svh + var(--n, 4) * 70svh); padding: 0; }
  .c-steps > .wrap { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; padding: 0 var(--pad) 16px; }
  .c-steps .panel, .c-steps.flip .panel { max-height: none; overflow: hidden; padding: 18px 18px 16px; }
  .c-steps .panel h2 { font-size: 24px; margin-bottom: 10px; }
  .c-steps .panel .lede, .c-steps .panel .fine { display: none; }
  .c-steps .stepper { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 0 14px; border-top: 0; scrollbar-width: none; overscroll-behavior-x: contain; }
  .c-steps .stepper::-webkit-scrollbar { display: none; }
  /* one card fills the row, so no neighbour ever shows beside it; the dots and arrows say there are more */
  .c-steps .stepper li, .c-steps .stepper li.on { flex: 0 0 100%; display: block; padding: 0 0 0 30px; border: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  .c-steps .stepper li::before { top: 3px; }
  .c-steps .stepper li::after { display: none; }
  .c-steps .stepper li b, .c-steps .stepper li > span { transform: none !important; }
  .c-steps .stepper li > span { max-height: none; margin-top: 6px; font-size: 14px; }
  .c-steps .btn { width: 100%; }
  .step-foot { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
  .dots { display: flex; gap: 6px; margin: 0; }
  /* small arrows beside the dots: a hint that the steps swipe, and a way to tap through them */
  .step-nav { display: flex; gap: 6px; }
  .step-nav button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(230, 231, 244, 0.08); box-shadow: inset 0 0 0 1px var(--line); color: var(--navy-100); transition: background 200ms var(--ease), opacity 200ms var(--ease); }
  .step-nav button:active { background: rgba(230, 231, 244, 0.18); }
  .step-nav button:disabled { opacity: 0.35; }
  .dots i { width: 18px; height: 3px; border-radius: 2px; background: var(--navy-700); transition: background 300ms var(--ease), width 300ms var(--ease); }
  .dots i.on { width: 30px; background: var(--mag-500); }
  .dots i.done { background: var(--navy-300); }

  .c-intro { min-height: 100svh; padding: 0 0 20px; align-items: flex-end; }
  .c-intro .panel { padding: clamp(18px, 3.2vw, 28px); max-width: none; } /* full width, phones and tablets alike */
  .c-intro .panel h2 { font-size: clamp(28px, 5.4vw, 44px); }
  .c-intro .panel .lede { font-size: clamp(14px, 2vw, 17px); max-width: none; }
}
/* the thesis line and "Four networks": close enough to read as one run, with room left above the panel
   for the four districts; tablets have more height to spare than phones */
@media (max-width: 640px) {
  .c-jump { min-height: 0; padding: 16svh 0 6svh; }
  .c-intro { --ih: 100svh; --ip: 20px; } /* a full screen: the district stands above the card */
}
@media (min-width: 641px) and (max-width: 820px), (min-width: 821px) and (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .c-jump { min-height: 0; padding: 14svh 0 5svh; }
  .c-intro { --ih: 100svh; --ip: 24px; }
}
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } }
.leader { overflow: hidden !important; }

/* ---------- colour-coded ventures ---------- */
.lbl.net { display: grid; gap: 3px; justify-items: center; padding: 8px 12px 7px; border-top: 2px solid var(--c); background: rgba(15,18,66,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-transform: none; letter-spacing: 0; transition: opacity 300ms var(--ease), transform 0s; }
.lbl.net b { font: 500 13px var(--sans); color: var(--navy-50); }
.lbl.net small { font: 400 12px var(--sans); color: var(--c); }
.lbl.net.hi { background: rgba(27,32,117,0.95); }
.lbl.net { box-sizing: border-box; align-content: center; } /* its size (set by city.js, the same for all four) includes its padding */

/* menu: category left, mother company right, colour dot */
.ov-nets a { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 14px; text-align: left; }
.ov-nets a i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.ov-nets a b { font-weight: 400; font-size: 18px; white-space: nowrap; color: var(--navy-50); transition: color 200ms var(--ease); }
.ov-nets a span { font-size: 14px; white-space: nowrap; color: var(--navy-300); }
/* a column too narrow for a venture and its company side by side (small laptops, phones): the company goes under the name */
.nav-nets { container-type: inline-size; }
@container (max-width: 319px) {
  .ov-nets a { grid-template-columns: 10px 1fr; row-gap: 2px; }
  .ov-nets a span { grid-column: 2; }
}
.ov-nets a:hover b { color: var(--c); }
.ov-nets small { display: none; }
/* the open menu fits the screen without scrolling. Tablets: the sections and the ventures side by side, "Talk to us"
   across the foot with its button beside the contacts */
@media (min-width: 641px) and (max-width: 820px), (min-width: 821px) and (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .nav-cols { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .nav-talk { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: end; }
  .nav-talk .ov-h { grid-column: 1 / -1; }
  .ov-contact { margin: 0; }
  .nav-talk .btn { width: auto; margin: 0; }
}
/* phones: tighter, the sections in two columns, each venture's company beside it again where the column allows */
@media (max-width: 640px) {
  .nav-cols { gap: 8px; padding: 8px; }
  .nav-col { padding: 14px 16px 16px; }
  .ov-h { margin: 0 0 6px; }
  .ov-main { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .ov-main .ov-h { grid-column: 1 / -1; }
  .ov-main a { font-size: 17px; padding: 8px 0; }
  .ov-main a:nth-last-child(2) { border-bottom: 0; }
  .ov-nets a { padding: 8px 0; gap: 10px; }
  .ov-nets a b { font-size: 15px; }
  .ov-nets a span { font-size: 12px; }
  .ov-contact { margin: 0 0 12px; font-size: 14px; line-height: 1.6; }
  @container (min-width: 250px) {
    .ov-nets a { grid-template-columns: 10px 1fr auto; row-gap: 0; }
    .ov-nets a span { grid-column: auto; }
  }
}
/* (short phones: a little less air between the rows) */
@media (max-width: 640px) and (max-height: 700px) {
  .ov-main a, .ov-nets a { padding: 6px 0; }
  .nav-talk .btn { height: 44px; }
}

/* showcase: logo plate tinted with the venture colour */
.showcase .shot.logo { background: radial-gradient(90% 90% at 50% 45%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), var(--navy-900); }
.showcase .shot.logo img { max-width: 58%; max-height: 50%;  }

/* closing: a plain glass panel */
.closing { padding: 89px 0 119px; }
.closing .notch { pointer-events: auto; clip-path: none; border: 1px solid var(--line); border-radius: var(--r);
  background: rgba(15, 18, 66, 0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 12px 40px rgba(5, 7, 30, 0.35);
  padding: 72px var(--pad) 64px; text-align: center; }
.closing h2 { max-width: 13em; margin: 0 auto 32px; font-size: clamp(32px, 4.4vw, 63px); letter-spacing: -0.035em; text-wrap: wrap; }
.closing .doors4 { max-width: 1040px; margin: 0 auto; }
.doors4 a { background: rgba(15, 18, 66, 0.72); box-shadow: none; border: 1px solid var(--line); transition: border-color 300ms var(--ease), background 300ms var(--ease); }
.doors4 a:hover { border-color: rgba(162, 166, 225, 0.5); box-shadow: none; }
.doors4 b { line-height: 1.3; letter-spacing: -0.02em; }
.doors4 span, .doors4 i { line-height: 1.55; }
.doors4 i { padding-top: 0; }
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .closing { padding: 56px 0 72px; }
  .closing .notch { padding: 48px 20px 40px; }
}

/* ---------- hero variations ---------- */
.h-b, .h-c, .h-d { display: none; }
html[data-hero="b"] .h-a, html[data-hero="c"] .h-a, html[data-hero="d"] .h-a { display: none; }
html[data-hero="b"] .h-b, html[data-hero="d"] .h-d { display: block; }
html[data-hero="c"] .h-c { display: grid; }
html[data-hero="b"] .c-hero::before, html[data-hero="d"] .c-hero::before { background: linear-gradient(180deg, rgba(15,18,66,0) 35%, rgba(15,18,66,0.8) 78%); }
html[data-hero="c"] .c-hint, html[data-hero="d"] .c-hint { display: none; }

/* B: the district flies in, words centred below */
.h-b { text-align: center; }
.hb-kicker { margin: 0 0 14px; font-size: 15px; color: var(--navy-300); }
.hb-h1 { margin: 0; font-size: clamp(52px, 8.4vw, 136px); line-height: 0.95; letter-spacing: -0.05em; }
.hb-sub { margin: 22px auto 28px; max-width: 30em; color: var(--navy-100); }
.hb-actions { justify-content: center; }
html[data-hero="b"] .h-stats .c-stats { justify-content: center; }

/* C: headline left, the four ventures as a colour legend right */
.h-c { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.hc-h1 { margin: 0 0 22px; font-size: clamp(48px, 6.4vw, 104px); line-height: 0.95; letter-spacing: -0.05em; }
.hc-copy .lede { margin: 0 0 28px; color: var(--navy-100); }
.hc-legend { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); background: rgba(15,18,66,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 0 0 var(--r) var(--r); }
.hc-legend a { display: grid; grid-template-columns: 12px 1fr; gap: 2px 14px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); transition: background 250ms var(--ease); }
.hc-legend i { grid-row: 1 / span 2; width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.hc-legend b { font-weight: 500; font-size: 20px; letter-spacing: -0.02em; color: var(--navy-50); }
.hc-legend span { font-size: 14px; color: var(--c); }
.hc-legend a:hover { background: rgba(27,32,117,0.7); }

/* D: kinetic statement over a low, dramatic angle */
.h-d { text-align: left; }
.hd-h1 { margin: 0 0 clamp(28px, 5vh, 48px); font-size: clamp(60px, 11vw, 188px); line-height: 0.88; letter-spacing: -0.06em; }
.hd-h1 span { display: inline-block; opacity: 0; transform: translateY(24px); animation: hd-in 900ms var(--ease) forwards; }
.hd-h1 span:nth-child(2) { animation-delay: 120ms; } .hd-h1 span:nth-child(3) { animation-delay: 240ms; } .hd-h1 span:nth-child(4) { animation-delay: 360ms; } .hd-h1 span:nth-child(5) { animation-delay: 480ms; color: var(--mag-500); }
@keyframes hd-in { to { opacity: 1; transform: none; } }
.hd-foot { display: flex; align-items: end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.hd-foot .lede { margin: 0; max-width: 28em; color: var(--navy-100); }

/* local switcher */
.hero-switch { position: fixed; left: 16px; top: 88px; z-index: 50; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: rgba(15,18,66,0.92); box-shadow: inset 0 0 0 1px var(--line); font: 500 12px var(--mono); color: var(--navy-300); }
.hero-switch a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--navy-100); }
.hero-switch a.on { background: var(--mag-500); color: #fff; }
.hero-switch span { padding: 0 6px; }

@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .h-c { grid-template-columns: 1fr; }
  .hc-legend a { padding: 12px 14px; }
  .hc-legend b { font-size: 17px; }
  .hd-h1 { font-size: clamp(52px, 16vw, 80px); }
  .hb-h1 { font-size: clamp(46px, 13.5vw, 64px); }
  .c-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .hd-h1 span { opacity: 1; transform: none; animation: none; } }

.lbl.net small, .hc-legend span, .ov-nets a:hover b { color: color-mix(in srgb, var(--c) 55%, white); }

/* white logos on navy: same size and weight everywhere */
.showcase .shot.logo img, .tag .shot.logo img { max-width: 62%; max-height: 52%; object-fit: contain; }

/* ---------- principles: four glass cards; pinned, each one slides over the last and leaves its title showing ---------- */
.c-principles { position: relative; padding: 124px 0 120px; }
.c-principles h2 { margin: 0 0 102px; text-align: center; font-size: clamp(36px, 3.8vw, 55px); letter-spacing: -0.035em; }
.holds { position: relative; display: grid; gap: 16px; width: min(455px, 100%); margin: 0 auto; padding: 0; list-style: none; }
.holds li { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: rgba(15, 18, 66, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.holds .in { padding: 66px 36px; }
.holds h3 { max-width: 382px; margin: 0 0 12px; font-weight: 400; font-size: 36px; line-height: 1.02; letter-spacing: -0.035em; color: var(--navy-50); }
.holds p { max-width: 381px; margin: 0; font-size: 17px; line-height: 1.55; color: var(--navy-300); }
/* set by page.js unless motion is reduced */
/* --hold-h (phones, tablets): the pin ends at the finished stack, so the next section follows without a gap */
.c-principles.stack { height: calc(var(--hold-h, 100vh) + 3 * 60vh); padding: 0; }
.c-principles.stack > .wrap { position: sticky; top: 0; height: var(--hold-h, 100vh); padding-top: 124px; overflow: hidden; }
.c-principles.stack .holds { display: block; }
.c-principles.stack .holds li { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }
/* phones, tablets: a shorter pin, and the cards still to come show down to the screen's edge rather than stopping
   where the finished stack ends; the chapter itself clips them, so they never run over the next one */
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .c-principles.stack { height: calc(var(--hold-h, 100vh) + 3 * 36vh); overflow: clip; }
  .c-principles.stack > .wrap { overflow: visible; }
}
@media (min-width: 641px) and (max-width: 820px), (min-width: 821px) and (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  /* tablets: wider cards, closer to their heading */
  .c-principles.stack > .wrap { padding-top: 112px; }
  .c-principles h2 { margin-bottom: 40px; font-size: 44px; }
  .holds { width: min(600px, 100%); }
  .holds .in { padding: 44px 36px; }
  .holds h3 { max-width: none; font-size: 34px; }
  .holds p { max-width: 480px; }
}
@media (max-width: 640px) {
  .c-principles { padding-top: 104px; }
  .c-principles.stack > .wrap { padding-top: 120px; }
  .c-principles h2 { margin-bottom: 28px; font-size: 36px; }
  .holds .in { padding: 40px 24px; }
  .holds h3 { font-size: 28px; }
  .holds p { font-size: 16px; }
}
/* short phones: tighter cards, so the finished stack fits on screen with every card whole */
@media (max-width: 640px) and (max-height: 760px) {
  .c-principles.stack > .wrap { padding-top: 96px; }
  .c-principles h2 { margin-bottom: 18px; font-size: 30px; }
  .holds .in { padding: 26px 22px; }
  .holds h3 { margin-bottom: 8px; font-size: 24px; }
  .holds p { font-size: 15px; line-height: 1.5; }
}
@media (max-width: 640px) and (max-height: 600px) {
  .c-principles.stack > .wrap { padding-top: 88px; }
  .c-principles h2 { margin-bottom: 14px; font-size: 26px; }
  .holds .in { padding: 20px 18px; }
  .holds h3 { font-size: 21px; }
  .holds p { font-size: 14px; line-height: 1.45; }
}

/* A: the stats stand in light above two towers */
.beam-stat { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: calc(6px * var(--k, 1)); text-align: center; pointer-events: none; opacity: 0; transition: opacity 500ms var(--ease); }
.beam-stat.on { opacity: 1; }
.beam-stat small { max-width: 11em; font-size: calc(13px * var(--k, 1)); line-height: 1.35; color: var(--navy-300); } /* #A2A6E1 */
.beam-stat b { font-variant-numeric: tabular-nums; font-weight: 400; font-size: calc(49px * var(--k, 1)); line-height: 1; letter-spacing: -0.04em; color: var(--navy-50); text-shadow: 0 0 24px rgba(203,204,236,0.55); } /* #F5F5FA */
/* the row under the text steps aside while the stats stand in their lights (set by city.js when they fit) */
html[data-hero="a"] .h-stats .c-stats > div:not(.c-hint) { transition: opacity 400ms var(--ease), visibility 0s; }
html[data-hero="a"].beams-pending .h-stats .c-stats > div:not(.c-hint), html[data-hero="a"].beams-on .h-stats .c-stats > div:not(.c-hint) { opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease), visibility 0s linear 400ms; }
/* the flashlight: #E6E7F42E (#E6E7F4 at 18%), 173 x 128, a progressive blur from 70 at the top to none at the roof */
.beam-light { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity 500ms var(--ease); }
.beam-light.on { opacity: 1; }
.beam-light i { position: absolute; }
/* a progressive blur, as three layers that hand over from the roof upward: sharp at the roof, hazier as it rises */
.beam-light span { position: absolute; background: rgba(230, 231, 244, 0.18); clip-path: var(--clip); }
.beam-light .sharp { inset: 0; -webkit-mask-image: linear-gradient(to top, #000 2%, transparent 12%); mask-image: linear-gradient(to top, #000 2%, transparent 12%); }
.beam-light .sharp span { inset: 0; }
.beam-light .mid { inset: -50px; filter: blur(10px); -webkit-mask-image: linear-gradient(to top, transparent 2%, #000 12%, #000 36%, transparent 56%); mask-image: linear-gradient(to top, transparent 2%, #000 12%, #000 36%, transparent 56%); }
.beam-light .mid span { inset: 50px; }
.beam-light .soft { inset: -90px; filter: blur(35px); -webkit-mask-image: linear-gradient(to top, transparent 36%, #000 56%); mask-image: linear-gradient(to top, transparent 36%, #000 56%); }
.beam-light .soft span { inset: 90px; }
/* design: the hero heading box is 540 x 174 */
@media (min-width: 821px) and (min-aspect-ratio: 401/500), (min-width: 1181px) { .c-h1 { width: 540px; max-width: 100%; } }
/* design: hero "Explore our ventures", 174 x 52, radius 8, 26px sides; Host Grotesk 400 13px / 150% */
.h-a .btn.mag { height: 52px; gap: 10px; padding: 0 26px; border-radius: 8px; background: linear-gradient(99.84deg, #e002f7 0%, #a101b1 86.96%); font: 400 13px/1.5 var(--sans); font-style: normal; letter-spacing: 0; text-transform: none; }
/* design: hero "Pitch your idea", 143 x 52, radius 8, 26px sides, 1px #A2A6E129 border, #E6E7F41A glass (blur 14);
   Host Grotesk 400 13px / 150%, #F5F5FA */
.h-a .btn.dim { height: 52px; gap: 10px; padding: 0 26px; border-radius: 8px; border: 1px solid rgba(162, 166, 225, 0.16); box-shadow: none; background: rgba(230, 231, 244, 0.1); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); color: var(--navy-50); font: 400 13px/1.5 var(--sans); font-style: normal; letter-spacing: 0; text-transform: none; }
.h-a .btn.dim:hover { background: rgba(230, 231, 244, 0.18); }

/* ---------- network colours: the showcase and hover card take the colour of the building's network ---------- */
.showcase .btn.mag { background: var(--c, var(--mag-500)); color: var(--c-ink, #fff); }
.showcase .btn.mag:hover { filter: brightness(1.1); }
.showcase .where, .tag .where { color: var(--c, var(--navy-300)); }
/* A: the hover hint sits centred along the bottom of the hero (the stats above it are hidden) */
@media (min-width: 821px) and (min-aspect-ratio: 401/500), (min-width: 1181px) {
  html[data-hero="a"].beams-pending .c-hint, html[data-hero="a"].beams-on .c-hint { grid-column: 1 / -1; grid-row: 1; justify-content: center; }
  /* keep the hidden stats on the same row, so the hero doesn't grow */
  html[data-hero="a"] .c-stats > div:nth-child(1) { grid-column: 1; grid-row: 1; }
  html[data-hero="a"] .c-stats > div:nth-child(2) { grid-column: 2; grid-row: 1; }
}

/* the local hero switcher steps aside while the menu is open */
html.menu-open .hero-switch { opacity: 0; pointer-events: none; }

/* cards cover the tower hover card; everything else in the page sits under it.
   The pinned chapters' sticky wraps form their own stacking context, so the wrap itself is lifted */
main .panel, .holds li, .closing .notch { position: relative; z-index: 2; }
.c-principles.stack .holds li { position: absolute; }
.c-net > .wrap, .c-steps > .wrap, .c-principles.stack > .wrap { z-index: 2; }

/* ---------- responsive fixes ---------- */
/* small laptops: a narrower company card leaves room for its building beside the list */
@media (min-width: 821px) and (min-aspect-ratio: 401/500) and (max-width: 1180px) { .showcase { width: min(320px, 27vw); } }
/* short screens (a phone held sideways): no room for the company card beside the list, the list itself is the showcase */
@media (min-width: 821px) and (min-aspect-ratio: 401/500) and (max-height: 560px), (min-width: 1181px) and (max-height: 560px) { .showcase, .leader { display: none; } }

/* "Four networks. One foundation.": the heading stops growing at its 1440 size, so it never breaks into three lines */
.c-intro .panel h2 { font-size: clamp(36px, 4.4vw, 63px); }
/* short screens (a phone held sideways): a compact panel that clears the header */
@media (min-width: 821px) and (min-aspect-ratio: 401/500) and (max-height: 560px), (min-width: 1181px) and (max-height: 560px) {
  .c-intro { padding: 88px 0 24px; }
  .c-intro .panel { padding: 20px 22px; }
  .c-intro .panel h2 { font-size: clamp(26px, 7.5vh, 40px); margin-bottom: 10px; }
  .c-intro .panel .lede { font-size: 15px; }
}
.lbl.net.wrap { white-space: normal; text-wrap: balance; }
/* very tight (a phone held sideways): just the network name, smaller */
.lbl.net.mini { padding: 6px 6px 5px; } .lbl.net.mini b { font-size: 11px; } .lbl.net.mini small { display: none; }
/* hero: both buttons as wide as the wider one (the primary), on desktop; phones already share the row equally */
@media (min-width: 821px) and (min-aspect-ratio: 401/500), (min-width: 1181px) { .h-a .c-actions { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; justify-self: start; } }
/* "Four networks. One foundation.": a little wider where the card is at its full size, so "too." stays on the line above */
@media (min-width: 1440px) { .c-intro .panel { margin-right: -6px; } }
/* the "Open" cue on a company in the list: sentence case, like the buttons */
.cos i.open { font: 400 13px/1.5 var(--sans); letter-spacing: 0; text-transform: none; }
.swipe .count { color: var(--c, var(--navy-200)); } /* "1 / 4" on phones: in its venture's colour */

/* ---------- laptops (821–1180px wide): the desktop layout with less width to share ---------- */
@media (min-width: 821px) and (min-aspect-ratio: 401/500) and (max-width: 1180px) {
  /* founders / investors: a wider list, so the heading and intro take fewer lines and the button always fits */
  .c-steps .panel { grid-column: 1 / 7; padding: 26px 28px; }
  .c-steps.flip .panel { grid-column: 7 / 13; }
  .c-steps .panel h2 { font-size: clamp(32px, 3.6vw, 42px); margin-bottom: 12px; }
  .c-steps .lede { font-size: 15px; }
  .stepper { margin: 18px 0 20px; }
  .stepper li { padding-top: 11px; padding-bottom: 11px; }
  .stepper li.on span { max-height: 110px; }
  /* small print a step up where the screen allows it */
  .cos span { font-size: 14px; }
  .c-stats dd { font-size: 12px; letter-spacing: 0.05em; }
}
/* short laptop screens: the step lists shed the intro line, so all the steps and the button stay in view */
@media (min-width: 821px) and (min-aspect-ratio: 401/500) and (max-height: 720px), (min-width: 1181px) and (max-height: 720px) {
  .c-steps .panel .lede { display: none; }
  .c-steps .panel h2 { font-size: clamp(28px, 3.2vw, 36px); }
  .stepper li { padding-top: 9px; padding-bottom: 9px; }
}
/* any laptop up to 820px tall (1280×800, 1366×768 …): tighter step lists, so the button stays in view */
@media (min-width: 821px) and (min-aspect-ratio: 401/500) and (max-height: 820px), (min-width: 1181px) and (max-height: 820px) {
  .c-steps .panel { padding: 24px 28px; }
  .c-steps .panel h2 { margin-bottom: 10px; }
  .c-steps .lede { font-size: 15px; }
  .stepper { margin: 16px 0 18px; }
  .stepper li { padding-top: 10px; padding-bottom: 10px; }
}
/* wider laptops that are short (1366×768 …): the list takes a column more, like the smaller laptops */
@media (min-width: 1181px) and (max-height: 820px) {
  .c-steps .panel { grid-column: 1 / 7; }
  .c-steps.flip .panel { grid-column: 7 / 13; }
}
/* laptops up to 860px tall: the principle cards come in closer and a little smaller, so the finished stack fits the screen */
@media (min-width: 821px) and (min-aspect-ratio: 401/500) and (max-height: 860px), (min-width: 1181px) and (max-height: 860px) {
  .c-principles.stack > .wrap { padding-top: 104px; }
  .c-principles h2 { margin-bottom: 36px; font-size: clamp(34px, 3.4vw, 46px); }
  .holds .in { padding: 36px 32px; }
  .holds h3 { font-size: 30px; }
  .holds p { font-size: 16px; }
}
@media (min-width: 821px) and (min-aspect-ratio: 401/500) and (max-height: 680px), (min-width: 1181px) and (max-height: 680px) {
  .c-principles.stack > .wrap { padding-top: 96px; }
  .c-principles h2 { margin-bottom: 24px; font-size: 34px; }
  .holds .in { padding: 26px 28px; }
  .holds h3 { font-size: 26px; }
  .holds p { font-size: 15px; }
}
/* tablets: the "Four networks" card centred under the district, as on laptops */
@media (min-width: 641px) and (max-width: 820px), (min-width: 821px) and (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .c-intro .panel { justify-self: center; width: min(680px, 100%); text-align: center; padding: 28px 32px; }
  .c-intro .panel h2 { font-size: 40px; margin-bottom: 12px; }
  .c-intro .panel .lede { font-size: 17px; margin: 0 auto; max-width: 34em; }
}
/* laptops (821–1180px): "Four networks" stacks like a skyline: the district stands across the top, the card sits under it */
@media (min-width: 821px) and (min-aspect-ratio: 401/500) and (max-width: 1180px) {
  .c-intro { align-items: flex-end; padding: 0 0 40px; margin-bottom: 24vh; } /* room for the card's slow fade before the next chapter */
  .c-intro .panel { grid-column: 1 / -1; justify-self: center; width: min(820px, 100%); text-align: center; }
  .c-intro .panel h2 { font-size: clamp(38px, 4.2vw, 48px); }
  .c-intro .panel .lede { margin: 0 auto; max-width: 40em; }
}
/* "Four networks" up to 1180px: the card rises in under the district, then fades away before the next chapter (page.js) */
@media (max-width: 1180px) {
  .c-intro .panel { opacity: var(--o, 1); transform: translate3d(0, var(--y, 0px), 0); will-change: transform, opacity; }
}

/* ---------- one padding scale per screen size ----------
   --card-pad: every panel and page card (Four networks, venture headings, How we work, founders/investors,
   principles, contact, footer). --inner-pad: the cards inside them (companies, How we work steps, contact doors).
   Principles and contact keep a little more air above and below, never at the sides. */
@media (max-width: 1180px) { :root { --card-pad: 28px; --inner-pad: 20px; } }
@media (max-width: 640px) { :root { --card-pad: 20px; --inner-pad: 16px; } }
@media (max-width: 1180px) {
  .c-intro .panel, #how .panel, .c-steps .panel, .c-steps.flip .panel { padding: var(--card-pad); }
  .closing .notch { padding-left: var(--card-pad); padding-right: var(--card-pad); }
  .foot-card { padding-left: var(--card-pad); padding-right: var(--card-pad); }
  .bog > div, .doors4 a { padding: var(--inner-pad); }
}
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .c-net .panel h2 { padding: var(--card-pad) var(--card-pad) 8px; }
  .c-net .panel .lede { padding: 0 var(--card-pad) var(--card-pad); }
  .cos a, .cos li.focus a { padding: var(--inner-pad); }
}
@media (min-width: 821px) and (min-aspect-ratio: 401/500) and (max-width: 1180px) {
  .c-net .panel { padding: var(--card-pad); }
}
/* principle cards on the scale too, except on short screens, where the tighter cards set above keep the stack on screen */
@media (max-width: 820px) and (min-height: 761px), (max-width: 1180px) and (max-aspect-ratio: 4/5) and (min-height: 761px), (min-width: 821px) and (max-width: 1180px) and (min-aspect-ratio: 401/500) and (min-height: 861px) {
  .holds .in { padding: calc(var(--card-pad) + 12px) var(--card-pad); }
}
/* short laptops keep their tighter step lists, at the same side padding */
@media (min-width: 821px) and (min-aspect-ratio: 401/500) and (max-height: 820px), (min-width: 1181px) and (max-height: 820px) { .c-steps .panel, .c-steps.flip .panel { padding: 24px var(--card-pad); } }

/* ---------- readability: nothing people read below 15px on phones and tablets, or 14px on laptops ---------- */
.btn, .h-a .btn.mag, .h-a .btn.dim { font-size: 15px; }
.pill .pitch, .menu-btn, .cos i.open { font-size: 14px; }
.doors4 span, .doors4 i { font-size: 15px; }
.foot-inv span { font-size: 14px; }
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .cos span, .c-steps .stepper li > span, .c-intro .panel .lede { font-size: 15px; }
  .swipe, .swipe i { font-size: 14px; }
  .c-stats dd { font-size: 11px; letter-spacing: 0.05em; }
}

/* ---------- distance between chapters (phones, tablets): the pinned founders and investors chapters start
   over the empty top of the one before, so their card follows at the same distance as the rest ---------- */
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .c-steps { margin-top: -25svh; }
  .c-steps > .wrap { pointer-events: none; } /* its empty top can sit over the chapter before without catching taps */
  .c-steps .panel { pointer-events: auto; }
  .c-jump { padding-bottom: 0; }
  .c-intro { margin-top: -10svh; }
}
@media (min-width: 641px) and (max-width: 820px), (min-width: 821px) and (max-width: 1180px) and (max-aspect-ratio: 4/5) { .c-steps { margin-top: -19svh; height: calc(100svh + var(--n, 4) * 50svh); } .c-intro { margin-top: -15svh; } }
@media (min-width: 821px) and (min-aspect-ratio: 401/500) and (max-width: 1180px) { .c-jump { min-height: 80vh; } }

/* ---------- phones: tighter chapter spacing (about a fifth of a screen between chapters) ----------
   each venture keeps room for its tower above its cards, just less of it; the pinned founders/investors
   chapters start further over the one before; How we work and Four networks come in sooner */
@media (max-width: 640px) {
  /* a screen less the nav: settled, the chapter before ends just under the nav, so the highlighted tower has the
     room above its cards to itself, and none of it goes to waste behind the nav */
  .c-net { min-height: calc(100svh - 200px); padding-bottom: 24px; } /* the tower stands smaller (city.js), so less room */
  .c-plan { padding-top: 14vh; }
  .c-steps { margin-top: -23svh; } /* half the overlap: the founders build and the investor arcs need the room */
}
/* short phones: the venture's card and its company row take less of the screen, so the highlighted tower keeps
   a clear room above them (shorter screenshots; every card keeps its description) */
@media (max-width: 640px) and (max-height: 760px) {
  .c-net { min-height: 0; padding-top: 120px; } /* its card takes most of a short screen: a set room above it for the tower, however tall the card */
  .c-net .cos .thumb { aspect-ratio: 2 / 1; }
}

/* ---------- big tablets held upright (iPad Pro, Surface Pro: 821–1180px wide, portrait) ----------
   they take the tablet layout (see the queries above); here it grows into the extra width */
@media (min-width: 821px) and (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  :root { --card-pad: 32px; --inner-pad: 22px; }
  .c-h1 { font-size: clamp(64px, 8.4vw, 92px); }
  .c-sub { max-width: 34em; margin: 24px 0 30px; font-size: 19px; }
  .c-stats dt { font-size: 40px; }
  .c-stats dd { font-size: 12px; }
  .c-jump .reveal { max-width: 18em; }
  /* one company card at a readable width, the next one showing beside it */
  .cos li { flex-basis: min(calc(100% - 40px), 600px); }
  .cos b { font-size: 21px; }
  .cos span, .c-net .panel .lede { font-size: 17px; }
  .c-net .panel h2 { font-size: 40px; }
  .c-intro .panel { width: min(760px, 100%); }
  .c-intro .panel h2 { font-size: 48px; }
  .c-intro .panel .lede { font-size: 18px; }
  /* How we work: the three stages side by side */
  .bog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bog h3 { font-size: 21px; }
  .bog p { font-size: 16px; }
  .c-steps .panel h2 { font-size: 34px; }
  .stepper b { font-size: 19px; }
  .c-steps .stepper li > span { font-size: 16px; }
  .c-principles h2 { font-size: 52px; margin-bottom: 48px; }
  .holds { width: min(680px, 100%); }
  .holds h3 { font-size: 38px; }
  .holds p { max-width: 540px; font-size: 18px; }
  .closing h2 { font-size: 48px; }
  .closing .doors4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* tablets (not phones): the hero's buttons at their own width, not stretched across the screen */
@media (min-width: 641px) and (max-width: 820px), (min-width: 821px) and (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .h-a .c-actions .btn { flex: 0 0 auto; min-width: 240px; }
}

/* ---------- opening screen: the mark draws in and counts up while the district loads; at 100% the sparkle
   flashes and the view zooms through it into the page (the same curve as the company aperture) ---------- */
@property --hole { syntax: "<length>"; inherits: false; initial-value: 0px; }
.intro { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; overflow: hidden; pointer-events: auto;
  background: radial-gradient(120% 90% at 80% 0%, #1b2075 0%, #0f1242 60%);
  /* the window the view passes through: a hole in the navy at the sparkle, closed until the zoom */
  --hole: 0px;
  -webkit-mask-image: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), transparent var(--hole), #000 calc(var(--hole) + 1px));
  mask-image: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), transparent var(--hole), #000 calc(var(--hole) + 1px)); }
.intro-in { display: grid; justify-items: center; gap: clamp(28px, 4vh, 40px); }
/* the mark: bigger, and it zooms from the sparkle's centre (83.5% across, 16.8% down the drawing) */
.intro-logo { position: relative; width: clamp(120px, 13vw, 184px); transform-origin: 83.48% 16.79%; }
.intro-mark { display: block; width: 100%; height: auto; overflow: visible; }
/* the body rises in, the fold turns down onto it, then the sparkle lands and keeps a slow glow */
.intro-mark .i-body { opacity: 0; transform: translateY(18px); animation: intro-in 700ms var(--ease) 100ms forwards; }
.intro-mark .i-fold { opacity: 0; transform-box: fill-box; transform-origin: 0 100%; transform: rotate(-35deg) scale(0.6); animation: intro-in 600ms var(--ease) 450ms forwards; }
.intro-mark .i-star { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0) rotate(-90deg);
  animation: intro-in 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 750ms forwards, intro-glow 1800ms ease-in-out 1500ms infinite; }
@keyframes intro-in { to { opacity: 1; transform: none; } }
@keyframes intro-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(224, 2, 247, 0)); } 50% { filter: drop-shadow(0 0 16px rgba(224, 2, 247, 0.75)); } }
/* a thin line under the mark, as wide as the mark on every screen, filling with the percentage (set by the script) */
.intro-load { display: grid; justify-items: center; gap: 14px; }
.intro-bar { display: block; width: clamp(120px, 13vw, 184px); height: 2px; border-radius: 2px; overflow: hidden; background: rgba(162, 166, 225, 0.16); opacity: 0; transform: translateY(6px);
  animation: intro-in 500ms var(--ease) 500ms forwards; }
.intro-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e002f7, #a101b1);
  transform-origin: 0 50%; transform: scaleX(0); }
.intro.spark .intro-bar { opacity: 1; animation: intro-out 300ms var(--ease) forwards; }
/* the percentage, counting up while the district loads */
.intro-pct { margin: 0; opacity: 0; animation: intro-in 500ms var(--ease) 500ms forwards; transform: translateY(6px);
  font: 500 15px/1 var(--mono); letter-spacing: 0.08em; color: var(--navy-200); font-variant-numeric: tabular-nums; }
.intro-pct b { font-weight: 500; color: var(--navy-50); }
/* at 100%: the sparkle flashes (a quarter turn, a burst of light and a cross of flare), the count steps aside */
.intro-flare { position: absolute; left: 83.48%; top: 16.79%; width: 0; height: 0; pointer-events: none; }
.intro-flare::before, .intro-flare::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, #fff 45%, #fff 55%, transparent); }
.intro-flare::before { width: 190px; height: 2px; transform: translate(-50%, -50%) scaleX(0); }
.intro-flare::after { width: 2px; height: 190px; transform: translate(-50%, -50%) scaleY(0); background: linear-gradient(180deg, transparent, #fff 45%, #fff 55%, transparent); }
.intro.spark .i-star { animation: intro-spark 560ms cubic-bezier(0.3, 0, 0.2, 1) forwards; }
.intro.spark .intro-flare::before { animation: intro-flare-x 560ms var(--ease) forwards; }
.intro.spark .intro-flare::after { animation: intro-flare-y 560ms var(--ease) forwards; }
.intro.spark .intro-pct { opacity: 1; animation: intro-out 300ms var(--ease) forwards; }
@keyframes intro-spark {
  0% { opacity: 1; transform: none; filter: drop-shadow(0 0 6px rgba(224, 2, 247, 0.6)); }
  40% { opacity: 1; transform: scale(1.5) rotate(45deg); filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 30px rgba(224, 2, 247, 0.95)); }
  100% { opacity: 1; transform: scale(1.15) rotate(90deg); filter: drop-shadow(0 0 12px rgba(224, 2, 247, 0.9)); } }
@keyframes intro-flare-x { 0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0); } 40% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.4); } }
@keyframes intro-flare-y { 0% { opacity: 0; transform: translate(-50%, -50%) scaleY(0); } 40% { opacity: 1; transform: translate(-50%, -50%) scaleY(0.7); } 100% { opacity: 0; transform: translate(-50%, -50%) scaleY(0.3); } }
@keyframes intro-out { to { opacity: 0; transform: translateY(-6px); } }
/* the zoom: the mark grows around the sparkle, the rest of it falls away first, the sparkle thins out as the
   window in the navy opens from its core and grows with it past the edges of the screen */
.intro.zoom { --hole: var(--hole-end, 150vmax); pointer-events: none; transition: --hole 1100ms cubic-bezier(0.7, 0, 0.2, 1); }
.intro.zoom .intro-logo { transform: scale(var(--zs, 60)); transition: transform 1100ms cubic-bezier(0.7, 0, 0.2, 1); }
.intro.zoom .i-rest { opacity: 0; transition: opacity 380ms var(--ease); }
.intro.zoom .i-sg { opacity: 0; transition: opacity 600ms var(--ease) 250ms; }
/* nothing scrolls under it */
html.intro-on, html.intro-on body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .intro-mark *, .intro-pct, .intro-bar, .intro.spark * , .intro.spark .intro-flare::before, .intro.spark .intro-flare::after { animation: none !important; opacity: 1; transform: none; }
  .intro-flare { display: none; }
  .intro.fade { opacity: 0; transition: opacity 300ms var(--ease); }
}

/* ---------- hero on phones and tablets: bigger stats, and the words sit higher ----------
   the stats and the room around them scale with the screen (width and height), so on every size the block
   below the district grows upward into the space under the towers by about the same share of the screen */
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .c-hero { padding-bottom: clamp(20px, 4svh, 44px); }
  .c-stats { margin-top: clamp(24px, 4.6svh, 52px); }
  .c-stats div { padding-top: clamp(14px, 2svh, 22px); }
  .c-stats dt { font-size: clamp(32px, min(11vw, 5.4svh), 48px); }
  .c-stats dd { margin-top: clamp(6px, 1svh, 12px); font-size: clamp(12px, min(3.2vw, 1.5svh), 14px); line-height: 1.4; }
}

/* founders / investors: more room between the heading and what follows it (the intro line, or the steps on phones) */
.c-steps .panel h2 { margin-bottom: clamp(20px, 2.2vw, 28px); }

/* phones: "Four networks" starts a quarter of a screen after the thesis line, so the district has room to rise in, and
   takes the whole screen with its card low, so the (taller, see city.js) districts and their names (two compact
   rows, every label the same width, set by city.js) stand large between the top and the card */
@media (max-width: 640px) {
  .c-intro { --ih: calc(84svh - 36px); --ip: 20px; margin-top: -18svh; } /* the names take one row now: the card comes up close under them, on short and tall phones alike */
  /* each name under its own district, in one row (city.js): the network's name only, on two lines where it must */
  .lbl.net, .lbl.net.mini { padding: 5px 4px 4px; background: rgba(15,18,66,0.88); backdrop-filter: none; -webkit-backdrop-filter: none; will-change: transform; } /* no blur to redraw as it moves */
  .lbl.net b, .lbl.net.mini b { font-size: 11px; line-height: 1.2; }
  .lbl.net small { display: none; } /* the network's name only, from the first frame */
}
/* short phones (iPhone SE …): the card keeps its intro line and rests lower, so the districts and their names keep their room */
@media (max-width: 640px) and (max-height: 760px) {
  .c-intro { --ih: calc(84svh + 74px); --ip: 4svh; } /* room for the card's description too */
}
/* phones, tablets: once its card has risen into place, "Four networks" holds the screen for a while (--hold of
   scrolling), so the districts, their names and the ring on a tower stay long enough to be read and tapped. The card
   is pinned to the foot of the screen (sticky), over a chapter taller by the hold; until then it arrives just as it
   would without it (--ih: the chapter's own height, --ip: the room under its card; city.js and page.js measure the
   card's resting place from the .wrap, not the chapter) */
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .c-intro { --hold: 45svh; min-height: calc(var(--ih) + var(--hold)); padding: 0; }
  .c-intro > .wrap { position: sticky; bottom: 0; min-height: var(--ih); padding-bottom: var(--ip); align-content: end; }
}

/* ---------- phones: the district answers a touch (city.js) ----------
   a tapped tower lights, the camera leans in and the page's words step back; its company rises from the foot of
   the screen, within reach of a thumb, joined to the tower by a line in its venture's colour */
.peek, .pk-line, .tap-hint { display: none; }
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .peek { display: block; position: fixed; left: var(--pad); right: var(--pad); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 25; max-width: 520px; margin: 0 auto; pointer-events: none; }
  .pk-card { --dx: 0px; --dy: 0px; position: relative; padding: 18px 14px 14px; border-radius: var(--r); pointer-events: auto; touch-action: none;
    background: rgba(15, 18, 66, 0.95); box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px rgba(5, 7, 30, 0.6);
    opacity: 0; transform: translateY(calc(100% + 40px)); transition: transform 560ms var(--ease), opacity 300ms var(--ease); }
  .peek.on .pk-card { opacity: 1; transform: translate3d(var(--dx), var(--dy), 0); }
  .pk-card.drag { transition: none; }
  .pk-grab { position: absolute; left: 50%; top: 7px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(162, 166, 225, 0.32); }
  /* (over the corner of the site, on a disc so it reads on any picture) */
  .pk-x { position: absolute; top: 24px; right: 20px; z-index: 1; width: 26px; height: 26px; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--navy-50); background: rgba(15, 18, 66, 0.78); box-shadow: inset 0 0 0 1px var(--line); }
  .pk-x:active { background: rgba(15, 18, 66, 0.95); }
  /* a new company slides in from the side the swipe came from */
  .pk-body { transition: opacity 200ms var(--ease), transform 360ms var(--ease); }
  .pk-body.out { opacity: 0; transform: translateX(var(--out, 0px)); }
  .pk-body.in { opacity: 0; transform: translateX(var(--in, 0px)); transition: none; }
  /* as the hover card on larger screens: the company's site across the top, its name, what it does; the card itself
     is the way in (a tap opens the company), and the dots under it say it slides on to the next */
  .pk-open { display: block; color: inherit; -webkit-tap-highlight-color: transparent; }
  .pk-shot { display: block; aspect-ratio: 16 / 10; max-height: 28svh; width: 100%; border-radius: 8px; overflow: hidden; background: #fff; transition: filter 200ms var(--ease); }
  .pk-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .pk-open:active .pk-shot { filter: brightness(0.9); }
  /* (no site yet: its logo on a plate in its venture's colour) */
  .pk-shot.logo { display: grid; place-items: center; background: radial-gradient(90% 90% at 50% 45%, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%), var(--navy-900); box-shadow: inset 0 0 0 1px var(--line); }
  .pk-shot.logo img { width: auto; height: auto; max-width: 52%; max-height: 42%; object-fit: contain; }
  .pk-name { margin: 12px 0 0; font-weight: 500; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; color: var(--navy-50); }
  .pk-text { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--navy-200); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .pk-dots { margin: 12px 0 2px; gap: 5px; }
  .pk-dots i { width: 12px; }
  .pk-dots i.on { width: 22px; background: var(--c, var(--mag-500)); }
  .pk-body.nudge { animation: pk-nudge 900ms ease-in-out; }
  @keyframes pk-nudge { 0%, 100% { transform: none; } 40% { transform: translateX(-14px); } 70% { transform: translateX(3px); } }
  .peek .btn.mag { background: var(--c, var(--mag-500)); color: var(--c-ink, #fff); }

  /* the line from the card to its tower draws itself up each time a tower is picked */
  .pk-line { display: block; position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 24; pointer-events: none; overflow: visible; opacity: 0; transition: opacity 300ms var(--ease); }
  .pk-line.on:not(.off) { opacity: 1; }
  .pk-line path { fill: none; stroke: var(--c, var(--mag-500)); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .pk-line.on path { stroke-dashoffset: 0; transition: stroke-dashoffset 800ms var(--ease) 200ms; }
  .pk-line circle { fill: var(--c, var(--mag-500)); }

  /* while a card is up the words step back and the district comes forward; a tap anywhere reaches the district */
  /* (the words, cards and every other name go quietly, leaving the district, the tapped tower and its card; they come
     back as the card goes) */
  main, .foot { transition: opacity 450ms var(--ease); }
  html.peeking main, html.peeking .foot { opacity: 0; transition-duration: 350ms; }
  html.peeking #labels .lbl:not(.pk) { opacity: 0 !important; transition: opacity 300ms var(--ease); }
  html.peeking main *, html.peeking .foot, html.peeking .foot * { pointer-events: none !important; }
  html.diving .peek, html.diving .pk-line { opacity: 0; transition: opacity 250ms var(--ease); }

  /* the hero's invitation: a ring on one tower, until the first tap */
  .tap-hint { display: block; position: fixed; left: 0; top: 0; z-index: 4; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity 600ms var(--ease); }
  .tap-hint.on { opacity: 1; transition-delay: 900ms; } /* after the opening screen has cleared */
  .tap-hint i { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--mag-500), 0 0 18px rgba(224, 2, 247, 0.4); }
  .tap-hint i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--mag-500); animation: tap-ring 2.6s var(--ease) infinite; }
  .tap-hint span { position: absolute; left: 26px; top: 0; transform: translateY(-50%); width: max-content; max-width: min(190px, calc(50vw - 36px)); padding: 7px 10px; border-radius: 8px;
    font: 400 14px/1.3 var(--sans); color: var(--navy-50); text-wrap: balance; background: rgba(15, 18, 66, 0.88); box-shadow: inset 0 0 0 1px var(--line); }
  .tap-hint.left span { left: auto; right: 26px; } /* a tower near the right edge: the words sit to its left */
  @keyframes tap-ring { 0% { opacity: 0.9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.3); } }
}

/* phones: the email options rise as a sheet from the foot of the screen; a swipe down puts it away (page.js) */
@media (max-width: 640px) {
  .mailsheet { place-items: end stretch; padding: 0; }
  .ms-card { width: 100%; padding: 30px 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; touch-action: none;
    transform: translateY(100%); transition: transform 480ms var(--ease); }
  .mailsheet.on .ms-card { transform: translateY(var(--drag, 0px)); }
  .ms-card.drag { transition: none; }
  .ms-card::before { content: ""; position: absolute; left: 50%; top: 8px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(162, 166, 225, 0.32); }
  .ms-opts .btn { height: 48px; }

  /* footer: ventures and explore side by side, so the page ends sooner */
  .foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; }
  .foot-brand, .foot-cols > address { grid-column: 1 / -1; }
}

/* ---------- phones and tablets: the hero's headline rises out of the opening screen ----------
   as the zoom opens through the sparkle, each word slides up from its mask in turn; the line and buttons follow */
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .c-h1 .wm { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0 0.12em; margin: -0.06em 0 -0.12em; }
  .c-h1 .wm > span { display: inline-block; transition: transform 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(360ms + var(--w, 0) * 70ms); }
  .h-a .c-sub, .h-a .c-actions, .h-stats { transition: opacity 800ms var(--ease) 900ms, transform 1000ms var(--ease) 900ms; }
  .h-a .c-actions { transition-delay: 1000ms; }
  .h-stats { transition-delay: 1100ms; }
  html.intro-on .c-h1 .wm > span { transform: translateY(112%); transition: none; }
  html.intro-on .h-a .c-sub, html.intro-on .h-a .c-actions, html.intro-on .h-stats { opacity: 0; transform: translateY(16px); transition: none; }
}

/* ---------- phones, small tablets: lists in large type rather than cards within a card ---------- */
@media (max-width: 820px) {
  /* contact: an index of doors; the whole row is the link */
  .closing .notch { padding-bottom: 24px; }
  .closing h2 { margin-bottom: 20px; }
  .closing .doors4 { gap: 0; border-top: 1px solid var(--line); }
  .doors4 a, .doors4 a:hover { gap: 4px; padding: 20px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
  .doors4 b { font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: -0.035em; transition: color 200ms var(--ease); }
  .doors4 a:active b { color: var(--mag-500); }
  .doors4 i { margin-top: 6px; }
  .closing .mail { margin-top: 20px; }
}

/* ---------- phones: a jump within the page is a camera move (city.js flyTo) ----------
   the words step back while the page moves and the camera flies in, and come back as it lands */
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  html.flying main, html.flying .foot, html.flying #labels { opacity: 0 !important; transition: opacity 200ms var(--ease) !important; }
  main, .foot, #labels { transition: opacity 500ms var(--ease); }
  /* the venture names under the districts in "Four networks" take a tap, and fly into their venture */
  .lbl.net.on { pointer-events: auto; }
  .lbl.net:active { background: rgba(27, 32, 117, 0.95); }
}

/* ---------- phones and tablets: each venture holds the screen, one company at a time ----------
   like founders: the chapter pins, its tower in focus stands large (city.js), and one card sits at the foot —
   the venture, the company, what it does, a way in — with dots and arrows; the scroll or a swipe walks the companies */
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  /* (each venture starts over the foot of the chapter before, by --lap, set by page.js, so its card rises a set gap
     under the one leaving rather than a screen after it; and it lets go a little sooner after its last company) */
  .c-net { display: block; height: calc(65svh + var(--n, 4) * 70svh); min-height: 0; padding: 0; margin: calc(-1 * var(--lap, 0px)) 0 0; }
  .c-net > .wrap { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--pad) calc(16px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
  .c-net .panel { position: relative; width: min(100%, 560px); margin: 0 auto; padding: 18px; overflow: hidden; pointer-events: auto;
    border-radius: var(--r); background: rgba(15, 18, 66, 0.9); box-shadow: inset 0 0 0 1px var(--line); }
  /* the venture first, its title and what it does, with where you are among its companies beside the title; then,
     under a hairline, the company its tower belongs to */
  .c-net .panel h2 { margin: 0 0 6px; padding: 0 92px 0 0; border-radius: 0; background: none; font-size: 24px; line-height: 1.15; letter-spacing: -0.03em; }
  .c-net .panel .lede { margin: 0; padding: 0; border-radius: 0; background: none; font-size: 15px; line-height: 1.5; color: var(--navy-300); }
  .c-net .swipe, .c-net .cos .thumb { display: none; } /* the tower is the picture; the dots say where you are */
  .c-net .cos { gap: 12px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
  .c-net .cos li, .c-net .cos li:last-child { flex: 0 0 100%; margin: 0; }
  /* the company: its name in the venture's colour and what it does on the left, its logo bare on the card (no plate)
     on the right, so the company reads even where a logo's own lettering is small. Each logo is drawn at the same
     visual weight (--lw, set by build.mjs from its shape): a wide wordmark and a stacked mark read as one size */
  .c-net .cos a, .c-net .cos li.focus a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto; column-gap: 16px; height: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .c-net .cos .mark { display: block; grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: end; width: auto; height: auto; margin: 0; }
  /* (a little larger on the card than the build's weight, but never more than about a third of a phone's width, so the words keep theirs) */
  .c-net .cos .mark img { display: block; width: min(calc(var(--lw, 110px) * 1.3), 28vw); max-width: 100%; height: auto; }
  .c-net .cos b, .c-net .cos li.focus b { grid-column: 1; grid-row: 1; justify-self: start; margin-bottom: 8px; text-wrap: balance; font-weight: 500; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; color: color-mix(in srgb, var(--c) 55%, white); }
  .c-net .cos a > span:not(.thumb):not(.mark) { grid-column: 1; grid-row: 2; margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--navy-200); }
  /* the way in: a bar in the venture's colour, like the tapped tower's card, and beside it on the right, where the
     thumb is, the arrows (it leaves them room): round, as the site's other arrows are, and as tall as the bar */
  .c-net .cos i.open { grid-column: 1 / -1; grid-row: 4; display: flex; align-self: stretch; align-items: center; justify-content: center; margin: auto 104px 0 0; height: 46px; border-radius: 8px; opacity: 1; transform: none;
    background: var(--c, var(--mag-500)); color: var(--c-ink, #fff); font-size: 0; }
  .c-net .cos i.open::before { content: attr(data-m); font: 400 15px/1.5 var(--sans); white-space: nowrap; }
  .c-net .cos a:active i.open { filter: brightness(1.1); }
  .c-net .step-foot { margin: 0; }
  .c-net .step-nav { display: none; } /* (no arrows: the scroll and a swipe walk the companies, the dots say where you are) */
  /* (solid, the same colour they show on the card, so a "Read more" swiped past goes under them, never through) */
  .c-net .step-nav button { width: 46px; height: 46px; border-radius: 50%; background: #202350; }
  .c-net .step-nav button:active { background: #2c2f62; }
  .c-net .step-nav button:disabled { opacity: 1; color: rgba(230, 231, 244, 0.3); }
  /* a company steps out and the next steps in, from the side it comes from (page.js swapTo) */
  /* (only the company moves, its logo, name and line: the hairline over it and "Read more" under it stay put) */
  .c-net .cos .mark, .c-net .cos b, .c-net .cos a > span:not(.thumb) { transition: opacity 300ms var(--ease), transform 420ms var(--ease); }
  .c-net .cos.swap-out .mark, .c-net .cos.swap-out b, .c-net .cos.swap-out a > span:not(.thumb) { opacity: 0; transform: translateX(var(--sw, 0px)); transition-duration: 150ms, 150ms; transition-timing-function: ease-in; }
  .c-net .cos.swap-in .mark, .c-net .cos.swap-in b, .c-net .cos.swap-in a > span:not(.thumb) { opacity: 0; transform: translateX(var(--sw, 0px)); transition: none; }
  .c-net .step-nav button, .c-net .cos a { -webkit-tap-highlight-color: transparent; }
  /* the dots beside the venture's title, in its colour */
  /* the dots in the company card, centred just over "Read more", in the venture's colour: they stay put as it slides */
  .c-net .dots { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); gap: 6px; pointer-events: none; }
  .c-net .dots i { width: 14px; }
  .c-net .dots i.on { width: 26px; background: var(--c, var(--mag-500)); }
  /* the card before fades as it goes up over the top of the screen (page.js fadeLeaving) */
  .c-net .panel { opacity: var(--x, 1); }
  .c-intro .panel { opacity: calc(var(--o, 1) * var(--x, 1)); }
  /* two cards: the venture (its name, what it does, where you are among its companies), and under it the company */
  .c-net .panel { padding: 0; overflow: visible; background: none; box-shadow: none; }
  .c-net .panel h2, .c-net .panel .lede { background: rgba(15, 18, 66, 0.9); }
  .c-net .panel h2 { margin: 0; padding: 18px 18px 6px; border-radius: var(--r) var(--r) 0 0; box-shadow: none; }
  .c-net .panel .lede { padding: 0 18px 16px; border-radius: 0 0 var(--r) var(--r); box-shadow: none; }
  .c-net .cos { margin: 8px 0 0; padding: 0; border: 0; border-radius: var(--r); background: rgba(15, 18, 66, 0.9); box-shadow: inset 0 0 0 1px var(--line); scroll-padding: 0; }
  .c-net .cos li { padding: 18px; }
  /* one "Read more" for the card, under the row (page.js setOpen): a swipe moves the company, the way in stays put */
  .c-net .cos i.open { display: none; }
  .c-net .cos li { padding-bottom: 114px; } /* (room for the dots and "Read more" under the company) */
  .net-open { display: flex; position: absolute; left: 18px; right: 18px; bottom: 18px; height: 46px; align-items: center; justify-content: center; border-radius: 8px;
    background: var(--c, var(--mag-500)); color: var(--c-ink, #fff); font: 400 15px/1.5 var(--sans); white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: filter 200ms var(--ease); }
  .net-open:active { filter: brightness(1.1); }
  /* every company card in a venture is as tall as its longest (so nothing jumps as they slide): the shorter ones sit
     in the middle of that height, with even room above and below, rather than leaving a gap over the dots */
  .c-net .cos a, .c-net .cos li.focus a { grid-template-rows: 1fr auto auto 1fr; }
  .c-net .cos .mark { grid-row: 2 / 4; }
  .c-net .cos b, .c-net .cos li.focus b { grid-row: 2; margin-bottom: 0; }
  .c-net .cos a > span:not(.thumb):not(.mark) { grid-row: 3; margin: 8px 0 0; }
  /* the dots: the companies passed in a dim shade of the venture's colour, so the one in view (full colour, wider)
     still stands out when the colour is pale */
  .c-net .dots i.done { background: color-mix(in srgb, var(--c, var(--mag-500)) 45%, var(--navy-700)); }
  /* a keyboard ring that stays inside the card */
  .c-net .cos a:focus-visible { outline-offset: 6px; border-radius: 6px; }
  /* the company: its name and what it does on the left, in the middle of the card's height; on the right its logo, in
     its own colours, on a white plate the same size for every company (each logo sized inside it to the same visual
     weight, --mw, --mh, by build.mjs), so the plates line up card to card as the companies slide by */
  .c-net .cos a, .c-net .cos li.focus a { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto 1fr; column-gap: 16px; }
  .c-net .cos .mark { grid-column: 2; grid-row: 2 / 4; align-self: center; justify-self: end; display: grid; place-items: center;
    width: 112px; height: 64px; margin: 0; padding: 0; border-radius: 10px; background: #fff; }
  .c-net .cos .mark img { width: var(--mw, 80px); height: var(--mh, 32px); max-width: 96px; object-fit: contain; }
  .c-net .cos b, .c-net .cos li.focus b { grid-column: 1; grid-row: 2; }
  .c-net .cos a > span:not(.thumb):not(.mark) { grid-column: 1; grid-row: 3; }
}