/* =====================================================================
   Energy Performance Program – styles
   Desktop layout matches the 1440px design frame exactly; below 1280px
   the layout becomes fluid and stacks on smaller screens.
   ===================================================================== */

:root {
  --green: #2E813E;
  --green-light: #3C974E;
  --green-accent: #6EC54A;
  --green-dark: #1B2E17;
  --highlight: #D9FFC3;
  --bg: #F0F2ED;
  --ink: #000000;
  --ink-logo: #242424;
  --rule: #D9D9D9;
  --white: #ffffff;
  --box-grey: #F3F4F6;
  --font: "Source Sans 3", "Source Sans Pro", "Segoe UI", Arial, sans-serif;
  --container: 1240px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 19.2px;
  line-height: 21px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--green-accent); outline-offset: 3px; }
.hero :focus-visible, .how :focus-visible, .site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--white); }
.contact-form :focus-visible { outline-color: var(--green); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}
.container-faq { max-width: 1238px; }   /* FAQ / EWRB content sits at x=102 in the design */

/* Decorative vertical guide lines that run at x=49 / x=1392 in the design */
.framed { position: relative; }
.framed::before, .framed::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--rule); pointer-events: none;
}
.framed::before { left: 49px; }
.framed::after { right: 47px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 20px; border-radius: 8px;
  font-size: 17px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-white { background: var(--white); color: var(--green); }
.btn-white:hover { background: var(--highlight); }
.btn-outline { border: 1px solid var(--white); color: var(--white); }
.btn-outline:hover { background: rgba(255,255,255,.12); }
.btn-green { background: var(--green); color: var(--white); }
.btn-green:hover { background: var(--green-light); }
.btn-sm { height: 32px; padding: 0 16px; font-size: 15px; }

/* ---------- Icon boxes ---------- */
.icon-box {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border: 1px solid var(--green); border-radius: 8px;
  background: var(--white);
}
.icon-box img { width: 48px; height: 48px; }
.icon-box-grey { background: var(--box-grey); }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
  position: relative; z-index: 5;
  height: 85px; background: var(--green);
  border-bottom: 1px solid var(--bg);
}
.header-inner {
  display: flex; align-items: center; height: 84px; position: relative;
}
.logo { display: block; margin-left: 1px; }
.logo img { width: 96px; height: 45px; }

.primary-nav { display: flex; flex: 1; align-items: center; }
.nav-links {
  display: flex; gap: 33px; margin: 0 auto;
  font-size: 15px; font-weight: 600; color: var(--white);
}
.nav-links a { padding: 8px 0; }
.nav-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav-signin { font-size: 15px; font-weight: 600; color: var(--bg); padding: 8px 0; }
.nav-signin:hover { text-decoration: underline; text-underline-offset: 4px; }

.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 10px;
  flex-direction: column; justify-content: space-between; margin-left: auto;
}
.nav-toggle span { display: block; height: 2px; background: var(--white); border-radius: 2px; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative; background: var(--green); color: var(--white);
  overflow: hidden;
}
/* the two vertical rules run the full height of the green band: header + hero */
.site-header::before, .site-header::after,
.hero::before, .hero::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--bg);
}
.site-header::before, .hero::before { left: 49px; }
.site-header::after, .hero::after { right: 47px; }

.hero-inner { position: relative; min-height: 669px; }
.hero-copy { width: 620px; padding: 124px 0 32px; }

.hero h1 {
  font-size: 59.4px; line-height: 64px; font-weight: 600;
  letter-spacing: -0.025em;
}
.hero-lead { margin-top: 36px; font-size: 19px; line-height: 27px; }
.hero-actions { display: flex; gap: 12px; margin-top: 36px; }
.hero-actions .btn { width: min(134px, 100%); }
.hero-tagline { margin-top: 121px; font-size: 17px; line-height: 24px; color: var(--bg); }
.hero-partners { display: flex; align-items: flex-start; gap: 19px; margin-top: 3px; height: 69px; }
.logo-enerva { width: 100px; height: auto; margin-top: 22px; }
.logo-ieso { width: 129px; max-width: 100%; height: auto; }

.hero-image {
  position: absolute; top: 12px; right: -40px;   /* image spans x=744..1380 in the 1440 frame */
  width: 636px; height: 645px;
}
.hero-image > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.hero-flag { position: absolute; top: 32px; right: 18px; width: 95px; height: 54px; }

/* =====================================================================
   BENEFIT STRIP
   ===================================================================== */
.strip { background: var(--white); height: 71px; }
.strip-inner {
  display: grid; grid-template-columns: repeat(3, 1fr);
  width: 1172px; max-width: 100%; height: 71px; margin: 0 auto;
  text-align: center; font-size: 21px; font-weight: 600; line-height: 71px;
}
.strip-inner li + li { position: relative; }
.strip-inner li + li::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--rule);
}

/* =====================================================================
   GROW YOUR SAVINGS
   ===================================================================== */
.grow {
  padding: 109px 0 110px; text-align: center;
  border-bottom: 1px solid var(--rule);
}
.grow h2 {
  font-size: 33.6px; line-height: 40px; font-weight: 400; color: var(--green);
}
.grow p { max-width: 776px; margin: 20px auto 0; }
.grow p + p { margin-top: 28px; max-width: 820px; }
.grow strong { font-weight: 700; }
mark {
  display: inline-block; background: var(--highlight); color: inherit;
  padding: 0 6px; line-height: 21px;
}

/* =====================================================================
   EASIER TO PARTICIPATE
   ===================================================================== */
.easier { padding: 110px 0 106px; border-bottom: 1px solid var(--rule); }
.easier-inner { display: flex; gap: 53px; align-items: center; }
.easier-image { flex: 0 0 608px; height: 575px; }
.easier-image img { width: 100%; height: 100%; object-fit: cover; object-position: 7.4% 0; }
.easier-copy { flex: 1; min-width: 0; }

.easier h2, .incentives h2, .eligibility h2, .how h2, .news h2, .faq h2, .contact h2 {
  font-size: 51.2px; line-height: 55px; font-weight: 400; color: var(--green);
}

.feature-list { margin-top: 50px; }
.feature-list li { display: flex; gap: 16px; align-items: flex-start; }
.feature-list li + li { margin-top: 48px; }
.feature-list h3 { font-size: 21.3px; line-height: 25px; font-weight: 600; }
.feature-list p { margin-top: 4px; font-size: 17px; line-height: 21px; }

/* =====================================================================
   INCENTIVES
   ===================================================================== */
.incentives { padding: 111px 0 118px; }
.incentives-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.incentives-copy { flex: 0 1 560px; }
.formula { margin-top: 52px; font-size: 25.6px; line-height: 28px; }
.formula strong { font-weight: 600; }
.paid { margin-top: 44px; color: var(--green); }

.rate-card {
  flex: 0 0 547px; min-height: 456px; padding: 46px 49px 48px;
  background: var(--green); color: var(--white);
}
.rate + .rate { margin-top: 112px; }
.rate-value {
  font-size: 67px; line-height: 80px; font-weight: 400;
  -webkit-text-stroke: 1px var(--white);
}
.rate-desc { margin-top: 13px; }

/* =====================================================================
   TESTIMONIAL
   ===================================================================== */
.testimonial {
  display: flow-root;              /* keeps the video's negative margin inside the section */
  background: var(--green); color: var(--white); padding-top: 110px;
}
.testimonial blockquote { text-align: center; }
.testimonial blockquote p { font-size: 38.4px; line-height: 41px; }
.testimonial mark {
  line-height: 37px; color: var(--green); vertical-align: baseline;
  padding: 0 23px 0 6px; margin: 0 -23px 0 -6px;   /* highlight boxes sit exactly as in the design */
}
.testimonial mark + br + mark { padding: 0 6px 0 26px; margin: 0 -6px 0 -26px; }
.testimonial blockquote footer { margin-top: 48px; }
.avatar {
  display: block; width: 54px; height: 54px; margin: 0 auto;
  border-radius: 50%; overflow: hidden; background: #d9d9d9;
}
.avatar img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
/* the design shows this portrait mirrored; scoped to the one photo, not all avatars */
.avatar img.is-flipped { transform: scaleX(-1); }
.testimonial cite {
  display: block; margin-top: 24px; font-style: normal;
  font-size: 21.3px; line-height: 22px;
}
.testimonial .role { display: block; font-size: 17px; line-height: 20px; }

.dots { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 47px; }
.dot {
  width: 18px; height: 18px; border-radius: 9px; background: var(--rule);
  border: 0; padding: 0; cursor: pointer;
  transition: width .25s ease, background-color .25s ease;
}
.dot-active { width: 106px; background: var(--green-light); }

.video {
  position: relative; z-index: 1; width: 750px; height: 419px; margin: 54px auto -324px;
  background: #000;
}
.video img, .video iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }

/* =====================================================================
   ELIGIBILITY
   ===================================================================== */
.eligibility { padding: 545px 0 112px; }      /* 434px video overlap area + 111px */
.video-rule { position: absolute; left: 0; right: 0; top: 434px; margin: 0; border: 0; height: 1px; background: var(--rule); }
.eligibility .container { position: relative; }
.eligibility-inner { display: flex; gap: 98px; align-items: flex-start; }
.eligibility-image {
  position: relative; flex: 0 0 608px; height: 576px; overflow: hidden;
}
.eligibility-image > img:first-child {
  position: absolute; left: 0; top: -9.92%; width: 134.23%; max-width: none; height: auto;
}
.honeycomb { position: absolute; inset: 0; width: 100%; height: 100%; }
.eligibility-copy { flex: 1; min-width: 0; padding-top: 52px; }
.eligibility h3, .qualify h3, .before-apply h3 { font-size: 25.6px; line-height: 28px; font-weight: 600; }
.eligibility-copy h3 { margin-top: 56px; }
.check-list { margin-top: 60px; }
.check-list li { display: flex; align-items: center; gap: 18px; min-height: 50px; }
.check-list li + li { margin-top: 61px; }

.qualify {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-top: 40px; padding-right: 66px;
}
.qualify p { margin-top: 15px; }
.qualify .btn { width: min(195px, 100%); }

/* =====================================================================
   HOW IT WORKS
   ===================================================================== */
.how { background: var(--green); color: var(--white); padding: 110px 0; text-align: center; }
.how h2 { color: var(--white); }
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 60px; text-align: left;
}
.steps li {
  min-height: 300px; padding: 37px 24px 30px 37px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--bg);
}
.step-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 24px; border: 1px solid var(--ink); border-radius: 25px;
  font-size: 25.6px; font-weight: 600; line-height: 1;
}
.steps h3 { margin-top: 24px; font-size: 25.6px; line-height: 28px; font-weight: 600; }
.steps p { margin-top: 16px; font-size: 17px; line-height: 18px; }

.before-apply { margin-top: 60px; }
.before-apply p { margin-top: 15px; }
.before-apply .btn { margin-top: 24px; width: min(279px, 100%); }

/* =====================================================================
   WHAT'S NEW
   ===================================================================== */
.news { padding: 116px 0 109px; text-align: center; border-bottom: 1px solid var(--rule); }
.news-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 29px;
  margin-top: 81px; text-align: left;
}
.news-card {
  display: flex; flex-direction: column; min-height: 666px;
  background: var(--white); border: 1px solid rgba(0,0,0,.15);
}
.news-img { width: 100%; height: 279px; object-fit: cover; flex: 0 0 auto; }
.news-img-1 { object-position: 93.3% 0.4%; }
.news-img-2 { object-position: 0 93.2%; }
.news-img-3 { object-position: 0 22.8%; }
.news-body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 24px 25px; }
.news-body h3 { font-size: 30px; line-height: 39px; font-weight: 400; }
.news-body p { margin-top: 8px; font-size: 17px; line-height: 24px; }
.news-body time { margin-top: auto; padding-top: 24px; font-size: 15px; line-height: 20px; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq { padding: 112px 0 130px; }
.faq-tabs { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 40px; }
.pill {
  display: inline-flex; align-items: center; height: 40px; padding: 0 26px;
  border: 1px solid var(--green); border-radius: 20px;
  font-size: 17px; font-weight: 600; color: var(--green);
  transition: background-color .15s;
}
.pill:hover { background: rgba(217,255,195,.5); }
.pill.is-active { background: var(--highlight); }

.faq-list { margin-top: 9px; }
.faq-item { border-bottom: 1px solid var(--ink); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 28px 0 20px; cursor: pointer; list-style: none;
  font-size: 21.33px; line-height: 26px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  flex: 0 0 27px; width: 27px; height: 27px; margin-right: 10px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjEzMDMgNzE1MiAyNyAyNyIgd2lkdGg9IjI3IiBoZWlnaHQ9IjI3Ij48cGF0aCBkPSJNMTMyNSA3MTU3TDEzMDQgNzE3OCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xMzI3LjYyIDcxNzRDMTMyNy42MiA3MTc0IDEzMjguOTggNzE1Ny45IDEzMjYuNTQgNzE1NS40NkMxMzI0LjEgNzE1My4wMiAxMzA4IDcxNTQuMzggMTMwOCA3MTU0LjM4IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") center / 27px no-repeat;
}
.faq-item[open] .faq-icon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjEzMDMgNjk4NCAyNyAyNyIgd2lkdGg9IjI3IiBoZWlnaHQ9IjI3Ij48cGF0aCBkPSJNMTMyNSA3MDA2TDEzMDQgNjk4NSIgc3Ryb2tlPSIjNkVDNTRBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTEzMDggNzAwOC42MkMxMzA4IDcwMDguNjIgMTMyNC4xIDcwMDkuOTggMTMyNi41NCA3MDA3LjU0QzEzMjguOTggNzAwNS4xIDEzMjcuNjIgNjk4OSAxMzI3LjYyIDY5ODkiIHN0cm9rZT0iIzZFQzU0QSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg=="); }
.faq-item[open] summary { padding-bottom: 0; }
.faq-answer { padding: 12px 0 18px; max-width: 940px; font-size: 17px; line-height: 22px; }
.faq-answer p + p { margin-top: 12px; }
.faq-answer ul { margin-top: 12px; padding-left: 22px; list-style: disc; }
.faq-answer li + li { margin-top: 8px; }
.faq-answer .footnote { margin-top: 12px; font-size: 15px; }
.faq-empty { padding: 24px 0; color: #6b6b6b; font-style: italic; }
/* everything underlined; hand cursor on links and emails, arrow on phone numbers */
.faq-answer a { text-decoration: underline; cursor: pointer; }
.faq-answer a[href^="tel:"] { cursor: default; }
.faq-answer .placeholder { color: #6b6b6b; font-style: italic; }

/* =====================================================================
   EWRB
   ===================================================================== */
.ewrb { background: var(--white); padding: 110px 0; }
.ewrb-inner { display: flex; justify-content: space-between; gap: 60px; }
.ewrb-copy { flex: 0 1 540px; }
.ewrb h2 { font-size: 25.6px; line-height: 28px; font-weight: 400; color: var(--green); }
.ewrb-copy p { margin-top: 47px; }
.ewrb-copy .btn { margin-top: 24px; width: min(257px, 100%); }
.ewrb-image { margin-top: 24px; width: 249px; height: 249px; }
.ewrb-list { flex: 0 0 575px; }
.ewrb-list li { display: flex; align-items: center; gap: 17px; min-height: 50px; }
.ewrb-list li + li { margin-top: 61px; }

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact { padding: 112px 0; }
.contact-inner { display: flex; justify-content: space-between; gap: 40px; align-items: flex-start; }
.contact-logo { margin-top: 48px; width: 94px; height: 44px; }
.contact-lines { margin-top: 27px; }
.contact-lines li { display: flex; align-items: center; }
.contact-lines li + li { margin-top: 19px; }
.contact-mail img { width: 22px; height: 16px; margin-right: 16px; }
.contact-phone img { width: 16px; height: 16px; margin-right: 15px; }
.contact-mail a:hover { text-decoration: underline; }
/* The phone stays a tel: link so it is still tappable on mobile, but on a
   desktop pointer it reads as plain text - no hand cursor, no underline. */
.contact-phone a { cursor: default; text-decoration: none; }
.program-details { margin-top: 62px; font-size: 25.6px; line-height: 28px; }
.program-details a {
  margin-left: 8px; font-weight: 600; color: var(--green);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}

.contact-form {
  flex: 0 0 560px; padding: 40px; background: var(--white); color: var(--ink);
}
.contact-form h3 {
  text-align: center; font-size: 27px; line-height: 33px; font-weight: 400;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.contact-form h3 + .form-row { margin-top: 24px; }
.contact-form input, .contact-form textarea {
  width: 100%; height: 52px; padding: 0 16px;
  font: inherit; font-size: 17px; font-weight: 400; color: var(--ink);
  background: var(--bg); border: 1px solid var(--bg); border-radius: 8px;
  outline: none; transition: background-color .15s, border-color .15s;
}
.contact-form textarea { height: 120px; margin-top: 16px; padding: 10px 16px; line-height: 20px; resize: none; display: block; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #6b6b6b; opacity: 1; }
.contact-form input:focus, .contact-form textarea:focus { background: var(--white); border-color: var(--green); }
.btn-submit { width: 100%; margin-top: 24px; background: var(--green); color: var(--white); }
.btn-submit:hover { background: var(--green-light); }
/* One themed message area. JS sets .is-error / .is-success; the native browser
   validation bubbles are suppressed with novalidate so nothing doubles up. */
.form-note {
  position: relative;
  margin-top: 12px; padding: 10px 14px; border-radius: 8px;
  font-size: 15px; line-height: 20px; font-weight: 600;
  color: var(--ink); text-align: center;
}
.form-note.is-success { padding-right: 38px; }   /* room for the close button */
.form-note-close {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px;
  background: none; color: inherit; font: inherit; font-size: 20px; line-height: 1;
  cursor: pointer; opacity: .65; transition: opacity .15s, background-color .15s;
}
.form-note-close:hover { opacity: 1; background: rgba(0, 0, 0, .07); }
.form-note:empty { display: none; padding: 0; }
.form-note.is-error   { background: #FDECEA; color: #A3231B; }
.form-note.is-success { background: var(--highlight); color: var(--green); }

/* the field the message refers to */
.contact-form input.is-invalid,
.contact-form textarea.is-invalid { background: #FDECEA; border-color: #A3231B; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { background: var(--green-dark); color: var(--white); padding: 110px 0 108px; }
.footer-inner { display: flex; justify-content: space-between; gap: 40px; }
.footer-left { flex: 1 1 auto; max-width: 780px; font-size: 15px; line-height: 21px; }
.footer-logo { width: 96px; height: 45px; }
.footer-left p { margin-top: 21px; }
.footer-logo + p { margin-top: 24px; }
.footer-left a { font-weight: 600; color: var(--bg); }
.footer-left a:hover { text-decoration: underline; }
.copyright { font-size: 12.8px; line-height: 18px; }
.copyright a { font-weight: 400; }
.footer-nav {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 20px;
  padding-top: 36px; font-size: 14px; line-height: 20px;
}
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1440px) {
  .container { padding-left: 100px; padding-right: 100px; max-width: calc(var(--container) + 200px); }
  .container-faq { padding-left: 102px; padding-right: 100px; max-width: 1440px; }
  .hero-image { right: 60px; }
}

@media (max-width: 1280px) {
  .container, .container-faq { padding-left: 48px; padding-right: 48px; }
  .framed::before, .hero::before, .site-header::before { left: 24px; }
  .framed::after, .hero::after, .site-header::after { right: 24px; }
  .hero-image { right: 48px; width: 46%; height: auto; aspect-ratio: 636 / 645; }
  .hero-copy { width: 50%; }
  .hero h1 { font-size: 52px; line-height: 56px; }
  .easier-image { flex-basis: 48%; height: auto; aspect-ratio: 608 / 575; }
  .eligibility-inner { gap: 48px; }
  .eligibility-image { flex-basis: 48%; height: auto; aspect-ratio: 608 / 576; }
  .rate-card { flex-basis: 46%; }
  .contact-form { flex-basis: 48%; }
  .ewrb-list { flex-basis: 50%; }
  .footer-nav { flex-basis: auto; }
  .video { width: 100%; max-width: 750px; height: auto; aspect-ratio: 750 / 419; }
  .testimonial { margin-bottom: 0; padding-bottom: 60px; }
  .video { margin-bottom: 0; }
  .eligibility { padding-top: 72px; }
  .video-rule { display: none; }
  .d { display: none; }
  /* the <br class="d"> breaks are hidden from here down, so a long <mark> has to wrap.
     display:inline-block is atomic and cannot split across lines - it collapses into one
     tall rectangle - so flow it inline and clone the padding onto each line fragment. */
  mark { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .testimonial mark, .testimonial mark + br + mark { padding: 0 5px; margin: 0; }
}

@media (max-width: 960px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    display: none; position: absolute; left: 0; right: 0; top: 84px;
    flex-direction: column; align-items: stretch; gap: 8px;
    padding: 16px 24px 24px; background: var(--green); border-bottom: 1px solid var(--bg);
  }
  .primary-nav.is-open { display: flex; }
  .nav-links { flex-direction: column; gap: 4px; margin: 0; }
  .nav-links a { display: block; padding: 10px 0; font-size: 17px; }
  /* hidden in the drawer: 'Contact Us' repeats the nav link above it, and the hero
     directly below carries both actions as buttons (the header is not sticky, so the
     menu can only be opened while the hero is on screen) */
  .nav-actions { display: none; }

  .hero-inner { min-height: 0; }
  .hero-copy { width: 100%; padding: 64px 0 40px; }
  .hero h1 { font-size: 44px; line-height: 48px; }
  .hero-tagline { margin-top: 48px; }
  .hero-image { position: relative; top: auto; right: auto; width: 100%; margin: 0 0 32px; }

  .strip-inner { font-size: 18px; }

  .easier h2, .incentives h2, .eligibility h2, .how h2, .news h2, .faq h2, .contact h2 {
    font-size: 38px; line-height: 42px;
  }
  .easier, .incentives, .eligibility, .how, .news, .faq, .ewrb, .contact, .grow { padding-top: 72px; padding-bottom: 72px; }
  .easier-inner, .incentives-inner, .eligibility-inner, .ewrb-inner, .contact-inner, .footer-inner { flex-direction: column; gap: 40px; }
  .easier-inner { align-items: stretch; }
  .easier-image, .eligibility-image { flex-basis: auto; width: 100%; }
  .eligibility-copy { padding-top: 0; }
  .feature-list { margin-top: 40px; }
  .feature-list li + li, .check-list li + li, .ewrb-list li + li { margin-top: 32px; }
  .check-list { margin-top: 32px; }
  .eligibility-copy h3 { margin-top: 32px; }
  /* stacked: flex-basis becomes the HEIGHT, so a fixed px basis leaves dead space */
  .incentives-copy { flex-basis: auto; }
  .rate-card { flex-basis: auto; width: 100%; min-height: 0; padding: 40px; }
  .rate + .rate { margin-top: 48px; }
  .rate-value { font-size: 52px; line-height: 60px; }
  .formula { font-size: 22px; line-height: 26px; margin-top: 32px; }
  .paid { margin-top: 24px; }
  .testimonial blockquote p { font-size: 28px; line-height: 34px; }
  .testimonial mark { line-height: 32px; }
  .qualify { flex-direction: column; gap: 24px; padding-right: 0; }
  .steps { grid-template-columns: 1fr; }
  .steps li { min-height: 0; }
  .news-grid { grid-template-columns: 1fr; margin-top: 48px; }
  .news-card { min-height: 0; }
  .faq-item summary { padding: 24px 0 18px; font-size: 19px; line-height: 24px; }
  .ewrb-copy, .ewrb-list { flex-basis: auto; }
  .ewrb-list { margin-top: 40px; }
  .contact-form { flex-basis: auto; width: 100%; margin-top: 40px; padding: 32px 24px; }
  .program-details { font-size: 22px; margin-top: 40px; }
  .footer-nav { flex-basis: auto; padding-top: 32px; flex-direction: row; align-items: flex-start;
                flex-wrap: wrap; gap: 16px 32px; justify-content: flex-start; }
}

@media (max-width: 600px) {
  .container, .container-faq { padding-left: 20px; padding-right: 20px; }
  .framed::before, .framed::after, .hero::before, .hero::after,
  .site-header::before, .site-header::after { display: none; }
  .hero h1 { font-size: 36px; line-height: 40px; }
  .hero-copy { text-align: center; }
  .hero-actions { flex-wrap: wrap; justify-content: center; }
  .strip { height: auto; }
  .strip-inner { grid-template-columns: 1fr; height: auto; line-height: 48px; }
  .strip-inner li + li::before { display: none; }
  .grow h2 { font-size: 28px; line-height: 34px; }
  .easier h2, .incentives h2, .eligibility h2, .how h2, .news h2, .faq h2, .contact h2 { font-size: 32px; line-height: 36px; }
  .form-row { grid-template-columns: 1fr; }
  .eligibility-image, .easier-image { aspect-ratio: 1 / 1; }

  /* logos wrap instead of being pinned to one 69px row */
  .hero-partners { flex-wrap: wrap; height: auto; gap: 16px; justify-content: center; }

  /* display type that is still oversized at phone widths */
  .testimonial blockquote p { font-size: 24px; line-height: 30px; }
  .rate-value { font-size: 40px; line-height: 46px; }
  .formula { font-size: 19px; line-height: 24px; }
  .faq-item summary { font-size: 17px; line-height: 22px; }
  .step-pill { height: 42px; padding: 0 18px; font-size: 21px; }
  .dot-active { width: 72px; }

  /* card padding tuned for 40px of total side gutter */
  .steps li { padding: 28px 20px; text-align: center; }
  .rate-card { padding: 32px 24px; }
  .contact-form { padding: 28px 20px; }

  .ewrb-image { width: 100%; max-width: 249px; height: auto; aspect-ratio: 1 / 1; }
  .footer-nav { gap: 12px 24px; }

  /* ---- centred layout on phones ---------------------------------------
     text-align covers inline content; block-level <img> needs auto margins
     and flex rows need justify-content instead. */
  .news-card { text-align: center; }

  .faq h2 { text-align: center; }
  .faq-tabs { justify-content: center; }

  .ewrb-copy { text-align: center; }
  .ewrb-image { margin-left: auto; margin-right: auto; }

  .contact-info { text-align: center; }
  .contact-logo { margin-left: auto; margin-right: auto; }
  .contact-lines li { justify-content: center; }

  .footer-left { text-align: center; }
  .footer-logo { margin-left: auto; margin-right: auto; }
  .footer-nav { justify-content: center; }
}