/* ============================================================
   OAKSMITH — dark design system (eclipse-inspired)
   Near-black monochrome · oversized tight grotesque · whisper gold
   · motion as luxury. Deliberately unlike Outridge.
   ============================================================ */

:root{
  --ink:#0F1114; --surface:#14171D; --hair:rgba(243,242,237,.10); --hair-strong:rgba(243,242,237,.20);
  --text:#F3F2ED; --muted:#8C8F98; --accent:#C6A15B;
  --disp:"Space Grotesk","Inter",system-ui,sans-serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(22px,5.5vw,96px); --maxw:1360px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--ink); color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body.has-cursor{ cursor:none; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }

/* type helpers */
.display{ font-family:var(--disp); font-weight:500; letter-spacing:-.035em; line-height:.98; }
.eyebrow{ font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.eyebrow .dot{ color:var(--accent); }
.lead{ font-family:var(--disp); font-weight:400; font-size:clamp(19px,1.8vw,26px); line-height:1.4; letter-spacing:-.01em; color:var(--text); }

/* custom cursor */
.cursor{ position:fixed; top:0; left:0; width:30px; height:30px; margin:-15px 0 0 -15px; border:1px solid rgba(243,242,237,.5);
  border-radius:50%; pointer-events:none; z-index:200; opacity:0; transition:opacity .3s, width .25s, height .25s, margin .25s; mix-blend-mode:difference; }
.cursor i{ position:absolute; inset:0; margin:auto; width:4px; height:4px; background:var(--text); border-radius:50%; }
body.has-cursor .cursor.on{ opacity:1; }
.cursor.hover{ width:52px; height:52px; margin:-26px 0 0 -26px; }

/* anchor offset for fixed header */
section[id]{ scroll-margin-top:96px; }
@media(max-width:720px){ section[id]{ scroll-margin-top:112px; } }

/* nav */
header.nav{ position:fixed; inset:0 0 auto 0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--pad); background:linear-gradient(var(--ink),rgba(15,17,20,0)); }
.brand{ display:flex; align-items:center; gap:14px; font-family:var(--disp); font-weight:600; letter-spacing:.26em; font-size:19px; }
.brand .ring{ width:21px; height:21px; border:1.5px solid var(--text); border-top-color:transparent; border-radius:50%; animation:spin 7s linear infinite; }
.nav-links{ display:flex; gap:30px; font-size:13.5px; color:var(--muted); }
.nav-links a{ position:relative; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px; background:var(--text); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-links a.active{ color:var(--text); }
.nav-cta{ font-size:13.5px; }

/* page hero (team) */
.page-hero{ position:relative; padding:clamp(150px,24vh,260px) 0 clamp(40px,7vh,90px); overflow:hidden; }
.page-hero .eyebrow{ margin-bottom:30px; }
.page-hero h1{ font-size:clamp(34px,5.0vw,66px); max-width:16ch; }
.page-hero .lead{ margin-top:34px; max-width:52ch; color:var(--muted); }
.meridian{ position:absolute; right:calc(var(--pad) - 10px); top:34%; width:min(38%,460px); opacity:.85; pointer-events:none; }
.meridian .arc{ fill:none; stroke:var(--accent); stroke-width:1.1; stroke-dasharray:640; stroke-dashoffset:640; }
.meridian.in .arc{ animation:draw 2.6s ease forwards .3s; }
.meridian .node{ fill:var(--accent); } .meridian .trav{ fill:var(--text); }

/* word reveal */
.mask{ overflow:hidden; display:inline-block; vertical-align:bottom; padding-bottom:.2em; margin-bottom:-.2em; }
.mask .word{ display:inline-block; transform:translateY(115%); }
.reveal-words .word{ animation:rise .95s cubic-bezier(.16,.84,.28,1) forwards; }

/* profiles — name-led dossier */
.profiles{ padding-bottom:clamp(30px,6vh,70px); }
.profile{ padding:clamp(74px,13vh,160px) 0; border-top:1px solid var(--hair); }
.p-head{ display:grid; grid-template-columns:1fr minmax(300px,380px); gap:clamp(28px,5vw,72px); align-items:start; }
.p-index{ font-family:var(--mono); font-size:12px; letter-spacing:.22em; color:var(--accent); margin-bottom:24px; }
.pname{ font-family:var(--disp); font-weight:500; font-size:clamp(30px,3.4vw,46px); letter-spacing:-.038em; line-height:.94; }
.prole{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:22px; }
.summary{ margin-top:26px; max-width:38ch; }
.portrait figure{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--surface); border:1px solid var(--hair); }
.portrait img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.02) brightness(.96); transition:filter .6s ease, transform .9s ease; }
.portrait:hover img{ filter:grayscale(1) contrast(1.05) brightness(1.02); transform:scale(1.02); }
.portrait figcaption{ margin-top:12px; display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.bio{ margin-top:clamp(44px,5vw,68px); max-width:60ch; color:var(--muted); font-size:16.5px; line-height:1.78; }
.bio p + p{ margin-top:20px; }
.bio a{ color:var(--text); border-bottom:1px solid var(--accent); }
.ledger{ margin-top:clamp(46px,5vw,66px); border-top:1px solid var(--hair); padding-top:36px; display:grid; grid-template-columns:repeat(4,1fr); gap:36px 40px; }
@media(max-width:860px){ .ledger{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .ledger{ grid-template-columns:1fr; } }
.ledger h4{ font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.ledger ul{ list-style:none; }
.ledger li{ color:var(--text); font-size:14px; line-height:1.5; margin-bottom:12px; }
.ledger .tags{ display:flex; flex-wrap:wrap; gap:8px; }
.ledger .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted); border:1px solid var(--hair-strong); border-radius:2px; padding:6px 10px; }
.also{ margin-top:40px; display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--hair-strong); padding-bottom:6px; transition:color .3s; }
.also:hover{ color:var(--text); }

/* contact */
.contact{ border-top:1px solid var(--hair); padding:clamp(80px,14vh,160px) 0 40px; }
.contact h2{ font-family:var(--disp); font-weight:500; font-size:clamp(30px,3.7vw,54px); letter-spacing:-.035em; line-height:1; max-width:14ch; }
.contact .email{ display:inline-flex; align-items:center; gap:12px; margin-top:44px; font-size:clamp(15px,1.5vw,19px); border-bottom:1px solid var(--hair-strong); padding-bottom:10px; transition:border-color .3s; }
.contact .email:hover{ border-color:var(--accent); }
.foot{ margin-top:clamp(70px,12vh,150px); padding-top:26px; border-top:1px solid var(--hair); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:12.5px; color:var(--muted); }
.foot .fbrand{ font-family:var(--disp); font-weight:600; letter-spacing:.24em; color:var(--text); }

/* scroll reveal */
.reveal{ opacity:1; transform:none; }
body.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s ease, transform 1s ease; }
body.js .reveal.in{ opacity:1; transform:none; }

@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes rise{ to{ transform:translateY(0); } }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes travel{ to{ offset-distance:100%; } }

@media(max-width:720px){ .p-head{ grid-template-columns:1fr; } .portrait{ max-width:300px; } }

/* ============================================================ HOME ============================================================ */
.home-hero{ position:relative; min-height:100vh; display:flex; align-items:center; padding:120px 0 90px; overflow:hidden; }
.hero-fx{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.hero-fade{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, var(--ink) 6%, rgba(15,17,20,.55) 40%, rgba(15,17,20,0) 74%); }
.home-hero .wrap{ width:100%; position:relative; z-index:2; }
.home-hero .eyebrow{ margin-bottom:30px; }
.home-hero h1{ font-family:var(--disp); font-weight:500; font-size:clamp(38px,6.0vw,80px); letter-spacing:-.045em; line-height:.98; }
.home-hero h1 .accent{ color:var(--accent); }
.home-hero .sub{ margin-top:36px; max-width:46ch; color:var(--muted); font-size:clamp(16px,1.4vw,20px); }
.home-scroll{ position:absolute; left:var(--pad); bottom:32px; z-index:2; font-family:var(--mono); font-size:11px; letter-spacing:.28em; color:var(--muted); }
.home-scroll span{ display:inline-block; animation:bob 1.9s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
.home-hero .meridian{ position:absolute; right:calc(var(--pad) - 6px); top:24%; width:min(40%,480px); z-index:1; }

.section{ padding-block:clamp(80px,13vh,170px); border-top:1px solid var(--hair); }
.section > .eyebrow{ margin-bottom:44px; }
.statement{ font-family:var(--disp); font-weight:400; font-size:clamp(26px,3.3vw,48px); letter-spacing:-.02em; line-height:1.16; max-width:26ch; }
.statement em{ color:var(--muted); font-style:normal; }
.strat{ display:grid; grid-template-columns:64px 1fr; gap:0 30px; border-top:1px solid var(--hair); padding:clamp(30px,4.5vw,54px) 0; }
.strat:last-child{ border-bottom:1px solid var(--hair); }
.strat .n{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--accent); padding-top:14px; }
.strat h3{ font-family:var(--disp); font-weight:500; font-size:clamp(23px,2.6vw,34px); letter-spacing:-.03em; line-height:1.02; }
.strat .dt{ margin-top:18px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); line-height:1.8; }
.strat .dt .sep{ color:var(--accent); margin:0 6px; }
.strat .hl{ margin-top:26px; font-family:var(--disp); font-weight:400; font-size:clamp(18px,1.7vw,24px); line-height:1.4; letter-spacing:-.01em; color:var(--text); max-width:none; }
.strat .hl::before{ content:""; display:block; width:28px; height:1px; background:var(--accent); margin-bottom:16px; }
.home-team{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px; margin-top:56px; max-width:920px; }
@media(max-width:600px){ .home-team{ grid-template-columns:1fr 1fr; } }
.ht-card figure{ aspect-ratio:1/1; overflow:hidden; background:var(--surface); border:1px solid var(--hair); }
.ht-card img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.02) brightness(.96); transition:transform .8s ease; }
.ht-card:hover img{ transform:scale(1.03); }
.ht-name{ font-family:var(--disp); font-weight:500; font-size:clamp(20px,2.2vw,26px); margin-top:18px; letter-spacing:-.02em; }
.ht-role{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
.home-team-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.home-team-head h2{ font-family:var(--disp); font-weight:500; font-size:clamp(26px,3.2vw,46px); letter-spacing:-.035em; line-height:1; }

/* selected investments — right-to-left marquee (trusted-by style) */
.marquee{ margin-top:44px; position:relative; overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.marquee-track{ display:flex; width:max-content; will-change:transform; animation:marquee 34s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ flex:0 0 auto; padding:0 clamp(30px,4.2vw,66px); white-space:nowrap;
  font-family:var(--disp); font-weight:500; font-size:clamp(17px,1.9vw,27px); letter-spacing:-.01em;
  color:var(--muted); transition:color .3s ease; }
.marquee-track span:hover{ color:var(--text); }
.marquee-track .logo{ display:flex; align-items:center; }
.marquee-track .logo svg{ height:1.25em; width:auto; display:block; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .mask .word{ transform:none !important; }
  .meridian .arc{ stroke-dashoffset:0 !important; }
  body.js .reveal{ opacity:1 !important; transform:none !important; }
  .cursor,.hero-fx{ display:none !important; }
  body.has-cursor{ cursor:auto !important; }
}


/* ============================================================ CAREERS ============================================================ */
.careers{ padding:clamp(30px,6vh,80px) 0 clamp(60px,10vh,120px); border-top:1px solid var(--hair); }
.careers-head{ margin-bottom:clamp(30px,4vw,48px); }
.careers-head h2{ font-family:var(--disp); font-weight:500; font-size:clamp(24px,3vw,40px); letter-spacing:-.03em; line-height:1; margin-top:14px; }
.careers-form{ max-width:760px; display:flex; flex-direction:column; gap:22px; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media(max-width:600px){ .frow{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:10px; }
.field > span{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.field input, .field select, .field textarea{ background:var(--surface); border:1px solid var(--hair-strong); border-radius:3px; color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.5; padding:14px 16px; width:100%; outline:none; transition:border-color .3s ease, background .3s ease; }
body.has-cursor .field input, body.has-cursor .field textarea{ cursor:text; }
body.has-cursor .field select, body.has-cursor .field.file input, body.has-cursor .submit{ cursor:pointer; }
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); background:#171b22; }
.field select{ appearance:none; -webkit-appearance:none; padding-right:44px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238C8F98' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 16px center; }
.field.file input{ padding:11px 14px; color:var(--muted); }
.field.file input::file-selector-button{ background:transparent; border:1px solid var(--hair-strong); color:var(--text); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:8px 14px; margin-right:14px; border-radius:2px; cursor:pointer; transition:border-color .3s ease; }
.field.file input::file-selector-button:hover{ border-color:var(--accent); }
.submit{ align-self:flex-start; margin-top:8px; background:var(--text); color:var(--ink); border:none; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:16px 28px; border-radius:3px; cursor:pointer; transition:background .3s ease, color .3s ease; }
.submit:hover{ background:var(--accent); }
.form-note{ color:var(--accent); font-family:var(--mono); font-size:13px; letter-spacing:.04em; }


/* ============================================================ MOBILE NAV ============================================================ */
@media(max-width:720px){
  header.nav{
    flex-wrap:wrap; row-gap:9px; align-items:center;
    padding:13px var(--pad) 9px;
    background:rgba(15,17,20,.94);
    -webkit-backdrop-filter:saturate(150%) blur(12px);
    backdrop-filter:saturate(150%) blur(12px);
    border-bottom:1px solid var(--hair);
  }
  .brand{ order:1; font-size:15.5px; letter-spacing:.2em; gap:10px; }
  .brand .ring{ width:17px; height:17px; }
  .nav-cta{ order:2; font-size:12px; letter-spacing:.04em; color:var(--accent); }
  .nav-links{
    order:3; width:100%; gap:20px;
    font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
    padding-bottom:1px;
  }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links a{ white-space:nowrap; padding-bottom:3px; flex:0 0 auto; }
  .nav-links a.active{ color:var(--accent); }
  /* strategy rows: reclaim width from the number column on small screens */
  .strat{ grid-template-columns:32px 1fr; gap:0 16px; }
  .strat .n{ padding-top:9px; font-size:11px; }
  .strat .dt{ font-size:11px; letter-spacing:.1em; }
  .nav-links a.active::after{ transform:scaleX(1); background:var(--accent); }
}