:root{
  --void:#050608; --void-2:#0a0e14; --panel:#0d1219;
  --ice:#eaf6f9; --ice-dim:#b9d2d8; --cyan:#7fd4e8; --cyan-dim:#3f7d8c;
  --silver:#c9d3d9;
  --line:rgba(234,246,249,0.14); --muted:#7e8a93;
  --font:"Inter",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --font-d:"Space Grotesk",var(--font);
  --pad:2.4em;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{
  width:100%; background:var(--void); color:var(--ice); font-family:var(--font);
  font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:clip;
  color-scheme:dark; -webkit-text-size-adjust:100%;
}
html{ scrollbar-width:none; }
body::-webkit-scrollbar{ width:0; height:0; }
::selection{ background:var(--cyan); color:var(--void); }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.mono{ font-family:"Space Grotesk",monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }

/* ---------- grain / progress / cursor / loader ---------- */
.grain{ position:fixed; inset:0; z-index:99990; pointer-events:none; opacity:0.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:100060; pointer-events:none; }
.scroll-progress i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--cyan-dim),var(--cyan));
  box-shadow:0 0 12px rgba(127,212,232,0.6); }

.sec-counter{ position:fixed; left:var(--pad); bottom:1.8em; z-index:1000; font-family:var(--font-d);
  font-size:11px; letter-spacing:0.22em; color:var(--muted); pointer-events:none; opacity:0; }

.custom-cursor{ display:none; }
@media (pointer:fine) and (hover:hover){
  body{ cursor:none; }
  .custom-cursor{ display:block; position:fixed; top:0; left:0; width:16px; height:16px; border-radius:999px;
    border:1px solid var(--cyan); box-shadow:0 0 14px 1px rgba(127,212,232,0.55); pointer-events:none;
    z-index:100100; will-change:transform; transition:opacity .3s ease, width .25s ease, height .25s ease; }
  .custom-cursor.is-hidden{ opacity:0; }
  .custom-cursor.is-big{ width:46px; height:46px; background:rgba(127,212,232,0.08); }
}

.loader{ position:fixed; inset:0; z-index:100050; background:var(--void); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1.6em; }
.loader-mark{ font-family:var(--font-d); font-size:15px; letter-spacing:0.5em; color:var(--ice); }
.loader-bar{ width:140px; height:1px; background:rgba(234,246,249,0.18); overflow:hidden; }
.loader-bar i{ display:block; width:0%; height:100%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.loader.is-hidden{ opacity:0; pointer-events:none; transition:opacity .6s ease; }

/* ---------- hero wordmark — the one piece of type that sits on the object ---------- */
.hero-mark{ position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1.4em; pointer-events:none; text-align:center; }
/* it sits on a lit facet, so it needs more than --cyan-dim to stay readable */
.mark-eyebrow{ color:#8fc4d4; text-shadow:0 0 22px rgba(5,6,8,0.95), 0 0 7px rgba(5,6,8,0.9); }
.mark-word{ font-family:var(--font-d); font-weight:600; font-size:clamp(3rem,10vw,8.5rem);
  letter-spacing:0.04em; line-height:1; color:var(--ice);
  text-shadow:0 0 40px rgba(5,6,8,0.75), 0 0 90px rgba(127,212,232,0.4); }

/* ---------- header ---------- */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:1000; display:flex; align-items:center;
  justify-content:space-between; padding:1.8em var(--pad); opacity:0; }
.brand{ font-family:var(--font-d); font-size:15px; font-weight:500; letter-spacing:0.08em; }
.brand sup{ font-size:9px; opacity:0.6; }
.nav{ display:flex; align-items:center; gap:2.2em; font-family:var(--font-d); font-size:13px;
  letter-spacing:0.02em; font-weight:400; }
.nav a{ opacity:0.7; transition:opacity .3s ease; }
.nav a:hover{ opacity:1; }
.nav-cta{ border:1px solid var(--line); padding:0.6em 1.2em; opacity:1 !important; border-radius:999px;
  transition:border-color .3s ease, box-shadow .3s ease; }
.nav-cta:hover{ border-color:var(--cyan); box-shadow:0 0 16px -4px rgba(127,212,232,0.6); }

/* ---------- 01 hero — nothing sits on top of the object ---------- */
.hero{ position:relative; height:100vh; height:100svh; overflow:clip; }
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; }
[data-hero-ui]{ opacity:0; }
.hero-foot{ position:absolute; left:var(--pad); right:var(--pad); bottom:4.4em; z-index:5;
  display:flex; align-items:flex-end; justify-content:space-between; gap:2em; pointer-events:none; }
.hero-line{ color:var(--cyan-dim); }
.hero-cue{ white-space:nowrap; }
.cue-arrow{ display:inline-block; }
.hero-corner{ position:absolute; bottom:1.8em; z-index:5; }
.hero-corner--bl{ left:var(--pad); }

/* ---------- shared section furniture ---------- */
.sec-label{ margin-bottom:1.2em; }
.sec-title{ font-family:var(--font-d); font-weight:500; font-size:clamp(1.9rem,4.6vw,3.4rem); line-height:1.08;
  letter-spacing:-0.01em; max-width:14em; }
.line-mask{ display:block; overflow:hidden; }
.line-mask > span{ display:block; will-change:transform; }
.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word > span{ display:inline-block; will-change:transform,opacity; }

/* ---------- 02 thesis ---------- */
.thesis{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center;
  padding:6em var(--pad); background:linear-gradient(180deg,var(--void) 0%,var(--void-2) 100%); }
.thesis-inner{ max-width:1100px; margin:0 auto; width:100%; }
.thesis-copy{ font-family:var(--font-d); font-weight:400; font-size:clamp(1.5rem,3.5vw,2.9rem);
  line-height:1.28; letter-spacing:-0.01em; color:var(--ice); max-width:20em; }
.thesis-copy .word > span{ opacity:0.16; }
.thesis-meta{ margin-top:5em; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5em;
  border-top:1px solid var(--line); padding-top:2em; }
.tm{ display:flex; flex-direction:column; gap:0.5em; }
.tm-n{ font-family:var(--font-d); font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:500; color:var(--cyan); line-height:1; }
.tm-l{ font-size:10px; }

/* ---------- 03 ventures (horizontal travel) ---------- */
.ventures{ position:relative; background:var(--void-2); padding:7em 0 0; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center; }
.v-head{ padding:0 var(--pad) 3em; max-width:1240px; margin:0 auto; }
/* the six cards start as a squared-up deck and are dealt into a fan on scroll.
   The li carries the deal/fan transform, the button carries hover + tilt, so the
   two never fight over the same matrix. */
.v-stage{ position:relative; height:clamp(400px,58vh,600px); margin-bottom:2em; perspective:1600px; }
.v-deck{ position:absolute; inset:0; }
.v-deck > li{ position:absolute; left:50%; top:50%; width:clamp(180px,17vw,250px);
  transform-origin:50% 145%; will-change:transform; }
.v-hint{ text-align:center; opacity:0; }
.v-card{ position:relative; width:100%; aspect-ratio:3/4.1; border-radius:2px; padding:1.6em;
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; border:1px solid var(--line);
  /* opaque on purpose: a fanned deck must not let you read the card behind it */
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(127,212,232,0.16), transparent 60%),
    linear-gradient(155deg, rgba(234,246,249,0.07), rgba(234,246,249,0.02) 40%, rgba(5,6,8,0.5) 100%),
    #0b1017;
  transform-style:preserve-3d; will-change:transform;
  transition:border-color .4s ease, box-shadow .4s ease;
  font:inherit; color:inherit; text-align:left; cursor:none; -webkit-tap-highlight-color:transparent; }
.v-card::before{ content:""; position:absolute; inset:0; opacity:0.5; mix-blend-mode:overlay; pointer-events:none;
  background-image:var(--frost-tex); background-size:220px 220px; }
.v-card:hover,.v-card:focus-visible{ border-color:rgba(127,212,232,0.55);
  box-shadow:0 40px 70px -30px rgba(127,212,232,0.45); outline:none; }
/* a dealt card sits on the ones behind it, so it needs its own shadow */
.v-deck > li .v-card{ box-shadow:0 24px 50px -28px rgba(0,0,0,0.9); }
/* a light sweeps across the face on hover */
.v-sweep{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s ease;
  background:linear-gradient(115deg, transparent 35%, rgba(190,233,242,0.16) 50%, transparent 65%);
  transform:translateX(-60%); }
.v-card:hover .v-sweep,.v-card:focus-visible .v-sweep{ opacity:1; animation:sweep 1.1s ease forwards; }
@keyframes sweep{ to{ transform:translateX(60%); } }
.v-top,.v-bottom{ position:relative; display:block; }
.v-bottom{ display:flex; align-items:center; justify-content:space-between; gap:1em; }
.v-idx{ display:block; font-family:"Space Grotesk",monospace; font-size:11px; letter-spacing:0.14em; color:var(--cyan-dim); }
.v-cat{ display:block; margin-top:0.9em; font-family:"Space Grotesk",monospace; font-size:10.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:0.6em; }
.v-name{ display:block; font-family:var(--font-d); font-size:clamp(1.3rem,2vw,1.7rem); font-weight:500;
  letter-spacing:-0.01em; transition:color .35s ease; }
.v-card:hover .v-name{ color:var(--cyan); }
.v-desc{ display:block; margin-top:0.7em; font-size:13px; line-height:1.6; color:var(--ice-dim); font-weight:300; }
.v-status{ display:flex; align-items:center; gap:0.5em; font-family:"Space Grotesk",monospace; font-size:10px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.v-dot{ width:6px; height:6px; border-radius:999px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.v-status.is-frozen .v-dot{ background:var(--muted); box-shadow:none; }
.v-open{ display:inline-flex; align-items:center; gap:0.5em; font-size:10px; color:var(--ice-dim);
  opacity:0; transform:translateX(-6px); transition:opacity .35s ease, transform .35s ease; }
.v-card:hover .v-open,.v-card:focus-visible .v-open{ opacity:1; transform:translateX(0); }
.v-arrow{ transition:transform .35s ease; }
.v-card:hover .v-arrow{ transform:translateX(4px); }

/* ---------- venture detail panel ---------- */
.v-detail{ position:fixed; inset:0; z-index:100030; }
.v-detail[hidden]{ display:none; }
.vd-backdrop{ position:absolute; inset:0; background:rgba(3,5,7,0.82); backdrop-filter:blur(10px); }
.vd-panel{ position:absolute; overflow:hidden; border:1px solid rgba(127,212,232,0.28); border-radius:2px;
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(127,212,232,0.16), transparent 62%),
    linear-gradient(160deg, rgba(234,246,249,0.07), rgba(5,6,8,0.9) 70%);
  box-shadow:0 50px 120px -50px rgba(127,212,232,0.4); will-change:top,left,width,height; }
.vd-body{ padding:clamp(1.6em,4vw,3.2em); height:100%; overflow-y:auto; display:flex; flex-direction:column; }
.vd-idx{ color:var(--cyan-dim); }
.vd-cat{ margin-top:1.6em; }
.vd-name{ font-family:var(--font-d); font-weight:500; font-size:clamp(2rem,5vw,3.4rem); line-height:1.05;
  letter-spacing:-0.02em; margin-top:0.25em; }
.vd-thesis{ margin-top:1.4em; max-width:46ch; font-size:clamp(0.95rem,1.5vw,1.1rem); line-height:1.65;
  color:var(--ice-dim); }
.vd-facts{ margin-top:2.4em; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2em;
  border-top:1px solid var(--line); padding-top:1.4em; }
.vd-facts li{ display:flex; flex-direction:column; gap:0.45em; }
.vd-facts b{ font-family:var(--font-d); font-weight:500; font-size:1.15rem; color:var(--ice); }
.vd-foot{ margin-top:auto; padding-top:2.4em; display:flex; align-items:center; justify-content:space-between;
  gap:1.2em; flex-wrap:wrap; }
.vd-status{ display:flex; align-items:center; gap:0.5em; font-family:"Space Grotesk",monospace; font-size:10px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.vd-status.is-frozen .v-dot{ background:var(--muted); box-shadow:none; }
.vd-link{ font-family:var(--font-d); font-size:0.95rem; border-bottom:1px solid var(--line); padding-bottom:0.25em;
  transition:color .3s ease, border-color .3s ease; }
.vd-link:hover{ color:var(--cyan); border-color:var(--cyan); }
.vd-close{ position:absolute; top:1.2em; right:1.2em; z-index:2; width:42px; height:42px; border-radius:999px;
  border:1px solid var(--line); background:rgba(5,6,8,0.5); cursor:none; display:grid; place-items:center;
  transition:border-color .3s ease, background .3s ease; }
.vd-close:hover{ border-color:var(--cyan); background:rgba(127,212,232,0.1); }
.vd-close span{ position:absolute; width:14px; height:1px; background:var(--ice); }
.vd-close span:first-child{ transform:rotate(45deg); }
.vd-close span:last-child{ transform:rotate(-45deg); }

/* ---------- 04 marquee ---------- */
.marquee-sec{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--void-2); padding:1.6em 0; }
.marquee{ display:flex; width:max-content; will-change:transform; }
.marquee span{ font-family:var(--font-d); font-size:clamp(1.1rem,2.4vw,1.8rem); font-weight:400;
  letter-spacing:0.02em; color:rgba(234,246,249,0.32); white-space:nowrap; }

/* ---------- 05 field ---------- */
.field{ position:relative; height:100vh; height:100svh; overflow:clip; background:var(--void-2);
  display:flex; align-items:flex-start; padding-top:16vh; }
.field-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.field-inner{ position:relative; z-index:5; max-width:640px; padding:0 var(--pad); pointer-events:none; }
.field-title{ margin-top:0.9em; font-family:var(--font-d); font-weight:500; font-size:clamp(2.2rem,5.2vw,4rem);
  line-height:1.06; letter-spacing:-0.01em; max-width:11em; }
.field-sub{ margin-top:1.3em; max-width:420px; font-size:14.5px; line-height:1.7; color:var(--ice-dim); font-weight:300; }

/* ---------- 06 contact ---------- */
.contact{ padding:9em var(--pad) 3em; background:var(--void); }
.contact-big{ font-family:var(--font-d); font-weight:500; font-size:clamp(2.2rem,6vw,4.6rem); line-height:1.05;
  letter-spacing:-0.01em; max-width:14em; }
.contact-mail{ display:inline-block; margin-top:2em; font-family:var(--font-d); font-size:clamp(1.1rem,2.4vw,1.5rem);
  border-bottom:1px solid var(--line); padding-bottom:0.3em; transition:border-color .3s ease, color .3s ease;
  will-change:transform; }
.contact-mail:hover{ color:var(--cyan); border-color:var(--cyan); }
.foot-row{ margin-top:6em; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.2em;
  padding-top:2em; border-top:1px solid var(--line); }
.foot-links{ display:flex; gap:1.8em; font-family:"Space Grotesk",monospace; font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); }
.foot-links a:hover{ color:var(--cyan); }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .thesis-meta{ grid-template-columns:repeat(2,1fr); gap:2em 1.5em; }
}
@media (max-width:768px){
  :root{ --pad:1.4em; }
  .site-header{ padding:1.3em var(--pad); }
  .nav{ gap:1.1em; font-size:12px; }
  .nav-cta{ padding:0.5em 0.9em; }
  .hero-eyebrow{ top:4.8em; }
  .hero-foot{ bottom:3.6em; flex-direction:column; align-items:flex-start; gap:0.9em; }
  .hero-line{ font-size:15px; }
  .hero-corner{ display:none; }
  .sec-counter{ display:none; }
  .thesis{ padding:6em var(--pad); }
  .thesis-meta{ margin-top:3.4em; }
  .ventures{ padding-top:5em; }
  .v-head{ padding-bottom:2.2em; }
  .v-stage{ height:clamp(320px,46vh,420px); }
  .v-deck > li{ width:min(40vw,158px); }
  .v-card{ cursor:pointer; padding:1em; }
  .v-card .v-desc{ display:none; }   /* the panel carries the copy at this size */
  .v-cat{ margin-top:0.8em; font-size:9px; letter-spacing:0.08em; }
  .v-name{ font-size:1.05rem; }
  .v-status{ font-size:9px; }
  .v-open{ display:none; }
  .v-open{ opacity:1; transform:none; }
  .vd-facts{ grid-template-columns:1fr 1fr; gap:1em; }
  .vd-close{ top:0.8em; right:0.8em; cursor:pointer; }
  .field{ height:auto; min-height:100vh; min-height:100svh; padding:6em 0; }
  .contact{ padding:6em var(--pad) 2.4em; }
  .foot-row{ flex-direction:column; align-items:flex-start; }
}
/* below this the four nav items crowd the wordmark — the CTA is the only one
   that has to survive, the sections are all one scroll away anyway */
@media (max-width:620px){
  .nav a:not(.nav-cta){ display:none; }
  .nav{ gap:0; }
  .mark-eyebrow{ color:#8fc4d4; text-shadow:0 0 20px rgba(5,6,8,0.95), 0 0 6px rgba(5,6,8,0.9); }
}
@media (max-width:480px){
  .brand{ font-size:14px; }
  .field-sub,.hero-line{ font-size:13.5px; }
}
@media (max-width:360px){
  :root{ --pad:1.1em; }
  .nav-cta{ padding:0.45em 0.75em; font-size:11px; }
}
/* short landscape — height is the scarce axis */
@media (max-height:560px) and (orientation:landscape){
  .site-header{ padding:0.9em var(--pad); }
  .intro-mark{ font-size:clamp(2.4rem,13vh,4.4rem); }
  .hero-eyebrow{ top:4em; }
  .hero-foot{ bottom:2.2em; }
  .hero-corner{ display:none; }
  .thesis{ min-height:0; padding:5em var(--pad); }
  .field{ height:auto; min-height:0; padding:5em 0 4em; }
  .contact{ padding:5em var(--pad) 2.4em; }
  .foot-row{ margin-top:3em; }
}
@media (pointer:coarse){
  .nav a{ padding:0.55em 0; }
  .foot-links a{ padding:0.4em 0; }
  .contact-mail{ padding-bottom:0.5em; }
}
@media (prefers-reduced-motion:reduce){
  .marquee{ transform:none !important; }
}