/*
Theme Name: BPU Theme
Theme URI:  https://www.bpu.com/
Author:     Kansas City Board of Public Utilities
Author URI: https://www.bpu.com/
Description: Custom theme for the Kansas City Board of Public Utilities. Implements the BPU homepage from Figma — header, hero, quick links, help cards, community section, callouts, footer — plus the Life Support program page. Designed to be editable from Appearance → Customize.
Version:    1.2.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4f
License:    GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bpu
Tags: custom-menu, custom-logo, footer-widgets, translation-ready
*/

/* =========================================================
   BPU Theme — Design tokens (Figma: Ecs4TOWkRqy5nLVOsz8SfS)

   Single source of truth for all colors, typography, shadows,
   spacing, and layout dimensions used across the theme.
   ========================================================= */

:root {
  /* ---------- Brand palette ---------- */
  --color-blue:         #003971;
  /* CONCEPT 2 BLUE — primary brand */
  --color-blue-dark:    #002b7f;
  /* Deep navy used in headings / sidebars */
  --color-green:        #7ca650;
  /* CTA / accent */
  --color-green-dark:   #6a9143;
  /* Hover state */
  --color-green-bright: #95d050;
  /* Bright accent (Life Support sidebar eyebrow) */
  --color-orange:       #ef800a;
  /* Warning / preparedness accent */
  --color-text:         #1d1d1d;
  /* DARK GRAY BODY COPY */
  --color-text-grey:    #999999;
  /* Secondary text */
  --color-white:        #ffffff;
  --color-divider:      #e8e8e8;
  /* Hairline dividers, card borders */

  /* ---------- Surfaces ---------- */
  --color-bg-soft:           #f8f8f8;
  /* Quick-links bar, page tints */
  --color-bg-life-support:   #f7f7f7;
  /* Life Support alt sections */
  --color-bg-blue-light:     #ebf0f8;
  /* Icon background — primary */
  --color-bg-green-light:    #f5f7f0;
  /* Icon background — accent */
  --color-bg-orange-light:   #fef8eb;
  /* Icon background — warning */
  --color-footer-bg:         #f7f7f7;
  --color-alert-bg:          #fff4cc;
  /* Yellow alert strip */
  --color-alert-text:        #1d1d1d;
  --color-shadow:            rgba(0, 0, 0, 0.10);
  /* ---------- Typography ---------- */
  --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* ---------- Shadows ---------- */
  --soft-shadow:    0 3px 10px rgba(0, 0, 0, 0.10);
  --card-shadow:    0 0 12px rgba(0, 0, 0, 0.10);
  --header-shadow:  0 10px 10px rgba(0, 0, 0, 0.15);
  --bpu-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08);
  --bpu-shadow-cta:  0 8px 24px rgba(0, 0, 0, 0.18);
  /* ---------- Container ---------- */
  --container-max:      1480px;
  --container-padding:  64px;
  /* ---------- Life Support-specific (page-scoped where used) ---------- */
  --bpu-fs-hero:      56px;
  --bpu-fs-section:   40px;
  --bpu-fs-card-h:    24px;
  --bpu-fs-card-sub:  22px;
  --bpu-fs-body-lg:   21px;
  --bpu-fs-body:      18px;
  --bpu-fs-eyebrow:   17px;
  --bpu-fs-small:     14px;
  --bpu-lh-hero:      64px;
  --bpu-lh-section:   44px;
  --bpu-lh-body:      28px;
  --bpu-gap-lg:       60px;
  --bpu-gap-md:       40px;
  --bpu-gap-sm:       20px;
  --bpu-radius-card:  16px;
  --bpu-radius-btn:   4px;
  --bpu-content-max:  1480px;
  --bpu-content-pad:  220px;
}

/* ----- Resets ----- */

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

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

html, body {
  overflow-x: hidden;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal !important;
}

/* =========================================================
   ALERT BAR  (.to-header → .alert-box → .alert-bar)
   ========================================================= */

.to-header {
  background: var(--color-alert-bg);
  color: var(--color-alert-text);
}

.to-header .alert-box {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.alert-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
}

.alert-bar__icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.alert-bar p {
  margin: 0;
}

.alert-bar a {
  text-decoration: underline;
  font-weight: 500;
  margin-left: 4px;
  color: inherit;
}

.alert-bar a:hover {
  opacity: 0.8;
}

/* =========================================================
   SITE HEADER
   ========================================================= */

.site-header {
  position: relative;
  box-shadow: var(--header-shadow);
  z-index: 50;
  position: absolute;
  width: 100%;
  background: rgba(255, 255, 255, 0.93);
  opacity: 1;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.15);
}

.white-text {
  color: #fff !important;
}

.wp-block-embed {
  padding: 30px 30px 0;
}

/* ----- MIDDLE HEADER: logo (left) | right cluster (right) ----- */

.middle-header {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 22px 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.middle-left {
  flex-shrink: 0;
}

.middle-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* Top sub-row: utility links + search */

.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 50px;
}

/* Bottom sub-row: Outages button + language switcher */

.nav-lang-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

/* ----- LOGO ----- */

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo__mark {
  width: 56px;
  height: 56px;
  display: block;
}

.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo__title {
  font-size: 30px;
  font-weight: 700;
  color: var(--color-blue);
  letter-spacing: -0.5px;
  line-height: 1;
}

.hero.hero--simple .hero__content {
  margin-top: 180px;
}

.logo__tagline {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 1.5px;
  margin-top: 4px;
  text-transform: uppercase;
}

.custom-logo-link img.custom-logo {
  max-height: 115px;
  width: auto;
}


/* ----- UTILITY LINKS ----- */

.utility-nav, .utility-nav ul {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.utility-nav__item, .utility-nav a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.18px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.utility-nav a:hover, .utility-nav__item:hover {
  color: var(--color-blue);
}

.utility-nav__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: inline-flex;
}

.utility-nav__icon svg {
  width: 100%;
  height: 100%;
}

/* ----- SEARCH BOX ----- */

.search-box {
  position: relative;
  width: 280px;
}

.search-box__input {
  width: 100%;
  height: 42px;
  padding: 0 46px 0 14px;
  border: 1px solid var(--color-text);
  border-radius: 5px;
  background: var(--color-white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.21px;
}

.search-box__input::placeholder {
  color: var(--color-text-grey);
}

.search-box__input:focus {
  outline: 2px solid var(--color-blue);
  outline-offset: 1px;
}

.search-box__btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.search-box__btn svg {
  width: 20px;
  height: 20px;
}

/* ----- OUTAGES BUTTON (in .nav-lang-right) ----- */

.btn-outages {
  background: var(--color-green);
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.18px;
  padding: 0 22px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0px;
  text-decoration: none;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.btn-outages:hover {
  background: var(--color-green-dark);
  color: var(--color-white);
}

/* ----- LANGUAGE SWITCHER (in .nav-lang-right) ----- */

.lang-switcher {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
}

.lang-switcher select {
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  padding: 6px 12px;
  border: 1px solid var(--color-text-grey);
  border-radius: 0px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
	width:230px !important;

}

.lang-switcher a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----- HEADER BOTTOM: centered primary nav ----- */

.header-bottom {
  /* full-width row */;
}

.header__nav {
  max-width: var(--container-max);
  margin: 0 auto;
  padding:30px 25px;
  display: flex;
  justify-content: center;
}

.main-nav, .main-nav ul {
  display: flex;
  align-items: center;
  gap: 120px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-blue);
  letter-spacing: -0.24px;
  line-height: 28px;
  position: relative;
  padding-bottom: 0px;
  display: inline-block;
  transition: color 0.2s ease;
}

/* .main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 3px;
  background: var(--color-green);
  transition: width 0.25s ease;
} */

/* .main-nav a:hover::after, .main-nav .current-menu-item > a::after, .main-nav .current_page_item > a::after {
  width: 100%;
} */




/* Parent Menu */
/* .main-nav .menu > li{
    position:relative;
} */

/* Hide Submenu */
.main-nav .sub-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:260px;
    background:#fff;
    box-shadow:0 4px 15px rgba(0,0,0,.15);
    z-index:9999;
}

/* Show First Dropdown */
.main-nav .menu > li:hover > .sub-menu{
    display:block;
}

/* Second Level */
.main-nav .sub-menu li{
    position:relative;
}

.main-nav .sub-menu li a{
    display:block;
    padding:12px 18px;
    color:#333;
    text-decoration:none;
    white-space:nowrap;
}

.main-nav .sub-menu li:hover{
    background:#f5f5f5;
}

/* Third Level */
.main-nav .sub-menu .sub-menu{
    top:0;
    left:100%;
    display:none;
}

.main-nav .sub-menu li:hover > .sub-menu{
    display:block;
}

/* Arrow */
.main-nav .menu-item-has-children > a::after{
    content:" ▼";
    font-size:20px;
}

.main-nav .sub-menu .menu-item-has-children > a::after{
    content:" ▶";
    float:right;
}



/* =========================================================
   BUTTONS (shared)
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.2px;
  line-height: 1;
  height: 50px;
  padding: 0px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.btn--solid {
  background: var(--color-green);
  color: var(--color-white);
}

.btn--solid:hover {
  background: var(--color-green-dark);
  color: var(--color-white);
}

.btn--outline {
  background: transparent;
  color: var(--color-green);
  border: 2px solid var(--color-green);
}

.btn--outline:hover {
  background: var(--color-green);
  color: var(--color-white);
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;
  min-height: 600px;
  background-color: #2a2a2a;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  padding: 80px 0 100px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.15) 0%, transparent 60%);
  pointer-events: none;
}

.hero .container {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.hero__card {
  background: rgba(0, 57, 113, 0.92);
  color: var(--color-white);
  width: 420px;
  max-width: 100%;
  padding: 35px 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero__card h1 {
  font-weight: 700;
  margin: 0;
  line-height: 1.08;
}

.hero__top {
  display: block;
  font-size: 28.64px;
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}

.hero__bottom {
  display: block;
  font-size: 47.7px;
  font-weight: 500;
  letter-spacing: -0.5px;
}

.hero__desc {
  font-size: 16.5px;
  line-height: 1.55;
  letter-spacing: -0.165px;
  margin: 0;
  color: rgba(255,255,255,0.92);
}

.hero__cta {
  align-self: flex-start;
  height: 45px;
  padding: 0 26px;
  font-size: 18.4px;
}

/* =========================================================
   QUICK LINKS
   ========================================================= */

.quick-links {
  background: var(--color-bg-soft);
  padding: 50px 0;
}

.quick-link {
  background: var(--color-white);
  box-shadow: var(--soft-shadow);
  padding: 28px 16px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  min-height: 204px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.quick-link__icon {
/*   width: 80px;
  height: 80px; */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--color-green);
}

.quick-link__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.quick-link__label {
  font-weight: 700;
  font-size: 21px;
  line-height: 25px;
  margin: 0;
}

/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.section-heading {
  color: var(--color-blue);
  font-size: 37.32px;
  font-weight: 700;
  letter-spacing: -0.37px;
  line-height: 44px;
  margin: 0 0 36px;
  text-align: center;
}

/* =========================================================
   HELP CARDS
   ========================================================= */

.help-section {
  padding: 80px 0 70px;
  background: var(--color-white);
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.help-card {

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
background: #FFFFFF;
border: 1px solid #D9DBE0;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
	padding: 40px 65px;
}

.help-card__icon {
  width: 88px;
  height: 88px;
  margin-bottom: 24px;
  color: var(--color-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.help-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.help-card h3 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.26px;
  line-height: 36px;
  margin: 0 0 18px;
  color: var(--color-text);
}

.help-card p {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.18px;
  margin: 0 0 28px;
  color: var(--color-text);

}

.help-card .btn {
  height: 50px;
  min-width: 204px;
}

/* =========================================================
   INVESTING IN OUR COMMUNITY
   ========================================================= */

.investing {
  padding: 50px 0;
  background: var(--color-white);
}

.investing__divider {
  height: 1px;
  background: var(--color-divider);
  max-width: var(--container-max);
  margin: 0 auto 50px;
}

.investing__card {
  background: var(--color-white);
  box-shadow: var(--card-shadow);
  display: grid;
  grid-template-columns: 406px 1fr;
  gap: 60px;
  padding: 28px;
  align-items: center;
  max-width: 1316px;
  margin: 0 auto;
}

.investing__image {
  width: 100%;
  height: 384px;
  background-color: #ddd;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.investing__content {
  padding-right: 40px;
}

.investing__content h2 {
  color: var(--color-blue);
  font-size: 37.32px;
  font-weight: 700;
  letter-spacing: -0.37px;
  line-height: 44px;
  margin: 0 0 24px;
}

.investing__content p {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.18px;
  margin: 0 0 32px;
  max-width: 800px;
}

/* =========================================================
   BOTTOM CALLOUT CARDS
   ========================================================= */

.callouts {
  padding: 50px 0 90px;
  background: var(--color-white);
}

.callouts__divider {
  height: 1px;
  background: var(--color-divider);
  max-width: var(--container-max);
  margin: 0 auto 50px;
}

.callouts__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  max-width: 1410px;
  margin: 0 auto;
}

.callout {
  background: var(--color-white);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.callout__image {
  width: 100%;
  height: 210px;
  background-color: #ddd;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.callout__body {
  padding: 36px 46px 46px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.callout__body h3 {
  font-size: 31px;
  font-weight: 500;
  letter-spacing: -0.31px;
  line-height: 36px;
  color: var(--color-text);
  margin: 0 0 16px;
}

.callout__body p {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.18px;
  margin: 0 0 28px;
  color: var(--color-text);
  flex: 1;
}

.callout__body .btn {
  align-self: flex-start;
  min-width: 258px;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  background: var(--color-footer-bg);
  padding: 60px 0 20px;
  font-size: 18px;
  color: var(--color-text);
/* 	word-break: break-word; */
}

.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 28px;
  border-bottom: 0px solid #d8d8d8;
  gap: 32px;
}
.footer-bar {
    width: 100%;
    height: 2px;
    background: #999999;
}
.footer__brand {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.footer__address {
  line-height: 28px;
  letter-spacing: -0.18px;
}

.footer__address p {
  margin: 0;
}

.btn-contact {
  background: var(--color-green);
  color: var(--color-white);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.2px;
  padding: 0 32px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.btn-contact:hover {
  background: var(--color-green-dark);
  color: var(--color-white);
}

.footer__main {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 320px;
  gap: 40px;
  padding: 40px 0 60px;
}

.footer-col h3, .footer-col__title {
  font-size: 21px;
  font-weight: 700;
  color: var(--color-blue);
  margin: 0 0 14px;
  letter-spacing: -0.21px;
  line-height: 28px;
}

.footer-col ul, .footer-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li, .footer-col__list li {
  margin-bottom: 10px;
  letter-spacing: -0.18px;
  line-height: 28px;
}

.footer-col a:hover {
  color: var(--color-blue);
  text-decoration: underline;
}

.footer__newsletter-title, .footer__social-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--color-blue);
  letter-spacing: -0.21px;
  line-height: 28px;
}

.footer__newsletter-title {
  margin: 0 0 14px;
}

.footer__newsletter-form {
  display: flex;
  gap: 0px;
  margin-bottom: 26px;
}

.footer__newsletter-form input {
  flex: 1;
  height: 40px;
  padding: 0 14px;
  border: 0px solid var(--color-divider);
  background: var(--color-white);
  font-family: inherit;
  font-size: 18px;
  letter-spacing: -0.18px;
  color: var(--color-text);
}

.footer__newsletter-form input::placeholder {
  color: #a8a8a8;
  opacity: 0.7;
}

.footer__newsletter-form input:focus {
  outline: 2px solid var(--color-blue);
  border-color: var(--color-blue);
}

.footer__newsletter-form button {
  height: 40px;
  padding: 0 5px;
  background: var(--color-blue);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.18px;
  transition: background 0.2s ease;
}

.footer__newsletter-form button:hover {
  background: var(--color-blue-dark);
}

.footer__social-title {
  margin: 0 0 14px;
}

.footer__social-list {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer__social-link {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer__social-link:hover {
  color: var(--color-blue);
  transform: translateY(-2px);
}

.footer__social-link svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.footer__bottom {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-top: 00px;
  border-top: 0px solid #d8d8d8;
  font-size: 18px;
  color: var(--color-text-grey);
  letter-spacing: -0.18px;
	justify-content:space-between;
}

.footer__copyright {
  justify-self: start;
  margin: 0;
}

.footer__ccr {
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__ccr:hover {
  color: var(--color-blue);
}

.footer__small-links {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.footer__small-links a:hover {
  color: var(--color-blue);
  text-decoration: underline;
}

.footer__small-links span[aria-hidden] {
  color: #ccc;
}

.out-section {
  background: #F1F1F1;
  padding: 25px;
	display:none
}
.out-rw {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
	gap: 5px;
}

.out-rw p a {
  text-decoration: underline;
}
.out-rw .out-heading, .out-rw p {
  font-style: normal;
  font-weight: 700;
  font-size: 21px;
  line-height: 33px;
  color: #1D1D1D;
  margin: 0px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1280px) {
  :root {
    --container-padding: 32px;
  }
  .nav-right {
    gap: 16px;
  }
  .nav-lang-right {
    gap: 12px;
  }
  .utility-nav, .utility-nav ul {
    gap: 16px;
  }
  .main-nav, .main-nav ul {
    gap: 100px;
  }
  .main-nav a {
    font-size: 22px;
  }
  .footer__main {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .footer__newsletter-wrap {
    grid-column: 1 / -1;
    max-width: 420px;
  }
  .investing__card {
    grid-template-columns: 340px 1fr;
    gap: 40px;
  }
  .investing__image {
    height: 320px;
  }
}

@media (max-width: 1100px) {
  .quick-links__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .help-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .help-card {
    min-height: 0;
  }
  .investing__card {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .investing__image {
    height: 280px;
  }
  .investing__content {
    padding: 32px;
  }
  .callouts__grid {
    grid-template-columns: 1fr;
  }
  .hero__card {
    width: 100%;
    max-width: 540px;
  }
  .hero .container {
    justify-content: center;
  }
}

@media (max-width: 980px) {
  .middle-header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px var(--container-padding) 12px;
  }
  .middle-right {
    width: 100%;
    align-items: center;
    gap: 12px;
  }
  .nav-right {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
  .nav-lang-right {
    justify-content: center;
  }
  .header__nav {
    padding: 8px var(--container-padding) 16px;
  }
  .main-nav, .main-nav ul {
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
  }
  .footer__main {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__bottom {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 12px;
  }
  .footer__copyright, .footer__small-links {
    justify-self: center;
  }
  .quick-links__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .section-heading {
    font-size: 28px;
    line-height: 34px;
  }
  .investing__content h2 {
    font-size: 28px;
    line-height: 34px;
  }
  .callout__body {
    padding: 28px;
  }
  .hero__bottom {
    font-size: 36px;
  }
	
	
	
	
	
	
}

/* =========================================================
   HOMEPAGE BODY SECTIONS
   ========================================================= */

/* Shared section heading */

.section-heading {
  font-size: 37px;
  font-weight: 700;
  color: var(--color-blue);
  letter-spacing: -0.37px;
  line-height: 44px;
  margin: 0 0 28px;
  text-align: center;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 985px;
  background-position: center;
  background-size: cover;
  background-color: #6b7d4e;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.15));
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding:0px 0;
}

.hero__card {
  background: rgba(0, 57, 113, 0.92);
  color: var(--color-white);
  width: 420px;
  max-width: 100%;
  padding: 35px 25px;
  position:relative;
  right: -120%;
  top: 120px;
}

.search-box__input:focus {
  outline: none;
}

.lang-switcher select:focus {
  outline: none;
}

.hero__eyebrow {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.1;
  margin: 0;
}

.hero__heading {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin: 4px 0 24px;
}

.hero__description {
  font-size: 16px;
  line-height: 25px;
  margin: 0 0 0px;
  opacity: 0.95;
}

.hero__cta {
  background: var(--color-green);
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.18px;
  padding: 0 24px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.hero__cta:hover {
  background: #6a9143;
  color: var(--color-white);
}

/* ---------- Quick Links Bar ---------- */

.quick-links {
  background: #f8f8f8;
  padding: 48px 0;
  margin-top: -0px;
  position: relative;
  z-index: 2;
}

.quick-links__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.quick-link {
  background: var(--color-white);
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  padding: 28px 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 204px;
  color: var(--color-text);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  color: var(--color-blue);
}

.quick-link__icon {
/*   width: 56px;
  height: 56px; */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--color-blue);
}

.quick-link__icon svg {
  width: 100%;
  height: 100%;
}

.quick-link__title {
  font-size: 21px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: -0.21px;
  margin: 0;
}

/* ---------- Ways To Save Section ---------- */

.ways {
  background: var(--color-white);
  padding: 50px 0 50px;
}

.ways__heading {
  text-align: center;
}

.ways__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 36px;
	max-width: 1200px;
    margin: 30px auto 0;
}



.help-card__icon {
  width: 90px;
  height: 90px;
  color: var(--color-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.help-card__icon svg {
  width: 100%;
  height: 100%;
}

.help-card__title {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.26px;
  line-height: 36px;
  margin: 0 0 14px;
}

.help-card__text {
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text);
  letter-spacing: -0.18px;
  margin: 0 0 28px;
  flex: 1;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-green);
  color: var(--color-green);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.2px;
  padding: 0 32px;
  height: 50px;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-outline:hover {
  background: var(--color-green);
  color: var(--color-white);
}

/* ---------- Community Section ---------- */

.community {
  padding: 50px 0;
  background: var(--color-white);
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}

.community__card {
/*   background: var(--color-white);
  box-shadow: 0 0 12px rgba(0,0,0,0.1); */
  display: flex;
  
  gap: 0;
  align-items: stretch;
  max-width: 1480px;
  margin: 0 auto;
	align-items:center;
}

.community__media {

  background-size: cover;
  background-position: center;
	width:35%;
}
.community__media img{
		width:100%;
}
.community__content {
  padding: 50px 60px;
	    width: 65%;

}

.community__heading {
  font-size: 37px;
  font-weight: 700;
  color: var(--color-blue);
  letter-spacing: -0.37px;
  line-height: 44px;
  margin: 0 0 12px;
}

.community__text {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.18px;
  margin: 0 0 22px;
  max-width: 800px;
}

.btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-green);
  color: var(--color-white);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.2px;
  padding: 0;
  transition: background 0.2s ease;

}

.btn-solid:hover {
  background: #6a9143;
  color: var(--color-white);
}

/* ---------- Feature Cards (bottom 2-up) ---------- */

.features {
  padding: 50px 0 80px;
  background: #fff;
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: 1408px;
  margin: 20px auto 0;
}

.feature-card {
  background: var(--color-white);
  box-shadow: 0 0 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}

.feature-card__media {
  height: 210px;
  background: #d8d8d8;
  background-size: cover;
  background-position: center;
}

.feature-card__body {
  padding: 28px 36px 36px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.feature-card__title {
  font-size: 31px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.31px;
  line-height: 36px;
  margin: 0 0 16px;
	font-style: normal;
font-weight: 700;
font-size: 26px;
line-height: 35px;

color: #002B7F;
}

.feature-card__text {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.18px;
  margin: 0 0 16px;
/*   flex: 1; */
}


.swahili .parent-billing-rate .pbr-card__link {

    font-size: 14px;
   
}

.swahili .quick-link__label {
	    font-size: 18px;
    line-height: 25px;
}

.swahili .pbr-card {
    min-height: 350px;
}

/* ---------- Body section responsiveness ---------- */

@media (max-width: 1280px) {
  .quick-links__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .features__grid {
    gap: 24px;
  }
  .community__card {
    grid-template-columns: 320px 1fr;
  }
  .community__content {
    padding: 40px;
  }
}

@media (max-width: 980px) {
  .hero__inner {
    justify-content: center;
    padding: 40px 0;
  }
  .quick-links__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ways__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .community__card {
    grid-template-columns: 1fr;
  }
/*   .community__media {
    min-height: 240px;
  } */
  .community__content {
    padding: 32px;
  }
  .features__grid {
    grid-template-columns: 1fr;
  }
  .section-heading, .community__heading {
    font-size: 28px;
    line-height: 34px;
  }
}

/* =========================================================
   MOBILE-ONLY ELEMENTS — base styles
   These elements exist in the DOM at all viewports but are
   hidden on desktop. The mobile media query below shows them.
   ========================================================= */

/* Top thin strip with language switcher (mobile only) */

.mobile-top-strip {
  display: none;
}

.lang-switcher--mobile {
  font-size: 14px;
}

/* Hamburger button (left of logo on mobile) */

.mobile-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 10px;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  flex-shrink: 0;
}

.mobile-menu-toggle__bar {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}

.mobile-menu-toggle.is-active .mobile-menu-toggle__bar:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.mobile-menu-toggle.is-active .mobile-menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.is-active .mobile-menu-toggle__bar:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* Search icon (right of logo on mobile) */

.mobile-search-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 10px;
  cursor: pointer;
  color: var(--color-text);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-search-toggle svg {
  width: 24px;
  height: 24px;
}

.mobile-search-toggle.is-active {
  color: var(--color-blue);
}

/* Mobile search dropdown panel */

.mobile-search {
  display: none;
  background: var(--color-white);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  padding: 14px var(--container-padding);
}

.mobile-search.is-open {
  display: block;
}

.mobile-search__form {
  position: relative;
  display: flex;
  align-items: center;
}

.mobile-search__input {
  width: 100%;
  height: 44px;
  padding: 0 50px 0 14px;
  border: 1px solid var(--color-text);
  border-radius: 5px;
  background: var(--color-white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}

.mobile-search__input:focus {
  outline: 2px solid var(--color-blue);
  outline-offset: 1px;
}

.mobile-search__submit {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-text);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-search__submit svg {
  width: 22px;
  height: 22px;
}

/* =========================================================
   OUTAGE HOTLINE STRIP (mobile-only — hidden ≥ 781px)
   ========================================================= */

.outage-strip {
  display: none;
  background: var(--color-footer-bg);
  padding: 22px 0;
  text-align: center;
}

.outage-strip__heading {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
}

.outage-strip__numbers {
  margin: 4px 0 0;
  font-size: 21px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
}

.outage-strip__numbers a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.outage-strip__numbers a:hover {
  color: var(--color-blue);
}

.outage-strip__sep {
  color: var(--color-text);
}

/* =========================================================
   MOBILE BREAKPOINT — full design override at ≤ 780px
   ========================================================= */

@media (max-width: 780px) {
  :root {
    --container-padding: 24px;
  }
  /* ---------- Alert bar ---------- */ .alert-bar {
    padding: 10px 0;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    align-items: flex-start;
    gap: 8px;
  }
  .hero__card {
    gap: 15px;
  }
  .alert-bar__icon {
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }
  /* ---------- Mobile top strip — language switcher ---------- */ .mobile-top-strip {
    display: flex;
    align-items: center;
    padding: 8px var(--container-padding) 4px;
    background: rgba(255, 255, 255, 0.93);
  }
  .mobile-search__input:focus {
    outline: none !important;
  }
  /* ---------- Header main row: hamburger | LOGO (center) | search-icon ---------- */ .middle-header {
    background: rgba(255, 255, 255, 0.93);
    padding: 6px var(--container-padding) 16px;
    flex-direction: row;
    gap: 0;
  }
  .middle-left {
    flex: 1;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .middle-left .logo, .middle-left .custom-logo-link {
    grid-column: 2;
    justify-self: center;
    margin: 0 auto;
  }
  .middle-left .logo__title {
    font-size: 22px;
  }
  .middle-left .logo__tagline {
    font-size: 7px;
    letter-spacing: 1px;
  }
  .custom-logo-link img.custom-logo {
    max-height: 60px;
  }
  .mobile-menu-toggle {
    display: flex;
    grid-column: 1;
    justify-self: start;
  }
  .mobile-search-toggle {
    display: inline-flex;
    grid-column: 3;
    justify-self: end;
  }
  /* Hide desktop right-side cluster entirely on mobile */ .middle-right {
    display: none;
  }
  /* ---------- Mobile drawer (header-bottom collapsed by default) ---------- */ .header-bottom {
    display: none;
    background: var(--color-white);
    border-top: 1px solid var(--color-divider);
  }
  .header-bottom.is-open {
    display: block;
  }
  .header__nav {
    padding: 12px var(--container-padding) 18px;
    justify-content: flex-start;
  }
  .main-nav, .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .main-nav li {
    border-bottom: 1px solid var(--color-divider);
  }
  .main-nav li:last-child {
    border-bottom: 0;
  }
  .main-nav a {
    display: block;
    padding: 14px 0;
    font-size: 18px;
    line-height: 1.3;
  }
  .main-nav a::after {
    display: none;
  }
  /* ---------- Hero ---------- */ .hero {
    min-height: 0;
    background-position: center top;
  }
  .hero__inner {
    padding: 32px 0 28px;
    justify-content: center;
  }
  .hero__card {
    width: 90%;
    max-width: 100%;
    padding: 28px 22px;
    right: 0;
    top: 72px;
  }
  .hero__top, .hero__eyebrow {
    font-size: 22px;
    line-height: 1.2;
  }
  .hero__bottom, .hero__heading {
    font-size: 36px;
    line-height: 1.05;
  }
  .hero__description {
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 0px;
  }
  .hero__cta {
    width: 100%;
    max-width: 220px;
  }
  /* ---------- Outage hotline strip — visible on mobile ---------- */ .outage-strip {
    display: block;
  }
  /* ---------- Quick Links — 3 columns × 2 rows ---------- */ .quick-links {
    padding: 22px 20px 30px;
  }
  .quick-links__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .quick-link {
    padding: 22px 8px 18px;
    min-height: 150px;
  }
  .quick-link__icon {
/*     width: 50px;
    height: 50px; */
  }
  .quick-link__title {
    font-size: 14px;
    line-height: 1.2;
  }
  /* ---------- Ways We Can Help — icon + title ONLY (whole card clickable) ---------- */ .ways {
    padding: 36px 0 28px;
  }
  .section-heading, .ways__heading {
    font-size: 26px;
    line-height: 1.2;
    text-align: center;
  }
  .ways__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .help-card, .feature-card.help-card {
    position: relative;
    /* anchor for the stretched-link button */
    flex-direction: row;
    align-items: center;
    padding: 18px 22px;
    min-height: 0;
    gap: 24px;
  }
  .help-card__icon {
    width: 70px;
    height: 70px;
    margin: 0;
    flex-shrink: 0;
  }
  .help-card__title {
    font-size: 22px;
    line-height: 1.2;
    margin: 0;
    flex: 1;
    text-align: left;
  }
  /* Hide the description on mobile — design only shows icon + title */ .help-card__text {
    display: none;
  }
  /* Make the button an invisible click overlay covering the whole card. Keeps accessibility — the link still has its label for screen readers. */
	.help-card .btn-outline {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    z-index: 1;
		display:none;
  }
  /* ---------- Investing section — image left / content right (compact) ---------- */ .community, .investing {
    padding: 12px 0;
  }
  .community__card, .investing__card {
    grid-template-columns: 42% 1fr;
    gap: 0;
    padding: 16px;
    align-items: center;
  }
  .community__media, .investing__image {
   
    border-radius: 4px;
  }
  .community__content, .investing__content {
    padding: 0 0 0 16px;
  }
  .community__heading, .investing__content h2 {
    font-size: 20px;
    line-height: 28px;
    margin: 0 0 10px;
    word-break: break-word;
  }
  /* Mobile design only shows heading + button (no description) */ .community__text, .investing__content p {
    display: none;
  }
  .community .btn-solid, .investing .btn-solid {
    width: 100%;
    height: 40px;
    font-size: 14px;
    padding:0px 0px;
  }
  /* ---------- Bottom callout cards (.feature-card) — same image-left layout ---------- */ .features {
    padding: 12px 0 28px;
  }
  .features__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .feature-card {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 0;
    padding: 16px;
    align-items: center;
    flex-direction: unset;
    flex-wrap: nowrap;
  }
  .feature-card__media {
    height: 160px;
    min-height: 0;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
  }
  .feature-card__body {
    padding: 0 0 0 16px;
  }
  .feature-card__title {
    margin: 0 0 10px;
    flex: unset;
    font-size: 20px;
    line-height: 30px;
    word-break: break-word;
    color: #003971;
    font-weight: 700;
  }
  /* Hide description in callouts on mobile */ .feature-card__text {
    display: none;
  }
  .feature-card .btn-solid {
    width: 100%;
    height: 40px;
    font-size: 11px;
    padding:0px;
  }
  
}

/* =========================================================
   EXTRA-SMALL PHONES (≤ 480px)
   ========================================================= */

@media (max-width: 480px) {
  :root {
    --container-padding: 16px;
  }
  .hero__bottom, .hero__heading {
    font-size: 30px;
  }
  .hero__top, .hero__eyebrow {
    font-size: 18px;
  }
  .quick-links__grid {
    gap: 8px;
  }
  .quick-link {
    padding: 18px 6px 14px;
    min-height: 130px;
  }
/*   .quick-link__icon {
    width: 42px;
    height: 42px;
  } */
  .quick-link__title {
    font-size: 11px;
  }
  .help-card__icon {
    width: 56px;
    height: 56px;
  }
  .help-card__title {
    font-size: 18px;
    margin: 0 0 0px;
  }
  .help-card h3 {
    margin-bottom:0px !important;
    font-size: 18px;
    line-height:30px;
  }
  .community__card, .investing__card, .feature-card {
    grid-template-columns: 50% 1fr;
    gap: 15px;
    padding: 20px 10px;
  }
  .community__media, .investing__image, .feature-card__media {
    width: 100%;
    height: 100%;
    margin-bottom: 0px;
  }
  .community__content, .investing__content, .feature-card__body {
    padding: 0;
  }
  .site-footer {
    padding: 30px 0 20px;
  }
	
	
	}
	
	@media (max-width:768px){

    .main-nav .menu{
        display:block;
    }

    .main-nav .menu > li{
        border-bottom:1px solid #eee;
    }

    .main-nav .menu > li > a{
        padding:14px 18px;
    }

    .main-nav .sub-menu{
        display:none;
        position:static;
        width:100%;
        box-shadow:none;
        background:#f7f7f7;
    }

    .main-nav .sub-menu .sub-menu{
        position:static;
        width:100%;
        background:#efefef;
    }

    .main-nav li:hover > .sub-menu{
        display:none;
    }

    .main-nav li.active > .sub-menu{
        display:block;
    }

}

	
	
	
	


/* ==========================================================================
   BPU Life Support Page — Gutenberg block styles
   Pairs with the pure block pattern in wordpress/life-support-pattern.html.
   No wp:html blocks are used; every selector targets either a core Gutenberg
   class (.wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-cover,
   .wp-block-button, .wp-block-image, .wp-block-list) or a .bpu-* modifier
   from the block pattern.

   Source: Figma node 10590:467 — file Ecs4TOWkRqy5nLVOsz8SfS
   Layout: 1920px design width with 220px H-padding = 1480px content max.
   ========================================================================== */

/* ==========================================================================
   Design tokens (additive — main theme tokens live in style.css)
   ========================================================================== */

:root {
  --bpu-content-max: 1480px;
  --bpu-section-padx: clamp(20px, 5vw, 220px);
  --bpu-section-pady: 60px;
  --bpu-section-pady-mobile: 40px;
  --bpu-radius-card: 16px;
  --bpu-radius-btn: 4px;
  --bpu-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08);
  --bpu-shadow-cta:  0 8px 24px rgba(0, 0, 0, 0.18);
  --bpu-fs-hero:     56px;
  --bpu-fs-section:  40px;
  --bpu-fs-card-h:   24px;
  --bpu-fs-card-sub: 22px;
  --bpu-fs-detail-h: 20px;
  --bpu-fs-body-lg:  21px;
  --bpu-fs-body:     18px;
  --bpu-fs-eyebrow:  17px;
}

/* ==========================================================================
   Section frame — every wp:group with .bpu-section gets identical padding
   and a 1480px content cap (matching the Figma 1920 − 2×220 layout).
   ========================================================================== */

.bpu-section.alignfull, .bpu-section {
  padding: var(--bpu-section-pady) var(--bpu-section-padx);
  margin-top: 0;
  margin-bottom: 0;
}

/* Constrained children sit centered at 1480px max */

.bpu-section > .wp-block-group, .bpu-section > .wp-block-columns, .bpu-section > .bpu-section__head {
  max-width: var(--bpu-content-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ==========================================================================
   Section header (eyebrow + h2 + optional lead)
   ========================================================================== */

.bpu-section__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}

.bpu-section__head--center {
  text-align: center;
  align-items: center;
}

.bpu-section__head > * {
  margin: 0;
}

.bpu-section__title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, var(--bpu-fs-section)) !important;
  line-height: 1.1;
  letter-spacing: -0.37px;
  color: var(--color-blue-dark);
  margin: 0;
}

.bpu-section__lead {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: var(--bpu-fs-body-lg);
  line-height: 1.5;
  color: var(--color-text);
  letter-spacing: -0.21px;
  margin: 0;
}

/* ==========================================================================
   Eyebrow text (uppercase tracked label above section heading or in cards)
   ========================================================================== */

.bpu-eyebrow {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: var(--bpu-fs-eyebrow) !important;
  line-height: 1.05;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0;
}

.bpu-eyebrow--green {
  color: var(--color-green);
}

.bpu-eyebrow--orange {
  color: var(--color-orange);
}

.bpu-eyebrow--bright {
  color: var(--color-green-bright);
}

.bpu-eyebrow--blue {
  color: var(--color-blue-dark);
}

/* ==========================================================================
   HERO — wp:cover with breadcrumb + h1 + lead
   ========================================================================== */

.bpu-hero {
  min-height: 574px;
  /* Bottom-left positioning is handled by WordPress's
     .is-position-bottom-left class on the cover. Do NOT add align-self here —
     it conflicts with WP's flex-direction:column alignment. */;
}

.bpu-hero .wp-block-cover__inner-container {
  width: 100%;
  padding: 0;
  margin: 0;
}

/* The 1480px content container. PURE max-width + margin auto.
   No internal horizontal padding on wide screens — the 220px gutter is
   created naturally by the centered 1480px box sitting in a 1920px viewport
   ((1920 − 1480) / 2 = 220px). On narrower viewports the media query below
   adds a small 20px safety padding so text never touches the edge.
   The !important rules win over WP's constrained-layout inline styles. */

.bpu-hero__inner {
  max-width: 1480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 100px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1520px) {
  .bpu-hero__inner {
    padding-left: clamp(16px, 3vw, 32px) !important;
    padding-right: clamp(16px, 3vw, 32px) !important;
  }
}

.bpu-hero__inner > * {
  margin: 0 0 16px;
}

.bpu-hero__inner > *:last-child {
  margin-bottom: 0;
}

.bpu-breadcrumb {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 24px;
}

.bpu-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.bpu-breadcrumb a:hover {
  text-decoration: underline;
}

.bpu-hero__title {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(36px, 5vw, var(--bpu-fs-hero)) !important;
  line-height: 64px;
  letter-spacing: -0.5px;
  color: #ffffff;
  margin: 0 0 16px;
}

.bpu-hero__lead {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 32px;
  color: #ffffff;
  margin: 0;
}

/* ==========================================================================
   INTRO SECTION — two-column with sidebar
   ========================================================================== */

.bpu-section--intro {
  background: #ffffff;
}

.bpu-intro-cols {
  gap: 60px !important;
  align-items: flex-start;
}

.bpu-intro-cols__main {
  flex-basis: 880px !important;
}

.bpu-intro-cols__aside {
  flex-basis: 540px !important;
}

.bpu-intro-cols__main .bpu-eyebrow {
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

.bpu-intro-cols__main .bpu-section__title {
  margin-bottom: 12px;
}

.bpu-intro-cols__main .bpu-section__lead {
  margin-bottom: 0;
}

/* Bullet list */

.bpu-bullet-list {
  list-style: none !important;
  margin: 24px 0 0 !important;
  padding: 0 !important;
}

.bpu-bullet-list li {
  position: relative;
  padding-left: 22px;
  margin: 0 0 12px;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 22px;
  color: var(--color-text);
  list-style: none;
}

.bpu-bullet-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-blue-dark);
}

/* ==========================================================================
   SIDEBAR CARD (Get Started)
   ========================================================================== */

.bpu-sidebar-card {
  background: var(--color-blue-dark) !important;
  color: #ffffff;
  border-radius: var(--bpu-radius-card);
  padding: 36px !important;
  box-shadow: var(--bpu-shadow-card);
}

.bpu-sidebar-card > * {
  margin: 0;
}

.bpu-sidebar-card > * + * {
  margin-top: 16px;
}

.bpu-sidebar-card .bpu-eyebrow {
  margin-bottom: 0;
}

.bpu-sidebar-card__title {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  line-height: 34px;
  letter-spacing: -0.26px;
  color: #ffffff !important;
  margin: 0 0 8px !important;
}

.bpu-sidebar-card__text {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.15px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 16px;
}

.bpu-sidebar-card__buttons {
  margin: 0 0 16px !important;
}

.bpu-sidebar-card__buttons .wp-block-button {
  margin: 0 !important;
  display: inline-block;
}

/* Direct color values (not theme.json slugs) so the button styles correctly
   even if the production theme.json hasn't been updated. !important wins
   over both the WP preset classes (.has-green-background-color etc.) and
   any global .wp-block-button__link rule from the parent theme. */

.bpu-sidebar-card__buttons .wp-block-button__link, .bpu-btn--pdf .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  background-color: #7ca650 !important;
  color: #ffffff !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  text-align: center !important;
  padding: 14px 28px !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100%;
  white-space: normal;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.bpu-sidebar-card__buttons .wp-block-button__link:hover, .bpu-sidebar-card__buttons .wp-block-button__link:focus-visible, .bpu-btn--pdf .wp-block-button__link:hover, .bpu-btn--pdf .wp-block-button__link:focus-visible {
  background-color: #6a8f43 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.bpu-sidebar-card__divider {
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: transparent !important;
  height: 0 !important;
  margin: 16px 0 !important;
  opacity: 1 !important;
}

.bpu-sidebar-card__phone {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.56px;
  margin: 6px 0 0;
  color: #ffffff;
}

.bpu-sidebar-card__phone a {
  color: #ffffff;
  text-decoration: none;
}

.bpu-sidebar-card__phone a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   WHY IT MATTERS — 3 cards with top accent bar
   ========================================================================== */

.bpu-section--why {
  background: #ffffff;
}

.bpu-why-cards {
  gap: 20px !important;
}

.bpu-card {
  position: relative;
  background: #ffffff;
  border-radius: var(--bpu-radius-card);
  box-shadow: var(--bpu-shadow-card);
  padding: 40px 36px 32px !important;
  overflow: hidden;
  height: auto;
  min-height: 317px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bpu-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: var(--color-blue-dark);
  z-index: 1;
}

.bpu-card--accent-green::before {
  background: var(--color-green);
}

.bpu-card--accent-orange::before {
  background: var(--color-orange);
}

.bpu-card > * {
  margin: 0;
}

.bpu-card__icon-frame {
  width: 81px !important;
  height: 80px !important;
  border-radius: 12px;
  background: var(--color-bg-blue-light);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 auto 16px !important;
  flex-shrink: 0;
}

.bpu-card__icon-frame--green {
  background: var(--color-bg-green-light);
}

.bpu-card__icon-frame--orange {
  background: var(--color-bg-orange-light);
}

.bpu-card__icon {
  margin: 0 !important;
}

.bpu-card__icon img {
  width: 44px;
  height: 44px;
  display: block;
}

.bpu-card__eyebrow {
  letter-spacing: 1.3px;
  margin: 0 0 10px;
}

.bpu-card__title {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: var(--bpu-fs-card-sub) !important;
  line-height: 30px;
  letter-spacing: -0.22px;
  color: var(--color-blue-dark);
  margin: 0 0 12px !important;
}

.bpu-card__body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.15px;
  color: var(--color-text);
  margin: 0;
}

/* ==========================================================================
   HOW TO ENROLL — 3 horizontal step cards in a vertical stack
   ========================================================================== */

.bpu-section--enroll {
  background: var(--color-bg-life-support) !important;
}

.bpu-steps {
  display: flex !important;
  flex-direction: column;
  gap: 24px;
  max-width: 706px;
  margin: 0 auto !important;
  width: 100%;
}

.bpu-step {
  background: #ffffff !important;
  border-radius: var(--bpu-radius-card);
  box-shadow: var(--bpu-shadow-card);
  padding: 32px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 24px;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  width: 760px !important;
  margin: 0px;
}

.bpu-step__icon {
  flex: 0 0 80px !important;
  width: 80px !important;
  height: 80px !important;
  background: var(--color-blue-dark) !important;
  border-radius: 12px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.bpu-step__icon .wp-block-image, .bpu-step__icon figure {
  margin: 0 !important;
}

.bpu-step__icon img {
  width: 44px;
  height: 44px;
  display: block;
}

.bpu-step__body {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.bpu-step__title {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: var(--bpu-fs-card-h) !important;
  line-height: 32px;
  letter-spacing: -0.24px;
  color: var(--color-blue-dark);
  margin: 0 0 8px !important;
}

.bpu-step__desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: var(--color-text);
  margin: 0 0 12px;
}

.bpu-step__link {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: -0.14px;
  margin: 0;
}

.bpu-step__link a {
  color: var(--color-green);
  text-decoration: none;
}

.bpu-step__link a:hover {
  text-decoration: underline;
  color: var(--color-blue-dark);
}

/* ==========================================================================
   BE PREPARED — 2 tinted cards with badge + content
   ========================================================================== */

.bpu-section--prepared {
  background: #ffffff;
}

.bpu-section--prepared .bpu-section__head {
  max-width: 100%;
}

.bpu-prepared-cards {
  gap: 40px !important;
  align-items: stretch;
}

.bpu-prepare-card {
  border-radius: var(--bpu-radius-card);
  padding: 32px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 24px;
  align-items: flex-start;
  min-height: 220px;
}

.bpu-prepare-card--warn {
  background: var(--color-bg-orange-light) !important;
}

.bpu-prepare-card--info {
  background: var(--color-bg-blue-light) !important;
}

.bpu-prepare-card__badge {
  flex: 0 0 56px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 12px;
  background: #ffffff;
  border: 2px solid var(--color-orange);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.bpu-prepare-card__badge--blue {
  border-color: var(--color-blue-dark);
}

.bpu-prepare-card__badge .wp-block-image, .bpu-prepare-card__badge figure {
  margin: 0 !important;
}

.bpu-prepare-card__badge img {
  width: 28px;
  height: 28px;
}

.bpu-prepare-card__body {
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 0 !important;
}

.bpu-prepare-card__title {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: var(--bpu-fs-card-h) !important;
  line-height: 32px;
  letter-spacing: -0.24px;
  color: var(--color-blue-dark);
  margin: 0 0 8px !important;
}

.bpu-prepare-card__text {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.16px;
  margin: 0 0 16px;
  color: var(--color-text);
}

.bpu-prepare-card__links {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: -0.14px;
  margin: 0;
}

.bpu-prepare-card__links a {
  color: var(--color-green);
  text-decoration: none;
}

.bpu-prepare-card__links a:hover {
  color: var(--color-blue-dark);
  text-decoration: underline;
}

/* ==========================================================================
   IMPORTANT DETAILS — 2 cards with green left border
   ========================================================================== */

.bpu-section--details {
  background: var(--color-bg-life-support) !important;
}

.bpu-detail-cards {
  gap: 40px !important;
  margin-bottom: 40px !important;
}

.bpu-detail-card {
  position: relative;
  background: #ffffff !important;
  border: 1px solid var(--color-divider);
  border-radius: var(--bpu-radius-card);
  padding: 28px 28px 28px 36px !important;
  overflow: hidden;
  min-height: 140px;
}

.bpu-detail-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--color-green);
}

.bpu-detail-card__title {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: var(--bpu-fs-detail-h) !important;
  line-height: 28px;
  letter-spacing: -0.2px;
  color: var(--color-blue-dark);
  margin: 0 0 8px !important;
}

.bpu-detail-card__text {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.15px;
  color: var(--color-text);
  margin: 0;
}

/* ==========================================================================
   CLOSING CTA — dark image with phone + button
   ========================================================================== */

.bpu-closing-cta {
  border-radius: var(--bpu-radius-card);
  overflow: hidden;
  box-shadow: var(--bpu-shadow-cta);
  min-height: 200px;
  margin: 0 !important;
}

.bpu-closing-cta .wp-block-cover__inner-container {
  width: 100%;
  padding: 40px;
}

.bpu-closing-cta__inner {
  display: flex !important;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
}

.bpu-closing-cta__content {
  flex: 1 1 320px;
  min-width: 0;
}

.bpu-closing-cta__content > * {
  margin: 0;
}

.bpu-closing-cta__content .bpu-eyebrow {
  margin-bottom: 8px;
  letter-spacing: 1.5px;
}

.bpu-closing-cta__phone {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 52px;
  letter-spacing: -0.88px;
  color: #ffffff;
  margin: 0;
}

.bpu-closing-cta__phone a {
  color: #ffffff;
  text-decoration: none;
}

.bpu-closing-cta__phone a:hover {
  text-decoration: underline;
}

.bpu-closing-cta__cta {
  flex-shrink: 0;
  margin: 0 !important;
}

.bpu-closing-cta__cta .wp-block-button__link {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  padding: 14px 28px !important;
  border-radius: var(--bpu-radius-btn);
}

/* ==========================================================================
   NEED ASSISTANCE — full-width gradient banner with centered content
   ========================================================================== */

.bpu-section--need-help {
  padding: var(--bpu-section-pady) var(--bpu-section-padx) !important;
  text-align: center;
}

.bpu-need-help__inner {
  max-width: var(--bpu-content-max);
  margin: 0 auto;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.bpu-need-help__title {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: var(--bpu-fs-section) !important;
  line-height: 44px;
  color: #ffffff !important;
  margin: 15px  0 0 0 !important;
}

.bpu-need-help__text {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: #ffffff !important;
  margin: 0 0 28px !important;
}

.bpu-need-help__cta {
  margin: 0;
}

.bpu-need-help__cta .wp-block-button.is-style-outline .wp-block-button__link, .bpu-btn--outline-white .wp-block-button__link {
  background: transparent !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  padding: 14px 28px !important;
  border-radius: var(--bpu-radius-btn);
  transition: background-color .2s, color .2s;
}

.bpu-need-help__cta .wp-block-button.is-style-outline .wp-block-button__link:hover, .bpu-btn--outline-white .wp-block-button__link:hover {
  background: #ffffff !important;
  color: var(--color-blue-dark) !important;
}

/* ==========================================================================
   Buttons — generic .bpu-btn (used in sidebar + closing CTA)
   ========================================================================== */

.bpu-btn .wp-block-button__link {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0;
  padding: 14px 28px !important;
  border-radius: var(--bpu-radius-btn);
  text-decoration: none;
  transition: background-color .2s, color .2s, transform .1s;
}

/* ==========================================================================
   Placeholder fallbacks — if the hero or closing-CTA image fails to load,
   the dim-overlay + dark background-color keep the section legible.
   ========================================================================== */

.bpu-hero {
  background-color: #2a3f1f;
  /* dark olive — matches Figma hero photo tone */;
}

.bpu-closing-cta {
  background-color: #1a1a1a;
}

.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-bottom-left .wp-block-cover__inner-container {
  width:100% !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet ≤ 1100px: cards become 2-up, intro stacks */

@media (max-width: 1100px) {
  .bpu-intro-cols {
    flex-direction: column;
    gap: 40px !important;
  }
  .bpu-intro-cols__main, .bpu-intro-cols__aside {
    flex-basis: 100% !important;
    width: 100%;
  }
  .bpu-why-cards {
    flex-wrap: wrap;
  }
  .bpu-why-cards .wp-block-column {
    flex-basis: calc(50% - 10px) !important;
  }
}

/* Small tablet ≤ 900px: prepared/detail cards stack */

@media (max-width: 900px) {
  .bpu-prepared-cards, .bpu-detail-cards {
    flex-direction: column;
    gap: 24px !important;
  }
  .bpu-prepared-cards .wp-block-column, .bpu-detail-cards .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* Mobile ≤ 767px: everything stacks */

@media (max-width: 767px) {
  :root {
    --bpu-section-padx: 20px;
    --bpu-section-pady: 40px;
  }
  .bpu-hero {
    min-height: 500px !important;
  }
  .bpu-hero .wp-block-cover__inner-container {
    padding-bottom: 40px;
  }
  .bpu-hero__title {
    font-size: 36px !important;
    line-height: 1.1;
	  margin: 0 0 10px;
  }
  .bpu-hero__lead {
    font-size: 18px;
    line-height: 1.45;
  }
  .bpu-section__title {
    font-size: 28px !important;
    line-height: 1.15;
  }
  .bpu-why-cards {
    flex-direction: column;
  }
  .bpu-why-cards .wp-block-column {
    flex-basis: 100% !important;
  }
  .bpu-card {
    padding: 32px 24px 24px !important;
    min-height: 0;
  }
  .bpu-step {
    flex-direction: column !important;
    padding: 24px !important;
    gap: 16px;
  }
  .bpu-step__icon {
    flex: 0 0 64px !important;
    width: 64px !important;
    height: 64px !important;
  }
  .bpu-step__icon img {
    width: 36px;
    height: 36px;
  }
  .bpu-prepare-card {
    flex-direction: column !important;
    padding: 24px !important;
    gap: 16px;
    min-height: 0;
  }
  .bpu-detail-card {
    padding: 24px 24px 24px 28px !important;
    min-height: 0;
  }
  .bpu-closing-cta .wp-block-cover__inner-container {
    padding: 32px 10px;
  }
  .bpu-closing-cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .bpu-closing-cta__phone {
    font-size: 32px;
    line-height: 1.1;
  }
  .bpu-sidebar-card {
    padding: 28px 24px !important;
  }
  .bpu-sidebar-card__title {
    font-size: 22px !important;
    line-height: 1.3;
  }
  .bpu-sidebar-card__phone {
    font-size: 24px;
    line-height: 1.2;
  }
	
	.bpu-breadcrumb{
		    margin: 0 0 12px;
	}
}

/* Extra-small ≤ 480px */

@media (max-width: 480px) {
  :root {
    --bpu-section-padx: 16px;
    --bpu-section-pady: 32px;
  }
  .bpu-hero__title {
    font-size: 30px !important;
  }
  .bpu-section__title {
    font-size: 24px !important;
  }
  .bpu-card__title {
    font-size: 20px !important;
    line-height: 1.3;
  }
  .bpu-step__title {
    font-size: 20px !important;
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
    line-height: 1.3;
  }
  .bpu-closing-cta__phone {
    font-size: 28px;
  }
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
  .bpu-hero, .bpu-closing-cta, .bpu-section--need-help {
    background: none !important;
    color: #000 !important;
  }
  .bpu-hero__title, .bpu-hero__lead, .bpu-breadcrumb, .bpu-closing-cta__phone, .bpu-need-help__title, .bpu-need-help__text {
    color: #000 !important;
  }
  .bpu-section {
    padding: 20px 0 !important;
    page-break-inside: avoid;
  }
  .wp-block-button__link {
    background: none !important;
    color: #000 !important;
    border: 1px solid #000 !important;
  }
}

/* Reduced motion */

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

/* ==========================================================================
   BPU 4-Page Bundle — additive styles
   Pairs with bpu-life-support.css (load AFTER it).
   Covers:
     1. Fire Hydrant Meter Rentals
     2. Service Line Inventory
     3. Vendors / Suppliers
     4. New Service / Transfer Service
   Reuses design tokens (--color-*, --bpu-fs-*, --bpu-radius-*, etc.) and
   shared classes (.bpu-hero, .bpu-section, .bpu-eyebrow, .bpu-section__title,
   .bpu-section__head, .bpu-need-help, .bpu-bullet-list) from
   bpu-life-support.css. Only adds NEW classes specific to these 4 pages.
   ========================================================================== */

/* Wider centered lead used on Fire Hydrant intro section */

.bpu-section__lead-wide {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 18px !important;
  line-height: 28px;
  letter-spacing: -0.18px;
  color: var(--color-text);
  max-width: 1080px;
  margin: 16px auto 0 !important;
}

.bpu-section--centered .bpu-section__head--center {
  margin-bottom: 0;
}

/* ==========================================================================
   PAGE 1 — Fire Hydrant Meter Rentals: meter cards (¾" and 3")
   ========================================================================== */

.bpu-section--meters .bpu-section__head {
  margin-bottom: 16px;
}

.bpu-meter-cards {
  gap: 24px !important;
  margin-top: 16px;
}

.bpu-meter-card {
  flex-basis: calc(50% - 12px) !important;
  padding: 0 !important;
}

.bpu-meter-card__inner {
  background: #ffffff;
  border: 1px solid #d9dbe0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  padding: 0 !important;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.bpu-meter-card__inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--color-blue-dark);
  z-index: 1;
}

.bpu-meter-card__inner > * {
  padding-left: 36px !important;
  padding-right: 36px !important;
}

.bpu-meter-card__hero {
  display: flex !important;
  flex-direction: row !important;
  gap: 28px;
  align-items: center;
  padding-top: 36px !important;
  padding-bottom: 28px !important;
  margin: 0 !important;
}

.bpu-meter-card__tile {
  flex: 0 0 220px !important;
  width: 220px !important;
  height: 220px !important;
  background: #f0f5fc !important;
  border-radius: 12px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bpu-meter-card__numeral {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 120px !important;
  line-height: 1 !important;
  color: var(--color-blue-dark) !important;
  text-align: center;
  margin: 0 !important;
  letter-spacing: -2px;
}

.bpu-meter-card__head {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px;
}

.bpu-meter-card__head > * {
  margin: 0;
}

.bpu-meter-card__title {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  line-height: 32px !important;
  letter-spacing: -0.26px;
  color: var(--color-blue-dark);
  margin: 0 !important;
}

.bpu-meter-card__desc {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text);
  margin: 0;
}

.bpu-meter-card__divider {
  border: 0 !important;
  border-top: 1px solid #d9dbe0 !important;
  background: transparent !important;
  height: 0 !important;
  margin: 0 !important;
  width: calc(100% - 72px);
}

.bpu-meter-card__foot {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 32px;
  padding-top: 28px !important;
  padding-bottom: 36px !important;
  flex-wrap: wrap;
}

.bpu-meter-card__bullets {
  flex: 1 1 auto;
  min-width: 200px;
  padding: 0 !important;
  margin: 0 !important;
}

.bpu-meter-card__bullets > .bpu-eyebrow {
  margin: 0 0 8px !important;
}

.bpu-meter-card__bullets .bpu-bullet-list {
  margin: 0 !important;
  padding: 0 !important;
}

.bpu-meter-card__bullets .bpu-bullet-list li {
  margin-bottom: 6px;
  padding-left: 20px;
  font-size: 18px;
  line-height: 26px;
}

.bpu-meter-card__bullets .bpu-bullet-list li::before {
  background: var(--color-green);
  top: 9px;
}

.bpu-meter-card__cta {
  margin: 0 !important;
  flex-shrink: 0;
}

/* PDF button — explicit colors so theme defaults can't override */

.bpu-btn--pdf .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #7ca650 !important;
  color: #ffffff !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  padding: 14px 28px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  white-space: normal;
  transition: background-color 0.2s;
}

.bpu-btn--pdf .wp-block-button__link:hover, .bpu-btn--pdf .wp-block-button__link:focus-visible {
  background-color: #6a8f43 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   PAGE 2 — Service Line Inventory
   ========================================================================== */

/* Map lookup section (2-col with map preview) */

.bpu-lookup-cols {
  gap: 35px !important;
  align-items: stretch !important;
  background: #ffffff;
  border-radius: 12px;
}

.hero-white {
  color:#fff !important;
}

.gtxt {
  color: #7CA650 !important;
}

.bpu-section__title.h2 {
  color: #002B7F !important;
}

.bpu-lookup__text {
  flex-basis: 50% !important;
  padding: 48px 0px 48px 0px !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

.bpu-lookup__text > * {
  margin: 0;
}

.bpu-lookup__text .bpu-section__title {
  margin: 0 !important;
}

.bpu-lookup__cta {
  margin: 0 !important;
}

.bpu-lookup__cta .wp-block-button__link {
  background-color: #7ca650 !important;
  color: #ffffff !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  padding: 14px 28px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
}

.bpu-lookup__note {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px !important;
  color: var(--color-text-grey);
  margin: 0 !important;
  font-weight:400;
}

.bpu-lookup__map {
  flex-basis: 50% !important;
  position: relative;
  min-height: 380px;
  background: #1d1d1d;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
}

.bpu-lookup__map-image {
  margin: 0 !important;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.bpu-lookup__map-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bpu-lookup__map-badge {
  position: relative;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff !important;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 4px;
  letter-spacing: 1.5px;
  margin: 0 !important;
}

/* "What is the service line inventory?" 2-col with image left */

.bpu-section--basics .bpu-basics-cols {
  gap: 64px !important;
  align-items: center !important;
}

.bpu-basics__image {
  flex-basis: 45% !important;
  padding: 0 !important;
}

.bpu-basics__image img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  display: block;
}

.bpu-basics__text {
  flex-basis: 55% !important;
  padding: 0 !important;
}

.bpu-basics__text > * {
  margin: 0 0 16px;
}

.bpu-basics__text > *:last-child {
  margin-bottom: 0;
}

.bpu-basics__text p {
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text);
}

/* "How BPU Built the Inventory" — 3 numbered method cards */

.bpu-section--method .bpu-section__head--center {
  align-items: center !important;
}

.bpu-method-cards {
  gap: 24px !important;
  margin-top: 40px;
}

.bpu-method-card {
  flex-basis: calc(33.333% - 16px) !important;
  background: #ffffff !important;
  border: 1px solid #d9dbe0;
  border-radius: 8px;
  padding: 32px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}

.bpu-method-card > * {
  margin: 0;
}

.bpu-method-card__num {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 36px !important;
  line-height: 1 !important;
  color: var(--color-green) !important;
  margin: 0 !important;
}

.bpu-method-card__rule {
  border: 0 !important;
  background: var(--color-green) !important;
  height: 3px !important;
  width: 40px !important;
  margin: 4px 0 !important;
  opacity: 1 !important;
}

.bpu-method-card__title {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 30px !important;
  color: var(--color-blue-dark);
  margin: 0 !important;
}

.bpu-method-card p {
  font-size: 18px;
  line-height: 22px;
  color: var(--color-text);
  margin: 0;
}

/* Dark stats row (cover block) */

.bpu-stats-row {
  border-radius: 12px;
  overflow: hidden;
  margin: 0 !important;
}

.bpu-stats-row .wp-block-cover__inner-container {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0px;
}

.bpu-stats__grid {
  gap: 24px !important;
  align-items: center !important;
}

.bpu-stat {
  flex-basis: calc(25% - 18px) !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
}

.bpu-stat > * {
  margin: 0;
}

.bpu-stat__number {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 44px !important;
  line-height: 52px !important;
  color: var(--color-green) !important;
  margin: 0 !important;
}

.bpu-stat__rule {
  border: 0 !important;
  background: var(--color-green) !important;
  height: 3px !important;
  width: 40px !important;
  margin: 0 !important;
  opacity: 1 !important;
}

.bpu-stat__label {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 22px !important;
  color: #ffffff !important;
  margin: 0 !important;
}

/* Email CTA with green left border */

.bpu-section--email-cta {
  border-left: 4px solid var(--color-green);
}

.bpu-email-cta__inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: 0 !important;
  margin: 0 !important;
}

.bpu-email-cta__text {
  flex: 1 1 480px;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 16px;
}

.bpu-email-cta__text > * {
  margin: 0;
}

.bpu-email-cta__text p {
  font-size: 18px;
  line-height: 22px;
  color: var(--color-text);
}

.bpu-email-cta__cta {
  flex-shrink: 0;
  margin: 0 !important;
}

.bpu-btn--email .wp-block-button__link {
  background-color: #002b7f !important;
  color: #ffffff !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  padding: 30px 28px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  display: inline-block;
}

.bpu-btn--email .wp-block-button__link:hover {
  background-color: #001d59 !important;
}

/* ==========================================================================
   PAGE 3 — Vendors / Suppliers
   ========================================================================== */

/* Path cards — 2-up (also used as base for 3-up below) */

.bpu-section--paths-2 .bpu-section__head {
  margin-bottom: 40px;
}

.bpu-path-cards-2 {
  gap: 24px !important;
  align-items: stretch !important;
}

.bpu-path-card {
  flex-basis: calc(50% - 12px) !important;
  border-radius: 12px;
  padding: 48px !important;
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.bpu-path-card--solid {
  background: var(--color-blue-dark) !important;
}

.bpu-path-card--outline {
  background: #ffffff !important;
  border: 2px solid var(--color-green);
}

.bpu-path-card > * {
  margin: 0;
}

.bpu-path-card__title {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 40px !important;
  line-height: 44px !important;
  letter-spacing: -0.4px;
  margin: 0 !important;
}

.bpu-path-card__text {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 26px;
  margin: 0;
}

.bpu-path-card__cta {
  margin-top: auto !important;
  padding-top: 8px;
}

.bpu-path-card__cta .wp-block-button__link {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  padding: 14px 28px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  display: inline-block;
}

.bpu-path-card__cta .wp-block-button.bpu-btn:has(.has-green-background-color) .wp-block-button__link, .bpu-path-card--solid .bpu-btn .wp-block-button__link {
  background-color: #7ca650 !important;
  color: #ffffff !important;
}

.bpu-path-card--outline .bpu-btn .wp-block-button__link {
  background-color: #002b7f !important;
  color: #ffffff !important;
}

/* About-purchasing image + intro */

.bpu-about-purchasing__image {
  margin: 0 0 40px !important;
}

.bpu-about-purchasing__image img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  display: block;
}

.bpu-about-purchasing__text {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}

.bpu-about-purchasing__text > * {
  margin: 0;
}

.bpu-about-purchasing__text p {
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text);
}

/* Resource cards (4-up) */

.bpu-section--resources .bpu-section__head {
  margin-bottom: 40px;
}

.bpu-resource-cards {
  gap: 24px !important;
  align-items: stretch !important;
}

.bpu-resource-card {
  flex-basis: calc(25% - 18px) !important;
  background: #ffffff !important;
  border: 1px solid #d9dbe0;
  border-radius: 8px;
  padding: 28px !important;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.bpu-resource-card::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 28px;
  width: 48px;
  height: 4px;
  background: var(--color-green);
}

.bpu-resource-card > .bpu-eyebrow {
  margin-top: 16px !important;
}

.bpu-resource-card > * {
  margin: 0;
}

.bpu-resource-card__title {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  color: var(--color-blue-dark);
  margin: 0 !important;
}

.bpu-resource-card__text {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text);
  flex: 1;
  margin: 0;
}

.bpu-resource-card__link {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: 0;
  margin: 0 !important;
}

.bpu-resource-card__link a {
  color: var(--color-green) !important;
  text-decoration: none;
}

.bpu-resource-card__link a:hover {
  text-decoration: underline;
}

/* Closing CTA — dark image with eyebrow + heading + green button */

.bpu-section--closing-cta {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.bpu-section--closing-cta .bpu-closing-cta {
  max-width: 1480px;
  margin: 0 auto !important;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.bpu-section--closing-cta .bpu-closing-cta .wp-block-cover__inner-container {
  padding: 40px !important;
  width: 100%;
}

.bpu-section--closing-cta .bpu-closing-cta__inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: 0 !important;
  margin: 0 !important;
}

.bpu-section--closing-cta .bpu-closing-cta__content {
  flex: 1 1 480px;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}

.bpu-section--closing-cta .bpu-closing-cta__content > * {
  margin: 0;
}

.bpu-section--closing-cta .bpu-closing-cta__title {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 30px !important;
  line-height: 38px !important;
  letter-spacing: -0.5px;
  color: #ffffff !important;
  margin: 0 !important;
}

.bpu-section--closing-cta .bpu-closing-cta__title a {
  color: #ffffff !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.bpu-section--closing-cta .bpu-closing-cta__title a:hover {
  color: var(--color-green-bright) !important;
}

.bpu-section--closing-cta .bpu-closing-cta__cta {
  flex-shrink: 0;
  margin: 0 !important;
}

.bpu-section--closing-cta .bpu-closing-cta__cta .wp-block-button__link {
  background-color: #7ca650 !important;
  color: #ffffff !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  padding: 14px 28px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  display: inline-block;
}

/* ==========================================================================
   PAGE 4 — New Service: 3-path cards + phone CTA
   ========================================================================== */

.bpu-section--paths-3 .bpu-section__head {
  margin-bottom: 40px;
}

.bpu-path-cards-3 {
  gap: 32px !important;
  align-items: stretch !important;
}

.bpu-path-cards-3 .bpu-path-card {
  flex-basis: calc(33.333% - 22px) !important;
  padding: 40px 30px !important;
  gap: 16px;
}

.bpu-path-cards-3 .bpu-path-card__title {
  font-size: 36px !important;
  line-height: 44px !important;
}

/* Checkmark list — uses CSS-only ✓ glyph (no extra icon needed) */

.bpu-checklist {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.bpu-checklist li {
  position: relative;
  padding-left: 32px;
  margin: 0 !important;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 22px;
  color: var(--color-text);
  list-style: none;
}

.bpu-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-green);
  border-radius: 50%;
  background: transparent;
}

.bpu-checklist li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--color-green);
  border-bottom: 2px solid var(--color-green);
  transform: rotate(-45deg);
  transform-origin: center;
}

.bpu-checklist--white li {
  color: #ffffff;
}

.bpu-checklist--white li::before {
  border-color: var(--color-green-bright);
}

.bpu-checklist--white li::after {
  border-left-color: var(--color-green-bright);
  border-bottom-color: var(--color-green-bright);
}

/* Full-width button (used in path cards) */

.bpu-btn--full {
  width: 100%;
}

.bpu-btn--full .wp-block-button__link {
  width: 100%;
  display: block;
  text-align: center;
}

/* Phone CTA — orange eyebrow with phone number */

.bpu-section--phone-cta {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.bpu-section--phone-cta .bpu-phone-cta {
  max-width: 1480px;
  margin: 0 auto !important;
  border-radius: 12px;
  overflow: hidden;
}

.bpu-section--phone-cta .bpu-phone-cta .wp-block-cover__inner-container {
  padding: 36px 24px 36px 48px !important;
  width: 100%;
}

.bpu-phone-cta__inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: 0 !important;
  margin: 0 !important;
}

.bpu-phone-cta__content {
  flex: 1 1 480px;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
}

.bpu-phone-cta__content > * {
  margin: 0;
}

.bpu-eyebrow--orange {
  color: var(--color-orange) !important;
}

.bpu-phone-cta__number {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 36px !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.bpu-phone-cta__number a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.bpu-phone-cta__number a:hover {
  text-decoration: underline !important;
}

.bpu-phone-cta__text {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 22px;
  color: #ffffff !important;
  margin: 0 !important;
}

.bpu-phone-cta__cta {
  flex-shrink: 0;
  margin: 0 !important;
}

.bpu-phone-cta__cta .wp-block-button__link {
  background-color: #7ca650 !important;
  color: #ffffff !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  padding: 14px 28px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  display: inline-block;
}

.h3 {
  color: #002B7F !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet — large (≤ 1100px): 4-up resource cards become 2-up */

@media (max-width: 1100px) {
  .bpu-resource-cards {
    flex-wrap: wrap;
  }
  .bpu-resource-card {
    flex-basis: calc(50% - 12px) !important;
  }
  .bpu-meter-cards {
    flex-wrap: wrap;
  }
  .bpu-meter-card {
    flex-basis: 100% !important;
  }
  .bpu-path-cards-3 {
    flex-wrap: wrap;
  }
  .bpu-path-cards-3 .bpu-path-card {
    flex-basis: 100% !important;
  }
}

/* Tablet (≤ 992px): 2-col layouts stack, 3-up cards stack */

@media (max-width: 992px) {
  .bpu-lookup-cols, .bpu-basics-cols, .bpu-path-cards-2 {
    flex-wrap: wrap;
  }
  .bpu-lookup__text, .bpu-lookup__map, .bpu-basics__image, .bpu-basics__text, .bpu-path-cards-2 .bpu-path-card {
    flex-basis: 100% !important;
  }
  .bpu-lookup__text {
    padding: 32px !important;
  }
  .bpu-lookup__map {
    min-height: 240px;
  }
  .bpu-method-cards {
    flex-wrap: wrap;
  }
  .bpu-method-card {
    flex-basis: calc(50% - 12px) !important;
  }
  .bpu-stats__grid {
    flex-wrap: wrap;
  }
  .bpu-stat {
    flex-basis: calc(50% - 12px) !important;
  }
  .bpu-email-cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .bpu-section--closing-cta .bpu-closing-cta__inner, .bpu-phone-cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Mobile (≤ 767px) */

@media (max-width: 767px) {
  /* Meter card mobile reflow */ .bpu-meter-card__hero {
    flex-direction: column !important;
    align-items: stretch;
    gap: 20px;
  }
  .bpu-meter-card__tile {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 160px !important;
  }
  .bpu-meter-card__numeral {
    font-size: 80px !important;
  }
  .bpu-meter-card__inner > * {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .bpu-meter-card__hero {
    padding-top: 24px !important;
    padding-bottom: 20px !important;
  }
  .bpu-meter-card__foot {
    flex-direction: column !important;
    align-items: stretch;
    gap: 20px;
    padding-top: 20px !important;
    padding-bottom: 24px !important;
  }
  .bpu-meter-card__cta .wp-block-button, .bpu-meter-card__cta .wp-block-button__link {
    width: 100%;
    display: block;
    text-align: center;
  }
  .bpu-meter-card__divider {
    width: calc(100% - 48px);
  }
  /* Method cards stack to 1-up */ .bpu-method-card {
    flex-basis: 100% !important;
  }
  /* Stats stack to 1-up */ .bpu-stat {
    flex-basis: 100% !important;
  }
  .bpu-stat__number {
    font-size: 36px !important;
    line-height: 44px !important;
  }
  /* Resource cards stack */ .bpu-resource-card {
    flex-basis: 100% !important;
  }
  /* Path cards (both 2-up and 3-up) */ .bpu-path-card {
    padding: 32px !important;
  }
  .bpu-path-card__title {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  .bpu-path-cards-3 .bpu-path-card__title {
    font-size: 28px !important;
  }
  /* Email CTA */ .bpu-email-cta__cta, .bpu-email-cta__cta .wp-block-button, .bpu-btn--email .wp-block-button__link {
    width: 100%;
    display: block;
    text-align: center;
  }
  /* Closing CTA */ .bpu-section--closing-cta .bpu-closing-cta .wp-block-cover__inner-container {
    padding: 28px !important;
  }
  .bpu-section--closing-cta .bpu-closing-cta__title {
    font-size: 24px !important;
    line-height: 32px !important;
  }
  /* Phone CTA */ .bpu-section--phone-cta .bpu-phone-cta .wp-block-cover__inner-container {
    padding: 28px !important;
  }
  .bpu-phone-cta__number {
    font-size: 28px !important;
  }
}

/* Extra-small (≤ 480px) */

@media (max-width: 480px) {
  .bpu-meter-card__numeral {
    font-size: 64px !important;
  }
  .bpu-meter-card__tile {
    height: 130px !important;
  }
  .bpu-meter-card__title {
    font-size: 22px !important;
    line-height: 28px !important;
  }
  .bpu-method-card {
    padding: 24px !important;
  }
  .bpu-method-card__num {
    font-size: 28px !important;
  }
  .bpu-resource-card {
    padding: 24px !important;
  }
  .bpu-stats-row .wp-block-cover__inner-container {
    padding: 40px 16px !important;
  }
  .bpu-path-card {
    padding: 24px !important;
  }
  .bpu-path-card__title {
    font-size: 22px !important;
  }
  .bpu-phone-cta__number {
    font-size: 24px !important;
  }
  .bpu-section--closing-cta .bpu-closing-cta__title {
    font-size: 20px !important;
    line-height: 26px !important;
  }
  .bpu-need-help__title {
    font-size: 24px;
    line-height:34px;
  }
  .bpu-lookup__text {
    padding: 32px 10px !important;
  }
  .bpu-hero__inner {
    padding-bottom:0px !important;
  }
}

/* ==========================================================================
   BPU Electric Service + Water Service — additions
   Append to bpu-pages.css. Depends on tokens from bpu-life-support.css.
   ========================================================================== */

/* Outage band — emergency card overlapping the hero */

.bpu-section--outage-band-host {
  padding-top: 0 !important;
  padding-bottom: 60px;
}

.bpu-outage-band {
  max-width: 1480px;
  margin: -60px auto 0 !important;
  background: var(--color-blue-dark) !important;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 24px 36px 24px 44px !important;
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  overflow: hidden;
}

.bpu-outage-band::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 8px;
  background: var(--color-orange);
}

.bpu-outage-band__text, .bpu-outage-band__phone {
  flex: 0 1 auto;
  margin: 0 !important;
  padding: 0 !important;
}

.bpu-outage-band__text {
  min-width: 200px;
}

.bpu-outage-band__phone {
  min-width: 240px;
}

.bpu-outage-band__eyebrow {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: 1.5px;
  color: #EF800A !important;
  margin: 0 0 4px !important;
  text-transform: uppercase;
}

.bpu-outage-band__title {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  line-height: 36px !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.bpu-outage-band__number {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 36px !important;
  line-height: 44px !important;
  letter-spacing: -0.7px;
  color: #ffffff !important;
  margin: 0 !important;
}

.bpu-outage-band__number a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.bpu-outage-band__subtitle {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 18px !important;
  line-height: 20px !important;
  opacity: 0.85;
  color: #ffffff !important;
  margin: 4px 0 0 !important;
}

.bpu-outage-band__cta {
  margin-left: auto !important;
  margin-right: 0 !important;
  flex-shrink: 0;
}

.bpu-outage-band__cta .wp-block-button__link {
  background-color: var(--color-green) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  padding: 14px 28px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
}

/* Stats v2 — 4-up white cards on grey */

.bpu-stats-v2 {
  gap: 16px !important;
  align-items: stretch !important;
  margin-top: 40px;
}

.bpu-stat-v2 {
  flex-basis: calc(25% - 12px) !important;
  background: #ffffff !important;
  border: 1px solid #d9dbe0;
  border-radius: 8px;
  padding: 36px 28px !important;
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.bpu-stat-v2 > * {
  margin: 0 !important;
}

.bpu-stat-v2__number {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 48px !important;
  line-height: 56px !important;
  color: var(--color-blue-dark) !important;
}

.bpu-stat-v2__label {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 26px !important;
  color: var(--color-text);
}

.bpu-stat-v2__desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 24px;
  color: var(--color-text);
}

.bpu-stat-v2__badge-img img {
  height: 64px;
  width: auto;
  margin: 0 auto;
}

/* Fuel mix card */

.bpu-fuel-mix-card {
  max-width: 760px;
  margin: 40px auto 0 !important;
  background: #ffffff;
  border: 1px solid #d9dbe0;
  border-radius: 8px;
  padding: 36px;
}

.bpu-fuel-mix-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Role cards — BPU handles / You handle / Video */

.bpu-role-cards, .bpu-customer-resp-cols {
  gap: 24px !important;
  align-items: stretch !important;
  margin-top: 40px;
}

.bpu-role-card {
  background: #ffffff !important;
  border: 1px solid #d9dbe0;
  border-radius: 8px;
  padding: 0 !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
}

.bpu-customer-resp-cols .bpu-role-card {
}

.wp-block-embed iframe {
  max-width: 100%;
  width: 100%;
}

.bpu-role-card__header {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  color: #ffffff !important;
  padding: 14px 28px !important;
  margin: 0 !important;
  border-radius: 4px;
  display: block;
  width: 100%;
  align-self: flex-start;
  margin: 0px 12px 0 !important;
}

.bpu-role-card--bpu .bpu-role-card__header {
  background: var(--color-blue-dark);
}

.bpu-role-card--you .bpu-role-card__header {
  background: var(--color-green);
}

.bpu-role-card__items {
  padding: 8px 24px 24px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 18px;
}

.bpu-role-card__item {
  position: relative;
  padding-left: 30px !important;
  margin: 0 !important;
}

.bpu-role-card__item::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  width: 18px;
}

.bpu-role-card--bpu .bpu-role-card__item::before {
  color: var(--color-blue-dark);
}

.bpu-role-card--you .bpu-role-card__item::before {
  color: var(--color-green);
}

.bpu-role-card__item > * {
  margin: 0 0 4px !important;
}

.bpu-role-card__item-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 26px;
  color: var(--color-text);
}

.bpu-role-card__item-body {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 26px;
  color: var(--color-text);
}

/* Video card */

.bpu-video-card {
  background: #ffffff !important;
  border: 1px solid #d9dbe0;
  border-radius: 8px;
  padding: 0 !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
}

.bpu-video-card__thumb {
  margin: 0 !important;
  aspect-ratio: 1176 / 660;
  background: #1d1d1d;
}

.bpu-video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bpu-video-card__caption {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  color: var(--color-text);
  margin: 0 !important;
  padding: 20px 24px 24px !important;
}

/* Tree cards — PLANNED + URGENT + Video */

.bpu-tree-cards {
  gap: 24px !important;
  align-items: stretch !important;
  margin-top: 40px;
}

.bpu-tree-card {
  background: #ffffff !important;
  border: 1px solid #d9dbe0;
  border-radius: 8px;
  padding: 28px !important;
  position: relative;
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}

.bpu-tree-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.bpu-tree-card--planned::before {
  background: var(--color-green);
}

.bpu-tree-card--urgent::before {
  background: var(--color-orange);
}

.bpu-tree-card > * {
  margin: 0 !important;
}

.bpu-tree-card__title {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 30px !important;
  color: var(--color-blue-dark);
}

.bpu-tree-card__items {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  padding: 0 !important;
}

.bpu-tree-card__item {
  position: relative;
  padding-left: 26px !important;
  margin: 0 !important;
}

.bpu-tree-card__item::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-green);
  font-weight: 700;
  font-size: 18px;
}

.bpu-tree-card__item--alert::before {
  content: '!';
  color: var(--color-orange);
  font-size: 20px;
  font-weight: 700;
  padding-left: 4px;
}

.bpu-tree-card__item > * {
  margin: 0 0 2px !important;
  font-size: 18px;
  line-height: 26px;
}

.bpu-tree-card__phone-box {
  background: #fcebeb !important;
  padding: 14px 18px !important;
  border-radius: 6px;
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 8px !important;
}

.bpu-tree-card__phone-num {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  line-height: 36px !important;
  color: var(--color-blue-dark);
  margin: 0 !important;
}

.bpu-tree-card__phone-num a {
  color: var(--color-blue-dark) !important;
  text-decoration: none;
}

.bpu-tree-card__footnote {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 24px;
  color: var(--color-text);
  margin-top: 8px !important;
}

/* Phone grid dark — 4-up phone numbers on dark blue */

.bpu-section--phone-grid-dark .bpu-section__head {
  align-items: flex-start;
}

.bpu-phone-grid-dark__lead {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 24px;
  color: #ccd9f2 !important;
  margin: 0 !important;
}

.bpu-phone-grid-dark__cols {
  gap: 0 !important;
  margin-top: 40px;
  align-items: stretch !important;
}

.bpu-phone-grid-dark__col {
  flex-basis: 25% !important;
  padding: 16px 24px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}

.bpu-phone-grid-dark__col:first-child {
  border-left: 0;
  padding-left: 0 !important;
}

.bpu-phone-grid-dark__col > * {
  margin: 0 !important;
}

.bpu-phone-grid-dark__accent {
  width: 32px;
  height: 4px;
  border-radius: 4px;
  margin: 0 0 4px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.bpu-phone-grid-dark__accent--orange {
  background: var(--color-orange);
}

.bpu-phone-grid-dark__accent--green {
  background: var(--color-green);
}

.bpu-phone-grid-dark__label {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 1px;
  color: #c7d6eb !important;
}

.bpu-phone-grid-dark__number {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  line-height: 36px !important;
  color: #ffffff !important;
}

.bpu-phone-grid-dark__number a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.bpu-phone-grid-dark__sub {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 20px;
  color: #ccd9f2 !important;
}

/* Business resource cards — 3-up with top accent */

.bpu-biz-cards {
  gap: 24px !important;
  align-items: stretch !important;
  margin-top: 40px;
}

.bpu-biz-card {
  flex-basis: calc(33.333% - 16px) !important;
  background: #ffffff !important;
  border: 1px solid #d9dbe0;
  border-radius: 8px;
  padding: 28px !important;
  position: relative;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}

.bpu-biz-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.bpu-biz-card--blue::before {
  background: var(--color-blue-dark);
}

.bpu-biz-card--green::before {
  background: var(--color-green);
}

.bpu-biz-card > * {
  margin: 0 !important;
}

.bpu-biz-card__title {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 30px !important;
  color: var(--color-blue-dark);
}

.bpu-biz-card__body {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 26px;
  color: var(--color-text);
}

.bpu-biz-card__link {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  margin-top: 4px !important;
}

.bpu-biz-card__link a {
  color: var(--color-green) !important;
  text-decoration: none;
}

.bpu-biz-card__link a:hover {
  text-decoration: underline;
}

/* Editorial strip (Water page) */

.bpu-editorial-strip {
  margin: 40px auto 40px !important;
  max-width: 1480px;
  border-radius: 8px;
  overflow: hidden;
}

.bpu-editorial-strip img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

/* Stage cards (Water page) */

.bpu-stage-cards {
  gap: 24px !important;
  align-items: stretch !important;
}

.bpu-stage-card {
  flex-basis: calc(33.333% - 16px) !important;
  background: #ffffff !important;
  border: 1px solid #d9dbe0;
  border-radius: 8px;
  padding: 32px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  display: flex !important;
  flex-direction: column;
  gap: 16px;
}

.bpu-stage-card > * {
  margin: 0 !important;
}

.bpu-stage-card__title {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 32px !important;
  color: var(--color-blue-dark);
}

.bpu-stage-card p {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 24px;
  color: var(--color-text);
}

/* House diagram (Water page) */

.bpu-house-diagram {
  max-width: 760px;
  margin: 40px auto 8px !important;
}

.bpu-house-diagram img {
  width: 100%;
  height: auto;
  display: block;
}

.bpu-house-diagram__caption {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 24px;
  color: var(--color-text);
  max-width: 960px;
  margin: 8px auto 32px !important;
}

/* Maintenance cards (Water page) */

.bpu-maintenance-cols {
  gap: 24px !important;
  align-items: stretch !important;
  margin-top: 40px;
}

.bpu-maintenance-card {
  flex-basis: calc(50% - 12px) !important;
  background: #ffffff !important;
  border: 1px solid #d9dbe0;
  border-radius: 8px;
  padding: 40px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}

.bpu-maintenance-card--emergency {
  border-color: #f2c7c7;
}

.bpu-maintenance-card > * {
  margin: 0 !important;
}

.bpu-maintenance-card__title {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  line-height: 32px !important;
  color: var(--color-blue-dark);
}

.bpu-maintenance-card__stages {
  margin: 8px 0 !important;
  padding-left: 24px !important;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}

.bpu-maintenance-card__stages li {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 24px;
  color: var(--color-text);
}

.bpu-maintenance-card__phone-box {
  background: #fcf2f2 !important;
  padding: 24px !important;
  border-radius: 6px;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 !important;
}

.bpu-maintenance-card__phone-label {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--color-text);
  margin: 0 !important;
}

.bpu-maintenance-card__phone-num {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 40px !important;
  line-height: 48px !important;
  color: var(--color-blue-dark);
  margin: 0 !important;
}

.bpu-maintenance-card__phone-num a {
  color: var(--color-blue-dark) !important;
  text-decoration: none;
}

/* Protection cards (Water page) */

.bpu-protection-cards {
  gap: 8px !important;
  align-items: stretch !important;
  margin-top: 40px;
}

.bpu-protection-card {
  flex-basis: calc(33.333% - 16px) !important;
  background: #ffffff !important;
  border: 1px solid #d9dbe0;
  border-radius: 8px;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  display: flex !important;
  flex-direction: column;
}

.bpu-protection-card__image {
  margin: 0 !important;
  height: 200px;
}

.bpu-protection-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bpu-protection-card__body {
  padding: 28px 32px 32px !important;
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  margin: 0 !important;
  position: relative;
}

.bpu-protection-card__body::before {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  background: var(--color-green);
  margin-bottom: 4px;
}

.bpu-protection-card__body > * {
  margin: 0 !important;
}

.bpu-protection-card__title {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 30px !important;
  color: var(--color-blue-dark);
}

.bpu-protection-card__body p {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 22px;
  color: var(--color-text);
}

.bpu-protection-card__email {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 24px;
}

.bpu-protection-card__link {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: 0.5px;
  margin-top: 4px !important;
}

.bpu-protection-card__link a {
  color: var(--color-green) !important;
  text-decoration: none;
}

/* Facts grid dark (Water page) */

.bpu-water-facts__lead {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: #bfd4eb !important;
  max-width: 1050px;
  margin: 0 auto !important;
}

.bpu-facts-grid-dark {
  gap: 24px !important;
  align-items: stretch !important;
  margin-top: 40px;
}

.bpu-fact-card {
  flex-basis: calc(25% - 18px) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px  28px  32px!important;
  display: flex !important;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bpu-fact-card > * {
  margin: 0 !important;
}

.bpu-fact-card__icon {
  width: 64px;
  display:none !important;
  height: 64px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
  margin: 0 auto !important;
}

.bpu-fact-card__number {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 56px !important;
  line-height: 64px !important;
  color: var(--color-green) !important;
}

.bpu-fact-card__body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
  .bpu-stats-v2, .bpu-role-cards, .bpu-tree-cards, .bpu-biz-cards, .bpu-stage-cards, .bpu-protection-cards, .bpu-facts-grid-dark, .bpu-phone-grid-dark__cols {
    flex-wrap: wrap;
  }
  .bpu-stat-v2 {
    flex-basis: calc(50% - 8px) !important;
  }
  .bpu-role-card {
    flex-basis: 100% !important;
  }
  .bpu-tree-card {
    flex-basis: calc(50% - 12px) !important;
  }
  .bpu-biz-card {
    flex-basis: calc(50% - 12px) !important;
  }
  .bpu-stage-card {
    flex-basis: 100% !important;
  }
  .bpu-protection-card {
    flex-basis: 100% !important;
  }
  .bpu-fact-card {
    flex-basis: calc(50% - 12px) !important;
  }
  .bpu-phone-grid-dark__col {
    flex-basis: calc(50% - 0px) !important;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 20px 24px !important;
  }
  .bpu-phone-grid-dark__col:first-child, .bpu-phone-grid-dark__col:nth-child(2) {
    border-top: 0;
    padding-top: 0 !important;
  }
}

@media (max-width: 767px) {
  .bpu-outage-band {
    flex-direction: column !important;
    align-items: flex-start;
    gap: 16px;
    padding: 24px !important;
    margin-top: -40px !important;
  }
  .bpu-outage-band__cta {
    margin-left: 0 !important;
    width: 100%;
  }
  .bpu-outage-band__cta .wp-block-button, .bpu-outage-band__cta .wp-block-button__link {
    width: 100%;
    display: block;
    text-align: center;
  }
  .bpu-stat-v2 {
    flex-basis: 100% !important;
  }
  .bpu-tree-card, .bpu-biz-card, .bpu-fact-card {
    flex-basis: 100% !important;
  }
  .bpu-customer-resp-cols .bpu-role-card {
    flex-basis: 100% !important;
  }
  .bpu-maintenance-cols {
    flex-wrap: wrap;
  }
  .bpu-maintenance-card {
    flex-basis: 100% !important;
    padding: 28px !important;
  }
  .bpu-maintenance-card__phone-num {
    font-size: 32px !important;
    line-height: 40px !important;
  }
  .bpu-phone-grid-dark__col {
    flex-basis: 100% !important;
  }
  .bpu-fact-card__number {
    font-size: 44px !important;
    line-height: 52px !important;
  }
  .bpu-fuel-mix-card {
    padding: 24px !important;
  }
}

@media (max-width: 480px) {
  .bpu-outage-band__title {
    font-size: 22px !important;
    line-height: 28px !important;
  }
  .bpu-outage-band__number {
    font-size: 28px !important;
    line-height: 36px !important;
  }
  .bpu-stat-v2__number {
    font-size: 36px !important;
    line-height: 44px !important;
  }
  .bpu-stage-card, .bpu-tree-card, .bpu-biz-card {
    padding: 24px !important;
  }
  .bpu-phone-grid-dark__number {
    font-size: 24px !important;
    line-height: 32px !important;
  }
}

/* =========================================================
   BPU Theme — For Customers page additions (v2)
   Append to style.css.  Adds: inner-page hero, image-right
   community variant, green-gradient CTA banner with icons,
   4-col Programs grid, scams-section with hairline dividers.
   ========================================================= */

/* ---------- Inner-page hero (text on photo, no card) ---------- */

.hero.hero--inner {
  min-height: 574px;
  padding: 0;
  display: flex;
  align-items: flex-end;
}

.hero.hero--inner::before, .hero.hero--inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(29, 29, 29, 0.40);
  pointer-events: none;
  z-index: 0;
}

.hero.hero--inner .hero__inner {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0 0 90px;
  width: 100%;
}

.hero.hero--inner .hero__content {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  color: var(--color-white);
}

.hero.hero--inner .hero__title {
  font-family: var(--font-body);
  font-size: 47.7px;
  font-weight: 500;
  line-height: 52px;
  margin: 0 0 16px;
  color: var(--color-white);
  letter-spacing: -0.3px;
}

.hero.hero--inner .hero__subtitle {
  font-size: 28.64px;
  font-weight: 700;
  line-height: 42px;
  margin: 0;
  color: var(--color-white);
  letter-spacing: -0.3px;
}

.p0 {
  padding:0px !important;
}

@media (max-width: 980px) {
  .hero.hero--inner {
    min-height: 360px;
  }
  .hero.hero--inner .hero__inner {
    padding: 0 0 40px;
  }
  .hero.hero--inner .hero__title {
    font-size: 36px;
    line-height: 1.1;
  }
  .hero.hero--inner .hero__subtitle {
    font-size: 20px;
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  .hero.hero--inner .hero__title {
    font-size: 28px;
  }
  .hero.hero--inner .hero__subtitle {
    font-size: 16px;
    line-height: 1.45;
  }
  .hero.hero--inner {
    min-height: 360px;
  }
}

/* ---------- Section intro paragraph ---------- */

.section-intro {
  text-align: center;
  font-size: 18px;
  line-height: 28px;
  margin: 0 auto 40px;
  max-width: 820px;
  letter-spacing: -0.18px;
  color: var(--color-text);
}

/* ---------- Community card — image RIGHT variant ---------- */

.wp-block-group.community__card.community__card--reverse {
  grid-template-columns: 1fr 406px;
}

.wp-block-group.community__card.community__card--reverse .community__media {
  order: 2;
}

.wp-block-group.community__card.community__card--reverse .community__content {
  order: 1;
}

@media (max-width: 1100px) {
  .wp-block-group.community__card.community__card--reverse {
    grid-template-columns: 1fr;
  }
  .wp-block-group.community__card.community__card--reverse .community__media {
    order: 1;
  }
  .wp-block-group.community__card.community__card--reverse .community__content {
    order: 2;
  }
}

/* Eyebrow text used inside community/investing content blocks */

.community__eyebrow, .investing__eyebrow {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 8px;
  letter-spacing: 0;
  line-height: 25px;
}

@media (max-width: 480px) {
  .community__eyebrow, .investing__eyebrow {
    display: none;
  }
}

/* =========================================================
   PROTECT YOURSELF FROM SCAMS — image LEFT, NO card
   Two hairline dividers above and below the content block.
   Decorative illustration extends full-bleed on the left.
   ========================================================= */

.scams-section {
  background: var(--color-white);
  padding: 40px 0 50px;
  position: relative;
}

.scams-section .container {
  padding: 0 var(--container-padding);
}

.wp-block-columns.scams-section__grid {
  max-width: 850px;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: center;
}

.scams-section__media {
  padding: 0 !important;
  margin: 0 !important;
  flex-basis: auto !important;
}

.scams-section__media .wp-block-image {
  margin: 0 !important;
}

.scams-section__media .wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

.scams-section__content {
  padding: 0 !important;
  margin: 0 !important;
  flex-basis: auto !important;
}

.scams-section__title {
  font-size: 37.32px;
  font-weight: 700;
  color: var(--color-blue);
  letter-spacing: -0.37px;
  line-height: 44px;
  margin: 10px 0;
}

.scams-section__text {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.18px;
  margin: 0;
  color: var(--color-text);
}

/* The hairline rules above and below the content block */

.wp-block-separator.scams-section__divider {
  border: 0 !important;
  border-top: 1px solid var(--color-text-grey) !important;
  background: transparent !important;
  height: 1px;
  width: 565px;
  max-width: 100%;
  margin: 32px 0 0 0 !important;
  opacity: 1;
}

.scams-section__content .wp-block-separator.scams-section__divider:first-child {
  margin: 0 0 32px !important;
}

.scams-section__content .wp-block-separator.scams-section__divider + .wp-block-separator.scams-section__divider, .scams-section__content .wp-block-buttons + .wp-block-separator.scams-section__divider {
  margin: 32px 0 32px !important;
}

/* The button after the second divider */

.scams-section__content .wp-block-buttons {
  margin: 25px 0 0 !important;
}

.scams-section .scams-section__cta .wp-block-button__link, .scams-section .btn--solid .wp-block-button__link {
  min-width: 360px;
  height: 50px;
}

@media (max-width: 1100px) {
  .wp-block-columns.scams-section__grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .wp-block-separator.scams-section__divider {
    width: 100%;
    margin: 0 !important;
  }
  .scams-section__title {
    font-size: 28px;
    line-height: 34px;
  }
}

@media (max-width: 780px) {
  .scams-section {
    padding: 36px 0;
  }
  .scams-section .scams-section__cta .wp-block-button__link, .scams-section .btn--solid .wp-block-button__link {
    min-width: 0;
    width: 100%;
    height: 45px;
    font-size: 16px;
  }
}

/* =========================================================
   NEED ASSISTANCE? CTA BANNER (green gradient + 3 icons row)
   ========================================================= */

.cta-banner {
  background: linear-gradient(225deg, #B0D57B 0%, #376319 100%);
  color: var(--color-white);
  padding: 50px 0 50px;
  text-align: center;
}

.cta-banner .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.cta-banner__icons {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin: 0 0 4px !important;
  flex-wrap: nowrap !important;
}

.cta-banner__icon {
  margin: 0 !important;
  flex-basis: auto !important;
}

.cta-banner__icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  /* force the icon white if it isn't already */;
}

.cta-banner__title {
  font-size: 37.32px;
  font-weight: 700;
  letter-spacing: -0.37px;
  line-height: 44px;
  margin: 16px 0 12px !important;
  color: var(--color-white);
}

.cta-banner__text {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.18px;
  margin: 0 auto 24px !important;
  max-width: 852px;
  color: var(--color-white);
}

.cta-banner .wp-block-buttons {
  margin: 0 !important;
}

.wp-block-button.btn-cta-banner .wp-block-button__link {
  background: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.2px;
  padding: 0 40px;
  height: 50px;
  border-radius: 0;
  min-width: 240px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.wp-block-button.btn-cta-banner .wp-block-button__link:hover {
  background: var(--color-white);
  color: var(--color-blue);
}

@media (max-width: 980px) {
  .cta-banner {
    padding: 40px 0;
  }
  .cta-banner__title {
    font-size: 28px;
    line-height: 34px;
  }
  .cta-banner__text {
    font-size: 16px;
    padding: 0 var(--container-padding);
  }
  .cta-banner__icons {
    gap: 24px;
  }
  .cta-banner__icon img {
    width: 30px;
    height: 30px;
  }
}

/* =========================================================
   PROGRAMS & RESOURCES — 4-col image-card grid
   ========================================================= */

.programs {
  padding: 60px 0 80px;
  background: var(--color-white);
}

.programs__heading {
  text-align: center;
  margin: 0 0 16px;
}

/* =========================================================
   GUTENBERG NATIVE BLOCK INTEROP
   Lets the page use ONLY native blocks while picking up
   the existing theme classes (.btn, .callout, .community__card,
   .quick-link, etc.).
   ========================================================= */

/* ---------- Buttons: theme classes applied to wp-block-button wrapper ---------- */

.wp-block-button.btn .wp-block-button__link, .wp-block-button.btn.btn--solid .wp-block-button__link {
  background: var(--color-green);
  color: var(--color-white);
  font-family: inherit;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.2px;
  line-height: 1;
  height: 60px;
  padding: 0 28px;
  border: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button.btn.btn--solid .wp-block-button__link:hover {
  background: var(--color-green-dark);
  color: var(--color-white);
}

.wp-block-button.btn.btn--outline .wp-block-button__link {
  background: transparent;
  color: var(--color-green);
  font-family: inherit;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.2px;
  line-height: 1;
  height: 50px;
  padding: 0 28px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.wp-block-button.btn.btn--outline .wp-block-button__link:hover {
  background: var(--color-green);
  color: var(--color-white);
}

/* ---------- Quick-links: native columns + image instead of inline SVG ---------- */

.wp-block-columns.quick-links__grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  flex-wrap: nowrap;
  margin: 0 !important;
}

.wp-block-columns.quick-links__grid > .wp-block-column.quick-link {
  background: var(--color-white);
  box-shadow: var(--soft-shadow);
  padding: 28px 16px 22px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 204px;
  flex-basis: auto !important;
  flex-grow: 0 !important;
  margin: 0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-columns.quick-links__grid > .wp-block-column.quick-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.quick-link .quick-link__icon {
  margin: 0 0 14px;
}

/* .quick-link .quick-link__icon img {
  width: 75px;
  height: 75px;
  object-fit: contain;
  margin: 0 auto;
} */

.quick-link__label, .quick-link .quick-link__label {
  margin: 0;
  font-weight: 700;
  font-size: 21px;
  line-height: 25px;
  color: var(--color-text);
}

.quick-link__label a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  min-height: 44px;
  padding: 6px 0;
}

.quick-link__label a:hover, .quick-link__label a:focus-visible {
  color: var(--color-blue);
  text-decoration: underline;
}

@media (max-width: 1280px) {
  .wp-block-columns.quick-links__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 780px) {
  .wp-block-columns.quick-links__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .wp-block-columns.quick-links__grid > .wp-block-column.quick-link {
    padding: 22px 8px 18px;
    min-height: 150px;
  }
/*   .quick-link .quick-link__icon img {
    width: 50px;
    height: 50px;
  } */
  .quick-link__label, .quick-link h3.quick-link__label {
    font-size: 14px;
    line-height: 1.2;
  }
}

@media (max-width: 480px) {
  .wp-block-columns.quick-links__grid {
    grid-template-columns: repeat(3, 1fr);
	 gap:5px;
  }
}

/* ---------- Callouts: native columns + image block ---------- */

.wp-block-columns.callouts__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  max-width: 1410px;
  margin: 0 auto !important;
  flex-wrap: nowrap;
}

.wp-block-columns.callouts__grid > .wp-block-column.callout {
  background: var(--color-white);
  box-shadow: var(--card-shadow);
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  flex-basis: auto !important;
}

.callout .callout__image {
  margin: 0 !important;
}

.callout .callout__image img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}

.callout .callout__body {
  padding: 36px 46px 46px !important;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
}

.callout .callout__body h3 {
  font-size: 31px;
  font-weight: 500;
  letter-spacing: -0.31px;
  line-height: 36px;
  color: var(--color-text);
  margin: 0 0 16px;
}

.callout .callout__body p {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.18px;
  margin: 0 0 28px;
  color: var(--color-text);
  flex: 1;
}

.callout .callout__body .wp-block-buttons {
  margin: 0;
}

.callout .callout__body .wp-block-button.btn--solid .wp-block-button__link {
  min-width: 339px;
}

@media (max-width: 1100px) {
  .wp-block-columns.callouts__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .callout .callout__body {
    padding: 28px !important;
  }
  .callout .callout__body .wp-block-button.btn--solid .wp-block-button__link {
    min-width: 0;
    width: 100%;
  }
}

/* ---------- Community card: native group + image block ---------- */

.wp-block-group.community__card {
  background: var(--color-white);
  box-shadow: var(--card-shadow);
  display: grid !important;
  grid-template-columns: 406px 1fr;
  gap: 0;
  align-items: stretch;
  max-width: 1316px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

.wp-block-group.community__card .community__media {
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: stretch;
}

.wp-block-group.community__card .community__media .wp-block-image, .wp-block-group.community__card .community__media figure {
  margin: 0 !important;
  width: 100%;
  height: 100%;
}

.wp-block-group.community__card .community__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

}

.wp-block-group.community__card .community__content {
  padding: 50px 60px !important;
}

@media (max-width: 1100px) {
  .wp-block-group.community__card, .wp-block-group.community__card.community__card--reverse {
    grid-template-columns: 1fr;
  }
/*   .wp-block-group.community__card .community__media, .wp-block-group.community__card .community__media img {
    min-height: 240px;
  } */
  .wp-block-group.community__card .community__content {
    padding: 32px !important;
  }
}

@media (max-width: 480px) {
  .wp-block-group.community__card, .wp-block-group.community__card.community__card--reverse {
    grid-template-columns: 50% 1fr;
    gap: 15px;
    padding: 20px 12px;
  }
  .wp-block-group.community__card .community__content, .wp-block-group.community__card.community__card--reverse .community__content {
    padding: 0 !important;
  }
/*   .wp-block-group.community__card .community__media, .wp-block-group.community__card .community__media img {
    min-height: 150px;
  } */
}

/* ---------- Programs grid: native columns + image block ---------- */

.wp-block-columns.programs__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  max-width: 1480px;
  margin: 0 auto !important;
  flex-wrap: nowrap;
}

.wp-block-columns.programs__grid > .wp-block-column.program-card {
  background: var(--color-white);
  box-shadow: var(--card-shadow);
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  flex-basis: auto !important;
  min-height: 422px;
}

.program-card .program-card__image {
  margin: 0 !important;
}

.program-card .program-card__image img {
  width: 100%;
  height: 191px;
  object-fit: cover;
  display: block;
}

.program-card .program-card__title {
  background: rgba(0, 57, 113, 0.90);
  color: var(--color-white);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.24px;
  line-height: 36px;
  padding: 14px 8px !important;
  text-align: center;
  margin: 0 !important;
}

.program-card .program-card__body {
  padding: 28px 24px 24px !important;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
}

.program-card .program-card__text {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.18px;
  text-align: center;
  margin: 0 0 24px;
  flex: 1;
  color: var(--color-text);
}

.program-card .wp-block-buttons {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.program-card .wp-block-button.btn--outline .wp-block-button__link {
  min-width: 243px;
}

@media (max-width: 1280px) {
  .wp-block-columns.programs__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 780px) {
  .wp-block-columns.programs__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .wp-block-columns.programs__grid > .wp-block-column.program-card {
    flex-direction: row;
    min-height: 0;
    align-items: stretch;
  }
  .program-card .program-card__image {
    width: 42%;
    flex-shrink: 0;
  }
  .program-card .program-card__image img {
    height: 100%;
    min-height: 160px;
  }
  .program-card .program-card__title {
    display: none;
  }
  .program-card .program-card__body {
    padding: 16px !important;
    align-items: flex-start;
    text-align: left;
    flex: 1;
  }
  .program-card .wp-block-button.btn--outline .wp-block-button__link {
    width: 100%;
    min-width: 0;
    height: 40px;
    font-size: 14px;
  }
  .wp-block-cover.hero.hero--inner {
    min-height: 300px !important;
    padding: 0px 20px;
  }
}

/*** spanish css ***/

.spanish .wp-block-columns.quick-links-grid {
  gap: 25px 15px;
}

.spanish .quick-link-card .quick-link-card__title {
  font-size: 20px;
  padding: 14px 10px !important;
}

.spanish .callout .callout__body {
  padding: 0px 20px 46px !important;
}

.spanish .program-card .program-card__title {
  font-size: 20px;
  line-height: 32px;
  margin: 0 !important;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spanish .program-card .program-card__body {
  padding: 0px 24px 24px !important;
}

.spanish .footer__bottom {
  gap: 0px;
  font-size: 13.5px;
  justify-content: space-between;
}

.spanish .community1 {
  padding: 50px 0px;
}

.spanish .section-intro {
  max-width: 1000px;
}

.spanish .wp-block-group.community__card.community__card--wide .community__text {
  margin: 0 0 32px;
  max-width: 660px;
}

.spanish .bpu-sidebar-card__title {
  font-size: 24px !important;
}

.spanish .bpu-intro-cols__main .bpu-section__title {
  font-size: 34px !important;
  line-height: 40px;
}

/* =========================================================
   BPU Theme — Billing & Rates page additions
   Append AFTER the For Customers theme-additions.css.
   Adds: .community--padded section spacing,
         .community__card--wide modifier (550px image with padding),
         .quick-links-section + .quick-links-grid (4×2 image-card grid),
         .quick-link-card with navy title overlay.
   ========================================================= */

/* ---------- Section spacing for community-style sections ---------- */

.community--padded {
  padding: 60px 0;
  background: var(--color-white);
}

/* ---------- Community card — WIDE variant (550px image WITH padding inside card)
   Used for "Serving Our Communities" and "Understand Your Rates" on Billing page.
   Differs from default .community__card (which has 0 padding and 406px image):
   - Card has 28px internal padding
   - Image area is 550px wide
   - Image is 278px tall (vs card's full-height image in default variant)
   ------------------------------------------------------------------ */

.wp-block-group.community__card.community__card--wide {
  padding: 28px;
  grid-template-columns: 550px 1fr;
  gap: 0px;
  align-items: center;
}

.wp-block-group.community__card.community__card--wide.community__card--reverse {
  grid-template-columns: 1fr 550px;
}

.wp-block-group.community__card.community__card--wide .community__media {
  min-height: 278px;
  height: auto;
}

.wp-block-group.community__card.community__card--wide .community__media img {
  width: 100%;
  height: 278px;
  min-height: 278px;
  object-fit: cover;
  display: block;
}

.wp-block-group.community__card.community__card--wide .community__content {
  padding: 0 !important;
  /* card has padding instead */
	margin:0px;
}

.wp-block-group.community__card.community__card--wide .community__heading {
  margin: 0 0 20px;
}

.wp-block-group.community__card.community__card--wide .community__text {
  margin: 0 0 32px;
  max-width: 540px;
}

.wp-block-group.community__card.community__card--wide .wp-block-buttons {
  margin: 0;
}

.wp-block-group.community__card.community__card--wide .wp-block-button.btn--solid .wp-block-button__link {
  min-width: 242px;
}

@media (max-width: 1100px) {
  .wp-block-group.community__card.community__card--wide, .wp-block-group.community__card.community__card--wide.community__card--reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .wp-block-group.community__card.community__card--wide .community__media, .wp-block-group.community__card.community__card--wide .community__media img {
    height: auto;
    min-height: 200px;
    max-height: 320px;
  }
}

@media (max-width: 480px) {
  .community--padded {
    padding: 28px 0;
  }
  .wp-block-group.community__card.community__card--wide {
    padding: 16px;
  }
  .wp-block-group.community__card.community__card--wide .wp-block-button.btn--solid .wp-block-button__link {
    min-width: 0;
    width: 100%;
  }
}

/* =========================================================
   QUICK LINKS section — 4×2 image cards with navy title overlay
   Different from .programs__grid:
   - Card has only image + navy title overlay (no description, no button)
   - The whole card is a link (via heading-link with stretched ::after)
   - 8 cards in 4 columns × 2 rows
   ========================================================= */

.quick-links-section {
  background: var(--color-bg-soft);
  padding: 60px 0 80px;
}

.quick-links-section .container {
  padding: 0 var(--container-padding);
}

.quick-links-section .section-heading {
  margin: 0 0 48px;
}

.wp-block-columns.quick-links-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 25px;
  max-width: 1480px;
  margin: 0 auto !important;
  flex-wrap: nowrap;
}

.wp-block-columns.quick-links-grid > .wp-block-column.quick-link-card {
  background: var(--color-white);
  box-shadow: var(--card-shadow);
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  flex-basis: auto !important;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-columns.quick-links-grid > .wp-block-column.quick-link-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.wp-block-columns.quick-links-grid > .wp-block-column.quick-link-card:focus-within {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
}

.quick-link-card .quick-link-card__image {
  margin: 0 !important;
}

.quick-link-card .quick-link-card__image img {
  width: 100%;
  height: 191px;
  object-fit: cover;
  display: block;
}

.quick-link-card .quick-link-card__title {
  background: rgba(0, 57, 113, 0.90);
  color: var(--color-white);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.24px;
  line-height: 36px;
  padding: 14px 16px !important;
  text-align: center;
  margin: 0 !important;
}

.quick-link-card .quick-link-card__title a {
  color: var(--color-white);
  text-decoration: none;
  display: block;
  /* Stretched-link technique — entire card becomes the click target */;
}

.quick-link-card .quick-link-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.quick-link-card .quick-link-card__title a:hover, .quick-link-card .quick-link-card__title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.quick-link-card .quick-link-card__title a:focus-visible {
  outline: none;
  /* the parent column already has the focus ring */;
}

@media (max-width: 1280px) {
  .wp-block-columns.quick-links-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 780px) {
  .quick-links-section {
    padding: 36px 0 40px;
  }
  .wp-block-columns.quick-links-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .wp-block-columns.quick-links-grid > .wp-block-column.quick-link-card {
    flex-direction: row;
    align-items: stretch;
  }
  .quick-link-card .quick-link-card__image {
    width: 42%;
    flex-shrink: 0;
  }
  .quick-link-card .quick-link-card__image img {
    height: 100%;
    min-height: 130px;
  }
  .quick-link-card .quick-link-card__title {
    font-size: 18px;
    line-height: 24px;
    background: var(--color-white);
    color: var(--color-blue);
    text-align: left;
    padding: 16px !important;
    align-self: center;
    flex: 1;
  }
}

.spanish .bpu-meter-card__bullets {
  padding: 0 !important;
  margin: 0 !important;
  width: 46%;
}

.spanish .bpu-need-help__title {
  margin: 20px 0px 0px !important;
}

/* .spanish .bpu-hero__title {
  font-size: 46px !important;
} */

.spanish .bpu-phone-cta__inner {
  gap: 100px;
}

.spanish .bpu-section__lead {
  font-size:20px;
}

.spanish .bpu-path-card__cta .wp-block-button__link {
  padding: 14px 15px !important;
}

.spanish .bpu-fact-card__number {
  font-size: 45px !important;
}

.spanish .bpu-outage-band__text {
  min-width: 600px;
}

.spanish .bpu-outage-band__title {
  font-size: 24px !important;
}

.spanish .bpu-outage-band__subtitle {
  font-size: 16px !important;
}

.spanish .bpu-stat-v2__number {
  font-size: 42px !important;
}

@media screen and (min-width: 360px) and (max-width: 767px) {
  .quick-link-card .quick-link-card__title a {
    color: #003971;
  }
  .hero.hero--inner .hero__subtitle br {
    display: none;
  }
  .hero.hero--inner .hero__inner {
    padding: 0 0 25px;
  }
  .wp-block-button.btn.btn--outline .wp-block-button__link {
    height: 50px;
    font-size: 18px;
    padding: 0px 10px !important;
  }
  .btn {
    height: auto;
    width: 100%;
  }
  .community__heading, .investing__content h2 {
    text-align:left;
  }
  .scams-section__content .wp-block-separator.scams-section__divider:first-child {
    margin: 0 0 20px !important;
  }
  .scams-section__text {
    margin-bottom:20px !important;
    padding-bottom: 20px !important;
  }
  .wp-block-button.btn .wp-block-button__link, .wp-block-button.btn.btn--solid .wp-block-button__link {
    padding: 0 4px;
    font-size: 16px;
  }
  .spanish .program-card .program-card__title {
    font-size: 20px;
    line-height: 32px;
    margin: 0 !important;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .spanish .program-card .program-card__body {
    padding: 0px 10px 24px !important;
  }
  .program-card .program-card__image {
    width: 100%;
    flex-shrink: 0;
  }
  .callout .callout__body {
    padding: 0px 10px 20px !important;
  }
  .wp-block-group.community__card .community__content {
    padding: 50px 60px !important;
    padding: 0px 0px !important;
    max-width: 100% !important;
    width: 90%;
    margin-top: 10px;
  }
  .spanish .quick-link-card .quick-link-card__title {
    font-size: 18px;
    padding: 14px 10px !important;
  }
  .bpu-section__lead {
    font-size: 18px !important;
    line-height: 1.5;
  }
  .bpu-path-card__cta .wp-block-button__link {
    font-size: 16px !important;
    line-height: 24px !important;
    padding: 14px 15px !important;
  }
  .bpu-section--closing-cta .bpu-closing-cta .wp-block-cover__inner-container {
    padding: 28px 5px !important;
  }
  .bpu-section--closing-cta .bpu-closing-cta__cta .wp-block-button__link {
    background-color: #7ca650 !important;
    color: #ffffff !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 14px 5px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    display: inline-block;
  }
  .bpu-section--closing-cta {
    padding-top: 20px !important;
    padding-bottom: 40px !important;
  }
  .bpu-section--closing-cta .bpu-closing-cta__title {
    font-size: 16px !important;
    line-height: 24px !important;
  }
  .bpu-need-help__title {
    font-size: 24px ! IMPORTANT;
    line-height: 34px ! IMPORTANT;
    margin: 20px auto 0 !important;
  }
  .bpu-section--resources .bpu-section__head {
    margin-bottom: 20px;
  }
  .bpu-section__title {
    font-size: 22px !important;
  }
  .bpu-section--closing-cta .bpu-closing-cta__inner {
    flex-direction:column !important;
  }
  .spanish .bpu-hero {
/*     min-height: auto !important; */
    padding: 180px 20px 30px;
  }
  .bpu-stats-row {
    margin-bottom: 30px !important;
  }
  .spanish .bpu-btn--pdf .wp-block-button__link {
    padding: 14px 15px !important;
  }
  .spanish .bpu-meter-card__bullets {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
  }
  .spanish .bpu-meter-card__inner > * {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .spanish .bpu-hero__title {
    font-size: 24px !important;
    line-height: 30px !important;
  }
  .bpu-path-cards-3 .bpu-path-card {
    flex-basis: 100% !important;
    padding: 20px !important;
  }
  .bpu-path-cards-3 .bpu-path-card__title {
    font-size: 28px !important;
    line-height: 35px !important;
  }
  .bpu-section--phone-cta .bpu-phone-cta .wp-block-cover__inner-container {
    padding: 28px 10px !important;
  }
  .spanish .bpu-phone-cta__inner {
    gap: 40px;
  }
  .bpu-section--phone-cta {
    padding-top: 20px !important;
    padding-bottom: 40px !important;
  }
  .spanish .bpu-phone-cta__cta .wp-block-button__link {
    background-color: #7ca650 !important;
    color: #ffffff !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 14px 5px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    display: inline-block;
  }
  .spainsh .bpu-protection-card__body {
    padding: 28px 21px 32px !important;
  }
  .bpu-outage-band__text {
    min-width: 100% !important;
  }
  .bpu-outage-band__cta .wp-block-button__link {
    background-color: var(--color-green) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    padding: 14px 15px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
  }
  .bpu-outage-band {
    margin-top: -25px !important;
  }
  .bpu-hero {
    min-height: 400px !important;
	          padding-bottom: 40px;
  }
  .quick-links {
    padding: 22px 0px 30px;
  }
  .feature-card__title {
    font-size: 16px !important;
    line-height: 20px;
  }
}

/***billing aprent ***/

/* ============================================================================
   BPU BILLING PAGE — Scoped Stylesheet
   ============================================================================
   Source:  Figma 10763:35491 (Template 9 — Billing Desktop)
   Scope:   ALL declarations are namespaced under .billing-parent
            so this stylesheet cannot leak into any other page or block.
   Container: 1480px max, fully responsive (desktop / tablet / mobile)
   No content is ever display:none on smaller breakpoints — only layout adapts.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Design tokens (CSS variables, scoped)
   ---------------------------------------------------------------------------- */

.billing-parent {
  /* Brand */
  --bpu-navy:           #002b7f;
  --bpu-navy-deep:      #003971;
  --bpu-green:          #7ca650;
  --bpu-green-light:    #b0d57b;
  --bpu-orange:         #ef800a;
  --bpu-red-soft:       #ffb4b4;
  /* Neutrals */
  --bpu-ink:            #1d1d1d;
  --bpu-grey:           #999999;
  --bpu-border:         #d9dbe0;
  --bpu-surface:        #ffffff;
  --bpu-surface-alt:    #f7f7f7;
  /* Icon tints */
  --bpu-tint-blue:      #ebf0f8;
  --bpu-tint-yellow:    #fef8eb;
  --bpu-tint-green:     #eff9d7;
  --bpu-tint-cyan:      #e6f6fc;
  /* Typography */
  --bpu-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  /* Radii */
  --bpu-r-sm: 4px;
  --bpu-r-md: 8px;
  --bpu-r-lg: 12px;
  /* Shadows — exact Figma values */
  --bpu-shadow-band:  0 8px 24px rgba(0, 0, 0, 0.18);
  --bpu-shadow-card:  0 4px 12px rgba(0, 0, 0, 0.04);
  /* Container */
  --bpu-container: 1480px;
  --bpu-gutter:    24px;
  /* Reset within scope */
  font-family: var(--bpu-font);
  color: var(--bpu-ink);
  line-height: 1.5;
  box-sizing: border-box;
}

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

.billing-parent img {
  max-width: 100%;
  height: auto;
  display: block;
}

.billing-parent a {
  color: var(--bpu-green);
  text-decoration: underline;
}

.billing-parent a:hover, .billing-parent a:focus-visible {
  text-decoration: none;
  outline: none;
}

.billing-parent a:focus-visible {
  outline: 3px solid var(--bpu-green);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip clipped focus for buttons — they have their own visible focus ring */

.billing-parent .wp-block-button__link:focus-visible {
  outline: 3px solid var(--bpu-navy);
  outline-offset: 3px;
}

/* ----------------------------------------------------------------------------
   2. WordPress core color slugs (used by theme.json bridge)
   ---------------------------------------------------------------------------- */

.billing-parent .has-billing-light-background-color {
  background-color: var(--bpu-surface-alt) !important;
}

.billing-parent .has-billing-navy-background-color {
  background-color: var(--bpu-navy) !important;
}

.billing-parent .has-white-color {
  color: #ffffff !important;
}

/* ----------------------------------------------------------------------------
   3. Hero (cover block) — 2-column: text + video
   ---------------------------------------------------------------------------- */

.billing-parent .billing-hero {
  position: relative;
  width: 100%;
  min-height: 640px;
  padding: 0;
  margin: 0;
}

.billing-parent .billing-hero .wp-block-cover__inner-container {
  width: 100%;
  max-width: var(--bpu-container);
  margin: 0 auto;
  padding: 150px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.billing-parent .billing-hero__layout {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  width: 100%;
  margin: 0;
}

.billing-parent .billing-hero__text-column {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.billing-parent .billing-hero__video-column {
  flex: 0 0 auto;
  width: 560px;
  max-width: 100%;
}

.billing-parent .billing-hero__video {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.38),
    0 6px 16px rgba(0, 0, 0, 0.22);
}

.billing-parent .billing-hero__video .wp-block-embed {
  margin: 0;
  width: 100%;
}

.billing-parent .billing-hero__video .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.billing-parent .billing-hero__video .wp-block-embed__wrapper iframe, .billing-parent .billing-hero__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.billing-parent .billing-breadcrumb {
  margin: 0;
}

.billing-parent .billing-breadcrumb__text {
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: #ffffff;
}

.billing-parent .billing-breadcrumb__text a {

  text-decoration: none;
}

.billing-parent .billing-breadcrumb__text a:hover, .billing-parent .billing-breadcrumb__text a:focus-visible {
  text-decoration: underline;
}

.billing-parent .billing-hero__title {
  margin: 0;
  padding: 24px 0 0;
  font-family: var(--bpu-font);
  font-size: 50px;
  line-height: 64px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.5px;
}

.billing-parent .billing-hero__lede {
  margin: 0;
  padding: 8px 0 0;
  font-size: 22px;
  line-height: 32px;
  font-weight: 600;
  color: #ffffff;
}

/* ----------------------------------------------------------------------------
   4. Emergency band (overlaps hero bottom)
   ---------------------------------------------------------------------------- */

.billing-parent .billing-band {
  position: relative;
  width: 100%;
  max-width: var(--bpu-container);
  margin: -60px auto 0;
  padding: 0 ;
  z-index: 2;
}

.billing-parent .billing-band__inner {
  position: relative;
  background: var(--bpu-navy);
  color: #ffffff;
  min-height: 120px;
  border-radius: var(--bpu-r-lg);
  box-shadow: var(--bpu-shadow-band);
  padding: 24px 36px 24px 44px;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.billing-parent .billing-band__inner::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--bpu-green);
}

.billing-parent .billing-band__text {
  flex: 1 1 60%;
  min-width: 280px;
}

.billing-parent .billing-band__eyebrow {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--bpu-red-soft);
}

.billing-parent .billing-band__heading {
  margin: 0;
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  color: #ffffff;
}

.billing-parent .billing-band__cta {
  flex: 0 0 auto;
}

/* ----------------------------------------------------------------------------
   5. Generic section frame
   ---------------------------------------------------------------------------- */

.billing-parent .billing-section {
  width: 100%;
  padding: 60px var(--bpu-gutter);
}

.billing-parent .billing-section > .wp-block-columns, .billing-parent .billing-section > .billing-section__header, .billing-parent .billing-section > .billing-benefits, .billing-parent .billing-section > .wp-block-image {
  max-width: var(--bpu-container);
  margin-left: auto;
  margin-right: auto;
}

.billing-parent .billing-section__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}

.billing-parent .billing-section__header--center {
  text-align: center;
  align-items: center;
}

.billing-parent .billing-section__header--center .billing-section__intro {
  max-width: 1410px;
}

.billing-parent .billing-eyebrow {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bpu-green);
}

.billing-parent .billing-eyebrow--light {
  color: var(--bpu-green-light);
}

.billing-parent .billing-section__title {
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: var(--bpu-navy);
}

.billing-parent .billing-section__intro {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--bpu-ink);
}

/* ----------------------------------------------------------------------------
   6. Buttons (Gutenberg button block, scoped)
   ---------------------------------------------------------------------------- */

.billing-parent .wp-block-buttons {
  margin: 0;
  flex-wrap: wrap;
  gap: 12px;
}

.billing-parent .billing-btn .wp-block-button__link, .billing-parent .wp-block-button.billing-btn--primary .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bpu-green);
  color: #ffffff;
  text-decoration: none;
  font-family: var(--bpu-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  padding: 14px 24px;
  border-radius: var(--bpu-r-sm);
  border: 2px solid transparent;
  transition: background 0.18s ease, transform 0.18s ease;
}

.billing-parent .billing-btn .wp-block-button__link:hover, .billing-parent .billing-btn .wp-block-button__link:focus-visible {
  background: #6a9244;
  text-decoration: none;
}

.billing-parent .billing-btn .wp-block-button__link:active {
  transform: translateY(1px);
}

/* ----------------------------------------------------------------------------
   7. About MyMeter section
   ---------------------------------------------------------------------------- */

.billing-parent .billing-section--mymeter {
  background: var(--bpu-surface);
}

.billing-parent .billing-mymeter__grid {
  gap: 40px;
  align-items: center;
}

.billing-parent .billing-mymeter__media .billing-mymeter__img img {
  width: 100%;
  height: auto;
  border-radius: var(--bpu-r-md);
}

.billing-parent .billing-mymeter__callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: var(--bpu-surface);
  border-radius: var(--bpu-r-lg);
  padding: 0 40px;
  text-align: center;
}

.billing-parent .billing-mymeter__callout-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--bpu-navy);
  text-align: center;
}

.billing-parent .billing-mymeter__callout-text {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  color: var(--bpu-ink);
  text-align: center;
}

.billing-parent .billing-mymeter__steps {
  gap: 22px;
  width: 100%;
  margin: 0;
}

.billing-parent .billing-mymeter__steps .billing-step {
  background: var(--bpu-surface-alt);
  padding: 16px;
  border-radius: var(--bpu-r-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 155px;
  text-align: center;
}

.billing-parent .billing-step__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--bpu-navy);
}

.billing-parent .billing-step__body {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  color: var(--bpu-ink);
}

/* ----------------------------------------------------------------------------
   8. Ways to Pay section
   ---------------------------------------------------------------------------- */

.billing-parent .billing-section--ways {
  background: var(--bpu-surface-alt);
}

.billing-parent .billing-ways__intro {
  gap: 35px;
  align-items: center;
  margin-bottom: 40px;
}

.billing-parent .billing-ways__img img {
  width: 100%;
  height: auto;
  border-radius: var(--bpu-r-md);
}

.billing-parent .billing-ways__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.billing-parent .billing-ways__grid {
  border-top: 1px solid var(--bpu-border);
  border-bottom: 1px solid var(--bpu-border);
  padding: 24px 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.billing-parent .billing-ways__grid .billing-way {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  position: relative;
}

.billing-parent .billing-ways__grid .billing-way + .billing-way::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--bpu-border);
}

.billing-parent .billing-way__icon {
  width: 86px;
  height: 86px;
  border-radius: var(--bpu-r-lg);
  overflow: hidden;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.billing-parent .billing-way__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.billing-parent .billing-way__icon--blue {
  background: var(--bpu-tint-blue);
}

.billing-parent .billing-way__icon--yellow {
  background: var(--bpu-tint-yellow);
}

.billing-parent .billing-way__icon--green {
  background: var(--bpu-tint-green);
}

.billing-parent .billing-way__icon--cyan {
  background: var(--bpu-tint-cyan);
}

.billing-parent .billing-way__title {
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  color: var(--bpu-navy);
}

.billing-parent .billing-way__body {
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  color: var(--bpu-ink);
  flex: 1 1 auto;
}

.billing-parent .billing-way__body a {
  color: var(--bpu-navy);
  text-decoration: underline;
}

.billing-parent .billing-way__link {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: var(--bpu-green);
}

.billing-parent .billing-way__link a {
  color: var(--bpu-green);
  text-decoration: none;
}

.billing-parent .billing-way__link a:hover, .billing-parent .billing-way__link a:focus-visible {
  text-decoration: underline;
}

/* ----------------------------------------------------------------------------
   9. FlexPay section
   ---------------------------------------------------------------------------- */

.billing-parent .billing-section--flexpay {
  background: var(--bpu-surface);
}

.billing-parent .billing-flexpay__grid {
  gap: 48px;
  align-items: flex-start;
}

.billing-parent .billing-flexpay__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.billing-parent .billing-flexpay__icon img {
  width: auto;
  max-width: 338px;
  height: auto;
}

.billing-parent .billing-flexpay__benefits-title {
  margin: 8px 0 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  color: var(--bpu-navy);
}

.billing-parent .billing-flexpay__benefits {
  margin: 0;
  padding-left: 28px;
  list-style: disc;
}

.billing-parent .billing-flexpay__benefits li {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 28px;
  color: var(--bpu-ink);
}

.billing-parent .billing-flexpay__benefits a {
  color: var(--bpu-navy);
}

.billing-parent .billing-flexpay__callout {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--bpu-navy);
}

.billing-parent .billing-flexpay__callout a {
  color: var(--bpu-navy);
  text-decoration: none;
}

.billing-parent .billing-flexpay__callout a:hover, .billing-parent .billing-flexpay__callout a:focus-visible {
  text-decoration: underline;
}

.billing-parent .billing-flexpay__card {
  background: var(--bpu-surface);
  border: 1px solid var(--bpu-border);
  border-radius: var(--bpu-r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.billing-parent .billing-flexpay__video {
  margin: 0;
  width: 100%;
}

.billing-parent .billing-flexpay__video .wp-block-embed__wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--bpu-r-sm);
  overflow: hidden;
  background: var(--bpu-ink);
}

.billing-parent .billing-flexpay__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.billing-parent .billing-flexpay__video figcaption {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--bpu-grey);
  text-align: center;
}

.billing-parent .billing-flexpay__steps {
  gap: 16px;
  margin: 0;
}

.billing-parent .billing-flexpay__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.billing-parent .billing-flexpay__step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin: 0;
  background: var(--bpu-tint-blue);
  font-size: 22px;
  font-weight: 700;
  line-height: 44px;
  text-align: center;
}

.billing-parent .billing-flexpay__step-num--blue {
  background: var(--bpu-tint-blue);
  color: var(--bpu-navy);
}

.billing-parent .billing-flexpay__step-num--green {
  background: var(--bpu-tint-green);
  color: var(--bpu-green);
}

.billing-parent .billing-flexpay__step-num--orange {
  background: var(--bpu-tint-yellow);
  color: var(--bpu-orange);
}

.billing-parent .billing-flexpay__step-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--bpu-navy);
}

.billing-parent .billing-flexpay__step-body {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--bpu-ink);
}

/* ----------------------------------------------------------------------------
   10. Paperless billing section
   ---------------------------------------------------------------------------- */

.billing-parent .billing-section--paperless {
  background: var(--bpu-surface-alt);
}

.billing-parent .billing-paperless__cards {
  gap: 24px;
  margin: 0 auto 40px;
}

.billing-parent .billing-card {
  position: relative;
  background: var(--bpu-surface);
  border: 1px solid var(--bpu-border);
  border-radius: var(--bpu-r-lg);
  box-shadow: var(--bpu-shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 248px;
}

.billing-parent .billing-card__accent {
  height: 6px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.billing-parent .billing-card--blue .billing-card__accent {
  background: var(--bpu-navy);
}

.billing-parent .billing-card--orange .billing-card__accent {
  background: var(--bpu-orange);
}

.billing-parent .billing-card__body {
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}

.billing-parent .billing-card__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
}

.billing-parent .billing-card__title--blue {
  color: var(--bpu-navy);
}

.billing-parent .billing-card__title--orange {
  color: var(--bpu-orange);
}

.billing-parent .billing-card__text {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--bpu-ink);
}

.billing-parent .billing-paperless__banner {
  margin: 0 auto 40px;
  border-radius: var(--bpu-r-md);
  overflow: hidden;
}

.billing-parent .billing-paperless__banner img {
  width: 100%;
  height: auto;
  display: block;
}

.billing-parent .billing-benefits {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.billing-parent .billing-benefits .wp-block-columns {
  gap: 32px;
  margin: 0;
}

.billing-parent .billing-benefit {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.billing-parent .billing-benefit__title {
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  color: var(--bpu-navy);
}

.billing-parent .billing-benefit__body {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  color: var(--bpu-ink);
}

/* ----------------------------------------------------------------------------
   11. Help is available (dark navy CTA)
   ---------------------------------------------------------------------------- */

.billing-parent .billing-section--help {
  background: var(--bpu-navy);
  color: #ffffff;
}

.billing-parent .billing-help__grid {
  gap: 64px;
  align-items: center;
  margin: 0 auto;
}

.billing-parent .billing-help__media .billing-help__img {
  margin: 0;
}

.billing-parent .billing-help__img img {
  width: 100%;
  height: auto;
  border-radius: var(--bpu-r-md);
  object-fit: cover;
}

.billing-parent .billing-help__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.billing-parent .billing-help__title {
  margin: 0;
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  color: #ffffff;
}

.billing-parent .billing-help__text {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.9);
}

.billing-parent .billing-help__links {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 24px;
}

.billing-parent .billing-help__link {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--bpu-green);
}

.billing-parent .billing-help__link a {
  color: var(--bpu-green);
  text-decoration: none;
}

.billing-parent .billing-help__link a:hover, .billing-parent .billing-help__link a:focus-visible {
  text-decoration: underline;
}

/* ============================================================================
   12. RESPONSIVE BREAKPOINTS
   ============================================================================
   Strategy: progressively collapse the desktop grid. NO content ever hidden.
   ============================================================================ */

/* ---------- Large tablet & small desktop  ( < 1200px ) ---------- */

@media (max-width: 1199.98px) {
  .billing-parent .billing-section {
    padding: 56px 24px;
  }
  .billing-parent .billing-hero {
    min-height: 580px;
  }
  .billing-parent .billing-hero__layout {
    gap: 40px;
  }
  .billing-parent .billing-hero__video-column {
    width: 440px;
  }
  .billing-parent .billing-hero__title {
    font-size: 44px;
    line-height: 52px;
  }
  .billing-parent .billing-hero__lede {
    font-size: 20px;
    line-height: 30px;
  }
  .billing-parent .billing-band__inner {
    padding: 24px 28px 24px 36px;
  }
  .billing-parent .billing-band__heading {
    font-size: 24px;
    line-height: 30px;
  }
  .billing-parent .billing-section__title, .billing-parent .billing-help__title {
    font-size: 34px;
    line-height: 40px;
  }
  /* Ways grid: 4 cols + wrap to next row */ .billing-parent .billing-ways__grid .billing-way {
    flex: 1 1 25%;
    padding: 24px;
  }
  .billing-parent .billing-ways__grid .billing-way:nth-child(n+5) {
    border-top: 1px solid var(--bpu-border);
  }
  /* FlexPay grid stacks */ .billing-parent .billing-flexpay__grid, .billing-parent .billing-help__grid {
    flex-wrap: wrap;
  }
  .billing-parent .billing-flexpay__copy, .billing-parent .billing-flexpay__card, .billing-parent .billing-help__media, .billing-parent .billing-help__copy {
    flex-basis: 100% !important;
    width: 100%;
  }
}

/* ---------- Tablet  ( < 992px ) ---------- */

@media (max-width: 991.98px) {
  .billing-parent .billing-section {
    padding: 48px 20px;
  }
  .billing-parent .billing-hero {
    min-height: auto;
  }
  .billing-parent .billing-hero .wp-block-cover__inner-container {
    padding: 40px 20px 80px;
  }
  .billing-parent .billing-hero__layout {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  .billing-parent .billing-hero__video-column {
    width: 100%;
    max-width: 720px;
    align-self: center;
  }
  .billing-parent .billing-hero__title {
    font-size: 36px;
    line-height: 44px;
  }
  .billing-parent .billing-hero__lede {
    font-size: 18px;
    line-height: 28px;
  }
  /* Band wraps; CTA on its own row */ .billing-parent .billing-band {
    margin-top: -40px;
    padding: 0 20px;
  }
  .billing-parent .billing-band__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 24px 24px 32px;
  }
  .billing-parent .billing-band__text {
    flex: 1 1 100%;
  }
  /* MyMeter stacks */ .billing-parent .billing-mymeter__grid {
    flex-wrap: wrap;
  }
  .billing-parent .billing-mymeter__media, .billing-parent .billing-mymeter__callout {
    flex-basis: 100% !important;
    width: 100%;
    padding: 0;
  }
  /* Ways: 2 cols */ .billing-parent .billing-ways__intro {
    flex-wrap: wrap;
  }
  .billing-parent .billing-ways__intro > .wp-block-column {
    flex-basis: 100% !important;
    width: 100%;
  }
  .billing-parent .billing-ways__grid .billing-way {
    flex: 1 1 50%;
    padding: 20px;
  }
  .billing-parent .billing-ways__grid .billing-way:nth-child(2n+3) {
    border-top: 1px solid var(--bpu-border);
  }
  .billing-parent .billing-ways__grid .billing-way:nth-child(odd)::before {
    display: none;
  }
  /* Steps row → 3 cols still fits but tighter */ .billing-parent .billing-mymeter__steps {
    gap: 12px;
  }
  /* Section title */ .billing-parent .billing-section__title, .billing-parent .billing-help__title {
    font-size: 30px;
    line-height: 36px;
  }
  .billing-parent .billing-card__body {
    padding: 24px;
  }
  .billing-parent .billing-card__title {
    font-size: 24px;
    line-height: 30px;
  }
  /* Benefits columns stack */ .billing-parent .billing-benefits .wp-block-columns {
    flex-wrap: wrap;
    gap: 20px;
  }
  .billing-parent .billing-benefit {
    flex: 1 1 100%;
  }
}

/* ---------- Mobile  ( < 640px ) ---------- */

@media (max-width: 639.98px) {
  .billing-parent .billing-section {
    padding: 40px 16px;
  }
  .billing-parent .billing-hero {
    min-height: auto;
  }
  .billing-parent .billing-hero .wp-block-cover__inner-container {
    padding: 32px 16px 64px;
  }
  .billing-parent .billing-hero__layout {
    gap: 24px;
  }
  .billing-parent .billing-hero__video {
    border-radius: 8px;
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.32),
      0 4px 10px rgba(0, 0, 0, 0.2);
  }
  .billing-parent .billing-breadcrumb__text {
    font-size: 14px;
    line-height: 20px;
  }
  .billing-parent .billing-hero__title {
    font-size: 28px;
    line-height: 34px;
    padding-top: 16px;
  }
  .billing-parent .billing-hero__lede {
    font-size: 16px;
    line-height: 24px;
  }
  /* Band — full stack */ .billing-parent .billing-band {
    margin-top: -24px;
    padding: 0 16px;
  }
  .billing-parent .billing-band__inner {
    padding: 20px 20px 20px 24px;
  }
  .billing-parent .billing-band__eyebrow {
    font-size: 14px;
    letter-spacing: 1.2px;
  }
  .billing-parent .billing-band__heading {
    font-size: 20px;
    line-height: 26px;
  }
  /* MyMeter steps stack */ .billing-parent .billing-mymeter__steps {
    flex-wrap: wrap;
    gap: 12px;
  }
  .billing-parent .billing-mymeter__steps .billing-step {
    flex: 1 1 100%;
  }
  /* Ways → 1 col */ .billing-parent .billing-ways__grid .billing-way {
    flex: 1 1 100%;
    padding: 20px 8px;
  }
  .billing-parent .billing-ways__grid .billing-way + .billing-way {
    border-top: 1px solid var(--bpu-border);
  }
  .billing-parent .billing-ways__grid .billing-way::before {
    display: none;
  }
  /* FlexPay steps stack */ .billing-parent .billing-flexpay__steps {
    flex-wrap: wrap;
    gap: 16px;
  }
  .billing-parent .billing-flexpay__step {
    flex: 1 1 100%;
  }
  /* Paperless cards stack */ .billing-parent .billing-paperless__cards {
    flex-wrap: wrap;
    gap: 16px;
  }
  .billing-parent .billing-card {
    flex-basis: 100%;
    min-height: auto;
  }
  /* Section title */ .billing-parent .billing-section__title, .billing-parent .billing-help__title {
    font-size: 26px;
    line-height: 32px;
  }
  .billing-parent .billing-section__intro {
    font-size: 16px;
    line-height: 24px;
  }
  .billing-parent .billing-flexpay__callout {
    font-size: 18px;
  }
  /* Help section link row → stack */ .billing-parent .billing-help__links {
    flex-direction: column;
    gap: 12px;
  }
  /* Buttons full-width on mobile */ .billing-parent .billing-btn .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
}

/* ---------- Accessibility: reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .billing-parent *, .billing-parent *::before, .billing-parent *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Print ---------- */

@media print {
  .billing-parent {
    background: #ffffff;
    color: #000000;
  }
  .billing-parent .billing-section--help, .billing-parent .billing-band__inner {
    background: transparent !important;
    color: #000000 !important;
    box-shadow: none !important;
  }
  .billing-parent .billing-hero img {
    display: none;
  }
  .billing-parent .billing-hero__video {
    box-shadow: none !important;
    border: 1px solid #000;
  }
  .billing-parent .billing-hero__video iframe {
    display: none;
  }
}

/* =============================================================================
   BPU — Understanding My Bill (Gutenberg redesign)
   Wrapper class: .billing-inner-parent
   All rules scoped under .billing-inner-parent for full style isolation.
   Container: 1480 px. Breakpoints: 1199 / 991 / 639.
   Figma node: 10763:35730
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Design tokens (scoped to this page only)
   --------------------------------------------------------------------------- */

.billing-inner-parent {
  --bpu-i-navy:        #002b7f;
  --bpu-i-navy-deep:   #003971;
  --bpu-i-green:       #7ca650;
  --bpu-i-green-light: #b0d57b;
  --bpu-i-green-dark:  #376319;
  --bpu-i-orange:      #ef800a;
  --bpu-i-ink:         #1d1d1d;
  --bpu-i-grey:        #999999;
  --bpu-i-border:      #d9dbe0;
  --bpu-i-surface-alt: #f7f7f7;
  --bpu-i-white:       #ffffff;
  --bpu-i-container:   1480px;
  --bpu-i-gutter:      24px;
  --bpu-i-section-py:  60px;
  --bpu-i-r-sm:        4px;
  --bpu-i-r-md:        8px;
  --bpu-i-r-lg:        12px;
  --bpu-i-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.04);
  --bpu-i-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------------- */

.billing-inner-parent, .billing-inner-parent * {
  box-sizing: border-box;
}

.billing-inner-parent {
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--bpu-i-ink);
  font-family: var(--bpu-i-font);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  background: var(--bpu-i-white);
}

.billing-inner-parent a {
  color: var(--bpu-i-navy-deep);
  text-decoration: underline;
}

.billing-inner-parent a:hover, .billing-inner-parent a:focus-visible {
  text-decoration: underline;
  color: var(--bpu-i-navy);
}

.billing-inner-parent a:focus-visible, .billing-inner-parent button:focus-visible, .billing-inner-parent .wp-block-button__link:focus-visible {
  outline: 3px solid var(--bpu-i-green);
  outline-offset: 3px;
  border-radius: var(--bpu-i-r-sm);
}

.billing-inner-parent img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------------------------------------------------------------------------
   3. Hero (Cover) — breadcrumb + H1 + lede
   --------------------------------------------------------------------------- */

.billing-inner-parent .billing-inner-hero {
  position: relative;
  width: 100%;
  min-height: 574px;
  padding: 0;
  margin: 0;
}

.billing-inner-parent .billing-inner-hero .wp-block-cover__inner-container {
  width: 100%;
  max-width: var(--bpu-i-container);
  margin: 0 auto;
  padding: 150px 0px 0px 207px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.billing-inner-parent .billing-inner-breadcrumb {
  margin: 0;
}

.billing-inner-parent .billing-inner-breadcrumb__text {
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: var(--bpu-i-white);
}

.billing-inner-parent .billing-inner-breadcrumb__text a {
  color: var(--bpu-i-white);
  text-decoration: none;
}

.billing-inner-parent .billing-inner-breadcrumb__text a:hover, .billing-inner-parent .billing-inner-breadcrumb__text a:focus-visible {
  text-decoration: underline;
}

.billing-inner-parent .billing-inner-hero__title {
  margin: 0;
  padding: 24px 0 0;
  font-family: var(--bpu-i-font);
  font-size: 56px;
  line-height: 64px;
  font-weight: 700;
  color: var(--bpu-i-white);
  letter-spacing: -0.5px;
}

.billing-inner-parent .billing-inner-hero__lede {
  margin: 0;
  padding: 8px 0 0;
  max-width: 1480px;
  font-size: 22px;
  line-height: 32px;
  font-weight: 600;
  color: var(--bpu-i-white);
}

/* ---------------------------------------------------------------------------
   4. Generic section frame  (used by every section below the hero)
   --------------------------------------------------------------------------- */

.billing-inner-parent .billing-inner-section {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--bpu-i-section-py) var(--bpu-i-gutter);
  background: var(--bpu-i-white);
}

.billing-inner-parent .billing-inner-section > * {
  width: 100%;
  max-width: var(--bpu-i-container);
  margin-left: auto;
  margin-right: auto;
}

.billing-inner-parent .billing-inner-section__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
}

.billing-inner-parent .billing-inner-section__header--center {
  align-items: center;
  text-align: center;
}

.billing-inner-parent .billing-inner-section__title {
  margin: 0;
  font-family: var(--bpu-i-font);
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: var(--bpu-i-navy);
  letter-spacing: -0.4px;
}

.billing-inner-parent .billing-inner-section__intro {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--bpu-i-ink);
  max-width: 1170px;
}

.billing-inner-parent .billing-inner-section__header--center .billing-inner-section__title, .billing-inner-parent .billing-inner-section__header--center .billing-inner-section__intro {
  text-align: center;
}

/* Eyebrow micro-heading variants */

.billing-inner-parent .billing-inner-eyebrow {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.billing-inner-parent .billing-inner-eyebrow--green {
  color: var(--bpu-i-green);
}

.billing-inner-parent .billing-inner-eyebrow--orange {
  color: var(--bpu-i-orange);
}

.billing-inner-parent .billing-inner-eyebrow--light {
  color: var(--bpu-i-green-light);
}

/* ---------------------------------------------------------------------------
   5. Section 1 — What's on your bill (sample-bill graphic)
   --------------------------------------------------------------------------- */

.billing-inner-parent .billing-inner-section--bill {
  background: var(--bpu-i-white);
}

.billing-inner-parent .billing-inner-section--bill .billing-inner-section__header {
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
}

.billing-inner-parent .billing-inner-section--bill .billing-inner-section__title, .billing-inner-parent .billing-inner-section--bill .billing-inner-section__intro {
  text-align: center;
}

.billing-inner-parent .billing-inner-bill__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.billing-inner-parent .billing-inner-bill__caption {
  margin: 0;
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  color: var(--bpu-i-navy);
  text-align: center;
}

.billing-inner-parent .billing-inner-bill__figure {
  margin: 0;
  width: 100%;
  max-width: 815px;
  border-radius: var(--bpu-i-r-md);
  overflow: hidden;
  box-shadow: var(--bpu-i-shadow-card);
  background: var(--bpu-i-surface-alt);
}

.billing-inner-parent .billing-inner-bill__figure a {
  display: block;
  text-decoration: none;
  border-radius: var(--bpu-i-r-md);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.billing-inner-parent .billing-inner-bill__figure a:hover, .billing-inner-parent .billing-inner-bill__figure a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10);
}

.billing-inner-parent .billing-inner-bill__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: var(--bpu-i-white);
}

/* ---------------------------------------------------------------------------
   6. Section 2 — Video walkthrough (navy bg, 2-col)
   --------------------------------------------------------------------------- */

.billing-inner-parent .billing-inner-section--video {
  background: var(--bpu-i-navy);
  color: var(--bpu-i-white);
}

.billing-inner-parent .billing-inner-video__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 43px;
}

.billing-inner-parent .billing-inner-video__media {
  flex: 0 0 auto;
  width: 536px;
  max-width: 100%;
  border-radius: var(--bpu-i-r-md);
  overflow: hidden;
  background: #000;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.billing-inner-parent .billing-inner-video__media .wp-block-embed {
  margin: 0;
  width: 100%;
}

.billing-inner-parent .billing-inner-video__media .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.billing-inner-parent .billing-inner-video__media .wp-block-embed__wrapper iframe, .billing-inner-parent .billing-inner-video__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.billing-inner-parent .billing-inner-video__copy {
  flex: 1 1 503px;
  max-width: 503px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.billing-inner-parent .billing-inner-video__title {
  margin: 0;
  font-family: var(--bpu-i-font);
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: var(--bpu-i-white);
  letter-spacing: -0.4px;
}

.billing-inner-parent .billing-inner-video__text {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--bpu-i-white);
}

/* ---------------------------------------------------------------------------
   7. Section 3 — Important Billing Information (two FAQ cards)
   --------------------------------------------------------------------------- */

.billing-inner-parent .billing-inner-section--faqs {
  background: var(--bpu-i-white);
}

.billing-inner-parent .billing-inner-section--faqs .billing-inner-section__header {
  margin-bottom: 40px;
}

.billing-inner-parent .billing-inner-faqs__grid.wp-block-columns {
  display: flex;
  flex-wrap: nowrap;
  gap: 32px;
  margin: 0;
}

.billing-inner-parent .billing-inner-faq-card.wp-block-column {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 40px;
  background: var(--bpu-i-white);
  border: 1px solid var(--bpu-i-border);
  border-radius: var(--bpu-i-r-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--bpu-i-shadow-card);
}

.billing-inner-parent .billing-inner-faq-card__title {
  margin: 0;
  font-family: var(--bpu-i-font);
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  color: var(--bpu-i-navy);
  letter-spacing: -0.3px;
}

.billing-inner-parent .billing-inner-faq-card__body {
  margin: 0;
  flex: 1 1 auto;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--bpu-i-ink);
}

.billing-inner-parent .billing-inner-faq-card__cta {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   8. Button styles (Gutenberg wp:button — proper <a> anchors)
   --------------------------------------------------------------------------- */

.billing-inner-parent .wp-block-buttons {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.billing-inner-parent .wp-block-button {
  margin: 0;
}

.billing-inner-parent .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: var(--bpu-i-green);
  color: var(--bpu-i-white);
  font-family: var(--bpu-i-font);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--bpu-i-r-sm);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.billing-inner-parent .wp-block-button__link:hover, .billing-inner-parent .wp-block-button__link:focus-visible {
  background: #6a9244;
  text-decoration: none;
  transform: translateY(-1px);
  color: var(--bpu-i-white);
}

/* Outline variant (Need Assistance banner) */

.billing-inner-parent .is-style-billing-inner-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid var(--bpu-i-white);
  color: var(--bpu-i-white);
}

.billing-inner-parent .is-style-billing-inner-outline .wp-block-button__link:hover, .billing-inner-parent .is-style-billing-inner-outline .wp-block-button__link:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--bpu-i-white);
  color: var(--bpu-i-white);
}

/* ---------------------------------------------------------------------------
   9. Section 4 — Need Assistance banner (green gradient)
   --------------------------------------------------------------------------- */

.billing-inner-parent .billing-inner-section--assist {
  background: linear-gradient(
    -50.44deg,
    var(--bpu-i-green-light) 0%,
    var(--bpu-i-green-dark) 100%
  );
  color: var(--bpu-i-white);
  text-align: center;
}

.billing-inner-parent .billing-inner-assist__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
}

.billing-inner-parent .billing-inner-assist__icons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 56px;
  margin: 0 0 8px;
  padding: 0;
}

.billing-inner-parent .billing-inner-assist__icon {
  margin: 0;
  width: 56px;
  height: 56px;
}

.billing-inner-parent .billing-inner-assist__icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.billing-inner-parent .billing-inner-assist__title {
  margin: 8px 0 0;
  font-family: var(--bpu-i-font);
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  color: var(--bpu-i-white);
  letter-spacing: -0.4px;
}

.billing-inner-parent .billing-inner-assist__text {
  margin: 0;
  max-width: 860px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--bpu-i-white);
}

.billing-inner-parent .billing-inner-assist__cta {
  margin-top: 24px;
}

/* ===========================================================================
   RESPONSIVE — content reflows; never hides headings or paragraphs.
   =========================================================================== */

/* ---------- Large tablet & small desktop ( < 1200px ) ---------- */

@media (max-width: 1199.98px) {
  .billing-inner-parent .billing-inner-section {
    padding: 56px 24px;
  }
  .billing-inner-parent .billing-inner-hero {
    min-height: 520px;
  }
  .billing-inner-parent .billing-inner-hero__title {
    font-size: 44px;
    line-height: 52px;
  }
  .billing-inner-parent .billing-inner-hero__lede {
    font-size: 20px;
    line-height: 30px;
  }
  .billing-inner-parent .billing-inner-section__title, .billing-inner-parent .billing-inner-video__title, .billing-inner-parent .billing-inner-assist__title {
    font-size: 34px;
    line-height: 42px;
  }
  .billing-inner-parent .billing-inner-faq-card__title {
    font-size: 24px;
    line-height: 32px;
  }
  .billing-inner-parent .billing-inner-video__row {
    gap: 32px;
  }
  .billing-inner-parent .billing-inner-video__media {
    width: 480px;
  }
}

/* ---------- Tablet ( < 992px ) ---------- */

@media (max-width: 991.98px) {
  .billing-inner-parent .billing-inner-section {
    padding: 48px 20px;
  }
  .billing-inner-parent .billing-inner-hero {
    min-height: 480px;
  }
  .billing-inner-parent .billing-inner-hero .wp-block-cover__inner-container {
    padding: 0 20px;
  }
  .billing-inner-parent .billing-inner-hero__title {
    font-size: 36px;
    line-height: 44px;
  }
  .billing-inner-parent .billing-inner-hero__lede {
    font-size: 18px;
    line-height: 28px;
  }
  .billing-inner-parent .billing-inner-section__title, .billing-inner-parent .billing-inner-video__title, .billing-inner-parent .billing-inner-assist__title {
    font-size: 30px;
    line-height: 38px;
  }
  .billing-inner-parent .billing-inner-bill__caption {
    font-size: 20px;
    line-height: 26px;
  }
  /* Video row stacks: media above, copy below */ .billing-inner-parent .billing-inner-video__row {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .billing-inner-parent .billing-inner-video__media {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
  }
  .billing-inner-parent .billing-inner-video__copy {
    flex-basis: auto;
    max-width: 100%;
    align-self: stretch;
  }
  /* FAQ cards stack */ .billing-inner-parent .billing-inner-faqs__grid.wp-block-columns {
    flex-direction: column;
    gap: 24px;
  }
  .billing-inner-parent .billing-inner-faq-card.wp-block-column {
    flex-basis: auto;
    width: 100%;
    padding: 32px;
  }
  /* Assist icons tighter */ .billing-inner-parent .billing-inner-assist__icons {
    gap: 32px;
  }
}

/* ---------- Mobile ( < 640px ) ---------- */

@media (max-width: 639.98px) {
  .billing-inner-parent .billing-inner-section {
    padding: 40px 16px;
  }
  .billing-inner-parent .billing-inner-hero {
    min-height: 440px;
  }
  .billing-inner-parent .billing-inner-hero .wp-block-cover__inner-container {
    padding: 0 16px;
  }
  .billing-inner-parent .billing-inner-breadcrumb__text {
    font-size: 14px;
    line-height: 20px;
  }
  .billing-inner-parent .billing-inner-hero__title {
    font-size: 28px;
    line-height: 34px;
    padding-top: 16px;
  }
  .billing-inner-parent .billing-inner-hero__lede {
    font-size: 16px;
    line-height: 24px;
  }
  .billing-inner-parent .billing-inner-section__title, .billing-inner-parent .billing-inner-video__title, .billing-inner-parent .billing-inner-assist__title {
    font-size: 26px;
    line-height: 32px;
  }
  .billing-inner-parent .billing-inner-section__intro, .billing-inner-parent .billing-inner-video__text, .billing-inner-parent .billing-inner-assist__text, .billing-inner-parent .billing-inner-faq-card__body {
    font-size: 16px;
    line-height: 24px;
  }
  .billing-inner-parent .billing-inner-bill__caption {
    font-size: 18px;
    line-height: 24px;
  }
  .billing-inner-parent .billing-inner-faq-card.wp-block-column {
    padding: 24px;
    gap: 12px;
  }
  .billing-inner-parent .billing-inner-faq-card__title {
    font-size: 22px;
    line-height: 28px;
  }
  /* Buttons → full width on mobile for easier tap targets */ .billing-inner-parent .wp-block-buttons {
    width: 100%;
  }
  .billing-inner-parent .wp-block-button {
    width: 100%;
  }
  .billing-inner-parent .wp-block-button__link {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
  }
  .billing-inner-parent .billing-inner-assist__icons {
    gap: 24px;
  }
  .billing-inner-parent .billing-inner-assist__icon, .billing-inner-parent .billing-inner-assist__icon img {
    width: 44px;
    height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .billing-inner-parent .wp-block-button__link, .billing-inner-parent .billing-inner-bill__figure a {
    transition: none !important;
  }
  .billing-inner-parent .wp-block-button__link:hover, .billing-inner-parent .billing-inner-bill__figure a:hover {
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Print
   --------------------------------------------------------------------------- */

@media print {
  .billing-inner-parent {
    background: #ffffff;
    color: #000000;
  }
  .billing-inner-parent .billing-inner-section--video, .billing-inner-parent .billing-inner-section--assist {
    background: transparent !important;
    color: #000 !important;
  }
  .billing-inner-parent .billing-inner-hero img, .billing-inner-parent .billing-inner-video__media iframe {
    display: none;
  }
  .billing-inner-parent .billing-inner-video__title, .billing-inner-parent .billing-inner-video__text, .billing-inner-parent .billing-inner-assist__title, .billing-inner-parent .billing-inner-assist__text, .billing-inner-parent .billing-inner-hero__title, .billing-inner-parent .billing-inner-hero__lede, .billing-inner-parent .billing-inner-breadcrumb__text, .billing-inner-parent .billing-inner-breadcrumb__text a {
    color: #000 !important;
  }
  .billing-inner-parent .wp-block-button__link {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000 !important;
  }
}

/* =============================================================================
   BPU — Global base stylesheet
   ----------------------------------------------------------------------------
   This file is LOADED ONCE site-wide. Every Gutenberg page redesign should
   wrap its main element in `<main class="bpu-page page-specific-class">`.

   Provides:
     • Design tokens (CSS custom properties)
     • Hero pattern   (.bpu-hero)
     • Section frame  (.bpu-section / .bpu-section--alt)
     • Section header (.bpu-section__header + title + intro + eyebrow)
     • Card           (.bpu-card + modifiers)
     • Buttons        (.bpu-btn / wp-block-button overrides)
     • Breadcrumb     (.bpu-breadcrumb)
     • Responsive breakpoints  (1199 / 991 / 639)
     • Accessibility (focus rings, reduced motion, print)

   Per-page CSS files should only add page-specific GRID/LAYOUT overrides,
   never re-define tokens, hero, sections, cards, buttons, etc.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Design tokens  (scoped to .bpu-page so it never leaks into a theme)
   --------------------------------------------------------------------------- */

.bpu-page {
  --bpu-i-navy:        #002b7f;
  --bpu-i-navy-deep:   #003971;
  --bpu-i-green:       #7ca650;
  --bpu-i-green-light: #b0d57b;
  --bpu-i-green-dark:  #376319;
  --bpu-i-orange:      #ef800a;
  --bpu-i-blue:        #01a2e5;
  /* accent — used on card titles */
  --bpu-i-ink:         #1d1d1d;
  --bpu-i-grey:        #999999;
  --bpu-i-border:      #d9dbe0;
  --bpu-i-surface-alt: #f7f7f7;
  --bpu-i-white:       #ffffff;
  --bpu-i-container:   1480px;
  --bpu-i-gutter:      24px;
  --bpu-i-section-py:  60px;
  --bpu-i-r-sm:        4px;
  --bpu-i-r-md:        8px;
  --bpu-i-r-lg:        12px;
  --bpu-i-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.04);
  --bpu-i-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   2. Base reset for the page wrapper
   --------------------------------------------------------------------------- */

.bpu-page, .bpu-page * {
  box-sizing: border-box;
}

.bpu-page {
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--bpu-i-ink);
  font-family: var(--bpu-i-font);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  background: var(--bpu-i-white);
}

.bpu-page a {
  color: var(--bpu-i-navy-deep);
}

.bpu-page a:hover {
  color: var(--bpu-i-navy);
}

.bpu-page :focus-visible {
  outline: 3px solid var(--bpu-i-green);
  outline-offset: 3px;
  border-radius: var(--bpu-i-r-sm);
}

.bpu-page img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------------------------------------------------------------------------
   3. Hero  (cover block)
   --------------------------------------------------------------------------- */

.bpu-page .bpu-hero {
  position: relative;
  width: 100%;
  min-height: 574px;
  padding: 0;
  margin: 0;
}

.bpu-page .bpu-hero .wp-block-cover__inner-container {
  width: 100%;
  max-width: var(--bpu-i-container);
  margin: 0 auto;
  padding: 150px 0px 0px 207px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.bpu-page .bpu-breadcrumb {
  margin: 0;
}

.bpu-page .bpu-breadcrumb__text {
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: var(--bpu-i-white);
}

.bpu-page .bpu-breadcrumb__text a {
  color: var(--bpu-i-white);
  text-decoration: none;
}

.bpu-page .bpu-breadcrumb__text a:hover, .bpu-page .bpu-breadcrumb__text a:focus-visible {
  text-decoration: underline;
}

.bpu-page .bpu-hero__title {
  margin: 0;
  padding: 24px 0 0;
  font-family: var(--bpu-i-font);
  font-size: 56px;
  line-height: 64px;
  font-weight: 700;
  color: var(--bpu-i-white);
  letter-spacing: -0.5px;
}

.bpu-page .bpu-hero__lede {
  margin: 0;
  padding: 8px 0 0;
  max-width: 1480px;
  font-size: 22px;
  line-height: 32px;
  font-weight: 600;
  color: var(--bpu-i-white);
}

/* ---------------------------------------------------------------------------
   4. Section frame
   --------------------------------------------------------------------------- */

.bpu-page .bpu-section {
  width: 100%;
  margin: 0 auto;
  padding: var(--bpu-i-section-py) var(--bpu-i-gutter);
  background: var(--bpu-i-white);
}

.bpu-page .bpu-section--alt {
  background: var(--bpu-i-surface-alt);
}

.bpu-page .bpu-section > * {
  width: 100%;
  max-width: var(--bpu-i-container);
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------------
   5. Section header  (eyebrow + H2 + intro paragraph)
   --------------------------------------------------------------------------- */

.bpu-page .bpu-section__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
}

.bpu-page .bpu-section__header--center {
  align-items: center;
  text-align: center;
}

.bpu-page .bpu-section__title {
  margin: 0;
  font-family: var(--bpu-i-font);
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: var(--bpu-i-navy);
  letter-spacing: -0.4px;
}

.bpu-page .bpu-section__intro {
  margin: 0;
  max-width: 1240px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--bpu-i-ink);
}

.bpu-page .bpu-section__header--center .bpu-section__title, .bpu-page .bpu-section__header--center .bpu-section__intro {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------------
   6. Eyebrow micro-heading  (with colour modifiers)
   --------------------------------------------------------------------------- */

.bpu-page .bpu-eyebrow {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.bpu-page .bpu-eyebrow--green {
  color: var(--bpu-i-green);
}

.bpu-page .bpu-eyebrow--orange {
  color: var(--bpu-i-orange);
}

.bpu-page .bpu-eyebrow--blue {
  color: var(--bpu-i-blue);
}

.bpu-page .bpu-eyebrow--navy {
  color: var(--bpu-i-navy);
}

/* ---------------------------------------------------------------------------
   7. Card  (bordered, rounded, padded — building block for all card grids)
   --------------------------------------------------------------------------- */

.bpu-page .bpu-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 24px;
  background: var(--bpu-i-white);
  border: 1px solid var(--bpu-i-border);
  border-radius: var(--bpu-i-r-md);
  box-shadow: var(--bpu-i-shadow-card);
  height: 100%;
}

.bpu-page .bpu-card__title {
  margin: 0;
  font-family: var(--bpu-i-font);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  color: var(--bpu-i-navy);
}

.bpu-page .bpu-card__title--blue {
  color: var(--bpu-i-blue);
}

.bpu-page .bpu-card__title--orange {
  color: var(--bpu-i-orange);
}

.bpu-page .bpu-card__title--green {
  color: var(--bpu-i-green);
}

.bpu-page .bpu-card__title--navy {
  color: var(--bpu-i-navy);
}

.bpu-page .bpu-card__body {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: var(--bpu-i-ink);
}

.bpu-page .bpu-card__group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
}

.bpu-page .bpu-card__label {
  margin: 0;
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  color: var(--bpu-i-navy);
}

.bpu-page .bpu-card__list {
  margin: 0;
  padding-left: 27px;
  list-style: disc;
  color: var(--bpu-i-ink);
}

.bpu-page .bpu-card__list li {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}

.bpu-page .bpu-card__cta {
  margin-top: auto;
  /* pin button to bottom even when bodies vary in length */
  padding-top: 8px;
}

/* ---------------------------------------------------------------------------
   8. Buttons  (Gutenberg wp:button — proper <a> anchors, never <div>)
   --------------------------------------------------------------------------- */

.bpu-page .wp-block-buttons {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.bpu-page .wp-block-button {
  margin: 0;
}

.bpu-page .wp-block-button__link, .bpu-page .bpu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: var(--bpu-i-green);
  color: var(--bpu-i-white);
  font-family: var(--bpu-i-font);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--bpu-i-r-sm);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.bpu-page .wp-block-button__link:hover, .bpu-page .wp-block-button__link:focus-visible, .bpu-page .bpu-btn:hover, .bpu-page .bpu-btn:focus-visible {
  background: #6a9244;
  color: var(--bpu-i-white);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Outline variant on dark/colored backgrounds */

.bpu-page .is-style-bpu-outline .wp-block-button__link, .bpu-page .bpu-btn--outline {
  background: transparent;
  border: 2px solid var(--bpu-i-white);
  color: var(--bpu-i-white);
}

.bpu-page .is-style-bpu-outline .wp-block-button__link:hover, .bpu-page .is-style-bpu-outline .wp-block-button__link:focus-visible, .bpu-page .bpu-btn--outline:hover, .bpu-page .bpu-btn--outline:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--bpu-i-white);
  color: var(--bpu-i-white);
}

/* ===========================================================================
   RESPONSIVE — content reflows; never hides any heading or paragraph.
   =========================================================================== */

/* ---------- Large tablet & small desktop  ( < 1200px ) ---------- */

@media (max-width: 1199.98px) {
  .bpu-page .bpu-section {
    padding: 56px 24px;
  }
  .bpu-page .bpu-hero {
    min-height: 520px;
  }
  .bpu-page .bpu-hero__title {
    font-size: 44px;
    line-height: 52px;
  }
  .bpu-page .bpu-hero__lede {
    font-size: 20px;
    line-height: 30px;
  }
  .bpu-page .bpu-section__title {
    font-size: 34px;
    line-height: 42px;
  }
  .bpu-page .bpu-card__title {
    font-size: 20px;
    line-height: 26px;
  }
}

/* ---------- Tablet  ( < 992px ) ---------- */

@media (max-width: 991.98px) {
  .bpu-page .bpu-section {
    padding: 48px 20px;
  }
  .bpu-page .bpu-hero {
    min-height: 480px;
  }
  .bpu-page .bpu-hero .wp-block-cover__inner-container {
    padding: 0 20px;
  }
  .bpu-page .bpu-hero__title {
    font-size: 36px;
    line-height: 44px;
  }
  .bpu-page .bpu-hero__lede {
    font-size: 18px;
    line-height: 28px;
  }
  .bpu-page .bpu-section__title {
    font-size: 30px;
    line-height: 38px;
  }
}

/* ---------- Mobile  ( < 640px ) ---------- */

@media (max-width: 639.98px) {
  .bpu-page .bpu-section {
    padding: 40px 16px;
  }
  .bpu-page .bpu-hero {
    min-height: 440px;
  }
  .bpu-page .bpu-hero .wp-block-cover__inner-container {
    padding: 0 16px;
  }
  .bpu-page .bpu-breadcrumb__text {
    font-size: 14px;
    line-height: 20px;
  }
  .bpu-page .bpu-hero__title {
    font-size: 28px;
    line-height: 34px;
    padding-top: 5px;
  }
  .bpu-page .bpu-hero__lede {
    font-size: 16px;
    line-height: 24px;
  }
  .bpu-page .bpu-section__title {
    font-size: 26px;
    line-height: 32px;
  }
  .bpu-page .bpu-section__intro, .bpu-page .bpu-card__body, .bpu-page .bpu-card__list li {
    font-size: 16px;
    line-height: 24px;
  }
  .bpu-page .bpu-card__title {
    font-size: 20px;
    line-height: 26px;
  }
  .bpu-page .bpu-card {
    padding: 24px 20px;
  }
  /* Buttons → full width on mobile for easier tap targets */ .bpu-page .wp-block-buttons {
    width: 100%;
  }
  .bpu-page .wp-block-button {
    width: 100%;
  }
  .bpu-page .wp-block-button__link, .bpu-page .bpu-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
  }
}

/* ---------------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .bpu-page .wp-block-button__link, .bpu-page .bpu-btn, .bpu-page a {
    transition: none !important;
  }
  .bpu-page .wp-block-button__link:hover, .bpu-page .bpu-btn:hover {
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Print
   --------------------------------------------------------------------------- */

@media print {
  .bpu-page {
    background: #ffffff;
    color: #000000;
  }
  .bpu-page .bpu-section--alt, .bpu-page .bpu-hero, .bpu-page .bpu-hero__title, .bpu-page .bpu-hero__lede, .bpu-page .bpu-breadcrumb__text {
    background: transparent !important;
    color: #000 !important;
  }
  .bpu-page .bpu-hero img {
    display: none;
  }
  .bpu-page .wp-block-button__link, .bpu-page .bpu-btn {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000 !important;
  }
}

/* =============================================================================
   BPU — Payment Assistance page (overrides)
   ----------------------------------------------------------------------------
   Wrapper: <main class="bpu-page payment-assisment">
   Depends on: bpu-global.css   (load it FIRST)

   This file ONLY contains layout deltas that are unique to this page:
     • 3-up programs grid
     • 2-up "More ways to manage" grid
     • Magazine row (image + copy) for "We're Here to Help"
     • Contact lines (icon + text) inside the help section

   No tokens, hero, sections, cards, buttons, or eyebrows are redefined here —
   those live in bpu-global.css and are reused.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Section 1 — 3-up "Payment Assistance Programs" grid
   --------------------------------------------------------------------------- */

.payment-assisment .pa-programs__intro {
  margin-top: 0;
  margin-bottom: 0;
}

.payment-assisment .pa-programs-grid.wp-block-columns {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  margin: 0;
  align-items: stretch;
}

.payment-assisment .pa-programs-grid .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  display: flex;
  /* lets the .bpu-card inside fill the column */;
}

.payment-assisment .pa-programs-grid .bpu-card {
  width: 100%;
}

/* ---------------------------------------------------------------------------
   Section 2 — "We're Here to Help" magazine row
   --------------------------------------------------------------------------- */

.payment-assisment .pa-help-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 48px;
}

.payment-assisment .pa-help__media {
  flex: 0 0 auto;
  width: 640px;
  max-width: 100%;
  margin: 0;
}

.payment-assisment .pa-help__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 460;
  object-fit: cover;
  border-radius: var(--bpu-i-r-md);
}

.payment-assisment .pa-help__copy {
  flex: 1 1 498px;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-assisment .pa-help__contact {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--bpu-i-green);
}

.payment-assisment .pa-help__contact a {
  color: var(--bpu-i-green);
  text-decoration: none;
}

.payment-assisment .pa-help__contact a:hover, .payment-assisment .pa-help__contact a:focus-visible {
  text-decoration: underline;
  color: var(--bpu-i-green-dark);
}

.payment-assisment .pa-help__contact-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: 0;
}

.payment-assisment .pa-help__contact-icon img {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Section 3 — 2-up "More Ways to Manage Your Bill" grid
   --------------------------------------------------------------------------- */

.payment-assisment .pa-manage-grid.wp-block-columns {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  margin: 0;
  align-items: stretch;
}

.payment-assisment .pa-manage-grid .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  display: flex;
}

.payment-assisment .pa-manage-grid .bpu-card {
  width: 100%;
  padding: 32px;
  /* slightly roomier than the program cards */
  gap: 17px;
}

.payment-assisment .pa-manage-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
}

.payment-assisment .pa-manage-card__icon {
  flex: 0 0 auto;
  margin: 0;
  height: 67px;
}

.payment-assisment .pa-manage-card__icon img {
  height: 67px;
  width: auto;
  display: block;
  object-fit: contain;
}

.payment-assisment .pa-manage-card__title {
  margin: 0;
  font-family: var(--bpu-i-font);
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  color: var(--bpu-i-navy);
}

.pay-rw {
  max-width: 900px !important;
  margin: 0 auto 50px !important;
}

/* ===========================================================================
   RESPONSIVE — reflow only; no headings or paragraphs are hidden.
   =========================================================================== */

/* ---------- Large tablet ( < 1200px ) — programs grid shrinks, magazine row keeps 2-col ---------- */

@media (max-width: 1199.98px) {
  .payment-assisment .pa-help-row {
    gap: 32px;
  }
  .payment-assisment .pa-help__media {
    width: 520px;
  }
  .payment-assisment .pa-manage-grid .bpu-card {
    padding: 28px;
  }
}

/* ---------- Tablet ( < 992px ) — all multi-column rows stack ---------- */

@media (max-width: 991.98px) {
  /* Programs grid: 3 → 1 col (stacked to keep all 3 cards equally readable) */ .payment-assisment .pa-programs-grid.wp-block-columns {
    flex-direction: column;
    gap: 20px;
  }
  /* Manage grid: 2 → 1 col */ .payment-assisment .pa-manage-grid.wp-block-columns {
    flex-direction: column;
    gap: 20px;
  }
  /* Magazine row stacks: image above, copy below */ .payment-assisment .pa-help-row {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .payment-assisment .pa-help__media {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
  }
  .payment-assisment .pa-help__copy {
    flex-basis: auto;
    max-width: 100%;
  }
  .payment-assisment .pa-manage-card__title {
    font-size: 22px;
    line-height: 28px;
  }
}

/* ---------- Mobile ( < 640px ) ---------- */

@media (max-width: 639.98px) {
  .payment-assisment .pa-manage-grid .bpu-card, .payment-assisment .pa-programs-grid .bpu-card {
    padding: 24px 20px;
  }
  .payment-assisment .pa-manage-card__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .payment-assisment .pa-manage-card__icon, .payment-assisment .pa-manage-card__icon img {
    height: 52px;
  }
  .payment-assisment .pa-manage-card__title {
    font-size: 20px;
    line-height: 26px;
  }
  .payment-assisment .pa-help__contact {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ============================================================================
   BPU — Rates page styles
   ----------------------------------------------------------------------------
   THIS IS A SNIPPET, NOT A STANDALONE STYLESHEET.
   Paste the entire block below into your shared `style.css` file.

   Scope: every selector is prefixed with `.rates-parent` so it cannot leak
   to any other page on the site.

   Source: Figma node 10763:35907
   Live URL preserved: https://www.bpu.com/ForBusiness/Rates.aspx
   ============================================================================ */

/* --- 1. Page wrapper: tokens + base reset ------------------------------- */

.rates-parent {
  --r-navy:        #002b7f;
  --r-navy-deep:   #003971;
  --r-green:       #7ca650;
  --r-green-dark:  #376319;
  --r-orange:      #ef800a;
  --r-cyan:        #01a2e5;
  --r-ink:         #1d1d1d;
  --r-grey:        #999999;
  --r-grey-mid:    #939598;
  --r-border:      #d9dbe0;
  --r-surface-alt: #f7f7f7;
  --r-tint-blue:   #ebf0f8;
  --r-white:       #ffffff;
  --r-container:   1480px;
  --r-gutter:      24px;
  --r-section-py:  60px;
  --r-r-sm:        4px;
  --r-r-md:        8px;
  --r-r-lg:        12px;
  --r-r-pill:      999px;
  --r-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.04);
  --r-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, Helvetica, Arial, sans-serif;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--r-ink);
  font-family: var(--r-font);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  background: var(--r-white);
  box-sizing: border-box;
}

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

.rates-parent a {
  color: var(--r-navy-deep);
}

.rates-parent a:hover {
  color: var(--r-navy);
}

.rates-parent :focus-visible {
  outline: 3px solid var(--r-green);
  outline-offset: 3px;
  border-radius: var(--r-r-sm);
}

.rates-parent img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

.rates-parent .r-hero {
  position: relative;
  width: 100%;
  min-height: 574px;
  padding: 0;
  margin: 0;
}

.rates-parent .r-hero .wp-block-cover__inner-container {
  width: 100%;
  max-width: var(--r-container);
  margin: 0 auto;
  padding: 0 var(--r-gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.rates-parent .r-breadcrumb {
  margin: 0;
}

.rates-parent .r-breadcrumb__text {
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: var(--r-white);
}

.rates-parent .r-breadcrumb__text a {
  color: var(--r-white);
  text-decoration: none;
}

.rates-parent .r-breadcrumb__text a:hover, .rates-parent .r-breadcrumb__text a:focus-visible {
  text-decoration: underline;
}

.rates-parent .r-hero__title {
  margin: 0;
  padding: 24px 0 0;
  font-family: var(--r-font);
  font-size: 56px;
  line-height: 64px;
  font-weight: 700;
  color: var(--r-white);
  letter-spacing: -0.5px;
}

.rates-parent .r-hero__lede {
  margin: 0;
  padding: 8px 0 0;
  max-width: 1480px;
  font-size: 22px;
  line-height: 32px;
  font-weight: 600;
  color: var(--r-white);
}

/* --- 3. Section frame: full-bleed bg, constrained 1480px inner ---------- */

.rates-parent .r-section {
  width: 100%;
  margin: 0;
  padding: var(--r-section-py) var(--r-gutter);
  background: var(--r-white);
}

.rates-parent .r-section--alt {
  background: var(--r-surface-alt);
}

.rates-parent .r-section--navy {
  background: var(--r-navy);
  color: var(--r-white);
}

.rates-parent .r-section > * {
  width: 100%;
  max-width: var(--r-container);
  margin-left: auto;
  margin-right: auto;
}

/* --- 4. Section header (H2 + intro) ------------------------------------ */

.rates-parent .r-section__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  margin-bottom: 24px;
}

.rates-parent .r-section__header--center {
  align-items: center;
  text-align: center;
}

.rates-parent .r-section__title {
  margin: 0;
  font-family: var(--r-font);
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: var(--r-navy);
  letter-spacing: -0.4px;
}

.rates-parent .r-section__title--on-navy {
  color: var(--r-white);
}

.rates-parent .r-section__intro {
  margin: 0;
  max-width: 1180px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--r-ink);
}

.rates-parent .r-section__intro--on-navy {
  color: var(--r-white);
}

.rates-parent .r-section__header--center .r-section__title, .rates-parent .r-section__header--center .r-section__intro {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* --- 5. Buttons (wp:button — real anchors) ----------------------------- */

.rates-parent .wp-block-buttons {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.rates-parent .wp-block-button {
  margin: 0;
}

.rates-parent .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: var(--r-green);
  color: var(--r-white);
  font-family: var(--r-font);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--r-r-sm);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.rates-parent .wp-block-button__link:hover, .rates-parent .wp-block-button__link:focus-visible {
  background: #6a9244;
  color: var(--r-white);
  transform: translateY(-1px);
  text-decoration: none;
}

.rates-parent .is-style-r-navy .wp-block-button__link {
  background: var(--r-navy);
}

.rates-parent .is-style-r-navy .wp-block-button__link:hover, .rates-parent .is-style-r-navy .wp-block-button__link:focus-visible {
  background: var(--r-navy-deep);
  color: var(--r-white);
}

/* --- 6. Section 1: Rates Information — 3 PDF cards --------------------- */

.rates-parent .r-pdf-cards.wp-block-columns {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  margin: 16px 0 0;
  align-items: stretch;
}

.rates-parent .r-pdf-cards .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  display: flex;
}

.rates-parent .r-pdf-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 24px 32px;
  background: var(--r-white);
  border: 1px solid var(--r-border);
  border-radius: var(--r-r-md);
  box-shadow: var(--r-shadow-card);
  min-height: 105px;
  text-align: center;
}

.rates-parent .r-pdf-card__title {
  margin: 0;
  font-family: var(--r-font);
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  color: var(--r-navy);
  text-align: center;
}

.rates-parent .r-pdf-card__title a {
  color: var(--r-navy);
  text-decoration: none;
}

.rates-parent .r-pdf-card__title a:hover, .rates-parent .r-pdf-card__title a:focus-visible {
  text-decoration: underline;
}

.rates-parent .r-pdf-card__link {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--r-green);
  text-align: center;
}

.rates-parent .r-pdf-card__link a {
  color: var(--r-green);
  text-decoration: none;
}

.rates-parent .r-pdf-card__link a:hover, .rates-parent .r-pdf-card__link a:focus-visible {
  color: var(--r-green-dark);
  text-decoration: underline;
}

/* --- 7. Section 2: Tiered Commercial Electric Rates (5 cards) ---------- */

.rates-parent .r-tier-grid.wp-block-columns {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  margin: 0;
  align-items: stretch;
}

.rates-parent .r-tier-grid .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  display: flex;
}

.rates-parent .r-tier-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 28px 32px;
  background: var(--r-white);
  border: 1px solid var(--r-border);
  border-radius: var(--r-r-md);
  box-shadow: var(--r-shadow-card);
  height: 100%;
}

.rates-parent .r-tier-card__code {
  margin: 0;
  font-family: var(--r-font);
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: var(--r-navy);
  text-align: center;
  letter-spacing: -0.4px;
}

.rates-parent .r-tier-card--green .r-tier-card__code {
  color: var(--r-green);
}

.rates-parent .r-tier-card--orange .r-tier-card__code {
  color: var(--r-orange);
}

.rates-parent .r-tier-card__pill {
  margin: 0 0 8px;
  text-align: center;
}

.rates-parent .r-tier-card__pill > span {
  display: inline-block;
  padding: 4px 12px;
  background: var(--r-navy);
  color: var(--r-white);
  font-family: var(--r-font);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: var(--r-r-pill);
  white-space: nowrap;
}

.rates-parent .r-tier-card--green .r-tier-card__pill > span {
  background: var(--r-green);
}

.rates-parent .r-tier-card--orange .r-tier-card__pill > span {
  background: var(--r-orange);
}

.rates-parent .r-tier-card__title {
  margin: 8px 0 0;
  font-family: var(--r-font);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  color: var(--r-navy);
  text-align: center;
}

.rates-parent .r-tier-card__body {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: var(--r-ink);
  text-align: center;
}

/* --- 8. Section 3: Key Variables Worth Watching ------------------------ */

.rates-parent .r-vars-grid.wp-block-columns {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  margin: 16px 0 0;
  align-items: stretch;
}

.rates-parent .r-vars-grid .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  display: flex;
}

.rates-parent .r-var-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 32px;
  background: var(--r-white);
  border: 1px solid var(--r-border);
  border-radius: var(--r-r-md);
  box-shadow: var(--r-shadow-card);
  height: 100%;
}

.rates-parent .r-var-card__title {
  margin: 0;
  font-family: var(--r-font);
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  color: var(--r-navy);
}

.rates-parent .r-var-card__body {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--r-ink);
}

.rates-parent .r-var-card__link {
  margin: auto 0 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--r-green);
}

.rates-parent .r-var-card__link a {
  color: var(--r-green);
  text-decoration: none;
}

.rates-parent .r-var-card__link a:hover, .rates-parent .r-var-card__link a:focus-visible {
  color: var(--r-green-dark);
  text-decoration: underline;
}

/* Additional Riders callout (blue tint) */

.rates-parent .r-riders-callout {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 16px 0 0;
  padding: 32px;
  background: var(--r-tint-blue);
  border-radius: var(--r-r-md);
}

.rates-parent .r-riders-callout__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rates-parent .r-riders-callout__title {
  margin: 0;
  font-family: var(--r-font);
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  color: var(--r-navy);
}

.rates-parent .r-riders-callout__body {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--r-ink);
}

.rates-parent .r-riders-callout__cta {
  flex: 0 0 auto;
  margin: 0;
}

/* --- 9. Section 4: Water Rates (navy bg, 2 cards) ---------------------- */

.rates-parent .r-section--water {
  text-align: center;
}

.rates-parent .r-water-award {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 16px auto 0;
  padding: 16px 28px;
  background: transparent;
  border-radius: var(--r-r-pill);
  max-width: max-content;
}

.rates-parent .r-water-award__logo {
  flex: 0 0 auto;
  margin: 0;
  width: 94px;
  height: 89px;
}

.rates-parent .r-water-award__logo img {
  width: 94px;
  height: 89px;
  display: block;
  object-fit: contain;
}

.rates-parent .r-water-award__text {
  margin: 0;
  text-align: left;
  font-family: var(--r-font);
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: var(--r-white);
}

.rates-parent .r-water-award__text strong {
  font-weight: 700;
}

.rates-parent .r-water-grid.wp-block-columns {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  margin: 32px 0 0;
  align-items: stretch;
}

.rates-parent .r-water-grid .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  display: flex;
}

.rates-parent .r-water-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 36px;
  background: var(--r-white);
  border: 1px solid var(--r-border);
  border-radius: var(--r-r-md);
  box-shadow: var(--r-shadow-card);
  height: 100%;
}

.rates-parent .r-water-card__code {
  margin: 0;
  font-family: var(--r-font);
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: var(--r-cyan);
  text-align: center;
  letter-spacing: -0.4px;
}

.rates-parent .r-water-card__title {
  margin: 0;
  font-family: var(--r-font);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  color: var(--r-navy);
  text-align: center;
}

.rates-parent .r-water-card__body {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--r-ink);
  text-align: center;
}

/* --- 10. Responsive (content reflows; never hidden) -------------------- */

@media (max-width: 1199.98px) {
  .rates-parent .r-section {
    padding: 56px 24px;
  }
  .rates-parent .r-hero {
    min-height: 520px;
  }
  .rates-parent .r-hero__title {
    font-size: 44px;
    line-height: 52px;
  }
  .rates-parent .r-hero__lede {
    font-size: 20px;
    line-height: 30px;
  }
  .rates-parent .r-section__title {
    font-size: 34px;
    line-height: 42px;
  }
  /* Tier cards: 5-up gets cramped — wrap to 3+2 */ .rates-parent .r-tier-grid.wp-block-columns {
    flex-wrap: wrap;
  }
  .rates-parent .r-tier-grid .wp-block-column {
    flex: 1 1 calc(46.333% - 16px);
  }
  .rates-parent .r-tier-card__code {
    font-size: 32px;
    line-height: 40px;
  }
  .rates-parent .r-tier-card__title {
    font-size: 20px;
    line-height: 26px;
  }
  .rates-parent .r-water-card__code {
    font-size: 32px;
    line-height: 40px;
  }
}

@media (max-width: 991.98px) {
  .rates-parent .r-section {
    padding: 48px 20px;
  }
  .rates-parent .r-hero {
    min-height: 480px;
  }
  .rates-parent .r-hero .wp-block-cover__inner-container {
    padding: 0 20px;
  }
  .rates-parent .r-hero__title {
    font-size: 36px;
    line-height: 44px;
  }
  .rates-parent .r-hero__lede {
    font-size: 18px;
    line-height: 28px;
  }
  .rates-parent .r-section__title {
    font-size: 30px;
    line-height: 38px;
  }
  /* PDF cards: 3 → 1 */ .rates-parent .r-pdf-cards.wp-block-columns {
    flex-direction: column;
    gap: 16px;
  }
  /* Tier cards: 3+2 → 2+2+1 */ .rates-parent .r-tier-grid .wp-block-column {
    flex: 1 1 calc(50% - 8px);
  }
  /* Variables grid: 2 → 1 */ .rates-parent .r-vars-grid.wp-block-columns {
    flex-direction: column;
    gap: 20px;
  }
  /* Riders callout: stack text + button */ .rates-parent .r-riders-callout {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  /* Water grid: 2 → 1 */ .rates-parent .r-water-grid.wp-block-columns {
/*     flex-direction: column; */
    gap: 20px;
  }
}

@media (max-width: 639.98px) {
  .rates-parent .r-section {
    padding: 40px 16px;
  }
  .rates-parent .r-hero {
    min-height: 440px;
  }
  .rates-parent .r-hero .wp-block-cover__inner-container {
    padding: 0 16px;
  }
  .rates-parent .r-breadcrumb__text {
    font-size: 14px;
    line-height: 20px;
  }
  .rates-parent .r-hero__title {
    font-size: 28px;
    line-height: 34px;
    padding-top: 16px;
  }
  .rates-parent .r-hero__lede {
    font-size: 16px;
    line-height: 24px;
  }
  .rates-parent .r-section__title {
    font-size: 26px;
    line-height: 32px;
  }
  .rates-parent .r-section__intro, .rates-parent .r-pdf-card__title, .rates-parent .r-tier-card__body, .rates-parent .r-var-card__body, .rates-parent .r-riders-callout__body, .rates-parent .r-water-card__body {
    font-size: 16px;
    line-height: 24px;
  }
  .rates-parent .r-pdf-card, .rates-parent .r-tier-card, .rates-parent .r-var-card, .rates-parent .r-water-card {
    padding: 24px 20px;
  }
  .rates-parent .r-riders-callout {
    padding: 24px 20px;
  }
  /* Tier cards: stack 1 per row */ .rates-parent .r-tier-grid .wp-block-column {
    flex: 1 1 100%;
  }
  .rates-parent .r-tier-card__code, .rates-parent .r-water-card__code {
    font-size: 28px;
    line-height: 36px;
  }
  .rates-parent .r-tier-card__title, .rates-parent .r-var-card__title, .rates-parent .r-riders-callout__title, .rates-parent .r-water-card__title {
    font-size: 20px;
    line-height: 26px;
  }
  .rates-parent .r-tier-card__pill > span {
    white-space: normal;
  }
  /* Buttons full-width */ .rates-parent .wp-block-buttons {
    width: 100%;
  }
  .rates-parent .wp-block-button {
    width: 100%;
  }
  .rates-parent .wp-block-button__link {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
  }
  /* Award pill stacks */ .rates-parent .r-water-award {
    flex-direction: column;
    text-align: center;
    padding: 16px 20px;
  }
  .rates-parent .r-water-award__text {
    text-align: center;
  }
  .rates-parent .r-water-award__logo, .rates-parent .r-water-award__logo img {
    width: 72px;
    height: 68px;
  }
}

/* --- 11. Reduced motion / print --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .rates-parent .wp-block-button__link {
    transition: none !important;
  }
  .rates-parent .wp-block-button__link:hover {
    transform: none !important;
  }
}

@media print {
  .rates-parent {
    background: #fff;
    color: #000;
  }
  .rates-parent .r-section--alt, .rates-parent .r-section--navy {
    background: transparent !important;
    color: #000 !important;
  }
  .rates-parent .r-section__title--on-navy, .rates-parent .r-section__intro--on-navy, .rates-parent .r-water-award__text, .rates-parent .r-hero__title, .rates-parent .r-hero__lede, .rates-parent .r-breadcrumb__text, .rates-parent .r-breadcrumb__text a {
    color: #000 !important;
  }
  .rates-parent .r-hero img {
    display: none;
  }
  .rates-parent .wp-block-button__link {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000 !important;
  }
}

/* ============================================================================
   BPU — Prospective Suppliers page styles
   ----------------------------------------------------------------------------
   THIS IS A SNIPPET, NOT A STANDALONE STYLESHEET.
   Paste the entire block below into your shared `style.css` file.

   Scope: every selector is prefixed with `.vendors-supplier-parent` so it
   cannot leak to any other page on the site.

   Source: Figma node 10763:59164
   Live URL preserved: https://www.bpu.com/ForBusiness/VendorsSuppliers/ProspectiveSuppliers.aspx
   ============================================================================ */

/* --- 1. Page wrapper: tokens + base reset ------------------------------- */

.vendors-supplier-parent {
  --vsp-navy: #002b7f;
  --vsp-navy-deep: #003971;
  --vsp-green: #7ca650;
  --vsp-green-light: #b0d57b;
  --vsp-green-dark: #376319;
  --vsp-orange: #ef800a;
  --vsp-blue: #01a2e5;
  --vsp-ink: #1d1d1d;
  --vsp-grey: #999999;
  --vsp-grey-mid: #939598;
  --vsp-border: #d9dbe0;
  --vsp-surface-alt: #f7f7f7;
  --vsp-white: #ffffff;
  --vsp-tint-blue: #ebf0f8;
  --vsp-tint-cream: #fef8eb;
  --vsp-tint-green: #f1ffcd;
  --vsp-tint-cyan: #e6f6fc;
  --vsp-container: 1480px;
  --vsp-gutter: 24px;
  --vsp-section-py: 60px;
  --vsp-r-sm: 4px;
  --vsp-r-md: 8px;
  --vsp-r-lg: 12px;
  --vsp-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.04);
  --vsp-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
              Roboto, Helvetica, Arial, sans-serif;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--vsp-ink);
  font-family: var(--vsp-font);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  background: var(--vsp-white);
  box-sizing: border-box;
}

.vendors-supplier-parent *, .vendors-supplier-parent *::before, .vendors-supplier-parent *::after {
  box-sizing: border-box;
}

.vendors-supplier-parent a {
  color: var(--vsp-navy-deep);
}

.vendors-supplier-parent a:hover {
  color: var(--vsp-navy);
}

.vendors-supplier-parent :focus-visible {
  outline: 3px solid var(--vsp-green);
  outline-offset: 3px;
  border-radius: var(--vsp-r-sm);
}

.vendors-supplier-parent img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

.vendors-supplier-parent .vsp-hero {
  position: relative;
  width: 100%;
  min-height: 574px;
  padding: 0;
  margin: 0;
}

.vendors-supplier-parent .vsp-hero .wp-block-cover__inner-container {
  width: 100%;
  max-width: var(--vsp-container);
  margin: 0 auto;
  padding: 0 var(--vsp-gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.vendors-supplier-parent .vsp-breadcrumb {
  margin: 0;
}

.vendors-supplier-parent .vsp-breadcrumb__text {
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: var(--vsp-white);
}

.vendors-supplier-parent .vsp-breadcrumb__text a {
  color: var(--vsp-white);
  text-decoration: none;
}

.vendors-supplier-parent .vsp-breadcrumb__text a:hover, .vendors-supplier-parent .vsp-breadcrumb__text a:focus-visible {
  text-decoration: underline;
}

.vendors-supplier-parent .vsp-hero__title {
  margin: 0;
  padding: 24px 0 0;
  font-family: var(--vsp-font);
  font-size: 56px;
  line-height: 64px;
  font-weight: 700;
  color: var(--vsp-white);
  letter-spacing: -0.5px;
}

.vendors-supplier-parent .vsp-hero__lede {
  margin: 0;
  padding: 8px 0 0;
  max-width: 1480px;
  font-size: 22px;
  line-height: 32px;
  font-weight: 600;
  color: var(--vsp-white);
}

/* --- 3. Section frame: full-bleed bg, constrained 1480px inner ---------- */

.vendors-supplier-parent .vsp-section {
  width: 100%;
  margin: 0;
  padding: var(--vsp-section-py) var(--vsp-gutter);
  background: var(--vsp-white);
}

.vendors-supplier-parent .vsp-section--alt {
  background: var(--vsp-surface-alt);
}

.vendors-supplier-parent .vsp-section > * {
  width: 100%;
  max-width: var(--vsp-container);
  margin-left: auto;
  margin-right: auto;
}

/* --- 4. Section header (eyebrow + H2 + intro) --------------------------- */

.vendors-supplier-parent .vsp-section__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
}

.vendors-supplier-parent .vsp-section__header--center {
  align-items: center;
  text-align: center;
}

.vendors-supplier-parent .vsp-section__title {
  margin: 0;
  font-family: var(--vsp-font);
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: var(--vsp-navy);
  letter-spacing: -0.4px;
}

.vendors-supplier-parent .vsp-section__title--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.vendors-supplier-parent .vsp-section__intro {
  margin: 0;
  max-width: 1330px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--vsp-ink);
}

.vendors-supplier-parent .vsp-section__intro--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* --- 5. Eyebrows -------------------------------------------------------- */

.vendors-supplier-parent .vsp-eyebrow {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.vendors-supplier-parent .vsp-eyebrow--green {
  color: var(--vsp-green);
}

.vendors-supplier-parent .vsp-eyebrow--orange {
  color: var(--vsp-orange);
}

.vendors-supplier-parent .vsp-eyebrow--navy {
  color: var(--vsp-navy);
}

.vendors-supplier-parent .vsp-eyebrow--center {
  text-align: center;
}

/* --- 6. Buttons (wp:button — real anchors) ------------------------------ */

.vendors-supplier-parent .wp-block-buttons {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.vendors-supplier-parent .wp-block-button {
  margin: 0;
}

.vendors-supplier-parent .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: var(--vsp-green);
  color: var(--vsp-white);
  font-family: var(--vsp-font);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--vsp-r-sm);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.vendors-supplier-parent .wp-block-button__link:hover, .vendors-supplier-parent .wp-block-button__link:focus-visible {
  background: #6a9244;
  color: var(--vsp-white);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Navy variant */

.vendors-supplier-parent .is-style-vsp-navy .wp-block-button__link {
  background: var(--vsp-navy);
}

.vendors-supplier-parent .is-style-vsp-navy .wp-block-button__link:hover, .vendors-supplier-parent .is-style-vsp-navy .wp-block-button__link:focus-visible {
  background: var(--vsp-navy-deep);
  color: var(--vsp-white);
}

/* Outline variant (used on green-gradient assistance banner) */

.vendors-supplier-parent .is-style-vsp-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid var(--vsp-white);
  color: var(--vsp-white);
}

.vendors-supplier-parent .is-style-vsp-outline .wp-block-button__link:hover, .vendors-supplier-parent .is-style-vsp-outline .wp-block-button__link:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--vsp-white);
  color: var(--vsp-white);
}

/* --- 7. Section 1: How to Become a Supplier (2 cards) ------------------- */

.vendors-supplier-parent .vsp-section--how .vsp-section__header {
  margin-bottom: 40px;
}

.vendors-supplier-parent .vsp-how__grid.wp-block-columns {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  margin: 0;
  align-items: stretch;
}

.vendors-supplier-parent .vsp-how__grid .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  display: flex;
}

.vendors-supplier-parent .vsp-how__grid .vsp-card {
  width: 100%;
}

/* Card base (centered variant for this section) */

.vendors-supplier-parent .vsp-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: var(--vsp-white);
  border: 1px solid var(--vsp-border);
  border-radius: var(--vsp-r-md);
  box-shadow: var(--vsp-shadow-card);
  height: 100%;
}

.vendors-supplier-parent .vsp-card--center {
  align-items: center;
  text-align: center;
}

.vendors-supplier-parent .vsp-card__title {
  margin: 0;
  font-family: var(--vsp-font);
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  color: var(--vsp-navy);
  letter-spacing: -0.3px;
}

.vendors-supplier-parent .vsp-card--center .vsp-card__title {
  text-align: center;
}

.vendors-supplier-parent .vsp-card__body {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--vsp-ink);
}

.vendors-supplier-parent .vsp-card--center .vsp-card__body {
  text-align: center;
}

.vendors-supplier-parent .vsp-card__cta {
  margin-top: auto;
  padding-top: 8px;
}

/* --- 8. Section 2: Bid Notification (gray, icon + centered + 2 btns) --- */

.vendors-supplier-parent .vsp-section--bid {
  display: flex;
  flex-direction: column;
}

.vendors-supplier-parent .vsp-bid__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  max-width: var(--vsp-container);
}

.vendors-supplier-parent .vsp-bid__icon {
  margin: 0 0 8px;
  width: 80px;
  height: 80px;
  background: var(--vsp-tint-cream);
  border-radius: var(--vsp-r-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vendors-supplier-parent .vsp-bid__icon img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.vendors-supplier-parent .vsp-bid__cta.wp-block-buttons {
  margin-top: 24px;
  justify-content: center;
  align-items: stretch;
}

/* --- 9. Section 3: What We Procure (5 cards in 3+2 grid) --------------- */

.vendors-supplier-parent .vsp-section--procure .vsp-section__header {
  margin-bottom: 40px;
}

.vendors-supplier-parent .vsp-procure__row.wp-block-columns {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  margin: 0 auto;
  align-items: stretch;
}

.vendors-supplier-parent .vsp-procure__row--3 {
  max-width: var(--vsp-container);
  margin-bottom: 24px;
}

.vendors-supplier-parent .vsp-procure__row--2 {
  max-width: calc((var(--vsp-container) - 48px) * 2 / 3);
}

.vendors-supplier-parent .vsp-procure__row .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  display: flex;
}

.vendors-supplier-parent .vsp-procure-card {
  width: 100%;
/*   display: flex; */
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 32px;
  background: var(--vsp-surface-alt);
  border: 1px solid var(--vsp-white);
  border-radius: var(--vsp-r-md);
  height: 100%;
}
ul.wp-block-list.vsp-procure-card__list {
    padding-top: 20px;
}
.vendors-supplier-parent .vsp-procure-card__icon {
  margin: 0;
  width: 100px;
  height: 100px;
  border-radius: var(--vsp-r-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vendors-supplier-parent .vsp-procure-card__icon--blue {
  background: var(--vsp-tint-blue);
}

.vendors-supplier-parent .vsp-procure-card__icon--cream {
  background: var(--vsp-tint-cream);
}

.vendors-supplier-parent .vsp-procure-card__icon--green {
  background: var(--vsp-tint-green);
}

.vendors-supplier-parent .vsp-procure-card__icon--cyan {
  background: var(--vsp-tint-cyan);
}

.vendors-supplier-parent .vsp-procure-card__icon img {
/*   width: 56px;
  height: 56px; */
  display: block;
  object-fit: contain;
}

.vendors-supplier-parent .vsp-procure-card__title {
  margin: 0;
  font-family: var(--vsp-font);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  color: var(--vsp-navy);
  text-align: center;
}

.vendors-supplier-parent .vsp-procure-card__list {
  margin: 0;
  padding-left: 27px;
  list-style: disc;
  text-align: left;
  color: var(--vsp-ink);
}

.vendors-supplier-parent .vsp-procure-card__list li {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

/* --- 10. Section 4: Contact Purchasing (magazine row + email card) ----- */

.vendors-supplier-parent .vsp-contact__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 40px;
  max-width: var(--vsp-container);
}

.vendors-supplier-parent .vsp-contact__media {
  flex: 0 0 auto;
  width: 700px;
  max-width: 100%;
  margin: 0;
}

.vendors-supplier-parent .vsp-contact__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 700 / 440;
  object-fit: cover;
  border-radius: var(--vsp-r-md);
}

.vendors-supplier-parent .vsp-contact__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.vendors-supplier-parent .vsp-email-card {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  padding: 20px 24px;
  background: var(--vsp-white);
  border: 1px solid var(--vsp-border);
  border-radius: var(--vsp-r-md);
  box-shadow: var(--vsp-shadow-card);
  align-self: flex-start;
}

.vendors-supplier-parent .vsp-email-card__icon {
  flex: 0 0 auto;
  margin: 0;
  width: 56px;
  height: 56px;
}

.vendors-supplier-parent .vsp-email-card__icon img {
  width: 56px;
  height: 56px;
  display: block;
  object-fit: contain;
}

.vendors-supplier-parent .vsp-email-card__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vendors-supplier-parent .vsp-email-card__label {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vsp-grey-mid);
}

.vendors-supplier-parent .vsp-email-card__address {
  margin: 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  color: var(--vsp-navy);
}

.vendors-supplier-parent .vsp-email-card__address a {
  color: var(--vsp-navy);
  text-decoration: none;
}

.vendors-supplier-parent .vsp-email-card__address a:hover, .vendors-supplier-parent .vsp-email-card__address a:focus-visible {
  text-decoration: underline;
}

/* --- 11. Section 5: Documents & Resources (3 download rows) ------------ */

.vendors-supplier-parent .vsp-section--docs .vsp-section__header {
  margin-bottom: 32px;
}

.vendors-supplier-parent .vsp-docs__list {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.vendors-supplier-parent .vsp-doc {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  background: var(--vsp-white);
  border: 1px solid var(--vsp-border);
  border-radius: var(--vsp-r-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vendors-supplier-parent .vsp-doc:hover, .vendors-supplier-parent .vsp-doc:focus-within {
  border-color: var(--vsp-green);
  box-shadow: var(--vsp-shadow-card);
}

.vendors-supplier-parent .vsp-doc__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vendors-supplier-parent .vsp-doc__title {
  margin: 0;
  font-family: var(--vsp-font);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--vsp-navy);
}

.vendors-supplier-parent .vsp-doc__title a {
  color: var(--vsp-navy);
  text-decoration: none;
}

.vendors-supplier-parent .vsp-doc__title a:hover, .vendors-supplier-parent .vsp-doc__title a:focus-visible {
  text-decoration: underline;
}

.vendors-supplier-parent .vsp-doc__desc {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: var(--vsp-ink);
}

.vendors-supplier-parent .vsp-doc__link {
  flex: 0 0 auto;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--vsp-green);
  white-space: nowrap;
}

.vendors-supplier-parent .vsp-doc__link a {
  color: var(--vsp-green);
  text-decoration: none;
}

.vendors-supplier-parent .vsp-doc__link a:hover, .vendors-supplier-parent .vsp-doc__link a:focus-visible {
  color: var(--vsp-green-dark);
  text-decoration: underline;
}

/* --- 12. Section 6: Need Assistance (gradient banner) ------------------ */

.vendors-supplier-parent .vsp-section--assist {
  background: linear-gradient(
    -50.44deg,
    var(--vsp-green-light) 0%,
    var(--vsp-green-dark) 100%
  );
  color: var(--vsp-white);
  text-align: center;
}

.vendors-supplier-parent .vsp-assist__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 860px;
  margin: 0 auto;
}

.vendors-supplier-parent .vsp-assist__icons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 56px;
  margin: 0 0 8px;
}

.vendors-supplier-parent .vsp-assist__icon {
  margin: 0;
  width: 48px;
  height: 48px;
}

.vendors-supplier-parent .vsp-assist__icon img {
  width: 48px;
  height: 48px;
  display: block;
  object-fit: contain;
}

.vendors-supplier-parent .vsp-assist__title {
  margin: 8px 0 0;
  font-family: var(--vsp-font);
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  color: var(--vsp-white);
  letter-spacing: -0.4px;
}

.vendors-supplier-parent .vsp-assist__text {
  margin: 0;
  max-width: 860px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--vsp-white);
}

.vendors-supplier-parent .vsp-assist__cta {
  margin-top: 24px;
}

/* --- 13. Responsive (content reflows; never hidden) -------------------- */

@media (max-width: 1199.98px) {
  .vendors-supplier-parent .vsp-section {
    padding: 56px 24px;
  }
  .vendors-supplier-parent .vsp-hero {
    min-height: 520px;
  }
  .vendors-supplier-parent .vsp-hero__title {
    font-size: 44px;
    line-height: 52px;
  }
  .vendors-supplier-parent .vsp-hero__lede {
    font-size: 20px;
    line-height: 30px;
  }
  .vendors-supplier-parent .vsp-section__title {
    font-size: 34px;
    line-height: 42px;
  }
  .vendors-supplier-parent .vsp-card__title {
    font-size: 22px;
    line-height: 28px;
  }
  .vendors-supplier-parent .vsp-procure-card__title {
    font-size: 20px;
    line-height: 26px;
  }
  .vendors-supplier-parent .vsp-contact__row {
    gap: 32px;
  }
  .vendors-supplier-parent .vsp-contact__media {
    width: 540px;
  }
  .vendors-supplier-parent .vsp-procure__row--2 {
    max-width: calc((var(--vsp-container) - 48px) * 0.75);
  }
}

@media (max-width: 991.98px) {
  .vendors-supplier-parent .vsp-section {
    padding: 48px 20px;
  }
  .vendors-supplier-parent .vsp-hero {
    min-height: 480px;
  }
  .vendors-supplier-parent .vsp-hero .wp-block-cover__inner-container {
    padding: 0 20px;
  }
  .vendors-supplier-parent .vsp-hero__title {
    font-size: 36px;
    line-height: 44px;
  }
  .vendors-supplier-parent .vsp-hero__lede {
    font-size: 18px;
    line-height: 28px;
  }
  .vendors-supplier-parent .vsp-section__title, .vendors-supplier-parent .vsp-assist__title {
    font-size: 30px;
    line-height: 38px;
  }
  /* How: 2 cards stack */ .vendors-supplier-parent .vsp-how__grid.wp-block-columns {
    flex-direction: column;
    gap: 20px;
  }
  /* Bid: stack buttons in column for breathing room */ .vendors-supplier-parent .vsp-bid__cta.wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 480px;
  }
  /* Procure: rows 3 and 2 both stack vertically */ .vendors-supplier-parent .vsp-procure__row.wp-block-columns {
    flex-direction: column;
    gap: 20px;
    max-width: 720px;
  }
  /* Contact: magazine row stacks */ .vendors-supplier-parent .vsp-contact__row {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .vendors-supplier-parent .vsp-contact__media {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
  }
  /* Email card stays inline but allow wrap */ .vendors-supplier-parent .vsp-email-card {
    align-self: stretch;
  }
  .vendors-supplier-parent .vsp-email-card__address {
    font-size: 20px;
    line-height: 26px;
  }
  /* Docs row wraps */ .vendors-supplier-parent .vsp-doc {
    flex-wrap: wrap;
    gap: 12px;
  }
  .vendors-supplier-parent .vsp-doc__link {
    width: 100%;
  }
}

@media (max-width: 639.98px) {
  .vendors-supplier-parent .vsp-section {
    padding: 40px 16px;
  }
  .vendors-supplier-parent .vsp-hero {
    min-height: 440px;
  }
  .vendors-supplier-parent .vsp-hero .wp-block-cover__inner-container {
    padding: 0 16px;
  }
  .vendors-supplier-parent .vsp-breadcrumb__text {
    font-size: 14px;
    line-height: 20px;
  }
  .vendors-supplier-parent .vsp-hero__title {
    font-size: 28px;
    line-height: 34px;
    padding-top: 16px;
  }
  .vendors-supplier-parent .vsp-hero__lede {
    font-size: 16px;
    line-height: 24px;
  }
  .vendors-supplier-parent .vsp-section__title, .vendors-supplier-parent .vsp-assist__title {
    font-size: 26px;
    line-height: 32px;
  }
  .vendors-supplier-parent .vsp-section__intro, .vendors-supplier-parent .vsp-card__body, .vendors-supplier-parent .vsp-assist__text {
    font-size: 16px;
    line-height: 24px;
  }
  .vendors-supplier-parent .vsp-card, .vendors-supplier-parent .vsp-procure-card {
    padding: 24px 20px;
  }
  .vendors-supplier-parent .vsp-card__title {
    font-size: 22px;
    line-height: 28px;
  }
  .vendors-supplier-parent .vsp-procure-card__title {
    font-size: 18px;
    line-height: 24px;
	  margin-top: 20px;
  }
  .vendors-supplier-parent .vsp-procure-card__icon {
    width: 80px;
    height: 80px;
  }
  .vendors-supplier-parent .vsp-procure-card__icon img {
/*     width: 44px;
    height: 44px; */
	  
  }
  .vendors-supplier-parent .vsp-email-card {
    padding: 16px 20px;
  }
  .vendors-supplier-parent .vsp-email-card__address {
    font-size: 18px;
    line-height: 24px;
    word-break: break-word;
  }
  /* Buttons full-width on mobile */ .vendors-supplier-parent .wp-block-buttons {
    width: 100%;
  }
  .vendors-supplier-parent .wp-block-button {
    width: 100%;
  }
  .vendors-supplier-parent .wp-block-button__link {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
  }
  .vendors-supplier-parent .vsp-assist__icons {
    gap: 24px;
  }
  .vendors-supplier-parent .vsp-assist__icon, .vendors-supplier-parent .vsp-assist__icon img {
    width: 40px;
    height: 40px;
  }
}

/* --- 14. Reduced motion / print ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vendors-supplier-parent .wp-block-button__link, .vendors-supplier-parent .vsp-doc {
    transition: none !important;
  }
  .vendors-supplier-parent .wp-block-button__link:hover {
    transform: none !important;
  }
}

@media print {
  .vendors-supplier-parent {
    background: #fff;
    color: #000;
  }
  .vendors-supplier-parent .vsp-section--alt, .vendors-supplier-parent .vsp-section--assist {
    background: transparent !important;
    color: #000 !important;
  }
  .vendors-supplier-parent .vsp-hero img {
    display: none;
  }
  .vendors-supplier-parent .vsp-hero__title, .vendors-supplier-parent .vsp-hero__lede, .vendors-supplier-parent .vsp-breadcrumb__text, .vendors-supplier-parent .vsp-breadcrumb__text a, .vendors-supplier-parent .vsp-assist__title, .vendors-supplier-parent .vsp-assist__text {
    color: #000 !important;
  }
  .vendors-supplier-parent .wp-block-button__link {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000 !important;
  }
}

.global-hero-banner__inner {
  width:100%;
  max-width:var(--ewrh-container);
  margin-inline:auto;
  padding-top:330px !important;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}

.ewrh-section.ewrh-archive {
  background: #F7F7F7;
}

.global-need-assignment.wp-block-group {
  margin: 0px;
}

.global-hero-banner__inner {
  width:100%;
  max-width:var(--ewrh-container);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}

.global-hero-banner__breadcrumb {
  font-size:18px;
  line-height:22px;
  font-weight:400;
  color:var(--ewrh-white);
  margin:0 0 40px;
}

.global-need-assignment__text {
  font-size:18px;
  line-height:28px;
  font-weight:400;
  color:var(--ewrh-white);
  margin:0 0 28px;
}

.new-serivces-parent .bpu-container,.parent-transer-serivces-inner .bpu-container {
  width:100%;
  max-width:1640px;
  margin-inline:auto;
  padding-inline:0;
}

.new-serivces-parent .bpu-card,.parent-transer-serivces-inner .bpu-card {
  min-height:auto !important;
  background:var(--ewrh-white);
  border:1px solid var(--ewrh-line);
  border-radius:var(--bpu-rcard);
  padding:0 28px 24px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}

.bpu-fee {
  margin: 0px !important;
}

.wp-block-group.bpu-callout-body-wrap.is-content-justification-left.is-layout-constrained.wp-container-core-group-is-layout-12dd3699.wp-block-group-is-layout-constrained {
  margin-top: 0;
}

.parent-billing-rate .pbr-hero .wp-block-cover__inner-container {
  width:100%;
  padding-top: 200px;
}

@media (min-width: 376px) and (max-width: 576px) {
  .padtext {
    padding-right: 0px !important;
    padding-left: 20px;
    padding-bottom: 30px;
  }
  .forpad {
    padding-left: 20px !important;
    padding-top: 30px;
  }
  .imgprotect img {
    margin-left: 0px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .padtext {
    padding-right: 0px !important;
    padding-left: 20px;
    padding-bottom: 30px;
  }
  .forpad {
  
    padding-top: 30px;
  }
  .imgprotect img {
    margin-left: 0px !important;
  }
}

.imgprotect img {
  margin-left: 200px;
}

.mmarzero {
  margin: 0;
}

.padtext {
  padding-right: 150px;
  margin: 0;
}

.forpad {
  padding-left: 150px;
}

.maxwidthfor4col {
  width: 100% !important;
  max-width: 1480px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: block !important;
}

.eletric-water-rate-parent,.global-hero-banner,.global-need-assignment {
  --ewrh-blue:#003971;
  --ewrh-heading:#002b7f;
  --ewrh-body:#1d1d1d;
  --ewrh-muted:#999999;
  --ewrh-line:#d9dbe0;
  --ewrh-green:#7ca650;
  --ewrh-green-1:#b0d57b;
  --ewrh-green-2:#376319;
  --ewrh-white:#ffffff;
  --ewrh-container:1480px;
  --ewrh-gutter:clamp(20px,5vw,40px);
  --ewrh-font:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.eletric-water-rate-parent {
  font-family:var(--ewrh-font);
  color:var(--ewrh-body);
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

.eletric-water-rate-parent .ewrh-section {
  width:100%;
/*   background:var(--ewrh-white); */
  padding-block:clamp(36px,6vw,60px);
  padding-inline:0;
}

.eletric-water-rate-parent .ewrh-container {
  width:100%;
  max-width:var(--ewrh-container);
  margin-inline:auto;
  padding-inline:var(--ewrh-gutter);
}

.eletric-water-rate-parent .ewrh-lead {
  font-size:20px;
  line-height:30px;
  font-weight:700;
  color:var(--ewrh-heading);
  margin:0 0 32px;
}

.eletric-water-rate-parent .ewrh-about p {
  font-size:18px;
  line-height:28px;
  font-weight:400;
  color:var(--ewrh-body);
  margin:0 0 20px;
  max-width:none;
}

.eletric-water-rate-parent .ewrh-about p:last-child {
  margin-bottom:0;
}

.eletric-water-rate-parent .ewrh-archive__title {
  font-size:clamp(24px,3vw,32px);
  line-height:1.3;
  font-weight:700;
  color:var(--ewrh-heading);
  margin:0 0 28px;
}

.eletric-water-rate-parent .ewrh-group__label {
  font-size:20px;
  line-height:28px;
  font-weight:700;
  color:var(--ewrh-heading);
  margin:32px 0 16px;
}

.eletric-water-rate-parent .ewrh-links.wp-block-buttons {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0;
}

.eletric-water-rate-parent .ewrh-links .wp-block-button,.eletric-water-rate-parent .ewrh-link-card {
  width:100%;
  margin:0;
}

.eletric-water-rate-parent .ewrh-link-card .wp-block-button__link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  min-height:50px;
  padding:12px 16px;
  background:var(--ewrh-white);
  border:1px solid var(--ewrh-line);
  border-radius:6px;
  color:var(--ewrh-body);
  font-size:16px;
  line-height:20px;
  font-weight:400;
  text-align:left;
  text-decoration:none;
  box-shadow:none;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}

.eletric-water-rate-parent .ewrh-link-card .wp-block-button__link::after {
  content:"\2192";
  flex:0 0 auto;
  color:var(--ewrh-green);
  font-weight:700;
  font-size:14px;
  transition:transform .15s ease;
}

.eletric-water-rate-parent .ewrh-link-card .wp-block-button__link:hover {
  border-color:var(--ewrh-green);
  box-shadow:0 4px 14px rgba(0,57,113,.10);
}

.eletric-water-rate-parent .ewrh-link-card .wp-block-button__link:hover::after {
  transform:translateX(4px);
}

.eletric-water-rate-parent .ewrh-link-card .wp-block-button__link:focus-visible {
  outline:3px solid var(--ewrh-blue);
  outline-offset:2px;
  border-color:var(--ewrh-blue);
}

.eletric-water-rate-parent .ewrh-videos {
  gap:24px;
  margin:0;
}

.eletric-water-rate-parent .ewrh-video__label {
  font-size:18px;
  line-height:24px;
  font-weight:700;
  color:var(--ewrh-body);
  margin:0 0 12px;
}

.eletric-water-rate-parent .ewrh-videos .wp-block-embed__wrapper {
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
}

.global-hero-banner.wp-block-cover {
  min-height:574px;
  width:100%;
  align-items:stretch;
  justify-content:flex-end;
  padding:0;
  color:var(--ewrh-white);
  font-family:var(--ewrh-font);
}

.global-hero-banner .wp-block-cover__background {
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.65) 100%) !important;
  opacity:1 !important;
}

.global-hero-banner .wp-block-cover__inner-container {
  width:100%;
}

.global-hero-banner__inner {
  width:100%;
  max-width:var(--ewrh-container);
  margin-inline:auto;
  padding-inline:var(--ewrh-gutter);
  padding-block:clamp(40px,8vw,112px) clamp(40px,9vw,112px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}

.global-hero-banner__breadcrumb {
  font-size:18px;
  line-height:22px;
  font-weight:400;
  color:var(--ewrh-white);
  margin:0 0 20px;
}

.global-hero-banner__breadcrumb a {
  color:var(--ewrh-white);
  text-decoration:none;
}

.global-hero-banner__breadcrumb a:hover {
  text-decoration:underline;
}

.global-hero-banner__breadcrumb a:focus-visible {
  outline:2px solid var(--ewrh-white);
  outline-offset:2px;
}

.global-hero-banner__breadcrumb .ewrh-bc-sep {
  margin:0 8px;
  opacity:.8;
}

.global-hero-banner__title {
  font-size:clamp(32px,4.6vw,56px);
  line-height:1.14;
  font-weight:700;
  color:var(--ewrh-white);
  margin:0 0 8px;
}

.global-hero-banner__desc {
  font-size:clamp(18px,1.6vw,22px);
  line-height:32px;
  font-weight:600;
  color:var(--ewrh-white);
  margin:0;
  max-width:var(--ewrh-container);
}

.global-need-assignment.wp-block-group {
  width:100%;
  font-family:var(--ewrh-font);
  background:linear-gradient(-50.44deg,var(--ewrh-green-1) 0%,var(--ewrh-green-2) 100%);
  padding-block:clamp(40px,6vw,60px);
  padding-inline:0;
}

.global-need-assignment__inner.wp-block-columns {
  width:100%;
  max-width:var(--ewrh-container);
  margin-inline:auto;
  padding-inline:var(--ewrh-gutter);
  gap:clamp(24px,4vw,56px);
  align-items:center;
}

.global-need-assignment__media img {
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}

.global-need-assignment__title {
  font-size:clamp(28px,3.4vw,40px);
  line-height:1.1;
  font-weight:700;
  color:var(--ewrh-white);
  margin:0 0 12px;
}

.global-need-assignment__text {
  font-size:18px;
  line-height:28px;
  font-weight:400;
  color:var(--ewrh-white);
  margin:0 0 28px;
  max-width:640px;
}

.global-need-assignment__btn .wp-block-button__link,.global-need-assignment .wp-block-button__link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 60px;
  border:2px solid var(--ewrh-white);
  border-radius:4px;
  background:transparent;
  color:var(--ewrh-white);
  font-size:18px;
  line-height:24px;
  font-weight:700;
  text-decoration:none;
  transition:background-color .15s ease,color .15s ease;
}

.global-need-assignment .wp-block-button__link:hover {
  background:var(--ewrh-white);
  color:var(--ewrh-green-2);
}

.global-need-assignment .wp-block-button__link:focus-visible {
  outline:3px solid var(--ewrh-white);
  outline-offset:3px;
}

@media (max-width:1024px) {
  .eletric-water-rate-parent .ewrh-links.wp-block-buttons {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:781px) {
  .eletric-water-rate-parent .ewrh-links.wp-block-buttons {
    grid-template-columns:1fr;
  }
  .global-need-assignment__inner.wp-block-columns {
    align-items:flex-start;
  }
  .global-need-assignment__text {
    max-width:none;
  }
  .eletric-water-rate-parent .ewrh-videos {
    gap:16px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .eletric-water-rate-parent .ewrh-link-card .wp-block-button__link,.eletric-water-rate-parent .ewrh-link-card .wp-block-button__link::after,.global-need-assignment .wp-block-button__link {
    transition:none;
  }
}

.new-serivces-parent,.parent-transer-serivces-inner {
  --ewrh-blue:#003971;
  --ewrh-heading:#002b7f;
  --ewrh-body:#1d1d1d;
  --ewrh-muted:#999999;
  --ewrh-line:#d9dbe0;
  --ewrh-green:#7ca650;
  --ewrh-green-1:#b0d57b;
  --ewrh-green-2:#376319;
  --ewrh-white:#ffffff;
  --ewrh-container:1480px;
  --ewrh-gutter:clamp(20px,5vw,40px);
  --bpu-panel:#f7f7f7;
  --bpu-darkblue:#002b7f;
  --bpu-rcard:8px;
  --bpu-rpanel:20px;
  --bpu-rcallout:12px;
  --ewrh-font:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-family:var(--ewrh-font);
  color:var(--ewrh-body);
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

.new-serivces-parent .bpu-section,.parent-transer-serivces-inner .bpu-section {
  width:100%;
  padding-block:clamp(40px,6vw,60px);
  padding-inline:0;
}

.new-serivces-parent .bpu-section--white,.parent-transer-serivces-inner .bpu-section--white {
  background:var(--ewrh-white);
}

.new-serivces-parent .bpu-section--dark,.parent-transer-serivces-inner .bpu-section--dark {
  background:var(--bpu-darkblue);
  color:var(--ewrh-white);
}

.new-serivces-parent .bpu-container,.parent-transer-serivces-inner .bpu-container {
  width:100%;
  max-width:var(--ewrh-container);
  margin-inline:auto;
  padding-inline:var(--ewrh-gutter);
}

.new-serivces-parent .bpu-sec-head,.parent-transer-serivces-inner .bpu-sec-head {
  text-align:center;
  max-width:1000px;
  margin-inline:auto;
  margin-bottom:clamp(24px,4vw,40px);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.new-serivces-parent .bpu-sec-title,.parent-transer-serivces-inner .bpu-sec-title {
  font-size:clamp(32px,4vw,48px);
  line-height:1.16;
  font-weight:700;
  color:var(--ewrh-heading);
  margin:0;
}

.new-serivces-parent .bpu-section--dark .bpu-sec-title,.parent-transer-serivces-inner .bpu-section--dark .bpu-sec-title {
  color:var(--ewrh-white);
}

.new-serivces-parent .bpu-sec-intro,.parent-transer-serivces-inner .bpu-sec-intro {
  font-size:18px;
  line-height:28px;
  margin:0;
  color:var(--ewrh-body);
}

.new-serivces-parent .bpu-section--dark .bpu-sec-intro,.parent-transer-serivces-inner .bpu-section--dark .bpu-sec-intro {
  color:var(--ewrh-white);
}

.new-serivces-parent .bpu-panel,.parent-transer-serivces-inner .bpu-panel {
  border-radius:var(--bpu-rpanel);
  padding:clamp(28px,4vw,40px) clamp(20px,5vw,80px);
  display:flex;
  flex-direction:column;
  gap:clamp(28px,4vw,40px);
  margin-bottom:clamp(24px,3vw,40px);
}

.new-serivces-parent .bpu-panel--shade,.parent-transer-serivces-inner .bpu-panel--shade {
  background:var(--bpu-panel);
}

.new-serivces-parent .bpu-panel--white,.parent-transer-serivces-inner .bpu-panel--white {
  background:var(--ewrh-white);
}

.new-serivces-parent .bpu-sub,.parent-transer-serivces-inner .bpu-sub {
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.new-serivces-parent .bpu-sub-title,.parent-transer-serivces-inner .bpu-sub-title {
  font-size:clamp(24px,3vw,32px);
  line-height:1.25;
  font-weight:700;
  color:var(--ewrh-heading);
  margin:0;
}

.new-serivces-parent .bpu-sub-desc,.parent-transer-serivces-inner .bpu-sub-desc {
  font-size:17px;
  line-height:26px;
  margin:0;
  color:var(--ewrh-body);
}

.new-serivces-parent .bpu-cards.wp-block-columns,.parent-transer-serivces-inner .bpu-cards.wp-block-columns {
  gap:16px;
  margin:0;
  align-items:stretch;
}

.new-serivces-parent .bpu-cards>.wp-block-column,.parent-transer-serivces-inner .bpu-cards>.wp-block-column {
  margin:0;
  display:flex;
}

.new-serivces-parent .bpu-card,.parent-transer-serivces-inner .bpu-card {
  background:var(--ewrh-white);
  border:1px solid var(--ewrh-line);
  border-radius:var(--bpu-rcard);
  padding:0 28px 24px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}

.new-serivces-parent .bpu-card--shade,.parent-transer-serivces-inner .bpu-card--shade {
  background:var(--bpu-panel);
}

.new-serivces-parent .bpu-accent,.parent-transer-serivces-inner .bpu-accent {
  height:6px;
  margin:0 -28px;
  border:0;
  min-height:6px;
}

.new-serivces-parent .bpu-accent--blue,.parent-transer-serivces-inner .bpu-accent--blue {
  background:var(--bpu-darkblue);
}

.new-serivces-parent .bpu-accent--green,.parent-transer-serivces-inner .bpu-accent--green {
  background:var(--ewrh-green);
}

.new-serivces-parent .bpu-card-title,.parent-transer-serivces-inner .bpu-card-title {
  font-size:24px;
  line-height:30px;
  font-weight:700;
  color:var(--ewrh-heading);
  margin:0;
}

.new-serivces-parent .bpu-card-body,.parent-transer-serivces-inner .bpu-card-body {
  font-size:17px;
  line-height:26px;
  color:var(--ewrh-body);
  margin:0;
}

.new-serivces-parent .bpu-card-list,.parent-transer-serivces-inner .bpu-card-list {
  font-size:17px;
  line-height:26px;
  color:var(--ewrh-body);
  margin:0;
  padding-left:1.25em;
  list-style:disc;
}

.new-serivces-parent .bpu-card-list li,.parent-transer-serivces-inner .bpu-card-list li {
  margin:0 0 4px;
}

.new-serivces-parent .bpu-sublist,.parent-transer-serivces-inner .bpu-sublist {
  margin:4px 0 0;
  padding-left:1.25em;
  list-style:disc;
}

.new-serivces-parent .bpu-eyebrow,.parent-transer-serivces-inner .bpu-eyebrow {
  font-size:14px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.08em;
  margin:0;
}

.new-serivces-parent .bpu-eyebrow--green,.parent-transer-serivces-inner .bpu-eyebrow--green {
  color:var(--ewrh-green);
}

.new-serivces-parent .bpu-eyebrow--blue,.parent-transer-serivces-inner .bpu-eyebrow--blue {
  color:var(--bpu-darkblue);
}

.new-serivces-parent .bpu-card .wp-block-buttons,.parent-transer-serivces-inner .bpu-card .wp-block-buttons {
  margin:4px 0 0;
}

.new-serivces-parent .bpu-card .wp-block-buttons .wp-block-button,.parent-transer-serivces-inner .bpu-card .wp-block-buttons .wp-block-button {
  margin:0;
}

.new-serivces-parent .bpu-btn .wp-block-button__link,.parent-transer-serivces-inner .bpu-btn .wp-block-button__link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--ewrh-green);
  color:var(--ewrh-white);
  font-weight:700;
  font-size:17px;
  line-height:1;
  padding:12px 24px;
  border-radius:4px;
  border:0;
  text-decoration:none;
  transition:filter .15s ease,box-shadow .15s ease;
}

.new-serivces-parent .bpu-btn--arrow .wp-block-button__link::after,.parent-transer-serivces-inner .bpu-btn--arrow .wp-block-button__link::after {
  content:"\2192";
  font-weight:700;
  transition:transform .15s ease;
}

.new-serivces-parent .bpu-btn .wp-block-button__link:hover,.parent-transer-serivces-inner .bpu-btn .wp-block-button__link:hover {
  filter:brightness(.93);
}

.new-serivces-parent .bpu-btn--arrow .wp-block-button__link:hover::after,.parent-transer-serivces-inner .bpu-btn--arrow .wp-block-button__link:hover::after {
  transform:translateX(4px);
}

.new-serivces-parent .bpu-btn .wp-block-button__link:focus-visible,.parent-transer-serivces-inner .bpu-btn .wp-block-button__link:focus-visible {
  outline:3px solid var(--bpu-darkblue);
  outline-offset:2px;
}

.new-serivces-parent .bpu-chip,.parent-transer-serivces-inner .bpu-chip {
  display:inline-block;
  font-weight:700;
  font-size:17px;
  line-height:1;
  padding:11px 22px;
  border-radius:4px;
  margin:4px 0 0;
}

.new-serivces-parent .bpu-chip--blue,.parent-transer-serivces-inner .bpu-chip--blue {
  border:2px solid var(--bpu-darkblue);
  color:var(--bpu-darkblue);
  background:transparent;
}

.new-serivces-parent .bpu-callout,.parent-transer-serivces-inner .bpu-callout {
  display:flex;
  gap:20px;
  align-items:flex-start;
  padding:clamp(20px,3vw,24px) 28px;
  border-radius:var(--bpu-rcallout);
  border:1px solid;
  margin-bottom:clamp(24px,3vw,40px);
}

.new-serivces-parent .bpu-callout--green,.parent-transer-serivces-inner .bpu-callout--green {
  border-color:var(--ewrh-green);
  background:var(--ewrh-white);
}

.new-serivces-parent .bpu-callout--ondark,.parent-transer-serivces-inner .bpu-callout--ondark {
  border-color:var(--ewrh-white);
  background:transparent;
}

.new-serivces-parent .bpu-callout-badge,.parent-transer-serivces-inner .bpu-callout-badge {
  flex:0 0 auto;
  width:48px;
  height:48px;
  background:var(--ewrh-green);
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.new-serivces-parent .bpu-callout-badge span,.parent-transer-serivces-inner .bpu-callout-badge span {
  color:var(--ewrh-white);
  font-weight:700;
  font-size:20px;
  font-style:italic;
}

.new-serivces-parent .bpu-callout-body-wrap,.parent-transer-serivces-inner .bpu-callout-body-wrap {
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1 1 auto;
  min-width:0;
}

.new-serivces-parent .bpu-callout-title,.parent-transer-serivces-inner .bpu-callout-title {
  font-size:20px;
  line-height:28px;
  font-weight:700;
  color:var(--ewrh-heading);
  margin:0;
}

.new-serivces-parent .bpu-callout-body,.parent-transer-serivces-inner .bpu-callout-body {
  font-size:17px;
  line-height:26px;
  color:var(--ewrh-body);
  margin:0;
}

.new-serivces-parent .bpu-callout--ondark .bpu-callout-title,.parent-transer-serivces-inner .bpu-callout--ondark .bpu-callout-title {
  color:var(--ewrh-white);
}

.new-serivces-parent .bpu-callout--ondark .bpu-callout-body,.parent-transer-serivces-inner .bpu-callout--ondark .bpu-callout-body {
  color:var(--ewrh-white);
}

.new-serivces-parent .bpu-fees,.parent-transer-serivces-inner .bpu-fees {
  background:var(--bpu-panel);
  border-radius:var(--bpu-rpanel);
  padding:clamp(28px,4vw,40px) clamp(20px,5vw,80px);
  display:flex;
  flex-direction:column;
  gap:30px;
  margin-bottom:clamp(24px,3vw,40px);
}

.new-serivces-parent .bpu-fees:last-child,.parent-transer-serivces-inner .bpu-fees:last-child {
  margin-bottom:0;
}

.new-serivces-parent .bpu-fees-title,.parent-transer-serivces-inner .bpu-fees-title {
  font-size:clamp(24px,3vw,32px);
  line-height:1.25;
  font-weight:700;
  color:var(--ewrh-heading);
  text-align:center;
  margin:0;
}

.new-serivces-parent .bpu-fees-row.wp-block-columns,.parent-transer-serivces-inner .bpu-fees-row.wp-block-columns {
  gap:clamp(24px,4vw,41px);
  margin:0;
  align-items:center;
}

.new-serivces-parent .bpu-fees-row>.wp-block-column,.parent-transer-serivces-inner .bpu-fees-row>.wp-block-column {
  margin:0;
}

.new-serivces-parent .bpu-fees-media img,.parent-transer-serivces-inner .bpu-fees-media img {
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
  object-fit:cover;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.new-serivces-parent .bpu-fee-grid,.parent-transer-serivces-inner .bpu-fee-grid {
  display:flex;
  flex-direction:column;
  gap:20px;
}

.new-serivces-parent .bpu-fee,.parent-transer-serivces-inner .bpu-fee {
  display:flex;
  flex-direction:column;
}

.new-serivces-parent .bpu-fee-title,.parent-transer-serivces-inner .bpu-fee-title {
  font-size:18px;
  line-height:26px;
  font-weight:700;
  color:var(--ewrh-heading);
  margin:0;
}

.new-serivces-parent .bpu-fee-body,.parent-transer-serivces-inner .bpu-fee-body {
  font-size:17px;
  line-height:26px;
  color:var(--ewrh-body);
  margin:0;
}

.new-serivces-parent .bpu-note,.parent-transer-serivces-inner .bpu-note {
  border:1px solid var(--ewrh-green);
  border-radius:var(--bpu-rpanel);
  padding:clamp(24px,3vw,32px) clamp(20px,3vw,36px);
  display:flex;
  flex-direction:column;
  gap:12px;
  background:var(--ewrh-white);
}

.new-serivces-parent .bpu-note-title,.parent-transer-serivces-inner .bpu-note-title {
  font-size:22px;
  line-height:30px;
  font-weight:700;
  color:var(--ewrh-heading);
  margin:0;
}

.new-serivces-parent .bpu-note-list,.parent-transer-serivces-inner .bpu-note-list {
  font-size:18px;
  line-height:28px;
  color:var(--ewrh-body);
  margin:0;
  padding-left:1.4em;
  list-style:disc;
}

.new-serivces-parent .bpu-note-list li,.parent-transer-serivces-inner .bpu-note-list li {
  margin:0 0 6px;
}

@media (max-width:781px) {
  .new-serivces-parent .bpu-cards.wp-block-columns,.parent-transer-serivces-inner .bpu-cards.wp-block-columns {
    flex-direction:column;
  }
  .new-serivces-parent .bpu-cards>.wp-block-column,.parent-transer-serivces-inner .bpu-cards>.wp-block-column {
    width:100%!important;
    flex-basis:100%!important;
  }
  .new-serivces-parent .bpu-fees-row.wp-block-columns,.parent-transer-serivces-inner .bpu-fees-row.wp-block-columns {
    flex-direction:column;
  }
  .new-serivces-parent .bpu-fees-row>.wp-block-column,.parent-transer-serivces-inner .bpu-fees-row>.wp-block-column {
    width:100%!important;
    flex-basis:100%!important;
  }
}

.parent-billing-rate {
  --pbr-blue:#002b7f;
  --pbr-navy:#003971;
  --pbr-green:#7ca650;
  --pbr-body:#1d1d1d;
  --pbr-line:#d9dbe0;
  --pbr-strip:#f8f8f8;
  --pbr-white:#fff;
  --pbr-container:1480px;
  --pbr-gutter:clamp(20px,5vw,40px);
  --pbr-font:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-family:var(--pbr-font);
  color:var(--pbr-body);
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

.parent-billing-rate .pbr-hero.wp-block-cover {
  min-height:574px;
  align-items:center;
}

.parent-billing-rate .pbr-hero .wp-block-cover__background {
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.65) 100%)!important;
  opacity:1!important;
}

.parent-billing-rate .pbr-hero .wp-block-cover__inner-container {
  width:100%;
}

.parent-billing-rate .pbr-hero__inner {
  width:100%;
  max-width:var(--pbr-container);
  margin-inline:auto;
  padding-inline:0;
}

.parent-billing-rate .pbr-hero__bc {
  color:#fff;
  font-size:18px;
  line-height:1.4;
  margin:0 0 24px;
}

.parent-billing-rate .pbr-hero__bc a {
  color:#fff;
  text-decoration:underline;
}

.parent-billing-rate .pbr-hero__bc .pbr-bc-sep {
  margin:0 8px;
  opacity:.85;
}

.parent-billing-rate .pbr-hero__title {
  color:#fff;
  font-size:clamp(36px,5vw,56px);
  line-height:1.1;
  font-weight:700;
  margin:0 0 15px;
}

.parent-billing-rate .pbr-hero__desc {
  color:#fff;
  font-size:clamp(18px,2.4vw,22px);
  line-height:1.45;
  font-weight:600;
  margin:0;
 
}

.parent-billing-rate .pbr-section {
  width:100%;
  padding-block:clamp(40px,6vw,44px);
}

.parent-billing-rate .pbr-section--strip {
  background:var(--pbr-strip);
  padding-block:clamp(28px,4vw,44px);
}

.parent-billing-rate .pbr-section--white {
  background:var(--pbr-white);
}

.parent-billing-rate .pbr-container {
  width:100%;
  max-width:var(--pbr-container);
  margin-inline:auto;
  padding-inline:0;
}

.parent-billing-rate .pbr-qa-row {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin:0;
}

.parent-billing-rate .pbr-qa {
  flex:1 1 calc((100% - 100px)/6);
  min-width:150px;
  background:#fff;
  border-radius:6px;
  box-shadow:0 3px 10px rgba(0,0,0,.1);
  padding:24px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  position:relative;
  transition:box-shadow .15s ease,transform .15s ease;
}

.parent-billing-rate .pbr-qa:hover {
  box-shadow:0 8px 20px rgba(0,0,0,.14);
  transform:translateY(-2px);
}

.parent-billing-rate .pbr-qa:focus-within {
  box-shadow:0 0 0 3px rgba(0,57,113,.45);
}

.parent-billing-rate .pbr-qa__ico {
  margin:0;
  line-height:0;
}

.parent-billing-rate .pbr-qa__ico img {
  width:44px;
  height:44px;
  display:block;
}

.parent-billing-rate .pbr-qa__label {
  margin:0;
  font-weight:700;
  font-size:17px;
  line-height:1.3;
  color:var(--pbr-body);
}

.parent-billing-rate .pbr-qa__link {
  color:inherit;
  text-decoration:none;
}

.parent-billing-rate .pbr-qa__link::before {
  content:"";
  position:absolute;
  inset:0;
}

.parent-billing-rate .pbr-qa__link:focus-visible {
  outline:3px solid var(--pbr-navy);
  outline-offset:3px;
}

.parent-billing-rate .pbr-head {
  text-align:center;
  max-width:1100px;
  margin-inline:auto;
  margin-bottom:clamp(24px,4vw,40px);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.parent-billing-rate .pbr-eyebrow {
  color:var(--pbr-green);
  font-weight:700;
  font-size:15px;
  letter-spacing:.1em;
  margin:0;
}

.parent-billing-rate .pbr-h2 {
  color:var(--pbr-blue);
  font-weight:700;
  font-size:clamp(28px,3.6vw,40px);
  line-height:1.2;
  margin:0;
}

.parent-billing-rate .pbr-lead {
  color:var(--pbr-body);
  font-size:18px;
  line-height:28px;
  margin:0;
}

.parent-billing-rate .pbr-features {
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  margin:0;
}

.parent-billing-rate .pbr-feature {
  flex:1 1 calc(50% - 16px);
  min-width:280px;
  background:#fff;
  border:1px solid var(--pbr-line);
  border-radius:8px;
  box-shadow:0 0 6px rgba(0,0,0,.1);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.parent-billing-rate .pbr-feature__img {
  margin:0;
  line-height:0;
}

.parent-billing-rate .pbr-feature__img img {
  height:191px;
  object-fit:cover;
  display:block;
}

.parent-billing-rate .pbr-feature__body {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
  padding:32px 10px 40px;
}

.parent-billing-rate .pbr-feature__title {
  color:var(--pbr-body);
  font-size:26px;
  line-height:1.3;
  font-weight:700;
  margin:0;
}

.parent-billing-rate .pbr-feature__text {
  color:var(--pbr-body);
  font-size:16px;
  line-height:28px;
  margin:0;
}

.parent-billing-rate .pbr-feature .wp-block-buttons {
  margin-top:4px;
}

.parent-billing-rate .pbr-btn .wp-block-button__link {
  background:var(--pbr-green);
  color:#fff;
  border:0;
  font-weight:700;
  font-size:18px;
  line-height:1.33;
  padding:14px 28px;
  border-radius:4px;
  text-decoration:none;
  display:inline-block;
  transition:filter .15s ease;
}

.parent-billing-rate .pbr-btn .wp-block-button__link:hover {
  filter:brightness(.93);
}

.parent-billing-rate .pbr-btn .wp-block-button__link:focus-visible {
  outline:3px solid var(--pbr-blue);
  outline-offset:2px;
}

.parent-billing-rate .pbr-block {
  margin-bottom:clamp(28px,4vw,40px);
}

.parent-billing-rate .pbr-block:last-child {
  margin-bottom:0;
}

.parent-billing-rate .pbr-cards {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin:0;
}

.parent-billing-rate .pbr-card {
  flex:1 1 calc(25% - 18px);
  min-width:220px;
  background:#fff;
  border:1px solid var(--pbr-line);
  border-radius:8px;
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
  position:relative;
  transition:box-shadow .15s ease,transform .15s ease;
}

.hmong #rate-information .pbr-card {
    min-height: 400px;
}

p.pbr-feature__text br {
    display: none;
}

.parent-billing-rate .pbr-card:hover {
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  transform:translateY(-2px);
}

.parent-billing-rate .pbr-card:focus-within {
  box-shadow:0 0 0 3px rgba(0,57,113,.45);
}

.parent-billing-rate .pbr-card__ico {
  margin:0;
  line-height:0;
}

.parent-billing-rate .pbr-card__ico img {
}

.parent-billing-rate .pbr-card__title {
  color:var(--pbr-blue);
  font-size:18px;
  line-height:24px;
  font-weight:700;
  margin:0;
}

.parent-billing-rate .pbr-card__text {
  color:var(--pbr-body);
  font-size:18px;
  line-height:28px;
  margin:0;
  flex:1 1 auto;
}

.parent-billing-rate .pbr-card__cta {
  margin:0;
}

.parent-billing-rate .pbr-card__link {
  color:var(--pbr-green);
  font-weight:700;
  font-size:17px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}

.parent-billing-rate .pbr-card__link::before {
  content:"";
  position:absolute;
  inset:0;
}

.spanish .parent-billing-rate .pbr-card__link {
	font-size: 14px;
}

.spanish .parent-billing-rate .pbr-card {
    min-height: 350px;
}
.parent-billing-rate .pbr-card__link::after {
  content:"\2192";
  margin-left:8px;
  transition:transform .15s ease;
}

.parent-billing-rate .pbr-card:hover .pbr-card__link::after {
  transform:translateX(4px);
}

.parent-billing-rate .pbr-card__link:focus-visible {
  outline:3px solid var(--pbr-blue);
  outline-offset:3px;
}

.parent-billing-rate .pbr-need {
  width:100%;
  background:linear-gradient(-50.44deg,#b0d57b 0%,#376319 100%);
  padding-block:clamp(40px,6vw,60px);
}

.parent-billing-rate .pbr-need__inner {
  width:100%;
  max-width:var(--pbr-container);
  margin-inline:auto;
  padding-inline:var(--pbr-gutter);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}

.parent-billing-rate .pbr-need__title {
  color:#fff;
  font-size:clamp(30px,4vw,40px);
  line-height:1.1;
  font-weight:700;
  margin:0;
}

.parent-billing-rate .pbr-need__text {
  color:#fff;
  font-size:18px;
  line-height:28px;
  margin:0;
}

.parent-billing-rate .pbr-need__btn .wp-block-button__link {
  background:transparent;
  color:#fff;
  border:2px solid #fff;
  font-weight:700;
  font-size:18px;
  line-height:1.33;
  padding:14px 60px;
  border-radius:4px;
  text-decoration:none;
  display:inline-block;
  transition:background .15s ease;
}

.parent-billing-rate .pbr-need__btn .wp-block-button__link:hover {
  background:rgba(255,255,255,.14);
}

.parent-billing-rate .pbr-need__btn .wp-block-button__link:focus-visible {
  outline:3px solid #fff;
  outline-offset:3px;
}

.nepali .parent-billing-rate .pbr-card {
    min-height: 310px !important;
    padding: 25px 15px;
}

@media (max-width:1024px) {
  .parent-billing-rate .pbr-qa {
    flex:1 1 calc((100% - 40px)/3);
  }
  .parent-billing-rate .pbr-card {
    flex:1 1 calc(50% - 12px);
  }
}

@media (max-width:781px) {
  .parent-billing-rate .pbr-feature {
    flex:1 1 100%;
  }
  .parent-billing-rate .pbr-feature__body {
    padding:28px 24px 32px;
  }
}

@media (max-width:600px) {
  .parent-billing-rate .pbr-qa {
    flex:1 1 calc(50% - 10px);
  }
  .parent-billing-rate .pbr-card {
    flex:1 1 100%;
  }
}

.parent-for-customer {
  --pfc-blue:#002b7f;
  --pfc-navy:#003971;
  --pfc-green:#7ca650;
  --pfc-orange:#ef800a;
  --pfc-cyan:#01a2e5;
  --pfc-lime:#95d050;
  --pfc-body:#1d1d1d;
  --pfc-line:#d9dbe0;
  --pfc-shade:#f7f7f7;
  --pfc-strip:#f8f8f8;
  --pfc-waterbox:#e6f6fc;
  --pfc-white:#fff;
  --pfc-container:1480px;
  --pfc-gutter:clamp(20px,5vw,40px);
  --pfc-font:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-family:var(--pfc-font);
  color:var(--pfc-body);
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

.parent-for-customer .pfc-hero.wp-block-cover {
  min-height:574px;
  align-items:center;
}

.parent-for-customer .pfc-hero .wp-block-cover__background {
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.65) 100%)!important;
  opacity:1!important;
}

.parent-for-customer .pfc-hero .wp-block-cover__inner-container {
  width:100%;
}

.parent-for-customer .pfc-hero__inner {
  width:100%;
  padding-top: 200px;
}

.parent-for-customer .pfc-hero__bc {
  color:#fff;
  font-size:18px;
  line-height:1.4;
  margin:0 0 24px;
}

.parent-for-customer .pfc-hero__bc a {
  color:#fff;
  text-decoration:underline;
}

.parent-for-customer .pfc-hero__bc .pfc-bc-sep {
  margin:0 8px;
  opacity:.85;
}

.parent-for-customer .pfc-hero__title {
  color:#fff;
  font-size:clamp(36px,5vw,56px);
  line-height:1.1;
  font-weight:700;
  margin:0 0 8px;
}

.parent-for-customer .pfc-hero__desc {
  color:#fff;
  font-size:clamp(18px,2.4vw,22px);
  line-height:1.45;
  font-weight:600;
  margin:0;
  max-width:1080px;
}

.parent-for-customer .pfc-section {
  width:100%;
  padding-block:clamp(40px,6vw,60px);
}

.parent-for-customer .pfc-section--strip {
  background:var(--pfc-strip);
  padding-block:clamp(28px,4vw,44px);
}

.parent-for-customer .pfc-section--white {
  background:var(--pfc-white);
}

.parent-for-customer .pfc-section--shade {
  background:var(--pfc-shade);
}

.parent-for-customer .pfc-section--shade .pfc-container {
  display:flex;
  flex-direction:column;
  gap:clamp(24px,3vw,40px);
}

.parent-for-customer .pfc-section--scam {
  padding-bottom:clamp(28px,4vw,36px);
}

.parent-for-customer .pfc-container {
  width:100%;
  max-width:var(--pfc-container);
  margin-inline:auto;
/*   padding-inline:var(--pfc-gutter); */
}

.parent-for-customer .pfc-qa-row {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin:0;
}

.parent-for-customer .pfc-qa {
  flex:1 1 calc((100% - 100px)/6);
  min-width:150px;
  background:#fff;
  border-radius:6px;
  box-shadow:0 3px 10px rgba(0,0,0,.1);
  padding:24px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  position:relative;
  transition:box-shadow .15s ease,transform .15s ease;
}

.parent-for-customer .pfc-qa:hover {
  box-shadow:0 8px 20px rgba(0,0,0,.14);
  transform:translateY(-2px);
}

.parent-for-customer .pfc-qa:focus-within {
  box-shadow:0 0 0 3px rgba(0,57,113,.45);
}

.parent-for-customer .pfc-qa__ico {
  margin:0;
  line-height:0;
}

.parent-for-customer .pfc-qa__ico img {
  width:44px;
  height:44px;
  display:block;
}

.parent-for-customer .pfc-qa__label {
  margin:0;
  font-weight:700;
  font-size:17px;
  line-height:1.3;
  color:var(--pfc-body);
}

.parent-for-customer .pfc-qa__link {
  color:inherit;
  text-decoration:none;
}

.parent-for-customer .pfc-qa__link::before {
  content:"";
  position:absolute;
  inset:0;
}

.parent-for-customer .pfc-qa__link:focus-visible {
  outline:3px solid var(--pfc-navy);
  outline-offset:3px;
}

.parent-for-customer .pfc-head {
  text-align:center;
  max-width:1000px;
  margin-inline:auto;
  margin-bottom:clamp(24px,4vw,40px);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.parent-for-customer .pfc-eyebrow {
  font-weight:700;
  font-size:15px;
  letter-spacing:.1em;
  margin:0;
}

.parent-for-customer .pfc-eyebrow--green {
  color:var(--pfc-green);
}

.parent-for-customer .pfc-eyebrow--orange {
  color:var(--pfc-orange);
}

.parent-for-customer .pfc-h2 {
  color:var(--pfc-blue);
  font-weight:700;
  font-size:clamp(28px,3.6vw,40px);
  line-height:1.2;
  margin:0;
}

.parent-for-customer .pfc-lead {
  color:var(--pfc-body);
  font-size:18px;
  line-height:28px;
  margin:0;
}

.parent-for-customer .pfc-features {
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  margin:0;
}

.parent-for-customer .pfc-feature {
  flex:1 1 calc(50% - 16px);
  min-width:280px;
  background:#fff;
  border:1px solid var(--pfc-line);
  border-radius:8px;
  box-shadow:0 0 6px rgba(0,0,0,.1);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.parent-for-customer .pfc-feature__img {
  margin:0;
  line-height:0;
}

.parent-for-customer .pfc-feature__img img {
  width:100%;
  object-fit:cover;
  display:block;
}

.parent-for-customer .pfc-feature__body {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
  padding: 40px 36px ;
  flex:1 1 auto;
}

.parent-for-customer .pfc-feature__ico {
  width:80px;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
}

.parent-for-customer .pfc-feature__ico--box {
  background:var(--pfc-waterbox);
  border-radius:12px;
}

.parent-for-customer .pfc-feature__icoimg {
  margin:0;
  line-height:0;
}

.parent-for-customer .pfc-feature__icoimg img {
}

.parent-for-customer .pfc-feature__title {
  color:var(--pfc-blue);
  font-size:26px;
  line-height:1.3;
  font-weight:700;
  margin:0;
}

.parent-for-customer .pfc-feature__text {
  color:var(--pfc-body);
  font-size:18px;
  line-height:28px;
  margin:0;
  flex:1 1 auto;
}

.parent-for-customer .pfc-feature .wp-block-buttons {
  margin-top:auto;
}

.parent-for-customer .pfc-btn .wp-block-button__link {
  background:var(--pfc-green);
  color:#fff;
  border:0;
  font-weight:700;
  font-size:18px;
  line-height:1.33;
  padding:14px 28px;
  border-radius:4px;
  text-decoration:none;
  display:inline-block;
  transition:filter .15s ease;
}

.parent-for-customer .pfc-btn .wp-block-button__link:hover {
  filter:brightness(.93);
}

.parent-for-customer .pfc-btn .wp-block-button__link:focus-visible {
  outline:3px solid var(--pfc-blue);
  outline-offset:2px;
}

.parent-for-customer .pfc-split {
  background:#fff;
  box-shadow:0 0 12px rgba(0,0,0,.1);
  border-radius:8px;
  display:flex;
  gap:clamp(24px,5vw,120px);
  align-items:center;
  position:relative;
  overflow:hidden;
  transition:box-shadow .15s ease;
}

.parent-for-customer .pfc-split:hover {
  box-shadow:0 8px 24px rgba(0,0,0,.14);
}

.parent-for-customer .pfc-split:focus-within {
  box-shadow:0 0 0 3px rgba(0,57,113,.4);
}

.parent-for-customer .pfc-split__media {
  flex:1 1 40%;
  min-width:0;
  line-height:0;
}

.parent-for-customer .pfc-split__img img {
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:8px;
  display:block;
}

.parent-for-customer .pfc-split__body {
  flex:1 1 52%;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.parent-for-customer .pfc-arrow-wrap {
  margin:0;
}

.parent-for-customer .pfc-arrow {
  color:var(--pfc-green);
  font-weight:700;
  font-size:18px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}

.parent-for-customer .pfc-arrow::before {
  content:"";
  position:absolute;
  inset:0;
}

.parent-for-customer .pfc-arrow::after {
  content:"\2192";
  margin-left:8px;
  transition:transform .15s ease;
}

.parent-for-customer .pfc-split:hover .pfc-arrow::after {
  transform:translateX(4px);
}

.parent-for-customer .pfc-arrow:focus-visible {
  outline:3px solid var(--pfc-blue);
  outline-offset:3px;
}

.parent-for-customer .pfc-scam {
  display:flex;
  gap:clamp(24px,5vw,120px);
  align-items:center;
  position:relative;
  overflow:hidden;
  border-radius:8px;
  transition:box-shadow .15s ease;
}

.parent-for-customer .pfc-scam:focus-within {
  box-shadow:0 0 0 3px rgba(0,57,113,.4);
}

.parent-for-customer .pfc-scam__media {
  flex:1 1 40%;
  min-width:0;
  line-height:0;
}

.parent-for-customer .pfc-scam__img img {
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
}

.parent-for-customer .pfc-scam__body {
  flex:1 1 52%;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.parent-for-customer .pfc-scam:hover .pfc-arrow::after {
  transform:translateX(4px);
}

.parent-for-customer .pfc-cards {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin:0;
}

.parent-for-customer .pfc-card {
  flex:1 1 calc(25% - 18px);
  min-width:240px;
  background:#fff;
  border:1px solid var(--pfc-line);
  border-radius:8px;
  box-shadow:0 0 6px rgba(0,0,0,.1);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:box-shadow .15s ease,transform .15s ease;
}

.parent-for-customer .pfc-card:hover {
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  transform:translateY(-2px);
}

.parent-for-customer .pfc-card:focus-within {
  box-shadow:0 0 0 3px rgba(0,57,113,.45);
}

.parent-for-customer .pfc-card__img {
  margin:0;
  line-height:0;
}

.parent-for-customer .pfc-card__img img {
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}

.parent-for-customer .pfc-card__body {
  padding:24px 24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1 1 auto;
}

.parent-for-customer .pfc-accent {
  height:4px;
  width:48px;
  border-radius:2px;
  margin:0;
  border:0;
  min-height:4px;
}

.parent-for-customer .pfc-accent--orange {
  background:var(--pfc-orange);
}

.parent-for-customer .pfc-accent--cyan {
  background:var(--pfc-cyan);
}

.parent-for-customer .pfc-accent--lime {
  background:var(--pfc-lime);
}

.parent-for-customer .pfc-accent--green {
  background:var(--pfc-green);
}

.parent-for-customer .pfc-card__eyebrow {
  font-weight:700;
  font-size:14px;
  letter-spacing:.08em;
  margin:0;
}

.parent-for-customer .pfc-card__eyebrow--orange {
  color:var(--pfc-orange);
}

.parent-for-customer .pfc-card__eyebrow--cyan {
  color:var(--pfc-cyan);
}

.parent-for-customer .pfc-card__eyebrow--lime {
  color:var(--pfc-lime);
}

.parent-for-customer .pfc-card__eyebrow--green {
  color:var(--pfc-green);
}

.parent-for-customer .pfc-card__title {
  color:var(--pfc-blue);
  font-size:22px;
  line-height:28px;
  font-weight:700;
  margin:0;
}

.parent-for-customer .pfc-card__text {
  color:var(--pfc-body);
  font-size:18px;
  line-height:26px;
  margin:0;
  flex:1 1 auto;
	min-height:110px;
}

.parent-for-customer .pfc-card__cta {
  margin:0;
}

.parent-for-customer .pfc-card__link {
  color:var(--pfc-green);
  font-weight:700;
  font-size:18px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}

.parent-for-customer .pfc-card__link::before {
  content:"";
  position:absolute;
  inset:0;
}

.parent-for-customer .pfc-card__link::after {
  content:"\2192";
  margin-left:8px;
  transition:transform .15s ease;
}

.parent-for-customer .pfc-card:hover .pfc-card__link::after {
  transform:translateX(4px);
}

.parent-for-customer .pfc-card__link:focus-visible {
  outline:3px solid var(--pfc-blue);
  outline-offset:3px;
}

.parent-for-customer .pfc-need {
  width:100%;
  background:linear-gradient(-50.44deg,#b0d57b 0%,#376319 100%);
  padding-block:clamp(40px,6vw,60px);
}

.parent-for-customer .pfc-need__inner {
  width:100%;
  max-width:var(--pfc-container);
  margin-inline:auto;
  padding-inline:var(--pfc-gutter);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  text-align:center;
}

.parent-for-customer .pfc-need__title {
  color:#fff;
  font-size:clamp(30px,4vw,40px);
  line-height:1.1;
  font-weight:700;
  margin:0;
}

.parent-for-customer .pfc-need__text {
  color:#fff;
  font-size:18px;
  line-height:28px;
  margin:0;
}

.parent-for-customer .pfc-need__btn .wp-block-button__link {
  background:transparent;
  color:#fff;
  border:2px solid #fff;
  font-weight:700;
  font-size:18px;
  line-height:1.33;
  padding:14px 28px;
  border-radius:4px;
  text-decoration:none;
  display:inline-block;
  transition:background .15s ease;
}

.parent-for-customer .pfc-need__btn .wp-block-button__link:hover {
  background:rgba(255,255,255,.14);
}

.parent-for-customer .pfc-need__btn .wp-block-button__link:focus-visible {
  outline:3px solid #fff;
  outline-offset:3px;
}


/****Hmong**/

.home .btn-outline{
	background:#7ca650;
	color:#fff;
	cursor: pointer;
}
.home .btn-outline {
    background: #7ca650;
    color: #fff;
    cursor: pointer;
}

.home .btn-solid{
	justify-content: flex-start;
	color:#7ca650 !important;
	background:none !important;
	padding:0px;

}

.home .community {
    padding: 50px 0;
    background: #F7F7F7;
    border-top: 1px solid #F7F7F7;
    border-bottom: 1px solid #F7F7F7;
}

.feature-card__sub_title.BOARD.MEETINGS, .feature-card__sub_title.REUNIONES.DE.LA.JUNTA,
.feature-card__sub_title.STAY.INFORMED , .feature-card__sub_title.Mantente.informada{
  width: 660px;
  height: 23px;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-size: 17px;
  line-height: 23px;
  letter-spacing: 1px;

  margin-bottom: 11px;
}

.feature-card__sub_title.BOARD.MEETINGS{
	  color: #EF800A;
}

.feature-card__sub_title.STAY.INFORMED{
	color:#01A2E5 !important;
}
.bar.BOARD.MEETINGS, .bar.Mantente.informada,
.bar.STAY.INFORMED, .bar.REUNIONES.DE.LA.JUNTA {
    width: 48px;
    height: 4px;
 
    margin-bottom: 10px;
}
.bar.BOARD.MEETINGS, .bar.REUNIONES.DE.LA.JUNTA{
	   background: #EF800A;
}

.bar.STAY.INFORMED, .bar.Mantente.informada{
	 background: #01A2E5 !important
}

.hmong .hero__card {
  padding: 20px;
  gap: 15px;
}

.hmong .hero__eyebrow {
  font-size: 22px;
  line-height: 22px;
  
}

.hmong .quick-link__title {
  font-size: 18px;
  line-height: 22px;
}

.hmong .quick-link__title br{
    display: none;
}

.hmong .help-card h3{
    font-size: 22px;
  line-height: 25px;
}

.hmong .hero__card h1 {
    font-size: 28px;
    line-height: 32px;
}




.hmong .footer-col__title {
	font-size: 18px;
	line-height:22px;
}

.hmong .footer__newsletter-title, .hmong .footer__social-title {
	font-size: 18px;
	line-height:22px;

}

.hmong .feature-card__title {
	font-size: 24px;
	line-height:26px;
}

/* .myanmar .lang-switcher select{
	    width: 190px;
    padding: 5px !important;
} */

.myanmar .hero__card {
  padding: 20px;
  gap: 20px;
}


.myanmar .hero__card h1{
	font-size: 30px;
  line-height: 35px;
}

.myanmar .quick-link__title {
  font-size: 18px;

	line-height: 25px;
}

.myanmar .feature-card__body{
	padding: 30px 20px;
}

.myanmar .footer-col h3, .myanmar .footer-col__title {
	font-size: 15px;
	line-height: 28px;

}

.myanmar .footer__newsletter-title, .myanmar .footer__social-title{
	font-size: 15px;
	line-height: 28px;
}

.myanmar .site-footer {
  font-size: 15px;
  line-height: 20px;
}

.myanmar .footer__bottom{
	font-size: 13px;
}


.myanmar .feature-card__title{
	font-size: 21px;
  line-height: 28px;
}

.myanmar .feature-card__text {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.18px;
}

.myanmar .home .btn-solid {
	font-size: 18px;
}

.myanmar .community__heading {
  font-size: 26px;
  line-height: 35px;
  margin: 0 0 12px;
}

.myanmar .community__text {
  font-size: 16px;
	line-height: 28px;
}

.myanmar .quick-link__title br {
  display: none;
}

.myanmar .section-heading{
	font-size: 26px;
  line-height: 35px;
}


.nepali .hero__card{
	padding: 25px 20px;
}
.nepali .hero__eyebrow{
	font-size: 24px;
}

.nepali .hero__heading{
	font-size: 32px;
}



.nepali .quick-link__title br {
  display: none;
}


.nepali .footer__bottom{
	justify-content: space-between;
}

.nepali .footer-col__title{
	font-size: 16px
}
.nepali .footer__newsletter-title, .nepali .footer__social-title{
	font-size: 16px
}

.nepali .site-footer{
	font-size: 15px;
}

.spanish .feature-card__text {
  font-size: 16px;
	line-height: 28px;
}


.hmong .footer__bottom{
	    font-size: 12px;
        line-height:16px;
}



/***inner pages language****/


/* .hmong .billing-parent .billing-hero__title{
	font-size: 40px;
    line-height: 50px;
	    margin: 0 !important;
} */

.hmong .billing-parent .billing-section__title{
	font-size:28px;
    line-height: 32px;
}
.hmong .billing-parent .billing-ways__grid .billing-way,
.myanmar .billing-parent .billing-ways__grid .billing-way,
.spanish .billing-parent .billing-ways__grid .billing-way{
	padding: 0 10px;
}


.hmong .billing-parent .billing-way__link,
.myanmar .billing-parent .billing-way__link,
.spanish .billing-parent .billing-way__link{
    margin: 0;
    font-size: 14px;
}

.hmong .billing-parent .billing-flexpay__benefits li {
    font-size: 16px;
    line-height: 26px;
}

.hmong .billing-parent .billing-flexpay__callout{font-size: 19px;}
.hmong .billing-parent .billing-benefits {
	font-size: 19px;
}

.myanmar .footer__newsletter-form button {
	font-size: 10px;
}

.spanish .billing-parent .billing-band__heading{
	font-size: 24px;
    line-height: 30px
}

/*****/


@media (max-width:1024px) {
  .parent-for-customer .pfc-qa {
    flex:1 1 calc((100% - 40px)/3);
  }
  .parent-for-customer .pfc-card {
    flex:1 1 calc(50% - 12px);
  }
  .parent-for-customer .pfc-split {
    flex-direction:column;
    align-items:stretch;
  }
  .parent-for-customer .pfc-scam {
    flex-direction:column;
    align-items:stretch;
  }
  .parent-for-customer .pfc-split__media {
    flex:1 1 100%;
  }
  .parent-for-customer .pfc-split__body {
    flex:1 1 100%;
  }
  .parent-for-customer .pfc-scam__media {
    flex:1 1 100%;
  }
  .parent-for-customer .pfc-scam__body {
    flex:1 1 100%;
  }
}

@media (max-width:781px) {
  .parent-for-customer .pfc-feature {
    flex:1 1 100%;
  }
  .parent-for-customer .pfc-feature__body {
    padding:28px 24px 32px;
  }
}

@media (max-width:600px) {
  .parent-for-customer .pfc-qa {
    flex:1 1 calc(50% - 10px);
  }
  .parent-for-customer .pfc-card {
    flex:1 1 100%;
  }
  .parent-for-customer .pfc-split {
    padding:20px;
  }
}


/* =====================================================================
   UNIFIED RESPONSIVE NORMALIZATION LAYER  (appended; load-order: last)
   Goal: one consistent behavior across every page system.
     iPad 768–1024 : 6→3, 5→3, 4→2, 3→2, 2→2 ; image/content & video stack
     Mobile ≤767   : everything 1-per-row ; image/content & video stack
   Everything here is inside tablet/mobile media queries, so the DESKTOP
   layout (≥1025px) is never affected. !important is used only to win over
   each page's older, inconsistent breakpoints — never on desktop.
   ===================================================================== */

/* ---- shared selector groups -------------------------------------------------
   FLEX card-rows: count lives on the child via flex-basis.
   GRID wrappers : count lives on the wrapper via grid-template-columns.
----------------------------------------------------------------------------- */

/* ============================ iPad : 768–1024 ============================ */
@media (min-width:768px) and (max-width:1024px){

  /* 6-up  → 3 per row */
  .parent-billing-rate .pbr-qa,
  .parent-for-customer .pfc-qa{ flex:1 1 calc(33.333% - 14px) !important; max-width:calc(33.333% - 14px) !important; }
  .quick-links__grid,
  .wp-block-columns.quick-links__grid{ grid-template-columns:repeat(3,1fr) !important; }

  /* 5-up  → 3 per row */
  .rates-parent .r-tier-grid{ flex-wrap:wrap !important; }
  .rates-parent .r-tier-grid .wp-block-column{ flex:1 1 calc(50% - 11px) !important; }

  /* 4-up  → 2 per row */
  .parent-billing-rate .pbr-card,
  .parent-for-customer .pfc-card,
  .bpu-resource-card,
  .bpu-stat,
 
  .bpu-fact-card,
  .bpu-phone-grid-dark__col,
  .vsp-procure__row .wp-block-column{ flex:1 1 calc(50% - 12px) !important; max-width:calc(50% - 12px) !important; }
  .wp-block-columns.quick-links-grid,
  .wp-block-columns.programs__grid,
  .footer__main{ grid-template-columns:repeat(2,1fr) !important; }

  /* 3-up  → 2 per row */
  .bpu-biz-card,
  .bpu-method-card,
  .bpu-stage-card,
  .bpu-protection-card,
/*   .bpu-tree-card, */
  .bpu-path-cards-3 .bpu-path-card,
  .help-grid,
  .ways__grid{ flex:1 1 calc(50% - 12px) !important; max-width:calc(50% - 12px) !important; }
  .help-grid,
  .ways__grid{ grid-template-columns:repeat(2,1fr) !important; }
  .eletric-water-rate-parent .ewrh-links.wp-block-buttons{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }

  /* 2-up stays 2 (already correct on most) — normalize the stragglers */
  .callouts__grid,
  .wp-block-columns.callouts__grid,
  .wp-block-columns.features__grid{ grid-template-columns:repeat(2,1fr) !important; }
}

/* image/content splits + video rows → STACK across the whole iPad band */
@media (min-width:768px) and (max-width:1024px){
  
  
  .wp-block-group.community__card.community__card--reverse,
  .wp-block-group.community__card.community__card--wide,
  .investing__card,
  .scams-section__grid,
  .wp-block-columns.scams-section__grid,
  .parent-for-customer .pfc-split,
  .parent-for-customer .pfc-scam,
  .bpu-twocol, .bpu-twocol--even, .bpu-media,
  .bpu-lookup-cols, .bpu-basics-cols, .bpu-help__grid,
  .bpu-mymeter__grid, .bpu-flexpay__grid, .bpu-fees-row,
  .bpu-maintenance-cols, .bpu-role-cards, .bpu-customer-resp-cols,
  .billing-parent .billing-hero__layout,
  .billing-parent .billing-mymeter__grid,
  .billing-parent .billing-ways__intro,
  .billing-parent .billing-flexpay__grid,
  .billing-parent .billing-help__grid,
  .billing-inner-parent .billing-inner-video__row,
  .billing-inner-parent .billing-inner-faqs__grid,
/*   .rates-parent .r-vars-grid,
  .rates-parent .r-water-grid,
  .rates-parent .r-riders-callout, */
  .vendors-supplier-parent .vsp-contact__row,
  .vendors-supplier-parent .vsp-how__grid,
  .payment-assisment .pa-help-row,
  .payment-assisment .pa-programs-grid,
  .payment-assisment .pa-manage-grid,
  .global-need-assignment__inner.wp-block-columns,
  .new-serivces-parent .bpu-fees-row,
  .new-serivces-parent .bpu-cards,
  .parent-transer-serivces-inner .bpu-fees-row,
  .eletric-water-rate-parent .ewrh-videos,
  .billing-parent .billing-flexpay__steps{
    flex-direction:column !important;
    grid-template-columns:1fr !important;
    align-items:stretch !important;
  }
   .investing__card > *,
  .scams-section__grid > *, .pfc-split > *, .pfc-scam > *,
  .bpu-twocol > *, .bpu-media > *,
  .billing-hero__layout > *, .billing-mymeter__grid > *,
  .billing-flexpay__grid > *, .billing-help__grid > *,
  .billing-inner-video__row > *, .vsp-contact__row > *,
  .pa-help-row > *, .global-need-assignment__inner > *,
  .bpu-fees-row > *, .r-vars-grid > *, .r-water-grid > *{
    flex-basis:100% !important; width:100% !important; max-width:100% !important;
  }
   .investing__image img,
  .pfc-split__img img, .bpu-twocol__media img,
  .billing-hero__video, .billing-flexpay__video,
  .billing-inner-video__media, .vsp-contact__media img,
  .pa-help__media img, .global-need-assignment__media img,
  .bpu-fees-media img{ width:100% !important; max-width:100% !important; height:auto; }
	
}


.swahili .bpu-meter-card__numeral {
   font-size: 70px !important;
}
.myanmar .bpu-meter-card__numeral {
   font-size: 70px !important;
}

.swahili .bpu-outage-band__text {
    min-width: 400px;
}
.nepali .bpu-outage-band__text {
    min-width: 300px;
}
.hmong .bpu-outage-band__eyebrow {
	font-size: 17px !important;
}
.hmong .bpu-outage-band__title {
	font-size: 18px !important;align-content
}
.hmong .bpu-outage-band__number{
	font-size: 20px !important;
}
.hmong .bpu-outage-band__subtitle {
  font-size: 15px !important;
}
.hmong .bpu-outage-band__text {
    min-width: 420px;
}
.spanish .parent-for-customer .pfc-split {
    gap: clamp(24px, 3vw, 120px);
    
}
.spanish .parent-for-customer .pfc-feature__body {
    padding: 8px 28px 40px;
}
.hmong .parent-for-customer .pfc-card {
    
    min-height: 520px;
}
.swahili .parent-for-customer .pfc-card {
    min-height: 515px;
}
.swahili .footer__bottom {
    font-size: 16px;
 }
.spanish .parent-for-customer .pfc-card {
    min-height: 535px;
}
.myanmar .forpad {
    padding-left: 50px;
}
.hmong .forpad {
    padding-left: 50px;
}
.hmong .parent-for-customer .pfc-split
 {
    gap: clamp(24px, 3vw, 120px);
    
}
/* .hmong .pfc-scam__body {
    padding-top: 80px;
}
 */





/* newtab */

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.hero__card {
    width: 50%;
    max-width: 100%;
    padding: 20px;
    right: 0;
    top: 70px;
  }
	
	.ways__grid{
		display: flex;
    flex-wrap: wrap;
		justify-content:center;
		max-width: 100% !important;
    width: 100% !important;
		flex-direction: column;
	}
	
	.help-card {
		width: 70%;
    margin: 0 auto;
		padding: 10px;
	}
	
	.help-card h3{
		margin-bottom:0px;
		border-left: 1px solid #999999;
    padding-left: 15px;
		font-size: 22px;
    line-height: 30px;
	}
	
	.community__content {
  width: 60% !important;
}
	
	.community__card {
  display: flex !important;
		width:90% !important;
		max-width: 100% !important;
}
	
	 .community__media, .investing__image {
		 height: 100%;
	}
	.home .community {
		padding: 12px 0;
	}
	
	.features__grid{
		display: flex;
    flex-direction: column;
    width: 90%;
		
	}
	
	.feature-card .btn-solid {
    width: 100%;
    height: auto !important;
    font-size: 18px;
    padding: 0px;
  }
 
	

  /* ---------- Alert bar ---------- */ .alert-bar {
    padding: 10px 0;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    align-items: flex-start;
    gap: 8px;
  }
  .hero__card {
    gap: 15px;
  }
  .alert-bar__icon {
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }
  /* ---------- Mobile top strip — language switcher ---------- */ .mobile-top-strip {
    display: flex;
    align-items: center;
    padding: 8px var(--container-padding) 4px;
    background: rgba(255, 255, 255, 0.93);
  }
  .mobile-search__input:focus {
    outline: none !important;
  }
  /* ---------- Header main row: hamburger | LOGO (center) | search-icon ---------- */ .middle-header {
    background: rgba(255, 255, 255, 0.93);
    padding: 6px var(--container-padding) 16px;
    flex-direction: row;
    gap: 0;
  }
  .middle-left {
    flex: 1;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .middle-left .logo, .middle-left .custom-logo-link {
    grid-column: 2;
    justify-self: center;
    margin: 0 auto;
  }
  .middle-left .logo__title {
    font-size: 22px;
  }
  .middle-left .logo__tagline {
    font-size: 7px;
    letter-spacing: 1px;
  }
  .custom-logo-link img.custom-logo {
    max-height: 60px;
  }
  .mobile-menu-toggle {
    display: flex;
    grid-column: 1;
    justify-self: start;
  }
  .mobile-search-toggle {
    display: inline-flex;
    grid-column: 3;
    justify-self: end;
  }
  /* Hide desktop right-side cluster entirely on mobile */ .middle-right {
    display: none;
  }
  /* ---------- Mobile drawer (header-bottom collapsed by default) ---------- */ .header-bottom {
    display: none;
    background: var(--color-white);
    border-top: 1px solid var(--color-divider);
  }
  .header-bottom.is-open {
    display: block;
  }
  .header__nav {
    padding: 12px var(--container-padding) 18px;
    justify-content: flex-start;
  }
  .main-nav, .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .main-nav li {
    border-bottom: 1px solid var(--color-divider);
  }
  .main-nav li:last-child {
    border-bottom: 0;
  }
  .main-nav a {
    display: block;
    padding: 14px 0;
    font-size: 18px;
    line-height: 1.3;
  }
  .main-nav a::after {
    display: none;
  }
  /* ---------- Hero ---------- */ .hero {
    min-height: 0;
    background-position: center top;
  }
  .hero__inner {
    padding: 32px 0 28px;
    justify-content: center;
  }
  .hero__card {
    width:50%;
    max-width: 100%;
    padding: 22px;
    right: 0;
    top: 70px;
  }
	.hero{
		padding: 120px 0 100px;
	}
	
  .hero__top, .hero__eyebrow {
    font-size: 22px;
    line-height: 1.2;
  }
  .hero__bottom, .hero__heading {
    font-size: 36px;
    line-height: 1.05;
  }
  .hero__description {
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 0px;
  }
  .hero__cta {
    width: 100%;
	  font-size: 16px;
    max-width: 300px;
  }
  /* ---------- Outage hotline strip — visible on mobile ---------- */ .outage-strip {
    display: block;
  }
  /* ---------- Quick Links — 3 columns × 2 rows ---------- */ .quick-links {
    padding: 35px 50px 35px;
  }
  .quick-links__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .quick-link {
    padding: 22px 8px 18px;
    min-height: 150px;
  }
/*   .quick-link__icon {
    width: 50px;
    height: 50px;
  } */
  .quick-link__title {
    font-size: 14px;
    line-height: 1.2;
  }
  /* ---------- Ways We Can Help — icon + title ONLY (whole card clickable) ---------- */ .ways {
    padding: 36px 0 36px;
  }
  .section-heading, .ways__heading {
    font-size: 26px;
    line-height: 1.2;
    text-align: center;
  }
  .ways__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .help-card, .feature-card.help-card {
    position: relative;
    /* anchor for the stretched-link button */
    flex-direction: row;
    align-items: center;
    padding: 18px 22px;
    min-height: 0;
    gap: 24px;
  }
  .help-card__icon {
    width: 70px;
    height: 70px;
    margin: 0;
    flex-shrink: 0;
  }
  .help-card__title {
    font-size: 22px;
    line-height: 1.2;
    margin: 0;
    flex: 1;
    text-align: left;
  }
  /* Hide the description on mobile — design only shows icon + title */ .help-card__text {
    display: none;
  }
  /* Make the button an invisible click overlay covering the whole card. Keeps accessibility — the link still has its label for screen readers. */
	.help-card .btn-outline {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    z-index: 1;
		display:none;
  }
  /* ---------- Investing section — image left / content right (compact) ---------- */ .community, .investing {
    padding: 12px 0;
  }
  .community__card, .investing__card {
    grid-template-columns: 42% 1fr;
    gap: 20px;
    padding: 16px;
    align-items: center;
  }
  .community__media, .investing__image {
    min-height: 0;
    border-radius: 4px;
  }
  .community__content, .investing__content {
    padding: 0 0 0 16px;
  }
  .community__heading, .investing__content h2 {
    font-size: 20px;
    line-height: 28px;
    margin: 0 0 10px;
    word-break: break-word;
  }
  /* Mobile design only shows heading + button (no description) */ .community__text, .investing__content p {
    display: none;
  }
  .community .btn-solid, .investing .btn-solid {
    width: 100%;
    height: 40px;
    font-size: 14px;
    padding:0px 0px;
  }
  /* ---------- Bottom callout cards (.feature-card) — same image-left layout ---------- */ 
	.features {
    padding: 30px 0 28px;
  }
  .features__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .feature-card {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 20px;
    padding: 16px;
    align-items: center;
    flex-direction: unset;
    flex-wrap: nowrap;
  }
  .feature-card__media {
    height: 160px;
    min-height: 0;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
  }
  .feature-card__body {
    padding: 0 0 0 16px;
  }
	
	.home .container {
    padding: 20px 1px !important;
	}
  .feature-card__title {
    margin: 0 0 10px;
    flex: unset;
    font-size: 20px;
    line-height: 30px;
    word-break: break-word;
    color: #003971;
    font-weight: 700;
  }
  /* Hide description in callouts on mobile */ .feature-card__text {
    display: none;
  }
  .feature-card .btn-solid {
    width: 100%;
    height: 40px;
    font-size: 11px;
    padding:0px;
  }

	.site-footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0;
  }
  .footer__top, .footer__brand, .footer__main, .footer__newsletter-wrap {
    display: contents;
  }
  /* Hide everything not in the mobile design */ .footer-col, .footer__newsletter-title, .footer__newsletter-form, .footer__social-title {
    display: none;
  }
  /* Logo (first inside .footer__brand → now first inside .container) */ .site-footer .logo, .site-footer .custom-logo-link {
    order: 1;
    margin: 28px 0 18px;
  }
  .site-footer .logo__title {
    color: var(--color-blue);
  }
  /* Social icons row (extracted from .footer__newsletter-wrap) */ .footer__social-list {
    order: 2;
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 0 0 22px;
  }
  .footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-blue);
  }
  .footer__social-link svg {
    width: 28px;
    height: 28px;
  }
	
	.site-footer .container{
		display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
	}
	
	.footer__top, .footer__brand, .footer__main, .footer__newsletter-wrap {
        display: contents;
	}
	
	.footer-col, .footer__newsletter-title, .footer__newsletter-form, .footer__social-title {
        display: none;
    }
	
	    .footer__bottom {
        order: 5;
       
        margin-left:0;
        background: #999999;
        padding: 20px var(--container-padding);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        border-top: 0;
			        width: 100%;
    }
	
	.footer__bottom .footer__copyright {
        order: 3;
        margin: 0;
        font-size: 13px;
        color: #fff;
    }
	
	.footer__bottom .footer__ccr {
        order: 1;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 24px;
        letter-spacing: -0.01em;
        text-decoration-line: underline;
        color: #FFFFFF;
    }
	
	    .footer__bottom .footer__small-links

 {
        order: 2;
        margin: 0;
        font-size: 11px;
        color: #fff;
    }
	
	.site-footer {
        padding: 30px 0 20px;
    }
	
	.site-footer .logo, .site-footer .custom-logo-link {
        order: 1;
        margin: 28px 0 18px;
    }
	
	.footer__social-list {
        order: 2;
        display: flex;
        justify-content: center;
        gap: 16px;
        margin: 0 0 22px;
    }
	
	.btn-contact {
        order: 3;
        background: transparent;
        color: var(--color-green);
        border: 2px solid var(--color-green);
        width: 40%;
        max-width: 40%;
        height: 50px;
        margin: 0 auto 22px;
        padding: 0 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 16px;
        border-radius: 4px;
        transition: background-color 0.2s, color 0.2s;
    }
	
	.footer__address {
        order: 4;
        margin: 0 0 28px;
		    padding-bottom: 0px;
    }
	
	.footer__social-link svg {

    fill: currentColor;
}
	
	.out-section{
		display:block !important;
	}
	
 .feature-card__title {
    font-size: 22px;
    line-height: 26px;
    width: 60%;
}
	
.lang-switcher select{
padding: 10px 0px !important;
/* 		width: 100px !important; */
	}
  
 * {
    box-sizing: border-box;
  }
	

	
	.bpu-tree-cards {
    flex-direction: column;
}
	
.bpu-stat-v2 {
    width: 100% !important;
}	
	    .vendors-supplier-parent .vsp-procure__row.wp-block-columns {
        flex-direction: row !important;
        gap: 20px;
        max-width: 100% !important;
    }
.heroipad {
    padding-top: 150px !important;
	min-height: 500px !important;
}	
	
	
	.parent-for-customer .pfc-hero__bc{
		    margin: 0 0 10px;
		
	}
	
	.parent-for-customer .pfc-hero__title {
    font-size: 28px;
    line-height: 35px;
    margin: 0 0 8px;
}
	
	.parent-for-customer .pfc-hero__desc{
		    max-width: 100%;
	}
	
	.parent-for-customer .pfc-hero.wp-block-cover {
    min-height: 420px !important;
    align-items: center;
}
	
	.parent-for-customer .pfc-hero__inner {
    width: 100%;
    padding-top: 130px;
}
	
/* 	.myanmar .lang-switcher select {
    width: 100% !important;
} */

	 .pfc-scam__body {
    padding-top: 0px;
}
	
	
.billing-parent .billing-hero .wp-block-cover__inner-container {
        padding: 200px 20px 60px;
    }	
	
.wp-block-column.billing-breadcrumb__text.bolor.is-layout-constrained.wp-container-core-column-is-layout-b64f6cb2.wp-block-column-is-layout-constrained {
    padding: 0px 30px;
}
	
	.billing-parent .billing-ways__intro > .wp-block-column{
	text-align:center;
}
	
	.billing-parent .billing-section {
        padding: 5px 16px 40px;
    }
	
	
	.parent-billing-rate .pbr-hero__inner{
		padding:0px 10px !important;
	}
	
	.parent-billing-rate .pbr-hero.wp-block-cover {
    min-height: 450px !important;
    align-items: center;
}
	
	.parent-billing-rate .pbr-hero__bc {
  
    margin: 0 0 0px;
}
	
	.parent-billing-rate .pbr-hero .wp-block-cover__inner-container {
    width: 100%;
    padding-top: 120px;
}
	.global-hero-banner.wp-block-cover {
		min-height: 450px !important;
	}
	.global-hero-banner__inner {
        padding-top: 150px !important;
        min-height: 450px !important;
  
    }
	
	.rates-parent .r-water-grid .wp-block-column{
		flex: 1 1 calc(50% - 11px) !important;
	}
	
	.wp-block-cover.alignfull.has-custom-content-position.is-position-bottom-left.is-light.bpu-hero

 {
    min-height: 450px !important;
	 padding-bottom:50px;
}
	
	.bpu-outage-band__cta {
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0;
    margin: 0px;
}
	.bpu-outage-band{
		    gap: 20px;
		    margin: -40px auto 0 !important;
	}
	.bpu-hero__inner {
        padding: 0px !important;
        padding-bottom: 30px !important;
    }
	
	.bpu-outage-band__text {
    min-width: 100% !important;
}
	.bpu-outage-band__phone {
    min-width: 100% !important;
}
	
	.water-rw2 .wp-block-column-is-layout-flow.bpu-stat-v2{
		flex-basis: 0 !important;
		flex: 1 1 calc(50% - 11px) !important;
	}
	

	.bpu-lookup__text {
        padding: 32px 0 !important;
    }
	.b-for-all {
    padding-left: 20px !important;
    padding-top: 20px !important;
}
	.bpu-section.alignfull, .bpu-section{
		padding-top:25px !important;
	}
	.bpu-path-cards-3 .bpu-path-card{
		padding:25px !important;
	}
	
	.bpu-path-cards-3 .bpu-path-card{
		flex: 1 1 calc(48% - 12px) !important;
        max-width: calc(48% - 12px) !important;
	}
	
	.bpu-hero__title {
    font-size: 34px !important;
    line-height: 40px;
	}
	
	.bpu-breadcrumb{
		margin-bottom:12px !important;
	}
	
	.wp-block-group.ewrh-containers.is-layout-flow.wp-block-group-is-layout-flow {
    width: 100% !important;
    max-width: 95% !important;
    padding: 0px 15px;
}
	
	  .bpu-page .bpu-hero__title {

    padding-top: 5px;
  }
	
}


@media (min-width: 768px) and (max-width: 820px) {
	
	
	
}




/* newmobile */
/* ============================ Mobile : ≤767 ============================ */

@media (max-width:767px){
	
	

  /* EVERY multi-column row → 1 per row */
  .parent-billing-rate .pbr-qa, .parent-for-customer .pfc-qa,
  .parent-billing-rate .pbr-card, .parent-for-customer .pfc-card,
  .parent-billing-rate .pbr-feature, .parent-for-customer .pfc-feature,
  .bpu-resource-card, .bpu-stat, .bpu-stat-v2, .bpu-fact-card,
  .bpu-phone-grid-dark__col, .bpu-biz-card, .bpu-method-card,
  .bpu-stage-card, .bpu-protection-card, .bpu-tree-card,
  .bpu-maintenance-card, .bpu-meter-card, .bpu-path-card,
  .bpu-path-cards-3 .bpu-path-card,
  .rates-parent .r-tier-grid .wp-block-column,
  .vsp-procure__row .wp-block-column,
  .bpu-why-cards .wp-block-column{
    flex:1 1 100% !important; max-width:100% !important; width:100% !important;
  }
/*    .wp-block-columns.quick-links__grid, */
  .wp-block-columns.quick-links-grid, .wp-block-columns.programs__grid,
  .footer__main{
    grid-template-columns:1fr !important;
  }
  .rates-parent .r-tier-grid,
  .eletric-water-rate-parent .ewrh-links.wp-block-buttons{ grid-template-columns:1fr !important; }

  /* image/content splits + video rows → STACK */
   .wp-block-group.community__card,
  .wp-block-group.community__card.community__card--reverse,
  .wp-block-group.community__card.community__card--wide,
  .investing__card, .scams-section__grid, .wp-block-columns.scams-section__grid,
  .parent-for-customer .pfc-split, .parent-for-customer .pfc-scam,
  .bpu-twocol, .bpu-twocol--even, .bpu-media,
  .bpu-lookup-cols, .bpu-basics-cols, .bpu-help__grid,
  .bpu-mymeter__grid, .bpu-flexpay__grid, .bpu-fees-row,
  .bpu-maintenance-cols, .bpu-role-cards, .bpu-customer-resp-cols,
  .billing-parent .billing-hero__layout, .billing-parent .billing-mymeter__grid,
  .billing-parent .billing-ways__intro, .billing-parent .billing-flexpay__grid,
  .billing-parent .billing-help__grid,
  .billing-inner-parent .billing-inner-video__row,
  .billing-inner-parent .billing-inner-faqs__grid,
  .rates-parent .r-vars-grid, .rates-parent .r-water-grid, .rates-parent .r-riders-callout,
  .vendors-supplier-parent .vsp-contact__row, .vendors-supplier-parent .vsp-how__grid,
  .payment-assisment .pa-help-row, .payment-assisment .pa-programs-grid,
  .payment-assisment .pa-manage-grid,
  .global-need-assignment__inner.wp-block-columns,
  .new-serivces-parent .bpu-fees-row, .new-serivces-parent .bpu-cards,
  .parent-transer-serivces-inner .bpu-fees-row,
  .eletric-water-rate-parent .ewrh-videos,
  .billing-parent .billing-flexpay__steps{
    flex-direction:column !important;
    grid-template-columns:1fr !important;
    align-items:stretch !important;
  }
  .community__card > *, .investing__card > *, .scams-section__grid > *,
  .pfc-split > *, .pfc-scam > *, .bpu-twocol > *, .bpu-media > *,
  .billing-hero__layout > *, .billing-mymeter__grid > *,
  .billing-flexpay__grid > *, .billing-help__grid > *,
  .billing-inner-video__row > *, .vsp-contact__row > *,
  .pa-help-row > *, .global-need-assignment__inner > *,
  .bpu-fees-row > *, .r-vars-grid > *, .r-water-grid > *{
    flex-basis:100% !important; width:100% !important; max-width:100% !important;
  }
  .community__media img, .investing__image img, .pfc-split__img img,
  .bpu-twocol__media img, .billing-hero__video, .billing-flexpay__video,
  .billing-inner-video__media, .vsp-contact__media img, .pa-help__media img,
  .global-need-assignment__media img, .bpu-fees-media img{
    width:100% !important; max-width:100% !important; height:auto;
  }
	.hero{
		padding: 115px 0 100px;
	}
	
	.help-card, .feature-card.help-card{
		position: relative;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    min-height: 0;
    gap: 15px;
	}
	
	.ways__grid {
 
  gap: 10px;
  margin-top: 20px;
  width: 90%;
  margin: 0 auto;
}
	
	.section-heading, .ways__heading {
    font-size: 22px;
    line-height: 1.2;
    text-align: center;
  }
	
	.home .community{
		padding:0px 12px;
	}
	
	
	.features {
    padding: 28px 0px 28px;
  }
	
	.features__grid{
		gap: 14px;
    display: flex;
    flex-direction: column;
		width: 90%;
    margin: 25px auto;
	}
	
	.feature-card__sub_title.BOARD.MEETINGS, .feature-card__sub_title.STAY.INFORMED {
  width: 100%;
  height: auto;

  font-size: 12px;
  line-height: 15px;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
	 .community__heading, .investing__content h2 {
    font-size: 18px;
    line-height: 20px;
    margin: 0 0 0px;
    word-break: break-word;
  }
	
	.feature-heading{
		margin-bottom:25px;
	}
	
	.feature-card .btn-solid{
		height:auto;
		font-size:11px;
	}
	
	.quick-links__grid{
		padding: 0px 10px;
	}
	
	 .help-card h3 {
    margin-bottom: 0px !important;
    font-size: 18px;
    line-height: 30px;
    border-left: 1px solid #999999;
    padding-left: 15px;
  }
	
	.hmong .quick-link__title {
    font-size: 14px;
    line-height: 16px;
}
	.site-footer .container{
		display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
	}
	
	.footer__top, .footer__brand, .footer__main, .footer__newsletter-wrap {
        display: contents;
	}
	
	.footer-col, .footer__newsletter-title, .footer__newsletter-form, .footer__social-title {
        display: none;
    }
	
	    .footer__bottom {
        order: 5;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        background: #999999;
        padding: 20px var(--container-padding);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        border-top: 0;
    }
	
	.footer__bottom .footer__copyright {
        order: 3;
        margin: 0;
        font-size: 13px;
        color: #fff;
    }
	
	.footer__bottom .footer__ccr {
        order: 1;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 24px;
        letter-spacing: -0.01em;
        text-decoration-line: underline;
        color: #FFFFFF;
    }
	
	    .footer__bottom .footer__small-links

 {
        order: 2;
        margin: 0;
        font-size: 11px;
        color: #fff;
    }
	
	.site-footer {
        padding: 30px 0 20px;
    }
	
	.site-footer .logo, .site-footer .custom-logo-link {
        order: 1;
        margin: 28px 0 18px;
    }
	
	.footer__social-list {
        order: 2;
        display: flex;
        justify-content: center;
        gap: 16px;
        margin: 0 0 22px;
    }
	
	.btn-contact {
        order: 3;
        background: transparent;
        color: var(--color-green);
        border: 2px solid var(--color-green);
        width: 80%;
        max-width: 80%;
        height: 45px;
        margin: 0 auto 22px;
        padding: 0 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 16px;
        border-radius: 4px;
        transition: background-color 0.2s, color 0.2s;
    }
	
	.footer__address {
        order: 4;
        margin: 0 0 28px;
		    padding-bottom: 0px;
    }
	
	.footer__social-link svg {

    fill: currentColor;
}
	
	.out-section{
		display:block !important;
		padding: 10px;
	}
	
	.out-rw .out-heading, .out-rw p {

    font-size: 12px;
    line-height: 20px;
   
}
	
	.lang-switcher select{
		padding: 10px 0px !important;
/* 		width: 100px !important; */
	}
	
	.pbr-eyebrow{
		font-size: 12px;
	}
	.hmong .help-card h3

 {
    font-size: 18px;
    line-height: 22px;
}
	
	.footer__bottom .footer__small-links{
		line-height:14px;
	}
	
	.myanmar .hero__card h1 {
    font-size: 22px;
    line-height: 30px;
}
	
	.hero__cta {
        width: 100%;
        max-width: 100%;
	}  
	
	.myanmar .community__heading {
    font-size: 15px;
    line-height: 20px;
    margin: 0 0 12px;
}
	.pbr-eyebrow{
		
		font-size: 10px;
	}
	.myanmar .feature-card__title {
    font-size: 16px !important;
    line-height: 22px;
}
	
	.community__card, .investing__card, .feature-card {
        grid-template-columns: 50% 1fr;
        gap: 10px;
        padding: 10px;
	}
	
	.myanmar .section-heading {
    font-size: 16px;
    line-height: 22px;
}
	.myanmar .feature-card__body {
    padding: 30px 5px;
}
	
	.feature-card__sub_title.BOARD.MEETINGS, .feature-card__sub_title.STAY.INFORMED{
		font-size: 10px;
        line-height: 15px;
	}
	
	 .billing-parent .billing-hero .wp-block-cover__inner-container {
        padding: 180px 16px 30px;
    }

.herophone {
    min-height: 400px !important;
	padding-top: 150px !important;
}
/* .global-hero-banner__inner {
    padding-top: 50px !important;
} */
.wp-block-group.bpu-callout.bpu-callout--ondark.is-layout-constrained.wp-block-group-is-layout-constrained {
    width: 100% !important;
}	

	
	.parent-for-customer .pfc-hero__bc{
		    margin: 0 0 10px;
		
	}
	
	.parent-for-customer .pfc-hero__title {
    font-size: 28px;
    line-height: 35px;
    margin: 0 0 8px;
}
	
	.parent-for-customer .pfc-hero__desc{
		    max-width: 100%;
	}
	
	.parent-for-customer .pfc-hero.wp-block-cover {
    min-height: 420px !important;
    align-items: center;
}
	
	.parent-for-customer .pfc-hero__inner {
    width: 100%;
    padding-top: 130px;
}
	
		.myanmar .lang-switcher select {
    width: 100% !important;
}
	
 .pfc-scam__body {
    padding-top: 0px;
}

	
	    .padtext, .forpad {
      
        padding-left: 0px !important;
       
    }
	
	.parent-for-customer .pfc-head {

    max-width: 100%;

    margin: 0 auto 30px;
}
	.parent-for-customer .pfc-h2 {

    font-size: 22px;
    line-height: 1.2;
  
}
	
	.parent-for-customer .pfc-feature__body {
        padding: 32px 24px  !important;
    }
	
	.padtext {
    padding-right: 0;
    margin: 0;
}
	
	.imgprotect img {
    margin-left: 0 !important;
}
	
	.parent-for-customer .pfc-section {
 
    padding-block: clamp(0px, 6vw, 60px);

	}
	.quick-link__icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}
	
	
 .quick-link__title, .quick-link__label, .quick-link .quick-link__label {
    font-size: 11px;
    line-height: 15px;
}
	
	.billing-parent .billing-hero {
        min-height: 450px !important;
    }
	
	.billing-parent .billing-hero__title{
		font-size: 28px;
        line-height: 34px;
        padding-top: 0px;
	}

.wp-block-column.billing-breadcrumb__text.bolor.is-layout-constrained.wp-container-core-column-is-layout-b64f6cb2.wp-block-column-is-layout-constrained {
    padding: 0px 30px;
}
.billing-parent .billing-ways__intro > .wp-block-column{
	text-align:center;
}
.billing-parent .billing-section {
        padding: 5px 16px 40px;
    }
	
	.parent-billing-rate .pbr-hero__inner{
		padding:0px 10px !important;
	}
	
	.parent-billing-rate .pbr-hero.wp-block-cover {
    min-height: 450px !important;
    align-items: center;
}
	
	.parent-billing-rate .pbr-hero__bc {
  
    margin: 0 0 0px;
}
	.parent-billing-rate .pbr-hero .wp-block-cover__inner-container {
    width: 100%;
    padding-top: 120px !important;
}
	.parent-billing-rate .pbr-hero__bc {
    color: #fff;
		font-size: 17px;
	}
	
	.global-hero-banner.wp-block-cover {
		min-height: 450px !important;
	}
	.global-hero-banner__inner {
        padding-top: 150px !important;
        min-height: 450px !important;
  
    }
	.bpu-outage-band{
		    gap: 20px;
		    margin: -30px auto 0 !important;
	}
	
	.bpu-hero__inner {
        padding: 0px !important;
        padding-bottom: 30px !important;
    }
	
	.b-for-all {
    padding-left: 20px !important;
    padding-top: 20px;
}
	.bpu-hero .wp-block-cover__inner-container {
        padding-bottom: 00px !important;
    }
	
		.wp-block-group.ewrh-containers.is-layout-flow.wp-block-group-is-layout-flow {
    width: 100% !important;
    max-width: 95% !important;
    padding: 0px 10px;
}
	
	.post-2004 .herophone, .post-9101 .herophone {
    padding: 0px !important;
}
	
	.bpu-hero1 .bpu-hero__inner {
    padding-bottom: 50px !important;
}
	
	
	
}

/*****Megaaaaaaaaaaaaa meu****/

.header-bottom {
	position: relative;   /* mega panel ka positioning context ye banega */
}
 .main-nav > ul {  position: relative; } 
/* .main-nav .menu-item { position: relative; } */
.main-nav .menu-link { font-weight: 700; color: #0b3d5c; text-decoration: none; display: inline-block; }
.main-nav .has-mega-menu > .menu-link { border-bottom: 2px solid transparent; }
.main-nav .has-mega-menu:hover > .menu-link,
.main-nav .has-mega-menu:focus-within > .menu-link { border-bottom-color: #6b8f3c; }

/* PURANA - ye hata do ya comment out karo */
.main-nav .menu-item { 
	/* position: relative;  ← YE LINE HATANI HAI */
}

/* Positioning context ab yahan hoga */
.header-bottom {
	position: relative;
	width: 100%;
}

.mega-menu-panel {
	display: none;
	position: absolute;
	width: 1650px;
	max-width: 96vw;
	left: 50%;
	transform: translateX(-50%);
	top: 100%;
	background: #FFFFFF;
	border: 1px solid #D9DBE0;
	border-top:0px !important;
	box-shadow: 0px 10px 28px rgba(0, 0, 0, 0.12);
	border-radius: 0px 0px 12px 12px;
	z-index: 999;
/* background: rgba(255, 255, 255, 0.93);
    opacity: 0.94;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.15); */
	
}

.has-mega-menu:hover .mega-menu-panel,
.has-mega-menu:focus-within .mega-menu-panel {
	display: block;
}
/* 
.mega-menu-inner {
	display: grid;
	grid-template-columns: 250px repeat(4, minmax(160px, 1fr)) 300px;
	gap: 20px;
	padding: 0px 25px;
	align-items: start;
/* background: #fff; */
/* 	margin-top:20px; */
} */
.parent-for-customer .pfc-feature__img {
    margin: 0;
    line-height: 0;
    width: 100%;
}

/**ABOUT meag menu**/
.mega-menu-panel.panel-about-menu-inner,
.mega-menu-panel.sobre-bpu-menu-inner{
    width: 1500px;
}

.mega-menu-panel.panel-about-menu-inner .mega-menu-inner,
.mega-menu-panel.sobre-bpu-menu-inner .mega-menu-inner{
		display: grid;
	grid-template-columns: 270px repeat(4, minmax(234px, 1fr)) 180px;
	gap: 0px;
	padding: 0px 25px;
	align-items: start;0
}

.mega-menu-col.policies {
    border: 0px !important;
}
.mega-menu-col.construction_and-renovation,
.mega-menu-col.construccion-y-renovacion{
    border:0px !important;
}

.mega-menu-col.policies-menus, .mega-menu-col.politicas {
    border: 0px !important;
}
/*****/

/**ABOUT meag menu**/
.mega-menu-panel.for-customers-menu-inner , .mega-menu-panel.para-clientes-menu-inner {
    width: 1800px;
}

.mega-menu-panel.for-customers-menu-inner .mega-menu-inner, 
.mega-menu-panel.para-clientes-menu-inner .mega-menu-inner {
		display: grid;
	grid-template-columns: 238px repeat(4, minmax(300px, 1fr)) 290px;
	gap: 0px;
	padding: 0px 0px 0px 20px;
	align-items: start;0
}

.mega-menu-col.policies {
    border: none !important;
}


/**ABOUT meag menu**/
.mega-menu-panel.billing-and-rates-menu-inner,
.mega-menu-panel.facturacion-y-tarifas-menu-inner {
    width: 1280px;
}

.mega-menu-panel.billing-and-rates-menu-inner .mega-menu-inner,
.mega-menu-panel.facturacion-y-tarifas-menu-inner .mega-menu-inner {
		display: grid;
    grid-template-columns: 320px repeat(2, minmax(300px, 1fr)) 20px;
	gap: 0px;
	padding: 0px 20px;
	align-items: start;0
}


.mega-menu-col.policies {
    border: none !important;
}




.mega-menu-panel.panel-helpcenter-menu-inner ,
.mega-menu-panel.centro-de-ayuda-menu-inner{
    width: 1440px;
}

.mega-menu-panel.panel-helpcenter-menu-inner .mega-menu-inner,
.mega-menu-panel.centro-de-ayuda-menu-inner .mega-menu-inner{
		display: grid;
    grid-template-columns: 270px repeat(3, minmax(200px, 1fr)) 20px;
	gap: 0px;
	padding: 0px 20px;
	align-items: start;0
}


.mega-menu-col.policies {
    border: none !important;
}


/*****/

.mega-menu-col.rates ,.mega-menu-col.informes{
    border: 0px !important;
}
.mega-menu-intro {
    border-right: 1px solid #D9DBE0;
	height:100% !important;
}
.mega-menu-intro .mega-menu-title {font-style: normal;
font-weight: 700;
font-size: 28px;
line-height: 28px;
color: #7CA650;
 margin:0px; margin-bottom:15px; }
.mega-menu-intro p {   
  font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #1D1D1D;
	margin:0px;
} 
.parent-for-customer .pfc-feature__img {
    margin: 0;
    line-height: 0;
    width: 100% !important;
}
.mega-menu-col-title,
.mega-menu-col-title--link { color: #0b3d5c; font-size: 15px; margin-bottom: 12px; font-weight: 700; text-decoration: none; display: block; }
.mega-menu-col-links { list-style: none; margin: 0; padding: 0; }
.mega-menu-col-links li { margin-bottom: 0px; }
.mega-menu-col-links a { color: #333; text-decoration: none; font-size: 14px; }
.mega-menu-col-links a:hover { text-decoration: underline; }

.mega-btn {
	display: block;
	background: #002B7F;
	color: #fff;
	text-decoration: none;
	text-align: center;
	padding: 10px 16px;
	border-radius: 3px;
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 10px;
}
.mega-menu-buttons {
	grid-column: 6;
	display: flex;
	flex-direction: column;
	gap: 15px;    
	padding: 40px 15px
	/* yahi control karega button ke beech gap */
/* 	align-self: center;
	align-items:center; */
}

.mega-menu-col.reports {
    border: 0px !important;
}

a.mega-btn {
	/* grid-column: 6;  ← ye line hata do, ab parent wrapper handle karta hai */
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: #002B7F;
	color: #fff !important;
	text-decoration: none;
	text-align: center;
/* 	white-space: nowrap; */
	font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #FFFFFF !important;
    padding: 10px 20px;
	margin-bottom: 0;      
/* 	word-wrap: */
	/* wrapper ka gap use ho raha hai, isliye ye 0 kardo */
}
a.mega-menu-col-title {
    width: 100%;
    display: block;
}
.mega-btn:hover { background: #79a04e; }

.mega-menu-col {
	min-width: 0;
	padding: 40px 20px;
    border-right: 1px solid #D9DBE0;
	height:100%;
}

.mega-menu-col-title,
.mega-menu-col-title--link {
	color: #0b3d5c;
	font-size: 20px !important;
	font-weight: 700 !important;;
	text-decoration: none;
	display: block;
	margin: 0 0 15px;
}
.mega-menu-col-title:hover,
.mega-menu-col-title--link:hover {
	text-decoration: underline;
}

.mega-menu-col-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega-menu-inner .mega-menu-col-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px;
} 


.mega-menu-col-links li {
	margin: 0 0 12px;
	padding: 0;
	line-height: 1.4;
	list-style: none;
}

.mega-menu-col-links a {
	text-decoration: none;;
	display: block;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #1D1D1D !important;
}
.mega-menu-col-links a:hover {
	text-decoration: underline;
	color: #0b3d5c;
}

.mega-menu-col a:hover {
  text-decoration: none !important;
	color:#0b3d5c !important;
}

.mega-menu-intro {
    border-right: 1px solid #D9DBE0;
    padding: 40px 30px 40px 0;
}
.mega-menu-col.policies-menus.menu-item-type-custom.menu-item-object-custom

 {
    border: none;
}

.mega-menu-panel{
		margin-top: 20px;
	padding-top: 0;
}
.mega-menu-panel::before {
	content: '';
	position: absolute;
	top: -20px;
	left: 0;
	width: 100%;
	height: 20px;
	background: transparent;
}


@media only screen and (min-width: 1480px) and (max-width: 1900px) {
	.mega-menu-panel.for-customers-menu-inner

 {
     width: 1480px;
    max-width: 100vw
}
	
}

	@media only screen and (min-width: 1140px) and (max-width: 1479px) {
		
		.container {
    padding: 60px 20px;
    max-width: 1200px;

		}
		
		.middle-header{
			  max-width: 1200px
		}

.mega-menu-panel.for-customers-menu-inner

 {
     width: 1200px;
    max-width: 100vw
} 
		
		
}

/* Mobile: 360px to 767px */
@media (min-width: 360px) and (max-width: 767px) {
   
}

/* Tablet / iPad: 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
   
	.parent-for-customer .pfc-feature {
    flex: 1 1 calc(50% - 16px);
    min-width: 46%;
	}
	
	.forpad {
    padding-left: 20px;
}
	
	.parent-for-customer .pfc-features{
		gap:20px;
	 
	 
	}
	
}



/* ==================  END UNIFIED RESPONSIVE LAYER  ================== */