/* Go Loud Sports corporate site — ported from the Claude Design mockup "Go Loud Sports.dc.html". */
:root {
  --navy: oklch(30% 0.09 246);
  --navy-deep: oklch(24% 0.05 246);
  --blue-band: oklch(52% 0.095 246);
  --green: oklch(58% 0.15 152);
  --green-hover: oklch(52% 0.14 152);
  --green-bright: oklch(66% 0.17 152);
  --green-kicker: oklch(75% 0.13 152);
  --green-ink: oklch(48% 0.13 152);
  --green-tint: oklch(94% 0.05 152);
  --coral: oklch(72% 0.14 25);
  --page: oklch(97% 0.006 235);
  --ink: oklch(20% 0.02 240);
  --ink-2: oklch(38% 0.02 240);
  --ink-3: oklch(44% 0.02 240);
  --line: oklch(90% 0.012 235);
  --link: oklch(52% 0.16 246);
  --link-hover: oklch(42% 0.15 246);
  --display: 'Big Shoulders Display', sans-serif;
  --heading: 'Manrope', sans-serif;
  --body: 'Public Sans', system-ui, sans-serif;
}

html, body { margin: 0; padding: 0; background: var(--page); }
* { box-sizing: border-box; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
::selection { background: var(--green-tint); }

body {
  font-family: var(--body);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

.wrap { max-width: 1160px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

/* ---- Header ---- */
.site-header { background: var(--navy); position: sticky; top: 0; z-index: 40; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.site-header .wrap { padding-top: 10px; padding-bottom: 10px; min-height: 56px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand svg { flex: none; }
.brand-words { display: flex; align-items: baseline; gap: 6px; }
.brand-go { font-family: var(--display); font-weight: 800; font-size: 27px; letter-spacing: 0.01em; color: #fff; }
.brand-go span { color: var(--green-bright); }
.brand-sports { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; color: var(--coral); }

.site-nav { display: flex; align-items: stretch; gap: 26px; align-self: stretch; margin-bottom: -10px; margin-left: 12px; }
.site-nav a {
  display: flex; align-items: center;
  font-family: var(--heading); font-size: 15px; font-weight: 700;
  color: rgba(255,255,255,0.72);
  padding: 0 2px 8px;
  border-bottom: 4px solid transparent;
}
.site-nav a:hover { color: #fff; }
.site-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--green); }

.header-cta {
  margin-left: auto; display: flex; align-items: center; gap: 9px;
  font-family: var(--heading); font-size: 13.5px; font-weight: 700;
  color: #fff; background: var(--green); border-radius: 8px; padding: 10px 16px;
}
.header-cta:hover { background: var(--green-hover); color: #fff; }
.header-cta small { font-size: 11px; opacity: 0.85; }

/* ---- Buttons ---- */
.btn { display: inline-block; font-family: var(--heading); font-size: 15px; font-weight: 700; border-radius: 9px; padding: 14px 24px; }
.btn-green { color: #fff; background: var(--green); }
.btn-green:hover { background: var(--green-hover); color: #fff; }
.btn-ghost { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,0.5); padding: 13px 22px; }
.btn-ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }
.btn-white { color: var(--navy); background: #fff; font-size: 14.5px; padding: 14px 22px; }
.btn-white:hover { background: oklch(94% 0.02 235); color: var(--navy); }

.kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--green-kicker); }

/* ---- Home ---- */
.hero { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 11px); }
.hero .wrap { padding-top: 74px; padding-bottom: 78px; position: relative; }
.hero .kicker { margin-bottom: 18px; }
.hero h1 { font-family: var(--heading); font-size: clamp(38px, 5.4vw, 64px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.03; margin: 0 0 20px; max-width: 20ch; text-wrap: pretty; }
.hero p { font-size: 17.5px; line-height: 1.55; color: rgba(255,255,255,0.82); margin: 0 0 32px; max-width: 58ch; text-wrap: pretty; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.platform-band { background: var(--blue-band); color: #fff; }
.platform-band .wrap { padding-top: 30px; padding-bottom: 30px; display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.platform-band .copy { flex: 1 1 320px; }
.platform-band .kicker { color: oklch(88% 0.09 152); margin-bottom: 7px; }
.platform-band h2 { font-family: var(--heading); font-size: 24px; font-weight: 800; letter-spacing: -0.018em; line-height: 1.18; margin: 0 0 7px; }
.platform-band p { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.84); margin: 0; max-width: 64ch; text-wrap: pretty; }
.platform-band .btn { flex: 0 0 auto; }

.about-intro { padding-top: 64px; padding-bottom: 8px; }
.about-intro h2 { font-family: var(--heading); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; }
.about-intro > p { font-size: 16px; line-height: 1.6; color: oklch(42% 0.02 240); margin: 0 0 34px; max-width: 66ch; text-wrap: pretty; }

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.pillar-num { width: 34px; height: 34px; border-radius: 8px; background: var(--green-tint); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--green-ink); }
.card h3 { font-family: var(--heading); font-size: 17.5px; font-weight: 800; letter-spacing: -0.012em; margin: 0 0 8px; }
.card p { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); margin: 0; text-wrap: pretty; }

.cta-panel-section { padding-top: 52px; padding-bottom: 72px; }
.cta-panel { background: var(--navy); border-radius: 14px; padding: 38px 34px; color: #fff; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.cta-panel .copy { flex: 1 1 340px; }
.cta-panel h2 { font-family: var(--heading); font-size: 24px; font-weight: 800; letter-spacing: -0.018em; margin: 0 0 8px; text-wrap: pretty; }
.cta-panel p { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.8); margin: 0; max-width: 58ch; text-wrap: pretty; }
.cta-panel .btn { flex: 0 0 auto; font-size: 14.5px; }

/* ---- Inner pages ---- */
.page-hero { background: var(--navy); color: #fff; }
.page-hero .wrap { padding-top: 56px; padding-bottom: 58px; }
.page-hero .kicker { margin-bottom: 14px; }
.page-hero h1 { font-family: var(--heading); font-size: clamp(32px, 4.4vw, 48px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; margin: 0; max-width: 24ch; text-wrap: pretty; }
.page-hero h1.with-lede { margin-bottom: 14px; }
.page-hero p { font-size: 16.5px; line-height: 1.55; color: rgba(255,255,255,0.8); margin: 0; max-width: 54ch; text-wrap: pretty; }

.about-grid { padding-top: 56px; padding-bottom: 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 44px; }
.about-grid h2 { font-family: var(--heading); font-size: 21px; font-weight: 800; letter-spacing: -0.018em; margin: 0 0 12px; }
.about-grid .prose p { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0 0 16px; text-wrap: pretty; }
.about-grid .prose p:last-child { margin-bottom: 0; }
.bullets { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.bullets li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.bullets li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-top: 8px; }
.bullets strong { font-weight: 700; }

.contact-grid { padding-top: 56px; padding-bottom: 80px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.contact-grid .card { padding: 28px; }
.contact-grid .label { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--green-ink); margin-bottom: 14px; }
.contact-grid .big-link { font-family: var(--heading); font-size: 19px; font-weight: 700; letter-spacing: -0.012em; overflow-wrap: break-word; }
.contact-grid .card p { color: oklch(46% 0.02 240); margin-top: 12px; }
.contact-grid address { font-style: normal; font-size: 16px; line-height: 1.65; color: oklch(24% 0.02 240); }

/* ---- Footer ---- */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,0.72); margin-top: auto; }
.site-footer .wrap { padding-top: 34px; padding-bottom: 34px; display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; }
.footer-brand span.wordmark { font-family: var(--display); font-weight: 800; font-size: 20px; color: #fff; }
.footer-brand .g { color: var(--green-bright); }
.footer-brand .c { color: var(--coral); }
.site-footer .col { font-size: 13px; line-height: 1.6; }
.site-footer .col a { color: rgba(255,255,255,0.8); }
.site-footer .col a.platform { color: oklch(80% 0.11 152); }
.site-footer .col a:hover { color: #fff; }

@media (max-width: 640px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .site-header .wrap { gap: 14px 20px; }
  .site-nav { order: 3; width: 100%; margin-left: 0; gap: 22px; }
  .header-cta { padding: 8px 12px; font-size: 12.5px; }
  .hero .wrap { padding-top: 52px; padding-bottom: 56px; }
  .cta-panel { padding: 30px 22px; }
}