*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

 
    /* ─── PALETTE (logo colors, no gradients) ───── */
    :root {
      --ocean:   #1A5FA8;
      --sky:     #5BAEE0;
      --navy:    #0B2244;
      --land:    #4C8B3F;
      --leaf:    #6DB860;
      --gold:    #F5A623;
      --amber:   #D4861A;
      --cream:   #F7EFD4;
      --paper:   #FDF8EC;
      --rust:    #C94F27;
      --white:   #FFFFFF;
      --black:   #0D0D0D;
      --muted:   #556B8A;
    }
 
    html { scroll-behavior: auto; }
 
    body {
      font-family: 'VT323', monospace;
      font-size: 18px;
      color: var(--navy);
      background-color: var(--cream);
      background-image:
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 3px,
          rgba(0,0,0,0.025) 3px,
          rgba(0,0,0,0.025) 4px
        );
      line-height: 1.5;
      overflow-x: hidden;
    }
 
    /* ─── SCANLINE OVERLAY ───────────────────────── */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.04) 2px,
        rgba(0,0,0,0.04) 4px
      );
      pointer-events: none;
      z-index: 8000;
    }
 
   
 
    /* ─── PIXEL BORDER UTILITY ───────────────────── */
    .pixel-box {
      border: 4px solid var(--navy);
      box-shadow: 6px 6px 0 var(--navy);
    }
    .pixel-box-gold {
      border: 4px solid var(--amber);
      box-shadow: 6px 6px 0 var(--amber);
    }
    .pixel-box-ocean {
      border: 4px solid var(--ocean);
      box-shadow: 6px 6px 0 var(--navy);
    }
 
    /* ─── PAGE ROUTING ───────────────────────────── */
    .page { display: none; }
    .page.active { display: block; }
 
    /* ════════════════════════════════════════════ */
    /* NAV                                          */
    /* ════════════════════════════════════════════ */
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2rem;
      height: 64px;
      background: var(--navy);
      border-bottom: 6px solid var(--gold);
      position: sticky;
      top: 0;
      z-index: 500;
    }
 
    .nav-logo {
      display: flex; align-items: center; gap: 10px;
      text-decoration: none;
    }
    .nav-logo img {
      width: 38px; height: 38px;
      border: 3px solid var(--gold);
      border-radius: 0;
      image-rendering: pixelated;
    }
    .nav-brand {
      font-family: 'Press Start 2P', monospace;
      font-size: 8px;
      color: var(--gold);
      letter-spacing: 0.05em;
      line-height: 1.6;
      max-width: 140px;
    }
 
    .nav-links { display: flex; gap: 0; list-style: none; }
    .nav-links li { border-left: 2px solid rgba(255,255,255,0.1); }
    .nav-links li:last-child { border-right: 2px solid rgba(255,255,255,0.1); }
    .nav-links a {
      display: block;
      padding: 0 1.1rem;
      height: 64px;
      line-height: 64px;
      font-family: 'Silkscreen', monospace;
      font-size: 15px;
      color: var(--sky);
      text-decoration: none;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      transition: background 0.1s, color 0.1s;
    }
    .nav-links a:hover {
      background: var(--ocean);
      color: var(--white);
    }
 
    /* ════════════════════════════════════════════ */
    /* HERO                                         */
    /* ════════════════════════════════════════════ */
    .hero {
      position: relative;
      background: var(--navy);
      min-height: 88vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 4rem 2rem 5rem;
      overflow: hidden;
      border-bottom: 6px solid var(--gold);
    }
 
    /* pixel star field */
    .hero-stars {
      position: absolute; inset: 0;
      background-image:
        radial-gradient(circle, var(--sky) 1px, transparent 1px),
        radial-gradient(circle, var(--gold) 1px, transparent 1px),
        radial-gradient(circle, var(--white) 1px, transparent 1px);
      background-size: 80px 80px, 130px 130px, 55px 55px;
      background-position: 10px 10px, 40px 55px, 25px 70px;
      opacity: 0.35;
      pointer-events: none;
    }
 
    .hero-content {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  max-width: 1000px;
  margin: 0 auto;
}

/* LEFT SIDE (logo) */
.hero-left img {
  width: 350px;
  height: 350px;
  border: 4px solid var(--gold);
  box-shadow: 6px 6px 0 var(--amber);
  image-rendering: pixelated;
}

/* RIGHT SIDE (text) */
.hero-right {
  max-width: 500px;
  text-align: left;
}

.hero-right p {
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: var(--sky);
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* BUTTONS */
.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* 📱 Responsive: stack on mobile */
@media (max-width: 700px) {
  .hero-content {
    flex-direction: column;
    text-align: center;
  }

  .hero-right {
    text-align: center;
  }
}
 
    .hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
 
    /* ─── BUTTONS ─────────────────────────────── */
    .btn-primary {
      font-family: 'Press Start 2P', monospace;
      font-size: 15px;
      background: var(--gold);
      color: var(--navy);
      border: 4px solid var(--amber);
      box-shadow: 5px 5px 0 var(--amber);
      padding: 12px 20px;
      text-decoration: none;
      display: inline-block;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      transition: transform 0.08s, box-shadow 0.08s;
    }
    .btn-primary:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--amber); }
    .btn-primary:active { transform: translate(5px, 5px); box-shadow: 0 0 0; }
 
    .btn-secondary {
      font-family: 'Press Start 2P', monospace;
      font-size: 15px;
      background: transparent;
      color: var(--white);
      border: 4px solid var(--sky);
      box-shadow: 5px 5px 0 var(--ocean);
      padding: 12px 20px;
      text-decoration: none;
      display: inline-block;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      transition: transform 0.08s, box-shadow 0.08s;
    }
    .btn-secondary:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ocean); }
 
    /* ─── SECTION CONTAINERS ─────────────────── */
 
    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
 
    .section {
      padding: 4rem 2rem;
      max-width: 920px;
      margin: 0 auto;
    }
 
    .section-tag {
      font-family: 'Silkscreen', monospace;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ocean);
      background: var(--paper);
      border: 3px solid var(--ocean);
      display: inline-block;
      padding: 3px 12px;
      margin-bottom: 1rem;
    }
 
    .section-title {
      font-family: 'Press Start 2P', monospace;
      font-size: clamp(14px, 5vw, 22px);
      color: var(--navy);
      line-height: 1.6;
      margin-bottom: 0.75rem;
      text-shadow: 3px 3px 0 rgba(11,34,68,0.18);
    }
    .section-title em {
      font-style: normal;
      color: var(--ocean);
    }
 
    .section-sub {
      font-size: 20px;
      color: var(--muted);
      max-width: 520px;
      margin-bottom: 2.5rem;
    }
 
    hr.divider {
      border: none;
      border-top: 4px solid var(--navy);
      margin: 0;
      image-rendering: pixelated;
    }
    hr.divider-dashed {
      border: none;
      border-top: 4px dashed var(--muted);
      margin: 0 2rem;
      opacity: 0.35;
    }

    .section-connect {
      padding: 4rem 2rem;
      max-width: 920px;
      margin: 0 auto;
      display: flex;
    }
 
    /* ─── SIGNUP BANNER ──────────────────────── */
    .signup-wrap { padding: 2rem; display: flex; justify-content: center; }
    .signup {
      font-family: 'Press Start 2P', monospace;
      font-size: 15px;
      display: inline-flex; align-items: center; gap: 14px;
      background: var(--paper);
      border: 4px solid var(--gold);
      box-shadow: 6px 6px 0 var(--amber);
      padding: 1rem 2rem;
      color: var(--navy);
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      transition: transform 0.08s, box-shadow 0.08s;
    }
    .signup::before { content: '✈'; font-size: 18px; animation: wiggle 1.5s steps(2) infinite; }
    @keyframes wiggle {
      0%   { transform: rotate(-12deg) translateX(0); }
      50%  { transform: rotate(12deg) translateX(5px); }
      100% { transform: rotate(-12deg) translateX(0); }
    }
    .signup:hover { transform: translate(3px,3px); box-shadow: 3px 3px 0 var(--amber); }
 
    /* ─── PROGRAMS ───────────────────────────── */
    .programs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
    }
    .program-card {
      background: var(--paper);
      border: 4px solid var(--navy);
      box-shadow: 7px 7px 0 var(--navy);
      padding: 1.5rem;
      transition: transform 0.08s, box-shadow 0.08s;
      position: relative;
    }
 
    .program-card.dashed {
      border-style: dashed;
      box-shadow: 7px 7px 0 rgba(11,34,68,0.35);
      opacity: 0.7;
    }
 
    .program-flag { font-size: 30px; margin-bottom: 0.75rem; display: block; }
    .program-title {
      font-family: 'Press Start 2P', monospace;
      font-size: 10px;
      color: var(--navy);
      margin-bottom: 0.75rem;
      line-height: 1.8;
    }
    .program-desc { font-size: 17px; color: var(--muted); line-height: 1.5; }
 
    /* ─── TOOLS ──────────────────────────────── */
    .tools-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
      gap: 16px;
    }
    .tool-card {
      background: var(--navy);
      border: 4px solid var(--sky);
      box-shadow: 6px 6px 0 var(--ocean);
      padding: 1.25rem;
      display: flex; align-items: center; gap: 14px;
      transition: transform 0.08s, box-shadow 0.08s;
    }
    .tool-icon {
      width: 44px; height: 44px;
      background: var(--ocean);
      border: 3px solid var(--sky);
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; flex-shrink: 0;
    }
    .tool-name { font-family: 'Silkscreen', monospace; font-size: 11px; color: var(--white); }
    .tool-purpose { font-size: 16px; color: var(--sky); margin-top: 3px; }
 
    /* ─── OUR REACH / MAP ────────────────────── */
    .reach-map-wrap {
      background: var(--paper);
      padding: 1.25rem;
      margin-bottom: 1.5rem;
    }
    .reach-map { width: 100%; height: auto; display: block; }
    .map-ocean { fill: var(--sky); opacity: 0.3; }
    .map-land > rect {
      fill: var(--land);
      stroke: var(--paper);
      stroke-width: 3;
    }
    .pin-halo {
      fill: var(--gold);
      stroke: var(--navy);
      stroke-width: 4;
      transform-box: fill-box;
      transform-origin: center;
      animation: pin-pulse 1.6s steps(6) infinite;
    }
    .pin-flag {
      font-size: 26px;
      text-anchor: middle;
      pointer-events: none;
    }
    @keyframes pin-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.15); }
    }
    .reach-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .reach-item {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--paper);
      border: 3px solid var(--navy);
      box-shadow: 4px 4px 0 var(--navy);
      padding: 8px 14px;
      font-family: 'Silkscreen', monospace;
      font-size: 11px;
      color: var(--navy);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .reach-flag { font-size: 20px; }

    /* ─── SUMMER PILOT RECAP ─────────────────── */
    .recap-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 16px;
      margin-bottom: 2rem;
    }
    .stat-card {
      background: var(--navy);
      border: 4px solid var(--gold);
      box-shadow: 6px 6px 0 var(--amber);
      padding: 1.25rem 1rem;
      text-align: center;
      transition: transform 0.08s, box-shadow 0.08s;
    }
    .stat-number {
      font-family: 'Press Start 2P', monospace;
      font-size: clamp(16px, 3vw, 24px);
      color: var(--gold);
      margin-bottom: 0.6rem;
      line-height: 1.4;
    }
    .stat-label {
      font-family: 'Silkscreen', monospace;
      font-size: 10px;
      color: var(--sky);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .recap-highlights { list-style: none; }
    .recap-highlights li {
      position: relative;
      padding: 10px 0 10px 26px;
      border-bottom: 3px dashed rgba(11,34,68,0.25);
      font-size: 17px;
      color: var(--navy);
    }
    .recap-highlights li::before {
      content: '▶';
      position: absolute;
      left: 0;
      color: var(--ocean);
    }
    .recap-highlights li:last-child { border-bottom: none; }

    /* ─── SOCIAL ─────────────────────────────── */
    .social-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 18px;
    }
    .social-card {
      border: 4px solid var(--navy);
      box-shadow: 7px 7px 0 var(--navy);
      padding: 1.5rem;
      display: flex; align-items: center; gap: 16px;
      text-decoration: none;
      transition: transform 0.08s, box-shadow 0.08s;
      font-family: 'Silkscreen', monospace;
    }
    .social-card:hover { transform: translate(3px,3px); box-shadow: 4px 4px 0 var(--navy); }
    .social-card.discord  { background: #4752C4; color: var(--white); border-color: #2C34A0; box-shadow: 7px 7px 0 #2C34A0; }
    .social-card.instagram { background: #C13584; color: var(--white); border-color: #8a1a5c; box-shadow: 7px 7px 0 #8a1a5c; }
    .social-card.email    { background: var(--ocean); color: var(--white); border-color: var(--navy); }
    .social-icon { font-size: 28px; flex-shrink: 0; }
    .social-icon svg { display: block; }
    .social-name { font-size: 13px; }
    .social-sub  { font-family: 'VT323', monospace; font-size: 16px; opacity: 0.8; margin-top: 2px; }
 
    /* ─── CTA SECTION ────────────────────────── */
    .cta-section {
      background: var(--navy);
      border-top: 6px solid var(--gold);
      border-bottom: 6px solid var(--gold);
      padding: 4rem 2rem;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta-section .hero-stars { opacity: 0.3; }
    .cta-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: row; /* change this */
      align-items: center; /* vertically align */
      justify-content: center; /* center horizontally */
      gap: 2rem;
      text-align: left; /* optional: makes text look nicer beside logo */
    }
    @media (max-width: 600px) {
    .cta-content {
        flex-direction: column;
        text-align: center;
      }
    }
    .cta-content img {
      width: 200px; height: 200px;
      border: 4px solid var(--gold);
      box-shadow: 6px 6px 0 var(--amber);
      image-rendering: pixelated;
    }
    .cta-section .section-title { color: var(--white); text-shadow: 3px 3px 0 var(--ocean); }
    .cta-section .section-sub { color: var(--sky); margin: 0 auto 2rem; max-width: 460px; }
 
    /* ════════════════════════════════════════════ */
    /* PAGE HERO (Team / Contact)                   */
    /* ════════════════════════════════════════════ */
    .page-hero {
      background: var(--navy);
      border-bottom: 6px solid var(--gold);
      text-align: center;
      padding: 4rem 2rem 3rem;
      position: relative;
      overflow: hidden;
    }
    .page-hero .hero-stars { opacity: 0.3; }
    .page-hero-content { position: relative; z-index: 2; }
    .page-hero h1 {
      font-family: 'Press Start 2P', monospace;
      font-size: clamp(18px, 3vw, 30px);
      color: var(--white);
      text-shadow: 4px 4px 0 var(--ocean);
      line-height: 1.6;
      margin: 1rem 0 0.75rem;
    }
    .page-hero p {
      font-size: 20px;
      color: var(--sky);
      max-width: 480px;
      margin: 0 auto;
    }
 
    /* pixel divider strip */
    .pixel-strip {
      height: 16px;
      background: repeating-linear-gradient(
        90deg,
        var(--gold) 0, var(--gold) 16px,
        var(--amber) 16px, var(--amber) 32px,
        var(--ocean) 32px, var(--ocean) 48px,
        var(--land) 48px, var(--land) 64px
      );
      border-top: 3px solid var(--navy);
      border-bottom: 3px solid var(--navy);
    }
 
    /* ════════════════════════════════════════════ */
    /* TEAM PAGE                                    */
    /* ════════════════════════════════════════════ */
    .team-body { padding: 4rem 2rem; max-width: 980px; margin: 0 auto; }
 
    .team-section-label {
      font-family: 'Press Start 2P', monospace;
      font-size: 12px;
      color: var(--white);
      background: var(--navy);
      border: 4px solid var(--gold);
      box-shadow: 5px 5px 0 var(--amber);
      display: inline-block;
      padding: 8px 18px;
      margin-bottom: 1.75rem;
    }
 
    .team-row {
      display: flex; flex-wrap: wrap;
      justify-content: center; gap: 20px;
      margin-bottom: 3rem;
    }
    .team-row.grid4 {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    }
 
    .person {
      background: var(--paper);
      border: 4px solid var(--navy);
      box-shadow: 6px 6px 0 var(--navy);
      padding: 1.25rem;
      text-align: center;
      transition: transform 0.08s, box-shadow 0.08s;
      min-width: 155px;
    }
    .person-avatar {
      width: 70px; height: 82px;
      background: var(--ocean);
      border: 3px solid var(--navy);
      margin: 0 auto 0.85rem;
      display: flex; align-items: center; justify-content: center;
      font-size: 26px;
      position: relative;
      overflow: hidden;
    }
    /* pixel character silhouette */
    .person-avatar::before {
      content: '';
      position: absolute;
      bottom: 0; left: 50%;
      transform: translateX(-50%);
      width: 30px; height: 40px;
      background: var(--sky);
      clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
      opacity: 0.5;
    }
    .person-avatar::after {
      content: '';
      position: absolute;
      top: 10px; left: 50%;
      transform: translateX(-50%);
      width: 24px; height: 24px;
      background: var(--cream);
      border: 2px solid var(--navy);
      border-radius: 50%;
    }
    .person h3 {
      font-family: 'Silkscreen', monospace;
      font-size: 10px;
      color: var(--navy);
      margin-bottom: 4px;
    }
    .person p { font-size: 15px; color: var(--muted); }
 
    /* ════════════════════════════════════════════ */
    /* CONTACT PAGE                                 */
    /* ════════════════════════════════════════════ */
    .contact-body {
      background: var(--paper);
      border-top: 4px solid var(--navy);
      padding: 4rem 2rem;
    }
    .contact-inner {
      max-width: 880px; margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 3rem; align-items: start;
    }
 
    .contact-info-item {
      display: flex; align-items: flex-start; gap: 14px;
      margin-bottom: 1.5rem;
    }
    .contact-icon {
      width: 40px; height: 40px;
      background: var(--navy);
      border: 3px solid var(--sky);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      font-size: 18px;
    }
    .contact-label {
      font-family: 'Silkscreen', monospace;
      font-size: 10px;
      color: var(--ocean);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .contact-value { font-size: 17px; color: var(--navy); margin-top: 3px; }
 
    .student-note {
      background: var(--navy);
      border: 4px solid var(--sky);
      box-shadow: 5px 5px 0 var(--ocean);
      padding: 1rem 1.25rem;
      margin-top: 2rem;
    }
    .student-note-title {
      font-family: 'Silkscreen', monospace;
      font-size: 10px;
      color: var(--gold);
      margin-bottom: 6px;
    }
    .student-note-body { font-size: 17px; color: var(--sky); line-height: 1.5; }
 
    /* ─── FORM ───────────────────────────────── */
    .contact-form {
      background: var(--paper);
      border: 4px solid var(--navy);
      box-shadow: 8px 8px 0 var(--navy);
      padding: 2rem;
    }
    .contact-form h3 {
      font-family: 'Press Start 2P', monospace;
      font-size: 12px;
      color: var(--navy);
      margin-bottom: 1.5rem;
      line-height: 1.8;
    }
 
    .form-group { margin-bottom: 1.1rem; }
    .form-group label {
      display: block;
      font-family: 'Silkscreen', monospace;
      font-size: 10px;
      color: var(--ocean);
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      padding: 9px 12px;
      font-size: 17px;
      font-family: 'VT323', monospace;
      color: var(--navy);
      background: var(--cream);
      border: 3px solid var(--navy);
      outline: none;
      transition: border-color 0.1s, box-shadow 0.1s;
      appearance: auto;
      border-radius: 0;
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--ocean);
      box-shadow: 3px 3px 0 var(--ocean);
    }
    .form-group textarea { height: 110px; resize: vertical; }
    .btn-full { width: 100%; margin-top: 0.75rem; text-align: center; }
 
    .form-success { display: none; text-align: center; padding: 2.5rem 1rem; }
    .form-success-icon {
      font-size: 48px;
      display: block;
      margin-bottom: 1rem;
      animation: bounce-px 0.5s steps(4) infinite alternate;
    }
    @keyframes bounce-px {
      from { transform: translateY(0); }
      to   { transform: translateY(-10px); }
    }
    .form-success h4 {
      font-family: 'Press Start 2P', monospace;
      font-size: 12px;
      color: var(--land);
      margin-bottom: 8px;
      line-height: 1.8;
    }
    .form-success p { font-size: 18px; color: var(--muted); }
 
    /* ════════════════════════════════════════════ */
    /* FOOTER                                       */
    /* ════════════════════════════════════════════ */
    footer {
      background: var(--black);
      border-top: 6px solid var(--gold);
      padding: 1.5rem 2rem;
      text-align: center;
      font-family: 'Silkscreen', monospace;
      font-size: 10px;
      color: var(--muted);
      letter-spacing: 0.08em;
    }
    footer span { color: var(--gold); }
 
    /* ─── SCROLL FADE-IN ─────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.4s steps(8), transform 0.4s steps(8);
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
 
    /* ─── RESPONSIVE ─────────────────────────── */
    @media (max-width: 700px) {
      .hero h1 { font-size: 16px; }
      .contact-inner { grid-template-columns: 1fr; }
      .nav-links { display: none; }
      .team-row.grid4 { grid-template-columns: repeat(2, 1fr); }
    }