/* =====================================================================
   GET PROPANE REFILL — FULL FINAL CLEAN COLOR + CONTRAST OVERRIDE
   Load this file AFTER assets/css/style.css.

   RULES:
   1. Cards / rectangles never change, lift, rotate or recolor on hover.
   2. Blue / navy / red surfaces always use white text and vector icons.
   3. White / light-blue surfaces use dark text.
   4. Blue and red buttons use independent button text color.
   5. Only real buttons have a hover color: black background + white text.
   6. Card headline color is completely independent from body text.
   ===================================================================== */

:root {
  /* ================================================================
     INDEPENDENT TEXT COLOR CONTROLS
     Change these individually.
     ================================================================ */

  /* Hero H1 */
  --gpr-h1-headline-color: #ffffff;

  /* General headings */
  --gpr-heading-text-color: #12263a;

  /* CARD HEADLINES — COMPLETELY INDEPENDENT */
  --gpr-card-heading-color: #12263a;

  /* General body / paragraph text */
  --gpr-text: #526879;

  /* Blue / red / telephone button text */
  --gpr-button-text-color: #ffffff;

  /* White / light button text */
  --gpr-light-button-text-color: #072845;

  /* Text directly placed on blue/navy/red surfaces */
  --gpr-blue-surface-text-color: #ffffff;

  /* Brand colors */
  --gpr-blue: #0067b1;
  --gpr-blue-deep: #072845;
  --gpr-light-blue: #eaf4fb;
  --gpr-red: #d22630;
  --gpr-black: #111820;
  --gpr-white: #ffffff;
  --gpr-muted: #526879;
  --gpr-border: #c8d9e6;
}


/* =====================================================================
   A. STATIC RECTANGLES — NO HOVER OR MOTION
   ===================================================================== */

html body[class][class][class][class] main :is(
  article,
  .motion-card,
  .outline-card,
  .journey-card,
  .topic-card,
  .directory-card,
  .service-directory-card,
  .service-card,
  .resource-card,
  .related-call-card,
  .application-card,
  .provider-card,
  .propane-card,
  .feature-card,
  .choice-card,
  .provider-feature-link,
  .related-info-card,
  .pricing-quote-card,
  .pricing-model-card,
  .pricing-model-lane,
  .pricing-ready-item,
  .sig-tile,
  .sig-ribbon-item,
  .sig-stage-card,
  .sig-compare-side,
  .sig-compare-bridge,
  .v33-tile,
  .v33-feature-card,
  .v36-card,
  .v37-card,
  .v38-card,
  .readiness-lane,
  .fresh-a-cards > *,
  .service-rail > a,
  .energy-board-grid > article,
  .business-demand-tiles > article,
  .about-flow-track > article,
  .about-fit-bento > article,
  .rhythm-track > article,
  .usecase-grid > article,
  .principle-grid > article,
  .v33-check-grid > div,
  .v33-confirm-cards > article,
  .v33-map-cards > article,
  .v33-signal-cards > article,
  .v33-boundary-grid > article
),
html body[class][class][class][class] main :is(
  article,
  .motion-card,
  .outline-card,
  .journey-card,
  .topic-card,
  .directory-card,
  .service-directory-card,
  .service-card,
  .resource-card,
  .related-call-card,
  .application-card,
  .provider-card,
  .propane-card,
  .feature-card,
  .choice-card,
  .provider-feature-link,
  .related-info-card,
  .pricing-quote-card,
  .pricing-model-card,
  .pricing-model-lane,
  .pricing-ready-item,
  .sig-tile,
  .sig-ribbon-item,
  .sig-stage-card,
  .sig-compare-side,
  .sig-compare-bridge,
  .v33-tile,
  .v33-feature-card,
  .v36-card,
  .v37-card,
  .v38-card,
  .readiness-lane,
  .fresh-a-cards > *,
  .service-rail > a,
  .energy-board-grid > article,
  .business-demand-tiles > article,
  .about-flow-track > article,
  .about-fit-bento > article,
  .rhythm-track > article,
  .usecase-grid > article,
  .principle-grid > article,
  .v33-check-grid > div,
  .v33-confirm-cards > article,
  .v33-map-cards > article,
  .v33-signal-cards > article,
  .v33-boundary-grid > article
):hover {
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  filter: none !important;
  box-shadow: none !important;
  animation: none !important;
  transition: none !important;
}

html body[class][class][class][class] main :is(
  article,
  .motion-card,
  .outline-card,
  .journey-card,
  .topic-card,
  .directory-card,
  .service-directory-card,
  .service-card,
  .resource-card,
  .related-call-card,
  .application-card,
  .provider-card,
  .propane-card,
  .feature-card,
  .choice-card,
  .related-info-card,
  .pricing-quote-card,
  .pricing-model-card,
  .pricing-model-lane,
  .pricing-ready-item,
  .sig-tile,
  .sig-ribbon-item,
  .sig-stage-card,
  .sig-compare-side,
  .sig-compare-bridge,
  .v33-tile,
  .v33-feature-card,
  .v36-card,
  .v37-card,
  .v38-card,
  .service-rail > a,
  .energy-board-grid > article,
  .business-demand-tiles > article,
  .about-flow-track > article,
  .about-fit-bento > article,
  .rhythm-track > article,
  .usecase-grid > article,
  .principle-grid > article
)::before,
html body[class][class][class][class] main :is(
  article,
  .motion-card,
  .outline-card,
  .journey-card,
  .topic-card,
  .directory-card,
  .service-directory-card,
  .service-card,
  .resource-card,
  .related-call-card,
  .application-card,
  .provider-card,
  .propane-card,
  .feature-card,
  .choice-card,
  .related-info-card,
  .pricing-quote-card,
  .pricing-model-card,
  .pricing-model-lane,
  .pricing-ready-item,
  .sig-tile,
  .sig-ribbon-item,
  .sig-stage-card,
  .sig-compare-side,
  .sig-compare-bridge,
  .v33-tile,
  .v33-feature-card,
  .v36-card,
  .v37-card,
  .v38-card,
  .service-rail > a,
  .energy-board-grid > article,
  .business-demand-tiles > article,
  .about-flow-track > article,
  .about-fit-bento > article,
  .rhythm-track > article,
  .usecase-grid > article,
  .principle-grid > article
)::after,
html body[class][class][class][class] main :is(
  article,
  .motion-card,
  .outline-card,
  .journey-card,
  .topic-card,
  .directory-card,
  .service-directory-card,
  .service-card,
  .resource-card,
  .related-call-card,
  .application-card,
  .provider-card,
  .propane-card,
  .feature-card,
  .choice-card,
  .related-info-card,
  .pricing-quote-card,
  .pricing-model-card,
  .pricing-model-lane,
  .pricing-ready-item,
  .sig-tile,
  .sig-ribbon-item,
  .sig-stage-card,
  .sig-compare-side,
  .sig-compare-bridge,
  .v33-tile,
  .v33-feature-card,
  .v36-card,
  .v37-card,
  .v38-card,
  .service-rail > a,
  .energy-board-grid > article,
  .business-demand-tiles > article,
  .about-flow-track > article,
  .about-fit-bento > article,
  .rhythm-track > article,
  .usecase-grid > article,
  .principle-grid > article
):hover::before,
html body[class][class][class][class] main :is(
  article,
  .motion-card,
  .outline-card,
  .journey-card,
  .topic-card,
  .directory-card,
  .service-directory-card,
  .service-card,
  .resource-card,
  .related-call-card,
  .application-card,
  .provider-card,
  .propane-card,
  .feature-card,
  .choice-card,
  .related-info-card,
  .pricing-quote-card,
  .pricing-model-card,
  .pricing-model-lane,
  .pricing-ready-item,
  .sig-tile,
  .sig-ribbon-item,
  .sig-stage-card,
  .sig-compare-side,
  .sig-compare-bridge,
  .v33-tile,
  .v33-feature-card,
  .v36-card,
  .v37-card,
  .v38-card,
  .service-rail > a,
  .energy-board-grid > article,
  .business-demand-tiles > article,
  .about-flow-track > article,
  .about-fit-bento > article,
  .rhythm-track > article,
  .usecase-grid > article,
  .principle-grid > article
):hover::after {
  transform: none !important;
  animation: none !important;
  transition: none !important;
}


/* Icons inside static rectangles do not spin, move or resize. */

html body[class][class][class][class] main article:hover :is(
  .icon,
  .motion-icon,
  .icon-circle,
  .icon-chip,
  .card-icon,
  .service-icon,
  .energy-icon,
  .topic-icon-circle,
  .sig-icon-mark,
  .sig-orb,
  .v33-icon,
  .v33-round-icon,
  .v33-symbol,
  .v36-card-icon,
  .v37-card-icon,
  .v38-topic-icon
) {
  transform: none !important;
  animation: none !important;
}


/* =====================================================================
   B. WHITE / LIGHT RECTANGLES — DARK TEXT, SAME ON HOVER
   ===================================================================== */

html body[class][class][class][class] main :is(
  .white-card,
  .card-white,
  .panel-white,
  .form-card,
  .form-panel,
  .quick-call-card,
  .amerigas-call-card,
  .amerigas-brand-card,
  .amerigas-card,
  .provider-feature-link,
  .outline-card,
  .related-info-card,
  .directory-card,
  .journey-card:not(.dark-card):not(.blue-card),
  .topic-card:not(.dark-card):not(.blue-card),
  .service-card:not(.dark-card):not(.blue-card),
  .resource-card,
  .related-call-card:not(.dark-card):not(.blue-card),
  .application-card,
  .provider-card,
  .propane-card,
  .feature-card:not(.dark-card):not(.blue-card),
  .choice-card,
  .service-directory-card.tone-clean,
  .v33-tile:not(.v33-tile-dark):not(.v33-tile-blue),
  .v33-feature-card:not(.v33-dark):not(.v33-blue),
  .v36-card:not(.dark):not(.blue),
  .v37-card:not(.dark):not(.blue),
  .v38-card:not(.dark):not(.blue)
),
html body[class][class][class][class] main :is(
  .white-card,
  .card-white,
  .panel-white,
  .form-card,
  .form-panel,
  .quick-call-card,
  .amerigas-call-card,
  .amerigas-brand-card,
  .amerigas-card,
  .provider-feature-link,
  .outline-card,
  .related-info-card,
  .directory-card,
  .journey-card:not(.dark-card):not(.blue-card),
  .topic-card:not(.dark-card):not(.blue-card),
  .service-card:not(.dark-card):not(.blue-card),
  .resource-card,
  .related-call-card:not(.dark-card):not(.blue-card),
  .application-card,
  .provider-card,
  .propane-card,
  .feature-card:not(.dark-card):not(.blue-card),
  .choice-card,
  .service-directory-card.tone-clean,
  .v33-tile:not(.v33-tile-dark):not(.v33-tile-blue),
  .v33-feature-card:not(.v33-dark):not(.v33-blue),
  .v36-card:not(.dark):not(.blue),
  .v37-card:not(.dark):not(.blue),
  .v38-card:not(.dark):not(.blue)
):hover {
  background: var(--gpr-white) !important;
  border-color: var(--gpr-border) !important;
  color: var(--gpr-text) !important;
}


/* =====================================================================
   C. BLUE / NAVY RECTANGLES — WHITE TEXT, SAME ON HOVER
   ===================================================================== */

html body[class][class][class][class] :is(
  .blue-card,
  .card-blue,
  .bg-blue,
  .is-blue,
  .primary-card,
  .dark-card,
  .card-dark,
  .bg-dark,
  .is-dark,
  .hero-dark,
  .hero-poster,
  .process-band,
  .prep-section,
  .directory-break,
  .service-industrial,
  .final-cta,
  .final-cta-box,
  .sitewide-final-cta,
  .business-verify-board,
  .about-propane-boundary,
  .services-route-map,
  .sig-family-2,
  .sell-readiness-weave,
  .sell-signal-dark,
  .sell-decision-dark,
  .v33-blue,
  .v33-dark,
  .v33-force-dark,
  .v33-tile-blue,
  .v33-tile-dark,
  .v33-prep,
  .v33-signals,
  .mission-strip,
  .faq-side-note,
  .about-boundary-board article.confirm,
  .sig-mosaic .sig-tile-1,
  .sig-stage-stack .card-1,
  .energy-board-grid article:nth-child(2)
),
html body[class][class][class][class] :is(
  .blue-card,
  .card-blue,
  .bg-blue,
  .is-blue,
  .primary-card,
  .dark-card,
  .card-dark,
  .bg-dark,
  .is-dark,
  .hero-dark,
  .hero-poster,
  .process-band,
  .prep-section,
  .directory-break,
  .service-industrial,
  .final-cta,
  .final-cta-box,
  .sitewide-final-cta,
  .business-verify-board,
  .about-propane-boundary,
  .services-route-map,
  .sig-family-2,
  .sell-readiness-weave,
  .sell-signal-dark,
  .sell-decision-dark,
  .v33-blue,
  .v33-dark,
  .v33-force-dark,
  .v33-tile-blue,
  .v33-tile-dark,
  .v33-prep,
  .v33-signals,
  .mission-strip,
  .faq-side-note,
  .about-boundary-board article.confirm,
  .sig-mosaic .sig-tile-1,
  .sig-stage-stack .card-1,
  .energy-board-grid article:nth-child(2)
):hover {
  background: var(--gpr-blue) !important;
  border-color: var(--gpr-blue) !important;
  color: var(--gpr-white) !important;
}


/* Blue surface text */

html body[class][class][class][class] :is(
  .blue-card,
  .card-blue,
  .bg-blue,
  .is-blue,
  .primary-card,
  .dark-card,
  .card-dark,
  .bg-dark,
  .is-dark,
  .hero-dark,
  .hero-poster,
  .process-band,
  .prep-section,
  .directory-break,
  .service-industrial,
  .final-cta,
  .final-cta-box,
  .sitewide-final-cta,
  .business-verify-board,
  .about-propane-boundary,
  .services-route-map,
  .sig-family-2,
  .sell-readiness-weave,
  .sell-signal-dark,
  .sell-decision-dark,
  .v33-blue,
  .v33-dark,
  .v33-force-dark,
  .v33-tile-blue,
  .v33-tile-dark,
  .v33-prep,
  .v33-signals,
  .mission-strip,
  .faq-side-note,
  .about-boundary-board article.confirm,
  .sig-mosaic .sig-tile-1,
  .sig-stage-stack .card-1,
  .energy-board-grid article:nth-child(2)
) :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  a,
  strong,
  b,
  span,
  small,
  label,
  dt,
  dd
) {
  color: var(--gpr-blue-surface-text-color) !important;
}


/* =====================================================================
   D. RED RECTANGLES — WHITE TEXT, SAME ON HOVER
   ===================================================================== */

html body[class][class][class][class] :is(
  .red-card,
  .card-red,
  .bg-red,
  .is-red
),
html body[class][class][class][class] :is(
  .red-card,
  .card-red,
  .bg-red,
  .is-red
):hover {
  background: var(--gpr-red) !important;
  border-color: var(--gpr-red) !important;
  color: var(--gpr-white) !important;
  transform: none !important;
}

html body[class][class][class][class] :is(
  .red-card,
  .card-red,
  .bg-red,
  .is-red
) :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  a,
  strong,
  b,
  span,
  small,
  label
) {
  color: var(--gpr-white) !important;
}


/* =====================================================================
   E. CLEAN VECTOR ICONS
   ===================================================================== */

html body[class][class][class][class] :is(
  .icon-box,
  .icon-wrap,
  .icon-circle,
  .icon-chip,
  .card-icon,
  .topic-icon-circle,
  .service-icon,
  .energy-icon,
  .sig-icon-mark,
  .sig-orb,
  .v33-icon,
  .v33-round-icon,
  .v33-symbol,
  .v36-card-icon,
  .v37-card-icon,
  .v38-topic-icon
) {
  background: var(--gpr-blue) !important;
  border-color: var(--gpr-blue) !important;
  color: var(--gpr-white) !important;
}

html body[class][class][class][class] :is(
  .blue-card,
  .card-blue,
  .bg-blue,
  .is-blue,
  .primary-card,
  .dark-card,
  .card-dark,
  .bg-dark,
  .is-dark,
  .sig-mosaic .sig-tile-1,
  .sig-stage-stack .card-1
) :is(
  .icon-box,
  .icon-wrap,
  .icon-circle,
  .icon-chip,
  .card-icon,
  .topic-icon-circle,
  .service-icon,
  .energy-icon,
  .sig-icon-mark,
  .sig-orb,
  .v33-icon,
  .v33-round-icon,
  .v33-symbol,
  .v36-card-icon,
  .v37-card-icon,
  .v38-topic-icon
) {
  background: var(--gpr-white) !important;
  border-color: var(--gpr-white) !important;
  color: var(--gpr-blue) !important;
}

html body[class][class][class][class] :is(
  .icon-box,
  .icon-wrap,
  .icon-circle,
  .icon-chip,
  .card-icon,
  .topic-icon-circle,
  .service-icon,
  .energy-icon,
  .sig-icon-mark,
  .sig-orb,
  .v33-icon,
  .v33-round-icon,
  .v33-symbol,
  .v36-card-icon,
  .v37-card-icon,
  .v38-topic-icon
) svg,
html body[class][class][class][class] :is(
  .icon-box,
  .icon-wrap,
  .icon-circle,
  .icon-chip,
  .card-icon,
  .topic-icon-circle,
  .service-icon,
  .energy-icon,
  .sig-icon-mark,
  .sig-orb,
  .v33-icon,
  .v33-round-icon,
  .v33-symbol,
  .v36-card-icon,
  .v37-card-icon,
  .v38-topic-icon
) svg * {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}


/* =====================================================================
   F. BUTTONS — THE ONLY ELEMENTS WITH A COLOR HOVER
   ===================================================================== */

html body[class][class][class][class] :is(
  .btn-primary,
  .btn-blue,
  .cta-call,
  .card-call-btn,
  .section-call-btn,
  .inline-section-cta,
  .nav-call,
  .header-call,
  .top-call,
  .mobile-header-call,
  .mobile-menu-call,
  .amerigas-card-call,
  .journey-call,
  .service-card-call,
  .related-card-cta,
  .v33-inline-call,
  .mobile-sticky-cta a,
  .hero-call-card .btn,
  .quick-call-card .btn
) {
  background: var(--gpr-blue) !important;
  border-color: var(--gpr-blue) !important;
  color: var(--gpr-button-text-color) !important;
  -webkit-text-fill-color: var(--gpr-button-text-color) !important;
  transition: background-color 180ms ease, border-color 180ms ease !important;
}

html body[class][class][class][class] :is(
  .btn-primary,
  .btn-blue,
  .cta-call,
  .card-call-btn,
  .section-call-btn,
  .inline-section-cta,
  .nav-call,
  .header-call,
  .top-call,
  .mobile-header-call,
  .mobile-menu-call,
  .amerigas-card-call,
  .journey-call,
  .service-card-call,
  .related-card-cta,
  .v33-inline-call,
  .mobile-sticky-cta a,
  .hero-call-card .btn,
  .quick-call-card .btn
) :is(
  span,
  strong,
  b,
  small,
  i,
  svg,
  svg *
) {
  color: var(--gpr-button-text-color) !important;
  -webkit-text-fill-color: var(--gpr-button-text-color) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}


/* Button hover */

html body[class][class][class][class] :is(
  .btn-primary,
  .btn-blue,
  .cta-call,
  .card-call-btn,
  .section-call-btn,
  .inline-section-cta,
  .nav-call,
  .header-call,
  .top-call,
  .mobile-header-call,
  .mobile-menu-call,
  .amerigas-card-call,
  .journey-call,
  .service-card-call,
  .related-card-cta,
  .v33-inline-call,
  .mobile-sticky-cta a,
  .hero-call-card .btn,
  .quick-call-card .btn
):is(:hover,:focus-visible,:active) {
  background: var(--gpr-black) !important;
  border-color: var(--gpr-black) !important;
  color: var(--gpr-button-text-color) !important;
  -webkit-text-fill-color: var(--gpr-button-text-color) !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  filter: none !important;
  box-shadow: none !important;
}

html body[class][class][class][class] :is(
  .btn-primary,
  .btn-blue,
  .cta-call,
  .card-call-btn,
  .section-call-btn,
  .inline-section-cta,
  .nav-call,
  .header-call,
  .top-call,
  .mobile-header-call,
  .mobile-menu-call,
  .amerigas-card-call,
  .journey-call,
  .service-card-call,
  .related-card-cta,
  .v33-inline-call,
  .mobile-sticky-cta a,
  .hero-call-card .btn,
  .quick-call-card .btn
):is(:hover,:focus-visible,:active) * {
  color: var(--gpr-button-text-color) !important;
  -webkit-text-fill-color: var(--gpr-button-text-color) !important;
}


/* White buttons */

html body[class][class][class][class] :is(
  .btn-white,
  .btn-light,
  .button-white,
  .btn-outline,
  .official-link,
  .hero-cta-secondary,
  .official-site-btn
) {
  background: var(--gpr-white) !important;
  border-color: var(--gpr-border) !important;
  color: var(--gpr-light-button-text-color) !important;
  -webkit-text-fill-color: var(--gpr-light-button-text-color) !important;
}

html body[class][class][class][class] :is(
  .btn-white,
  .btn-light,
  .button-white,
  .btn-outline,
  .official-link,
  .hero-cta-secondary,
  .official-site-btn
) * {
  color: var(--gpr-light-button-text-color) !important;
  -webkit-text-fill-color: var(--gpr-light-button-text-color) !important;
}

html body[class][class][class][class] :is(
  .btn-white,
  .btn-light,
  .button-white,
  .btn-outline,
  .official-link,
  .hero-cta-secondary,
  .official-site-btn
):is(:hover,:focus-visible,:active) {
  background: var(--gpr-black) !important;
  border-color: var(--gpr-black) !important;
  color: var(--gpr-white) !important;
  -webkit-text-fill-color: var(--gpr-white) !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

html body[class][class][class][class] :is(
  .btn-white,
  .btn-light,
  .button-white,
  .btn-outline,
  .official-link,
  .hero-cta-secondary,
  .official-site-btn
):is(:hover,:focus-visible,:active) * {
  color: var(--gpr-white) !important;
  -webkit-text-fill-color: var(--gpr-white) !important;
}


/* Red buttons */

html body[class][class][class][class] :is(
  .btn-red,
  .button-red,
  .cta-red
) {
  background: var(--gpr-red) !important;
  border-color: var(--gpr-red) !important;
  color: var(--gpr-button-text-color) !important;
  -webkit-text-fill-color: var(--gpr-button-text-color) !important;
}

html body[class][class][class][class] :is(
  .btn-red,
  .button-red,
  .cta-red
) * {
  color: var(--gpr-button-text-color) !important;
  -webkit-text-fill-color: var(--gpr-button-text-color) !important;
  fill: currentColor !important;
}

html body[class][class][class][class] :is(
  .btn-red,
  .button-red,
  .cta-red
):is(:hover,:focus-visible,:active) {
  background: var(--gpr-black) !important;
  border-color: var(--gpr-black) !important;
  color: var(--gpr-button-text-color) !important;
  -webkit-text-fill-color: var(--gpr-button-text-color) !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}


/* Phone SVGs */

html body[class][class][class][class] :is(
  .btn,
  .cta-call,
  .nav-call,
  .top-call,
  .mobile-header-call,
  .mobile-menu-call,
  .mobile-sticky-cta a
) > svg:is(.icon,.motion-icon) {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 20px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: currentColor !important;
  fill: currentColor !important;
  transform: none !important;
}

html body[class][class][class][class] :is(
  .btn,
  .cta-call,
  .nav-call,
  .top-call,
  .mobile-header-call,
  .mobile-menu-call,
  .mobile-sticky-cta a
) > svg:is(.icon,.motion-icon) path {
  fill: currentColor !important;
  stroke: none !important;
}


/* =====================================================================
   G. FOCUS
   ===================================================================== */

html body[class][class][class][class] :is(
  .btn,
  .btn-primary,
  .btn-outline,
  .cta-call,
  .card-call-btn,
  .section-call-btn,
  .nav-call,
  .mobile-header-call,
  .mobile-menu-call,
  .mobile-sticky-cta a
):focus-visible {
  outline: 3px solid var(--gpr-red) !important;
  outline-offset: 3px !important;
}


/* =====================================================================
   H. REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  html body * {
    scroll-behavior: auto !important;
  }

  html body main :is(
    article,
    [class*="card"],
    [class*="tile"],
    [class*="lane"]
  ) {
    animation: none !important;
    transition: none !important;
  }
}


/* =====================================================================
   I. ABSOLUTE CASCADE LOCK
   ===================================================================== */


/* ---------------------------------------------------------------------
   Static white/light rectangles
   --------------------------------------------------------------------- */

html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] main :is(
  .motion-card,
  .outline-card,
  .journey-card:not(.dark-card):not(.blue-card),
  .topic-card:not(.dark-card):not(.blue-card),
  .directory-card:not(.dark-card):not(.blue-card),
  .service-directory-card.tone-clean,
  .service-card:not(.dark-card):not(.blue-card),
  .resource-card,
  .related-call-card:not(.dark-card):not(.blue-card),
  .application-card,
  .provider-card,
  .propane-card,
  .feature-card:not(.dark-card):not(.blue-card),
  .choice-card,
  .provider-feature-link,
  .related-info-card,
  .pricing-ready-item,
  .pricing-model-card:not(.dark-card):not(.blue-card),
  .pricing-model-lane:not(.dark-card):not(.blue-card),
  .sig-tile:not(.sig-tile-1),
  .sig-ribbon-item,
  .sig-stage-card:not(.card-1),
  .sig-compare-side,
  .sig-compare-bridge,
  .v33-feature-card:not(.v33-dark):not(.v33-blue),
  .v33-tile:not(.v33-tile-dark):not(.v33-tile-blue),
  .v36-card:not(.dark):not(.blue),
  .v37-card:not(.dark):not(.blue),
  .v38-card:not(.dark):not(.blue),
  .service-rail > a,
  .energy-board-grid > article:not(:nth-child(2)),
  .business-demand-tiles > article:not(.dark):not(.blue),
  .about-flow-track > article,
  .about-fit-bento > article,
  .rhythm-track > article:not(.dark):not(.blue),
  .usecase-grid > article:not(.dark):not(.blue),
  .principle-grid > article:not(.dark):not(.blue),
  .faq-redesign-list details
),
html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] main :is(
  .motion-card,
  .outline-card,
  .journey-card:not(.dark-card):not(.blue-card),
  .topic-card:not(.dark-card):not(.blue-card),
  .directory-card:not(.dark-card):not(.blue-card),
  .service-directory-card.tone-clean,
  .service-card:not(.dark-card):not(.blue-card),
  .resource-card,
  .related-call-card:not(.dark-card):not(.blue-card),
  .application-card,
  .provider-card,
  .propane-card,
  .feature-card:not(.dark-card):not(.blue-card),
  .choice-card,
  .provider-feature-link,
  .related-info-card,
  .pricing-ready-item,
  .pricing-model-card:not(.dark-card):not(.blue-card),
  .pricing-model-lane:not(.dark-card):not(.blue-card),
  .sig-tile:not(.sig-tile-1),
  .sig-ribbon-item,
  .sig-stage-card:not(.card-1),
  .sig-compare-side,
  .sig-compare-bridge,
  .v33-feature-card:not(.v33-dark):not(.v33-blue),
  .v33-tile:not(.v33-tile-dark):not(.v33-tile-blue),
  .v36-card:not(.dark):not(.blue),
  .v37-card:not(.dark):not(.blue),
  .v38-card:not(.dark):not(.blue),
  .service-rail > a,
  .energy-board-grid > article:not(:nth-child(2)),
  .business-demand-tiles > article:not(.dark):not(.blue),
  .about-flow-track > article,
  .about-fit-bento > article,
  .rhythm-track > article:not(.dark):not(.blue),
  .usecase-grid > article:not(.dark):not(.blue),
  .principle-grid > article:not(.dark):not(.blue),
  .faq-redesign-list details
):hover {
  background: var(--gpr-white) !important;
  border-color: var(--gpr-border) !important;
  color: var(--gpr-text) !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  filter: none !important;
  box-shadow: none !important;
  animation: none !important;
  transition: none !important;
}


/* =====================================================================
   J. CARD HEADLINES — COMPLETELY INDEPENDENT COLOR
   THIS IS THE IMPORTANT FIX.
   ===================================================================== */

/*
   Card headlines use ONLY:
   --gpr-card-heading-color

   They do NOT inherit:
   --gpr-text

   They do NOT change when card body/paragraph text changes.
   They also remain the same on hover.
*/

html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] main :is(
  .motion-card,
  .outline-card,
  .journey-card:not(.dark-card):not(.blue-card),
  .topic-card:not(.dark-card):not(.blue-card),
  .directory-card:not(.dark-card):not(.blue-card),
  .service-directory-card.tone-clean,
  .service-card:not(.dark-card):not(.blue-card),
  .resource-card,
  .related-call-card:not(.dark-card):not(.blue-card),
  .application-card,
  .provider-card,
  .propane-card,
  .feature-card:not(.dark-card):not(.blue-card),
  .choice-card,
  .provider-feature-link,
  .related-info-card,
  .pricing-ready-item,
  .pricing-model-card:not(.dark-card):not(.blue-card),
  .pricing-model-lane:not(.dark-card):not(.blue-card),
  .sig-tile:not(.sig-tile-1),
  .sig-ribbon-item,
  .sig-stage-card:not(.card-1),
  .sig-compare-side,
  .sig-compare-bridge,
  .v33-feature-card:not(.v33-dark):not(.v33-blue),
  .v33-tile:not(.v33-tile-dark):not(.v33-tile-blue),
  .v36-card:not(.dark):not(.blue),
  .v37-card:not(.dark):not(.blue),
  .v38-card:not(.dark):not(.blue),
  .service-rail > a,
  .energy-board-grid > article:not(:nth-child(2)),
  .business-demand-tiles > article:not(.dark):not(.blue),
  .about-flow-track > article,
  .about-fit-bento > article,
  .rhythm-track > article:not(.dark):not(.blue),
  .usecase-grid > article:not(.dark):not(.blue),
  .principle-grid > article:not(.dark):not(.blue),
  .faq-redesign-list details
) :is(h1,h2,h3,h4,h5,h6) {
  color: var(--gpr-card-heading-color) !important;
  -webkit-text-fill-color: var(--gpr-card-heading-color) !important;
}


/* Card headlines stay independent during hover */

html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] main :is(
  .motion-card,
  .outline-card,
  .journey-card:not(.dark-card):not(.blue-card),
  .topic-card:not(.dark-card):not(.blue-card),
  .directory-card:not(.dark-card):not(.blue-card),
  .service-directory-card.tone-clean,
  .service-card:not(.dark-card):not(.blue-card),
  .resource-card,
  .related-call-card:not(.dark-card):not(.blue-card),
  .application-card,
  .provider-card,
  .propane-card,
  .feature-card:not(.dark-card):not(.blue-card),
  .choice-card,
  .provider-feature-link,
  .related-info-card,
  .pricing-ready-item,
  .pricing-model-card:not(.dark-card):not(.blue-card),
  .pricing-model-lane:not(.dark-card):not(.blue-card),
  .sig-tile:not(.sig-tile-1),
  .sig-ribbon-item,
  .sig-stage-card:not(.card-1),
  .sig-compare-side,
  .sig-compare-bridge,
  .v33-feature-card:not(.v33-dark):not(.v33-blue),
  .v33-tile:not(.v33-tile-dark):not(.v33-tile-blue),
  .v36-card:not(.dark):not(.blue),
  .v37-card:not(.dark):not(.blue),
  .v38-card:not(.dark):not(.blue),
  .service-rail > a,
  .energy-board-grid > article:not(:nth-child(2)),
  .business-demand-tiles > article:not(.dark):not(.blue),
  .about-flow-track > article,
  .about-fit-bento > article,
  .rhythm-track > article:not(.dark):not(.blue),
  .usecase-grid > article:not(.dark):not(.blue),
  .principle-grid > article:not(.dark):not(.blue),
  .faq-redesign-list details
):hover :is(h1,h2,h3,h4,h5,h6) {
  color: var(--gpr-card-heading-color) !important;
  -webkit-text-fill-color: var(--gpr-card-heading-color) !important;
}


/* Card body text is separately controlled */

html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] main :is(
  .motion-card,
  .outline-card,
  .journey-card:not(.dark-card):not(.blue-card),
  .topic-card:not(.dark-card):not(.blue-card),
  .directory-card:not(.dark-card):not(.blue-card),
  .service-directory-card.tone-clean,
  .service-card:not(.dark-card):not(.blue-card),
  .resource-card,
  .related-call-card:not(.dark-card):not(.blue-card),
  .application-card,
  .provider-card,
  .propane-card,
  .feature-card:not(.dark-card):not(.blue-card),
  .choice-card,
  .provider-feature-link,
  .related-info-card,
  .pricing-ready-item,
  .pricing-model-card:not(.dark-card):not(.blue-card),
  .pricing-model-lane:not(.dark-card):not(.blue-card),
  .sig-tile:not(.sig-tile-1),
  .sig-ribbon-item,
  .sig-stage-card:not(.card-1),
  .sig-compare-side,
  .sig-compare-bridge,
  .v33-feature-card:not(.v33-dark):not(.v33-blue),
  .v33-tile:not(.v33-tile-dark):not(.v33-tile-blue),
  .v36-card:not(.dark):not(.blue),
  .v37-card:not(.dark):not(.blue),
  .v38-card:not(.dark):not(.blue),
  .service-rail > a,
  .energy-board-grid > article:not(:nth-child(2)),
  .business-demand-tiles > article:not(.dark):not(.blue),
  .about-flow-track > article,
  .about-fit-bento > article,
  .rhythm-track > article:not(.dark):not(.blue),
  .usecase-grid > article:not(.dark):not(.blue),
  .principle-grid > article:not(.dark):not(.blue),
  .faq-redesign-list details
) :is(p,li,small) {
  color: var(--gpr-text) !important;
  -webkit-text-fill-color: var(--gpr-text) !important;
}


/* Body text remains independent during hover */

html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] main :is(
  .motion-card,
  .outline-card,
  .journey-card:not(.dark-card):not(.blue-card),
  .topic-card:not(.dark-card):not(.blue-card),
  .directory-card:not(.dark-card):not(.blue-card),
  .service-directory-card.tone-clean,
  .service-card:not(.dark-card):not(.blue-card),
  .resource-card,
  .related-call-card:not(.dark-card):not(.blue-card),
  .application-card,
  .provider-card,
  .propane-card,
  .feature-card:not(.dark-card):not(.blue-card),
  .choice-card,
  .provider-feature-link,
  .related-info-card,
  .pricing-ready-item,
  .pricing-model-card:not(.dark-card):not(.blue-card),
  .pricing-model-lane:not(.dark-card):not(.blue-card),
  .sig-tile:not(.sig-tile-1),
  .sig-ribbon-item,
  .sig-stage-card:not(.card-1),
  .sig-compare-side,
  .sig-compare-bridge,
  .v33-feature-card:not(.v33-dark):not(.v33-blue),
  .v33-tile:not(.v33-tile-dark):not(.v33-tile-blue),
  .v36-card:not(.dark):not(.blue),
  .v37-card:not(.dark):not(.blue),
  .v38-card:not(.dark):not(.blue),
  .service-rail > a,
  .energy-board-grid > article:not(:nth-child(2)),
  .business-demand-tiles > article:not(.dark):not(.blue),
  .about-flow-track > article,
  .about-fit-bento > article,
  .rhythm-track > article:not(.dark):not(.blue),
  .usecase-grid > article:not(.dark):not(.blue),
  .principle-grid > article:not(.dark):not(.blue),
  .faq-redesign-list details
):hover :is(p,li,small) {
  color: var(--gpr-text) !important;
  -webkit-text-fill-color: var(--gpr-text) !important;
}


/* =====================================================================
   K. EVERY NAMED BLUE/NAVY RECTANGLE
   ===================================================================== */

html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] :is(
  .blue-card,
  .card-blue,
  .bg-blue,
  .is-blue,
  .primary-card,
  .dark-card,
  .card-dark,
  .bg-dark,
  .is-dark,
  .hero-dark,
  .hero-poster,
  .process-band,
  .prep-section,
  .directory-break,
  .service-industrial,
  .final-cta,
  .final-cta-box,
  .sitewide-final-cta,
  .business-verify-board,
  .about-propane-boundary,
  .services-route-map,
  .sig-family-2,
  .sell-readiness-weave,
  .sell-signal-dark,
  .sell-decision-dark,
  .v33-blue,
  .v33-dark,
  .v33-force-dark,
  .v33-tile-blue,
  .v33-tile-dark,
  .v33-prep,
  .v33-signals,
  .mission-strip,
  .faq-side-note,
  .about-boundary-board article.confirm,
  .sig-mosaic .sig-tile-1,
  .sig-stage-stack .card-1,
  .energy-board-grid article:nth-child(2)
) {
  background: var(--gpr-blue) !important;
  border-color: var(--gpr-blue) !important;
  color: var(--gpr-blue-surface-text-color) !important;
}


/* Blue rectangle contents */

html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] :is(
  .blue-card,
  .card-blue,
  .bg-blue,
  .is-blue,
  .primary-card,
  .dark-card,
  .card-dark,
  .bg-dark,
  .is-dark,
  .hero-dark,
  .hero-poster,
  .process-band,
  .prep-section,
  .directory-break,
  .service-industrial,
  .final-cta,
  .final-cta-box,
  .sitewide-final-cta,
  .business-verify-board,
  .about-propane-boundary,
  .services-route-map,
  .sig-family-2,
  .sell-readiness-weave,
  .sell-signal-dark,
  .sell-decision-dark,
  .v33-blue,
  .v33-dark,
  .v33-force-dark,
  .v33-tile-blue,
  .v33-tile-dark,
  .v33-prep,
  .v33-signals,
  .mission-strip,
  .faq-side-note,
  .about-boundary-board article.confirm,
  .sig-mosaic .sig-tile-1,
  .sig-stage-stack .card-1,
  .energy-board-grid article:nth-child(2)
) :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  a,
  strong,
  b,
  span,
  small,
  label,
  dt,
  dd
) {
  color: var(--gpr-blue-surface-text-color) !important;
  -webkit-text-fill-color: var(--gpr-blue-surface-text-color) !important;
}


/* =====================================================================
   L. BLUE CTA BUTTONS — INDEPENDENT BUTTON COLOR
   ===================================================================== */

html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] :is(
  a.btn,
  a[href^="tel:"],
  .btn-primary,
  .btn-blue,
  .cta-call,
  .card-call-btn,
  .section-call-btn,
  .inline-section-cta,
  .nav-call,
  .header-call,
  .top-call,
  .mobile-header-call,
  .mobile-menu-call,
  .amerigas-card-call,
  .journey-call,
  .service-card-call,
  .related-card-cta,
  .v33-inline-call,
  .mobile-sticky-cta a,
  .hero-call-card .btn,
  .quick-call-card .btn
) {
  background: var(--gpr-blue) !important;
  border-color: var(--gpr-blue) !important;
  color: var(--gpr-button-text-color) !important;
  -webkit-text-fill-color: var(--gpr-button-text-color) !important;
}


/* Button contents */

html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] :is(
  a.btn,
  a[href^="tel:"],
  .btn-primary,
  .btn-blue,
  .cta-call,
  .card-call-btn,
  .section-call-btn,
  .inline-section-cta,
  .nav-call,
  .header-call,
  .top-call,
  .mobile-header-call,
  .mobile-menu-call,
  .amerigas-card-call,
  .journey-call,
  .service-card-call,
  .related-card-cta,
  .v33-inline-call,
  .mobile-sticky-cta a,
  .hero-call-card .btn,
  .quick-call-card .btn
) * {
  color: var(--gpr-button-text-color) !important;
  -webkit-text-fill-color: var(--gpr-button-text-color) !important;
}


/* Button hover */

html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] :is(
  a.btn,
  a[href^="tel:"],
  .btn-primary,
  .btn-blue,
  .btn-red,
  .button-red,
  .cta-red,
  .btn-blue,
  .cta-call,
  .card-call-btn,
  .section-call-btn,
  .inline-section-cta,
  .nav-call,
  .header-call,
  .top-call,
  .mobile-header-call,
  .mobile-menu-call,
  .amerigas-card-call,
  .journey-call,
  .service-card-call,
  .related-card-cta,
  .v33-inline-call,
  .mobile-sticky-cta a,
  .hero-call-card .btn,
  .quick-call-card .btn
):is(:hover,:focus-visible,:active) {
  background: var(--gpr-black) !important;
  border-color: var(--gpr-black) !important;
  color: var(--gpr-button-text-color) !important;
  -webkit-text-fill-color: var(--gpr-button-text-color) !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  filter: none !important;
  box-shadow: none !important;
}


/* =====================================================================
   M. PROVIDER HEADER CONTROL
   ===================================================================== */

html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] :is(
  .provider-trigger-button:hover,
  .provider-trigger-button[aria-expanded="true"],
  .provider-mega-trigger.open > .provider-trigger-button,
  .provider-mega-trigger.active > .provider-trigger-button
) {
  background: var(--gpr-blue) !important;
  border-color: var(--gpr-blue) !important;
  color: var(--gpr-white) !important;
  -webkit-text-fill-color: var(--gpr-white) !important;
}

html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] :is(
  .provider-trigger-button:hover,
  .provider-trigger-button[aria-expanded="true"],
  .provider-mega-trigger.open > .provider-trigger-button,
  .provider-mega-trigger.active > .provider-trigger-button
) * {
  color: var(--gpr-white) !important;
  -webkit-text-fill-color: var(--gpr-white) !important;
}


/* =====================================================================
   N. PROVIDER DROPDOWN
   ===================================================================== */

html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] .provider-feature-link,
html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] .provider-feature-link:hover {
  background: var(--gpr-white) !important;
  border-color: var(--gpr-border) !important;
  color: var(--gpr-text) !important;
  -webkit-text-fill-color: var(--gpr-text) !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] .provider-feature-link :is(
  b,
  strong,
  span,
  small
),
html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] .provider-feature-link:hover :is(
  b,
  strong,
  span,
  small
) {
  color: var(--gpr-text) !important;
  -webkit-text-fill-color: var(--gpr-text) !important;
}

html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] .provider-feature-link .provider-brand-logo,
html:not(#gpr-a):not(#gpr-b):not(#gpr-c):not(#gpr-d)
body[class] .provider-feature-link:hover .provider-brand-logo {
  background: var(--gpr-white) !important;
  filter: none !important;
  transform: none !important;
}


/* =====================================================================
   O. HERO H1 — COMPLETELY INDEPENDENT
   ===================================================================== */

html body main :is(
  .hero,
  .inner-hero,
  .service-hero,
  .legal-hero,
  .faq-hero,
  .thank-hero,
  .not-found,
  .hero-dark,
  .hero-poster,
  .hero-bg-banner
) h1 {
  color: var(--gpr-h1-headline-color) !important;
  -webkit-text-fill-color: var(--gpr-h1-headline-color) !important;
}


/* =====================================================================
   P. STANDARD HEADINGS — INDEPENDENT FROM BODY TEXT
   ===================================================================== */

html body main :is(
  .white-card,
  .card-white,
  .panel-white,
  .form-card,
  .form-panel,
  .quick-call-card,
  .hero-call-card,
  .outline-card,
  .resource-card,
  .application-card,
  .provider-card,
  .propane-card,
  .choice-card,
  .sig-ribbon-item
) :is(
  h2,
  h3,
  h4,
  h5,
  h6
) {
  color: var(--gpr-heading-text-color) !important;
  -webkit-text-fill-color: var(--gpr-heading-text-color) !important;
}


/* =====================================================================
   Q. WHITE CONTENT PANELS INSIDE BLUE SECTIONS
   ===================================================================== */

html body :is(
  .sig-family-2,
  .bg-blue,
  .is-blue,
  .process-band,
  .v33-blue,
  .v33-prep,
  .v33-signals
) :is(
  .sig-ribbon-item,
  .white-card,
  .card-white,
  .panel-white,
  .form-card,
  .form-panel
) {
  background: var(--gpr-white) !important;
  color: var(--gpr-text) !important;
}

html body :is(
  .sig-family-2,
  .bg-blue,
  .is-blue,
  .process-band,
  .v33-blue,
  .v33-prep,
  .v33-signals
) :is(
  .sig-ribbon-item,
  .white-card,
  .card-white,
  .panel-white,
  .form-card,
  .form-panel
) :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  dt,
  dd,
  strong,
  b,
  small,
  label
) {
  color: var(--gpr-text) !important;
  -webkit-text-fill-color: var(--gpr-text) !important;
}


/* =====================================================================
   R. SUPPLIED GET PROPANE REFILL LOGOS
   ===================================================================== */

html body .brand img {
  width: 210px !important;
  max-height: 62px !important;
  object-fit: contain !important;
}

html body .footer-brand img {
  width: 225px !important;
  max-height: 76px !important;
  object-fit: contain !important;
}


/* =====================================================================
   S. FINAL CARD HEADLINE OVERRIDE
   THIS MUST BE THE LAST COLOR RULE.
   ===================================================================== */

/*
   This final block specifically prevents the card headline from
   following --gpr-text.

   Example:

   --gpr-text: #526879;
   --gpr-card-heading-color: #0067b1;

   Result:
   Card paragraph  = #526879
   Card headline   = #0067b1

   Changing --gpr-text will NOT change the headline.
*/

html body[class] main :is(
  .motion-card,
  .outline-card,
  .journey-card:not(.dark-card):not(.blue-card),
  .topic-card:not(.dark-card):not(.blue-card),
  .directory-card:not(.dark-card):not(.blue-card),
  .service-directory-card.tone-clean,
  .service-card:not(.dark-card):not(.blue-card),
  .resource-card,
  .related-call-card:not(.dark-card):not(.blue-card),
  .application-card,
  .provider-card,
  .propane-card,
  .feature-card:not(.dark-card):not(.blue-card),
  .choice-card,
  .provider-feature-link,
  .related-info-card,
  .pricing-ready-item,
  .pricing-model-card:not(.dark-card):not(.blue-card),
  .pricing-model-lane:not(.dark-card):not(.blue-card),
  .sig-tile:not(.sig-tile-1),
  .sig-ribbon-item,
  .sig-stage-card:not(.card-1),
  .sig-compare-side,
  .sig-compare-bridge,
  .v33-feature-card:not(.v33-dark):not(.v33-blue),
  .v33-tile:not(.v33-tile-dark):not(.v33-tile-blue),
  .v36-card:not(.dark):not(.blue),
  .v37-card:not(.dark):not(.blue),
  .v38-card:not(.dark):not(.blue),
  .service-rail > a,
  .energy-board-grid > article:not(:nth-child(2)),
  .business-demand-tiles > article:not(.dark):not(.blue),
  .about-flow-track > article,
  .about-fit-bento > article,
  .rhythm-track > article:not(.dark):not(.blue),
  .usecase-grid > article:not(.dark):not(.blue),
  .principle-grid > article:not(.dark):not(.blue),
  .faq-redesign-list details
) :is(h1,h2,h3,h4,h5,h6) {
  color: var(--gpr-card-heading-color) !important;
  -webkit-text-fill-color: var(--gpr-card-heading-color) !important;
}


/* Card headline hover lock */

html body[class] main :is(
  .motion-card,
  .outline-card,
  .journey-card:not(.dark-card):not(.blue-card),
  .topic-card:not(.dark-card):not(.blue-card),
  .directory-card:not(.dark-card):not(.blue-card),
  .service-directory-card.tone-clean,
  .service-card:not(.dark-card):not(.blue-card),
  .resource-card,
  .related-call-card:not(.dark-card):not(.blue-card),
  .application-card,
  .provider-card,
  .propane-card,
  .feature-card:not(.dark-card):not(.blue-card),
  .choice-card,
  .provider-feature-link,
  .related-info-card,
  .pricing-ready-item,
  .pricing-model-card:not(.dark-card):not(.blue-card),
  .pricing-model-lane:not(.dark-card):not(.blue-card),
  .sig-tile:not(.sig-tile-1),
  .sig-ribbon-item,
  .sig-stage-card:not(.card-1),
  .sig-compare-side,
  .sig-compare-bridge,
  .v33-feature-card:not(.v33-dark):not(.v33-blue),
  .v33-tile:not(.v33-tile-dark):not(.v33-tile-blue),
  .v36-card:not(.dark):not(.blue),
  .v37-card:not(.dark):not(.blue),
  .v38-card:not(.dark):not(.blue),
  .service-rail > a,
  .energy-board-grid > article:not(:nth-child(2)),
  .business-demand-tiles > article:not(.dark):not(.blue),
  .about-flow-track > article,
  .about-fit-bento > article,
  .rhythm-track > article:not(.dark):not(.blue),
  .usecase-grid > article:not(.dark):not(.blue),
  .principle-grid > article:not(.dark):not(.blue),
  .faq-redesign-list details
):hover :is(h1,h2,h3,h4,h5,h6) {
  color: var(--gpr-card-heading-color) !important;
  -webkit-text-fill-color: var(--gpr-card-heading-color) !important;
}


/* =====================================================================
   FINAL BUTTON COLOR LOCK
   Buttons NEVER inherit the card/body text color.
   ===================================================================== */

html body[class] main :is(
  a.btn,
  a[href^="tel:"],
  .btn-primary,
  .btn-blue,
  .cta-call,
  .card-call-btn,
  .section-call-btn,
  .inline-section-cta,
  .nav-call,
  .header-call,
  .top-call,
  .mobile-header-call,
  .mobile-menu-call,
  .amerigas-card-call,
  .journey-call,
  .service-card-call,
  .related-card-cta,
  .v33-inline-call,
  .mobile-sticky-cta a,
  .hero-call-card .btn,
  .quick-call-card .btn,
  .btn-red,
  .button-red,
  .cta-red
) {
  color: var(--gpr-button-text-color) !important;
  -webkit-text-fill-color: var(--gpr-button-text-color) !important;
}

html body[class] main :is(
  a.btn,
  a[href^="tel:"],
  .btn-primary,
  .btn-blue,
  .cta-call,
  .card-call-btn,
  .section-call-btn,
  .inline-section-cta,
  .nav-call,
  .header-call,
  .top-call,
  .mobile-header-call,
  .mobile-menu-call,
  .amerigas-card-call,
  .journey-call,
  .service-card-call,
  .related-card-cta,
  .v33-inline-call,
  .mobile-sticky-cta a,
  .hero-call-card .btn,
  .quick-call-card .btn,
  .btn-red,
  .button-red,
  .cta-red
) * {
  color: var(--gpr-button-text-color) !important;
  -webkit-text-fill-color: var(--gpr-button-text-color) !important;
}


/* =====================================================================
   FINAL LIGHT BUTTON COLOR LOCK
   ===================================================================== */

html body[class] main :is(
  .btn-white,
  .btn-light,
  .button-white,
  .btn-outline,
  .official-link,
  .hero-cta-secondary,
  .official-site-btn
) {
  color: var(--gpr-light-button-text-color) !important;
  -webkit-text-fill-color: var(--gpr-light-button-text-color) !important;
}

html body[class] main :is(
  .btn-white,
  .btn-light,
  .button-white,
  .btn-outline,
  .official-link,
  .hero-cta-secondary,
  .official-site-btn
) * {
  color: var(--gpr-light-button-text-color) !important;
  -webkit-text-fill-color: var(--gpr-light-button-text-color) !important;
}


/* =====================================================================
   END
   ===================================================================== */