/* ROOT THEME VARIABLES */
:root{
  --royal:#0B5394;
  --gold:#D4AF37;
  --navy:#01203F;
  --bg:#F8FAFB;
  --muted:#6B7280;
  --max-width:1100px;
  --radius:14px;
  --container-padding:20px;
  --page-gutter:18px; /* spare space from edges */
}

/* BASE */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background:var(--bg);
  color:#0b1724;
  line-height:1.45;
  overflow-x:hidden;
}
.container{max-width:var(--max-width); margin:0 auto; padding:var(--container-padding); padding-left:calc(var(--container-padding) + var(--page-gutter)); padding-right:calc(var(--container-padding) + var(--page-gutter));}
.muted{color:var(--muted)}
.small{font-size:13px}
.strong{font-weight:700}

/* HEADER */
.site-header{width:100%; background:linear-gradient(to right,#0B5394,#01203F); color:white; margin:0; padding:0}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px}
.brand{display:flex; gap:12px; align-items:center}
.brand-logo{height:56px; width:auto; background:white; padding:4px; border-radius:8px; object-fit:cover}
.brand-title{font-weight:900; font-size:20px; letter-spacing:.4px}
.brand-subtitle{font-size:12px; color:rgba(255,255,255,0.9)}
.navlinks{display:flex; gap:18px; align-items:center}
.nav-link{color:white; text-decoration:none; font-weight:600; font-size:15px; position:relative}
.nav-link::after{content:""; position:absolute; left:0; bottom:-6px; width:0%; height:2px; background:white; transition:.22s}
.nav-link:hover::after{width:100%}

/* MOBILE MENU */
.menu-btn{display:none; font-size:28px; background:transparent; color:white; border:0; cursor:pointer}
.mobile-nav{display:none; flex-direction:column; gap:12px; padding:16px 22px; background:rgba(0,0,0,0.25); border-radius:0 0 12px 12px; backdrop-filter:blur(6px); animation:slideDown .28s ease}
.mobile-nav a{color:white; text-decoration:none; font-size:17px; font-weight:600}
@keyframes slideDown{from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);}}

/* HERO */
.hero-wrapper{padding:0; margin:0}
.hero{display:grid; grid-template-columns:1fr 420px; gap:28px; align-items:start; background:linear-gradient(to right,#0B5394,#01203F); padding:44px 24px 64px; border-bottom-left-radius:14px; border-bottom-right-radius:14px}
.hero-left h1{font-size:32px; margin:0 0 12px; color:white}
.hero-lead{color:rgba(255,255,255,0.92); background:rgba(255,255,255,0.06); padding:12px; border-radius:10px; max-width:64ch}
.cta{margin-top:18px; display:flex; gap:12px}
.btn{padding:12px 18px; border-radius:10px; font-weight:700; text-decoration:none; display:inline-block; transition:transform .18s ease, box-shadow .18s ease}
.btn-primary{background:var(--gold); color:var(--navy)}
.btn-ghost{background:transparent; border:2px solid rgba(255,255,255,0.12); color:white}
.contact-quick{margin-top:18px; display:flex; gap:10px; align-items:center; color:rgba(255,255,255,0.9); flex-wrap:wrap}
.hero-right{background:white; color:var(--navy); border-radius:14px; padding:16px; box-shadow:0 10px 30px rgba(2,6,23,0.08)}
.card-item{display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid #eef2f6}
.link-card{text-decoration:none; color:inherit; display:flex; gap:12px; padding:10px 0; border-bottom:1px solid #eef2f6; transition:transform .18s ease, box-shadow .18s ease}
.link-card:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,0.08)}
.badge{height:56px; width:56px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:700}
.badge-blue{background:linear-gradient(180deg,#0B5394,#01203F); color:white}
.badge-gold{background:linear-gradient(180deg,#D4AF37,#b88612); color:var(--navy)}

/* SECTIONS */
.section{padding:44px 0}
.section-title{font-size:20px; color:var(--navy); margin:0 0 12px}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; padding-left:var(--page-gutter); padding-right:var(--page-gutter)}
.card{background:white; border-radius:12px; padding:18px; box-shadow:0 6px 18px rgba(0,0,0,0.06); transition:transform .22s ease}
.card:hover{transform:translateY(-4px)}
.lead{color:var(--muted); margin:0 0 12px}

/* FOUNDERS */
.founders-list{display:flex; flex-direction:column; gap:12px}
.founder{display:flex; gap:12px; align-items:flex-start}
.avatar{height:64px; width:64px; min-width:64px; border-radius:12px; background:linear-gradient(180deg,#0B5394,#01203F); color:white; display:flex; align-items:center; justify-content:center; font-weight:700}

/* CONTACT */
.contact-grid{display:grid; grid-template-columns:1fr 340px; gap:18px; padding-left:var(--page-gutter); padding-right:var(--page-gutter)}
.map{height:220px; border-radius:12px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.08)}
.map iframe{width:100% !important; height:100% !important; display:block; border:0}
@media(max-width:800px){ .contact-grid{grid-template-columns:1fr} .map{height:260px} }

/* FOOTER */
.site-footer{padding:28px 0; background:#f3f7fb; border-top:1px solid #e6eef7}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px}
.footer-logo{height:44px; object-fit:cover}

/* ANIMATIONS */
.fade-in{opacity:0; transform:translateY(12px); transition:opacity .7s ease, transform .7s ease}
.fade-in.show{opacity:1; transform:translateY(0)}
.slide-left{opacity:0; transform:translateX(-24px); transition:opacity .7s ease, transform .7s ease}
.slide-left.show{opacity:1; transform:translateX(0)}
.slide-right{opacity:0; transform:translateX(24px); transition:opacity .7s ease, transform .7s ease}
.slide-right.show{opacity:1; transform:translateX(0)}
.slide-up{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease}
.slide-up.show{opacity:1; transform:translateY(0)}
nav a.active{color:var(--gold)}
header.shadow{box-shadow:0 6px 28px rgba(0,0,0,0.12)}

/* RESPONSIVE */
@media(max-width:900px){
  .navlinks{display:none}
  .menu-btn{display:block}
  .hero{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .brand-logo{height:44px}
  .brand-title{font-size:18px}
  .hero-left h1{font-size:26px}
}
@media(max-width:360px){
  .gallery{grid-template-columns:1fr}
}