:root {
  --burgundy:#7A2E2E;
  --gold:#D5A249;
  --navy:#102A43;
  --white:#ffffff;
}

/* ================= GLOBAL ================= */

body {
  margin:0;
  font-family:'Open Sans', sans-serif;
  background-color:#ffffff;
  color:#102A43;
}

/* ================= HEADER ================= */

header {
  background-color:var(--burgundy);
  padding:1.75rem 1.5rem;
  border-bottom:4px solid var(--gold);
}

.header-container {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo-group {
  display:flex;
  align-items:center;
  gap:16px;
}

.logo-shield {
  height:105px;
}

.logo-text {
  height:44px;
}

nav {
  display:flex;
  gap:40px;
}

nav a {
  position:relative;
  color:var(--white);
  text-decoration:none;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:0.95rem;
  padding-bottom:4px;
}

nav a::after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0%;
  height:2px;
  background-color:var(--gold);
  transition:width 0.3s ease;
}

nav a:hover::after {
  width:100%;
}

/* Hide mobile nav by default */
.mobile-nav {
  display:none;
}

.hamburger {
  display:none;
}

/* ================= HERO ================= */

.hero {
  background-image:url('/assets/images/highmark-home-hero.jpg');
  background-size:cover;
  background-position:center;
  padding:6rem 2rem 8rem;
  text-align:center;
}

.hero-overlay {
  background-color:rgba(16,42,67,0.8);
  border-radius:32px;
  max-width:900px;
  margin:0 auto;
  padding:3rem 2rem 3.5rem;
  color:#ffffff;
}

.hero h1 {
  font-family:'Montserrat',sans-serif;
  font-size:3rem;
  margin:0 0 1rem;
  color:var(--gold);
}

.hero p {
  font-size:1.2rem;
  margin-bottom:2rem;
}

.hero-buttons {
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}

/* ================= SERVICE SECTIONS ================= */

.service-section {
  position:relative;
  padding:5rem 2rem;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#ffffff;
  text-align:center;
}

.service-section::before {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(16,42,67,0.45);
  z-index:1;
}

.service-inner {
  position:relative;
  z-index:2;
  max-width:900px;
  margin:0 auto;
  padding:2rem 1.5rem;
}

.residential-section {
  background-image:url('/assets/images/exterior-painting-hero-1.png');
}

.handyman-section {
  background-image:url('/assets/images/handyman-tools-hero-1.png');
}

.commercial-section {
  background-image:url('/assets/images/commercial-painting-hero-1.png');
}

.service-areas-section {
  background-image:url('/assets/images/service-areas-map-hero.png');
}

.service-section h2 {
  font-family:'Montserrat',sans-serif;
  font-size:2.3rem;
  margin-bottom:1rem;
}

.service-section p {
  font-size:1.1rem;
  line-height:1.6;
  margin-bottom:1.5rem;
}

/* ================= BUTTONS ================= */

.cta-button {
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:0.9rem;
  padding:10px 22px;
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  display:inline-block;
  text-transform:uppercase;
}

.cta-button.gold {
  background-color:var(--gold);
  color:var(--navy);
}

.cta-button.white {
  background-color:#ffffff;
  color:var(--navy);
}

/* ================= FOOTER ================= */

footer {
  background-color:#102A43;
  color:white;
  padding:2rem;
  text-align:center;
  font-size:0.9rem;
  border-top:4px solid var(--gold);
}

.footer-logo {
  height:72px;
  margin-bottom:1rem;
}

/* ================= MOBILE ================= */

@media (max-width:768px) {

  header {
    padding:2rem 1rem;
    text-align:center;
  }

  .header-container {
    flex-direction:column;
    align-items:center;
  }

  .logo-group {
    flex-direction:column;
    align-items:center;
    gap:10px;
  }

  .logo-shield {
    height:150px;
  }

  .logo-text {
    height:52px;
  }

  nav {
    display:none;
  }

  .hamburger {
    display:block;
    font-size:32px;
    color:white;
    cursor:pointer;
    margin-top:14px;
  }

  .mobile-nav {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    background-color:var(--burgundy);
    border-top:2px solid var(--gold);
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height 0.4s ease, opacity 0.3s ease;
  }

  .mobile-nav a {
    color:white;
    text-decoration:none;
    font-family:'Montserrat',sans-serif;
    font-weight:600;
  }

  .mobile-nav.open {
    max-height:500px;
    opacity:1;
    padding:1.25rem 0;
  }

}