/* ===== Clutch VC — shared site styles ===== */

/* Brand fonts */
@font-face{font-family:'Stratford';src:url('../fonts/StratfordRom.woff2') format('woff2'),url('../fonts/StratfordRom.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Stratford';src:url('../fonts/StratfordIta.woff2') format('woff2'),url('../fonts/StratfordIta.woff') format('woff');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Sohne';src:url('../fonts/Sohne-Buch.woff2') format('woff2'),url('../fonts/Sohne-Buch.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Sohne';src:url('../fonts/Sohne-Kraftig.woff2') format('woff2'),url('../fonts/Sohne-Kraftig.woff') format('woff');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Sohne';src:url('../fonts/Sohne-KraftigKursiv.woff2') format('woff2'),url('../fonts/Sohne-KraftigKursiv.woff') format('woff');font-weight:600;font-style:italic;font-display:swap;}
@font-face{font-family:'Original Sans';src:url('../fonts/OriginalSans-Three-Web.woff2') format('woff2'),url('../fonts/OriginalSans-Three-Web.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}

:root{
  --charcoal:#323037; --charcoal-2:#3D3840; --charcoal-3:#4A4550; --sango:#F87046; --terracotta:#C76A55;
  --pink-flour:#FEF4E9; --pink-ivory:#FDF7F2; --rosey:#F6CFCA;
  --mauve:#8B6A64; --beige:#D4C4B4; --warm-gray-beige:#F1EDE7; --warm-beige:#C8B6A8;
  --serif:'Stratford',Georgia,serif;
  --sans:'Sohne','Helvetica Neue',Arial,sans-serif;
  --eyebrow:'Original Sans','Sohne','Helvetica Neue',Arial,sans-serif;
  --maxw:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--pink-ivory);color:var(--charcoal);font-family:var(--sans);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
a{color:inherit;}

.ribbon{background:var(--charcoal);color:var(--pink-flour);font-family:var(--eyebrow);font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:7px 12px;}
.ribbon b{color:var(--sango);}

/* Header */
header.site{position:sticky;top:0;z-index:50;background:rgba(253,247,242,.9);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid rgba(139,106,100,.18);}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;}
.nav img{height:26px;width:auto;display:block;}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;align-items:center;}
.nav a{font-family:var(--eyebrow);text-transform:uppercase;letter-spacing:.14em;font-size:12px;text-decoration:none;color:var(--charcoal);opacity:.8;}
.nav a:hover,.nav a.active{opacity:1;color:var(--sango);}

/* Type + shared */
.eyebrow{font-family:var(--eyebrow);text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--sango);margin:0 0 16px;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--charcoal);margin:0;}
h1{font-size:clamp(44px,7.4vw,82px);line-height:1.02;letter-spacing:-.01em;}
h2{font-size:clamp(28px,4.4vw,46px);line-height:1.08;}
h3{font-size:22px;line-height:1.2;}
p{margin:0 0 18px;}
.lead{font-size:clamp(19px,2.2vw,23px);line-height:1.5;}
section{padding:92px 0;}
.s-ivory{background:var(--pink-ivory);}
.s-flour{background:var(--pink-flour);}
.s-dark{background:var(--charcoal);color:var(--pink-flour);}
.s-dark h1,.s-dark h2,.s-dark h3,.s-dark h4{color:var(--pink-flour);}
.s-dark .lead{color:var(--warm-beige);}

.pill{display:inline-block;background:var(--sango);color:var(--pink-flour);font-family:var(--eyebrow);text-transform:uppercase;letter-spacing:.18em;font-size:12px;text-decoration:none;padding:15px 30px;border-radius:999px;transition:transform .15s,background .15s;}
.pill:hover{transform:translateY(-1px);background:#f4602f;}
.ghost{display:inline-block;font-family:var(--eyebrow);text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--sango);text-decoration:none;border-bottom:1px solid var(--sango);padding-bottom:3px;}

/* images with unifying warm grade */
.ph-figure{position:relative;border-radius:10px;overflow:hidden;margin:0;}
.ph-figure img{display:block;width:100%;height:100%;object-fit:cover;}
.thesis-fig{aspect-ratio:3/2;}
.partner-fig{aspect-ratio:3/1.05;}

/* Page header (sub-pages) */
.pagehead{padding:128px 0 8px;}
.pagehead h1{font-size:clamp(40px,6vw,68px);max-width:16ch;margin-bottom:18px;}
.pagehead .lead{max-width:60ch;color:var(--mauve);}

/* Hero (home, full-bleed) */
/* Hero — light register for the rotoscoped illustration (headline sits in the image's open cream space) */
.hero{position:relative;min-height:82vh;display:flex;align-items:flex-end;color:var(--charcoal);overflow:hidden;background:var(--pink-ivory);}
/* Hero — machinist still, headline on a cream plate at left */
.hero .bg{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(253,247,242,1) 0%,rgba(253,247,242,1) 38%,rgba(253,247,242,.85) 48%,rgba(253,247,242,.25) 62%,rgba(253,247,242,0) 74%),url('../assets/hero-machinist.jpg');background-size:auto 100%;background-position:right center;background-repeat:no-repeat;}
.hero .inner{position:relative;z-index:2;padding-bottom:72px;padding-top:120px;text-align:left;}
.hero .inner > *{margin-left:0;}
@media(max-width:860px){.hero .bg{background-size:cover;background-position:center 30%;background-image:linear-gradient(0deg,rgba(253,247,242,1) 0%,rgba(253,247,242,.96) 45%,rgba(253,247,242,.2) 80%),url('../assets/hero-machinist.jpg');}}
.hero .eyebrow{color:var(--sango);}
.hero h1{color:var(--charcoal);margin-bottom:22px;max-width:15ch;}
.hero .lead{margin-bottom:30px;max-width:34ch;color:var(--charcoal);}

/* two-col */
.two{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;}
.thesis .ph-figure,.thesis .imgslot{aspect-ratio:3/2;}
.mech{font-family:var(--eyebrow);text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;color:var(--terracotta);margin-top:26px;}

/* value cards */
.beats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:14px;}
.card{background:var(--pink-flour);border-radius:12px;padding:26px 26px 28px;border-top:3px solid var(--sango);}
.s-dark .card{background:var(--charcoal-2);}
.card h3{margin-bottom:8px;font-size:20px;}
.card p{margin:0;font-size:16px;line-height:1.55;}
.partner-img{margin-top:34px;}
.partner-img .ph-figure,.partner-img .imgslot{aspect-ratio:3/1.05;}

/* Big statement (We win when you win) */
.statement{max-width:22ch;}
.statement-body{font-family:var(--serif);font-size:clamp(22px,2.8vw,30px);line-height:1.34;max-width:24ch;}
.notourists{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,26px);line-height:1.35;color:var(--charcoal);max-width:28ch;margin-top:26px;border-left:3px solid var(--sango);padding-left:20px;}

/* Marquee */
.marquee{position:relative;overflow:hidden;margin:8px 0 38px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee .track{display:flex;gap:64px;width:max-content;align-items:center;animation:scroll 34s linear infinite;}
.marquee:hover .track{animation-play-state:paused;}
.marquee img{height:38px;width:auto;filter:brightness(0) invert(1);opacity:.85;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Proof / quotes */
.proof .eyebrow,.voices .eyebrow{color:var(--sango);}
.quote{max-width:820px;}
.quote .mark{font-family:var(--serif);font-size:74px;line-height:0;color:var(--sango);display:block;height:34px;}
.quote blockquote{font-family:var(--serif);font-size:clamp(22px,3vw,32px);line-height:1.3;margin:0 0 16px;}
.s-dark .quote blockquote{color:var(--pink-flour);}
.quote cite{font-family:var(--eyebrow);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--mauve);font-style:normal;}
.s-dark .quote cite{color:var(--warm-beige);}
.proof .outcome{margin-top:34px;font-size:18px;color:#fbe7da;max-width:60ch;}
.proof .ghost{color:var(--sango);border-color:var(--sango);}

/* Team */
.team .lead{max-width:46ch;margin-bottom:10px;}
.team .names{font-family:var(--serif);font-size:20px;margin-top:24px;}
.team .meta{color:var(--mauve);font-size:15px;}
.gp-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:36px;}
.gp{display:grid;grid-template-columns:130px 1fr;gap:22px;align-items:start;}
.gp img{width:130px;height:160px;object-fit:cover;border-radius:10px;filter:saturate(.9) contrast(1.03);}
.gp h3{font-size:22px;}
.gp .role{font-family:var(--eyebrow);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--sango);margin:4px 0 12px;}
.gp p{font-size:15px;line-height:1.55;margin:0;}
.vp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:52px;}
.vp{text-align:center;}
.vp img,.vp .ini{width:92px;height:92px;border-radius:50%;object-fit:cover;margin:0 auto 14px;display:block;filter:saturate(.9) contrast(1.03);}
.vp .ini{background:var(--terracotta);color:var(--pink-flour);font-family:var(--serif);font-size:30px;display:flex;align-items:center;justify-content:center;}
/* Real photographs — no grading */
.gp img,.vp img{filter:sepia(.12) contrast(1.03);} /* team photos are baked B&W; sepia(0) for pure grayscale */
.vp h4{font-size:17px;}
.vp .role{font-family:var(--eyebrow);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;color:var(--mauve);margin-top:5px;}

/* Closing */
/* Dark sections with rotoscoped art behind the content (art sits at low opacity under a charcoal scrim) */
.s-dark.has-art{position:relative;overflow:hidden;}
.s-dark.has-art > .wrap{position:relative;z-index:2;}
.s-dark.has-art .art{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.38;}
.s-dark.has-art .art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(50,48,55,.88) 0%,rgba(50,48,55,.7) 45%,rgba(50,48,55,.35) 100%);}
.proof.has-art .art{background-image:url('../assets/warehouse-roto-dark.jpeg');background-position:center 60%;}
.closing.has-art .art{opacity:.32;}
.closing.has-art .art::after{background:linear-gradient(0deg,rgba(50,48,55,.9) 0%,rgba(50,48,55,.6) 50%,rgba(50,48,55,.75) 100%);}
.closing.has-art.art-rancher .art{background-image:url('../assets/rancher-dark-roto.jpeg');background-position:center 35%;}

.closing{text-align:center;}
.closing .eyebrow{color:var(--sango);}
.closing h2{max-width:18ch;margin:0 auto 14px;}
.closing .lead{margin-bottom:30px;}
.closing .invest{display:block;margin-top:22px;font-size:13px;}

/* Portfolio grid */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:14px;}
.pf-card{background:var(--charcoal);color:var(--pink-flour);border-radius:12px;padding:26px;border-top:3px solid var(--sango);display:flex;flex-direction:column;min-height:210px;}
.pf-card .logo{height:30px;width:auto;max-width:160px;object-fit:contain;object-position:left;margin-bottom:18px;filter:brightness(0) invert(1);opacity:.92;}
.pf-card h3{font-size:20px;margin-bottom:6px;color:var(--pink-flour);}
.pf-card .desc{font-size:15.5px;line-height:1.5;margin:0 0 16px;color:var(--warm-beige);}
.pf-card .loc{font-family:var(--eyebrow);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;color:var(--warm-beige);margin-top:auto;}
.pf-card .loc a{color:var(--sango);}
.pf-card.stealth{background:var(--charcoal-3);border-top-color:var(--terracotta);}
.pf-card.stealth .lock{display:block;margin-bottom:18px;color:var(--warm-beige);height:30px;}
.pf-card.stealth .lock svg{height:30px;width:auto;}

/* Footer */
footer.site{background:var(--charcoal-2);color:var(--pink-flour);padding:48px 0;}
footer .row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
footer img{height:24px;filter:brightness(0) invert(1);opacity:.92;}
footer a{color:var(--pink-flour);text-decoration:none;}
footer .links{display:flex;gap:26px;font-family:var(--eyebrow);text-transform:uppercase;letter-spacing:.12em;font-size:11px;}
footer .loc{font-family:var(--eyebrow);text-transform:uppercase;letter-spacing:.14em;font-size:11px;opacity:.6;margin-top:18px;}

@media(prefers-reduced-motion:reduce){.marquee .track{animation:none;flex-wrap:wrap;width:auto;}}
@media(max-width:860px){
  .two,.beats,.gp-grid{grid-template-columns:1fr;gap:32px;}
  .vp-grid,.pf-grid{grid-template-columns:repeat(2,1fr);}
  section{padding:64px 0;}
  .hero{min-height:74vh;}
  .nav ul{gap:16px;}
}
@media(max-width:520px){
  .vp-grid,.pf-grid{grid-template-columns:1fr;}
  .gp{grid-template-columns:1fr;}
}

/* Letter (Approach) */
.letter-wrap{max-width:720px;}
.letter p{font-size:clamp(18px,1.55vw,20px);line-height:1.7;margin:0 0 24px;}
.letter h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,30px);line-height:1.2;margin:44px 0 16px;}
.letter .letter-fig{margin:36px 0;aspect-ratio:3/2;}
.letter .letter-callout{font-family:var(--serif);font-size:clamp(21px,2.2vw,26px);line-height:1.4;color:var(--charcoal);border-left:3px solid var(--sango);padding-left:22px;margin:36px 0;}
.letter .signoff{margin-top:40px;}
.letter .signoff span{display:block;font-family:var(--serif);font-size:22px;margin-top:10px;}
.letter ul{margin:0 0 24px;padding-left:22px;}
.letter li{font-size:clamp(18px,1.55vw,20px);line-height:1.7;margin-bottom:14px;}