/* ==========================================================================
   MedTech For Solutions — Global Stylesheet (Divi 5 Edition)
   --------------------------------------------------------------------------
   Aligned to: Brand Strategy & Guidelines v1.0 (March 2026)
   Target:     WordPress Divi 5 Theme  |  medtech4solutions.com

   Backward compatible with both naming conventions used across the site:
     • Long-form (.nav-links, .btn-primary, .feat-card, .section, ...)
     • Short-form (.nl, .bp, .fc, .sec, ...)

   Brand palette (per Section 3.1 of Brand Guidelines):
     Primary:   Teal #1A8A8A · Plum #6B2D5B
     Accent:    Lime #B5CC18 · Orange #E87722
     Neutrals:  Dark Navy #1A1A2E · Dark 80% #3D3D52 · Dark 60% #616175
                Gray Warm #F7F6F4 · Gray Cool #F0F2F5

   Typography (per Section 3.2):
     Display:   Playfair Display 600  (hero, H1)
     UI:        DM Sans 600           (H2, H3, overlines, buttons, nav)
     Body:      Source Sans 3 400     (paragraphs, captions)

   Grid:        1200px container · 24px gutters · 1024 / 768 breakpoints
   Compliance:  WCAG 2.1 AA contrast, reduced-motion respected
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. WEB FONTS
   --------------------------------------------------------------------------
   Fonts are NOT @imported here. They are enqueued via functions.php as a
   separate stylesheet handle ('medtech-fonts') so they can load in parallel
   with this file rather than blocking it. To swap in self-hosted fonts,
   deregister 'medtech-fonts' in your child-theme functions and enqueue
   your own. The font stacks below in section 1.2 still apply.
   -------------------------------------------------------------------------- */


/* ==========================================================================
   1. DESIGN TOKENS — Divi 5 Global CSS Color Scheme
   --------------------------------------------------------------------------
   All brand tokens are declared at :root for global consistency. Reference
   them in Divi 5 module Custom CSS as: color: var(--mt-teal);

   Divi 5 Global Color Picker mapping (paste hex into Divi → Settings →
   General → Global Colors):
     Color 1  →  #1A8A8A  (MedTech Teal — Primary)
     Color 2  →  #6B2D5B  (MedTech Plum — Secondary)
     Color 3  →  #B5CC18  (MedTech Lime — Accent)
     Color 4  →  #E87722  (MedTech Orange — Warm Accent)
     Color 5  →  #1A1A2E  (Dark Navy — Headings/Footer)
     Color 6  →  #616175  (Dark 60% — Body Text)
     Color 7  →  #F7F6F4  (Gray Warm — Section BG)
     Color 8  →  #F0F2F5  (Gray Cool — Input BG)
   ========================================================================== */
:root {

  /* ---- 1.1 Brand Primary Colors ---------------------------------------- */
  --mt-teal:          #1A8A8A;   /* Primary — CTAs, links, key UI */
  --mt-teal-dark:     #136B6B;   /* Hover, gradient stops */
  --mt-teal-darker:   #0E5252;   /* Pressed state, deep accents */
  --mt-teal-light:    #D7EBEB;   /* Tint backgrounds */
  --mt-teal-pale:     #EBF5F5;   /* Whisper tint */

  --mt-plum:          #6B2D5B;   /* Secondary — premium headings */
  --mt-plum-dark:     #4A1D40;   /* Hover, depth */
  --mt-plum-light:    #F0E5EC;   /* Tint backgrounds */

  --mt-lime:          #B5CC18;   /* Accent — success, badges, energy */
  --mt-lime-dark:     #94A813;   /* Hover, depth */
  --mt-lime-light:    #F1F5D2;   /* Tint backgrounds */

  --mt-orange:        #E87722;   /* Warm Accent — alerts, urgency */
  --mt-orange-dark:   #C45F18;   /* Hover, depth */
  --mt-orange-light:  #FCE6D5;   /* Tint backgrounds */

  /* ---- 1.2 Brand Neutrals (per Brand Guidelines 3.1) ------------------- */
  --mt-dark-navy:     #1A1A2E;   /* Primary text, dark BG, header/footer */
  --mt-dark-80:       #3D3D52;   /* Secondary text, subheadings */
  --mt-dark-60:       #616175;   /* Body text, descriptions */
  --mt-gray-warm:     #F7F6F4;   /* Section BG, alternating rows */
  --mt-gray-cool:     #F0F2F5;   /* Input BG, subtle dividers */

  --mt-white:         #FFFFFF;
  --mt-off-white:     #FAFAFB;

  /* ---- 1.3 Functional Greys (extended scale for borders/states) -------- */
  --mt-gray-100:      #F0F2F5;   /* alias of --mt-gray-cool */
  --mt-gray-200:      #D9DCE2;   /* Borders, dividers */
  --mt-gray-300:      #B8BDC7;   /* Disabled borders */
  --mt-gray-400:      #9498A6;   /* Placeholder text, icons */
  --mt-gray-500:      #777C8C;   /* Tertiary text */
  --mt-gray-600:      #616175;   /* alias of --mt-dark-60 */
  --mt-gray-700:      #494B60;
  --mt-gray-800:      #3D3D52;   /* alias of --mt-dark-80 */
  --mt-gray-900:      #1A1A2E;   /* alias of --mt-dark-navy */

  /* ---- 1.4 Brand Color Tints (alpha overlays — use as-is) -------------- */
  --mt-teal-a08:      rgba(26, 138, 138, .08);
  --mt-teal-a10:      rgba(26, 138, 138, .10);
  --mt-teal-a15:      rgba(26, 138, 138, .15);
  --mt-teal-a20:      rgba(26, 138, 138, .20);
  --mt-teal-a40:      rgba(26, 138, 138, .40);

  --mt-plum-a08:      rgba(107, 45, 91, .08);
  --mt-plum-a10:      rgba(107, 45, 91, .10);
  --mt-plum-a15:      rgba(107, 45, 91, .15);

  --mt-lime-a10:      rgba(181, 204, 24, .10);
  --mt-lime-a15:      rgba(181, 204, 24, .15);
  --mt-lime-a20:      rgba(181, 204, 24, .20);
  --mt-lime-a40:      rgba(181, 204, 24, .40);

  --mt-orange-a08:    rgba(232, 119, 34, .08);
  --mt-orange-a10:    rgba(232, 119, 34, .10);
  --mt-orange-a15:    rgba(232, 119, 34, .15);

  /* ---- 1.5 Semantic / State Colors ------------------------------------- */
  --mt-success:       #16A34A;
  --mt-success-bg:    #DCFCE7;
  --mt-warning:       #E87722;   /* maps to brand orange */
  --mt-warning-bg:    #FCE6D5;
  --mt-error:         #DC2626;
  --mt-error-bg:      #FEE2E2;
  --mt-info:          #1A8A8A;   /* maps to brand teal */
  --mt-info-bg:       #D7EBEB;

  /* ---- 1.6 Utility Accents (for diverse service-card variants) --------- */
  --mt-blue:          #3B82F6;
  --mt-blue-a10:      rgba(59, 130, 246, .10);
  --mt-red:           #EF4444;
  --mt-red-a10:       rgba(239, 68, 68, .10);

  /* ---- 1.7 Brand Gradients --------------------------------------------- */
  --mt-grad-primary:  linear-gradient(135deg, #1A8A8A 0%, #136B6B 100%);
  --mt-grad-energy:   linear-gradient(135deg, #1A8A8A 0%, #B5CC18 100%);
  --mt-grad-warmth:   linear-gradient(135deg, #E87722 0%, #6B2D5B 100%);
  --mt-grad-aurora:   linear-gradient(135deg, #6B2D5B 0%, #1A8A8A 50%, #B5CC18 100%);
  --mt-grad-hero:     radial-gradient(ellipse 600px 400px at 15% 50%, rgba(26, 138, 138, .22) 0%, transparent 70%),
                      radial-gradient(ellipse 500px 500px at 85% 30%, rgba(107, 45, 91, .14) 0%, transparent 70%),
                      radial-gradient(ellipse 400px 300px at 50% 90%, rgba(232, 119, 34, .10) 0%, transparent 70%);

  /* ---- 1.8 Typography -------------------------------------------------- */
  --ff-display:       'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-ui:            'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-body:          'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid type scale (per Brand Guidelines 3.2) */
  --fs-hero:          clamp(2.8rem, 5vw + 1rem, 4.2rem);
  --fs-h1:            clamp(2rem, 3vw + 1rem, 3rem);
  --fs-h2:            clamp(1.6rem, 1.5vw + 1rem, 2.2rem);
  --fs-h3:            clamp(1.2rem, 0.6vw + 1rem, 1.5rem);
  --fs-body:          1.0625rem;     /* 17px */
  --fs-body-sm:       0.9375rem;     /* 15px */
  --fs-overline:      0.75rem;       /* 12px */
  --fs-caption:       0.8125rem;     /* 13px */

  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;

  --lh-tight:         1.2;
  --lh-snug:          1.35;
  --lh-normal:        1.55;
  --lh-relaxed:       1.65;

  --tracking-overline: 1.5px;
  --tracking-label:    1px;

  /* ---- 1.9 Spacing Scale (4px base) ----------------------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  100px;
  --sp-28:  120px;

  /* ---- 1.10 Radii ------------------------------------------------------ */
  --r-xs:   4px;
  --r-sm:   8px;
  --r:      12px;
  --r-md:   14px;
  --r-lg:   16px;
  --r-xl:   20px;
  --rl:     20px;             /* alias */
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ---- 1.11 Shadows ---------------------------------------------------- */
  --shadow-xs:   0 1px 2px rgba(26, 26, 46, .05);
  --shadow-sm:   0 1px 3px rgba(26, 26, 46, .08);
  --shadow:      0 4px 16px rgba(26, 26, 46, .08);
  --shadow-md:   0 8px 24px rgba(26, 26, 46, .10);
  --shadow-lg:   0 12px 40px rgba(26, 26, 46, .12);
  --shadow-xl:   0 16px 48px rgba(26, 26, 46, .14);
  --shadow-teal: 0 8px 32px rgba(26, 138, 138, .25);
  --shadow-plum: 0 8px 32px rgba(107, 45, 91, .25);

  /* ---- 1.12 Transitions ------------------------------------------------ */
  --t-fast:    150ms cubic-bezier(.4, 0, .2, 1);
  --t:         300ms cubic-bezier(.4, 0, .2, 1);
  --t-slow:    500ms cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);

  /* ---- 1.13 Z-Index Scale --------------------------------------------- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   500;
  --z-nav:      1000;
  --z-modal:    2000;
  --z-toast:    3000;

  /* ---- 1.14 Layout ----------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: 24px;
  --nav-height:    72px;

  /* =====================================================================
     1.15 BACKWARD-COMPATIBILITY ALIASES
     Existing pages use the short tokens below — they now resolve to the
     refreshed brand values. Do NOT remove without auditing every page.
     ===================================================================== */
  --teal:       var(--mt-teal);
  --teal-dark:  var(--mt-teal-dark);
  --teal-light: var(--mt-teal-light);
  --lime:       var(--mt-lime);
  --orange:     var(--mt-orange);
  --plum:       var(--mt-plum);
  --blue:       var(--mt-blue);
  --red:        var(--mt-red);

  --white:      var(--mt-white);
  --off-white:  var(--mt-off-white);

  --g50:  var(--mt-gray-warm);   /* #F7F6F4 */
  --g100: var(--mt-gray-cool);   /* #F0F2F5 */
  --g200: var(--mt-gray-200);
  --g400: var(--mt-gray-400);
  --g600: var(--mt-dark-60);     /* #616175 */
  --g800: var(--mt-dark-80);     /* #3D3D52 */
  --g900: var(--mt-dark-navy);   /* #1A1A2E */

  /* Short-form aliases (used by management-services pages) */
  --td: var(--mt-teal-dark);
  --tl: var(--mt-teal-light);
  --w:  var(--mt-white);
  --ow: var(--mt-off-white);

  /* =====================================================================
     1.16 DIVI 5 COMPATIBILITY ALIASES
     Divi 5 exposes global colors as --et_pb_global_color_*. These aliases
     let Divi modules using preset colors render with the brand palette
     even if a global color slot is reset.
     ===================================================================== */
  --et_pb_global_color_1: var(--mt-teal);
  --et_pb_global_color_2: var(--mt-plum);
  --et_pb_global_color_3: var(--mt-lime);
  --et_pb_global_color_4: var(--mt-orange);
  --et_pb_global_color_5: var(--mt-dark-navy);
  --et_pb_global_color_6: var(--mt-dark-60);
  --et_pb_global_color_7: var(--mt-gray-warm);
  --et_pb_global_color_8: var(--mt-gray-cool);
}


/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--mt-dark-80);
  line-height: var(--lh-relaxed);
  background: var(--mt-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Hero & H1 use Playfair Display (editorial) */
h1 {
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--mt-dark-navy);
  letter-spacing: -0.01em;
}

/* H2/H3/H4 use DM Sans (modern UI clarity) */
h2, h3, h4, h5, h6 {
  font-family: var(--ff-ui);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--mt-dark-navy);
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--t);
}

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: var(--mt-teal-a20);
  color: var(--mt-dark-navy);
}

/* Skip link for keyboard users (per Brand Guidelines 6.3 accessibility) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--mt-dark-navy);
  color: var(--mt-white);
  padding: 12px 20px;
  z-index: var(--z-toast);
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* Focus ring for accessibility */
:focus-visible {
  outline: 3px solid var(--mt-teal);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}


/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container,
.ctr {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}


/* --------------------------------------------------------------------------
   4. NAVIGATION (fixed, blur backdrop)
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(26, 26, 46, .06);
  transition: box-shadow var(--t);
}
.nav.scrolled {
  box-shadow: 0 4px 16px rgba(26, 26, 46, .08);
}

/* Long-form: .nav-inner / Short-form: .ni */
.nav-inner,
.ni {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}
.nav-logo img,
.ni img {
  height: 42px;
}

/* Nav links — .nav-links / .nl */
.nav-links,
.nl {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nl { gap: 28px; }

.nav-links a,
.nl a {
  font-family: var(--ff-ui);
  font-size: .9rem;
  font-weight: var(--fw-medium);
  color: var(--mt-dark-60);
  position: relative;
  padding-bottom: 2px;
}
.nl a { font-size: .88rem; }

.nav-links a::after,
.nl a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--mt-teal);
  transition: width var(--t);
}
.nav-links a:hover,
.nl a:hover { color: var(--mt-teal); }
.nav-links a:hover::after,
.nl a:hover::after { width: 100%; }

.nav-links a.active,
.nl a.ac {
  color: var(--mt-teal);
  font-weight: var(--fw-semibold);
}
.nav-links a.active::after,
.nl a.ac::after { width: 100%; }

/* Nav CTA button — .nav-cta / .nc */
.nav-cta,
.nc {
  background: var(--mt-teal) !important;
  color: var(--mt-white) !important;
  padding: 10px 24px !important;
  border-radius: var(--r-sm);
  font-family: var(--ff-ui);
  font-weight: var(--fw-semibold) !important;
  transition: all var(--t) !important;
}
.nc { padding: 10px 22px !important; }

.nav-cta::after,
.nc::after { display: none !important; }

.nav-cta:hover,
.nc:hover {
  background: var(--mt-teal-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-teal);
}

/* Hamburger — .hamburger / .hb */
.hamburger,
.hb {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
}
.hamburger span,
.hb span {
  width: 24px;
  height: 2px;
  background: var(--mt-dark-navy);
  border-radius: 2px;
}


/* --------------------------------------------------------------------------
   5. PAGE HERO (service / inner pages)
   -------------------------------------------------------------------------- */

/* Long-form */
.page-hero {
  padding: 140px 0 80px;
  position: relative;
  overflow: hidden;
  background: var(--mt-gray-warm);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 500px 300px at 10% 20%, var(--mt-teal-a10) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 90% 80%, var(--mt-plum-a08) 0%, transparent 70%);
}
.page-hero .container { position: relative; z-index: 1; }

.page-hero .breadcrumb {
  font-family: var(--ff-ui);
  font-size: var(--fs-caption);
  color: var(--mt-gray-500);
  margin-bottom: 16px;
}
.page-hero .breadcrumb a { color: var(--mt-gray-500); }
.page-hero .breadcrumb a:hover { color: var(--mt-teal); }

.page-hero h1 {
  font-size: var(--fs-h1);
  margin-bottom: 20px;
}
.page-hero h1 span { color: var(--mt-teal); }

.page-hero .subtitle {
  font-family: var(--ff-body);
  font-size: 1.15rem;
  color: var(--mt-dark-60);
  max-width: 640px;
  margin-bottom: 32px;
  line-height: var(--lh-relaxed);
}
.page-hero .hero-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Short-form (.ph) */
.ph {
  padding: 140px 0 80px;
  position: relative;
  overflow: hidden;
  background: var(--mt-gray-warm);
}
.ph::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 500px 300px at 10% 20%, var(--mt-teal-a10) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 90% 80%, var(--mt-plum-a08) 0%, transparent 70%);
}
.ph .ctr { position: relative; z-index: 1; }

.bc {
  font-family: var(--ff-ui);
  font-size: var(--fs-caption);
  color: var(--mt-gray-500);
  margin-bottom: 16px;
}
.bc a { color: var(--mt-gray-500); }
.bc a:hover { color: var(--mt-teal); }

.ph h1 {
  font-size: var(--fs-h1);
  margin-bottom: 20px;
}
.ph h1 span { color: var(--mt-teal); }
.ph .sub {
  font-family: var(--ff-body);
  font-size: 1.12rem;
  color: var(--mt-dark-60);
  max-width: 620px;
  margin-bottom: 32px;
  line-height: var(--lh-relaxed);
}
.hbtns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}


/* --------------------------------------------------------------------------
   6. HOMEPAGE / DARK HERO
   -------------------------------------------------------------------------- */
.hero {
  padding: 150px 0 100px;
  background: var(--mt-dark-navy);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mt-grad-hero);
}
.hero .ctr,
.hero .container { position: relative; z-index: 1; }

.hero .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--mt-lime-a40);
  border-radius: var(--r-pill);
  padding: 6px 18px;
  font-family: var(--ff-ui);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--mt-lime);
  margin-bottom: 24px;
  animation: fadeUp .6s ease both;
}
.hero .badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mt-lime);
  box-shadow: 0 0 12px var(--mt-lime-a40);
}

.hero h1 {
  font-size: var(--fs-hero);
  color: var(--mt-white);
  margin-bottom: 20px;
  animation: fadeUp .6s ease .1s both;
}
.hero h1 span {
  background: var(--mt-grad-energy);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero .sub {
  font-family: var(--ff-body);
  font-size: 1.15rem;
  color: rgba(255, 255, 255, .7);
  max-width: 680px;
  margin: 0 auto 40px;
  line-height: var(--lh-relaxed);
  animation: fadeUp .6s ease .2s both;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  animation: fadeUp .6s ease .3s both;
}
.hero-stat { text-align: center; }
.hero-stat .num {
  font-size: 2.4rem;
  font-weight: var(--fw-bold);
  color: var(--mt-white);
  font-family: var(--ff-display);
}
.hero-stat .lbl {
  font-family: var(--ff-ui);
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, .55);
  margin-top: 4px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   7. BADGES
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid;
  border-radius: var(--r-pill);
  padding: 6px 16px;
  font-family: var(--ff-ui);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Badge color variants */
.badge.b-teal   { color: var(--mt-teal);   border-color: var(--mt-teal-a40); background: var(--mt-teal-a10); }
.badge.b-teal   .dot { background: var(--mt-teal); }
.badge.b-plum   { color: var(--mt-plum);   border-color: var(--mt-plum-a15); background: var(--mt-plum-a08); }
.badge.b-plum   .dot { background: var(--mt-plum); }
.badge.b-lime   { color: var(--mt-lime-dark); border-color: var(--mt-lime-a40); background: var(--mt-lime-a15); }
.badge.b-lime   .dot { background: var(--mt-lime); }
.badge.b-orange { color: var(--mt-orange); border-color: var(--mt-orange-a15); background: var(--mt-orange-a10); }
.badge.b-orange .dot { background: var(--mt-orange); }


/* --------------------------------------------------------------------------
   8. BUTTONS
   -------------------------------------------------------------------------- */

/* Long-form: .btn-primary / .btn-secondary */
.btn-primary,
.bp {
  background: var(--mt-teal);
  color: var(--mt-white);
  padding: 14px 32px;
  border-radius: var(--r-pill);
  font-family: var(--ff-ui);
  font-weight: var(--fw-semibold);
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--t);
  border: none;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.btn-primary:hover,
.bp:hover {
  background: var(--mt-teal-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-teal);
}

.btn-secondary,
.bs {
  background: transparent;
  color: var(--mt-dark-navy);
  padding: 14px 32px;
  border-radius: var(--r-pill);
  font-family: var(--ff-ui);
  font-weight: var(--fw-semibold);
  font-size: .95rem;
  border: 2px solid var(--mt-gray-200);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--t);
  cursor: pointer;
}
.btn-secondary:hover,
.bs:hover {
  border-color: var(--mt-teal);
  color: var(--mt-teal);
}

/* Tertiary plum button */
.btn-plum {
  background: var(--mt-plum);
  color: var(--mt-white);
  padding: 14px 32px;
  border-radius: var(--r-pill);
  font-family: var(--ff-ui);
  font-weight: var(--fw-semibold);
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--t);
  border: none;
  cursor: pointer;
}
.btn-plum:hover {
  background: var(--mt-plum-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-plum);
}


/* --------------------------------------------------------------------------
   9. HERO STAT CARD (split-hero with stats panel on right)
   -------------------------------------------------------------------------- */
.hero-grid,
.hg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-stat-card,
.sc {
  background: var(--mt-white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  padding: 32px;
}

.stat-row,
.sr {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.stat-box,
.sb {
  background: var(--mt-gray-warm);
  border-radius: var(--r);
  padding: 20px;
  text-align: center;
}
.stat-box .num,
.sb .n {
  font-size: 1.8rem;
  font-weight: var(--fw-bold);
  color: var(--mt-teal);
  font-family: var(--ff-display);
}
.stat-box .lbl,
.sb .l {
  font-family: var(--ff-ui);
  font-size: var(--fs-caption);
  color: var(--mt-dark-60);
  margin-top: 4px;
}


/* --------------------------------------------------------------------------
   10. SECTIONS
   -------------------------------------------------------------------------- */

/* Long-form */
.section { padding: 100px 0; }
.section.alt { background: var(--mt-gray-warm); }
.section.cool { background: var(--mt-gray-cool); }
.section.dark {
  background: var(--mt-dark-navy);
  color: var(--mt-white);
}

/* Short-form */
.sec { padding: 100px 0; }
.sec.alt { background: var(--mt-gray-warm); }
.sec.cool { background: var(--mt-gray-cool); }
.sec.dk {
  background: var(--mt-dark-navy);
  color: var(--mt-white);
}

/* Section header — works on both */
.sh {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}
.sh h2 {
  font-size: var(--fs-h2);
  color: var(--mt-dark-navy);
  margin-bottom: 16px;
}
.sh p {
  font-family: var(--ff-body);
  font-size: 1.05rem;
  color: var(--mt-dark-60);
  line-height: var(--lh-relaxed);
}

.sh-label,
.shl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-ui);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  color: var(--mt-teal);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  margin-bottom: 16px;
}
.sh-label .dash,
.shl .d {
  width: 24px;
  height: 2px;
  background: var(--mt-teal);
  border-radius: 2px;
}

/* Inverted section header for dark sections */
.section.dark .sh h2,
.sec.dk .sh h2 { color: var(--mt-white); }
.section.dark .sh p,
.sec.dk .sh p { color: rgba(255, 255, 255, .65); }
.section.dark .sh-label,
.sec.dk .shl { color: var(--mt-lime); }
.section.dark .sh-label .dash,
.sec.dk .shl .d { background: var(--mt-lime); }


/* --------------------------------------------------------------------------
   11. CATEGORY HEADER (services hub page)
   -------------------------------------------------------------------------- */
.cat-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}
.cat-num {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-ui);
  font-weight: var(--fw-bold);
  font-size: 1.1rem;
  color: var(--mt-white);
  flex-shrink: 0;
  background: var(--mt-teal);
}
.cat-header h2 {
  font-size: var(--fs-h2);
  margin: 0;
}
.cat-header p {
  font-family: var(--ff-body);
  font-size: .95rem;
  color: var(--mt-dark-60);
  margin-top: 4px;
}


/* --------------------------------------------------------------------------
   12. FEATURE GRID (3-up cards)
   -------------------------------------------------------------------------- */

/* Long-form: .feat-grid / .feat-card */
.feat-grid,
.fg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.feat-card,
.fc {
  background: var(--mt-white);
  border-radius: var(--r-xl);
  padding: 36px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--mt-gray-cool);
  transition: all var(--t);
}
.feat-card:hover,
.fc:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--mt-teal);
}

.feat-ico {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.feat-ico.t { background: var(--mt-teal-a10); }
.feat-ico.t svg { color: var(--mt-teal); }
.feat-ico.o { background: var(--mt-orange-a10); }
.feat-ico.o svg { color: var(--mt-orange); }
.feat-ico.p { background: var(--mt-plum-a10); }
.feat-ico.p svg { color: var(--mt-plum); }
.feat-ico.l { background: var(--mt-lime-a15); }
.feat-ico.l svg { color: var(--mt-lime-dark); }
.feat-ico.b { background: var(--mt-blue-a10); }
.feat-ico.b svg { color: var(--mt-blue); }
.feat-ico.r { background: var(--mt-red-a10); }
.feat-ico.r svg { color: var(--mt-red); }
.feat-ico svg { width: 28px; height: 28px; }

.feat-card h3,
.fc h3 {
  font-family: var(--ff-ui);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  margin-bottom: 8px;
  color: var(--mt-dark-navy);
}
.feat-card p,
.fc p {
  font-family: var(--ff-body);
  font-size: .95rem;
  color: var(--mt-dark-60);
  line-height: var(--lh-relaxed);
}


/* --------------------------------------------------------------------------
   13. SERVICE CARDS (with top accent bar)
   -------------------------------------------------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.svc-grid.col2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 820px;
}

.svc-card {
  background: var(--mt-white);
  border-radius: var(--r-xl);
  padding: 32px;
  border: 1px solid var(--mt-gray-cool);
  transition: all .35s var(--ease-out);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.svc-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  transform: scaleX(0);
  transition: transform .4s var(--ease-out);
  transform-origin: left;
}
.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.svc-card:hover::before { transform: scaleX(1); }

.svc-card .ico {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.svc-card .ico svg { width: 26px; height: 26px; }
.svc-card h3 {
  font-family: var(--ff-ui);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  margin-bottom: 8px;
  color: var(--mt-dark-navy);
}
.svc-card p {
  font-family: var(--ff-body);
  font-size: .95rem;
  color: var(--mt-dark-60);
  line-height: var(--lh-relaxed);
  flex: 1;
}
.svc-card .link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-ui);
  font-size: .9rem;
  font-weight: var(--fw-semibold);
  color: var(--mt-teal);
  margin-top: 16px;
  transition: gap var(--t);
}
.svc-card:hover .link { gap: 10px; }
.svc-card .link svg { width: 16px; height: 16px; }

/* Color accents per service card — refreshed brand palette */
.svc-card.c-teal::before   { background: linear-gradient(90deg, var(--mt-teal),   var(--mt-teal-dark)); }
.svc-card.c-teal   .ico    { background: var(--mt-teal-a10); }
.svc-card.c-teal   .ico svg { color: var(--mt-teal); }

.svc-card.c-orange::before { background: linear-gradient(90deg, var(--mt-orange), var(--mt-orange-dark)); }
.svc-card.c-orange .ico    { background: var(--mt-orange-a10); }
.svc-card.c-orange .ico svg { color: var(--mt-orange); }

.svc-card.c-plum::before   { background: linear-gradient(90deg, var(--mt-plum),   var(--mt-plum-dark)); }
.svc-card.c-plum   .ico    { background: var(--mt-plum-a10); }
.svc-card.c-plum   .ico svg { color: var(--mt-plum); }

.svc-card.c-lime::before   { background: linear-gradient(90deg, var(--mt-lime),   var(--mt-lime-dark)); }
.svc-card.c-lime   .ico    { background: var(--mt-lime-a15); }
.svc-card.c-lime   .ico svg { color: var(--mt-lime-dark); }

.svc-card.c-blue::before   { background: linear-gradient(90deg, var(--mt-blue),   #2563EB); }
.svc-card.c-blue   .ico    { background: var(--mt-blue-a10); }
.svc-card.c-blue   .ico svg { color: var(--mt-blue); }

.svc-card.c-red::before    { background: linear-gradient(90deg, var(--mt-red),    #DC2626); }
.svc-card.c-red    .ico    { background: var(--mt-red-a10); }
.svc-card.c-red    .ico svg { color: var(--mt-red); }


/* --------------------------------------------------------------------------
   14. DARK CARDS (for dark sections)
   -------------------------------------------------------------------------- */
.dark-card,
.dk-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-xl);
  padding: 36px;
  transition: all var(--t);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.dk-card { padding: 32px; }
.dk-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  transform: scaleX(0);
  transition: transform .4s var(--ease-out);
  transform-origin: left;
  background: var(--mt-grad-energy);
}
.dark-card:hover,
.dk-card:hover {
  background: rgba(255, 255, 255, .1);
  border-color: var(--mt-teal);
  transform: translateY(-4px);
}
.dk-card:hover::before { transform: scaleX(1); }

.dk-card .ico {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.dark-card h3,
.dk-card h3 {
  font-family: var(--ff-ui);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  margin-bottom: 10px;
  color: var(--mt-white);
}
.dk-card h3 { margin-bottom: 8px; }

.dark-card p,
.dk-card p {
  font-family: var(--ff-body);
  font-size: .95rem;
  color: rgba(255, 255, 255, .7);
  line-height: var(--lh-relaxed);
}
.dk-card p { color: rgba(255, 255, 255, .6); flex: 1; }
.dk-card .link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-ui);
  font-size: .9rem;
  font-weight: var(--fw-semibold);
  color: var(--mt-lime);
  margin-top: 16px;
  transition: gap var(--t);
}
.dk-card:hover .link { gap: 10px; }
.dk-card .link svg { width: 16px; height: 16px; }


/* --------------------------------------------------------------------------
   15. SPLIT SECTION (50/50 content + visual)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.split-content h2 {
  font-size: var(--fs-h2);
  margin-bottom: 16px;
}
.split-content p {
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  color: var(--mt-dark-60);
  margin-bottom: 20px;
  line-height: var(--lh-relaxed);
}
.split-content ul {
  list-style: none;
  margin-bottom: 24px;
}
.split-content ul li {
  font-family: var(--ff-body);
  font-size: .95rem;
  color: var(--mt-dark-60);
  padding: 8px 0 8px 24px;
  position: relative;
}
.split-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mt-teal);
}

.split-visual {
  background: var(--mt-gray-warm);
  border-radius: var(--r-xl);
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}
.split-visual .inner {
  background: var(--mt-white);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 32px;
  width: 100%;
}


/* --------------------------------------------------------------------------
   16. PROCESS STEPS (4-step diagram)
   -------------------------------------------------------------------------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.process-step {
  text-align: center;
  padding: 32px 20px;
  position: relative;
}
.process-step .step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mt-teal);
  color: var(--mt-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: 1.1rem;
  margin: 0 auto 16px;
  font-family: var(--ff-ui);
  box-shadow: var(--shadow-teal);
}
.process-step h3 {
  font-family: var(--ff-ui);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  margin-bottom: 8px;
}
.process-step p {
  font-family: var(--ff-body);
  font-size: .9rem;
  color: var(--mt-dark-60);
}


/* --------------------------------------------------------------------------
   17. LIST CARD (checklist)
   -------------------------------------------------------------------------- */
.list-card {
  background: var(--mt-white);
  border-radius: var(--r-xl);
  padding: 36px;
  border: 1px solid var(--mt-gray-cool);
  box-shadow: var(--shadow-sm);
}
.list-card h3 {
  font-family: var(--ff-ui);
  font-size: 1.1rem;
  font-weight: var(--fw-semibold);
  color: var(--mt-teal);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.list-card h3 .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mt-teal);
  flex-shrink: 0;
}
.list-card ul { list-style: none; }
.list-card ul li {
  font-family: var(--ff-body);
  font-size: .95rem;
  color: var(--mt-dark-60);
  padding: 8px 0 8px 20px;
  border-bottom: 1px solid var(--mt-gray-warm);
  position: relative;
}
.list-card ul li:last-child { border-bottom: none; }
.list-card ul li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--mt-teal);
  font-weight: var(--fw-bold);
  font-size: .9rem;
}


/* --------------------------------------------------------------------------
   18. IMPACT BAR (teal stats strip)
   -------------------------------------------------------------------------- */
.impact {
  padding: 80px 0;
  background: var(--mt-grad-primary);
  position: relative;
  overflow: hidden;
}
.impact::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, var(--mt-lime-a10) 0%, transparent 60%);
  pointer-events: none;
}
.impact-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  text-align: center;
  color: var(--mt-white);
  position: relative;
  z-index: 1;
}
.impact-item .num {
  font-size: 2.2rem;
  font-weight: var(--fw-bold);
  font-family: var(--ff-display);
}
.impact-item .lbl {
  font-family: var(--ff-ui);
  font-size: var(--fs-caption);
  opacity: .8;
  margin-top: 4px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   19. WHY SECTION (round-icon centered cards)
   -------------------------------------------------------------------------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.why-card {
  padding: 36px;
  border-radius: var(--r-xl);
  background: var(--mt-white);
  border: 1px solid var(--mt-gray-cool);
  text-align: center;
  transition: all var(--t);
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--mt-teal-a40);
}
.why-ico {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--mt-teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.why-ico svg {
  width: 28px;
  height: 28px;
  color: var(--mt-teal);
}
.why-card h3 {
  font-family: var(--ff-ui);
  font-size: 1.1rem;
  font-weight: var(--fw-semibold);
  margin-bottom: 8px;
  color: var(--mt-dark-navy);
}
.why-card p {
  font-family: var(--ff-body);
  font-size: .95rem;
  color: var(--mt-dark-60);
  line-height: var(--lh-relaxed);
}


/* --------------------------------------------------------------------------
   20. CTA BANNER (dark section before footer)
   -------------------------------------------------------------------------- */
.cta-banner,
.cta {
  padding: 100px 0;
}

.cta-inner,
.ci {
  background: var(--mt-dark-navy);
  border-radius: var(--r-2xl);
  padding: 80px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-inner::before,
.ci::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, var(--mt-teal-a20) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, var(--mt-orange-a15) 0%, transparent 50%);
}
.cta-inner h2,
.ci h2 {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  color: var(--mt-white);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.cta-inner p,
.ci p {
  font-family: var(--ff-body);
  font-size: 1.1rem;
  color: rgba(255, 255, 255, .7);
  max-width: 560px;
  margin: 0 auto 36px;
  position: relative;
  z-index: 1;
  line-height: var(--lh-relaxed);
}

.cta-btns,
.cbs {
  display: flex;
  gap: 16px;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.cta-bp,
.cbp {
  background: var(--mt-teal);
  color: var(--mt-white);
  padding: 16px 36px;
  border-radius: var(--r-pill);
  font-family: var(--ff-ui);
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  transition: all var(--t);
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cta-bp:hover,
.cbp:hover {
  background: var(--mt-lime);
  color: var(--mt-dark-navy);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--mt-lime-a40);
}

.cta-bs,
.cbb {
  color: var(--mt-white);
  padding: 16px 36px;
  border-radius: var(--r-pill);
  font-family: var(--ff-ui);
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  border: 2px solid rgba(255, 255, 255, .3);
  transition: all var(--t);
  cursor: pointer;
  background: transparent;
}
.cta-bs:hover,
.cbb:hover { border-color: var(--mt-white); background: rgba(255, 255, 255, .05); }


/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */
.footer,
.ft {
  background: var(--mt-dark-navy);
  color: rgba(255, 255, 255, .65);
  padding: 72px 0 32px;
}

.ft-grid,
.ftg {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.ft-brand p,
.ftb p {
  font-family: var(--ff-body);
  font-size: .9rem;
  line-height: var(--lh-relaxed);
  margin-top: 16px;
  max-width: 300px;
}

.ft-col h4,
.ftc h4 {
  font-family: var(--ff-ui);
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--mt-white);
  margin-bottom: 20px;
}

.ft-col ul,
.ftc ul {
  list-style: none;
}
.ft-col ul li,
.ftc ul li {
  margin-bottom: 12px;
}
.ft-col ul li a,
.ftc ul li a {
  font-family: var(--ff-body);
  font-size: .9rem;
  transition: color var(--t);
}
.ft-col ul li a:hover,
.ftc ul li a:hover { color: var(--mt-teal); }

.ft-bottom,
.fbt {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
}


/* --------------------------------------------------------------------------
   22. ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 var(--mt-lime-a40); }
  50%      { box-shadow: 0 0 0 8px transparent; }
}

/* Scroll-triggered fade (toggled by IntersectionObserver via .v class) */
.aos {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.aos.v {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .aos { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   23. RESPONSIVE
   -------------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
  .hero-grid,
  .hg,
  .split {
    grid-template-columns: 1fr;
  }
  .feat-grid,
  .fg,
  .process-grid,
  .why-grid,
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .svc-grid.col2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
  .impact-inner {
    grid-template-columns: repeat(3, 1fr);
  }
  .ft-grid,
  .ftg {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {
  /* Nav: collapse to hamburger */
  .nav-links,
  .nl { display: none; }
  .nav-links.open,
  .nl.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--mt-white);
    padding: 24px;
    box-shadow: var(--shadow-md);
    gap: 16px;
  }
  .hamburger,
  .hb { display: flex; }

  /* Hero scaling */
  .hero {
    padding: 120px 0 70px;
  }
  .hero-stats { gap: 24px; }
  .hero-stat .num { font-size: 1.8rem; }

  .page-hero,
  .ph {
    padding: 110px 0 60px;
  }

  /* All grids collapse to single column */
  .feat-grid,
  .fg,
  .process-grid,
  .why-grid,
  .svc-grid,
  .svc-grid.col2 {
    grid-template-columns: 1fr;
  }
  .impact-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  /* CTA banner */
  .cta-inner,
  .ci {
    padding: 48px 24px;
  }

  /* Footer */
  .ft-grid,
  .ftg { grid-template-columns: 1fr; }
  .ft-bottom,
  .fbt {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* Stat row */
  .stat-row,
  .sr { grid-template-columns: 1fr; }

  /* Category header */
  .cat-header {
    flex-direction: column;
    text-align: center;
  }
}


/* --------------------------------------------------------------------------
   24. DIVI 5 MODULE OVERRIDES
   --------------------------------------------------------------------------
   Force Divi modules to inherit brand tokens. Paste this block into Divi →
   Theme Options → Custom CSS, or include via Divi → Theme Builder → Global
   Custom CSS. Ensures Divi text modules, buttons, and section dividers all
   render with refreshed brand palette.
   -------------------------------------------------------------------------- */

/* Divi Body & Headings */
.et_pb_section { font-family: var(--ff-body); }
.et_pb_text h1, .et_pb_post_title h1, .et_pb_fullwidth_header h1 {
  font-family: var(--ff-display) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--mt-dark-navy);
}
.et_pb_text h2, .et_pb_text h3, .et_pb_text h4 {
  font-family: var(--ff-ui) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--mt-dark-navy);
}
.et_pb_text p, .et_pb_blurb_description {
  font-family: var(--ff-body);
  color: var(--mt-dark-60);
  line-height: var(--lh-relaxed);
}

/* Divi Buttons → brand pill style */
.et_pb_button,
.et_pb_button_module_wrapper .et_pb_button {
  background-color: var(--mt-teal) !important;
  border-color: var(--mt-teal) !important;
  color: var(--mt-white) !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--ff-ui) !important;
  font-weight: var(--fw-semibold) !important;
  padding: 14px 32px !important;
  transition: all var(--t) !important;
}
.et_pb_button:hover {
  background-color: var(--mt-teal-dark) !important;
  border-color: var(--mt-teal-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-teal);
}
.et_pb_button.et_pb_button_alt,
.et_pb_button_two {
  background-color: transparent !important;
  border-color: var(--mt-gray-200) !important;
  color: var(--mt-dark-navy) !important;
}
.et_pb_button.et_pb_button_alt:hover,
.et_pb_button_two:hover {
  background-color: transparent !important;
  border-color: var(--mt-teal) !important;
  color: var(--mt-teal) !important;
}

/* Divi Blurb (icon cards) — inherit brand teal */
.et_pb_blurb .et_pb_blurb_container .et_pb_module_header {
  font-family: var(--ff-ui) !important;
  color: var(--mt-dark-navy);
}
.et_pb_main_blurb_image .et-pb-icon { color: var(--mt-teal) !important; }

/* Divi Pricing Tables — brand teal accent */
.et_pb_pricing_table_button,
.et_pb_pricing_heading { background-color: var(--mt-teal) !important; }
.et_pb_pricing.et_pb_featured_table .et_pb_pricing_heading {
  background-color: var(--mt-plum) !important;
}

/* Divi Section dividers */
.et_pb_section.et_pb_section_first { padding-top: 0; }

/* Divi color override classes — apply via CSS Class field in any module */
.mt-bg-teal     { background-color: var(--mt-teal) !important;       color: var(--mt-white) !important; }
.mt-bg-plum     { background-color: var(--mt-plum) !important;       color: var(--mt-white) !important; }
.mt-bg-lime     { background-color: var(--mt-lime) !important;       color: var(--mt-dark-navy) !important; }
.mt-bg-orange   { background-color: var(--mt-orange) !important;     color: var(--mt-white) !important; }
.mt-bg-navy     { background-color: var(--mt-dark-navy) !important;  color: var(--mt-white) !important; }
.mt-bg-warm     { background-color: var(--mt-gray-warm) !important; }
.mt-bg-cool     { background-color: var(--mt-gray-cool) !important; }
.mt-bg-grad     { background: var(--mt-grad-primary) !important;    color: var(--mt-white) !important; }
.mt-bg-grad-energy { background: var(--mt-grad-energy) !important;  color: var(--mt-white) !important; }
.mt-bg-grad-aurora { background: var(--mt-grad-aurora) !important;  color: var(--mt-white) !important; }

.mt-text-teal   { color: var(--mt-teal) !important; }
.mt-text-plum   { color: var(--mt-plum) !important; }
.mt-text-lime   { color: var(--mt-lime-dark) !important; }
.mt-text-orange { color: var(--mt-orange) !important; }
.mt-text-navy   { color: var(--mt-dark-navy) !important; }

/* End of MedTech For Solutions Global Stylesheet (Divi 5 Edition) */


/* ==========================================================================
   25. PAGE-PROMOTED COMPONENTS  (added 2026-04-26)
   --------------------------------------------------------------------------
   These rules previously lived in per-page <style> blocks. Promoted here so
   every page references one cached stylesheet instead of duplicating CSS.
   ========================================================================== */


/* --------------------------------------------------------------------------
   25.1  Management cluster — feature icons, split sections, process steps,
   CTA banner, hub cards.  Used by 8 mgmt-services pages.
   NOTE: original `.fi` (feature icon) renamed → `.feat-icon` to free up `.fi`
   for the homepage FAQ accordion. Page HTML updated accordingly.
   -------------------------------------------------------------------------- */
.feat-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.feat-icon.t{background:rgba(26,138,138,.1)}
.feat-icon.o{background:rgba(232,119,34,.1)}
.feat-icon.p{background:rgba(107,45,91,.1)}
.feat-icon.l{background:rgba(181,204,24,.15)}
.feat-icon.b{background:rgba(59,130,246,.1)}
.feat-icon.r{background:rgba(239,68,68,.1)}
.feat-icon svg{width:28px;height:28px}

/* Split (2-column) section */
.sp{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.spc h2{font-size:2rem;margin-bottom:16px}
.spc p{font-size:1rem;color:var(--mt-dark-60);margin-bottom:20px}
.spc ul{list-style:none;margin-bottom:24px}
.spc ul li{font-size:.92rem;color:var(--mt-dark-60);padding:8px 0 8px 24px;position:relative}
.spc ul li::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--mt-teal)}
.sv{background:var(--mt-gray-warm);border-radius:var(--mt-radius-lg);padding:48px;display:flex;align-items:center;justify-content:center;min-height:360px}
.sv .inn{background:var(--mt-white);border-radius:var(--mt-radius-md);box-shadow:0 4px 16px rgba(0,0,0,.08);padding:32px;width:100%}

/* Process steps row */
.pg{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ps{text-align:center;padding:32px 20px}
.ps .sn{width:48px;height:48px;border-radius:50%;background:var(--mt-teal);color:var(--mt-white);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;margin:0 auto 16px;font-family:var(--ff-ui)}
.ps h3{font-family:var(--ff-ui);font-size:1rem;font-weight:700;margin-bottom:8px}
.ps p{font-size:.85rem;color:var(--mt-dark-60)}

/* Page-bottom CTA banner */
.cb{padding:100px 0}

/* Mgmt-hub card grid */
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hub-card{background:var(--mt-white);border-radius:var(--mt-radius-lg);padding:36px;border:1px solid var(--mt-gray-cool);transition:all .3s;text-align:center}
.hub-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,0,0,.10);border-color:var(--mt-teal)}
.hub-card .hci{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.hub-card h3{font-family:var(--ff-ui);font-size:1.15rem;font-weight:700;margin-bottom:10px}
.hub-card p{font-size:.88rem;color:var(--mt-dark-60);margin-bottom:20px}
.hub-card a.lnk{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:600;color:var(--mt-teal)}
.hub-card a.lnk:hover{text-decoration:underline}


/* --------------------------------------------------------------------------
   25.2  Homepage — hero overlay, About grid, services grid, dark cards,
   impact bar, why-choose-us grid, FAQ accordion, CTA banner variant.
   -------------------------------------------------------------------------- */

/* Two-column hero with stat-card overlay */
.hero-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(181,204,24,.35);border-radius:100px;padding:6px 18px;font-size:.8rem;font-weight:600;color:var(--mt-lime);margin-bottom:20px}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--mt-lime)}
.hero .lead{font-size:1.08rem;color:rgba(255,255,255,.6);max-width:540px;margin-bottom:36px}

/* Secondary-on-dark button (.bs2 variant) */
.bs2{color:var(--mt-white);padding:14px 32px;border-radius:var(--mt-radius-md);font-weight:600;font-size:.95rem;border:2px solid rgba(255,255,255,.25);display:inline-flex;align-items:center;gap:8px;transition:all .3s;cursor:pointer;background:transparent}
.bs2:hover{border-color:var(--mt-white)}

/* Hero trust row (compliance badges) */
.hero-trust{display:flex;gap:20px;flex-wrap:wrap}
.hero-trust span{display:flex;align-items:center;gap:5px;color:rgba(255,255,255,.5);font-size:.8rem;font-weight:500}
.hero-trust svg{width:14px;height:14px;color:var(--mt-lime);fill:currentColor}

/* Hero stat card (right column) */
.hcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:var(--mt-radius-lg);padding:32px;backdrop-filter:blur(8px)}
.hcard-hdr{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.hcard-ico{width:48px;height:48px;background:linear-gradient(135deg,var(--mt-teal),var(--mt-teal-dark));border-radius:12px;display:flex;align-items:center;justify-content:center}
.hcard-ico svg{width:24px;height:24px;color:var(--mt-white)}
.hcard-hdr strong{font-family:var(--ff-ui);font-size:.95rem;color:var(--mt-white)}
.hcard-hdr small{font-size:.78rem;color:rgba(255,255,255,.4);display:block}
.hstats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.hst{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--mt-radius-md);padding:18px;text-align:center}
.hst .n{font-size:1.7rem;font-weight:700;color:var(--mt-white);font-family:var(--ff-display)}
.hst .l{font-size:.75rem;color:rgba(255,255,255,.5);margin-top:4px}

/* Section heading tag (used across multiple pages) */
.shtag{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:var(--mt-teal);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px}
.shtag .d{width:24px;height:2px;background:var(--mt-teal);border-radius:2px}
.dk .shtag,.section.dark .shtag,.sec.dk .shtag{color:var(--mt-lime)}
.dk .shtag .d,.section.dark .shtag .d,.sec.dk .shtag .d{background:var(--mt-lime)}

/* About grid (homepage) */
.ag{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ac2 h2{font-size:2rem;margin-bottom:16px}
.ac2 p{font-size:.96rem;color:var(--mt-dark-60);margin-bottom:14px}
.ac2 p strong{color:var(--mt-dark-80)}
.astats{display:flex;gap:32px;margin-top:24px;flex-wrap:wrap}
.astat .n{font-size:2rem;font-weight:700;color:var(--mt-teal);font-family:var(--ff-display)}
.astat .l{font-size:.8rem;color:var(--mt-dark-60);margin-top:2px;text-align:center}
.avis{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.abx{background:var(--mt-gray-warm);border-radius:var(--mt-radius-md);padding:24px;border:1px solid var(--mt-gray-cool)}
.abx h3{font-family:var(--ff-ui);font-size:.92rem;font-weight:700;margin-bottom:6px}
.abx p{font-size:.82rem;color:var(--mt-dark-60);margin:0}
.abx.hi{background:var(--mt-teal);border-color:var(--mt-teal)}
.abx.hi h3,.abx.hi p{color:var(--mt-white)}

/* Services grid + colored card variants */
.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sc{background:var(--mt-white);border-radius:var(--mt-radius-lg);padding:36px;box-shadow:0 1px 3px rgba(0,0,0,.08);border:1px solid var(--mt-gray-cool);transition:all .3s;position:relative;overflow:hidden}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;transform:scaleX(0);transition:transform .4s;transform-origin:left}
.sc:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.08);border-color:var(--mt-teal)}
.sc:hover::before{transform:scaleX(1)}
.sc .ico{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.sc .ico svg{width:28px;height:28px}
.sc h3{font-family:var(--ff-ui);font-size:1.1rem;font-weight:700;margin-bottom:10px;color:var(--mt-dark-navy)}
.sc p{font-size:.9rem;color:var(--mt-dark-60);margin-bottom:16px}
.sc .lk{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600;color:var(--mt-teal);margin-top:auto;transition:gap .3s}
.sc:hover .lk{gap:10px}
.sc.ct::before{background:linear-gradient(90deg,var(--mt-teal),var(--mt-teal-dark))}
.sc.ct .ico{background:rgba(26,138,138,.1)}
.sc.co::before{background:linear-gradient(90deg,var(--mt-orange),#C65D10)}
.sc.co .ico{background:rgba(232,119,34,.1)}
.sc.cp::before{background:linear-gradient(90deg,var(--mt-plum),#4A1D40)}
.sc.cp .ico{background:rgba(107,45,91,.1)}
.sc.cl::before{background:linear-gradient(90deg,var(--mt-lime),#9AB00E)}
.sc.cl .ico{background:rgba(181,204,24,.15)}
.sc.cb::before{background:linear-gradient(90deg,#3B82F6,#2563EB)}
.sc.cb .ico{background:rgba(59,130,246,.1)}

/* Dark services card (homepage mgmt-services dark section) */
.dc{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--mt-radius-lg);padding:32px;transition:all .35s;display:flex;flex-direction:column;position:relative;overflow:hidden}
.dc::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;transform:scaleX(0);transition:transform .4s;transform-origin:left;background:linear-gradient(90deg,var(--mt-teal),var(--mt-lime))}
.dc:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);transform:translateY(-6px)}
.dc:hover::before{transform:scaleX(1)}
.dc .ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.dc h3{font-family:var(--ff-ui);font-size:1.05rem;font-weight:700;margin-bottom:8px;color:var(--mt-white)}
.dc p{font-size:.88rem;color:rgba(255,255,255,.55);flex:1}
.dc .lk{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600;color:var(--mt-lime);margin-top:16px;transition:gap .3s}
.dc:hover .lk{gap:10px}

/* Impact stats bar (full-width teal gradient) */
.imp{padding:72px 0;background:linear-gradient(135deg,var(--mt-teal),var(--mt-teal-dark))}
.impg{display:grid;grid-template-columns:repeat(5,1fr);gap:32px;text-align:center;color:var(--mt-white)}
.impi .n{font-size:2.2rem;font-weight:700;font-family:var(--ff-display)}
.impi .l{font-size:.82rem;opacity:.7;margin-top:4px}

/* Why-Choose-Us grid */
.wg{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.wc{padding:36px;border-radius:var(--mt-radius-lg);background:var(--mt-white);border:1px solid var(--mt-gray-cool);text-align:center;transition:all .3s}
.wc:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,.08)}
.wico{width:64px;height:64px;border-radius:50%;background:var(--mt-teal-light);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.wico svg{width:28px;height:28px;color:var(--mt-teal)}
.wc h3{font-family:var(--ff-ui);font-size:1.05rem;font-weight:700;margin-bottom:8px}
.wc p{font-size:.88rem;color:var(--mt-dark-60)}

/* FAQ accordion (homepage) */
.fl{max-width:880px;margin:0 auto}
.fi{background:var(--mt-white);border:1px solid var(--mt-gray-cool);border-radius:var(--mt-radius-md);margin-bottom:12px;overflow:hidden;transition:border-color .3s}
.fi.op{border-color:var(--mt-teal)}
.fq{width:100%;background:none;border:0;padding:20px 24px;font-family:var(--ff-ui);font-size:.98rem;font-weight:600;color:var(--mt-dark-navy);cursor:pointer;display:flex;justify-content:space-between;align-items:center;text-align:left;transition:color .3s}
.fq::after{content:'+';font-size:1.4rem;font-weight:300;color:var(--mt-teal);transition:transform .3s}
.fi.op .fq::after{content:'−';transform:rotate(0)}
.fq:hover{color:var(--mt-teal)}
.fa{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease}
.fi.op .fa{max-height:600px;padding:0 24px 20px}
.fa p{font-size:.93rem;color:var(--mt-dark-60);line-height:1.65}

/* Homepage CTA banner (.ctb variant — distinct from .cb on mgmt pages) */
.ctb{padding:100px 0;background:linear-gradient(135deg,var(--mt-dark-navy),var(--mt-dark-80))}
.ctx{max-width:840px;margin:0 auto;text-align:center;padding:0 24px;color:var(--mt-white)}
.ctx h2{font-size:2.2rem;color:var(--mt-white);margin-bottom:16px}
.ctx p{color:rgba(255,255,255,.7);margin-bottom:32px}
.ctbs{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}


/* --------------------------------------------------------------------------
   25.3  Responsive overrides for the promoted components
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-inner,.ag,.avis,.sp{grid-template-columns:1fr}
  .sg,.wg,.hub-grid{grid-template-columns:repeat(2,1fr)}
  .pg{grid-template-columns:repeat(2,1fr)}
  .impg{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 768px) {
  .sg,.wg,.hub-grid,.pg,.impg{grid-template-columns:1fr}
  .hero-inner h1,.ctx h2{font-size:1.8rem}
  .hcard{padding:24px}
  .imp{padding:56px 0}
  .ctb{padding:72px 0}
}