(function () {
  'use strict';
  const STORAGE_KEY = 'unx_cookie_consent_2024';
  const banner = document.querySelector('[data-cookie-banner]');
  if (!banner) return;
  
  let saved = null;
  try { saved = localStorage.getItem(STORAGE_KEY); } catch (e) { saved = null; }
  
  if (saved === 'accepted' || saved === 'declined') {
    banner.remove(); // hide immediately
    return;
  }
  
  // show banner (in case it's hidden by default)
  banner.classList.add('is-visible');
  
  const accept = banner.querySelector('[data-cookie-accept]');
  const decline = banner.querySelector('[data-cookie-decline]');
  
  function decide(value) {
    try { localStorage.setItem(STORAGE_KEY, value); } catch (e) {}
    banner.classList.remove('is-visible');
    banner.classList.add('is-leaving');
    window.setTimeout(() => {
      if (banner.parentNode) banner.parentNode.removeChild(banner);
    }, 300);
  }
  
  if (accept) accept.addEventListener('click', () => decide('accepted'));
  if (decline) decline.addEventListener('click', () => decide('declined'));
})();
/* --- Contrast fixes: muted text and inline links on light sections --- */
.bg-light .text-secondary,
.bg-light .text-body-secondary {
  color: #5a6268 !important;
}

.bg-light p a:not(.btn),
.bg-light li a:not(.btn),
.bg-light .card-body a:not(.btn) {
  color: #0a58ca !important;
  text-decoration: underline;
}

.bg-light p a:not(.btn):hover,
.bg-light li a:not(.btn):hover,
.bg-light .card-body a:not(.btn):hover {
  color: #084298 !important;
}

/* ---- QA contrast fixes (append-only overrides) ---- */

/* Eyebrow labels ("The short version", "What we believe", etc.) on light-grey
   sections: darken from #6c757d to meet 4.5:1 against #f8f9fa. */
.bg-light .text-secondary,
section.bg-light p.text-secondary,
section.bg-light .text-body-secondary {
  color: #4f575e !important;
}

/* Large numbered step markers "01/02/03" used a raw #ffc107 fill on white,
   which only reaches ~1.6:1. Use a darker amber so the numerals stay legible. */
.card p.display-6.text-warning,
.card-body p.display-6.text-warning,
p.display-6.fw-bold.text-warning {
  color: #8a5a00 !important;
}

/* Contrast fixes for price page: darker secondary text and inline links on light backgrounds */
main .text-secondary {
  color: #495057 !important;
}
main p a:not(.btn):not(.nav-link):not(.dropdown-item),
main p a:not(.btn):not(.nav-link):not(.dropdown-item):visited {
  color: #0a4fbf;
  text-decoration: underline;
}
main p a:not(.btn):not(.nav-link):not(.dropdown-item):hover,
main p a:not(.btn):not(.nav-link):not(.dropdown-item):focus {
  color: #073a8c;
}

/* Contrast fixes: eyebrow labels and step numbers */
main .text-secondary {
  color: #495057 !important;
}
main .card-body > p.display-6.text-warning,
main .card-body > p.display-5.text-warning,
main .card-body > p.display-4.text-warning {
  color: #b45309 !important;
}

/* ---- Layout fix: footer's squared map iframe added no height to the grid row ----
   On the service/blog pages the footer's last column holds a Bootstrap `.ratio`
   wrapper with a 1:1 Google Maps iframe. Because `.ratio` relies on the iframe
   percentage height, the auto-height grid row no longer grew with it, so a large
   empty dark band opened up above the hr/footer links. Give the wrapper an
   explicit square height (derived from its own width) so the row measures
   correctly and the map then fills it. Scoped to the footer only. */
footer .ratio.ratio-1x1 {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
}

footer .ratio.ratio-1x1 > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Layout fix: oversized "Find us" map box in the footer ----
   The previous rule sized the footer's square map wrapper from its own width.
   At mobile widths (and in the narrow lg columns) that produced a very tall
   square, so a large empty dark band opened up between the "Find us" heading /
   iframe and the "Open in Google Maps" link. Keep the map but cap its height
   with a viewport-friendly maximum so the block stays proportional on every
   breakpoint; the iframe remains absolutely positioned and fills the box. */
footer .ratio.ratio-1x1 {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 220px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

footer .ratio.ratio-1x1 > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}