/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --primary:   #0891b2;      /* aqua blue */
  --secondary: #0c4a6e;      /* deep ocean blue */
  --accent:    #22d3ee;      /* bright cyan */
  --bg:        #f0f9ff;      /* pale sky blue */
  --surface:   #e0f2fe;      /* light water blue */
  --text:      #0f172a;
  --muted:     #475569;
  --border:    #bae6fd;
  --ring:      #38bdf8;
  --hero-from: #0c4a6e;
  --hero-to:   #0e7490;
  --font-head: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --radius:    0.75rem;
  --shadow:    0 2px 16px 0 rgba(15,23,42,.08);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.65; }
h1,h2,h3,h4 { font-family: var(--font-head); line-height: 1.2; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ============================================================
   NAV
   ============================================================ */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--secondary);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.nav-inner {
  max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.5rem;
  gap: 1rem;
}
.site-logo {
  font-family: var(--font-head); font-weight: 700; font-size: .9rem;
  color: #fff; line-height: 1.3; flex-shrink: 0;
}
.site-logo span { color: var(--accent); font-weight: 900; font-size: 1rem; }
nav { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
nav a {
  color: rgba(255,255,255,.85); font-size: .85rem; font-weight: 600;
  padding: .35rem .5rem; border-radius: .375rem; transition: color .2s, background .2s;
}
nav a:hover { color: #fff; background: rgba(255,255,255,.1); }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section-shell {
  padding: 5rem 1.5rem;
  max-width: 100%;
}
.section-shell > *:not(.split-layout):not(.card-grid):not(.gallery-grid):not(.contact-grid):not(.proof-grid):not(.event-placeholder):not(.roster-notice) {
  max-width: 1080px; margin-left: auto; margin-right: auto;
}
.bg-surface { background: var(--surface); }
.section-label {
  display: inline-block;
  font-family: var(--font-head); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--primary); margin-bottom: .75rem;
  max-width: 1080px; margin-left: auto; margin-right: auto; display: block;
}
h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 900;
  color: var(--secondary); margin-bottom: .75rem;
  max-width: 1080px; margin-left: auto; margin-right: auto; display: block;
}
.section-intro {
  color: var(--muted); max-width: 640px; margin: 0 auto 2.5rem;
  font-size: 1.05rem; display: block;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  display: inline-block;
  background: var(--primary); color: #fff;
  font-family: var(--font-head); font-size: .9rem; font-weight: 700;
  padding: .75rem 1.75rem; border-radius: var(--radius);
  transition: background .2s, transform .15s;
}
.btn-primary:hover { background: #0369a1; transform: translateY(-1px); }
.btn-secondary {
  display: inline-block;
  background: transparent; color: var(--secondary);
  font-family: var(--font-head); font-size: .9rem; font-weight: 700;
  padding: .75rem 1.75rem; border-radius: var(--radius);
  border: 2px solid var(--secondary);
  transition: background .2s, color .2s;
}
.btn-secondary:hover { background: var(--secondary); color: #fff; }

/* ============================================================
   HERO
   ============================================================ */
.hero-section {
  min-height: 88vh; display: flex; align-items: center;
  background: linear-gradient(135deg, var(--hero-from) 0%, #0369a1 50%, var(--hero-to) 100%);
  position: relative; overflow: hidden; padding: 6rem 1.5rem;
}
.hero-content { position: relative; z-index: 2; max-width: 600px; }
.hero-eyebrow {
  font-family: var(--font-head); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1rem;
}
.hero-content h1 {
  font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 900;
  color: #fff; margin-bottom: 1.25rem; display: block; max-width: none;
}
.hero-sub { color: rgba(255,255,255,.82); font-size: 1.1rem; margin-bottom: 2rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-ctas .btn-secondary { color: #fff; border-color: rgba(255,255,255,.6); }
.hero-ctas .btn-secondary:hover { background: rgba(255,255,255,.15); color: #fff; }

.hero-accent-block {
  position: absolute; right: -4rem; top: 50%; transform: translateY(-50%);
  pointer-events: none;
}
.accent-ring {
  width: 420px; height: 420px; border-radius: 50%;
  border: 48px solid rgba(34,211,238,.12);
  position: absolute; top: -210px; right: 0;
}
.accent-ring--sm {
  width: 240px; height: 240px;
  border-width: 28px; border-color: rgba(255,255,255,.06);
  top: -80px; right: 80px;
}

/* ============================================================
   CARD GRID
   ============================================================ */
.card-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 1080px; margin: 0 auto;
}
.card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2rem 1.5rem;
  box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(15,23,42,.11); }
.card-icon { font-size: 2rem; margin-bottom: 1rem; }
.card h3 { font-size: 1.1rem; color: var(--secondary); margin-bottom: .5rem; }
.card p { font-size: .92rem; color: var(--muted); }

/* ============================================================
   SPLIT LAYOUT
   ============================================================ */
.split-layout {
  display: grid; gap: 3rem; align-items: center;
  grid-template-columns: 1fr;
  max-width: 1080px; margin: 0 auto;
}
@media(min-width:768px) { .split-layout { grid-template-columns: 1fr 1fr; } }
.split-text .section-label,
.split-text h2 { margin-left: 0; margin-right: 0; display: block; }
.split-text p { color: var(--muted); margin-bottom: .75rem; }

.visual-card-stack { display: flex; flex-direction: column; gap: 1rem; }
.vis-card {
  border-radius: var(--radius); padding: 1.1rem 1.4rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.vis-card span { font-family: var(--font-head); font-weight: 700; font-size: 1rem; }
.vis-card small { font-size: .82rem; opacity: .8; }
.vis-card--1 { background: linear-gradient(120deg,var(--primary),#0284c7); color: #fff; }
.vis-card--2 { background: linear-gradient(120deg,var(--accent),#06b6d4); color: #0c4a6e; }
.vis-card--3 { background: linear-gradient(120deg,var(--secondary),#0e7490); color: #fff; }

/* ============================================================
   EVENTS PLACEHOLDER
   ============================================================ */
.event-placeholder {
  max-width: 1080px; margin: 0 auto;
  border: 2px dashed var(--border); border-radius: var(--radius);
  background: #fff; padding: 3rem 2rem; text-align: center;
}
.event-icon { font-size: 2.5rem; display: block; margin-bottom: 1rem; }
.event-placeholder-inner p { color: var(--muted); margin-bottom: 1.5rem; line-height: 1.8; }

/* ============================================================
   GALLERY GRID
   ============================================================ */
.gallery-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  max-width: 1080px; margin: 2rem auto 0;
}
.gallery-figure {
  border-radius: var(--radius); min-height: 160px;
  display: flex; align-items: flex-end; padding: 1rem;
  font-family: var(--font-head); font-weight: 700; font-size: .85rem;
  color: #fff; letter-spacing: .04em; text-transform: uppercase;
  overflow: hidden;
}
.gf--warm { background: linear-gradient(135deg,#0891b2,#06b6d4); }
.gf--mid  { background: linear-gradient(135deg,#0369a1,#38bdf8); }
.gf--cool { background: linear-gradient(135deg,#0c4a6e,#0891b2); }
.gf--gold { background: linear-gradient(135deg,#0e7490,#22d3ee); }
.gf--deep { background: linear-gradient(135deg,#164e63,#0c4a6e); }
.gf--rose { background: linear-gradient(135deg,#0284c7,#7dd3fc); }

/* ============================================================
   ROSTER NOTICE
   ============================================================ */
.roster-notice {
  max-width: 560px; margin: 0 auto; text-align: center;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2.5rem 2rem;
  box-shadow: var(--shadow);
}
.roster-notice span { font-size: 2rem; display: block; margin-bottom: 1rem; }
.roster-notice p { color: var(--muted); margin-bottom: 1.5rem; }

/* ============================================================
   PROOF BAND
   ============================================================ */
.proof-band {
  background: linear-gradient(135deg, var(--hero-from) 0%, #0369a1 60%, var(--hero-to) 100%);
  color: #fff;
}
.proof-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-width: 1080px; margin: 0 auto 2rem; text-align: center;
}
.proof-stat { display: flex; flex-direction: column; gap: .35rem; }
.proof-num { font-family: var(--font-head); font-size: 1.7rem; font-weight: 900; color: var(--accent); }
.proof-label { font-size: .85rem; opacity: .85; }
.proof-note {
  text-align: center; font-size: .85rem; opacity: .6;
  max-width: 1080px; margin: 0 auto;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1fr;
  max-width: 1080px; margin: 2rem auto 0;
}
@media(min-width:768px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-info { display: flex; flex-direction: column; gap: 1rem; }
.contact-item { display: flex; flex-direction: column; gap: .2rem; }
.ci-label { font-family: var(--font-head); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.contact-item a { color: var(--secondary); font-weight: 600; word-break: break-all; }
.contact-item a:hover { color: var(--primary); }
.contact-cta-card {
  background: linear-gradient(135deg,var(--secondary),#0e7490);
  color: #fff; border-radius: var(--radius); padding: 2rem 1.75rem;
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
}
.contact-cta-card h3 { font-size: 1.3rem; color: var(--accent); }
.contact-cta-card p { opacity: .88; font-size: .95rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--secondary); color: rgba(255,255,255,.65);
  text-align: center; padding: 1.5rem 1rem; font-size: .82rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:640px) {
  .hero-section { min-height: auto; padding: 5rem 1.25rem 4rem; }
  .accent-ring { display: none; }
  .section-shell { padding: 3.5rem 1.25rem; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

:focus-visible {
  outline: 2px solid var(--ring, var(--primary));
  outline-offset: 3px;
}