/* Daylight on a 12-column grid. The full stop is a lens: CSMAKAR's circle (a sine on a scope) opens onto its ventures;
   Cyrusrex's square (a square wave) is the other side, one switch away. */
@font-face { font-family: "Cabinet Grotesk"; src: url("/csmakar/fonts/cabinet-500.woff2") format("woff2"); font-weight: 500; font-display: swap }
@font-face { font-family: "Cabinet Grotesk"; src: url("/csmakar/fonts/cabinet-700.woff2") format("woff2"); font-weight: 700; font-display: swap }
@font-face { font-family: "Cabinet Grotesk"; src: url("/csmakar/fonts/cabinet-800.woff2") format("woff2"); font-weight: 800; font-display: swap }
@font-face { font-family: "General Sans"; src: url("/csmakar/fonts/general-400.woff2") format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: "General Sans"; src: url("/csmakar/fonts/general-500.woff2") format("woff2"); font-weight: 500; font-display: swap }
@font-face { font-family: "JetBrains Mono"; src: url("/csmakar/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap }
:root {
  --paper: #F5F5F1;
  --paper-2: #EAEAE4;
  --ink: #0B0B0C;
  --ink-2: rgba(11, 11, 12, .70);
  --ink-3: rgba(11, 11, 12, .46);
  --rule: rgba(11, 11, 12, .13);
  --rule-2: rgba(11, 11, 12, .32);
  --sine: #2A3CFF;
  --sine-hi: #7C88FF;
  --square: #FD501B;
  --night: #050506;
  --white: #FFFFFF;
  --display: "Cabinet Grotesk", "Helvetica Neue", Arial, sans-serif;
  --text: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --g: clamp(18px, 3.9vw, 56px);
  --head: 68px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip }
a { color: inherit; text-decoration: none }
img { display: block; max-width: 100% }
:focus-visible { outline: 2px solid var(--sine); outline-offset: 3px; border-radius: 2px }
.mono { font-family: var(--mono); font-size: 12px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* ---------- header ---------- */
.head { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: calc(var(--head) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--g) 0; background: color-mix(in srgb, var(--paper) 84%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid var(--rule) }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 12px; min-height: 44px }
.brand svg { width: 30px; height: 30px; display: block }
.brand b { font: 600 13px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase }
.nav { display: flex; gap: clamp(14px, 2.1vw, 34px) }
.nav a { color: var(--ink-2); padding: 12px 0; position: relative; transition: color .3s var(--ease) }
.nav a i { font-style: normal; color: var(--ink-3); margin-right: 7px }
.nav a:hover { color: var(--ink) }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--sine); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease) }
.nav a:hover::after { transform: scaleX(1) }
.tools { justify-self: end; display: flex; align-items: center; gap: 8px }

/* the header's buttons, and the switch among them: one shape on both sides, Cyrusrex's theme button's (a 44 px target, a
   30 px hairline ring), in each side's own ink; CSMAKAR is the circle (a sine), Cyrusrex the square (a square wave), the
   side you are on filled */
.ib { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--ink); cursor: pointer; font: inherit }
.ib::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--rule-2); border-radius: inherit; transition: border-color .3s var(--ease) }
.ib:hover::before { border-color: var(--ink) }
.ib:focus-visible { outline-offset: -5px; border-radius: 999px }
.ib svg { width: 14px; height: 14px }
/* a word under a button, on pointing at it */
.tip { position: absolute; top: calc(100% - 2px); right: 7px; padding: 6px 8px 5px; border-radius: 4px; background: var(--ink); color: var(--paper); font-style: normal; font-size: 10.5px; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(-3px); transition: opacity .2s var(--ease), transform .2s var(--ease) }
.ib:hover .tip, .ib:focus-visible .tip { opacity: 1; transform: none; transition-delay: .35s }
.snd .w-off, .snd[aria-pressed="false"] .w-on { display: none }
.snd[aria-pressed="false"] .w-off { display: block }
.hint { position: absolute; top: calc(100% + 6px); right: 0; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 6px; background: var(--ink); color: var(--paper); font-style: normal; white-space: nowrap; pointer-events: none; animation: hint-in .8s var(--ease) 1.2s both; transition: opacity .5s var(--ease), transform .5s var(--ease) }
.hint.is-gone { animation: hint-out .45s var(--ease) both }
@keyframes hint-out { to { opacity: 0; transform: translateY(-6px); visibility: hidden } }
.hint::before { content: ""; position: absolute; top: -5px; right: 17px; width: 10px; height: 10px; background: var(--ink); transform: rotate(45deg) }
@keyframes hint-in { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
.ss-busy .hint, .ss-sw:hover .hint { display: none }
.mbtn { display: none }

/* ---------- hero: the brand, then a dive through its full stop ---------- */
.pin { position: relative; height: 210svh }
.hero { position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--head) + env(safe-area-inset-top, 0px) + clamp(28px, 6vh, 64px)) var(--g) clamp(22px, 4vh, 40px) }
.eyebrow { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 0; color: var(--ink-3) }
.eyebrow b { font-weight: 400; color: var(--ink) }
.eyebrow .c { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sine); margin-right: 10px; transform: translateY(-1px) }
.title { align-self: end; margin: 0 0 0 -.045em; font: 800 var(--t, 17vw)/.8 var(--display); letter-spacing: -.045em; text-transform: uppercase; white-space: nowrap; display: flex; align-items: flex-end }
.title .stop { position: relative; display: inline-block; width: .19em; height: .19em; margin: 0 0 .018em .05em; border-radius: 50%; background: var(--sine); flex: none; transition: transform .5s var(--ease) }
.title .stop:hover { transform: scale(1.08) }
.hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--g); align-items: end; margin-top: clamp(22px, 4vh, 44px) }
.say { margin: 0; max-width: 30ch; font: 500 clamp(21px, 1.2vw + 12px, 30px)/1.22 var(--display); letter-spacing: -.012em; text-wrap: balance }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--rule); border-radius: 999px; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease) }
.pill.solid { background: var(--ink); border-color: var(--ink); color: var(--paper) }
.arr { width: .78em; height: .78em; flex: none }
.pill:hover { border-color: var(--ink) }
.fig { position: relative; margin: 0; display: grid; justify-items: end; padding-bottom: calc(12px + 1.4 * 12px) }
.fig-lens { position: relative; width: clamp(150px, 19vw, 280px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--paper-2) }
.fig-lens .ly { opacity: 0; transition: opacity 1.2s var(--ease) }
.fig-lens .ly.is-on { opacity: 1 }
.fig-lens .ph { transform: scale(1.08); transition: transform 3.6s linear }
.fig-lens .ly.is-on .ph { transform: scale(1) }
/* the caption hangs from the circle's right edge, out of the layout: a longer name beneath never moves the circle or the
   words beside it (Cyrus, 9 Oct 2026: "The circle jumps on landing page when company switches") */
.fig figcaption { position: absolute; right: 0; bottom: 0; display: flex; gap: 14px; white-space: nowrap; color: var(--ink-2) }
.fig figcaption b { flex: none; white-space: nowrap; font-weight: 400; color: var(--ink-3) }
/* the lens: the full stop opening as the page scrolls */
.dive { position: absolute; inset: 0; z-index: 3; clip-path: circle(var(--r, 0px) at var(--x, 50%) var(--y, 50%)); pointer-events: none; background: var(--night) }
.dive img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--s, 1.25)) }
.dive-say { position: absolute; left: var(--g); right: var(--g); bottom: clamp(26px, 6vh, 64px); display: grid; gap: 14px; color: var(--white); opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 24px)) }
.dive-say h2 { margin: 0; font: 800 clamp(56px, 10vw, 168px)/.84 var(--display); letter-spacing: -.045em; text-transform: uppercase }
.dive-say h2 i { display: inline-block; width: .19em; height: .19em; border-radius: 50%; background: var(--sine-hi); margin-left: .04em }
.dive-say p { margin: 0; color: rgba(255, 255, 255, .78) }

/* ---------- sections ---------- */
.sec { position: relative; z-index: 4; background: var(--paper); padding: clamp(84px, 12vh, 140px) var(--g) 0 }
.sec-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--g); align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--ink); margin-bottom: clamp(36px, 6vh, 64px) }
.sec-head .idx { color: var(--ink-3); padding-bottom: .5em }
.sec-head h2 { margin: 0; font: 800 clamp(44px, 6.4vw, 104px)/.86 var(--display); letter-spacing: -.04em; text-transform: uppercase; display: flex; align-items: flex-end }
.sec-head h2 i { display: inline-block; width: .19em; height: .19em; border-radius: 50%; background: var(--sine); margin: 0 0 .02em .05em; flex: none }
.sec-head .note { margin: 0; color: var(--ink-3); padding-bottom: .5em; text-align: right }

/* ventures: a list on one side, the lens on the other */
.vx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--g) }
.vx-list { list-style: none; margin: 0; padding: 0 0 18vh }
.vx-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 0; padding: 22px 0; border-bottom: 1px solid var(--rule); cursor: pointer; color: var(--ink-3); transition: color .4s var(--ease) }
.vx-row:first-child { border-top: 1px solid var(--rule) }
.vx-no { padding-top: .9em }
.vx-name { font: 700 clamp(30px, 3.4vw, 54px)/1 var(--display); letter-spacing: -.03em }
.vx-tag { grid-column: 2; color: var(--ink-3) }
.vx-row.is-on { color: var(--ink) }
@media (hover: hover) { .vx-row:not(.is-on):hover { color: var(--ink-2) } }
.vx-row.is-on .vx-no { color: var(--sine) }
.vx-stage { position: sticky; top: calc(var(--head) + 6vh); align-self: start; display: grid; gap: 26px; justify-items: center; padding-bottom: 8vh }
.vx-lens { position: relative; width: min(100%, 64vh, 560px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin: 0 }
/* a picture's place shows grey while it loads; CSMAKAR's full stop sits on the page's own paper, with no edge round it */
.vx-lens > .ly { background: var(--paper-2) }
.vx-lens > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: circle(0 at 50% 50%); transition: clip-path 1s var(--ease) }
.vx-lens > .is-on { clip-path: circle(72% at 50% 50%); z-index: 2 }
.vx-lens > .was { clip-path: circle(72% at 50% 50%); z-index: 1; transition: none }
.vx-lens .mk { background: var(--paper) }
.vx-lens .mk svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(var(--mk-s, 1.02)) }
.vx-lens .mk .d { fill: color-mix(in oklab, var(--sine), var(--ink) var(--mk-c, 100%)) }
.vx-lens .mk .m { fill: var(--paper); opacity: var(--mk-m, 1) }
/* Onyx Record Press: a record, black vinyl with a white label (a test pressing's), turning at 33⅓; its light stays put */
.vx-lens .rec { background: var(--paper) }
.rec-disc { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle closest-side, #121213 0 40%, transparent 40.3%), radial-gradient(circle closest-side, transparent 0 56.4%, rgba(0, 0, 0, .75) 56.7% 57.3%, transparent 57.6% 70.4%, rgba(0, 0, 0, .75) 70.7% 71.3%, transparent 71.6% 84.4%, rgba(0, 0, 0, .75) 84.7% 85.3%, transparent 85.6% 96.8%, #1a1a1b 97.1% 99.2%, #060607 99.5%), repeating-radial-gradient(circle closest-side, #18181a 0 .8px, #0c0c0d 1.2px 2.4px) }
.rec-label { position: absolute; left: 33%; top: 33%; width: 34%; height: 34%; border-radius: 50%; background: #F3F2EC; container-type: inline-size; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6) }
.rec-label::before { content: ""; position: absolute; inset: 7%; border: 1px solid rgba(11, 11, 12, .15); border-radius: 50% }
.rec-label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7%; height: 7%; border-radius: 50%; background: #0c0c0d; transform: translate(-50%, -50%) }
.rec-label img { position: absolute; left: 50%; top: 32%; width: 54%; transform: translate(-50%, -50%) }
.rec-label span { position: absolute; left: 0; right: 0; top: 64%; text-align: center; font-size: 5.4cqi; letter-spacing: .22em; color: rgba(11, 11, 12, .62) }
.rec-sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(from -20deg at 50% 50%, transparent 0deg, rgba(255, 255, 255, .17) 26deg, transparent 54deg, transparent 180deg, rgba(255, 255, 255, .12) 206deg, transparent 234deg), radial-gradient(circle closest-side, rgba(255, 255, 255, .05), transparent 85%); -webkit-mask: radial-gradient(circle closest-side, transparent 0 34.4%, #000 34.9%); mask: radial-gradient(circle closest-side, transparent 0 34.4%, #000 34.9%) }
.vx-say { width: min(100%, 560px); display: grid; gap: 12px; text-align: left }
.vx-say p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; min-height: 6.4em }
.vx-say a { justify-self: start; display: inline-flex; gap: 8px; align-items: center; min-height: 36px; border-bottom: 1px solid var(--ink) }
.vx-say a[hidden] { display: none }

/* a venture's layer, wherever its picture shows (Fig. 01, the lens, an example): the picture, a soft shade at the centre,
   and its logo centred over it in white, every logo the same apparent size; a venture with no logo has its name instead */
.ly { position: absolute; inset: 0; overflow: hidden; container-type: inline-size }
.ly .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.ly .scrim { position: absolute; inset: 0; background: radial-gradient(closest-side, rgba(8, 8, 9, .5), rgba(8, 8, 9, .22) 64%, rgba(8, 8, 9, .06)) }
.ov-logo, .ov-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity .7s var(--ease) .35s }
.ly.is-on .ov-logo, .ly.is-on .ov-name { opacity: 1 }
.ov-logo { width: calc(var(--w, 36) * 1%); height: auto }
.ly.ink-dark .scrim { background: radial-gradient(closest-side, rgba(245, 245, 241, .84), rgba(245, 245, 241, .56) 50%, rgba(245, 245, 241, .12) 86%, rgba(245, 245, 241, 0)) }
.ov-name { color: var(--white); font: 700 10cqi/1 var(--display); letter-spacing: -.02em; white-space: nowrap; text-shadow: 0 1px 14px rgba(0, 0, 0, .35) }
.ly.is-csm { background: var(--paper-2) }
.ly.is-csm svg { position: absolute; left: 50%; top: 50%; height: 64%; transform: translate(-50%, -50%) }
.ly.is-csm .d { fill: var(--ink) }
.ly.is-csm .m { fill: var(--paper) }

/* footprint */
.fp { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--g); align-items: start }
.big { margin: 0; max-width: 16ch; font: 500 clamp(30px, 3.6vw, 58px)/1.06 var(--display); letter-spacing: -.025em; text-wrap: balance }
/* the Americas' terrain, its contour lines drawn as the switch's beam draws, on the scope's night: the coast brightest,
   every 1000 m stronger, the sea floor dashed; a survey's scan passes over it; at each place a mark for what is done
   there (a borehole for drilling, a wireframe tower for real estate and hospitality, a chip for manufacturing) */
.map-w { display: grid; gap: 14px }
.map { position: relative; width: 100%; container-type: inline-size; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 90% at 40% 45%, #0B0D1A, var(--night) 70%); box-shadow: inset 0 0 0 1px rgba(124, 136, 255, .16) }
.map::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; background: radial-gradient(130% 100% at 50% 50%, transparent 58%, rgba(0, 0, 0, .5)) }
.terrain { position: absolute; inset: 0; width: 100%; height: 100% }
.scan { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 22%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(124, 136, 255, .06) 70%, rgba(169, 178, 255, .2) 99%, transparent); mix-blend-mode: screen; animation: scan 8s linear infinite }
@keyframes scan { from { transform: translateY(-100%) } to { transform: translateY(460%) } }
.map-hud { position: absolute; z-index: 2; left: 18px; top: 16px; margin: 0; color: rgba(201, 207, 255, .55); font-size: 10px }
.map-lat { position: absolute; z-index: 2; right: 12px; top: 0; bottom: 0 }
.map-lat span { position: absolute; right: 0; transform: translateY(-50%); color: rgba(201, 207, 255, .42); font-size: 9.5px }
.place { position: absolute; z-index: 3; width: 0; height: 0 }
.place .g { position: absolute; overflow: visible; fill: none; stroke: #C9CFFF; stroke-width: 1.1; stroke-linejoin: round }
.place .mk { fill: var(--night) }
.place .core { stroke: #A9B2FF; stroke-dasharray: 2 2.2 }
.place .hid { stroke-dasharray: 1.5 2; stroke-opacity: .5 }
.place .ping { stroke: #7C88FF; stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: ping 2.8s var(--ease) infinite; animation-delay: var(--d, 0s) }
@keyframes ping { 0% { transform: scale(.4); opacity: .9 } 70%, 100% { transform: scale(2.4); opacity: 0 } }
.place span { position: absolute; left: 13px; top: -10px; display: grid; gap: 3px; padding: 3px 8px 4px; white-space: nowrap; border-left: 1px solid rgba(169, 178, 255, .5); background: linear-gradient(90deg, rgba(5, 5, 6, .78), rgba(5, 5, 6, 0)) }
.place b { font-weight: 400; color: #F2F3FF; font-size: 11px }
.place em { font-style: normal; color: rgba(201, 207, 255, .62); text-transform: none; letter-spacing: .02em; font-size: 11px }
.place.k-build span { top: -22px }
.place--portland span { left: 28px }
/* Hermosillo sits between Los Angeles above and Puerto Vallarta and Mexico below: its label is one line, the name
   and its ventures side by side, to fit the gap */
.place--hermosillo span { top: -4px; grid-auto-flow: column; align-items: baseline; gap: 8px }
.place.l span { left: auto; right: 13px; text-align: right; border-left: 0; border-right: 1px solid rgba(169, 178, 255, .5); background: linear-gradient(270deg, rgba(5, 5, 6, .78), rgba(5, 5, 6, 0)) }
/* each mark scales about its own point */
.place.k-drill .g { transform-origin: 8px 8px }
.place.k-build .g { transform-origin: 9px 23px }
.place.k-make .g { transform-origin: 7px 7px }
/* a narrower panel (a phone, or a laptop's column): names only, smaller; Puerto Vallarta's goes down into the Pacific,
   clear of Mexico's bore and Colombia, on a line from its point; Hermosillo's goes east along a line from its chip,
   past Mexico's; Brazil's goes under its tower */
@container (max-width: 700px) {
  .map-hud { left: 12px; top: 10px; font-size: 8.5px }
  .map-lat { right: 8px }
  .map-lat span { font-size: 8px }
  .place span { left: 11px; padding: 2px 6px 3px }
  .place--portland span { left: 26px }
  .place.l span { right: 11px }
  .place.l.place--puerto-vallarta span { left: -70px; right: auto; top: 60px; text-align: left; border-right: 0; border-left: 1px solid rgba(169, 178, 255, .5); background: rgba(5, 5, 6, .78) }
  .place--puerto-vallarta::after { content: ""; position: absolute; left: -1px; top: 7px; width: 1px; height: 53px; background: rgba(169, 178, 255, .5) }
  .place--brazil span { left: -22px; top: 12px }
  .place--hermosillo span { left: calc(10.06cqi + 72px); top: -9px }
  .place--hermosillo::after { content: ""; position: absolute; left: 8px; top: 0; width: calc(10.06cqi + 64px); height: 1px; background: rgba(169, 178, 255, .5) }
  .place span em { display: none }
  .place b { font-size: 9.5px }
}
@container (max-width: 300px) {
  .place .g { transform: scale(.72) }
}
.map-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px }
.map-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; color: var(--ink-2) }
.map-key span { display: inline-flex; align-items: center; gap: 9px }
.map-key .gk { position: static; overflow: hidden; fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round }
.map-key .mk { fill: var(--paper) }
.map-key .core { stroke-dasharray: 2 2.2 }
.map-key .hid { stroke-dasharray: 1.5 2; stroke-opacity: .5 }
.map-key .ping { display: none }
.map-cr { margin: 0; color: var(--ink-3); font-size: 10px; letter-spacing: .04em; text-transform: none }

/* focus: the six fields as cards in a row, each opening onto its examples in a sheet */
.fx-rail { list-style: none; margin: 0 calc(-1 * var(--g)); padding: 10px var(--g) 12px; display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); scrollbar-width: none }
.fx-rail::-webkit-scrollbar { display: none }
.fx-rail > li { flex: none; scroll-snap-align: start }
/* with a mouse or a trackpad the row is no scroller of its own, so the wheel always scrolls the page (Safari kept a
   vertical wheel for the row, and the page stood still under the cards); the arrows step it, a sideways swipe moves it */
@media (hover: hover) and (pointer: fine) {
  .fx-rail { overflow-x: hidden; scroll-snap-type: none; overscroll-behavior-x: auto }
}
.fx-card { position: relative; isolation: isolate; display: block; width: clamp(272px, 25vw, 360px); aspect-ratio: 5 / 7; padding: 0; border: 0; border-radius: 24px; overflow: hidden; background: #111112; color: var(--white); font: inherit; text-align: left; cursor: pointer; transition: transform .6s var(--ease) }
.fx-card:hover { transform: scale(1.012) }
.fx-card:focus-visible { outline-offset: 4px; border-radius: 24px }
.fx-ph { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease) }
.fx-card:hover .fx-ph { transform: scale(1.045) }
.fx-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .2) 34%, rgba(0, 0, 0, 0) 54%), linear-gradient(0deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 28%) }
.fx-card.is-dark { background: #0B0B0A }
.fx-art { position: absolute; z-index: -2; left: 50%; top: 60%; width: 44%; transform: translate(-50%, -50%); color: #F2F2EE }
.fx-art svg { display: block; width: 100%; height: auto }
.fx-top { position: absolute; left: 0; right: 0; top: 0; display: grid; gap: 12px; padding: 26px 26px 0 }
.fx-k { color: rgba(255, 255, 255, .74) }
.fx-t { max-width: 11ch; font: 700 clamp(28px, 2.4vw, 36px)/1.02 var(--display); letter-spacing: -.025em; text-wrap: balance }
.fx-t i, .fx-h i { display: inline-block; width: .19em; height: .19em; margin-left: .05em; border-radius: 50%; background: var(--sine-hi) }
.fx-h i { background: var(--sine) }
.fx-dots { position: absolute; left: 26px; bottom: 26px; display: flex }
.fx-dots .d { width: 30px; height: 30px; margin-left: -8px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, .92); background: #222 }
.fx-dots .d:first-child { margin-left: 0 }
.fx-dots img, .fx-dots .fx-mk { width: 100%; height: 100%; object-fit: cover }
.fx-mk { display: grid; place-items: center; border-radius: 50% }
.fx-mk.is-csm { background: var(--paper); color: var(--ink) }
.fx-mk.is-csm svg { width: 100%; height: 100% }
.fx-mk.is-hyde { background: #0B0B0A; color: #F2F2EE }
.fx-mk.is-hyde svg { width: 56% }
.fx-plus { position: absolute; right: 18px; bottom: 18px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); transition: background .3s var(--ease), transform .6s var(--ease) }
.fx-plus::before, .fx-plus::after, .fx-x::before, .fx-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%) }
.fx-plus::after { transform: translate(-50%, -50%) rotate(90deg) }
.fx-card:hover .fx-plus { background: rgba(255, 255, 255, .34); transform: rotate(90deg) }
.fx-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px }
.fx-nav .ib svg { width: 12px; height: 12px }
.fx-nav .ib[aria-disabled="true"] { opacity: .3; cursor: default }
.fx-nav .ib[aria-disabled="true"]:hover::before { border-color: var(--rule-2) }
/* the sheet: it opens out of its card's picture (the picture flies to the top of the sheet); across the top, the sector's
   picture with its name; then each venture a large white tile, its picture and logo on one side (sides alternate), its
   sector and place, its name, its own words, and what to do: show it in Ventures, visit its site */
.fx-dlg { width: min(100% - 2 * var(--g), 1120px); max-width: none; max-height: calc(100svh - 40px); max-height: calc(100dvh - 40px); margin: auto; padding: 0; border: 0; border-radius: 28px; background: var(--paper); color: var(--ink); overflow: hidden; box-shadow: 0 50px 140px -40px rgba(0, 0, 0, .6) }
/* pulled down, the backdrop clears as the sheet goes (--pull, 0 to 1; csmakar.js), and comes back if it is let go */
.fx-dlg::backdrop { background: rgba(11, 11, 12, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: calc(1 - var(--pull, 0) * .8); transition: opacity .34s var(--ease) }
.fx-dlg.is-pulling::backdrop { transition: none }
/* a sheet that takes over from the one beside it comes over the same backdrop, not faded in again (closing, it fades out
   as ever) */
.fx-dlg.no-fade[open]::backdrop { animation: none }
.fx-dlg[open]::backdrop { animation: fade-in .45s var(--ease) both }
.fx-dlg.is-closing::backdrop { animation: fade-out .3s linear both }
.fx-dlg.is-closing.is-zoom::backdrop { animation: fade-out .62s cubic-bezier(.32, .72, 0, 1) both }
@keyframes fade-in { from { opacity: 0 } }
@keyframes fade-out { to { opacity: 0 } }
.fx-sheet { max-height: inherit; overflow: auto; overscroll-behavior: contain }
.fx-sheet:focus { outline: none }
/* swiped sideways, the next sheet comes in beside this one (csmakar.js): a copy of it, in a box like the sheet's, at the
   sheet's side; nothing of either is clipped meanwhile, the sheet's own corners kept by the sheet itself */
.fx-dlg.is-paging { overflow: visible }
.fx-dlg.is-paging > .fx-sheet { border-radius: inherit }
.fx-peek { position: absolute; width: 100%; max-height: inherit; overflow: hidden; border-radius: inherit; background: var(--paper); box-shadow: inherit; pointer-events: none }
/* the handle at the top of a sheet on a touch screen: it can be pulled down to close */
.fx-grab { display: none; position: absolute; z-index: 2; left: 50%; top: 8px; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: rgba(255, 255, 255, .7); pointer-events: none }
@media (max-width: 860px), (pointer: coarse) { .fx-grab { display: block } }
/* the zoom (csmakar.js): the paper grows from the card into the sheet, and the card's double flies to the sheet's top, both
   under the sheet's words; meanwhile the sheet's own paper, picture and shade are hidden. Closing, the page clears as
   the sheet goes back into its card */
.fx-frame { position: fixed; z-index: -1; margin: 0; background: var(--paper); box-shadow: 0 50px 140px -40px rgba(0, 0, 0, .6); pointer-events: none }
.fx-ghost { position: fixed; z-index: -1; margin: 0; overflow: hidden; isolation: isolate; background: #111112; color: var(--white); pointer-events: none }
.fx-ghost .fx-ph { transition: none }
.fx-gc, .fx-gb { position: absolute; inset: 0; z-index: -1 }
.fx-gc { background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .2) 34%, rgba(0, 0, 0, 0) 54%), linear-gradient(0deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 28%) }
.fx-gb { background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .22) 55%, rgba(0, 0, 0, .08)); opacity: 0 }
/* nothing of the sheet clips while it zooms: Safari cut the paper growing out of a card to the sheet's own rounded box,
   so a card far from where the sheet ends (a wide window) came apart from its picture */
.fx-dlg.is-zoom { background: transparent; box-shadow: none; overflow: visible }
.fx-dlg.is-zoom .fx-band { background: transparent }
.fx-dlg.is-zoom .fx-band-ph, .fx-dlg.is-zoom .fx-band::after { visibility: hidden }
.fx-x { position: absolute; z-index: 4; top: 18px; right: 18px; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgba(11, 11, 12, .5); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); color: var(--white); cursor: pointer; transition: background .3s var(--ease), transform .4s var(--ease) }
.fx-x::before { transform: translate(-50%, -50%) rotate(45deg) }
.fx-x::after { transform: translate(-50%, -50%) rotate(-45deg) }
.fx-x:hover { background: rgba(11, 11, 12, .72); transform: rotate(90deg) }
.fx-x:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 2px; border-radius: 50% }
.fx-band { position: relative; height: clamp(250px, 44vh, 440px); overflow: hidden; color: var(--white); background: #111112 }
.fx-band-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.fx-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .22) 55%, rgba(0, 0, 0, .08)) }
.fx-band-in { position: absolute; z-index: 1; left: clamp(26px, 4.6vw, 64px); right: clamp(26px, 4.6vw, 64px); bottom: clamp(24px, 4vh, 48px); display: grid; gap: 12px }
.fx-band .fx-k { margin: 0; color: rgba(255, 255, 255, .76) }
.fx-h { margin: 0; font: 700 clamp(42px, 5.8vw, 88px)/.94 var(--display); letter-spacing: -.04em; text-wrap: balance; color: var(--white) }
.fx-h i { background: var(--sine-hi) }
.fx-note { margin: 0; color: rgba(255, 255, 255, .82); font-size: 16px }
.fx-exs { list-style: none; margin: 0; padding: clamp(16px, 2.6vw, 36px); display: grid; gap: clamp(14px, 1.8vw, 22px) }
.fx-ex { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; gap: clamp(22px, 3.6vw, 56px); padding: clamp(12px, 1.4vw, 18px); border-radius: 26px; background: var(--white); box-shadow: 0 1px 0 rgba(11, 11, 12, .04), 0 18px 50px -36px rgba(11, 11, 12, .35) }
.fx-ex:nth-child(even) .fx-media { order: 2 }
.fx-media { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--paper-2) }
.fx-media .ph { transition: transform 1.4s var(--ease) }
.fx-ex:hover .fx-media .ph { transform: scale(1.035) }
.fx-media .ov-logo { width: calc(var(--w, 36) * .78%) }
.fx-media .ov-name { font-size: 7.8cqi }
.fx-media.is-hyde { display: grid; place-items: center; background: #0B0B0A; color: #F2F2EE }
.fx-media.is-hyde svg { height: 44% }
.fx-tx { display: grid; gap: 12px; padding: 8px clamp(4px, 1vw, 16px) }
.fx-who { margin: 0; color: var(--ink-3) }
.fx-name { margin: 0; font: 700 clamp(30px, 3vw, 46px)/1 var(--display); letter-spacing: -.03em; text-wrap: balance }
.fx-line { margin: 2px 0 0; color: var(--ink-2); font: 500 clamp(18px, 1.3vw + 6px, 22px)/1.35 var(--display); letter-spacing: -.008em; text-wrap: pretty }
.fx-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0 }
.fx-acts .pill { min-height: 42px; padding: 0 18px; font: inherit; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; background: transparent; color: var(--ink) }
.fx-acts .pill.solid { background: var(--ink); border-color: var(--ink); color: var(--paper) }
.fx-acts .pill.solid:hover { background: #26262A }
.fx-acts .pill .arr { transition: transform .3s var(--ease) }
.fx-acts .pill:hover .arr { transform: translateX(2px) }
.fx-acts .fx-site:hover .arr { transform: translate(2px, -2px) }
.fx-acts .ss-g i { width: 7px; height: 7px }

/* about */
.ab { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g); align-items: start }
.ab figure { margin: 0; display: grid; gap: 12px }
.ab figure div { aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2) }
.ab figure img { width: 100%; height: 100%; object-fit: cover }
.ab figcaption { color: var(--ink-2) }
.ab h3 { margin: 0; font: 800 clamp(38px, 4.6vw, 74px)/.9 var(--display); letter-spacing: -.035em; text-transform: uppercase }
.ab .lead { margin: 26px 0 26px; font: 500 clamp(22px, 1.6vw + 8px, 32px)/1.18 var(--display); letter-spacing: -.015em; text-wrap: balance }
.ab p.b { margin: 0 0 16px; max-width: 62ch; color: var(--ink-2) }
.ab p.b a { color: var(--ink); border-bottom: 1px solid var(--square) }

/* footer */
.foot { position: relative; z-index: 4; background: var(--paper); padding: clamp(110px, 16vh, 180px) var(--g) 28px }
.foot-word { margin: 0; display: flex; align-items: flex-end; font: 800 var(--t, 17vw)/.8 var(--display); letter-spacing: -.045em; margin-left: -.045em; white-space: nowrap }
.foot-word .stop { display: inline-block; width: .19em; height: .19em; margin: 0 0 .018em .05em; border-radius: 50%; background: var(--sine); flex: none }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g); margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--ink) }
/* each column's heading and list sit on rows of the foot's own, so lists side by side start level however their
   headings wrap (on a phone, Investment & consulting takes two lines) */
.foot-cols > div { display: grid; grid-row: span 2; grid-template-rows: subgrid }
.foot-cols h3 { margin: 0 0 12px; font-weight: 400; color: var(--ink-3) }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 6px }
.foot-cols li a { display: inline-flex; align-items: center; min-height: 32px; border-bottom: 1px solid transparent; transition: border-color .3s var(--ease) }
.foot-cols li a:hover { border-color: var(--sine) }
.foot-marks a { gap: .6em }
/* the two names, in capitals as each is set, each with its logo at the same size: CSMAKAR's before it, Cyrusrex's after */
.foot-brand { letter-spacing: .02em }
.foot-mark { flex: none; width: 1.15em; height: 1.15em; fill: currentColor; overflow: visible }
.foot-cols .soft { color: var(--ink-3) }
.foot-legal { display: flex; justify-content: space-between; gap: 18px; margin-top: 64px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--ink-3) }

/* ---------- phone ---------- */
@media (max-width: 860px) {
  :root { --head: 60px }
  .head { grid-template-columns: auto 1fr auto; gap: 10px }
  .brand b, .nav { display: none }
  .tools { gap: 4px }
  .mbtn { display: inline-grid }
  .pin { height: 190svh }
  .hero { min-height: 560px; grid-template-rows: auto auto 1fr }
  .eyebrow { gap: .4rem 1rem }
  .eyebrow .x { display: none }
  .title { margin-top: 22px; align-self: start }
  .hero-foot { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; margin-top: 18px }
  /* on a phone the circle sits at the right, under the title's full stop, and its caption beneath it, right-aligned in
     room for two lines, so a long name wrapping moves nothing */
  .fig { order: -1; align-self: stretch; gap: 10px; padding-bottom: 0 }
  .fig figcaption { position: static; justify-content: flex-end; text-align: right; white-space: normal; min-height: calc(2 * 1.4 * 12px) }
  .fig-lens { width: min(58vw, 30vh, 250px) }
  .sec-head { grid-template-columns: 1fr; gap: 10px }
  .sec-head .note { text-align: left }
  .vx { grid-template-columns: 1fr; gap: 0 }
  .vx-stage { position: sticky; z-index: 2; top: calc(var(--head) + env(safe-area-inset-top, 0px)); order: -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 16px; padding: 12px 0; background: var(--paper); border-bottom: 1px solid var(--rule) }
  .vx-lens { width: 34vw; max-width: 160px }
  .vx-say { gap: 8px }
  .vx-say p { min-height: 0; font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden }
  .vx-say a { max-width: 100%; font-size: 10.5px; letter-spacing: .04em }
  .vx-say a span { min-width: 0; overflow-wrap: anywhere }
  .vx-list { padding-bottom: 30vh }
  .vx-row { padding: 18px 0 }
  .vx-row:first-child { border-top: 0 }
  .map { border-radius: 14px }
  .fx-card { width: min(76vw, 330px); border-radius: 22px }
  .fx-top { padding: 22px 22px 0 }
  .fx-dots { left: 22px; bottom: 22px }
  /* the sheet rises to just under the top of the screen as Safari shows it (its smallest height, svh, left the top third
     empty with its bars tucked away: Cyrus, 9 Oct 2026, "cards are dropped low weird") */
  .fx-dlg { width: 100%; max-height: 92svh; max-height: calc(100dvh - 28px - env(safe-area-inset-top, 0px)); margin: auto 0 0; border-radius: 24px 24px 0 0 }
  .fx-x { top: 12px; right: 12px }
  .fx-band { height: 230px }
  .fx-exs { padding: 12px 12px calc(20px + env(safe-area-inset-bottom, 0px)); gap: 12px }
  .fx-ex { grid-template-columns: 1fr; gap: 14px; padding: 10px; border-radius: 22px }
  .fx-ex:nth-child(even) .fx-media { order: 0 }
  .fx-tx { padding: 2px 6px 8px; gap: 9px }
  .fp { grid-template-columns: 1fr; gap: 26px }
  .big { max-width: 22ch }
  .ab { grid-template-columns: 1fr }
  /* its type steps down with the width on the narrowest phones, so its widest line, www.cyrusrex.com, keeps within its
     column (it ran off the screen under 345 px): 17 px from about 350 px up, as before */
  .foot-cols { grid-template-columns: 1fr 1fr; font-size: min(17px, calc((100vw - 3 * var(--g)) / 17.6)) }
  .foot-cols > div:nth-child(-n+2) ul { margin-bottom: var(--g) }
  .foot-legal { flex-direction: column; gap: 6px }
  .fs { display: none }
  .hyde-tag { font-size: 10px; white-space: normal; width: calc(100% - 24px); text-align: center }
}
@media (prefers-reduced-motion: reduce) {
  .pin { height: auto }
  .hero { position: relative; height: auto; min-height: 100svh }
  .dive { display: none }
  .fig-lens img { transition: none }
  .scan { display: none }
  .place .ping { animation: none; display: none }
  .fx-card, .fx-ph, .fx-plus, .fx-media .ph { transition: none }
  .fx-card:hover, .fx-card:hover .fx-ph, .fx-ex:hover .fx-media .ph { transform: none }
  .fx-dlg[open]::backdrop { animation: none }
  .fig-lens .ph { transition: none; transform: none }
}