/* Second Growth Capital — design system.
   Palette: North Bay earth. Bark, canopy, rust, gold, cream.
   The tokens below are the source of truth; _reference/brand-book.html documents them. */
:root {
  /* Core five (from the approved palette) */
  --bark:#3A2E1E;
  --canopy:#536048;
  --rust:#7A4A3E;
  --gold:#C2952F;
  --cream:#F2E8D4;

  /* Working neutrals derived from the five */
  --paper:#FBF7EF;
  --wash:#EDE2CB;
  --line:#DCCFB4;
  --graphite:#5C4C36;
  /* Darkened from #8C7A5F, which measured 3.88:1 on paper and failed body text.
     #786650 clears 4.5:1 on both paper (5.15) and cream (4.53). */
  --muted:#786650;

  /* Text-safe variants. --gold is a fill colour; on cream it only clears 2.3:1,
     so any gold TEXT on a light background uses --gold-ink (5.1:1). */
  --gold-ink:#7E5A10;
  --canopy-deep:#3E4936;
  --bark-deep:#2A2116;

  --serif:"Fraunces","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1080px;
}
* { box-sizing:border-box; }
/* scroll-padding clears the sticky header when an in-page anchor is hit. */
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { margin:0; font-family:var(--sans); color:var(--bark); background:var(--paper); line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:var(--rust); }
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,44px); }

h1,h2,h3 { font-family:var(--serif); font-weight:400; letter-spacing:-0.012em; line-height:1.1; margin:0; font-variation-settings:"SOFT" 0,"WONK" 0; }
h1 { font-weight:400; font-size:clamp(2.3rem,5.6vw,3.9rem); line-height:1.06; }
h2 { font-size:clamp(1.65rem,3.5vw,2.4rem); }
h3 { font-size:1.28rem; }
p { margin:0 0 1.1rem; }
.eyebrow { font-family:var(--sans); font-size:0.71rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--canopy); margin:0 0 1.1rem; font-weight:600; }
.lede { font-size:clamp(1.08rem,2vw,1.3rem); color:var(--graphite); line-height:1.55; max-width:54ch; }
.muted { color:var(--graphite); }
.fine-print { font-size:0.85rem; color:var(--muted); line-height:1.6; }

/* Header */
.site-header { position:sticky; top:0; z-index:50; background:rgba(251,247,239,0.92); backdrop-filter:saturate(1.3) blur(8px); border-bottom:1px solid var(--line); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; min-height:68px; gap:1rem; }
.brand { display:inline-flex; align-items:center; gap:0.6rem; text-decoration:none; }
.brand .mark { width:30px; height:30px; flex:none; }
.brand .wm { font-family:var(--serif); font-size:1.05rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--bark); white-space:nowrap; }
.brand .wm em { font-style:normal; color:var(--gold-ink); }
.tabs { display:flex; align-items:center; gap:0.3rem; }
.tab { font-size:0.9rem; color:var(--graphite); text-decoration:none; padding:0.5rem 0.9rem; border-radius:100px; position:relative; }
.tab:hover { color:var(--bark); }
.tab.active { color:var(--bark); font-weight:600; }
.tab.active::after { content:""; position:absolute; left:0.9rem; right:0.9rem; bottom:0.15rem; height:2px; background:var(--gold); border-radius:2px; }
.header-cta { margin-left:0.4rem; }

/* Buttons */
.btn { display:inline-block; text-decoration:none; font-family:var(--serif); font-size:1rem; font-weight:500; padding:0.72rem 1.5rem; border-radius:4px; transition:transform 0.12s ease, background 0.15s ease, color 0.15s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--bark); color:var(--cream); }
.btn-primary:hover { background:var(--bark-deep); }
.btn-gold { background:var(--gold); color:var(--bark); }
.btn-gold:hover { background:#b5891f; }
.btn-ghost { background:transparent; color:var(--cream); border:1px solid rgba(242,232,212,0.34); }
.btn-ghost:hover { background:rgba(242,232,212,0.1); }
.btn-outline { background:transparent; color:var(--bark); border:1px solid var(--line); }
.btn-outline:hover { background:var(--wash); }
.btn-sm { padding:0.48rem 1.05rem; font-size:0.9rem; }

/* Hero + bands */
.hero-cream { background:var(--cream); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.hero-cream::after { content:""; position:absolute; right:-10%; top:-40%; width:58%; height:150%; background:radial-gradient(closest-side, rgba(194,149,47,0.18), transparent 70%); pointer-events:none; }
.hero-cream .wrap { position:relative; z-index:1; padding-top:clamp(3.2rem,8vw,6rem); padding-bottom:clamp(3rem,7vw,5rem); }
.hero-cream h1 { max-width:19ch; }
.hero-dark { background:linear-gradient(168deg,#4A3B26,#3A2E1E 58%,#241C12); color:var(--cream); position:relative; overflow:hidden; }
.hero-dark::after { content:""; position:absolute; right:-8%; top:-35%; width:60%; height:140%; background:radial-gradient(closest-side, rgba(194,149,47,0.2), transparent 70%); pointer-events:none; }
.hero-dark .wrap { position:relative; z-index:1; padding-top:clamp(3.2rem,8vw,6rem); padding-bottom:clamp(3rem,7vw,5rem); }
.hero-dark h1 { color:var(--cream); max-width:18ch; }
.hero-dark .eyebrow { color:var(--gold); }
.hero-dark .lede { color:rgba(242,232,212,0.84); }

/* The gold italic signature line under a hero headline. */
.signature { font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,2.4vw,1.6rem); color:var(--gold-ink); margin:0.2rem 0 0; }
.hero-dark .signature { color:var(--gold); }

.section { padding:clamp(3rem,7vw,5rem) 0; }
.section.cream { background:var(--cream); }
.section.wash { background:var(--wash); }
.section.line-top { border-top:1px solid var(--line); }
.band-dark { background:var(--bark); color:var(--cream); padding:clamp(3.2rem,8vw,5.4rem) 0; }
.band-dark h2, .band-dark h3 { color:var(--cream); }
.band-dark .lede { color:rgba(242,232,212,0.82); }
.band-dark .eyebrow { color:var(--gold); }
.band-canopy { background:var(--canopy-deep); color:var(--cream); padding:clamp(3rem,7vw,4.6rem) 0; }
.band-canopy h2 { color:var(--cream); }
.band-canopy .lede { color:rgba(242,232,212,0.82); }
.band-canopy .eyebrow { color:var(--gold); }

/* Layout helpers */
.hero-actions { margin-top:2rem; display:flex; gap:0.9rem; flex-wrap:wrap; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.lead-split { display:grid; grid-template-columns:0.9fr 1.1fr; gap:2.6rem; align-items:start; }
.stack-sm > * + * { margin-top:0.9rem; }

/* Stats — the hero number row */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; margin-top:clamp(2.4rem,6vw,3.6rem); }
.stats.three { grid-template-columns:repeat(3,1fr); }
.stat { border-top:2px solid var(--gold); padding-top:0.9rem; }
.stat .n { font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,3.6vw,2.5rem); color:var(--bark); line-height:1.05; font-variant-numeric:lining-nums tabular-nums; }
.stat .l { font-size:0.86rem; color:var(--graphite); margin-top:0.45rem; line-height:1.45; }
.band-dark .stat .n, .hero-dark .stat .n { color:var(--gold); }
.band-dark .stat .l, .hero-dark .stat .l { color:rgba(242,232,212,0.68); }

/* Cards */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.cards.two { grid-template-columns:repeat(2,1fr); }
.cards.four { grid-template-columns:repeat(4,1fr); }
.card { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:1.6rem 1.5rem; }
.section.cream .card, .section.wash .card { background:var(--paper); }
.card .k { font-family:var(--serif); font-size:0.95rem; color:var(--gold-ink); }
.card h3 { margin:0.5rem 0; color:var(--bark); }
.card p { margin:0; font-size:0.97rem; color:var(--graphite); }

/* Participation cards — the four ways in */
.paths { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
.path { background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:8px; padding:1.7rem 1.5rem; display:flex; flex-direction:column; }
.path.anchor { border-top-color:var(--rust); }
.path > h3 { color:var(--bark); margin-bottom:0.3rem; }
.path .who { font-size:0.97rem; color:var(--graphite); margin:0 0 1.2rem; }
.path h4 { font-family:var(--sans); font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--canopy); margin:0 0 0.55rem; font-weight:600; }
.path ul { margin:0 0 1.3rem; padding-left:1.05rem; font-size:0.94rem; color:var(--graphite); }
.path ul li { margin-bottom:0.35rem; }
.path ul:last-of-type { margin-bottom:0; }

/* Rows / numbered list */
.rows { border-top:1px solid var(--line); }
.row { display:grid; grid-template-columns:44px 1fr; gap:1.4rem; padding:1.5rem 0; border-bottom:1px solid var(--line); align-items:baseline; }
.row .idx { font-family:var(--serif); color:var(--gold-ink); font-size:1.1rem; }
.row h3 { color:var(--bark); margin-bottom:0.3rem; }
.row p { margin:0; color:var(--graphite); font-size:1rem; }

/* Steps */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.step { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:1.4rem 1.2rem; }
.step .num { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--wash); color:var(--gold-ink); font-family:var(--serif); font-size:1rem; margin-bottom:0.8rem; }
.step h3 { font-size:1.06rem; color:var(--bark); margin-bottom:0.35rem; }
.step p { font-size:0.9rem; color:var(--graphite); margin:0; }

/* Spec table — the investment snapshot */
.spec { border-top:1px solid var(--line); }
.spec dl { display:grid; grid-template-columns:minmax(9rem,0.4fr) 1fr; margin:0; }
.spec dt { font-family:var(--sans); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--canopy); font-weight:600; padding:1rem 1rem 1rem 0; border-bottom:1px solid var(--line); }
.spec dd { margin:0; padding:1rem 0; border-bottom:1px solid var(--line); color:var(--graphite); font-size:1rem; }
.spec dd b { color:var(--bark); font-weight:600; }
.band-dark .spec, .band-dark .spec dt, .band-dark .spec dd { border-color:rgba(242,232,212,0.18); }
.band-dark .spec dt { color:var(--gold); }
.band-dark .spec dd { color:rgba(242,232,212,0.86); }
.band-dark .spec dd b { color:var(--cream); }

/* Callout */
.define { border-left:3px solid var(--gold); background:var(--cream); padding:0.95rem 1.2rem; border-radius:0 6px 6px 0; font-size:0.96rem; color:var(--graphite); margin:1.3rem 0; }
.define b { color:var(--bark); }
.section.cream .define { background:var(--paper); }

/* Accordion */
.faq { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { list-style:none; cursor:pointer; padding:1.15rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-family:var(--serif); font-size:1.12rem; color:var(--bark); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--gold-ink); font-family:var(--sans); font-size:1.3rem; line-height:1; }
.faq details[open] summary::after { content:"\2212"; }
.faq details p { color:var(--graphite); font-size:0.98rem; max-width:70ch; padding-bottom:1.2rem; margin:0; }

/* CTA block */
.cta-block { text-align:center; }
.cta-block h2 { max-width:20ch; margin:0 auto 1rem; }
.cta-block .lede { margin:0 auto 1.8rem; }

/* Interest form (on a dark band) */
.interest-form { max-width:36rem; margin:0 auto; display:flex; flex-direction:column; gap:0.8rem; text-align:left; }
.interest-row { display:flex; gap:0.8rem; flex-wrap:wrap; }
.interest-row input { flex:1 1 14rem; }
.interest-form label { font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); font-weight:600; display:block; margin-bottom:0.3rem; }
.interest-form input, .interest-form textarea, .interest-form select {
  font:inherit; font-family:var(--sans); color:var(--cream); background:rgba(242,232,212,0.08);
  border:1px solid rgba(242,232,212,0.3); border-radius:5px;
  padding:0.7rem 0.9rem; width:100%; box-sizing:border-box;
}
.interest-form select option { color:var(--bark); background:var(--cream); }
.interest-form input::placeholder, .interest-form textarea::placeholder { color:rgba(242,232,212,0.5); }
.interest-form input:focus, .interest-form textarea:focus, .interest-form select:focus { outline:2px solid var(--gold); outline-offset:1px; border-color:transparent; }
.interest-form textarea { resize:vertical; }
.interest-form .hero-actions { margin-top:0.4rem; }
.interest-status { min-height:1.2em; margin:0; color:var(--gold); }

/* Footer */
.site-footer { background:var(--bark); color:rgba(242,232,212,0.74); padding:2.6rem 0 2.2rem; font-size:0.9rem; }
.site-footer .top { display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-start; padding-bottom:1.6rem; border-bottom:1px solid rgba(242,232,212,0.14); }
.site-footer .brand .wm { color:var(--cream); }
.site-footer .brand .wm em { color:var(--gold); }
.site-footer nav { display:flex; gap:1.4rem; flex-wrap:wrap; }
.site-footer nav a { color:rgba(242,232,212,0.74); text-decoration:none; }
.site-footer nav a:hover { color:var(--cream); }
.site-footer .fine { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.4rem; color:rgba(242,232,212,0.55); font-size:0.78rem; }
.site-footer .disclosure { padding-top:1.2rem; color:rgba(242,232,212,0.5); font-size:0.75rem; max-width:80ch; line-height:1.6; }

@media (max-width:900px) {
  .stats { grid-template-columns:repeat(2,1fr); }
  .cards.four { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px) {
  .two-col, .lead-split { grid-template-columns:1fr; gap:1.7rem; }
  .cards, .cards.two, .cards.four { grid-template-columns:1fr; }
  .paths { grid-template-columns:1fr; }
  .spec dl { grid-template-columns:1fr; }
  .spec dt { padding-bottom:0.15rem; border-bottom:0; }
  .spec dd { padding-top:0; }
  /* Navigation stays visible on small screens: the brand keeps row one and the
     tabs wrap to row two. Hiding them stranded mobile visitors with no way
     between pages. */
  .site-header .wrap { flex-wrap:wrap; min-height:0; padding-top:0.7rem; padding-bottom:0.35rem; row-gap:0.1rem; }
  .tabs { order:3; width:100%; margin-left:-0.85rem; }
  .tab { font-size:0.88rem; padding:0.45rem 0.85rem; }
  .tab.active::after { left:0.85rem; right:0.85rem; }
}
@media (max-width:520px) {
  .header-cta { display:none; }
  .stats { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  h1 { font-size:clamp(2.05rem,8vw,2.6rem); }
}