@charset "utf-8";
/* CSS Document */

	:root{
	  --bg:#0b1220; --bg-2:#102c4e; --card:#101a2c; --ink:#071425; --ink-dim:#c9d2e3;
	  --brand:#ffbf2e; --brand-ink:#0a2342; --accent:#ffcc33; --text:#e8f2ff;
	  --accent-dark:#e0ae00; --muted:#b9eeff; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.25);
	}
	*{box-sizing:border-box}
	html,body{height:100%; margin:0}
	body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif; 
		color:var(--text); 
		background: radial-gradient(circle, #3f3119, #31241a);
      	line-height:1.6;
	}
	img{max-width:100%; height:auto; display:block}
	a{color:var(--accent); text-decoration:none}
	a:hover{text-decoration:underline}
	.container{max-width:1100px; margin-inline:auto; padding:clamp(12px,2vw,24px)}

    /* Top bar */
	.site-header{
      position: sticky; top:0; z-index:1000;
      background: linear-gradient(#7b6e5ee3, #a39987e3); /*linear-gradient(180deg, var(--bg-2), rgba(16,44,78,.8))*/
      backdrop-filter: blur(6px);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .nav{
      max-width:1100px; margin:auto; padding:.75rem 1rem;
      display:flex; align-items:center; justify-content:space-between;
      gap:1rem;
    }
    .brand{
      display:flex; align-items:center; gap:.75rem; color:var(--text);
      font-weight:700; letter-spacing:.3px;
    }
    .brand img{width:90px; height:90px; object-fit:contain}
    .nav-links{
      display:flex; align-items:center; gap:1rem;
    }
    .nav-links a{
      color:var(--muted); padding:.4rem .7rem; border-radius:8px;
    }
    .nav-links a[aria-current="page"], .nav-links a:hover{
      color:var(--ink); background:var(--accent);
    }
    .burger{display:none; background:none; border:0; color:var(--text); font-size:1.4rem}
	input, select { padding: 5px; border-radius: 10px;}
	input[type="checkbox"]{
		height: 20px;
		width: 20px;
		vertical-align: middle;
	}
	/*.site-header{position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px; backdrop-filter:saturate(180%) blur(8px); z-index:10; background: linear-gradient(#6b5c4be3, #a39987e3)}
	.brand{display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none}*/
	.brand-text{font-weight:700; letter-spacing:.5px}
	/*.nav a{margin-left:16px}*/
	.btn{border:0; border-radius:999px; padding:10px 16px; font-weight:700; cursor:pointer; display:inline-block}
	.btn-primary{background:var(--brand); color:var(--brand-ink)}
	.btn-primary:hover{filter:brightness(1.05)}
	.btn-ghost{background:transparent; color:var(--ink); border:1px solid rgba(255,255,255,.2)}
	.btn-large{font-size:1.125rem; padding:14px 22px}
	.btn-wide{width:100%; text-align:center}
	.hero{color:#fff; background-size:cover; background-position:center;}
	.hero-inner{padding:72px 20px 56px}
	.eyebrow{text-transform:uppercase; letter-spacing:.15em; font-weight:800; opacity:.9}
	.headline{font-size: clamp(36px, 6vw, 64px); margin:6px 0 8px}
	.subhead{color:var(--ink-dim); font-size: clamp(16px,2.8vw,20px)}
	.badges{list-style:none; padding:0; margin:18px 0 22px; display:flex; flex-wrap:wrap; gap:10px}
	.badges li{background:rgba(14,24,42,.6); border:1px solid rgba(255,255,255,.18); padding:8px 12px; border-radius:999px}
	.grid-two{display:grid; grid-template-columns:2fr 1fr; gap:24px}

	#pairings table{
		margin: 0 auto;
		border: 1px #FFFFFF solid;
		border-collapse: collapse;
    	color: #101c30;
	}

	#pairings table tr:nth-child(even) {background-color: #CEF}
	#pairings table tr:nth-child(odd) {background-color: #FFF}
	#pairings table th{
		text-align: left;
		background-color: #53c5f6;
		padding: 10px;
	}

	#pairings table td{
		padding: 10px;
	}

	@media (max-width: 900px){ .grid-two{grid-template-columns:1fr} }
	.card{background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
	.facts{display:grid; grid-template-columns: auto 1fr; gap:8px 12px; margin:12px 0}
	.facts dt{color:var(--muted)}
	.countdown{margin:12px 0 18px}

	.site-footer{border-top:1px solid rgba(255,255,255,.08); margin-top:48px; background: linear-gradient(#6b5c4be3, #615242e3);}
	.footer-nav a{margin-right:14px}
	.footdiv {display:block; align-items:center; justify-content:space-between; gap:16px;}
	@media (max-width: 600px){ footdiv {display:flex;}}
	.note{color:var(--ink-dim)}
    /* Small niceties */
    .sr-only{ position:absolute; left:-9999px }
    .spark{ color:#ffe38c }


    @media (max-width: 820px){
      .burger{display:block}
      .nav-links{
        position:fixed; inset:64px 0 auto 0; background:var(--bg-2);
        border-bottom:1px solid rgba(255,255,255,.06);
        padding:1rem; display:none; flex-direction:column; gap:.5rem;
      }
      .nav-links.open{display:flex}
    }

    /* Hero */
    .hero{
      max-width:1100px; margin: clamp(1rem, 4vw, 2rem) auto 1rem; padding: 1rem;
      display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem; align-items:center;
    }
    @media (max-width: 900px){ .hero{ grid-template-columns: 1fr } }
    .hero-card{
      background: linear-gradient(180deg, var(--card), #10335a);
      border-radius: var(--radius);
      padding: clamp(1rem, 2vw, 1.5rem); box-shadow: var(--shadow);
      position:relative; overflow:hidden;
    }
    .hero-card::after{
      content:""; position:absolute; inset:-40% -40% auto auto; width:70%; height:200%;
      background: radial-gradient(closest-side, rgba(255,204,51,.16), transparent 65%);
      transform: rotate(25deg);
    }
    .hero h1{
      margin:.25rem 0 0; font-size: clamp(1.8rem, 3.3vw, 3rem); line-height:1.15;
      color:var(--text);
    }
    .hero p.lead{ color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.2rem) }
    .badge{
      display:inline-flex; gap:.5rem; align-items:center; padding:.35rem .6rem; border-radius:999px;
      background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color: var(--muted);
      font-size:.9rem;
    }
    .logo-panel{
      background: linear-gradient(180deg, #0c2748, #071a33);
      border: 1px solid rgba(255,255,255,.06);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      display:grid; place-items:center; padding:1.25rem;
    }
    .logo-panel img{ width:min(100%, 360px); height:auto; filter: drop-shadow(0 18px 28px rgba(0,0,0,.45)); }

    /* Sections */
    .section{ max-width:1100px; margin: 1rem auto 2rem; padding: 0 1rem; }
    .grid{ display:grid; gap:1.25rem }
    .cols-2{ grid-template-columns: 1fr 1fr }
    @media (max-width: 900px){ .cols-2{ grid-template-columns: 1fr } }

    .card{
      background: linear-gradient(180deg, var(--card), #123b6a);
      border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow);
      border: 1px solid rgba(255,255,255,.06);
    }
    h2{ font-size: clamp(1.4rem, 2.2vw, 2rem); margin:.25rem 0 1rem; color: var(--accent) }
    h3{ margin: .5rem 0; color:#ffe38c }
    .kicker{ text-transform: uppercase; letter-spacing:.2em; font-size:.8rem; color: var(--muted) }
    .lead{ color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.2rem) }

    .values{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem }
    @media (max-width: 900px){ .values{ grid-template-columns: 1fr } }
    .value{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:1rem; border-radius:12px }
    .value strong{ color:#fff }

    .timeline{ border-left: 3px solid rgba(255,255,255,.15); padding-left:1rem }
    .timeline .t{ margin: .8rem 0 }
    .timeline .t time{ color:#ffe38c; font-weight:700 }

    .team{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem }
    @media (max-width: 900px){ .team{ grid-template-columns: 1fr } }
    .person{
      display:grid; grid-template-columns: 1fr; gap:1rem; align-items:center;
      background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); padding:1rem; border-radius:12px;
    }
    .avatar{
      width:84px; height:84px; border-radius:50%; background: linear-gradient(180deg, #1b4b7b, #0c2a4e);
      display:grid; place-items:center; font-weight:800; color:var(--ink); border:2px solid var(--accent);
    }

    .cta{
      display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-top:.75rem
    }
    .btn{
      display:inline-flex; align-items:center; gap:.5rem;
      background: var(--accent); color: var(--ink); border:0; padding:.8rem 1rem;
      font-weight:700; border-radius:12px; cursor:pointer; box-shadow: 0 8px 18px rgba(255,204,51,.25);
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .btn:hover{ transform: translateY(-1px); background: var(--accent-dark); box-shadow: 0 10px 22px rgba(255,204,51,.35) }
    .btn.secondary{ background: transparent; color: var(--text); border:1px solid rgba(255,255,255,.2); box-shadow:none }
    .foot{
      text-align:center; color:var(--muted); padding:2rem 1rem; border-top:1px solid rgba(255,255,255,.06);
      background: var(--bg-2);
    }