/* ============================================================
   Odyssey Ventures — design tokens (greyscale + orange, Poppins)
   ============================================================ */
:root{
  --black:#262626;       /* primary text */
  --near-black:#1A1A1A;  /* deepest shade (hero bg) */
  --white:#FFFFFF;
  --grey-050:#F6F6F6;    /* near-white wash / subtle hover */
  --grey-300:#E1E1E1;    /* hairline borders */
  --grey-600:#262626;    /* secondary text */
  --grey-800:#262626;    /* tertiary prose */

  --mint:#EEEEEE;        /* primary surface tint (larger blocks) */
  --teal-medium:#3A3A3A; /* dark "section" backgrounds */
  --accent:#FF511C;      /* primary accent, used sparingly */
  --accent-hover:#E8420F;
  --accent-soft:#FFE3D8;
  --shadow-accent:0 10px 26px rgba(255,81,28,.30);

  --font-display:'Poppins', sans-serif;
  --font-body:'Poppins', sans-serif;

  --container:1320px;
  --gutter:64px;
  --nav-h:96px;
}

*,*::before,*::after{box-sizing:border-box;}
/* Smooth scrolling is enabled via JS only after the page has settled (see
   main.js) — if it's on from the very start, the browser's own jump to a
   URL hash on load (e.g. a deep link to index.html#portfolio) animates
   instead of jumping instantly, which races the nav's light/dark check
   below and can leave the nav stuck transparent-on-white ("invisible")
   at the target section. */
body{
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:var(--font-body);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
/* Applied while the mobile nav is open — stops the page behind it from
   scrolling (see the nav-locked toggle in main.js). */
body.nav-locked{
  overflow:hidden;
  position:fixed;
  width:100%;
}
/* Sticky footer: #main grows to fill any leftover viewport height on
   short pages, so .site-footer always sits flush with the bottom of the
   screen instead of floating mid-page. */
#main{flex:1 0 auto;}
.site-footer{flex-shrink:0;}
img{display:block;max-width:100%;}
a{color:inherit;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);}
@media (max-width:900px){
  :root{--gutter:24px;}
}

.skip-link{position:absolute;left:-999px;top:0;background:var(--black);color:#fff;padding:12px 20px;z-index:200;}
.skip-link:focus{left:16px;top:16px;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Nav ----------
   Default = light theme (used on every subpage, and on the homepage
   once scrolled past the hero). `.nav-dark` = transparent-over-video
   theme, only ever applied on the homepage before the user scrolls. */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;
  /* Solid, not translucent+blurred: position:fixed combined with
     backdrop-filter is a known iOS Safari bug where the element detaches
     from the viewport and visibly drifts/lags mid-scroll instead of
     staying pinned — reported as the nav "lurking" partway down the
     page. A plain opaque background has no such issue. */
  background:var(--white);
  border-bottom:1px solid var(--grey-300);
  transition:background .35s ease, border-color .35s ease;
  padding:24px 0 20px;
}
/* Nav intentionally does NOT use .wrap's max-width/auto-margin centering — the
   logo and menu should hug the true viewport edge (a fixed gutter in), not the
   body copy's reading-width container. On a wide screen, capping the nav to
   the same 1320px column left it stranded in an inset "island" rather than
   anchored left. */
.nav-inner{width:100%;box-sizing:border-box;padding:0 var(--gutter);display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.nav-top-row{width:100%;display:flex;align-items:center;justify-content:space-between;}
.nav-word{
  font-family:var(--font-display);font-weight:500;font-size:26px;letter-spacing:-0.01em;
  color:var(--black);text-decoration:none;line-height:1;
}
/* Full-stop dot after the wordmark, both light and dark nav states. */
.nav-word::after{
  content:'';display:inline-block;width:7px;height:7px;margin-left:2px;
  border-radius:50%;background:var(--accent);vertical-align:baseline;
}

.nav-links{width:100%;display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0;}
.nav-links a{
  color:var(--grey-600);text-decoration:none;font-size:14px;font-weight:400;
  padding:6px 0;border-bottom:1px solid transparent;transition:color .2s, border-color .2s;
}
.nav-links a:hover,.nav-links a.is-active{color:var(--black);border-color:var(--accent);}
.nav-links .nav-split{margin-left:auto;}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;}
.nav-toggle span{display:block;width:20px;height:1px;background:var(--black);margin:5px 0;transition:background .2s;}

/* Transparent-over-video state (homepage hero only) */
.site-nav.nav-dark{background:transparent;border-color:transparent;}
.site-nav.nav-dark .nav-word{color:#fff;}
.site-nav.nav-dark .nav-links a{color:rgba(255,255,255,.7);}
.site-nav.nav-dark .nav-links a:hover,.site-nav.nav-dark .nav-links a.is-active{color:#fff;border-color:#fff;}
.site-nav.nav-dark .nav-toggle span{background:#fff;}

@media (max-width:900px){
  .nav-word{font-size:22px;}
  .nav-toggle{display:block;position:relative;z-index:2;}
  .nav-toggle span{transition:transform .25s ease, opacity .2s ease, background .2s ease;}
  /* Hamburger -> X: the two outer lines slide together and rotate into a
     cross, the middle one fades out. Translate distance (6px) matches the
     1px line height + 5px margin between lines, so they meet at centre. */
  .nav-toggle.is-open span{background:#fff;}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .nav-toggle.is-open span:nth-child(2){opacity:0;}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  .nav-toggle.is-open{border:1px solid rgba(255,255,255,.4);border-radius:999px;}

  /* Full-page takeover (giant.vc-style) rather than a partial panel below
     the header — starts at the true viewport top (not var(--nav-h)) and
     covers the logo too, which .nav-open hides since it'd otherwise sit
     underneath, invisible but still keyboard-focusable. */
  .site-nav.nav-open .nav-word{visibility:hidden;}
  .nav-links{
    position:fixed;inset:0;
    height:100vh;
    height:100dvh;
    overflow-y:auto;z-index:1;
    background:#000;flex-direction:column;align-items:stretch;gap:0;
    transform:translateX(100%);transition:transform .3s ease;
    padding:88px 24px 40px;
    width:auto;
  }
  .nav-links.is-open{transform:translateX(0);}
  /* Every item identical and evenly spaced — no special-casing for the
     Thinking/News/Contact group here (that's a desktop-only distinction,
     see .nav-split below); on the full-page mobile menu an extra divider
     around one item just broke the rhythm. */
  .nav-links li{width:100%;}
  .nav-links a{
    display:block;width:100%;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.18);
    font-family:var(--font-display);font-weight:500;font-size:18px;color:#fff;
    box-sizing:border-box;
  }
  .nav-links a:hover,.nav-links a.is-active{color:#fff;border-color:rgba(255,255,255,.4);}
  .nav-links .nav-split{margin-left:0;margin-top:0;padding-top:0;border-top:none;}
  .nav-links .nav-split a{border-top:none;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;height:100vh;min-height:640px;
  display:flex;align-items:flex-end;
  overflow:hidden;background:var(--black);
}
.hero-bg{position:absolute;inset:0;overflow:hidden;}
/* Hidden entirely once a video successfully takes over (see main.js) — this is
   a genuine fallback for when video can't play at all, not a co-running layer. */
.hero-bg.video-active .hero-scene{display:none;}
.hero-scene{
  position:absolute;inset:-5%;
  background-size:cover;background-position:center;
  filter:grayscale(1) contrast(1.15);
  opacity:0;
  animation:hero-crossfade 16s infinite;
}
.hero-scene--1{
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(ellipse 80% 60% at 70% 80%, rgba(255,255,255,.12), transparent 70%),
    linear-gradient(160deg, #050505 0%, #2b2b2b 45%, #050505 100%);
  animation-delay:0s;
}
.hero-scene--2{
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,.5) 0 3px, transparent 4px) 0 0/64px 64px,
    radial-gradient(circle at 60% 65%, rgba(255,255,255,.35) 0 5px, transparent 6px) 0 0/96px 96px,
    linear-gradient(200deg, #060606 0%, #1c1c1c 55%, #060606 100%);
  animation-delay:-8s;
}
.hero-grain{
  position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;pointer-events:none;
  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");
}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(1.08);opacity:0;}
/* Single video now (no second clip to cross-dissolve with) — a plain one-time
   fade-in once it's ready, rather than the infinite crossfade loop used
   when there were two layers handing off to each other. */
.hero-video.is-ready{opacity:1;transition:opacity .8s ease;}
@keyframes hero-crossfade{
  0%{opacity:1;}
  35%{opacity:1;}
  50%{opacity:0;}
  85%{opacity:0;}
  100%{opacity:1;}
}
.hero-overlay{
  position:absolute;inset:0;
  /* 0% = bottom of hero (where the headline sits), 100% = top (behind the nav) */
  background:linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.22) 42%, rgba(0,0,0,.08) 65%, rgba(0,0,0,.65) 100%);
}
.hero-content{position:relative;z-index:2;width:100%;padding:0 var(--gutter) 92px;color:#fff;}
.hero h1{
  font-family:var(--font-display);font-weight:500;font-size:clamp(34px,5vw,76px);
  line-height:1.08;letter-spacing:-0.015em;margin:0 0 26px;max-width:16ch;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;}
.hero .btn-primary{background:#fff;color:var(--black);}
.hero .btn-primary:hover{background:var(--grey-050);}
.hero .btn-outline{border-color:rgba(255,255,255,.45);color:#fff;}
.hero .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.1);}
.hero-scroll{
  position:absolute;right:var(--gutter);bottom:36px;z-index:2;color:rgba(255,255,255,.55);
  font-size:11px;letter-spacing:.1em;display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hero-scroll::after{content:'';width:1px;height:36px;background:linear-gradient(180deg,rgba(255,255,255,.6),transparent);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;font-size:14px;font-weight:500;
  text-decoration:none;border-radius:999px;transition:background .2s,color .2s,border-color .2s;
  border:1px solid transparent;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-accent);}
.btn-primary:hover{background:var(--accent-hover);}
.btn-outline{border-color:var(--grey-300);color:var(--black);}
.btn-outline:hover{border-color:var(--accent);background:var(--grey-050);}

/* ---------- Section scaffolding ---------- */
section{padding:150px 0;}
.kicker{
  display:flex;align-items:baseline;gap:10px;margin-bottom:28px;
}
.kicker .label{
  font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--black);
  display:flex;align-items:center;gap:10px;
}
.kicker .label::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;}
h2.section-title{
  font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3vw,40px);
  line-height:1.15;letter-spacing:-0.01em;margin:0 0 28px;
}

/* ---------- About ---------- */
.about{background:var(--white);padding-bottom:70px;}
.array-title{
  font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2.4vw,30px);
  line-height:1.25;letter-spacing:-0.01em;margin:0;color:var(--black);
}

/* Contact page: team photo alongside the contact details. Markup order
   is details-then-photo (so mobile stacks with the photo last, below the
   contact details, without needing to fight source order); the order:-1
   below only kicks in at desktop width to move the photo to the left. */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.contact-photo-wrap{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:3/2;}
.contact-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);}
@media (min-width:901px){
  .contact-photo-wrap{order:-1;}
}

/* Contact page: three rows, each a headline + email pill side by side.
   Was three side-by-side columns before the team photo took half the
   page width — at half width, three columns squeezed each label onto
   its own cramped line, so they're rows now; the pill used to stretch
   to the row's full width too, which read oversized next to a short
   label, so it's sized to its content instead. */
.contact-grid{display:grid;grid-template-columns:1fr;gap:20px;max-width:400px;}
.contact-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:12px 20px;text-align:left;}
.contact-card .array-title{width:80px;flex-shrink:0;font-size:12px;white-space:nowrap;}
.contact-card .btn{width:auto;flex-shrink:0;white-space:nowrap;justify-content:center;padding:9px 20px;font-size:12px;}

/* "What we believe" list */
.belief-list{list-style:none;margin:0 0 56px;padding:0;border-top:1px solid var(--grey-300);}
.belief-list li{display:flex;gap:16px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--grey-300);font-size:16px;line-height:1.6;color:var(--black);}
.belief-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:9px;}
/* Founded/Offices/We invest reuses .company-meta* — see that shared rule
   further down (same component as the Flow Engineering page's stat row). */

/* Dark "How we do it" band — full-bleed (no .wrap on the outer div). */
.about-how{background:var(--near-black);color:#fff;padding:90px 0;margin:90px 0;}
.about-how-title{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,2.6vw,32px);margin:0 0 72px;}
/* Compresses the arc+columns so the dots hang inset under Europe/US
   rather than spanning the full wrap width — the title above stays at
   the normal margin. */
.about-how-inset{padding:0 12%;}
/* The arc itself sits narrower than the text columns below it, so the
   dots land inward of "Discovery"/"Access" rather than flush with
   their outer text edges — that outer-edge alignment was what made
   the curve read as flat. */
.about-arc{position:relative;height:110px;margin:0 9% 24px;}
.about-arc svg{position:absolute;inset:0;width:100%;height:100%;}
.about-arc-mid{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;background:var(--accent);}
.about-arc-dot{position:absolute;bottom:-3px;width:14px;height:14px;border-radius:50%;border:2px solid;box-sizing:border-box;}
.about-arc-dot::after{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;border:1px solid currentColor;opacity:.3;
}
.about-arc-dot--start{left:0;background:var(--accent);border-color:var(--accent);color:var(--accent);}
.about-arc-dot--end{right:0;background:#fff;border-color:#fff;color:#fff;}
.about-how-cols{display:flex;justify-content:space-between;gap:32px;}
.about-how-col{max-width:360px;}
.about-how-col--end{text-align:right;margin-left:auto;}
.about-how-loc{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px;}
.about-how-col h4{font-family:var(--font-display);font-weight:500;font-size:20px;margin:0 0 8px;}
.about-how-col p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.75);margin:0;}

/* Founder quote, closes the section */
.about-quote{
  text-align:center;max-width:640px;margin:0 auto;font-family:var(--font-display);
  font-style:italic;font-weight:400;font-size:19px;line-height:1.65;color:var(--black);
}
.about-quote cite{display:block;margin-top:22px;font-style:normal;font-size:13px;color:var(--grey-600);}

@media (max-width:900px){
  .about-how-cols{flex-direction:column;gap:40px;}
  .about-how-col--end{text-align:left;margin-left:0;}
}

/* Shared hairline-list pattern (fund/geography/portfolio stats, then the
   founder principles below) — one short label, a connecting rule, one
   description. */
.hairline-list{border-top:1px solid var(--grey-300);margin-bottom:110px;}
.hairline-list:last-child{margin-bottom:0;}
.hairline-row{
  display:flex;align-items:baseline;gap:28px;padding:30px 0;border-bottom:1px solid var(--grey-300);
}
.hl-num{font-size:13px;color:var(--grey-600);width:20px;flex-shrink:0;}
.hl-label{font-size:18px;font-weight:500;flex-shrink:0;width:230px;}
.hl-rule{flex:1;border-bottom:1px solid var(--grey-300);align-self:center;min-width:24px;}
.hl-desc{font-size:14px;color:var(--grey-600);line-height:1.65;max-width:360px;flex-shrink:0;}
.hl-tbc{font-style:italic;}

@media (max-width:900px){
  .contact-layout{grid-template-columns:minmax(0,1fr);gap:40px;}
  .hairline-row{flex-direction:column;align-items:flex-start;gap:8px;}
  .hl-rule{display:none;}
  .hl-label{width:auto;}
  .hl-desc{max-width:none;}
}

/* ---------- Portfolio ---------- */
.portfolio{background:var(--white);color:var(--black);}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:56px;}
.filter-btn{
  background:none;border:1px solid var(--grey-300);color:var(--grey-600);
  padding:10px 18px;font-size:13px;border-radius:999px;min-width:190px;text-align:center;
  cursor:pointer;transition:all .2s;font-family:var(--font-body);
}
.filter-btn:hover{border-color:var(--accent);color:var(--black);}
.filter-btn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}

/* Photo-led portfolio tiles (Sequoia-style): full-bleed grayscale photo,
   white headline + subtitle overlaid on a bottom scrim. Real tiles are
   <a> links (out to the company's own site for now); unconfirmed "In
   Stealth" slots are plain <div>s, not clickable. */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.p-tile{
  position:relative;display:block;aspect-ratio:3/4;overflow:hidden;
  border-radius:10px;background:var(--near-black);text-decoration:none;color:#fff;
  transition:box-shadow .25s ease;
}
a.p-tile:hover{box-shadow:0 16px 32px rgba(38,38,38,.28);}
.p-tile-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);transition:transform .5s ease;
}
a.p-tile:hover .p-tile-photo{transform:scale(1.05);}
.p-tile-photo--placeholder{display:flex;align-items:center;justify-content:center;}
.p-tile-photo--placeholder .p-placeholder-mark{font-family:var(--font-display);font-size:32px;font-weight:300;color:rgba(255,255,255,.25);line-height:1;}
.p-tile-scrim{
  position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(26,26,26,.92) 0%, rgba(26,26,26,.38) 48%, rgba(26,26,26,0) 70%);
}
.p-tile-content{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px;}
.p-tile-content .p-fund{display:block;font-size:12px;color:rgba(255,255,255,.65);margin-bottom:10px;}
.p-tile-content h3{font-family:var(--font-display);font-weight:500;font-size:23px;line-height:1.15;color:#fff;margin:0 0 8px;}
.p-tile-content p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.82);margin:0;}
.p-tile--placeholder .p-fund{color:rgba(255,255,255,.4);}
.p-tile[hidden]{display:none;}

@media (max-width:900px){
  .portfolio-grid{grid-template-columns:minmax(0,1fr);}
}

/* ---------- People ---------- */
.people{background:var(--white);}
.partner-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;row-gap:56px;margin:56px 0 100px;}
.partner-card{background:var(--white);}
.partner-photo{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1);margin-bottom:22px;}
.partner-photo--placeholder{
  background:var(--near-black);display:flex;align-items:center;justify-content:center;
}
.partner-photo--placeholder .p-placeholder-mark{font-family:var(--font-display);font-size:30px;font-weight:300;color:rgba(255,255,255,.3);line-height:1;}
.name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.partner-card h3{font-family:var(--font-display);font-size:19px;margin:0 0 4px;font-weight:500;}
.name-row h3,.name-row h4{margin:0;}
.partner-card .name-row{margin-bottom:4px;}
.partner-role{font-size:13px;color:var(--grey-600);margin-bottom:18px;display:block;}
.partner-bio{font-size:13.5px;line-height:1.75;color:var(--grey-600);}
.partner-bio p{margin:0 0 14px;}
.bio-toggle{
  background:none;border:0;padding:0;margin-top:6px;font-size:13px;color:var(--black);
  text-decoration:underline;cursor:pointer;font-family:var(--font-body);
}
.partner-bio .bio-more{display:none;}
.partner-bio.is-expanded .bio-more{display:block;}

.advisors-head{font-size:14px;color:var(--grey-600);margin-bottom:36px;}
.advisor-group{margin-bottom:40px;}
.advisor-group:last-child{margin-bottom:0;}
.advisor-group-head{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-600);margin:0 0 20px;font-weight:600;}
.advisor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:32px;column-gap:32px;}
.advisor-tile{display:flex;align-items:flex-start;gap:16px;}
.advisor-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;filter:grayscale(1);flex-shrink:0;}
.advisor-photo--placeholder{background:var(--near-black);display:flex;align-items:center;justify-content:center;}
.advisor-photo--placeholder .p-placeholder-mark{font-family:var(--font-display);font-size:20px;font-weight:300;color:rgba(255,255,255,.3);line-height:1;}
.advisor-text{min-width:0;}
.advisor-text .name-row{margin-bottom:5px;}
.advisor-tile h4{font-size:15px;font-weight:500;}
.advisor-tile p{font-size:13px;color:var(--grey-600);margin:0;line-height:1.55;}

@media (max-width:900px){
  .partner-grid{grid-template-columns:minmax(0,1fr);gap:48px;}
  .advisor-grid{grid-template-columns:minmax(0,1fr);}
}

/* ---------- Insight carousel (Thinking) ----------
   Plain horizontally-scrollable row of anchor links — clicking one is a
   normal same-page navigation (scroll-behavior:smooth handles the scroll),
   no carousel JS needed. main.js adds .is-active to whichever card's
   target section is currently in view, mirroring the nav's active-section
   indicator. */
.insight-carousel{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x proximity;margin-top:40px;padding-bottom:10px;}
.insight-card{
  flex:0 0 270px;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  scroll-snap-align:start;border-bottom:2px solid transparent;padding-bottom:16px;transition:border-color .2s;
}
.insight-card:hover,.insight-card.is-active{border-bottom-color:var(--accent);}
.insight-media{
  aspect-ratio:4/3;background:var(--near-black);display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;border-radius:4px;
}
.insight-media-mark{font-family:var(--font-display);font-size:30px;font-weight:300;color:rgba(255,255,255,.3);line-height:1;}
.insight-card h3{font-family:var(--font-display);font-size:17px;font-weight:500;margin:0 0 8px;line-height:1.35;color:var(--black);}
.insight-card p{font-size:13.5px;line-height:1.6;color:var(--grey-600);margin:0 0 12px;}
.insight-byline{font-size:12px;color:var(--grey-600);font-weight:500;}
@media (max-width:760px){
  .insight-card{flex:0 0 220px;}
}

/* Floating "see all articles" link — hidden while the carousel itself is
   in view, shown once you've scrolled into a single article and the
   carousel has scrolled out of sight (see the IntersectionObserver in
   main.js). */
.insight-jump{
  position:fixed;right:32px;bottom:32px;z-index:50;
  background:var(--near-black);color:#fff;font-size:13px;font-weight:500;
  padding:13px 22px;border-radius:999px;text-decoration:none;
  box-shadow:0 10px 24px rgba(38,38,38,.28);
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease;
}
.insight-jump.is-visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.insight-jump:hover{background:var(--accent);}
@media (max-width:640px){
  .insight-jump{right:20px;bottom:20px;padding:11px 18px;font-size:12.5px;}
}

/* ---------- Company landing page ----------
   Photo + headline in the left third, copy in the right two-thirds,
   inside the standard .wrap so the photo lines up with the site's usual
   margin instead of bleeding to the browser edge. */
.company-split-section{padding:calc(var(--nav-h) + 40px) 0 64px;}
.company-split{display:grid;grid-template-columns:1fr 2fr;gap:56px;min-height:calc(100vh - var(--nav-h) - 104px);}
.company-photo-col{display:flex;flex-direction:column;}
.company-photo-wrap{position:relative;flex:1;overflow:hidden;border-radius:10px;}
.company-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);}
.company-scrim{
  position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(26,26,26,.92) 0%, rgba(26,26,26,.55) 22%, rgba(26,26,26,.05) 42%, rgba(26,26,26,.05) 65%, rgba(26,26,26,.6) 100%);
}
.company-photo-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:32px;color:#fff;}
.company-back{border-color:rgba(255,255,255,.45);color:#fff;align-self:flex-start;padding:10px 20px;font-size:13px;}
.company-back:hover{border-color:#fff;background:rgba(255,255,255,.1);}
.company-headline h1{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,2.4vw,38px);line-height:1.1;color:#fff;margin:0;}

/* Contact strip under the photo: website pill + circular social icons. */
.company-social{display:flex;align-items:center;gap:12px;padding-top:20px;}
.company-url{padding:10px 20px;font-size:13px;}
.company-icon{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--grey-300);color:var(--black);
  transition:border-color .2s,color .2s;
}
.company-icon:hover{border-color:var(--accent);color:var(--accent);}
.company-icon svg{width:16px;height:16px;}
.company-icon--sm{width:24px;height:24px;}
.company-icon--sm svg{width:11px;height:11px;}
.company-url--sm{padding:4px 12px;font-size:11px;}

.company-copy-col{display:flex;flex-direction:column;gap:56px;}
.company-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;}
/* Company landing pages only (not the About section's 3-item Founded/
   Offices/We-invest row, which keeps the space-between layout above) — a
   fixed 2-column grid instead of flex-wrap, so Fund/Invested/Founder/
   Co-investors always line up the same way regardless of how much text
   is in each cell (flex-wrap was reflowing 3-per-row vs 2-per-row
   depending on content length, which looked inconsistent page to page). */
.company-meta.company-meta--grid{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:32px;}
.company-meta-item{display:flex;flex-direction:column;gap:6px;}
.company-meta-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--black);}
.company-meta-value{font-size:14px;font-weight:500;color:var(--black);}
/* Same body-copy size as the Thinking page's essays (.essay p) — not
   stretched to fill the column, so whitespace opens up naturally below
   instead of the text being spread thin to reach the bottom. */
.company-body{display:flex;flex-direction:column;gap:32px;}
.company-mission{font-size:16px;line-height:1.85;color:var(--black);margin:0;max-width:620px;}
.company-quote{
  font-family:var(--font-display);font-weight:400;font-style:italic;font-size:18px;line-height:1.6;
  border-left:2px solid var(--accent);padding-left:22px;margin:0;color:var(--black);max-width:620px;
}
.company-quote cite{display:block;margin-top:12px;font-style:normal;font-size:13px;color:var(--grey-600);}
.company-fact{font-size:16px;line-height:1.85;color:var(--black);margin:0;max-width:620px;}
@media (max-width:900px){
  .company-split{grid-template-columns:1fr;gap:36px;min-height:0;}
  .company-photo-wrap{height:380px;}
}

.essay{max-width:760px;}
.essay p{font-size:16px;line-height:1.85;color:var(--grey-800);margin:0 0 24px;}
.essay blockquote{
  font-family:var(--font-display);font-weight:500;font-size:22px;line-height:1.45;
  border-left:2px solid var(--black);padding-left:26px;margin:44px 0;color:var(--black);
}
.essay h3{font-family:var(--font-display);font-weight:500;font-size:21px;margin:52px 0 18px;}
.essay .byline{font-size:13px;color:var(--grey-600);margin-bottom:48px;}
.essay ul{margin:0 0 24px;padding-left:22px;}
.essay li{font-size:16px;line-height:1.85;color:var(--grey-800);margin:0 0 6px;}
.essay .legal-note{font-size:13px;color:var(--grey-600);margin-bottom:48px;}
.essay-profile{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 24px;}
.essay-tags{font-size:12px;color:var(--grey-600);margin-top:56px;}

/* ---------- News table ---------- */
.news-table{width:100%;border-collapse:collapse;}
.news-table thead th{text-align:left;font-size:12px;font-weight:400;color:var(--grey-600);padding:0 20px 16px 0;border-bottom:1px solid var(--grey-300);}
.news-table tbody tr{border-bottom:1px solid var(--grey-300);}
.news-table tbody td{padding:28px 20px 28px 0;vertical-align:top;}
.nt-date{width:110px;font-size:13px;color:var(--grey-600);white-space:nowrap;}
.nt-title{display:block;font-size:17px;font-weight:500;margin-bottom:6px;font-family:var(--font-display);}
.nt-excerpt{display:block;font-size:13.5px;line-height:1.6;color:var(--grey-600);max-width:520px;}
.nt-headline .company-url{margin-top:14px;}
.nt-source{width:150px;font-size:13px;color:var(--grey-600);}
.nt-link{width:32px;text-align:right;padding-right:0;}
.nt-link a{display:inline-flex;color:var(--grey-600);transition:color .2s;}
.nt-link a:hover{color:var(--black);}

@media (max-width:760px){
  .news-table thead{display:none;}
  .news-table, .news-table tbody, .news-table tbody tr, .news-table tbody td{display:block;width:auto;}
  .news-table tbody tr{padding:22px 0;border-bottom:1px solid var(--grey-300);}
  .news-table tbody td{padding:3px 0 !important;}
  .nt-link{text-align:left;margin-top:2px;}
  .nt-source{margin-top:2px;}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--near-black);color:#C1C1C1;padding:64px 0 40px;}
.footer-top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;}
.footer-brand{display:flex;flex-direction:column;gap:12px;}
.footer-word-row{display:flex;align-items:center;gap:10px;}
.footer-word{font-family:var(--font-display);font-weight:500;font-size:20px;color:#fff;}
.footer-social{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.35);color:#fff;
  transition:border-color .2s,color .2s;
}
.footer-social:hover{border-color:var(--accent);color:var(--accent);}
.footer-social svg{width:11px;height:11px;}
.footer-copy{font-size:12.5px;color:#fff;}
.footer-link{color:#C1C1C1;text-decoration:underline;text-underline-offset:2px;margin-left:4px;}
.footer-link:hover{color:#fff;}
.footer-legal{font-size:12.5px;color:#C1C1C1;text-decoration:underline;text-underline-offset:2px;}
.footer-legal:hover{color:#fff;}

/* ---------- Utility ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .hero-scene{animation:none;opacity:1;}
  .hero-scene--2{display:none;}
  .hero-video.is-ready{transition:none;opacity:1;}
}