/* ==========================================================================
   index.html (v3) — overrides on top of styles.css (body.v3).
   Sections flow and reveal once on entering the viewport (v3.js); the only
   pin is Philosophy on desktop, first pass only. The nodes web is a sticky
   backdrop behind Portfolio / Co-Investors (desktop).
   ========================================================================== */

/* Section eyebrows are h2s (document outline); they keep the eyebrow look. */
.v3 h2.eyebrow{font-weight:400}
/* Section eyebrows: "01." … numbering, underline drawn with the scroll
   (v3.js sets --u 0..1). Desktop and mobile. */
.v3 .eyebrow-n{margin-right:.6em}
.v3 .eyebrow-u{padding-bottom:6px;
  background:linear-gradient(currentColor,currentColor) left bottom / calc(var(--u, 0) * 100%) 1px no-repeat}

/* Keyboard focus (mouse clicks don't show it): the ring takes the element's own
   text colour, so it is white on the dark page and dark on the light footer
   bar, always contrasting with what is behind it. */
.v3 :focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* ---------- Hero: bigger node graphic ---------- */
.v3 .hero-nodes{max-width:92vw;max-height:100vh}
.v3 .br-mobile{display:none} /* line breaks used only on mobile (shown in the mobile block) */
@media (min-width:1920px){
  .v3 .hero-nodes{max-width:96vw}
}

/* ---------- Philosophy: short pin (one screen of runway, base sticky
   .about-pin); the 3 steps blur in with the scroll, as in v2 (v3.js) ---------- */
.v3 .about{height:200vh;height:200svh}
@media (prefers-reduced-motion: reduce){
  body.v3:not(.motion-on) .about{height:auto}
  body.v3:not(.motion-on) .about-pin{position:relative}
}
.v3 .about-copy .about-eyebrow{color:#fff;margin:0 0 30px}
.v3 .about-step{opacity:0;filter:blur(14px);transform:translateY(18px);
  transition:opacity .7s var(--ease),filter .7s var(--ease),transform .7s var(--ease)}
.v3 .about-step.is-on{opacity:1;filter:blur(0);transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  body.v3:not(.motion-on) .about-step{opacity:1;filter:none;transform:none;transition:none}
}
.v3 .about-line{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.v3 .about-line > *{display:block;opacity:0;transform:translateY(110%);
  transition:transform 1.1s var(--ease),opacity .7s var(--ease)}
.v3 .about-line.is-on > *{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  body.v3:not(.motion-on) .about-line > *{opacity:1;transform:none;transition:none}
}

/* ---------- Hero copy: masked lines (.about-line) instead of the base blur ---------- */
.v3 .hero .eyebrow,.v3 .hero .h1-bold,.v3 .hero .h1-light,.v3 .hero .hero-sub{
  opacity:1;filter:none;transform:none;transition:none}

/* ---------- Team: "The Team" + two framed faces sliding in from opposite
   sides (v2's entrance, without the rings / statements) ---------- */
.v3 .mid-lead{height:auto;margin-top:0}

/* One screen: title and both cards share the frame. */
.v3 .mid-lead-pin{position:relative;height:auto;overflow:visible;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(80px, 20px + 4.7vw, 110px) 0}
.v3 .mid-lead-title{position:static;margin:0;font-weight:400; /* h2 default is bold */
  pointer-events:none}
.v3 .mid-lead-cards{position:static;transform:none;width:auto;height:auto;pointer-events:auto;
  display:flex;justify-content:center;align-items:flex-start;gap:clamp(96px, 30px + 6vw, 200px);
  margin-top:clamp(40px, 10px + 2.3vw, 56px)}
.v3 .mid-lead-card-slot{position:relative;top:auto;left:auto;transform:none;pointer-events:auto}
/* Entrance: v3.js scrubs opacity / blur / translate with the scroll (v2's slide-in). */
body.v3.motion-on .mid-lead-card-slot{opacity:0;will-change:opacity,filter,transform}
.v3 .team-bio{display:none}
/* Corner brackets around the photo (the base .team-card frame, no fill). */
.v3 .team-card{display:block;padding:clamp(14px, 4px + 0.78vw, 20px);margin-bottom:0;background:none}
.v3 .team-card::before{display:none}
.v3 .team-photo{display:block;margin-inline:auto;object-fit:contain;object-position:center bottom}
.v3 .team-photo[src*="team-nick"]{filter:grayscale(1) brightness(1.2) contrast(1.05)} /* match Ryan's exposure */
/* Name under the frame. Size = the site's bold lead scale ("These are not
   logos."): base, retina band, 48px from 1920.
   .team-info is static so the link's hit area (::after) spans the whole
   slot, photo included — hovering anywhere plays "View Profile". */
.v3 .team-info{position:static;align-items:center;text-align:center;pointer-events:auto;
  --tn:clamp(38px, 2px + 2.81vw, 56px);margin-top:clamp(18px, 6px + 0.94vw, 24px)}
.v3 .team-name{position:relative;z-index:2;font-family:var(--sans);font-weight:800;
  font-size:var(--tn);line-height:.95;letter-spacing:-.02em;white-space:nowrap}
.v3 .team-role{position:relative;z-index:2;margin-top:12px}
.v3 .team-profile-link{position:static;margin-top:clamp(14px, 6px + 0.63vw, 18px)}
.v3 .team-profile-link::after{content:'';position:absolute;inset:0;z-index:2}
@media (min-width:901px) and (max-width:1919.98px){
  .v3 .team-info{--tn:clamp(32px, -16px + 3.75vw, 56px)}
}
@media (min-width:1920px){
  .v3 .team-info{--tn:48px}
}
@media (max-width:600px){
  .v3 .mid-lead-cards{flex-direction:column;align-items:center}
}

/* ---------- Our Network: no pin (the curtain opens on a timer) ---------- */
.v3 .network{height:auto}
.v3 .network-pin{position:relative;height:auto;overflow:visible;padding:clamp(120px, 20px + 7.8vw, 170px) 0}
@media (max-width:900px){
  .v3 .network-pin{overflow-x:hidden} /* the marquee is wider than the screen */
}

/* ---------- Nodes web (wraps Portfolio + Co-Investors): backdrop, no pin ---------- */
/* The canvas sticks behind both sections; its negative margin takes it out
   of the flow, so Portfolio starts right away and scrolls over it. */
.v3 .v2-weave{position:relative}
.v3 .v2-weave-pin{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);margin-bottom:-100vh;margin-bottom:-100dvh}
.v3 .v2-weave-canvas{display:block;width:100%;height:100%}
.v3 .v2-weave > section{position:relative;z-index:1}

/* ---------- Portfolio: 4 x 3, all 12 in one viewport (desktop) ---------- */
.v3 .grid .card{transition:opacity .7s var(--ease),filter .7s var(--ease),transform .5s var(--ease)}
.v3 .portfolio{height:auto}
.v3 .portfolio-pin{position:relative;height:auto}
@media (min-width:901px){
  .v3 .grid-track{grid-template-columns:repeat(4,1fr)}
  .v3 .grid .card{width:auto;flex:none;aspect-ratio:auto;
    height:clamp(150px, calc((100vh - 380px) / 3), 300px)}
}
/* Logos are pre-framed (images/portfolio-v2/, same canvas, mark already at
   its optical size): each is as tall as the card's content box. */
.v3 .grid .card .card-logo{height:67.5%;width:auto;max-width:none;max-height:none;
  transform:none;scale:none}
@media (min-width:1920px){
  .v3 .portfolio{margin-top:80px}
}
@media (min-width:2560px){
  .v3 .grid .card .card-logo{height:40.5%} /* UW: 40% smaller */
}

/* ---------- Co-Investors: 8 firms, 4 x 2 ---------- */
.v3 .co-investors{padding-bottom:clamp(96px, -32px + 10vw, 160px)}
@media (min-width:901px){
  .v3 .co-investors-grid{grid-template-columns:repeat(4,1fr)}
}
.v3 .co-investor-card .card-logo{scale:1.1}
.v3 .card-logo[src*="logo-goldcrest"]{scale:.72}
.v3 .card-logo[src*="logo-lux"]{scale:.7}
.v3 .card-logo[src*="logo-a16z"]{scale:.46}

/* Co-Investors cards reveal one by one (v3.js adds .is-in). */
@media (min-width:901px){
  body.v3.motion-on .co-investors-grid{opacity:1;filter:none;transform:none}
  body.v3.motion-on .co-investor-card{opacity:0;filter:blur(10px);translate:0 28px;
    transition:opacity 1.2s var(--ease),filter 1.2s var(--ease),translate 1.3s var(--ease),transform .4s var(--ease)}
  /* Portfolio cards: slower reveal than the base (hover keeps its pace). */
  body.v3.motion-on .portfolio .card{transition:opacity 1.4s var(--ease),filter 1.4s var(--ease),transform 1.1s var(--ease)}
  body.v3.motion-on .portfolio .card.is-visible:hover,
  body.v3.motion-on .portfolio .grid:has(.card:hover) .card.is-visible{transition:opacity 1.4s var(--ease),filter 1.4s var(--ease),transform .7s var(--ease)}
  body.v3.motion-on .co-investor-card.is-in{opacity:1;filter:blur(0);translate:0 0}
  /* Corner brackets: the base draws them off the grid's .is-visible, which
     this desktop reveal never sets — draw them as each card comes in. */
  body.v3.motion-on .co-investor-card.is-in::after{background-size:10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px}
}

/* ---------- Footer: contact block (the Contact menu link lands here) ---------- */
.v3 .footer-contact{background:var(--bg);text-align:center;
  padding:clamp(220px, -4px + 17.5vw, 336px) 24px clamp(24px, 8px + 1.25vw, 32px)}
.v3 .footer-contact .eyebrow{margin:0 0 clamp(20px, 4px + 1.25vw, 28px)}
/* The mail reuses the "View Profile" link (type, roll-up hover, arrow). */
.v3 .footer-contact .footer-contact-mail{margin-top:0;font-size:clamp(14px, 6px + 0.63vw, 16px)}

/* Body copy: the hard line breaks are set for wide screens; below 1280px
   they left orphaned fragments ("distribution," alone), so the text flows. */
@media (max-width:1279.98px){
  .v3 .network-subcopy br,.v3 .network-subcopy-inline br,.v3 .co-investors-intro-copy br{display:none}
}

/* ==========================================================================
   Mobile (≤900px) — nothing here reaches retina / Normal / UW.
   ========================================================================== */
@media (max-width:900px){
  /* Header: transparent bar over scrolling content made the logo/menu
     collide with headings. A soft fade from the page colour sits behind it. */
  .v3 .header::before{content:'';position:absolute;inset:0 0 -28px;z-index:-1;pointer-events:none;
    background:linear-gradient(to bottom,var(--bg) 40%,rgba(5,5,5,0))}

  /* Our Network: 3 tiles that fit the screen (was 4 x 135px, cut off on
     the right); script-v3.js sizes the reveal to 4 rows of these. */
  .v3 .network-pin{padding:88px 0 12px}
  .v3 .network-marquee .marquee-col:nth-of-type(n+4){visibility:hidden} /* the 4th track sits off screen and peeked in when it breathes */
  .v3 .network-copy{width:100%;align-items:center;text-align:center}
  .v3 .network-row{row-gap:20px} /* eyebrow closer to the logos (was 60px) */
  .v3 .network-after{padding-top:0;margin-top:-12px} /* lead + copy 20px up, closer to the logos */
  .v3 .network-logo,.v3 .marquee-col{width:calc((100vw - 48px - 24px) / 3)}
  .v3 .network-logo{height:calc((100vw - 48px - 24px) / 3);padding:12px}

  /* "View All" moved into the middle of the logos (v3.js): see-through dark
     glass (65% + 8px blur) so it reads over them, above the marquee's
     top/bottom blur fades. */
  .v3 .network-view-all{position:absolute;top:0;bottom:0;z-index:3;margin:auto 0;
    left:calc(50vw - 24px);translate:-50% 0; /* screen center: the marquee runs past the right edge */
    width:200px;padding:0 22px;transform:none;
    background:rgba(5,5,5,.65);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-color:rgba(255,255,255,.7)}
  .v3 .network-view-all .line{transition:width .8s var(--ease)}
  .v3 .network-view-all .head{margin-left:-7px} /* the line runs into the tip (-4px left a hairline gap) */
  /* Every 5s (v3.js, .is-pushed on the marquee): the button widens from the
     center, text left / arrow right, and the whole logo block (frames
     included) inflates from its center with it. */
  .v3 .is-pushed > .network-view-all{width:240px;gap:22px}
  .v3 .is-pushed > .network-view-all .line{width:30px}
  /* The block "inflates" by scaling each logo column around the screen
     center (origin set per column in v3.js), not the marquee itself: the
     button lives inside the marquee and must not be scaled with it. */
  .v3 .network-marquee .marquee-col{transition:scale .8s var(--ease)}
  .v3 .network-marquee.is-pushed .marquee-col{scale:1.03} /* small enough that the side cut barely shows */
  .v3 .network-view-all{transition:width .8s var(--ease),gap .8s var(--ease)}

  /* Portfolio: all 12 in a static 2-column grid (was a one-card carousel). */
  .v3 .carousel{--gw:100%}
  .v3 .carousel::before,.v3 .carousel::after,.v3 .carousel-ind{display:none}
  .v3 .grid{overflow:visible}
  .v3 .grid-track{display:grid;grid-template-columns:1fr;gap:32px;width:100%;padding:0;transform:none}
  .v3 .grid .card{aspect-ratio:2/1} /* one per row, full width */
  .v3 .grid .card .card-logo{height:47.25%} /* 30% smaller than the shared 67.5% */
  .v3 .grid .card{flex:none;width:auto}
  .v3 .card .num{top:12px;left:14px;font-size:12px}
  .v3 .card .cat{bottom:12px;right:14px;font-size:12px}

  /* Co-Investors: one per row, full width, 12px gutters. Logos drop the
     base fluid scale-up (1.9x at phone widths, which pushed wide wordmarks
     to the card edges) and size from the frame; per-logo tweaks above stay. */
  .v3 .co-investors-grid{grid-template-columns:1fr;gap:32px}
  .v3 .co-investor-card{aspect-ratio:2/1} /* same frame as Portfolio */
  .v3 .co-investor-card .card-logo{transform:scale(.945)} /* desktop's sizing (so the per-logo tweaks stay balanced), at a fixed scale */
  .v3 .co-investor-card .card-logo[src*="logo-lux"]{scale:.49}       /* 30% under its desktop .7 */
  .v3 .co-investor-card .card-logo[src*="logo-founders"]{scale:1.32} /* 20% over the shared 1.1 */
  .v3 .co-investor-card .card-logo[src*="logo-kholsa"]{scale:1.32}
  .v3 .co-investor-card .card-logo[src*="logo-friends"]{scale:1.21}  /* +10% */
  .v3 .co-investor-card .card-logo[src*="logo-fifh"]{scale:1.265}    /* +15% */

  /* No hover on touch: a tap left cards scaled / dimmed / glowing. */
  .v3 .card.is-visible:hover,
  .v3 .grid:has(.card:hover) .card.is-visible:not(:hover),
  .v3 .co-investor-card:hover,
  .v3 .co-investors-grid:has(.co-investor-card:hover) .co-investor-card:not(:hover){transform:none}
  .v3 .card::before,.v3 .co-investor-card::before{display:none}


  /* Contact: the desktop lead-in gap (220px+) was a dead screen on a phone. */
  .v3 .footer-contact{padding-top:96px}

  /* Hero title: "Relationships" is the longest word (~5.7em wide); scale the
     title down on narrow phones so it never runs past the right edge. */
  .v3 .hero .h1-bold,.v3 .hero .h1-light{font-size:min(54px, calc((100vw - 48px) / 5.7))} /* 54 (was 60) */
  .v3 .br-mobile{display:inline} /* "Capital is commoditized. / Distribution isn't." */
  /* Hero: the eyebrow reads as a small grey label on one line, led by a
     dash; the subline is a supporting line in the title's sans, light grey,
     so neither competes with "Driving Growth" or with each other. */
  .v3 .hero .eyebrow{font-size:12px;letter-spacing:.12em;color:#8a8a8a;white-space:nowrap}
  .v3 .hero .eyebrow .br-mobile{display:none}
  .v3 .hero .eyebrow .about-line > span::before{content:"\2014\00a0"}
  .v3 .hero-sub{font-family:var(--sans);font-size:18px;font-weight:300;line-height:1.75;letter-spacing:-.01em;color:#bdbdbd} /* two lines, airy */
  .v3 .hero-sub strong{font-weight:300}

  /* Bold leads and team names: 28px (was the 38px floor of their clamp). */
  .v3 .network-lead-after,.v3 .co-investors-intro-lead{font-size:28px}
  .v3 .network-subcopy,.v3 .co-investors-intro-copy{font-size:13px;color:#a6a6a6} /* body copy under them (was 12px, #cfcfcf); ~8:1 on the black */
  .v3 .about-copy{font-size:13px} /* Philosophy text (was the 15px clamp floor); its eyebrow keeps 15px */
  /* Philosophy: no pin on mobile (steps play on a timer, v3.js). */
  .v3 .about{height:auto}
  .v3 .about-pin{position:relative;height:auto;padding:96px 0}

  /* No nodes web behind Portfolio / Co-Investors on mobile. */
  .v3 .v2-weave-pin{display:none}
  .v3 .team-info{--tn:28px}

  /* Hero nodes: the field starts at the left edge and runs ~30vw past the
     right one (clipped by the hero; no side fade; fewer nodes, no hover:
     script-v3.js). Fades only top and bottom. */
  .v3 .hero{overflow-x:clip; /* full-bleed box, so the clip is the screen edge, not the gutter */
    margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%)}
  .v3 .hero-nodes{width:130vw;max-width:none;right:calc(50% - 80vw);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 90%,transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 90%,transparent 100%)}

  /* Team: the faces slide in from 320px out to the sides (v3.js); keep that
     inside the section so the page never gets wider than the screen. */
  .v3 .mid-lead{overflow-x:clip}
  .v3 .team-photo{width:228px;height:228px} /* was the 176px floor of the desktop clamp */

  /* Header: logo 10% bigger (23 -> 25px), "+ MENU" 15px. */
  .v3 .logo-img{height:25px}
  .v3 .burger{font-size:15px}

  /* Footer wordmark: a banner 3x the screen wide, scrolling right to left
     on a loop (v3.js puts it and a copy in .footer-track; -50% = one copy +
     its gap, so the loop is seamless). Blur reveal kept, with a smaller
     start offset that fits inside .footer-mark. */
  .v3 .footer-track{display:flex;width:max-content;animation:v3-footer-banner 22s linear infinite}
  /* Bottom bar: taller, Terms of Use out, copyright centered at 12px. */
  .v3 .footer-bottom{position:relative;z-index:1;justify-content:center;padding:14px 24px;font-size:12px;background:var(--paper)}
  .v3 .footer-mark{margin-bottom:-10px} /* letters tuck behind the bar: no dark seam above it */
  .v3 .footer-bottom a{display:none}
  /* Capped: 3x the screen width was huge on tablets. */
  .v3 .footer-track .footer-logo{flex:none;width:min(300vw, 1500px);margin-right:min(30vw, 150px);aspect-ratio:1967/408;transform:translateY(16px)}
  .v3 .footer-track .footer-logo.is-revealed{transform:translateY(0)}
  @keyframes v3-footer-banner{to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion: reduce){
    body.v3:not(.motion-on) .footer-track{animation:none}
  }

  /* Section eyebrows (Philosophy, The Team, Our Network, Portfolio,
     Co-Investors, General Inquiries): 15px. The hero's has its own rule. */
  .v3 .eyebrow,.v3 .portfolio .section-title h2,.v3 .co-investors-intro-eyebrow{font-size:15px}
}