
:root{
  --brand:#0A1C3F;
  --ink:#081634;
  --text:#eef4ff;
  --muted: rgba(238,244,255,.76);
  --surface: rgba(255,255,255,.07);
  --line: rgba(255,255,255,.14);
  --accent:#1048B0;
  --accent2:#6BC6FF;
  --shadow: 0 22px 70px rgba(0,0,0,.35);
  --shadow2: 0 16px 42px rgba(0,0,0,.22);
  --radius: 24px;
  --max: 1260px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 720px at 14% 6%, rgba(16,72,176,.20), transparent 60%),
    radial-gradient(1000px 640px at 86% 10%, rgba(107,198,255,.16), transparent 62%),
    radial-gradient(800px 520px at 82% 78%, rgba(16,72,176,.11), transparent 68%),
    linear-gradient(180deg, #0b1f45 0%, #081a3c 45%, #061027 100%);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
.container{width:min(var(--max), 92%); margin:0 auto}
.kicker{letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;color:var(--muted)}
.h1{font-size: clamp(2.65rem, 4.4vw, 4.1rem);line-height:1.04;letter-spacing:-.02em;margin: 14px 0 16px;}
.h2{font-size: clamp(1.78rem, 2.55vw, 2.75rem); margin: 0 0 12px; letter-spacing:-.01em}
.h3{font-size: 1.13rem; margin:0 0 8px}
.p{margin:0 0 12px; color:var(--muted)}
.small{font-size:.92rem}
.section{padding: 100px 0}
.section.compact{padding: 76px 0}
.grid{display:grid; gap:22px}
@media(min-width: 920px){.grid.cols2{grid-template-columns: 1.15fr .85fr}.grid.cols3{grid-template-columns: repeat(3, 1fr)}.grid.cols4{grid-template-columns: repeat(4, 1fr)}}

/* Header */
header{position:sticky; top:0; z-index:60; background: rgba(255,255,255,.86); border-bottom:1px solid rgba(10,28,63,.10); backdrop-filter: blur(14px);}
.nav{display:flex; align-items:center; justify-content:space-between; padding: 10px 0; position:relative;}
.brand img{height:160px; width:auto; display:block; filter: drop-shadow(0 12px 24px rgba(0,0,0,.18)); margin:-44px 0 -44px 0;}
nav.links{display:none; gap:26px; align-items:center}
nav.links a{font-size:.95rem; font-weight:750; color: rgba(10,28,63,.92);}
nav.links a:hover{color:var(--text)}
.actions{display:flex; gap:10px; align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;padding: 11px 16px;border-radius:999px;border:1px solid rgba(10,28,63,.16);background: rgba(255,255,255,.55);color: rgba(10,28,63,.92); font-weight:760; font-size:.92rem;transition: transform .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;}
.btn:hover{transform: translateY(-1px); border-color: rgba(16,72,176,.35); background: rgba(255,255,255,.72);}
.btn.primary{background: linear-gradient(135deg, rgba(16,72,176,1), rgba(107,198,255,.98));border-color: transparent; color:#061027;}
.btn.ghost{background:transparent}
.hamburger{width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background: transparent;display:inline-flex;align-items:center;justify-content:center;}
.hamburger span{display:block;width:18px;height:2px;background:var(--text);position:relative}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text)}
.hamburger span::before{top:-6px} .hamburger span::after{top:6px}
@media(min-width: 1040px){ nav.links{display:flex} .hamburger{display:none} }

/* Drawer */
.drawer{position:fixed; inset:0; z-index:70; display:none; background: rgba(0,0,0,.55)}
.drawer.open{display:block}
.drawer .panel{position:absolute; right:0; top:0; height:100%; width:min(440px, 90%); background: rgba(10,28,63,.92); border-left:1px solid rgba(255,255,255,.12); backdrop-filter: blur(16px); padding:18px;}
.drawer .top{display:flex; align-items:center; justify-content:space-between; padding: 10px 6px 18px}
.drawer .x{width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background: transparent; color:var(--text); font-weight:900}
.drawer .panel a{display:block;padding:14px 12px;border-radius:14px;color:rgba(238,244,255,.84)} .drawer .panel a:hover{background: rgba(255,255,255,.08)}

/* Hero */
.hero{position:relative; padding: 132px 0 90px; overflow:hidden}
.hero .bg1,.hero .bg2{position:absolute; inset:0; pointer-events:none;}
.hero .bg1{background:linear-gradient(180deg, rgba(8,22,52,.18), rgba(6,16,39,.90)),url("https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&w=2800&q=80") center/cover no-repeat; transform: scale(1.03);}
.hero .bg2{background:radial-gradient(980px 560px at 18% 22%, rgba(16,72,176,.30), transparent 60%),radial-gradient(760px 520px at 82% 18%, rgba(107,198,255,.24), transparent 62%),radial-gradient(880px 560px at 74% 82%, rgba(16,72,176,.16), transparent 68%); mix-blend-mode: screen; opacity:.95;}
@keyframes drift{0%{transform: translate3d(0,0,0)}50%{transform: translate3d(-10px, 8px, 0)}100%{transform: translate3d(0,0,0)}}
.drift{animation: drift 10s ease-in-out infinite}
.hero-wrap{position:relative; display:grid; gap:26px; align-items:end}
@media(min-width: 1040px){ .hero-wrap{grid-template-columns: 1.15fr .85fr; gap:36px} }
.pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.pill{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background: transparent;color: rgba(238,244,255,.88);font-size:.86rem;}

/* Cards */
.card{border-radius: var(--radius);border:1px solid rgba(255,255,255,.14);background: transparent;backdrop-filter: blur(14px);box-shadow: var(--shadow2);overflow:hidden;}
.card.pad{padding:24px}
.meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.tag{font-size:.78rem;color: rgba(238,244,255,.82);border:1px solid rgba(255,255,255,.14);padding:6px 10px;border-radius:999px;background: rgba(0,0,0,.08);}
.hero-card{border-radius: var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.16); background: transparent; backdrop-filter: blur(16px); box-shadow: var(--shadow);}
.hero-card .img{height:340px;background:linear-gradient(180deg, rgba(7,18,42,.10), rgba(7,18,42,.92)),url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=2600&q=80") center/cover no-repeat;}
.hero-card .body{padding:18px 18px 20px}

/* Tiles */
.tile{border-radius: var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); box-shadow: 0 14px 36px rgba(0,0,0,.20); transition: transform .16s ease, border-color .16s ease, background .16s ease;}
.tile:hover{transform: translateY(-2px); border-color: rgba(107,198,255,.34); background: rgba(255,255,255,.08);}
.tile .img{height:220px; background-size:cover; background-position:center}
.tile .body{padding:18px}
.tile .body p{margin:0; color: rgba(238,244,255,.80)}

/* Marquee */
.marquee{overflow:hidden;border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10);background: rgba(255,255,255,.03);}
.track{display:flex; gap:18px; padding:18px 0; width:max-content; animation: scroll 26s linear infinite;}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-pill{padding:10px 14px;border:1px dashed rgba(238,244,255,.28);border-radius:999px;color: rgba(238,244,255,.80);background: rgba(255,255,255,.05);font-size:.85rem;white-space:nowrap;}

/* Band */
.band{position:relative;padding:92px 0;overflow:hidden;border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10);}
.band .bg{position:absolute; inset:0;background:linear-gradient(180deg, rgba(8,22,52,.20), rgba(6,16,39,.94)),url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=2800&q=80") center/cover no-repeat;transform: scale(1.02);}
.band .content{position:relative}
.quote{position:relative; padding:28px} .quote::before{content:"“"; position:absolute; top:-28px; left:12px; font-size:5rem; color: rgba(107,198,255,.22);}
.quote p{margin:0; color: rgba(238,244,255,.94); font-size:1.06rem} .quote .by{margin-top:10px; color: rgba(238,244,255,.78); font-size:.92rem}

/* Footer */
footer{border-top:1px solid rgba(255,255,255,.10); padding: 56px 0; background: rgba(6,16,39,.92);}
.footergrid{display:grid; gap:22px} @media(min-width: 860px){ .footergrid{grid-template-columns: 1.6fr 1fr 1fr 1fr} }
.footergrid a{display:block; padding:6px 0; color: rgba(238,244,255,.78); font-size:.92rem} .footergrid a:hover{color: var(--text)}
.note{color: rgba(238,244,255,.76); font-size:.9rem}
.hr{height:1px; background: rgba(255,255,255,.12); margin: 22px 0}
.footer-logo{display:block; height:160px; width:auto; margin:-22px 0 8px 0;} /* JPG has its own background */
.center{text-align:center} .mt16{margin-top:16px} .mt24{margin-top:24px} .mt32{margin-top:32px} .mt48{margin-top:48px}
.pagehead{padding: 120px 0 56px} .breadcrumb{font-size:.86rem; color: rgba(238,244,255,.70)} .breadcrumb a{color: rgba(238,244,255,.86)} .breadcrumb a:hover{color: var(--text)}
.form{display:grid; gap:14px} .twocol{display:grid; gap:14px} @media(min-width: 860px){.twocol{grid-template-columns: 1fr 1fr}}
.input,.textarea,.select{width:100%;padding:14px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background: transparent;color: var(--text);outline:none;}
.input:focus,.textarea:focus,.select:focus{border-color: rgba(107,198,255,.50)} .textarea{min-height:140px; resize:vertical} .help{font-size:.86rem;color: rgba(238,244,255,.74)}
@media (prefers-reduced-motion: reduce){.drift{animation:none} .track{animation:none} html{scroll-behavior:auto}}


/* Header light theme overrides */
header .btn{display:inline-flex;align-items:center;justify-content:center;padding: 11px 16px;border-radius:999px;border:1px solid rgba(10,28,63,.16);background: rgba(255,255,255,.55);color: rgba(10,28,63,.92); font-weight:760; font-size:.92rem;transition: transform .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;}
header .btn.ghost{background: transparent;}
header .btn:hover{transform: translateY(-1px); border-color: rgba(16,72,176,.35); background: rgba(255,255,255,.72);}
header .btn.primary{background: linear-gradient(135deg, rgba(16,72,176,1), rgba(107,198,255,.98));border-color: transparent; color:#061027;}
header .hamburger{border:1px solid rgba(6,16,39,.14); background: rgba(255,255,255,.72);}
header .hamburger span, header .hamburger span::before, header .hamburger span::after{background: rgba(6,16,39,.92);}


/* Safety overrides to keep site surfaces intact */
.card{background: rgba(255,255,255,.07);}
.tile{background: rgba(255,255,255,.06);}
