/* ============================================================
   custom.css — GLOBAL custom CSS layer.
   Loaded on every page by templates/template-claude-page.php, in the cascade:
     colors_and_type.css  ->  responsive.css  ->  custom.css  ->  page style.html
   So: rules here apply site-wide, can override the shared responsive layer, and
   are still overridable by a page's own inline <style> (which loads last).
   Put cross-page styling here instead of duplicating it in each page's style.html.
   ============================================================ */

/* Closing-CTA monogram — every closing CTA across the site (the shared <FinalCTA>
   on home/question-answer, the page-specific CTAs on partners/community/incentives/
   our-story/payment-plans/solar-calculator, AND the un-hooked ones on all solutions,
   all industries, and careers) uses the same faint monogram bleeding from the
   top-right corner: a position:absolute wrapper at right:-120px / top:-120px holding
   a 560–640px monogram-white.svg. Some of those CTAs have no data-gi-resp hook, so we
   target the monogram by that shared inline offset (matches exactly the 20 closing-CTA
   monograms; decorative monograms elsewhere use different offsets and are untouched).
   On phones the giant monogram dominates the panel, so pull it into the corner and
   shrink it. Desktop keeps the original bleed. */
@media (max-width: 900px) {
  [style*="right: -120px"][style*="top: -120px"] {
    top: 10px !important;
    right: -90px !important;
  }
  [style*="right: -120px"][style*="top: -120px"] img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 60%;
    margin-left: auto;
  }
}

/* ============================================================
   GI-MOBILE-SWAP-V1 — tablet/mobile component swaps (≤900px).
   On 11 pages the desktop "proof in numbers" / "solutions for this sector"
   component is hidden at ≤900px and a purpose-built mobile component is shown
   in its place. Each affected page's app.html wraps the desktop component in
   a [data-gi-desktop-swap] div and the mobile component in a [data-gi-mobile-swap]
   div. The mobile wrapper is hidden by default; at ≤900px the desktop wrapper is
   hidden and the mobile wrapper is shown.

   The four self-contained solutions mobile components (audit/sol/bess/led) carry
   their OWN internal desktop+mobile toggle at 900px. The ≤900px wrapper caps their
   visibility, so only their mobile half ever paints and there is no 761–900px
   overlap with the desktop component. Desktop (>900px) is unchanged: the wrapper
   divs are layout-neutral and the mobile wrapper is display:none.
   ============================================================ */
[data-gi-mobile-swap] { display: none; }
@media (max-width: 900px) {
  [data-gi-desktop-swap] { display: none !important; }
  [data-gi-mobile-swap]  { display: block !important; }
}


[data-gi-resp="nav-utility"] [data-gi-resp="container"] > a:last-child {
  display: none !important;
}