/* Nova Innovation. Palette: Figma "01 Colors" (node 4:2). */
:root {
  --navy-50: #f5f5fa;
  --navy-100: #e6e7f4;
  --navy-200: #cbccec;
  --navy-300: #a2a6e1;
  --navy-400: #6d73d5;
  --navy-500: #3841d1;
  --navy-700: #252ca2;
  --navy-800: #20268b;
  --navy-900: #1b2075;
  --navy-950: #0f1242;
  --mag-500: #e002f7;
  --mag-700: #a101b1;
  --line: rgba(162, 166, 225, 0.16);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sans: "Host Grotesk", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;

  --pad: clamp(16px, 4vw, 40px);
  --gap: 24px;
  --max: 1280px;
  --r: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body { margin: 0; background: var(--navy-950); color: var(--navy-100); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--mag-500); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--mag-500); color: #fff; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* ---------- type ---------- */
.display { font-family: var(--sans); font-weight: 400; letter-spacing: -0.035em; line-height: 1.02; color: var(--navy-50); text-wrap: balance; }
.h-xl { font-size: clamp(44px, 6.4vw, 104px); }
.h-lg { font-size: clamp(36px, 4.4vw, 68px); }
.h-md { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -0.025em; }
.lede { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--navy-200); max-width: 36em; }
.mono { font: 500 12px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-300); }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.u { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size 450ms var(--ease), color 200ms var(--ease); }
.u:hover, .u:focus-visible { background-size: 100% 1px; }

/* ---------- buttons: sentence case in Host Grotesk, as in the hero (400 13px / 150%) ---------- */
.btn {
  --mx: 0px; --my: 0px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 20px; border-radius: 8px;
  font: 400 13px/1.5 var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap;
  background: var(--navy-100); color: var(--navy-950);
  transition: background 250ms var(--ease), color 250ms var(--ease), filter 250ms var(--ease);
}
/* arrows: one drawn arrow in the text's colour, turned to point where it leads */
.ar { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }
.ar.up { transform: rotate(-90deg); }
.ar.left { transform: rotate(180deg); }
.btn .mag-in { display: inline-flex; align-items: center; gap: inherit; transform: translate(var(--mx), var(--my)); transition: transform 600ms var(--ease); pointer-events: none; }
.btn:active { filter: brightness(0.94); }
.btn:hover { background: #fff; }
.btn.mag { background: linear-gradient(100deg, var(--mag-500), var(--mag-700)); color: #fff; }
.btn.mag:hover { filter: brightness(1.08) saturate(1.05); }
.btn.dim { background: rgba(230, 231, 244, 0.1); color: var(--navy-50); box-shadow: inset 0 0 0 1px var(--line); }
.btn.dim:hover { background: rgba(230, 231, 244, 0.18); }
.btn.big { height: 52px; padding: 0 26px; }
.btn.icon { width: 44px; padding: 0; }

/* ---------- floating glass pill nav ---------- */
.top { position: fixed; top: 16px; left: 50%; z-index: 30; transform: translateX(-50%); width: min(calc(100% - 2 * var(--pad)), 1040px); }
.pill { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 12px; background: rgba(27, 32, 117, 0.55); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 0 0 1px var(--line), 0 12px 40px rgba(5, 7, 30, 0.35); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 600 17px/1 var(--sans); letter-spacing: -0.02em; color: var(--navy-50); margin-right: auto; }
.wordmark svg { flex: none; }
.menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu a:not(.btn) { display: block; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--navy-200); transition: color 200ms var(--ease), background 200ms var(--ease); }
.menu a:not(.btn):hover, .menu a[aria-current="true"] { color: var(--navy-50); background: rgba(230, 231, 244, 0.08); }
.menu .btn { height: 36px; padding: 0 14px; }
.menu-toggle { display: none; height: 36px; padding: 0 14px; border-radius: 8px; font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; background: rgba(230, 231, 244, 0.1); color: var(--navy-50); }

/* ---------- hero: the skyline with the group drawn over it ---------- */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img, .hero-media svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 50% 50%; transform: scale(1.06); animation: settle 2600ms var(--ease) both; }
.hero-media svg { transform: scale(1.06); animation: settle 2600ms var(--ease) both; }
@keyframes settle { to { transform: scale(1); } }
.hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(15,18,66,0.55) 0%, rgba(15,18,66,0) 26%, rgba(15,18,66,0) 50%, rgba(15,18,66,0.75) 78%, #0f1242 100%); }
.hero-copy { position: absolute; left: 0; right: 0; bottom: clamp(32px, 7vh, 72px); }
.hero h1 { grid-column: 1 / 9; margin: 0; }
.hero .lede { grid-column: 1 / 7; margin: 22px 0 30px; color: var(--navy-100); }
.hero .actions { grid-column: 1 / 13; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-legend { position: absolute; right: var(--pad); bottom: clamp(32px, 7vh, 72px); display: grid; gap: 8px; text-align: right; }
.hero-legend span { font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-300); }
.hero-legend b { color: var(--mag-500); font-weight: 500; }

/* overlay drawing */
.hero-media svg { pointer-events: none; }
.ov-g { pointer-events: auto; }
.ov-spine { stroke: var(--navy-200); stroke-width: 1.2; fill: none; vector-effect: non-scaling-stroke; }
.ov-drop { stroke: var(--navy-200); stroke-width: 1; stroke-dasharray: 2 3; fill: none; vector-effect: non-scaling-stroke; opacity: 0.8; }
.ov-node { fill: var(--navy-950); stroke: var(--navy-50); stroke-width: 1.4; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill 250ms var(--ease), stroke 250ms var(--ease); }
.ov-hit { fill: transparent; cursor: pointer; }
.ov-ring { fill: none; stroke: var(--navy-50); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ov-g.on .ov-node { fill: var(--mag-500); stroke: var(--mag-500); }
.ov-g.on .ov-drop { stroke: var(--mag-500); stroke-dasharray: none; opacity: 1; }
.ov-g.pulse .ov-ring { animation: ring 2.4s var(--ease) infinite; }
@keyframes ring { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
.ov-net { font: 500 8px var(--mono); letter-spacing: 0.1em; fill: var(--navy-100); text-transform: uppercase; }
.ov-tick { stroke: var(--navy-200); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tag {
  position: absolute; z-index: 5; pointer-events: none; width: 260px;
  padding: 12px 14px; border-radius: 10px; background: rgba(15,18,66,0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--line); opacity: 0; transform: translate(-50%, calc(-100% - 18px)) scale(0.96); transform-origin: bottom center;
  transition: opacity 200ms var(--ease), transform 350ms var(--ease);
}
.tag.show { opacity: 1; transform: translate(-50%, calc(-100% - 18px)) scale(1); }
.tag .shot { aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; margin-bottom: 10px; background: #fff; }
.tag .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tag .shot.logo { display: grid; place-items: center; }
.tag .shot.logo img { width: auto; height: auto; max-width: 60%; max-height: 50%; object-fit: contain; }
.tag b { display: block; font-weight: 500; font-size: 15px; color: var(--navy-50); }
.tag span { display: block; margin-top: 2px; font-size: 13px; color: var(--navy-300); }
.tag .mono { margin-bottom: 6px; color: var(--mag-500); }

/* ---------- notched panel (Terminal's tab shape) ---------- */
.notch { --n: 34px; --w: min(360px, 30%); position: relative; background: var(--navy-900); border-radius: 0 0 var(--r) var(--r);
  clip-path: polygon(0 var(--n), calc(50% - var(--w) / 2 - var(--n)) var(--n), calc(50% - var(--w) / 2) 0, calc(50% + var(--w) / 2) 0, calc(50% + var(--w) / 2 + var(--n)) var(--n), 100% var(--n), 100% 100%, 0 100%); }

/* ---------- statement: words light up as you read ---------- */
.statement { padding: clamp(120px, 20vh, 200px) 0; }
.reveal { margin: 0 auto; max-width: 20em; font-size: clamp(32px, 4.2vw, 64px); line-height: 1.12; letter-spacing: -0.03em; text-align: center; }
.reveal .w { color: rgba(203, 204, 236, 0.18); transition: color 300ms var(--ease); }
.reveal .w.lit { color: var(--navy-50); }
.reveal .w.edge { color: var(--mag-500); }

/* ---------- logo wall on a crosshair grid ---------- */
.logos { padding: 0 0 clamp(100px, 16vh, 180px); }
.logos h2 { margin: 0 auto 56px; text-align: center; }
.wall { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.wall a { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wall a::after { content: "+"; position: absolute; right: -5px; bottom: -11px; font: 300 14px/1 var(--mono); color: var(--navy-300); z-index: 1; }
.wall img { max-width: 64%; max-height: 46%; object-fit: contain;  transition: opacity 250ms var(--ease), transform 450ms var(--ease); }
.wall a:hover img, .wall a:focus-visible img { opacity: 1; transform: scale(1.06); }
.wall a:hover { background: rgba(230, 231, 244, 0.03); }

/* ---------- network cards ---------- */
.nets { padding: 0 0 clamp(100px, 16vh, 180px); }
.nets header { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.nets header p { margin: 20px auto 0; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ncard { display: flex; flex-direction: column; padding: 22px; border-radius: var(--r); background: var(--navy-900); box-shadow: inset 0 0 0 1px var(--line); transition: transform 500ms var(--ease), box-shadow 300ms var(--ease); }
.ncard:hover { box-shadow: inset 0 0 0 1px rgba(162,166,225,0.35); }
.ncard h3 { margin: 14px 0 10px; font-weight: 500; font-size: 22px; letter-spacing: -0.02em; color: var(--navy-50); }
.ncard p { margin: 0 0 22px; font-size: 15px; color: var(--navy-300); }
.ncard .pic { margin-top: auto; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.ncard .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.ncard:hover .pic img { transform: scale(1.06); }
.ncard .btn { margin-top: 14px; width: 100%; }

/* ---------- storytelling: text brightens, frame changes ---------- */
.story { padding: clamp(40px, 8vh, 80px) 0 clamp(100px, 16vh, 180px); }
.story > .wrap > header { max-width: 760px; margin: 0 auto clamp(56px, 10vh, 120px); text-align: center; }
.story .grid { align-items: start; }
.steps { grid-column: 1 / 6; }
.step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
.step h3 { margin: 0 0 18px; font-weight: 500; font-size: 22px; color: var(--navy-50); }
.step p:not(.mono) { margin: 0; font-size: clamp(22px, 2vw, 30px); line-height: 1.3; letter-spacing: -0.02em; color: rgba(203, 204, 236, 0.22); transition: color 600ms var(--ease); }
.step.on p:not(.mono) { color: var(--navy-50); }
.step .mono { margin-bottom: 14px; }
.stage { grid-column: 7 / 13; position: sticky; top: 110px; height: calc(100vh - 150px); max-height: 760px; border-radius: var(--r); overflow: hidden; background: var(--navy-900);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 700ms var(--ease), transform 1400ms var(--ease); }
.stage img.on { opacity: 1; transform: scale(1); }
.stage .hud { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; justify-content: space-between; gap: 12px; }
.stage .hud span { font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-50); padding: 6px 8px; border-radius: 6px; background: rgba(15,18,66,0.6); backdrop-filter: blur(6px); }
.stage .hud .on { color: #fff; background: var(--mag-500); }

/* ---------- company explorer: tabs + cards ---------- */
.explore { padding: 0 0 clamp(100px, 16vh, 180px); }
.explore header { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.explore header h2 { margin: 0; max-width: 12em; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tabs button { height: 36px; padding: 0 14px; border-radius: 8px; font: 400 13px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--navy-300); box-shadow: inset 0 0 0 1px var(--line); transition: all 250ms var(--ease); }
.tabs button:hover { color: var(--navy-50); }
.tabs button[aria-selected="true"] { background: var(--navy-100); color: var(--navy-950); box-shadow: none; }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 30%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.panel[hidden] { display: none; }
.ccard { scroll-snap-align: start; display: flex; flex-direction: column; padding: 22px; border-radius: var(--r); background: var(--navy-900); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 300ms var(--ease); }
.ccard:hover { box-shadow: inset 0 0 0 1px rgba(162,166,225,0.4); }
.ccard h3 { margin: 12px 0 10px; font-weight: 500; font-size: 24px; letter-spacing: -0.02em; line-height: 1.1; color: var(--navy-50); }
.ccard p { margin: 0 0 20px; font-size: 15px; color: var(--navy-300); max-width: 24em; }
.ccard .pic { margin-top: auto; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--navy-800); }
.ccard .pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1200ms var(--ease); }
.ccard:hover .pic img { transform: scale(1.05); }
.ccard .pic.logo { background: #fff; display: grid; place-items: center; }
.ccard .pic.logo img { width: auto; height: auto; max-width: 56%; max-height: 46%; object-fit: contain; }
.ccard .row-btns { display: flex; gap: 8px; padding-top: 14px; }
.ccard .row-btns .btn { flex: 1; }
.track-nav { display: flex; gap: 8px; }

/* ---------- numbers ---------- */
.numbers { padding: 0 0 clamp(100px, 16vh, 180px); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.stats div { padding: 28px 24px 0 0; }
.stats div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.stats dt { font-size: clamp(64px, 7.6vw, 120px); line-height: 1; letter-spacing: -0.05em; color: var(--navy-50); }
.stats dd { margin: 14px 0 0; }

/* ---------- investors / founders ---------- */
.doors { padding: 0 0 clamp(100px, 16vh, 180px); }
.doors .grid { row-gap: 14px; }
.door { grid-column: span 6; position: relative; min-height: 600px; border-radius: var(--r); overflow: hidden; isolation: isolate; display: flex; align-items: flex-end;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }
.door .bg { position: absolute; inset: 0; z-index: -1; }
.door .bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease); }
.door:hover .bg img { transform: scale(1.06); }
.door .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,18,66,0.1) 25%, rgba(15,18,66,0.94) 80%); }
.door-copy { padding: clamp(24px, 3vw, 44px); }
.door h2 { margin: 12px 0 14px; }
.door p:not(.mono) { margin: 0 0 26px; color: var(--navy-200); max-width: 28em; }

/* ---------- FAQ ---------- */
.faq { padding: 0 0 clamp(100px, 16vh, 180px); }
.faq .grid { align-items: start; }
.faq header { grid-column: 1 / 5; }
.faq header p { margin: 16px 0 0; color: var(--navy-300); max-width: 22em; }
.qs { grid-column: 6 / 13; list-style: none; margin: 0; padding: 0; }
.qs details { border-bottom: 1px solid var(--line); }
.qs summary { list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; font-size: 18px; color: var(--navy-50); }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: "+"; font: 300 22px/1 var(--mono); color: var(--navy-300); transition: transform 400ms var(--ease); }
.qs details[open] summary::after { transform: rotate(45deg); color: var(--mag-500); }
.qs details p { margin: 0 0 22px; color: var(--navy-300); max-width: 40em; }

/* ---------- closing ---------- */
.closing { padding: 0 0 14px; }
.closing .notch { padding: clamp(110px, 18vh, 180px) var(--pad) clamp(90px, 14vh, 140px); text-align: center; }
.closing h2 { margin: 0 auto 32px; max-width: 13em; }

/* ---------- footer ---------- */
footer { padding: 72px 0 36px; }
.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--navy-400); }

/* entrances: ≤300ms, ≤16px */
.rise { opacity: 0; transform: translateY(16px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.rise.in { opacity: 1; transform: none; }

/* page transitions */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 220ms var(--ease) both fade-out; }
::view-transition-new(root) { animation: 300ms var(--ease) both fade-up; }
::view-transition-group(*) { animation-duration: 500ms; animation-timing-function: var(--ease); }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }

/* ---------- company page + plain pages ---------- */
.co-hero { padding: 150px 0 40px; }
.co-hero .crumb { grid-column: 1 / 13; margin: 0 0 32px; }
.co-hero h1 { grid-column: 1 / 11; margin: 0; view-transition-name: co-name; }
.co-hero .lede { grid-column: 1 / 8; margin: 24px 0 0; }
.co-hero .meta { grid-column: 1 / 13; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.co-shot { grid-column: 1 / 13; margin: 40px 0 0; border-radius: var(--r); overflow: hidden; background: var(--navy-900); box-shadow: inset 0 0 0 1px var(--line); }
.co-shot img { width: 100%; clip-path: inset(0 0 100% 0); animation: reveal 900ms var(--ease) 150ms both; }
.co-shot.logo { background: #fff; padding: clamp(48px, 10vw, 120px); display: grid; place-items: center; }
.co-shot.logo img { width: auto; max-width: min(320px, 60%); }
@keyframes reveal { to { clip-path: inset(0 0 0 0); } }
.siblings { padding: 96px 0 120px; }
.siblings h2 { grid-column: 1 / 13; margin: 0 0 24px; }
.rows { grid-column: 1 / 9; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.row a { display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.row .name { font-size: 22px; letter-spacing: -0.02em; color: var(--navy-50); transition: color 250ms var(--ease); }
.row .line { display: block; font-size: 15px; color: var(--navy-300); }
.row a:hover .name { color: var(--mag-500); }
.plain { padding: 170px 0 140px; min-height: 70vh; }
.plain h1 { grid-column: 1 / 10; margin: 0 0 28px; }
.plain p { grid-column: 1 / 8; color: var(--navy-300); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .track { grid-auto-columns: minmax(280px, 46%); }
}
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) {
  .grid > * { grid-column: 1 / -1 !important; }
  .menu { display: none; }
  .menu.open { display: flex; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px; border-radius: 12px; background: rgba(15,18,66,0.96); box-shadow: inset 0 0 0 1px var(--line); }
  .menu.open a:not(.btn) { font-size: 17px; padding: 14px 12px; }
  .menu.open .btn { height: 48px; }
  .menu-toggle { display: inline-flex; align-items: center; }
  .hero-legend { display: none; }
  .hero-copy { bottom: 28px; }
  .cards { grid-template-columns: 1fr; }
  .steps .step { min-height: auto; padding: 36px 0; }
  .step p:not(.mono) { color: var(--navy-100); }
  .stage { display: none; }
  .track { grid-auto-columns: 86%; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div, .stats div + div { padding: 24px 0 28px; border-left: 0; }
  .stats div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
  .door { min-height: 520px; }
  .notch { --n: 22px; --w: 44%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
  .rise { opacity: 1; transform: none; }
  .hero-media img, .hero-media svg { transform: none; }
  .co-shot img { clip-path: none; }
  .reveal .w { color: var(--navy-50); }
  .step p:not(.mono) { color: var(--navy-50); }
}

/* hidden always means hidden, whatever the display rule */
[hidden] { display: none !important; }

/* 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 cubic-bezier(0.16, 1, 0.3, 1) 380ms, transform 600ms cubic-bezier(0.16, 1, 0.3, 1) 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 cubic-bezier(0.16, 1, 0.3, 1), transform 500ms cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) { .aperture { display: none; } }

/* brand logo */
.wordmark .logo { display: block; height: 30px; width: auto; }
@media (max-width: 820px), (max-width: 1180px) and (max-aspect-ratio: 4/5) { .wordmark .logo { height: 26px; } }