
/* Minimal layout restore */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0b1e3f;color:#fff;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
header{position:sticky;top:0;background:rgba(11,30,63,.85);backdrop-filter:saturate(120%) blur(8px);z-index:1000}
.hero{padding:28px 0 16px}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.hero-fig{width:100%}
h1,h2,h3{line-height:1.2;margin:0}
h1{font-size:clamp(28px,4vw,44px)}
h2{font-size:clamp(22px,3vw,32px);opacity:.92;margin-bottom:8px}
p{margin:6px 0 12px;opacity:.9}
.grid{display:grid;gap:16px}
.g-3{grid-template-columns:repeat(3,1fr)}
.card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.24);border-radius:12px;padding:10px 14px}
.btn.gold{background:linear-gradient(180deg,#f3d48b,#d4af37);color:#0b1e3f;border:none}
.sec{padding:40px 0}
.stat{font-variation-settings:'wght' 800}
/* Responsive */
@media (max-width: 960px){
  .hero-in{grid-template-columns:1fr;gap:16px}
  .g-3{grid-template-columns:1fr}
}


/* Hero image sizing */
.hero img, .hero-fig img { width:100%; height:auto; max-height: min(48vh, 520px); object-fit: contain }
.hero { padding-top: clamp(20px, 6vh, 48px) }


/* === HERO (new) === */
:root{
  --navy:#0b1e3f;
  --navy-2:#102a58;
  --gold:#d4af37;
  --ink:#0a0f1a;
}
.hero--new{
  position:relative;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(212,175,55,.18), transparent 60%),
    radial-gradient(900px 480px at -10% 40%, rgba(212,175,55,.10), transparent 60%),
    linear-gradient(180deg, #0b1e3f 0%, #0b1e3f 60%, #0a162f 100%);
  padding: clamp(26px, 6vw, 64px) 0;
  overflow:hidden;
}
.hero--new .hero-in{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(16px, 3vw, 28px);
  align-items:center;
}
.hero--new .hero-copy h1{
  font-weight:800;
  letter-spacing:.2px;
  margin:0 0 8px;
  font-size: clamp(28px, 4.2vw, 48px);
}
.hero--new .hero-copy .hero-sub{
  font-size: clamp(16px, 1.6vw, 20px);
  opacity:.92;
  margin: 4px 0 16px;
}
.hero--new .hero-ctas{ display:flex; gap:10px; flex-wrap:wrap }
.hero--new .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.22) }
.hero--new .btn.gold{ background:linear-gradient(180deg,#f3d48b,#d4af37); color:#0b1e3f; border:none }
.hero--new .hero-fig{ display:flex; justify-content:center; align-items:center }
.hero--new .hero-fig img{
  width: min(460px, 90%);
  height:auto;
  aspect-ratio:auto;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.25));
}
@media (max-width: 960px){
  .hero--new .hero-in{ grid-template-columns: 1fr; gap:18px }
  .hero--new .hero-fig img{ width:min(420px,75%); }
}


/* === HERO (photo/video) === */
.hero--new{ position:relative; overflow:hidden; padding: clamp(28px, 6vw, 72px) 0 }
.hero--new .hero-bg, .hero--new .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hero--new .hero-bg{ background-image:url('/assets/img/hero_bg.jpg'); background-size:cover; background-position:center; filter: saturate(110%); transition: transform .6s ease, opacity .5s ease; }
.hero--new:before{ content:''; position:absolute; inset:0; background: radial-gradient(800px 380px at 78% -10%, rgba(212,175,55,.18), transparent 60%), radial-gradient(700px 360px at -10% 45%, rgba(212,175,55,.09), transparent 60%), linear-gradient(180deg, rgba(11,30,63,.94), rgba(11,30,63,.88) 55%, rgba(10,22,47,.98)); pointer-events:none }
.hero--new .container{ position:relative; z-index:2 }
.hero--new .hero-video{ display:none; filter:saturate(110%) }
.hero--new.hero--has-video .hero-video{ display:block }
.hero--new.hero--has-video .hero-bg{ opacity:0 }
.hero--new .hero-in{ display:grid; grid-template-columns:1.05fr .95fr; gap: clamp(16px, 3vw, 28px); align-items:center }
.hero--new h1{ font-weight:800; margin:0 0 8px; font-size: clamp(28px,4.2vw,48px); letter-spacing:.2px }
.hero--new .hero-sub{ font-size: clamp(16px,1.6vw,20px); opacity:.92; margin:4px 0 16px }
.hero--new .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.22) }
.hero--new .btn.gold{ background:linear-gradient(180deg,#f3d48b,#d4af37); color:#0b1e3f; border:none }
.hero--new .hero-fig{ display:flex; justify-content:center; align-items:center; will-change:transform }
.hero--new .hero-fig img{ width:min(460px, 90%); height:auto; filter: drop-shadow(0 12px 24px rgba(0,0,0,.28)) }
/* Enter animation */
.hero--new .hero-copy, .hero--new .hero-fig{ opacity:0; transform: translateY(8px); transition: transform .6s ease, opacity .6s ease }
.hero--new.is-entered .hero-copy, .hero--new.is-entered .hero-fig{ opacity:1; transform:none }
/* Mobile */
@media (max-width: 960px){
  .hero--new .hero-in{ grid-template-columns:1fr; gap:18px }
  .hero--new .hero-fig img{ width:min(420px,76%) }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero--new .hero-bg{ transition:none }
  .hero--new .hero-copy, .hero--new .hero-fig{ transition:none; transform:none; opacity:1 }
}
