/* ========== THEME TOKENS (LIGHT AS DEFAULT) ========== */
:root{
  /* Brand */
  --green-600:#0E9F6E;
  --green-500:#13B87C;
  --green-400:#39C790;
  --yellow-500:#FFD44D;
  --yellow-300:#FFE9A6;
  --yellow-200:#FFF3BF;

  /* Base (light) */
  --bg:#FFFFFF;
  --surface:#FAFDFB;
  --line:#E8F3EE;

  /* Ink (text) */
  --ink-900:#0B2B1F;
  --ink-700:#2B3A33;
  --ink-500:#5C6E66;

  /* Legacy compatibility */
  --green:var(--green-600);
  --green-2:var(--green-500);
  --green-dark:#0B7A54;
  --yellow:var(--yellow-500);
  --soft:var(--ink-700);
  --muted:var(--ink-500);
  --card:#ffffff;
  --ring:rgba(0,0,0,.08);
  --shadow:0 4px 32px rgba(14,159,110,.08);

  --radius-outer:28px; --radius-inner:16px; --gap:22px;

  /* Typography */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-display: "Teko", Impact, Haettenschweiler, "Arial Black", "Segoe UI Black", "Helvetica Neue", Arial, system-ui, sans-serif;
}

/* ========== GLOBAL RESET / BASE ========== */
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{
  font-family: var(--font-ui);
  color: var(--ink-700);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(255,212,77,.10), transparent 60%),
    radial-gradient(1100px 500px at -10% 40%, rgba(14,159,110,.12), transparent 60%),
    var(--bg);
  overflow-x:hidden; letter-spacing:.2px;
}

/* ambient fx (site-wide) */
.wash{position:fixed;inset:-10% -10% auto -10%;height:75vmin;pointer-events:none;filter:blur(55px);opacity:.42;z-index:0;
  background:radial-gradient(circle at 20% 35%, rgba(255,212,77,.35), transparent 50%),
             radial-gradient(circle at 70% 65%, rgba(14,159,110,.35), transparent 50%);
  animation:washMove 12s ease-in-out infinite alternate}
@keyframes washMove{from{transform:translateY(0)}to{transform:translateY(26px)}}
.gridfx{position:fixed;inset:0;pointer-events:none;opacity:.08;z-index:0;
  background:linear-gradient(0deg, rgba(14,159,110,.08) 1px, transparent 1px) 0 0/100% 28px,
             linear-gradient(90deg, rgba(14,159,110,.08) 1px, transparent 1px) 0 0/28px 100%;
  animation:gridScroll 24s linear infinite; mix-blend-mode:multiply}
@keyframes gridScroll{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-28px,-28px,0)}}
.ribbon{height:8px;background:linear-gradient(90deg,var(--green) 0%,var(--yellow) 50%,var(--green) 100%);
  background-size:200% 100%;animation:swipe 7s linear infinite}
@keyframes swipe{0%{background-position:0 0}100%{background-position:200% 0}}

.container{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
section{scroll-margin-top:96px}

/* ========== HEADER ========== */
.site-header{
  --h:80px;
  position:sticky; top:0; z-index:30;
  height:var(--h);
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(1.25) blur(8px);
  border-bottom:1px solid var(--line);
  transition:height .18s ease, background-color .18s ease, border-color .18s ease;
}
.site-header.compact{ --h:64px }
.header-grid{ height:var(--h); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; }

.topMenu{display:flex; gap:18px; align-items:center}
.topMenu a{
  padding:10px 6px; border-radius:8px;
  color:var(--ink-700); text-decoration:none; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
.topMenu a:hover, .topMenu a.active{ color:var(--ink-900); text-decoration:underline; text-underline-offset:4px }

.header-logo img{ height:44px; display:block; transform-origin:center; transition:transform .18s ease, filter .18s ease; }
.site-header.compact .header-logo img{ transform:scale(.88) }

.header-right{display:flex; align-items:center; gap:10px; justify-content:flex-end}
.header-right .burger{display:none}
@media (max-width:900px){
  .topMenu{display:none}
  .header-right .burger{display:flex}
}

/* burger button */
.burger{display:flex;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink-900);border-radius:2px}

/* ---------- Icon-only theme toggle ---------- */
.theme-toggle--icon{
  position: relative;
  width: 44px; height: 44px;
  padding: 0; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: inline-flex; align-items:center; justify-content:center;
}
.theme-toggle--icon input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.theme-toggle--icon .icon{
  width:20px; height:20px; fill: var(--ink-900);
  transition: opacity .18s ease, transform .18s ease, fill .18s ease;
  pointer-events:none; position:absolute;
}
.theme-toggle--icon .sun{ opacity:1; transform:scale(1); }
.theme-toggle--icon .moon{ opacity:0; transform:scale(.92) rotate(-8deg); }
.theme-toggle--icon input:checked ~ .sun{ opacity:0; transform:scale(.92) rotate(8deg); }
.theme-toggle--icon input:checked ~ .moon{ opacity:1; transform:scale(1); }
.theme-dark .theme-toggle--icon{ background:#121515; border-color:#1F2524; }
.theme-dark .theme-toggle--icon .icon{ fill:var(--ink-900); }
.theme-toggle--icon:hover{ box-shadow:0 0 0 4px rgba(19,184,124,.10) inset; }
.theme-toggle--icon:has(input:focus-visible){ outline:2px solid var(--yellow-500); outline-offset:2px; }

/* ========== HERO (video kept) ========== */
.hero{position:relative; min-height:100vh; display:grid; place-items:center; padding:64px 0 48px; overflow:hidden}
.hero .video-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#091310; }
.hero .video-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(80vmax 40vmax at 20% -10%, rgba(255,212,77,.15), transparent 50%),
    linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.80) 100%);
  pointer-events:none;
}
.hero video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.06);opacity:0;transition:opacity .8s ease}
.hero .video-ready video{opacity:1}
.hero-inner{position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
@media (max-width:980px){.hero-inner{grid-template-columns:1fr}}

.hero-title{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 1000;
  letter-spacing: .045em;
  line-height: .88;
  font-size: clamp(68px, 10.5vw, 170px);
  background: linear-gradient(90deg, #16b77f 0%, #eafef6 42%, var(--yellow-500) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px rgba(0,0,0,.15);
  text-shadow: 0 18px 48px rgba(0,0,0,.55), 0 3px 0 rgba(0,0,0,.30);
  margin: 0 0 18px;
}
.hero .lead{
  font-family: var(--font-ui);
  font-style: italic; font-weight: 700;
  font-size: clamp(20px, 2.6vw, 30px);
  color: #dbfff1; letter-spacing: .3px;
  text-shadow: 0 10px 28px rgba(0,0,0,.35);
  margin-bottom: 24px;
}

/* Buttons */
.btns{ display:flex; gap:14px; margin-top:14px; }
.btn,
.btn:link,
.btn:visited{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 18px; border-radius:14px;
  font-weight:800; letter-spacing:.6px;
  text-decoration:none;
  border:1px solid rgba(19,184,124,.25);
  background:rgba(19,184,124,.08);
  color:var(--green-600);
  box-shadow:inset 0 0 18px rgba(19,184,124,.08);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover{ background:rgba(19,184,124,.14); transform:translateY(-1px); }
.btn.primary,
.btn.primary:link,
.btn.primary:visited{
  background:linear-gradient(180deg,var(--green-600),var(--green-dark));
  color:#fff;
  border-color:rgba(19,184,124,.45);
  box-shadow:0 18px 44px rgba(14,159,110,.24), inset 0 0 24px rgba(19,184,124,.18);
}
.btn.primary:hover{ filter:saturate(1.02) brightness(1.02); transform:translateY(-1px); }

/* unified section titles */
.section-title{
  margin:40px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(36px,5vw,70px); font-weight:900; font-style:italic;
  color: var(--ink-900); text-transform:uppercase; letter-spacing:.02em;
  text-shadow:none;
}

/* band (kept for potential use) */
.band{margin-top:44px;background:linear-gradient(120deg, rgba(14,159,110,.18), rgba(255,212,77,.16));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band .inner{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:72px 0}
.band h2{font-size:clamp(28px,3vw,42px);margin:0 0 6px;color:var(--ink-900)}
.band p{font-size:clamp(18px,2vw,22px);color:var(--ink-700)}
@media (max-width:980px){.band .inner{grid-template-columns:1fr}}

.card{background:var(--card);color:var(--ink-900);border-radius:var(--radius-outer);box-shadow:var(--shadow);border:1px solid var(--ring);overflow:hidden}
.content{padding:18px;color:var(--ink-700)}
.meta{font-size:14px;color:var(--ink-500)}
.chip{display:inline-block;background:var(--yellow-500);color:#0b1220;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900}

/* ABOUT */
/* Standalone Location block */
.about-location-full {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 4rem;       /* space above it so it feels like its own section */
  margin-bottom: 4rem;    /* space below */
}

.about-location-inner {
  max-width: 600px;       /* keep it readable, not full 1200px wide */
  text-align: center;     /* center title + address text */
}

.about-location-inner .about-title {
  margin-bottom: 0.5rem;
}

.about-location-address {
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 1.5rem;
  color: var(--ink-700, #2b3a33);
  font-weight: 500;
}

/* The map itself */
.map-embed {
  width: 100%;
  max-width: 600px;         /* same width as text */
  margin-inline: auto;
  border-radius: 12px;      /* just in case iframe style gets overridden */
  overflow: hidden;         /* hide rounded corners cleanly */
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.about-section{display:flex;flex-direction:column;gap:48px}
.about-block{ display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center; }
.about-block.flip .media{order:2}
.about-block.flip .copy{order:1}
@media (max-width:980px){
  .about-block{grid-template-columns:1fr}
  .about-block.flip .media,.about-block.flip .copy{order:initial}
}
.about-block .media{position:relative}
.about-block .media img{
  width:100%;height:100%;max-height:520px;object-fit:cover;border-radius:24px;display:block;
  box-shadow:0 16px 40px rgba(0,0,0,.25);
}
.media .tag{
  position:absolute;left:16px;bottom:16px;background:var(--yellow-500);color:#0b1220;
  font-weight:900;border-radius:999px;padding:8px 12px;font-size:12px;letter-spacing:.02em
}
.about-title{
  font-family: var(--font-display);
  font-size:clamp(32px,3.6vw,44px);
  font-weight:1000; text-transform:uppercase; line-height:1.1; color:var(--ink-900);
  text-shadow:none; margin:0 0 12px;
}
.about-copy{color:var(--ink-700); font-size:clamp(16px,2vw,18px)}
.about-copy ul{margin:10px 0 0; padding-left:20px; line-height:1.65}
.about-copy li{margin:4px 0}
/* Centered Location block */
.about-location-full {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.about-location-inner {
  max-width: 600px;
  width: 100%;
  text-align: center;
}

.about-location-inner .about-title {
  margin-bottom: 0.75rem;
}

.about-location-address {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  color: var(--ink-700, #2b3a33);
  font-weight: 500;
}

.map-embed {
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  border-radius: 12px;
  overflow: hidden;
}

.map-embed iframe {
  width: 100%;
  display: block;
}

/* ORG (yellow section) */
.org-tree{position:relative;margin-top:18px}
.branch{position:relative;margin-bottom:36px}
.branch-header{display:flex;flex-direction:column;align-items:center;gap:10px}
.person{background:var(--card);color:var(--ink-900);border-radius:18px;border:1px solid var(--ring);padding:16px;text-align:center;box-shadow:0 12px 32px rgba(0,0,0,.06);min-width:220px}
.avatar{width:108px;height:108px;border-radius:50%;margin:8px auto;border:4px solid var(--yellow-500);background:#123;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.role{font-weight:900;margin-top:8px}
.small{color:var(--ink-500);font-size:13px}
.branch-children{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:24px;position:relative;padding-top:24px}
.branch-children::before{content:"";position:absolute;top:0;left:50%;width:2px;height:24px;background:#d1d5db;transform:translateX(-50%)}
.branch-children .person{position:relative}
.branch-children .person::before{content:"";position:absolute;top:-24px;left:50%;width:2px;height:24px;background:#d1d5db;transform:translateX(-50%)}

/* ORG full-bleed wrapper */
.orgp-bleed { background: var(--yellow-500); padding: 40px 0 100px; margin: 0; }
.orgp-wrap { background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.55)); border: 1px solid rgba(0,0,0,.06); border-radius: 18px; padding: clamp(14px,2.4vw,22px); box-shadow: 0 14px 40px rgba(0,0,0,.14); }
.orgp-row { display: flex; justify-content: center; align-items: stretch; gap: 18px; flex-wrap: wrap; padding: 12px 0; }
.orgp-row-1 .orgp-card { min-width: min(820px,100%); }
.orgp-row-2 .orgp-card { min-width: min(680px,100%); }
.orgp-row-3 .orgp-card { flex: 1 1 260px; min-width: 260px; min-height: 120px; }
.orgp-row-4 .orgp-card { min-width: min(520px,100%); }
.orgp-card { --r: 16px; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 16px 20px; background: #fff; color: #0b1220; border-radius: var(--r); border: 2px solid rgba(11,18,32,.10); box-shadow: 0 10px 24px rgba(0,0,0,.14); font-weight: 700; }
.orgp-name { text-transform: uppercase; letter-spacing: .02em; line-height: 1.12; font-weight: 1000; }
.orgp-role { font-size: 12px; letter-spacing: .18em; opacity: .8; }
.orgp-chair { border-color: #ef5a7b; }
.orgp-gm { border-color: #5e6e8c; }
.orgp-asst { border-color: #44c5a7; }
@media (max-width: 980px) {
  .orgp-row-1 .orgp-card, .orgp-row-2 .orgp-card, .orgp-row-4 .orgp-card { min-width: 100%; }
  .orgp-row-3 .orgp-card { min-height: 120px; }
}
/* ===== TEAM RELATIONS (Vertical Cards) ===== */
.teams-bleed {
  background: var(--yellow-500);
  padding: 60px 0 100px;
  border-top: 1px solid rgba(0,0,0,.04);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.team-card {
  background: #fff;
  border-radius: 24px;
  border: 2px solid rgba(11,18,32,.10);
  box-shadow: 0 14px 40px rgba(0,0,0,.14);
  overflow: hidden;
  margin: 0 auto 48px;
  max-width: 880px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}

.team-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}

.team-image {
  width: 100%;
  height: clamp(380px, 55vw, 520px);
  overflow: hidden;
}

.team-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.team-card:hover img {
  transform: scale(1.03);
}

.team-text {
  padding: clamp(24px, 4vw, 36px);
  color: var(--ink-700);
}

.team-name {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 1000;
  text-transform: uppercase;
  color: var(--ink-900);
  margin: 0 0 18px;
}

.team-text p {
  font-family: var(--font-ui);
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto 14px;
}
/* Ensure readable dark text inside yellow background */
.teams-bleed, 
.teams-bleed .team-card, 
.teams-bleed .team-text, 
.teams-bleed .team-name {
  color: #0b1220 !important;
}

.teams-bleed .team-text p {
  color: #2b3a33 !important;
}
/* ===== Team social logo styling ===== */
.team-social {
  font-weight: 900;
  text-transform: uppercase;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: #0b1220;
}

.social-link {
  display: inline-block;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.social-link:hover {
  transform: scale(1.08);
  opacity: 0.85;
}

.social-logo {
  width: 70px;
  height: 80px;
  object-fit: contain;
  border-radius: 25px;
}



/* PINNED rails (kept styles; not used in this page sections) */
.pin{position:relative;width:100%}
.pin .pin-inner{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-start;
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(255,212,77,.08), transparent 60%),
    radial-gradient(1100px 500px at 0% 40%, rgba(14,159,110,.10), transparent 60%),
    var(--bg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.pin .titlebar{padding:24px clamp(16px,5vw,40px) 10px; position:relative; z-index:1}
.pin .rail{flex:1; display:flex; align-items:center; overflow:hidden; position:relative; z-index:1}
.pin .video-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#0b1311; }
.pin .video-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(80vmax 40vmax at 80% -10%, rgba(14,159,110,.18), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.65) 85%);
  pointer-events:none;
}
.pin .video-bg video{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.05) contrast(1.06);
  opacity:0; transition:opacity .8s ease;
}
.pin .video-ready video{opacity:1}

/* Highlights (scoped) */
#showcase { margin: 48px auto 8px; }
.hl-marquee {
  overflow: hidden; position: relative; padding: 6px 0 18px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
}
.hl-track { display: flex; align-items: center; gap: 14px; will-change: transform; transform: translate3d(0,0,0); }
.hl-item { margin: 0; width: clamp(260px, 30vw, 420px); flex: 0 0 auto; border-radius: 22px; overflow: hidden;
           box-shadow: 0 14px 35px rgba(0,0,0,.35); border: 2px solid rgba(0,0,0,.06); background: #123; }
.hl-item img { display: block; width: 100%; height: clamp(200px, 28vw, 300px); object-fit: cover; transition: transform .4s ease; }
.hl-item img:hover { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .hl-track { transition: none !important; } }

/* EVENTS (scoped) */
#events { position: relative; }
#events .events-hero{ position: relative; min-height: 66vh; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
@media (max-width: 980px){ #events .events-hero{ min-height: 56vh; } }
@media (max-width: 640px){ #events .events-hero{ min-height: 48vh; } }
#events .video-bg{ position:absolute; inset:0; overflow:hidden; background:#0b1311; }
#events .video-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(90vmax 48vmax at 80% -10%, rgba(14,159,110,.20), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.68) 88%);
  pointer-events:none;
}
/* ===============================
   EVENTS PAGE STYLING — CLEAN VERSION
   =============================== */

/* Page Header */
.events-page-head {
  text-align: center;
  margin-top: 100px;
  margin-bottom: 40px;
}
.events-page-title {
  font-family: var(--font-display);
  font-weight: 1000;
  font-size: clamp(36px, 5vw, 56px);
  color: var(--ink-900);
  text-transform: uppercase;
}

/* Events Grid */
.events-page-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  padding: 20px 0 80px;
}

.events-gallery.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 60px;
  width: 100%;
}

/* ===============================
   EVENT CARD
   =============================== */
.event-card {
  background: var(--green-900, #00241a); /* Dark green tone */
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px 40px;
  text-align: center;
  position: relative;
  z-index: 1;
  color: #ffffff; /* White text in light mode */
  max-width: 400px;
  flex: 1 1 350px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.75);
}

/* Poster */
.event-poster {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.event-poster img {
  width: 100%;
  max-width: 260px;          /* Adjust this for poster size */
  aspect-ratio: 3 / 4;       /* A4 shape */
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.7);
  display: block;
  transition: transform 0.35s ease;
}
.event-card:hover .event-poster img {
  transform: scale(1.03);
}

/* ===============================
   DETAILS BOX
   =============================== */
.event-details-box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  padding: 24px 20px 28px;
  width: 100%;
  max-width: 360px;
  text-align: left;
  color: #ffffff;
}

/* Title */
.event-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.2;
  font-size: clamp(20px, 1.8vw, 24px);
  margin: 0 0 16px;
  text-shadow: 0 20px 40px rgba(0, 0, 0, 0.9);
}

/* Event Info List */
.event-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.event-meta li {
  margin-bottom: 6px;
}
.event-meta .label {
  font-weight: 700;
  margin-right: 4px;
  color: #ffffff;
}

/* ===============================
   REGISTER BUTTON
   =============================== */
.event-register {
  margin-top: 24px;
  text-align: center;
}
.register-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-decoration: none;
  border: 1px solid rgba(19, 184, 124, 0.45);
  background: linear-gradient(180deg, var(--green-600), var(--green-dark));
  color: #fff;
  box-shadow: 0 18px 44px rgba(14, 159, 110, 0.24),
              inset 0 0 24px rgba(19, 184, 124, 0.18);
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.2;
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.register-btn:hover,
.register-btn:focus-visible {
  filter: saturate(1.05) brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 22px 50px rgba(14, 159, 110, 0.32),
              inset 0 0 24px rgba(19, 184, 124, 0.22);
  outline: none;
}
.theme-dark .register-btn {
  color: #fff;
}

.event-register {
  margin-top: 20px;
  text-align: center;
}

.register-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .6px;
  text-decoration: none;
  border: 1px solid rgba(19,184,124,.45);
  background: linear-gradient(180deg, var(--green-600), var(--green-dark));
  color: #fff;
  box-shadow: 0 18px 44px rgba(14,159,110,.24),
              inset 0 0 24px rgba(19,184,124,.18);
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.2;
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}

.register-btn:hover,
.register-btn:focus-visible {
  filter: saturate(1.05) brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 22px 50px rgba(14,159,110,.32),
              inset 0 0 24px rgba(19,184,124,.22);
  outline: none;
}


/* dark mode keeps same button (it's already high contrast) */
.theme-dark .register-btn {
  color:#fff;
}

/* DARK MODE OVERRIDES for events page */
.theme-dark .events-page-title {
  color:#fff;
}
.theme-dark .events-page-intro {
  color: var(--ink-700); /* this is already light in dark mode */
}

.theme-dark .event-card {
  color:#fff;
}
.theme-dark .event-headline {
  color:#fff;
  text-shadow:0 20px 60px rgba(0,0,0,.8);
}
.theme-dark .event-poster {
  border-color:#1F2524;
  box-shadow:0 20px 60px rgba(0,0,0,.9);
  background:#000;
}
.theme-dark .event-cta {
  /* keep peach button in dark mode, it's high contrast already */
  box-shadow:0 20px 44px rgba(0,0,0,.8);
  border-color:rgba(0,0,0,.7);
}
.theme-dark .event-cta span {
  border-bottom:1px solid rgba(0,0,0,.7);
}


#events .video-bg video{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.06); opacity:0; transition:opacity .8s ease; }
#events .video-ready video{ opacity:1; }
#events .events-hero-inner{ position: relative; z-index: 1; text-align:center; padding: 40px 24px 28px; }
#events .events-title{ margin:0; font-family: var(--font-display); font-size: clamp(52px, 9vw, 128px); text-transform: uppercase; text-shadow: 0 18px 48px rgba(0,0,0,.45); }
#events .events-list{ padding: 42px 0 88px; }
#events .events-row{ display: grid; gap: 28px; margin-bottom: 18px; align-items: start; justify-items: center; text-align:center; }
#events .events-row.three{ grid-template-columns: repeat(3, minmax(260px, 1fr)); }
#events .events-row.two{ grid-template-columns: repeat(2, minmax(280px, 1fr)); max-width: 980px; margin-left:auto; margin-right:auto; }
#events .event-item{ padding: 8px 6px; }
#events .event-date{ font-weight: 900; letter-spacing:.10em; text-transform: uppercase; color: var(--yellow-500); margin-bottom: 8px; font-size: clamp(16px, 1.6vw, 20px); }
#events .event-name{ color: var(--ink-900); font-weight:1000; font-style:italic; letter-spacing:.02em; font-size: clamp(22px, 2.6vw, 30px); text-shadow: none; }
@media (max-width: 980px){ #events .events-row.three{ grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width: 640px){
  #events .events-row.three{ grid-template-columns: 1fr; }
  #events .events-row.two  { grid-template-columns: 1fr; max-width: 560px; }
}
.events-more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}


/* FACILITIES */
.facilities-gallery { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 48px; flex-wrap: wrap; }
.facilities-gallery .gallery-item { flex: 1 1 45%; max-width: 800px; }
.facilities-gallery a { display:block; border-radius:24px; overflow:hidden; }
.facilities-gallery img { width: 100%; height: clamp(250px, 30vw, 400px); object-fit: cover; display: block; border-radius: 24px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); transition: transform .35s ease, box-shadow .35s ease; }
.facilities-gallery a:hover img, .facilities-gallery a:focus-visible img { transform: scale(1.02); box-shadow: 0 22px 60px rgba(0,0,0,.35); }

/* Lightbox */
.facilities-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 1000; }
.facilities-lightbox.is-open { display: flex; }
.facilities-lightbox__img { max-width: min(96vw, 1600px); max-height: 90vh; border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.facilities-lightbox__close { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.facilities-lightbox__close:hover, .facilities-lightbox__close:focus-visible { background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.45); }
/* ===== Pickleball Facility (Title → Image → Info) ===== */
.pickleball-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 80px;
  margin-bottom: 60px;
}

.pickleball-title {
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 70px); /* 🔥 bigger title */
  font-weight: 1000;
  text-transform: uppercase;
  color: var(--ink-900);
  margin-bottom: 28px;
  text-shadow: none;
}

.pickleball-media img {
  width: 100%;
  max-width: 900px;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  display: block;
  margin-bottom: 24px;
}

.pickleball-info {
  max-width: 700px;
}

.pickleball-info p {
  color: var(--ink-700);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* reuse socials from earlier */
.pickleball-info .team-social {
  font-weight: 900;
  text-transform: uppercase;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: #0b1220;
}

.pickleball-btn {
  margin-top: 1.8rem;
}
/* Fix: make "Socials:" white in dark mode only for Pickleball section */
.theme-dark .pickleball-info .team-social {
  color: #ffffff;
}



/* PARTNERS */
.sp-bleed{ background: var(--yellow-500); padding: 40px 0 80px; margin: 0; border-top: 1px solid rgba(0,0,0,.04); }
.sp-wrap{ background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.55)); border: 1px solid rgba(0,0,0,.06); border-radius: 18px; padding: clamp(14px,2.4vw,22px); box-shadow: 0 14px 40px rgba(0,0,0,.14); }
.sp-marquee{ position: relative; overflow: hidden; padding: 8px 0; -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%); }
.sp-track{ display: flex; align-items: center; gap: clamp(24px,4vw,48px); will-change: transform; transform: translate3d(0,0,0); }
.sp-logo{ height: clamp(36px, 6vw, 72px); width: auto; display: block; object-fit: contain; transition: transform .25s ease, filter .25s ease, opacity .25s ease; opacity: .95; }
.sp-logo:hover, .sp-logo:focus-visible{ transform: scale(1.04); opacity: 1; outline: none; }
@media (prefers-reduced-motion: reduce){ .sp-track{ transform: none !important; } .sp-marquee{ overflow-x: auto; } }

/* footer */
footer{border-top:1px solid var(--line);margin-top:40px}
.foot{height:84px;display:flex;align-items:center;justify-content:space-between;color:var(--ink-700)}
.foot-social{ display:flex; align-items:center; gap:12px; }
.foot-social a{ display:inline-flex; width:90px; height:90px; border-radius:6px; overflow:hidden; opacity:.95; transition:transform .15s ease, opacity .15s ease; }
.foot-social a:hover, .foot-social a:focus-visible{ transform: translateY(-1px); opacity:1; outline:none; }
.foot-social img{ width:100%; height:100%; display:block; object-fit:contain; }
@media (max-width:900px){ .foot-social a{ width:50px; height:50px } }

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:.7s ease}
.reveal.show{opacity:1;transform:none}

/* ===== Mobile drawer (panel look) ===== */
.mobile-drawer{
  position:fixed; inset:0; display:none;
  background:transparent;
  padding:96px 24px 24px;
  pointer-events:none;
}
.mobile-drawer.open{display:block}
.mobile-drawer .drawer-panel{
  pointer-events:auto;
  margin:0;
  width:100%;
  max-width:560px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.9));
  border:1px solid var(--line);
  box-shadow:0 24px 80px rgba(0,0,0,.25);
  overflow:hidden;
  padding:10px 8px;
}
.theme-dark .mobile-drawer .drawer-panel{
  background:linear-gradient(180deg, rgba(18,21,21,.96), rgba(18,21,21,.92));
  border-color:#1F2524;
}
.mobile-drawer a{
  position:relative;
  display:block;
  text-align:left;
  padding:16px 14px;
  margin:8px 8px;
  border-radius:12px;
  color:var(--ink-900);
  text-decoration:none;
  font-weight:900; letter-spacing:.04em; text-transform:uppercase;
  border:1px solid var(--line);
  overflow:hidden;
}
.theme-dark .mobile-drawer a{ color:var(--ink-900); border-color:#27302E; }
.mobile-drawer a::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:var(--ink-900); opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.mobile-drawer a:hover::after, .mobile-drawer a:focus-visible::after{ opacity:.06; }
.mobile-drawer a.is-pressed::after{ opacity:.12; }
.theme-dark .mobile-drawer a:hover::after, .theme-dark .mobile-drawer a:focus-visible::after{ opacity:.10; }
.theme-dark .mobile-drawer a.is-pressed::after{ opacity:.18; }
.mobile-drawer a.active{ outline:2px solid var(--yellow-500); outline-offset:0; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none}
  .hl-track{transition:none !important}
  .hero video{display:none}
}

/* ========== DARK THEME OVERRIDES ========== */
.theme-dark{
  --bg:#0F1111;
  --surface:#171A1A;
  --line:#1F2524;

  --ink-900:#F6F8F7;
  --ink-700:#D9E3DF;
  --ink-500:#A8B5AF;

  --green-600:#13B87C;
  --green-500:#39C790;
  --yellow-500:#FFD44D;

  --shadow:0 4px 32px rgba(0,0,0,.35);
}
.theme-dark .site-header{ background: rgba(15,17,17,.72); border-bottom:1px solid var(--line); }
.theme-dark .burger span{ background:#e6fff3; }
.theme-dark .gridfx{ opacity:.10; mix-blend-mode:screen; }
.theme-dark .foot{ color: var(--ink-700); }

/* ==== Events → fixed uniform card size ==== */
#events .event-item{
  background: #0B7A54;                      /* dark green for light mode */
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 22px;
  padding: 20px 18px;
  width: 380px;                             /* fixed width */
  height: 180px;                            /* fixed height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  color: #f4fffb;
  text-align: left;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  margin: 10px;
}

#events .event-item:hover,
#events .event-item:focus-within{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
  border-color: rgba(0,0,0,.18);
}

/* Typography */
#events .event-item .event-date{
  color: rgba(255,255,255,.92);
  margin-bottom: 8px;
}

#events .event-item .event-name{
  color: var(--yellow-500);
  margin-bottom: 10px;
  line-height: 1.2;
}

#events .event-item .event-status{
  align-self: flex-start;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.28);
}

/* Grid layout */
#events .events-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

/* ==== Dark theme ==== */
.theme-dark #events .event-item{
  background: #000000;
  border-color: #1F2524;
  color: #F6F8F7;
  box-shadow: 0 10px 26px rgba(0,0,0,.40);
}

.theme-dark #events .event-item .event-name{
  color: var(--yellow-500);
}

.theme-dark #events .event-item .event-date{
  color: #D9E3DF;
}

.theme-dark #events .event-item .event-status{
  color: #0b1220;
  background: var(--yellow-500);
  border-color: rgba(0,0,0,.25);
}
/* Ensure the location image is as large as mission.jpg */
.about-location .media img{
  width:100%;
  height:100%;
  max-height:520px; /* same as mission.jpg */
  object-fit:cover;
  border-radius:24px;
  display:block;
  box-shadow:0 16px 40px rgba(0,0,0,.25);
}