/*
Theme Name:   MyMobileLyfe
Theme URI:    https://mymobilelyfe.com
Description:  Child theme of Twenty Twenty-Five — MyMobileLyfe brand design system.
Author:        MyMobileLyfe
Author URI:   https://mymobilelyfe.com
Template:     twentytwentyfive
Version:      1.0.1
License:      GNU General Public License v2 or later
Text Domain:  mymobilelyfe
*/

/* ============================================================
   MyMobileLyfe Child Theme — style.css
   Brand tokens live in theme.json. This file handles:
   - Google Fonts import
   - CSS custom properties that theme.json can't express
     (gradients, shadows, motion, textures, interaction states)
   - Utility classes and base element overrides
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- Extended tokens (not expressible in theme.json) ---------- */
:root {
  /* Gradients */
  --gradient-brand: linear-gradient(120deg, #29abe2 0%, #0088cc 45%, #005f8f 100%);
  --gradient-deep:  linear-gradient(160deg, #005f8f 0%, #003650 100%);

  /* Elevation — cool blue-grey */
  --shadow-xs:    0 1px 2px rgba(20,40,60,0.06);
  --shadow-sm:    0 1px 3px rgba(20,40,60,0.08), 0 1px 2px rgba(20,40,60,0.06);
  --shadow-md:    0 4px 12px rgba(20,40,60,0.10), 0 2px 4px rgba(20,40,60,0.06);
  --shadow-lg:    0 12px 28px rgba(20,40,60,0.12), 0 4px 10px rgba(20,40,60,0.07);
  --shadow-xl:    0 24px 56px rgba(20,40,60,0.16), 0 8px 18px rgba(20,40,60,0.08);
  --shadow-brand: 0 10px 28px rgba(0,136,204,0.30);
  --shadow-inset: inset 0 1px 2px rgba(20,40,60,0.08);
  --focus-ring:   0 0 0 3px color-mix(in srgb, #0088cc 38%, transparent);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;

  /* Texture — blueprint grid */
  --grid-line:      color-mix(in srgb, #005f8f 3%, transparent);
  --grid-line-bold: color-mix(in srgb, #005f8f 5%, transparent);
  --dot-line:       color-mix(in srgb, #005f8f 9%, transparent);
  --grid-line-on-dark: rgba(255,255,255,0.055);
  --dot-line-on-dark:  rgba(255,255,255,0.10);
  --texture-grid-size: 30px 30px;
  --texture-dots-size: 22px 22px;
}

/* ---------- Base resets ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection {
  background: color-mix(in srgb, #29abe2 35%, transparent);
}

:focus-visible:not(textarea, button) {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--wp--preset--spacing--10);
}

:where(.wp-site-blocks :focus) {
  outline: none;
}

/* ---------- Eyebrow / overline ---------- */
.mml-eyebrow {
  font-family: var(--wp--preset--font-family--figtree);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand);
}

/* ---------- Texture utilities ---------- */
.mml-bg-grid {
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--texture-grid-size);
}
.mml-bg-dots {
  background-image: radial-gradient(var(--dot-line) 1.3px, transparent 1.4px);
  background-size: var(--texture-dots-size);
}
.mml-gradient-brand {
  background-image: linear-gradient(var(--grid-line-on-dark) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line-on-dark) 1px, transparent 1px),
                    var(--gradient-brand);
  background-size: var(--texture-grid-size), var(--texture-grid-size), auto;
}
.mml-gradient-deep {
  background-image: linear-gradient(var(--grid-line-on-dark) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line-on-dark) 1px, transparent 1px),
                    var(--gradient-deep);
  background-size: var(--texture-grid-size), var(--texture-grid-size), auto;
}
.mml-gradient-brand.mml-gradient--dots {
  background-image: radial-gradient(var(--dot-line-on-dark) 1.4px, transparent 1.5px),
                    var(--gradient-brand);
  background-size: var(--texture-dots-size), auto;
}
.mml-gradient-deep.mml-gradient--dots {
  background-image: radial-gradient(var(--dot-line-on-dark) 1.4px, transparent 1.5px),
                    var(--gradient-deep);
  background-size: var(--texture-dots-size), auto;
}
.mml-grid-overlay { position: relative; }
.mml-grid-overlay::before {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid-line-on-dark) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line-on-dark) 1px, transparent 1px);
  background-size: var(--texture-grid-size);
  pointer-events: none;
}
.mml-dots-overlay { position: relative; }
.mml-dots-overlay::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--dot-line-on-dark) 1.4px, transparent 1.5px);
  background-size: var(--texture-dots-size);
  pointer-events: none;
}

/* ---------- Button interaction states ---------- */

/* Clip the WP button wrapper so hover backgrounds honour border-radius */
.wp-block-button {
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              opacity    var(--dur-base) var(--ease-out);
}

/* Shared press effect */
.wp-block-button:active { transform: scale(0.97); }

/* Primary (Spark Amber) — darken + lift + warm glow */
.mml-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245,166,35,0.45);
  opacity: 0.92;
}

/* Ghost (transparent / border) — subtle fill + lift */
.mml-btn--ghost:hover .wp-block-button__link {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.55) !important;
}
.mml-btn--ghost:hover {
  transform: translateY(-2px);
}

/* Dark (black CTA band button) — lighten + lift */
.mml-btn--dark .wp-block-button__link {
  transition: background var(--dur-base) var(--ease-out);
}
.mml-btn--dark:hover .wp-block-button__link {
  background: #2e3438 !important;
}
.mml-btn--dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

/* ---------- Icon button ---------- */
.mml-iconbtn:hover:not(:disabled)  { background: #eef1f4; color: #1a1d20; }
.mml-iconbtn:active:not(:disabled) { transform: scale(0.94); }

/* ---------- Card (interactive) ---------- */
.mml-card--interactive {
  text-align: center;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

/* Center icons within cards (icon wrapper stretches full-width as a flex item) */
.mml-card--interactive .wp-block-kadence-icon.kt-svg-icons {
  display: flex;
  justify-content: center;
}

/* Arrow links inside cards stretch full-width as flex items by default;
   un-stretch and center them so the link text/arrow sit centered */
.mml-card--interactive .mml-arrowlink {
  align-self: center;
}
.mml-card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* ---------- Inputs ---------- */
.mml-input:focus, .mml-textarea:focus, .mml-select:focus {
  outline: none;
  border-color: #0088cc !important;
  box-shadow: var(--focus-ring);
}
.mml-input::placeholder, .mml-textarea::placeholder { color: #9aa4ae; }

/* ---------- Tabs ---------- */
.mml-tab { transition: color var(--dur-base) var(--ease-standard); }
.mml-tab:hover { color: #1a1d20; }

/* ---------- Arrow link ---------- */
.mml-arrowlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #0088cc;
  transition: gap var(--dur-base) var(--ease-out);
}
.mml-arrowlink:hover { gap: 10px; text-decoration: none; }

/* Arrow links on dark/blue backgrounds need higher-contrast amber instead of blue */
.mml-gradient-deep .mml-arrowlink,
.mml-gradient-navy .mml-arrowlink {
  color: #f5a623;
}
.mml-gradient-deep .mml-arrowlink a,
.mml-gradient-navy .mml-arrowlink a {
  color: #f5a623;
}

/* ---------- WordPress block overrides ---------- */
.wp-block-button__link {
  border-radius: var(--wp--preset--spacing--pill, 999px) !important;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .mml-card--interactive,
  .mml-arrowlink,
  .mml-tab,
  .mml-btn {
    transition: none !important;
    transform: none !important;
  }
}
/* ── Scroll animations ─────────────────────────────────────────────────────
   .mml-anim        : initial hidden state (set by JS, invisible to
                      non-JS browsers and reduced-motion users)
   .mml-anim--visible : final revealed state
   transitionDelay  is set inline by JS for stagger effects
──────────────────────────────────────────────────────────────────────────── */
.mml-anim {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.mml-anim--visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .mml-anim {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ---------- Site header ---------- */

/* Small button modifier (shared) */
.mml-btn--sm {
  line-height: 1;
}

/* One-Click AI outline button (shared className: header + solutions pages) */
.mml-btn--amber-outline {
  border-color: #f5a623 !important;
  color: #d98a0c !important;
  background: transparent !important;
  transition: transform 200ms cubic-bezier(0.16,1,0.3,1),
              box-shadow 200ms cubic-bezier(0.16,1,0.3,1),
              background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.mml-btn--amber-outline:hover,
.mml-btn--amber-outline:hover .wp-block-button__link {
  background: #f5a623 !important;
  color: #003650 !important;
  border-color: #f5a623 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245,166,35,0.4);
}

/* ---------- Kadence header (real live selectors from the header render) ---------- */

/* Sticky (behaves like fixed-on-scroll), elevated shell.
   NOTE: no backdrop-filter/transform here — those create a CSS containing
   block for position:fixed descendants, which breaks the off-canvas mobile
   drawer (it lives inside this element). Keep this element free of
   filter/transform/backdrop-filter/will-change. */
/* The sticky positioning lives on the OUTER template-part wrapper, not
   the inner Kadence header. A sticky element only keeps sticking for as
   long as its own direct parent still has height left below it to
   scroll through — and the outer <header class="wp-block-template-part">
   wraps this header exactly as tall as the header itself, with no extra
   room. Its own parent (.wp-site-blocks) spans the whole page, so
   sticking at that level actually has somewhere to stick. */
header.wp-block-template-part {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}
.wp-block-kadence-header {
  background: #ffffff;
  border-bottom: 1px solid #e0e5ea;
  box-shadow: 0 1px 2px rgba(26,29,32,0.04), 0 12px 28px -16px rgba(0,54,80,0.16);
}
.wp-block-kadence-header .kb-header-row-layout-standard {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Logo */
.wp-block-kadence-header .kb-identity79_a5c99c-c8 img.custom-logo {
  width: 152px;
  height: auto;
  transition: transform 200ms ease;
}
.wp-block-kadence-header .kb-identity79_a5c99c-c8:hover img.custom-logo {
  transform: scale(1.02);
}

/* Primary nav links */
.wp-block-kadence-header .kb-nav-link-content {
  font-family: var(--wp--preset--font-family--nunito);
  font-weight: 700;
  font-size: 0.9rem;
  color: #383f45;
  letter-spacing: -0.005em;
  padding: 10px 4px !important;
  transition: color 200ms ease;
}
/* Breathing room between top-level items — items with a dropdown
   chevron already gain extra visual width from the chevron itself
   (constrained to a fixed footprint below), so they get a smaller
   margin-right to keep the gap before the NEXT item's text consistent
   whether or not the current item has children. */
.wp-block-kadence-header > .wp-block-kadence-header-desktop .kb-navigation > .menu-item {
  margin-right: 28px;
}
.wp-block-kadence-header > .wp-block-kadence-header-desktop .kb-navigation > .menu-item:last-child {
  margin-right: 0 !important;
}
.wp-block-kadence-header .kb-navigation > .menu-item > .kb-link-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.wp-block-kadence-header .kb-navigation > .menu-item > .kb-link-wrap::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 2px;
  background: #0088cc;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1);
}
.wp-block-kadence-header .kb-navigation > .menu-item:hover > .kb-link-wrap > .kb-nav-link-content,
.wp-block-kadence-header .kb-navigation > .menu-item.current-menu-item > .kb-link-wrap > .kb-nav-link-content {
  color: #0088cc;
}
.wp-block-kadence-header .kb-navigation > .menu-item:hover > .kb-link-wrap::after,
.wp-block-kadence-header .kb-navigation > .menu-item.current-menu-item > .kb-link-wrap::after {
  transform: scaleX(1);
}

/* Dropdown chevrons — fixed, predictable footprint (Kadence's default
   button width is a calc() tied to font-size, which made the amount of
   "extra" space next to parent items unpredictable and inconsistent
   with the plain items' spacing). */
.wp-block-kadence-header .kb-nav-dropdown-toggle-btn {
  color: #9aa4ae;
  transition: color 200ms ease;
  position: relative !important;
  z-index: 1;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  padding: 0 !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  /* This is the actual fix: Kadence's own base rule uses inset-inline-end
     (a positioning offset, since the button is position:relative) to
     visually pull the button back over the preceding text. Overriding
     margin/width alone never touched this — the offset was still
     shifting it left independent of flow spacing. Canceling it lets the
     button render at its real flex position instead. */
  inset-inline-end: auto !important;
  inset-inline-start: auto !important;
  border-left: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.wp-block-kadence-header .menu-item:hover > .kb-link-wrap > .kb-nav-dropdown-toggle-btn {
  color: #0088cc;
}

/* Dropdown panels — shrink-wrap to content, no dead space, clipped rounded corners */
.wp-block-kadence-header .kb-nav-sub-menu {
  background: #ffffff;
  border-radius: 12px !important;
  border: 1px solid #eef1f4;
  box-shadow: 0 16px 36px -12px rgba(26,29,32,0.18), 0 2px 8px rgba(26,29,32,0.06);
  padding: 8px;
  min-width: 0;
  width: max-content;
  max-width: 300px;
  overflow: hidden;
}
.wp-block-kadence-header .kb-nav-sub-menu .kb-nav-link-content {
  width: 100% !important;
  font-size: 0.85rem;
  padding: 10px 12px !important;
  border-radius: 12px;
  display: block;
}
.wp-block-kadence-header .kb-nav-sub-menu .kb-link-wrap::after {
  display: none;
}
.wp-block-kadence-header .kb-nav-sub-menu .menu-item:hover > .kb-link-wrap > .kb-nav-link-content {
  background: #e8f6fd;
  color: #0088cc;
}

/* CTA button group */
.wp-block-kadence-header .kb-btns79_bda51b-cd {
  gap: 10px;
  align-items: center;
}

/* Schedule a Call — solid Lyfe Blue pill */
.wp-block-kadence-header .kb-btn79_73e6fe-ee {
  box-shadow: 0 2px 8px rgba(0,136,204,0.28);
  transition: transform 200ms cubic-bezier(0.16,1,0.3,1),
              box-shadow 200ms cubic-bezier(0.16,1,0.3,1), background 200ms ease;
}
.wp-block-kadence-header .kb-btn79_73e6fe-ee:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,136,204,0.4);
}

/* Mobile trigger + off-canvas panel */
body.admin-bar .kb-off-canvas-overlay {
  top: 0;
}
.wp-block-kadence-header .wp-block-kadence-off-canvas-trigger {
  color: #0088cc;
  background: transparent;
}
/* Stop the OUTER wrap (which holds the close button) from scrolling at
   all, and let only the INNER content scroll independently within it.
   Previously the close button lived inside the element that scrolled,
   and position:fixed nested inside a scrolling ancestor is unreliable
   on mobile browsers (iOS Safari in particular can carry a "fixed"
   element away with the scroll in exactly this setup). With the wrap
   itself never scrolling, the close button has nothing to fight. */
.wp-block-kadence-off-canvas .kb-off-canvas-inner-wrap {
  background: #ffffff;
  overflow: hidden !important;
}
.wp-block-kadence-off-canvas .kb-off-canvas-inner {
  width: 300px;
  max-width: 94vw;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-top: 0;
}

/* Drawer logo — pinned to the top of the scrollable panel so it stays
   visible while the nav list scrolls beneath it. Needs an opaque
   background since sticky elements paint over content scrolling by. */
.wp-block-kadence-off-canvas .wp-block-kadence-identity {
  position: sticky !important;
  top: 0;
  z-index: 5;
  width: 100%;
  background: #ffffff;
  padding-top: 12px;
  padding-bottom: 20px;
  margin-bottom: 8px !important;
}
.wp-block-kadence-off-canvas .wp-block-kadence-identity img.custom-logo {
  width: 130px;
  height: auto;
}

/* Drawer close (X) button — force it to stay pinned to the viewport
   corner regardless of how far the nav list has scrolled. */
.wp-block-kadence-off-canvas .kb-off-canvas-close,
.wp-block-kadence-off-canvas79_539c6b-3d.wp-block-kadence-off-canvas79_539c6b-3d .kb-off-canvas-close {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 100001 !important;
  background: #ffffff !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 10px rgba(26,29,32,0.15) !important;
}

/* Force the drawer nav to stack vertically. It shares its menu content
   with the desktop nav (same linked navigation post), which stores its
   own horizontal layout — so we override the layout here rather than
   relying on the block's own orientation setting. */
.wp-block-kadence-off-canvas .wp-block-kadence-navigation,
.wp-block-kadence-off-canvas .menu-container,
.wp-block-kadence-off-canvas ul.kb-navigation {
  width: 100%;
}
.wp-block-kadence-off-canvas ul.kb-navigation {
  display: flex !important;
  flex-direction: column !important;
}
.wp-block-kadence-off-canvas .menu-item {
  width: 100%;
  border-bottom: 1px solid #eef1f4;
}
.wp-block-kadence-off-canvas .kb-link-wrap {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.wp-block-kadence-off-canvas .kb-nav-link-content {
  font-family: var(--wp--preset--font-family--nunito);
  font-weight: 700;
  font-size: 1rem;
  color: #1a1d20;
  padding: 14px 4px !important;
  flex: 1;
}
/* Tap-to-expand accordion for items with children. Kadence's own
   click-to-toggle behavior (adds .menu-item--toggled-on and flips
   aria-expanded) already does the show/hide work — we just restyle
   the toggle button and neutralize the flyout positioning so it reads
   as a vertical accordion instead of a floating dropdown panel. */
.wp-block-kadence-off-canvas .kb-nav-dropdown-toggle-btn {
  position: static !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #9aa4ae;
  transition: transform 200ms ease, color 200ms ease;
}
.wp-block-kadence-off-canvas .kb-nav-dropdown-toggle-btn svg {
  width: 16px;
  height: 16px;
}
.wp-block-kadence-off-canvas .menu-item--toggled-on > .kb-link-wrap > .kb-nav-dropdown-toggle-btn {
  transform: rotate(180deg);
  color: #0088cc;
}
.wp-block-kadence-off-canvas .sub-menu {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 0 6px 16px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  /* Drive open/closed entirely off max-height, with !important on both
     states. Kadence's own JS toggler sets inline opacity/visibility/
     height styles that don't reliably reset on close inside this
     restyled vertical context, so we stop relying on those altogether
     and force this single mechanism to always win over any inline
     style it applies. */
  opacity: 1 !important;
  visibility: visible !important;
  clip: auto !important;
  overflow: hidden !important;
  max-height: 0 !important;
  transition: max-height 260ms ease !important;
}
.wp-block-kadence-off-canvas .menu-item--toggled-on > .sub-menu {
  max-height: 1000px !important;
}
.wp-block-kadence-off-canvas .sub-menu .menu-item {
  border-bottom: none;
}
.wp-block-kadence-off-canvas .sub-menu .kb-nav-link-content {
  font-weight: 600;
  font-size: 0.9rem;
  color: #6b7680;
  padding: 8px 4px !important;
}
.wp-block-kadence-off-canvas .sub-menu .kb-link-wrap::after {
  display: none;
}

/* Drawer CTA buttons — stacked, full width, below the nav */
.wp-block-kadence-off-canvas .wp-block-kadence-advancedbtn {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.mml-btn--full {
  display: flex !important;
  width: 100%;
  justify-content: center;
}
/* ---------- Equal-height cards ---------- */

/* Make the columns row a stretch flex container */
.mml-equal-height.wp-block-columns {
  align-items: stretch !important;
}

/* Each column fills the row height */
.mml-equal-height > .wp-block-column {
  display: flex;
  flex-direction: column;
}

/* The card group inside each column stretches to fill */
.mml-equal-height > .wp-block-column > .wp-block-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Push the arrow link / CTA to the bottom of each card */
.mml-equal-height > .wp-block-column > .wp-block-group > .mml-arrowlink:last-child,
.mml-equal-height > .wp-block-column > .wp-block-group > p:last-child {
  margin-top: auto;
}

/* ============================================================
   Section-level system — shared across all pages
   Consolidates repeated padding/background/text presets that
   were previously hand-written as inline styles per block.
   ============================================================ */

.mml-section {
  padding-top: 90px;
  padding-bottom: 90px;
  padding-left: 6vw;
  padding-right: 6vw;
}

.mml-section--tight {
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 6vw;
  padding-right: 6vw;
}

.mml-section--hero {
  padding-top: 120px;
  padding-bottom: 120px;
  padding-left: 6vw;
  padding-right: 6vw;
}

.mml-section--light {
  background-color: #f8fafc;
}
.mml-section--white {
  background-color: #ffffff;
}
.mml-section--dark {
  background-color: #0c1a2e;
}
.mml-section--dark-strip {
  background-color: #0f1f38;
}

.mml-no-gap {
  margin-top: 0 !important;
}

.mml-eyebrow--dark {
  font-family: var(--wp--preset--font-family--figtree);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--spark-500);
}

.mml-step-body {
  font-size: 1.1rem;
  line-height: 1.75;
  margin-top: 0;
  margin-bottom: 1.25rem;
}
.mml-step-body:last-child {
  margin-bottom: 0;
}
.mml-step-body--light {
  color: #334155;
}
.mml-step-body--dark {
  color: #cbd5e1;
}

.mml-step-title {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 1.25rem;
}
.mml-step-title--light {
  color: #0c1a2e;
}
.mml-step-title--dark {
  color: #ffffff;
}

.mml-info-box {
  border-radius: 12px;
  padding: 2.5rem;
}
.mml-info-box--light {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
}
.mml-info-box--dark {
  background-color: #0f1f38;
  border: 1px solid #1e3a5f;
}

.mml-box-label {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 1rem;
}
.mml-box-label--light {
  color: #94a3b8;
}
.mml-box-label--dark {
  color: #64748b;
}

.mml-info-box ul.wp-block-list {
  font-size: 1rem;
  line-height: 1.8;
  margin-top: 0;
  margin-bottom: 0;
}
.mml-info-box--light ul.wp-block-list {
  color: #334155;
}
.mml-info-box--dark ul.wp-block-list {
  color: #cbd5e1;
}

/* ---------- Framework strip step labels ---------- */
.mml-strip-step-label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
  margin-top: 0;
  margin-bottom: 0.35rem;
}
.mml-strip-step-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 0;
}
.mml-strip-step-name--accent {
  color: #f5a623;
}

/* ---------- Hero subhead (shared across hero sections site-wide) ---------- */
.mml-hero-subhead {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 0;
  margin-bottom: 2.75rem;
}

/* ---------- Narrative bridge (constrained-width copy block) ---------- */
.mml-bridge-body {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #475569;
  margin-top: 0;
  margin-bottom: 1.25rem;
}
.mml-bridge-body:last-child {
  margin-bottom: 0;
}
.mml-bridge-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  color: #0c1a2e;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* ---------- CTA band ---------- */
.mml-cta-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 1rem;
}
.mml-cta-subhead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #cbd5e1;
  margin-top: 0;
  margin-bottom: 2.5rem;
}
.mml-cta-button {
  background-color: #f5a623 !important;
  color: #0c1a2e !important;
  border-radius: 999px !important;
  font-size: 1rem;
  font-weight: 700;
  padding: 1rem 2rem !important;
}

/* ---------- Homepage section padding presets ---------- */
.mml-section--home {
  padding-top: 5rem;
  padding-bottom: 5rem;
  padding-left: 6vw;
  padding-right: 6vw;
}
.mml-section--hero-lg {
  padding-top: 140px;
  padding-bottom: 100px;
  padding-left: 6vw;
  padding-right: 6vw;
}

/* ============================================================
   Extended section system — added for Who We Help / Solutions /
   About / Resources builds. Reuses existing tokens; introduces
   only the new patterns those pages actually need.
   ============================================================ */

/* ---------- Small card body copy (persona/solution cards) ---------- */
.mml-card-body {
  font-size: 0.95rem;
  line-height: 1.65;
  margin-top: 0;
  margin-bottom: 0;
}
.mml-card-body--light { color: #6b7680; }
.mml-card-body--dark  { color: rgba(255,255,255,0.65); }

/* ---------- Challenge / Outcome comparison lists ---------- */
.mml-compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.mml-compare-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.98rem;
  line-height: 1.6;
}
.mml-compare-item .mml-compare-icon {
  flex: 0 0 auto;
  margin-top: 0.29rem;
}
.mml-compare-item--light { color: #334155; }
.mml-compare-item--dark  { color: #cbd5e1; }

/* ---------- Compare-list icon fallback ----------
   The icon markup inside .mml-compare-list is injected via a raw HTML block
   using Kadence's dynamic-icon span, but Kadence only enqueues its icon CSS
   (kb-svg-icon-wrap sizing) on pages that contain an actual kadence/icon
   block. Pages that only use .mml-compare-list never get that stylesheet,
   so the icons render with no width/height and disappear. Replicate the
   minimum rules here so icons render regardless of whether a real Kadence
   icon block exists elsewhere on the page. ---------- */
.mml-compare-icon.wp-block-kadence-icon {
  display: flex;
  gap: 0.2em;
  align-items: center;
  justify-content: center;
}
.mml-compare-icon .kt-svg-icon-wrap {
  display: flex;
}
.mml-compare-icon .kb-svg-icon-wrap {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-width: 0;
}
.mml-compare-icon .kb-svg-icon-wrap svg {
  width: 1em;
  height: 1em;
}

/* ---------- Stat callouts ---------- */
.mml-stat-box { text-align: left; }
.mml-stat-number {
  font-family: var(--wp--preset--font-family--nunito);
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
  margin: 0 0 0.5rem;
}
.mml-stat-number--light { color: #0088cc; }
.mml-stat-number--dark  { color: #f5a623; }
.mml-stat-label {
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}
.mml-stat-label--light { color: #6b7680; }
.mml-stat-label--dark  { color: rgba(255,255,255,0.6); }

/* ---------- Quote / testimonial block ---------- */
.mml-quote-block {
  border-left: 3px solid #0088cc;
  padding-left: 1.5rem;
}
.mml-quote-text {
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.65;
  margin: 0 0 1rem;
}
.mml-quote-text--light { color: #1a1d20; }
.mml-quote-text--dark  { color: #ffffff; }
.mml-quote-author {
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0;
}
.mml-quote-author--light { color: #1a1d20; }
.mml-quote-author--dark  { color: #ffffff; }
.mml-quote-role {
  font-size: 0.85rem;
  margin: 0;
}
.mml-quote-role--light { color: #6b7680; }
.mml-quote-role--dark  { color: rgba(255,255,255,0.6); }

/* ---------- Icon circle badge ---------- */
.mml-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mml-icon-circle--light { background: #e8f6fd; }
.mml-icon-circle--dark  { background: rgba(255,255,255,0.08); }

/* ---------- Chips (framework touchpoints, tags) ---------- */
.mml-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.mml-chip-row--center { justify-content: center; }
.mml-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  margin-block-start: 0;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
}
.mml-chip--light  { background: #eef1f4; color: #383f45; border: 1px solid #e0e5ea; }
.mml-chip--dark   { background: rgba(255,255,255,0.08); color: #e2e8f0; border: 1px solid rgba(255,255,255,0.15); }
.mml-chip--accent { background: #f5a623; color: #0c1a2e; border: 1px solid #f5a623; }

/* ---------- Responsive tightening (mobile section padding) ---------- */
@media (max-width: 600px) {
  .mml-section,
  .mml-section--home {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
    padding-left: 6vw;
    padding-right: 6vw;
  }
  .mml-section--hero,
  .mml-section--hero-lg {
    padding-top: 4.5rem;
    padding-bottom: 3.25rem;
  }
  .mml-section--tight {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
  .mml-stat-number { font-size: 2.4rem; }
  .mml-quote-text { font-size: 1.05rem; }
}

/* ---------- Button base states as classes (no inline styles) ---------- */
.mml-btn--ghost .wp-block-button__link {
  background-color: transparent !important;
  color: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
}
.mml-btn--outline-brand .wp-block-button__link {
  background-color: transparent !important;
  color: #0088cc !important;
  border: 1px solid #0088cc !important;
}
.mml-btn--outline-brand:hover .wp-block-button__link {
  background-color: #0088cc !important;
  color: #ffffff !important;
}
.mml-btn--outline-brand:hover { transform: translateY(-2px); }

/* ---------- Spacing utilities (replace one-off inline margins) ---------- */
.mml-mb-1 { margin-bottom: 1rem; }
.mml-mb-2 { margin-bottom: 1.5rem; }
.mml-mb-3 { margin-bottom: 2.5rem; }
.mml-mt-0 { margin-top: 0; }

/* ---------- Persona/solution hero icon row ---------- */
.mml-icon-circle-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }

/* ---------- AI Readiness Assessment quiz ---------- */
.mml-quiz {
  max-width: 760px;
  margin: 0 auto;
}
.mml-quiz-question {
  background: #ffffff;
  border: 1px solid #e0e5ea;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
}
.mml-quiz-question-title {
  font-family: var(--wp--preset--font-family--nunito);
  font-weight: 800;
  font-size: 1.05rem;
  color: #1a1d20;
  margin: 0 0 1rem;
}
.mml-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.mml-quiz-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: #383f45;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}
.mml-quiz-option:hover { background-color: #f4f7fa; }
.mml-quiz-option input { accent-color: #0088cc; }
.mml-quiz-submit-row { text-align: center; margin-top: 0.5rem; }
.mml-quiz-submit {
  display: inline-flex;
  align-items: center;
  border: none;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--figtree);
  background-color: #f5a623;
  color: #0c1a2e;
  border-radius: 999px;
  padding: 1rem 2rem;
  font-weight: 700;
  font-size: 1rem;
}
.mml-quiz-submit:hover { background-color: #e0951e; }
.mml-quiz-result {
  display: none;
  background-color: #004a6f;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  margin-top: 1.5rem;
}
.mml-quiz-result.mml-quiz-result--visible { display: block; }
.mml-quiz-result-score {
  font-family: var(--wp--preset--font-family--nunito);
  font-weight: 800;
  font-size: 2.4rem;
  color: #f5a623;
  margin: 0 0 0.5rem;
}
.mml-quiz-result-tier {
  font-family: var(--wp--preset--font-family--nunito);
  font-weight: 800;
  font-size: 1.3rem;
  color: #ffffff;
  margin: 0 0 0.75rem;
}
.mml-quiz-result-message {
  color: rgba(255,255,255,0.8);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.mml-quiz-error {
  display: none;
  color: #b91c1c;
  font-size: 0.9rem;
  text-align: center;
  margin-top: 0.5rem;
}
.mml-quiz-error.mml-quiz-error--visible { display: block; }

/* ---------- Interior-page hero title (Who We Help, Solutions, About, Resources, personas) ---------- */
.mml-hero-title {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 1.25rem;
  text-align: center;
}
.mml-hero-title .mml-accent { color: #f5a623; }

/* ---------- Section heading spacing (h2 under an eyebrow) ---------- */
.mml-section-heading {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

/* ---------- Section intro / lede paragraph ---------- */
.mml-section-intro {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #6b7680;
  margin-top: 0;
  margin-bottom: 3rem;
}
.mml-section-intro--tight { margin-bottom: 2.5rem; }
.mml-section-intro--dark { color: rgba(255,255,255,0.65); }

/* ---------- Card title spacing ---------- */
.mml-card-title {
  margin-bottom: 0.6rem;
}
.mml-card-title--dark { color: #ffffff; }
/* ---------- Team member cards (About > The Team) ---------- */
.mml-team-card {
  text-align: left;
}
.mml-team-row {
  align-items: flex-start;
}
.mml-team-photo-col {
  flex-shrink: 0;
}
.mml-team-photo.wp-block-image img,
.mml-team-photo img {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: var(--shadow-md);
  display: block;
}
.mml-team-name {
  margin-top: 0;
  margin-bottom: 0.25rem;
}
.mml-team-title {
  font-family: var(--wp--preset--font-family--figtree);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0088cc;
  margin-top: 0;
  margin-bottom: 1rem;
}
.mml-team-bio {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #334155;
  margin-top: 0;
  margin-bottom: 0;
}
.mml-team-bio--expanded p {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #334155;
  margin-top: 0;
  margin-bottom: 1rem;
}
.mml-team-bio--expanded p:last-child {
  margin-bottom: 0;
}

/* Bio expand/collapse toggle */
.mml-bio-toggle {
  margin-top: 0.85rem;
}
.mml-bio-toggle summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.92rem;
  color: #0088cc;
  list-style: none;
  transition: gap var(--dur-base) var(--ease-out);
}
.mml-bio-toggle summary::-webkit-details-marker { display: none; }
.mml-bio-toggle summary::after {
  content: "\2192";
  transition: transform var(--dur-base) var(--ease-out);
}
.mml-bio-toggle:hover summary { gap: 10px; }
.mml-bio-toggle[open] summary::after { transform: rotate(90deg); }
.mml-bio-toggle[open] summary { margin-bottom: 0.5rem; }

@media (max-width: 600px) {
  .mml-team-row.wp-block-columns { flex-wrap: wrap; }
  .mml-team-photo-col { flex-basis: 100% !important; margin-bottom: 1rem; }
  .mml-team-photo.wp-block-image img,
  .mml-team-photo img { width: 96px !important; height: 96px !important; margin: 0 auto; }
  .mml-team-card { text-align: center; }
  .mml-team-row .mml-team-photo-col { display: flex; justify-content: center; }
}

/* Footer */
footer.wp-block-template-part {
  margin-block-start: 0;
}
@media all and (max-width: 1238px) {
  .mml-site-footer > .wp-block-group {
    width: 100%;
    text-align: center;
    flex-direction: column;
    align-items: center;
  }
}
/* ============================================================
   Blog post cards (Resources > Blog) — contemporary card redesign
   ============================================================ */
.mml-blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  text-align: left;
}
.mml-blog-card.mml-card--interactive { text-align: left; }

/* Featured image bleeds edge-to-edge across the top of the card */
.mml-blog-card .wp-block-post-featured-image {
  margin: 0;
}
.mml-blog-card .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
}

.mml-blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.75rem 2rem 2rem;
}
.mml-blog-card .mml-card-title {
  font-size: 1.15rem;
  line-height: 1.4;
  margin-top: 0;
}

/* ---------- Meta row: date / author / category / tags as icon pills ---------- */
.mml-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.mml-meta-row .mml-chip { gap: 0.35rem; }
.mml-meta-row a,
.mml-meta-row .wp-block-post-terms,
.mml-meta-row .wp-block-post-date,
.mml-meta-row .wp-block-post-author {
  color: inherit;
  text-decoration: none;
}
.mml-meta-row a:hover { text-decoration: underline; }

.mml-meta-row .mml-chip::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.mml-chip--cat::before {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzAwMCI+PHBhdGggZD0iTTUuNSAyLjVBMS41IDEuNSAwIDAwNCA0djE0LjM3OWExIDEgMCAwMDEuNTMuODQ4TDEwIDE2LjVsNC40NyAyLjcyN2ExIDEgMCAwMDEuNTMtLjg0OFY0YTEuNSAxLjUgMCAwMC0xLjUtMS41aC05eiIvPjwvc3ZnPgo=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzAwMCI+PHBhdGggZD0iTTUuNSAyLjVBMS41IDEuNSAwIDAwNCA0djE0LjM3OWExIDEgMCAwMDEuNTMuODQ4TDEwIDE2LjVsNC40NyAyLjcyN2ExIDEgMCAwMDEuNTMtLjg0OFY0YTEuNSAxLjUgMCAwMC0xLjUtMS41aC05eiIvPjwvc3ZnPgo=");
}
.mml-chip--date::before {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzAwMCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS43NSAyYS43NS43NSAwIDAxLjc1Ljc1VjRoN1YyLjc1YS43NS43NSAwIDAxMS41IDBWNGguMjVBMi43NSAyLjc1IDAgMDExOCA2Ljc1djguNUEyLjc1IDIuNzUgMCAwMTE1LjI1IDE4SDQuNzVBMi43NSAyLjc1IDAgMDEyIDE1LjI1di04LjVBMi43NSAyLjc1IDAgMDE0Ljc1IDRINVYyLjc1QS43NS43NSAwIDAxNS43NSAyek0zLjUgOC41djYuNzVjMCAuNjkuNTYgMS4yNSAxLjI1IDEuMjVoMTAuNWMuNjkgMCAxLjI1LS41NiAxLjI1LTEuMjVWOC41aC0xM3oiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPgo=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzAwMCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS43NSAyYS43NS43NSAwIDAxLjc1Ljc1VjRoN1YyLjc1YS43NS43NSAwIDAxMS41IDBWNGguMjVBMi43NSAyLjc1IDAgMDExOCA2Ljc1djguNUEyLjc1IDIuNzUgMCAwMTE1LjI1IDE4SDQuNzVBMi43NSAyLjc1IDAgMDEyIDE1LjI1di04LjVBMi43NSAyLjc1IDAgMDE0Ljc1IDRINVYyLjc1QS43NS43NSAwIDAxNS43NSAyek0zLjUgOC41djYuNzVjMCAuNjkuNTYgMS4yNSAxLjI1IDEuMjVoMTAuNWMuNjkgMCAxLjI1LS41NiAxLjI1LTEuMjVWOC41aC0xM3oiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPgo=");
}
.mml-chip--author::before {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzAwMCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAgOWEzLjUgMy41IDAgMTAwLTcgMy41IDMuNSAwIDAwMCA3em0tNiA4YTYgNiAwIDExMTIgMCAxIDEgMCAwMS0xIDFINWExIDEgMCAwMS0xLTF6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4K");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzAwMCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAgOWEzLjUgMy41IDAgMTAwLTcgMy41IDMuNSAwIDAwMCA3em0tNiA4YTYgNiAwIDExMTIgMCAxIDEgMCAwMS0xIDFINWExIDEgMCAwMS0xLTF6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4K");
}
.mml-tag-list {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0 0 1rem;
}
.mml-tag-list::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 0.35rem;
  vertical-align: -2px;
  background-color: currentColor;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzAwMCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS41IDNBMi41IDIuNSAwIDAwMyA1LjV2My44NzlhMi41IDIuNSAwIDAwLjczMiAxLjc2N2w3LjUgNy41YTIuNSAyLjUgMCAwMDMuNTM2IDBsMy44NzktMy44NzlhMi41IDIuNSAwIDAwMC0zLjUzNmwtNy41LTcuNUEyLjUgMi41IDAgMDA5LjM4IDNINS41ek03IDhhMSAxIDAgMTAwLTIgMSAxIDAgMDAwIDJ6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4K");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzAwMCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS41IDNBMi41IDIuNSAwIDAwMyA1LjV2My44NzlhMi41IDIuNSAwIDAwLjczMiAxLjc2N2w3LjUgNy41YTIuNSAyLjUgMCAwMDMuNTM2IDBsMy44NzktMy44NzlhMi41IDIuNSAwIDAwMC0zLjUzNmwtNy41LTcuNUEyLjUgMi41IDAgMDA5LjM4IDNINS41ek03IDhhMSAxIDAgMTAwLTIgMSAxIDAgMDAwIDJ6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4K");
}
.mml-tag-list .wp-block-post-terms__separator {
  color: #cbd5e1;
}
.mml-tag-list a {
  color: #6b7680;
  text-decoration: underline;
  text-decoration-color: #cbd5e1;
  text-underline-offset: 2px;
}
.mml-tag-list a:hover {
  color: #0088cc;
  text-decoration-color: #0088cc;
}
.mml-blog-card .wp-block-post-excerpt a:hover,
.mml-blog-card .wp-block-post-excerpt__more-link:hover {
  text-decoration: underline;
}

@media (max-width: 782px) {
  .mml-blog-card-body { padding: 1.5rem 1.5rem 1.75rem; }
}

/* A post can carry multiple categories — a pill listing all of them as one
   long comma-separated blob looks broken. Show just the first category
   (still a real link) and hide the rest + separators. Tags are no longer
   pills (see .mml-tag-list below) so every tag is shown as plain text. */
.mml-chip--cat a:not(:first-of-type),
.mml-chip--cat .wp-block-post-terms__separator {
  display: none;
}

/* ============================================================
   Blog sidebar (Resources > Blog)
   ============================================================ */
.mml-blog-layout {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
}
.mml-blog-main {
  flex: 1 1 0%;
  min-width: 0;
}
/* .mml-sidebar-toggle is the actual flex item now; the inner
   .mml-blog-sidebar div just stacks the three boxes.

   Mobile collapse uses a plain checkbox + label instead of
   <details>/<summary>: browsers implement the closed-details state via
   a UA stylesheet rule that in some engines can't reliably be
   overridden even with `display: flex !important` (that's what broke
   the desktop view last time — the sidebar content stayed hidden).
   A checkbox's :checked state has no such special-cased UA styling,
   so we get full, predictable control over show/hide at both
   breakpoints. */
.mml-sidebar-toggle {
  flex: 0 0 300px;
  width: 300px;
  position: sticky;
  top: 100px;
}
.mml-sidebar-toggle-input { display: none; }
.mml-blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .mml-blog-layout { flex-direction: column; gap: 2.5rem; }
  .mml-sidebar-toggle { width: 100%; flex-basis: auto; position: static; order: -1; }
}

/* ---------- Mobile filter toggle ---------- */
.mml-sidebar-toggle-summary { display: none; }

@media (max-width: 900px) {
  .mml-sidebar-toggle-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.9rem 1.25rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: #1a1d20;
  }
  .mml-sidebar-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
  }
  .mml-sidebar-toggle-label svg { width: 18px; height: 18px; color: #0088cc; }
  .mml-sidebar-toggle-badge {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f5a623;
  }
  .mml-sidebar-toggle-chevron {
    width: 16px;
    height: 16px;
    color: #6b7680;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .mml-sidebar-toggle-input:checked ~ .mml-sidebar-toggle-summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .mml-sidebar-toggle-input:checked ~ .mml-sidebar-toggle-summary .mml-sidebar-toggle-chevron {
    transform: rotate(180deg);
  }
  /* Collapsed by default; only show the panel once the checkbox is checked */
  .mml-blog-sidebar {
    display: none;
    margin-top: 0.75rem;
  }
  .mml-sidebar-toggle-input:checked ~ .mml-blog-sidebar {
    display: flex;
  }
}

.mml-sidebar-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
}
.mml-sidebar-title {
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0 0 1.1rem;
}

/* ---------- Search ---------- */
.mml-search-row {
  display: flex;
  gap: 0.5rem;
}
.mml-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid #e0e5ea;
  border-radius: 999px;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: #1a1d20;
  background: #f8fafc;
}
.mml-search-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: none;
  border-radius: 50%;
  background: #0088cc;
  color: #ffffff;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.mml-search-submit svg { width: 16px; height: 16px; }
.mml-search-submit:hover { background: #006fa8; transform: translateY(-1px); }

/* ---------- Category list ---------- */
.mml-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 360px;
  overflow-y: auto;
}
.mml-sidebar-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #383f45;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.mml-sidebar-list a:hover { background: #f4f7fa; color: #0088cc; }
.mml-sidebar-list li.is-active a {
  background: #e8f6fd;
  color: #0088cc;
  font-weight: 700;
}
.mml-sidebar-count {
  font-size: 0.78rem;
  color: #9aa4ae;
  font-weight: 600;
}
.mml-sidebar-list li.is-active .mml-sidebar-count { color: #0088cc; }

/* ---------- Tag cloud ---------- */
.mml-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mml-tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: #eef1f4;
  border: 1px solid #e0e5ea;
  color: #383f45;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.mml-tag-pill:hover {
  background: #e8f6fd;
  border-color: #0088cc;
  color: #0088cc;
}
.mml-tag-pill.is-active {
  background: #0088cc;
  border-color: #0088cc;
  color: #ffffff;
}

/* ---------- Clear filters ---------- */
.mml-sidebar-clear {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6b7680;
  text-decoration: underline;
  text-decoration-color: #cbd5e1;
}
.mml-sidebar-clear:hover { color: #0088cc; text-decoration-color: #0088cc; }

@media (max-width: 600px) {
  .mml-sidebar-box { padding: 1.25rem; }
}

/* ============================================================
   Query pagination (Resources > Blog)
   ============================================================ */
.wp-block-query-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 3rem;
}
.wp-block-query-pagination-numbers {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
}
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #383f45;
  background: #ffffff;
  border: 1px solid #e0e5ea;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
a.page-numbers:hover {
  background: #e8f6fd;
  border-color: #0088cc;
  color: #0088cc;
  transform: translateY(-1px);
}
.page-numbers.current {
  background: #0088cc;
  border-color: #0088cc;
  color: #ffffff;
}
.page-numbers.dots {
  border: none;
  background: transparent;
  color: #9aa4ae;
  min-width: auto;
  width: auto;
  height: auto;
  padding: 0 0.15rem;
}
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.4rem;
  padding: 0 1.15rem;
  border-radius: 999px;
  border: 1px solid #0088cc;
  background: transparent;
  color: #0088cc;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.wp-block-query-pagination-previous::before { content: "\2190"; }
.wp-block-query-pagination-next::after { content: "\2192"; }
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
  background: #0088cc;
  color: #ffffff;
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  /* Too many page-number pills for a narrow screen — fall back to just
     Previous / Next. */
  .wp-block-query-pagination-numbers { display: none; }
}

/* ============================================================
   Single post template
   ============================================================ */

/* Hero meta row on the single-post gradient band is centered,
   unlike the left-aligned card meta row it borrows classes from. */
.mml-meta-row--center { justify-content: center; }

/* ---------- Featured image ---------- */
.mml-single-featured-image {
  margin: 0 0 2.5rem;
}
.mml-single-featured-image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

/* ---------- Article typography ---------- */
.mml-blog-main .wp-block-post-content {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #334155;
}
.mml-blog-main .wp-block-post-content > * { margin-top: 0; margin-bottom: 1.5rem; }
.mml-blog-main .wp-block-post-content > *:last-child { margin-bottom: 0; }
.mml-blog-main .wp-block-post-content h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.25;
  color: #0c1a2e;
  margin-top: 2.5rem;
}
.mml-blog-main .wp-block-post-content h3 {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  color: #0c1a2e;
  margin-top: 2.25rem;
}
.mml-blog-main .wp-block-post-content h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0c1a2e;
  margin-top: 1.75rem;
}
.mml-blog-main .wp-block-post-content a {
  color: #0088cc;
  text-decoration: underline;
  text-decoration-color: rgba(0,136,204,0.35);
}
.mml-blog-main .wp-block-post-content a:hover { text-decoration-color: #0088cc; }
.mml-blog-main .wp-block-post-content strong { color: #1a1d20; }
.mml-blog-main .wp-block-post-content ul,
.mml-blog-main .wp-block-post-content ol {
  padding-left: 1.4rem;
}
.mml-blog-main .wp-block-post-content li { margin-bottom: 0.5rem; line-height: 1.7; }
.mml-blog-main .wp-block-post-content img {
  border-radius: 12px;
  height: auto;
  max-width: 100%;
}
.mml-blog-main .wp-block-post-content blockquote {
  border-left: 3px solid #0088cc;
  padding-left: 1.5rem;
  font-size: 1.15rem;
  font-style: italic;
  color: #1a1d20;
}
.mml-blog-main .wp-block-post-content figcaption {
  font-size: 0.85rem;
  color: #94a3b8;
  text-align: center;
  margin-top: 0.6rem;
}
.mml-blog-main .wp-block-post-content hr {
  border: none;
  border-top: 1px solid #e2e8f0;
}
.mml-blog-main .wp-block-post-content code {
  background: #f4f7fa;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
}

/* ---------- Tag list separator (below article content) ---------- */
.mml-blog-main > .mml-tag-list {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

/* ---------- Post navigation (prev / next) ---------- */
.mml-post-nav {
  margin-top: 3rem;
  padding-top: 0;
  gap: 1.25rem;
  align-items: stretch;
}
.mml-post-nav-link {
  flex: 1 1 0;
  min-width: 0;
}
.mml-post-nav-link--next { margin-left: auto; }
.mml-post-nav-link a {
  display: block;
  height: 100%;
  box-sizing: border-box;
  padding: 1.1rem 1.4rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  color: #1a1d20;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.mml-post-nav-link a:hover {
  border-color: #0088cc;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.mml-post-nav-link a::before {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0088cc;
  margin-bottom: 0.4rem;
}
.mml-post-nav-link--prev a::before { content: "\2190 Previous"; }
.mml-post-nav-link--next a { text-align: right; }
.mml-post-nav-link--next a::before { content: "Next \2192"; }

/* ---------- Author bio box ---------- */
.mml-author-box {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding: 1.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.mml-author-avatar img {
  display: block;
  border-radius: 50%;
}
.mml-author-box-body { flex: 1 1 auto; min-width: 0; }
.mml-author-box-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0 0 0.3rem;
}
.mml-author-box-name {
  font-family: var(--wp--preset--font-family--nunito);
  font-weight: 800;
  font-size: 1.05rem;
  color: #0c1a2e;
  margin: 0 0 0.5rem;
}
.mml-author-box-name a { color: inherit; text-decoration: none; }
.mml-author-box-name a:hover { color: #0088cc; }
.mml-author-box-bio {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #6b7680;
  margin: 0;
}

@media (max-width: 600px) {
  .mml-post-nav { flex-direction: column; }
  .mml-post-nav-link--next { margin-left: 0; }
  .mml-post-nav-link--next a,
  .mml-post-nav-link--next a::before { text-align: left; }
  .mml-author-box { flex-direction: column; }
}

/* ---------- Comment form submit button ---------- */
/* Block-theme comment forms render the submit button as a real Button
   block (`.wp-block-button__link.wp-element-button`) styled from
   theme.json, which only swaps the background color on hover — none of
   the lift/glow treatment our other CTAs get, since this markup is
   generated by core rather than hand-set in the editor. Add it here,
   and force the text to stay light so it never reads dark-on-dark. */
.wp-block-comments .wp-block-button__link {
  transition: transform 200ms cubic-bezier(0.16,1,0.3,1),
              box-shadow 200ms cubic-bezier(0.16,1,0.3,1),
              background-color 200ms ease, color 200ms ease;
}
.wp-block-comments .wp-block-button__link:hover,
.wp-block-comments .wp-block-button__link:focus {
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,136,204,0.4);
}

/* ---------- Social share row (single post, after content) ---------- */
.mml-share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}
.mml-share-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-right: 0.25rem;
}
.mml-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #eef1f4;
  color: #383f45;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.mml-share-btn svg { width: 16px; height: 16px; display: block; }
.mml-share-btn:hover {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.mml-share-btn--x:hover { background: #000000; }
.mml-share-btn--facebook:hover { background: #1877f2; }
.mml-share-btn--linkedin:hover { background: #0a66c2; }
.mml-share-btn--email:hover { background: #0088cc; }

@media (max-width: 600px) {
  .mml-share-label { width: 100%; margin-right: 0; margin-bottom: 0.25rem; }
}

/* Client Logos — filterable grid */
.mml-clients {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.mml-filter-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a2b4c;
  background: #fff;
  border: 2px solid rgba(26, 43, 76, 0.15);
  border-radius: 999px;
  padding: 0.65rem 1.25rem;
  margin: 0 0 1rem;
  cursor: pointer;
}

.mml-filter-toggle-icon {
  display: inline-block;
  transition: transform 0.15s ease;
}

.mml-filter-toggle[aria-expanded="true"] .mml-filter-toggle-icon {
  transform: rotate(180deg);
}

.mml-clients-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 2.5rem;
}

.mml-filter-btn {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1a2b4c;
  background: #fff;
  border: 2px solid rgba(26, 43, 76, 0.15);
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.mml-filter-btn:hover {
  border-color: rgba(26, 43, 76, 0.35);
  transform: translateY(-1px);
}

.mml-filter-btn.is-active {
  background: #1a2b4c;
  border-color: #1a2b4c;
  color: #fff;
}

.mml-clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.25rem;
}

.mml-client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);
  padding: 1.25rem;
  min-height: 110px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}

.mml-client-logo:hover {
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
  transform: translateY(-2px);
}

.mml-client-logo img {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.85;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.mml-client-logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

.mml-client-logo.is-hidden {
  display: none;
}

@media (max-width: 600px) {
  .mml-clients-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
  }
  .mml-client-logo {
    min-height: 80px;
    padding: 0.85rem;
  }
  .mml-client-logo img {
    max-height: 44px;
  }
}

@media (max-width: 700px) {
  .mml-filter-toggle {
    display: flex;
  }
  .mml-clients-filter {
    display: none;
    margin-bottom: 1.5rem;
  }
  .mml-clients-filter.is-open {
    display: flex;
  }
}

/* ============================================================
 * Growth Strategy Call modal
 * Content is authored in the block editor on the private page
 * "Growth Strategy Modal Component" and injected sitewide via
 * wp_footer(); this just handles the show/hide chrome.
 * ============================================================ */
.mml-growth-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.mml-growth-modal.is-open {
	display: flex;
}
.mml-growth-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 20, 40, 0.6);
}
.mml-growth-modal__dialog {
	position: relative;
	background: #fff;
	border-radius: 16px;
	max-width: 640px;
	width: min(92vw, 640px);
	max-height: 88vh;
	overflow-y: auto;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.mml-growth-modal__close-wrap {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 0.5rem;
}
.mml-growth-modal__close .wp-block-button__link {
	cursor: pointer;
	padding: 0.35rem 0.9rem;
	font-size: 0.85rem;
}
.mml-growth-modal .kt-blocks-accordion-title {
	font-weight: 700;
}
body.mml-modal-open {
	overflow: hidden;
}


/* Growth modal overlay: WordPress' constrained-layout CSS applies
 * max-width + auto margins to ALL direct children of a "constrained"
 * group (including absolutely positioned ones), which was shrinking
 * the overlay to content width instead of covering the viewport. */
.mml-growth-modal__overlay {
	position: absolute !important;
	inset: 0 !important;
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
}


/* ============================================================
 * Growth Strategy Call modal — brand styling pass
 * Colors/radii/shadows pulled from the site's own tokens so this
 * matches cards and buttons elsewhere on the site.
 * ============================================================ */

.mml-growth-modal__dialog {
	border-radius: 16px;
	box-shadow: var(--shadow-xl, 0 24px 56px rgba(20,40,60,0.18));
	padding-top: 4rem;
	border: 1px solid var(--wp--preset--color--border-subtle, #e0e5ea);
}

.mml-growth-modal__dialog h2 {
	color: var(--wp--preset--color--blue-900, #003650);
	font-size: clamp(1.5rem, 3.4vw, 2rem);
	line-height: 1.2;
}

.mml-growth-modal__dialog > .wp-block-paragraph {
	color: var(--wp--preset--color--text-muted, #6b7680);
}

/* Close button: fixed top-right, icon-only circle. Text stays in the
 * markup ("Close") for screen readers; font-size:0 hides it visually
 * and an inline SVG mask draws the X. */
.mml-growth-modal__close-wrap {
	position: absolute !important;
	top: 1rem;
	right: 1rem;
	margin: 0 !important;
	z-index: 2;
	justify-content: flex-end;
}

.mml-growth-modal__close .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--neutral-100, #eef1f4);
	border: 1px solid var(--wp--preset--color--border-subtle, #e0e5ea);
	color: var(--wp--preset--color--blue-900, #003650);
	font-size: 0;
	line-height: 1;
	transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.mml-growth-modal__close .wp-block-button__link::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.mml-growth-modal__close .wp-block-button__link:hover {
	background: var(--wp--preset--color--blue-900, #003650);
	border-color: var(--wp--preset--color--blue-900, #003650);
	color: #fff;
	transform: scale(1.06);
}

/* Accordion: round the whole wrap, give panes on-brand active/inactive
 * header colors (Kadence's own defaults are a generic gray). */
.mml-growth-modal .kt-accordion-wrap {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border-subtle, #e0e5ea);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(20,40,60,0.08));
}
.mml-growth-modal .kt-blocks-accordion-header {
	background: var(--wp--preset--color--neutral-50, #f6f8fa) !important;
	color: var(--wp--preset--color--blue-900, #003650) !important;
	transition: background 0.15s ease, color 0.15s ease;
}
.mml-growth-modal .kt-blocks-accordion-header:hover {
	background: var(--wp--preset--color--neutral-100, #eef1f4) !important;
}
.mml-growth-modal .kt-blocks-accordion-header.kt-accordion-panel-active {
	background: var(--wp--preset--color--blue-900, #003650) !important;
	color: #fff !important;
}
.mml-growth-modal .kt-blocks-accordion-title {
	font-weight: 700;
	display: inline-flex;
	align-items: center;
}

/* Pane icons — same currentColor + mask-image technique used for small
 * icons elsewhere on the site, so these read as "real" icons rather
 * than emoji. */
.mml-growth-modal .kt-blocks-accordion-title::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 0.65rem;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.mml-growth-modal .kt-accordion-pane-1 .kt-blocks-accordion-title::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
}
.mml-growth-modal .kt-accordion-pane-2 .kt-blocks-accordion-title::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
}
.mml-growth-modal .kt-accordion-pane-3 .kt-blocks-accordion-title::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E");
}

/* Connect panel: brand-blue email link, breathing room above social icons */
.mml-growth-modal .kt-accordion-pane-3 .wp-block-social-links {
	margin-top: 0.85rem;
}
.mml-growth-modal .kt-accordion-pane-3 a[href^="mailto:"] {
	color: var(--wp--preset--color--blue-500, #0088cc);
	font-weight: 600;
}

/* WPForms submit button — match the site's pill CTA styling */
.mml-growth-modal .wpforms-submit-container button.wpforms-submit {
	border-radius: 999px !important;
	background: var(--wp--preset--color--spark-500, #f5a623) !important;
	border-color: var(--wp--preset--color--spark-500, #f5a623) !important;
	color: var(--wp--preset--color--blue-900, #003650) !important;
	font-weight: 700 !important;
	padding: 0.85rem 1.75rem !important;
}
.mml-growth-modal .wpforms-submit-container button.wpforms-submit:hover {
	opacity: 0.92;
	transform: translateY(-1px);
}

/* ============================================================
 * Newsletter signup modal — sitewide.
 * Content lives on the private page "Newsletter Signup Modal
 * Component" and is injected sitewide via wp_footer(); this handles
 * the show/hide chrome. Mirrors .mml-growth-modal's styling.
 * ============================================================ */
.mml-newsletter-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.mml-newsletter-modal.is-open {
	display: flex;
}
.mml-newsletter-modal__overlay {
	position: absolute !important;
	inset: 0 !important;
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
	background: rgba(0, 20, 40, 0.6);
}
.mml-newsletter-modal__dialog {
	position: relative;
	background: #fff;
	border-radius: 16px;
	max-width: 640px;
	width: min(92vw, 640px);
	max-height: 88vh;
	overflow-y: auto;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	padding-top: 4rem;
	box-shadow: var(--shadow-xl, 0 24px 56px rgba(20,40,60,0.18));
	border: 1px solid var(--wp--preset--color--border-subtle, #e0e5ea);
}
.mml-newsletter-modal__dialog h2 {
	color: var(--wp--preset--color--blue-900, #003650);
	font-size: clamp(1.5rem, 3.4vw, 2rem);
	line-height: 1.2;
}
.mml-newsletter-modal__dialog > .wp-block-paragraph {
	color: var(--wp--preset--color--text-muted, #6b7680);
}
.mml-newsletter-modal__close-wrap {
	position: absolute !important;
	top: 1rem;
	right: 1rem;
	margin: 0 !important;
	z-index: 2;
	justify-content: flex-end;
	display: flex;
}
.mml-newsletter-modal__close .wp-block-button__link {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--neutral-100, #eef1f4);
	border: 1px solid var(--wp--preset--color--border-subtle, #e0e5ea);
	color: var(--wp--preset--color--blue-900, #003650);
	font-size: 0;
	line-height: 1;
	transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.mml-newsletter-modal__close .wp-block-button__link::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.mml-newsletter-modal .kt-blocks-accordion-title {
	font-weight: 700;
}


/* Client Logos — continuous marquee (homepage) */
.mml-logo-carousel {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.mml-logo-track {
  display: flex;
  width: max-content;
  animation-name: mml-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.mml-logo-track:hover {
  animation-play-state: paused;
}

.mml-logo-track-group {
  display: flex;
  flex-shrink: 0;
  gap: 1.25rem;
  padding-right: 1.25rem;
}

.mml-logo-carousel .mml-client-logo {
  flex: 0 0 160px;
  width: 160px;
  margin: 0.5rem 0 1rem 0;
}

@keyframes mml-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 600px) {
  .mml-logo-carousel .mml-client-logo {
    flex: 0 0 120px;
    width: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mml-logo-track {
    animation: none;
  }
}

@media (max-width: 600px) {
  .mml-group-header-with-img {
    flex-direction: column !important;
  }
}