:root{ --gold:#f2b705; --black:#000; }

*{ margin:0; padding:0; box-sizing:border-box; font-family: Arial, Helvetica, sans-serif; }

html, body{
  width:100%;
  height:100%;
}

body{ background:#111; color:white; }

header{
  background:#000;
  padding:18px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  z-index:5;
}

.logo{ height:60px; }

nav a{
  color:var(--gold);
  text-decoration:none;
  margin-left:30px;
  font-weight:600;

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.est{
  color: var(--gold);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
}

nav a:hover{ opacity:.7; }

.hero{
  height:90vh;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  overflow:hidden;
  background: none;
}

/* background halves */
.hero-left,
.hero-right{
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  z-index:1;
}

/* LEFT: HOME */
.hero-left{
  left:0;
  background-image:url("../images/home.png");
}

/* RIGHT: BUILDING */
.hero-right{
  right:0;
  background-image:url("../images/building.png");
}

/* Foreground content */
.hero-logo,
.hero p,
.buttons{
  position:relative;
  z-index:3;
}

.hero-logo{
  width:22vw;
  max-width:320px;
  min-width:160px;
  height:auto;
  margin-bottom:20px;
}

.hero p{ margin:20px 0 50px; font-size:26px; }

.buttons{ display:flex; gap:40px; flex-wrap:wrap; }

.btn{
  background:#000;
  padding:25px 55px;
  border-radius:12px;
  text-decoration:none;
  color:white;
}

.btn h2{ color:var(--gold); }

.gallery{
  padding:60px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:25px;
}

.gallery img{ width:100%; border-radius:10px; }