/* =========================================
   J.S. YAO SITE THEME (shared by every page)
   Navy #000e35, white + #f7f5ee, basketball orange lines
   ========================================= */
:root {
  --red: #000e35;
  --red-dark: #000620;
  --red-light: #1d3a8a;
  --orange: #e8742a;
  --bg-page: #ffffff;
  --bg-alt: #f7f5ee;
  --bg-card: #f7f5ee;
  --bg-deep: #efece3;
}
body { background: #fff; color: #141416; }

/* Top bar */
.util-bar { background: var(--red); text-align: center; padding: 1.05rem 5%; }
.util-bar a { color: #fff; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; }
@media (max-width: 600px) { .util-bar { padding: 0.9rem 4%; } .util-bar a { font-size: 0.7rem; letter-spacing: 0.08em; } }

/* Menu */
#navbar.nav-split { border-bottom: 2px solid var(--orange); }
#navbar.nav-split .nav-links a { color: #000; }
#navbar.nav-split .nav-links a:hover { color: var(--red); }

/* Orange separation lines */
.themed-section, .site-footer-line { border-top: 3px solid var(--orange); }
footer { background: #f7f5ee; border-top: 3px solid var(--orange); }
footer .footer-logo-img { height: 72px; }
footer .footer-tagline { color: rgba(20,20,22,0.7); font-size: 1.2rem; line-height: 1.5; }
footer .footer-contact-quick { gap: 0.55rem; }
footer .footer-contact-quick a, footer .footer-office { color: rgba(20,20,22,0.75); font-size: 1rem; }
footer .footer-contact-quick a:hover { color: var(--red); }
footer .footer-office { line-height: 1.7; }
footer .footer-bottom { border-top: 1px solid var(--orange); padding-top: 1.2rem; }
footer .footer-bottom p { color: rgba(20,20,22,0.6); font-size: 0.88rem; }

/* Court lines */
.court-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.18; stroke: #000e35; fill: none; }

/* Inner page hero: light, navy text, court lines */
.page-hero { position: relative; overflow: hidden; background: #f7f5ee; text-align: center; padding: 5rem 5%; border-bottom: 3px solid var(--orange); }
.page-hero > *:not(.court-lines) { position: relative; z-index: 1; }
.page-hero .section-label { display: flex; justify-content: center; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); color: #141416; margin-bottom: 1rem; }
.page-hero h1 span { color: var(--red); }
.page-hero p.lead { font-size: 1.05rem; color: rgba(20,20,22,0.7); max-width: 620px; margin: 0 auto 2rem; line-height: 1.8; }
.page-hero .hero-ctas { justify-content: center; }