/* ============================================================
   CATALYST SPORTS VENTURES — site.css
   Self-contained production styles. Brand identity carried from
   the Catalyst design system (navy on paper, Outfit + Playfair,
   the forward-slanted parallelogram mark, thin-line icons).
   ============================================================ */

/* ---- Tokens ---- */
:root{
  --navy-950:#050B1C; --navy-900:#0A1430; --navy-800:#0E1D52; --navy-700:#102366;
  --navy-600:#1B2F84; --navy-500:#2B41A0; --navy-400:#4659B8; --navy-300:#7C8AC9;
  --navy-200:#B2BBDE; --navy-100:#E2E6F2; --navy-050:#F0F2F9;
  --steel-600:#3E4E6E; --steel-500:#5B6E94; --steel-400:#8294B5; --steel-300:#A9B6CE;
  --white:#fff; --paper:#F4F3EE; --gray-50:#FAFAF8; --gray-100:#ECEBE6; --gray-200:#D9D8D2;
  --gray-300:#BFBEB8; --gray-400:#97968F; --gray-500:#6E6D67; --gray-600:#4A4A45;
  --gray-700:#2E2E2A; --ink:#14161C;
  --success:#2E7D5B;

  --font-sans:'Outfit',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --shadow-sm:0 2px 8px rgba(10,20,48,.08);
  --shadow-md:0 8px 24px rgba(10,20,48,.10);
  --shadow-lg:0 20px 48px rgba(10,20,48,.14);
  --shadow-xl:0 32px 72px rgba(10,20,48,.18);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-std:cubic-bezier(.4,0,.2,1);

  --wrap:1240px;
  --gutter:40px;
}

/* ---- Reset / base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--navy-200)}

/* ---- Layout ---- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.section{padding:104px 0}
.section--tight{padding:72px 0}
.section--navy{background:var(--navy-900);color:var(--white)}
.section--deep{background:var(--navy-950);color:var(--white)}
.section--gray{background:var(--gray-50)}
.section--paper{background:var(--paper)}
.divider{height:1px;background:var(--gray-200);border:0;margin:0}

/* ---- Typography ---- */
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:13px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--navy-700);margin:0;
}
.eyebrow::before{content:"";width:34px;height:2px;background:currentColor;opacity:.55;flex:none}
.eyebrow--bare::before{display:none}
.eyebrow--ondark{color:rgba(255,255,255,.66)}
.display{font-family:var(--font-serif);font-weight:400;letter-spacing:-.015em;line-height:1.04}
.display i,.serif-i{font-style:italic}
.h-xl{font-size:clamp(46px,7vw,92px)}
.h-lg{font-size:clamp(38px,5vw,66px)}
.h-md{font-size:clamp(30px,3.4vw,46px)}
.lede{font-size:clamp(19px,2.1vw,24px);line-height:1.55;color:var(--gray-600)}
.section--navy .lede,.section--deep .lede{color:rgba(255,255,255,.7)}
.muted{color:var(--gray-500)}
.mono{font-family:var(--font-mono)}
.measure{max-width:62ch}

/* ---- Buttons ---- */
.btn{
  --bg:var(--navy-700);--fg:#fff;--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding:0 28px;border:1.5px solid var(--bd);border-radius:8px;
  background:var(--bg);color:var(--fg);
  font-size:16px;font-weight:500;letter-spacing:.02em;line-height:1;white-space:nowrap;cursor:pointer;
  transition:background .16s var(--ease-std),transform .12s var(--ease-std),border-color .16s;
}
.btn:hover{background:var(--navy-800)}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px}
.btn--sm{height:44px;padding:0 20px;font-size:15px}
.btn--secondary{--bg:transparent;--fg:var(--navy-700);--bd:var(--navy-700)}
.btn--secondary:hover{background:var(--navy-050)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:transparent}
.btn--ghost:hover{background:var(--gray-100)}
.btn--inverse{--bg:#fff;--fg:var(--navy-800);--bd:transparent}
.btn--inverse:hover{background:rgba(255,255,255,.86)}
.section--navy .btn--secondary,.section--deep .btn--secondary,.hero .btn--secondary{--fg:#fff;--bd:rgba(255,255,255,.6);background:rgba(255,255,255,.12)}
.section--navy .btn--secondary:hover,.section--deep .btn--secondary:hover,.hero .btn--secondary:hover{background:rgba(255,255,255,.22)}

/* ---- Header / nav ---- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(244,243,238,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--gray-200)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:inline-flex;align-items:center;gap:14px}
.brand__mark{width:30px;height:34px;flex:none}
.brand__word{font-size:19px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.nav__links{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0}
.nav__links a{font-size:15.5px;font-weight:500;color:var(--ink);opacity:.82;transition:opacity .15s,color .15s;position:relative;padding:6px 0}
.nav__links a:hover{opacity:1}
.nav__links a[aria-current="page"]{opacity:1;color:var(--navy-700)}
.nav__links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--navy-700)}
.nav__right{display:flex;align-items:center;gap:20px}
.nav__toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--ink)}
.nav__toggle svg{width:24px;height:24px}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;background:var(--navy-900);color:#fff}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.42;mix-blend-mode:luminosity}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(118deg,rgba(8,16,40,.95) 30%,rgba(8,16,40,.5) 100%)}
.hero__inner{position:relative;padding:120px 0 104px}
.hero__title{margin:26px 0 0;color:#fff}
.hero__sub{margin:30px 0 38px;max-width:60ch;color:rgba(255,255,255,.74)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}
.hero--page .hero__inner{padding:96px 0 80px}

/* ---- Stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--gray-200);border:1px solid var(--gray-200);border-radius:14px;overflow:hidden}
.section--navy .stats,.hero .stats{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12)}
.stat{background:var(--paper);padding:30px 28px}
.section--navy .stat,.hero .stat{background:var(--navy-900)}
.section--gray .stat{background:var(--gray-50)}
.stat__num{font-family:var(--font-serif);font-size:clamp(40px,4.4vw,58px);line-height:1;color:var(--navy-700)}
.section--navy .stat__num,.hero .stat__num{color:#fff}
.stat__label{margin-top:10px;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-500)}
.section--navy .stat__label,.hero .stat__label{color:rgba(255,255,255,.6)}

/* ---- Logos strip ---- */
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px 40px}
.logos__item{font-size:16px;font-weight:500;letter-spacing:.04em;color:var(--gray-500);white-space:nowrap}

/* ---- Generic grid ---- */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---- Cards ---- */
.card{background:#fff;border:1px solid var(--gray-200);border-radius:14px;padding:32px;box-shadow:var(--shadow-sm)}
.card--flat{box-shadow:none}
.card--dark{background:var(--navy-900);border-color:rgba(255,255,255,.14);color:#fff}
.card--link{transition:transform .22s var(--ease-std),box-shadow .22s var(--ease-std)}
.card--link:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card__icon{width:46px;height:46px;color:var(--navy-700)}
.card--dark .card__icon{color:var(--navy-300)}
.card__icon svg{width:46px;height:46px;stroke-width:1.6}

/* Audience cards (home) */
.audience{display:flex;flex-direction:column;gap:14px;min-height:280px}
.audience .kicker{font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--navy-600)}
.card--dark .audience .kicker{color:var(--navy-300)}
.audience h3{font-family:var(--font-serif);font-weight:400;font-size:30px;line-height:1.1}
.audience p{color:var(--gray-600);margin-top:auto}
.card--dark .audience p{color:rgba(255,255,255,.7)}

/* Subsidiary card */
.sub{position:relative;display:flex;flex-direction:column;gap:16px;min-height:300px;overflow:hidden}
.sub__tag{font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--navy-600)}
.sub__name{font-size:28px;font-weight:600;letter-spacing:.01em}
.sub__name span{font-weight:400;color:var(--gray-500);font-size:18px;display:block;margin-top:2px;letter-spacing:0}
.sub__desc{color:var(--gray-600)}
.sub__more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--navy-700)}
.sub__more svg{width:16px;height:16px}

/* Principles */
.principle{display:grid;grid-template-columns:84px 1fr;gap:28px;padding:34px 0;border-top:1px solid var(--gray-200)}
.section--navy .principle{border-top-color:rgba(255,255,255,.14)}
.principle__num{font-family:var(--font-mono);font-size:20px;color:var(--navy-400)}
.principle h3{font-size:24px;font-weight:600;margin-bottom:10px}
.principle p{color:var(--gray-600);max-width:64ch}
.section--navy .principle p{color:rgba(255,255,255,.68)}

/* Markets list */
.markets{display:flex;flex-wrap:wrap;gap:12px}
.market{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border:1px solid var(--gray-300);border-radius:999px;font-weight:500}
.section--navy .market,.section--deep .market{border-color:rgba(255,255,255,.22)}
.market--soon{color:var(--gray-500)}
.market .dot{width:7px;height:7px;border-radius:50%;background:var(--navy-500)}
.market--soon .dot{background:var(--gray-400)}

/* Parallelogram motif */
.para-row{display:flex;gap:14px}
.para{width:120px;height:60px;clip-path:polygon(26% 0,100% 0,74% 100%,0 100%)}

/* Pull / quote */
.pull{font-family:var(--font-serif);font-weight:400;font-size:clamp(28px,3.4vw,44px);line-height:1.18;letter-spacing:-.01em}

/* Badge / tag */
.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:5px;background:var(--navy-050);color:var(--navy-700);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

/* ---- Footer ---- */
.footer{background:var(--navy-950);color:rgba(255,255,255,.72)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:80px 0 56px}
.footer__brand .brand__word{color:#fff}
.footer__tag{margin-top:18px;font-family:var(--font-serif);font-style:italic;font-size:20px;color:rgba(255,255,255,.6)}
.footer__blurb{margin-top:16px;max-width:34ch;font-size:15px;color:rgba(255,255,255,.55)}
.footer__mail{margin-top:18px;display:inline-block;font-family:var(--font-mono);font-size:14px;color:rgba(255,255,255,.8);border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px}
.footer h4{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:18px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.footer ul a{font-size:15px;color:rgba(255,255,255,.72);transition:color .15s}
.footer ul a:hover{color:#fff}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;color:rgba(255,255,255,.45)}
.footer__legal{display:flex;gap:22px}

/* ---- Forms (contact) ---- */
.form{display:grid;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:500;color:var(--ink)}
.field .req{color:var(--navy-600)}
.input,.textarea,.select{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1.5px solid var(--gray-300);border-radius:8px;padding:0 15px;height:52px;
  transition:border-color .15s,box-shadow .15s;
}
.textarea{height:auto;padding:14px 15px;resize:vertical;min-height:140px;line-height:1.5}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--navy-500);box-shadow:0 0 0 3px rgba(43,65,160,.18)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* ---- Reveal on scroll (progressive enhancement — visible without JS) ---- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ---- Utilities ---- */
.stack-sm>*+*{margin-top:14px}
.stack>*+*{margin-top:22px}
.center{text-align:center}
.flex{display:flex}
.between{justify-content:space-between}
.items-end{align-items:flex-end}
.items-center{align-items:center}
.gap-sm{gap:14px}
.mt-0{margin-top:0}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}

/* ---- Responsive ---- */
@media (max-width:960px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:40px}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  :root{--gutter:22px}
  .section{padding:72px 0}
  .nav__links,.nav__right .btn{display:none}
  .nav__toggle{display:inline-flex}
  .site-header.is-open .nav__links{
    display:flex;position:absolute;left:0;right:0;top:76px;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--gray-200);padding:8px 22px 18px;
  }
  .site-header.is-open .nav__links a{padding:14px 0;border-bottom:1px solid var(--gray-100);width:100%}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .principle{grid-template-columns:1fr;gap:10px}
}
@media (max-width:480px){
  .stats{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
}