/* Seller First. OnePrime Capital homepage direction.
   The page opens on the visitor. A cool light ground, the team's own photos,
   Hanken Grotesk for a plain speaking voice, and OnePrime's blue as the one accent. */

:root {
  --blue: #1308e1;
  --blue-deep: #0d05b3;
  --ink: #0d0f1a;
  --text: #2b2e3d;
  --muted: #555a6d;
  --off: #747a92;
  --dim: #636981;
  --line: #d3d8e4;
  --frame-a: #dde3f0;
  --frame-b: #c2cce2;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --pad: clamp(20px, 4.4vw, 64px);
  --nav-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scrollbar-color: #aab2c8 transparent;
}

body {
  margin: 0;
  font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--pad); top: -80px; z-index: 20;
  padding: 10px 14px; border-radius: 6px; background: var(--ink); color: #fff;
  font-weight: 600; font-size: 14px; text-decoration: none;
}
.skip:focus { top: 12px; }

.ico { flex: none; }

/* ---------- Navigation ---------- */

/* The menu sits over the top of the hero, so the first screen is one lit ground. */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--nav-h); padding: 0 var(--pad);
}
.brand { display: block; line-height: 0; }
.brand img { height: 30px; width: auto; filter: brightness(0); }

.nav ul { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; }
.nav a:not(.brand) {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 15.5px; font-weight: 500; color: var(--ink); text-decoration: none;
  transition: color 150ms var(--ease-out);
}
.nav a[aria-current="page"] { font-weight: 700; }
.nav a.portal {
  min-height: 40px; padding: 0 14px; border-radius: 8px; font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav a:not(.brand):not(.portal):hover { color: var(--blue); }
  .nav a.portal:hover { background: var(--ink); color: #fff; }
}

.menu-btn {
  display: none; align-items: center; height: 44px; padding: 0 14px;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1;
  cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
}

@media (max-width: 899px) {
  .menu-btn { display: inline-flex; }
  .nav nav {
    position: absolute; left: 0; right: 0; top: var(--nav-h);
    padding: 4px var(--pad) 20px; background: #f3f5fa;
    box-shadow: 0 18px 30px -18px rgba(13, 15, 26, 0.35);
    display: none;
  }
  .nav.is-open nav { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li + li { border-top: 1px solid var(--line); }
  .nav a:not(.brand) { width: 100%; min-height: 52px; font-size: 17px; }
  .nav a.portal { box-shadow: none; padding: 0; justify-content: space-between; }
}

/* ---------- Scene 1. Who are you ---------- */

.hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px;
  padding: calc(var(--nav-h) + 20px) var(--pad) 56px;
  background:
    radial-gradient(52% 64% at 76% 38%, #ffffff 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #eef1f8 0%, #e3e8f4 100%);
}

.pick { min-width: 0; margin: 0; }

.pick h1 {
  margin: 0;
  font-size: clamp(31px, 3.7vw, 56px); line-height: 1.12; letter-spacing: -0.028em; font-weight: 620;
  color: var(--ink); text-wrap: balance;
}

.choices { display: grid; margin: 0; padding: 0; border: 0; min-width: 0; }
.choices label {
  display: flex; align-items: center; gap: 0.3em; min-height: 44px;
  font-size: clamp(31px, 3.7vw, 56px); line-height: 1.14; letter-spacing: -0.028em; font-weight: 720;
  color: var(--off); cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: color 160ms var(--ease-out);
}
/* The small blue square is the mark OnePrime's own site sets beside its headings. */
.choices label::before {
  content: ""; flex: none; width: 0.3em; height: 0.3em; border-radius: 2px; background: var(--blue);
  transform: scale(0); transition: transform 200ms var(--ease-out);
}
.choices input:checked + label { color: var(--ink); }
.choices input:checked + label::before { transform: scale(1); }
.choices input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) {
  .choices input:not(:checked) + label:hover { color: var(--text); }
}

/* All four answers share one cell, so the block keeps one height as the choice changes. */
.answers { display: grid; margin: 26px 0 26px; max-width: 34em; }
.a { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.a p { margin: 0; font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.55; color: var(--text); text-wrap: pretty; }
.a-founders { visibility: visible; opacity: 1; }
.pick:has(#v-employees:checked) .a-founders,
.pick:has(#v-investors:checked) .a-founders,
.pick:has(#v-companies:checked) .a-founders { visibility: hidden; opacity: 0; }
.pick:has(#v-employees:checked) .a-employees,
.pick:has(#v-investors:checked) .a-investors,
.pick:has(#v-companies:checked) .a-companies { visibility: visible; opacity: 1; }

/* Runs only after the visitor has made a choice, never on load. */
.pick.is-touched .a.is-in { animation: answer 240ms var(--ease-out); }
@keyframes answer {
  from { opacity: 0; filter: blur(5px); transform: translateY(6px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

.cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 20px; border-radius: 8px;
  background: var(--blue); color: #fff; font-size: 16px; font-weight: 650; text-decoration: none;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: background-color 150ms var(--ease-out), transform 140ms var(--ease-out);
}
.cta:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .cta:hover { background: var(--blue-deep); } }

/* ---------- People ---------- */

.person { margin: 0; min-width: 0; }
.frame {
  display: block; overflow: hidden; aspect-ratio: 17 / 20; border-radius: 14px;
  background: linear-gradient(180deg, var(--frame-a) 0%, var(--frame-b) 100%);
  box-shadow: 0 26px 40px -24px rgba(13, 15, 26, 0.42), 0 2px 6px rgba(13, 15, 26, 0.08);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* Kim's supplied cutout stops short of the bottom of its file, so it is set a little larger to reach the frame. */
.p-kim-bowe .frame img { transform: scale(1.07); transform-origin: 50% 0; }
.person figcaption { display: grid; gap: 1px; padding: 12px 2px 0; }
.p-name { font-size: 16px; line-height: 1.25; font-weight: 680; letter-spacing: -0.01em; color: var(--ink); }
.p-title { font-size: 14px; line-height: 1.35; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .frame:hover { transform: translateY(-4px); box-shadow: 0 34px 44px -24px rgba(13, 15, 26, 0.5), 0 2px 6px rgba(13, 15, 26, 0.1); }
}

/* Hero faces. Three columns set at three heights. */
.faces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; min-width: 0; }
.faces .col { display: contents; }
/* On narrow screens the faces run in seniority order, the two Managing Partners first. */
.faces .person { order: var(--i); }

/* The hero's one authored moment. Faces rise into place once the first frame has painted. */
html.js:not(.go):not(.done) .rise { opacity: 0; }
html.js.go:not(.done) .rise {
  animation: rise 520ms var(--ease-out) backwards;
  animation-delay: calc(var(--i) * 70ms + 80ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 640px) {
  .faces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
}

@media (min-width: 1040px) {
  .hero {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(40px, 5vw, 88px); align-items: center;
    min-height: max(100dvh, 760px); padding: calc(var(--nav-h) + 12px) var(--pad) 56px;
  }
  .faces { display: flex; align-items: flex-start; gap: clamp(14px, 1.5vw, 22px); }
  .faces .col { display: grid; flex: 1 1 0; min-width: 0; gap: 22px; }
  .faces .col:nth-child(1) { margin-top: 64px; }
  .faces .col:nth-child(3) { margin-top: 118px; }
  /* On wide screens the blue square hangs in the margin, so the choices line up under the headline. */
  .choices label { margin-left: -0.6em; }
  /* Sized from the height of the screen so two rows of faces always fit under the menu. */
  .faces .frame { aspect-ratio: auto; height: clamp(170px, calc((max(100dvh, 760px) - var(--nav-h) - 330px) / 2), 300px); }
}

/* ---------- Section headings shared by the scenes added below ---------- */

.sectors h2, .approach h2 {
  margin: 0; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.1; letter-spacing: -0.032em; font-weight: 680; text-wrap: balance;
}

/* ---------- Areas of Investment. A list of rows drives the panel beside it ---------- */

.sectors { padding: clamp(64px, 9vw, 128px) var(--pad) clamp(56px, 7vw, 104px); background: #fff; }

.sec-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin: 0; }
.sec-left { min-width: 0; }
.sec-lead { margin: 16px 0 28px; max-width: 32em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--text); text-wrap: pretty; }

.sec-rows { display: grid; margin: 0; padding: 0; border: 0; min-width: 0; border-bottom: 1px solid var(--line); }
.sec-rows label {
  display: flex; align-items: center; gap: 0.5em; min-height: 58px; padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: clamp(21px, 2vw, 29px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 680;
  color: var(--dim); cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: color 160ms var(--ease-out);
}
.sec-rows label::before {
  content: ""; flex: none; width: 0.36em; height: 0.36em; border-radius: 2px; background: var(--blue);
  margin-left: -0.86em; opacity: 0; transform: scale(0.4);
  transition: transform 200ms var(--ease-out), opacity 160ms var(--ease-out), margin-left 200ms var(--ease-out);
}
.sec-rows input:checked + label { color: var(--ink); }
.sec-rows input:checked + label::before { margin-left: 0; opacity: 1; transform: scale(1); }
.sec-rows input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) {
  .sec-rows input:not(:checked) + label:hover { color: var(--text); }
}

/* All six descriptions share one cell, so the panel keeps one size as the row changes. */
.sec-panel {
  display: grid; min-width: 0; min-height: 250px; padding: clamp(24px, 3.4vw, 52px); border-radius: 14px;
  background:
    radial-gradient(90% 80% at 100% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, #eaeef7 0%, #d6deef 100%);
  box-shadow: 0 30px 46px -28px rgba(13, 15, 26, 0.34), 0 2px 6px rgba(13, 15, 26, 0.06);
}
.d { grid-area: 1 / 1; display: grid; align-content: space-between; gap: 32px; visibility: hidden; opacity: 0; }
.d-name { display: flex; align-items: center; gap: 0.6em; margin: 0; font-size: 16px; line-height: 1.3; font-weight: 680; color: var(--ink); }
.d-name::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--blue); }
.d-text {
  margin: 0; max-width: 15em;
  font-size: clamp(25px, 2.9vw, 42px); line-height: 1.16; letter-spacing: -0.026em; font-weight: 620; color: var(--ink);
  text-wrap: balance;
}
.d-enterprise { visibility: visible; opacity: 1; }
.sec-pick:has(#s-ai:checked) .d-enterprise,
.sec-pick:has(#s-cyber:checked) .d-enterprise,
.sec-pick:has(#s-fintech:checked) .d-enterprise,
.sec-pick:has(#s-robotics:checked) .d-enterprise,
.sec-pick:has(#s-interactive:checked) .d-enterprise { visibility: hidden; opacity: 0; }
.sec-pick:has(#s-ai:checked) .d-ai,
.sec-pick:has(#s-cyber:checked) .d-cyber,
.sec-pick:has(#s-fintech:checked) .d-fintech,
.sec-pick:has(#s-robotics:checked) .d-robotics,
.sec-pick:has(#s-interactive:checked) .d-interactive { visibility: visible; opacity: 1; }

/* This scene's one authored moment. Runs only after the visitor has moved to a row. */
.sec-pick.is-touched .d.is-in { animation: answer 240ms var(--ease-out); }

/* The record, briefly. Their paragraph and its link, and no chart. */
.record {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  margin-top: clamp(56px, 8vw, 112px); padding-top: clamp(36px, 5vw, 64px); border-top: 1px solid var(--line);
}
.record p {
  margin: 0; max-width: 32em;
  font-size: clamp(19px, 1.9vw, 26px); line-height: 1.46; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty;
}
.record a { color: var(--blue); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }

@media (min-width: 960px) {
  .sec-pick, .record { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 5vw, 88px); }
  .sec-pick { align-items: stretch; }
  .sec-panel { min-height: 0; }
}

/* ---------- Unique Approach and Who we are. The photograph stays while the statements pass ---------- */

.approach {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px;
  padding: clamp(64px, 9vw, 128px) var(--pad);
  background:
    radial-gradient(48% 40% at 22% 30%, #ffffff 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #eef1f8 0%, #e3e8f4 100%);
}
.ap-photo { margin: 0; min-width: 0; }
.ap-photo img {
  display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 72% 50%; border-radius: 14px;
  box-shadow: 0 30px 46px -26px rgba(13, 15, 26, 0.46), 0 2px 6px rgba(13, 15, 26, 0.08);
}
.ap-text { min-width: 0; }
.ap-text h2 { margin-bottom: clamp(10px, 1.4vw, 20px); }
.ap-text h2.ap-second { margin-top: clamp(56px, 8vw, 112px); }

.stmt { padding: clamp(22px, 3.2vw, 44px) 0; border-top: 1px solid #c9d0e0; }
.stmt h3 {
  margin: 0 0 10px; font-size: clamp(23px, 2.5vw, 36px); line-height: 1.14; letter-spacing: -0.026em; font-weight: 680;
  color: var(--ink); text-wrap: balance; transition: color 200ms var(--ease-out);
}
.stmt p {
  margin: 0; max-width: 34em; font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.55; color: var(--text); text-wrap: pretty;
  transition: color 200ms var(--ease-out);
}
.stmt-sec p { font-size: 15px; line-height: 1.5; }
.nb { white-space: nowrap; }
/* Once the script is watching, the statement crossing the middle of the screen is black and the rest step back.
   The text is never hidden, so a page with scripts off, or one loaded in a hidden tab, still reads in full. */
.approach.is-live .stmt:not(.is-on) h3,
.approach.is-live .stmt:not(.is-on) p { color: var(--dim); }

@media (min-width: 960px) {
  .approach { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
  .ap-photo { position: sticky; top: max(24px, calc(50dvh - 310px)); height: min(620px, calc(100dvh - 48px)); }
  .ap-photo img { aspect-ratio: auto; }
  .stmt { padding: clamp(30px, 6vh, 60px) 0; }
}

/* ---------- Scene 2. Meet the Team ---------- */

.team { padding: clamp(64px, 9vw, 128px) var(--pad) clamp(56px, 7vw, 104px); background: #fff; }
.team-head {
  display: grid; gap: 14px 48px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px);
}
.team h2 { margin: 0; font-size: clamp(40px, 6.2vw, 92px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 680; }
.team-head p { margin: 0; max-width: 30em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--text); text-wrap: pretty; }

.team-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; align-items: start; }
.group { grid-column: 1 / -1; margin: 0; min-width: 0; }
.group img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px;
  box-shadow: 0 30px 46px -26px rgba(13, 15, 26, 0.46), 0 2px 6px rgba(13, 15, 26, 0.08);
}
.person.lg .p-name { font-size: 19px; }
.person.lg .p-title { font-size: 15px; }

.team-rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; margin-top: 28px; }
.team-rest .person:nth-child(even) { margin-top: 28px; }

/* Scene 2's one authored moment. Each photo opens from the top as it scrolls into view.
   It is tied to the scroll position, so nothing is ever left hidden, and names never hide.
   Browsers without scroll timelines show the photos as they are. */
@keyframes open {
  from { clip-path: inset(0 0 100% 0 round 14px); }
  to { clip-path: inset(0 0 0 0 round 14px); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal .frame, .group.reveal img {
      animation: open linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
  }
}

@media (min-width: 720px) {
  .team-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .team-rest { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; margin-top: 36px; }
  .team-rest .person:nth-child(even) { margin-top: 44px; }
}

@media (min-width: 1040px) {
  .team-top { grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6.4fr); gap: 0 clamp(18px, 2vw, 28px); }
  .team-top .person.lg:nth-child(2) { margin-top: 56px; }
  .group { grid-column: auto; align-self: stretch; position: relative; min-height: 320px; }
  .group img { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
  .team-rest { gap: 40px clamp(18px, 2vw, 28px); margin-top: 64px; padding-left: 8%; }
  .team-rest .person:nth-child(even) { margin-top: 52px; }
}

/* ---------- Get in touch. The page ends on the same lit ground it opened on ---------- */

.closing {
  padding: clamp(72px, 10vw, 150px) var(--pad);
  background:
    radial-gradient(52% 70% at 24% 46%, #ffffff 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #eef1f8 0%, #e3e8f4 100%);
}
.closing h2 { margin: 0; font-size: clamp(40px, 6.2vw, 92px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 680; }
.closing-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; margin-top: clamp(20px, 2.6vw, 36px); }
.mail {
  display: inline-flex; align-items: center; min-height: 48px;
  font-size: clamp(19px, 2.3vw, 32px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 620; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; overflow-wrap: anywhere;
  transition: color 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .mail:hover { color: var(--blue); } }

/* Capture switch (?show=areas, record, approach or contact). Not part of the design. */
html.cap .nav, html.cap main > section { display: none; }
html.cap[data-cap="areas"] .sectors, html.cap[data-cap="record"] .sectors { display: block; }
html.cap[data-cap="record"] .sec-pick { display: none; }
html.cap[data-cap="record"] .record { margin-top: 0; padding-top: 0; border-top: 0; }
html.cap[data-cap="approach"] .approach { display: grid; }
html.cap[data-cap="contact"] .closing { display: block; }

/* ---------- Footer ---------- */

.foot {
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px 48px;
  padding: 40px var(--pad) calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.foot-logo { height: 28px; width: auto; filter: brightness(0); }
.foot-legal p { margin: 0 0 6px; max-width: 72ch; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

/* ---------- Reduced motion keeps the change and drops the movement ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .rise { animation: none !important; opacity: 1; }
  .pick.is-touched .a.is-in, .sec-pick.is-touched .d.is-in { animation: none; }
  .sec-rows label::before, .stmt h3, .stmt p { transition-duration: 1ms; }
  .frame, .cta { transform: none !important; }
  .choices label::before { transition-duration: 1ms; }
}