// Bradley Equity — production site, fully responsive
// Forest-dominant, editorial serif, spec-sheet focus.

const V = {
  forest: 'var(--forest-900)',
  cream: 'var(--cream-100)',
  creamSoft: 'var(--cream-50)',
  ink: 'var(--cream-100)',
  inkDark: 'var(--forest-900)',
  rule: 'rgba(255,255,255,0.14)',
  ruleDark: 'color-mix(in oklch, var(--forest-900) 15%, transparent)',
  muted: 'rgba(255,255,255,0.58)',
  mutedDark: 'color-mix(in oklch, var(--forest-900) 55%, transparent)',
};

const LOGO = 'assets/bradley-logo.png';
const LOGO_WHITE_FILTER = 'brightness(0) invert(1)';

const FORMSPREE = {
  contact:  'https://formspree.io/f/mvzdwzrl',
  research: 'https://formspree.io/f/mwvarvbz',
};

// ───────── Responsive hook ─────────
// Returns current breakpoint: 'mobile' (<760), 'tablet' (<1100), 'desktop' (>=1100)
const useBreakpoint = () => {
  const get = () => {
    if (typeof window === 'undefined') return 'desktop';
    const w = window.innerWidth;
    if (w < 760) return 'mobile';
    if (w < 1100) return 'tablet';
    return 'desktop';
  };
  const [bp, setBp] = React.useState(get);
  React.useEffect(() => {
    const onResize = () => setBp(get());
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return bp;
};
const isMobileBP = (bp) => bp === 'mobile';
const isSmallBP = (bp) => bp === 'mobile' || bp === 'tablet';

// Returns PX value: mobile | tablet | desktop. Desktop is the fallback.
const resp = (bp, { mobile, tablet, desktop }) => {
  if (bp === 'mobile' && mobile !== undefined) return mobile;
  if (bp === 'tablet' && tablet !== undefined) return tablet;
  return desktop;
};

// ───────── Nav ─────────
const NAV_HREF = { Home: '#', Firm: '#firm', Strategy: '#strategy', Focus: '#focus', Invest: '#invest' };

const Nav = ({ on = "Home", cream = false }) => {
  const bp = useBreakpoint();
  const mobile = isMobileBP(bp);
  const [open, setOpen] = React.useState(false);
  const ink = cream ? V.inkDark : V.ink;
  const rule = cream ? V.ruleDark : V.rule;

  const pad = resp(bp, { mobile: '16px 20px', tablet: '20px 40px', desktop: '22px 64px' });

  return (
    <nav style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: pad, borderBottom: `1px solid ${rule}`, position: 'sticky', top: 0, zIndex: 50,
      background: cream
        ? 'color-mix(in oklch, var(--cream-100) 92%, transparent)'
        : 'color-mix(in oklch, var(--forest-900) 88%, transparent)',
      backdropFilter: 'saturate(1.2) blur(10px)',
      WebkitBackdropFilter: 'saturate(1.2) blur(10px)',
    }}>
      <a href="#" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
        <img src={LOGO} alt="Bradley Equity"
          style={{ height: mobile ? 40 : 54, width: 'auto', filter: cream ? 'none' : LOGO_WHITE_FILTER }} />
      </a>

      {!mobile && (
        <div style={{ display: 'flex', gap: bp === 'tablet' ? 22 : 36, fontSize: 13, color: ink }}>
          {BE_CONTENT.nav.map(n => (
            <a key={n} href={NAV_HREF[n]} style={{
              color: ink, textDecoration: 'none',
              opacity: n === on ? 1 : .6, fontWeight: n === on ? 500 : 400,
              borderBottom: n === on ? `1px solid ${ink}` : '1px solid transparent', paddingBottom: 3,
            }}>{n}</a>
          ))}
        </div>
      )}

      {!mobile && (
        <a href="#research" style={{
          fontSize: 11, color: ink, border: `1px solid ${rule}`,
          background: cream ? 'transparent' : 'rgba(255,255,255,.06)', textDecoration: 'none',
          padding: '10px 18px', letterSpacing: '.12em', textTransform: 'uppercase',
        }}>Request Research →</a>
      )}

      {mobile && (
        <button aria-label="Menu" onClick={() => setOpen(o => !o)} style={{
          background: 'transparent', border: `1px solid ${rule}`, color: ink,
          width: 40, height: 40, padding: 0, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="18" height="12" viewBox="0 0 18 12" fill="none">
            {open ? (
              <g stroke="currentColor" strokeWidth="1.5">
                <line x1="2" y1="2" x2="16" y2="10" />
                <line x1="16" y1="2" x2="2" y2="10" />
              </g>
            ) : (
              <g stroke="currentColor" strokeWidth="1.5">
                <line x1="0" y1="2" x2="18" y2="2" />
                <line x1="0" y1="6" x2="18" y2="6" />
                <line x1="0" y1="10" x2="18" y2="10" />
              </g>
            )}
          </svg>
        </button>
      )}

      {mobile && open && (
        <div style={{
          position: 'absolute', top: '100%', left: 0, right: 0,
          background: cream ? V.cream : V.forest,
          borderBottom: `1px solid ${rule}`,
          padding: '8px 0',
        }}>
          {BE_CONTENT.nav.map(n => (
            <a key={n} href={NAV_HREF[n]} onClick={() => setOpen(false)} style={{
              display: 'block', padding: '16px 20px', color: ink, textDecoration: 'none',
              fontSize: 15, borderTop: `1px solid ${rule}`, opacity: n === on ? 1 : .7,
            }}>{n}</a>
          ))}
          <a href="#research" onClick={() => setOpen(false)} style={{
            display: 'block', margin: '16px 20px 20px', padding: '14px 18px',
            background: cream ? V.forest : V.cream,
            color: cream ? V.cream : V.forest,
            textDecoration: 'none', fontSize: 11, letterSpacing: '.12em',
            textTransform: 'uppercase', textAlign: 'center',
          }}>Request Research →</a>
        </div>
      )}
    </nav>
  );
};

// ───────── Footer ─────────
const Foot = () => {
  const bp = useBreakpoint();
  const mobile = isMobileBP(bp);
  const small = isSmallBP(bp);
  return (
    <footer style={{
      padding: resp(bp, { mobile: '48px 20px 24px', tablet: '56px 40px 28px', desktop: '72px 64px 32px' }),
      borderTop: `1px solid ${V.rule}`, background: V.forest, color: V.ink,
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : small ? '1fr 1fr' : '1.6fr 1fr 1fr 1fr',
        gap: mobile ? 32 : 48,
      }}>
        <div style={{ gridColumn: small && !mobile ? '1 / -1' : 'auto' }}>
          <img src={LOGO} alt="Bradley Equity"
            style={{ height: mobile ? 56 : 72, width: 'auto', filter: LOGO_WHITE_FILTER, marginBottom: 16 }} />
          <p style={{ fontSize: 13, color: V.muted, maxWidth: 300, lineHeight: 1.6 }}>
            Multifamily private equity. Middle-income communities, Sun Belt markets, disciplined basis.
          </p>
        </div>
        {[
          ["Firm", [["About", "#firm"], ["Strategy", "#strategy"], ["Focus", "#focus"]]],
          ["Capital", [["Invest", "#invest"], ["Request Research", "#research"], ["Submit a Deal", "#invest"]]],
          ["Contact", [["5960 Berkshire Lane", null], ["Dallas, TX 75225", null], ["cole@bradleyequity.com", "mailto:cole@bradleyequity.com"]]],
        ].map(([t, items]) => (
          <div key={t}>
            <div className="eyebrow" style={{ color: V.muted, marginBottom: 14 }}>{t}</div>
            {items.map(([label, href]) => href
              ? <a key={label} href={href} style={{ fontSize: 13, marginBottom: 8, display: 'block', color: V.ink, textDecoration: 'none', opacity: .85 }}>{label}</a>
              : <div key={label} style={{ fontSize: 13, marginBottom: 8, opacity: .85 }}>{label}</div>
            )}
          </div>
        ))}
      </div>
      <div style={{
        display: 'flex', flexDirection: mobile ? 'column' : 'row', gap: mobile ? 8 : 16,
        justifyContent: 'space-between', marginTop: mobile ? 40 : 64, paddingTop: 24,
        borderTop: `1px solid ${V.rule}`, fontSize: 10, color: V.muted, letterSpacing: '.05em',
      }}>
        <span>© 2026 Bradley Equity. All rights reserved.</span>
        <span>This site does not constitute an offer to sell securities.</span>
      </div>
    </footer>
  );
};

const Cap = ({ n, children, light = false }) => {
  const c = light ? 'rgba(0,0,0,.5)' : V.muted;
  return (
    <div style={{ display: 'flex', gap: 14, fontSize: 11, color: c, letterSpacing: '.02em', lineHeight: 1.5 }}>
      <span className="mono">{n}</span>
      <span style={{ borderLeft: `1px solid ${c}`, paddingLeft: 12, opacity: .9 }}>{children}</span>
    </div>
  );
};

// ═════════════════════════ HOME ═════════════════════════
const VHome = () => {
  const bp = useBreakpoint();
  const mobile = isMobileBP(bp);
  const small = isSmallBP(bp);
  const hPad = resp(bp, { mobile: 20, tablet: 40, desktop: 64 });
  return (
    <div className="be" style={{ background: V.forest, color: V.ink, width: '100%' }}>
      <Nav on="Home" />

      {/* Hero */}
      <section style={{
        position: 'relative',
        height: resp(bp, { mobile: 560, tablet: 640, desktop: 720 }),
        overflow: 'hidden',
      }}>
        <img src="https://images.squarespace-cdn.com/content/v1/69d723d6b7f8d94e7b6500fd/1775852179958-B6IQ2X9ENZ45DP6Y1A3D/unsplash-image-njYp4KqjqF8.jpg"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(15,28,22,.35) 0%, rgba(15,28,22,.78) 100%)' }} />
        <div style={{
          position: 'absolute', left: hPad, right: hPad,
          bottom: resp(bp, { mobile: 32, tablet: 48, desktop: 64 }),
          color: V.cream,
        }}>
          <h1 style={{
            fontSize: resp(bp, { mobile: 56, tablet: 80, desktop: 112 }),
            maxWidth: 1100, lineHeight: 1, letterSpacing: '-0.02em', margin: 0,
          }}>
            Value lives<br/>in the <em style={{ fontStyle: 'italic', fontWeight: 300 }}>details.</em>
          </h1>
          <div style={{
            display: 'flex', flexDirection: mobile ? 'column' : 'row',
            justifyContent: 'space-between', alignItems: mobile ? 'flex-start' : 'flex-end',
            marginTop: resp(bp, { mobile: 28, tablet: 44, desktop: 64 }),
            gap: mobile ? 24 : 64,
          }}>
            <p style={{
              fontSize: resp(bp, { mobile: 15, tablet: 17, desktop: 18 }),
              lineHeight: 1.55, maxWidth: 560, opacity: .92, margin: 0,
            }}>
              {BE_CONTENT.hero.body}
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#research" style={{
                background: V.cream, color: V.forest, border: 0,
                padding: '14px 22px', fontSize: 11, letterSpacing: '.12em',
                textTransform: 'uppercase', textDecoration: 'none', whiteSpace: 'nowrap',
              }}>Request Research →</a>
              <a href="#firm" style={{
                background: 'transparent', color: V.cream, border: '1px solid rgba(255,255,255,.5)',
                padding: '14px 22px', fontSize: 11, letterSpacing: '.12em',
                textTransform: 'uppercase', textDecoration: 'none', whiteSpace: 'nowrap',
              }}>The Firm</a>
            </div>
          </div>
        </div>
      </section>

      {/* I · The Firm */}
      <section style={{
        padding: resp(bp, { mobile: `72px ${hPad}px`, tablet: `96px ${hPad}px`, desktop: `140px ${hPad}px` }),
        display: 'grid',
        gridTemplateColumns: small ? '1fr' : '320px 1fr',
        gap: small ? 32 : 96,
      }}>
        <div>
          <div className="eyebrow" style={{ color: V.muted }}>I · The Firm</div>
          <div style={{
            fontSize: 11, color: V.muted,
            marginTop: small ? 16 : 96,
            letterSpacing: '.05em', lineHeight: 1.6, maxWidth: 240,
          }}>
            Founded in 2026<br/>Headquartered in Dallas, Texas
          </div>
        </div>
        <div>
          <h2 style={{
            fontSize: resp(bp, { mobile: 38, tablet: 50, desktop: 64 }),
            lineHeight: 1.05, maxWidth: 900, margin: 0,
          }}>
            Long-term players in a <em style={{ fontStyle: 'italic', fontWeight: 300 }}>long-term game.</em>
          </h2>
          <p style={{
            fontSize: mobile ? 15 : 17, lineHeight: 1.65, opacity: .85,
            marginTop: mobile ? 28 : 48, maxWidth: 720,
          }}>
            Every decision is made with a long-term view. Every investment is grounded in research, data-informed conviction, and a clear thesis — never in momentum, narrative, or consensus.
          </p>
          <p style={{ fontSize: mobile ? 15 : 17, lineHeight: 1.65, opacity: .85, marginTop: 20, maxWidth: 720 }}>
            A disciplined approach, executed with intensity.
          </p>
        </div>
      </section>

      {/* II · Approach pillars */}
      <section style={{ padding: `0 ${hPad}px ${mobile ? 72 : 140}px` }}>
        <div className="eyebrow" style={{ color: V.muted, marginBottom: mobile ? 32 : 56 }}>II · Approach</div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: small ? '1fr' : 'repeat(3, 1fr)',
          gap: small ? 0 : 32,
          borderTop: `1px solid ${V.ink}`,
          paddingTop: 40,
        }}>
          {BE_CONTENT.pillars.map((p, i) => (
            <div key={i} style={{
              paddingRight: small ? 0 : (i < 2 ? 32 : 0),
              borderRight: small ? 0 : (i < 2 ? `1px solid ${V.rule}` : 0),
              borderBottom: small && i < 2 ? `1px solid ${V.rule}` : 0,
              paddingBottom: small ? 32 : 8,
              paddingTop: small && i > 0 ? 32 : 0,
            }}>
              <div className="mono" style={{ fontSize: 12, color: V.muted }}>{p.n} / 03</div>
              <h3 style={{
                fontSize: mobile ? 24 : 30,
                marginTop: mobile ? 28 : 48, lineHeight: 1.15,
              }}>{p.t}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.65, opacity: .8, marginTop: 20 }}>{p.b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* III · Focus */}
      <section style={{
        background: V.cream, color: V.inkDark,
        padding: resp(bp, { mobile: `72px ${hPad}px`, tablet: `96px ${hPad}px`, desktop: `140px ${hPad}px` }),
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: small ? '1fr' : '1fr 1.2fr',
          gap: small ? 32 : 96,
          alignItems: 'flex-start',
        }}>
          <div>
            <div className="eyebrow" style={{ color: V.mutedDark }}>III · Focus</div>
            <h2 style={{
              fontSize: resp(bp, { mobile: 36, tablet: 50, desktop: 64 }),
              marginTop: 24, lineHeight: 1.05, letterSpacing: '-0.02em',
            }}>
              Long-term fundamentals<br/>support the <em style={{ fontStyle: 'italic', fontWeight: 300 }}>middle-income</em> thesis.
            </h2>
            <p style={{ fontSize: 15, lineHeight: 1.7, marginTop: 28, maxWidth: 440, opacity: .75 }}>
              We focus on markets with strong long-term fundamental tailwinds. Our research goes submarket and neighborhood-level deep — supply, demand, demographics, crime, neighborhood data, walkability — and we verify every thesis with a boots-on-the-ground approach.
            </p>
          </div>
          <div>
            <MarketGroup label="Primary focus" items={BE_CONTENT.marketsPrimary} bp={bp} />
            <div style={{ height: mobile ? 32 : 48 }} />
            <MarketGroup label="Secondary focus" items={BE_CONTENT.marketsSecondary} bp={bp} />
          </div>
        </div>
      </section>

      <Foot />
    </div>
  );
};

const MarketGroup = ({ label, items, bp }) => {
  const mobile = isMobileBP(bp);
  return (
    <div>
      <div className="eyebrow" style={{ color: V.mutedDark, marginBottom: 14 }}>{label}</div>
      <div style={{ borderTop: `1px solid ${V.ruleDark}` }}>
        {items.map((m, i) => (
          <div key={i} style={{
            display: 'grid',
            gridTemplateColumns: mobile ? '32px 1fr auto' : '40px 1fr 60px',
            gap: mobile ? 14 : 24,
            alignItems: 'baseline',
            padding: mobile ? '18px 0' : '24px 0',
            borderBottom: `1px solid ${V.ruleDark}`,
          }}>
            <span className="mono" style={{ fontSize: 11, color: V.mutedDark }}>{String(i + 1).padStart(2,'0')}</span>
            <span style={{
              fontFamily: 'var(--serif)',
              fontSize: mobile ? 22 : 30,
              letterSpacing: '-0.01em',
            }}>{m.city}</span>
            <span style={{ fontSize: mobile ? 12 : 13, color: V.mutedDark, textAlign: 'right' }}>{m.state}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// ═════════════════════════ FIRM ═════════════════════════
const VAbout = () => {
  const bp = useBreakpoint();
  const mobile = isMobileBP(bp);
  const small = isSmallBP(bp);
  const hPad = resp(bp, { mobile: 20, tablet: 40, desktop: 64 });
  const t = BE_CONTENT.team[0];

  return (
    <div className="be" style={{ background: V.forest, color: V.ink, width: '100%' }}>
      <Nav on="Firm" />
      <section style={{ padding: `${mobile ? 48 : 80}px ${hPad}px 32px` }}>
        <Cap n="CH. 01">The Firm</Cap>
        <div style={{
          display: 'grid',
          gridTemplateColumns: small ? '1fr' : '1fr 1fr',
          gap: small ? 28 : 40,
          alignItems: 'flex-end',
          marginTop: 24,
        }}>
          <h1 style={{
            fontSize: resp(bp, { mobile: 56, tablet: 80, desktop: 108 }),
            lineHeight: 0.95, letterSpacing: '-0.025em', margin: 0,
          }}>
            Built for <em style={{ fontStyle: 'italic', fontWeight: 300 }}>long</em><br/>compounding.
          </h1>
          <p style={{
            fontSize: mobile ? 15 : 17, lineHeight: 1.7, opacity: .85,
            maxWidth: 500, paddingBottom: small ? 0 : 24, margin: 0,
          }}>
            Bradley Equity was founded on a simple belief: multifamily returns are generated through discipline and execution — market selection, basis, and operational rigor, compounded patiently.
          </p>
        </div>
      </section>

      <section style={{ padding: '40px 0', position: 'relative' }}>
        <img src="https://images.squarespace-cdn.com/content/v1/69d723d6b7f8d94e7b6500fd/1776034142693-S6TG9NJV62D29FXJXF06/unsplash-image-bJhT_8nbUA0.jpg"
          style={{ width: '100%', height: mobile ? 280 : 520, objectFit: 'cover', filter: 'saturate(.85) contrast(1.05)' }} />
      </section>

      <section style={{ padding: `${mobile ? 64 : 120}px ${hPad}px` }}>
        <Cap n="CH. 02">Principles</Cap>
        <div style={{ marginTop: mobile ? 32 : 56 }}>
          {[
            ["Investors first.", "We manage capital as if every dollar were our own. The GP invests personally alongside each investment, with performance economics structured to keep interests aligned."],
            ["Accountability at every level.", "We do what we say. Commitments, timelines, and numbers are tracked and reported — publicly to our LPs, and internally to ourselves."],
            ["Transparency as default.", "We tell investors what went right, own what went wrong, and lay out the specific steps we are taking to correct it. No surprises, no spin."],
            ["Discipline over mania.", "We lean on research, systems, and repeatable process. We respect cycles, remain students of the market, and refuse to let our process decay when conditions get easy."],
            ["Operations as the edge.", "Value is won in the execution. We manage assets with the same intensity we bring to acquisitions — day-one operations, capex sequencing, and the details most overlook."],
          ].map(([title, body], i) => (
            <div key={i} style={{
              display: 'grid',
              gridTemplateColumns: small ? '40px 1fr' : '60px 1fr 1fr',
              gap: small ? 20 : 48,
              padding: mobile ? '28px 0' : '40px 0',
              borderTop: `1px solid ${V.rule}`,
              minHeight: mobile ? 0 : 140,
              alignItems: 'flex-start',
            }}>
              <div className="mono" style={{ fontSize: 11, color: V.muted, paddingTop: 8 }}>{String(i + 1).padStart(2, '0')}</div>
              <h3 style={{ fontSize: mobile ? 22 : 32, lineHeight: 1.15, margin: 0 }}>{title}</h3>
              <p style={{
                fontSize: 15, lineHeight: 1.7, opacity: .78, margin: 0,
                paddingTop: 8,
                gridColumn: small ? '2' : 'auto',
              }}>{body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Founder */}
      <section style={{
        padding: `${mobile ? 64 : 120}px ${hPad}px`,
        background: V.cream, color: V.inkDark,
      }}>
        <Cap n="CH. 03" light>Leadership</Cap>
        <div style={{
          display: 'grid',
          gridTemplateColumns: small ? '1fr' : '1fr 1.3fr',
          gap: small ? 32 : 64,
          marginTop: mobile ? 32 : 48,
          alignItems: 'flex-start',
        }}>
          <div>
            <div style={{
              aspectRatio: '4/5', overflow: 'hidden', background: '#ddd5c4',
              maxWidth: small ? 400 : 'none',
            }}>
              <img src="assets/cole-headshot.jpg" alt={t.name}
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 22%' }} />
            </div>
            <div className="mono" style={{ fontSize: 10, color: 'rgba(0,0,0,.45)', letterSpacing: '.1em', marginTop: 10 }}>PL. II · FOUNDER, DALLAS 2026</div>
          </div>
          <div style={{ paddingTop: small ? 0 : 16 }}>
            <div className="eyebrow" style={{ color: V.mutedDark }}>Founder</div>
            <h2 style={{
              fontSize: resp(bp, { mobile: 44, tablet: 58, desktop: 72 }),
              letterSpacing: '-0.02em', lineHeight: 1, marginTop: 16,
            }}>{t.name}</h2>
            <div style={{ fontSize: 15, color: V.mutedDark, marginTop: 14, letterSpacing: '.02em' }}>{t.role}</div>
            <div style={{ marginTop: mobile ? 28 : 40, maxWidth: 620 }}>
              {t.bio.map((p, i) => (
                <p key={i} style={{
                  fontSize: i === 0 ? (mobile ? 16 : 18) : 15,
                  lineHeight: 1.7, color: V.inkDark, marginBottom: 18, opacity: i === 0 ? 1 : .78,
                }}>{p}</p>
              ))}
            </div>
            <div style={{
              marginTop: 32, paddingTop: 24, borderTop: `1px solid ${V.ruleDark}`,
              display: 'flex', gap: mobile ? 16 : 32, flexWrap: 'wrap',
              fontSize: 13,
            }}>
              <a href="https://www.linkedin.com/in/cole-kenefsky-077859151/" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none', borderBottom: `1px solid ${V.ruleDark}` }}>→ LinkedIn</a>
              <a href="mailto:cole@bradleyequity.com" style={{ color: 'inherit', textDecoration: 'none', borderBottom: `1px solid ${V.ruleDark}` }}>→ cole@bradleyequity.com</a>
            </div>
          </div>
        </div>
      </section>

      <Foot />
    </div>
  );
};

// ═════════════════════════ STRATEGY ═════════════════════════
const VStrategy = () => {
  const bp = useBreakpoint();
  const mobile = isMobileBP(bp);
  const small = isSmallBP(bp);
  const hPad = resp(bp, { mobile: 20, tablet: 40, desktop: 64 });

  return (
    <div className="be" style={{ background: V.cream, color: V.inkDark, width: '100%' }}>
      <Nav on="Strategy" cream />
      <section style={{ padding: `${mobile ? 48 : 80}px ${hPad}px 32px` }}>
        <Cap n="CH. 01" light>Strategy</Cap>
        <h1 style={{
          fontSize: resp(bp, { mobile: 52, tablet: 80, desktop: 108 }),
          marginTop: 28, lineHeight: 0.95, letterSpacing: '-0.025em', maxWidth: 1200, margin: '28px 0 0',
        }}>
          Data. Discipline.<br/><em style={{ fontStyle: 'italic', fontWeight: 300 }}>Intensity.</em><br/>A feedback loop.
        </h1>
      </section>

      <section style={{
        padding: `${mobile ? 48 : 80}px ${hPad}px`,
        display: 'grid',
        gridTemplateColumns: small ? '1fr' : '2fr 1fr',
        gap: small ? 40 : 80,
      }}>
        <div style={{
          columnCount: mobile ? 1 : 2,
          columnGap: 40,
          fontSize: 15, lineHeight: 1.75, opacity: .92,
          color: V.inkDark,
        }}>
          <p style={{
            fontFamily: 'var(--serif)',
            fontSize: mobile ? 19 : 22,
            fontWeight: 300, lineHeight: 1.45, marginBottom: 24, breakInside: 'avoid',
          }}>
            Our investment strategy is a recurring sequence — one that sharpens with every turn.
          </p>
          <p style={{ marginBottom: 16 }}>
            Bradley Equity is built on data, research, and discipline. Every potential acquisition is tested against a structured framework — basis, yield, business plan, submarket fundamentals, demographic trajectory, supply pipeline, and asset-level operating signals — and back-tested against historical outcomes. Deals either clear the framework or they don't.
          </p>
          <p style={{ marginBottom: 16 }}>
            We treat AI as an extension of our research infrastructure — it expands the breadth, depth, and speed of what we can analyze. It compresses diligence timelines, stress-tests assumptions against live comp data, and surfaces operating anomalies that would otherwise go unseen. It is a force multiplier on discipline, not a substitute for judgment.
          </p>
          <p style={{ marginBottom: 16 }}>
            Every transaction we evaluate adds to our dataset. The more we underwrite, the more we learn — and the more informed the next decision becomes. Research feeds discipline, discipline produces conviction, conviction creates better acquisitions, and each acquisition deepens the research. A flywheel.
          </p>
          <p>
            Discipline compounds. The firms that build durable returns for their investors over decades are not the ones with the cleverest trade ideas — they are the ones whose process holds steady.
          </p>
        </div>
        <div style={{
          background: V.forest,
          color: V.ink,
          padding: small ? 28 : 36,
          alignSelf: 'start',
        }}>
          <Cap n="TAB. 01">At a glance</Cap>
          <dl style={{ marginTop: 28 }}>
            {[["Asset class", "Multifamily"], ["Geography", "TX · Carolinas"], ["Strategy", "Value-add · Core+ · Distress"], ["Deal size", "$5M – $75M"], ["Units", "50+"], ["Hold period", "2 – 10+ yrs"]].map(([k, v], i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 0', borderBottom: `1px solid ${V.rule}`, fontSize: 13 }}>
                <dt className="eyebrow" style={{ color: V.muted }}>{k}</dt>
                <dd style={{ fontFamily: 'var(--serif)', fontSize: 17 }}>{v}</dd>
              </div>
            ))}
          </dl>
        </div>
      </section>

      {/* Process */}
      <section style={{ padding: `${mobile ? 48 : 80}px ${hPad}px ${mobile ? 72 : 120}px` }}>
        <Cap n="FIG. 01" light>Investment process</Cap>
        <div style={{
          display: 'grid',
          gridTemplateColumns: small ? '1fr' : 'repeat(4, 1fr)',
          marginTop: 32,
          border: `1px solid ${V.ruleDark}`,
        }}>
          {[
            { n: "I", t: "Research", items: ["25+ submarket filter model", "Supply pipeline tracking", "Rent-gap recovery mapping", "AI-assisted data synthesis"] },
            { n: "II", t: "Sourcing", items: ["Broker relationships", "Direct outreach", "Off-market networks", "Operator referrals"] },
            { n: "III", t: "Underwriting", items: ["Asset-level diligence", "Operating comps", "Basis discipline", "Downside stress-test"] },
            { n: "IV", t: "Execution", items: ["Day-one playbook", "Capex sequencing", "PM alignment", "Quarterly review"] },
          ].map((s, i) => (
            <div key={i} style={{
              padding: mobile ? '28px 22px' : '36px 28px',
              borderRight: small ? 0 : (i < 3 ? `1px solid ${V.ruleDark}` : 0),
              borderBottom: small && i < 3 ? `1px solid ${V.ruleDark}` : 0,
              minHeight: mobile ? 0 : 360,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ fontFamily: 'var(--serif)', fontSize: mobile ? 32 : 40, fontStyle: 'italic', fontWeight: 300 }}>{s.n}.</span>
                <span className="mono" style={{ fontSize: 10, color: V.mutedDark }}>Phase {String(i+1).padStart(2,'0')}</span>
              </div>
              <h3 style={{ fontSize: mobile ? 22 : 28, marginTop: mobile ? 20 : 32 }}>{s.t}</h3>
              <ul style={{ marginTop: 20, padding: 0, listStyle: 'none' }}>
                {s.items.map((it, j) => (
                  <li key={j} style={{ fontSize: 13, opacity: .8, padding: '8px 0', borderTop: `1px solid ${V.ruleDark}` }}>— {it}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>

      {/* Sourcing split */}
      <section style={{ display: 'grid', gridTemplateColumns: small ? '1fr' : '1fr 1fr' }}>
        <div style={{
          padding: `${mobile ? 64 : 120}px ${hPad}px`,
          display: 'flex', flexDirection: 'column', justifyContent: 'center',
          order: small ? 2 : 1,
        }}>
          <Cap n="§" light>How we source</Cap>
          <h2 style={{
            fontSize: resp(bp, { mobile: 34, tablet: 44, desktop: 52 }),
            marginTop: 20, lineHeight: 1.08,
          }}>We underwrite markets from <em style={{ fontStyle: 'italic', fontWeight: 300 }}>first principles</em> — before a single offer is made.</h2>
          <p style={{ fontSize: mobile ? 15 : 16, lineHeight: 1.65, opacity: .85, marginTop: 28, maxWidth: 540 }}>
            When we find the right asset at the right basis, we move with conviction. We don't chase yield by accepting deals that fall outside the thesis. We spend time, gather data, and build a thesis before entering new markets — every decision returns to first principles.
          </p>
        </div>
        <div style={{
          background: `linear-gradient(180deg, rgba(15,28,22,.35), rgba(15,28,22,.55)), url(https://images.unsplash.com/photo-1460317442991-0ec209397118?w=1600&auto=format&fit=crop) center/cover`,
          minHeight: small ? 280 : 640,
          order: small ? 1 : 2,
        }} />
      </section>

      <Foot />
    </div>
  );
};

// ═════════════════════════ FOCUS ═════════════════════════
const VFocus = () => {
  const bp = useBreakpoint();
  const mobile = isMobileBP(bp);
  const small = isSmallBP(bp);
  const hPad = resp(bp, { mobile: 20, tablet: 40, desktop: 64 });

  return (
    <div className="be" style={{ background: V.forest, color: V.ink, width: '100%' }}>
      <Nav on="Focus" />
      <section style={{ padding: `${mobile ? 48 : 80}px ${hPad}px 32px` }}>
        <Cap n="CH. 01">Focus</Cap>
        <h1 style={{
          fontSize: resp(bp, { mobile: 52, tablet: 80, desktop: 108 }),
          margin: '28px 0 0', lineHeight: 0.95, letterSpacing: '-0.025em', maxWidth: 1200,
        }}>
          Where we invest,<br/>and what <em style={{ fontStyle: 'italic', fontWeight: 300 }}>exactly</em><br/>we look for.
        </h1>
      </section>

      {/* Criteria */}
      <section style={{ padding: `${mobile ? 48 : 80}px ${hPad}px` }}>
        <div style={{ border: `1px solid ${V.rule}` }}>
          <div style={{
            padding: mobile ? '14px 20px' : '18px 32px',
            borderBottom: `1px solid ${V.rule}`,
            display: 'flex',
            flexDirection: mobile ? 'column' : 'row',
            gap: mobile ? 4 : 0,
            justifyContent: 'space-between',
          }}>
            <span className="mono" style={{ fontSize: mobile ? 10 : 11, letterSpacing: '.12em' }}>FORM BE-01 · INVESTMENT CRITERIA</span>
            <span className="mono" style={{ fontSize: mobile ? 10 : 11, color: V.muted }}>EFFECTIVE 2026.Q2</span>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: small ? '1fr' : '1fr 1fr',
          }}>
            <div style={{
              padding: mobile ? 24 : 40,
              borderRight: small ? 0 : `1px solid ${V.rule}`,
              borderBottom: small ? `1px solid ${V.rule}` : 0,
            }}>
              <div className="eyebrow" style={{ color: V.muted }}>§ 01 · Submarket</div>
              <ul style={{ padding: 0, listStyle: 'none', marginTop: 24 }}>
                {BE_CONTENT.criteria.submarket.map((s, i) => (
                  <li key={i} style={{
                    display: 'grid', gridTemplateColumns: '32px 1fr', gap: 16,
                    padding: '16px 0', borderTop: `1px solid ${V.rule}`,
                    fontSize: mobile ? 14 : 16, lineHeight: 1.5,
                  }}>
                    <span className="mono" style={{ fontSize: 11, color: V.muted, paddingTop: 4 }}>.{String(i + 1).padStart(2,'0')}</span>
                    <span>{s}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div style={{ padding: mobile ? 24 : 40 }}>
              <div className="eyebrow" style={{ color: V.muted }}>§ 02 · Deal Parameters</div>
              <div style={{ marginTop: 24, borderTop: `1px solid ${V.rule}` }}>
                {BE_CONTENT.criteria.deal.map(([k, v], i) => (
                  <div key={i} style={{
                    display: 'grid',
                    gridTemplateColumns: mobile ? '120px 1fr' : '160px 1fr',
                    gap: 16,
                    padding: '16px 0', borderBottom: `1px solid ${V.rule}`,
                    alignItems: 'baseline',
                  }}>
                    <span className="eyebrow" style={{ color: V.muted, fontSize: 10 }}>{k}</span>
                    <span style={{ fontFamily: 'var(--serif)', fontSize: mobile ? 18 : 22 }}>{v}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Markets */}
      <section style={{
        padding: `${mobile ? 48 : 80}px ${hPad}px ${mobile ? 72 : 120}px`,
        background: V.cream, color: V.inkDark,
      }}>
        <Cap n="TAB. 01" light>Target markets</Cap>
        <div style={{ marginTop: mobile ? 28 : 40 }}>
          <div className="eyebrow" style={{ color: V.mutedDark, marginBottom: 14 }}>Primary focus</div>
          <FocusMarketList items={BE_CONTENT.marketsPrimary} bp={bp} />
          <div style={{ height: mobile ? 40 : 56 }} />
          <div className="eyebrow" style={{ color: V.mutedDark, marginBottom: 14 }}>Secondary focus</div>
          <FocusMarketList items={BE_CONTENT.marketsSecondary} bp={bp} />
        </div>
      </section>

      <Foot />
    </div>
  );
};

const FocusMarketList = ({ items, bp }) => {
  const mobile = isMobileBP(bp);
  const cols = mobile ? '36px 1fr auto' : '80px 1fr 1fr';
  return (
    <div style={{ borderTop: '1px solid rgba(0,0,0,.35)' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: cols, gap: mobile ? 14 : 24,
        padding: '12px 0', borderBottom: `1px solid ${V.ruleDark}`,
        fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase', color: V.mutedDark,
      }}>
        <span>No.</span><span>Market</span><span>State</span>
      </div>
      {items.map((m, i) => (
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: cols, gap: mobile ? 14 : 24,
          padding: mobile ? '20px 0' : '28px 0',
          borderBottom: `1px solid ${V.ruleDark}`, alignItems: 'baseline',
        }}>
          <span className="mono" style={{ fontSize: 11, color: V.mutedDark }}>{String(i+1).padStart(2,'0')}</span>
          <span style={{
            fontFamily: 'var(--serif)',
            fontSize: mobile ? 24 : 36,
            letterSpacing: '-0.01em',
          }}>{m.city}</span>
          <span style={{ fontSize: mobile ? 13 : 15, color: V.mutedDark }}>{m.state}</span>
        </div>
      ))}
    </div>
  );
};

// ═════════════════════════ INVEST ═════════════════════════
const VInvest = () => {
  const bp = useBreakpoint();
  const mobile = isMobileBP(bp);
  const small = isSmallBP(bp);
  const hPad = resp(bp, { mobile: 20, tablet: 40, desktop: 64 });

  return (
    <div className="be" style={{ background: V.cream, color: V.inkDark, width: '100%' }}>
      <Nav on="Invest" cream />
      <section style={{ padding: `${mobile ? 64 : 140}px ${hPad}px 48px` }}>
        <div className="eyebrow" style={{ color: V.mutedDark }}>Invest</div>
        <h1 style={{
          fontSize: resp(bp, { mobile: 52, tablet: 72, desktop: 96 }),
          margin: '28px 0 0', lineHeight: 1, letterSpacing: '-0.02em', maxWidth: 1100,
        }}>
          Two <em style={{ fontStyle: 'italic', fontWeight: 300 }}>conversations</em> we welcome.
        </h1>
      </section>

      <section style={{ padding: `24px ${hPad}px ${mobile ? 72 : 120}px` }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: small ? '1fr' : '1fr 1fr',
          gap: mobile ? 24 : 40,
        }}>
          {[
            { eyebrow: "For Capital Partners",
              title: "If you are exploring the Sun Belt multifamily thesis — we would welcome a conversation.",
              items: ["Family Offices", "Institutional JV", "High-Net-Worth", "Co-GP"],
              cta: "Request an introduction", dark: true,
              href: "mailto:cole@bradleyequity.com?subject=Investor%20Introduction" },
            { eyebrow: "For Brokers",
              title: "If you represent an opportunity that fits our criteria, we read every submission and respond to qualified deals.",
              items: ["$5M–$75M · 50+ units", "1970s vintage and newer", "TX & Carolinas Sun Belt", "Value-add, Core+, or turnaround"],
              cta: "Submit a deal", dark: false,
              href: "mailto:cole@bradleyequity.com?subject=Deal%20Submission" },
          ].map((c, i) => (
            <div key={i} style={{
              background: c.dark ? V.forest : V.creamSoft,
              color: c.dark ? V.ink : V.inkDark,
              padding: mobile ? 32 : 56,
              minHeight: mobile ? 0 : 560,
              display: 'flex', flexDirection: 'column',
              border: c.dark ? 0 : `1px solid ${V.ruleDark}`,
            }}>
              <div className="eyebrow" style={{ color: c.dark ? V.muted : V.mutedDark }}>{c.eyebrow}</div>
              <h2 style={{
                fontSize: mobile ? 22 : 30,
                marginTop: 24,
                lineHeight: 1.25,
                minHeight: mobile ? 0 : 180,
              }}>{c.title}</h2>
              <ul style={{ marginTop: 24, padding: 0, listStyle: 'none', flex: 1 }}>
                {c.items.map((it, j) => (
                  <li key={j} style={{
                    padding: '16px 0',
                    borderTop: `1px solid ${c.dark ? V.rule : V.ruleDark}`,
                    fontSize: 14,
                  }}>— {it}</li>
                ))}
              </ul>
              <a href={c.href} style={{
                marginTop: 28, alignSelf: 'flex-start', textDecoration: 'none',
                background: c.dark ? V.cream : V.forest,
                color: c.dark ? V.forest : V.cream,
                border: 0, padding: '14px 22px', fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase',
              }}>{c.cta} →</a>
            </div>
          ))}
        </div>
      </section>

      <section style={{ padding: `0 ${hPad}px ${mobile ? 72 : 140}px` }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: small ? '1fr' : '320px 1fr',
          gap: small ? 32 : 64,
          borderTop: `1px solid ${V.inkDark}`,
          paddingTop: mobile ? 32 : 48,
        }}>
          <div>
            <div className="eyebrow" style={{ color: V.mutedDark }}>General Inquiry</div>
            <p style={{
              fontSize: 13, color: V.mutedDark,
              marginTop: small ? 16 : 180,
              lineHeight: 1.6,
            }}>
              Bradley Equity<br/>5960 Berkshire Lane<br/>Dallas, TX 75225<br/>cole@bradleyequity.com
            </p>
          </div>
          <form
            action={FORMSPREE.contact}
            method="POST"
            style={{
              display: 'grid',
              gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
              gap: mobile ? 24 : 32,
            }}
          >
            {[["Name", "text", "name"], ["Firm", "text", "firm"], ["Email", "email", "email"], ["Role / Title", "text", "role"]].map(([l, t, n], i) => (
              <label key={i}>
                <div className="eyebrow" style={{ color: V.mutedDark, marginBottom: 10 }}>{l}</div>
                <input type={t} name={n} required={t === 'email'} style={{
                  width: '100%', border: 0, borderBottom: `1px solid ${V.inkDark}`,
                  background: 'transparent', padding: '12px 0',
                  fontSize: mobile ? 16 : 18, fontFamily: 'var(--serif)', color: V.inkDark,
                }} />
              </label>
            ))}
            <label style={{ gridColumn: mobile ? 'auto' : '1 / -1' }}>
              <div className="eyebrow" style={{ color: V.mutedDark, marginBottom: 10 }}>Message</div>
              <textarea rows="4" name="message" style={{
                width: '100%', border: 0, borderBottom: `1px solid ${V.inkDark}`,
                background: 'transparent', padding: '12px 0',
                fontSize: 16, color: V.inkDark, resize: 'none',
              }} />
            </label>
            <button type="submit" style={{
              gridColumn: mobile ? 'auto' : '1 / -1', justifySelf: 'start',
              background: V.forest, color: V.cream, border: 0,
              padding: '16px 28px', fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase',
              cursor: 'pointer',
            }}>Send Inquiry →</button>
          </form>
        </div>
      </section>

      <Foot />
    </div>
  );
};

// ═════════════════════════ RESEARCH REQUEST ═════════════════════════
const VResearch = () => {
  const bp = useBreakpoint();
  const mobile = isMobileBP(bp);
  const small = isSmallBP(bp);
  const hPad = resp(bp, { mobile: 20, tablet: 40, desktop: 64 });

  const rr = BE_CONTENT.researchRequest;
  const col1 = rr.fields.filter(f => f.col === 1);
  const col2 = rr.fields.filter(f => f.col === 2);
  const col3 = rr.fields.filter(f => f.col === 3);

  const Field = ({ f }) => {
    const labelEl = (
      <div className="eyebrow" style={{ color: V.muted, marginBottom: 10, fontSize: 10 }}>
        {f.label}{f.req ? ' *' : ''}
      </div>
    );
    const inputStyle = {
      width: '100%', border: 0, borderBottom: `1px solid ${V.ink}`, background: 'transparent',
      padding: '12px 0', fontSize: mobile ? 16 : 17, fontFamily: 'var(--serif)', color: V.ink, outline: 'none',
    };
    if (f.type === 'textarea') return (
      <label style={{ gridColumn: '1 / -1' }}>
        {labelEl}
        <textarea name={f.id} rows="3" placeholder={f.ph || ''} style={{ ...inputStyle, fontSize: 15, fontFamily: 'var(--sans)', resize: 'none' }} />
      </label>
    );
    if (f.type === 'select') return (
      <label>
        {labelEl}
        <select name={f.id} required={f.req} style={{ ...inputStyle, appearance: 'none', backgroundImage: `linear-gradient(45deg, transparent 50%, ${V.muted} 50%), linear-gradient(-45deg, transparent 50%, ${V.muted} 50%)`, backgroundPosition: `calc(100% - 14px) 22px, calc(100% - 8px) 22px`, backgroundSize: '6px 6px', backgroundRepeat: 'no-repeat' }}>
          <option></option>
          {f.opts.map(o => <option key={o} style={{ color: V.inkDark }}>{o}</option>)}
        </select>
      </label>
    );
    if (f.type === 'checkbox') return (
      <label style={{ gridColumn: '1 / -1', display: 'flex', gap: 14, alignItems: 'flex-start', fontSize: 13, lineHeight: 1.55, opacity: .85, paddingTop: 12, borderTop: `1px solid ${V.rule}` }}>
        <input type="checkbox" name={f.id} style={{ marginTop: 3, accentColor: V.cream }} />
        <span>{f.label}</span>
      </label>
    );
    return (
      <label>
        {labelEl}
        <input type={f.type} name={f.id} required={f.req} style={inputStyle} />
      </label>
    );
  };

  return (
    <div className="be" style={{ background: V.forest, color: V.ink, width: '100%' }}>
      <Nav on="Home" />

      <section style={{ padding: `${mobile ? 48 : 80}px ${hPad}px 32px` }}>
        <Cap n="FORM BE-02">Research Access</Cap>
        <h1 style={{
          fontSize: resp(bp, { mobile: 52, tablet: 72, desktop: 96 }),
          margin: '28px 0 0', lineHeight: 0.98, letterSpacing: '-0.025em', maxWidth: 1100,
        }}>
          Request <em style={{ fontStyle: 'italic', fontWeight: 300 }}>research.</em>
        </h1>
        <p style={{
          fontFamily: 'var(--serif)',
          fontSize: mobile ? 18 : 22,
          fontWeight: 300, lineHeight: 1.5, marginTop: 28, maxWidth: 760, opacity: .88,
        }}>
          {rr.lede}
        </p>
      </section>

      <section style={{ padding: `${mobile ? 36 : 60}px ${hPad}px ${mobile ? 72 : 120}px` }}>
        <div style={{ border: `1px solid ${V.rule}` }}>
          <div style={{
            padding: mobile ? '14px 20px' : '18px 32px',
            borderBottom: `1px solid ${V.rule}`,
            display: 'flex',
            flexDirection: mobile ? 'column' : 'row',
            gap: mobile ? 4 : 0,
            justifyContent: 'space-between',
          }}>
            <span className="mono" style={{ fontSize: mobile ? 10 : 11, letterSpacing: '.12em' }}>FORM BE-02 · RESEARCH ACCESS REQUEST</span>
            <span className="mono" style={{ fontSize: mobile ? 10 : 11, color: V.muted }}>REV. 2026.Q2</span>
          </div>

          <form
            action={FORMSPREE.research}
            method="POST"
            style={{
              padding: mobile ? 24 : 40,
              display: 'grid',
              gridTemplateColumns: small ? '1fr' : '1fr 1fr',
              gap: mobile ? '24px' : '32px 48px',
            }}
          >
            <input type="hidden" name="_subject" value="New Research Request — Bradley Equity" />
            <p hidden><label>Don't fill this: <input name="_gotcha" /></label></p>

            <div>
              <div className="eyebrow" style={{ color: V.muted, marginBottom: 24 }}>§ 01 · About you</div>
              <div style={{ display: 'grid', gap: 24 }}>
                {col1.map(f => <Field key={f.id} f={f} />)}
              </div>
            </div>

            <div>
              <div className="eyebrow" style={{ color: V.muted, marginBottom: 24 }}>§ 02 · Mandate</div>
              <div style={{ display: 'grid', gap: 24 }}>
                {col2.map(f => <Field key={f.id} f={f} />)}
              </div>
            </div>

            <div style={{ gridColumn: small ? 'auto' : '1 / -1' }}>
              {col3.map(f => <Field key={f.id} f={f} />)}
            </div>

            <div style={{
              gridColumn: small ? 'auto' : '1 / -1',
              display: 'flex',
              flexDirection: mobile ? 'column' : 'row',
              gap: mobile ? 20 : 0,
              justifyContent: 'space-between',
              alignItems: mobile ? 'flex-start' : 'center',
              borderTop: `1px solid ${V.rule}`,
              paddingTop: 28,
            }}>
              <p style={{ fontSize: 12, color: V.muted, maxWidth: 480, lineHeight: 1.6, margin: 0 }}>
                Submitting this form does not constitute an offer or solicitation. We review every request personally.
              </p>
              <button type="submit" style={{
                background: V.cream, color: V.forest, border: 0,
                padding: '16px 28px', fontSize: 11, letterSpacing: '.14em',
                textTransform: 'uppercase', fontWeight: 500, cursor: 'pointer',
                whiteSpace: 'nowrap',
              }}>
                Submit Request →
              </button>
            </div>
          </form>
        </div>
      </section>

      <Foot />
    </div>
  );
};

Object.assign(window, { VHome, VAbout, VStrategy, VFocus, VInvest, VResearch });
