:root{
      --bg:#0b1220;
      --surface:#0f1b33;
      --surface2:#132042;
      --surface-soft: #E9EEF3;
      --text:#e8eefc;
      --muted:#b9c6e3;
      --line: rgba(255,255,255,.14);
      --shadow: 0 18px 50px rgba(0,0,0,.35);
      --radius: 18px;
      --max: 1160px;
      --brigt:#fff;
        --link: #0b1220;         /* pick your global link colour */
  --link-hover: #b9c6e3; 

      /* tweak to your brand */
      --accent:#81B800;
      --accent2:#1960a7;

      --pad: clamp(18px, 2.4vw, 28px);
      --sec: clamp(21px, 5.2vw, 42px);
      
      --page-bg: #f6f7fb;
  --page-text: #0f1b33;
  --page-muted: #4b5b7a;
  --page-line: rgba(15,27,51,.12);
  --page-shadow: 0 14px 40px rgba(15,27,51,.10);

  /* dark card palette */
  --card-bg: #0b1220;
  --card-surface: #0f1b33;
  --card-text: #e8eefc;
  --card-muted: #b9c6e3;
  --card-line: rgba(255,255,255,.14);
  --card-shadow: 0 18px 50px rgba(0,0,0,.30);
  --radius: 18px;
    }
    
 .text-justify{
  text-align: justify;
}   
    /* Full-width HERO background video */
.hero{
  position: relative;
  min-height: clamp(520px, 95vh, 820px);
  overflow: hidden;
  display: grid;
  align-items: center;
  color:var(--text);
}

.heroVideo{
  position: absolute;
  object-position: center 40%; /* moves framing upward */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none; /* tiny scale hides edge artifacts */
  z-index: 0;
}

/* Dark blue tint for readability + theme */
.heroTint{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11,18,32,.78) 0%, rgba(11,18,32,.50) 55%, rgba(11,18,32,.35) 100%),
    radial-gradient(1200px 600px at 20% 40%, rgba(11,18,32,.55), transparent 60%);
  z-index: 1;
  pointer-events: none;
}

.heroContent{
  position: relative;
  z-index: 2;
}

.heroInner{
  max-width: 720px; /* keeps your left block from becoming too wide */
  padding: 34px 0;
}


    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--page-text);
    /*  background:
        radial-gradient(1200px 700px at 12% 10%, rgba(129,184,0,.16), transparent 60%),
        radial-gradient(900px 600px at 82% 0%, rgba(25,96,167,.18), transparent 55%),
        var(--bg);*/

  background: var(--page-bg);
 
}
    }
    a{ color:inherit; }

    /* Layout helpers */
    .container{ width:min(var(--max), calc(100% - 40px)); margin-inline:auto; }
    .section{ padding: var(--sec) 0; 
   background:#fff;}
    .grid2{ display:grid; gap:18px; grid-template-columns: 1fr; }
    .grid3{ display:grid; gap:14px; grid-template-columns: 1fr; }
    .grid4{ display:grid; gap:14px; grid-template-columns: repeat(2,1fr); }
    @media (min-width: 720px){ .grid3{ grid-template-columns: repeat(3,1fr); } }
    @media (min-width: 900px){
      .grid2{ grid-template-columns: 1.2fr .8fr; }
      .grid4{ grid-template-columns: repeat(4,1fr); }
    }

    .kicker{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  color:#fff;
}

.h1{
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  line-height:1.05;
  margin: .55rem 0 0;
  color:#fff;
}

    .h2{
      font-size: clamp(1.5rem, 2.5vw, 2.2rem);
      margin: .45rem 0 0;
    }
    .lead{
      color:var(--muted);
      font-size: clamp(1rem, 1.35vw, 1.14rem);
      line-height:1.6;
      margin: 14px 0 0;
    }

    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

.cardBlue{
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(129,184,0,.12), transparent 60%),
    radial-gradient(700px 450px at 85% 0%, rgba(25,96,167,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  color: var(--card-text);
}

.cardBlue .kicker,
.cardBlue .lead,
.cardBlue .muted{
  color: var(--card-muted);
}

.cardBlue a{ color: inherit; }


    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.05);
      color: var(--muted);
      font-size: .92rem;
      white-space: nowrap;
    }

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:.55rem;
      padding: 12px 16px;
      border-radius: 999px;
      border: 1px solid var(--line);
      text-decoration:none;
      background: rgba(255,255,255,.06);
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
      font-weight: 700;
    }
    .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.25); }
    .btn.primary{
      background: linear-gradient(90deg, rgba(129,184,0,.92), rgba(129,184,0,.70));
      border-color: rgba(129,184,0,.35);
      color: var(--text);
    }
    .btn.primary:hover{ background: linear-gradient(90deg, rgba(129,184,0,.98), rgba(129,184,0,.78)); }

    /* Topbar */
    .topbar{
      position: sticky; top: 0; z-index: 50;
      backdrop-filter: blur(10px);
     /* background: rgba(11,18,32,.65);*/
      background: var(--bg);
      border-bottom: 1px solid rgba(255,255,255,.10);
    }
    .topbar .wrap{
      display:flex; align-items:center; justify-content:space-between;
      padding: 12px 0;
      gap: 14px;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      text-decoration:none;
    }
    .brandLogo{
      width: 34px; height: 34px; border-radius: 10px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.14);
      display:grid; place-items:center;
      font-weight: 900;
      overflow: hidden;   
    }
    .brandLogo img{
  width: 100%;
  height: 100%;
  object-fit: contain;       /* fit entire logo inside */
  display: block;
}
    /* Topbar row layout: brand + nav on left, CTA on right */
.topbarRow{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: 14px;
  padding: 12px 0;
}

/* Make nav sit on the left within its column */
.nav{
  display:flex;
  align-items:center;
  justify-content:flex-start;  /* key */
  gap: 10px;
  flex-wrap:wrap;
  color: var(--muted);
  font-weight: 600;
  
}

.topbarActions{
  display:flex;
  justify-content:flex-end;
}

/* Optional: tighten nav spacing so it looks like a single cluster */
.nav a{
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--text);
}

/* Brand text (optional) */
.brandTitle{ font-weight: 900; line-height: 1; color:var(--muted)}
.brandSub{ color: var(--muted); font-size: .9rem; }


    /* Hero media */
    .media{
      overflow:hidden;
    }
    .mediaHead{
      padding: 16px 16px 0;
      display:flex; align-items:end; justify-content:space-between; gap:12px;
    }
    .mediaBox{
      margin-top:12px;
      aspect-ratio: 16 / 9;
      border-top: 1px solid var(--line);
      background: rgba(0,0,0,.22);
      display:grid; place-items:center;
      position:relative;
    }
        .mediaBox img{
   width: 100%;
  height: 100%;
  object-fit: contain;       /* fit entire logo inside */
  display: block;
    }
    .mediaBox .play{
      width: 56px; height: 56px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.18);
      display:grid; place-items:center;
      font-size: 18px;
    }
    .mediaFoot{
      padding: 14px 16px;
      border-top: 1px solid var(--line);
      display:flex; flex-wrap:wrap; gap:10px;
    }

    /* Stats bar */
    .stats{
      padding: 18px;
    }
    .stat .n{ font-size: 1.65rem; font-weight: 900; margin-top: 6px; }
    .stat .t{ color: var(--muted); font-weight: 700; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; }

    /* Section titles */
    .titleRow{
      display:flex; align-items:end; justify-content:space-between; gap: 12px; flex-wrap:wrap;
      margin-bottom: 18px;
    }
    


    /* Footer contact block */
    .contactBand{
      padding: 22px;
      display:grid; gap: 14px;
    }
    @media (min-width: 900px){ .contactBand{ grid-template-columns: 1.2fr .8fr; align-items:center; } }

    /* Scroll reveal (optional; looks nice, not heavy) */
    .reveal{ opacity:1; transform:none;  }
    .js .reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
.js .reveal.on{
  opacity: 1;
  transform: none;
}
    .reveal.on{ opacity:1; transform:none; }
    @media (prefers-reduced-motion: reduce){
      .reveal{ opacity:1; transform:none; transition:none; }
    }

.gbcCardBg{ position:relative; overflow:hidden; background-repeat:no-repeat; min-height:190px; }
.gbcCardBg:before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--gbc_tint, rgba(255,255,255,.85));
  opacity: var(--gbc_tint_opacity, .85);
  z-index:0;
}
.gbcCardBg > *{ position:relative; z-index:1; }

/*split section intro*/

.gbcSplit{
  display:grid;
  gap:32px;
  align-items:center;
}

@media(min-width:900px){
  .gbcSplit{
    grid-template-columns: 1.1fr .9fr;
  }
}

.gbcSplitMedia{
  position:relative;
  min-height:420px;
  border-radius:var(--radius);
  overflow:hidden;
  background-size:cover;
  background-repeat:no-repeat;
}

.gbcSplitMedia::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--gbc_tint, rgba(0,0,0,.4));
  opacity:var(--gbc_tint_opacity, .4);
  z-index:0;
}

.gbcSplitMedia > *{
  position:relative;
  z-index:1;
}
/* Gentle blue gradient background for intro section */
.gbcIntroBg{
  position:relative;
  background:
    linear-gradient(
      135deg,
      rgba(25, 96, 167, 0.08) 0%,
      rgba(11, 18, 32, 0.04) 60%,
      rgba(25, 96, 167, 0.06) 100%
    );
}

/* Optional soft radial glow (adds depth) */
.gbcIntroBg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(129,184,0,0.06),
      transparent 55%
    );
  pointer-events:none;
}

/* Schedule row color variants */
.gbcSchedRow{ transition: background .3s ease; }

.gbcSchedRow--1{ background: rgba(25,96,167,0.08); }
.gbcSchedRow--2{ background: rgba(129,184,0,0.08); }
.gbcSchedRow--3{ background: rgba(11,18,32,0.05); }
.gbcSchedRow--4{ background: rgba(25,96,167,0.05); }
.gbcSchedRow--5{ background: rgba(129,184,0,0.06); }
.gbcSchedRow--6{ background: rgba(11,18,32,0.08); }

/* Optional hover polish */
.gbcSchedRow:hover{
  background: rgba(25,96,167,0.12);
}

@media (max-width: 768px){

  .gbcCardBgMobileOff{
    background-image: none !important;
    display:none;
  }

  .gbcCardBgMobileOff > div:first-child{
    display: none; /* hide overlay */
  }

}