/* =========================================================================
   NPP Landing Page — stylesheet
   Deploy to the map app's Vercel deployment, reference from ViiB via:
     <link rel="stylesheet" href="https://alberta-power-co-ops.vercel.app/npp-landing.css">
   Settings → Head HTML → Head HTML.

   Source of truth is this file, NOT the ViiB editor.

   NOTE: Duda wraps every widget in its own generated divs. The section rules
   below target the classes we add by hand via right-click → Edit HTML/CSS.
   Expect to adjust specificity once the real generated markup exists — some
   rules will need a parent selector to win against Duda's own styles.
   ========================================================================= */

/* ---------- Fonts ------------------------------------------------------- */

/* Museo Slab is self-hosted: it is not on Google Fonts. These are the SAME
   files the map app itself uses (declared in src/styles/globals.css) — do not
   add a second copy under a different name.
   Museo names each weight as its own family ("Museo Slab 500"), so we collapse
   them into one family here and let font-weight select.

   Poppins comes from Google Fonts — add to Settings -> Head HTML:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"> */

@font-face {
  font-family: "Museo Slab";
  src: url("fonts/MuseoSlab-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Slab";
  src: url("fonts/MuseoSlab-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------------ */

:root {
  /* Palette. Three drifted limes in the Figma normalised to one --
     see assets/README.md. Confirm #9CEC44 is the intended value. */
  --npp-lime:   #9CEC44;
  --npp-green:  #0F9648;
  --npp-deep:   #2D5C21;
  --npp-ink:    #103506;
  --npp-cream:  #F3F5ED;
  --npp-white:  #FFFFFF;

  /* Layout: 12-col grid, 1200 container, 20 gutter (col = 81.67px) */
  --npp-container: 1200px;
  --npp-gutter:    20px;
  --npp-bleed:     20px;
  --npp-radius:    15px;

  /* Sticky-header clearance for in-page anchors. Tracks the CONDENSED header
     height (measured 100 / 89 / 80 per breakpoint) plus 20px, because the
     header is always condensed by the time a scroll finishes. */
  --npp-anchor-offset: 120px;

  /* Vertical rhythm */
  --npp-section-y:    120px;
  --npp-section-y-mb: 64px;

  /* Fallbacks are deliberately close in metrics to limit reflow on swap. */
  --npp-font-display: "Museo Slab", Georgia, "Times New Roman", serif;
  --npp-font-sans:    "Poppins", system-ui, -apple-system, sans-serif;
}

/* ---------- Base -------------------------------------------------------- */

/* `npp-page` goes on EVERY top-level row of the landing page, not on a single
   page wrapper — Duda Classic has no outermost container we can reach without
   Dev Mode. Rows are the outermost thing we control, so the class repeats.
   Everything below is scoped under it so we never touch Duda's own chrome or
   the rest of npprea.ca.

   Set the page background to white in Theme; deliberately not set here, so
   these rules can't override a row's own background (the hero photo, the deep
   green sections). */
.npp-page, .npp-page *, .npp-page *::before, .npp-page *::after {
  box-sizing: border-box;
}

/* Border-box above is not cosmetic: without it padding is added OUTSIDE
   flex-basis and the 3-across card and feature rows wrap to 2+1 — verified
   failing before this rule existed.

   `color-scheme: light` keeps a dark-mode browser from darkening form controls
   and any unpainted background. The design has no dark variant, so pin it. */
.npp-page {
  font-family: var(--npp-font-sans);
  color: var(--npp-ink);
  background: var(--npp-white);
  color-scheme: light;
  /* Duda rows carry an inline `text-align: center` from the design panel, and
     inline styles beat this stylesheet. Reset it here so the whole page isn't
     centred; the few genuinely centred blocks set their own alignment. */
  text-align: left;
}

.npp-wrap {
  max-width: var(--npp-container);
  margin-inline: auto;
  padding-inline: var(--npp-gutter);
}

/* Full-bleed rounded panels (hero, map, savings, billing): 20px page gutter */
.npp-bleed {
  margin-inline: var(--npp-bleed);
  border-radius: var(--npp-radius);
  overflow: hidden;
}

.npp-sec { padding-block: var(--npp-section-y); }

/* ---------- Type -------------------------------------------------------- */

.npp-eyebrow {
  font-family: var(--npp-font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--npp-deep);
  opacity: .7;
  margin: 0 0 24px;
}

.npp-h1, .npp-h2, .npp-h3, .npp-stat__num {
  font-family: var(--npp-font-display);
  font-weight: 700;
  color: var(--npp-deep);
  margin: 0;
  text-wrap: balance;
}

.npp-h1  { font-size: clamp(38px, 5vw, 68px);  line-height: 1.12; }
.npp-h2  { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.18; }
.npp-h3  { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.25; }

.npp-h2--xl { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.14; }

.npp-body { font-size: 16px; line-height: 1.5; margin: 0; }
.npp-meta { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* On dark grounds */
.npp-on-dark,
.npp-on-dark .npp-h1,
.npp-on-dark .npp-h2,
.npp-on-dark .npp-h3 { color: var(--npp-white); }
.npp-on-dark .npp-eyebrow { color: var(--npp-lime); opacity: 1; }

/* ---------- Buttons ----------------------------------------------------- */

.npp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 41px;
  padding: 0 30px;
  border-radius: 999px;
  font-family: var(--npp-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.npp-btn--primary   { background: var(--npp-lime); color: var(--npp-ink); }
.npp-btn--primary:hover { background: #8BD93A; }

.npp-btn--secondary { background: transparent; color: var(--npp-ink);
                      border-color: currentColor; }
.npp-btn--secondary:hover { background: rgba(0,0,0,.05); }

.npp-on-dark .npp-btn--secondary { color: var(--npp-white); }

.npp-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.npp-btn-row--end { justify-content: flex-end; align-items: center; }

/* Visible focus — Duda's defaults are not reliable here */
.npp-btn:focus-visible,
.npp-page a:focus-visible,
.npp-page button:focus-visible {
  outline: 3px solid var(--npp-lime);
  outline-offset: 2px;
}

/* ---------- Icons ------------------------------------------------------- */

/* All icon SVGs use currentColor — see assets/README.md */
.npp-icon      { display: inline-block; color: var(--npp-lime); }
.npp-icon--deep { color: var(--npp-deep); }
.npp-icon svg  { display: block; width: 100%; height: auto; }

/* ---------- Shared layout ----------------------------------------------- */

/* Two-column split: 4/12 lead + remainder. Used by §4, §7, §8, §9, §10,
   §11, §12 — the design reuses this shape throughout. */
.npp-split {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 60px;
  align-items: flex-start;
}
.npp-split__lead { flex: 1 1 386px; }
.npp-split > :not(.npp-split__lead) { flex: 1 1 500px; }
.npp-split--head { align-items: center; margin-bottom: 40px; }

.npp-split .npp-h2 + .npp-body,
.npp-split .npp-body + .npp-body { margin-top: 20px; }
.npp-split .npp-body + .npp-btn,
.npp-split .npp-h2 + .npp-btn { margin-top: 30px; }

.npp-center { text-align: center; margin-top: 40px; }

/* ---------- 1. Header --------------------------------------------------- */

/* Figma: logo 186x82 at x=20, nav centred on the page, CTA 174x46 ending at
   x=1420. So the header uses the 20px bleed gutter, not the 1200 container. */
.npp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--npp-white);
  transition: box-shadow .25s ease;
}
.npp-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px var(--npp-bleed);
  transition: padding .25s ease;
}

.npp-header__logo { display: block; flex: 0 0 auto; line-height: 0; }
.npp-header__logo img { width: 186px; height: auto; transition: width .25s ease; }

/* ---- Condensed state ----
   `.npp-header--scrolled` is toggled by the Body End script once the page
   moves off the top. Only padding, logo width and the CTA height change, so
   the transition animates cheap properties and never reflows the nav.

   Keep --npp-anchor-offset in step with the CONDENSED height: by the time an
   in-page link finishes scrolling, the header is always in this state. */
.npp-header--scrolled .npp-header__inner { padding-block: 10px; }
.npp-header--scrolled .npp-header__logo img { width: 140px; }
.npp-header--scrolled .npp-header__cta { min-height: 41px; }
.npp-header--scrolled { box-shadow: 0 2px 16px rgba(16,53,6,.10); }

.npp-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  gap: 30px;
}
.npp-nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--npp-ink);
  text-decoration: none;
  white-space: nowrap;
}
.npp-nav a:hover { color: var(--npp-green); }

/* The header CTA is 46px in the Figma; body buttons are 41px. */
.npp-header__cta { flex: 0 0 auto; min-height: 46px; }

/* ---- Hamburger (tablet + mobile) ----
   Three header layouts:
     >=1025  logo | inline nav | CTA                    (hamburger hidden)
     768-1024  logo | ......... | CTA + hamburger       (inline nav hidden)
     <=767   logo | ......... | hamburger               (CTA moves into panel)
*/

.npp-menu { flex: 0 0 auto; }
.npp-menu[open] { position: static; }

.npp-menu__btn {
  display: none;            /* switched on at <=1024 */
  align-items: center;
  justify-content: center;
  width: 44px;              /* 44px keeps it a comfortable touch target */
  height: 44px;
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
}
.npp-menu__btn::-webkit-details-marker,
.npp-menu__btn::marker { display: none; content: ""; }
.npp-menu__btn:hover { background: rgba(45,92,33,.07); }

.npp-menu__bars { position: relative; display: block; }
.npp-menu__bars,
.npp-menu__bars::before,
.npp-menu__bars::after {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--npp-deep);
  transition: transform .2s ease, background-color .2s ease;
}
.npp-menu__bars::before,
.npp-menu__bars::after { content: ""; position: absolute; left: 0; }
.npp-menu__bars::before { top: -7px; }
.npp-menu__bars::after  { top: 7px; }

/* Bars morph into an X while open */
.npp-menu[open] .npp-menu__bars { background: transparent; }
.npp-menu[open] .npp-menu__bars::before { transform: translateY(7px) rotate(45deg); }
.npp-menu[open] .npp-menu__bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* Panel spans the header, not the button — .npp-header is the positioned
   ancestor because it is sticky. */
.npp-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--npp-white);
  border-top: 1px solid rgba(45,92,33,.15);
  box-shadow: 0 14px 28px rgba(16,53,6,.12);
  padding: 8px var(--npp-bleed) 20px;
}
.npp-menu__panel a:not(.npp-btn) {
  padding: 15px 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--npp-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(45,92,33,.10);
}
.npp-menu__panel a:not(.npp-btn):hover { color: var(--npp-green); }
.npp-menu__cta { display: none; margin-top: 16px; }

/* Anchor targets must clear the sticky header. Its height changes both with
   breakpoint and with the condensed state, so the offset tracks the condensed
   height — by the time a smooth scroll finishes, the header has shrunk. */
#benefits, #savings, #service-area, #faqs, #quote {
  scroll-margin-top: var(--npp-anchor-offset, 120px);
}

/* ---------- 2. Hero ----------------------------------------------------- */

/* Set --npp-hero-image on the section, e.g.
   style="--npp-hero-image:url('https://…/hero.jpg')" */
.npp-hero {
  position: relative;
  background: var(--npp-deep) var(--npp-hero-image, none) center / cover no-repeat;
  min-height: 679px;
  display: flex;
  align-items: center;
}

/* Scrim. The Figma puts white text straight over photography with no overlay.
   The stock photo is already dark on the left where the headline sits, so this
   is deliberately light — just enough to hold contrast when the image crops
   differently at narrow widths. */
.npp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16,53,6,.55) 0%, rgba(16,53,6,.25) 55%, rgba(16,53,6,.05) 100%);
}

.npp-hero__inner {
  position: relative;
  max-width: var(--npp-container);
  margin-inline: auto;
  padding: 80px var(--npp-gutter);
  width: 100%;
}
.npp-hero__lead { max-width: 46ch; margin: 24px 0 32px; }

/* ---------- 3. Stats bar ------------------------------------------------ */

.npp-stats { display: flex; gap: 0; text-align: center; }
.npp-stats__item { flex: 1; padding: 0 24px; }
.npp-stats__item + .npp-stats__item { border-left: 1px solid rgba(45,92,33,.2); }

.npp-stat__num   { font-size: clamp(32px, 3.6vw, 48px); line-height: 1; }
.npp-stat__label { font-size: 16px; margin-top: 12px; color: var(--npp-deep); }

.npp-govstrip {
  background: var(--npp-deep);
  color: var(--npp-white);
  text-align: center;
  padding: 18px 20px;
  font-size: 18px;
}

/* ---------- 4. Why choose NPP ------------------------------------------- */

.npp-features { display: flex; flex-wrap: wrap; gap: 40px var(--npp-gutter); }
.npp-feature  { flex: 1 1 260px; }
.npp-feature .npp-icon { width: 69px; margin-bottom: 30px; }
.npp-feature .npp-h3   { margin-bottom: 12px; }

/* ---------- 5. Member Savings ------------------------------------------- */

/* The deep-green band runs behind the card and continues seamlessly from §4,
   which is the same colour and sits directly above. In the Figma both live
   inside one rectangle that ends 20px below the card — hence the bottom
   padding matching the bleed gutter and no top padding. */
.npp-savings-band {
  background: var(--npp-deep);
  padding: 0 0 var(--npp-bleed);
}

.npp-savings { background: var(--npp-green); padding: 80px 60px; }

/* The Figma positions "$1.8" and "M" separately. Build as one heading with
   the M in a span; do not use two absolutely-positioned text widgets. */
.npp-savings__figure {
  font-family: var(--npp-font-display);
  font-weight: 700;
  color: var(--npp-deep);
  font-size: clamp(72px, 13vw, 182px);
  line-height: .9;
  margin: 0;
}
.npp-savings__figure span {
  font-size: .47em;
  vertical-align: baseline;
  margin-left: .06em;
}

.npp-savings__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 60px;
  align-items: center;
}
.npp-savings__grid > * { flex: 1 1 320px; }
.npp-savings__figurewrap { text-align: center; }
.npp-savings__grid .npp-h2 + .npp-body,
.npp-savings__grid .npp-body + .npp-body { margin-top: 20px; }
.npp-savings__grid .npp-body + .npp-btn { margin-top: 30px; }
.npp-savings__illus { width: 206px; margin: 0 auto 10px; color: var(--npp-white); }

/* ---------- 6. Service Area map ----------------------------------------- */

/* The savings band ends flush, so without this the map panel butts straight
   against it. The Figma leaves the gutter's worth of white between them
   (band ends 2325, map starts 2345). Below the map, §7's own section padding
   supplies the gap. */
#service-area { margin-top: var(--npp-bleed); }

.npp-map { width: 100%; aspect-ratio: 1400 / 752; }
.npp-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- 7. Testimonials --------------------------------------------- */

.npp-cards { display: flex; flex-wrap: wrap; gap: var(--npp-gutter);
             align-items: stretch; }
.npp-card {
  flex: 1 1 300px;
  background: var(--npp-cream);
  border-radius: var(--npp-radius);
  padding: 50px;
}
.npp-card__stars { width: 70px; margin-bottom: 30px; }
.npp-card__name  { font-family: var(--npp-font-display); font-weight: 500;
                   font-size: 20px; color: var(--npp-deep); margin: 0 0 6px; }
.npp-card__place { color: var(--npp-deep); opacity: .65; margin: 0 0 20px; }
.npp-card__quote { margin: 0; }

/* ---------- 8. Switching is easy ---------------------------------------- */

.npp-rule { border: 0; border-top: 1px solid rgba(45,92,33,.2); margin: 40px 0; }

.npp-steps__illus { width: 385px; max-width: 100%; margin-left: auto; color: var(--npp-green); }

.npp-steps { display: flex; flex-wrap: wrap; gap: var(--npp-gutter); }
.npp-step  { flex: 1 1 260px; display: flex; gap: 20px; }
.npp-step__num {
  flex: 0 0 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--npp-lime);
  color: var(--npp-deep);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;   /* Poppins ships 400 + 600 here; 700 would synthesise */
}
.npp-step .npp-h3 { margin-bottom: 14px; }

/* ---------- 9. Transparent billing -------------------------------------- */

.npp-billing { background: var(--npp-deep); padding: 70px 60px; }

/* ---------- 10. Quote form ---------------------------------------------- */

.npp-benefits { list-style: none; margin: 0; padding: 0; }
.npp-benefits li { display: flex; gap: 10px; align-items: center;
                   margin-bottom: 10px; }
.npp-benefits .npp-icon { width: 20px; flex: 0 0 20px; }

.npp-formcard {
  background: var(--npp-white);
  border-radius: var(--npp-radius);
  padding: 30px;
}
.npp-formcard__title { font-family: var(--npp-font-display); font-weight: 500;
                       font-size: 24px; color: var(--npp-deep); margin: 0 0 30px;
                       padding-bottom: 30px;
                       border-bottom: 1px solid rgba(45,92,33,.2); }

/* Duda's form markup is generated; these selectors are a starting point and
   will need tightening against the real DOM. */
.npp-formcard label { font-size: 12px; font-weight: 600; color: var(--npp-deep);
                      display: block; margin-bottom: 8px; }
.npp-formcard input[type="text"],
.npp-formcard input[type="email"],
.npp-formcard input[type="tel"],
.npp-formcard select,
.npp-formcard textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 15px;
  border: 1px solid rgba(45,92,33,.25);
  border-radius: 8px;
  background: var(--npp-white);
  font-family: inherit;
  font-size: 16px; /* 16px minimum prevents iOS zoom-on-focus */
  color: var(--npp-ink);
}
.npp-formcard textarea { min-height: 161px; resize: vertical; }
.npp-formcard .npp-btn { width: 100%; }

.npp-form__row { display: flex; flex-wrap: wrap; gap: 20px; }
.npp-form__row > .npp-field { flex: 1 1 45%; }
.npp-form__row--address > .npp-field:first-child { flex: 3 1 60%; }
.npp-form__row--address > .npp-field:last-child  { flex: 1 1 25%; }
.npp-field { margin-bottom: 20px; }
.npp-form__row .npp-field { margin-bottom: 0; }
.npp-form__row { margin-bottom: 20px; }

.npp-checks { border: 0; margin: 0 0 24px; padding: 0; }
.npp-checks legend { font-size: 12px; font-weight: 600; letter-spacing: .06em;
                     text-transform: uppercase; color: var(--npp-deep);
                     margin-bottom: 12px; padding: 0; }
.npp-checks label { display: flex; align-items: flex-start; gap: 10px;
                    font-size: 16px; font-weight: 400; text-transform: none;
                    letter-spacing: 0; margin-bottom: 10px; cursor: pointer; }
.npp-checks input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--npp-green); }

/* ---------- 11. FAQ ----------------------------------------------------- */

.npp-faq__item { border-top: 1px solid rgba(45,92,33,.2); }
.npp-faq__item:last-child { border-bottom: 1px solid rgba(45,92,33,.2); }

.npp-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 30px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--npp-font-display);
  font-weight: 500;
  font-size: 24px;
  color: var(--npp-deep);
}
.npp-faq__q::-webkit-details-marker { display: none; }
.npp-faq__icon { flex: 0 0 37px; transition: transform .2s ease; }
[open] > .npp-faq__q .npp-faq__icon { transform: rotate(45deg); }
.npp-faq__a { padding: 0 0 30px; max-width: 60ch; }

/* ---------- 12. Final CTA + footer -------------------------------------- */

.npp-cta { background: var(--npp-deep); }

.npp-footer { padding-block: 80px 40px; }

.npp-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 60px;
  align-items: flex-start;
  justify-content: space-between;
}

.npp-footer__brand { display: flex; align-items: center; gap: 40px; }

/* Capped at the asset's native 252px. The Figma draws it at 285px, but the
   only logo on NPP's CDN is 252x144 — upscaling shows. Raise this once we
   have an SVG or a larger PNG. */
.npp-footer__logo { width: 252px; max-width: 100%; height: auto; }

.npp-footer__tagline {
  font-family: var(--npp-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--npp-deep);
  margin: 0;
  padding-left: 40px;
  border-left: 1px solid rgba(45,92,33,.35);
}

.npp-footer__cols { display: flex; flex-wrap: wrap; gap: 22px; }
.npp-footer__col { flex: 0 0 182px; }
.npp-footer__col p { margin: 0 0 6px; font-size: 16px; line-height: 1.5; }

.npp-footer__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--npp-deep);
  margin-bottom: 14px !important;
}

.npp-footer__col a { color: var(--npp-ink); text-decoration: underline; }
.npp-footer__col a:hover { color: var(--npp-green); }

.npp-footer__divider { border: 0; border-top: 1px solid rgba(45,92,33,.2);
                       margin: 60px 0 24px; }
.npp-footer__legal { display: flex; justify-content: space-between;
                     flex-wrap: wrap; gap: 12px; font-size: 15px;
                     color: rgba(16,53,6,.55); }
.npp-footer__legal p { margin: 0; }

/* ---------- Responsive -------------------------------------------------- */
/* No mobile comps exist in the Figma. These are our calls — review with the
   designer. See build-plan.md → Responsive. */

@media (max-width: 1024px) {
  :root { --npp-section-y: 80px; --npp-anchor-offset: 109px; }
  .npp-savings, .npp-billing { padding: 56px 40px; }
  .npp-card { padding: 36px; }

  /* Tablet header: logo left, CTA + hamburger right. Hamburger sits outermost
     right — swap the two `order` values to flip them. */
  .npp-nav { display: none; }
  .npp-menu__btn { display: flex; }
  .npp-header__inner { justify-content: space-between; gap: 12px; padding: 14px var(--npp-bleed); }
  .npp-header__logo { margin-right: auto; }
  .npp-header__logo img { width: 160px; }
  .npp-header--scrolled .npp-header__inner { padding-block: 8px; }
  .npp-header--scrolled .npp-header__logo img { width: 128px; }
  .npp-header__cta { order: 2; }
  .npp-menu       { order: 3; }
}

@media (max-width: 767px) {
  :root { --npp-section-y: var(--npp-section-y-mb); --npp-bleed: 12px;
           --npp-anchor-offset: 100px; }

  .npp-stats { flex-direction: column; gap: 32px; }
  .npp-stats__item { padding: 0; }
  .npp-stats__item + .npp-stats__item {
    border-left: 0;
    border-top: 1px solid rgba(45,92,33,.2);
    padding-top: 32px;
  }

  .npp-feature { flex: 1 1 100%; }
  .npp-step    { flex: 1 1 100%; }
  .npp-card    { flex: 1 1 100%; padding: 28px; }

  .npp-savings, .npp-billing { padding: 40px 24px; }
  .npp-formcard { padding: 20px; }

  /* One field per row. At 375px the 45% basis still let pairs sit side by
     side, leaving inputs ~150px wide — too cramped to type an address into.
     The row's existing 20px gap becomes the vertical rhythm. */
  .npp-form__row > .npp-field,
  .npp-form__row--address > .npp-field:first-child,
  .npp-form__row--address > .npp-field:last-child { flex: 1 1 100%; }

  /* Map: the app handles its own reflow and moves the eligibility card above
     the map below ~700px. We only give it a taller box. */
  .npp-map { aspect-ratio: 375 / 812; }

  .npp-faq__q { font-size: 20px; padding: 22px 0; }
  .npp-btn-row .npp-btn { flex: 1 1 100%; }

  /* Header: the four anchor links wrap under the logo rather than becoming a
     hamburger — there are only four and they are short. Sticky is dropped so
     it doesn't eat vertical space on a small screen. */
  /* The scrim is a left-to-right gradient because the desktop crop is dark on
     the left. At mobile widths the image crops to centre, putting the copy
     over the lit subject — so switch to a vertical wash. */
  .npp-hero { min-height: 0; }
  .npp-hero::before {
    background: linear-gradient(180deg, rgba(16,53,6,.75) 0%, rgba(16,53,6,.62) 100%);
  }
  .npp-hero__inner { padding: 48px var(--npp-gutter); }

  /* Mobile header: logo + hamburger only. The CTA is too wide to sit beside
     them at 375px, so it moves to the bottom of the open panel where it gets
     full width. Header stays sticky — with the hamburger it is only ~64px. */
  .npp-header__inner { gap: 12px; padding: 12px var(--npp-bleed); }
  .npp-header__logo img { width: 138px; }
  .npp-header--scrolled .npp-header__inner { padding-block: 7px; }
  .npp-header--scrolled .npp-header__logo img { width: 116px; }
  .npp-header__cta { display: none; }
  .npp-menu__cta   { display: inline-flex; }

  .npp-footer { padding-block: 48px 32px; }
  .npp-footer__brand { flex-wrap: wrap; gap: 24px; }
  .npp-footer__tagline { padding-left: 0; border-left: 0; }
  .npp-footer__legal { flex-direction: column; gap: 6px; }
}

/* =========================================================================
   DUDA THEME OVERRIDES  —  must stay last in this file
   -------------------------------------------------------------------------
   Duda's theme writes rules like `*#dm *.dmBody div.u_1243667655 h1 {...}`:
   one ID, two classes, one element = specificity (1,2,1). Plain class
   selectors like `.npp-h1` are (0,1,0) and lose every time, which is why
   headings render in the theme's colour and the theme's alignment.

   Everything below re-asserts our own values at (1,3,x) so they win. The
   doubled `.npp-page.npp-page` is a deliberate specificity bump, not a typo.
   ========================================================================= */

/* Break out of Duda's centred content container. The page manages its own
   1200px container internally via .npp-wrap, so the wrapper must be full
   width. Prefer fixing this in Theme (set site content width to maximum);
   this is the belt-and-braces version.
   Note: uses vw, so a visible scrollbar can add a few px of horizontal
   overflow. If that happens, raise the theme width instead and delete this. */
#dm .dmBody .npp-page.npp-page {
  width: auto;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}

/* Alignment */
#dm .dmBody .npp-page.npp-page { text-align: left; }

/* Bare-element selectors need the doubled class: Duda targets these as
   `div.u_xxx h1` = (1,2,2), so (1,2,1) would lose. (1,3,1) wins. */
#dm .dmBody .npp-page.npp-page h1, #dm .dmBody .npp-page.npp-page h2,
#dm .dmBody .npp-page.npp-page h3, #dm .dmBody .npp-page.npp-page p,
#dm .dmBody .npp-page.npp-page li, #dm .dmBody .npp-page.npp-page a,
#dm .dmBody .npp-page.npp-page label, #dm .dmBody .npp-page.npp-page legend,
#dm .dmBody .npp-page.npp-page summary { text-align: inherit; }

/* Blocks the design deliberately centres */
#dm .dmBody .npp-page .npp-stats,
#dm .dmBody .npp-page .npp-center,
#dm .dmBody .npp-page .npp-govstrip,
#dm .dmBody .npp-page .npp-savings__figurewrap { text-align: center; }

/* Display type */
#dm .dmBody .npp-page .npp-h1,
#dm .dmBody .npp-page .npp-h2,
#dm .dmBody .npp-page .npp-h3,
#dm .dmBody .npp-page .npp-stat__num,
#dm .dmBody .npp-page .npp-savings__figure,
#dm .dmBody .npp-page .npp-card__name,
#dm .dmBody .npp-page .npp-formcard__title,
#dm .dmBody .npp-page .npp-faq__q,
#dm .dmBody .npp-page .npp-footer__tagline {
  font-family: var(--npp-font-display);
  color: var(--npp-deep);
}

/* Body type */
#dm .dmBody .npp-page .npp-body,
#dm .dmBody .npp-page .npp-eyebrow,
#dm .dmBody .npp-page .npp-stat__label,
#dm .dmBody .npp-page .npp-nav a,
#dm .dmBody .npp-page .npp-btn,
#dm .dmBody .npp-page .npp-footer__col p,
#dm .dmBody .npp-page .npp-footer__legal p {
  font-family: var(--npp-font-sans);
}
#dm .dmBody .npp-page .npp-body { color: inherit; }
#dm .dmBody .npp-page .npp-eyebrow { color: var(--npp-deep); }
#dm .dmBody .npp-page .npp-stat__label { color: var(--npp-deep); }
#dm .dmBody .npp-page .npp-card__place { color: var(--npp-deep); }
#dm .dmBody .npp-page .npp-footer__label { color: var(--npp-deep); }
#dm .dmBody .npp-page .npp-footer__legal p { color: rgba(16,53,6,.55); }

/* On dark grounds — after the light rules so these win on equal specificity */
#dm .dmBody .npp-page .npp-on-dark,
#dm .dmBody .npp-page .npp-on-dark .npp-h1,
#dm .dmBody .npp-page .npp-on-dark .npp-h2,
#dm .dmBody .npp-page .npp-on-dark .npp-h3,
#dm .dmBody .npp-page .npp-on-dark .npp-body,
#dm .dmBody .npp-page .npp-govstrip { color: var(--npp-white); }
#dm .dmBody .npp-page .npp-on-dark .npp-eyebrow { color: var(--npp-lime); }

/* The savings figure is deep green on the mid-green card, not white */
#dm .dmBody .npp-page .npp-savings__figure { color: var(--npp-deep); }

/* Buttons and links */
#dm .dmBody .npp-page .npp-btn--primary { background: var(--npp-lime); color: var(--npp-ink); }
#dm .dmBody .npp-page .npp-btn--secondary { color: var(--npp-ink); }
#dm .dmBody .npp-page .npp-on-dark .npp-btn--secondary { color: var(--npp-white); }
#dm .dmBody .npp-page .npp-nav a { color: var(--npp-ink); text-decoration: none; }
#dm .dmBody .npp-page .npp-menu__panel a { color: var(--npp-ink); text-decoration: none; }
#dm .dmBody .npp-page .npp-menu__panel a.npp-btn { color: var(--npp-ink); }
#dm .dmBody .npp-page .npp-menu__btn { list-style: none; }
#dm .dmBody .npp-page .npp-footer__col a { color: var(--npp-ink); text-decoration: underline; }

/* ---------- Motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .npp-page *,
  .npp-page *::before,
  .npp-page *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}