/* ============================================================================
   TVH Ventures — studio design system
   ONE theme. No prefers-color-scheme flip, no [data-theme] switching.
   The old alternating light/dark was the source of the contrast failures:
   body stayed light while component surfaces flipped dark underneath text
   that had not flipped with them. Every surface below is explicit.

   Contrast (WCAG AA needs 4.5:1 body, 3:1 large):
     ink   on paper   16.4:1      paper on ink     16.4:1
     slate on paper    7.1:1      forest on paper   8.3:1
     volt  on ink     13.2:1      clay on paper     4.6:1
   Volt is NEVER used for text on paper (1.2:1). Accent only on ink.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap");

:root{
  --ink:#111310;
  --ink-2:#1B1E19;
  --paper:#F6F5F0;
  --surface:#FFFFFF;
  --slate:#5A5E55;
  --forest:#1E4D3A;
  --volt:#CBF24C;
  --clay:#A9542C;
  --line:#DCD9D0;
  --line-ink:rgba(255,255,255,.14);

  --font:'Inter',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --max:1180px;
  --gut:clamp(20px,5vw,40px);
  --band:clamp(64px,9vw,128px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font);background:var(--paper);color:var(--ink);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;}
::selection{background:var(--volt);color:var(--ink);}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut);}
.band{padding-block:var(--band);}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;}

h1,h2,h3{letter-spacing:-.03em;line-height:1.04;font-weight:700;}
.h-xl{font-size:clamp(2.6rem,6.6vw,5.2rem);font-weight:800;letter-spacing:-.04em;}
.h-lg{font-size:clamp(1.9rem,3.8vw,3.1rem);}
.h-md{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.025em;}
.lede{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--slate);line-height:1.6;max-width:62ch;}

/* ── surfaces ─────────────────────────────────────────────────────────── */
.on-ink{background:var(--ink);color:var(--paper);}
.on-ink .lede,.on-ink .kicker{color:rgba(246,245,240,.72);}
.on-ink .h-xl,.on-ink .h-lg,.on-ink h2,.on-ink h3{color:var(--paper);}
.on-paper{background:var(--paper);}
.on-white{background:var(--surface);}

.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
        color:var(--forest);margin-bottom:18px;display:block;}
.on-ink .kicker{color:var(--volt);}

.sec-head{max-width:70ch;margin-bottom:clamp(36px,5vw,64px);}
.sec-head .lede{margin-top:16px;}

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;background:var(--ink);color:var(--paper);}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 var(--gut);height:62px;
        display:flex;align-items:center;justify-content:space-between;gap:20px;}
.nav-brand{font-weight:700;letter-spacing:-.02em;font-size:15px;text-decoration:none;
           display:flex;align-items:center;gap:9px;}
.nav-brand i{width:11px;height:11px;border-radius:50%;background:var(--volt);display:block;font-style:normal;}
.nav-links{display:flex;gap:26px;list-style:none;}
.nav-links a{font-size:13.5px;color:rgba(246,245,240,.72);text-decoration:none;transition:color .18s;}
.nav-links a:hover{color:var(--volt);}
.nav-cta{font-size:13px;font-weight:600;background:var(--volt);color:var(--ink);
         padding:9px 16px;border-radius:5px;text-decoration:none;white-space:nowrap;}
.nav-cta:hover{background:var(--paper);}
@media(max-width:52rem){.nav-links{display:none;}}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{background:var(--ink);color:var(--paper);padding-block:clamp(70px,11vw,150px) clamp(48px,7vw,92px);
      position:relative;overflow:hidden;}
.hero::after{content:"";position:absolute;right:-14%;top:-30%;width:62vw;height:62vw;max-width:780px;max-height:780px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(203,242,76,.13) 0%,rgba(30,77,58,.10) 42%,transparent 68%);}
.hero .wrap{position:relative;z-index:1;}
.hero h1{max-width:17ch;}
.hero .lede{margin-top:26px;max-width:58ch;font-size:clamp(1.08rem,1.5vw,1.28rem);}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px;}

.btn{display:inline-block;padding:14px 26px;border-radius:6px;font-size:14.5px;font-weight:600;
     text-decoration:none;transition:background .2s,color .2s,border-color .2s;}
.btn-volt{background:var(--volt);color:var(--ink);}
.btn-volt:hover{background:var(--paper);}
.btn-ghost{border:1.5px solid rgba(246,245,240,.3);color:var(--paper);}
.btn-ghost:hover{border-color:var(--volt);color:var(--volt);}
.btn-ink{background:var(--ink);color:var(--paper);}
.btn-ink:hover{background:var(--forest);}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:clamp(48px,7vw,84px);
       background:var(--line-ink);border-top:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink);}
@media(min-width:44rem){.stats{grid-template-columns:repeat(4,1fr);}}
.stat{background:var(--ink);padding:22px 4px 22px 0;}
.stat b{display:block;font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;letter-spacing:-.04em;
        color:var(--volt);line-height:1;}
.stat span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
           text-transform:uppercase;color:rgba(246,245,240,.6);margin-top:9px;}

/* ── numbered blocks (thesis / method / beliefs) ──────────────────────── */
.blocks{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
@media(min-width:56rem){.blocks.c3{grid-template-columns:repeat(3,1fr);}
                        .blocks.c2{grid-template-columns:repeat(2,1fr);}}
.block{background:var(--surface);padding:clamp(24px,3vw,36px);}
.block .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--clay);}
.block h3{margin:14px 0 12px;font-size:clamp(1.15rem,1.7vw,1.4rem);}
.block p{color:var(--slate);font-size:15.5px;line-height:1.62;}

.steps{display:grid;gap:1px;background:var(--line-ink);border-radius:10px;overflow:hidden;}
@media(min-width:60rem){.steps{grid-template-columns:repeat(2,1fr);}}
.step{background:var(--ink-2);padding:clamp(24px,3vw,36px);}
.step .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--volt);}
.step h3{margin:14px 0 12px;font-size:clamp(1.1rem,1.6vw,1.35rem);color:var(--paper);}
.step p{color:rgba(246,245,240,.72);font-size:15.5px;line-height:1.62;}

.beliefs{display:grid;gap:clamp(22px,3vw,40px);}
@media(min-width:48rem){.beliefs{grid-template-columns:repeat(2,1fr);}}
@media(min-width:70rem){.beliefs{grid-template-columns:repeat(4,1fr);}}
.belief .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--clay);}
.belief b{display:block;margin:12px 0 8px;font-size:17px;font-weight:700;letter-spacing:-.02em;}
.belief p{color:var(--slate);font-size:15px;line-height:1.6;}

/* ── portfolio ────────────────────────────────────────────────────────── */
.vgridw{display:grid;gap:14px;grid-template-columns:1fr;}
@media(min-width:40rem){.vgridw{grid-template-columns:repeat(2,1fr);}}
@media(min-width:64rem){.vgridw{grid-template-columns:repeat(3,1fr);}}
.vcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:10px;
       padding:26px 26px 24px;transition:border-color .2s,transform .2s,box-shadow .2s;display:flex;flex-direction:column;}
.vcard:hover{border-color:var(--forest);transform:translateY(-3px);box-shadow:0 10px 30px rgba(17,19,16,.07);}
.vcard-main{text-decoration:none;color:inherit;display:block;}
.vcard-main::after{content:"";position:absolute;inset:0;border-radius:10px;}
.vc-mark{width:42px;height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;
         font-size:12px;font-weight:700;color:#fff;letter-spacing:.04em;margin-bottom:18px;overflow:hidden;}
.vc-mark img{width:100%;height:100%;}
.vc-name{font-size:18px;font-weight:700;letter-spacing:-.022em;margin:10px 0 8px;transition:color .2s;}
.vcard:hover .vc-name{color:var(--forest);}
.vc-usp{font-size:14.5px;color:var(--slate);line-height:1.58;}
.vc-model{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
          color:var(--slate);margin-top:16px;}
.vc-visit{position:relative;z-index:2;display:inline-block;margin-top:14px;font-size:13px;font-weight:600;
          color:var(--forest);text-decoration:none;border-bottom:1.5px solid var(--volt);padding-bottom:2px;
          align-self:flex-start;}
.vc-visit:hover{color:var(--clay);border-color:var(--clay);}

.pill{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
      padding:4px 9px;border-radius:100px;}
.p-live{background:#E4F3DE;color:#1B5E20;}
.p-active{background:#E4F3DE;color:#2E6B32;}
.p-incubating{background:#FBEDDD;color:#8A4B12;}
.p-planning{background:#E3ECF6;color:#1B4F82;}
.p-idea{background:#EDEBE5;color:#5A5E55;}

/* ── people ───────────────────────────────────────────────────────────── */
.people{display:grid;gap:18px;}
@media(min-width:56rem){.people{grid-template-columns:repeat(2,1fr);}}
.person{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:clamp(24px,3vw,34px);}
.person-top{display:flex;gap:18px;align-items:center;margin-bottom:20px;}
.avatar{width:62px;height:62px;border-radius:50%;background:var(--forest);color:var(--volt);flex:0 0 auto;
        display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;letter-spacing:.02em;overflow:hidden;}
.avatar img{width:100%;height:100%;object-fit:cover;}
.person h3{font-size:20px;}
.person .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
              color:var(--forest);margin-top:6px;}
.person .based{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--slate);margin-top:4px;}
.person p.bio{color:var(--slate);font-size:15.5px;line-height:1.62;}
.person h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
           color:var(--slate);margin:22px 0 10px;font-weight:700;}
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{font-size:12.5px;padding:5px 11px;border-radius:100px;background:var(--paper);
      border:1px solid var(--line);color:var(--ink);}
.chip.v{background:#fff;}
.plinks{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;}
.plinks a{font-size:13.5px;font-weight:600;color:var(--forest);text-decoration:none;
          border-bottom:1.5px solid var(--volt);padding-bottom:2px;}
.plinks a:hover{color:var(--clay);border-color:var(--clay);}
.open-seat{background:var(--surface);border:1px dashed var(--line);border-radius:10px;
           padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;justify-content:center;}
.open-seat p{color:var(--slate);font-size:15.5px;max-width:40ch;}
.open-seat a{display:inline-block;margin-top:18px;font-size:14px;font-weight:600;color:var(--forest);
             text-decoration:none;border-bottom:1.5px solid var(--volt);padding-bottom:2px;align-self:flex-start;}

/* ── ways in ──────────────────────────────────────────────────────────── */
.doors{display:grid;gap:1px;background:var(--line-ink);border-radius:10px;overflow:hidden;}
@media(min-width:52rem){.doors{grid-template-columns:repeat(2,1fr);}}
.door{background:var(--ink-2);padding:clamp(26px,3.2vw,40px);display:flex;flex-direction:column;}
.door h3{font-size:clamp(1.2rem,1.9vw,1.5rem);color:var(--paper);}
.door p{color:rgba(246,245,240,.72);font-size:15.5px;line-height:1.62;margin:14px 0 24px;flex:1;}
.door a{font-size:14px;font-weight:600;color:var(--volt);text-decoration:none;align-self:flex-start;
        border-bottom:1.5px solid rgba(203,242,76,.45);padding-bottom:3px;transition:border-color .2s;}
.door a:hover{border-color:var(--volt);}

/* ── contact ──────────────────────────────────────────────────────────── */
.contact-in{display:grid;gap:34px;align-items:start;}
@media(min-width:56rem){.contact-in{grid-template-columns:1.2fr .8fr;gap:64px;}}
.contact-actions{display:flex;flex-wrap:wrap;gap:12px;}

/* ── footer ───────────────────────────────────────────────────────────── */
/* Full-bleed closing band, sitting between the contact section and the footer.
   Height is set explicitly rather than with aspect-ratio + max-height: that
   pairing makes Chromium shrink the element's WIDTH to hold the ratio, which
   caps a "full-bleed" image at an arbitrary pixel width on wide screens. */
.bleed{width:100%;height:min(64vh,56.25vw,32rem);margin:0;display:block;
       background:var(--ink);overflow:hidden;}
.bleed img{width:100%;height:100%;object-fit:cover;object-position:50% 56%;display:block;}
@media(max-width:36rem){.bleed{height:min(56vh,88vw);}}

.foot{background:var(--ink);color:rgba(246,245,240,.62);padding-block:44px 34px;}
.foot .wrap{display:flex;flex-wrap:wrap;gap:14px 36px;justify-content:space-between;align-items:baseline;
            font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;}
.foot a{color:rgba(246,245,240,.62);text-decoration:none;}
.foot a:hover{color:var(--volt);}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto;}}