/* ==========================================================================
   Custom CSS — overrides Bootstrap 5 without modifying Bootstrap source

   NOTE: build pages from the UI component library — demo/index.html is the
   canonical source of markup/class patterns; pull existing components
   (.wps-accordion, .solution-card, .wps-badge, etc.) rather than hand-
   rolling one-off page-scoped styles. When a page genuinely needs a
   variant that doesn't exist yet, add it here as a proper modifier
   class (e.g. .wps-accordion--navy) following the naming/structure of
   its sibling variants, and add a matching example to demo/index.html —
   don't leave it as inline styles on a single page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   --------------------------------------------------------------------------
   Unbounded is loaded via Google Fonts (see index.html).
   Brandon Grotesque requires an Adobe Fonts kit — add your kit <link> in
   index.html and update the font-family stack below if your kit uses a
   different name (e.g. "brandon-grotesque").
   -------------------------------------------------------------------------- */

:root {
  --font-headline: 'Unbounded', sans-serif;
  --font-body: 'brandon-grotesque', 'Brandon Grotesque', 'Trebuchet MS', sans-serif;

  /* ── Primary palette ─────────────────────────────────────── */
  --color-navy:       #042789;   /* Pantone 661C  */
  --color-cloud-blue: #6AA2B8;   /* Pantone 549C  */
  --color-mint:       #6EFCAA;   /* Pantone 353C  */
  --color-white:      #FFFFFF;

  /* ── Secondary palette ───────────────────────────────────── */
  --color-fuchsia:    #F90686;   /* Pantone 807C  */
  --color-red:        #EC1C24;   /* Pantone 2347C */
  --color-orange:     #F38341;   /* Pantone 2025C */
  --color-lt-blue:    #00AEEF;   /* Pantone 306C  */
  --color-purple:     #91268F;   /* Pantone 2602C */
  --color-berry:      #C3178C;   /* Pantone 2405C */

  /* ── Gradients ───────────────────────────────────────────── */
  --gradient-orange-fuchsia: linear-gradient(135deg, #F38341, #F90686);
  --gradient-ltblue-yellow:  linear-gradient(135deg, #00AEEF, #FFE500);
  --gradient-red-berry:      linear-gradient(135deg, #EC1C24, #C3178C);
  --gradient-navy-mint:      linear-gradient(135deg, #042789, #6EFCAA);
  --gradient-ltblue-purple:  linear-gradient(135deg, #00AEEF, #91268F);
  --gradient-navy-ltblue:    linear-gradient(135deg, #042789, #00AEEF);
  --gradient-mint-ltblue:    linear-gradient(to right, #6EFCAA, #00AEEF);
  --video-gradient:          linear-gradient(120.18deg, rgb(14, 39, 137) 0.3%, rgb(110, 252, 170) 99.99%);
  --gradient-navy-mint-white:linear-gradient(180deg, rgba(4, 39, 137, 1) 0%, rgba(110, 252, 170, 1) 80%, rgba(255, 255, 255, 1) 80%);
  --gradient-ltblue-mint:    linear-gradient(180deg, rgba(0, 17 4, 239) 0%, rgba(1110, 252, 170 1) 80%);

  /* ── Semantic aliases (used throughout components) ───────── */
  --color-primary:      var(--color-navy);
  --color-primary-dark: #021d65;             /* Navy darkened ~10%   */
  --color-accent:       var(--color-mint);
  --color-accent-alt:   var(--color-lt-blue);
  --color-light-bg:     #EEF2FA;             /* Navy tinted at 6%    */
  --color-dark-bg:      var(--color-navy);
  --color-text:         #00000;             /* Near-navy for body   */
  --color-text-muted:   #5C6B7A;
  --color-border:       #D0D9EE;

  /* ── Nav component tokens (required by all .nav-*, .btn-login,         */
  /*    .mobile-drawer, .login-modal, .search-overlay rules) ──────────── */
  --wps-navy:   var(--color-navy);        /* #042789 */
  --wps-blue:   var(--color-cloud-blue);  /* #6AA2B8 */
  --wps-mint:   var(--color-mint);        /* #6EFCAA */
  --wps-fuchsia: var(--color-fuchsia);    /* #F90686 */
  --wps-white:  #FFFFFF;
  --wps-light:  #F0F4FB;                  /* Hover / subtle bg tint  */
  --wps-gray:   #6B7A8D;                  /* Placeholder / muted text */
  --wps-border: rgba(4, 39, 137, 0.10);   /* Nav dividers & outlines  */
  --nav-h:      9rem;                     /* Must match .nav-wrapper height */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --t:          0.22s;
}

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

body {
  font-family: var(--font-body);
  font-size: 1.5rem;
  color: var(--color-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-headline);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1  { font-size: clamp(2.75rem, 5vw, 4.5rem);  font-weight: 700; color: var(--color-navy); }
h2  { font-size: clamp(2rem,   3.5vw, 3rem);   font-weight: 700; color: var(--color-navy); }
h3  { font-size: clamp(1.5rem, 2.5vw, 2rem);   font-weight: 700; color: var(--color-navy); }
h4  { font-size: clamp(1.25rem, 2vw,   1.5rem);  font-weight: 700; color: var(--color-navy); }
h5  { font-size: clamp(1.1rem,  1.5vw, 1.25rem); font-weight: 700; color: var(--color-navy); }
h6  { font-size: clamp(0.95rem, 1.2vw, 1.1rem);  font-weight: 700; color: var(--color-navy); }

p   { margin-bottom: 1.75rem;
	  font-size:  1.5rem;
	  line-height: 2rem;}
    
a   { color: var(--color-primary); text-decoration: none; font-weight: 500; }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

sup {
    top: -.85em;
}

sub, sup {
    position: relative;
    font-size: .5em;
	font-weight: 500;
    line-height: 0;
    vertical-align: baseline;
}
/* --------------------------------------------------------------------------
   Font Color
   -------------------------------------------------------------------------- */

.text-navy {
color: #042789;		
}

.text-cloud {
color: #6AA2B8;		
}

.text-mint {
color: #6EFCAA;		
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */

.section-padding {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* No top padding on tablet and mobile */
@media (max-width: 991.98px) {
  .section-padding--no-top {
    padding-top: 0;
  }
}

/* No bottom padding on tablet and mobile */
@media (max-width: 991.98px) {
  .section-padding--no-bottom {
    padding-bottom: 0;
  }
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cloud-blue);
  margin-bottom: 0.75rem;
}

.min-vh-75 { min-height: 75vh; }

/* Body text size utilities */
.body-md {
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.9rem;
}

.body-sm {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4rem;
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Buttons — override Bootstrap
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 0.65rem 1.75rem 0.65rem 3.25rem;
  min-width: 8rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition:
    background-color var(--t) var(--ease),
    border-color     var(--t) var(--ease),
    color            var(--t) var(--ease),
    transform        var(--t) var(--ease),
    box-shadow       var(--t) var(--ease),
    filter           var(--t) var(--ease);
}
.btn::after {
  content: '→';
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}
.btn:hover {
  text-decoration: none;
}
.btn:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* ── Button size scale ─────────────────────────────────────────────────────
   xs → sm → default → lg → xl
   Each step increases font ~15%, padding proportionally, and border-radius.
   ── */
.btn-xs {
  font-size: 0.72rem;
  padding: 0.48rem  0.9rem;
  min-width: 4.5rem;
  border-radius: 14px;
  letter-spacing: 0.05em;
}
.btn-sm {
  font-size: 1rem;
  padding: 0.48rem 1rem 0.48rem 2.5rem;
  min-width: 6rem;
  border-radius: 17px;
}
/* default = .btn base above */
.btn-lg {
  font-size: 1.25rem;
  padding: 0.82rem 2.25rem 0.82rem 3.75rem;
  min-width: 10rem;
  border-radius: 25px;
}
.btn-xl {
  font-size: 1.35rem;
  padding: 1rem 2.75rem 1rem 4.25rem;
  min-width: 12rem;
  border-radius: 30px;
}

.btn:active { transform: translateY(1px) !important; box-shadow: none !important; }

.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Solid: Primary ────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(4,39,137,0.30);
}

/* ── Solid: Light / Outline Light ──────────────────────────────────────── */
.btn-light {
  background-color: #fff;
  color: var(--color-primary);
  border-color: #fff;
}
.btn-light:hover {
  background-color: #e8f0f8;
  border-color: #e8f0f8;
  color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.btn-outline-light { border-width: 2px; }
.btn-outline-light:hover {
  background-color: rgba(255,255,255,0.15);
  color: #fff;
  transform: translateY(-2px);
}

/* ── Outline: Secondary ────────────────────────────────────────────────── */
.btn-outline-secondary {
  border-color: var(--color-primary);
  border-width: 2px;
  color: var(--color-primary);
}
.btn-outline-secondary:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(4,39,137,0.22);
}

/* ── Brand solid variants ──────────────────────────────────────────────── */
.btn-navy {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}
.btn-navy:hover, .btn-navy:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(4,39,137,0.30);
}

.btn-mint {
  background-color: var(--color-mint);
  border-color: var(--color-mint);
  color: var(--color-navy);
}
.btn-mint:hover, .btn-mint:focus {
  background-color: #4ee890;
  border-color: #4ee890;
  color: var(--color-navy);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(110,252,170,0.40);
}

.btn-fuchsia {
  background-color: var(--color-fuchsia);
  border-color: var(--color-fuchsia);
  color: #fff;
}
.btn-fuchsia:hover, .btn-fuchsia:focus {
  background-color: #c5006a;
  border-color: #c5006a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(249,6,134,0.35);
}

.btn-purple {
  background-color: var(--color-purple);
  border-color: var(--color-purple);
  color: #fff;
}
.btn-purple:hover, .btn-purple:focus {
  background-color: #6b1a69;
  border-color: #6b1a69;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(145,38,143,0.35);
}

.btn-lt-blue {
  background-color: var(--color-lt-blue);
  border-color: var(--color-lt-blue);
  color: #fff;
}
.btn-lt-blue:hover, .btn-lt-blue:focus {
  background-color: #0090c8;
  border-color: #0090c8;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,174,239,0.35);
}

.btn-cloud {
  background-color: var(--color-cloud-blue);
  border-color: var(--color-cloud-blue);
  color: #fff;
}
.btn-cloud:hover, .btn-cloud:focus {
  background-color: #4d849f;
  border-color: #4d849f;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(106,162,184,0.40);
}

/* ── Brand outline variants ────────────────────────────────────────────── */
.btn-outline-navy {
  background: transparent;
  border-color: var(--color-navy);
  border-width: 2px;
  color: var(--color-navy);
}
.btn-outline-navy:hover, .btn-outline-navy:focus {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(4,39,137,0.25);
}

.btn-outline-mint {
  background: transparent;
  border-color: var(--color-mint);
  border-width: 2px;
  color: var(--color-mint);
}
.btn-outline-mint:hover, .btn-outline-mint:focus {
  background-color: var(--color-mint);
  border-color: var(--color-mint);
  color: var(--color-navy);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(110,252,170,0.35);
}

.btn-outline-fuchsia {
  background: transparent;
  border-color: var(--color-fuchsia);
  border-width: 2px;
  color: var(--color-fuchsia);
}
.btn-outline-fuchsia:hover, .btn-outline-fuchsia:focus {
  background-color: var(--color-fuchsia);
  border-color: var(--color-fuchsia);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(249,6,134,0.30);
}

.btn-outline-purple {
  background: transparent;
  border-color: var(--color-purple);
  border-width: 2px;
  color: var(--color-purple);
}
.btn-outline-purple:hover, .btn-outline-purple:focus {
  background-color: var(--color-purple);
  border-color: var(--color-purple);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(145,38,143,0.30);
}

.btn-outline-lt-blue {
  background: transparent;
  border-color: var(--color-lt-blue);
  border-width: 2px;
  color: var(--color-lt-blue);
}
.btn-outline-lt-blue:hover, .btn-outline-lt-blue:focus {
  background-color: var(--color-lt-blue);
  border-color: var(--color-lt-blue);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,174,239,0.30);
}

/* ── Gradient variants ─────────────────────────────────────────────────── */
.btn-gradient-navy {
  background: var(--gradient-navy-ltblue);
  border: none;
  color: #fff;
}
.btn-gradient-navy:hover, .btn-gradient-navy:focus {
  filter: brightness(1.1);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(4,39,137,0.30);
}

.btn-gradient-mint {
  background: var(--gradient-navy-mint);
  border: none;
  color: #fff;
}
.btn-gradient-mint:hover, .btn-gradient-mint:focus {
  filter: brightness(1.1);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(4,39,137,0.25);
}

.btn-gradient-orange {
  background: var(--gradient-orange-fuchsia);
  border: none;
  color: #fff;
}
.btn-gradient-orange:hover, .btn-gradient-orange:focus {
  filter: brightness(1.1);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(249,6,134,0.30);
}

.btn-gradient-purple {
  background: var(--gradient-ltblue-purple);
  border: none;
  color: #fff;
}
.btn-gradient-purple:hover, .btn-gradient-purple:focus {
  filter: brightness(1.1);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(145,38,143,0.28);
}

/* Solid mint → lt-blue gradient */
.btn-gradient-mint-ltblue {
  background: var(--gradient-mint-ltblue);
  border: none;
  color: #fff;
}
.btn-gradient-mint-ltblue:hover, .btn-gradient-mint-ltblue:focus {
  filter: brightness(1.06);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0,174,239,0.35);
}

/* Outline — gradient border, white fill, navy text */
.btn-outline-gradient-mint-ltblue {
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-mint-ltblue) border-box;
  border: 2px solid transparent;
  color: var(--color-navy);
}
.btn-outline-gradient-mint-ltblue:hover, .btn-outline-gradient-mint-ltblue:focus {
  background:
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)) padding-box,
    var(--gradient-mint-ltblue) border-box;
  color: var(--color-navy);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0,174,239,0.25);
}

/* Select rendered as a pill button (e.g. state picker CTAs) */
select.btn {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-align: center;
  text-align-last: center;
  /* .btn/.btn-lg reserve extra left padding for the anchor arrow icon,
     which never renders on a <select> — rebalance so the chevron on the
     right has its own room instead of inheriting that asymmetry. */
  padding-left: 2.25rem;
  padding-right: 3rem;
}
select.btn.btn-outline-gradient-mint-ltblue {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23042789' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1.25rem center / 16px padding-box,
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-mint-ltblue) border-box;
}
select.btn.btn-outline-gradient-mint-ltblue:hover,
select.btn.btn-outline-gradient-mint-ltblue:focus {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23042789' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1.25rem center / 16px padding-box,
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)) padding-box,
    var(--gradient-mint-ltblue) border-box;
}

.btn-outline-gradient-navy {
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-navy-ltblue) border-box;
  border: 2px solid transparent;
  color: var(--color-navy);
}
.btn-outline-gradient-navy:hover, .btn-outline-gradient-navy:focus {
  background:
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)) padding-box,
    var(--gradient-navy-ltblue) border-box;
  color: var(--color-navy);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(4,39,137,0.2);
}

.btn-outline-gradient-mint {
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-navy-mint) border-box;
  border: 2px solid transparent;
  color: var(--color-navy);
}
.btn-outline-gradient-mint:hover, .btn-outline-gradient-mint:focus {
  background:
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)) padding-box,
    var(--gradient-navy-mint) border-box;
  color: var(--color-navy);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(110,252,170,0.3);
}

.btn-outline-gradient-purple {
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-ltblue-purple) border-box;
  border: 2px solid transparent;
  color: var(--color-navy);
}
.btn-outline-gradient-purple:hover, .btn-outline-gradient-purple:focus {
  background:
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)) padding-box,
    var(--gradient-ltblue-purple) border-box;
  color: var(--color-navy);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(145,38,143,0.2);
}

.btn-outline-gradient-orange {
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-orange-fuchsia) border-box;
  border: 2px solid transparent;
  color: var(--color-navy);
}
.btn-outline-gradient-orange:hover, .btn-outline-gradient-orange:focus {
  background:
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)) padding-box,
    var(--gradient-orange-fuchsia) border-box;
  color: var(--color-navy);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(243,131,65,0.25);
}

/* ── Underlined text link (e.g. helper link beneath a button) ─────────── */
.link-underline-navy {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s var(--ease);
}
.link-underline-navy:hover, .link-underline-navy:focus {
  color: var(--color-primary-dark);
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */

.nav-wrapper {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--wps-white);
  border-bottom: 1px solid var(--wps-border);
  box-shadow: 0 2px 16px rgba(0,48,87,0.07);
  height: 9rem;
  padding-top: 0.5rem;
  /* Smooth scroll-shrink transition */
  transition: height 0.35s var(--ease), padding-top 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
  will-change: height;
}

/* ── Scrolled state — nav compresses for more content room ─── */
.nav-wrapper.is-scrolled {
  height: 5.5rem;
  padding-top: 0;
  box-shadow: 0 4px 28px rgba(4,39,137,0.14);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-color: rgba(4,39,137,0.07);
}
.nav-wrapper.is-scrolled .nav-logo img {
  height: 52px;
}
.nav-wrapper.is-scrolled .nav-link {
  font-size: 15px;
  padding: 6px 10px;
}
.nav-wrapper.is-scrolled .btn-login,
.nav-wrapper.is-scrolled .btn-cta {
  height: 36px;
  font-size: 14px;
}

.nav-bar {
  max-width: 1320px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 4px;
}

/* ─── LOGO ─── */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 15px;
}

/* Constrain the SVG logo so it never overflows the nav height */
.nav-logo img {
  height: 64px;
  width: auto;
  display: block;
  transition: height 0.35s var(--ease);
}

/* ─── BRAND SWITCHING ───
   Pages set <body data-brand="..."> to swap the co-brand logo in the
   shared nav/footer includes without duplicating either file.
   Supported values: "aso" (WPS + Auxiant), "epic" (WPS / EPIC dual brand). */
.nav-logo img.logo-aso,
.footer-logo.logo-aso,
.footer-logo.logo-epic {
  display: none;
}
body[data-brand="aso"] .nav-logo img.logo-default,
body[data-brand="aso"] .footer-logo.logo-default {
  display: none;
}
body[data-brand="aso"] .nav-logo img.logo-aso,
body[data-brand="aso"] .footer-logo.logo-aso {
  display: block;
}
/* EPIC co-brand: keep the standard WPS mark AND stack the EPIC company
   lockup beneath it in the footer brand column, for pages whose product is
   underwritten by The EPIC Life Insurance Company (e.g. the Medicare
   supplement EOB explainer). Nav keeps the standard WPS mark. */
body[data-brand="epic"] .footer-logo.logo-default {
  margin-bottom: 0.85rem;
}
body[data-brand="epic"] .footer-logo.logo-epic {
  display: block;
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-left: 1rem;
}
/* The WPS + Auxiant lockup is a wide (6:1) co-brand mark—cap its height
   so it doesn't crowd the nav links at the standard 80px logo height. */
.nav-logo img.logo-aso {
  height: 44px;
}
.nav-wrapper.is-scrolled .nav-logo img.logo-aso {
  height: 34px;
}
.logo-mark {
  width: 38px; height: 38px;
  background: var(--wps-navy);
  border-radius: 10px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.logo-mark::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 3px solid var(--wps-mint);
  border-radius: 50%;
}
.logo-mark::before {
  content: '';
  position: absolute;
  width: 7px; height: 7px;
  background: var(--wps-fuchsia);
  border-radius: 50%;
  z-index: 1;
}
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text b {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--wps-navy);
  letter-spacing: -0.3px;
}
.logo-text small {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--wps-mint);
  margin-top: 2px;
}

/* ─── DESKTOP NAV LINKS ─── */
.nav-links {
  display: flex;
  align-items: center;
  align-self: stretch;      /* stretch to full nav-bar height */
  gap: 2px;
  margin-left: auto;
  margin-right: 12px;
  /* Clear Bootstrap's default ul padding/margin */
  padding: 0;
  margin-bottom: 0;
  list-style: none;
  min-width: 0;
  flex-shrink: 1;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  text-decoration: none;
  border-radius: 8px;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), font-size 0.35s var(--ease), padding 0.35s var(--ease);
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  min-height: 44px;
}
.nav-link:hover  { background: var(--wps-light); color: var(--wps-navy); text-decoration: none; }
.nav-link.active { color: var(--wps-navy); background: rgba(0,101,164,0.08); }

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 3px; left: 12px; right: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--wps-mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease);
}
.nav-link.active::after { transform: scaleX(1); }

.chev {
  width: 13px; height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  flex-shrink: 0;
  transition: transform var(--t) var(--ease);
}
.nav-item:hover .chev { transform: rotate(180deg); }

/* ─── DESKTOP DROPDOWN ─── */
.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 216px;
  background: var(--wps-white);
  border: 1px solid var(--wps-border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,48,87,0.12);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  z-index: 200;
}
.dropdown::before {
  content: '';
  position: absolute;
  top: -5px; left: 18px;
  width: 10px; height: 10px;
  background: var(--wps-white);
  border-left: 1px solid var(--wps-border);
  border-top:  1px solid var(--wps-border);
  transform: rotate(45deg);
  border-radius: 2px;
}
.nav-item:hover .dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--wps-navy);
  text-decoration: none;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
  min-height: 44px;
}
.dd-item:hover { background: var(--wps-light); color: var(--wps-blue); }
.dd-icon {
  width: 28px; height: 28px;
  background: rgba(0,164,153,0.10);
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background var(--t) var(--ease);
}
.dd-item:hover .dd-icon { background: rgba(0,101,164,0.12); }
.dd-icon svg { width: 14px; height: 14px; stroke: var(--wps-mint); fill: none; stroke-width: 2; }
.dd-item:hover .dd-icon svg { stroke: var(--wps-blue); }
.dd-divider { height: 1px; background: var(--wps-border); margin: 6px 4px; }

/* ─── MEGA MENU ─── */

/* nav item — NOT a positioning anchor (mega-menu is now a sibling, anchored to .nav-wrapper) */
.nav-item--mega {
  position: static;
  align-self: stretch;   /* fills full nav-bar height — eliminates dead zone below the link */
  display: flex;
  align-items: center;
}


.mega-menu {
  position: absolute;
  top: 100%;             /* flush — no gap, no dead zone */
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: min(860px, 90vw);
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--wps-border);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(4,39,137,0.15), 0 4px 16px rgba(4,39,137,0.06);
  padding: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s var(--ease);
  z-index: 500;
  overflow: hidden;
}

/* Mega menu opens only via JS .is-open class — panel is now a sibling of nav-links, not a child of nav-item--mega */
.mega-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Chevron rotates when parent nav item is open */
.nav-item--mega.is-open .chev { transform: rotate(180deg); }

.mega-menu-inner {
  display: grid;
  grid-template-columns: 1fr 240px;
}

/* Left column — feature items */
.mega-col--main {
  padding: 2.25rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Right column — quick links */
.mega-col--links {
  background: var(--color-light-bg);
  border-left: 1px solid var(--wps-border);
  position: relative;
  min-height: 240px;
}

/* Each panel sits on top of each other; only .is-active is visible */
.mega-panel {
  position: absolute;
  inset: 0;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.18s var(--ease), visibility 0.18s var(--ease);
}
.mega-panel.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
/* Only override parent visibility when the menu itself is open.
   This prevents closed-menu panels (visibility:hidden on the parent)
   from being hit-testable even when they have is-active. */
.mega-menu.is-open .mega-panel.is-active {
  visibility: visible;
}

/* Image default panel — fills the grey column with no padding */
.mega-panel--img {
  padding: 0;
  display: block;
}
.mega-panel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0 18px 18px 0; /* match parent mega-menu corner radius */
}

/* Highlight the active left-column item */
.mega-item.is-active {
  background: var(--color-light-bg);
  box-shadow: inset 0 0 0 1px rgba(4,39,137,0.08);
}
.mega-item.is-active .mega-icon {
  transform: scale(1.1) translateY(-1px);
}

.mega-col-heading {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 0.75rem;
}

/* Feature item row */
.mega-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.75rem 0.875rem;
  border-radius: 10px;
  text-decoration: none;
  position: relative;
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.mega-item:hover {
  background: var(--color-light-bg);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(4,39,137,0.06);
}

.mega-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #82F0EC, #6EFCAA);
  color: var(--color-navy);
  transition: transform var(--t) var(--ease);
}
.mega-item:hover .mega-icon { transform: scale(1.1) translateY(-1px); }
.mega-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* All icon variants share the same gradient */
.mega-icon--blue,
.mega-icon--mint,
.mega-icon--orange,
.mega-icon--purple { background: linear-gradient(135deg, #82F0EC, #6EFCAA); color: var(--color-navy); }

.mega-text { display: flex; flex-direction: column; gap: 0.2rem; }

.mega-title {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.2;
}
.mega-desc {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* CTA row */
.mega-cta {
  margin-top: 0.75rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--wps-border);
}
.mega-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.6rem 1.25rem;
  border-radius: 20px;
  background: var(--color-navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--t) var(--ease);
}
.mega-cta-btn:hover { background: var(--color-primary-dark); color: #fff; text-decoration: none; }
.mega-cta-btn svg { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.mega-cta-btn:hover svg { transform: translateX(4px); }

/* Right column links */
.mega-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  border-radius: 9px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: none;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              padding-left var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.mega-link::after {
  content: '→';
  font-size: 0.8rem;
  opacity: 0;
  flex-shrink: 0;
  transform: translateX(-6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.mega-link:hover {
  background: rgba(4,39,137,0.09);
  box-shadow: inset 0 0 0 1px rgba(4,39,137,0.08);
  color: var(--color-navy);
  text-decoration: none;
  padding-left: 1rem;
}
.mega-link:hover::after { opacity: 1; transform: translateX(0); }

/* ─── DESKTOP ACTIONS ─── */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  /* Explicit self-alignment keeps login button on the same baseline as nav links */
  align-self: center;
}

.btn-icon {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  color: #000000;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.btn-icon:hover { background: var(--wps-light); color: var(--wps-navy); }
.btn-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

.btn-login {
  display: flex; align-items: center; gap: 6px;
  padding: 0 16px;
  height: 40px;
  border: 1.5px solid #000000;
  border-radius: 20px;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), height 0.35s var(--ease), font-size 0.35s var(--ease);
  white-space: nowrap;
}
.btn-login svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.btn-login:hover { background: var(--wps-navy); color: var(--wps-white); }

.btn-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 18px;
  height: 40px;
  border: none;
  border-radius: 20px;
  background: var(--wps-mint);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--wps-navy);           /* Navy on mint — legible & on-brand */
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease), color var(--t) var(--ease);
  white-space: nowrap;
}
.btn-cta svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; transition: transform var(--t) var(--ease); }
.btn-cta:hover {
  background: var(--wps-navy);
  color: var(--wps-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(4,39,137,0.22);
  text-decoration: none;
}
.btn-cta:hover svg { transform: translateX(3px); }

/* ─── HAMBURGER ─── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 20px;
  flex-shrink: 0;
  transition: background var(--t) var(--ease);
}
.hamburger:hover { background: var(--wps-light); }
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--wps-navy);
  border-radius: 2px;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── TABLET BAR (search + hamburger, visible < 1024px) ─── */
.nav-bar-tablet {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}


/* ─── MOBILE DRAWER ─── */
.mobile-drawer {
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 0;
  transition: max-height 0.36s var(--ease);
  background: var(--wps-white);
  border-top: 1px solid var(--wps-border);
  -webkit-overflow-scrolling: touch;
}
.mobile-drawer.is-open {
  max-height: calc(100dvh - var(--nav-h));
}

.drawer-scroll {
  padding: 12px 14px 28px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Mobile item row */
.m-item { border-radius: 10px; overflow: hidden; }

.m-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 14px;
  background: none;
  border: none;
  font-size: 18px;
  font-weight: 600;
  color: #000000;
  cursor: pointer;
  text-align: left;
  min-height: 48px;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
  text-decoration: none;
}
.m-trigger:hover { background: var(--wps-light); color: var(--wps-navy); }
.m-trigger.is-active-item { color: var(--wps-navy); }

.m-chev {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  transition: transform var(--t) var(--ease);
}
.m-trigger.is-open .m-chev { transform: rotate(180deg); }

/* Mobile accordion panel */
.m-sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.28s var(--ease);
  background: var(--wps-light);
  border-radius: 0 0 10px 10px;
}

.m-sub-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px 11px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--wps-navy);
  text-decoration: none;
  min-height: 48px;
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
  border-radius: 8px;
  margin: 2px 6px;
}
.m-sub-item:hover { color: var(--wps-blue); background: rgba(0,101,164,0.06); }
.m-sub-icon {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, #82F0EC, #6EFCAA);
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.m-sub-icon svg { width: 13px; height: 13px; stroke: var(--color-navy); fill: none; stroke-width: 2; }
.m-sub-icon i { font-size: 14px; color: var(--color-navy); line-height: 1; }

.m-divider { height: 1px; background: var(--wps-border); margin: 8px 2px; }

/* Sub-panel CTA (e.g. Compare All Plans) */
.m-sub-cta {
  padding: 10px 6px 6px;
}
.m-sub-cta .btn-cta {
  width: 100%;
  justify-content: center;
  height: 44px;
  border-radius: 20px;
  font-size: 14px;
}

/* Thin divider inside a sub-panel (separates main items from resource links) */
.m-sub-divider {
  height: 1px;
  background: var(--wps-border);
  margin: 6px 6px 4px;
}

/* ─── Drawer login button ─── */
.m-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 54px;
  background: var(--wps-navy);
  color: var(--wps-white);
  border: none;
  border-radius: 20px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t) var(--ease);
  margin-top: 4px;
}
.m-login-btn svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none; stroke-width: 2;
  flex-shrink: 0;
}
.m-login-btn:hover { background: var(--color-primary-dark); }

/* ─── Drawer login panel (collapsed by default) ─── */
.m-login-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.32s var(--ease);
}
.m-login-panel.is-open {
  max-height: 800px;
}
.m-login-panel .m-login-label {
  margin-top: 14px;
}

.m-login-label {
  font-family: 'Brandon Grotesque', 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wps-gray);
  padding: 4px 4px 6px;
  margin: 0;
}

.m-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  padding-top: 4px;
}
.m-actions .btn-login,
.m-actions .btn-cta {
  flex: 1;
  justify-content: center;
  height: 48px;
  font-size: 15px;
  border-radius: 20px;
}

/* ─── LOGIN MODAL ─── */
.login-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,20,45,0.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.login-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.login-modal {
  background: var(--wps-white);
  border-radius: 20px;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  box-shadow: 0 24px 72px rgba(0,20,45,0.22);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.28s var(--ease);
}
.login-modal-backdrop.is-open .login-modal {
  transform: translateY(0) scale(1);
}

.login-modal-image {
  position: relative;
  width: 100%;
  height: 350px;
  overflow: visible; /* tag bleeds below the image into the body */
}
.login-modal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.login-modal-image-text {
  position: absolute;
  bottom: 18px;
  left: 22px;
  right: 22px;
  color: var(--wps-white);
}
.login-modal-image-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.2px;
  margin-bottom: 3px;
}
.login-modal-image-text p {
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0.88;
  letter-spacing: 0.1px;
}

.login-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--wps-white);
  transition: background var(--t) var(--ease);
  z-index: 1;
}
.login-modal-close:hover { background: rgba(255,255,255,0.35); }
.login-modal-close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; }

/* "Log in to your account." tag — overlaps image/body seam */
.login-modal-tag {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center bottom;
  background: var(--gradient-navy-ltblue);
  color: #FFFFFF;
  font-family: var(--font-headline);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 1rem 3.2rem;
  border-radius: 0.6rem 0rem 0.6rem 0rem;
  z-index: 10;
  white-space: nowrap;
}

.login-modal-body {
  padding: 44px 22px 26px; /* extra top padding so tag doesn't overlap rows */
}

.login-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lm-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 16px 12px 14px;
  border-radius: 20px;
  font-family: 'Brandon Grotesque', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease), transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
  border: 2px solid transparent;
  text-align: center;
  line-height: 1.2;
}
.lm-btn:hover { transform: translateY(-2px); }

.lm-btn-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background var(--t) var(--ease);
}
.lm-btn-icon svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Member Login – navy filled */
.lm-member {
  background: var(--wps-navy);
  color: var(--wps-white);
}
.lm-member .lm-btn-icon { background: rgba(255,255,255,0.12); }
.lm-member:hover { background: #004070; box-shadow: 0 6px 20px rgba(0,48,87,0.28); }

/* Agent Login – navy outlined */
.lm-agent {
  background: transparent;
  color: var(--wps-navy);
  border-color: rgba(0,48,87,0.22);
}
.lm-agent .lm-btn-icon { background: rgba(0,48,87,0.07); }
.lm-agent:hover { background: var(--wps-light); border-color: var(--wps-navy); box-shadow: 0 4px 14px rgba(0,48,87,0.10); }

/* Enroll Now – teal filled */
.lm-enroll {
  background: var(--wps-mint);
  color: var(--wps-white);
}
.lm-enroll .lm-btn-icon { background: rgba(255,255,255,0.15); }
.lm-enroll:hover { background: #008f85; box-shadow: 0 6px 20px rgba(0,164,153,0.30); }

/* Get a Quote – gold outlined */
.lm-quote {
  background: transparent;
  color: var(--wps-navy);
  border-color: rgba(232,168,32,0.45);
}
.lm-quote .lm-btn-icon { background: rgba(232,168,32,0.12); color: var(--wps-fuchsia); }
.lm-quote:hover { background: rgba(232,168,32,0.07); border-color: var(--wps-fuchsia); box-shadow: 0 4px 14px rgba(232,168,32,0.18); }

/* ─── Login modal stacked rows ─── */
.lm-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-light-bg);
  border-radius: 16px;
  padding: 10px 12px;
}

.lm-row-group {
  display: flex;
  flex-direction: column;
}

.lm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px 11px 14px;
  background: transparent;
  border: none;
  border-bottom: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--wps-navy);
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  border-radius: 8px;
}
.lm-row:hover {
  background: var(--wps-navy);
  color: #fff;
  text-decoration: none;
}

.lm-row-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #82F0EC, #6EFCAA);
  color: var(--wps-navy);
  transition: transform var(--t) var(--ease);
}
.lm-row-icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.lm-row-icon i { font-size: 13px; color: var(--wps-navy); line-height: 1; }

.lm-row-label { flex: 1; letter-spacing: 0.01em; }

.lm-row-arrow,
.lm-row-chev {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  opacity: 0.4;
  flex-shrink: 0;
}
.lm-row-chev { transition: transform 0.22s var(--ease); }
/* Rotate right-arrow 90° clockwise → points down when expanded */
.lm-expandable[aria-expanded="false"] .lm-row-chev { transform: rotate(90deg); opacity: 0.7; }

.lm-row--agent,
.lm-row--customer,
.lm-row--employer,
.lm-row--provider { background: transparent; color: #000000; }

.lm-row--agent:hover,
.lm-row--customer:hover,
.lm-row--employer:hover,
.lm-row--provider:hover {
  background: var(--wps-navy);
  color: #fff;
}

/* Sub-panel accordion (CSS grid-template-rows trick) */
.lm-sub-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s var(--ease);
  background: rgba(4,39,137,0.03);
}
.lm-sub-panel.is-open { grid-template-rows: 1fr; }
.lm-sub-panel-inner { overflow: hidden; }

.lm-sub-item {
  display: block;
  padding: 10px 16px 10px 64px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--wps-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(4,39,137,0.06);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.lm-sub-item:last-child { border-bottom: none; }
.lm-sub-item:hover { background: rgba(4,39,137,0.07); color: var(--wps-blue); }

/* ─── SEARCH OVERLAY ─── */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,30,60,0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
.search-overlay.is-open { opacity: 1; pointer-events: auto; }

.search-box {
  width: 100%;
  max-width: 580px;
  background: var(--wps-white);
  border-radius: 16px;
  padding: 6px 6px 6px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 20px 60px rgba(0,30,60,0.18);
  transform: translateY(-12px);
  transition: transform var(--t) var(--ease);
}
.search-overlay.is-open .search-box { transform: translateY(0); }
.s-icon { width: 18px; height: 18px; stroke: var(--wps-gray); fill: none; stroke-width: 2; flex-shrink: 0; }
.search-box input {
  flex: 1;
  border: none; outline: none;
  font-family: 'Brandon Grotesque', 'DM Sans', sans-serif;
  font-size: 16px;
  color: var(--wps-navy);
  background: transparent;
  min-width: 0;
}
.search-box input::placeholder { color: var(--wps-gray); }
.s-close {
  width: 42px; height: 42px;
  border: none;
  background: var(--wps-light);
  border-radius: 20px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--wps-navy);
  flex-shrink: 0;
  transition: background var(--t) var(--ease);
}
.s-close:hover { background: rgba(0,101,164,0.10); }
.s-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ─── BREAKPOINTS ─── */

/* Tight desktop: 1024px – 1199px — compress nav so items don't overlap login */
/* ─── Login modal — desktop sizes ─── */
@media (min-width: 1024px) {
  .lm-stack {
    background: transparent;
    border-radius: 0;
    padding: 4px 0;
    gap: 2px;
  }
  .lm-row {
    font-size: 20px;
    font-weight: 700;
    padding: 0.75rem 0.875rem;
    gap: 0.875rem;
    border-radius: 10px;
  }
  .lm-row:hover {
    background: var(--color-light-bg);
    color: var(--wps-navy);
    box-shadow: inset 0 0 0 1px rgba(4,39,137,0.06);
  }
  .lm-row-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    transition: transform var(--t) var(--ease);
  }
  .lm-row:hover .lm-row-icon { transform: scale(1.1) translateY(-1px); }
  .lm-row-icon svg { width: 20px; height: 20px; }
  .lm-row-icon i { font-size: 20px; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .nav-bar    { padding: 0 16px; gap: 2px; }
  .nav-links  { gap: 0; margin-right: 8px; }
  .nav-link   { padding: 6px 5px; }
}

/* Tablet: 768px – 1023px */
@media (max-width: 1023px) {
  .nav-links,
  .nav-actions     { display: none; }
  .nav-bar-tablet  { display: flex; }
  .hamburger       { display: flex; }
  .mobile-drawer   { display: flex; }
  .nav-logo        { margin-right: 0; }
  .logo-mark       { width: 32px; height: 32px; border-radius: 8px; }
  .logo-mark::after  { width: 15px; height: 15px; }
  .logo-mark::before { width: 6px; height: 6px; }
  .logo-text b     { font-size: 15px; }
  .logo-text small { font-size: 9px; letter-spacing: 1.1px; }
  /* Keep the header the same height on scroll for mobile/tablet — only
     desktop gets the shrink-on-scroll treatment. */
  .nav-wrapper.is-scrolled { height: 9rem; }
  /* The wide (6:1) Auxiant lockup needs to shrink further here or it
     crowds out the hamburger/search icons in .nav-bar-tablet. */
  .nav-logo img.logo-aso { height: 32px; }
}

/* Small phone */
@media (max-width: 479px) {
  .nav-bar { padding: 0 14px; }
  .nav-logo { margin-right: 0; gap: 7px; }
  .logo-mark { width: 28px; height: 28px; border-radius: 7px; }
  .logo-mark::after  { width: 13px; height: 13px; border-width: 2.5px; }
  .logo-mark::before { width: 5px; height: 5px; }
  .logo-text b { font-size: 13px; }
  .logo-text small { display: none; }
  .search-overlay { padding-top: 56px; }
  .m-actions { flex-direction: column; }
  .m-actions .btn-login,
  .m-actions .btn-cta { flex: unset; width: 100%; }
  .nav-wrapper { height: 6.3rem; }
  .nav-wrapper.is-scrolled { height: 6.3rem; }
  .nav-logo img.logo-aso { height: 26px; }
}

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

.hero {
  position: relative;
  background: var(--gradient-navy-mint-white);
  /*padding: 2.5rem 0 3rem;*/
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Intro — heading + copy below the hero, centered in a narrow column
   -------------------------------------------------------------------------- */
.Intro .col-xs-12 {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}


/* ── Split Hero — large headline left, photo right ─────────────────────── */
.hero-split {
  display: flex;
  flex-direction: row;           /* side-by-side at ALL sizes */
  overflow: hidden;
  background: linear-gradient(120deg, #021d65 0%, #042789 40%, #0055c8 72%, #00AEEF 100%);
  min-height: 440px;
  position: relative;
}

/* Left — text column
   Left padding mirrors Bootstrap .container indent so text aligns with
   .wps-page-hero content at any canvas width.
   100% here resolves to the hero-split (canvas) width — same reference
   Bootstrap uses for auto-margins — so the formula matches exactly.
   Falls back to 0.75rem (container gutter only) when canvas < 1320px. */
.hero-split-body {
  flex: 0 0 54%;
  padding: 3.5rem 2.5rem 3.5rem max(0.75rem, calc((100% - 1320px) / 2 + 0.75rem));
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}


/* Eyebrow / tagline above the headline */
.hero-split-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mint);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.hero-split-eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--color-mint);
  flex-shrink: 0;
  border-radius: 2px;
}

.hero-split-headline {
  font-family: var(--font-headline);
  font-size: clamp(1.6rem, 3.4vw, 3.25rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
}

.hero-split-sub {
  font-family: var(--font-body);
  color: rgba(255,255,255);
  margin: 0 0 2rem;
}

.hero-split-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* Ghost / outline secondary button for the split hero */
.hero-split-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(255,255,255,0.82);
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 50px;
  padding: 0.65rem 1.4rem;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  white-space: nowrap;
}
.hero-split-btn-ghost:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.08);
}

/* Right — photo column */
.hero-split-media {
  flex: 0 0 46%;
  position: relative;
  overflow: hidden;
}


.hero-split-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 3;
}

.hero-split-halftone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  opacity: 0.18;
  mix-blend-mode: soft-light;
}

/* Decorative spark — sits behind the photo, upper-right corner */
.hero-split-spark {
  position: absolute;
  width: 900px;
  top: -24rem;
  right: -26rem;
  z-index: 2;
  opacity: 0.9;
  pointer-events: none;
}

/* ── Tablet: tighten padding, hide subtitle ── */
@media (min-width: 576px) and (max-width: 991.98px) {
  .hero-split {
    min-height: 320px;
  }
  .hero-split-body {
    padding: 2.5rem 1.5rem 2.5rem max(0.75rem, calc((100% - 1320px) / 2 + 0.75rem));
    flex: 0 0 56%;
  }
  .hero-split-media { flex: 0 0 44%; }
  .hero-split-sub { display: none; }
  .hero-split-spark { width: 660px; top: -17rem; right: -19rem; }
}

/* ── Mobile: still side-by-side, scaled down ── */
@media (max-width: 575.98px) {
  .hero-split {
    min-height: 200px;
  }
  .hero-split-body {
    flex: 0 0 57%;
    padding: 1.5rem 0.75rem 1.5rem 1.5rem;
  }
  .hero-split-eyebrow  { display: none; }
  .hero-split-sub      { display: none; }
  .hero-split-headline { margin-bottom: 1rem; font-size: clamp(1.15rem, 5.5vw, 1.6rem); letter-spacing: -0.02em; }
  .hero-split-actions .btn-cta { font-size: 0.78rem; padding: 0.5rem 1rem; }
  .hero-split-btn-ghost { display: none; }
  .hero-split-media {
    flex: 0 0 43%;
  }
  .hero-split-spark { width: 420px; top: -11rem; right: -12rem; }
}

/* No-photo split: single-block layout, decorations absolutely positioned */
.hero-split--no-photo {
  display: flex;
  align-items: center;
}
.hero-split--no-photo .hero-split-body {
  flex: none;
  max-width: 60%;
  position: relative;
  z-index: 2;
}
.hero-split-body .wps-badge { align-self: flex-start; }
.hero-split--no-photo .hero-split-halftone {
  position: absolute;
  top: 0; right: -5%;
  width: 55%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  opacity: 0.4;
  mix-blend-mode: soft-light;
}
.hero-split--no-photo .hero-split-spark {
  position: absolute;
  width: 860px;
  top: -23rem;
  right: -25rem;
  z-index: 1;
  opacity: 0.9;
  pointer-events: none;
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .hero-split--no-photo .hero-split-spark { width: 620px; top: -17rem; right: -18rem; }
}
@media (max-width: 575.98px) {
  .hero-split--no-photo .hero-split-spark { width: 400px; top: -11rem; right: -12rem; }
  .hero-split--no-photo .hero-split-body  { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   CAMPAIGN HERO  (.hero-campaign)
   Full-bleed billboard: navy overlay · large headline left ·
   person photo right · spark decoration upper-right
   ═══════════════════════════════════════════════════════════════ */

.hero-campaign {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  background: var(--color-navy);
  display: flex;
  align-items: stretch;
}

/* ── Left: headline column ── */
.hero-campaign-content {
  flex: 0 0 65%;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem 2rem 3.5rem max(0.75rem, calc((100% - 1320px) / 2 + 0.75rem));
}

.hero-campaign-headline {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(1.5rem, 6.6vw, 3.85rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
}

/* ── Right: media column — bg scene + spark + person ── */
.hero-campaign-media {
  flex: 1;
  position: relative;
  overflow: visible; /* allow person photo to bleed left over the navy */
}

/* Background scene photo — fills the media column */
.hero-campaign-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 1;
}

/* Spark decoration — overlays navy + bg, sits behind person photo */
.hero-campaign-spark {
  position: absolute;
  left: -52%;
  top: -13rem;
  width: clamp(220px, 140%, 520px);
  z-index: 3;
  pointer-events: none;
}

/* Person photo — overlays both navy and bg image at all breakpoints */
.hero-campaign-photo {
  position: absolute;
  left: -42%;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: left bottom;
  z-index: 4;
}

/* ── Tablet ── */
@media (min-width: 576px) and (max-width: 991.98px) {
  .hero-campaign         { min-height: 300px; }
  .hero-campaign-content { flex: 0 0 62%; }
  .hero-campaign-spark   { left: -42%; width: clamp(160px, 130%, 320px); top: -8rem; }
  .hero-campaign-photo   { left: -40%; height: 105%; }
}

/* ── Mobile ── */
@media (max-width: 575.98px) {
  .hero-campaign         { min-height: 200px; }
  .hero-campaign-content { flex: 0 0 62%; padding: 1.5rem 0.75rem 1.5rem 1.5rem; }
  .hero-campaign-headline { font-size: clamp(1rem, 5.5vw, 1.6rem); }
  .hero-campaign-spark   { left: -25%; width: 200px; top: -3.5rem; }
  .hero-campaign-photo   { left: -30%; height: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   CAMPAIGN HERO CARD  (.hero-campaign--card)
   Card variant of .hero-campaign — same layout, smaller scale,
   WPS asymmetric corners. No changes to base .hero-campaign.
   ═══════════════════════════════════════════════════════════════ */

/* ── Wrapper: provides positioning context for the overflowing photo ── */
.hero-campaign-card-wrap {
  position: relative;
  padding-top: 2.5rem; /* headroom above card for photo overflow */
  width: 100%; /* full width as a flex child inside .hero */
}

/* ── Card: overflow hidden clips bg + spark cleanly to card shape ──
   Uses a fixed aspect-ratio so the card holds the same shape at every
   width. Flex content provides a natural floor so the headline never
   gets crushed on very narrow screens. ── */
.hero-campaign--card {
  border-radius: 0 3rem 0 3rem;
  aspect-ratio: 16 / 7;
  /* Floor: never shrink below the content's natural height, so the
     headline + subhead always fit (overflow:hidden would otherwise
     clip them on the narrowest screens). 16/7 wins wherever there's
     enough width; content wins only where it must. */
  min-height: min-content;
  overflow: hidden;
  contain: paint;
  transform: translateZ(0);
}

.hero-campaign--card .hero-campaign-content {
  flex: 0 0 58%;
  padding: 2.5rem 1.5rem 2.5rem 2.5rem;
  justify-content: flex-start;
}

.hero-campaign--card .hero-campaign-headline {
  font-size: clamp(1.2rem, 4vw, 4rem);
}

.hero-campaign--card .hero-campaign-spark {
  left: -52%;
  top: -13rem;
  width: clamp(220px, 140%, 520px);
}

/* ── Wrapper-level spark: sits in the card-wrap so it can layer
   BEHIND the person photo (z-index 5 < person z-index 10) ── */
.hero-campaign-card-spark {
  position: absolute;
  right: 2%;
  bottom: -8%;
  width: clamp(180px, 32%, 340px);
  z-index: 5;
  pointer-events: none;
}

/* ── Photo: positioned relative to wrapper, bleeds above card top ── */
.hero-campaign-card-photo {
  position: absolute;
  right: 0;
  top: 0;           /* starts at top of wrapper = above card by padding-top amount */
  height: 100%;
  width: auto;
  max-width: 55%;
  object-fit: contain;
  object-position: right bottom;
  z-index: 10;
  pointer-events: none;
}

/* ── Photo full-bleed variant — bg image covers entire card ── */
.hero-campaign--card-photo {
  background: transparent;
}
/* Stretch media column to fill the full card as a backdrop */
.hero-campaign--card-photo .hero-campaign-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
/* Gradient overlay on the left so headline reads over the photo */
.hero-campaign--card-photo .hero-campaign-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(4,15,50,0.72) 0%, rgba(4,15,50,0.30) 60%, rgba(4,15,50,0.05) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-campaign--card-photo .hero-campaign-content {
  position: relative;
  z-index: 2;
}
.hero-campaign--card-photo .hero-campaign-headline {
  color: #fff;
}

/* ── Opt-in scrim variant (.hero-campaign--overlay) ──
   Lighter navy wash that actually paints ABOVE the background photo
   (base ::before sits at z-index 1, behind .hero-campaign-bg), plus a
   soft headline shadow. Add the class alongside .hero-campaign--card-photo
   only where you want it — other photo heroes are untouched. ── */
.hero-campaign--overlay .hero-campaign-media::before {
  background: linear-gradient(to right, rgba(4,15,50,0.45) 0%, rgba(4,15,50,0.14) 55%, rgba(4,15,50,0) 100%);
  z-index: 2;
}
.hero-campaign--overlay .hero-campaign-headline {
  text-shadow: 0 2px 12px rgba(4, 15, 50, 0.45), 0 1px 3px rgba(4, 15, 50, 0.35);
}

/* ── Larger headline size modifier ── */
.hero-campaign-headline--lg {
  font-size: clamp(1.75rem, 4.5vw, 3.5rem);
}

/* ── Headline colour modifier: navy ──
   For light / photo backgrounds where the left navy gradient overlay
   keeps a dark headline legible. Chained with the base class so it wins
   over the white default set by the --card-photo variant. ── */
.hero-campaign-headline.hero-campaign-headline--navy {
  color: var(--color-navy);
}

/* ── Headline divider ── */
.hero-campaign-divider {
  display: block;
  width: 48px;
  height: 4px;
  background: var(--color-mint);
  border-radius: 2px;
  margin: 1.25rem 0 0;
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .hero-campaign-divider { width: 38px; height: 3px; margin-top: 1rem; }
}

@media (max-width: 575.98px) {
  .hero-campaign-divider { width: 30px; height: 3px; margin-top: .75rem; }
}

/* ── Subhead ── */
.hero-campaign-sub {
  font-family: var(--font-body);
  font-size: 1.25rem;          /* mobile */
  font-weight: 500;
  color: rgba(255, 255, 255);
  line-height: 1.25;
  margin: 1.25rem 0 0;
  max-width: 32ch;
}

@media (min-width: 576px) {
  .hero-campaign-sub { font-size: 1.15rem; } /* tablet */
}

@media (min-width: 992px) {
  .hero-campaign-sub { font-size: 2.5rem; }  /* desktop */
}

/* ── Hero badge: allow long labels to wrap within the content column
   instead of running on one line behind the photo and clipping.
   Scoped to the hero card so badges elsewhere keep nowrap. ── */
.hero-campaign--card .wps-badge {
  white-space: normal;
  max-width: 100%;
  text-align: left;
  line-height: 1.3;
}

/* ── Responsive tuning ──
   Height is handled by aspect-ratio (16/7) at every width, so these
   blocks only adjust proportions: content column, spark, photo, padding,
   headline size, and corner radius. ── */

/* ── Large tablet 768–991px ── */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-campaign-card-wrap          { padding-top: 3rem; }
  .hero-campaign--card .hero-campaign-content { flex: 0 0 60%; }
  .hero-campaign--card .hero-campaign-spark   { left: -42%; top: -8rem; width: clamp(160px, 130%, 320px); }
  .hero-campaign-card-photo         { max-width: 52%; }
}

/* ── Small tablet 576–767px ── */
@media (min-width: 576px) and (max-width: 767.98px) {
  .hero-campaign-card-wrap          { padding-top: 3rem; }
  .hero-campaign--card .hero-campaign-content { flex: 0 0 62%; }
  .hero-campaign--card .hero-campaign-spark   { left: -42%; top: -8rem; width: clamp(130px, 130%, 280px); }
  .hero-campaign-card-photo         { max-width: 52%; }
}

/* ── Large mobile 400–575px ── */
@media (min-width: 400px) and (max-width: 575.98px) {
  .hero-campaign-card-wrap          { padding-top: 3rem; }
  .hero-campaign--card              { border-radius: 0 2rem 0 2rem; }
  .hero-campaign--card .hero-campaign-content { flex: 0 0 62%; padding: 1.25rem 0.75rem 1.25rem 1.25rem; }
  .hero-campaign--card .hero-campaign-headline { font-size: clamp(1rem, 4.8vw, 1.5rem); line-height: 1.15; }
  .hero-campaign--card .hero-campaign-spark   { left: -25%; top: -3.5rem; width: 200px; }
  .hero-campaign-card-photo         { max-width: 48%; }
  /* Badge: smaller text + tighter top gap so 2 lines stay compact */
  .hero-campaign--card .wps-badge--lg { font-size: 0.78rem; padding: 0.4em 1em; margin-top: 0.85rem !important; }
}

/* ── Small mobile <400px ── */
@media (max-width: 399.98px) {
  .hero-campaign-card-wrap          { padding-top: 3rem; }
  .hero-campaign--card              { border-radius: 0 1.5rem 0 1.5rem; }
  .hero-campaign--card .hero-campaign-content { flex: 0 0 64%; padding: 1rem 0.5rem 1rem 1rem; }
  .hero-campaign--card .hero-campaign-headline { font-size: clamp(0.85rem, 4.5vw, 1.25rem); line-height: 1.15; }
  .hero-campaign--card .hero-campaign-spark   { left: -20%; top: -2.5rem; width: 160px; }
  .hero-campaign-card-photo         { max-width: 44%; }
  /* Badge: smallest readable size, tight gap */
  .hero-campaign--card .wps-badge--lg { font-size: 0.68rem; padding: 0.35em 0.85em; margin-top: 0.6rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   WPS PAGE HERO  (.wps-page-hero)
   Standard interior-page banner: headline, optional subtitle,
   optional eyebrow/breadcrumb. Spark + halftone decorations.
   ═══════════════════════════════════════════════════════════════ */

.wps-page-hero {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 3.75rem;
  /* default: solid navy */
  background: var(--color-navy);
}

/* ── Content ── */
.wps-page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.wps-page-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mint);
  margin-bottom: 1rem;
}
.wps-page-hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--color-mint);
  border-radius: 2px;
  flex-shrink: 0;
}

.wps-page-hero h1,
.wps-page-hero-title {
  font-family: var(--font-headline);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
}

.wps-page-hero-sub {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.5vw, 1.5rem);
  color: rgba(255,255,255);
  line-height: 1.5;
  margin: 0;
  max-width: 640px;
}

/* ── Decorations (positioned absolute, behind content) ── */
.wps-page-hero-spark {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  /* default: top-right */
  top: 2rem;
  right: -3rem;
  width: 600px;
  /*opacity: 0.55;*/
}

.wps-page-hero-halftone {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  bottom: -12rem;
  right: 5%;
  width: 320px;
  mix-blend-mode: soft-light;
}

/* ── Background variants ── */
.wps-page-hero--navy {
  background: var(--color-navy);
}
.wps-page-hero--navy-ltblue {
  background: linear-gradient(120deg, #021d65 0%, #042789 45%, #0055c8 75%, #00AEEF 100%);
}
.wps-page-hero--navy-mint {
  background: linear-gradient(120deg, #021d65 0%, #042789 50%, #6EFCAA 100%);
}
.wps-page-hero--purple-ltblue {
  background: linear-gradient(120deg, #4a1060 0%, #91268F 45%, #00AEEF 100%);
}
.wps-page-hero--navy-ltblue .wps-page-hero-eyebrow,
.wps-page-hero--navy-mint   .wps-page-hero-eyebrow { color: var(--color-mint); }
.wps-page-hero--navy-ltblue .wps-page-hero-eyebrow::before,
.wps-page-hero--navy-mint   .wps-page-hero-eyebrow::before { background: var(--color-mint); }
.wps-page-hero--purple-ltblue .wps-page-hero-eyebrow { color: var(--color-lt-blue); }
.wps-page-hero--purple-ltblue .wps-page-hero-eyebrow::before { background: var(--color-lt-blue); }

/* ── Compact size modifier ── */
.wps-page-hero--compact {
  padding: 2.75rem 0 2.5rem;
}
.wps-page-hero--compact .wps-page-hero h1,
.wps-page-hero--compact .wps-page-hero-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: 0.5rem;
}
.wps-page-hero--compact .wps-page-hero-spark {
  width: 220px;
  top: -1.5rem;
  right: -1.5rem;
}
.wps-page-hero--compact .wps-page-hero-halftone {
  width: 200px;
}

@media (max-width: 767.98px) {
  .wps-page-hero { padding: 3rem 0 2.75rem; }
  .wps-page-hero-spark   { width: 200px; top: -1.5rem; right: -1rem; }
  .wps-page-hero-halftone { width: 180px; right: 4%; }
}

.hero-white-backgroud {
  position: relative;
  padding: 2.5rem 0 3rem;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* ── Full-cover halftone overlay ───────────────────────────────────────── */
.hero-halftone {
  position: absolute;
  inset: 0;
  background-image: url('../../assets/images/halftone-navy-duffy.svg');
  background-size: 100%;         /* full width across the hero             */
  background-position: center top;
  background-repeat: no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
  /* Fade out before the mint zone (~75% down) */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 75%);
  mask-image:         linear-gradient(to bottom, black 0%, transparent 75%);
}

/* ── Opt-in slow drift for the halftone field (home hero) ──
   The SVG is a CSS background-image, so we can't touch its individual
   dots — instead the whole masked layer drifts on a looping, non-symmetric
   path with a gentle zoom + micro-rotation, while opacity breathes on a
   separate, out-of-phase cycle so the motion never reads as a simple
   back-and-forth. Kept zoomed past 1.0 so the drift never exposes an edge
   (hero is overflow:hidden anyway). ── */
@media (prefers-reduced-motion: no-preference) {
  .hero-halftone--drift {
    animation:
      heroHalftoneDrift 52s cubic-bezier(0.45, 0, 0.55, 1) infinite,
      heroHalftonePulse 17s ease-in-out infinite;
    will-change: transform, opacity;
  }
}

@keyframes heroHalftoneDrift {
  0%   { transform: translate3d(-1.4%, 0.6%, 0) scale(1.07) rotate(-0.4deg); }
  33%  { transform: translate3d(1.1%, -1%, 0)   scale(1.09) rotate(0.3deg); }
  66%  { transform: translate3d(1.5%, 0.8%, 0)  scale(1.07) rotate(0.5deg); }
  100% { transform: translate3d(-1.4%, 0.6%, 0) scale(1.07) rotate(-0.4deg); }
}

@keyframes heroHalftonePulse {
  0%, 100% { opacity: 0.20; }
  50%      { opacity: 0.30; }
}

/* ── Container ─────────────────────────────────────────────────────────── */
.hero-container {
  position: relative;
  z-index: 1;
}

/* ── Floating card ─────────────────────────────────────────────────────── */
.hero-card {
  position: relative;
  overflow: hidden;

  /* Landscape card — becomes taller on smaller screens via padding-top */
  aspect-ratio: 16 / 8;
  max-height: 680px;

}

/* ── Photo ─────────────────────────────────────────────────────────────── */
.hero-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}


.hero-card-img-2 {
  position: absolute;
  inset: 0;
  width: 100%;
  object-position: center center;
  display: block;
}

/* ── Dark gradient overlay — fades photo on left for text legibility ───── */
.hero-card-overlay {
  position: absolute;
  inset: 0;

  z-index: 1;
}

/* ── Spark mark — bottom-left, large + partially clipped ───────────────── */
.hero-card-spark {
  position: absolute;
  bottom: -43%;
  left: -1%;
  width: 50%;
  height: 120%;
  object-fit: contain;
  object-position: bottom left;
  z-index: 3;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  transform-origin: bottom left;
  transition: opacity 0.6s var(--ease) 0.15s, transform 0.8s var(--ease) 0.15s;
  pointer-events: none;
}

/* ── Cloud-blue halftone ring — centred on spark, one layer behind ──────── */
.hero-card-halftone {
  position: absolute;
  bottom: -30%;
  left: 7%;
  width: 56%;
  height: 70%;
  object-fit: contain;
  object-position: bottom left;
  z-index: 2;                    /* above photo (z0), below spark (z3) */
  opacity: 0;
  transform: scale(0.85) rotate(-10deg);
  transform-origin: bottom left;
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
  pointer-events: none;
}

.hero-card-halftone.hero-animate {
  opacity: 0.9;
  transform: scale(1) rotate(0deg);
}

.hero-card-spark.hero-animate {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Headline ──────────────────────────────────────────────────────────── */
.hero-card-content {
  position: absolute;
  top: clamp(5rem, 16%, 8rem);
  left: clamp(1.25rem, 5%, 3.5rem);
  z-index: 4;
  max-width: 48%;
  /* Hidden state */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease) 0.3s, transform 0.7s var(--ease) 0.3s;
}

.hero-card-content.hero-animate {
  opacity: 1;
  transform: translateY(0);
}

.hero-headline {
  color: #ffffff;
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 3.6vw, 3.85rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  text-shadow:
    0 2px 8px rgba(4, 39, 137, 0.45),
    0 6px 24px rgba(4, 39, 137, 0.25);
}

/* ── WPS icon watermark ────────────────────────────────────────────────── */
.hero-card-icon {
  position: absolute;
  bottom: clamp(-6px, -1.5%, -12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: clamp(56px, 7.5vw, 96px);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

/* ── Tablet (≤ 991px) ──────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .hero-card {
    aspect-ratio: 16 / 9;
  }

    /*.hero-card-overlay {
    background: linear-gradient(
      to right,
      rgba(4, 15, 50, 0.95)  0%,
      rgba(4, 15, 50, 0.82) 35%,
      rgba(4, 15, 50, 0.30) 60%,
      transparent            80%
    );
  }*/
}

/* ── Mobile (≤ 575px) ──────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .hero {
   /* padding: 1.75rem 0 2.25rem;    more breathing room — gradient visible above & below */
  }

  .hero-card {
    aspect-ratio: auto !important;   /* override any cascaded ratio */
    height: 200px !important;        /* fixed height — shows both subjects clearly */
    max-height: none;
    border-radius: 0 2.5rem 0 2.5rem;
  }

  /* Shift crop to upper-right where the subjects (dad & son) actually are */
  .hero-card-img {
    object-position: 65% 15%;
  }

  /* Softer left-fade — photo stays vivid, text stays legible */
  .hero-card-overlay {
    z-index: 1;
  }

  /* Headline — top-left, pinned, always visible */
  .hero-card-content {
    top: 1.5rem;
    left: 1.25rem;
    max-width: 55%;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-headline {
    font-size: clamp(1.2rem, 6vw, 1.6rem);  /* smaller so it wraps less */
    line-height: 1.2;
	padding-top: .5rem;
  }

  /* Decorative elements — larger and more prominent on mobile */
  .hero-card-spark {
    width: 55%;
    height: 100%;
    bottom: -50%;
    left: -3%;
  }

  .hero-card-halftone {
    width: 65%;
    height: 110%;
    bottom: -65%;
    left: -2%;
  }

  .hero-card-icon {
    width: 48px;
    bottom: -4px;
  }
}

/* --------------------------------------------------------------------------
   Plan Cards Grid
   -------------------------------------------------------------------------- */

.plan-cards {
  padding: 2.75rem 0 3rem;
  background: #fff;
}

.plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 280px;   /* all rows identical height */
  gap: 1.125rem;
}

@media (max-width: 991.98px) {
.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 280px;   /* all rows identical height */
  gap: 1.125rem;
}
  }

/* ── Card shell ──────────────────────────────────────────────────────────── */
.plan-card {
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  height: 100%;        /* fill the grid row height */
  position: relative;
}

.plan-card--mint {
  background: var(--gradient-navy-mint);
}
.plan-card--blue {
  background: var(--gradient-navy-ltblue);
}

/* ── Text body ───────────────────────────────────────────────────────────── */
.plan-card-body {
  flex: 0 0 58%;
  padding: 1.75rem 1.25rem 1.75rem 1.875rem;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.plan-card-title {
  font-family: var(--font-headline);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.plan-card-text {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.25;
  margin-bottom: 0;
  font-weight: 500;
  opacity: 1;
  transition: opacity 0.25s var(--ease);
}

/* Hide text on hover so button takes its place */
.plan-card:hover .plan-card-text {
  opacity: 0;
}

/* ── Hover button — absolutely pinned to card body bottom ────────────────── */
.plan-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  bottom: 1.5rem;
  left: 1.875rem;
  padding: 0.7rem 1.625rem;
  border-radius: 20px;
  background: #fff;
  border: 2px solid #fff;
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  /* Hidden state */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s var(--ease),
              transform 0.25s var(--ease),
              background 0.2s var(--ease),
              border-color 0.2s var(--ease),
              color 0.2s var(--ease);
}

.plan-card-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease);
}

/* Reveal on card hover */
.plan-card:hover .plan-card-btn {
  opacity: 1;
  transform: translateY(0);
}

/* Button own hover — fuchsia brand pop + arrow slides right */
.plan-card-btn:hover {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
  text-decoration: none;
}
.plan-card-btn:hover svg {
  transform: translateX(5px);
}

/* Slight card lift on hover */
.plan-card {
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.plan-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(4, 39, 137, 0.28);
}

/* ── Photo & halftone ────────────────────────────────────────────────────── */
.plan-card-media {
  flex: 0 0 42%;
  position: relative;
  overflow: hidden;
}

/* Spark mark — top-right corner, reveals on hover like the halftone */
.plan-card-spark {
  position: absolute;
  top: -48%;
  right: -54%;
  width: 130%;
  height: 130%;
  object-fit: contain;
  object-position: top right;
  z-index: 2;
  opacity: 0;
  transform: rotate(-15deg) scale(0.8);
  transform-origin: top right;
  transition: opacity 0.5s var(--ease),
              transform 0.7s var(--ease);
  pointer-events: none;
}

.plan-card:hover .plan-card-spark {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Person photo — sits above the spark */
.plan-card-photo {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
  z-index: 3;
}

/* Halftone circle — behind the photo, fades + rotates in on card hover */
.plan-card-halftone {
  position: absolute;
  width: 145%;
  height: 145%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg) scale(0.85);
  transform-origin: center center;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s var(--ease),
              transform 0.7s var(--ease);
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.plan-card:hover .plan-card-halftone {
  opacity: 0.6;
  transform: translate(-50%, -50%) rotate(18deg) scale(1.05);
}

/* Left-edge fade blends the photo into the card gradient */
/* ── Tablet: 2 cols until 640px ──────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .plan-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;   /* 1-col, all cards same height */
    gap: 1rem;
  }

  .plan-card {
    height: 100%;
  }

  .plan-card-body {
    flex: 0 0 60%;
    padding: 1.5rem 1rem 1.5rem 1.5rem;
  }

  .plan-card-title {
    font-size: 1.25rem;
  }

  .plan-card-text {
    font-size: 1rem;
    opacity: 0;   /* always hidden on mobile — no hover available */
  }

  /* Always show the Learn More button on mobile (no hover on touch) */
  .plan-card-btn {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Small phone — keep row layout, tighten proportions ─────────────────── */
@media (max-width: 479.98px) {
  .plan-grid {
    grid-auto-rows: 180px;   /* tighter on small phones */
  }

  .plan-card {
    flex-direction: row;   /* image stays on the right */
    height: 100%;
  }

  .plan-card-body {
    flex: 0 0 58%;
    padding: 1.125rem 0.75rem 1.125rem 1.125rem;
  }

  .plan-card-title {
    font-size: 1.125rem;
  }

  .plan-card-text {
    font-size: 0.9375rem;
    line-height: .925rem;
  }

  .plan-card-btn {
    font-size: 0.75rem;
    padding: 0.45rem 0.875rem;
    margin-top: 0.75rem;
  }

  .plan-card-media {
    flex: 0 0 42%;
  }

}

/* --------------------------------------------------------------------------
   Stats Bar
   -------------------------------------------------------------------------- */

.stats-bar {
  background: var(--gradient-navy-ltblue);
  padding: 3rem 0;
  color: #fff;
}

.stat-number {
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: #fff;
}

.stat-label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Stat Cards  (.stat-card)
   Large-number metric card with WPS asymmetric corner radius (0 top-left,
   large top-right, 0 bottom-right, large bottom-left).
   Apply a .stat-card--[variant] modifier for color.
   -------------------------------------------------------------------------- */

.stat-card {
  border-radius: 0 3rem 0 3rem;
  padding: 2rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.875rem;
}

.stat-card-number {
  font-family: var(--font-headline);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.02em;
}

.stat-card-label {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.45;
  margin: 0;
}

/* ── Solid variants ─────────────────────────────────────── */
.stat-card--ltblue  { background: var(--color-lt-blue); }
.stat-card--navy    { background: var(--color-navy); }
.stat-card--cloud   { background: var(--color-cloud-blue); }
.stat-card--purple  { background: var(--color-purple); }
.stat-card--fuchsia { background: var(--color-fuchsia); }

/* Mint — navy text on light background */
.stat-card--mint { background: var(--color-mint); }
.stat-card--mint .stat-card-number { color: var(--color-navy); }
.stat-card--mint .stat-card-label  { color: rgba(4, 39, 137, 0.8); }

/* ── Gradient variants ──────────────────────────────────── */
.stat-card--gradient-navy   { background: var(--gradient-navy-ltblue); }
.stat-card--gradient-purple { background: var(--gradient-ltblue-purple); }
.stat-card--gradient-orange { background: var(--gradient-orange-fuchsia); }
.stat-card--gradient-mint   { background: var(--gradient-navy-mint); }

/* ── Tablet: stack to single column ── */
@media (min-width: 576px) and (max-width: 991.98px) {
  .stat-card { border-radius: 0 2rem 0 2rem; }
}

/* --------------------------------------------------------------------------
   CTA Card Grid  (.cta-card)
   Vertical dividers between columns; removed progressively at smaller sizes.
   -------------------------------------------------------------------------- */
.cta-card {
  padding: 2rem;
  border-right: 1px solid #D0D9EE;
}
.cta-card:last-child { border-right: none; }

/* Tablet 2-col: right card in each row has no right border */
@media (max-width: 991.98px) {
  .cta-card:nth-child(even) { border-right: none; }
}

/* Mobile 1-col: no borders */
@media (max-width: 767.98px) {
  .cta-card { border-right: none; }
}

/* Keep button text on one line across all breakpoints */
.cta-card .btn {
  white-space: nowrap;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
}

/* --------------------------------------------------------------------------
   Network Cards  (.network-card)
   Navy card used to showcase a provider network — map graphic, title, list.
   -------------------------------------------------------------------------- */

.network-card {
  background: var(--color-navy);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem 2rem 2.5rem;
  color: #fff;
}
.network-card-map {
  width: 100%;
  max-width: 260px;
  margin: 0 auto 1.75rem;
  display: block;
}
.network-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.2vw, 2rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Solution Cards
   -------------------------------------------------------------------------- */

.solution-card {
  background-color: #fff;	
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 2.5rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
}

.solution-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}

.card-icon {
  color: var(--color-lt-blue);
}

.solution-card .card-title {
  font-size: 2rem;
  line-height: 1.2;
  color: var(--color-navy);
  margin-bottom: 0.75rem;
}

.solution-card .card-text {
  color: var(--color-primary-dark);
  font-size: 1.5rem;
  line-height: 1.35;
  font-weight: 400;	
}

.card-link {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  text-decoration: none;
  margin-top: auto;
  padding-top: 1.25rem;
}
.card-link:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* Style 2 — Navy filled, WPS asymmetric corners */
.solution-card--navy {
  background: var(--color-navy);
  border-color: transparent;
  border-radius: 0 3.5rem 0 3.5rem;
}
.solution-card--navy .card-icon { color: var(--color-mint); }
.solution-card--navy .card-title { color: #fff; }
.solution-card--navy .card-text { color: rgba(255,255,255); }
.solution-card--navy .card-link {
  color: var(--color-mint);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.solution-card--navy .card-link:hover { color: #fff; text-decoration: none; }
.solution-card--navy:hover {
  box-shadow: 0 12px 36px rgba(4,39,137,0.40);
  transform: translateY(-3px);
}

/* Style 3 — Gradient, WPS asymmetric corners */
.solution-card--gradient {
  background: var(--gradient-navy-ltblue);
  border-color: transparent;
  border-radius: 0 3.5rem 0 3.5rem;
}
.solution-card--gradient .card-icon { color: var(--color-mint); }
.solution-card--gradient .card-title { color: #fff; }
.solution-card--gradient .card-text { color: rgba(255,255,255); }
.solution-card--gradient .card-link {
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;

}
.solution-card--gradient .card-link:hover { color: var(--color-mint); text-decoration: none; }
.solution-card--gradient:hover {
  box-shadow: 0 12px 36px rgba(4,39,137,0.35);
  transform: translateY(-3px);
}

/* Style 1 variant — Image top */
.solution-card--img-top {
  padding: 0;
  overflow: hidden;
}
.solution-card--img-top .solution-card-img-wrap {
  width: 100%;
  height: 275px;
  overflow: hidden;
  flex-shrink: 0;
}
.solution-card--img-top .solution-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s var(--ease);
}
.solution-card--img-top:hover .solution-card-img {
  transform: scale(1.04);
}
.solution-card--img-top .solution-card-body {
  padding: 2rem 2.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.solution-card-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.5rem;
}
.solution-card-actions .btn { flex: 1; }

/* --------------------------------------------------------------------------
   Login Cards — group/employer "which portal am I" selector
   -------------------------------------------------------------------------- */

.login-card {
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 2.5rem;
  text-align: center;
  height: 100%;
}

.login-card-title {
  font-size: 1.25rem;
  color: var(--color-navy);
  margin-bottom: 1.75rem;
}

.login-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  margin-bottom: 1.75rem;
}

.login-card-logo img {
  width: auto;
  height: auto;
  max-width: 280px;
  max-height: 110px;
}

.login-card .btn-navy {
  display: block;
  width: 100%;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.login-card-register {
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
}

.login-card-help {
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   CTA Card Duo — two-up light card pair sharing one rounded shell,
   each with its own image above the copy.
   -------------------------------------------------------------------------- */

.cta-card-duo {
  background: var(--color-light-bg);
  border-radius: 1.5rem;
  overflow: hidden;
}

.cta-card-duo-row {
  display: flex;
  flex-wrap: wrap;
}

.cta-card-duo-item {
  flex: 1 1 0;
  min-width: 280px;
  padding: 2.75rem 3rem;
  text-align: left;
}

.cta-card-duo-item:first-child {
  border-right: 1px solid rgba(4,39,137,0.12);
}

.cta-card-duo-item--center {
  text-align: center;
}

.cta-card-duo-item-img {
  display: block;
  width: 100%;
  /*max-width: 220px;*/
  height: auto;
  border-radius: 0.75rem;
  margin: 0 0 1.5rem;
}

.cta-card-duo-item--center .cta-card-duo-item-img {
  margin-left: auto;
  margin-right: auto;
}

.cta-card-duo-item h3 {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.2;
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.cta-card-duo-item p {
  margin-bottom: 1.75rem;
}

@media (max-width: 767.98px) {
  .cta-card-duo-item:first-child {
    border-right: none;
    border-bottom: 1px solid rgba(4,39,137,0.12);
  }
}

/* --------------------------------------------------------------------------
   Feature Callout
   -------------------------------------------------------------------------- */

.feature-callout {
  background: var(--color-light-bg);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

/* Navy / dark variant */
.feature-callout--navy {
  background: var(--color-navy);
}
.feature-callout--navy .feature-callout-eyebrow { color: var(--color-mint); }
.feature-callout--navy .feature-callout-eyebrow::before { background: var(--color-mint); }
.feature-callout--navy h2 { color: #fff; }
.feature-callout--navy p  { color: rgba(255,255,255,0.75); }

/* Gradient variant */
.feature-callout--gradient {
  background: linear-gradient(120deg, #021d65 0%, #042789 45%, #0055c8 75%, #00AEEF 100%);
}
.feature-callout--gradient .feature-callout-eyebrow { color: var(--color-mint); }
.feature-callout--gradient .feature-callout-eyebrow::before { background: var(--color-mint); }
.feature-callout--gradient h2 { color: #fff; }
.feature-callout--gradient p  { color: rgba(255,255,255,0.75); }

/* Eyebrow — matches hero eyebrow pattern */
.feature-callout-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: 0.875rem;
}
.feature-callout-eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--color-navy);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Image column */
.feature-callout-media {
  position: relative;
}

.feature-callout-img-wrap {
  border-radius: 0 2.5rem 0 2.5rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  width: 100%;
  position: relative;
  z-index: 1;
}

.feature-callout-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Gradient placeholder (when no photo) */
.feature-callout-img-wrap--placeholder {
  background: linear-gradient(120deg, #042789 0%, #0055c8 60%, #00AEEF 100%);
}

/* Decorative spark — behind photo, positioned relative to media column */
.feature-callout-spark {
  position: absolute;
  width: 160px;
  bottom: -1rem;
  right: -1rem;
  z-index: 0;
  opacity: 0.75;
  pointer-events: none;
}
.feature-callout-halftone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  opacity: 0.15;
  mix-blend-mode: soft-light;
}

/* Body column */
.feature-callout-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-callout-body h2 {
  margin-bottom: 0.75rem;
}

.feature-callout-body .feature-callout-sub {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.feature-callout-body .wps-list {
  margin-bottom: 2rem;
}

.feature-callout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* Decorative halftone behind the whole section */
.feature-callout-bg-halftone {
  position: absolute;
  width: 340px;
  top: -2rem;
  right: -2rem;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.feature-callout > .container { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   CTA Banner
   -------------------------------------------------------------------------- */

.cta-banner {
  background: var(--gradient-ltblue-purple);
  padding: 5rem 0;
  color: #fff;
  position: relative;
}

.cta-banner h2 {
  color: #fff;
}

.cta-banner .lead {
  color: rgba(255,255,255,0.8);
}

/* Color variants */
.cta-banner--navy        { background: var(--color-navy); }
.cta-banner--navy-mint   { background: var(--gradient-navy-mint); }
.cta-banner--navy-ltblue { background: var(--gradient-navy-ltblue); }
.cta-banner--orange      { background: var(--gradient-orange-fuchsia); }
.cta-banner--red-berry   { background: var(--gradient-red-berry); }

/* Image variants — photo with colour overlay via layered background */
.cta-banner--img-navy {
  background:
    linear-gradient(135deg, rgba(4,39,137,0.82) 0%, rgba(4,39,137,0.60) 100%),
    var(--cta-banner-img) center / cover no-repeat;
}
.cta-banner--img-mint {
  background:
    linear-gradient(135deg, rgba(4,39,137,0.78) 0%, rgba(110,252,170,0.55) 100%),
    var(--cta-banner-img) center / cover no-repeat;
}
.cta-banner--img-fuchsia {
  background:
    linear-gradient(135deg, rgba(145,38,143,0.80) 0%, rgba(0,174,239,0.65) 100%),
    var(--cta-banner-img) center / cover no-repeat;
}

/* Halftone texture — dot pattern anchored bottom-left, masked so it fades
   to zero toward the right with no hard edge. Layer it on top of any solid
   or gradient colour variant:
   <div class="cta-banner cta-banner--navy-ltblue cta-banner--halftone"> */
.cta-banner--halftone { overflow: hidden; }
.cta-banner--halftone > * { position: relative; z-index: 1; }
.cta-banner--halftone::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 920px;
  height: 100%;
  background: url('../images/halftone-big-corner-navy.svg') left bottom / cover no-repeat;
  /* source SVG is navy-filled — flip to white so the dots read on dark backgrounds */
  filter: brightness(0) invert(1);
  opacity: 0.1;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 45%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 45%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   Why WPS
   -------------------------------------------------------------------------- */

.why-wps-heading {
  font-family: var(--font-headline);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.why-wps-body {
  font-family: var(--font-body);
  margin-bottom: 1.25rem;
}
.why-wps-body:last-child { margin-bottom: 0; }

/* ── Media column ─────────────────────────────────────────────────────── */

.why-wps-media {
  position: relative;
  /* offsets let the mark bleed above/left and badge bleed below/right */
  padding-top: 7.5rem;
  padding-left: 6.5rem;
  padding-bottom: 3rem;
  padding-right: 2rem;
}

/* WPS brand mark – top-left, overlapping photo corner */
.why-wps-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 265px;
  height: 265px;
  z-index: 2;
}

/* Photo frame */
.why-wps-photo-wrap {
  position: relative;
  z-index: 1;
  border-radius: 0rem 5rem 0rem 5rem;
  overflow: hidden;
  aspect-ratio: 4 / 4;
}

.why-wps-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Care badge – bottom-right, bleeds outside photo */
.why-wps-badge {
  position: absolute;
  bottom: 0.75rem;
  right: 0;
  width: 100px;
  height: 100px;
  background: var(--color-mint);
  border-radius: 0rem 1.5rem 0rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  padding: 1.25rem;
}

.why-wps-badge svg {
  width: 100%;
  height: 100%;
}

/* ── No-spark modifier — tighter padding since spark bleed space not needed ── */
.why-wps-media--no-spark {
  padding-top: 2rem;
  padding-left: 1rem;
}

/* Mobile stack */
@media (max-width: 991.98px) {
  .why-wps-media {
    padding-top: 4rem;
    padding-left: 3.5rem;
    padding-bottom: 2.5rem;
    padding-right: 1.5rem;
  }
  .why-wps-media--no-spark {
    padding-top: 1rem;
    padding-left: 0.5rem;
  }
  .why-wps-mark {
    width: 140px;
    height: 140px;
  }
  .why-wps-badge {
    width: 78px;
    height: 78px;
    border-radius: 0rem 1.5rem 0rem 1.5rem;
    padding: 1rem;
  }
}

/* ── Why WPS – scroll-reveal start states ────────────────────────────── */
/* Elements start hidden; JS adds animate__ classes when section scrolls in */
.why-wps-mark,
.why-wps-badge {
  opacity: 0;
}

/* Once JS fires, animate.css takes over — restore opacity */
.why-wps-mark.animate__animated,
.why-wps-badge.animate__animated {
  opacity: 1;
}

/* ── Why WPS – scroll-triggered motion effects ───────────────────────── */

/* Spark mark: float + rotate after reveal */
@keyframes spark-float {
  0%   { transform: translateY(0)    rotate(0deg);  }
  35%  { transform: translateY(-10px) rotate(10deg); }
  65%  { transform: translateY(-5px)  rotate(-5deg); }
  100% { transform: translateY(0)    rotate(0deg);  }
}

.why-wps-mark.spark-float {
  animation: spark-float 1.8s var(--ease) forwards;
}

/* Badge: lift on scroll */
@keyframes badge-lift {
  0%   { transform: scale(1)    translateY(0);   box-shadow: 0 8px 24px rgba(4,39,137,0.18); }
  50%  { transform: scale(1.12) translateY(-6px); box-shadow: 0 16px 36px rgba(4,39,137,0.32); }
  100% { transform: scale(1.06) translateY(-3px); box-shadow: 0 12px 28px rgba(4,39,137,0.25); }
}

.why-wps-badge.badge-lift {
  animation: badge-lift 0.7s var(--ease) forwards;
}

/* Heart icon pulse */
@keyframes heart-pulse {
  0%   { transform: scale(1);    }
  30%  { transform: scale(1.3);  }
  60%  { transform: scale(0.92); }
  100% { transform: scale(1.1);  }
}

.why-wps-badge.badge-lift .fa-hand-holding-heart {
  animation: heart-pulse 0.6s var(--ease) 0.4s forwards;
}

/* --------------------------------------------------------------------------
   Resource Cards  (News · Video · Blog)
   -------------------------------------------------------------------------- */

.resource-cards {
  background-color: #fff;
}

.resource-card {
  background: #fff;
  border-radius: 0rem 3.5rem 0rem 3.5rem;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(4, 39, 137, 0.07);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: background 0.3s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.resource-card:hover {
  box-shadow: 0 8px 28px rgba(4, 39, 137, 0.14);
  transform: translateY(-4px);
}



.resource-card-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex-shrink: 0;
}

.resource-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.45s var(--ease);
}

.resource-card:hover .resource-card-img {
  transform: scale(1.04);
}

.resource-card-body {
  padding: 1.75rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.resource-card-title {
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.75rem;
  transition: color 0.3s var(--ease);
}

.resource-card-text {
  font-family: var(--font-body);
  font-size: 1.5rem;
  color: #000000;
  line-height: 1.75rem;
  margin-bottom: 1.25rem;
  flex: 1;
  transition: color 0.3s var(--ease);
}

.resource-card-link {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-navy);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.3s var(--ease);
  align-self: flex-start;
}

.resource-card-link:hover {
  color: var(--color-cloud-blue);
}

/* Button CTA variant — shrink to content by default, full width on mobile.
   margin-top: auto pins it to the bottom of the card regardless of how
   many lines the title/text above it wrap to, so buttons line up across
   cards in the same row. */
.resource-card-body .btn {
  align-self: flex-start;
  margin-top: auto;
}

@media (max-width: 575.98px) {
  .resource-card-body .btn {
    align-self: stretch;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  background: linear-gradient(135deg, #1565c0 0%, #042789 45%, #011560 100%);
  color: rgba(255,255,255,0.8);
  padding: 0 0 2.5rem;
  overflow: visible;
}

/* Prevent the first-child .container's mt-5 from collapsing through the
   footer's top edge. Invisible on white-background pages, but without it
   any page with a colored/tinted section directly above the footer shows
   a blank gap and .footer-spark loses its intended bleed over that section.
   !important is required to beat Bootstrap's .mt-5 utility, which is
   itself !important. */
.site-footer > .container {
  margin-top: 0 !important;
}

/* ── Main 4-col grid ──────────────────────────────────────────────────── */
.footer-main {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1.1fr 1.1fr;
  gap: 0;
  padding: 5rem 0 2.5rem;
  align-items: stretch;
  position: relative;   /* spark positioned relative to the grid */
}

/* ── Spark logo – centered over 3rd vertical divider ─────────────────── */
.footer-spark {
  position: absolute;
  /* (1.1+1.2)/4.5 = 51.11% = where the 2nd divider falls */
  left: 51.11%;
  top: -48px;
  transform: translateX(-50%);
  z-index: 10;
  line-height: 0;
  pointer-events: none;
}

.footer-spark img {
  width: 96px;
  height: auto;
  display: block;
}

.footer-col {
  padding: 0 2rem;
}

.footer-col--brand {
  padding-left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-col--divider {
  border-left: 2px solid rgba(110, 252, 170, 1);
}

/* ── Brand / logo col ─────────────────────────────────────────────────── */
.footer-logo {
  width: 200px;
  height: auto;
  display: block;
  margin-bottom: 1.75rem;
	margin-top: 1rem;
}

.footer-social {
  display: flex;
  gap: 0.625rem;
}

.footer-social-btn {
  width: 42px;
  height: 42px;
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.footer-social-btn:hover {
  border-color: var(--color-mint);
  background: rgba(110, 252, 170, 0.15);
  color: #fff;
}

.footer-social-btn svg {
  width: 17px;
  height: 17px;
}

/* ── Nav link columns ─────────────────────────────────────────────────── */
.footer-nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  font-weight: 500;
}

.footer-nav-links li {
  margin-bottom: 0rem;
}

.footer-nav-links a {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: rgba(255,255,255);
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.footer-nav-links a:hover {
  color: var(--color-mint);
}

/* ── Address col ──────────────────────────────────────────────────────── */
.footer-address {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-style: normal;
  color: rgba(255,255,255,0.88);
  line-height: 1.7;
  margin-bottom: 1rem;
  margin-top: 0.75rem;
  font-weight: 500;
}

.footer-address-link {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.88);
  text-underline-offset: 2px;
  margin-bottom: 0.75rem;
  transition: color 0.15s;
      font-weight: 500;	
}

.footer-address-link:hover { color: var(--color-mint); }

.footer-phone {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.footer-phone:hover { color: var(--color-mint); }

/* ── Language row ─────────────────────────────────────────────────────── */
.footer-languages {
  text-align: center;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.7);
  line-height: 2;
}

.footer-languages a {
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-languages a:hover { color: var(--color-mint); }

/* ── Form number bar (sits below footer, matches footer gradient) ───── */
.footer-form-numbers {
  background: linear-gradient(135deg, #0b42a1 0%, #042789 45%, #011560 100%);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 0.85rem 0;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-body);
  font-size: 0.8125rem;
}

/* ── Legal bar ────────────────────────────────────────────────────────── */
.footer-legal-bar {
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-legal-bar p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: rgba(255,255,255,);
  line-height: 1.65;
  max-width: 1020px;
  margin: 0 auto;
  padding-bottom: 1rem;	
}

/* ── Responsive ───────────────────────────────────────────────────────── */

/* Tablet and below → single column */
@media (max-width: 991.98px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 4.5rem;
  }

  /* All columns: consistent padding, no left dividers */
  .footer-col {
    padding: 1.5rem 0;
  }
  .footer-col--brand {
    padding-top: 0.5rem;
  }
  .footer-col--divider {
    border-left: none;
    border-top: 2px solid rgba(110, 252, 170);
    padding-top: 1.5rem;
  }

  /* Spark — centered and slightly smaller */
  .footer-spark {
    left: 50%;
    top: -42px;
  }
  .footer-spark img { width: 84px; }
}

@media (max-width: 480px) {
  .footer-spark img { width: 68px; }
  .footer-spark { top: -34px; }
  .footer-logo  { width: 130px; }
}


/* ==========================================================================
   ─── ABOUT PAGE ───
   ========================================================================== */

/* --------------------------------------------------------------------------
   2. Intro Section
   -------------------------------------------------------------------------- */

.about-intro {
  background: #fff;
}

.about-intro-inner {
  margin: 0 auto;
  text-align: center;
}

.about-intro-headline {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.about-intro-body {
  font-family: var(--font-body);
  font-size: 1.75rem;
  line-height: 2.5rem;
  color: var(--color-text);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   3. Mission Banner
   -------------------------------------------------------------------------- */

.about-mission {
  position: relative;
  background: linear-gradient(135deg, var(--color-navy), var(--color-mint));
  padding: 5rem 0;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.about-mission::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/circle-halftone-cloud-blue.svg') center / 50% auto no-repeat;
  opacity: 0.18;
  pointer-events: none;
}

.about-mission .container {
  position: relative;
  z-index: 1;
}

.about-mission-label {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255,);
  margin-bottom: 1rem;
}

.about-mission-headline {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 700;
  color: #fff;
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   4. History Section
   -------------------------------------------------------------------------- */

.about-history {
  padding: 5rem 0;
}

.about-history-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* Base card — both share the same light-blue surface */
.about-history-card {
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #EEF2FA;
}

/* ── Left card: text → photo ── */
.about-history-card--started .about-history-card-body {
  padding: 2.5rem 2.5rem 1.75rem;
}

.about-history-card-photo {
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  margin-top: auto;
}

.about-history-card-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center top;

}

/* ── Right card: spark top-right → text ── */
.about-history-card--today {
  position: relative;
}

.about-history-card-spark-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  overflow: hidden;
  flex-shrink: 0;
}

.about-history-card-spark-img {
    width: 100%;
    max-width: 630px;
    height: auto;
    display: block;
    margin-top: -324px;
    margin-right: -128px;
}

.about-history-card--today .about-history-card-body {
  padding: 1.25rem 2.5rem 2.5rem;
}

/* ── Shared text styles ── */
.about-history-card-body {
  flex: 1;
}

.about-history-card-title {
  font-family: var(--font-headline);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-navy);
  margin-bottom: 1.25rem;
}

.about-history-card-text {
  font-family: var(--font-body);
  color: var(--color-text);
  margin-bottom: 0;
}

@media (max-width: 991.98px) {
  .about-history-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .about-history-card--started .about-history-card-body,
  .about-history-card--today .about-history-card-body {
    padding: 2rem 1.75rem 1.5rem;
  }

  .about-history-card-title {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
  }

  /* Show more of the spark on mobile by reducing the clip offset */
  .about-history-card-spark-img {
	margin-top: -324px;
    margin-right: 30px;
  }
}

@media (max-width: 480px) {
  .about-history-card-spark-img {
	margin-top: -181px;
    margin-right: 14px;
  }
}

/* --------------------------------------------------------------------------
   5. What We Do
   -------------------------------------------------------------------------- */

.about-what-we-do {
  background: #fff;
}

.about-section-heading {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 2.5rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.about-what-grid {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}

.about-what-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1 1 300px;
}

.about-what-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--color-mint);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.about-what-icon svg {
  width: 38px;
  height: 38px;
  stroke: var(--color-navy);
  stroke-width: 1.6;
}

.about-what-icon i {
  font-size: 2.25rem;
  color: var(--color-navy);
}

.about-what-text {
  flex: 1;
}

.about-what-text p {
  font-family: var(--font-body);
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: 0;
}

.about-what-text p strong {
  color: var(--color-navy);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   6. #1 Choice Banner
   -------------------------------------------------------------------------- */

.about-number-one {
  background: var(--color-light-bg);
  padding: 5rem 0;
}

.about-number-one-inner {
  display: flex;
  align-items: center;
  gap: 5rem;
  flex-wrap: wrap;
}

/* CSS badge */
.about-badge-wrap {
  flex-shrink: 0;
}

.about-badge {
  width: 140px;
  height: 140px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-badge-outer {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 3px solid var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.about-badge-inner {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-red);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 1;
}

.about-badge-number {
  font-family: var(--font-headline);
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.about-badge-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
}

.about-number-one-text {
  flex: 1;
  min-width: 260px;
}

.about-number-one-headline {
  font-family: var(--font-headline);
  font-size: clamp(1.25rem, 2.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.about-number-one-text p {
  font-family: var(--font-body);
  color: var(--color-text);
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .about-number-one-inner {
    flex-direction: column;

  }
}

/* --------------------------------------------------------------------------
   7. Quick Facts
   -------------------------------------------------------------------------- */

.about-quick-facts {
  background: #fff;
}

.about-facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.about-fact-tile {
  border-radius: 0 2rem 0 2rem;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.25rem;
}

.about-fact-tile--navy {
  background: var(--color-navy);
  color: #fff;
}

.about-fact-tile--cloud {
  background: var(--color-cloud-blue);
  color: #fff;
}

.about-fact-tile--mint {
  background: var(--color-mint);
  color: var(--color-navy);
}

.about-fact-pre {
  font-family: var(--font-body);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 0;
}

.about-fact-number {
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

.about-fact-post {
  font-family: var(--font-body);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .about-facts-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* --------------------------------------------------------------------------
   8. Our Values
   -------------------------------------------------------------------------- */

.about-values {
  background: #fff;
}

.about-values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* ── Base card ────────────────────────────────────────── */
.about-value-card {
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  min-height: 240px;
}

/* ── Gradient cards (no photo) ────────────────────────── */
/* Card 1: deep navy bottom-left → bright teal top-right */
.about-value-card--gradient-navy {
  background: linear-gradient(to top right, #042789 0%, #00B5CC 100%);
}
/* Card 4: teal bottom-left → mint top-right */
.about-value-card--gradient-mint {
  background: linear-gradient(to top right, #009BB5 0%, #6EFCAA 100%);
}

/* ── Photo cards ──────────────────────────────────────── */
.about-value-card--dark  { background: #0d1b3e; }
.about-value-card--light { background: #EEF2FA; }

/* ── Text body (left side) ────────────────────────────── */
.about-value-card-body {
  flex: 1 1 55%;
  padding: 2rem 1.5rem 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;     /* vertically center text */
  color: #fff;
}
.about-value-card-body--dark-text {
  color: var(--color-navy);
}

/* ── Photo (right side) ───────────────────────────────── */
.about-value-card-photo {
  flex: 0 0 45%;
  overflow: hidden;
  position: relative;
}
.about-value-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ── Typography ───────────────────────────────────────── */
.about-value-text {
  font-family: var(--font-body);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
}
.about-value-word {
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3vw, 2.625rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0.2rem 0 0.3rem;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 767.98px) {
  .about-values-grid {
    grid-template-columns: 1fr;
  }
  .about-value-card {
    min-height: 200px;
  }
  .about-value-card-photo {
    flex: 0 0 42%;
  }
}
@media (max-width: 480px) {
  .about-value-card-photo {
    display: none;
  }
  .about-value-card-body {
    padding: 1.75rem 1.75rem 2rem;
  }
  .about-value-word {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }
}

/* --------------------------------------------------------------------------
   9. CTA Bar
   -------------------------------------------------------------------------- */

/* ── Generic CTA Bar component ────────────────────────────────────────── */
.wps-cta-bar {
  border-radius: 1.5rem;
  padding: 2.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.wps-cta-bar--navy          { background: var(--color-navy); }
.wps-cta-bar--gradient-navy { background: linear-gradient(to right, var(--color-navy), var(--color-lt-blue)); }
.wps-cta-bar--gradient-purple { background: linear-gradient(to right, var(--color-purple), var(--color-lt-blue)); }
.wps-cta-bar--gradient-orange { background: linear-gradient(to right, var(--color-orange), var(--color-fuchsia)); }

.wps-cta-bar-content {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex: 1;
  min-width: 0;
}

.wps-cta-bar-icon {
  flex-shrink: 0;
  width: 60px;
  height: auto;
  display: block;
}

.wps-cta-bar-copy { margin: 0; }

.wps-cta-bar-headline {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.3rem;
  line-height: 1.25;
}

.wps-cta-bar-sub {
  font-family: var(--font-body);
  font-size: 1.5rem;
  color: rgba(255,255,255);
  margin: 0;
  line-height: 1.45;
}

.wps-cta-bar-action { flex-shrink: 0; }

.wps-cta-bar-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 2.25rem;
  background: #fff;
  border: none;
  border-radius: 20px;
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-navy);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.wps-cta-bar-btn:hover {
  background: var(--color-mint);
  color: var(--color-navy);
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(110,252,170,0.35);
}

@media (max-width: 767.98px) {
  .wps-cta-bar {
    padding: 2rem 1.75rem;
    gap: 1.5rem;
  }
  .wps-cta-bar-content {
    flex-wrap: wrap;
    gap: 1rem;
  }
}
@media (max-width: 575.98px) {
  .wps-cta-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .wps-cta-bar-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── CTA Bar ──────────────────────────────────────────────────────────────
   White section background; navy card sits inside as a rounded container
   matching the screenshot exactly.
   ─────────────────────────────────────────────────────────────────────── */
.about-cta-bar {
  background: #fff;
  padding: 3rem 0 4rem;
}

/* Navy card with large rounded corners */
.about-cta-card {
  background: var(--color-navy);
  border-radius: 1.5rem;
  padding: 3.25rem 2.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Left: arrow + text */
.about-cta-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
  min-width: 0;
}

/* Arrow image */
.about-cta-arrow {
  flex-shrink: 0;
  width: 56px;
  height: auto;
  display: block;
}

/* Body copy */
.about-cta-text {
  font-family: var(--font-body);
  font-size: 2rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}
.about-cta-text strong {
  color: #fff;
  font-weight: 700;
}

/* Pill button — white bg, navy text */
.about-cta-right {
  flex-shrink: 0;
}
.about-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 2.25rem;
  background: #fff;
  border: none;
  border-radius: 20px;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-navy);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.about-cta-btn:hover {
  background: var(--color-mint);
  color: var(--color-navy);
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(110, 252, 170, 0.35);
}

@media (max-width: 767.98px) {
  .about-cta-bar {
    padding-bottom: 5rem;   /* extra breathing room below on tablet */
  }
  .about-cta-card {
    padding: 2rem 1.75rem;
    gap: 1.5rem;
  }
}
@media (max-width: 575.98px) {
  .about-cta-bar {
    padding-bottom: 5.5rem;
  }
  /* Stack card vertically on mobile */
  .about-cta-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 2rem 1.75rem 2.25rem;
  }
  /* Arrow stacks above text — make left column vertical */
  .about-cta-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  /* Larger text on mobile to fill the card nicely */
  .about-cta-text {
    font-size: 1.6rem;
    line-height: 1.1;
  }
  /* Button full-width pill */
  .about-cta-btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   10. Footnotes
   -------------------------------------------------------------------------- */

.about-footnotes {
  background: #fff;
  padding: 2rem 0;
}

/* --------------------------------------------------------------------------
   11. Reusable Accordion  (.wps-accordion)
   -------------------------------------------------------------------------- */

.wps-accordion {
  border-top: 1px solid #d8dde6;
}
.wps-accordion-item {
  border-bottom: 1px solid #d8dde6;
}
.wps-accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem 0;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  gap: 1rem;
}
.wps-accordion-btn:focus-visible {
  outline: 2px solid var(--mint, #2ec4b6);
  outline-offset: 2px;
}
.wps-accordion-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0a1f44;
  line-height: 1.4;
}
.wps-accordion-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1.5px solid #0a1f44;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
}
.wps-accordion-icon svg {
  width: 14px;
  height: 14px;
  stroke: #042789;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}
.wps-accordion-btn[aria-expanded="false"] .wps-accordion-icon {
  background: #042789;
  border-color: #042789;
}
.wps-accordion-btn[aria-expanded="false"] .wps-accordion-icon svg {
  stroke: #fff;
}
.wps-accordion-btn[aria-expanded="false"] .icon-plus  { display: none; }
.wps-accordion-btn[aria-expanded="false"] .icon-minus { display: none; }

.wps-accordion-body {
  overflow: hidden;
  height: 0;
  transition: height .35s ease;
}
.wps-accordion-body-inner {
  padding: 1.25rem 1.5rem 1.5rem;
  color: #111;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.wps-accordion-body-inner p { margin-bottom: 1.25rem; }
.wps-accordion-body-inner p:last-child { margin-bottom: 1.25rem; }
.wps-accordion-body-inner ul { margin-bottom: 1.25rem; }
.wps-accordion-body-inner ul:last-child { margin-bottom: .75rem; }
.wps-accordion-body-inner h3,
.wps-accordion-body-inner h4 { margin-top: 1.75rem; margin-bottom: .5rem; }
.wps-accordion-body-inner :is(p, ul) + h3,
.wps-accordion-body-inner :is(p, ul) + h4 { margin-top: 2rem; }

/* .pharmacy-faq — scoped to the shared include /assets/includes/pharmacy-faq-and-resources.html
   (currently used on pharmacy-individual-family-health.shtml). Its .wps-list bullets match the
   accordion body copy's type scale instead of wps-list's larger page-level default. Promoted
   here (rather than left page-scoped) so the include stays fully styled wherever it's reused. */
.pharmacy-faq .wps-list {
  font-size: 1.5rem;
  line-height: 1.7;
}


.about-footnote-text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Gradient Accordion  (.wps-accordion--gradient)
   Navy→mint gradient header rows; light panel for open content.
   Pairs with the base .wps-accordion JS — same data-wps-acc / aria-expanded.
   Use a single chevron <svg> inside .wps-accordion-icon (not the +/- pair).
   -------------------------------------------------------------------------- */

.wps-accordion--gradient {
  border-top: none;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(to right, var(--color-navy), var(--color-mint));
}

.wps-accordion--gradient .wps-accordion-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.wps-accordion--gradient .wps-accordion-item:last-child {
  border-bottom: none;
}

.wps-accordion--gradient .wps-accordion-btn {
  padding: 1.1rem 1.5rem;
  color: #fff;
}
.wps-accordion--gradient .wps-accordion-btn:focus-visible {
  outline-color: rgba(255, 255, 255, 0.6);
}

.wps-accordion--gradient .wps-accordion-title {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
}

/* Swap the circle ± for a plain rotating chevron */
.wps-accordion--gradient .wps-accordion-icon {
  border: none;
  background: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s var(--ease);
}
.wps-accordion--gradient .wps-accordion-icon svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  stroke-width: 2;
  fill: none;
}

/* Rotate chevron up when open; keep background transparent */
.wps-accordion--gradient .wps-accordion-btn[aria-expanded="false"] .wps-accordion-icon {
  transform: rotate(180deg);
  background: none;
  border: none;
}
.wps-accordion--gradient .wps-accordion-btn[aria-expanded="false"] .wps-accordion-icon svg {
  stroke: #fff;
}

/* Open panel — light inset on the gradient */
.wps-accordion--gradient .wps-accordion-body-inner {
  background: var(--color-light-bg);
  color: #111;
}

/* ── Rule / Editorial Variant (.wps-accordion--rule) ─────────────────────── */
/*
   Minimal white accordion. Bold body-font title. Small chevron right.
   Each item is separated by a two-tone rule: navy left half, mint right half.
   No background, no border-radius — purely typographic.
*/

.wps-accordion--rule {
  border-top: none;
}

.wps-accordion--rule .wps-accordion-item {
  border-bottom: none;
  position: relative;
}
.wps-accordion--rule .wps-accordion-item::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(to right, var(--color-navy), var(--color-mint));
}

.wps-accordion--rule .wps-accordion-btn {
  background: transparent;
  padding: 1.25rem 0;
  border-bottom: none;
}
.wps-accordion--rule .wps-accordion-btn:focus-visible {
  outline-color: var(--color-navy);
}

.wps-accordion--rule .wps-accordion-title {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  color: #111;
  letter-spacing: 0;
}

.wps-accordion--rule .wps-accordion-icon {
  border: none;
  background: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s var(--ease);
  flex-shrink: 0;
}
.wps-accordion--rule .wps-accordion-icon svg {
  width: 20px;
  height: 20px;
  stroke: #111;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wps-accordion--rule .wps-accordion-btn[aria-expanded="false"] .wps-accordion-icon {
  transform: rotate(180deg);
}

.wps-accordion--rule .wps-accordion-body-inner {
  padding: 0 0 1.25rem;
  color: #111;
}

/* ── Rule color modifiers ────────────────────────────────────── */
.wps-accordion--rule-navy-ltblue .wps-accordion-item::after {
  background: linear-gradient(to right, var(--color-navy), var(--color-lt-blue));
}
.wps-accordion--rule-ltblue-mint .wps-accordion-item::after {
  background: linear-gradient(to right, var(--color-lt-blue), var(--color-mint));
}
.wps-accordion--rule-ltblue-purple .wps-accordion-item::after {
  background: var(--gradient-ltblue-purple);
}

/* ── Per-gradient background modifiers ─────────────────────── */
/* Combine with .wps-accordion--gradient for all base styles   */
.wps-accordion--gradient-navy-ltblue   { background: var(--gradient-navy-ltblue); }
.wps-accordion--gradient-navy-mint     { background: var(--gradient-navy-mint); }
.wps-accordion--gradient-ltblue-purple { background: var(--gradient-ltblue-purple); }
.wps-accordion--gradient-orange-fuchsia{ background: var(--gradient-orange-fuchsia); }
.wps-accordion--gradient-red-berry     { background: var(--gradient-red-berry); }

/* Light backgrounds → swap to navy text & icon */
.wps-accordion--gradient-mint-ltblue   { background: var(--gradient-mint-ltblue); }
.wps-accordion--gradient-ltblue-yellow { background: var(--gradient-ltblue-yellow); }

.wps-accordion--gradient-mint-ltblue .wps-accordion-btn,
.wps-accordion--gradient-ltblue-yellow .wps-accordion-btn { color: var(--color-navy); }

.wps-accordion--gradient-mint-ltblue .wps-accordion-title,
.wps-accordion--gradient-ltblue-yellow .wps-accordion-title { color: var(--color-navy); }

.wps-accordion--gradient-mint-ltblue .wps-accordion-icon svg,
.wps-accordion--gradient-ltblue-yellow .wps-accordion-icon svg { stroke: var(--color-navy); }

.wps-accordion--gradient-mint-ltblue .wps-accordion-item,
.wps-accordion--gradient-ltblue-yellow .wps-accordion-item { border-bottom-color: rgba(4,39,137,0.15); }

/* --------------------------------------------------------------------------
   Navy Accordion  (.wps-accordion--navy)
   Solid navy background rows; white text; rotating chevron; white open panel.
   -------------------------------------------------------------------------- */

.wps-accordion--navy {
  border-top: none;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-navy);
}

.wps-accordion--navy .wps-accordion-item {
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.wps-accordion--navy .wps-accordion-item:last-child {
  border-bottom: none;
}

.wps-accordion--navy .wps-accordion-btn {
  padding: 1.1rem 1.5rem;
  color: #fff;
}
.wps-accordion--navy .wps-accordion-btn:hover {
  background: rgba(255,255,255,0.06);
}
.wps-accordion--navy .wps-accordion-btn:focus-visible {
  outline-color: rgba(255,255,255,0.5);
}

.wps-accordion--navy .wps-accordion-title {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
}

.wps-accordion--navy .wps-accordion-icon {
  border: none;
  background: rgba(255,255,255,0.10);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s var(--ease), background 0.2s var(--ease);
}
.wps-accordion--navy .wps-accordion-icon svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  stroke-width: 2.5;
  fill: none;
}
.wps-accordion--navy .wps-accordion-btn[aria-expanded="false"] .wps-accordion-icon {
  transform: rotate(180deg);
  background: var(--color-mint);
}
.wps-accordion--navy .wps-accordion-btn[aria-expanded="false"] .wps-accordion-icon svg {
  stroke: var(--color-navy);
}

.wps-accordion--navy .wps-accordion-body-inner {
  background: #fff;
  color: #111;
}

/* --------------------------------------------------------------------------
   Bordered Card Accordion  (.wps-accordion--bordered)
   White rows with border; mint left-accent + shadow when open.
   -------------------------------------------------------------------------- */

.wps-accordion--bordered {
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.wps-accordion--bordered .wps-accordion-item {
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}

.wps-accordion--bordered .wps-accordion-item:has([aria-expanded="false"]) {
  border-color: var(--color-navy);
  box-shadow: 0 4px 16px rgba(4,39,137,0.10);
}

.wps-accordion--bordered .wps-accordion-btn {
  padding: 1rem 1.25rem;
  color: var(--color-navy);
}
.wps-accordion--bordered .wps-accordion-btn:hover {
  background: var(--color-light-bg);
}
.wps-accordion--bordered .wps-accordion-btn:focus-visible {
  outline-color: var(--color-navy);
}

.wps-accordion--bordered .wps-accordion-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-navy);
}

.wps-accordion--bordered .wps-accordion-icon {
  border-color: var(--color-border);
  background: var(--color-light-bg);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform 0.25s var(--ease);
}
.wps-accordion--bordered .wps-accordion-icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-navy);
  stroke-width: 2.5;
}
.wps-accordion--bordered .wps-accordion-btn[aria-expanded="false"] .wps-accordion-icon {
  background: var(--color-navy);
  border-color: var(--color-navy);
  transform: rotate(45deg);
}
.wps-accordion--bordered .wps-accordion-btn[aria-expanded="false"] .wps-accordion-icon svg {
  stroke: #fff;
}
.wps-accordion--bordered .wps-accordion-btn[aria-expanded="false"] .icon-plus  { display: block; }
.wps-accordion--bordered .wps-accordion-btn[aria-expanded="false"] .icon-minus { display: none; }
.wps-accordion--bordered .wps-accordion-btn[aria-expanded="false"]  .icon-minus { display: none; }

.wps-accordion--bordered .wps-accordion-body-inner {
  padding: 0.75rem 1.25rem 1.25rem;
  color: #111;
  border-top: 1px solid var(--color-border);
  margin: 0 1.25rem;
}


/* ==========================================================================
   Forms
   ========================================================================== */

/* ── Field group ─────────────────────────────────────────────────────────── */
.wps-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* ── Label ───────────────────────────────────────────────────────────────── */
.wps-label {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.01em;
}

.wps-label-required::after {
  content: ' *';
  color: var(--color-red);
}

/* ── Base input / select / textarea ─────────────────────────────────────── */
.wps-input,
.wps-select,
.wps-textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-navy);
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  padding: 0.65rem 1rem;
  width: 100%;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.wps-input::placeholder,
.wps-textarea::placeholder {
  color: var(--wps-gray);
  font-weight: 400;
}

.wps-input:focus,
.wps-select:focus,
.wps-textarea:focus {
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(4,39,137,0.12);
}

.wps-input:disabled,
.wps-select:disabled,
.wps-textarea:disabled {
  background: var(--color-light-bg);
  color: var(--wps-gray);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ── Select — custom chevron ─────────────────────────────────────────────── */
.wps-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23042789' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* ── Textarea ────────────────────────────────────────────────────────────── */
.wps-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.55;
}

/* ── Hint & error text ───────────────────────────────────────────────────── */
.wps-hint {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--wps-gray);
  line-height: 1.4;
}

.wps-field-error {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-red);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Validation states ───────────────────────────────────────────────────── */
.wps-input--error,
.wps-select--error,
.wps-textarea--error {
  border-color: var(--color-red);
}
.wps-input--error:focus,
.wps-select--error:focus,
.wps-textarea--error:focus {
  box-shadow: 0 0 0 3px rgba(236,28,36,0.12);
}

.wps-input--success,
.wps-select--success,
.wps-textarea--success {
  border-color: #22c55e;
}
.wps-input--success:focus,
.wps-select--success:focus,
.wps-textarea--success:focus {
  box-shadow: 0 0 0 3px rgba(34,197,94,0.15);
}

/* ── Checkbox & Radio ────────────────────────────────────────────────────── */
.wps-check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  user-select: none;
}

.wps-check-input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--t) var(--ease),
              background var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}

.wps-check-input[type="radio"] {
  border-radius: 50%;
}

.wps-check-input:checked {
  background: var(--color-navy);
  border-color: var(--color-navy);
}

.wps-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.wps-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.wps-check-input:focus-visible {
  box-shadow: 0 0 0 3px rgba(4,39,137,0.18);
}

.wps-check-label {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-navy);
  line-height: 1.45;
}

/* ── Size: md (22px) ── */
.wps-check--md { gap: 0.75rem; }
.wps-check--md .wps-check-input {
  width: 22px; height: 22px; margin-top: 1px;
  border-radius: 5px;
}
.wps-check--md .wps-check-input[type="radio"] { border-radius: 50%; }
.wps-check--md .wps-check-input[type="checkbox"]:checked { background-size: 14px 14px; }
.wps-check--md .wps-check-input[type="radio"]:checked { background-size: 10px 10px; }
.wps-check--md .wps-check-label { font-size: 1.05rem; }

/* ── Size: lg (28px) ── */
.wps-check--lg { gap: 0.875rem; }
.wps-check--lg .wps-check-input {
  width: 28px; height: 28px; margin-top: 0;
  border-radius: 6px; border-width: 2.5px;
}
.wps-check--lg .wps-check-input[type="radio"] { border-radius: 50%; }
.wps-check--lg .wps-check-input[type="checkbox"]:checked { background-size: 17px 17px; }
.wps-check--lg .wps-check-input[type="radio"]:checked { background-size: 12px 12px; }
.wps-check--lg .wps-check-label { font-size: 1.15rem; }

/* ── Input group (icon prefix) ───────────────────────────────────────────── */
.wps-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.wps-input-group .wps-input {
  padding-left: 2.75rem;
}

.wps-input-icon {
  position: absolute;
  left: 0.875rem;
  width: 18px;
  height: 18px;
  stroke: var(--wps-gray);
  fill: none;
  stroke-width: 2;
  pointer-events: none;
  flex-shrink: 0;
}

/* ── Form card container ─────────────────────────────────────────────────── */
.wps-form-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2.5rem;
}

.wps-form-card--navy {
  background: var(--color-navy);
  border-color: transparent;
}
.wps-form-card--navy .wps-label { color: rgba(255,255,255,0.85); }
.wps-form-card--navy .wps-input,
.wps-form-card--navy .wps-select,
.wps-form-card--navy .wps-textarea {
  background-color: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}
.wps-form-card--navy .wps-input::placeholder,
.wps-form-card--navy .wps-textarea::placeholder { color: rgba(255,255,255,0.45); }
.wps-form-card--navy .wps-input:focus,
.wps-form-card--navy .wps-select:focus,
.wps-form-card--navy .wps-textarea:focus {
  border-color: var(--color-mint);
  box-shadow: 0 0 0 3px rgba(110,252,170,0.2);
}
.wps-form-card--navy .wps-hint { color: rgba(255,255,255,0.5); }
.wps-form-card--navy .wps-check-label { color: rgba(255,255,255,0.9); }
.wps-form-card--navy .wps-check-input { border-color: rgba(255,255,255,0.3); background: transparent; }
.wps-form-card--navy .wps-check-input:checked { background: var(--color-mint); border-color: var(--color-mint); }
.wps-form-card--navy .wps-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23042789' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.wps-form-card--navy .wps-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ─────────────────────────────────────────────────────────────
   VIDEO CARD + VIDEO MODAL
───────────────────────────────────────────────────────────── */

/* ── Video Card ── */
.wps-video-card {
  display: flex;
  align-items: stretch;
  border-radius: 0 2rem 0 2rem;
  overflow: hidden;
  background: var(--gradient-navy-mint);
  min-height: 300px;
  position: relative;
}

.wps-video-card-body {
  flex: 0 0 55%;
  padding: 3rem 2.5rem 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  z-index: 2;
}

.wps-video-card-headline {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

.wps-video-card-play {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.wps-video-card-play-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(4,39,137,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.wps-video-card-play-icon svg {
  width: 18px;
  height: 18px;
  fill: #fff;
  margin-left: 3px; /* optical centering */
}
.wps-video-card-play:hover .wps-video-card-play-icon {
  background: var(--color-navy);
  transform: scale(1.08);
}

.wps-video-card-play-label {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.wps-video-card-media {
  flex: 0 0 45%;
  position: relative;
  overflow: hidden;
}
.wps-video-card-media img {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 105%;
  width: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ── Video Modal ── */
.wps-video-modal-overlay {
  position: absolute;
  inset: 0;
  cursor: default;
}
.wps-video-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4,15,50,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.wps-video-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.wps-video-modal {
  width: 100%;
  max-width: 860px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.45);
  position: relative;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.28s var(--ease);
  background: #000;
}
.wps-video-modal-backdrop.is-open .wps-video-modal {
  transform: translateY(0) scale(1);
}

.wps-video-modal-close {
  position: absolute;
  top: -44px;
  right: 0;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  z-index: 10;
}
.wps-video-modal-close:hover { background: rgba(255,255,255,0.28); }
.wps-video-modal-close svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
}

.wps-video-modal-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.wps-video-modal-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ─────────────────────────────────────────────────────────────
   WPS LISTS
───────────────────────────────────────────────────────────── */

/* ── Shared base ── */
.wps-list {
  list-style: none;
  padding-left: 1.25rem;
  margin: 0 0 1.25rem;
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 2rem;
  color: #111;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 68ch;
}
.wps-list > li {
  display: block;
  position: relative;
  padding-left: 1.5rem;
  word-break: break-word;
  overflow-wrap: break-word;
}
.wps-list > li::before {
  position: absolute;
  left: 0;
}

/* ── Bullet: Bullseye (navy center · white gap · lt-blue ring) ── */
.wps-list--bullet > li::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-navy);
  box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px var(--color-lt-blue);
  top: 0.52em;
}

/* ── Bullet: Mint solid dot ── */
.wps-list--mint > li::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-mint);
  top: 0.52em;
}

/* ── Bullet: Cloud Blue solid dot ── */
.wps-list--cloud > li::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-cloud-blue);
  top: 0.52em;
}

/* ── Bullet: Navy solid dot ── */
.wps-list--navy > li::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-navy);
  top: 0.52em;
}

/* ── Bullet: Check ── */
.wps-list--check > li,
.wps-list--check-navy > li,
.wps-list--check-mint > li { padding-left: 2rem; }

.wps-list--check > li::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e6faf0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%230a7a45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
  top: 0.28em;
}

/* ── Bullet: Check Navy ── */
.wps-list--check-navy > li::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
  top: 0.28em;
}

/* ── Bullet: Check Mint ── */
.wps-list--check-mint > li::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23042789' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
  top: 0.28em;
}

/* ── Numbered variants — shared padding ── */
.wps-list--numbered > li,
.wps-list--numbered-gradient > li,
.wps-list--numbered-mint > li { padding-left: 2.5rem; margin-bottom: 1rem;}

/* ── Numbered: Navy circle ── */
.wps-list--numbered {
  counter-reset: wps-list;
}
.wps-list--numbered > li {
  counter-increment: wps-list;
}
.wps-list--numbered > li::before {
  content: counter(wps-list);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0.18em;
}

/* ── Numbered: Gradient circle ── */
.wps-list--numbered-gradient {
  counter-reset: wps-list;
}
.wps-list--numbered-gradient > li {
  counter-increment: wps-list;
}
.wps-list--numbered-gradient > li::before {
  content: counter(wps-list);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gradient-navy-ltblue);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0.18em;
}

/* ── Numbered: Mint circle ── */
.wps-list--numbered-mint {
  counter-reset: wps-list;
}
.wps-list--numbered-mint > li {
  counter-increment: wps-list;
}
.wps-list--numbered-mint > li::before {
  content: counter(wps-list);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-mint);
  color: var(--color-navy);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0.18em;
}

/* ── Size modifiers ── */
.wps-list--2xs {
  font-size: 0.75rem;
  line-height: 1.2rem;
  gap: 0.3rem;
}
.wps-list--xs {
  font-size: 0.9rem;
  line-height: 1.4rem;
  gap: 0.35rem;
}
.wps-list--sm {
  font-size: 1.1rem;
  line-height: 1.65rem;
  gap: 0.4rem;
}

/* ── xs bullet overrides ── */
.wps-list--xs.wps-list--check > li::before,
.wps-list--xs.wps-list--check-navy > li::before,
.wps-list--xs.wps-list--check-mint > li::before {
  width: 14px; height: 14px; background-size: 8px; top: 0.14em;
}
.wps-list--xs.wps-list--numbered > li::before,
.wps-list--xs.wps-list--numbered-gradient > li::before,
.wps-list--xs.wps-list--numbered-mint > li::before {
  width: 18px; height: 18px; font-size: 0.55rem; top: 0.08em;
}
.wps-list--xs.wps-list--bullet > li::before,
.wps-list--xs.wps-list--mint > li::before,
.wps-list--xs.wps-list--navy > li::before,
.wps-list--xs.wps-list--cloud > li::before {
  width: 6px; height: 6px; top: 0.42em;
}

/* ── 2xs bullet overrides ── */
.wps-list--2xs.wps-list--check > li::before,
.wps-list--2xs.wps-list--check-navy > li::before,
.wps-list--2xs.wps-list--check-mint > li::before {
  width: 12px; height: 12px; background-size: 7px; top: 0.1em;
}
.wps-list--2xs.wps-list--numbered > li::before,
.wps-list--2xs.wps-list--numbered-gradient > li::before,
.wps-list--2xs.wps-list--numbered-mint > li::before {
  width: 15px; height: 15px; font-size: 0.5rem; top: 0.05em;
}
.wps-list--2xs.wps-list--bullet > li::before,
.wps-list--2xs.wps-list--mint > li::before,
.wps-list--2xs.wps-list--navy > li::before,
.wps-list--2xs.wps-list--cloud > li::before {
  width: 5px; height: 5px; top: 0.38em;
}

/* Scale down fixed-px bullets to stay proportional at small size */
.wps-list--sm.wps-list--check > li::before,
.wps-list--sm.wps-list--check-navy > li::before,
.wps-list--sm.wps-list--check-mint > li::before {
  width: 16px;
  height: 16px;
  background-size: 9px;
  top: 0.18em;
}
.wps-list--sm.wps-list--numbered > li::before,
.wps-list--sm.wps-list--numbered-gradient > li::before,
.wps-list--sm.wps-list--numbered-mint > li::before {
  width: 20px;
  height: 20px;
  font-size: 0.6rem;
  top: 0.12em;
}
.wps-list--sm.wps-list--bullet > li::before,
.wps-list--sm.wps-list--mint > li::before,
.wps-list--sm.wps-list--navy > li::before {
  width: 7px;
  height: 7px;
  margin-top: 0.45em;
}

.wps-list--lg {
  font-size: 2.1rem;
  line-height: 2.9rem;
  gap: 0.75rem;
}

/* ── Nested lists (a <ul class="wps-list"> inside another's <li>) ── */
.wps-list--nested {
  margin: 1rem 0 0;
  padding-left: 1.5rem;
  font-size: 1.5rem;
  line-height: 2rem;
  gap: 1rem;
}
.wps-list--nested.wps-list--check > li,
.wps-list--nested.wps-list--check-navy > li,
.wps-list--nested.wps-list--check-mint > li {
  padding-left: 1.75rem;
}
.wps-list--nested.wps-list--check > li::before,
.wps-list--nested.wps-list--check-navy > li::before,
.wps-list--nested.wps-list--check-mint > li::before {
  width: 16px; height: 16px; background-size: 9px; top: 0.18em;
}
.wps-list--nested.wps-list--numbered > li,
.wps-list--nested.wps-list--numbered-gradient > li,
.wps-list--nested.wps-list--numbered-mint > li {
  padding-left: 2rem;
}
.wps-list--nested.wps-list--numbered > li::before,
.wps-list--nested.wps-list--numbered-gradient > li::before,
.wps-list--nested.wps-list--numbered-mint > li::before {
  width: 20px; height: 20px; font-size: 0.6rem; top: 0.12em;
}
.wps-list--nested.wps-list--bullet > li::before,
.wps-list--nested.wps-list--mint > li::before,
.wps-list--nested.wps-list--navy > li::before,
.wps-list--nested.wps-list--cloud > li::before {
  width: 7px; height: 7px; top: 0.45em;
}

/* ═══════════════════════════════════════════════════════════════
   DATA TABLES  (.wps-table)
   ═══════════════════════════════════════════════════════════════ */

.wps-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.wps-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: #2d2d2d;
  background: #fff;
}

/* ── Header ── */
.wps-table thead tr {
  background: var(--gradient-navy-ltblue);
}
.wps-table thead th {
  padding: 1rem 1.25rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.15);
}
.wps-table thead th:last-child { border-right: none; }

/* ── Body ── */
.wps-table tbody tr {
  border-bottom: 1px solid var(--color-border, #dde2ec);
  transition: background 0.15s;
}
.wps-table tbody tr:last-child { border-bottom: none; }
.wps-table tbody tr:hover { background: #f4f7fd; }
.wps-table tbody td {
  padding: 0.9rem 1.25rem;
  vertical-align: middle;
  border-right: 1px solid var(--color-border, #dde2ec);
}
.wps-table tbody td:last-child { border-right: none; }

/* ── Footer ── */
.wps-table tfoot tr { background: #f4f7fd; }
.wps-table tfoot td {
  padding: 0.75rem 1.25rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border, #dde2ec);
}
.wps-table tfoot td:last-child { border-right: none; }

/* ── Status badges ── */
.wps-table-badge {
  display: inline-block;
  padding: 0.2em 0.75em;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.wps-table-badge--green  { background: #e6faf0; color: #0a7a45; }
.wps-table-badge--yellow { background: #fef9e7; color: #92640a; }
.wps-table-badge--red    { background: #fde8e8; color: #b91c1c; }
.wps-table-badge--blue   { background: #e8f4fd; color: #1d5fa8; }

/* ── Striped variant ── */
.wps-table--striped tbody tr:nth-child(odd)  { background: #fff; }
.wps-table--striped tbody tr:nth-child(even) { background: #f4f7fd; }
.wps-table--striped tbody tr:hover { background: #e8eefa; }

/* ── Comparison variant ── */
.wps-table--compare thead th { text-align: center; }
.wps-table--compare thead th:first-child { text-align: left; }
.wps-table--compare thead th.col-featured {
  background: rgba(110,252,170,0.18);
  color: #fff;
}
.wps-table--compare tbody td { text-align: center; }
.wps-table--compare tbody td:first-child {
  text-align: left;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
}
.wps-table--compare tbody td.col-featured {
  background: rgba(110,252,170,0.08);
  color: #111;
  font-weight: 700;
}
.wps-table--compare tfoot td { text-align: center; }
.wps-table--compare tfoot td:first-child { text-align: left; }
.wps-table--compare tfoot td.col-featured { background: rgba(110,252,170,0.08); }

/* Check / dash icons in compare table */
.wps-tbl-check, .wps-tbl-dash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
}
.wps-tbl-check { background: #e6faf0; color: #0a7a45; }
.wps-tbl-dash  { background: #f1f3f7; color: #9aa0b0; }
.wps-tbl-check svg, .wps-tbl-dash svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ─────────────────────────────────────────────────────────────
   WPS TABS
───────────────────────────────────────────────────────────── */

/* ── Shared tab structure ── */
.wps-tabs { display: flex; flex-direction: column; }

.wps-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wps-tab-btn {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color var(--t) var(--ease),
              background var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.wps-tab-btn:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }

.wps-tab-panel { display: none; }
.wps-tab-panel.is-active { display: block; }
.wps-tab-panel p { color: #111; }

/* ── Variant 1: Pill Tabs ── */
.wps-tabs--pill .wps-tab-list {
  background: var(--color-light-bg, #f0f3fa);
  border-radius: 50px;
  padding: 0.3rem;
  display: inline-flex;
  gap: 0;
}
.wps-tabs--pill .wps-tab-btn {
  padding: 0.55rem 1.4rem;
  border-radius: 50px;
  color: var(--color-text-muted, #5a6478);
}
.wps-tabs--pill .wps-tab-btn:hover { color: var(--color-navy); }
.wps-tabs--pill .wps-tab-btn[aria-selected="true"] {
  background: var(--color-navy);
  color: #fff;
  box-shadow: 0 2px 10px rgba(4,39,137,0.25);
}
.wps-tabs--pill .wps-tab-content {
  margin-top: 1.5rem;
}

/* ── Variant 2: Underline Tabs ── */
.wps-tabs--underline .wps-tab-list {
  border-bottom: 2px solid var(--color-border, #dde2ec);
  gap: 0;
}
.wps-tabs--underline .wps-tab-btn {
  padding: 0.7rem 1.25rem;
  color: var(--color-text-muted, #5a6478);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: 0;
}
.wps-tabs--underline .wps-tab-btn:hover { color: var(--color-navy); }
.wps-tabs--underline .wps-tab-btn[aria-selected="true"] {
  color: var(--color-navy);
  border-bottom-color: var(--color-navy);
}
.wps-tabs--underline .wps-tab-content {
  margin-top: 1.5rem;
}

/* ── Variant 3: Dark / Navy Tabs ── */
.wps-tabs--dark {
  background: var(--color-navy);
  border-radius: 0 1.5rem 0 1.5rem;
  overflow: hidden;
}
.wps-tabs--dark .wps-tabs-header {
  padding: 1.5rem 2rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.wps-tabs--dark .wps-tab-list { gap: 0; }
.wps-tabs--dark .wps-tab-btn {
  padding: 0.7rem 1.4rem;
  color: rgba(255,255,255,0.55);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
}
.wps-tabs--dark .wps-tab-btn:hover { color: rgba(255,255,255,0.85); }
.wps-tabs--dark .wps-tab-btn[aria-selected="true"] {
  color: var(--color-mint);
  border-bottom-color: var(--color-mint);
}
.wps-tabs--dark .wps-tab-content {
  padding: 2rem;
}
.wps-tabs--dark .wps-tab-panel p { color: rgba(255,255,255,0.80); margin: 0; line-height: 1.65; }
.wps-tabs--dark .wps-tab-panel h3 { color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; margin: 0 0 0.5rem; }


/* ═══════════════════════════════════════════════════════════════
   NEW COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   ALERTS (.wps-alert)
───────────────────────────────────────────────────────────── */
.wps-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  border-left: 4px solid transparent;
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 1.5rem 0;
}
.wps-alert-icon {
  flex-shrink: 0;
  font-size: 1.5rem;
  margin-top: 0.05rem;
}
.wps-alert-body { flex: 1; }
.wps-alert-title {
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 0 0.2rem;
  display: block;
}
.wps-alert-body p { margin: 0; }
.wps-alert-dismiss {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.45;
  padding: 0 0 0 0.5rem;
  line-height: 1;
  font-size: 1.1rem;
  transition: opacity 0.2s;
  color: currentColor;
}
.wps-alert-dismiss:hover { opacity: 1; }

.wps-alert--success { background: #edfaf4; border-color: #22c55e; color: #15803d; }
.wps-alert--warning { background: #fffbeb; border-color: #f59e0b; color: #92400e; }
.wps-alert--error   { background: #fef2f2; border-color: #ef4444; color: #b91c1c; }
.wps-alert--info    { background: #eff6ff; border-color: var(--color-lt-blue); color: var(--color-navy); }
.wps-alert--brand   { background: #eef2fa; border-color: var(--color-navy); color: var(--color-navy); }


/* ─────────────────────────────────────────────────────────────
   BADGES / TAGS (.wps-badge)
───────────────────────────────────────────────────────────── */
.wps-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.28em 0.75em;
  border-radius: 50px;
  line-height: 1.4;
  white-space: nowrap;
}
.wps-badge__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* Filled */
.wps-badge--navy      { background: var(--color-navy);       color: #fff; }
.wps-badge--mint      { background: var(--color-mint);       color: var(--color-navy); }
.wps-badge--lt-blue   { background: var(--color-lt-blue);    color: #fff; }
.wps-badge--cloud     { background: var(--color-cloud-blue); color: #fff; }
.wps-badge--purple    { background: var(--color-purple);     color: #fff; }
.wps-badge--success   { background: #dcfce7; color: #15803d; }
.wps-badge--warning   { background: #fef9c3; color: #854d0e; }
.wps-badge--error     { background: #fee2e2; color: #b91c1c; }
.wps-badge--info      { background: #dbeafe; color: var(--color-navy); }
.wps-badge--light     { background: var(--color-light-bg);   color: var(--color-navy); }
/* Outline */
.wps-badge--outline-navy    { background: transparent; color: var(--color-navy);    box-shadow: inset 0 0 0 1.5px var(--color-navy); }
.wps-badge--outline-mint    { background: transparent; color: var(--color-navy);    box-shadow: inset 0 0 0 1.5px var(--color-mint); }
.wps-badge--outline-lt-blue { background: transparent; color: var(--color-lt-blue); box-shadow: inset 0 0 0 1.5px var(--color-lt-blue); }
/* Size */
.wps-badge--lg { font-size: 0.82rem; padding: 0.35em 1em; }
.wps-badge--sm { font-size: 0.65rem; padding: 0.2em 0.6em; }

/* WPS asymmetric shape — sharp TL/BR, rounded TR/BL */
.wps-badge--wps {
  border-radius: 0 0.75rem 0 0.75rem;
  font-size: 0.8rem;
  padding: 0.45em 1.1em;
  letter-spacing: 0.06em;
}
.wps-badge--wps.wps-badge--lg {
  border-radius: 0 1rem 0 1rem;
  font-size: 0.95rem;
  padding: 0.55em 1.4em;
}
.wps-badge--wps.wps-badge--sm {
  border-radius: 0 0.5rem 0 0.5rem;
  font-size: 0.65rem;
  padding: 0.3em 0.8em;
}


/* ─────────────────────────────────────────────────────────────
   STEPPER (.wps-stepper)
───────────────────────────────────────────────────────────── */
.wps-stepper {
  display: flex;
  align-items: flex-start;
  font-family: var(--font-body);
}
.wps-stepper-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  text-align: center;
}
/* Connector line */
.wps-stepper-step::before {
  content: '';
  position: absolute;
  top: 17px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}
.wps-stepper-step:last-child::before { display: none; }
/* Circle */
.wps-stepper-circle {
  position: relative;
  z-index: 1;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-light-bg);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}
.wps-stepper-label {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.3;
  max-width: 80px;
}
/* Complete state */
.wps-stepper-step.is-complete .wps-stepper-circle {
  background: var(--color-mint);
  border-color: var(--color-mint);
  color: var(--color-navy);
  font-size: 0;               /* hide number */
}
.wps-stepper-step.is-complete .wps-stepper-circle::after {
  content: '';
  width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23042789' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wps-stepper-step.is-complete::before { background: var(--color-mint); }
.wps-stepper-step.is-complete .wps-stepper-label { color: var(--color-navy); font-weight: 700; }
/* Active state */
.wps-stepper-step.is-active .wps-stepper-circle {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(4,39,137,0.15);
}
.wps-stepper-step.is-active .wps-stepper-label { color: var(--color-navy); font-weight: 700; }
/* Vertical variant */
.wps-stepper--vertical {
  flex-direction: column;
  gap: 0;
}
.wps-stepper--vertical .wps-stepper-step {
  flex-direction: row;
  text-align: left;
  align-items: flex-start;
  gap: 1rem;
  flex: none;
  padding-bottom: 2rem;
  position: relative;
}
.wps-stepper--vertical .wps-stepper-step::before {
  top: 36px;
  left: 17px;
  right: auto;
  width: 2px;
  height: calc(100% - 18px);
}
.wps-stepper--vertical .wps-stepper-step:last-child { padding-bottom: 0; }
.wps-stepper--vertical .wps-stepper-label {
  max-width: none;
  margin-top: 0.4rem;
}
.wps-stepper--vertical .wps-stepper-content {
  padding-top: 0.3rem;
}
.wps-stepper--vertical .wps-stepper-body {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-top: 0.3rem;
}


/* ─────────────────────────────────────────────────────────────
   TOASTS (.wps-toast)
───────────────────────────────────────────────────────────── */
.wps-toast-stack {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.wps-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--color-navy);
  color: #fff;
  padding: 0.875rem 1.125rem;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  box-shadow: 0 8px 28px rgba(4,39,137,0.22);
  max-width: 380px;
  position: relative;
  overflow: hidden;
}
.wps-toast::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--color-lt-blue);
}
.wps-toast-icon  { flex-shrink: 0; font-size: 1.1rem; margin-top: 0.05rem; }
.wps-toast-body  { flex: 1; }
.wps-toast-title { font-weight: 700; display: block; margin-bottom: 0.1rem; font-size: 0.9rem; }
.wps-toast-msg   { opacity: 0.75; font-size: 0.82rem; display: block; }
.wps-toast-close {
  flex-shrink: 0;
  background: none; border: none;
  color: rgba(255,255,255,0.45);
  cursor: pointer; padding: 0;
  line-height: 1; font-size: 1rem;
  transition: color 0.2s;
}
.wps-toast-close:hover { color: #fff; }
.wps-toast--success::before { background: #22c55e; }
.wps-toast--warning::before { background: #f59e0b; }
.wps-toast--error::before   { background: #ef4444; }
.wps-toast--mint::before    { background: var(--color-mint); }


/* ─────────────────────────────────────────────────────────────
   SKELETON LOADERS (.wps-skeleton)
───────────────────────────────────────────────────────────── */
@keyframes wps-shimmer {
  0%   { background-position: -700px 0; }
  100% { background-position: 700px 0; }
}
.wps-skeleton {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #e4eaf5 25%, #f0f4fb 50%, #e4eaf5 75%);
  background-size: 700px 100%;
  animation: wps-shimmer 1.5s ease-in-out infinite;
}
.wps-skeleton--text    { height: 1em;    margin-bottom: 0.5em;  border-radius: 4px; }
.wps-skeleton--heading { height: 1.6em;  margin-bottom: 0.65em; border-radius: 4px; }
.wps-skeleton--avatar  { border-radius: 50%; width: 48px; height: 48px; flex-shrink: 0; }
.wps-skeleton--avatar-lg { border-radius: 50%; width: 64px; height: 64px; flex-shrink: 0; }
.wps-skeleton--thumb   { border-radius: 10px; aspect-ratio: 16/9; width: 100%; }
.wps-skeleton--btn     { height: 40px; width: 120px; border-radius: 50px; }
.wps-skeleton--badge   { height: 22px; width: 70px; border-radius: 50px; }
.wps-skeleton-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
}


/* ─────────────────────────────────────────────────────────────
   PAGINATION (.wps-pagination)
───────────────────────────────────────────────────────────── */
.wps-pagination {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0; padding: 0;
  font-family: var(--font-body);
}
.wps-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px; height: 38px;
  padding: 0 0.6rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-navy);
  background: transparent;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}
.wps-page-link:hover         { background: var(--color-light-bg); }
.wps-page-item.is-active .wps-page-link  { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.wps-page-item.is-disabled .wps-page-link { opacity: 0.3; pointer-events: none; }
.wps-page-item--ellipsis .wps-page-link  { pointer-events: none; color: var(--color-text-muted); }
/* Pill variant */
.wps-pagination--pill .wps-page-link { border-radius: 50px; }
.wps-pagination--pill .wps-page-item.is-active .wps-page-link { box-shadow: 0 2px 12px rgba(4,39,137,0.25); }
/* Bordered variant */
.wps-pagination--bordered .wps-page-link { border-color: var(--color-border); }
.wps-pagination--bordered .wps-page-item.is-active .wps-page-link { border-color: var(--color-navy); }


/* ─────────────────────────────────────────────────────────────
   BREADCRUMBS (.wps-breadcrumb)
───────────────────────────────────────────────────────────── */
.wps-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0; padding: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
}
.wps-breadcrumb-item { display: flex; align-items: center; }
.wps-breadcrumb-item + .wps-breadcrumb-item::before {
  content: '/';
  margin: 0 0.5rem;
  color: var(--color-border);
}
.wps-breadcrumb--chevron .wps-breadcrumb-item + .wps-breadcrumb-item::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D0D9EE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat;
  margin: 0 0.2rem;
}
.wps-breadcrumb-link {
  color: var(--color-navy);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--t);
}
.wps-breadcrumb-link:hover { color: var(--color-lt-blue); }
.wps-breadcrumb-item.is-current .wps-breadcrumb-link {
  color: var(--color-text-muted);
  font-weight: 400;
  pointer-events: none;
}
/* Dark */
.wps-breadcrumb--dark .wps-breadcrumb-link { color: rgba(255,255,255,0.8); }
.wps-breadcrumb--dark .wps-breadcrumb-link:hover { color: var(--color-mint); }
.wps-breadcrumb--dark .wps-breadcrumb-item + .wps-breadcrumb-item::before { color: rgba(255,255,255,0.25); }
.wps-breadcrumb--dark .wps-breadcrumb-item.is-current .wps-breadcrumb-link { color: rgba(255,255,255,0.4); }


/* ─────────────────────────────────────────────────────────────
   TOOLTIPS  [data-tooltip]  — CSS-only, no JS
───────────────────────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 9000;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  background: var(--color-navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  white-space: nowrap;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(4,39,137,0.2);
}
[data-tooltip]::after {
  content: '';
  bottom: calc(100% + 2px);
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--color-navy);
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[data-tooltip-pos="bottom"]::before {
  bottom: auto; top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
[data-tooltip-pos="bottom"]::after {
  bottom: auto; top: calc(100% + 2px);
  transform: translateX(-50%) translateY(-4px);
  border-top-color: transparent;
  border-bottom-color: var(--color-navy);
}
[data-tooltip-pos="bottom"]:hover::before,
[data-tooltip-pos="bottom"]:hover::after { transform: translateX(-50%) translateY(0); }


/* ─────────────────────────────────────────────────────────────
   TESTIMONIALS (.wps-testimonial)
───────────────────────────────────────────────────────────── */
.wps-testimonial {
  background: #fff;
  border-radius: 0 1.5rem 0 1.5rem;
  padding: 2rem 2rem 1.5rem;
  box-shadow: 0 4px 24px rgba(4,39,137,0.08);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: var(--font-body);
  height: 100%;
}
.wps-testimonial-quote {
  font-size: clamp(1.75rem, 2vw, 4.4rem);
  font-weight: 700;
  line-height: 1.55;
  color: #2d2d2d;
  flex: 1;
  position: relative;
  padding-left: 1.75rem;
}
.wps-testimonial-quote::before {
  content: '\201C';
  position: absolute;
  left: 0; top: -0.3rem;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-mint);
  font-family: Georgia, serif;
}
.wps-testimonial-quote::after {
  content: '\201D';
  font-size: 2.75rem;
  line-height: 0;
  /*vertical-align: -0.5em;*/
  color: var(--color-mint);
  font-family: Georgia, serif;
  margin-left: 0.15em;
}
.wps-testimonial--navy .wps-testimonial-quote::after { color: var(--color-mint); }
.wps-testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.wps-testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gradient-navy-ltblue);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700; font-size: 0.88rem;
  flex-shrink: 0;
  font-family: var(--font-body);
}
.wps-testimonial-author > div { display: flex; flex-direction: column; gap: 0.15rem; }
.wps-testimonial-name  { font-weight: 700; font-size: 1.75rem; color: var(--color-navy); line-height: 1.2; }
.wps-testimonial-role  { font-size: 1.25rem; color: var(--wps-white); line-height: 1.2; }
/* Navy variant */
.wps-testimonial--navy { background: var(--color-navy); }
.wps-testimonial--navy .wps-testimonial-quote { color: rgba(255,255,255); }
.wps-testimonial--navy .wps-testimonial-quote::before { color: var(--color-mint); }
.wps-testimonial--navy .wps-testimonial-author { border-top-color: rgba(255,255,255,0.12); }
.wps-testimonial--navy .wps-testimonial-name { color: #fff; }
.wps-testimonial--navy .wps-testimonial-role { color: rgba(255,255,255,); }


/* ─────────────────────────────────────────────────────────────
   EMPTY STATES (.wps-empty)
───────────────────────────────────────────────────────────── */
.wps-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.5rem 2rem;
  font-family: var(--font-body);
}
.wps-empty-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--color-light-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
  color: var(--color-navy);
  margin-bottom: 1.25rem;
}
.wps-empty-title {
  font-size: 1.1rem; font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 0.5rem;
}
.wps-empty-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 300px;
  margin: 0 0 1.5rem;
}
.wps-empty-actions {
  display: flex; flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
/* Bordered variant */
.wps-empty--bordered {
  border: 2px dashed var(--color-border);
  border-radius: 12px;
}
/* Navy variant */
.wps-empty--navy { background: var(--color-navy); border-radius: 12px; }
.wps-empty--navy .wps-empty-icon { background: rgba(255,255,255,0.1); color: var(--color-mint); }
.wps-empty--navy .wps-empty-title { color: #fff; }

/* ==========================================================================
   Side Navigation  (.wps-sidenav)
   ========================================================================== */

/* ── Shell ───────────────────────────────────────────────────────────────── */
.wps-sidenav {
  display: flex;
  flex-direction: column;
  width: 260px;
  background: #fff;
  border-radius: 1rem;
  border: 1px solid rgba(4,39,137,0.10);
  padding: 0.625rem 0;
  box-shadow: 0 2px 12px rgba(4,39,137,0.06);
  overflow: hidden;
}

/* Optional header block (avatar + name) */
.wps-sidenav-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.125rem 0.875rem;
  border-bottom: 1px solid rgba(4,39,137,0.08);
  margin-bottom: 0.5rem;
}
.wps-sidenav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-light-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.wps-sidenav-avatar i { font-size: 1rem; color: var(--color-cloud-blue); }
.wps-sidenav-header-name {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.2;
}
.wps-sidenav-header-sub {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: #888;
  line-height: 1.2;
}

/* Section label */
.wps-sidenav-section {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-cloud-blue);
  padding: 0.85rem 1.125rem 0.3rem;
}

/* Divider */
.wps-sidenav-divider {
  height: 1px;
  background: rgba(4,39,137,0.07);
  margin: 0.5rem 0;
}

/* ── Base link & toggle shared styles ────────────────────────────────────── */
.wps-sidenav-link,
.wps-sidenav-toggle {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1.125rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: #3a3a3a;
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  line-height: 1.3;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
  position: relative;
}
.wps-sidenav-link:hover,
.wps-sidenav-toggle:hover {
  background: var(--color-light-bg);
  color: var(--color-navy);
  text-decoration: none;
}
.wps-sidenav-link:hover .wps-sidenav-icon,
.wps-sidenav-toggle:hover .wps-sidenav-icon {
  color: var(--color-navy);
}

/* Active state — left inset accent + background */
.wps-sidenav-link.is-active {
  color: var(--color-navy);
  font-weight: 700;
  background: rgba(4,39,137,0.06);
  box-shadow: inset 3px 0 0 var(--color-navy);
}
.wps-sidenav-link.is-active .wps-sidenav-icon {
  color: var(--color-navy);
}

/* Icon */
.wps-sidenav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--color-cloud-blue);
  transition: color var(--t) var(--ease);
}

/* Badge / notification pill */
.wps-sidenav-badge {
  margin-left: auto;
  background: var(--color-navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.18em 0.55em;
  border-radius: 20px;
  min-width: 1.5em;
  text-align: center;
  line-height: 1.5;
}

/* Chevron rotate */
.wps-sidenav-chevron {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.7rem;
  color: #bbb;
  transition: transform 0.25s ease, color var(--t) var(--ease);
  line-height: 1;
}
.wps-sidenav-toggle[aria-expanded="false"] .wps-sidenav-chevron {
  transform: rotate(180deg);
  color: var(--color-navy);
}
.wps-sidenav-toggle[aria-expanded="false"] {
  color: var(--color-navy);
}

/* ── Sub-menu ─────────────────────────────────────────────────────────────── */
.wps-sidenav-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(4,39,137,0.025);
}
.wps-sidenav-sub.is-open {
  max-height: 600px;
}
.wps-sidenav-sub-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.52rem 1.125rem 0.52rem 3rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  color: #555;
  text-decoration: none;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.wps-sidenav-sub-link::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ccc;
  flex-shrink: 0;
  transition: background var(--t) var(--ease);
}
.wps-sidenav-sub-link:hover {
  background: rgba(4,39,137,0.05);
  color: var(--color-navy);
  text-decoration: none;
}
.wps-sidenav-sub-link:hover::before { background: var(--color-navy); }
.wps-sidenav-sub-link.is-active {
  color: var(--color-navy);
  font-weight: 700;
  background: rgba(4,39,137,0.05);
}
.wps-sidenav-sub-link.is-active::before { background: var(--color-navy); }

/* ── Dark / Navy variant ──────────────────────────────────────────────────── */
.wps-sidenav--navy {
  background: var(--color-navy);
  border-color: transparent;
  box-shadow: 0 4px 24px rgba(2,10,40,0.35);
}
.wps-sidenav--navy .wps-sidenav-header {
  border-bottom-color: rgba(255,255,255,0.1);
}
.wps-sidenav--navy .wps-sidenav-header-name { color: #fff; }
.wps-sidenav--navy .wps-sidenav-header-sub  { color: rgba(255,255,255,0.45); }
.wps-sidenav--navy .wps-sidenav-avatar      { background: rgba(255,255,255,0.1); }
.wps-sidenav--navy .wps-sidenav-avatar i    { color: var(--color-mint); }
.wps-sidenav--navy .wps-sidenav-section     { color: rgba(255,255,255,0.35); }
.wps-sidenav--navy .wps-sidenav-divider     { background: rgba(255,255,255,0.1); }

.wps-sidenav--navy .wps-sidenav-link,
.wps-sidenav--navy .wps-sidenav-toggle      { color: rgba(255,255,255,0.72); }
.wps-sidenav--navy .wps-sidenav-link:hover,
.wps-sidenav--navy .wps-sidenav-toggle:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.wps-sidenav--navy .wps-sidenav-icon        { color: rgba(255,255,255,0.4); }
.wps-sidenav--navy .wps-sidenav-link:hover  .wps-sidenav-icon,
.wps-sidenav--navy .wps-sidenav-toggle:hover .wps-sidenav-icon { color: #fff; }

.wps-sidenav--navy .wps-sidenav-link.is-active {
  color: var(--color-mint);
  background: rgba(110,252,170,0.1);
  box-shadow: inset 3px 0 0 var(--color-mint);
  font-weight: 700;
}
.wps-sidenav--navy .wps-sidenav-link.is-active .wps-sidenav-icon { color: var(--color-mint); }

.wps-sidenav--navy .wps-sidenav-chevron     { color: rgba(255,255,255,0.3); }
.wps-sidenav--navy .wps-sidenav-toggle[aria-expanded="false"]               { color: #fff; }
.wps-sidenav--navy .wps-sidenav-toggle[aria-expanded="false"] .wps-sidenav-chevron { color: var(--color-mint); }

.wps-sidenav--navy .wps-sidenav-badge       { background: var(--color-mint); color: var(--color-navy); }

.wps-sidenav--navy .wps-sidenav-sub         { background: rgba(0,0,0,0.15); }
.wps-sidenav--navy .wps-sidenav-sub-link    { color: rgba(255,255,255,0.55); }
.wps-sidenav--navy .wps-sidenav-sub-link::before { background: rgba(255,255,255,0.25); }
.wps-sidenav--navy .wps-sidenav-sub-link:hover   {
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.wps-sidenav--navy .wps-sidenav-sub-link:hover::before { background: var(--color-mint); }
.wps-sidenav--navy .wps-sidenav-sub-link.is-active {
  color: var(--color-mint);
  background: rgba(110,252,170,0.07);
  font-weight: 700;
}
.wps-sidenav--navy .wps-sidenav-sub-link.is-active::before { background: var(--color-mint); }

/* ── Gradient variant ─────────────────────────────────────────────────────── */
.wps-sidenav--gradient {
  background: linear-gradient(165deg, #021d65 0%, #042789 50%, #0055c8 85%, #00AEEF 100%);
  border-color: transparent;
  box-shadow: 0 4px 28px rgba(2,10,40,0.4);
}
.wps-sidenav--gradient .wps-sidenav-header      { border-bottom-color: rgba(255,255,255,0.12); }
.wps-sidenav--gradient .wps-sidenav-header-name { color: #fff; }
.wps-sidenav--gradient .wps-sidenav-header-sub  { color: rgba(255,255,255,0.5); }
.wps-sidenav--gradient .wps-sidenav-avatar      { background: rgba(255,255,255,0.12); }
.wps-sidenav--gradient .wps-sidenav-avatar i    { color: var(--color-mint); }
.wps-sidenav--gradient .wps-sidenav-section     { color: rgba(255,255,255,0.4); }
.wps-sidenav--gradient .wps-sidenav-divider     { background: rgba(255,255,255,0.12); }
.wps-sidenav--gradient .wps-sidenav-link,
.wps-sidenav--gradient .wps-sidenav-toggle      { color: rgba(255,255,255,0.78); }
.wps-sidenav--gradient .wps-sidenav-link:hover,
.wps-sidenav--gradient .wps-sidenav-toggle:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.wps-sidenav--gradient .wps-sidenav-icon        { color: rgba(255,255,255,0.45); }
.wps-sidenav--gradient .wps-sidenav-link:hover  .wps-sidenav-icon,
.wps-sidenav--gradient .wps-sidenav-toggle:hover .wps-sidenav-icon { color: #fff; }
.wps-sidenav--gradient .wps-sidenav-link.is-active {
  color: #fff;
  background: rgba(255,255,255,0.15);
  box-shadow: inset 3px 0 0 var(--color-mint);
  font-weight: 700;
}
.wps-sidenav--gradient .wps-sidenav-link.is-active .wps-sidenav-icon { color: var(--color-mint); }
.wps-sidenav--gradient .wps-sidenav-chevron     { color: rgba(255,255,255,0.3); }
.wps-sidenav--gradient .wps-sidenav-toggle[aria-expanded="false"]               { color: #fff; }
.wps-sidenav--gradient .wps-sidenav-toggle[aria-expanded="false"] .wps-sidenav-chevron { color: var(--color-mint); }
.wps-sidenav--gradient .wps-sidenav-badge       { background: var(--color-mint); color: var(--color-navy); }
.wps-sidenav--gradient .wps-sidenav-sub         { background: rgba(0,0,0,0.12); }
.wps-sidenav--gradient .wps-sidenav-sub-link    { color: rgba(255,255,255,0.6); }
.wps-sidenav--gradient .wps-sidenav-sub-link::before { background: rgba(255,255,255,0.3); }
.wps-sidenav--gradient .wps-sidenav-sub-link:hover   { background: rgba(255,255,255,0.07); color: #fff; }
.wps-sidenav--gradient .wps-sidenav-sub-link:hover::before { background: var(--color-mint); }
.wps-sidenav--gradient .wps-sidenav-sub-link.is-active { color: var(--color-mint); font-weight: 700; }
.wps-sidenav--gradient .wps-sidenav-sub-link.is-active::before { background: var(--color-mint); }

/* ==========================================================================
   WPS Gauge / Speedometer Charts
   ========================================================================== */

/* Card shell — each gauge sits in a padded white tile */
.wps-gauge-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;           /* never squish in a flex row */
  gap: 0.75rem;
  background: #fff;
  border-radius: 1.25rem;
  padding: 1.9rem 2.25rem 5.5rem;
  box-shadow: 0 2px 16px rgba(4,39,137,0.08), 0 1px 3px rgba(4,39,137,0.05);
}

/* Dark-background card variant */
.wps-gauge-wrap--dark {
  background: rgba(255,255,255,0.07);
  box-shadow: none;
  border: 1px solid rgba(255,255,255,0.13);
}
.wps-gauge-wrap--dark .wps-gauge-label {
  color: rgba(255,255,255,0.72);
}

.wps-gauge {
  position: relative;
  display: inline-block;
  line-height: 1;
}

.wps-gauge svg {
  display: block;
  overflow: visible;
}

/* Value number — sits in the open "mouth" of the arc */
.wps-gauge-value {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* Optional sub-label inside the arc (below the number) */
.wps-gauge-sub {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-cloud-blue);
  white-space: nowrap;
  text-align: center;
  line-height: 1;
}

/* Below-arc label */
.wps-gauge-label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-navy);
  text-align: center;
  max-width: 200px;
  line-height: 1.4;
}

/* Size modifiers — sm / md (default) / lg
   viewBox is "0 0 200 120" so the arc base (y=108) lands at 90% of div height,
   leaving a natural ~10px "mouth" strip below the chord for the sub-label. */
.wps-gauge--sm  { width: 140px; }   /* div height = 140 × 120/200 = 84px   */
.wps-gauge--md  { width: 200px; }   /* div height = 200 × 120/200 = 120px  */
.wps-gauge--lg  { width: 280px; }   /* div height = 280 × 120/200 = 168px  */

/* bottom positions keep the number centred in the arc interior */
.wps-gauge--sm  .wps-gauge-value { font-size: clamp(1.5rem, 3vw, 1.9rem);    bottom: 14px; }
.wps-gauge--md  .wps-gauge-value { font-size: clamp(2rem,   3.5vw, 2.5rem);  bottom: 18px; }
.wps-gauge--lg  .wps-gauge-value { font-size: clamp(2.6rem, 4.5vw, 3.25rem); bottom: 24px; }

/* sub sits in the open mouth, just below the chord */
.wps-gauge-sub                    { bottom: 2px; }
.wps-gauge--sm  .wps-gauge-sub   { font-size: 0.55rem; bottom: 1px; }
.wps-gauge--lg  .wps-gauge-sub   { font-size: 0.7rem;  bottom: 3px; }

/* Dark text/dot colours */
.wps-gauge--dark .wps-gauge-value { color: #fff; }
.wps-gauge--dark .wps-gauge-sub   { color: rgba(255,255,255,0.5); }

/* Animation — stroke sweeps in, value fades in */
/* Optional per-gauge stagger via --gauge-delay CSS custom property */
[data-gauge-offset] {
  transition: stroke-dashoffset 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: var(--gauge-delay, 0ms);
}
.wps-gauge-value {
  transition: opacity 0.5s ease;
}
.wps-empty--navy .wps-empty-desc  { color: rgba(255,255,255,0.55); }

/* ═══════════════════════════════════════════════════════════════
   VIDEO MODAL TRIGGER
   ═══════════════════════════════════════════════════════════════ */

.video-modal-trigger {
  background: var(--video-gradient);
  border: none;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  width: 100%;
  position: relative;
  padding-top: 1.5rem;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  height: 100%;
  color: #fff;
  cursor: pointer;
}

.video-modal-trigger-reverse {
  background: var(--video-gradient);
  border: none;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  width: 100%;
  position: relative;
  padding-top: 1.5rem;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  height: 100%;
  color: #fff;
  cursor: pointer;
}

@media (max-width: 640px) {
  .video-modal-trigger,
  .video-modal-trigger-reverse {
    padding-top: 0;
    min-height: 220px;
  }

  /* Headline: smaller font, tighter position on mobile */
  .video-modal-trigger h2,
  .video-modal-trigger-reverse h2 {
    font-size: clamp(14px, 4.5vw, 30px);
    top: 1.25rem;
    left: 1.25rem;
    max-width: calc(50% - 1.5rem);
  }
  .video-modal-trigger-reverse h2 {
    left: calc(50% + 1.25rem);
    right: auto;
  }

  /* Standard play button: bottom-left aligned with headline */
  .video-modal-trigger div {
    left: 1.25rem;
    bottom: 1rem;
    gap: 0.6rem;
  }

  /* Reverse play button: aligned under right-side headline */
  .video-modal-trigger-reverse div div {
    left: calc(50% + 1.25rem);
    right: auto;
    bottom: 1rem;
    gap: 0.6rem;
  }

  /* Smaller play circle on mobile */
  .video-modal-trigger div svg,
  .video-modal-trigger-reverse div svg {
    width: 38px;
    height: 38px;
  }

  /* Photo: fills right half flush, slightly wider on mobile */
  .video-modal-trigger img,
  .video-modal-trigger-reverse img {
    width: 45%;
  }
}

.video-modal-trigger p {
  text-align: left;
  font-weight: 700;
  font-size: clamp(18px, 4vw, 36px);
  line-height: 1.1em;
  position: absolute;
  top: 2rem;
  left: 2rem;
  max-width: 60%;
  z-index: 2;
}

.video-modal-trigger h2,
.video-modal-trigger-reverse h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(20px, 3.2vw, 34px);
  line-height: 1.15em;
  text-align: left;
  color: #fff;
  margin: 0;
  position: absolute;
  top: 2rem;
  left: 2rem;
  max-width: 50%;
  z-index: 2;
}
/* Reverse: photo occupies left 50%, so anchor text from the midpoint */
.video-modal-trigger-reverse h2 {
  left: calc(50% + 2rem);
  right: auto;
  max-width: calc(50% - 3rem);
}

/* Tablet: larger headline */
@media (min-width: 641px) and (max-width: 1023px) {
  .video-modal-trigger h2,
  .video-modal-trigger-reverse h2 {
    font-size: clamp(22px, 3.5vw, 36px);
  }
}

/* Desktop: larger headline */
@media (min-width: 1024px) {
  .video-modal-trigger h2,
  .video-modal-trigger-reverse h2 {
    font-size: clamp(25px, 2.1vw, 34px);
  }
}

.video-modal-trigger-reverse > div {
  text-align: left;
  font-weight: 700;
  font-size: clamp(16px, 3vw, 36px);
  line-height: 1.1em;
  max-width: 60%;
  z-index: 2;
  align-self: center;
  padding-right: 1rem;
}

.video-modal-trigger > div {
  text-align: left;
  font-weight: 700;
  font-size: clamp(16px, 3vw, 36px);
  line-height: 1.1em;
  max-width: 50%;
  z-index: 2;
  align-self: center;
  padding-right: 1rem;
}

.video-modal-trigger img {
  width: 50%;
  max-width: 448px;
  display: block;
  margin-left: auto;
  z-index: 1;
  position: relative;
  object-fit: cover;
  object-position: center top;
  align-self: stretch;
    margin-right: -2%;
    margin-bottom: -2%;	
}

.video-modal-trigger-reverse img {
  width: 50%;
  max-width: 448px;
  display: block;
  margin-right: auto;
  z-index: 1;
  position: relative;
  object-fit: cover;
  object-position: center top;
  align-self: stretch;
    margin-right: -2%;
    margin-bottom: -2%;	
}

@media (max-width: 640px) {
  .video-modal-trigger-reverse img {
    width: 60%;
    margin-left: -25px;
    margin-right: -1rem;
  }
}

.video-modal-trigger div {
  position: absolute;
  left: 2rem;
  bottom: 1.75rem;
  z-index: 2;
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Tablet (641px–991px) */
@media (min-width: 641px) and (max-width: 991px) {
  .video-modal-trigger div,
  .video-modal-trigger-reverse div div {
    bottom: 1.25rem;
    gap: 0.75rem;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .video-modal-trigger div {
    bottom: 1rem;
    gap: 0.6rem;
  }
}

.video-modal-trigger-reverse div div {
  position: absolute;
  left: calc(50% + 2rem);
  right: auto;
  bottom: 1.75rem;
  z-index: 2;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.video-modal-trigger-reverse div span {
  font-size: clamp(14px, 3vw, 20px);
}

.video-modal-trigger div div {
  position: absolute;
  right: 2rem;
  bottom: 3rem;
  z-index: 2;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.video-modal-trigger div span,
.video-modal-trigger-reverse div span {
  font-size: clamp(14px, 1.4vw, 20px);
  color: #fff;
  font-weight: 700;
  font-family: var(--font-body);
}

.video-modal-trigger svg,
.video-modal-trigger-reverse svg {
  transition: 0.15s ease-in all;
}

.video-modal-trigger:hover svg,
.video-modal-trigger-reverse:hover svg {
  transform: scale(1.1);
}

/* ── Color modifier: Navy → Lt Blue ── */
.video-modal-trigger--navy-ltblue,
.video-modal-trigger-reverse--navy-ltblue {
  background: var(--gradient-navy-ltblue);
}

/* ═══════════════════════════════════════════════════════════════
   CONTENT + VIDEO SPLIT  (.content-video-split)
   Two-column layout: body text + CTAs left, video thumbnail right.
   Photo uses WPS asymmetric corners with halftone + badge decor.
   ═══════════════════════════════════════════════════════════════ */

.content-video-split { padding: 0rem 0 4rem 0; background: #fff; }

.content-video-body {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.7;
  color: #111;
  margin-bottom: 1.25rem;
}

.content-video-title {
  font-family: var(--font-headline);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.1;
  margin: 0 0 1.25rem;
}

.content-video-headline {
  font-family: var(--font-body);
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  font-weight: 900;
  color: var(--color-navy);
  line-height: 1.15;
  margin: 0 0 1.5rem;
}

.content-video-actions {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2rem;
}

.content-video-cta-label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

/* ── Right: video media column ── */
.content-video-media {
  position: relative;
  padding-bottom: 2.5rem;
 /* padding-right: 1.5rem;*/
}

.content-video-img-wrap {
  border-radius: 0 3rem 0 3rem;
  overflow: hidden;
  aspect-ratio: 4 / 4;
  position: relative;
  cursor: pointer;
}

.content-video-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s var(--ease);
}

.content-video-img-wrap:hover img { transform: scale(1.03); }

/* Play button overlay */
@keyframes play-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(4, 39, 137, 0.5); }
  70%  { box-shadow: 0 0 0 20px rgba(4, 39, 137, 0); }
  100% { box-shadow: 0 0 0 0 rgba(4, 39, 137, 0); }
}

.content-video-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
  padding: 0;
}

.content-video-play-btn svg {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.35));
  transition: transform 0.3s var(--ease);
  animation: play-pulse 2s ease-out infinite;
}

.content-video-play-btn:hover svg {
  transform: scale(1.1);
  animation-play-state: paused;
}

/* Halftone dots */
.content-video-halftone {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 160px;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 991.98px) {
  .content-video-actions { gap: 1.25rem; }
}

@media (max-width: 767.98px) {
  .content-video-actions { flex-direction: column; gap: 1rem; }
  .content-video-actions .btn { width: 100%; min-width: 0 !important; }
}

@media (max-width: 575.98px) {
  .sti-cta-btns .btn {
    padding: 0.5rem 1.25rem;
    font-size: 1rem !important;
    border-radius: 50px;
  }
}


@media (max-width: 575.98px) {
  .content-video-split   { padding: 2.5rem 0; }
  .content-video-actions { flex-direction: column; gap: 1rem; }
  .content-video-actions .btn { width: 100%; min-width: 0 !important; }
  .content-video-play-btn svg { width: 56px; height: 56px; }
}

/* ─────────────────────────────────────────────────────────────
   VIDEO THUMBNAIL  (.wps-video-thumb)
   Full-bleed thumbnail with centered pulsing play button.
   Hooks into the same data-video-open modal system.
───────────────────────────────────────────────────────────── */

.wps-video-thumb {
  display: block;
  position: relative;
  width: 100%;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: 0 3rem 0 3rem;
  overflow: hidden;
  line-height: 0; /* collapse inline-block gap */
}

.wps-video-thumb-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.45s var(--ease);
}

.wps-video-thumb:hover .wps-video-thumb-img {
  transform: scale(1.04);
}

/* ── Centered play button layer ── */
.wps-video-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

/* ── Pulse rings ── */
@keyframes wpsVideoPulse {
  0%   { transform: translate(-50%, -50%) scale(0.8); opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

.wps-video-thumb-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  animation: wpsVideoPulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}
.wps-video-thumb-pulse:nth-child(2) {
  animation-delay: 0.9s;
}

/* ── Play icon SVG ── */
.wps-video-thumb-play svg {
  position: relative;
  z-index: 3;
  width: 76px;
  height: 76px;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.40));
  transition: transform 0.3s var(--ease);
}
.wps-video-thumb:hover .wps-video-thumb-play svg {
  transform: scale(1.1);
}

/* ── Pause animation on hover ── */
.wps-video-thumb:hover .wps-video-thumb-pulse {
  animation-play-state: paused;
}

/* ── No pulse variant ── */
.wps-video-thumb--no-pulse .wps-video-thumb-pulse {
  display: none;
}

/* ── Play button colour modifiers ── */

/* Lt Blue — pulse: lt-blue · circle: lt-blue · triangle: white */
.wps-video-thumb--ltblue .wps-video-thumb-pulse {
  background: rgba(0, 174, 239, 0.38);
}
.wps-video-thumb--ltblue .wps-video-thumb-play svg circle {
  fill: #00AEEF;
  fill-opacity: 1;
}
.wps-video-thumb--ltblue .wps-video-thumb-play svg polygon {
  fill: #fff;
}

/* Mint — pulse: mint · circle: mint · triangle: navy */
.wps-video-thumb--mint .wps-video-thumb-pulse {
  background: rgba(110, 252, 170, 0.42);
}
.wps-video-thumb--mint .wps-video-thumb-play svg circle {
  fill: #6EFCAA;
  fill-opacity: 1;
}
.wps-video-thumb--mint .wps-video-thumb-play svg polygon {
  fill: #042789;
}

/* Purple — pulse: purple · circle: purple · triangle: white */
.wps-video-thumb--purple .wps-video-thumb-pulse {
  background: rgba(145, 38, 143, 0.38);
}
.wps-video-thumb--purple .wps-video-thumb-play svg circle {
  fill: #91268F;
  fill-opacity: 1;
}
.wps-video-thumb--purple .wps-video-thumb-play svg polygon {
  fill: #fff;
}

/* ── Responsive ── */
@media (max-width: 575.98px) {
  .wps-video-thumb { border-radius: 0 1.75rem 0 1.75rem; }
  .wps-video-thumb-play svg,
  .wps-video-thumb-pulse { width: 58px; height: 58px; }
}

/* ═══════════════════════════════════════════════════════════════
   JOURNEY TRACKER
   Horizontal Medicare step tracker: title tab + chevron steps
   --nav-w controls left-nav width so title tab aligns automatically
   ═══════════════════════════════════════════════════════════════ */

.journey-tracker {
  font-family: var(--font-body);
  max-width: 700px;
  --nav-w: 52px;
  --chevron: 22px;         /* depth of arrow notch */
}

/* ── Title tab: offset by nav width so it spans exactly the steps area ── */
.journey-tracker-title-wrap {
  margin-left: var(--nav-w);
  margin-bottom: -2px;
  position: relative;
  z-index: 2;
}

.journey-tracker-title {
  display: block;
  background: #fff;
  border: 2px solid var(--color-navy);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding: 0.6rem 1.75rem;
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.35vw, 1.05rem);
  font-weight: 700;
  color: var(--color-navy);
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* ── Bar ── */
.journey-tracker-bar {
  display: flex;
  align-items: stretch;
  background: var(--color-navy);
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  min-height: 80px;
  padding: 5px 0;            /* top/bottom inset so steps don't fill fully — creates slight gap effect */
}

/* ── Nav arrow buttons ── */
.journey-tracker-nav {
  flex-shrink: 0;
  width: var(--nav-w);
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.8);
  padding: 0;
  transition: color 0.18s;
}
.journey-tracker-nav:hover { color: #fff; }
.journey-tracker-nav svg  { width: 20px; height: 20px; stroke-width: 2.5; }

/* ── Steps container ── */
.journey-tracker-steps {
  display: flex;
  flex: 1;
  align-items: stretch;
}

/* ── Individual chevron step ──
   Overlap each step by --chevron px so the arrow tip of the previous
   covers the notch of the next. Z-index descends L→R; active step
   always floats on top and gets a drop-shadow for visual pop. */
.journey-tracker-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem 0.7rem calc(var(--chevron) + 0.75rem);
  background: #42BEDD;
  color: var(--color-navy);
  position: relative;
  margin-left: calc(var(--chevron) * -1);
  clip-path: polygon(
    var(--chevron) 0,
    calc(100% - var(--chevron)) 0, 100% 50%,
    calc(100% - var(--chevron)) 100%,
    var(--chevron) 100%, 0 50%
  );
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
  z-index: 1;
  border: none;
}

/* First step: no left notch */
.journey-tracker-step:nth-child(1) {
  margin-left: 0;
  padding-left: 1rem;
  clip-path: polygon(
    0 0, calc(100% - var(--chevron)) 0, 100% 50%,
    calc(100% - var(--chevron)) 100%, 0 100%
  );
  z-index: 3;
}

/* Middle step */
.journey-tracker-step:nth-child(2) { z-index: 2; }

/* Last step: no right arrow */
.journey-tracker-step:nth-child(3) {
  z-index: 1;
  clip-path: polygon(
    var(--chevron) 0, 100% 0, 100% 100%,
    var(--chevron) 100%, 0 50%
  );
}

/* Inactive hover: subtle brighten */
.journey-tracker-step:hover:not(.journey-tracker-step--active) {
  filter: brightness(1.12);
}

/* Active step: gradient, white text, drop-shadow pop */
.journey-tracker-step--active {
  background: var(--gradient-mint-ltblue);
  color: #fff;
  z-index: 4 !important;
  filter: drop-shadow(0 4px 14px rgba(0,174,239,0.45));
}
.journey-tracker-step--active:hover { filter: drop-shadow(0 4px 14px rgba(0,174,239,0.45)); }

/* Inactive steps: dim slightly for hierarchy */
.journey-tracker-steps:has(.journey-tracker-step--active)
  .journey-tracker-step:not(.journey-tracker-step--active) {
  opacity: 0.82;
}

/* Step number */
.journey-tracker-step-num {
  font-family: var(--font-body);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: -0.04em;
}

/* Step label */
.journey-tracker-step-label {
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 1.05vw, 0.875rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}

/* Transition on active change */
.journey-tracker-step,
.journey-tracker-step-num,
.journey-tracker-step-label {
  transition: filter 0.25s ease, opacity 0.25s ease, background 0.25s ease, color 0.25s ease;
}

/* ── Tablet (641–991px) ── */
@media (min-width: 641px) and (max-width: 991px) {
  .journey-tracker { --nav-w: 44px; --chevron: 18px; max-width: 100%; }
  .journey-tracker-bar { min-height: 70px; }
  .journey-tracker-step-num { font-size: 2.2rem; }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .journey-tracker { --nav-w: 38px; --chevron: 14px; max-width: 100%; }
  .journey-tracker-bar { min-height: 58px; padding: 3px 0; }
  .journey-tracker-title { font-size: 0.75rem; padding: 0.4rem 0.875rem; border-radius: 10px 10px 0 0; }
  .journey-tracker-nav svg { width: 16px; height: 16px; }
  .journey-tracker-step { padding: 0.5rem 0.5rem 0.5rem calc(var(--chevron) + 0.5rem); gap: 0.35rem; }
  .journey-tracker-step:nth-child(1) { padding-left: 0.75rem; }
  .journey-tracker-step-num { font-size: 1.6rem; }
  .journey-tracker-step-label { font-size: 0.62rem; }
}

/* Disclaimer chevron */
    [aria-expanded="false"] .disc-chev { transform: rotate(180deg); }



/* LtBlue - Purple banner */
  .sfa-banner { position:relative; overflow:hidden; border-radius:16px; background:linear-gradient(90deg,#00aeef 0%,#7b2d8b 100%); padding:2.75rem 3.5rem; display:block; width:100%; }
  .sfa-banner-halftone { position:absolute; right:-4%; top:120%; transform:translateY(-50%); width:340px; opacity:0.25; pointer-events:none; }
  .sfa-banner-spark    { position:absolute; right:-2%; bottom:-81%; width:280px; opacity:0.6; pointer-events:none; }
  .sfa-banner h2       { position:relative; z-index:1; color:#fff; font-size:clamp(2rem,4.5vw,3.25rem); margin:0; line-height:1.1; white-space:nowrap; }

  @media (max-width:991.98px) {
    .sfa-banner          { padding:2.25rem 2rem; }
    .sfa-banner h2       { font-size:clamp(1.9rem,7vw,2.75rem); white-space:normal; }
    .sfa-banner-halftone { width:220px; right:-2%; }
    .sfa-banner-spark    { width:320px; right:-3%; bottom:-79%; }
  }

  @media (max-width:575.98px) {
    .sfa-banner          { padding:2rem 1.75rem; border-radius:12px; }
    .sfa-banner h2       { font-size:2rem; line-height:1.15; }
    .sfa-banner-halftone { width:220px; right:-8%; opacity:0.18; }
    .sfa-banner-spark    { width:220px; right:-6%; bottom:-71%; opacity:0.5; }
  }

/* ── Parallax spark decoration ───────────────────────────────────────────── */
.spark-parallax {
  position: absolute;
  width: 700px;
  height: 700px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

@media (max-width: 767.98px) {
  .spark-parallax { width: 420px; height: 420px; }
}

/* ── Skip link ───────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  overflow: visible;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: #fff;
  color: #003087;
  font-weight: 700;
  border: 2px solid #003087;
  border-radius: 4px;
  text-decoration: none;
}

/* ==========================================================================
   Better Options — /betteroptions/index.shtml
   ========================================================================== */

/* ── Backgrounds not in custom.css ──────────────────────────────────────── */

.bg-light-wps  { background: var(--color-light-bg); }
.bg-navy       { background: var(--color-navy); }

/* ── Gradient text ───────────────────────────────────────────────────────── */

.text-gradient-mint-ltblue {
  background: var(--gradient-mint-ltblue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-navy-ltblue {
  background: linear-gradient(to right, var(--color-navy), var(--color-lt-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Shimmer headline ────────────────────────────────────────────────────── */

@keyframes bo-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.bo-shimmer-headline {
  background: linear-gradient(
    90deg,
    var(--color-mint)    0%,
    var(--color-lt-blue) 30%,
    #ffffff              50%,
    var(--color-lt-blue) 70%,
    var(--color-mint)    100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: bo-shimmer 4s linear 2;
}

/* ── Hero overrides ──────────────────────────────────────────────────────── */

.bo-hero {
  min-height: 520px;
}

.bo-hero .hero-campaign-content {
  flex: 0 0 50%;
}

.bo-hero .hero-campaign-headline {
  font-size: clamp(1.75rem, 4.5vw, 5.25rem);
  max-width: 12ch;
}

/* Hard navy split over the bg scene */
.bo-hero .hero-campaign-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--color-navy) 38%, transparent 38%);
  z-index: 2;
  pointer-events: none;
}

/* Cover-fill the media column so the photo never leaves a gap */
.bo-hero .hero-campaign-photo {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Anchor the spark to the right */
@keyframes bo-spark-in {
  from { opacity: 0; transform: scale(0.85) rotate(-6deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

.bo-hero .hero-campaign-spark {
  animation: bo-spark-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
  left: auto;
  right: 32%;
  top: -10rem;
  width: clamp(220px, 60%, 460px);
}

/* ── XXL desktop (≥1400px) ── */
@media (min-width: 1400px) {
  .bo-hero {
    min-height: 580px;
  }
  .bo-hero .hero-campaign-content {
    flex: 0 0 52%;
  }
  .bo-hero .hero-campaign-photo {
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .bo-hero .hero-campaign-spark {
    left: auto;
    right: 34%;
    top: -13rem;
    width: clamp(240px, 56%, 500px);
  }
}

/* ── Mid desktop (992–1199px) ── */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .bo-hero {
    min-height: 480px;
  }
  .bo-hero .hero-campaign-content {
    flex: 0 0 47%;
  }
  .bo-hero .hero-campaign-media::after {
    background: linear-gradient(to right, var(--color-navy) 30%, transparent 30%);
  }
  .bo-hero .hero-campaign-photo {
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .bo-hero .hero-campaign-spark {
    left: auto;
    right: 42%;
    top: -10rem;
    width: clamp(200px, 56%, 420px);
  }
}

/* ── Large tablet (768–991px) — stack text over photo like mobile ── */
@media (min-width: 768px) and (max-width: 991.98px) {
  .bo-hero {
    flex-direction: column;
    min-height: 0;
  }
  .bo-hero .hero-campaign-content {
    flex: 0 0 auto;
    padding: 3rem 2.5rem 2rem;
  }
  .bo-hero .hero-campaign-headline {
    max-width: none;
  }
  .bo-hero .hero-campaign-media {
    width: 100%;
    min-height: 420px;
  }
  .bo-hero .hero-campaign-photo {
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .bo-hero .hero-campaign-media::after {
    display: none;
  }
  .bo-hero .hero-campaign-spark {
    left: auto;
    right: 6%;
    top: -2.5rem;
    width: clamp(200px, 38%, 340px);
  }
}

/* ── Small tablet (576–767px) — stack text over photo like mobile ── */
@media (min-width: 576px) and (max-width: 767.98px) {
  .bo-hero {
    flex-direction: column;
    min-height: 0;
  }
  .bo-hero .hero-campaign-content {
    flex: 0 0 auto;
    padding: 2.5rem 2rem 1.75rem;
  }
  .bo-hero .hero-campaign-headline {
    font-size: clamp(1.6rem, 6vw, 2.5rem);
    max-width: none;
  }
  .bo-hero .hero-campaign-media {
    width: 100%;
    min-height: 360px;
  }
  .bo-hero .hero-campaign-photo {
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .bo-hero .hero-campaign-media::after {
    display: none;
  }
  .bo-hero .hero-campaign-spark {
    left: auto;
    right: 5%;
    top: -2rem;
    width: clamp(160px, 42%, 280px);
  }
}

/* ── Mobile — stack text over photo ── */
@media (max-width: 575.98px) {
  .bo-hero {
    flex-direction: column;
    min-height: 0;
  }
  .bo-hero .hero-campaign-content {
    flex: 0 0 auto;
    padding: 2.25rem 1.5rem 1.5rem;
  }
  .bo-hero .hero-campaign-headline {
    font-size: clamp(1.6rem, 8vw, 2.25rem);
    max-width: none;
  }
  .bo-hero .hero-campaign-media {
    width: 100%;
    min-height: 320px;
  }
  .bo-hero .hero-campaign-photo {
    left: auto;
    right: 0;
    height: 100%;
  }
  .bo-hero .hero-campaign-media::after {
    display: none;
  }
  .bo-hero .hero-campaign-spark {
    left: auto;
    right: 6%;
    top: -2rem;
    width: clamp(140px, 45%, 240px);
  }
}

/* ── Header — pill buttons + mobile overrides ────────────────────────────── */

.bo-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bo-header .btn,
.bo-btn-pill { border-radius: 50px !important; }

.nav-wrapper.is-scrolled .bo-header .btn {
  padding: 0.4rem 1.25rem !important;
  font-size: 0.9rem !important;
}

@media (max-width: 575.98px) {
  .bo-btn-pill:not(.bo-header__btn),
  .bo-btn-kit {
    display: block;
    width: 100%;
    text-align: center;
  }
  .bo-header.nav-wrapper {
    height: 5rem !important;
    padding-top: 0 !important;
  }
  .bo-header .nav-logo img {
    height: 52px !important;
  }
  .bo-header .btn {
    padding: 0.35rem 0.9rem !important;
    font-size: 0.78rem !important;
  }
}

/* ── Journey — tracker image + 3-col icon grid ───────────────────────────── */

.bo-tracker img {
  max-width: 100%;
  height: auto;
}

.bo-journey-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.bo-journey-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.bo-journey-card img {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

@media (max-width: 575.98px) {
  .bo-journey-cards { grid-template-columns: 1fr; }
}

/* ── Accordion — mint → lt-blue override ─────────────────────────────────── */

.bo-checklist--mint-ltblue {
  background: var(--gradient-mint-ltblue);
}

.bo-checklist--mint-ltblue .wps-accordion-title {
  color: var(--color-navy);
}

.bo-checklist--mint-ltblue .wps-accordion-icon svg {
  stroke: var(--color-navy);
}

.bo-checklist--mint-ltblue .wps-accordion-btn[aria-expanded="false"] .wps-accordion-icon svg {
  stroke: var(--color-navy);
}

/* ── Birthday Reminder section ───────────────────────────────────────────── */

.bo-reminder-icon {
  width: 100px;
  height: auto;
}

.bo-reminder-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(4,39,137,0.10);
  padding: 2.5rem;
}

.bo-reminder-label {
  display: block;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.6rem;
}

.bo-reminder-input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-navy);
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  margin-bottom: 0.75rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.bo-reminder-input:focus {
  border-color: var(--color-lt-blue);
  box-shadow: 0 0 0 3px rgba(0,174,239,0.15);
}

.bo-reminder-success {
  display: none;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(110,252,170,0.12);
  border: 1.5px solid var(--color-mint);
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-navy);
}

.bo-reminder-success.show { display: block; }

.bo-reminder-success__link {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--color-lt-blue);
  text-decoration: underline;
  font-weight: 700;
}

/* ── Comparison table ────────────────────────────────────────────────────── */

.bo-compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bo-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-body);
}

.bo-compare-table__spacer {
  width: 20%;
  background: #fff;
  border: none;
}

.bo-compare-table thead th:not(.bo-compare-table__spacer) {
  background: var(--color-lt-blue);
  padding: 1.75rem 1.5rem;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  color: #fff;
  text-align: center;
  vertical-align: middle;
  border-left: 2px solid rgba(255,255,255,0.25);
}
.bo-compare-table thead th:last-child {
  border-right: 2px solid var(--color-lt-blue);
}

.bo-compare-table__label {
  background: #fff;
  border-top: 2px solid var(--color-lt-blue);
  border-left: 3px solid var(--color-lt-blue);
  border-bottom: none;
  color: var(--color-navy);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
  padding: 1.5rem 1rem;
  vertical-align: middle;
  white-space: nowrap;
}
.bo-compare-table tbody tr:last-child .bo-compare-table__label {
  border-bottom: 2px solid var(--color-lt-blue);
}

.bo-compare-table tbody td:not(.bo-compare-table__label) {
  background: var(--color-navy);
  color: #fff;
  text-align: center;
  vertical-align: middle;
  padding: 1.5rem 1.5rem;
  font-size: 1.5rem;
  line-height: 1.45;
  border-top: 2px solid var(--color-mint);
  border-left: 2px solid var(--color-mint);
}
.bo-compare-table tbody td:last-child {
  border-right: 2px solid var(--color-mint);
}
.bo-compare-table tbody tr:last-child td:not(.bo-compare-table__label) {
  border-bottom: 2px solid var(--color-mint);
}

@media (max-width: 575.98px) {
  .bo-compare-table thead th,
  .bo-compare-table tbody td,
  .bo-compare-table__label {
    font-size: 0.8rem !important;
    padding: 0.85rem 0.5rem !important;
    white-space: normal;
  }
}

/* ── 95% Stat Banner ─────────────────────────────────────────────────────── */

.bo-stat-banner {
  position: relative;
  overflow: hidden;
  padding: 3rem 0;
}

.bo-stat-banner__inner {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.bo-stat-banner__stat {
  flex-shrink: 0;
  width: clamp(180px, 22vw, 280px);
  height: auto;
}

.bo-stat-banner__text {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.8vw, 2.25rem);
  color: #fff;
  line-height: 1.2;
  margin: 0;
}

.bo-stat-banner__spark {
  position: absolute;
  bottom: 0;
  right: 0;
  width: clamp(140px, 18vw, 240px);
  height: auto;
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .bo-stat-banner__inner {
    gap: 1.5rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 2rem;
  }
  .bo-stat-banner__stat {
    width: 230px;
  }
  .bo-stat-banner__spark {
    display: none;
  }
}

/* ── Photo + spark overlay ───────────────────────────────────────────────── */

.bo-photo-spark {
  position: relative;
  display: inline-block;
  width: 100%;
}

.bo-photo-spark__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.bo-photo-spark__spark {
  position: absolute;
  bottom: -2rem;
  right: -2rem;
  width: 180px;
  height: auto;
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .bo-photo-spark__spark {
    width: 100px;
    bottom: -1rem;
    right: -0.5rem;
  }
}

/* ── Info Kit CTA card ───────────────────────────────────────────────────── */

.bo-kit-card {
  background: linear-gradient(to right, var(--color-lt-blue) 60%, var(--color-mint) 100%);
  border-radius: 0px 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3rem 3.5rem;
  gap: 2rem;
  overflow: hidden;
}

.bo-kit-card__body {
  flex: 1;
}

.bo-kit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bo-kit-list li {
  position: relative;
  padding-left: 1.1em;
  margin-bottom: 0.35rem;
}

.bo-kit-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #fff;
}

.bo-btn-kit {
  background: #fff;
  color: var(--color-navy);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.75rem 2rem;
  border: none;
}

.bo-btn-kit:hover {
  background: rgba(255,255,255,0.88);
  color: var(--color-navy);
}

.bo-kit-card__icon {
  flex-shrink: 0;
  width: 220px;
  height: 220px;
  background: var(--color-navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bo-kit-icon {
  width: 130px;
  height: auto;
}

@media (max-width: 767.98px) {
  .bo-kit-card {
    flex-direction: column;
    padding: 2.5rem 2rem;
    align-items: center;
    text-align: center;
  }
  .bo-kit-card__body {
    text-align: left;
    width: 100%;
  }
  .bo-kit-card__icon {
    order: -1;
    width: 160px;
    height: 160px;
  }
  .bo-kit-icon { width: 95px; }
}

/* ── Special Discounts — navy banner ────────────────────────────────────── */

.bo-discounts {
  position: relative;
  padding: 4rem 0;
  overflow: hidden;
}

.bo-discounts__mark {
  position: absolute;
  top: -1rem;
  right: 2rem;
  width: clamp(100px, 14vw, 180px);
  height: auto;
  pointer-events: none;
  opacity: 0.95;
}

.bo-discounts__inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 3rem;
  align-items: center;
}

.bo-discounts__left h2 {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.bo-discounts__rule {
  display: block;
  width: 60px;
  height: 4px;
  background: var(--color-mint);
  border-radius: 4px;
}

.bo-discount-item {
  padding: 1.5rem 0;
}

.bo-discount-item:first-child {
  padding-top: 0;
}

.bo-discount-item__headline {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 0.4rem;
}

@media (max-width: 767.98px) {
  .bo-discounts__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
  }
  .bo-discounts__left {
    order: -1;
  }
  .bo-discounts__mark {
    display: none;
  }
}

/* ── Additional Perks 3-col grid ─────────────────────────────────────────── */

.bo-perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.bo-perk-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

.bo-perk-icon {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.bo-perk-link {
  color: var(--color-lt-blue);
  font-weight: 700;
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .bo-perks-grid { grid-template-columns: 1fr; }
}

/* ── Key Takeaway cards — extra padding ─────────────────────────────────── */

.bo-takeaway-cards .solution-card {
  padding: 3.5rem;
}

/* ── Benefit pills ───────────────────────────────────────────────────────── */

.bo-benefit-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 820px;
}

.bo-benefit-pill {
  background: linear-gradient(to right, var(--color-lt-blue) 30%, var(--color-mint) 100%);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  padding: 1rem 1.5rem;
  border-radius: 50px;
}

.bo-benefit-pill--full {
  grid-column: 1 / -1;
}

@media (max-width: 575.98px) {
  .bo-benefit-pills {
    grid-template-columns: 1fr;
  }
  .bo-benefit-pill--full {
    grid-column: 1;
  }
}

/* ── Enroll phase — vacation photo ──────────────────────────────────────── */

.bo-vacation-photo {
  max-width: 820px;
  border-radius: 20px;
  overflow: hidden;
}

.bo-vacation-photo__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ── 60+ Years stat ──────────────────────────────────────────────────────── */

.bo-sixty-headline {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: 1.5rem;
  background: var(--gradient-mint-ltblue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bo-sixty-num {
  font-size: clamp(4rem, 12vw, 9rem);
  line-height: 0.9;
  display: inline-block;
  vertical-align: middle;
}

/* ── Take the Next Step CTA banner ──────────────────────────────────────── */

.bo-cta-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  overflow: hidden;
  border-radius: 20px;
}

.bo-cta-banner__left {
  position: relative;
  padding: 3.5rem 3rem 3.5rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bo-cta-banner__mark {
  position: absolute;
  top: 0;
  right: 2rem;
  width: clamp(80px, 12vw, 160px);
  height: auto;
  pointer-events: none;
}

.bo-cta-banner__headline {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 4rem);
  color: #fff;
  line-height: 1.05;
  margin-bottom: 1rem;
}

.bo-cta-banner__photo {
  position: relative;
  overflow: hidden;
}

.bo-cta-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

@media (max-width: 767.98px) {
  .bo-cta-banner {
    grid-template-columns: 1fr;
  }
  .bo-cta-banner__photo {
    height: 300px;
  }
  .bo-cta-banner__left {
    padding: 3rem 1.5rem;
  }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.bo-footer {
  padding: 3rem 0 2rem;
  background: #fff;
}

.bo-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.bo-footer__social {
  color: var(--color-lt-blue);
  display: inline-flex;
  font-size: 2rem;
  line-height: 1;
  text-decoration: none;
}

.bo-footer__social:hover {
  color: var(--color-navy);
  text-decoration: none;
}

.bo-footer__logo img {
  height: 80px;
  width: auto;
}

.bo-footer__logos {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.bo-footer__logo-epic {
  height: 60px;
  width: auto;
}

@media (max-width: 767.98px) {
  .bo-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .bo-footer__logos {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

.bo-footer__rule {
  border-color: var(--color-border);
  margin-bottom: 2rem;
}

.bo-footer__disclaimer {
  margin-bottom: 2.5rem;
}

.bo-footer__bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-dark);
  border-top: 1px solid var(--color-border);
  padding-top: 1.25rem;
}

@media (max-width: 575.98px) {
  .bo-footer__bar {
    flex-direction: column;
    gap: 0.4rem;
  }
}

/* ── Tip icon ────────────────────────────────────────────────────────────── */

.bo-tip-icon {
  width: 120px;
  height: 120px;
  object-fit: contain;
}


/* ==========================================================================
   VIDEO LIBRARY PAGES  (/video/*)
   ========================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.video-hero {
  background: var(--gradient-navy-mint);
  padding: 4rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.video-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/halftone-pattern.svg');
  background-repeat: repeat;
  background-size: 400px;
  opacity: 0.06;
  pointer-events: none;
}
.video-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mint);
  margin-bottom: 0.75rem;
}
.video-hero-headline {
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.video-hero-sub {
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: rgba(255,255,255,0.85);
  max-width: 540px;
  margin-bottom: 0;
}

/* ── Video grid ───────────────────────────────────────────────────────────── */
.video-library {
  padding: 3rem 0 4rem;
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 991.98px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* ── Video item: thumb + title ────────────────────────────────────────────── */
.video-item {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.video-item-title {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.75rem;
  margin: 0;
  padding: 0 0.25rem;
}

/* ── CTA bar ──────────────────────────────────────────────────────────────── */
.video-cta {
  background: var(--color-navy);
  padding: 3rem 0;
}
.video-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.video-cta-text {
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--color-white);
  margin: 0;
}
.video-cta-text strong { color: var(--color-mint); }

/* --------------------------------------------------------------------------
   Plan Type Cards  (.plan-type-card)
   Two-column cards for plan category pages (e.g. Fully Insured Group).
   Gradient header, white body with accordion, footer CTA + phone.
   -------------------------------------------------------------------------- */
.plan-type-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(4,39,137,.08);
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
}
.plan-type-card-header {
  background: var(--gradient-navy-mint);
  padding: 1.75rem 2rem 1.5rem;
}
.plan-type-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}
.plan-type-card-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,.9);
  margin: 0;
}
.plan-type-card-body {
  padding: 2rem 2rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.plan-type-card-eyebrow {
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
.plan-type-card-footer {
  padding: 0 2rem 2rem;
}
.plan-type-phone {
  font-weight: 700;
  color: var(--color-navy);
  font-size: 1rem;
  margin-bottom: 0;
}
.plan-type-phone a {
  color: inherit;
  text-decoration: none;
}
.plan-type-phone a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   ICON BADGES  (.wps-icon-badge)
   Two shapes: circle and squircle (WPS asymmetric corners).
   Four sizes: sm 48px · md 64px · lg 80px · xl 96px.
   ═══════════════════════════════════════════════════════════════ */

.wps-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  line-height: 1;
}

/* ── Sizes ── */
.wps-icon-badge--sm { width: 48px;  height: 48px;  font-size: 1.1rem; }
.wps-icon-badge--md { width: 64px;  height: 64px;  font-size: 1.5rem; }
.wps-icon-badge--lg { width: 80px;  height: 80px;  font-size: 1.85rem; }
.wps-icon-badge--xl { width: 96px;  height: 96px;  font-size: 2.2rem; }

/* ── Shapes ── */
.wps-icon-badge--circle   { border-radius: 50%; }
.wps-icon-badge--squircle { border-radius: 0 1.5rem 0 1.5rem; }
.wps-icon-badge--rounded  { border-radius: 1rem; }

/* ── Solid color fills ── */
.wps-icon-badge--navy    { background: var(--color-navy); color: #fff; }
.wps-icon-badge--mint    { background: var(--color-mint); color: var(--color-navy); }
.wps-icon-badge--lt-blue { background: var(--color-lt-blue); color: #fff; }
.wps-icon-badge--purple  { background: var(--color-purple); color: #fff; }
.wps-icon-badge--white   { background: #fff; color: var(--color-navy); box-shadow: 0 2px 12px rgba(4,39,137,0.1); border: 1.5px solid rgba(4,39,137,0.1); }
.wps-icon-badge--light   { background: #EEF2FA; color: var(--color-navy); border: 1.5px solid rgba(4,39,137,0.08); }

/* ── Gradient fills ── */
.wps-icon-badge--grad-navy         { background: linear-gradient(135deg, var(--color-navy), #0055c8); }
.wps-icon-badge--grad-navy-ltblue  { background: var(--gradient-navy-ltblue); }
.wps-icon-badge--grad-navy-mint    { background: var(--gradient-navy-mint); }
.wps-icon-badge--grad-mint-ltblue  { background: linear-gradient(135deg, #6EFCAA 0%, #00AEEF 100%); color: var(--color-navy); }
.wps-icon-badge--grad-purple-ltblue { background: var(--gradient-ltblue-purple); }
.wps-icon-badge--grad-orange-fuchsia { background: linear-gradient(135deg, #F97316 0%, #C3178C 100%); }
.wps-icon-badge--grad-red-berry    { background: var(--gradient-red-berry); }
.wps-icon-badge--grad-ltblue-yellow { background: linear-gradient(135deg, #00AEEF 0%, #F5C518 100%); color: var(--color-navy); }

/* ═══════════════════════════════════════════════════════════════
   ICON LABEL  (.wps-icon-label)  — gradient ring circle + text
   ═══════════════════════════════════════════════════════════════ */

.wps-icon-label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

/* Badge: white circle with gradient stroke ring */
.wps-icon-label-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(#fff, #fff) padding-box,
              var(--wps-ring-gradient) border-box;
  border: 3px solid transparent;
  color: var(--color-navy);
  line-height: 1;
}

/* ── Sizes ── */
.wps-icon-label--sm .wps-icon-label-badge { width: 40px;  height: 40px;  font-size: 1rem;   border-width: 2.5px; }
.wps-icon-label--md .wps-icon-label-badge { width: 56px;  height: 56px;  font-size: 1.35rem; border-width: 3px; }
.wps-icon-label--lg .wps-icon-label-badge { width: 72px;  height: 72px;  font-size: 1.75rem; border-width: 3.5px; }

/* ── Text ── */
.wps-icon-label-text {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-navy);
  white-space: nowrap;
}
.wps-icon-label--sm .wps-icon-label-text { font-size: 0.85rem; }
.wps-icon-label--md .wps-icon-label-text { font-size: 1rem; }
.wps-icon-label--lg .wps-icon-label-text { font-size: 1.2rem; }

/* ── Ring gradient variants ── */
.wps-icon-label--ring-navy-ltblue   { --wps-ring-gradient: linear-gradient(135deg, var(--color-navy), var(--color-lt-blue)); }
.wps-icon-label--ring-navy-mint     { --wps-ring-gradient: linear-gradient(135deg, var(--color-navy), var(--color-mint)); }
.wps-icon-label--ring-mint-ltblue   { --wps-ring-gradient: linear-gradient(135deg, var(--color-mint), var(--color-lt-blue)); }
.wps-icon-label--ring-purple-ltblue { --wps-ring-gradient: linear-gradient(135deg, var(--color-purple), var(--color-lt-blue)); }
.wps-icon-label--ring-orange-fuchsia { --wps-ring-gradient: linear-gradient(135deg, #F97316, #C3178C); }
.wps-icon-label--ring-red-berry     { --wps-ring-gradient: linear-gradient(135deg, var(--color-red), var(--color-berry)); }
.wps-icon-label--ring-ltblue-yellow { --wps-ring-gradient: linear-gradient(135deg, var(--color-lt-blue), #F5C518); }

/* ── Dark variant (on navy bg) ── */
.wps-icon-label--dark .wps-icon-label-badge {
  background: linear-gradient(var(--color-navy), var(--color-navy)) padding-box,
              var(--wps-ring-gradient) border-box;
  color: #fff;
}
.wps-icon-label--dark .wps-icon-label-text { color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   PHOTO PLAN CARDS  (.photo-plan-card)
   Portrait card: full-bleed photo + headline overlay (default),
   navy panel slides up on hover revealing headline, body, CTA.
   ═══════════════════════════════════════════════════════════════ */

.photo-plan-card {
  position: relative;
  border-radius: 0 3rem 0 3rem;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: block;
  cursor: pointer;
}

/* ── Photo fills the full card ── */
.photo-plan-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.5s var(--ease);
}
.photo-plan-card:hover .photo-plan-card-img {
  transform: scale(1.04);
}

/* ── Front: headline over photo, top-left ── */
.photo-plan-card-front {
  position: absolute;
  inset: 0;
  padding: 2rem 2rem 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%);
  z-index: 2;
  transition: opacity 0.35s var(--ease);
}
.photo-plan-card:hover .photo-plan-card-front {
  opacity: 0;
}
.photo-plan-card-front .photo-plan-card-title {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 2vw, 2.25rem);
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ── Back: navy panel slides up from bottom ── */
.photo-plan-card-back {
  position: absolute;
  inset: 0;
  background: var(--color-navy);
  padding: 2rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 3;
  transform: translateY(100%);
  transition: transform 0.45s var(--ease);
}
.photo-plan-card:hover .photo-plan-card-back {
  transform: translateY(0);
}
.photo-plan-card-back .photo-plan-card-title {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 2vw, 2.25rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}
.photo-plan-card-body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.3vw, 1.5rem);
  color: rgba(255,255,255,0.88);
  line-height: 1.25;
  margin: 0 0 auto;
}
.photo-plan-card-btn {
  display: inline-block;
  margin-top: 2rem;
  background: #fff;
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  padding: 0.85rem 2rem;
  border-radius: 50px;
  transition: background 0.2s, color 0.2s;
}
.photo-plan-card-btn:hover {
  background: var(--color-mint);
  color: var(--color-navy);
}

/* ═══════════════════════════════════════════════════════════════
   FULL-WIDTH PHOTO BLEED BANNER  (.wps-photo-banner)
   Full-bleed gradient banner with a photo that overflows above the
   card on desktop (transparent cutout) and pops slightly above it
   on mobile/tablet (cropped rectangular photo, rounded top corners).
   Background bleeds edge-to-edge; content aligns to the site's
   normal 1320px column via a right-padding clamp.

   Markup:
   <div class="wps-photo-banner-wrap">
     <div class="wps-photo-banner">
       <img class="wps-photo-banner-halftone" src="/assets/images/halftone-big-corner-navy.svg" alt="" aria-hidden="true">
       <div class="wps-photo-banner-media"></div>
       <div class="wps-photo-banner-content">
         <h2 class="wps-photo-banner-headline">Headline.</h2>
         <p class="text-light">Copy.</p>
         <a href="#" class="wps-cta-bar-btn mt-4" style="align-self:flex-start;">CTA</a>
       </div>
     </div>
     <picture>
       <source media="(max-width: 991.98px)" srcset="/path/to/mobile-photo.webp">
       <img class="wps-photo-banner-photo" src="/path/to/desktop-cutout.webp" alt="...">
     </picture>
   </div>
   ═══════════════════════════════════════════════════════════════ */
.wps-photo-banner-wrap {
  position: relative;
  padding-top: 2.5rem;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.wps-photo-banner {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: stretch;
  background: linear-gradient(100deg, var(--color-mint) 0%, var(--color-navy) 78%);
}
.wps-photo-banner-media { flex: 0 0 42%; }
.wps-photo-banner-content {
  flex: 1 1 auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem max(3rem, calc((100vw - 1320px) / 2 + 3rem)) 3rem 1.5rem;
}
.wps-photo-banner-headline {
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2.75rem);
  color: #fff;
  line-height: 1.1;
  margin: 0 0 1rem;
}
.wps-photo-banner-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.92);
  max-width: 42ch;
  margin: 0;
}
.wps-photo-banner-photo {
  position: absolute;
  /* Banner background bleeds full-width, but the photo stays
     aligned to where the site's normal container edge would be. */
  left: max(0.75rem, calc((100vw - 1320px) / 2 + 0.75rem));
  top: 0;
  height: 100%;
  width: auto;
  max-width: 48%;
  object-fit: contain;
  object-position: left bottom;
  z-index: 10;
  pointer-events: none;
}
.wps-photo-banner-halftone {
  position: absolute;
  inset: 0;
  width: 70%;
  height: 100%;
  object-fit: cover;
  object-position: left bottom;
  opacity: 0.1;
  /* Source SVG is navy-filled; invert to white so the dots read
     against the card's dark navy side instead of vanishing.
  filter: brightness(0) invert(1); */
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 991.98px) {
  /* Below desktop the card stacks; if the photo is a staged
     rectangular image rather than a transparent cutout, it pops
     slightly above the card with rounded corners instead of the
     desktop cutout's deep bleed. */
  .wps-photo-banner-wrap { padding-top: 1.25rem; }
  .wps-photo-banner { flex-direction: column; min-height: 0; }
  .wps-photo-banner-media { flex: 0 0 240px; }
  .wps-photo-banner-photo {
    left: 0;
    top: -42px;
    height: 280px;
    width: 100%;
    max-width: none;
    transform: none;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 1rem 1rem 0 0;
  }
  .wps-photo-banner-content { padding: 1.5rem; }
}

/* --------------------------------------------------------------------------
   WPS Side Nav  (.wps-side-nav)
   Provider resource section rail: CTA button stack + collapsible section
   list. Pairs with Bootstrap 5 collapse (data-bs-toggle="collapse") — no
   dedicated JS required. Used first on /resources/provider-resources/edi/.
   -------------------------------------------------------------------------- */
.wps-side-nav { position: sticky; top: calc(var(--nav-h) + 1.5rem); }

.wps-side-nav-cta { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }
.wps-side-nav-dd { position: relative; }
.wps-side-nav-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .9rem 1rem;
  border-radius: .5rem;
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  background: var(--color-navy);
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}
.wps-side-nav-cta-btn:hover,
.wps-side-nav-cta-btn:focus { background: var(--color-primary-dark); color: #fff; text-decoration: none; }
.wps-side-nav-cta-btn--active { background: var(--color-cloud-blue); }
.wps-side-nav-cta-btn--active:hover { background: #5a90a4; }
.wps-side-nav-caret { width: 10px; height: 10px; flex-shrink: 0; transition: transform .2s; }
.wps-side-nav-cta-btn[aria-expanded="false"] .wps-side-nav-caret { transform: rotate(180deg); }

.wps-side-nav-dd-panel {
  margin-top: .4rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: .5rem;
  overflow: hidden;
}
.wps-side-nav-dd-panel a {
  display: block;
  padding: .7rem 1rem;
  color: var(--color-navy);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
}
.wps-side-nav-dd-panel a + a { border-top: 1px solid var(--color-border); }
.wps-side-nav-dd-panel a:hover { background: var(--wps-light); text-decoration: none; }

.wps-side-nav-panel { border: 1px solid var(--color-border); border-radius: .5rem; overflow: hidden; background: #fff; }
.wps-side-nav-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.25rem;
  background: #F7F9FD;
  border: none;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-navy);
  text-align: left;
  cursor: pointer;
}
.wps-side-nav-chevron { width: 14px; height: 14px; stroke: var(--wps-blue); stroke-width: 2; fill: none; transition: transform .25s; flex-shrink: 0; }
.wps-side-nav-category[aria-expanded="false"] .wps-side-nav-chevron { transform: rotate(180deg); }

.wps-side-nav-list { list-style: none; margin: 0; padding: .4rem 0; border-top: 1px solid var(--color-border); }
.wps-side-nav-list > li { border-bottom: 1px solid #EEF1F7; }
.wps-side-nav-list > li:last-child { border-bottom: none; }
.wps-side-nav-list a {
  display: block;
  padding: .65rem 1.25rem;
  color: #33415C;
  font-size: .9375rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.wps-side-nav-list a:hover { background: rgba(4,39,137,0.06); color: var(--color-navy); text-decoration: none; }
.wps-side-nav-list a.is-active {
  color: var(--color-navy);
  font-weight: 700;
  background: rgba(4,39,137,0.06);
  box-shadow: inset 3px 0 0 var(--color-navy);
}

.wps-side-nav-sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .65rem 1.25rem;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: #33415C;
  font-size: .9375rem;
  line-height: 1.4;
}
.wps-side-nav-sub-toggle:hover { background: rgba(4,39,137,0.06); color: var(--color-navy); }
.wps-side-nav-sub-chevron { width: 9px; height: 9px; stroke: #6B7A8D; stroke-width: 2.5; fill: none; transform: rotate(-90deg); transition: transform .2s; flex-shrink: 0; }
.wps-side-nav-sub-toggle[aria-expanded="false"] .wps-side-nav-sub-chevron { transform: rotate(0deg); }

.wps-side-nav-sub-list { list-style: none; margin: 0; padding: .25rem 0 .5rem; background: #FAFBFD; }
.wps-side-nav-sub-list a { display: block; padding: .5rem 1.25rem .5rem 2.25rem; color: #5C6B7A; font-size: .875rem; text-decoration: none; }
.wps-side-nav-sub-list a:hover { color: var(--color-navy); background: rgba(4,39,137,0.06); }

@media (max-width: 991.98px) {
  .wps-side-nav { position: static; margin-bottom: 2.5rem; }
}

/* --------------------------------------------------------------------------
   WPS Announcement Carousel  (.wps-announce-carousel)
   Navy card wrapper around Bootstrap 5's native carousel — an eyebrow
   badge, headline and single CTA per slide, light text on navy. Uses
   the Bootstrap JS already loaded site-wide (bootstrap.bundle.min.js),
   no plugin needed. First used at the top of the EDI home page's main
   column.
   -------------------------------------------------------------------------- */
.wps-announce-carousel {
  position: relative;
  background: var(--color-navy);
  border: 1px solid transparent;
  border-radius: 0 2rem 0 2rem;
  padding: 2.25rem 6rem 2.25rem 2.5rem;
  margin-bottom: 3rem;
}
.wps-announce-carousel .carousel-item {
  min-height: 9.5rem;
}
.wps-announce-carousel .carousel-item h3 {
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.wps-announce-carousel-indicators {
  position: absolute;
  top: 1.75rem;
  right: 2.5rem;
  bottom: auto;
  left: auto;
  margin: 0;
  width: auto;
  justify-content: flex-end;
  gap: 6px;
}
.wps-announce-carousel-indicators [data-bs-target] {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.3);
  opacity: 1;
  border: none;
  text-indent: -9999px;
}
.wps-announce-carousel-indicators .active { background-color: var(--color-mint); }

@media (max-width: 575.98px) {
  .wps-announce-carousel { padding: 2rem; }
  .wps-announce-carousel .carousel-item { min-height: 0; }
  .wps-announce-carousel-indicators { position: static; justify-content: flex-start; margin-top: 1rem; }
}