:root{
  --gold-1: #B08A3A;
  --gold-2: #C8A94F;
  --gold-3: #E2C675;
  --bg-dark: #000;
  --text: #e6d7a3;
}

*{box-sizing:border-box}
html,body{height:100%; margin:0; padding:0; font-family: "Garamond", "Times New Roman", serif; color:var(--text); background-color:var(--bg-dark);}

/* Fixed full-page background image */
body {
  background-image: url('assets/images/hero-bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* Global overlay */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.3) 100%);
  pointer-events: none;
  z-index:0;
}

/* Header */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:30; display:flex; justify-content:center;
  padding:14px 20px;
}
.header-inner{
  width:1100px; max-width:95%;
  display:flex; align-items:center; justify-content:space-between;
}
.logo-small{height:36px;}
.nav a{
  color:var(--gold-2); text-decoration:none;
  margin-left:22px; font-size:0.95rem; opacity:0.95;
}
.nav a:hover{color:var(--gold-3)}

/* Hero */
.hero{
  height:100vh; display:flex;
  align-items:center; justify-content:center;
  position:relative; z-index:10; padding-top:40px;
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2));
  z-index:1;
}
.hero-content{
  position:relative; z-index:20;
  text-align:center; padding:20px;
  max-width:1100px; margin:0 20px;
}
.logo-large{
  width:420px; max-width:85vw; height:auto;
  display:block; margin:0 auto 18px;
}
.tagline{
  color:var(--gold-3); font-size:1.15rem;
  margin-bottom:20px; opacity:0.95;
}
.cta{
  display:inline-block; padding:12px 30px;
  border:1px solid var(--gold-2);
  color:var(--gold-2); text-decoration:none;
  transition:all .25s; background:transparent;
}
.cta:hover{
  background:var(--gold-2); color:#000;
  transform:translateY(-3px);
}

/* Sections */
main{position:relative; z-index:20;}
.section{
  padding:90px 20px; max-width:1100px;
  margin:0 auto; text-align:left; color:var(--text);
}
.section h2{
  font-size:2rem; color:var(--gold-1); margin-bottom:6px;
}
.section h3{
  font-size:1.05rem; color:var(--gold-2);
  margin-top:0; margin-bottom:16px; font-weight:400;
}
.section p{
  color:rgba(230,215,163,0.95);
  line-height:1.65; margin-bottom:12px;
}

/* Divisions grid */
.divisions{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:32px; margin-top:10px;
}
.division-block{
  background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.2));
  border:1px solid rgba(176,138,58,0.15);
  padding:20px; transition:transform .25s, box-shadow .25s;
}
.division-block:hover{
  transform:translateY(-6px);
  box-shadow:0 8px 30px rgba(176,138,58,0.06);
}

/* Footer */
footer{
  padding:36px 18px; text-align:center;
  color:rgba(230,215,163,0.85);
}

/* Reveal animation */
.reveal{
  opacity:0; transform:translateY(30px);
  transition:all .9s cubic-bezier(.2,.9,.2,1);
}
.reveal.visible{
  opacity:1; transform:translateY(0);
}

/* Responsive */
@media (max-width:900px){
  .logo-large{width:300px}
  .nav a{margin-left:12px; font-size:0.9rem;}
}
@media (max-width:480px){
  .logo-large{width:220px}
  .logo-small{height:28px}
  .nav{display:none}
  .hero{padding-top:10vh}
  .section{padding:60px 18px}
}

 /* Hero slow zoom animation */
 @keyframes heroZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.03); }
 }
 .hero {
    animation: heroZoom 20s ease-in-out infinite alternate;
 }

 /* Section fade-in */
 .section {
    opacity:0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
 }
 .section.visible {
    opacity:1;
    transform: translateY(0);
 }


.site-header{
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}