/* Residential page — page-specific styles
   Reuses .projects, .testimonials, .blog-section, .banner-cta from home.css */

/* ----- HERO ----- */
.res-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--us-white);
  text-align: center;
  background-color: #0a0e14;
  background-image:
    linear-gradient(180deg, rgba(0,0,15,.5) 0%, rgba(0,0,15,.7) 100%),
    url('../public/images/2022/05/DJI_0191-scaled-1.webp');
  background-size: cover;
  background-position: center;
  padding: 180px 24px 120px;
}
.res-hero-inner {
  max-width: 900px;
  margin: 0 auto;
}
.res-hero h1 {
  font-size: 60px;
  line-height: 1.12;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 28px;
  letter-spacing: .005em;
}
.res-hero h1 .accent { color: var(--us-orange); }
.res-hero-cta {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ----- DELIVERS (split-image) ----- */
.res-delivers {
  padding: 90px 0;
  background: var(--us-white);
}
.res-delivers-inner {
  max-width: var(--us-container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 60px;
  align-items: center;
}
.res-delivers-visual {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3.4;
  box-shadow: var(--us-shadow-card);
}
.res-delivers-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.res-delivers-visual .play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--us-white);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--us-orange);
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  transition: transform .2s ease;
}
.res-delivers-visual .play-btn:hover { transform: translate(-50%, -50%) scale(1.08); }
.res-delivers-visual .play-btn svg { width: 22px; height: 22px; fill: currentColor; margin-left: 3px; }

.res-delivers-copy .eyebrow-text {
  color: var(--us-orange);
  font-size: 14px;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 500;
  letter-spacing: .02em;
}
.res-delivers-copy h2 {
  font-size: 34px;
  color: var(--us-navy);
  font-weight: 600;
  margin: 0 0 18px;
  line-height: 1.2;
}
.res-delivers-copy p {
  color: var(--us-text);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 16px;
}
.res-delivers-cta {
  display: inline-flex;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* ----- ORANGE BANNER ----- */
.res-banner-orange {
  background: var(--us-orange);
  color: var(--us-white);
  text-align: center;
  padding: 70px 24px;
}
.res-banner-orange h2 {
  color: var(--us-white);
  font-size: 36px;
  font-weight: 600;
  margin: 0 0 26px;
  line-height: 1.2;
}
.res-banner-orange .btn-outline-light:hover {
  background: var(--us-white);
  color: var(--us-orange);
}

/* ----- ENERGY INDEPENDENCE (dark) ----- */
.res-independence {
  background: #0B0B0B;
  color: var(--us-white);
  padding: 90px 0;
}
.res-independence-inner {
  max-width: var(--us-container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 0.95fr 1fr;
  gap: 60px;
  align-items: center;
}
.res-independence-copy .eyebrow-text {
  color: var(--us-orange);
  font-size: 14px;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 500;
  letter-spacing: .02em;
}
.res-independence-copy h2 {
  font-size: 36px;
  color: var(--us-white);
  font-weight: 600;
  margin: 0 0 20px;
  line-height: 1.2;
}
.res-independence-copy p {
  color: rgba(255,255,255,.72);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 16px;
}
.res-independence-cta {
  display: inline-flex;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.res-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.res-stat {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  padding: 28px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.res-stat .ic {
  width: 42px; height: 42px;
  color: var(--us-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.res-stat .ic svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.res-stat p {
  color: rgba(255,255,255,.92);
  font-size: 16px;
  line-height: 1.45;
  margin: 0;
  font-weight: 500;
}

/* ----- UNWAVERING COMMITMENT ----- */
.res-commitment {
  background: var(--us-white);
  padding: 90px 24px;
  text-align: center;
}
.res-commitment-inner {
  max-width: 800px;
  margin: 0 auto;
}
.res-commitment .eyebrow { justify-content: center; }
.res-commitment h2 {
  font-size: 34px;
  color: var(--us-navy);
  font-weight: 600;
  margin: 0 0 22px;
  line-height: 1.2;
}
.res-commitment p {
  color: var(--us-text);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 16px;
}
.res-commitment .btn {
  margin-top: 14px;
}

/* ----- RESPONSIVE ----- */
@media (max-width: 1024px) {
  .res-hero { min-height: 520px; padding: 150px 24px 90px; }
  .res-hero h1 { font-size: 44px; }
  .res-delivers-inner,
  .res-independence-inner { grid-template-columns: 1fr; gap: 40px; }
  .res-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .res-hero { min-height: 460px; padding: 130px 18px 70px; }
  .res-hero h1 { font-size: 32px; }
  .res-delivers,
  .res-independence,
  .res-commitment { padding-top: 60px; padding-bottom: 60px; }
  .res-banner-orange h2,
  .res-independence-copy h2,
  .res-delivers-copy h2,
  .res-commitment h2 { font-size: 26px; }
  .res-stats { grid-template-columns: 1fr; }
}