/* RG Construction — Lean Delivery Approach
   Colors and fonts sampled from the original site */
:root {
  --green-dark: #2B5336;
  --green-mid:  #407C51;
  --black:      #000000;
  --white:      #FFFFFF;
  --gray:       #595959;
  --gray-light: #C7C7C7;
  --offwhite:   #E8E6E6;
  --font-head:  "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--white);
  color: var(--black);
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  overflow-x: hidden;
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 51;
  background: var(--white);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 32px;
  border-bottom: 1px solid #eee;
}

.site-header .logo {
  height: 70px;
  width: auto;
  flex-shrink: 0;
}

.site-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(22px, 4vw, 56px);
  letter-spacing: 0.5px;
  color: var(--black);
  text-align: center;
  flex: 1;
  text-transform: uppercase;
}

/* ---- Section bands ---- */
/* Band padding is tuned so section heights match the original site:
   green H2 bands ~99px, black H6 bands ~54px, white H6 bands ~40px. */
.band {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 20px;
}

.band h2, .band h6 {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.15;
  margin: 0;
}

.band h2 {
  font-size: clamp(24px, 4.5vw, 56px);
}

.band h6 {
  font-size: clamp(14px, 2vw, 25px);
}

.band-two-line h6 + h6 {
  margin-top: 6px;
}

.band-h1 .as-h1 {
  font-size: clamp(26px, 5vw, 57px);
}

.band-green {
  background: var(--green-dark);
  color: var(--white);
  padding: 17px 20px;
}

.band-black {
  background: var(--black);
  color: var(--white);
}

.band-white {
  background: var(--white);
  color: var(--black);
  padding: 5px 20px;
}

.band-spacer {
  padding: 0;
  min-height: 26px;
}

/* ---- Video sections ---- */
.video-section {
  width: 100%;
  background: var(--gray);
  line-height: 0;
  font-size: 0;
}

/* Videos render at their natural aspect ratio, full-bleed, exactly as on the
   original site. Most sources are 1920x1080; two are ultra-wide 1920x540. */
.video-section video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--gray);
}

/* ---- Footer ---- */
.site-footer {
  background: var(--gray);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding: 32px 20px;
}

.site-footer .btn {
  background: var(--green-mid);
  color: var(--black);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 2px;
  transition: opacity 0.15s ease;
}

.site-footer .btn:hover {
  opacity: 0.85;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .site-header {
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
  }
  .site-header .logo {
    height: 50px;
  }
  .band {
    padding: 18px 14px;
  }
}