/* ============================================================
   Sampac — shared design system
   Swap the values in :root to match your real brand.
   ============================================================ */

:root{
  --ink:#10233A;
  --ink-70: rgba(16,35,58,.7);
  --ink-45: rgba(16,35,58,.45);
  --paper:#F5F6F3;
  --paper-alt:#EBE9E2;
  --brass:#A87C34;
  --brass-soft: rgba(168,124,52,.14);
  --teal:#293e72;
  --teal-soft: rgba(41,62,114,.12);
  --line:#DDDACF;
  --white:#FFFFFF;
  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --maxw: 1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px;}

/* ---------- NAV ---------- */
header.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(245,246,243,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 40px; max-width:var(--maxw); margin:0 auto;
}
.logo{
  display:flex; align-items:center; flex-shrink:0;
  line-height:0;
}
.logo img{
  height:40px; width:auto; display:block;
}
nav.links{display:flex; gap:34px; font-size:14px; font-weight:500;}
nav.links a{color:var(--ink-70); transition:color .15s;}
nav.links a:hover, nav.links a.active{color:var(--ink);}
nav.links a.active{border-bottom:2px solid var(--brass); padding-bottom:2px;}
.nav-cta{
  font-family:var(--body); font-weight:600; font-size:13.5px;
  background:var(--ink); color:var(--paper); padding:10px 20px;
  border-radius:3px; transition:background .15s;
}
.nav-cta:hover{background:var(--teal);}

/* ---------- BUTTONS ---------- */
.btn-primary{
  display:inline-block; background:var(--ink); color:var(--paper); font-weight:600; font-size:14.5px;
  padding:14px 26px; border-radius:3px; transition:background .15s; border:none; cursor:pointer;
  font-family:var(--body);
}
.btn-primary:hover{background:var(--teal);}
.btn-ghost{
  display:inline-block; border:1px solid var(--ink-45); color:var(--ink); font-weight:600; font-size:14.5px;
  padding:14px 26px; border-radius:3px; transition:.15s;
}
.btn-ghost:hover{border-color:var(--ink); background:var(--white);}

/* ---------- PAGE HEAD (About / Portfolio / Pitch / Partner / Newsroom) ---------- */
.page-head{padding:76px 0 44px; border-bottom:1px solid var(--line);}
.page-head--media{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.page-head-copy{min-width:0;}
.page-head-copy .page-sub{max-width:36em;}
.page-head-media{margin:0; width:100%; border-radius:4px; overflow:hidden; background:var(--paper-alt);}
.page-head-media img{
  display:block;
  width:100%;
  height:clamp(200px, 28vw, 280px);
  object-fit:cover;
  object-position:center 30%;
}
.section-eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); margin-bottom:14px;}
h1.page-title{font-family:var(--display); font-weight:600; font-size:clamp(30px,4vw,42px); letter-spacing:-.01em; margin:0;}
.page-sub{font-size:16px; color:var(--ink-70); max-width:560px; margin:16px 0 0;}

section{padding:86px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:46px; gap:24px; flex-wrap:wrap;}
h2.section-title{font-family:var(--display); font-weight:600; font-size:clamp(26px,3vw,34px); letter-spacing:-.01em; margin:0;}
.section-note{font-size:14px; color:var(--ink-45); max-width:340px;}

/* ---------- HERO (homepage) ---------- */
.hero{position:relative; padding:96px 0 0; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.25fr .9fr; gap:60px; align-items:end; padding-bottom:86px; position:relative; z-index:2;}
.eyebrow{font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); margin-bottom:22px; display:flex; align-items:center; gap:10px;}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--brass);}
h1.hero-head{font-family:var(--display); font-weight:600; font-size:clamp(40px,5vw,62px); line-height:1.04; letter-spacing:-.015em; margin:0 0 26px;}
h1.hero-head em{font-style:normal; color:#5d75b0;}
.hero-sub{font-size:17px; color:var(--ink-70); max-width:480px; margin:0 0 34px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

.ticker-panel{background:var(--white); border:1px solid var(--line); border-radius:4px; padding:28px 26px; align-self:stretch; display:flex; flex-direction:column; justify-content:space-between;}
.ticker-title{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-45); margin-bottom:18px; display:flex; justify-content:space-between;}
.ticker-row{display:flex; justify-content:space-between; align-items:baseline; padding:12px 0; border-top:1px solid var(--line);}
.ticker-row:first-of-type{border-top:none;}
.ticker-label{font-size:13px; color:var(--ink-70);}
.ticker-value{font-family:var(--mono); font-size:14.5px; font-weight:500;}

.hero-rule{height:1px; margin:48px 0 0; background:linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);}

/* ---------- FOCUS / 3-COL GRID ---------- */
.focus-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.focus-card{background:var(--paper); padding:34px 30px;}
.focus-card--photo{padding:0;}
.focus-copy{padding:8px 30px 34px;}
.focus-num{font-family:var(--mono); font-size:12px; color:var(--brass); margin-bottom:16px;}
.focus-card h3{font-family:var(--display); font-size:19px; margin:0 0 10px; font-weight:600;}
.focus-card p{font-size:14px; color:var(--ink-70); margin:0;}
.focus-media{margin:15px; overflow:hidden; background:var(--paper-alt); line-height:0; border-radius:3px;}
.focus-media img{
  width:100%;
  height:auto;
  max-width:none;
  max-height:none;
  display:block;
}

/* ---------- LOGO STRIP ---------- */
.strip-wrap{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:36px 0;}
.strip{display:flex; align-items:center; gap:56px; animation:scroll 32s linear infinite; width:max-content;}
.strip-logo{height:28px; width:auto; display:block; opacity:.55; filter:grayscale(1); flex-shrink:0;}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.strip-cta{text-align:center; margin-top:30px;}
.strip-cta a{font-size:13.5px; font-weight:600; border-bottom:1px solid var(--ink); padding-bottom:2px;}

.portfolio-strip-head{padding-top:0; padding-bottom:43px;}
.portfolio-strip-head .section-head{margin-bottom:28px;}

/* ---------- EXITS CAROUSEL (Portfolio) ---------- */
.exits-band{
  background:var(--ink);
  color:var(--paper);
  padding:36px 0 44px;
  border-bottom:1px solid rgba(245,246,243,.08);
}
.exits-band-inner{max-width:none; padding:0;}
.exits-head{
  max-width:var(--maxw); margin:0 auto 22px; padding:0 40px;
}
.exits-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brass); margin:0 0 8px;
}
.exits-title{
  font-family:var(--display); font-weight:600; font-size:clamp(22px,2.6vw,28px);
  letter-spacing:-.01em; margin:0; color:var(--paper);
}
.exits-viewport{
  overflow:hidden;
  padding-left:0;
}
.exits-track{
  display:flex; gap:16px; width:max-content;
  will-change:transform;
  padding-right:0;
}
.exit-card{
  position:relative; flex:0 0 clamp(160px, 18.5vw, 213px);
  aspect-ratio:1; overflow:hidden; border-radius:2px; background:#0a1626;
  color:inherit; display:block;
}
.exit-card img.exit-visual{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.exit-card:hover img.exit-visual{transform:scale(1.04);}
.exit-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 42%, rgba(10,18,32,.92) 100%);
  pointer-events:none;
}
.exit-meta{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:18px 16px 16px; display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center;
}
.exit-logo{
  height:24px; width:auto; max-width:78%; object-fit:contain;
  filter:brightness(0) invert(1); opacity:.95;
}
.exit-logo--wide{height:26px; max-width:88%;}
.exit-caption{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(245,246,243,.78); margin:0;
}

/* ---------- PARTNER / TEAM CARDS ---------- */
.about-teaser{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center;}
.partner-card{background:var(--white); border:1px solid var(--line); border-radius:4px; padding:28px; position:relative;}
.partner-card-top{display:flex; align-items:center; gap:18px; margin-bottom:18px;}
.partner-avatar{width:64px; height:64px; border-radius:50%; background:var(--paper-alt); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:600; font-size:20px; color:var(--teal); margin-bottom:16px; object-fit:cover; flex-shrink:0;}
.partner-card-top .partner-avatar{width:88px; height:88px; margin-bottom:0;}
img.partner-avatar{display:block; padding:0; color:transparent;}
.partner-id{min-width:0;}
.partner-card h4{font-family:var(--display); font-size:17px; margin:0 0 2px;}
.partner-card-top .partner-role{margin-bottom:0;}
.partner-role{font-size:12.5px; color:var(--brass); font-family:var(--mono); margin-bottom:14px;}
.partner-card p{font-size:13.5px; color:var(--ink-70); margin:0;}
.about-copy p{font-size:15.5px; color:var(--ink-70); margin:0 0 18px;}
.about-copy a{font-weight:600; border-bottom:1px solid var(--ink);}

.team-group-label{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--display);
  font-weight:600;
  font-size:15px;
  letter-spacing:.02em;
  color:var(--ink);
  margin:0 0 18px;
}
.team-group-label::before{
  content:'';
  width:22px;
  height:1px;
  background:var(--brass);
  flex-shrink:0;
}
.team-group-label--support{margin-top:56px;}
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.team-card{background:var(--white); padding:30px 26px; display:flex; flex-direction:column;}
.team-card-top{display:flex; align-items:center; gap:18px; margin-bottom:18px;}
.team-card-top .partner-avatar{width:144px; height:144px; margin-bottom:0;}
.team-card-top .partner-id{display:flex; flex-direction:column; justify-content:center; min-width:0;}
.team-card-top .partner-role{margin-bottom:0;}
.team-card h4{font-family:var(--display); font-size:18px; margin:0 0 4px; font-weight:600; line-height:1.2;}
.team-card p{font-size:13.5px; color:var(--ink-70); margin:0; flex:1;}
.team-card .linkedin{
  align-self:flex-end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:16px;
  width:32px;
  height:32px;
  color:var(--ink-45);
  border:none;
  border-radius:4px;
  transition:color .15s, background .15s;
}
.team-card .linkedin:hover{color:var(--ink); background:var(--paper-alt);}
.team-card .linkedin svg{display:block;}

/* ---------- CTA BAND ---------- */
.cta-band{background:var(--ink); color:var(--paper); border-radius:6px; padding:64px 60px; display:grid; grid-template-columns:1.2fr auto; align-items:center; gap:30px;}
.cta-band h3{font-family:var(--display); font-weight:600; font-size:28px; margin:0 0 8px; letter-spacing:-.01em;}
.cta-band p{margin:0; color:rgba(245,246,243,.65); font-size:14.5px;}
.cta-band .btn-primary{background:var(--brass);}
.cta-band .btn-primary:hover{background:#bd8f42;}
.cta-band .btn-ghost{border-color:rgba(245,246,243,.4); color:var(--paper);}
.cta-band .btn-ghost:hover{border-color:var(--paper); background:rgba(255,255,255,.06);}

/* ---------- PORTFOLIO GRID ---------- */
.count-block{text-align:right;}
.count-num{font-family:var(--display); font-weight:700; font-size:56px; line-height:1; color:#293e72;}
.count-label{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-45); margin-top:6px;}
.count-note{font-size:12.5px; color:var(--ink-45); margin-top:4px;}
.head-row{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;}

.filter-bar{display:flex; gap:10px; flex-wrap:wrap; padding:28px 0 0;}
.pill{font-family:var(--mono); font-size:11.5px; padding:8px 14px; border-radius:20px; border:1px solid var(--line); background:var(--white); color:var(--ink-70); cursor:pointer; transition:.15s; user-select:none;}
.pill:hover{border-color:var(--ink-45);}
.pill.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}

.grid-section{padding:50px 0 60px;}
.grid-section--companies{padding-bottom:40px;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.card{background:var(--white); padding:28px 24px; min-height:150px; display:flex; flex-direction:column; justify-content:space-between; transition:background .18s; cursor:pointer; position:relative;}
.card:hover{background:var(--paper-alt);}
.card.hidden{display:none;}
.card-top{display:flex; justify-content:space-between; align-items:flex-start; min-height:48px;}
.card-logo-wrap{display:flex; align-items:center; height:48px; max-width:100%;}
.card-logo{display:block; height:40px; width:auto; max-width:160px; object-fit:contain; object-position:left center;}
.spotlight-tag{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--brass); background:var(--brass-soft); padding:3px 8px; border-radius:10px;}
.card-name{font-family:var(--display); font-weight:600; font-size:17px; margin-top:22px; letter-spacing:-.01em;}
.card-bottom{display:flex; justify-content:space-between; align-items:center; margin-top:18px; gap:10px;}
.card-sector{font-size:11px; color:var(--ink-45); font-family:var(--mono); line-height:1.3;}
.card-link{font-size:12px; font-weight:600; opacity:0; transition:opacity .15s; white-space:nowrap;}
.card:hover .card-link{opacity:1;}
.funds-section{
  padding:56px 0 100px;
  border-top:1px solid var(--line);
}
.funds-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:36px; flex-wrap:wrap;
}
.count-block--inline{text-align:right;}
.count-num--sm{font-size:40px;}
.empty-state{display:none; text-align:center; padding:70px 0; color:var(--ink-45); font-size:14px;}

/* ---------- FORM PAGE (Pitch Us) ---------- */
.form-page{display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:start;}
.form-copy p{font-size:15.5px; color:var(--ink-70); margin:0 0 18px;}
.form-copy ul{padding-left:18px; margin:0 0 18px; color:var(--ink-70); font-size:14.5px;}
.form-copy li{margin-bottom:8px;}
.fallback-email{font-family:var(--mono); font-size:14px; background:var(--paper-alt); padding:12px 16px; border-radius:4px; display:inline-block; margin-top:6px;}
.fallback-email a{border-bottom:1px solid var(--ink-45);}
.fallback-email a:hover{border-bottom-color:var(--ink);}
.embed-frame-wrap{background:var(--white); border:1px solid var(--line); border-radius:6px; overflow:hidden; min-height:640px;}
.embed-frame-wrap iframe{width:100%; height:640px; border:none; display:block;}
.placeholder-note{
  background:var(--brass-soft); border:1px dashed var(--brass); border-radius:4px;
  padding:16px 18px; font-size:13px; color:var(--ink-70); margin-bottom:20px; font-family:var(--mono);
  line-height:1.6;
}
.placeholder-note strong{color:var(--ink);}

/* ---------- AUDIENCE / PROSE BLOCKS ---------- */
.audience-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:40px;}
.audience-card{background:var(--white); padding:32px 26px;}
.audience-card h3{font-family:var(--display); font-size:19px; margin:0 0 12px;}
.audience-card p{font-size:14px; color:var(--ink-70); margin:0 0 16px;}
.audience-card a{font-size:13px; font-weight:600; border-bottom:1px solid var(--ink);}

/* ---------- NEWSROOM ---------- */
.social-embed-box{background:var(--white); border:1px solid var(--line); border-radius:6px; padding:40px; text-align:center; min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;}
.social-embed-box p{font-size:14px; color:var(--ink-45); max-width:420px; margin:0;}
.press-list{border-top:1px solid var(--line);}
.press-item{display:flex; justify-content:space-between; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--line); gap:20px; flex-wrap:wrap;}
.press-date{font-family:var(--mono); font-size:12px; color:var(--ink-45); white-space:nowrap;}
.press-title{font-family:var(--display); font-size:17px; font-weight:600;}
.press-link{font-size:12.5px; font-weight:600; border-bottom:1px solid var(--ink);}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:60px 0 40px; margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:50px;}
.footer-col h5{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-45); margin:0 0 16px;}
.footer-col a, .footer-col p{display:block; font-size:13.5px; color:var(--ink-70); margin-bottom:10px;}
.footer-col .footer-contact{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px;}
.footer-col .footer-contact a{display:inline-flex; align-items:center; margin-bottom:0;}
.footer-linkedin{
  width:28px; height:28px; justify-content:center;
  color:var(--ink-45); border-radius:4px;
  transition:color .15s, background .15s;
}
.footer-linkedin:hover{color:var(--ink); background:var(--paper-alt);}
.footer-linkedin svg{display:block;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-45); flex-wrap:wrap; gap:10px;}
.site-version{font-family:var(--mono); letter-spacing:.04em;}

/* ---------- MOBILE NAV ---------- */
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:8px;
  flex-direction:column; gap:5px; width:36px; flex-shrink:0;
}
.nav-toggle span{display:block; width:100%; height:2px; background:var(--ink); transition:transform .2s, opacity .2s;}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.active span:nth-child(2){opacity:0;}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  display:none; flex-direction:column; background:var(--paper);
  border-bottom:1px solid var(--line); max-height:0; overflow:hidden;
  transition:max-height .25s ease;
}
.mobile-menu.open{display:flex; max-height:420px;}
.mobile-menu a{padding:16px 22px; font-size:15px; font-weight:500; color:var(--ink-70); border-bottom:1px solid var(--line);}
.mobile-menu a.active{color:var(--ink); font-weight:600;}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .form-page{grid-template-columns:1fr;}
  .team-grid, .audience-grid{grid-template-columns:1fr;}
}
@media (max-width: 880px){
  .wrap{padding:0 22px;}
  .nav-inner{padding:16px 22px;}
  .logo img{height:32px;}
  nav.links{display:none;}
  .nav-toggle{display:flex;}
  .hero-grid{grid-template-columns:1fr; gap:32px;}
  .focus-grid{grid-template-columns:1fr;}
  .about-teaser{grid-template-columns:1fr;}
  .exits-head{padding:0 22px; margin-bottom:18px;}
  .exits-viewport{padding-left:0;}
  .exit-card{flex-basis:min(62vw, 200px);}
  .page-head--media{grid-template-columns:1fr; gap:28px;}
  .page-head-media img{height:220px;}
  .cta-band{grid-template-columns:1fr; text-align:left; padding:44px 28px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .head-row{flex-direction:column; align-items:flex-start; gap:20px;}
  .count-block{text-align:left;}
}
@media (max-width: 560px){
  .grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .cta-band{padding:34px 22px;}
  .count-num{font-size:42px;}
  h1.hero-head{font-size:34px;}
  .hero-actions{flex-direction:column; align-items:stretch;}
  .hero-actions .btn-primary, .hero-actions .btn-ghost{text-align:center;}
  .ticker-panel{padding:22px 20px;}
  section{padding:56px 0;}
  .page-head{padding:52px 0 32px;}
  .exits-band{padding:28px 0 32px;}
  .exit-logo{height:20px;}
  .exit-logo--wide{height:22px;}
  .exit-meta{padding:16px 14px 14px; gap:8px;}
}