:root{
  --color-bg: #FAF6EF;
  --color-surface: #FFFFFF;
  --color-text: #1C1917;
  --color-text-muted: #6B6560;
  --color-border: #E4DFD4;
  --color-accent: #7A1414;      /* deep red, derived from D&P logo gradient, WCAG-safe on cream */
  --color-accent-bright: #F3000A; /* exact logo red, decorative accents only */
  --color-accent-on: #FFFFFF;
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --container: 1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms !important; transition-duration:.01ms !important} }

body{
  margin:0;
  font-family:var(--font);
  background:var(--color-bg);
  color:var(--color-text);
  font-size:17px;
  line-height:1.6;
}

a{color:inherit}
img{max-width:100%;display:block}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 32px;
  background:var(--color-bg);
  border-bottom:1px solid var(--color-border);
}
.nav__brand{font-weight:700;letter-spacing:.04em;font-size:15px;text-decoration:none;color:var(--color-text)}
.nav__links{display:flex;gap:28px}
.nav__links a{
  font-size:13px;text-transform:uppercase;letter-spacing:.08em;
  text-decoration:none;color:var(--color-text-muted);
  padding-bottom:4px;border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--color-text);border-color:var(--color-accent)}

/* ---------- generic section rhythm ---------- */
main > section{
  max-width:var(--container);
  margin:0 auto;
  padding:80px 32px;
}
.section-header{
  display:flex;align-items:center;flex-wrap:wrap;
  column-gap:1.4rem;row-gap:10px;margin-bottom:28px;
}
.section-title{
  font-size:2.2rem;font-weight:400;margin:0;letter-spacing:-.01em;
}
.section-title__logos{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.section-title__logos img{height:26px;width:auto;max-width:none}
.section-title__logos .amp{font-size:1.8rem;color:var(--color-accent);line-height:1}
.mockup-note{font-size:.85rem;font-style:italic;color:var(--color-text-muted);max-width:640px;margin:0 0 30px}
.portfolio-caption{font-size:.95rem;color:var(--color-text-muted);margin:0 0 14px}

/* ---------- hero ---------- */
/* Two-column landing hero, full container width — matches the width the
   rest of the page commits to (.stats, .focus-grid, .logo-grid all run
   edge-to-edge at 1160px). Text column carries the identity statement,
   photo column gives the page a real focal point instead of a token
   avatar. No card/radius/shadow chrome — the photo is framed the same
   plain hairline-border way `.logo-card`/`.lp-card` frame a logo. */
.hero{
  padding-top:64px;padding-bottom:56px;
  border-bottom:1px solid var(--color-border);
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:72px;
}

.hero__col--text{display:flex;flex-direction:column}

/* This variant leads with the name, not the role — it's a personal
   business-card site, not a fund site. "Serial Entrepreneur / GP at D&P…"
   carries the positioning that used to be the headline. */
.hero__statement{display:flex;gap:20px}
.hero__bar{width:5px;flex-shrink:0;border-radius:3px;background:var(--color-accent);align-self:stretch}
.hero__headline{
  font-size:clamp(2.6rem, 4.4vw, 4.1rem);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.01em;
  margin:0 0 18px;
}
.hero__role{font-size:1.2rem;font-weight:500;line-height:1.5;color:var(--color-text);margin:0}

/* tags describe the person — small gap to the statement above (proximity:
   still qualifying "who he is"). Plain tracked text, same treatment as the
   nav links — no pill/box shape, this is a credential line, not a filter. */
.hero__tags{
  font-size:13px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--color-text-muted);margin:28px 0 0;
}
/* reused for the "Personal" label ahead of the biker aside in track-record —
   same plain tracked-text treatment, tight to the paragraph it introduces */
.hero__tags--personal{margin:0 0 6px}

/* contact is a distinct, later group — "how to reach him" vs "who he is"
   above — so it gets a clearly larger gap before it, per the same
   proximity logic used to separate hero from the track-record section. */
.hero__contact{margin-top:40px}
.contact-row{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.hero__location{font-size:.9rem;color:var(--color-text-muted);margin:0}
.contact-pill{
  display:inline-block;padding:0;background:none;border-radius:0;
  color:var(--color-text-muted);font-size:13px;font-weight:500;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--color-border);
  transition:color .2s, text-decoration-color .2s;
}
.contact-pill:hover,.contact-pill:focus-visible{color:var(--color-accent);text-decoration-color:var(--color-accent)}

/* photo column: padding-top-percentage + absolutely-positioned img, not
   `aspect-ratio` — this project hit a real intermittent Chromium paint
   bug on `aspect-ratio` boxes; this technique plus explicit width/height
   attributes on the <img> is the proven-safe combination. */
.hero__photo-frame{
  position:relative;
  border:1px solid var(--color-border);
}
.hero__photo-frame::before{content:"";display:block;padding-top:118%}
.hero__photo-frame img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 22%;
}

/* ---------- track record (screen 2) ---------- */
/* Same two-column commitment to the full container width as .hero — the
   bike is Aleksei's actual recognition symbol, not a footnote, so it gets
   real size instead of a 60px circle. It's a transparent cutout, not a
   photo, so no hairline frame around it (a border around mostly-empty
   transparent space would just draw an odd near-empty box) — it sits
   directly on the page background instead, like an illustration. */
.track-record{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:72px;
}
.hero__lede{font-size:1.15rem;color:var(--color-text);max-width:46ch;margin:0 0 18px}
.hero__personal{font-size:.95rem;color:var(--color-text-muted);max-width:46ch;margin:0}
.hero__personal--small{font-size:.85rem;max-width:42ch}
.track-record__col--bike{display:flex;justify-content:center}
.track-record__bike{width:100%;max-width:420px;height:auto}

/* ---------- stats ---------- */
.stats{
  display:flex;flex-wrap:wrap;
  border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);
  padding:36px 32px !important;
}
.stat{text-align:left;padding:0 24px;border-left:1px solid var(--color-border);flex:1 1 200px}
.stat:first-child{border-left:none;padding-left:0}
.stat__num{display:block;font-size:clamp(1.7rem, 2.4vw, 2.6rem);white-space:nowrap;color:var(--color-accent)}
.stat__label{font-size:.9rem;color:var(--color-text-muted)}

/* ---------- focus ---------- */
.focus-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--color-border);border:1px solid var(--color-border);margin-bottom:24px}
.focus-card{background:var(--color-surface);padding:32px}
.focus-card h3{margin:0 0 10px;font-size:1.15rem;font-weight:700;color:var(--color-accent)}
.focus-card__sub{margin:0 0 14px;font-size:.85rem;color:var(--color-text-muted)}
.focus-card p{margin:0;font-size:1rem;color:var(--color-text);max-width:42ch}
.focus-cta{font-size:1.05rem;color:var(--color-text)}
.focus-cta a{color:var(--color-accent);font-weight:500;text-decoration:none;border-bottom:1px solid var(--color-accent)}
.focus-cta a:hover{color:#5c0f0f;border-color:#5c0f0f}

/* ---------- portfolio filters + grid ---------- */
.pill-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.pill{
  font-family:var(--font);cursor:pointer;
  border:1px solid var(--color-border);background:transparent;border-radius:999px;
  padding:9px 18px;font-size:13.5px;color:var(--color-text);
  transition:background .2s,color .2s,border-color .2s;
}
.pill__count{color:var(--color-text-muted);font-size:12px}
.pill.is-active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.pill.is-active .pill__count{color:rgba(255,255,255,.75)}
.pill:hover:not(.is-active){border-color:var(--color-text)}

/* per-card borders instead of a background-through-gap trick — with 41 cards
   (not divisible by 4 or 2) the old trick left trailing empty grid cells
   painted solid in the gap color; a real border never leaves a phantom cell */
.logo-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--color-border);border-left:1px solid var(--color-border)}
.logo-card{
  position:relative;overflow:hidden;
  background:var(--color-surface);
  border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border);
  display:flex;align-items:center;justify-content:center;
  padding:28px 20px;aspect-ratio:3/2;
  text-decoration:none;
  transition:background .2s;
}
.logo-card:hover,.logo-card:focus-visible{background:#F3EEE4}
.logo-card img{max-height:34px;width:auto;max-width:100%}

/* selectively larger — weak/low-res source logos */
.logo-card img[alt="Ex-Human"],
.logo-card img[alt="Gemba"],
.logo-card img[alt="Heos AI"],
.logo-card img[alt="Palomar Labs"],
.logo-card img[alt="Idreem"]{max-height:48px}

/* requested 2x size bump */
.logo-card img[alt="Sol-ti"],
.logo-card img[alt="Damon"]{max-height:68px}

/* tiny intrinsic SVG viewBox (72×10) — max-height alone won't scale it up since
   its natural size is already under the cap; stretch to the card's full width
   instead and let height follow the aspect ratio */
.logo-card img[alt="Fundmates"]{width:100%;height:auto;max-height:none}

/* company name reveal on hover, bottom of card */
.logo-card::after{
  content:attr(data-name);
  position:absolute;left:0;right:0;bottom:0;
  background:var(--color-accent);color:#fff;
  font-size:11px;letter-spacing:.02em;text-align:center;
  padding:6px 6px;
  transform:translateY(100%);
  transition:transform .2s;
  pointer-events:none;
}
.logo-card:hover::after,.logo-card:focus-visible::after{transform:translateY(0)}

/* ---------- LP & partnerships ---------- */
.lp-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--color-border);border-left:1px solid var(--color-border)}
.lp-card{
  position:relative;overflow:hidden;
  background:var(--color-surface);
  border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border);
  display:flex;align-items:center;justify-content:center;
  padding:28px 24px;aspect-ratio:3/2;
  transition:background .2s;
}
.lp-card:hover,.lp-card:focus-visible{background:#F3EEE4}
.lp-card img{max-height:42px;max-width:100%;width:auto}
.lp-card::after{
  content:attr(data-name);
  position:absolute;left:0;right:0;bottom:0;
  background:var(--color-accent);color:#fff;
  font-size:11px;letter-spacing:.02em;text-align:center;
  padding:6px 6px;
  transform:translateY(100%);
  transition:transform .2s;
  pointer-events:none;
}
.lp-card:hover::after,.lp-card:focus-visible::after{transform:translateY(0)}
.lp-card img[alt="YellowRocks"]{max-height:64px}
.lp-card img[alt="S16VC"]{max-height:84px}

/* ---------- footer ---------- */
.site-footer{
  background:var(--color-accent);color:#fff;
  padding:60px 32px 30px;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  max-width:100%;
}
.site-footer h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 16px;color:rgba(255,255,255,.7)}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col a,.footer-col span{color:#fff;text-decoration:none;font-size:.95rem}
.footer-col a:hover{text-decoration:underline}
.footer-copy{grid-column:1/-1;margin:20px 0 0;font-size:.8rem;color:rgba(255,255,255,.6)}

/* ---------- responsive ---------- */
@media (max-width: 860px){
  .hero{grid-template-columns:1fr;gap:40px;padding-bottom:40px}
  .hero__col--photo{max-width:360px}
  .track-record{grid-template-columns:1fr;gap:32px}
  .track-record__bike{max-width:280px}
  .stats{flex-direction:column}
  .stat{flex:0 1 auto;border-left:none;border-top:1px solid var(--color-border);padding:16px 0 0;margin-top:16px}
  .stat:first-child{border-top:none;margin-top:0}
  .logo-grid{grid-template-columns:repeat(2,1fr)}
  .lp-grid{grid-template-columns:repeat(2,1fr)}
  .focus-grid{grid-template-columns:1fr}
  .site-footer{grid-template-columns:1fr}
  main > section{padding:56px 20px}
}

@media (max-width: 640px){
  .nav{
    flex-direction:column;align-items:flex-start;gap:14px;
    padding:16px 20px;
  }
  .nav__brand{font-size:14px;white-space:nowrap}
  .nav__links{gap:18px;flex-wrap:wrap;width:100%}
  .nav__links a{font-size:12px;padding:6px 0}

  .hero{padding-top:36px;padding-bottom:32px;gap:32px}
  .hero__col--photo{max-width:280px}
  .hero__headline{font-size:1.7rem}
  .hero__tags{margin-top:20px}
  .hero__contact{margin-top:28px}

  .pill{padding:12px 18px}

  .logo-grid{grid-template-columns:repeat(2,1fr)}
  .logo-card{padding:20px 14px}
  .lp-card{padding:18px 14px}
  .lp-card img{max-height:32px}
  .lp-card img[alt="YellowRocks"]{max-height:48px}
  .lp-card img[alt="S16VC"]{max-height:60px}

  .section-title__logos img{height:16px}
  .section-title__logos .amp{font-size:1.3rem}

  .site-footer{padding:48px 20px 24px}
}

@media (max-width: 380px){
  .lp-grid{grid-template-columns:1fr 1fr}
}