/* Home New page (template-pages/tpl-home-new.php). Every rule is scoped to .home-new. */

.home-new {
  --hn-navy: #142160;
  --hn-gold: #f5c125;
  --hn-gold-txt: #e3ae0f;
  --hn-txt: rgba(31, 32, 33, 0.8);
  --hn-tint: linear-gradient(124deg, rgba(20, 33, 96, 0.06) 1%, rgba(245, 193, 37, 0.06) 100%);
  --hn-card-bdr: rgba(20, 33, 96, 0.06);
  --hn-card-sdw: 0 4px 40px rgba(20, 33, 96, 0.02);
  --hn-sec-pd: 100px;
  font-family: var(--fnt-m, 'Poppins', sans-serif);
  font-size: 16px;
  line-height: 26px;
  color: var(--hn-txt);
  background: #fdfcf9;
  overflow: hidden;
}

.home-new *,
.home-new *::before,
.home-new *::after {
  box-sizing: border-box;
}

.home-new h1,
.home-new h2,
.home-new h3,
.home-new p,
.home-new ul,
.home-new ol {
  margin: 0;
  padding: 0;
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
}

.home-new img {
  display: block;
  max-width: 100%;
}

.home-new .hn-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}

.home-new .hn-sec {
  position: relative;
  padding: var(--hn-sec-pd) 0;
}

.home-new .hn-tint {
  background: var(--hn-tint);
}

/* ── Type ─────────────────────────────── */

.home-new .hn-h2 {
  font-size: 40px;
  line-height: 51px;
  font-weight: 600;
  color: var(--hn-navy);
}

.home-new .hn-h3 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--hn-navy);
}

.home-new .hn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: var(--hn-gold);
}

.home-new .hn-eyebrow::before,
.home-new .hn-eyebrow-c::after {
  content: "";
  width: 57px;
  height: 1px;
  background: var(--hn-gold);
}

.home-new .hn-cnt p + p {
  margin-top: 16px;
}

.home-new .hn-cnt a,
.home-new .hn-card-body a {
  color: var(--hn-gold-txt);
  text-decoration: underline;
}

.home-new .hn-hd-c {
  max-width: 893px;
  margin: 0 auto;
  text-align: center;
}

.home-new .hn-hd-c .hn-h2 {
  max-width: 622px;
  margin: 0 auto;
}

.home-new .hn-lead {
  margin-top: 20px;
}

/* ── Buttons ──────────────────────────── */

.home-new .hn-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 25px;
}

.home-new .hn-hd-c .hn-btns,
.home-new .hn-btns-c {
  justify-content: center;
}

.home-new .hn-btns:empty {
  display: none;
}

.home-new .hn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 166px;
  height: 49px;
  padding: 0 24px;
  border: 1px solid var(--hn-gold);
  border-radius: 10px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer; /* the theme bundle sets a[href^=tel] to cursor: default */
  filter: drop-shadow(0 8px 10px rgba(245, 193, 37, 0.2));
  transition: background-color 0.2s, color 0.2s;
}

.home-new .hn-btn-primary {
  background: var(--hn-gold);
  color: var(--hn-navy);
}

.home-new .hn-btn-primary:hover,
.home-new .hn-btn-primary:focus-visible {
  background: #ffd24d;
}

.home-new .hn-btn-outline {
  background: transparent;
  color: var(--hn-gold);
}

.home-new .hn-btn-outline:hover,
.home-new .hn-btn-outline:focus-visible {
  background: var(--hn-gold);
  color: var(--hn-navy);
}

.home-new .hn-btn-icn {
  width: 18px;
  height: 18px;
}

.home-new .hn-txt-lnk {
  display: inline-block;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--hn-gold);
  text-decoration: underline;
}

/* ── Cards / grids ────────────────────── */

.home-new .hn-grid {
  display: grid;
  gap: 30px;
  list-style: none;
}

.home-new .hn-grid-2 { grid-template-columns: repeat(2, 1fr); }
.home-new .hn-grid-3 { grid-template-columns: repeat(3, 1fr); }
.home-new .hn-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }

.home-new .hn-card {
  padding: 30px;
  border: 1px solid var(--hn-card-bdr);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: var(--hn-card-sdw);
  backdrop-filter: blur(2px);
}

.home-new .hn-icn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hn-gold);
  border-radius: 12px;
  background: rgba(245, 193, 37, 0.1);
}

.home-new .hn-card-body {
  font-size: 14px;
  line-height: 26px;
  color: #1f2021;
}

/* ── 1. Hero ──────────────────────────── */

.home-new .hn-hero {
  position: relative;
  min-height: 630px;
  padding: 116px 0 100px;
  background: var(--hn-navy);
  overflow: hidden;
}

.home-new .hn-hero-bg {
  position: absolute;
  inset: 0;
}

.home-new .hn-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
}

.home-new .hn-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(20, 33, 96, 0) 21.7%, rgba(20, 33, 96, 0.75) 49.2%, #142160 100%);
}

.home-new .hn-hero-glow {
  position: absolute;
  top: -421px;
  left: -432px;
  max-width: none;
  pointer-events: none;
}

.home-new .hn-hero-cnt {
  max-width: 670px;
}

.home-new .hn-hero-badge {
  display: inline-block;
  padding: 6px 10px;
  background: linear-gradient(to right, rgba(20, 33, 96, 0.2), rgba(245, 193, 37, 0));
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: #fff;
}

.home-new .hn-hero-ttl {
  margin-top: 4px;
  font-size: 76.9px;
  line-height: 88px;
  color: #fff;
}

.home-new .hn-hero-ttl span {
  display: block;
}

.home-new .hn-grad-txt {
  font-weight: 500;
  background: linear-gradient(98deg, #fff 0%, var(--hn-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home-new .hn-hero-ttl-2 {
  font-weight: 700;
}

.home-new .hn-hero-txt {
  margin-top: 12px;
  font-size: 20px;
  line-height: 30px;
  color: rgba(255, 255, 255, 0.64);
}

.home-new .hn-hero .hn-btns {
  margin-top: 40px;
}

/* ── Image/text split (2, 5, 8) ───────── */

.home-new .hn-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 55px;
}

.home-new .hn-split-txt {
  flex: 0 1 629px;
}

.home-new .hn-split-txt .hn-h2 {
  max-width: 610px;
}

.home-new .hn-split-txt .hn-cnt {
  margin-top: 10px;
}

.home-new .hn-split-img img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}

.home-new .hn-split-img-l .hn-split-img {
  flex: 0 0 596px;
  height: 440px;
}

.home-new .hn-intro .hn-split {
  align-items: flex-start;
}

.home-new .hn-intro .hn-split-txt {
  flex-basis: 618px;
}

.home-new .hn-intro .hn-cnt {
  margin-top: 20px;
}

.home-new .hn-intro .hn-btns {
  margin-top: 24px;
}

.home-new .hn-intro {
  overflow-x: clip;
}

.home-new .hn-intro-imgs {
  position: relative;
  flex: 0 0 629px;
  height: 689px;
}

/* Solar panel line art: sits behind the photos and runs past the column edge. */
.home-new .hn-intro-art {
  position: absolute;
  top: 72.7%;
  left: 39.4%;
  width: 84.7%;
  height: auto;
  opacity: 0.04;
  pointer-events: none;
}

.home-new .hn-intro-img-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 596px;
  height: 554px;
  border-radius: 20px;
  object-fit: cover;
}

.home-new .hn-intro-img-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 288px;
  height: 288px;
  border: 10px solid #fff;
  border-radius: 20px;
  object-fit: cover;
}

.home-new #HomeNewWhy .hn-split-txt {
  flex-basis: 708px;
}

.home-new #HomeNewWhy .hn-split-txt .hn-h2 {
  max-width: 686px;
}

.home-new #HomeNewWhy .hn-cnt {
  margin-top: 20px;
}

.home-new #HomeNewWhy .hn-btns {
  margin-top: 40px;
}

.home-new .hn-why-img {
  flex: 0 0 572px;
  height: 521px;
}

/* ── 3. Services ──────────────────────── */

.home-new .hn-srv-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 68px;
  margin-bottom: 40px;
}

.home-new .hn-srv-hd > div {
  flex: 0 1 530px;
}

.home-new .hn-srv-txt {
  flex: 0 1 682px;
}

.home-new .hn-srv-card .hn-h3 {
  margin-top: 20px;
}

.home-new .hn-srv-card .hn-card-body {
  margin-top: 9px;
}

/* ── 4. EV readiness ──────────────────── */

.home-new .hn-ready .hn-grid {
  margin-top: 40px;
}

.home-new .hn-rdy-card {
  display: flex;
  gap: 16px;
  padding: 24px 32px 24px 24px;
}

.home-new .hn-rdy-body {
  padding-top: 9px;
}

.home-new .hn-rdy-card .hn-card-body {
  margin-top: 9px;
  color: var(--hn-txt);
}

.home-new .hn-rdy-card .hn-card-body ul {
  margin-top: 9px;
  padding-left: 18px;
  list-style: disc;
}

.home-new .hn-rdy-card .hn-card-body li + li {
  margin-top: 9px;
}

.home-new .hn-rdy-card .hn-card-body strong {
  font-weight: 700;
  color: var(--hn-navy);
}

.home-new .hn-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 58px;
  font-weight: 600;
  text-align: center;
}

.home-new .hn-note img {
  flex: none;
}

.home-new .hn-ready-art {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 312px;
  height: 337px;
  max-width: none;
  object-fit: cover;
  object-position: left center;
  opacity: 0.04;
  pointer-events: none;
}

/* ── 6. Process steps ─────────────────── */

.home-new .hn-steps {
  margin-top: 40px;
}

.home-new .hn-step {
  position: relative;
  min-height: 310px;
  margin-top: 34px;
  padding: 54px 25px 30px;
  border: 1px solid rgba(20, 33, 96, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: var(--hn-card-sdw);
  text-align: center;
  font-size: 14px;
}

.home-new .hn-step .hn-h3 {
  max-width: 229px;
  margin: 0 auto 6px;
  line-height: 22px;
}

.home-new .hn-step-num {
  position: absolute;
  top: -34px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border: 6px solid #fff;
  border-radius: 50%;
  background: var(--hn-navy);
  font-size: 20px;
  font-weight: 600;
  color: var(--hn-gold);
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 9px rgba(20, 33, 96, 0.1));
}

.home-new .hn-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -21px;
  width: 21px;
  height: 1px;
  background: url("images/home-new/step-connector.svg") no-repeat center / 21px 1px;
}

/* ── 7. Areas ─────────────────────────── */

.home-new .hn-areas {
  max-width: 779px;
}

.home-new .hn-areas .hn-cnt {
  margin-top: 11px;
}

.home-new .hn-areas .hn-btns {
  margin-top: 38px;
}

/* ── 9. Estimate CTA ──────────────────── */

.home-new .hn-cta {
  position: relative;
  padding: 80px 0;
  background: var(--hn-navy);
  overflow: hidden;
  color: rgba(255, 255, 255, 0.8);
}

.home-new .hn-cta .hn-h2 {
  max-width: 552px;
  color: #fff;
}

.home-new .hn-cta .hn-hd-c {
  max-width: 653px;
}

.home-new .hn-cta .hn-cnt {
  margin-top: 20px;
}

.home-new .hn-cta .hn-cnt a {
  color: var(--hn-gold);
}

.home-new .hn-cta .hn-cnt p + p {
  margin-top: 16px;
}

.home-new .hn-cta .hn-btns {
  margin-top: 40px;
}

.home-new .hn-cta .hn-btn-primary {
  font-weight: 600;
}

.home-new .hn-cta-glow {
  position: absolute;
  max-width: none;
  pointer-events: none;
}

.home-new .hn-cta-glow-1 { top: -956px; left: -690px; }
.home-new .hn-cta-glow-2 { top: -293px; left: calc(50% - 363px); }

.home-new .hn-cta-art {
  position: absolute;
  background: #fff;
  opacity: 0.08;
  pointer-events: none;
  -webkit-mask: var(--hn-art) no-repeat 0 0 / 100% 100%;
  mask: var(--hn-art) no-repeat 0 0 / 100% 100%;
}

.home-new .hn-cta-art-lamps {
  --hn-art: url("images/home-new/cta-lamps-lineart.png");
  top: -88px;
  left: -290px;
  width: 710px;
  height: 451px;
}

.home-new .hn-cta-art-ev {
  --hn-art: url("images/home-new/cta-ev-lineart.png");
  top: 176px;
  left: calc(50% + 366px);
  width: 708px;
  height: 374px;
}

/* ── 10. FAQs ─────────────────────────── */

.home-new .hn-faqs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

.home-new .hn-faq {
  border: 1px solid var(--hn-card-bdr);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--hn-card-sdw);
}

.home-new .hn-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 26px 30px;
  list-style: none;
  cursor: pointer;
}

.home-new .hn-faq summary::-webkit-details-marker {
  display: none;
}

.home-new .hn-faq-q {
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  color: var(--hn-navy);
}

.home-new .hn-faq-chev {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--hn-gold);
  border-radius: 12px;
  background: rgba(245, 193, 37, 0.1);
  transition: transform 0.2s;
}

.home-new .hn-faq[open] .hn-faq-chev {
  transform: rotate(180deg);
}

.home-new .hn-faq[open] summary {
  align-items: flex-start;
  padding-bottom: 0;
}

.home-new .hn-faq-a {
  max-width: 1153px;
  padding: 16px 30px 30px;
}

.home-new #HomeNewFaqs .hn-btns {
  margin-top: 40px;
}

/* ── Responsive ───────────────────────── */

@media screen and (max-width: 1279px) {
  .home-new {
    --hn-sec-pd: 80px;
  }

  .home-new .hn-wrap {
    padding: 0 40px;
  }

  .home-new .hn-split,
  .home-new .hn-srv-hd {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .home-new .hn-srv-hd {
    gap: 16px;
  }

  .home-new .hn-split-img-l {
    flex-direction: column-reverse;
  }

  .home-new .hn-split-txt,
  .home-new .hn-srv-hd > div,
  .home-new .hn-srv-txt,
  .home-new #HomeNewWhy .hn-split-txt {
    flex-basis: auto;
  }

  .home-new .hn-split-img-l .hn-split-img,
  .home-new .hn-why-img {
    flex: none;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .home-new .hn-intro-imgs {
    flex: none;
    width: 100%;
    max-width: 629px;
    height: auto;
    aspect-ratio: 629 / 689;
    margin: 0 auto;
  }

  .home-new .hn-intro-img-1 {
    width: 94.8%;
    height: 80.4%;
  }

  .home-new .hn-intro-img-2 {
    width: 45.8%;
    height: auto;
    aspect-ratio: 1;
  }

  .home-new .hn-grid-3,
  .home-new .hn-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-new .hn-grid-4 {
    row-gap: 54px;
  }

  .home-new .hn-step::after {
    display: none;
  }

  .home-new .hn-cta-art-ev {
    left: auto;
    right: -360px;
  }
}

@media screen and (max-width: 1023px) {
  .home-new .hn-grid-2 {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px) {
  .home-new {
    --hn-sec-pd: 60px;
  }

  .home-new .hn-wrap {
    padding: 0 20px;
  }

  .home-new .hn-h2 {
    font-size: 30px;
    line-height: 38px;
  }

  .home-new .hn-hero {
    min-height: 0;
    padding: 70px 0 60px;
  }

  .home-new .hn-hero-bg::after {
    background: linear-gradient(to left, rgba(20, 33, 96, 0.55) 0%, rgba(20, 33, 96, 0.85) 50%, #142160 100%);
  }

  .home-new .hn-hero-ttl {
    font-size: 44px;
    line-height: 52px;
  }

  .home-new .hn-hero-txt {
    font-size: 17px;
    line-height: 27px;
  }

  .home-new .hn-hero .hn-btns {
    margin-top: 30px;
  }

  .home-new .hn-grid-2,
  .home-new .hn-grid-3,
  .home-new .hn-grid-4 {
    grid-template-columns: 1fr;
  }

  .home-new .hn-card {
    padding: 24px;
  }

  .home-new .hn-rdy-card {
    flex-direction: column;
  }

  .home-new .hn-rdy-body {
    padding-top: 0;
  }

  .home-new .hn-step {
    min-height: 0;
  }

  .home-new .hn-note {
    align-items: flex-start;
    text-align: left;
  }

  .home-new .hn-faq summary {
    gap: 16px;
    padding: 20px;
  }

  .home-new .hn-faq-q {
    font-size: 17px;
    line-height: 24px;
  }

  .home-new .hn-faq-a {
    padding: 12px 20px 20px;
  }

  .home-new .hn-btn {
    flex: 1 1 auto;
  }

  .home-new .hn-ready-art,
  .home-new .hn-cta-art {
    display: none;
  }
}