{children}

); } function useReveal(threshold = 0.12) { const ref = useRef(null); const [visible, setVisible] = useState(false); useEffect(() => { const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) {setVisible(true);obs.disconnect();} }, { threshold }); if (ref.current) obs.observe(ref.current); return () => obs.disconnect(); }, []); return [ref, visible]; } function scrollToId(id) { const el = document.getElementById(id); if (!el) return; const top = el.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top, behavior: 'smooth' }); } // ─── NAV ───────────────────────────────────────────────────────────────────── function Nav({ onContact }) { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const { isMobile, isTablet } = useViewport(); useEffect(() => { const h = () => setScrolled(window.scrollY > 50); window.addEventListener('scroll', h); return () => window.removeEventListener('scroll', h); }, []); const navItems = [ { label: 'How it Works', id: 'how-it-works' }, { label: 'Why Brivio', id: 'why' }, { label: 'About Us', href: 'about.html' }, { label: 'FAQs', href: 'faq.html' }]; const linkSt = { background: 'none', border: 'none', cursor: 'pointer', padding: 0, color: 'rgba(245,247,249,0.62)', fontSize: 16, fontWeight: 400, letterSpacing: '0.02em', fontFamily: 'inherit', transition: 'color 0.2s', whiteSpace: 'nowrap', textDecoration: 'none' }; const handleNavClick = (id) => { setMenuOpen(false); scrollToId(id); }; return ( ); } // ─── HERO ──────────────────────────────────────────────────────────────────── const HERO_VARIANTS = [ { lines: ['Your auto finance company', 'Our infrastructure'], accent: { line: 0, word: 'Your auto finance company' }, sub: `Brivio Capital gives dealer groups their own auto finance company. You keep the income, the data, and the customer relationship \u2013 without the capital or the build.` }, { lines: ['Keep the finance income', 'you hand to banks'], accent: { line: 0, word: 'finance income' }, sub: `Launch your own auto finance company – the spread, the data, the customer relationship – without the capital or the build.` }, { lines: ['Your name on the loan.', "Not the bank's."], accent: { line: 0, word: 'Your name' }, sub: `Every deal you finance builds your portfolio, your data, your economics – on a platform built and run by people who've operated auto lenders at scale.` }]; function Hero({ variant, onContact }) { const v = HERO_VARIANTS[variant] || HERO_VARIANTS[0]; const [mounted, setMounted] = useState(false); const { isMobile, isTablet } = useViewport(); useEffect(() => {const t = setTimeout(() => setMounted(true), 60);return () => clearTimeout(t);}, [variant]); useEffect(() => {setMounted(false);}, [variant]); function renderLine(line, i) { const { line: aLine, word: aWord } = v.accent; if (i !== aLine) return {line}; const idx = line.indexOf(aWord); if (idx === -1) return {line}; const noPrefix = idx === 0; return ( {line.slice(0, idx)} {aWord} {line.slice(idx + aWord.length)} ); } return (

{/* Grid texture */}

{/* Brass ambient glow */}

{/* Top-right accent line */} {!isMobile &&

} {/* Bridge image – right side */}

{/* Brass/navy duotone wash so the image reads in-palette */}

{/* Left-to-right fade so text remains legible */}

{/* Bottom fade into the section below */}

{v.lines.map(renderLine)}

{v.sub}

{v.sub2 && (

{v.sub2.map((part, i) => part.bold ? {part.text} : {part.text} )}

)}

{!isMobile &&

SCROLL

}

); } // ─── THE REALITY ───────────────────────────────────────────────────────────── const REALITY_CARDS = [ { stat: '1 payment', sub: 'How often you get paid on the loan' }, { stat: '3–5 years', sub: 'How long the lender collects on it' }, { stat: '100%', sub: 'Ownership of customer data' }]; function TheReality() { const [ref, visible] = useReveal(); const [hoveredCard, setHoveredCard] = useState(null); const { isMobile, isTablet } = useViewport(); return (

THE REALITY

Lenders get paid for months, for years You got paid once

{/* Three stat cards */}

{REALITY_CARDS.map((c, i) => { const isActive = hoveredCard !== null ? hoveredCard === i : i === 0; return (

{ if (!isMobile) setHoveredCard(i); }} onMouseLeave={() => { if (!isMobile) setHoveredCard(null); }}>

{c.stat}

{c.sub}

); })}

{/* Calculator CTA band */} e.currentTarget.style.background = 'rgba(185,155,95,0.14)'} onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(185,155,95,0.07)'}> Curious what you're leaving on the table? Calculate it {/* Apply to Partner */}

e.currentTarget.style.background = T.brassLight} onMouseLeave={(e) => e.currentTarget.style.background = T.brass}> Apply to Partner

); } // ─── PORTAL MOCK ─────────────────────────────────────────────────────────── function PortalMock() { const rows = [['Loan balance','$28,340'],['Rate','7.49% APR'],['Payments made','14 of 60']]; return (

{['#2B2F33','#2B2F33','#2B2F33'].map((c,i) => )} summitautofinancial.com/account

S Summit Auto Financial Your brand here

Good morning, Sarah

$487.22

Next payment · July 1, 2026

{rows.map(([label, val]) => (

{label}{val}

))}

); } // ─── HOW IT WORKS ──────────────────────────────────────────────────────────── const STEPS = [ { n: '01', title: 'We look under the hood', body: 'We map your loan volumes, credit mix, and what you’re leaving on the table today.' }, { n: '02', title: 'You set the pricing', body: 'We walk through the economics together and agree on a pricing range that works for both sides.' }, { n: '03', title: 'Agree to terms', body: 'Sign our agreement — and put your name on the loan for the first time.' }, { n: '04', title: 'We get to work', body: 'Your branded portal is built, your F&I team is trained. You don’t lift a finger.' }, { n: '05', title: 'You’re live', body: 'Every funded deal now builds your portfolio, your data, and your economics.' }]; function HowItWorks() { const [ref, visible] = useReveal(); const { isMobile, isTablet } = useViewport(); return (

HOW IT WORKS

Your brand on every loan – in under 90 days

{/* Two-column: steps left, portal right */}

{/* Left: compact steps + callout */}

{STEPS.map((s, i) => { const last = i === STEPS.length - 1; return (

{s.n}

{!last &&

}

{s.title}

{s.body}

); })}

{/* Right: portal mock — hidden on mobile */} {!isMobile && }

{/* Full-width callout below grid */}

The average dealer rooftop routes $30mm in loans annually to banks and credit unions. Every one of those loans is margin and customer data you don’t own. That changes on day one

); } // ─── WHY BRIVIO ────────────────────────────────────────────────────────────── const WHY_CARDS = [ { title: 'You\u2019re not\nour experiment', body: 'Our founders have spent decades in the industry and originated over $75bn across bank, captive, and fintech lending. Cycle-tested through \u201808, COVID, and capital markets dislocations. We\u2019ve run this \u2014 and we\u2019re running it again, for you', link: { label: 'Meet the founders', href: 'about.html' } }, { title: 'This is the only thing we do', body: 'Auto-native from day one. Not a powersports pivot, not a consumer fintech adding cars, not a side project. Full-spectrum credit – new and used, prime through subprime – because that\u2019s how your dealership makes more.' }, { title: 'One partner total accountability', body: 'Licensing, compliance, underwriting, servicing, capital markets. We coordinate the full stack, so you don\u2019t have to. When something needs attention, you call us. We handle it from there.' }]; const WIN_POINTS = [ 'No major capital commitment. Modest setup and subscription fees', 'You bring the loan rooftop. We bring the infrastructure', 'No long-term commitments. We earn your business every month', 'Our economics are tied to yours. We don\u2019t win unless you do']; function WhyBrivio() { const [ref, visible] = useReveal(); const [hoveredCard, setHoveredCard] = useState(null); const { isMobile, isTablet } = useViewport(); return (

WHY BRIVIO

Built for dealers By people who've run auto lenders

{WHY_CARDS.map((c, i) => { const isActive = hoveredCard !== null ? hoveredCard === i : i === 0; return (

{ if (!isMobile) setHoveredCard(i); }} onMouseLeave={() => { if (!isMobile) setHoveredCard(null); }}>

{c.title}

{c.body}

{c.link && {e.currentTarget.style.color = T.brass;e.currentTarget.style.gap = '11px';}} onMouseLeave={(e) => {e.currentTarget.style.color = T.brassDark;e.currentTarget.style.gap = '7px';}}> {c.link.label} }

); })}

{!isMobile &&

We win when you win.

{WIN_POINTS.map((pt, i) =>

{pt}

)}

}

); } // ─── WE WIN WHEN YOU WIN (mobile-only standalone section) ──────────────────── function WinWhenYouWinSection() { const { isMobile } = useViewport(); if (!isMobile) return null; return (

We win when you win

{WIN_POINTS.map((pt, i) =>

{pt}

)}

); } // ─── WHO WE WORK WITH ──────────────────────────────────────────────────────── const ROOFTOPS = [ { label: 'KEEP THE ECONOMICS', title: 'Capture the spread you give away', body: 'Today you earn a one-time fee while outside lenders collect the financing margin for years. Run your own captive program with Brivio and keep the lending economics on every deal.', sub: 'New & used · Prime through subprime' }, { label: 'OWN THE RELATIONSHIP', title: 'Keep your customer and your data', body: 'Lenders see payment behavior, credit trajectory, and trade-in timing on every customer. With a Brivio-powered captive, that data and the ongoing relationship stay with your group.', sub: '100% customer data ownership' }, { label: 'LAUNCH FAST', title: 'A lender of your own, in months', body: 'No $25M+ build and no 12-month timeline. Brivio handles technology, compliance, capital, and servicing end to end, so your group can launch a branded finance program in under 120 days.', sub: '~$15K to start · Under 120 days' }]; function RooftopsWeServe() { const [ref, visible] = useReveal(); const [hoveredCard, setHoveredCard] = useState(null); const { isMobile, isTablet } = useViewport(); return (

WHO WE SERVE

Built for multi-rooftop dealer groups

{ROOFTOPS.map((p, i) => { const isActive = hoveredCard !== null ? hoveredCard === i : i === 0; return (

{ if (!isMobile) setHoveredCard(i); }} onMouseLeave={() => { if (!isMobile) setHoveredCard(null); }}>

{p.label}

{p.title}

{p.body}

{p.sub}

); })}

); } // ─── CALCULATOR TEASER ─────────────────────────────────────────────────────── function CalcTeaser() { const [ref, visible] = useReveal(); const { isMobile, isTablet } = useViewport(); return (

BENEFIT CALCULATOR

See what you're leaving on the table

Lenders can make over $1,000 per loan. Recapture those economics with Brivio Capital. Use our calculator to see your annual upside from a Brivio captive program.

See your dealership's estimated annual upside in under 60 seconds.

e.currentTarget.style.background = T.brassLight} onMouseLeave={(e) => e.currentTarget.style.background = T.brass}> Run the numbers

); } // ─── CONTACT ───────────────────────────────────────────────────────────────── function Contact() { const [ref, visible] = useReveal(); const [form, setForm] = useState({ name: '', email: '', phone: '', company: '', role: '', message: '' }); const [submitted, setSubmitted] = useState(false); const [submitting, setSubmitting] = useState(false); const { isMobile, isTablet } = useViewport(); const inputSt = { width: '100%', height: 52, padding: '0 18px', background: '#FFFFFF', border: `1px solid ${T.cardBorderLight}`, borderRadius: 2, color: T.textOnLight, fontSize: 16, fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box', transition: 'border-color 0.2s' }; const labelSt = { display: 'block', fontSize: 12, fontWeight: 500, letterSpacing: '0.12em', color: T.mutedOnLight, textTransform: 'uppercase', marginBottom: 10 }; const focus = (e) => e.target.style.borderColor = T.brass; const blur = (e) => e.target.style.borderColor = T.cardBorderLight; const handleSubmit = async (e) => { e.preventDefault(); setSubmitting(true); try { const res = await fetch('https://formspree.io/f/xbdbozza', { method: 'POST', headers: { 'Accept': 'application/json' }, body: new FormData(e.target) }); if (res.ok) setSubmitted(true); } catch (_) { setSubmitted(true); } finally { setSubmitting(false); } }; return (

GET IN TOUCH

Let's build something together

Tell us what you're building. We'll come prepared.

{submitted ? (

Thank you. We’ll be in touch within two business days.

) : (

Name setForm({ ...form, name: e.target.value })} onFocus={focus} onBlur={blur} />

Email setForm({ ...form, email: e.target.value })} onFocus={focus} onBlur={blur} />

Phone setForm({ ...form, phone: e.target.value })} onFocus={focus} onBlur={blur} />

Company setForm({ ...form, company: e.target.value })} onFocus={focus} onBlur={blur} />

Role setForm({ ...form, role: e.target.value })} onFocus={focus} onBlur={blur} />

What you're building

setForm({ ...form, message: e.target.value })}
              onFocus={focus} onBlur={blur} />
            
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 14, marginTop: 8 }}>
              <button type="submit" disabled={submitting} style={{ ...btnPrimary, alignSelf: 'flex-start', opacity: submitting ? 0.7 : 1 }}
            onMouseEnter={(e) => e.currentTarget.style.background = T.brassLight}
            onMouseLeave={(e) => e.currentTarget.style.background = T.brass}>
                {submitting ? 'Sending…' : <><span>Send message</span><Arrow /></>}
              </button>
              <p style={{ fontSize: 13, color: T.mutedOnLight, lineHeight: 1.55, margin: 0 }}>
                We'll reach out within two business days to walk through your numbers – no obligation.
              </p>
            </div>
          </form>
        )}
      </div>
    </section>);

}

// ─── FOOTER ──────────────────────────────────────────────────────────────────
function Footer() {
  const { isMobile, isTablet } = useViewport();
  return (
    <footer style={{ padding: isMobile ? '32px 20px' : isTablet ? '40px 32px' : '48px 56px', background: T.navy, borderTop: `1px solid ${T.border}` }}>
      <div style={{
        maxWidth: 1100, margin: '0 auto',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: isMobile ? 14 : 20,
        flexDirection: isMobile ? 'column' : 'row',
        textAlign: isMobile ? 'center' : 'left'
      }}>
        <a href="/" style={{ display: 'flex', alignItems: 'center', textDecoration: 'none', cursor: 'pointer' }}>
          <img src={window.__resources.brivioLockup} alt="Brivio Capital" style={{ height: isMobile ? 40 : 52, opacity: 0.85 }} />
        </a>
        <span style={{ color: T.steel, fontSize: isMobile ? 10 : 11, fontWeight: 300, letterSpacing: '0.18em' }}>
          CAPITAL.  CONNECTION.  MOMENTUM.
        </span>
        <span style={{ color: 'rgba(101,107,114,0.45)', fontSize: isMobile ? 11 : 12 }}>© 2026 Brivio Capital</span>
      </div>
    </footer>);

}

// ─── ABOUT ───────────────────────────────────────────────────────────────────
const FOUNDERS = [
{
  initials: 'AM',
  photo: null,
  name: 'Alex Morgan',
  role: 'Founder & CEO',
  bio: "Alex has spent his career underwriting and scaling auto finance platforms – leading originations at a major OEM captive, a leading consumer fintech, and the auto and remarketing arm of a money-center bank. Across those seats he's been responsible for $25bn+ in originations and relationships with 850+ dealer rooftops, with operating experience through both the '08 cycle and COVID."
},
{
  initials: 'JR',
  photo: null,
  name: 'Jordan Reed',
  role: 'Co-Founder & COO',
  bio: "Jordan has built pricing, analytics, and operations functions for some of the largest auto lenders in the country – auto lending at a consumer fintech, pricing & analytics at a top-five bank, and auto pricing and direct auto operations at a money-center bank. Over 15+ years they've priced roughly $50bn in originations and built multiple lending products from 0 → 1."
}];

function About() {
  const [ref, visible] = useReveal();
  const { isMobile, isTablet } = useViewport();
  return (
    <section id="about" style={{ padding: isMobile ? '80px 20px' : isTablet ? '100px 32px' : '120px 56px', background: T.graphite, borderTop: `1px solid ${T.border}` }}>
      <div ref={ref} style={{
        maxWidth: 1100, margin: '0 auto',
        opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(28px)',
        transition: 'opacity 0.7s ease, transform 0.7s ease'
      }}>
        <Eyebrow>ABOUT US</Eyebrow>
        <h2 style={{
          fontFamily: "'InterDisplay','InterVariable','Inter','Helvetica Neue',Arial,sans-serif",
          fontSize: isMobile ? 32 : 46, fontWeight: 500, letterSpacing: '-0.01em',
          color: T.offwhite, margin: '0 0 16px', lineHeight: 1.15,
          whiteSpace: isMobile ? 'normal' : 'nowrap'
        }}>
          Built by operators who have lived inside auto finance.
        </h2>
        <p style={{ fontSize: 15, color: T.bodyText, lineHeight: 1.65, margin: '0 0 64px' }}>
          Brivio Capital was founded by two operators who together have priced, originated, and scaled tens of billions of dollars in auto loans across the country's largest captive and consumer lenders.
        </p>

<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 40 : 56 }}>
          {FOUNDERS.map((f, i) =>
          <div key={i} style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
              <div style={{
              width: 88, height: 88, flexShrink: 0,
              borderRadius: '50%', overflow: 'hidden',
              background: T.navy, border: `1px solid ${T.border}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center'
            }}>
                {f.photo ?
              <img src={f.photo} alt={f.name} style={{
                width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%'
              }} /> :

<div style={{
                fontFamily: "'InterDisplay','InterVariable','Inter','Helvetica Neue',Arial,sans-serif",
                fontSize: 28, fontWeight: 400, color: T.brass, letterSpacing: '-0.01em'
              }}>
                    {f.initials}
                  </div>
              }
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <h3 style={{
                fontFamily: "'InterDisplay','InterVariable','Inter','Helvetica Neue',Arial,sans-serif",
                fontSize: 18, fontWeight: 500, color: T.offwhite, margin: '0 0 2px', letterSpacing: '-0.005em'
              }}>
                  {f.name}
                </h3>
                <div style={{
                fontSize: 10, fontWeight: 500, letterSpacing: '0.14em', color: T.brass,
                textTransform: 'uppercase', marginBottom: 14
              }}>
                  {f.role}
                </div>
                <p style={{ fontSize: 13.5, color: T.bodyText, lineHeight: 1.7, margin: 0 }}>
                  {f.bio}
                </p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─── PROOF POINTS STRIP ─────────────────────────────────────────────────────
function ProofPoints() {
  const [ref, visible] = useReveal();
  const { isMobile, isTablet } = useViewport();

const stats = [
  { num: '50%+', label: 'Finance Income\nPer Deal' },
  { num: '15%+', label: 'Repeat-Purchase\nLift' },
  { num: '100%', label: 'Customer Data\nOwnership' },
  { num: '<120', label: 'Days\nTo Launch' }];

return (
    <section style={{ background: T.navy, borderTop: `1px solid ${T.border}`, borderBottom: `1px solid ${T.border}` }}>
      <div ref={ref} style={{
        maxWidth: 1100, margin: '0 auto',
        padding: isMobile ? '0 20px' : isTablet ? '0 32px' : '0 56px',
        opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(16px)',
        transition: 'opacity 0.6s ease, transform 0.6s ease',
        display: 'grid',
        gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)'
      }}>
        {stats.map((s, i) =>
        <div key={i} style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          textAlign: 'center',
          padding: isMobile ? '36px 12px' : '44px 24px',
          borderLeft: !isMobile && i > 0 ? `1px solid ${T.border}` :
          isMobile && i % 2 === 1 ? `1px solid ${T.border}` : 'none',
          borderTop: isMobile && i >= 2 ? `1px solid ${T.border}` : 'none'
        }}>
            <div style={{
            fontSize: isMobile ? 34 : 44, fontWeight: 500,
            fontFamily: FONT_DISPLAY, color: T.brass,
            letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 10
          }}>{s.num}</div>
            <div style={{
            fontSize: 10, fontWeight: 500, letterSpacing: '0.13em',
            color: T.steel, textTransform: 'uppercase', lineHeight: 1.65,
            whiteSpace: 'pre-line'
          }}>{s.label}</div>
          </div>
        )}
      </div>
    </section>);

}

Object.assign(window, { Nav, Hero, TheReality, HowItWorks, WhyBrivio, WinWhenYouWinSection, RooftopsWeServe, CalcTeaser, About, Contact, Footer });