@charset "utf-8";
/*!
===============================================================================
Westmark custom.css — Bootstrap 5 Overrides, Brand Tokens, and Components
Version: 2.0. Website Design and Coding by Avtec Media Group LLC
===============================================================================

TABLE OF CONTENTS
-----------------
CORE STYLES
  1. Charset & Fonts                    (~190)
  2. Accessibility                      (~204)
  3. Resets                             (~296)
  4. Root Variables & Brand Tokens      (~314)
  5. Typography & Text                  (~477)
  6. Context-Aware Card Typography      (~515)

NAVIGATION
  7. Navbar/Topbar                      (~785)
  8. Quick Nav                          (~940)
  9. Mobile Quick Links                 (~1457)
  10. Mobile Main Nav                   (~1481)

COMPONENTS
  11. Buttons (all variants)            (~1119)
  12. Tabs & Pills                      (~1556)
  13. Cards & News                      (~1622)
  14. Rate Cards & Hot Rates            (~1878)
  15. Product Tiles                     (~1893)

LAYOUT
  16. Footer                            (~1945)
  17. Forms                             (~2204)
  18. Tables                            (~2227)
  19. Utilities                         (~2286)
  20. Accessibility/Motion              (~2321)

EXTENDED UTILITIES
  21. Auto Loan Calculator              (~2480)
  22. Typography Utilities              (~2495)
  23. Extended Typography               (~2540)
  24. Timeline                          (~2580)
  25. Tags, Dividers, Copy              (~2700)
  26. Alerts                            (~2790)
  27. Membership Section                (~2900)
  28. Hero Section                      (~2940)
  29. Template Utilities                (~3120)

PAGE-SPECIFIC
  30. Homepage Styles                   (~3160)
  31. Reviews Widget                    (~3900)
  32. Section Backgrounds               (~4335)
  33. Site Search 360                   (~4490)

===============================================================================
BRAND PALETTE (2025)
===============================================================================
Color Name        | Hex       | CSS Variable           | Usage
------------------|-----------|------------------------|---------------------------
Midnight Blue     | #0D3B71   | --wm-midnight          | Primary, headers, buttons
Abyss Blue        | #00185E   | --wm-abyss             | Dark accents, active states
Westmark Blue     | #008CFF   | --wm-westmark-blue     | Links, info, CTAs
Mountain Green    | #00D68F   | --wm-mountain-green    | Success, highlights
Bright Sun        | #FFCE02   | --wm-bright-sun        | Warning, accents
Loblolly          | #C0C7CB   | --wm-loblolly          | Borders, dividers
Red               | #D32F2F   | --wm-red               | Danger, errors

Derived Shades (auto-generated via color-mix):
- --wm-midnight-600, --wm-mountain-green-600/700, --wm-bright-sun-600/700, etc.

===============================================================================
CRITICAL: LINK COLOR SYSTEM
===============================================================================
!! READ THIS BEFORE MODIFYING LINK STYLES !!

Links use EXPLICIT colors, NOT surface variables, to prevent inheritance issues.

DEFAULT BEHAVIOR:
- All links: Westmark Blue (#008CFF) via var(--wm-link)
- Hover state: Midnight Blue (#0D3B71) via var(--wm-link-hover)

DARK BACKGROUND CARDS (white links):
These classes automatically get white links:
- .card.bg-primary, .card.bg-info, .card.bg-abyss
- .card.bg-midnight, .card.bg-westmark-blue
- .card.card-gradient-primary, .card.card-gradient-info
- .card-hero

LIGHT/VIVID BACKGROUND CARDS (dark links):
These classes get Midnight Blue links:
- .card.bg-success, .card.bg-warning
- .card.bg-mountain-green, .card.bg-bright-sun
- .card.card-gradient-success, .card.card-gradient-warning

SOFT BACKGROUND CARDS (blue links - default):
- .bg-soft-primary, .bg-soft-success, .bg-soft-info, .bg-soft-warning
- All use standard Westmark Blue links

TROUBLESHOOTING WHITE/INVISIBLE LINKS:
If links appear white on a light background:
1. Check if parent has .on-dark or dark bg class
2. Add .reset-surface class to the light-background container
3. Or use explicit color: .text-primary on the link

===============================================================================
SURFACE VARIABLE SYSTEM
===============================================================================
Surface variables provide contextual colors for card content:

Variable              | Light Surface    | Dark Surface
----------------------|------------------|------------------
--surface-bg          | #fff             | (brand color)
--surface-text        | #1b2430          | #fff
--surface-heading     | var(--wm-midnight)| #fff
--surface-muted       | #5b6672          | rgba(255,255,255,.82)

IMPORTANT: Link colors are NOT controlled by surface variables.
Link colors are set explicitly per card background type.

Helper Classes:
- .on-dark  : Sets text/heading to white (for dark backgrounds)
- .on-light : Sets text/heading to dark (for light backgrounds)
- .reset-surface : Resets link colors to blue (use on nested light containers)

===============================================================================
IMPLEMENTATION NOTES
===============================================================================
- Use CSS variables only (e.g., var(--wm-midnight)) for colors; avoid hard-coded hex
- .bg-soft-* utilities rely on color-mix(); fallbacks provided via @supports
- Buttons: primary=Midnight, info=Westmark Blue, success=Mountain Green, warning=Bright Sun
- Legacy "nv-*" variables are aliases to "wm-*" tokens for backward compatibility
- All :root blocks are intentionally separated for organization (not a bug)

===============================================================================
BUTTON MAPPING
===============================================================================
Button Class      | Background         | Text Color    | Use Case
------------------|--------------------|--------------|-----------------------
.btn-primary      | Midnight Blue      | White        | Primary actions
.btn-secondary    | Loblolly           | Dark         | Secondary actions
.btn-success      | Mountain Green     | Black        | Positive actions
.btn-warning      | Bright Sun         | Midnight     | Caution actions
.btn-danger       | Red                | White        | Destructive actions
.btn-info         | Westmark Blue      | White        | Informational
.btn-light        | White              | Midnight     | Light backgrounds
.btn-dark         | Abyss Blue         | White        | Dark emphasis

===============================================================================
DEV GUIDANCE
===============================================================================
- When adding a new component, introduce semantic CSS variables at component root
- For gradients, use color-mix() with brand tokens instead of hard-coded stops
- If you must introduce a new color, add a token in :root and document it here
- Asset paths reference ../fonts/ for local fonts
- Adobe Fonts (Scale Variable, Avenir LT Pro) load via Adobe kit

===============================================================================
CSS VALIDATION NOTES (2025)
===============================================================================
- color-mix() uses direct hex values for W3C validator compatibility
- Mask properties use separate -webkit-mask-* and mask-* (not shorthand)
- Bootstrap variables (--bs-success, etc.) replaced with Westmark brand values
- Some warnings expected: scroll-behavior, font-display, CSS custom properties

===============================================================================
FONTS
===============================================================================
Primary Heading: Scale Variable (Adobe) / Scale VF (local fallback)
Primary Body:    Avenir LT Pro (Adobe) / Montserrat (fallback)
Accent/Script:   Born Ready Slanted (local)

Font Stack Priority:
1. Adobe Fonts (scale-variable, avenir-lt-pro)
2. Local fonts (Scale VF, Born Ready Slanted)
3. System fallbacks (Montserrat, system-ui, etc.)

===============================================================================
BROWSER SUPPORT
===============================================================================
- Modern browsers: Full support (Chrome 111+, Firefox 113+, Safari 16.4+)
- color-mix(): Fallbacks provided via @supports for older browsers
- CSS Grid: Fallbacks provided for navbar layout
- Reduced motion: Respects prefers-reduced-motion media query

===============================================================================
FILE STRUCTURE
===============================================================================
~4100 lines organized as:
- Lines 1-190:       Header documentation, TOC, brand reference
- Lines 190-315:     Fonts, accessibility, resets
- Lines 315-515:     Root variables, brand tokens, color utilities
- Lines 515-785:     Card typography, surface system
- Lines 785-1120:    Navigation, mega menu, quick nav
- Lines 1120-1560:   Buttons (all variants), mobile nav
- Lines 1560-1880:   Tabs, pills, cards, rate cards
- Lines 1880-2200:   Product tiles, footer
- Lines 2200-2480:   Forms, tables, utilities, accessibility
- Lines 2480-2790:   Calculator, typography utilities, timeline
- Lines 2790-2940:   Tags, dividers, alerts, membership
- Lines 2940-3160:   Hero section, template utilities
- Lines 3160-3900:   Homepage-specific styles
- Lines 3900-4335:   Reviews widget
- Lines 4335-4500:   Section backgrounds, Site Search 360

===============================================================================
CHANGELOG
===============================================================================
v2.1 (Jan 2026) — Production Audit
- Consolidated 13 scattered :root blocks into organized groups
- Removed duplicate CSS rules:
  • .divider-gradient-right/left, .text-vertical-rl, .bg-nv-navy-12
  • .outlined-heading, --bs-card-box-shadow, heading font-family
  • --card-* variables, --nv-* aliases
- Updated TABLE OF CONTENTS with accurate line numbers (33 sections)
- Reorganized FILE STRUCTURE documentation (~4500 lines)
- Added clear section labels throughout file
- Added cross-reference comments to consolidated definitions

v2.0 (Dec 2025)
- FIXED: White link color bleeding into light backgrounds
- Changed global links from var(--surface-link) to var(--wm-link)
- Added explicit link color rules for dark/light background cards
- Added .reset-surface utility class
- Removed duplicate :root declarations
- Fixed .opacity-8 conflict (renamed .08 version to .opacity-08)
- Removed duplicate .underline-accent and .number-billboard selectors
- Converted Windows line endings to Unix (CRLF → LF)
- Updated documentation

===============================================================================
*/

/*=============================================================================
= Charset & Fonts
=============================================================================*/
html { scroll-behavior: smooth; }
body {
  scroll-behavior: smooth; /* fixed from .body */
  /* Adobe: Avenir LT Pro primary, Montserrat fallback */
  font-family: 'avenir-lt-pro', 'Avenir LT Pro', 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: #373a36;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.7;
}

/*=============================================================================
= Accessibility - Skip to Main Content Link
=============================================================================*/
.skip-to-main {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--wm-midnight);
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 10000;
  border-radius: 0 0 4px 0;
  font-weight: 600;
}
.skip-to-main:focus {
  top: 0;
  outline: 2px solid var(--wm-westmark-blue);
  outline-offset: 2px;
}
body p, ul { font-family: inherit; color: #373a36; line-height: 1.4; }
.lead.text-primary { color: var(--wm-midnight) !important; }
p { line-height: 1.7; }
/* Headings: Scale Extended Medium (local) */
.h1, h1,
.h2, h2,
.h3, h3,
.h4, h4,
.h5, h5,
.h6, h6 { font-family: 'Scale VF', 'avenir-lt-pro', 'Avenir LT Pro', 'Montserrat', sans-serif !important; }

/* UI/Body helpers: Avenir (Adobe) */
.nav .nav-link,
.title-block,
.text-sans,
.text-poppins,
.text-avenir { font-family: 'avenir-lt-pro', 'Avenir LT Pro', 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; }

/* Born Ready Slanted (local) */
@font-face{
  font-family:'born-ready-slanted';
  src: url('../fonts/BornReadySlanted.woff2') format('woff2'),
       url('../fonts/BornReadySlanted.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
/* =========================================================
   Local Scale Variable Font — Extended Medium
   ========================================================= */

/* Local Scale — Extended Medium */
@font-face {
  font-family: 'Scale VF';
  src: url('../fonts/Scale-Extended Medium.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Note: Heading font-family defined above (~line 228) */

/* =======================================================================
   HERO SYSTEM — Typography + Layout + Animation
   =======================================================================
   
   HOW IT WORKS
   -------------------------------------------------------------------------
   The hero uses a CSS Grid stacking technique instead of fixed-height +
   absolute positioning. This lets the hero's CONTENT determine its 
   minimum height, so text and CTA buttons never get clipped regardless 
   of how much content is added or what device is viewing it.

   GRID STACKING:
   - .hero-container uses display:grid with a single cell
   - All .heroitem slides share grid-area: 1/1 (same cell = overlap)
   - The ACTIVE slide (display:block) pushes the container height
   - Hidden slides (display:none) don't participate in sizing
   - The mountain divider SVG uses align-self:end to anchor at bottom

   SIZING STRATEGY:
   Desktop (≥768px):
   - min-height: min(75vh, 600px) sets the PREFERRED height
   - ALL slides forced to display:flex (overrides JS display:none)
     so the tallest slide sets a consistent container height
   - Inactive slides hidden with opacity:0 only (stay in grid flow)
   - Scoped to #heropromo so inner page heroes are not affected
   
   Mobile (<768px):
   - min-height: auto — fully content-driven, no wasted vertical space
   - JS display:none works normally — only active slide sizes container
   - Content anchors to flex-end so CTA sits consistently above divider
   - Taller content grows upward, shorter content = shorter hero

   CONTENT PADDING (bottom) keeps the CTA above the mountain divider:
   - Desktop: 6rem
   - Tablet:  5.5rem
   - Mobile:  5rem
   - Small:   4.5rem

   GRADIENT + TOPO PATTERN:
   - ::before = animated gradient overlay (z-index:1)
   - ::after  = topographic map pattern (z-index:2)
   - Both animate from width:0 → 58% on load
   - On mobile (≤768px), gradient stretches to 100% width

   JAVASCRIPT DEPENDENCY:
   - The hero randomizer JS sets display:block/none and opacity
   - JS adds .active class and .divider-in to the container
   - No JS changes needed for this CSS update

   CUSTOMIZATION:
   - Per-slide focal point: set --hero-x / --hero-y on the .heroitem
   - Default focal point: 70% 50% (right-biased, gradient covers left)
   - Born Ready script font scales via clamp() — no breakpoint needed
   
   ======================================================================= */

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

/* Eyebrow label above the h1 */
.hero-eyebrow {
  color: var(--wm-mountain-green, #00D68F);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

/* Main hero heading — fluid from 2.25rem (360px) to 3rem (1200px+) */
.heroh1 {
  font-family: 'Scale VF', 'avenir-lt-pro', 'Avenir LT Pro', 'Montserrat', sans-serif !important;
  font-weight: 600;
  font-size: clamp(2.25rem, 3vw + 1rem, 3rem);
  line-height: 1 !important;
  color: var(--wm-abyss);
}

/* Global h2 font — Scale VF across all sections */
h2 {
  font-family: 'Scale VF', 'avenir-lt-pro', 'Avenir LT Pro', 'Montserrat', sans-serif !important;
}

/* Born Ready script font — used for hero taglines */
.text-born-ready,
.font-born-ready { font-family:'born-ready-slanted','Born Ready Slanted','born-ready','Born Ready', cursive !important; }

/* Adobe kit utility class mappings (fallbacks if kit classnames are used in markup) */
.tk-scale-variable{ font-family: 'Scale VF', 'avenir-lt-pro', 'Avenir LT Pro', 'Montserrat', sans-serif !important; }
.tk-avenir-lt-pro{ font-family: 'avenir-lt-pro', 'Avenir LT Pro', 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; }
.tk-montserrat{ font-family: 'Montserrat', 'avenir-lt-pro', 'Avenir LT Pro', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; }
.tk-born-ready-slanted{ font-family:'born-ready-slanted','Born Ready Slanted','born-ready','Born Ready', cursive !important; }

/* Born Ready sizing inside hero — fluid from 3.5rem to 6rem */
.hero-gradient .hero-script,
.hero-gradient .tk-born-ready-slanted {
  font-size: clamp(3.5rem, 5.5vw + 1rem, 6rem);
  line-height: .9;
  margin-bottom: .75rem;
}
@media (max-width: 576px) {
  .hero-gradient .hero-script,
  .hero-gradient .tk-born-ready-slanted {
    font-size: clamp(3.2rem, 9.5vw, 4.9rem);
    line-height: 1;
    margin-bottom: .65em;
  }
}

/* ---------------------------------------------------------------------------
   Hero Container — CSS Grid stacking (replaces fixed height + absolute)
   
   Why grid? All slides share the same cell. The visible slide's content
   determines the container height. Hidden slides don't participate.
   Result: the hero grows to fit any amount of text + buttons.
   --------------------------------------------------------------------------- */
.hero-container{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  min-height: min(75vh, 600px);       /* preferred size; content can push taller */
  overflow: clip;                      /* clips gradient paint, doesn't trap scrollbar */
}
/* Override the Bootstrap .overflow-hidden utility on the HTML element */
.hero-container.overflow-hidden{ overflow: clip !important; }

@media (min-width: 1024px) and (max-height: 820px) {
  /* iPad Pro landscape & short viewports */
  .hero-container{ min-height: min(68vh, 520px); }
}

/* Hide all slides while JS picks which one to show */
.hero-container.loading .heroitem{ display:none !important; opacity:0 !important; }

/* ---------------------------------------------------------------------------
   Hero Slides — All overlap in grid cell 1/1
   
   DESKTOP (≥768px): All .hero-rotating slides forced to display:flex so
   the tallest slide sets a consistent container height. Inactive slides
   hidden with opacity:0 only (they stay in grid flow for sizing).
   Scoped to .hero-rotating so inner page heroes are not affected.
   
   MOBILE (<768px): min-height removed so container is fully content-driven.
   JS display:none works normally — only active slide sizes the container.
   Content anchors to flex-end so every slide's CTA sits at a consistent
   distance above the mountain divider. Taller content grows upward.
   Also scoped to .hero-rotating so inner pages keep default behavior.
   --------------------------------------------------------------------------- */
.heroitem{
  grid-area: 1 / 1;                   /* stack all slides in same cell */
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity .8s ease;
  /* Background image defaults */
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: var(--hero-x, 70%) var(--hero-y, 50%) !important;
  background-attachment: scroll;       /* fixes iPad/WebKit rendering quirk */
}
.heroitem.active{ opacity: 1; }

/* Desktop: all homepage slides stay in grid so tallest sets consistent height */
@media (min-width: 768px){
  .hero-rotating .heroitem{
    display: flex !important;          /* override JS inline display:none */
  }
  .hero-rotating .heroitem:not(.active){
    opacity: 0 !important;
    pointer-events: none;              /* prevent clicks on invisible slides */
  }
}

/* Mobile: content-driven height, content anchors above mountain divider */
@media (max-width: 767px){
  .hero-rotating{
    min-height: auto;                  /* remove forced height — content decides */
  }
  .hero-rotating .heroitem{
    align-items: flex-end;             /* CTA anchors above divider, content grows up */
  }
}

/* Mobile: content-driven hero height for internal pages — shows content below fold */
@media (max-width: 767px){
  .hero-container:not(.hero-rotating){
    min-height: auto;                  /* content-driven, no clipping */
  }
  .hero-container:not(.hero-rotating) .heroitem{
    align-items: flex-end;             /* anchor content above mountain divider */
  }
}

/* Mountain divider sits in the same grid cell, pinned to bottom */
.hero-container > .shape{
  grid-area: 1 / 1;
  align-self: end;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Content Spacing
   
   padding-bottom on the content wrapper guarantees the CTA button
   always clears the mountain ridge SVG divider at every breakpoint.
   --------------------------------------------------------------------------- */
.heroitem .content-space-t-lg-4,
.heroitem .content-space-t-2{
  padding-bottom: 6rem !important;
}

/* Text column: 58% width on desktop to match the gradient coverage */
@media (min-width: 992px){
  .heroitem > .container .col-lg-6,
  .heroitem > .container .col-xl-7,
  .heroitem > .container .hero-left-col{
    flex: 0 0 58% !important;
    max-width: 58% !important;
  }
}

/* Container padding — aligns left edge with site grid */
.heroitem > .container{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 10% !important;
  padding-right: 0 !important;
  position: relative;
  z-index: 3;                         /* above gradient + pattern layers */
  pointer-events: none;               /* pass clicks through to hero bg (CMS image editing) */
}
.heroitem .hero-left-col{
  pointer-events: auto;               /* restore interactivity on text/buttons column */
}

/* ---------------------------------------------------------------------------
   Tablet (577px – 767px)
   Fluid scaling prevents content clipping on iPads and mid-range devices.
   Note: min-height:auto from the ≤767px .hero-rotating rule above applies
   to the homepage. Inner page heroes keep min-height: min(75vh, 600px).
   --------------------------------------------------------------------------- */
@media (min-width: 577px) and (max-width: 767px){
  .heroitem > .container{
    padding-left: 6% !important;
    padding-right: 4% !important;
  }
  .heroitem .content-space-t-lg-4,
  .heroitem .content-space-t-2{
    padding-top: 4rem !important;
    padding-bottom: 5.5rem !important;
  }
  .heroh1{ font-size: clamp(2rem, 5vw, 3rem); }
  .hero-gradient .hero-script,
  .hero-gradient .tk-born-ready-slanted{
    font-size: clamp(3.5rem, 8vw, 5.5rem);
    line-height: .95;
    margin-bottom: .6rem;
  }
  .heroitem .lead{ font-size: clamp(.95rem, 2vw, 1.15rem); }
}

/* ---------------------------------------------------------------------------
   Tablet–Desktop (768px – 991px)
   Same fluid scaling but min-height is active (consistent height mode).
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px){
  .heroitem > .container{
    padding-left: 6% !important;
    padding-right: 4% !important;
  }
  .heroitem .content-space-t-lg-4,
  .heroitem .content-space-t-2{
    padding-top: 4rem !important;
    padding-bottom: 5.5rem !important;
  }
  .heroh1{ font-size: clamp(2rem, 5vw, 3rem); }

  .hero-gradient .hero-script,
  .hero-gradient .tk-born-ready-slanted{
    font-size: clamp(3.5rem, 8vw, 5.5rem);
    line-height: .95;
    margin-bottom: .6rem;
  }
  .heroitem .lead{ font-size: clamp(.95rem, 2vw, 1.15rem); }
}

/* ---------------------------------------------------------------------------
   Mobile (≤576px)
   Note: min-height:auto already set by the ≤767px .hero-rotating rule.
   Inner page heroes keep their default min-height at this breakpoint.
   --------------------------------------------------------------------------- */
@media (max-width: 576px){
  .heroitem{ --hero-x: 70%; --hero-y: 60%; }
  .heroitem > .container{
    padding-left: 24px !important;
    padding-right: 16px !important;
  }
  .heroitem .content-space-t-lg-4,
  .heroitem .content-space-t-2{
    padding-top: 4rem !important;
    padding-bottom: 7rem !important;
  }
  /* Internal pages use content-space-t-1 — ensure same bottom clearance */
  .heroitem .content-space-t-lg-1,
  .heroitem .content-space-t-1{
    padding-bottom: 7rem !important;
  }
}

/* Small phones (≤375px) — tighter spacing */
@media (max-width: 375px){
  .heroitem .content-space-t-lg-4,
  .heroitem .content-space-t-2{
    padding-top: 3rem !important;
    padding-bottom: 4.5rem !important;
  }
  .heroh1{ font-size: 2rem; }
}

/* ---------------------------------------------------------------------------
   Gradient Overlay + Topo Pattern
   
   ::before = blue gradient (z-index:1) — animates from left to 58% width
   ::after  = topographic map texture (z-index:2) — fades in with gradient
   Both use mask-image to feather their right edge on desktop.
   On mobile (≤768px), the gradient stretches to 100% for full coverage.
   --------------------------------------------------------------------------- */
.hero-gradient{ position: relative; overflow: hidden; }
.hero-gradient::before,
.hero-gradient::after{
  content:"";
  position:absolute; inset:0;
  width:0; height:100%;
  pointer-events:none;
  left:0; right:auto;                 /* prevents tablet layout shift during animation */
}
.hero-gradient::before{
  z-index:1;
  background: linear-gradient(
    to right,
    var(--wm-abyss, #00236E) 0%,
    rgba(0, 35,110,.98) 14%,
    rgba(0, 60,150,.95) 32%,
    rgba(0, 95,185,.88) 52%,
    rgba(0,125,215,.70) 70%,
    rgba(0,140,255,.35) 88%,
    rgba(0,140,255,0) 100%
  );
  -webkit-mask-image: linear-gradient(to right, #000 86%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, #000 86%, rgba(0,0,0,0) 100%);
  animation: heroGradientIn .9s ease-out forwards;
}
.hero-gradient::after{
  z-index:2;
  background-image:url("https://www.westmark.org/assets/img/backgrounds/hero.map.png");
  background-repeat:repeat; background-size:400px 400px; background-position:0 0;
  -webkit-mask-image: linear-gradient(to right, #000 82%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, #000 82%, rgba(0,0,0,0) 100%);
  opacity:0;
  animation: heroPatternGrow .9s ease-out forwards, heroPatternNudge 1.2s ease-out .25s forwards;
}

/* Mobile: gradient goes full-width for better text readability */
@media (max-width: 768px){
  .hero-gradient::before{
    -webkit-mask-image: none;
    mask-image: none;
    animation: heroGradientInMobile .7s ease-out forwards;
  }
  .hero-gradient::after{
    animation: heroPatternGrowMobile .7s ease-out forwards, heroPatternNudge 1.2s ease-out .25s forwards;
  }
}

/* ---------------------------------------------------------------------------
   Mountain Divider — synced with hero fade-in via JS .divider-in class
   --------------------------------------------------------------------------- */
.shape.shape-bottom{ line-height: 0; }
.shape.shape-bottom svg{
  opacity: 0;
  transform: translateY(-8px) scale(-1,-1);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}
.hero-container.divider-in .shape.shape-bottom svg{
  opacity: 1;
  transform: translateY(0) scale(-1,-1);
}
@media (max-width: 576px){
  .shape.shape-bottom{ margin-bottom: -4.5rem !important; }
  .hero-container.divider-in .shape.shape-bottom svg{ height: 56px; }
}
@media (max-width: 360px){
  .shape.shape-bottom{ margin-bottom: -2.25rem !important; }
  .hero-container.divider-in .shape.shape-bottom svg{ height: 50px; }
}

/* ---------------------------------------------------------------------------
   Keyframes
   --------------------------------------------------------------------------- */
@keyframes heroGradientIn{ 0%{ width:0; opacity:0; } 100%{ width:58%; opacity:1; } }
@keyframes heroPatternGrow{ 0%{ width:0; opacity:0; } 100%{ width:58%; opacity:.12; } }
@keyframes heroPatternNudge{ 0%{ background-position:0 0; } 100%{ background-position:18px 12px; } }
@keyframes heroGradientInMobile{ 0%{ width:0; } 100%{ width:100%; } }
@keyframes heroPatternGrowMobile{ 0%{ width:0; opacity:0; } 100%{ width:58%; opacity:.10; } }

/* ---------------------------------------------------------------------------
   Reduced Motion — respects user accessibility preference
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .hero-gradient::before, .hero-gradient::after{ animation: none !important; width:58%; opacity:1; }
  .shape.shape-bottom svg{ transition: none !important; opacity: 1; transform: scale(-1,-1); }
}

/* AOS: prevent fade-left/fade-right horizontal overflow on mobile (known AOS bug).
   !important needed because aos.css loads after custom.css in the template. */
@media (max-width: 991.98px){
  [data-aos="fade-left"],
  [data-aos="fade-right"]{ transform: translate3d(0, 30px, 0) !important; }
  [data-aos="fade-left"].aos-animate,
  [data-aos="fade-right"].aos-animate{ transform: translateZ(0) !important; }
}

/* Bootstrap large gutter overflow fix: g-4+ gutters exceed container padding on phones.
   Caps --bs-gutter-x to 1.5rem so row negative margins don't exceed container padding. */
@media (max-width: 575.98px){
  .row[class*="g-4"], .row[class*="gx-4"],
  .row[class*="g-5"], .row[class*="gx-5"],
  .row[class*="g-6"], .row[class*="gx-6"]{ --bs-gutter-x: 1.5rem; }
}

/*=============================================================================
= Resets
=============================================================================*/
img { max-width: 100%; height: auto; display: block; }
.wellness-title img{ display:inline-block; vertical-align:middle; margin-right:.5rem; }
.no-bg { background: none !important; }
.min-vh-md-80 { min-height: 70vh; }

/*=============================================================================
Nav adjustments
=============================================================================*/
/*removes theme chevron from topbar*/
.nav-link.dropdown-toggle::after {
  display: none !important;
}
.navbar-light .navbar-nav .nav-link {
    color: #0D3B71!important;
}
/*=============================================================================
= Tokens/Colors
=============================================================================*/
:root{
  /* ============================================================================
     Westmark Brand Color Tokens
     ============================================================================
     Base colors defined first, then derived shades using color-mix()
     Note: Using direct hex values in color-mix() for validator compatibility
     ============================================================================ */
  
  /* Base brand colors */
  --wm-midnight: #0D3B71;             /* Midnight Blue */
  --wm-abyss: #00185E;                /* Abyss Blue */
  --wm-mountain-green: #00D68F;       /* Mountain Green */
  --wm-bright-sun: #FFCE02;           /* Bright Sun */
  --wm-westmark-blue: #008CFF;        /* Westmark Blue */
  --wm-red: #D32F2F;                  /* Material-ish Red 700 (accessible danger) */
  --wm-loblolly: #C0C7CB;             /* Loblolly (soft borders, dividers) */
  
  /* Derived shades using color-mix() - using direct hex values for validation */
  --wm-midnight-600: color-mix(in srgb, #0D3B71 60%, #00185E);
  --wm-mountain-green-600: color-mix(in srgb, #00D68F 85%, black);
  --wm-mountain-green-700: color-mix(in srgb, #00D68F 70%, black);
  --wm-bright-sun-600: color-mix(in srgb, #FFCE02 85%, black);
  --wm-bright-sun-700: color-mix(in srgb, #FFCE02 70%, black);
  --wm-red-600: color-mix(in srgb, #D32F2F 85%, black);
  --wm-red-700: color-mix(in srgb, #D32F2F 70%, black);
  --wm-loblolly-600: color-mix(in srgb, #C0C7CB 85%, black);
  --wm-loblolly-700: color-mix(in srgb, #C0C7CB 70%, black);

  /* Neutral colors */
  --wm-white: #fff;
  --wm-black: #000;
  --wm-white-70: rgba(255,255,255,.7);
  --wm-white-25: rgba(255,255,255,.25);
  --wm-white-15: rgba(255,255,255,.15);

  /* Utility tokens */
  --wm-focus-rgb: 0,140,255;          /* Westmark Blue glow */
  --wm-link: var(--wm-westmark-blue);
  --wm-link-hover: var(--wm-midnight);
  --wm-soft-border: #C0C7CB;          /* Loblolly */

  /* Compat mapping removed (all references migrated to --wm-*) */

  /* Legacy compat (to be removed) */
  --primary-color: var(--wm-midnight);
  --secondary-color: var(--wm-mountain-green);
}

/* Override Bootstrap --bs-info to Westmark Blue (#008CFF) sitewide */
:root{
  --bs-info: var(--wm-westmark-blue);
  --bs-info-rgb: 0, 140, 255;
}

/* Compat: alternate brand variables and generic tokens */
:root{
  --ink: #1F2A37;
  --brand-blue: var(--wm-westmark-blue);
  --brand-orange: var(--wm-bright-sun);
  --brand-mint: var(--wm-mountain-green);
  --brand-navy: var(--wm-midnight);
  --shadow-light: rgba(13, 59, 113, 0.08);
  --shadow-medium: rgba(13, 59, 113, 0.15);
  --shadow-strong: rgba(13, 59, 113, 0.25);
}

/* ---------- Card Semantic Tokens ---------- */
:root{
  --card-primary:  var(--wm-midnight);
  --card-success:  var(--wm-mountain-green);
  --card-warning:  var(--wm-bright-sun);
  --card-info:     var(--wm-westmark-blue);
  --card-radius:   16px;
  --soft-tint:     12%;   /* background tint strength */
  --soft-text:     #1b2430;
}

/* ---------- Legacy Compatibility Aliases (nv-* tokens) ---------- */
:root{
  --nv-orange: var(--wm-bright-sun);
  --nv-white-70: rgba(255,255,255,.7);
  --nv-white-15: rgba(255,255,255,.15);
  --nv-white-25: rgba(255,255,255,.25);
  --nv-navy: var(--wm-midnight);
  --nv-persimmon: var(--wm-bright-sun);
  --nv-mint: var(--wm-mountain-green);
  --nv-accent-blue: var(--wm-westmark-blue);
}

/* ---------- UI Component Tokens ---------- */
:root{
  --bs-card-box-shadow: 0 6px 20px 0 rgba(0,0,0,.19), 0 8px 17px 0 rgba(0,0,0,.20);
}

/* ---------- Membership Section Tokens (ms-*) ---------- */
:root{
  --ms-persimmon: #FFCE02;
  --ms-persimmon-600: color-mix(in srgb, #FFCE02 85%, black);
  --ms-navy: #0D3B71;
  --ms-mint: #00D68F;
  --ms-ink: #1F2A37;
  --ms-card-radius: 1.25rem;
}

/* Help cards brand background helpers */
.bg-brand-blue{ background: var(--brand-blue) !important; }
.bg-brand-orange{ background: var(--brand-orange) !important; }
.bg-brand-mint{ background: var(--brand-mint) !important; }
.bg-brand-navy{ background: var(--brand-navy) !important; }
.on-light{ color: var(--ink); }
.on-dark{ color:#fff; }
.on-dark .btn-link{ color:#fff; }

/* Text/link helpers aligned to brand */
a[href]:not(.btn):not(.btn-link):not([role="button"]) { 
  color: var(--wm-link); /* FIXED: was surface-link causing white text */
  text-decoration-color: currentColor;
  text-decoration-thickness: .08em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: auto;
}
a[href]:not(.btn):not(.btn-link):not([role="button"]):hover,
a[href]:not(.btn):not(.btn-link):not([role="button"]):focus-visible { 
  color: var(--wm-link-hover); /* FIXED: was surface-link-hov causing white text */
  text-decoration: underline;
}
a[href]:not(.btn):not(.btn-link):not([role="button"]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.disclosure {font-size: .875rem; line-height: 1.4; color:#5a6573 !important;}
.text-primary { color: var(--wm-midnight) !important; }
.text-success { color: var(--wm-mountain-green) !important; }
.text-bright-sun { color: var(--wm-bright-sun) !important; }
.text-mountain-green { color: var(--wm-mountain-green) !important; }
.text-midnight, .text-abyss { color: var(--wm-midnight) !important; }
.text-lightblue { color: #008CFF; }

/* Background helpers aligned to brand */
.bg-primary { background: var(--wm-midnight) !important; }
.bg-purple, .bg-footer-purple { background-color: var(--wm-midnight) !important; }
.bg-dark { background: #6C6D71 !important; } /* legacy neutral */
.bg-alert { background-color: #C2E7D9; }      /* mint-tinted alert */

/* Westmark brand utilities */
.bg-midnight{ background-color: var(--wm-midnight) !important; color:#fff !important; }
.text-midnight{ color: var(--wm-midnight) !important; }
.bg-abyss{ background-color: var(--wm-abyss) !important; color:#fff !important; }
.text-abyss{ color: var(--wm-abyss) !important; }
.bg-westmark-blue{ background-color: var(--wm-westmark-blue) !important; color:#fff !important; }
.text-westmark-blue{ color: var(--wm-westmark-blue) !important; }
.bg-mountain-green{ background-color: var(--wm-mountain-green) !important; color: var(--wm-midnight) !important; }
.text-mountain-green{ color: var(--wm-mountain-green) !important; }
.bg-bright-sun{ background-color: var(--wm-bright-sun) !important; color: #111 !important; }
.text-bright-sun{ color: var(--wm-bright-sun) !important; }

/* End legacy aliases: using new Westmark utilities exclusively */

/* Soft brand tints */
.bg-soft-primary { background-color: color-mix(in srgb, var(--wm-midnight) 15%, white) !important; }
.bg-soft-success { background-color: color-mix(in srgb, var(--wm-mountain-green) 15%, white) !important; }
.bg-soft-info    { background-color: color-mix(in srgb, var(--wm-westmark-blue) 15%, white) !important; }
.bg-soft-body    { background-color: color-mix(in srgb, var(--wm-midnight) 4%, white) !important; }
.bg-soft-warning { background-color: color-mix(in srgb, var(--wm-bright-sun) 15%, white) !important; }
.bg-soft-gray    { background-color: rgba(233,236,239,.5); }

/*=============================================================================
= Typography and Text
=============================================================================*/
.fs-1{font-size:3.2rem!important} 
.fs-2{font-size:3rem!important}
.fs-3{font-size:2.56rem!important}
.fs-4{font-size:2.048rem!important}
.fs-5{font-size:1.6384rem!important}
.fs-6{font-size:1.31072rem!important}
.fs-7{font-size:1.048576rem!important}
.fs-8{font-size:.75rem!important}

.h1, h1 { font-weight: 500; color: var(--wm-abyss); line-height: 1 !important; font-variation-settings: 'wght' 700; }
.h2, h2 { color: var(--wm-abyss); font-weight:700; font-size:clamp(1.75rem, 4vw + 1rem, 3.5rem); line-height:1.1; }
.h3, h3 { color: var(--wm-abyss); font-weight:500; font-size:2rem; font-variation-settings: 'wght' 500; }
.h4, h5, h6, .h4, .h5, .h6 { line-height:1.2!important; margin-bottom:.5rem; }
.lead, .lead a { 
  font-family: 'montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 1.125rem; 
  font-weight: 400; 
  line-height: 1.7; 
  color: var(--wm-midnight); 
}
.text-regular { font-size:13px; }
.text-body { color:#444 !important; }
.text-charcoal { color:#343f4c !important; }
.text-slate { color:#394046; }
.text-tiny { font-size:.65rem; }
.text-uppercase{text-transform:uppercase!important}
.text-capitalized{text-transform:capitalize!important}

/* Gradients for text using brand */
.text-gradient-blue{
  background: linear-gradient(135deg, var(--wm-midnight) 0%, var(--wm-westmark-blue) 70%, var(--wm-abyss) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/*=============================================================================
= Context-Aware Typography for Cards (utility-friendly)
= Cards define "surface" vars; type inside inherits them without !important.
=============================================================================*/

/* 1) Default surface tokens (site-level) */
:root{
  --surface-bg:       #fff;
  --surface-text:     #222;           /* body copy on light */
  --surface-heading:  var(--wm-midnight); /* headings on light */
  --surface-muted:    #5b6672;
  --surface-link:     var(--wm-link);
  --surface-link-hov: var(--wm-link-hover);
}

/* 2) Cards set their own surface context (base = light) */
.card{
  --surface-bg:       #fff;
  --surface-text:     #1b2430;
  --surface-heading:  #0e1a22;
  --surface-muted:    #5b6672;
  --surface-link:     var(--wm-link);
  --surface-link-hov: var(--wm-link-hover);
}

/* 3) Full-color brand cards (dark or vivid backgrounds) */
.card.bg-primary,
.card.card-gradient-primary{
  --surface-bg:      var(--wm-midnight);
  --surface-text:    #ffffff;
  --surface-heading: #ffffff;
  --surface-muted:   rgba(255,255,255,.82);
  --surface-link:    rgba(255,255,255,.94);
  --surface-link-hov:#fff;
}
.card.bg-warning,
.card.card-gradient-warning{
  --surface-bg:      var(--wm-bright-sun);
  --surface-text:    #ffffff;
  --surface-heading: #ffffff;
  --surface-muted:   rgba(255,255,255,.85);
  --surface-link:    rgba(255,255,255,.94);
  --surface-link-hov:#fff;
}
.card.bg-info,
.card.card-gradient-info{
  --surface-bg:      var(--wm-westmark-blue);
  --surface-text:    #ffffff;
  --surface-heading: #ffffff;
  --surface-muted:   rgba(255,255,255,.85);
  --surface-link:    rgba(255,255,255,.94);
  --surface-link-hov:#fff;
}
/* Mint stays readable with dark ink */
.card.bg-success,
.card.card-gradient-success{
  --surface-bg:      var(--wm-mountain-green);
  --surface-text:    #0b1a26;
  --surface-heading: #0b1a26;
  --surface-muted:   rgba(11,26,38,.75);
  --surface-link:    #0b1a26;
  --surface-link-hov:#071018;
}

/* 4) Soft brand cards (tinted light backgrounds) */
.bg-soft-primary,
.card-header-soft-primary{
  --surface-bg:      color-mix(in srgb, var(--wm-midnight) 12%, #fff);
  --surface-text:    #1b2430;
  --surface-heading: var(--wm-midnight);
}
.bg-soft-success,
.card-header-soft-success{
  --surface-bg:      color-mix(in srgb, var(--wm-mountain-green) 12%, #fff);
  --surface-text:    #1b2430;
  --surface-heading: var(--wm-midnight);
}
.bg-soft-warning,
.card-header-soft-warning{
  --surface-bg:      color-mix(in srgb, var(--wm-bright-sun) 12%, #fff);
  --surface-text:    #1b2430;
  --surface-heading: var(--wm-midnight);
}
.bg-soft-info,
.card-header-soft-info{
  --surface-bg:      color-mix(in srgb, var(--wm-westmark-blue) 12%, #fff);
  --surface-text:    #1b2430;
  --surface-heading: var(--wm-midnight);
}

/* Fallback for older browsers without color-mix() */
@supports not (background: color-mix(in srgb, #000 10%, #fff)){
  .bg-soft-primary,
  .card-header-soft-primary{ --surface-bg: rgba(13,62,91,.07); }
  .bg-soft-success,
  .card-header-soft-success{ --surface-bg: rgba(127,168,149,.10); }
  .bg-soft-warning,
  .card-header-soft-warning{ --surface-bg: rgba(243,111,66,.10); }
  .bg-soft_info,
  .card-header-soft-info{    --surface-bg: rgba(0,140,255,.10); }
}

/* 5) Typography inside cards inherits surface colors (utilities can override) */

/* Headings — only when no text-* utility present */
.card :is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6):not([class*="text-"]){
  color: var(--surface-heading);
}

/* Body copy — skip badges/buttons/bg-* chips and text-* utilities */
.card :is(
  p, .card-text, .lead, li, small, .muted, .text-muted,
  span:not(.badge):not(.btn):not([class*="bg-"])
):not([class*="text-"]) {
  color: #5a6573; /* Darker version of #C0C7CB */
  opacity: 1;
}

.card .lead:not([class*="text-"]){ color: var(--surface-text); }
.card .lead a{ color: var(--wm-link); /* FIXED: was surface-link causing white text */ }

/* Utilities that previously forced dark text—let them follow surface by default */
.card .text-body,
.card .text-charcoal,
.card .text-slate{ color: var(--surface-text); }

/* New: exclude .btn so real buttons keep their own colors */
/* DEFAULT: All card links use blue (wm-link) */
.card a:not(.btn){
  color: var(--wm-link);
  text-decoration-color: currentColor;
}
.card a:not(.btn):hover{
  color: var(--wm-link-hover);
}

/* DARK BACKGROUND CARDS: Override to white links */
/* Only these specific dark-background cards should have white links */
.card.bg-primary a:not(.btn),
.card.bg-info a:not(.btn),
.card.bg-abyss a:not(.btn),
.card.bg-midnight a:not(.btn),
.card.bg-westmark-blue a:not(.btn),
.card.card-gradient-primary a:not(.btn),
.card.card-gradient-info a:not(.btn),
.card-hero a:not(.btn) {
  color: rgba(255,255,255,.94);
}
.card.bg-primary a:not(.btn):hover,
.card.bg-info a:not(.btn):hover,
.card.bg-abyss a:not(.btn):hover,
.card.bg-midnight a:not(.btn):hover,
.card.bg-westmark-blue a:not(.btn):hover,
.card.card-gradient-primary a:not(.btn):hover,
.card.card-gradient-info a:not(.btn):hover,
.card-hero a:not(.btn):hover {
  color: #fff;
}

/* SUCCESS/WARNING cards use dark text links */
.card.bg-success a:not(.btn),
.card.bg-warning a:not(.btn),
.card.bg-mountain-green a:not(.btn),
.card.bg-bright-sun a:not(.btn),
.card.card-gradient-success a:not(.btn),
.card.card-gradient-warning a:not(.btn) {
  color: var(--wm-midnight);
}
.card.bg-success a:not(.btn):hover,
.card.bg-warning a:not(.btn):hover,
.card.bg-mountain-green a:not(.btn):hover,
.card.bg-bright-sun a:not(.btn):hover,
.card.card-gradient-success a:not(.btn):hover,
.card.card-gradient-warning a:not(.btn):hover {
  color: var(--wm-abyss);
}

/* Keep link-style buttons behaving like links - use explicit colors */
.card .btn-link{
  color: var(--wm-link);
  text-decoration-color: currentColor;
}
.card .btn-link:hover{
  color: var(--wm-link-hover);
}

/* Dark card btn-link overrides */
.card.bg-primary .btn-link,
.card.bg-info .btn-link,
.card.bg-abyss .btn-link,
.card.bg-midnight .btn-link,
.card.card-gradient-primary .btn-link,
.card.card-gradient-info .btn-link,
.card-hero .btn-link {
  color: rgba(255,255,255,.94);
}
.card.bg-primary .btn-link:hover,
.card.bg-info .btn-link:hover,
.card.bg-abyss .btn-link:hover,
.card.bg-midnight .btn-link:hover,
.card.card-gradient-primary .btn-link:hover,
.card.card-gradient-info .btn-link:hover,
.card-hero .btn-link:hover {
  color: #fff;
}


/* Icons follow surface text unless a text-* utility is present */
.card :is(i[class^="bi"], [class^="bi-"]):not([class*="text-"]){
  color: var(--surface-text);
}

/* 6) Optional helpers when you need to force a context quickly */
/* IMPORTANT: on-dark should only be used on elements with actual dark backgrounds */
.on-dark, .card.on-dark{
  --surface-text:#fff; 
  --surface-heading:#fff;
}
/* NOTE: Link colors for on-dark are handled by the explicit card selectors above */

.on-light, .card.on-light{
  --surface-text:#1b2430; 
  --surface-heading:var(--wm-midnight);
}

/* Reset surface - use this class to reset link colors back to blue on light backgrounds */
/* Useful when you have a light-background child inside a dark-background parent */
.reset-surface,
.reset-surface a:not(.btn) {
  color: var(--wm-link) !important;
}
.reset-surface a:not(.btn):hover {
  color: var(--wm-link-hover) !important;
}

/* 6a) Hero overlay defaults to light text so markup can stay clean */
.card-hero{
  --surface-heading:#fff;
  --surface-text:#fff;
  --surface-link:#fff;
  --surface-link-hov:#fff;
}

/* 7) Make gradient text readable over dark cards: add a light variant */
.text-gradient-blue-on-dark{
  background: linear-gradient(135deg,#fff 0%, rgba(255,255,255,.92) 50%, rgba(255,255,255,.84) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* 8) Ensure list-group and header areas respect the surface too (borderless) */
.card .card-header,
.card .list-group,
.card .list-group-item{
  background: var(--surface-bg);
  color: var(--surface-text);
  border: 0 !important;
}

/* 9) (Optional) Light badges readable on dark/gradient cards */
.card.bg-primary .badge.bg-light,
.card.card-gradient-primary .badge.bg-light,
.card.bg-warning .badge.bg-light,
.card.card-gradient-warning .badge.bg-light,
.card.bg-info .badge.bg-light,
.card.card-gradient-info .badge.bg-light{
  background-color: rgba(255,255,255,.2);
  color: #fff;
}

/*=============================================================================
= Navbar/Topbar
=============================================================================*/
#header { background: var(--wm-midnight); }
#header .navbar-topbar{padding-top:0;padding-bottom:0;margin-top:-10px;}
.header { overflow: visible; } /* prevent dropdown clipping */
.navbar-brand{padding:0; margin-left:0!important;}
.navbar-brand-logo{
  height:56px;width:auto;max-width:256px;
  shape-rendering:crispEdges;
  image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
/* Ensure theme defaults (width:100%; min-width) don't stretch the logo */
#logo.navbar-brand-logo{
  width: auto !important;
  height: clamp(56px, 6vw, 80px) !important; /* explicit height so external SVGs render */
  min-width: 0 !important;
  /* Fluid, aspect-ratio-safe constraints */
  max-height: clamp(56px, 6vw, 80px) !important;
  max-width: clamp(200px, 20vw, 288px) !important;
}
@media (max-width:575.98px){ .navbar-brand-logo{height:60px;max-width:260px;} .navbar-dropdown-menu-inner{padding:.25rem!important;} }
@media (min-width:576px) and (max-width:767px){ .navbar-brand-logo{height:51px;max-width:192px;} }
@media (min-width:768px) and (max-width:991px) and (orientation:portrait){ .navbar-brand-logo{height:45px;max-width:160px;} .btn-join{display:none;} }
@media (min-width:768px) and (max-width:991.98px){ .navbar-brand-logo{height:56px;max-width:240px;} }
@media (min-width:992px) and (max-width:1199.98px){ .navbar-brand-logo{height:60px;max-width:256px;} }
@media (min-width:1200px){ .navbar-brand-logo{height:80px;max-width:288px;} }

/* Centered desktop nav (grid first; flex fallback) */
@media (min-width:1200px){
  @supports(display:grid){
    .navbar-nav-wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:1rem;}
    .navbar-brand{grid-column:1;}
    #navbarNavDropdown{grid-column:2;justify-self:center;max-width:100%;}
    #navbarNavDropdown .navbar-nav{white-space:nowrap;margin:0!important;}
    .navbar-nav-wrap-secondary-content{grid-column:3;justify-self:end;}
    #navbarNavDropdown.navbar-collapse{flex:initial!important;}
  }
  @supports not (display:grid){
    .navbar-nav-wrap{position:relative;}
    #navbarNavDropdown{position:absolute!important;left:50%;transform:translateX(-50%);top:0;bottom:0;display:flex!important;align-items:center;max-width:100%;white-space:nowrap;}
  }
  #navbarNavDropdown{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #navbarNavDropdown::-webkit-scrollbar{display:none;}
}
@media (max-width:1199.98px){
  #navbarNavDropdown .navbar-nav{white-space:normal;}
  .navbar-expand-xl.navbar-dark .navbar-collapse,
  .navbar-expand-xl.navbar-dark .navbar-nav,
  .navbar-expand-xl.navbar-dark .navbar-topbar-collapse{background:var(--wm-abyss)!important;}
}

/* Tablet and small desktop safety (≤1199px) */
@media (max-width:1199.98px){
  .navbar .hs-mega-menu.dropdown-menu{
    width: 96vw;
    max-width: 96vw;
    left: 50% !important; transform: translateX(-50%) !important; /* keep centered */
    border-radius: .75rem;
    overflow: hidden; /* stop bleeding */
  }
  .navbar .hs-mega-menu .container{ padding: .75rem; }
  .navbar .navbar-dropdown-menu-inner{ row-gap:.5rem; }
  .navbar .navbar-dropdown-menu-promo-link{ padding:.65rem; }
  .navbar .hs-mega-menu .btn{ padding:.45rem .9rem; font-size:.95rem; }
}

/* Prevent long words/labels from overflowing promo items */
.navbar .hs-mega-menu .navbar-dropdown-menu-promo-link .navbar-dropdown-menu-media-title,
.navbar .hs-mega-menu .navbar-dropdown-menu-promo-link p{
  overflow-wrap: anywhere; /* modern browsers */
  word-break: break-word; /* fallback */
}

/* Toggler/carets & dropdown top border */
.hs-mega-menu-invoker.dropdown-toggle::after{display:none;}
.hs-mega-menu-invoker .bi{display:inline-block;transition:transform .25s ease;font-size:1.27rem;}
.hs-mega-menu-invoker[aria-expanded="true"] .bi,
.hs-mega-menu-invoker.hs-mega-menu-opened .bi,
.hs-mega-menu-invoker.hs-sub-menu-opened .bi,
.hs-has-mega-menu.hs-mega-menu-opened>.hs-mega-menu-invoker .bi,
.hs-has-sub-menu.hs-sub-menu-opened>.hs-mega-menu-invoker .bi{transform:rotate(180deg);}

.navbar .dropdown-menu{ border-top:.1875rem solid var(--wm-westmark-blue); margin-top:1rem; } /* brand accent */

/* Dark header link states using brand */
.navbar-dark .nav-link, .navbar-dark .topbar { color:#fff !important; }
.navbar-dark .nav-link:hover{ color:rgba(255,255,255,.85)!important; } /* ↑ specificity within .navbar-dark */

/* Mega open color accent */
.navbar .hs-has-mega-menu.hs-mega-menu-opened > .hs-mega-menu-invoker,
.navbar .hs-has-mega-menu.hs-mega-menu-opened > .hs-mega-menu-invoker .bi{ color:var(--wm-westmark-blue)!important; }

/* Mega menu – responsive sizing, spacing, and overflow safety */
@media (min-width:1200px){
  /* Constrain width so it fits smaller desktops; center stays intact via start-50 */
.navbar .hs-mega-menu.dropdown-menu{
  width: min(92vw, 1100px);
  max-width: 1100px;
  border-radius: .75rem;
  overflow: visible; /* allow text to breathe on the right */
  box-shadow: 0 20px 40px rgba(0,0,0,.18);
}


  /* Comfortable inner padding so text doesn't touch edges */
  .navbar .hs-mega-menu .container{ padding: 1rem 1.25rem; }

  /* Ensure banner area respects padding and can't overflow */
  .navbar .navbar-dropdown-menu-banner{ background-size: cover; background-position: center; min-height: 100%; }
  .navbar .navbar-dropdown-menu-banner-content{ padding: 1rem; }

  /* Tighten typography and button sizes around 1200–1399 widths */
  @media (max-width:1399.98px){
    .navbar .hs-mega-menu .navbar-dropdown-menu-media-title{ font-size: 1.0625rem !important; }
    .navbar .hs-mega-menu p{ font-size:.95rem; line-height:1.45; }
    .navbar .hs-mega-menu .btn{ padding:.4rem .9rem; font-size:.95rem; }
  }

  /* Promo blocks: consistent inner spacing and visual breathing room */
  .navbar .navbar-dropdown-menu-inner{ row-gap:0; padding:.25rem .25rem; }
  .navbar .navbar-dropdown-menu-promo{ padding:.25rem 0; }
  .navbar .navbar-dropdown-menu-promo + .navbar-dropdown-menu-promo{ margin-top:0; padding-top:0; }
  .navbar .navbar-dropdown-menu-promo-link{ display:block; padding:.75rem; border-radius:.5rem; }
  /* Remove horizontal lines between promo rows */
  .navbar .navbar-dropdown-menu-promo-item::after,
  .navbar .navbar-dropdown-menu-promo:not(:first-child) .navbar-dropdown-menu-promo-item::after,
  .navbar .navbar-dropdown-menu-promo:first-child .navbar-dropdown-menu-promo-item::after{ display:none !important; }
}

/* Fine-tune icon sizing within promos so icons don't push text out */
.navbar .hs-mega-menu .navbar-dropdown-menu-promo-link i{ font-size:1.5rem; line-height:1; }
.navbar .hs-mega-menu .navbar-dropdown-menu-promo-link .flex-shrink-0{ line-height:1; }


/* Invest mega banner: wrap long headings and avoid right-edge kiss */
.navbar .navbar-dropdown-menu-banner-content [class^="h"],
.navbar .navbar-dropdown-menu-banner-content .h1,
.navbar .navbar-dropdown-menu-banner-content .h2,
.navbar .navbar-dropdown-menu-banner-content .h3,
.navbar .navbar-dropdown-menu-banner-content .h4 {
  white-space: normal;
  overflow-wrap: anywhere; /* modern */
  word-break: normal;      /* fallback */
}

.navbar .navbar-dropdown-menu-banner-content{
  padding: 1rem 1.5rem; /* add some right padding */
}


/* -----------------------------------------
Quick Nav (sticky shortcut bar)
----------------------------------------- */
/* ============================================================================
   Quick Nav (sticky shortcut bar)
   ========================================================================== */
   .quick-nav.sticky-top {
    z-index: 1030;
  }
  
  .quick-nav {
    background-color: #fff;
    border-top: 1px solid rgba(0, 214, 143, .08);
    border-bottom: 1px solid rgba(0, 214, 143, .08);
    transition: box-shadow .2s ease;
  }
  
  .quick-nav.is-pinned {
    box-shadow: 0 12px 24px rgba(13, 59, 113, .14);
    border-bottom-color: rgba(13, 59, 113, .18);
  }
  
  /* Subtle shadow on scroll */
  .quick-nav.is-scrolled {
    box-shadow: 0 2px 8px rgba(13, 59, 113, .08);
    transition: box-shadow 0.3s ease;
  }
  
  .quick-nav .quick-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1rem 0;
    font-weight: 600;
    color: #364a5a;
    text-decoration: none;
    position: relative;
  }
  
  .quick-nav .quick-item i {
    color: var(--nv-mint, #00D68F);
    font-size: 1.25rem;
  }
  
  .quick-nav .quick-item:hover {
    color: var(--nv-navy, #0D3B71);
    background-color: color-mix(in srgb, var(--nv-navy, #0D3B71) 6%, #fff);
    text-decoration: none;
  }
  
  /* Anchor offset for sticky header + quick nav */
  :root { --sticky-offset: 112px; }
  
  @media (max-width: 991.98px){
    :root { --sticky-offset: 96px; }
  }
  
  .section-target { scroll-margin-top: var(--sticky-offset); }
  
  /* Steps flow layout for process sections */
  .steps-flow {
    position: relative;
  }
  
  /* Optional: Add connecting lines between steps on larger screens */
  @media (min-width: 992px) {
    .steps-flow::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(to right, 
        transparent 0%, 
        rgba(0, 214, 143, .2) 20%, 
        rgba(0, 214, 143, .2) 80%, 
        transparent 100%);
      transform: translateY(-50%);
      z-index: 0;
    }
  }
 
/* Compact quick-nav layout – 3 columns up to tablet, 2 columns on small phones */
  @media (max-width: 767.98px){
    /* Pull quick nav up closer to hero */
    #pagecontent.content-space-t-4 {
      padding-top: 1rem !important;
    }
    /* Neutralize nested container */
    .quick-nav > .container {
      all: unset !important;
      display: block !important;
    }
    .quick-nav .row {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      margin: 0 !important;
      padding: 0 !important;
      gap: 0 !important;
    }
    .quick-nav .col {
      flex: 0 0 33.333% !important;
      max-width: 33.333% !important;
      width: 33.333% !important;
      padding: 0 !important;
      min-width: 0;
    }
    .quick-nav .quick-item {
      display: flex !important;
      width: 100%;
      align-items: center;
      justify-content: center;
      gap: .35rem;
      padding: .55rem .5rem;
      font-size: .9rem;
      line-height: 1.2;
      white-space: nowrap;
      background: none !important;
      position: relative;
      min-width: 0;
    }
    .quick-nav .quick-item::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -.25rem;
      height: var(--wm-underline-h, 2px);
      background: linear-gradient(90deg, var(--wm-accent, #00D68F), rgba(0, 214, 143, .35));
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .3s ease;
    }
    .quick-nav .quick-item:hover::after,
    .quick-nav .quick-item:focus-visible::after {
      transform: scaleX(1);
      transform-origin: left;
    }
    .quick-nav .quick-item i {
      font-size: 1rem;
      line-height: 1;
      margin: 0;
      flex: 0 0 auto;
    }
    .quick-nav .quick-item span {
      flex: 0 0 auto;
      min-width: 0;
    }
  }

  /* Small phones – drop to 2 columns */
  @media (max-width: 479.98px){
    .quick-nav .col {
      flex: 0 0 50% !important;
      max-width: 50% !important;
      width: 50% !important;
    }
    .quick-nav .quick-item {
      font-size: .85rem;
    }
  }

  /* Extra breathing room between quick nav and first content heading on phones */
  @media (max-width: 575.98px){
    .quick-nav{ margin-bottom: 1.5rem; }
  }
/* ==========================================================
   Brand gradient overlay for Invest mega-menu banners
   ========================================================== */
.navbar .navbar-dropdown-menu-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: .75rem;
  overflow: hidden;
}

/* gradient overlay layer */
.navbar .navbar-dropdown-menu-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    135deg,
    var(--wm-abyss, #00185E) 0%,
    var(--wm-midnight, #0D3B71) 45%,
    var(--wm-westmark-blue, #008CFF) 100%
  );
  opacity: 0.78;
  mix-blend-mode: multiply; /* gives that subtle tint rather than a flat overlay */
}

/* keep content above gradient */
.navbar .navbar-dropdown-menu-banner-content {
  position: relative;
  z-index: 1;
  color: #fff;
}


/*=============================================================================
= Buttons
=============================================================================*/
/* Focus ring (Westmark Blue glow) */
.btn, .btn:focus, .btn:focus-visible{ outline:0; }
.btn:focus-visible{ box-shadow:0 0 0 .25rem rgba(var(--wm-focus-rgb), .35); }

/* Primary (Navy) */
.btn-primary, .btn-navy{
  --bs-btn-bg: var(--wm-midnight);
  --bs-btn-border-color: var(--wm-midnight);
  --bs-btn-color: var(--wm-white);
  --bs-btn-hover-bg: var(--wm-midnight-600);
  --bs-btn-hover-border-color: var(--wm-midnight-600);
  --bs-btn-hover-color: var(--wm-white);
  --bs-btn-active-bg: var(--wm-abyss);
  --bs-btn-active-border-color: var(--wm-abyss);
  --bs-btn-active-color: var(--wm-white);
  --bs-btn-disabled-bg: var(--wm-midnight);
  --bs-btn-disabled-border-color: var(--wm-midnight);
  --bs-btn-disabled-color: rgba(255,255,255,.75);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
  font-family: 'avenir-lt-pro', 'Avenir LT Pro', 'Montserrat', sans-serif; font-weight:600;
}
.btn-outline-primary{
  --bs-btn-color: var(--wm-midnight);
  --bs-btn-border-color: var(--wm-midnight);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--wm-white);
  --bs-btn-hover-bg: var(--wm-midnight-600);
  --bs-btn-hover-border-color: var(--wm-midnight-600);
  --bs-btn-active-color: var(--wm-white);
  --bs-btn-active-bg: var(--wm-abyss);
  --bs-btn-active-border-color: var(--wm-abyss);
  --bs-btn-disabled-color: var(--wm-midnight);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--wm-midnight);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
  font-family: 'avenir-lt-pro', 'Avenir LT Pro', 'Montserrat', sans-serif; font-weight:600;
}

/* Secondary (Loblolly) */
.btn-secondary{
  --bs-btn-bg: var(--wm-loblolly);
  --bs-btn-border-color: var(--wm-loblolly);
  --bs-btn-color: #111;
  --bs-btn-hover-bg: var(--wm-loblolly-600);
  --bs-btn-hover-border-color: var(--wm-loblolly-600);
  --bs-btn-hover-color: #111;
  --bs-btn-active-bg: var(--wm-loblolly-700);
  --bs-btn-active-border-color: var(--wm-loblolly-700);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--wm-loblolly);
  --bs-btn-disabled-border-color: var(--wm-loblolly);
  --bs-btn-disabled-color: rgba(0,0,0,.6);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
  font-family: 'avenir-lt-pro', 'Avenir LT Pro', 'Montserrat', sans-serif; font-weight:600;
}

/* Success (Mint) */
.btn-success,
.btn-mint{
  --bs-btn-bg: var(--wm-mountain-green);
  --bs-btn-border-color: var(--wm-mountain-green);
  --bs-btn-color: var(--wm-black);
  --bs-btn-hover-bg: var(--wm-mountain-green-600);
  --bs-btn-hover-border-color: var(--wm-mountain-green-600);
  --bs-btn-hover-color: var(--wm-black);
  --bs-btn-active-bg: var(--wm-mountain-green-700);
  --bs-btn-active-border-color: var(--wm-mountain-green-700);
  --bs-btn-active-color: var(--wm-white);
  --bs-btn-disabled-bg: var(--wm-mountain-green);
  --bs-btn-disabled-border-color: var(--wm-mountain-green);
  --bs-btn-disabled-color: rgba(0,0,0,.6);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
  font-family: 'avenir-lt-pro', 'Avenir LT Pro', 'Montserrat', sans-serif; font-weight:600;
}
.btn-outline-secondary{
  --bs-btn-color: var(--wm-mountain-green-700);
  --bs-btn-border-color: var(--wm-mountain-green);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--wm-white);
  --bs-btn-hover-bg: var(--wm-mountain-green-600);
  --bs-btn-hover-border-color: var(--wm-mountain-green-600);
  --bs-btn-active-color: var(--wm-white);
  --bs-btn-active-bg: var(--wm-mountain-green-700);
  --bs-btn-active-border-color: var(--wm-mountain-green-700);
  --bs-btn-disabled-color: var(--wm-mountain-green-700);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--wm-mountain-green);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
}

/* Warning / Warm (Bright Sun) */
.btn-warning, .btn-orange{
  --bs-btn-bg: var(--wm-bright-sun);
  --bs-btn-border-color: var(--wm-bright-sun);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--wm-bright-sun-600);
  --bs-btn-hover-border-color: var(--wm-bright-sun-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--wm-bright-sun-700);
  --bs-btn-active-border-color: var(--wm-bright-sun-700);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--wm-bright-sun);
  --bs-btn-disabled-border-color: var(--wm-bright-sun);
  --bs-btn-disabled-color: rgba(255,255,255,.75);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
}
/* Override only btn-warning to ensure WCAG contrast with Bright Sun */
.btn-warning{
  --bs-btn-color: var(--wm-midnight);
  --bs-btn-hover-color: var(--wm-midnight);
  --bs-btn-active-color: var(--wm-midnight);
  --bs-btn-disabled-color: rgba(13,59,113,.75);
}
.btn-danger{
  --bs-btn-bg: var(--wm-red);
  --bs-btn-border-color: var(--wm-red);
  --bs-btn-color: var(--wm-white);
  --bs-btn-hover-bg: var(--wm-red-600);
  --bs-btn-hover-border-color: var(--wm-red-600);
  --bs-btn-hover-color: var(--wm-white);
  --bs-btn-active-bg: var(--wm-red-700);
  --bs-btn-active-border-color: var(--wm-red-700);
  --bs-btn-active-color: var(--wm-white);
  --bs-btn-disabled-bg: var(--wm-red);
  --bs-btn-disabled-border-color: var(--wm-red);
  --bs-btn-disabled-color: rgba(255,255,255,.75);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
}
.btn-outline-danger{
  --bs-btn-color: var(--wm-red);
  --bs-btn-border-color: var(--wm-red);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--wm-white);
  --bs-btn-hover-bg: var(--wm-red-600);
  --bs-btn-hover-border-color: var(--wm-red-600);
  --bs-btn-active-color: var(--wm-white);
  --bs-btn-active-bg: var(--wm-red-700);
  --bs-btn-active-border-color: var(--wm-red-700);
  --bs-btn-disabled-color: var(--wm-red);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--wm-red);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
}

/* Info (Navy brightened) */
.btn-info{
  --bs-btn-bg: var(--wm-westmark-blue);
  --bs-btn-border-color: var(--wm-westmark-blue);
  --bs-btn-color: var(--wm-white);
  --bs-btn-hover-bg: color-mix(in srgb, var(--wm-westmark-blue) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--wm-westmark-blue) 85%, black);
  --bs-btn-hover-color: var(--wm-white);
  --bs-btn-active-bg: color-mix(in srgb, var(--wm-westmark-blue) 70%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--wm-westmark-blue) 70%, black);
  --bs-btn-active-color: var(--wm-white);
  --bs-btn-disabled-bg: var(--wm-westmark-blue);
  --bs-btn-disabled-border-color: var(--wm-westmark-blue);
  --bs-btn-disabled-color: rgba(255,255,255,.75);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
}
.btn-outline-info{
  --bs-btn-color: var(--wm-westmark-blue);
  --bs-btn-border-color: var(--wm-westmark-blue);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--wm-white);
  --bs-btn-hover-bg: color-mix(in srgb, var(--wm-westmark-blue) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--wm-westmark-blue) 85%, black);
  --bs-btn-active-color: var(--wm-white);
  --bs-btn-active-bg: color-mix(in srgb, var(--wm-westmark-blue) 70%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--wm-westmark-blue) 70%, black);
  --bs-btn-disabled-color: var(--wm-westmark-blue);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--wm-westmark-blue);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
}
/* Outline success aligned to mint */
.btn-outline-success{
  --bs-btn-color: var(--wm-mountain-green-700, #2b5b4b);
  --bs-btn-border-color: var(--wm-mountain-green);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--wm-mountain-green-600);
  --bs-btn-hover-border-color: var(--wm-mountain-green-600);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--wm-mountain-green-700);
  --bs-btn-active-border-color: var(--wm-mountain-green-700);
  --bs-btn-disabled-color: var(--wm-mountain-green-700, #2b5b4b);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--wm-mountain-green);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
}
/* Outline warning aligned to Bright Sun */
.btn-outline-warning{
  --bs-btn-color: var(--wm-midnight);
  --bs-btn-border-color: var(--wm-bright-sun);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--wm-bright-sun-600);
  --bs-btn-hover-border-color: var(--wm-bright-sun-600);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--wm-bright-sun-700);
  --bs-btn-active-border-color: var(--wm-bright-sun-700);
  --bs-btn-disabled-color: var(--wm-midnight);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--wm-bright-sun);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
}

/* Outline white: ensure visible border on light backgrounds */
.btn-outline-white{
  --bs-btn-color: var(--wm-midnight);
  --bs-btn-border-color: var(--wm-soft-border);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--wm-midnight);
  --bs-btn-hover-bg: #f6f7f8;
  --bs-btn-hover-border-color: #dcdcdc;
  --bs-btn-active-color: var(--wm-midnight);
  --bs-btn-active-bg: #edeff1;
  --bs-btn-active-border-color: #d0d0d0;
  --bs-btn-disabled-color: rgba(13,62,91,.5);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--wm-soft-border);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
}
/* Outline light: ensure visible border and legible text on light surfaces */
.btn-outline-light{
  --bs-btn-color: var(--wm-midnight);
  --bs-btn-border-color: var(--wm-soft-border);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--wm-midnight);
  --bs-btn-hover-bg: #f6f7f8;
  --bs-btn-hover-border-color: #dcdcdc;
  --bs-btn-active-color: var(--wm-midnight);
  --bs-btn-active-bg: #edeff1;
  --bs-btn-active-border-color: #d0d0d0;
  --bs-btn-disabled-color: rgba(13,62,91,.5);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--wm-soft-border);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
}

/* Light / Dark */
.btn-light{
  --bs-btn-bg: var(--wm-white);
  --bs-btn-border-color: var(--wm-soft-border);
  --bs-btn-color: var(--wm-midnight);
  --bs-btn-hover-bg: #f6f7f8;
  --bs-btn-hover-border-color: #dcdcdc;
  --bs-btn-active-bg: #edeff1;
  --bs-btn-active-border-color: #d0d0d0;
  --bs-btn-disabled-bg: var(--wm-white);
  --bs-btn-disabled-border-color: var(--wm-soft-border);
  --bs-btn-disabled-color: rgba(13,62,91,.5);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
}
.btn-white{ /* alias for light */
  --bs-btn-bg: var(--wm-white);
  --bs-btn-border-color: var(--wm-soft-border);
  --bs-btn-color: var(--wm-midnight);
  --bs-btn-hover-bg: #f6f7f8;
  --bs-btn-hover-border-color: #dcdcdc;
  --bs-btn-active-bg: #edeff1;
  --bs-btn-active-border-color: #d0d0d0;
  --bs-btn-disabled-bg: var(--wm-white);
  --bs-btn-disabled-border-color: var(--wm-soft-border);
  --bs-btn-disabled-color: rgba(13,62,91,.5);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
}
.btn-dark{
  --bs-btn-bg: var(--wm-abyss);
  --bs-btn-border-color: var(--wm-abyss);
  --bs-btn-color: var(--wm-white);
  --bs-btn-hover-bg: var(--wm-midnight-600);
  --bs-btn-hover-border-color: var(--wm-midnight-600);
  --bs-btn-active-bg: var(--wm-abyss);
  --bs-btn-active-border-color: var(--wm-abyss);
  --bs-btn-disabled-bg: var(--wm-abyss);
  --bs-btn-disabled-border-color: var(--wm-abyss);
  --bs-btn-disabled-color: rgba(255,255,255,.75);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
}

/* Link buttons */
.btn-link{ color: var(--wm-midnight); }
.btn-link:hover, .btn-link:focus{ color: var(--wm-midnight-600); text-decoration-color: var(--wm-midnight-600); }

/* Special login button */
#loginbtn, #loginbtn-mobile{
  --bs-btn-bg: var(--wm-westmark-blue);
  --bs-btn-border-color: var(--wm-westmark-blue);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--wm-westmark-blue) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--wm-westmark-blue) 85%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--wm-westmark-blue) 70%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--wm-westmark-blue) 70%, black);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
  font-weight:600; letter-spacing:.5px; border-radius:999px; padding:.45rem 1.25rem;
  transition: transform .15s ease-in-out, background-color .15s;
}
#loginbtn:hover, #loginbtn-mobile:hover{ transform: translateY(-2px); }
#loginbtn:active, #loginbtn-mobile:active{ transform: scale(.97); }

/* Minimal button overrides - let Bootstrap 5 and theme handle the rest */
.btn {
    font-weight: 600; /* Brand requirement */
    border-radius: 999px; /* Brand requirement - pill shape */
}

/* Ensure embedded icons don't affect vertical rhythm */
.btn > i,
.btn > svg{ line-height: 1; }

/* Bright Sun rounded pill */
.btn-orange{
  --bs-btn-bg: var(--wm-bright-sun);
  --bs-btn-border-color: var(--wm-bright-sun);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--wm-bright-sun-600);
  --bs-btn-hover-border-color: var(--wm-bright-sun-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--wm-bright-sun-700);
  --bs-btn-active-border-color: var(--wm-bright-sun-700);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--wm-bright-sun);
  --bs-btn-disabled-border-color: var(--wm-bright-sun);
  --bs-btn-disabled-color: rgba(255,255,255,.75);
  --bs-btn-focus-shadow-rgb: var(--wm-focus-rgb);
  border-radius: 999px;
  padding: .45rem 1.25rem;
  letter-spacing: .5px;
  transition: transform .15s ease-in-out, background-color .15s;
}
.btn-orange:hover{ transform: translateY(-2px); }
.btn-orange:active{ transform: scale(.97); }

/*=============================================================================
= Mobile Quick Links - hide topbar on phones, show in burger menu instead
=============================================================================*/
/* Hide topbar on phones - use burger menu quick buttons instead */
@media (max-width: 575.98px) {
  .navbar-topbar { display: none !important; }
}

/* Quick links at top of burger menu (phones only) */
.mobile-quick-buttons { display: none !important; }
@media (max-width: 575.98px) {
  .mobile-quick-buttons { display: flex !important; }
}

/* Tablet: keep topbar but style the toggler chip */
@media (min-width: 576px) and (max-width: 991.98px) {
  .navbar-topbar .navbar-toggler {
    border-radius: 999px;
    padding: .35rem .75rem;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(0, 214, 143,.9);
  }
}

/*=============================================================================
= Mobile Main Nav Dropdown – smartphone optimization
=============================================================================*/
@media (max-width: 1199.98px) {
  /* Remove the grey vertical line on dropdown menus */
  .navbar-expand-xl .navbar-nav .dropdown-menu:not(.navbar-dropdown-menu)::before {
    display: none !important;
  }

  /* Full-width dropdown for mobile */
  #navbarNavDropdown .dropdown-menu {
    padding: .5rem 0;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: rgba(0, 24, 94, 0.95);
  }

  /* Dropdown items: larger touch targets */
  #navbarNavDropdown .dropdown-menu .dropdown-item,
  #navbarNavDropdown .dropdown-menu .navbar-dropdown-menu-promo-link {
    padding: .875rem 1.25rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  #navbarNavDropdown .dropdown-menu .dropdown-item:last-child {
    border-bottom: none;
  }

  #navbarNavDropdown .dropdown-menu .dropdown-item:hover,
  #navbarNavDropdown .dropdown-menu .dropdown-item:focus {
    background: rgba(0, 140, 255, 0.15);
    color: #fff;
  }

  /* Nav link spacing for touch */
  #navbarNavDropdown .navbar-nav .nav-link {
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
  }

  /* Mega menu mobile adjustments */
  #navbarNavDropdown .hs-mega-menu.dropdown-menu {
    background: var(--wm-abyss);
    padding: .75rem 0;
  }

  #navbarNavDropdown .hs-mega-menu .navbar-dropdown-menu-promo-link {
    background: transparent;
    border-radius: 0;
    margin: 0;
    color: #fff;
  }

  #navbarNavDropdown .hs-mega-menu .navbar-dropdown-menu-promo-link:hover {
    background: rgba(0, 140, 255, 0.12);
  }

  #navbarNavDropdown .hs-mega-menu .navbar-dropdown-menu-media-title {
    color: #fff !important;
  }

  #navbarNavDropdown .hs-mega-menu .navbar-dropdown-menu-media-desc {
    color: rgba(255,255,255,0.7);
  }

  #navbarNavDropdown .hs-mega-menu .flex-shrink-0 i {
    color: var(--wm-mountain-green) !important;
  }
}

/*=============================================================================
= Tabs/Pills
=============================================================================*/
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link{
  color:#373a36;
  background-color: color-mix(in srgb, var(--wm-mountain-green) 30%, transparent);
  font-size:1rem!important; font-family:'avenir-lt-pro', 'Avenir LT Pro', 'Montserrat', sans-serif; font-weight:600!important;
  border-bottom-width:.1875rem!important; border-bottom-color: var(--wm-midnight)!important;
}
.nav:not(.nav-pills) .nav-link.active{ color:#343f4c!important; border-color:transparent transparent var(--wm-bright-sun)!important; }

/* FinanceTab (Wellness Hub) — enforce white active text and consistent sizing */
#financeTab{ --bs-nav-pills-link-active-color:#fff; }
#financeTab .nav-link.active{ color:#fff !important; }
#financeTab .nav-link.active:hover,
#financeTab .nav-link.active:focus{ color:#fff !important; }
/* Ensure consistent tab text size across states (desktop) */
#financeTab .nav-link,
#financeTab .nav-link:hover,
#financeTab .nav-link:focus,
#financeTab .nav-link.active{ font-size:1rem !important; }
@media (max-width:768px){
  #financeTab .nav-link,
  #financeTab .nav-link:hover,
  #financeTab .nav-link:focus,
  #financeTab .nav-link.active{ font-size:.9rem !important; }
}

/* Modern tabs (kept behavior; colors adjusted to brand) */
.nav-tabs{ width:100%; justify-content:space-between; border-bottom:none; }
.nav-tabs .nav-link{
  position:relative; display:block; border:1px solid #dee2e6; margin-bottom:-1px; border-bottom:none;
  background: linear-gradient(to right, #f8f9fa, #e9ecef);
}
.nav-tabs .nav-link.active{
  color: #008CFF !important;
  background-color:#fff; border-color:transparent; border-bottom-color:#008CFF; z-index:1; font-weight:400;
}
.nav-tabs .nav-link i{ color: var(--wm-midnight); }
.nav-tabs .nav-link:hover span, .nav-tabs .nav-link.active span{ color:#008CFF !important; }
.tab-content{ border:none!important; }
.nav-tabs .nav-link.active::after{
  content:""; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid #008CFF;
}

/* Mobile pill radius adjustments */
@media (max-width:767.98px){
  #calculatorTabs .nav-link.rounded-pill,
  .nav-pills .nav-item .nav-link.rounded-pill{ border-radius:0!important; }
  .nav-pills .nav-item:first-child .nav-link{ border-top-left-radius:.5rem!important; border-bottom-left-radius:.5rem!important; }
  .nav-pills .nav-item:last-child .nav-link{ border-top-right-radius:.5rem!important; border-bottom-right-radius:.5rem!important; }
  .nav-tabs-modern .nav-item:first-child .nav-link{ border-top-left-radius:.5rem!important; }
  .nav-tabs-modern .nav-item:last-child .nav-link{ border-top-right-radius:.5rem!important; }
}
@media (min-width:768px){ #financeTab .nav-link{ border-radius:50rem; } }

/* Center contents in calculator pills */
#calculatorTabs .nav-item{ flex:1 1 0; }
#calculatorTabs .nav-link{
  display:flex !important; align-items:center; justify-content:center !important; text-align:center !important; width:100%;
  padding-left: 0.75rem; padding-right: 0.75rem;
}
#calculatorTabs .nav-link > i{ margin-right:.35rem; }

/*=============================================================================
= Cards/News
=============================================================================*/
/*=============================================================================
= Westmark Cards — Borderless, Modern, Flexible (Bootstrap 5 compatible)
= Notes:
= - No borders anywhere
= - Full + Soft brand backgrounds
= - Fresh layouts (horizontal, split, glass, gradient, hero, stats, etc.)
=============================================================================*/

/* ---------- Global card reset: no borders, rounded, tasteful shadow ---------- */
.card{
  border: 0 !important;
  border-radius: 16px;
  overflow: hidden;
  background-clip: padding-box;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
.card .card-header,
.card .list-group,
.card .list-group-item{
  border: 0 !important;
}

/* Optional elevation utilities */
.card-flat   { box-shadow: none !important; }
.card-soft   { box-shadow: 0 4px 16px rgba(0,0,0,.06) !important; }
.card-strong { box-shadow: 0 12px 32px rgba(0,0,0,.14) !important; }

/* Motion polish */
.card-hover-lift{ transition: transform .28s ease, box-shadow .28s ease; }
.card-hover-lift:hover{ transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.16); }
.card-hover-float{ transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.card-hover-float:hover{ transform: translateY(-2px) scale(1.01); box-shadow: 0 18px 46px rgba(0,0,0,.18); }
@media (prefers-reduced-motion: reduce){
  .card-hover-lift, .card-hover-float{ transition: none !important; }
}

/* ---------- Brand → semantic map (vars defined in :root ~line 396) ---------- */

/* ---------- Full background cards (bold, borderless, auto-contrast) ---------- */
.card.bg-primary{ background: var(--card-primary) !important; color:#fff !important; }
.card.bg-warning{ background: var(--card-warning) !important; color:#fff !important; }
.card.bg-info   { background: var(--card-info)    !important; color:#fff !important; }
/* Mint reads best with dark text */
.card.bg-success{ background: var(--card-success)!important; color:#0b1a26 !important; }

/* Ensure inner elements inherit proper contrast */
.card.bg-primary .card-title,
.card.bg-primary .card-text,
.card.bg-primary .btn,
.card.bg-warning .card-title,
.card.bg-warning .card-text,
.card.bg-warning .btn,
.card.bg-info .card-title,
.card.bg-info .card-text,
.card.bg-info .btn{ color:#fff; }
.card.bg-success .card-title,
.card.bg-success .card-text,
.card.bg-success .btn{ color:#0b1a26 !important; }

/* Subtle on-hover glow for full backgrounds */
.card.bg-primary.card-hover-lift:hover { box-shadow: 0 18px 48px rgba(13,62,91,.36); }
.card.bg-warning.card-hover-lift:hover { box-shadow: 0 18px 48px rgba(243,111,66,.36); }
.card.bg-info.card-hover-lift:hover    { box-shadow: 0 18px 48px rgba(52,142,192,.36); }
.card.bg-success.card-hover-lift:hover { box-shadow: 0 18px 48px rgba(127,168,149,.28); }

/* ---------- Soft background cards (no borders, no lines) ---------- */
/* Fallback (no color-mix) */
@supports not (background: color-mix(in srgb, #000 10%, #fff)){
  .bg-soft-primary{ background: rgba(13,62,91,.07) !important;   color: var(--soft-text) !important; }
  .bg-soft-success{ background: rgba(127,168,149,.10) !important; color: var(--soft-text) !important; }
  .bg-soft-warning{ background: rgba(243,111,66,.10) !important;  color: var(--soft-text) !important; }
  .bg-soft-info   { background: rgba(52,142,192,.10) !important;  color: var(--soft-text) !important; }
}
/* Modern path */
@supports (background: color-mix(in srgb, #000 10%, #fff)){
  .bg-soft-primary{ background: color-mix(in srgb, var(--card-primary) var(--soft-tint), #fff) !important; color: var(--soft-text) !important; }
  .bg-soft-success{ background: color-mix(in srgb, var(--card-success) var(--soft-tint), #fff) !important; color: var(--soft-text) !important; }
  .bg-soft-warning{ background: color-mix(in srgb, var(--card-warning) var(--soft-tint), #fff) !important; color: var(--soft-text) !important; }
  .bg-soft-info   { background: color-mix(in srgb, var(--card-info)    var(--soft-tint), #fff) !important; color: var(--soft-text) !important; }
}
/* Keep leading brand icon utilities intact */
.bg-soft-primary .text-primary{ color: var(--card-primary) !important; }
.bg-soft-success .text-success{ color: var(--card-success) !important; }
.bg-soft-warning .text-warning{ color: var(--card-warning) !important; }
.bg-soft-info .text-info      { color: var(--card-info)    !important; }

/* Override theme's hardcoded icon-soft-info color to Westmark Blue */
.icon-soft-info       { color: var(--wm-westmark-blue) !important; background: rgba(0, 140, 255, 0.1) !important; }
.icon-soft-info i     { color: var(--wm-westmark-blue) !important; }
.text-info            { color: var(--wm-westmark-blue) !important; }

/* ---------- Modern layout & visual variants (borderless by default) ---------- */

/* 1) Horizontal media card (image left, content right) */
.card-horizontal{ display:flex; flex-direction: row; }
.card-horizontal .card-img-left{
  width: 40%; min-height: 220px; object-fit: cover;
}
.card-horizontal .card-body{ flex:1; }
@media (max-width: 991.98px){
  .card-horizontal{ flex-direction: column; }
  .card-horizontal .card-img-left{ width:100%; height: 220px; }
}

/* 2) Split card (two even columns) */
.card-split{
  display:grid; grid-template-columns: 1fr 1fr; gap:0;
}
.card-split > .card-media{ min-height: 260px; background-size: cover; background-position:center; }
.card-split > .card-body{ padding: 2rem; display:flex; flex-direction:column; justify-content:center; }
@media (max-width: 991.98px){
  .card-split{ grid-template-columns: 1fr; }
}

/* 3) Hero card (full-bleed image with gradient overlay) */
.card-hero{ position:relative; color:#fff; }
.card-hero .card-img-hero{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: saturate(1.05);
}
.card-hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%);
}
.card-hero .card-body{ position:relative; z-index:1; padding: 2.25rem; }

/* 4) Glass card (frosted, perfect for image backgrounds) */
.card-glass{
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #0e1a22;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}

/* 5) Gradient brand cards (no borders, subtle sheen) */
.card-gradient-primary{
  background: linear-gradient(135deg, color-mix(in srgb, var(--card-primary) 94%, #000) 0%, var(--card-primary) 100%);
  color:#fff;
}
.card-gradient-warning{
  background: linear-gradient(135deg, color-mix(in srgb, var(--card-warning) 92%, #000) 0%, var(--card-warning) 100%);
  color:#fff;
}
.card-gradient-success{
  background: linear-gradient(135deg, color-mix(in srgb, var(--card-success) 88%, #000) 0%, var(--card-success) 100%);
  color:#0b1a26;
}
.card-gradient-info{
  background: linear-gradient(135deg, color-mix(in srgb, var(--card-info) 92%, #000) 0%, var(--card-info) 100%);
  color:#fff;
}

/* 6) Spotlight hover (radial highlight follows hover origin—CSS only illusion) */
.card-spotlight{
  position:relative; isolation:isolate;
  background: radial-gradient(600px 200px at 10% -20%, rgba(255,255,255,.22), transparent 40%),
              var(--card-bg, #fff);
}
.card-spotlight:hover{
  background: radial-gradient(600px 240px at 50% -20%, rgba(255,255,255,.28), transparent 46%),
              var(--card-bg, #fff);
}

/* 7) Media overlap (image pops out top) */
.card-media-overlap{ position:relative; padding-top: 72px; }
.card-media-overlap .card-media{
  position:absolute; top:-36px; left:50%; transform:translateX(-50%);
  width: 96px; height: 96px; border-radius: 20px; overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.card-media-overlap .card-media img{ width:100%; height:100%; object-fit:cover; }

/* 8) CTA arrow card (right-chevron animates in) */
.card-cta{ position:relative; }
.card-cta .card-body{ position:relative; padding-right: 3rem; }
.card-cta::after{
  content:""; position:absolute; right:1.25rem; top:50%; transform:translateY(-50%);
  width: 32px; height: 32px; border-radius: 999px;
  background: rgba(0,0,0,.06);
  /* Mask property with proper syntax for validator compatibility */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5l8 7-8 7'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  -webkit-mask-size: 60%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5l8 7-8 7'/%3E%3C/svg%3E");
  mask-position: center;
  mask-size: 60%;
  mask-repeat: no-repeat;
  opacity:.0; transition: opacity .25s ease, transform .25s ease;
}
.card-cta:hover::after{ opacity:.66; transform: translateY(-50%) translateX(2px); }

/* 9) Stat card */
.card-stat{ text-align:center; padding: 1.25rem 1rem; }
.card-stat .stat-value{ font-size: clamp(2rem, 4.5vw, 3rem); line-height:1; font-weight: 800; }
.card-stat .stat-label{ opacity:.8; }

/* 10) List card (no borders; nice spacing) */
.card-list .list{ list-style:none; margin:0; padding:0; }
.card-list .list li{
  display:flex; align-items:flex-start; gap:.75rem; padding:.4rem 0;
}
.card-list .list li + li{ margin-top:.25rem; }

/* 11) Pill badge in corner */
.card .badge-corner{
  position:absolute; top: .9rem; right: .9rem; z-index:2;
  border-radius: 999px; padding:.4rem .7rem; font-weight:600;
  background: rgba(0,0,0,.08); color:#111;
}

/* 12) Bleed helpers (edge-to-edge media) */
.card-bleed .card-img-top{ border-radius: 0; }
.card-bleed .card-body{ padding: 1.25rem 1.25rem 1.5rem; }

/* ---------- Friendly defaults for your existing classes ---------- */
.custom-card{ transition:transform .3s ease, box-shadow .3s ease; overflow:hidden; }
.custom-card:hover{ transform:translateY(-5px); box-shadow:0 12px 30px rgba(0,0,0,.14); }
.card-img-container{ position:relative; overflow:hidden; border-radius:16px 16px 0 0; height:200px; }
.custom-card .card-img-top{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.custom-card:hover .card-img-top{ transform:scale(1.08); }
.custom-card .card-body{ padding-top:20px!important; }

/* Accent bar (kept, but borderless aesthetic) */
.card-accent{
  height:8px;
  /* Brand-driven: utility classes can set --card-accent-color; gradient is fallback */
  background: var(--card-accent-color, linear-gradient(90deg, var(--card-primary) 0%, var(--card-warning) 100%));
  position:absolute; top:0; left:0; right:0;
}

/* Accent color utilities (brand tokens) */
.accent-midnight{       --card-accent-color: var(--wm-midnight); }
.accent-mountain{       --card-accent-color: var(--wm-mountain-green); }
.accent-bright-sun{     --card-accent-color: var(--wm-bright-sun); }
.accent-westmark-blue{  --card-accent-color: var(--wm-westmark-blue); }

/* Match top accent to each rate card's icon background color */
.auto-card .card-accent,
.certificate-card .card-accent{ background: var(--wm-midnight); }
/* Money Market uses mint accent to match icon wrapper */
.money-market-card .card-accent{ background: var(--wm-mountain-green); }

.motorcycle-card .card-accent,
.ira-card .card-accent{ background: var(--wm-bright-sun); }

.rv-card .card-accent{ background: var(--wm-mountain-green); }

/* Legacy color-bottom accents (still borderless) */
.card-green{  box-shadow: inset 0 -4px 0 0 var(--wm-mountain-green); }
.card-orange{ box-shadow: inset 0 -4px 0 0 var(--wm-bright-sun); }
.card-purple{ box-shadow: inset 0 -4px 0 0 var(--wm-midnight); }
.card-blue{   box-shadow: inset 0 -4px 0 0 var(--wm-westmark-blue); }

/* Text defaults */
.card-text{ color:#222!important; }


/*=============================================================================
= Hot Rates
=============================================================================*/
.rate-card{
  border:none; border-radius:16px; overflow:hidden; position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
  transition: transform .3s ease, box-shadow .3s ease;
}
.rate-card:hover{ transform:translateY(-5px); box-shadow:0 15px 35px rgba(0,0,0,.1); }
.rate-value{
  font-weight:700;
  background: linear-gradient(90deg, var(--wm-midnight) 0%, var(--wm-mountain-green) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; display:inline-block;
}

/*=============================================================================
= Product Tiles
=============================================================================*/
.product-filter{ width:100%; }
.product-filter .btn{ padding:.75rem 2rem; min-width:200px; }
.product-filter .btn.active{ background-color: var(--wm-midnight); color:#fff; border-color: var(--wm-midnight); }
@media (max-width:575.98px){
  .product-filter .btn{ padding:.75rem 1rem; min-width:100%; }
  .product-filter .btn:last-child{ margin-bottom:0; }
  .product-filter .btn i{ width:20px; }
}

/* Product Cards - Responsive Grid */
.product-card{ transition: transform .28s ease, box-shadow .28s ease; }
.product-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.16); }
@media (min-width:576px){
  .product-filter{ max-width:800px; margin:0 auto; }
  .product-filter .btn{ flex:1; }
}
.product-category{ display:none; opacity:0; transition:opacity .3s ease; }
.product-category.active{ display:block; opacity:1; }

.product-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  text-decoration:none;
  color: var(--bs-gray-700);
  background:#fff; padding:1.5rem; border-radius:1rem; height:100%;
  border:1px solid rgba(0,0,0,.05);
  min-width:120px;
  transition: all .3s ease;
}
.product-item i{ font-size:2rem; margin-bottom:.5rem; color: var(--wm-midnight); }
.product-item span{ font-weight:500; font-size:.9rem; }
.product-item:hover, .product-item:focus{
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  color: var(--wm-midnight);
  border-color: var(--wm-midnight);
  text-decoration:none; outline:none;
}
.product-item:focus-visible{ outline:2px solid var(--wm-midnight); outline-offset:2px; }
@media (max-width:991.98px){
  .product-item{ min-width:calc(50% - 1rem); padding:1.25rem; }
  .product-item i{ font-size:1.75rem; }
  .product-item span{ font-size:.85rem; }
}
@media (max-width:575.98px){
  .product-item{ min-width:calc(33.333% - 1rem); padding:1rem; }
  .product-item i{ font-size:1.5rem; }
  .product-item span{ font-size:.75rem; }
}

/*=============================================================================
= Footer
=============================================================================*/

/* ===== Footer Styles ===== */
.footer-background {
  background: linear-gradient(165deg, rgba(13,59,113,1) 0%, rgba(0,24,94,1) 40%, rgba(13,59,113,1) 100%);
}

/* Footer-specific design tokens (scoped to avoid global conflicts) */
footer,
.footer-background {
  --footer-ridge-h: 90px;                 /* default ridge height */
  --footer-accent: var(--wm-mountain-green); /* brand accent */
  --footer-link: rgba(255,255,255,.78);
  --footer-link-hover: #ffffff;
  --footer-underline-h: 2px;
}
@media (max-width: 575.98px){ 
  footer,
  .footer-background { 
    --footer-ridge-h: 70px; /* smaller on xs */
  } 
}

/* --- Ridge placement --- */
.footer-ridge{
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * var(--footer-ridge-h));  /* sits above the footer by its own height */
  height: var(--footer-ridge-h);
  z-index: 3;
  pointer-events: none;
}
.footer-ridge svg{
  width: 100%;
  height: 100%;
  display: block;
  transform: scaleY(-1);           /* vertical flip to mirror hero */
}

/* Give the top of the footer a touch of breathing room */
footer.bg-abyss > .container{
  padding-top: clamp(1rem, 2vw, 2rem);
}

/* Micro tweak: smaller social button padding on tiny screens - but NOT icon buttons */
@media (max-width: 360px){
  .social-row .btn:not(.btn-icon){ padding: .375rem .5rem; }
}

/* ===== Footer link hover/focus effects ===== */
footer a:not(.js-go-to):not(.go-to) {
  position: relative;
  transition: color .25s ease, transform .25s ease, box-shadow .25s ease;
  text-decoration: none;
  display: inline-block;            /* ensure ::after sizes/positions predictably */
}

/* Base link color consistency */
footer a.link-light,
.footer-background .link-sm.link-light { 
  color: var(--footer-link); 
}

/* HOVER/FUNCTIONAL FIX:
   - Force the text color to white
   - Kill Bootstrap's underline on hover/focus so our ::after underline shows
*/
footer a.link-light:hover,
footer a.link-light:focus,
footer .link-light:hover,
footer .link-light:focus,
.footer-background .link-sm.link-light:hover,
.footer-background .link-sm.link-light:focus {
  color: var(--footer-link-hover) !important;  /* beat .link-light:hover !important */
  text-decoration: none !important;           /* stop Bootstrap from adding underline */
}

/* Animated underline (slides in) for footer links + disclosures link
   Keep your original GRADIENT — do not change colors.
   Add extra selectors to outrank Bootstrap colored-links.
*/
footer a.link-light::after,
footer .link-light::after,
footer a.nav-link-special::after,
.footer-background .link-sm.link-light::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: var(--footer-underline-h);
  background: linear-gradient(90deg, var(--footer-accent), rgba(0,214,143,.35));
  transition: width .3s ease;
  pointer-events: none;
}
footer a.link-light:hover::after,
footer a.link-light:focus::after,
footer .link-light:hover::after,
footer .link-light:focus::after,
footer a.nav-link-special:hover::after,
footer a.nav-link-special:focus::after,
.footer-background .link-sm.link-light:hover::after,
.footer-background .link-sm.link-light:focus::after {
  width: 100% !important; /* ensure animation wins over any competing rule */
}

/* Subtle slide for list links */
.row .col-6 ul li a.link-light:hover,
.row .col-6 ul li a.link-light:focus {
  transform: translateX(4px);
}

/* Disclosures link polish */
footer a.nav-link-special,
.footer-background .nav-link-special {
  color: var(--footer-link);
  position: relative;
  display: inline-block;
  text-decoration: none;
  padding-bottom: 2px;
  opacity: .9;
  transition: color .2s ease, opacity .2s ease;
}
footer a.nav-link-special:hover,
footer a.nav-link-special:focus,
.footer-background .nav-link-special:hover,
.footer-background .nav-link-special:focus {
  color: var(--wm-westmark-blue) !important;
  text-decoration: none !important;
  opacity: 1;
}

/* Contact row: lift the icons on hover/focus */
footer .list-unstyled a i {
  transition: transform .25s ease, color .25s ease, text-shadow .25s ease;
}
footer .list-unstyled a:hover i,
footer .list-unstyled a:focus i {
  color: var(--footer-accent);
  transform: translateY(-2px);
  text-shadow: 0 2px 10px rgba(0,214,143,.45);
}

/* Section headings (SPEND / SAVE / BORROW / ABOUT) react slightly */
footer p.fs-6.fw-6 {
  transition: color .25s ease, text-shadow .25s ease;
}
footer p.fs-6.fw-6:hover,
footer p.fs-6.fw-6:focus-within {
  color: var(--footer-accent);
  text-shadow: 0 0 12px rgba(0,214,143,.35);
}

/* Social buttons: gentle glow + scale */
footer .social-row .btn,
.footer-background .btn-soft-light {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  backdrop-filter: saturate(120%) blur(2px);
  background: var(--wm-white-15);
  border: 1px solid var(--wm-white-25);
}
/* Footer social buttons - let theme handle sizing */
/* Footer buttons - let theme handle sizing */
footer .social-row .btn:hover,
footer .social-row .btn:focus,
.footer-background .btn-soft-light:hover,
.footer-background .btn-soft-light:focus {
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(0,214,143,.55);
  background: rgba(255,255,255,.22);
}
.footer-background .btn-soft-light:focus-visible,
footer .social-row .btn:focus-visible {
  outline: 2px solid var(--wm-westmark-blue);
  outline-offset: 2px;
}

/* App badges: small lift */
.app-badge {
  transition: transform .25s ease, box-shadow .25s ease;
}
.app-badge:hover,
.app-badge:focus {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

/* Go-to-top button hover state (keeps your JS behavior) */
.js-go-to.go-to {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #008CFF, #008CFF);
  border: 1px solid var(--wm-white-25);
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.js-go-to.go-to,
.js-go-to.go-to i,
.js-go-to.go-to .bi {
  color: #fff !important;
}
.js-go-to.go-to:hover,
.js-go-to.go-to:focus {
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgb(0, 214, 143), rgb(0, 214, 143));
  box-shadow: 0 10px 28px rgba(0,214,143,.45);
  color: #fff !important;
}
.js-go-to.go-to:hover i,
.js-go-to.go-to:hover .bi,
.js-go-to.go-to:focus i,
.js-go-to.go-to:focus .bi {
  color: #fff !important;
}

/* Accessible focus ring for keyboard users */
footer a:focus-visible,
footer .btn:focus-visible,
.js-go-to.go-to:focus-visible {
  outline: 2px solid var(--footer-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0,214,143,.25);
}

/* Motion sensitivity */
@media (prefers-reduced-motion: reduce) {
  footer a,
  footer .btn,
  .app-badge,
  .js-go-to.go-to,
  footer .list-unstyled a i,
  .footer-background .link-sm.link-light,
  .footer-background .link-sm.link-light::after,
  .footer-background .btn-soft-light,
  .footer-background .nav-link-special,
  .footer-background .nav-link-special::after,
  .footer-background a img[alt*="App"],
  .footer-background a img[alt*="Google Play"] {
    transition: none !important;
    transform: none !important;
  }
}

/* Small screens: tone down movement */
@media (max-width: 575.98px){
  .row .col-6 ul li a.link-light:hover,
  .row .col-6 ul li a.link-light:focus { transform: translateX(2px); }
  footer .social-row .btn:hover,
  footer .social-row .btn:focus,
  .footer-background .btn-soft-light:hover,
  .footer-background .btn-soft-light:focus { transform: scale(1.03); }
}

/*=============================================================================
= Forms
=============================================================================*/
.form-range::-webkit-slider-thumb,
.form-range::-moz-range-thumb,
.form-range::-ms-thumb{ background: var(--wm-midnight); }
.custom-range{
  appearance:none; -webkit-appearance:none; width:100%; height:8px; border-radius:5px; background:#e9ecef; outline:0; padding:0; margin:0;
}
.custom-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background: var(--wm-midnight);
  cursor:pointer; transition:all .15s ease-in-out;
}
.custom-range::-webkit-slider-thumb:hover{ background: var(--wm-midnight-600); transform: scale(1.1); }
.custom-range::-moz-range-thumb{
  width:20px; height:20px; border:0; border-radius:50%; background: var(--wm-midnight);
  cursor:pointer; transition:all .15s ease-in-out;
}
.custom-range::-moz-range-thumb:hover{ background: var(--wm-midnight-600); transform: scale(1.1); }

/* Tooltip/icon accent */
.tooltip-icon{ color: var(--wm-midnight); cursor:pointer; }

/*=============================================================================
= Tables
=============================================================================*/
.table{ width:100%; margin-bottom:1rem; color:#000; }
.table td, .table th{ padding:.5rem; vertical-align:top; border-top:1px solid #dee2e6; white-space:normal; text-align:left; }
.table thead th{
  background-color: var(--wm-midnight)!important; color:#fff!important;
  vertical-align:bottom; border-bottom:2px solid #dee2e6; text-transform:uppercase; letter-spacing:1px; font-weight:600!important;
}
/* Light header override for comparison tables */
.table thead.table-light-header th{
  background-color: var(--bs-gray-100, #f8f9fa)!important; 
  color: var(--wm-midnight)!important;
  text-transform: none!important;
  letter-spacing: normal!important;
  font-weight: normal!important;
  border-bottom: 2px solid #dee2e6;
}
.table-striped tbody tr:nth-of-type(odd){ background-color: rgba(0,0,0,.05); }
.table-hover tbody tr:hover{ background-color: rgba(0,0,0,.075); }
.table-responsive-sm{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-responsive-sm>.table{ border:0; }
.table-responsive-sm>.table thead{ display:none; }
.table-responsive-sm>.table tbody, .table-responsive-sm>.table td, .table-responsive-sm>.table th, .table-responsive-sm>.table tr{ display:block; width:100%; }
.table-responsive-sm>.table td, .table-responsive-sm>.table th{ border:1px solid #edf0f1; border-top:none; padding:.5rem; }

/* Responsive table with data-label attributes for mobile */
@media (max-width: 767.98px){
  .table-responsive .table thead{ display:none; }
  .table-responsive .table tbody tr{ 
    display:block; 
    margin-bottom:1rem; 
    border:1px solid #dee2e6; 
    border-radius:.5rem; 
    padding:.75rem;
    background:#fff;
  }
  .table-responsive .table tbody td{ 
    display:flex; 
    justify-content:space-between; 
    align-items:center;
    border:none; 
    padding:.5rem 0;
    text-align:right;
  }
  .table-responsive .table tbody td:before{ 
    content:attr(data-label); 
    font-weight:600; 
    color:var(--wm-midnight);
    text-align:left;
    margin-right:1rem;
    flex-shrink:0;
  }
  .table-responsive .table tbody td:last-child{ border-bottom:none; }
}
.table-responsive-sm>.table td[data-header]:before{
  content: attr(data-header) ": "; font-weight:700; display:block; color:#005eb8; margin-bottom:.25rem;
}

/* ============================================================================
   RATES PAGE FIX - Mobile table card headers
   Fix for white text on blue backgrounds in mobile stacked view
   Bootstrap 5 uses CSS variables + 9999px inset box-shadow for striped rows
   ============================================================================ */
@media (max-width: 576px) {
  /* Rate card tables - first cell becomes header on mobile */
  /* Must override Bootstrap's --bs-table-* variables AND box-shadow */
  .rates .table tbody tr td:first-child,
  .rate-card .table tbody tr td:first-child,
  #pagecontent.rates .table tbody tr td:first-child,
  .rates .table-striped tbody tr:nth-of-type(odd) td:first-child,
  .rates .table-striped tbody tr:nth-of-type(even) td:first-child {
    --bs-table-color-type: #ffffff !important;
    --bs-table-bg-type: #0D3B71 !important;
    --bs-table-striped-color: #ffffff !important;
    --bs-table-striped-bg: #0D3B71 !important;
    background: #0D3B71 !important;
    background-color: #0D3B71 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }
  /* Ensure all child elements also have white text */
  .rates .table tbody tr td:first-child *,
  .rate-card .table tbody tr td:first-child * {
    --bs-table-color-type: #ffffff !important;
    --bs-table-striped-color: #ffffff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
  }
}

/*=============================================================================
= Utilities
=============================================================================*/
.helpSwiper-wrap{ position:relative; padding-right: calc(var(--help-arrow-size, 64px) + var(--help-arrow-gap, 16px) + 6px); overflow:hidden; }
.helpSwiper{ overflow:hidden; }
.helpSwiper-wrap .help-next{
  position:absolute; top:50%; right: var(--help-arrow-gap, 16px); transform:translateY(-50%);
  width: var(--help-arrow-size, 64px); height: var(--help-arrow-size, 64px);
  border-radius:50%; border:3px solid var(--wm-bright-sun); background:transparent; color:var(--wm-bright-sun);
  display:flex; align-items:center; justify-content:center; z-index:2; cursor:pointer; transition: all .3s ease;
}
.helpSwiper-wrap .help-next::before{ content:"\F285"; font-family:"bootstrap-icons"; font-size:28px; font-weight:700; line-height:1; }
.helpSwiper-wrap .help-next:hover,
.helpSwiper-wrap .help-next:focus{ background: var(--wm-bright-sun); color:#111; outline:none; }
.swiper-progress{ margin-top:1rem; color:#6c757d; font-size:.875rem; }
@media (max-width:768px){ .helpSwiper-wrap{ padding-right:0; } .helpSwiper-wrap .help-next{ display:none; } }
.mt-n12{ margin-top:-8rem!important; }
.mt-n15, .my-n15{ margin-top:-7rem!important; }
.opacity-8{ opacity:.7!important; }
.opacity-3{ opacity:.3!important; }
.rounded-4{ border-radius:1rem; } /* consolidated */
.icon-md{ width:2.6rem;height:2.6rem;line-height:2.6rem;text-align:center;font-size:.8rem; }
.rounded-circle{ border-radius:50%!important; }
.fw-1{font-weight:100}.fw-2{font-weight:200}.fw-3{font-weight:300}
.fw-4{font-weight:400!important}.fw-5{font-weight:500}.fw-6{font-weight:600!important}
.fw-7{font-weight:700}.fw-8{font-weight:800}.fw-9{font-weight:900}
.f200{font-weight:200!important}.f500{font-weight:500!important}
.f600{font-weight:600!important}.f400{font-weight:400!important}
.fspace{ letter-spacing:1.5px; }
.notd{ text-decoration:none!important; }

/* Links & hovers in content sections */
a.nav-link.text-primary:hover{ color: var(--wm-bright-sun)!important; }
.nav-link:focus, .nav-link:hover{ color:#6c6d71!important; }

/*=============================================================================
= Accessibility/Motion
=============================================================================*/
.sr-only{ border:0; clip:rect(0,0,0,0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; }
.sr-only-focusable:active, .sr-only-focusable:focus{ clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto; }
.visually-hidden-focusable{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.visually-hidden-focusable:focus{ position:static!important; width:auto!important; height:auto!important; padding:inherit!important; margin:inherit!important; overflow:visible!important; clip:auto!important; white-space:normal!important; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/*=============================================================================
= Misc (kept behavior; brand-aligned where needed)
=============================================================================*/
.wellness-hero{ background: linear-gradient(135deg, #f8fafb 0%, #e8f2f4 100%); position:relative; overflow:hidden; }
.wellness-hero::before{ content:""; position:absolute; top:-50%; left:-20%; width:120%; height:200%; background: radial-gradient(circle, color-mix(in srgb, var(--wm-mountain-green) 10%, transparent) 0%, transparent 70%); opacity:.6; animation: float 20s ease-in-out infinite; }
.wellness-hero::after{ content:""; position:absolute; bottom:-50%; right:-20%; width:100%; height:150%; background: radial-gradient(circle, color-mix(in srgb, var(--wm-bright-sun) 10%, transparent) 0%, transparent 70%); opacity:.4; animation: float 25s ease-in-out infinite reverse; }
@keyframes float{ 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-20px) rotate(5deg);} }
.wellness-header{ position:relative; z-index:10; padding:4rem 0 2rem; }
.wellness-title{ font-weight:800; color: var(--wm-midnight); font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom:1rem; }
.title-accent{ background: linear-gradient(135deg, var(--wm-bright-sun) 0%, color-mix(in srgb, var(--wm-bright-sun) 85%, black) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.wellness-subtitle{ font-size:1.25rem; color: var(--wm-midnight); opacity:.8; max-width:none; margin:0; }
.wellness-nav{ background:#fff; border-radius:20px; padding:8px; box-shadow: 0 8px 32px var(--shadow-light); border:1px solid rgba(127,168,149,.1); margin-bottom:3rem; position:relative; z-index:5; }
.wellness-nav .nav-link{ color: var(--wm-midnight); font-weight:600; padding:16px 24px; border-radius:16px; transition: all .3s cubic-bezier(.4,0,.2,1); border:none; position:relative; overflow:hidden; }
.wellness-nav .nav-link::before{ content:""; position:absolute; inset:0 0 0 -100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wm-bright-sun) 10%, transparent), transparent); transition:left .5s; }
.wellness-nav .nav-link:hover::before{ left:100%; }
.wellness-nav .nav-link:hover{ background: color-mix(in srgb, var(--wm-bright-sun) 10%, transparent); color: var(--wm-bright-sun); transform: translateY(-2px); }
.wellness-nav .nav-link.active{ background: linear-gradient(135deg, var(--wm-bright-sun) 0%, color-mix(in srgb, var(--wm-bright-sun) 85%, black) 100%); color:#fff; box-shadow: 0 8px 24px rgba(255,206,2,.3); transform: translateY(-2px); }
.wellness-nav .nav-link:focus, .wellness-nav .nav-link:focus-visible{ color:#fff; outline:none; box-shadow:none; }
.featured-hero{ background: linear-gradient(135deg, #fff 0%, #f8fafb 100%); }
.featured-image{ position:relative; overflow:hidden; }
.featured-image img{ transition: transform .4s ease; }
.featured-image:hover img{ transform: scale(1.05); }
.featured-badge{ background: linear-gradient(135deg, var(--wm-bright-sun) 0%, color-mix(in srgb, var(--wm-bright-sun) 85%, black) 100%); backdrop-filter: blur(10px); border:none; padding:8px 16px; border-radius:12px; font-weight:600; }
.topic-card{ border:none; background:#fff; border-radius:16px; transition: all .3s ease; box-shadow: 0 4px 16px var(--shadow-light); }
.topic-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 32px var(--shadow-medium); }
.topic-icon{ width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; }
.tools-hero{ background: linear-gradient(135deg, var(--wm-bright-sun) 0%, color-mix(in srgb, var(--wm-bright-sun) 85%, black) 100%); position:relative; overflow:hidden; }
.tools-hero::before{ content:""; position:absolute; inset:0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="white" opacity="0.1"/><circle cx="80" cy="40" r="1" fill="white" opacity="0.1"/><circle cx="40" cy="80" r="1" fill="white" opacity="0.1"/></svg>'); }
.feature-card{ border-radius:20px; overflow:hidden; position:relative; background: linear-gradient(135deg, var(--wm-midnight) 0%, #0a2a3e 100%); }
.feature-card.mint{ background: linear-gradient(135deg, var(--wm-mountain-green) 0%, #6a9480 100%); }
.category-card{ border:none; border-radius:20px; overflow:hidden; background:#fff; transition: all .3s ease; }
.category-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px var(--shadow-medium); }
.category-header{ padding:1.5rem; font-weight:700; }
.category-header.persimmon{ background: linear-gradient(135deg, var(--wm-bright-sun) 0%, color-mix(in srgb, var(--wm-bright-sun) 85%, black) 100%); }
.category-header.navy{ background: linear-gradient(135deg, var(--wm-midnight) 0%, #0a2a3e 100%); }
.category-header.mint{ background: linear-gradient(135deg, var(--wm-mountain-green) 0%, #6a9480 100%); }
.tool-link{ padding:1rem 1.5rem; border:none; transition: all .3s ease; text-decoration:none; color: var(--wm-midnight); }
.tool-link:hover{ background: color-mix(in srgb, var(--wm-bright-sun) 10%, transparent); color: var(--wm-bright-sun); text-decoration:none; }
.course-card{ border:none; border-radius:20px; overflow:hidden; transition: all .4s ease; background:#fff; box-shadow: 0 4px 16px var(--shadow-light); }
.course-card:hover{ transform: translateY(-8px); box-shadow: 0 20px 48px var(--shadow-medium); }
.course-image{ height:200px; object-fit:cover; transition: transform .4s ease; }
.course-card:hover .course-image{ transform: scale(1.05); }
.teens-hero{ background: linear-gradient(135deg, var(--wm-mountain-green) 0%, #6a9480 100%); position:relative; }
.bg-gradient-dark{ background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0)); } /* consolidated */
.banner-links, .text-orchard{ color: var(--wm-bright-sun)!important; }
.banner-links:hover{ color: var(--wm-westmark-blue)!important; transition:.2s ease-in-out!important; transform:translateY(-3px)!important; }

.navbar .dropdown-menu::before{ /* ensure mobile dropdown arrow stays white */ content:""; }

.header-white-nav-links{ color: rgba(255,255,255,.9)!important; }
.list-group-item-action:focus, .list-group-item-action:hover{ background-color: rgba(189,197,209,.2)!important; }

#routingNumber{ cursor:pointer; color:#fff; transition:background-color .3s ease; }
#routingNumber:hover{ background-color: rgba(255,255,255,.2); text-decoration:underline; }

/* Swiper/layout helpers (unchanged behavior) */
.swiper{ width:100%; height:100%; }
.swiper-slide{ height:auto; }
.swiper-slide img{ display:block; width:100%; height:100%; object-fit:cover; }
.swiper-slide .cms-editable p{ text-align:center; display:flex; justify-content:center; align-items:center; margin:0; }

/* Content spacing (deduped) */
.content-space-t-6{ padding-top:14.5rem!important; }
.content-space-t-7{ padding-top:18.5rem!important; }
.content-space-t-8{ padding-top:22.5rem!important; }

/* Hero-to-content gap: theme content-space-t-3/4 are too tall on mobile.
   Scoped to #pagecontent so hero-internal spacing is unaffected. */
@media (max-width: 767.98px){
  #pagecontent .content-space-t-4{ padding-top: 5rem !important; }
  #pagecontent .content-space-t-3{ padding-top: 4rem !important; }
}
@media (max-width: 575.98px){
  #pagecontent .content-space-t-4{ padding-top: 1rem !important; }
  #pagecontent .content-space-t-3{ padding-top: .75rem !important; }
}

/* Go-to button legacy class */
.go-to{ background-color: rgba(255,105,120,.8)!important; color:#fff; opacity:.5; bottom:95px!important; }
.go-to:hover, .go-to:focus{ color:#fff; background-color: rgb(255,105,120)!important; opacity:1; }

/* Offcanvas close button accent */
.offcanvas.offcanvas-top .btn-close{
  width:30px;height:30px;border:1px solid var(--wm-westmark-blue);border-radius:4px;padding:3px;box-sizing:border-box;
  background-color: #EEEFE7 !important; color:#fff!important; font-size:.75rem!important;
}
.offcanvas-header{ padding-top:1.5rem; padding-bottom:1.5rem; border-bottom:none!important; }
.offcanvas.offcanvas-top{ height:50vh; max-height:100%; }
@media (min-width:576px){ .offcanvas.offcanvas-top{ height:60vh; } }
@media (min-width:768px){ .offcanvas.offcanvas-top{ height:70vh; } }
.offcanvas.offcanvas-top .offcanvas-body{ overflow-y:auto; }

/* Search panel - auto height to fit content */
.offcanvas.offcanvas-navbar-search{ height:auto!important; max-height:none!important; bottom:auto!important; }
.offcanvas.offcanvas-navbar-search .offcanvas-body{ overflow-y:visible; }

/* Search panel modern styling */
.search-quick-link{ transition: all 0.2s ease; }
.search-quick-link:hover{ transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1)!important; }
.search-quick-link:hover .bg-soft-primary,
.search-quick-link:hover .bg-soft-success,
.search-quick-link:hover .bg-soft-info,
.search-quick-link:hover .bg-soft-danger{ transform: scale(1.1); }
.search-quick-link div[class*="bg-soft-"]{ transition: transform 0.2s ease; }
.hover-bg-white-25:hover{ background-color: rgba(255,255,255,0.25)!important; }
#offcanvasNavbarSearch .badge{ transition: all 0.2s ease; }
#offcanvasNavbarSearch .badge:hover{ transform: translateY(-1px); }
.bg-gradient-primary{ background: linear-gradient(135deg, var(--wm-midnight) 0%, var(--wm-abyss) 100%); }

/* Navbar topbar grid for utility (no visual change) */
#header .navbar-topbar .js-mega-menu{ display:grid; grid-template-columns:1fr auto; }
#header .navbar-topbar .navbar-nav-wrap-collapse{ grid-column:2; }

/* Hover cards in sliders */
.swiper-slide .card:hover{ background-color:#F2F3F6!important; }

/* HelpSwiper: Restore card hover lift and keep original backgrounds */
.helpSwiper .swiper-slide .card{
  transition: transform .28s ease, box-shadow .28s ease;
}
.helpSwiper .swiper-slide .card:hover,
.helpSwiper .swiper-slide .card:focus-within{
  background-color: inherit !important; /* don't wash out brand panels */
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
}

/* Icon wrappers & effects (neutral) */
.icon-wrapper{ width:80px;height:80px;border-radius:20px;display:flex;align-items:center;justify-content:center;margin:-40px auto 20px;position:relative;z-index:1;box-shadow:0 10px 20px rgba(0,0,0,.1); }
.icon-wrapper::before{
  content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 100%); border-radius:inherit;
}
.icon-wrapper{ --icon-size: 3rem; }
.icon-wrapper i{ font-size: var(--icon-size) !important; line-height:1; }

/* Hover "primary soft" tiles — align to brand */
.hover-bg-primary-soft{ transition: all .3s ease; }
.hover-bg-primary-soft:hover{
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(25,49,171,.15);
  background-color: color-mix(in srgb, var(--wm-midnight) 5%, transparent) !important;
}
.hover-bg-primary-soft:hover h6{ color: var(--wm-midnight) !important; }
.hover-bg-primary-soft:hover i{ transform: scale(1.2); transition: transform .3s ease; }
.hover-bg-primary-soft i{ transition: transform .3s ease; }

/* Sitewide alert bar */
#alertbox > p { display:none; }
#alertbox .alert{
  font-size:.9375rem; border:0; border-radius:0; position:relative; z-index:1035;
}
#alertbox .alert-link{ color:var(--wm-midnight)!important; font-weight:600; text-decoration:underline!important; }
#alertbox .alert-link:hover{ color:var(--wm-abyss)!important; }
#alertbox .btn-close{ opacity:.5; }
#alertbox .btn-close:hover{ opacity:1; }

/* Legacy alert classes (keep for other pages) */
.alert-light{
  font-size:1rem!important; color:#000!important; font-weight:500; border-radius:0; z-index:1035!important; border-color:#6c6d71;
}
.alert-light .alert-link{ color:#000!important; font-weight:500; text-decoration:underline!important; }
.alert-primary{ background-color: var(--wm-midnight)!important; color:#fff!important; }

/* Misc preserved classes that reference brand colors directly for content */
.text-bluegrey, .text-iconblue{ color:#6399ae!important; }
.link-bluegrey{ color:#6399ae!important; }
.link-gold{ color:#a39382!important; }
.badge-primary{ color:#fff; background-color: var(--wm-midnight)!important; }

/* End of file */


/* ===== Auto Loan Calculator — Compact Layout (scoped) ===== */
#calculator .card-img-top{
  height: 150px;
  object-fit: cover;
}
@media (min-width: 1200px){
  #calculator .card-img-top{ height: 170px; }
}

/* Lightly reduce header/result sizing without altering form behavior */
#calculator .card-title{ font-size: 1.15rem; padding-bottom: .5rem; margin-bottom: .75rem; }
#calculator #calculationResult{ padding: 1.25rem; }
#calculator #calculationResult h4{ font-size: 1rem; }
#calculator #monthlyPayment{ font-size: clamp(1.6rem, 3.5vw, 2rem); line-height: 1.1; }

/* ===== Westmark Typography Utilities (2025) ===== */
/* Note: --nv-* token aliases defined in root variables section (~line 411) */

/* Underline accent helper (partial underline) */
.underline-accent{ position:relative; display:inline-block; padding-bottom:.25rem; }
.underline-accent::after{
  content:""; position:absolute; left:0; right:50%; bottom:0;
  height: 8px; background-color: color-mix(in srgb, var(--wm-midnight) 20%, transparent);
  border-radius:4px;
}

/* Outlined heading */
.outlined-heading{
  color: #fff;
  -webkit-text-stroke: 1px var(--wm-midnight);
  text-shadow: none;
}

/* Oversized number aesthetic */
.number-billboard{
  color: color-mix(in srgb, var(--wm-midnight) 18%, transparent);
  font-weight: 800; line-height:1;
}

/* Tag pill utility */
.tag-pill{ border-radius:999px; padding:.25rem .6rem; }

/* Divider gradients */
.divider-gradient-right{ height:2px; background: linear-gradient(to right, transparent, var(--wm-midnight)); }
.divider-gradient-left{ height:2px; background: linear-gradient(to left, transparent, var(--wm-midnight)); }

/* Vertical text helper */
.text-vertical-rl{ writing-mode: vertical-rl; transform: rotate(180deg); }

/* Soft background chips */
.bg-nv-navy-12{ background-color: color-mix(in srgb, var(--nv-navy) 12%, white); }


/* ===== Westmark Typography Utilities — Extended (2025) ===== */


/* Color tokens */
.text-nv-navy{ color: var(--nv-navy) !important; }
.text-nv-persimmon{ color: var(--nv-persimmon) !important; }
.text-nv-mint{ color: var(--nv-mint) !important; }
.text-nv-accent-blue{ color: var(--nv-accent-blue) !important; }

/* Background tints */
.bg-nv-navy-10{ background-color: color-mix(in srgb, var(--nv-navy) 10%, white); }
/* Note: .bg-nv-navy-12 defined above in Typography Utilities section */
.bg-nv-persimmon-90{ background-color: color-mix(in srgb, var(--nv-persimmon) 90%, transparent); }

/* Borders */
.border-nv-navy{ border-color: var(--nv-navy) !important; }
.border-nv-mint{ border-color: var(--nv-mint) !important; }
.border-success-thin{ border: 1px solid var(--wm-mountain-green, #00D68F) !important; }

/* Jumbo backdrop type */
.display-jumbo{ font-size: 12rem; line-height: 1; }
.opacity-08{ opacity:.08 !important; }
.opacity-10{ opacity:.10 !important; }
.mb-n-2r{ margin-bottom: -2rem !important; }

/* Note: .outlined-heading, .divider-gradient-*, .text-vertical-rl defined above */

/* Sizes / shapes */
.size-48{ width:48px; height:48px; }
.size-60{ width:60px; height:60px; }
.shape-80{ width:80px; height:80px; }
.rounded-40{ border-radius:40%; }

/* Card accent bar utility */
.card-accent-bar.h-4px{ height: 4px; }

/* Utility widths */
.w-30{width:30px!important;}
.list-icon{ width:30px; display:inline-flex; align-items:flex-start; justify-content:center; }
/* Standard left-column icon alignment for list groups */
.list-group-icons-left .list-group-item{ display:flex; gap:.75rem; align-items:flex-start; }
.list-group-icons-left .list-icon{ width:30px; display:inline-flex; align-items:flex-start; justify-content:center; line-height:1; }
.list-group-icons-left .list-icon > i{ line-height:1; display:block; }

/* -----------------------------------------------------------------------------
   Timeline - Vertical with centered green line and date circles
   ----------------------------------------------------------------------------- */
.timeline {
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: var(--bs-success);
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
}

/* Year badge centered on each row */
.timeline-year {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #fff;
  box-shadow: 0 0 0 6px rgba(0, 214, 143, 0.15);
  z-index: 2;
  font-size: 0.875rem;
}

/* Timeline cards */
.tl-card {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  max-width: 340px;
}

.tl-card.tl-left {
  margin-left: auto;
}

.tl-card.tl-right {
  margin-right: auto;
}

.tl-img {
  border-radius: 0.5rem;
  width: 100%;
  height: auto;
}

.tl-year {
  color: var(--bs-primary);
  font-weight: 700;
}

/* Mobile responsive timeline */
@media (max-width: 991.98px) {
  .timeline::before {
    left: 8px;
    transform: none;
  }
  
  .timeline-year {
    left: 8px;
    right: auto;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    font-size: 0.75rem;
  }
  
  .tl-card {
    max-width: 100%;
    margin-left: 2.5rem !important;
    margin-right: 0 !important;
  }
  
  .timeline-item .col-lg-6 {
    padding-left: 1rem;
  }
  
  .timeline-item .offset-lg-6 {
    margin-left: 0;
  }
}
/* ===== Westmark Typography Utilities — Tags, Dividers, Copy (2025) ===== */

/* ============================================================================
   Tag System — Driven by CSS Variables
   ============================================================================
   Note: Border color calculated directly to avoid nested color-mix() validation issues
   ============================================================================ */
.tag {
  /* Using direct hex values in color-mix() for validator compatibility */
  --tag-bg: color-mix(in srgb, #0D3B71 6%, #fff);
  --tag-fg: var(--nv-navy);
  /* Border color: equivalent to darkening the background by 85% */
  /* Calculated as: mix 6% navy + 94% white, then darken result by 85% */
  --tag-br: color-mix(in srgb, #0D3B71 5.1%, #000);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--tag-br);
  background: var(--tag-bg);
  color: var(--tag-fg);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.tag i{font-size: .9em;}

/* Brand tag presets (can be overridden per brand) */
.tag-brand   { --tag-bg: color-mix(in srgb, #0D3B71 10%, #fff);  --tag-fg: var(--nv-navy); }
.tag-accent  { --tag-bg: color-mix(in srgb, #008CFF 10%, #fff); --tag-fg: var(--nv-accent-blue); }
/* Bootstrap color fallbacks - using Westmark brand colors */
.tag-success { --tag-bg: color-mix(in srgb, #00D68F 12%, #fff); --tag-fg: #00D68F; }
.tag-warning { --tag-bg: color-mix(in srgb, #FFCE02 18%, #fff); --tag-fg: #1f2937; }
.tag-muted   { --tag-bg: #f3f4f6; --tag-fg: #374151; }

/* Dividers */
.divider {
  display:flex; align-items:center; gap:.75rem;
}
.divider::before,
.divider::after{
  content:""; flex:1 1 auto; height:2px; background: var(--bs-border-color);
}
.divider.thin::before, .divider.thin::after{ height:1px; }
.divider.dotted::before, .divider.dotted::after{ border-top: 2px dotted var(--bs-border-color); height:0; background: none; }
.divider.gradient::before{ background: linear-gradient(to right, transparent, var(--wm-midnight)); }
.divider.gradient::after{  background: linear-gradient(to left,  transparent, var(--wm-midnight)); }

.divider .label{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .25rem .75rem; border-radius: 999px;
  border: 1px solid var(--wm-midnight);
  color: var(--wm-midnight);
  background: color-mix(in srgb, var(--wm-midnight) 10%, #fff);
  font-weight: 700; text-transform: none;
}

/* Copy button */
.block-actions{ display:flex; justify-content:flex-end; margin:-.25rem 0 .75rem; }
.copy-btn{
  --cbg: #fff; --cfg: #111; --cbr: rgba(0,0,0,.1);
  border:1px solid var(--cbr); background:var(--cbg); color:var(--cfg);
  border-radius: 999px; padding:.25rem .6rem; font-weight:600; font-size:.875rem;
}
.copy-btn:hover{ filter: brightness(.98); }
.copy-toast{ position: fixed; right: 1rem; bottom: 1rem; background:#111; color:#fff; padding:.5rem .75rem; border-radius: .5rem; opacity:0; transform: translateY(10px); transition: .2s ease; pointer-events:none; }
.copy-toast.show{ opacity:1; transform: translateY(0); }

/* Misc */
.z-1{ z-index:1; }
.z-n1{ z-index:-1; }


/* ===== Copy Button & Dark Surface ===== */
.btn-copy{
  --cbg:#fff; --cfg:#111; --cbr:rgba(0,0,0,.12);
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid var(--cbr); background:var(--cbg); color:var(--cfg);
  border-radius:999px; padding:.15rem .5rem; font-weight:600; font-size:.75rem; line-height:1;
}
.btn-copy i{ font-size: .9em; }
.btn-copy:hover{ filter: brightness(.98); text-decoration:none; color:inherit; }

.bg-deep-navy{ background:#0b1b24 !important; }


/* ===== Alerts (brand-token, surface-aware) ===== */
.alert-soft{
  --alert-bg: var(--surface-bg, #fff);
  --alert-text: var(--surface-text, #1b2430);
  --alert-border: var(--bs-border-color);
  background-color: var(--alert-bg) !important;
  color: var(--alert-text) !important;
  border: 1px solid var(--alert-border) !important;
  border-radius: 12px;
}
.alert-soft .alert-title{ color: inherit; }

/* Token-driven soft variants (no .alert-primary here to avoid overrides) */
.alert-soft-navy{
  --alert-bg: color-mix(in srgb, var(--nv-navy) 12%, white);
  --alert-text: var(--nv-navy);
  --alert-border: color-mix(in srgb, var(--nv-navy) 30%, white);
}
.alert-soft-accent{
  --alert-bg: color-mix(in srgb, var(--nv-accent-blue) 12%, white);
  --alert-text: var(--nv-accent-blue);
  --alert-border: color-mix(in srgb, var(--nv-accent-blue) 30%, white);
}
.alert-soft-mint{
  --alert-bg: color-mix(in srgb, var(--nv-mint) 12%, white);
  --alert-text: var(--nv-mint-700, #2b5b4b);
  --alert-border: color-mix(in srgb, var(--nv-mint) 30%, white);
}
.alert-soft-persimmon{
  --alert-bg: color-mix(in srgb, var(--nv-persimmon) 14%, white);
  --alert-text: var(--nv-persimmon-700, #7a2f18);
  --alert-border: color-mix(in srgb, var(--nv-persimmon) 35%, white);
}
.alert-soft-gray{
  --alert-bg: #f3f5f7;
  --alert-text: #1f2937;
  --alert-border: #e3e7ee;
}

/* High-contrast "solid" token variants (when needed) */
.alert-solid-navy{
  background-color: var(--nv-navy) !important;
  color: #fff !important;
  border: 0 !important;
}
.alert-solid-persimmon{
  background-color: var(--nv-persimmon) !important;
  color: #fff !important;
  border: 0 !important;
}

/* ============================================================================
   Moved from index.html — Unique utilities/components (no duplicates)
   ========================================================================== */
/* Note: --bs-card-box-shadow defined in :root (~line 419) */

/* Divider variant with faded ends */
.divider.fade-ends::before{ background: linear-gradient(to right, rgba(13,62,91,0), rgba(13,62,91,0.35)); }
.divider.fade-ends::after{  background: linear-gradient(to left,  rgba(13,62,91,0), rgba(13,62,91,0.35)); }

/* Wellness card */
.wellness-card{ border:none; border-radius:24px; overflow:hidden; box-shadow:0 8px 32px var(--shadow-light); transition: all .4s cubic-bezier(.4,0,.2,1); background:#fff; }
.wellness-card:hover{ transform: translateY(-8px); box-shadow: 0 20px 48px var(--shadow-medium); }

/* Ensure decorative overlays don't block clicks */
.wellness-hero::before,
.wellness-hero::after,
.tools-hero::before{ pointer-events: none !important; }

/* Make full-bleed media non-interactive if needed */
.featured-image img,
.course-image{ pointer-events: none; }

/* Teens placeholder card */
.teens-placeholder{ background: linear-gradient(135deg, #f8fafb 0%, #fff 100%); border:none; border-radius:20px; padding:2rem; text-align:center; transition: all .3s ease; }
.teens-placeholder:hover{ background:#fff; transform: translateY(-4px); box-shadow: 0 12px 32px var(--shadow-medium); }

/* Buttons (brand-consistent) */
.btn-wm-primary{ background: linear-gradient(135deg, var(--wm-bright-sun) 0%, color-mix(in srgb, var(--wm-bright-sun) 85%, black) 100%); border:0; color:#111; font-weight:700; padding:12px 32px; border-radius:16px; transition: all .3s ease; }
.btn-wm-primary:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,206,2,.3); color:#111; }
.btn-wm-outline{ border:2px solid var(--wm-bright-sun); color: var(--wm-bright-sun); background: transparent; font-weight:700; padding:12px 32px; border-radius:16px; transition: all .3s ease; }
.btn-wm-outline:hover{ background: var(--wm-bright-sun); color:#111; transform: translateY(-2px); }
.btn-white-custom{ background:#fff; color: var(--wm-bright-sun); border:0; font-weight:600; padding:12px 32px; border-radius:16px; transition: all .3s ease; }
.btn-white-custom:hover{ background:#f8f9fa; color: var(--wm-bright-sun); transform: translateY(-2px); }

/* Color utilities mapped to compat tokens already defined above */
.text-wm-bright-sun{ color: var(--wm-bright-sun) !important; }
.text-wm-midnight{  color: var(--wm-midnight) !important; }
.text-wm-mountain{  color: var(--wm-mountain-green) !important; }
.bg-wm-bright-sun-10{ background-color: rgba(255,206,2,.10) !important; }
.bg-wm-midnight-10{  background-color: rgba(13,59,113,.10) !important; }
.bg-wm-mountain-10{  background-color: rgba(0,214,143,.10) !important; }

/* Wellness nav responsive tweaks */
@media (max-width: 768px){
  .wellness-nav{ padding:4px; }
  .wellness-nav .nav-link{ padding:12px 16px; font-size:.9rem; }
  .featured-hero .row{ flex-direction: column; }
}

/* Generic fade-in helper (reuse existing @keyframes fadeIn) */
.fade-in{ animation: fadeIn .6s ease-out; }

/* Card bottom accent stripe variants */
.card[class*="card-accent-"]{ position:relative; overflow:hidden; }
.card[class*="card-accent-"]::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:12px; }
/* New Westmark names */
.card-accent-bright-sun::after{  background-color: var(--wm-bright-sun); }
.card-accent-midnight::after{    background-color: var(--wm-midnight); }
.card-accent-mountain::after{    background-color: var(--wm-mountain-green); }
.card-accent-westmark-blue::after{ background-color: var(--wm-westmark-blue); }
/* Legacy aliases kept for compatibility */
.card-accent-persimmon::after{ background-color: var(--wm-bright-sun); }
.card-accent-navy::after{      background-color: var(--wm-midnight); }
.card-accent-mint::after{      background-color: var(--wm-mountain-green); }
.card-accent-blue::after{      background-color: var(--wm-westmark-blue); }
.card-accent-bright-sun:hover, .card-accent-persimmon:hover{ box-shadow: 0 8px 22px rgba(0,0,0,.22), 0 14px 28px rgba(0,0,0,.20), 0 10px 24px rgba(255,206,2,.12) !important; }
.card-accent-midnight:hover,   .card-accent-navy:hover{      box-shadow: 0 8px 22px rgba(0,0,0,.22), 0 14px 28px rgba(0,0,0,.20), 0 10px 24px rgba(13,62,91,.12) !important; }
.card-accent-mountain:hover,   .card-accent-mint:hover{      box-shadow: 0 8px 22px rgba(0,0,0,.22), 0 14px 28px rgba(0,0,0,.20), 0 10px 24px rgba(127,168,149,.10) !important; }
.card-accent-westmark-blue:hover, .card-accent-blue:hover{    box-shadow: 0 8px 22px rgba(0,0,0,.22), 0 14px 28px rgba(0,0,0,.20), 0 10px 24px rgba(15,178,255,.12) !important; }

/* Icon badge chips */
.icon-badge{ display:inline-flex; align-items:center; justify-content:center; width:92px; height:92px; border-radius:50%; margin-bottom:1rem; font-size:2rem; }
.icon-badge-persimmon{ background-color: color-mix(in srgb, var(--wm-bright-sun) 14%, #fff); color: var(--wm-bright-sun); }
.icon-badge-navy{      background-color: color-mix(in srgb, var(--wm-midnight) 14%, #fff);      color: var(--wm-midnight); }
.icon-badge-mint{      background-color: color-mix(in srgb, var(--wm-mountain-green) 14%, #fff);      color: var(--wm-mountain-green); }
.icon-badge-blue{      background-color: color-mix(in srgb, var(--wm-westmark-blue) 14%, #fff); color: var(--wm-westmark-blue); }
.icon-badge i{ color: currentColor !important; }
.card:hover .icon-badge{ transform: scale(1.04); transition: transform .2s ease; }

/* ============================================================================
   Membership (ms-*) utilities — Duplicate removed (consolidated above)
   ============================================================================ */
/* Note: Membership variables are defined in the root section above */
.text-gradient-persimmon{ background: linear-gradient(135deg,var(--ms-persimmon),var(--ms-persimmon-600)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.membership-section{ background: radial-gradient(1200px 600px at -20% -10%, rgba(243,111,66,.10), transparent 60%), radial-gradient(900px 500px at 120% 110%, rgba(127,168,149,.12), transparent 60%), linear-gradient(180deg, #fff 0%, #fbfcfd 100%); position:relative; }
.ms-links{ position:absolute; inset:0; pointer-events:none; opacity:.08; background-image: radial-gradient(80px 80px at 10% 20%, var(--ms-navy) 12%, transparent 13%), radial-gradient(80px 80px at 14% 20%, var(--ms-navy) 12%, transparent 13%), radial-gradient(80px 80px at 70% 70%, var(--ms-persimmon) 12%, transparent 13%), radial-gradient(80px 80px at 74% 70%, var(--ms-persimmon) 12%, transparent 13%); background-repeat:no-repeat; animation: msFloat 18s ease-in-out infinite alternate; }
@keyframes msFloat{ 0%{ transform: translateY(0) } 100%{ transform: translateY(-10px) } }
.ms-eyebrow{ background: rgba(13,62,91,.06); color: var(--ms-navy); border-radius:999px; padding:.4rem .8rem; font-weight:600; letter-spacing:.02em; }
.ms-photo-wrap{ position:relative; max-width:620px; margin:0 auto; }
.ms-photo-wrap img{ border-radius:24px; }
.ms-float, .ms-float-2{ position:absolute; padding:.5rem .75rem; border-radius:999px; }
.ms-float{ top:8%; left:-6%; transform: rotate(-3deg); }
.ms-float-2{ bottom:-1%; right:-4%; transform: rotate(2deg); }
.ms-chips .chip{ display:inline-flex; align-items:center; gap:.4rem; background:#fff; color: var(--ms-navy); border:1px solid rgba(13,62,91,.12); padding:.4rem .7rem; border-radius:999px; font-weight:600; font-size:.9rem; box-shadow: 0 6px 14px rgba(13,62,91,.06); }
.ms-chips .chip::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background: radial-gradient(circle at 30% 30%, var(--ms-persimmon), var(--ms-persimmon-600)); }
.ms-cdfi{ border-radius: var(--ms-card-radius); }
.ms-cdfi-icon{ width:42px; height:42px; border-radius:12px; flex:0 0 42px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(243,111,66,.15), rgba(127,168,149,.15)); color: var(--ms-navy); font-size:1.1rem; }
.btn-ms-primary{ --bs-btn-padding-y:.75rem; --bs-btn-padding-x:1.4rem; --bs-btn-border-radius:16px; color:#fff; font-weight:700; border:0; background: linear-gradient(135deg, var(--ms-persimmon), var(--ms-persimmon-600)); box-shadow: 0 12px 28px rgba(243,111,66,.28); }
.btn-ms-primary:hover{ transform: translateY(-2px); color:#fff; }
.btn-outline-ms{ --bs-btn-padding-y:.75rem; --bs-btn-padding-x:1.4rem; --bs-btn-border-radius:16px; border:2px solid var(--ms-persimmon); color: var(--ms-persimmon); font-weight:700; }
.btn-outline-ms:hover{ background: var(--ms-persimmon); color:#fff; }
.dot{ width:.35rem; height:.35rem; border-radius:50%; background: rgba(31,42,55,.25); display:inline-block; }
@media (max-width: 991.98px){ .ms-float{ left:0; } .ms-float-2{ right:0; } }

/* ============================================================================
   Template Utility Classes (for inline style replacements)
   ========================================================================== */

/* Hero background image utility - use inline style on heroitem for dynamic images */

/* CTA bar background */
.cta-bar-bg {
  background: color-mix(in srgb, var(--wm-midnight) 6%, #fff);
}

/* Shape bottom positioning */
.shape-bottom-positioned {
  z-index: 3;
  margin-bottom: -5rem;
}

/* SVG decorative styling */
.svg-decorative {
  width: 100%;
  height: 70px;
  transform: scale(-1, -1);
  display: block;
}

/* Complex hero background gradient */
.bg-hero-gradient-midnight {
  background: radial-gradient(circle at bottom right, color-mix(in srgb, var(--wm-midnight, #0D3B71) 8%, #f6f9fe), #f6f9fe);
  overflow: hidden;
}

/* ============================================================================
   Extended Bootstrap Grid - 8-column row
   ========================================================================== */
/* @media (min-width: 1400px) {
  .row-cols-xxl-8 > * {
    flex: 0 0 auto;
    width: 12.5%;
  }
} */

/* Note: Page-specific images should use inline styles in HTML, not CSS classes */


/* ============================================================================
   HOMEPAGE-SPECIFIC STYLES (index.html)
   ============================================================================
   These styles are specific to the Westmark homepage. They include:
   - Design tokens for homepage components
   - Overrides for global components that display differently on homepage
   - Rate slider, news strip, community section, reviews, resources, goals widget
   
   NOTE: Some rules use !important to override global styles defined earlier
   in this file (e.g., .tools-hero, .wellness-nav use yellow/sun colors globally
   but blue colors on homepage).
   ============================================================================ */

/* -----------------------------------------------------------------------------
   Homepage Design Tokens
   ----------------------------------------------------------------------------- */
:root {
  /* Homepage-specific blue dark shade */
  --wm-westmark-blue-dark: #0077D9;

  /* Rate slider palette */
  --rate-blue-bg: #e8f0f8;
  --rate-green-bg: #e9f7f0;
  --rate-navy: #0D3B71;
  --rate-green: #12896b;
  --rate-accent: #0d6efd;

  /* News card effects */
  --news-accent: var(--wm-mountain-green);
  --hover-lift: 12px;
  --hover-rotate: .35deg;
  --img-zoom: 1.04;
  --img-parallax: 6px;
  --img-angle: 24px;
  --glow: 0 10px 30px rgba(0,0,0,.08);
  --glow-hover: 0 16px 40px rgba(0,0,0,.14);
  --card-hover-bg: color-mix(in oklab, #ffffff 85%, var(--wm-mountain-green));

  /* Footer underline vars (used in resources section) */
  --wm-accent: #00D68F;
  --wm-underline-h: 2px;
}

/* -----------------------------------------------------------------------------
   Homepage Global Overrides
   ----------------------------------------------------------------------------- */
/* Override tools-hero to use blue gradient on homepage (global uses yellow/sun) */
.tools-hero {
  background: linear-gradient(135deg, var(--wm-westmark-blue) 0%, var(--wm-westmark-blue-dark) 100%) !important;
}

/* Override wellness-nav to use blue colors on homepage (global uses yellow/sun) */
.wellness-nav .nav-link::before {
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,140,255,.10) 50%, rgba(0,0,0,0) 100%) !important;
}
.wellness-nav .nav-link:hover {
  background: rgba(0,140,255,.10) !important;
  color: var(--wm-westmark-blue) !important;
}
.wellness-nav .nav-link.active {
  background: linear-gradient(135deg, var(--wm-westmark-blue) 0%, var(--wm-westmark-blue-dark) 100%) !important;
  box-shadow: 0 8px 24px rgba(0,140,255,.3) !important;
}

/* Override featured-badge to use blue gradient on homepage */
.featured-badge {
  background: linear-gradient(135deg, var(--wm-westmark-blue) 0%, var(--wm-westmark-blue-dark) 100%) !important;
}

/* Object-fit utility */
.object-fit-cover {
  object-fit: cover;
  object-position: center;
}

/* Nav active state override for homepage tabs */
.nav:not(.nav-pills) .nav-link.active {
  color: #343f4c !important;
  border-color: transparent transparent var(--wm-abyss) !important;
}

/* -----------------------------------------------------------------------------
   Homepage Swiper Shared Styles
   ----------------------------------------------------------------------------- */
.mySwiper .swiper-slide,
.rateSwiper .swiper-slide,
.reviewsSwiper .swiper-slide {
  height: auto;
}

.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev,
.reviewsSwiper ~ .d-flex .reviews-next,
.reviewsSwiper ~ .d-flex .reviews-prev,
.reviews-pagination {
  z-index: 5;
}

.mySwiper .swiper-wrapper {
  padding-block: 6px;
}

@media (max-width: 575.98px) {
  .mySwiper .swiper-button-prev,
  .mySwiper .swiper-button-next {
    display: none;
  }
}

/* -----------------------------------------------------------------------------
   Homepage Rate Slider (#rate-slider)
   ----------------------------------------------------------------------------- */
.rateSwiper-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.rateSwiper {
  flex: 1 1 auto;
  overflow: hidden;
}

.rateSwiper .swiper-wrapper {
  padding-block: 4px;
}

.rateSwiper .swiper-slide {
  padding-inline: 6px;
}

.rateSwiper-wrap .rate-nav {
  position: static;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 0;
  display: inline-grid;
  place-items: center;
  box-shadow: none;
  background: none;
}

.rateSwiper-wrap .rate-nav i {
  pointer-events: none;
  line-height: 1;
  display: block;
}

@media (max-width: 575.98px) {
  .rateSwiper-wrap .rate-nav {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}

#rate-slider .swiper-progress {
  display: none !important;
}

/* Homepage rate-card overrides (different from global .rate-card in Hot Rates section) */
#rate-slider .rate-card {
  border: 0;
  border-radius: 24px;
  padding: 20px;
  text-align: center;
  box-shadow: none !important;
  transition: none;
  color: var(--rate-navy);
  overflow-wrap: normal;
  word-wrap: normal;
  word-break: normal;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

#rate-slider .rate-card:hover {
  box-shadow: none !important;
  transform: none;
}

#rate-slider .rateSwiper .swiper-slide:nth-child(odd) .rate-card {
  background: var(--rate-blue-bg) !important;
}

#rate-slider .rateSwiper .swiper-slide:nth-child(even) .rate-card {
  background: var(--rate-green-bg) !important;
}

#rate-slider .rateSwiper .swiper-slide:nth-child(odd) .rate-card-rate {
  color: var(--rate-navy) !important;
}

#rate-slider .rateSwiper .swiper-slide:nth-child(even) .rate-card-rate {
  color: var(--rate-green) !important;
}

#rate-slider .rateSwiper .swiper-slide:nth-child(odd) .rate-card {
  transform: translateY(0);
}

#rate-slider .rateSwiper .swiper-slide:nth-child(even) .rate-card {
  transform: translateY(10px);
}

.rate-card-title {
  margin: 0 0 6px;
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: normal;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  word-break: normal !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  hyphens: none !important;
  min-height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rate-card-label {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: 6px;
}

.rate-card-rate {
  font-size: clamp(24px, 5vw, 30px);
  font-weight: 600;
  margin-bottom: 10px;
}

.rate-card .rate-card-arrow {
  display: flex;
  justify-content: center;
}

.rate-card .rate-card-arrow i {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #fff;
  color: var(--rate-accent);
  font-size: 16px;
  box-shadow: none;
}

@media (max-width: 991.98px) {
  #rate-slider .rate-card {
    padding: 18px;
    border-radius: 20px;
  }
}

@media (max-width: 767.98px) {
  .rate-card-rate {
    font-size: 28px;
  }
}

#rate-slider .card,
#rate-slider .card:hover,
#rate-slider .card:focus,
#rate-slider .card:active {
  box-shadow: none !important;
}

/* -----------------------------------------------------------------------------
   Homepage News Strip (#news .mySwiper)
   ----------------------------------------------------------------------------- */
#news .mySwiper .card {
  --card-bg: #ffffff;
  background: var(--card-bg);
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
  box-shadow: var(--glow);
  outline: 0 solid transparent;
  border-radius: 1rem;
}

#news .mySwiper .card-body,
#news .mySwiper .card-footer {
  background: var(--card-bg);
  transition: background .35s ease;
}

#news .mySwiper .card .card-footer {
  background: var(--card-bg) !important;
}

#news .mySwiper .card:hover {
  transform: translateY(calc(-1 * var(--hover-lift))) rotate(var(--hover-rotate));
  box-shadow: var(--glow-hover);
  --card-bg: var(--card-hover-bg);
}

#news .mySwiper .card-accent-bar {
  background: linear-gradient(90deg, var(--news-accent), var(--news-accent)) left/0% 100% no-repeat,
              linear-gradient(90deg, color-mix(in oklab, var(--news-accent) 50%, #fff), color-mix(in oklab, var(--news-accent) 50%, #fff)) left/100% 100% no-repeat;
  transition: background-size .5s ease;
  height: 4px;
  border-radius: 0 0 1rem 1rem;
}

#news .mySwiper .card:hover .card-accent-bar {
  background-size: 100% 100%, 100% 100%;
}

#news .mySwiper .card-img-container {
  position: relative;
  overflow: hidden;
}

#news .mySwiper .card-img-container img {
  width: 100%;
  transform: translateY(0) scale(1);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .3s ease;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--img-angle)), 0 100%);
}

#news .mySwiper .card:hover .card-img-container img {
  transform: translateY(calc(-1 * var(--img-parallax))) scale(var(--img-zoom));
  filter: saturate(1.03) contrast(1.02);
}

#news .mySwiper .card-img-container::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(75deg, transparent 35%, rgba(255,255,255,.16) 45%, transparent 55%);
  transform: translateX(-120%);
  transition: transform .8s ease;
}

#news .mySwiper .card:hover .card-img-container::before {
  transform: translateX(120%);
}

#news .mySwiper .card .btn {
  transition: transform .25s ease, box-shadow .25s ease;
}

#news .mySwiper .card:hover .btn {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

#news .mySwiper .card .btn::after {
  content: none !important;
}

/* -----------------------------------------------------------------------------
   Homepage Community Section — Masonry + Stats
   ----------------------------------------------------------------------------- */
.masonry {
  column-gap: 1.5rem;
}

@media (min-width: 768px) {
  .masonry {
    column-count: 2;
  }
}

@media (min-width: 992px) {
  .masonry {
    column-count: 3;
  }
}

.masonry-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 1.5rem;
}

/* Homepage stat card overrides (tighter padding than global .card-stat) */
.stat-tight .card-body {
  padding: .6rem .75rem !important;
}

/* Homepage stat-value overrides (different sizing than global) */
#commsection .stat-value {
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1;
  font-size: clamp(1.6rem, 1.2vw + 1rem, 2.2rem);
  margin: 0;
}

/* Homepage stat-label overrides */
#commsection .stat-label {
  margin: 0;
  font-size: .8125rem;
  font-weight: 700;
}

.card .card-title,
.fw-bold {
  font-weight: 800 !important;
}

.masonry .card-title {
  font-size: clamp(1rem, 1.2vw + 0.5rem, 1.25rem);
}

.bg-soft-primary .stat-value,
.bg-soft-primary .stat-label {
  color: #102A43;
}

.bg-soft-info .stat-value,
.bg-soft-info .stat-label {
  color: #0B3A6E;
}

.bg-soft-success .stat-value,
.bg-soft-success .stat-label {
  color: #0F5132;
}

.bg-soft-warning .stat-value,
.bg-soft-warning .stat-label {
  color: #2C2C2C;
}

.card .text-muted {
  color: #5A6573 !important;
}

.img-short {
  height: 150px;
  object-fit: cover;
}

.img-mid {
  height: 220px;
  object-fit: cover;
}

.img-tall {
  height: 300px;
  object-fit: cover;
}

.card-hover-lift {
  transition: transform .18s ease, box-shadow .18s ease;
}

.card-hover-lift:hover {
  transform: translateY(-2px);
}

.card.rounded-4 {
  border-radius: 1rem;
}

.card.border-0 {
  border: 1px solid rgba(16,42,67,.06);
}

@media (min-width: 1200px) {
  .masonry {
    column-gap: 1.75rem;
  }
  .masonry-item {
    margin-bottom: 1.75rem;
  }
}

/* -----------------------------------------------------------------------------
   Homepage Member Reviews Section
   ----------------------------------------------------------------------------- */
/* Reviews collage image: overlap, no card/bg/shadow */
.reviews-hero-img,
.position-relative > img.img-fluid.w-100 {
  display: block;
  width: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  height: clamp(240px, 30vw, 400px);
  margin-bottom: -110px;
  position: relative;
  z-index: 2;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Make sure the reviews card tucks under the image cleanly */
.reviews-card,
.position-relative > img.img-fluid.w-100 + .card {
  position: relative;
  z-index: 1;
  margin-top: 0;
}

/* Hide any leftover badge/topcap */
.reviews-topcap,
.member-reviews-badge {
  display: none !important;
}

/* Mobile tweak: slightly less overlap, shorter image */
@media (max-width: 575.98px) {
  .reviews-hero-img,
  .position-relative > img.img-fluid.w-100 {
    height: clamp(200px, 42vw, 320px);
    margin-bottom: -22px;
  }
}

/* -----------------------------------------------------------------------------
   Homepage Go Further — Hero + Floating Cards (Modern Glow Effect)
   ----------------------------------------------------------------------------- */
.resources-section-modern {
  background: var(--wm-white, #FFFFFF);
  padding-top: 0 !important;
}

.hero-resources {
  position: relative;
  overflow: hidden;
  height: 60vh;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 0;
  /* Base dark color - photo will show through */
  background: var(--wm-abyss, #00185E);
}

/* Background photo layer - set via --hero-bg inline style in HTML */
.hero-resources::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-bg, none) center/cover no-repeat;
  opacity: 0.35;
  z-index: 0;
}

/* Glow effects using pseudo-elements (contained within hero) */
.hero-resources::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: 
    /* Blue glow - top right */
    radial-gradient(ellipse 50% 50% at 85% 15%, rgba(0,140,255,0.5) 0%, transparent 60%),
    /* Green glow - top left */
    radial-gradient(ellipse 45% 45% at 10% 20%, rgba(0,214,143,0.4) 0%, transparent 60%),
    /* Subtle overlay */
    linear-gradient(180deg, rgba(0,24,94,0.2) 0%, rgba(13,59,113,0.4) 100%);
  animation: glowShift 25s ease-in-out infinite;
}

@keyframes glowShift {
  0%, 100% { 
    background-position: 0% 0%, 0% 0%, 0% 0%;
    opacity: 1;
  }
  50% { 
    background-position: 5% 5%, -5% 5%, 0% 0%;
    opacity: 0.85;
  }
}

/* Content sits above all effects */
.hero-resources .container {
  position: relative;
  z-index: 10;
}

.hero-resources h1,
.hero-resources h2 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,0.4);
  letter-spacing: .02em;
  margin: 0;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero-resources::after { animation: none !important; }
}

.cards-container {
  position: relative;
  margin-top: -10rem;
  padding: 0 1rem;
  z-index: 1;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.resource-card {
  background: linear-gradient(145deg, #fff, #f0f4f8);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,.1);
  overflow: hidden;
  opacity: 0;
  transform: translateY(50px);
  animation: cardEntrance .8s ease forwards;
}

.resource-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
}

.resource-card:nth-child(1) { animation-delay: .2s; }
.resource-card:nth-child(2) { animation-delay: .4s; }
.resource-card:nth-child(3) { animation-delay: .6s; }
.resource-card:nth-child(4) { animation-delay: .8s; }

@keyframes cardEntrance {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-icon {
  font-size: 3rem;
  color: var(--wm-westmark-blue);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}

/* Scoped to resources section to avoid conflicts */
.resources-section-modern .card-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #00185E;
}

.resources-section-modern .card-text {
  font-size: 1rem;
  color: #0D3B71;
}

.card-link {
  color: #00185E;
  text-decoration: none !important;
  font-weight: 500;
  position: relative;
  transition: color .25s ease, transform .25s ease;
}

.card-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: var(--wm-underline-h, 2px);
  background: linear-gradient(90deg, var(--wm-accent, #00D68F), rgba(0,214,143,.35));
  transition: width .3s ease;
  pointer-events: none;
}

.card-link:hover,
.card-link:focus {
  color: #00185E !important;
  text-decoration: none !important;
}

.card-link:hover::after,
.card-link:focus::after {
  width: 100% !important;
}

@media (max-width: 768px) {
  .hero-resources {
    height: 50vh;
    min-height: 320px;
  }
  .cards-container {
    margin-top: -6rem;
  }
  .cards-grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
   Homepage Goals Widget Section
   ----------------------------------------------------------------------------- */
.goals-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  max-width: 520px;
}

.goals-preview-card {
  position: relative;
  transition: box-shadow 0.3s ease, background 0.3s ease, z-index 0s;
  animation-fill-mode: both !important;
}

.goals-preview-card:hover {
  z-index: 10 !important;
  transform: translateY(-6px) rotate(0deg) scale(1.04) !important;
  box-shadow: 0 25px 50px rgba(0,0,0,0.4) !important;
  background: rgba(255,255,255,0.14) !important;
}

.goals-cta-section .btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 35px rgba(0, 214, 143, 0.5), 0 0 0 0 rgba(0, 214, 143, 0.4) !important;
}

/* Goals card floating animations */
@keyframes float-card-1 {
  0%, 100% { transform: rotate(-4deg) translateY(-5px); }
  50% { transform: rotate(-4deg) translateY(-17px); }
}

@keyframes float-card-2 {
  0%, 100% { transform: rotate(3deg) translateY(12px) translateX(-10px); }
  50% { transform: rotate(3deg) translateY(0px) translateX(-10px); }
}

@keyframes float-card-3 {
  0%, 100% { transform: rotate(-2.5deg) translateX(25px); }
  50% { transform: rotate(-2.5deg) translateX(25px) translateY(-12px); }
}

@keyframes float-card-4 {
  0%, 100% { transform: rotate(4deg) translateY(-8px) translateX(-15px); }
  50% { transform: rotate(4deg) translateY(-20px) translateX(-15px); }
}

@keyframes float-card-5 {
  0%, 100% { transform: rotate(-3deg) translateX(20px) translateY(5px); }
  50% { transform: rotate(-3deg) translateX(20px) translateY(-7px); }
}

@keyframes float-card-6 {
  0%, 100% { transform: rotate(2.5deg) translateX(-8px); }
  50% { transform: rotate(2.5deg) translateX(-8px) translateY(-12px); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

/* -----------------------------------------------------------------------------
   Homepage Accessibility
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mySwiper .card,
  #news .mySwiper .card,
  #news .mySwiper .card * {
    transition: none !important;
    animation: none !important;
  }
}

/* -----------------------------------------------------------------------------
   About Page - Members Section Image
   ----------------------------------------------------------------------------- */
#members {
  position: relative;
  overflow: hidden;
}
.members-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 45%;
  background: url('../../images/woman.png') no-repeat right center;
  background-size: auto 100%;
}
.members-copy {
  position: relative;
  z-index: 1;
}

/* End Homepage-Specific Styles */

/* =============================================================================
   REVIEWS WIDGET
   Member reviews carousel - loaded from JSON
   ============================================================================= */

/* Section wrapper */
.reviews-widget-section {
  background: linear-gradient(180deg, #f8fafc 0%, #fff 50%, #f8fafc 100%);
  position: relative;
  overflow: hidden;
}

.reviews-widget-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(0, 214, 143, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(13, 59, 113, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

/* Main widget container */
.reviews-widget {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Swiper wrapper with nav buttons */
.reviews-widget__swiper-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

/* The swiper container */
.reviews-widget__swiper {
  flex: 1;
  overflow: hidden;
  padding: 1rem 0 2rem;
}

/* Individual review card */
.reviews-widget__card {
  background: #fff;
  border-radius: 1.25rem;
  padding: 1.75rem;
  height: 100%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 10px 20px -5px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.reviews-widget__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--wm-mountain-green, #00D68F), var(--wm-westmark-blue, #008CFF));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.reviews-widget__card:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 24px -8px rgba(0, 0, 0, 0.12),
    0 20px 40px -12px rgba(0, 0, 0, 0.15);
}

.reviews-widget__card:hover::before {
  opacity: 1;
}

/* Card header with avatar and author */
.reviews-widget__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Avatar circle */
.reviews-widget__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wm-midnight, #0D3B71), var(--wm-westmark-blue, #008CFF));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(13, 59, 113, 0.25);
}

.reviews-widget__avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.reviews-widget__avatar-initials {
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.5px;
}

/* Author info block */
.reviews-widget__author-info {
  flex: 1;
  min-width: 0;
}

.reviews-widget__author {
  font-size: 1rem;
  font-weight: 700;
  color: var(--wm-midnight, #0D3B71);
  margin: 0 0 0.25rem;
  line-height: 1.3;
}

/* Meta row: stars + date */
.reviews-widget__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.reviews-widget__stars {
  display: flex;
  gap: 2px;
  color: var(--wm-bright-sun, #FFCE02);
  font-size: 0.875rem;
}

.reviews-widget__stars i {
  filter: drop-shadow(0 1px 2px rgba(255, 206, 2, 0.3));
}

.reviews-widget__date {
  font-size: 0.8125rem;
  color: #8892a0;
}

/* Review text/quote */
.reviews-widget__text {
  flex: 1;
  margin: 0;
  padding: 0;
  border: none;
  position: relative;
}

.reviews-widget__quote-icon {
  position: absolute;
  top: -0.5rem;
  left: -0.25rem;
  font-size: 2.5rem;
  color: var(--wm-mountain-green, #00D68F);
  opacity: 0.15;
  line-height: 1;
  pointer-events: none;
}

.reviews-widget__text p {
  font-size: 1rem;
  line-height: 1.7;
  color: #4a5568;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Truncated text state */
.reviews-widget__text--truncated p {
  max-height: 5.1em; /* ~3 lines at 1.7 line-height */
  overflow: hidden;
  position: relative;
}

.reviews-widget__text--truncated p::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  pointer-events: none;
}

/* Expanded text state */
.reviews-widget__text--expanded p {
  max-height: none;
  overflow: visible;
}

.reviews-widget__text--expanded p::after {
  display: none;
}

/* Read more/less button */
.reviews-widget__read-more {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wm-westmark-blue, #008CFF);
  cursor: pointer;
  transition: color 0.2s ease;
}

.reviews-widget__read-more:hover {
  color: var(--wm-midnight, #0D3B71);
  text-decoration: underline;
}

.reviews-widget__read-more:focus {
  outline: 2px solid var(--wm-westmark-blue, #008CFF);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Location badge */
.reviews-widget__location {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.8125rem;
  color: #8892a0;
}

.reviews-widget__location i {
  color: var(--wm-mountain-green, #00D68F);
}

/* Navigation buttons */
.reviews-widget__nav {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--wm-midnight, #0D3B71);
  background: #fff;
  color: var(--wm-midnight, #0D3B71);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
  z-index: 10;
}

.reviews-widget__nav:hover {
  background: var(--wm-midnight, #0D3B71);
  color: #fff;
  transform: scale(1.05);
}

.reviews-widget__nav:focus-visible {
  outline: 3px solid var(--wm-westmark-blue, #008CFF);
  outline-offset: 2px;
}

.reviews-widget__nav:disabled,
.reviews-widget__nav.swiper-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.reviews-widget__nav i {
  font-size: 1.25rem;
}

/* Footer: pagination + source */
.reviews-widget__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* Pagination dots */
.reviews-widget__pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.reviews-widget__pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: var(--wm-loblolly, #C0C7CB);
  opacity: 1;
  transition: all 0.25s ease;
}

.reviews-widget__pagination .swiper-pagination-bullet-active {
  background: var(--wm-mountain-green, #00D68F);
  width: 28px;
  border-radius: 5px;
}

/* Google source attribution */
.reviews-widget__source {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #8892a0;
}

.reviews-widget__source i {
  font-size: 1rem;
  color: #4285F4;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .reviews-widget__nav {
    display: none;
  }
  
  .reviews-widget__swiper-wrap {
    gap: 0;
  }
  
  .reviews-widget__card {
    min-height: 260px;
  }
}

@media (max-width: 767.98px) {
  .reviews-widget {
    padding: 0;
  }
  
  .reviews-widget__card {
    padding: 1.5rem;
    min-height: auto;
  }
  
  .reviews-widget__avatar {
    width: 44px;
    height: 44px;
  }
  
  .reviews-widget__avatar-initials {
    font-size: 1rem;
  }
  
  .reviews-widget__text p {
    font-size: 0.9375rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reviews-widget__card,
  .reviews-widget__nav,
  .reviews-widget__pagination .swiper-pagination-bullet {
    transition: none !important;
  }
  
  .reviews-widget__card:hover {
    transform: none;
  }
}

/* Dark mode variant (optional) */
.reviews-widget--dark .reviews-widget__card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255, 255, 255, 0.1);
}

.reviews-widget--dark .reviews-widget__author {
  color: #fff;
}

.reviews-widget--dark .reviews-widget__text p {
  color: rgba(255, 255, 255, 0.85);
}

.reviews-widget--dark .reviews-widget__date,
.reviews-widget--dark .reviews-widget__location,
.reviews-widget--dark .reviews-widget__source {
  color: rgba(255, 255, 255, 0.6);
}

.reviews-widget--dark .reviews-widget__nav {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.reviews-widget--dark .reviews-widget__nav:hover {
  background: #fff;
  color: var(--wm-midnight, #0D3B71);
}

/* End Reviews Widget */

/*=============================================================================
= Section Background Utilities
=============================================================================*/
/* Grey fade to white - for member corner and similar sections */
.bg-grey-fade-white {
  background: linear-gradient(
    to bottom,
    #f0f4f8 0%,
    #f5f8fb 40%,
    #fafcfd 70%,
    #ffffff 100%
  );
  position: relative;
  overflow: hidden;
}

/* Subtle decorative flourish (optional inner glow effect) */
.bg-grey-fade-white::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(13, 59, 113, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 85% 80%, rgba(0, 140, 255, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.bg-grey-fade-white > * {
  position: relative;
  z-index: 1;
}

/* Community section - soft blue with glassmorphism glow */
.bg-community-glow {
  background: linear-gradient(
    135deg,
    #e8f4fc 0%,
    #f0f6fa 25%,
    #e5f0f8 50%,
    #eef5fb 75%,
    #f5f9fc 100%
  );
  position: relative;
  overflow: hidden;
}

/* Animated glow orbs */
.bg-community-glow::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 140, 255, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  top: -150px;
  left: -100px;
  animation: community-glow-float 15s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.bg-community-glow::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 214, 143, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  bottom: -100px;
  right: -50px;
  animation: community-glow-float 12s ease-in-out infinite reverse;
  pointer-events: none;
  z-index: 0;
}

/* Third accent glow via inner pseudo */
.bg-community-glow > .container::before {
  content: '';
  position: absolute;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(13, 59, 113, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  animation: community-glow-pulse 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.bg-community-glow > .container {
  position: relative;
}

.bg-community-glow > .container > * {
  position: relative;
  z-index: 1;
}

/* Subtle noise texture overlay for depth */
.bg-community-glow .masonry-item .card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 
    0 4px 24px rgba(13, 59, 113, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bg-community-glow .masonry-item .card:hover {
  box-shadow: 
    0 8px 32px rgba(13, 59, 113, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Keep stat cards with their original bg colors but add glass effect */
.bg-community-glow .masonry-item .card.bg-soft-primary,
.bg-community-glow .masonry-item .card.bg-soft-success,
.bg-community-glow .masonry-item .card.bg-soft-info,
.bg-community-glow .masonry-item .card.bg-abyss {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

@keyframes community-glow-float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(30px, 20px) scale(1.1);
    opacity: 1;
  }
}

@keyframes community-glow-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 0.9;
  }
}

/* ===============================================================================
   SITE SEARCH 360 — Minimal Overrides for Westmark
   =============================================================================== */

/* Z-index to ensure modal appears above offcanvas */
.ss360-darken {
  background-color: rgba(0, 24, 94, 0.9) !important;
  z-index: 10040 !important;
}

#ss360-layer {
  z-index: 10050 !important;
}

/* Brand color for links */
#ss360-layer a {
  color: var(--wm-westmark-blue);
}

#ss360-layer a:hover {
  color: var(--wm-midnight);
}

/* Highlighted search terms */
#ss360-layer mark,
.ss360-highlight {
  background: #b5f948 !important;
  color: #000 !important;
  padding: 1px 3px !important;
  border-radius: 2px !important;
}

/*=============================================================================
= Simple Table – keeps normal table layout on mobile
= (overrides the stacked-card transform for simple 2-column tables)
=============================================================================*/
.table-simple .table thead {
  display: table-header-group !important;
}
.table-simple .table tbody tr {
  display: table-row !important;
  margin-bottom: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.table-simple .table tbody td {
  display: table-cell !important;
  border: none !important;
  border-bottom: 1px solid #dee2e6 !important;
  text-align: left !important;
}
.table-simple .table tbody td:before {
  content: none !important;
}

/*=============================================================================
= Comparison Card / Comparison Table
= Forces normal table layout on mobile (overrides the stacked-card transform)
=============================================================================*/
.comparison-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.08);
  padding: 1.25rem;
  border: 1px solid rgba(0,0,0,.05);
}
/* Override global table-responsive card transform for comparison tables */
.comparison-card .table-responsive .table thead {
  display: table-header-group !important;
}
.comparison-card .table-responsive .table tbody tr {
  display: table-row !important;
  margin-bottom: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.comparison-card .table-responsive .table tbody td {
  display: table-cell !important;
  text-align: center !important;
  border: none !important;
  border-bottom: 1px solid #dee2e6 !important;
}
.comparison-card .table-responsive .table tbody td:before {
  content: none !important;
}
.comparison-card .table-responsive .table tfoot tr {
  display: table-row !important;
  margin-bottom: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.comparison-card .table-responsive .table tfoot td {
  display: table-cell !important;
  border: none !important;
}
.comparison-card .table-responsive .table tfoot td:before {
  content: none !important;
}
/* Comparison Table Styles */
.comparison-table {
  font-size: 1.025rem;
  margin: 0;
  min-width: 500px;
}
.comparison-table thead th {
  background: var(--wm-midnight, #0D3B71) !important;
  color: #fff !important;
  font-size: .875rem;
  font-weight: 600;
  padding: .6rem .4rem;
  text-transform: uppercase;
  letter-spacing: .025em;
  white-space: nowrap;
  vertical-align: middle;
}
.comparison-table tbody td {
  padding: .5rem .4rem;
  vertical-align: middle;
}
.comparison-table tbody td:first-child {
  text-align: left !important;
  font-weight: 600;
  color: var(--wm-midnight, #0D3B71);
  background: #f8f9fa;
  white-space: nowrap;
}
.comparison-table tfoot td {
  padding: .6rem .4rem;
}
.comparison-table tfoot td:first-child {
  text-align: left !important;
}
/* -- Comparison table with light header (icons + product names) -- */
.comparison-table-light thead th {
  background: var(--bs-gray-100, #f8f9fa) !important;
  color: var(--wm-midnight, #0D3B71) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: normal !important;
  white-space: normal;
  padding: .75rem .5rem;
}
.comparison-table-light tbody td:first-child {
  white-space: normal;
}
@media (max-width: 767px) {
  .comparison-card {
    padding: .5rem;
    margin-left: -.75rem;
    margin-right: -.75rem;
    border-radius: 0;
    box-shadow: none;
    border-left: 0;
    border-right: 0;
  }
  .comparison-table {
    font-size: .875rem;
  }
  .comparison-table thead th {
    font-size: .775rem;
    padding: .4rem .25rem;
  }
  .comparison-table tbody td,
  .comparison-table tfoot td {
    padding: .4rem .25rem;
  }
  .comparison-table .btn-sm,
  .comparison-table .btn {
    font-size: .775rem;
    padding: .25rem .5rem;
  }
  .comparison-table .bi {
    font-size: .925rem;
  }
  /* Light-header variant mobile tweaks */
  .comparison-table-light thead th .rounded-circle {
    width: 36px !important;
    height: 36px !important;
  }
  .comparison-table-light thead th .rounded-circle i {
    font-size: 1rem !important;
  }
  .comparison-table-light thead th h5 {
    font-size: .75rem;
    margin-bottom: 0;
  }
}