/* ============================================================
     Tokens (match the live Elementor global kit)
     ============================================================ */
  .nmd-header {
    --nmd-bg:           #1B3360;   /* deep brand navy — main row */
    --nmd-bg-alt:       #1B3360;   /* mobile drawer bg — matches main brand navy */
    --nmd-ink:          #FFFFFF;
    --nmd-ink-muted:    rgba(255, 255, 255, 0.85);
    --nmd-border:       rgba(255, 255, 255, 0.22);
    --nmd-support:      #61CE70;   /* brand accent green */
    --nmd-cta-text:     #FFFFFF;
    --nmd-radius-btn:   10px;
    --nmd-radius-cta:   4px;
    --nmd-mega-shadow:  0 8px 32px rgba(8, 20, 45, 0.22);
    --nmd-focus-ring:   0 0 0 2px var(--nmd-support);

    /* Total header height = topbar (min-height 48 + padding 16 = 64)
       + main row (min-height 96 + padding 40 = 136) = 200px. Used as
       a fallback only — JS measures the actual rendered height
       (getBoundingClientRect().bottom) on load / resize / fonts-ready
       and publishes it on this variable so the mega panel sits flush. */
    --nmd-header-height: 200px;

    --nmd-font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --nmd-font-cta:     "Montserrat", "Poppins", system-ui, sans-serif;

    background: var(--nmd-bg);
    color: var(--nmd-ink);
    font-family: var(--nmd-font-body);
    font-weight: 400;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 100;
  }

  .nmd-header *,
  .nmd-header *::before,
  .nmd-header *::after { box-sizing: border-box; }

  .nmd-header a {
    color: inherit;
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
  }

  .nmd-header svg { flex-shrink: 0; display: block; }

  /* Skip-to-content link — hidden until focused, then visible at top-left */
  .nmd-skip {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 200;
    padding: 10px 16px;
    background: var(--nmd-support);
    color: #0a1f3d;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-radius: 4px;
    transition: top .15s ease;
  }
  .nmd-skip:focus { top: 16px; }

  /* ============================================================
     Layout container
     ============================================================ */
  .nmd-header__inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 50px;
    position: relative;
  }

  /* ============================================================
     Top utility bar
     ============================================================ */
  .nmd-topbar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    min-height: 48px;
    padding: 8px 0;
    position: relative;
    border-bottom: 0;
    font-size: 12px;
    letter-spacing: 0.02em;
  }

  /* Background lives on a pseudo-element so the dark gradient extends
     full-viewport while the topbar's box (and its content) stay
     constrained to `.nmd-header__inner` (max-width: 1300px). The
     `left/right: 50%` + `margin: -50vw` trick centers the pseudo at
     the viewport midline and extends it 50vw in each direction. */
  .nmd-topbar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: linear-gradient(180deg, #102a4c 0%, #061629 100%);
    z-index: -1;
  }

  /* Brand-accent seam — a 2px gradient line stitched from the kit's
     identity colors that joins utility bar to the main row. Uses the
     same viewport-extending trick as the background pseudo-element
     so the stripe runs full-width even though the topbar's box is
     constrained to the 1300px inner. */
  .nmd-topbar::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
      #61CE70 0%,
      #0D558F 35%,
      #1555C1 65%,
      #FF7800 100%);
    z-index: 2;
  }

  .nmd-topbar__stat {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--nmd-ink);
  }

  .nmd-topbar__stat-icon {
    width: 26px;
    height: 26px;
    color: var(--nmd-ink-muted);
  }

  .nmd-topbar__stat-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }

  .nmd-topbar__eyebrow {
    font-family: var(--nmd-font-body);
    font-weight: 400;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nmd-ink-muted);
  }

  .nmd-topbar__stat-amount {
    font-family: var(--nmd-font-body);
    font-weight: 700;
    font-size: 13px;
    color: var(--nmd-ink);
    letter-spacing: 0.01em;
  }

  .nmd-topbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    min-width: 120px;
    padding: 0 14px;
    border-radius: var(--nmd-radius-btn);
    background: transparent;
    color: var(--nmd-ink) !important;
    font-family: "Poppins", system-ui, sans-serif !important;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.9px !important;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .nmd-topbar__btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
  }

  .nmd-topbar__btn svg { width: 14px; height: 14px; }
  .nmd-topbar__btn--support svg { color: #FFFFFF !important; }

  .nmd-topbar__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    color: var(--nmd-ink);
  }

  .nmd-topbar__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--nmd-ink) !important;
    font-family: "Poppins", system-ui, sans-serif !important;
    white-space: nowrap;
  }

  .nmd-topbar__phone:hover { color: #FFFFFF !important; }
  .nmd-topbar__phone svg { width: 16px; height: 16px; }

  /* ============================================================
     Main row — logo | nav | CTA
     ============================================================ */
  .nmd-main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
    min-height: 96px;
    padding: 18px 0 22px;
    position: relative;
    border-top: 0;
  }

  /* Main-row background lives on `::before` so the navy radial +
     linear gradient extends full-viewport (via the
     `left/right: 50%` + `margin: -50vw` trick) while the main's
     box stays constrained to the 1300px inner. The texture overlay
     is layered on top of the gradient in the same pseudo. */
  .nmd-main::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background:
      repeating-linear-gradient(
        135deg,
        transparent 0px,
        transparent 28px,
        rgba(255, 255, 255, 0.018) 28px,
        rgba(255, 255, 255, 0.018) 29px
      ),
      radial-gradient(ellipse 50% 80% at 18% 0%,
        rgba(13, 84, 175, 0.55) 0%,
        rgba(13, 84, 175, 0) 60%),
      linear-gradient(135deg,
        #1B3360 0%,
        #14305a 35%,
        #0D4275 70%,
        #0a2a52 100%);
    z-index: -2;
    pointer-events: none;
  }

  /* Faint 1px hairline at the bottom — also extended full-viewport
     so the separator line spans edge-to-edge like the backgrounds. */
  .nmd-main::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.10) 25%,
      rgba(255, 255, 255, 0.10) 75%,
      transparent 100%);
    pointer-events: none;
    z-index: 2;
  }

  /* Ensure interactive content sits above the texture overlay */
  .nmd-logo,
  .nmd-nav,
  .nmd-cta,
  .nmd-header__menu-toggle {
    position: relative;
    z-index: 1;
  }

  .nmd-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  .nmd-logo img {
    display: block;
    height: 52.5px;
    width: auto;
  }

  /* ============================================================
     Main nav — Stratum Mega Menu pattern
     ============================================================ */
  .nmd-nav {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nmd-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .nmd-nav__item {
    position: static; /* mega menu needs full-width reference */
  }

  .nmd-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 18px;
    color: var(--nmd-ink) !important;
    font-family: "Poppins", system-ui, sans-serif !important;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
  }

  .nmd-nav__link:hover,
  .nmd-nav__item:hover > .nmd-nav__link,
  .nmd-nav__item:focus-within > .nmd-nav__link {
    color: #FFFFFF !important;
  }

  /* Keyboard-only focus ring — visible on Tab, hidden on mouse click */
  .nmd-nav__link:focus-visible {
    outline: 2px solid var(--nmd-support);
    outline-offset: -2px;
    border-radius: 2px;
  }
  .nmd-cta:focus-visible {
    outline: var(--nmd-focus-ring);
    outline-offset: 2px;
  }
  .nmd-topbar__btn:focus-visible,
  .nmd-topbar__phone:focus-visible {
    outline: var(--nmd-focus-ring);
    outline-offset: 2px;
    border-radius: var(--nmd-radius-btn);
  }
  .nmd-nav__caret {
    width: 10px;
    height: 10px;
    opacity: 0.85;
    transition: transform 0.15s linear;
  }

  .nmd-nav__item:hover .nmd-nav__caret { transform: rotate(180deg); }

  /* ============================================================
     Mega menu panel — full-width white drawer that drops below the nav

     Architecture (clean rebuild):
       .nmd-mega         → white panel + shadow, extends full viewport
                            via the `left/right: 50%` + `margin: -50vw`
                            trick. Padding is vertical only — horizontal
                            spacing lives on .nmd-mega__inner.
       .nmd-mega__inner  → content container, max-width 1300px centered
                            with 50px horizontal padding so columns
                            align with the logo and CTA above.
       .nmd-mega__col    → optional grid child for grid-based panels
                            (Case Studies, Our Difference).
       .nmd-mega__heading/intro/list → text styling for each column.

     Variants:
       (default)         → no display set; .nmd-mega__inner is a plain
                            block. Used as the Elementor-style panel
                            host.
       --three           → 3-column grid (Case Studies).
       --two             → 2-column grid (Our Difference).
       --wide            → 5-column grid.
       --elementor       → block; relies on the inline flex wrapper
                            inside to lay out columns. The wrapper's
                            inline `min-width: 250px` on each column
                            is overridden below so columns always fit
                            on one row.
     ============================================================ */
  .nmd-mega {
    /* position: fixed instead of absolute so the panel surface can
       extend edge-to-edge across the full viewport without being
       constrained by the centered .nmd-header__inner above. `top` is
       the header height so the panel drops just below the nav row. */
    position: fixed;
    top: var(--nmd-header-height, 200px);
    left: 0;
    right: 0;
    /* Top padding bumped to 25px so the first column heading sits
       25px below the navy header seam. The hover bridge (::after
       below) still extends 24px above the panel so the cursor can
       still cross from nav trigger to panel without losing hover. */
    padding: 25px 0 24px;
    background: #FFFFFF;
    box-shadow: var(--nmd-mega-shadow);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    /* Closed-state transition. The 0.2s grace window gives the user
       a very snappy window after their cursor leaves the trigger to
       hover down onto the panel itself. visibility: hidden waits the
       full grace + fade-out (0.6s) so the panel still receives
       pointer events during the grace window. Opacity + transform
       fade over 0.4s after the delay. */
    transition:
      opacity   0.4s ease 0.2s,
      transform 0.4s ease 0.2s,
      visibility 0s linear 0.6s;
    pointer-events: none;
  }

  /* Hover bridge — keeps the cursor transition smooth between the
     nav trigger and the panel surface (no flicker). Generous 24px
     so the cursor has a wide corridor to travel through. */
  .nmd-mega::after {
    content: '';
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 24px;
    background: transparent;
  }

  /* Open-state override — snappy entrance, no delay. When the user
     hovers (or focus-within) the nav item, the panel appears
     immediately. The matching 0.4s ease curve keeps the entrance
     and exit on the same timing curve so there's no jarring
     discontinuity. */
  .nmd-nav__item--has-mega:hover > .nmd-mega,
  .nmd-nav__item--has-mega:focus-within > .nmd-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 9999;
    pointer-events: auto;
    transition:
      opacity   0.4s ease 0s,
      transform 0.4s ease 0s,
      visibility 0s linear 0s;
  }

  /* Content container — same 1300px cap and 50px horizontal padding
     as .nmd-header__inner so the panel columns line up vertically with
     the logo and CTA button in the main row above. Centered with
     margin: 0 auto. The mega's white background still extends edge
     to edge across the viewport (since .nmd-mega is position: fixed
     full-width), but the content inside stays within the same bounds
     as the rest of the header. */
  .nmd-mega__inner {
    max-width: 1300px;
    margin: 0 auto;
    /* Inner content container — horizontal padding lives here (50px so
       columns align with the logo and CTA above). The 25px vertical
       breathing strip between the navy header and the first row is
       on the outer .nmd-mega panel, not here. */
    padding: 0 50px 16px;
    color: #1a1a1a;
    text-align: left;
    position: relative;
  }

  /* Grid variants — switch the inner to a grid with the matching
     column count. Gap mirrors the original Elementor markup
     (28px row, 36px column) for consistent vertical rhythm. */
  .nmd-mega__inner--three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 36px;
  }
  .nmd-mega__inner--two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 36px;
  }
  .nmd-mega__inner--wide {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 28px 36px;
  }
  /* 4-column variant: 3 list columns + 1 wider featured-story card
     on the right. Used by the Case Studies panel so the testimonial
     video card can sit alongside the link lists without squeezing
     them past the readable width. */
  .nmd-mega__inner--four {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.2fr;
    gap: 24px 28px;
    align-items: stretch;
  }

  /* Elementor-style panels (Who We Help, How We Help). The Elementor
     HTML widget ships its own inline styles — we keep the layout (flex,
     divider borders, column padding) and override the typography so
     links and headings read with proper Poppins hierarchy instead of
     defaulting to body copy. !important beats the inline style attrs. */
  .nmd-mega__inner--elementor > div[style*="display: flex"] {
    display: flex !important;
    flex-wrap: nowrap !important;   /* Belt-and-suspenders: keep all three
                                       columns on one row. Combined with
                                       `flex: 1 1 0` + `min-width: 0` on
                                       the columns, they share the panel
                                       width and never wrap. */
    gap: 20px !important;
    min-width: 0 !important;        /* Flex containers default to
                                       min-width: auto which would block
                                       shrinking past content size. */
  }
  .nmd-mega__inner--elementor > div[style*="display: flex"] > div {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* Elementor panel column heading — Poppins 600, slightly looser
     tracking than the default, 14px to feel intentional rather than
     inherited from body. */
  .nmd-mega__inner--elementor h5 {
    font-family: var(--nmd-font-body) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.005em !important;
    color: #1a1a1a !important;
    margin: 0 0 14px !important;
  }

  /* Elementor panel link list — slightly smaller than the heading,
     generous line-height so wrapping reads cleanly, brand-green
     hover with a small indent to telegraph interactivity. */
  .nmd-mega__inner--elementor ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
  }
  .nmd-mega__inner--elementor ul li {
    margin: 0 !important;
    padding: 0 !important;
  }
  .nmd-mega__inner--elementor ul li a {
    display: block;
    padding: 6px 0 !important;
    font-family: "Poppins", system-ui, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.003em !important;
    color: #4a4a4a !important;
    text-decoration: none !important;
    transition: color .15s ease, padding-left .15s ease;
  }
  .nmd-mega__inner--elementor ul li a:hover {
    color: inherit !important;
    padding-left: 4px !important;
  }

  /* Card-style hover for panels where the heading sits inside the link
     itself (Our Difference — the entire card is clickable). Only matches
     if the h5 is inside an <a>, so it doesn't affect panels where the
     h5 is a sibling of the link list.

     Hover behavior: the wording scales up 25% rather than going green.
     transform-origin anchored to the left edge so the icon stays put and
     only the heading row grows to the right. transition is set on the
     base h5 (first rule) so the scale eases on both enter and leave. */
  .nmd-mega__inner--elementor a h5 {
    transition: transform .15s ease;
    transform-origin: left center;
  }
  .nmd-mega__inner--elementor a:hover h5 {
    transform: scale(1.25);
  }

  /* Column wrapper for grid-based panels */
  .nmd-mega__col { min-width: 0; }

  /* Column heading — !important guards against theme h4 defaults overriding */
  .nmd-mega__heading {
    font-family: var(--nmd-font-body) !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #6b6b6b !important;
    margin: 0 0 12px !important;
    padding: 0 0 8px !important;
    border: 0 !important;
    border-bottom: 1px solid #eee !important;
    background: transparent !important;
    white-space: nowrap !important;
  }

  /* Icon variant — adds a Material icon inline with the heading */
  .nmd-mega__heading--icon {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .nmd-mega__heading--icon .material-icons {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  /* Accent variant — Featured Work uses brand-support green */
  .nmd-mega__heading--accent {
    color: inherit;
    border-bottom-color: rgba(21, 85, 193, 0.2);
  }

  /* Intro paragraph between heading and link list (Case Studies) */
  .nmd-mega__intro {
    font-family: var(--nmd-font-body) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #9a9a9a !important;
    margin: -4px 0 14px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }

  /* Link list — !important guards against theme default <ul> bullets / padding */
  .nmd-mega__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .nmd-mega__list li { margin: 0 !important; padding: 0 !important; list-style: none !important; }

  /* Defensive: kill any inherited bullets on every <ul> inside the mega menu */
  .nmd-mega ul,
  .nmd-mega__col ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .nmd-mega ul li,
  .nmd-mega__col ul li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nmd-mega__list a {
    display: flex;
    align-items: center;
    padding: 6px 0;
    color: #2a2a2a !important;
    font-family: "Poppins", system-ui, sans-serif !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.005em;
    position: relative;
    transition: color .15s ease, padding-left .15s ease;
  }

  /* Hover arrow slides in from the right edge */
  .nmd-mega__list a::after {
    content: '→';
    margin-left: auto;
    padding-left: 8px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s ease, transform .15s ease; color: inherit;
    font-weight: 500;
    font-size: 13px;
  }

  .nmd-mega__list a:hover {
    color: inherit;
    padding-left: 4px;
  }
  .nmd-mega__list a:hover::after {
    opacity: 1;
    transform: translateX(0);
  }

  /* ============================================================
     Featured Story card (Case Studies, 4th column)
     Card-style column holding a YouTube video preview, a play
     button overlay, and a customer testimonial quote. Visually
     distinct from the link-list columns so it reads as a featured
     callout rather than another list. */
  .nmd-mega__col--featured {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
  }
  /* Soft accent stripe at the top of the card */
  .nmd-mega__col--featured::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 3px;
    background: linear-gradient(90deg, #FF7800 0%, #61CE70 100%);
    border-radius: 0 0 3px 3px;
  }
  /* The video preview block — clickable, opens customer-reviews page */
  .nmd-mega__video {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
    background: #0a1f3a;
    box-shadow: 0 2px 6px rgba(10, 31, 58, 0.18);
  }
  .nmd-mega__video img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .2s ease, transform .35s ease;
  }
  .nmd-mega__video:hover img {
    opacity: 0.88;
    transform: scale(1.02);
  }
  /* Play-button overlay — a centered Material Icons play_arrow glyph
     sitting on top of a circular accent disc. Pointer-events: none so
     the parent <a> receives the click. The .nmd-mega__play span is
     a flex container; the glyph sits on top of the absolutely-positioned
     ::before disc so both scale together on hover. */
  .nmd-mega__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  .nmd-mega__play .material-icons {
    position: relative;
    z-index: 2;
    font-size: 38px;
    line-height: 1;
    color: #ffffff;
    margin-left: 4px;        /* optical center — Material glyphs sit slightly left */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform .2s ease;
  }
  .nmd-mega__play::before {
    content: "";
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 120, 0, 0.95);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4),
                0 0 0 6px rgba(255, 120, 0, 0.22);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .nmd-mega__video:hover .nmd-mega__play::before {
    transform: scale(1.08);
    background: #FF7800;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45),
                0 0 0 10px rgba(255, 120, 0, 0.25);
  }
  .nmd-mega__video:hover .nmd-mega__play .material-icons {
    transform: scale(1.05);
  }
  /* Customer testimonial block under the video */
  .nmd-mega__quote {
    margin: 0;
    padding: 0;
    font-family: var(--nmd-font-body);
    font-size: 12.5px;
    line-height: 1.5;
    color: #374151;
    font-weight: 400;
    font-style: italic;
    quotes: "\201C""\201D";
  }
  .nmd-mega__quote::before {
    content: none;
    color: #FF7800;
    font-weight: 600;
    font-size: 18px;
    line-height: 0;
    margin-right: 2px;
    vertical-align: -4px;
  }
  .nmd-mega__quote::after {
    content: close-quote;
    color: #FF7800;
    font-weight: 600;
    font-size: 18px;
    line-height: 0;
    margin-left: 2px;
    vertical-align: -4px;
  }
  .nmd-mega__quote cite {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 11.5px;
    font-weight: 600;
    font-style: normal;
    color: #475569;
    letter-spacing: 0.01em;
  }
  .nmd-mega__quote cite img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1);
  }

  /* ============================================================
     Client Stats card — 4th column on the Who We Help panel.
     Echoes the Featured Story card's structure (subtle navy
     gradient + accent stripe + content stack) but carries
     hard numbers instead of a video. Designed to earn trust
     by anchoring abstract "we serve all industries" claims
     in concrete proof.
     ============================================================ */
  .nmd-mega__col--stats {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 16px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
  }
  .nmd-mega__col--stats::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 3px;
    background: linear-gradient(90deg, #61CE70 0%, #1555C1 60%, #FF7800 100%);
    border-radius: 0 0 3px 3px;
  }
  .nmd-mega__col--stats .nmd-mega__heading {
    margin: 4px 0 0;
  }
  /* Bold, large title for the Client Stats card — distinct from the
     small uppercase headings in the rest of the panel. No icon, no
     border, just a heavy serif-less title in brand navy so it
     reads as the card's headline rather than a column label. */
  .nmd-mega__stats-title {
    font-family: var(--nmd-font-body);
    font-size: 17px;
    font-weight: 800;
    color: #0a1f3d;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: 0 0 14px;
  }
  .nmd-mega__stat {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  }
  .nmd-mega__stat:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .nmd-mega__stat-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #1555C1;
    background: rgba(21, 85, 193, 0.08);
  }
  .nmd-mega__stat-icon .material-icons { font-size: 18px; }
  .nmd-mega__stat-icon--green {
    color: #1F8A4F;
    background: rgba(97, 206, 112, 0.18);
  }
  .nmd-mega__stat-icon--orange {
    color: #C45A00;
    background: rgba(255, 120, 0, 0.14);
  }
  .nmd-mega__stat-body { min-width: 0; flex: 1; }
  .nmd-mega__stat-number {
    display: block;
    font-family: var(--nmd-font-body);
    font-size: 20px;
    font-weight: 700;
    color: #0a1f3d;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }
  .nmd-mega__stat-label {
    display: block;
    margin-top: 2px;
    font-family: var(--nmd-font-body);
    font-size: 11.5px;
    line-height: 1.35;
    color: #475569;
    font-weight: 400;
  }
  .nmd-mega__stats-cta {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    font-family: "Poppins", system-ui, sans-serif !important;
    font-size: 12px;
    font-weight: 600;
    color: #1555C1 !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .15s ease, gap .15s ease;
  }
  .nmd-mega__stats-cta:hover {
    color: #0a1f3d;
    gap: 8px;
  }

  /* ============================================================
     Service Spotlight card — 4th column on the How We Help panel.
     Two stacked spotlights: (1) AI-driven marketing (NMDFX) as
     the hero conversion, (2) a free audit / lead magnet for
     users who aren't ready to book. Both use a circular icon
     badge + tight description + arrow CTA.
     ============================================================ */
  .nmd-mega__col--spotlight {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 16px 14px 18px;
    display: flex;
    flex-direction: column;
    /* gap is small — the per-item padding handles the visual rhythm
       between stacked items, so doubling it here would over-space. */
    gap: 0;
    position: relative;
  }
  .nmd-mega__col--spotlight::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 3px;
    background: linear-gradient(90deg, #1555C1 0%, #61CE70 60%, #FF7800 100%);
    border-radius: 0 0 3px 3px;
  }
  .nmd-mega__col--spotlight .nmd-mega__heading {
    margin: 4px 0 0;
  }
  .nmd-mega__spotlight-item {
    /* Even spacing between items via equal padding top + bottom.
       Combined with the parent's gap this produces a uniform rhythm
       regardless of how many items are in the stack. */
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  }
  /* First item gets no top padding so the badge sits flush below
     the heading without a visual gap. */
  .nmd-mega__spotlight-item:first-of-type {
    padding-top: 4px;
  }
  .nmd-mega__spotlight-item:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
  }
  /* Header row — badge sits inline (left) of the title text. The badge
     used to be stacked above the title; this flex row puts them on the
     same line so the eye reads "icon → label" horizontally like the
     rest of the mega panel headings. The margin-bottom on the head
     replaces the badge's old margin-bottom so the desc still sits
     8px below the title. */
  .nmd-mega__spotlight-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }
  .nmd-mega__spotlight-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, #1555C1 0%, #2563eb 100%);
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(21, 85, 193, 0.25);
  }
  .nmd-mega__spotlight-badge--orange {
    background: linear-gradient(135deg, #FF7800 0%, #ff9a3d 100%);
    box-shadow: 0 4px 10px rgba(255, 120, 0, 0.25);
  }
  .nmd-mega__spotlight-badge--green {
    background: linear-gradient(135deg, #61CE70 0%, #1F8A4F 100%);
    box-shadow: 0 4px 10px rgba(97, 206, 112, 0.28);
  }
  .nmd-mega__spotlight-badge .material-icons { font-size: 20px; }
  .nmd-mega__spotlight-title {
    font-family: var(--nmd-font-body);
    font-size: 13.5px;
    font-weight: 700;
    color: #0a1f3d;
    margin: 0 0 4px;
    letter-spacing: -0.005em;
  }
  .nmd-mega__spotlight-desc {
    font-family: var(--nmd-font-body);
    font-size: 11.5px;
    line-height: 1.45;
    color: #475569;
    margin: 0 0 8px;
    font-weight: 400;
  }
  .nmd-mega__spotlight-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: "Poppins", system-ui, sans-serif !important;
    font-size: 12px;
    font-weight: 600;
    color: #1555C1 !important;
    text-decoration: none;
    transition: color .15s ease, gap .15s ease;
  }
  .nmd-mega__spotlight-link:hover {
    color: #0a1f3d;
    gap: 8px;
  }
  .nmd-mega__spotlight-link--orange {
    color: #C45A00;
  }
  .nmd-mega__spotlight-link--orange:hover {
    color: #0a1f3d;
  }
  .nmd-mega__spotlight-link--green {
    color: #1F8A4F;
  }
  .nmd-mega__spotlight-link--green:hover {
    color: #0a1f3d;
  }

  /* ============================================================
     Industry Win Spotlight card — Who We Help panel.
     Dark-themed featured case-study preview stacked ABOVE the
     existing light Client Stats card. Visually "inverse" of the
     stats card (dark navy bg vs. light slate bg) so the 4th
     column reads as two distinct features, not a doubled card.
     Holds a single hero metric + short client recap + CTA.
     ============================================================ */
  .nmd-mega__col--win {
    background: linear-gradient(135deg, #0a1f3d 0%, #1B3360 100%);
    border: 1px solid #1B3360;
    border-radius: 6px;
    padding: 14px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    color: #ffffff;
  }
  .nmd-mega__win-thumb {
    position: relative;
    height: 84px;
    border-radius: 4px;
    background:
      radial-gradient(circle at 18% 55%, rgba(255, 255, 255, 0.18) 0%, transparent 55%),
      radial-gradient(circle at 82% 30%, rgba(255, 255, 255, 0.10) 0%, transparent 50%),
      linear-gradient(135deg, #1555C1 0%, #2563eb 55%, #1F8A4F 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .nmd-mega__win-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 31, 61, 0) 40%, rgba(10, 31, 61, 0.45) 100%);
  }
  .nmd-mega__win-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #0a1f3d;
    font-family: var(--nmd-font-body);
    font-size: 9.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    z-index: 2;
  }
  .nmd-mega__win-metric {
    position: relative;
    z-index: 2;
    font-family: var(--nmd-font-body);
    font-size: 30px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  }
  /* Scoped under .nmd-mega__col--win + !important to beat the
     panel-level `.nmd-mega__inner--elementor h5 { color: #1a1a1a !important }`
     rule. Without the bump in specificity, the panel rule would win and
     the title would render dark gray on the dark card. */
  .nmd-mega__col--win .nmd-mega__win-title {
    font-family: var(--nmd-font-body) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.005em !important;
  }
  .nmd-mega__win-desc {
    font-family: var(--nmd-font-body);
    font-size: 11.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    font-weight: 400;
  }
  .nmd-mega__win-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-family: "Poppins", system-ui, sans-serif !important;
    font-size: 12px;
    font-weight: 600;
    color: #FF7800 !important;
    text-decoration: none;
    transition: color .15s ease, gap .15s ease;
  }
  .nmd-mega__win-cta:hover {
    color: #ff9a3d;
    gap: 8px;
  }

  /* ============================================================
     Downloadable CTA card — How We Help panel.
     Lead-magnet pattern (free downloadable booklet/scorecard)
     stacked ABOVE the existing Service Spotlight card. Dark
     themed with a booklet/PDF icon and bright orange CTA pill
     so the eye lands on the free download first, then flows
     down into the 3 paid services.
     ============================================================ */
  .nmd-mega__col--download {
    background: linear-gradient(135deg, #0a1f3d 0%, #1B3360 100%);
    border: 1px solid #1B3360;
    border-radius: 6px;
    padding: 14px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    color: #ffffff;
  }
  .nmd-mega__download-head {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .nmd-mega__download-icon {
    width: 44px;
    height: 56px;
    background: linear-gradient(135deg, #FF7800 0%, #ff9a3d 100%);
    border-radius: 4px;
    display: grid;
    place-items: center;
    color: #ffffff;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 4px 12px rgba(255, 120, 0, 0.32);
  }
  /* The dark "spine" stripe at the top of the booklet cover —
     pure CSS mockup of a glossy PDF/booklet icon. */
  .nmd-mega__download-icon::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 4px 4px 0 0;
  }
  .nmd-mega__download-icon .material-icons {
    font-size: 24px;
    position: relative;
    z-index: 2;
  }
  .nmd-mega__download-head-text { flex: 1; min-width: 0; }
  .nmd-mega__download-eyebrow {
    font-family: var(--nmd-font-body);
    font-size: 9.5px;
    font-weight: 700;
    color: #FF7800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 2px;
    line-height: 1;
  }
  /* Scoped under .nmd-mega__col--download + !important to beat the
     panel-level `.nmd-mega__inner--elementor h5 { color: #1a1a1a !important }`
     rule. Without the bump in specificity, the panel rule would win and
     the title would render dark gray on the dark card. */
  .nmd-mega__col--download .nmd-mega__download-title {
    font-family: var(--nmd-font-body) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.005em !important;
  }
  .nmd-mega__download-desc {
    font-family: var(--nmd-font-body);
    font-size: 11.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    font-weight: 400;
  }
  .nmd-mega__download-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    background: #FF7800 !important;
    color: #ffffff !important;
    border-radius: 999px;
    font-family: "Poppins", system-ui, sans-serif !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    align-self: flex-start;
    transition: background .15s ease, gap .15s ease;
  }
  .nmd-mega__download-cta:hover {
    background: #ff9a3d;
    gap: 10px;
  }
  .nmd-mega__download-cta .material-icons { font-size: 16px; }

  /* ============================================================
     Column stack wrapper — used by the Who We Help and How We
     Help 4th columns to stack two cards (Win + Stats for WWH,
     Download + Spotlight for HWH). Stays a single flex item
     inside the mega panel's flex-wrap row.
     ============================================================ */
  .nmd-mega__col-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }

  /* ============================================================
     CTA — top-right
     ============================================================ */
  .nmd-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 41px;
    padding: 0 24px;
    border-radius: var(--nmd-radius-cta);
    border: 1px solid var(--nmd-ink);
    background: transparent;
    color: var(--nmd-cta-text) !important;
    font-family: "Montserrat", "Poppins", system-ui, sans-serif !important;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1.1px !important;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, transform .2s ease;
    transform-origin: center;
  }

  /* `.nmd-header a` sets its own transition list and out-ranks `.nmd-cta`,
     so re-declare it here with transform included. */
  .nmd-header .nmd-cta {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease,
                transform .5s cubic-bezier(.22, 1, .36, 1), padding .5s cubic-bezier(.22, 1, .36, 1);
  }

  /* Hover: grow 25% slowly, no background fill (2026-09-28 rule). */
  .nmd-cta:hover {
    background: transparent !important;
    color: var(--nmd-cta-text) !important;
    transform: scale(1.25);
  }

  /* Hover icon (desktop only): text slides left while a phone-call icon
     rises in on the right and rings once. Padding total stays 48px
     (24+24 -> 10+38) so the button width never changes. */
  @media (min-width: 1281px) {
    .nmd-header .nmd-cta::after {
      content: "";
      position: absolute;
      right: 14px;
      top: 50%;
      width: 16px;
      height: 16px;
      margin-top: -8px;
      background-color: currentColor;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3Cpath d='M14.05 2a9 9 0 0 1 8 7.94'/%3E%3Cpath d='M14.05 6A5 5 0 0 1 18 10'/%3E%3C/svg%3E") center / contain no-repeat;
              mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3Cpath d='M14.05 2a9 9 0 0 1 8 7.94'/%3E%3Cpath d='M14.05 6A5 5 0 0 1 18 10'/%3E%3C/svg%3E") center / contain no-repeat;
      opacity: 0;
      /* Exit: fade out in place, fast, with no downward drop. */
      transition: opacity .12s ease;
      pointer-events: none;
    }
    .nmd-header .nmd-cta {
      /* Exit: text slides back only after the icon has faded. */
      transition: background-color .15s ease, color .15s ease, border-color .15s ease,
                  transform .5s cubic-bezier(.22, 1, .36, 1), padding .4s cubic-bezier(.22, 1, .36, 1) .12s;
    }
    .nmd-header .nmd-cta:hover {
      padding: 0 38px 0 10px;
      transition: background-color .15s ease, color .15s ease, border-color .15s ease,
                  transform .5s cubic-bezier(.22, 1, .36, 1), padding .5s cubic-bezier(.22, 1, .36, 1);
    }
    .nmd-header .nmd-cta:hover::after {
      opacity: 1;
      /* Enter: rise into place, then ring once. */
      transition: opacity .35s ease .12s;
      animation: nmd-cta-rise .5s cubic-bezier(.22, 1, .36, 1) .12s both, nmd-cta-ring .6s ease-in-out .65s 1;
    }
  }
  @keyframes nmd-cta-rise {
    from { transform: translateY(10px); }
    to   { transform: translateY(0); }
  }
  @keyframes nmd-cta-ring {
    0%, 100% { transform: translateY(0) rotate(0); }
    20%      { transform: translateY(0) rotate(-14deg); }
    40%      { transform: translateY(0) rotate(12deg); }
    60%      { transform: translateY(0) rotate(-8deg); }
    80%      { transform: translateY(0) rotate(5deg); }
  }

  /* ============================================================
     Responsive — collapse nav to hamburger drawer
     ============================================================ */
  .nmd-header__menu-toggle { display: none; }
  /* The hamburger checkbox is visually hidden but kept in the
     accessibility tree + clickable via its <label>. Using
     position:absolute + clip-path (not display:none) keeps the
     label-click → checkbox-toggle flow reliable across browsers;
     display:none on form inputs has historically caused some
     browsers to silently drop the native toggle. */
  .nmd-header__menu-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @media (max-width: 1280px) {
    /* ============================================================
       MOBILE OVERRIDES (≤1280px)
       Goal: keep the desktop navy gradient flowing across the
       entire header, drop the topbar (revenue stat / phone /
       product support) so the logo and hamburger sit alone on
       that blue gradient, and replace the desktop nav with a
       white drawer panel that drops out from the header bottom
       on tap. Mega menu cards (spotlight, featured, stats, win,
       download) are hidden entirely on mobile — each top-level
       nav item collapses into a direct page link so touch users
       navigate straight to Who We Help, How We Help,
       Case Studies, Our Difference, and Blog.
       ============================================================ */

    /* 1. Hide the topbar entirely. Revenue stat, phone, and
       Product Support button are desktop-only chrome — on mobile
       the drawer exposes contact info via the bottom CTA, so
       none of the topbar is needed. The elements stay in the DOM
       for crawlers and JS hooks but take no visual space. */
    .nmd-topbar { display: none !important; }

    /* 2. Hide desktop nav + CTA outside the drawer — replaced by
       drawer on tap. */
    .nmd-nav,
    .nmd-cta { display: none; }

    /* 3. `.nmd-main` defaults to `position: relative` (its bg
       pseudo-elements extend full-viewport using that as a
       containing block). On mobile we drop that positioning so
       the drawer (an absolute child of `.nmd-main`) anchors to
       `.nmd-header__inner` instead — keeping the drawer flush
       against the header bottom with no gap. The bg pseudos
       walk up to `.nmd-header__inner` (which is `position:
       relative`) and paint the desktop navy gradient edge-to-
       edge across the entire header, since the topbar is gone. */
    .nmd-main { position: static; }

    /* 4. Two-column main row: logo on the left (1fr so it can
       grow on landscape phones / small tablets), hamburger on
       the right (auto, hugging its 48px button). The grid's
       second column naturally lands at the right edge — no
       `margin-left: auto` hackery needed. */
    .nmd-main {
      grid-template-columns: 1fr auto;
      gap: 16px;
    }

    /* 5. Hamburger button — white-on-glass so it reads on the
       navy gradient (the desktop rule was white-on-glass; the
       earlier mobile override flipped it to dark-on-white when
       the header was painted white, which no longer applies).
       Stroke color matches `--nmd-border` so the button visually
       pairs with the desktop CTA's glass ring. */
    .nmd-header__menu-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      background: rgba(255, 255, 255, 0.10) !important;
      border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
      border-radius: 8px;
      color: #ffffff !important;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease, transform .15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .nmd-header__menu-toggle:hover {
      background: rgba(255, 255, 255, 0.16) !important;
      border-color: rgba(255, 255, 255, 0.36) !important;
    }
    .nmd-header__menu-toggle:active {
      transform: scale(0.96);
      background: rgba(255, 120, 0, 0.28) !important;
      border-color: rgba(255, 120, 0, 0.85) !important;
    }
    .nmd-header__menu-toggle:focus-visible {
      outline: 0 0 0 2px var(--nmd-support);
      outline-offset: 3px;
    }
    .nmd-header__menu-toggle svg {
      width: 24px;
      height: 24px;
      stroke-width: 2.25;
    }

    /* 6. Force `.nmd-header` as a positioned context — defensive,
       since `.nmd-header__inner` is already the drawer anchor
       (its `position: relative` covers absolute children). */
    .nmd-header { position: relative; }

    /* 7. Drawer — white panel sliding out from the header bottom.
       White-on-blue pattern: header stays navy, drawer opens as
       a clean white panel with dark text for max contrast and
       scannability. Driven by `html.nmd-drawer-open`
       (JS-toggled) for reliable touch behavior across embedded
       browser configs. */
    html.nmd-drawer-open .nmd-header__inner .nmd-nav,
    html.nmd-drawer-open .nmd-header__inner .nmd-cta {
      display: block;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      padding: 16px 24px 24px;
      background: #ffffff !important;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      max-height: calc(100vh - 100%);
      overflow-y: auto;
      color: #1a1a1a !important;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    }

    /* Stack the nav items vertically */
    html.nmd-drawer-open .nmd-header__inner .nmd-nav__list {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }

    /* Hairline between items */
    html.nmd-drawer-open .nmd-header__inner .nmd-nav__item {
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      color: #1a1a1a !important;
    }

    /* Top-level page links: dark, full-width */
    html.nmd-drawer-open .nmd-header__inner .nmd-nav__link {
      padding: 14px 0;
      width: 100%;
      justify-content: space-between;
      color: #1a1a1a !important;
    }

    /* Caret visibility — only items with a mega child get the
       chevron (the affordance for "this expands"). Plain page
       links like Blog stay chevronless. The chevron rotates 180°
       when its parent has `.nmd-mobile-expanded` so the user
       can see the current state at a glance. */
    html.nmd-drawer-open .nmd-header__inner .nmd-nav__caret {
      display: none;
    }
    html.nmd-drawer-open .nmd-header__inner .nmd-nav__item--has-mega > .nmd-nav__link .nmd-nav__caret {
      display: inline-block;
      color: rgba(0, 0, 0, 0.4);
      transition: transform .25s ease;
      margin-left: 8px;
      flex-shrink: 0;
    }
    html.nmd-drawer-open .nmd-header__inner .nmd-nav__item--has-mega.nmd-mobile-expanded > .nmd-nav__link .nmd-nav__caret {
      transform: rotate(180deg);
    }

    /* Mega panels are hidden in the drawer by default — they only
       render inline below their parent label once that label
       has been tapped (`.nmd-mobile-expanded`). When shown, we
       fully reset the desktop positioning (no fixed, no fade,
       no transform) so the panel flows naturally inside the
       nav item. Featured/sponsored cards (Featured Story video,
       Client Stats, Service Spotlight, Industry Win, Downloadable
       CTA) stay hidden on mobile because they don't fit touch UX. */
    html.nmd-drawer-open .nmd-header__inner .nmd-mega {
      display: none !important;
      position: static !important;
      background: transparent !important;
      box-shadow: none !important;
      padding: 0 !important;
      margin: 0 !important;
      transform: none !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      transition: none !important;
    }
    html.nmd-drawer-open .nmd-header__inner .nmd-nav__item--has-mega.nmd-mobile-expanded > .nmd-mega {
      display: block !important;
      padding: 4px 0 12px 16px !important;
      margin: 0 0 12px 0 !important;
      border-left: 2px solid rgba(15, 23, 42, 0.08) !important;
    }
    /* Drop the hover bridge — it would extend above the panel on
       mobile and steal touch events from the label above. */
    html.nmd-drawer-open .nmd-header__inner .nmd-mega::after {
      display: none !important;
    }

    /* Inner: drop the desktop max-width / horizontal padding so
       the panel content stretches full width of the drawer. */
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner {
      max-width: none !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* Stack the Elementor-style 3-column panels (Who We Help,
       How We Help, Our Difference) to a single column. The
       Elementor HTML widget ships its own inline `display: flex`,
       so we override with `!important`. The direct child rule
       covers both the column divs (Column 1–3) and the anchor
       cards (Our Difference), giving each a tap-friendly row
       with a hairline divider. */
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor > div[style*="display: flex"] {
      display: flex !important;
      flex-direction: column !important;
      flex-wrap: nowrap !important;
      gap: 0 !important;
      min-width: 0 !important;
    }
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor > div[style*="display: flex"] > div,
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor > div[style*="display: flex"] > a {
      flex: 0 0 auto !important;
      width: 100% !important;
      min-width: 0 !important;
      padding: 12px 0 !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
      /* Wipe the Elementor inline flex sizing and column borders
         — they were meant for horizontal columns. */
      border-right: 0 !important;
      border-left: 0 !important;
      background: transparent !important;
    }
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor > div[style*="display: flex"] > div:last-child,
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor > div[style*="display: flex"] > a:last-child {
      border-bottom: 0 !important;
      padding-bottom: 4px !important;
    }

    /* Elementor column heading — same Poppins 600 weight as
       desktop but slightly bigger tap-friendly margin. The h5
       reads as a section label inside the stacked column. */
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor h5 {
      font-family: var(--nmd-font-body) !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      line-height: 1.3 !important;
      letter-spacing: 0.005em !important;
      color: #1a1a1a !important;
      margin: 0 0 8px !important;
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
    }
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor h5 .material-icons {
      font-size: 16px !important;
      line-height: 1 !important;
    }

    /* Link list inside Elementor panels — slightly larger than
       desktop for thumb-friendly tap targets. */
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor ul {
      margin: 0 !important;
      padding: 0 !important;
    }
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor ul li {
      margin: 0 !important;
      padding: 0 !important;
    }
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor ul li a {
      display: block !important;
      padding: 10px 0 !important;
      font-family: var(--nmd-font-body) !important;
      font-size: 15px !important;
      font-weight: 400 !important;
      line-height: 1.45 !important;
      color: #1a1a1a !important;
      text-decoration: none !important;
    }
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor ul li a:hover {
      color: inherit !important;
      padding-left: 0 !important;
    }
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor .nmd-mega__intro {
      display: none !important;
    }

    /* Stack the Case Studies 4-column grid (.nmd-mega__inner--four)
       to a single column. The 4th column (`.nmd-mega__col--featured`
       with the video + quote) is hidden entirely — see the
       universal featured-card hide below. */
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--four {
      display: flex !important;
      flex-direction: column !important;
      gap: 0 !important;
    }
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--four > .nmd-mega__col {
      display: block !important;
      width: 100% !important;
      padding: 12px 0 !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
      background: transparent !important;
      border-radius: 0 !important;
      border-top: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--four > .nmd-mega__col:last-of-type:not(.nmd-mega__col--featured) {
      border-bottom: 0 !important;
    }
    /* Heading + intro on Case Studies panels — strip the desktop
       eyebrow styling on mobile so each column reads as a labeled
       section, not a boxed tile. */
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--four .nmd-mega__heading {
      font-family: var(--nmd-font-body) !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      line-height: 1.3 !important;
      letter-spacing: 0.005em !important;
      text-transform: none !important;
      color: #1a1a1a !important;
      margin: 0 0 8px !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      white-space: normal !important;
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
    }
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--four .nmd-mega__heading .material-icons {
      font-size: 16px !important;
      line-height: 1 !important;
    }
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--four .nmd-mega__intro {
      display: none !important;
    }
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--four .nmd-mega__list a {
      padding: 10px 0 !important;
      font-size: 15px !important;
      font-weight: 400 !important;
      line-height: 1.45 !important;
    }

    /* Hide every featured / sponsored card on mobile — they
       don't fit the touch UX intent. The 4th column with the
       video + quote (Case Studies), the Industry Win Spotlight
       (Who We Help), the AI-SEO Scorecard download card (How
       We Help), and the Client Stats / Service Spotlight
       stack are all hidden here. */
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__col-stack,
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__col--featured,
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__col--stats,
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__col--spotlight,
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__col--win,
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__col--download {
      display: none !important;
    }

    /* Our Difference's 4 anchor cards (Technology, Methodology,
       Who We Are, Customer Reviews) stack vertically with the
       supporting text visible below each heading. */
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor > div[style*="display: flex"] > a {
      display: block !important;
      text-decoration: none !important;
      color: inherit !important;
    }
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor > div[style*="display: flex"] > a h5 {
      margin: 0 0 4px !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      line-height: 1.3 !important;
      color: #1a1a1a !important;
      letter-spacing: 0.005em !important;
    }
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor > div[style*="display: flex"] > a p {
      font-family: var(--nmd-font-body) !important;
      font-size: 13px !important;
      font-weight: 400 !important;
      line-height: 1.45 !important;
      color: #6b6b6b !important;
      margin: 0 !important;
    }
    /* Drop the inline hover-scale on the anchor cards — it was a
       desktop affordance and feels out of place on mobile. */
    html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor a h5 {
      transform: none !important;
    }

    /* CTA at the bottom of the drawer — dark outline on white,
       flips on hover to filled dark with white text. */
    html.nmd-drawer-open .nmd-header__inner .nmd-cta {
      position: static;
      margin-top: 16px;
      align-self: flex-start;
      padding: 12px 20px;
      color: #1a1a1a !important;
      border-color: #1a1a1a !important;
      background: transparent;
    }
    html.nmd-drawer-open .nmd-header__inner .nmd-cta:hover {
      background: #1a1a1a !important;
      color: #ffffff !important;
    }
  }

  /* ============================================================
     Mobile drawer variants — phones (viewport ≤768) stack the
     CTA under the logo+burger row; tablets (768–1280) keep
     everything on a single row with the CTA between logo and
     hamburger. Both pin the CTA in the bar so it does NOT also
     appear inside the open drawer (where it previously
     overlapped the toggle or pushed the bar down). The 768 px
     boundary is shared between the two rules so every viewport
     ≥ 0 matches exactly one — no fractional-pixel fallthrough.
     ============================================================ */

  /* Phone breakpoint uses max-width:768 (overlapping with the
     tablet rule's min-width:768) so non-integer viewport widths
     like 767.5 px always match exactly one rule — no fallthrough
     to the base mobile block. Tablet rule is later in source
     order so it wins the cascade at the shared 768 px value. */
  @media (max-width: 768px) {
    /* Restore the topbar at phone/tablet widths so callers see the
       revenue stat + Product Support button even on mobile. The
       existing topbar min-height 48px gets compressed to fit narrow
       phones. The phone number is explicitly hidden at this
       breakpoint — earlier progressive-hide rules at <=720 should
       cover it but we restate it here to guarantee a clean phone
       header (no phone number crowding the logo row). */
    .nmd-topbar {
      display: flex !important;
      padding: 4px 0 !important;
      min-height: 0 !important;
    }
    .nmd-topbar__inner,
    .nmd-topbar__right { gap: 8px !important; }
    .nmd-topbar__stat-icon { width: 16px !important; height: 16px !important; }
    .nmd-topbar__stat-amount { font-size: 11px !important; }
    .nmd-topbar__eyebrow { font-size: 7px !important; letter-spacing: 0.06em !important; }
    /* Belt-and-suspenders: ensure the phone number never appears at
       the phone/tablet breakpoint. The 720 px legacy rule already
       hides it; this !important overrides any future cascade. */
    .nmd-topbar__phone,
    .nmd-topbar__right { display: none !important; }
    .nmd-topbar__btn { padding: 4px 10px !important; font-size: 10px !important; letter-spacing: 0.04em !important; }

    /* Two-row grid: logo + hamburger share row 1; the CTA spans
       both columns of row 2 as a transparent outlined pill.
       Using grid (not flex-wrap) keeps logo and hamburger on
       row 1 regardless of source order. The logo is rendered at
       40 px tall (≈5% larger than the previous 38 px) so it sits
       naturally at its aspect ratio without being compressed into
       a 1fr cell that fights its own width. */
    .nmd-main {
      display: grid !important;
      grid-template-columns: 1fr auto !important;
      grid-template-rows: auto auto !important;
      column-gap: 6px;
      row-gap: 10px;
      align-items: center;
      padding: 12px 12px !important;
      min-height: 0 !important;
    }
    
    .nmd-header__menu-toggle { grid-column: 2; grid-row: 1; }

    /* CTA pinned in the bar as a small, transparent, outlined
       pill — white border + white text on the navy gradient. */
    .nmd-cta {
      display: inline-flex !important;
      grid-column: 1 / -1;
      grid-row: 2;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      margin: 0 !important;
      padding: 8px 16px !important;
      font-size: 11px !important;
      line-height: 1 !important;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border-radius: 999px !important;
      border: 1px solid rgba(255, 255, 255, 0.55) !important;
      background: transparent !important;
      color: #ffffff !important;
      text-decoration: none !important;
      white-space: nowrap;
      position: static !important;
      align-self: stretch !important;
    }

    /* Do NOT also render the CTA inside the open drawer — it
       lives in the bar instead. */
    html.nmd-drawer-open .nmd-header__inner .nmd-cta {
      display: none !important;
    }
  }

  /* ============================================================
     Tiny-phone carve-out (≤374 px) — older / smaller devices like
     the original iPhone SE (320 logical px). The 40 px logo + 12 px
     padding + 48 px burger left the image squeezed into a 242 px
     cell on a 320 px viewport (max-width: 100% on the <img>
     clamped the natural width). This rule:

       - bumps logo height 40 → 44 px (~10% bigger than the 375 px
         baseline, as requested),
       - tightens outer bar padding 12 → 8 and column-gap 6 → 4
         to recover ~16 px of horizontal real estate for the cell,
       - keeps max-width: 100% on the image so the logo never
         collides with the burger.

     Threshold is 374 px (one below iPhone SE) so the 375 px
     iPhone SE keeps the 40 px treatment and renders identically
     to before.
     ============================================================ */
  @media (max-width: 374px) {
    .nmd-main {
      padding: 10px 8px !important;
      column-gap: 4px;
    }
    
    .nmd-header__menu-toggle {
      width: 44px;
      height: 44px;
    }
  }

  @media (min-width: 768px) and (max-width: 1280px) {
    /* Restore the topbar at tablet widths so the revenue stat and
       Product Support button stay visible alongside the new
       logo + CTA + hamburger bar. Slight scale-down for tablet
       only — desktop (1281+) keeps its own rules. */
    .nmd-topbar {
      display: flex !important;
      padding: 6px 0 !important;
      min-height: 0 !important;
    }
    .nmd-topbar__stat-amount { font-size: 12px !important; }

    /* Tablet: single-row grid — logo | CTA | hamburger. CTA sits
       between the logo and the toggle (justified center) so the
       toggle never gets pushed off the right edge.

       IMPORTANT: at exactly 768 px this rule fires alongside the
       phone rule (max-width:768 overlaps min-width:768 by one
       pixel). The phone rule sets `grid-template-rows: auto auto`
       and pins the CTA to `grid-row: 2`; both use !important so
       they win the cascade unless we explicitly reset them here.
       That's what grid-template-rows: auto + the per-cell
       grid-row:1 declarations below do. Without them, the 768 px
       iPad portrait kept the two-row stacked layout. */
    .nmd-main {
      display: grid !important;
      grid-template-columns: auto 1fr auto !important;
      grid-template-rows: auto !important;
      align-items: center;
      column-gap: 18px;
      padding: 14px 24px !important;
      min-height: 0 !important;
    }
    .nmd-cta {
      display: inline-flex !important;
      grid-column: 2;
      grid-row: 1;
      justify-self: center;
      align-items: center;
      max-width: 320px;
      min-height: 40px;
      margin: 0 !important;
      padding: 9px 20px !important;
      font-size: 13px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(255, 255, 255, 0.6) !important;
      background: rgba(255, 255, 255, 0.05) !important;
      color: #ffffff !important;
      text-decoration: none !important;
      white-space: nowrap;
      position: static !important;
    }
    .nmd-header__menu-toggle { grid-column: 3; grid-row: 1; }

    /* Do NOT also render the CTA inside the open drawer. */
    html.nmd-drawer-open .nmd-header__inner .nmd-cta {
      display: none !important;
    }
  }

  /* Tighten the inner padding at ≤1280 px so the hamburger has
     guaranteed breathing room against the right edge and never
     gets clipped (e.g. at the 1280 px desktop/mobile boundary). */
  @media (max-width: 1280px) {
    .nmd-header__inner {
      max-width: none !important;
      padding: 0 16px !important;
    }
  }

  /* ============================================================
     Topbar responsive — drop right-side chrome as the viewport
     shrinks so the revenue stat and the main row never have to
     compete for horizontal space. */
  @media (max-width: 900px) {
    /* Product Support button takes ~150px — drop it on tablets so
       the phone + stat have room. */
    .nmd-topbar__btn { display: none; }
  }
  @media (max-width: 720px) {
    /* Drop the phone too on small tablets / large phones. The
       drawer already exposes contact info via the CTA. */
    .nmd-topbar__phone { display: none; }
    .nmd-topbar__right { display: none; }
  }
  @media (max-width: 600px) {
    /* Tighten the remaining stat so it doesn't dominate. */
    .nmd-topbar__stat-amount { font-size: 12px; }
    .nmd-topbar__eyebrow { font-size: 8px; }
  }
  @media (max-width: 480px) {
    /* Below 480px the stat itself can crowd the row — collapse it
       to just the amount so the logo + hamburger have the focus. */
    .nmd-topbar__eyebrow { display: none; }
    .nmd-topbar__stat-icon { width: 22px; height: 22px; }
  }

  /* ============================================================
     Accessibility — respect user motion preferences
     ============================================================ */
  @media (prefers-reduced-motion: reduce) {
    .nmd-header *,
    .nmd-header *::before,
    .nmd-header *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .nmd-mega { transform: none !important; }
    .nmd-nav__caret { transition: none !important; }
  }

  /* ============================================================
     Featured Story video modal
     Fullscreen overlay that opens when the play button in the
     Case Studies Featured Story column is clicked. Plays a YouTube
     embed in the center, dimmed background, X button to close, and
     click-outside / Escape to dismiss. The iframe src is swapped by
     JS so autoplay only fires on open and audio is fully torn down
     on close (no bleed through to the underlying page).
     ============================================================ */
  .nmd-video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 5vmin;
    /* Light black transparent background. rgba(8, 20, 45, 0.78)
       matches the navy shadow color used elsewhere for a coherent
       dark-glass feel. */
    background: rgba(8, 20, 45, 0.78);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .nmd-video-modal.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease, visibility 0s linear 0s;
  }
  /* No-JS fallback: when JS is disabled the [hidden] attribute hides
     the modal entirely, and clicking the play button still falls back
     to navigating the customer-reviews page. */
  .nmd-video-modal[hidden] { display: none; }

  /* Backdrop click target — sits behind the video but above the
     outer transparent overlay, so clicks anywhere outside the video
     close the modal. */
  .nmd-video-modal__overlay {
    position: absolute;
    inset: 0;
    cursor: pointer;
  }

  .nmd-video-modal__content {
    position: relative;
    width: 100%;
    max-width: 1100px;
    z-index: 2;
  }

  /* 16:9 responsive video frame. The aspect-ratio property keeps the
     height in proportion to the width on resize. */
  .nmd-video-modal__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(255, 255, 255, 0.08);
  }
  .nmd-video-modal__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  /* Close X — sits above the video frame, top-right corner. */
  .nmd-video-modal__close {
    position: absolute;
    top: -56px;
    right: -8px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    cursor: pointer;
    display: grid;
    place-items: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
  }
  .nmd-video-modal__close:hover,
  .nmd-video-modal__close:focus-visible {
    background: rgba(255, 120, 0, 0.92);
    border-color: rgba(255, 120, 0, 1);
    transform: scale(1.08);
    outline: none;
  }
  .nmd-video-modal__close .material-icons {
    font-size: 24px;
    line-height: 1;
  }

  /* Visually-hidden title for screen readers. */
  .nmd-video-modal__title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Lock body scroll while the modal is open (also covered by the
     existing nmd-drawer-open class for the mobile drawer). */
  html.nmd-modal-open,
  html.nmd-modal-open body {
    overflow: hidden;
  }
  /* When the modal is open, the page underneath shouldn't show a
     focus ring on the play button that opened it. */
  html.nmd-modal-open .nmd-mega__video:focus { outline: none; }

  /* Respect reduced-motion: snap open/close instead of fading. */
  @media (prefers-reduced-motion: reduce) {
    .nmd-video-modal { transition: none; }
    .nmd-video-modal.is-open { transition: none; }
  }

  /* On narrow viewports shrink the close button and tuck it inside
     the frame's top-right corner. */
  @media (max-width: 640px) {
    .nmd-video-modal__close {
      top: 8px;
      right: 8px;
      width: 36px;
      height: 36px;
    }
    .nmd-video-modal__close .material-icons { font-size: 20px; }
  }

  /* === 2026-09-21 patch ===
     (a) Force the badge + title row to render inline even if a parent panel
         rule is trying to stack them. The original `.nmd-mega__spotlight-head`
         rule was correct but clearly not winning in practice.
     (b) Make the whole card clickable — the existing CTA link's hit area is
         stretched to cover the entire `.nmd-mega__spotlight-item` so clicking
         the icon, title, description, or padding anywhere navigates.
  */
  .nmd-mega__spotlight-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px;
  }
  .nmd-mega__spotlight-item { position: relative; }
  .nmd-mega__spotlight-item > .nmd-mega__spotlight-link { position: relative; z-index: 1; }
  .nmd-mega__spotlight-item > .nmd-mega__spotlight-link::after {
    content: '';
    position: absolute;
    top: -14px;
    left: -14px;
    right: -14px;
    bottom: -14px;
    z-index: 0;
  }
  /* === 2026-09-21 live overrides ===
     (a) Force the spotlight card titles to dark navy + 12px — the Elementor
         kit has `.elementor-kit-4112 h6 { font-size: 17px; font-weight: 400 }`
         and the theme has `h6 { color: #ffffff !important }`. Both beat the
         widget's `.nmd-mega__spotlight-title` rule. With specificity 0,1,0
         vs 0,1,1 and 0,0,1, our class + !important wins.
     (b) Force the logo to 60px tall, !important, to win against any older
         40px/44px patches and the Elementor kit defaults.
     (c) Keep the badge+title row forced flex (already applied earlier).
  */
  .nmd-mega__col--spotlight .nmd-mega__spotlight-title,
  .nmd-mega__spotlight-title,
  .nmd-mega__col--spotlight h6 {
    color: #0a1f3d !important;
    background: transparent !important;
    -webkit-text-fill-color: #0a1f3d !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    letter-spacing: -0.005em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .nmd-logo img {
    height: 60px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
  }
  .nmd-logo {
    flex-shrink: 0 !important;
    max-width: none !important;
  }

  .nmd-mega__spotlight-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 6px !important;
  }

/* ============================================================
   BULLETPROOF OVERRIDE: kit 4112 anchor color in chrome containers
   ============================================================ */
body .nmd-header a,
body .nmd-header a *,
body .nmd-footer a,
body .nmd-footer a * {
    color: inherit !important;
    font-family: "Poppins", system-ui, sans-serif !important;
    letter-spacing: normal !important;
    word-spacing: 0 !important;
}


/* ============================================================
   INTENTIONALLY NON-WHITE COLORS (override the blanket above)
   ============================================================ */
.nmd-topbar__phone.nmd-topbar__phone--primary {
    color: #FF7800 !important;
}
.nmd-mega__spotlight-link.nmd-mega__spotlight-link--orange {
    color: #C45A00 !important;
}
.nmd-mega__spotlight-link.nmd-mega__spotlight-link--green {
    color: #1F8A4F !important;
}


/* ============================================================
   GLOBAL KIT 4112 OVERRIDE: remove the site-wide green anchor color
   The kit ships .elementor-kit-4112 a { color: #008C3B; } which turns
   every Elementor widget anchor green site-wide. We override with a
   higher-specificity + !important rule that falls back to the parent's
   color for any anchor that doesn't set its own. Specific intentional
   colors (set explicitly by chrome rules or widget styles) still win.
   ============================================================ */
body .elementor-kit-4112 a {
    color: inherit !important;
    letter-spacing: normal !important;
    word-spacing: 0 !important;
}


/* ============================================================
   2026-09-23 PAGE-CONTENT GREEN NEUTRALIZATION
   The Elementor kit ships `.elementor-kit-4112 a { color:#008C3B }`
   and the page's inline <style> for `.nmd-lakeland-plan` contains
   intentional green accents (chip text, lime helper, green card
   border). Per user directive 'remove it, whatever it is', we force
   every green-bearing selector on the page content to neutral or
   brand-blue. Body-class scoping beats Elementor v3 cached kit
   selectors; !important beats any inline widget attribute.
   ============================================================ */

/* 1. Lakeland plan chip text — kit rule (0,1,1) was beating
   `.nmd-lakeland-plan__chip` (0,1,0). Force dark navy. */
body .nmd-lakeland-plan__chip,
body a.nmd-lakeland-plan__chip {
  color: #1b3360 !important;
  -webkit-text-fill-color: #1b3360 !important;
}

/* 2. Chip on `<details>` (the closed-state darker chip). */
body .nmd-lakeland-plan__details .nmd-lakeland-plan__chip {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* 3. The lime helper border + gradient — was a vivid green left
   seam. Convert to navy so the section reads as a soft callout
   instead of a green banner. */
body .nmd-lakeland-plan__helper {
  background:
    linear-gradient(135deg, rgba(27, 51, 96, 0.10), rgba(255, 255, 255, 0.96) 50%),
    #ffffff !important;
  border: 1px solid rgba(27, 51, 96, 0.18) !important;
  border-left: 6px solid #1b3360 !important;
}

/* 4. Green card border-top — switch to brand navy so all four
   cards read the same accent family (navy/orange/blue/navy). */
body .nmd-lakeland-plan__card--green {
  border-top: 5px solid #1b3360 !important;
}

/* 5. Helper tag pill (the small 'LIMITED-TIME OFFER' chip inside
   the helper) — its bg + border + color were dark on green;
   force neutral navy on white. */
body .nmd-lakeland-plan__helper-tag {
  background: #f1f5fb !important;
  border-color: rgba(27, 51, 96, 0.22) !important;
  color: #1b3360 !important;
}

/* 6. Defensive: any anchor descendant of the plan section that
   somehow inherits green gets forced to the navy fallback. */
body .nmd-lakeland-plan a:not([class*='button']):not([class*='chip--green']) {
  color: #1b3360 !important;
}

/* 7. View-Full-Case-Study buttons across the homepage use the
   Elementor kit anchor color. Neutralize. */
body a.elementor-button,
body .elementor-button,
body a.elementor-button:visited {
  color: inherit !important;
}

/* 8. Catch-all: every anchor that does not have its own explicit
   `style` attribute and is not inside our chrome gets `inherit`
   (the parent's text color). This is the strongest possible
   fallback so a future widget cannot reintroduce green. */
/* Booking-link buttons and Dashboard FX buttons keep their own white text (2026-09-29) */
body .elementor a:not([style*='color']):not(.nmd-cta):not(.nmd-topbar__btn):not(.nmd-footer__cta):not(.nmd-footer__phone):not(.nmd-footer a):not(.nmd-header a):not([href*='/book/digital-review-meeting']):not(.nmd-dashboard-fx__button) {
  color: inherit !important;
}


/* ============================================================
   2026-09-23 BUTTON WHITE-TEXT OVERRIDE
   The kit-anchor-override rule (body .elementor-kit-4112 a { color: inherit
   !important }, specificity 0,1,2 with !important) was masking the inline
   button rules which have specificity 0,1,0 (no !important) or 0,1,1 (with
   !important). Buttons rendered as `inherit` = the parent's dark navy, so
   white-on-blue button text was showing as dark navy. Force white on every
   button-style element with a body-class selector that beats (0,1,2).

   Specifically targeted (with !important + body-elementor scoping):
     - .nmd-lakeland-plan__button and the --orange variant
     - .nmd-dashboard-fx__button--primary
     - any other Elementor button-style link inside the plan sections
   ============================================================ */

/* 1. Lakeland plan CTA buttons \u2014 white on blue/navy bg */
body .elementor a.nmd-lakeland-plan__button,
body .nmd-lakeland-plan a.nmd-lakeland-plan__button,
body .nmd-lakeland-plan__button,
body .nmd-lakeland-plan__button.nmd-lakeland-plan__button--orange,
body .nmd-lakeland-plan__button.nmd-lakeland-plan__button--ghost,
body .nmd-lakeland-plan__button.nmd-lakeland-plan__button--icon,
body .nmd-lakeland-plan__button:visited,
body .nmd-lakeland-plan__button:hover,
body .nmd-lakeland-plan__button:focus,
body .nmd-lakeland-plan__button:focus-visible {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* 2. Dashboard-FX primary button \u2014 white on blue */
body .elementor a.nmd-dashboard-fx__button--primary,
body .nmd-dashboard-fx__button--primary,
body .nmd-dashboard-fx__button--primary:visited,
body .nmd-dashboard-fx__button--primary:hover,
body .nmd-dashboard-fx__button--primary:focus,
body .nmd-dashboard-fx__button--primary:focus-visible {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* 3. Dashboard-FX secondary button \u2014 dark navy on white bg */
body .elementor a.nmd-dashboard-fx__button--secondary,
body .nmd-dashboard-fx__button--secondary,
body .nmd-dashboard-fx__button--secondary:visited,
body .nmd-dashboard-fx__button--secondary:hover,
body .nmd-dashboard-fx__button--secondary:focus,
body .nmd-dashboard-fx__button--secondary:focus-visible {
  color: #0a1f3d !important;
  -webkit-text-fill-color: #0a1f3d !important;
}

/* 4. Defensive: any other .elementor-button-style anchor inside the
   lakeland-plan section is force-white by default. The kit-anchor
   override is too coarse; without this, anything else added later
   (a third button variant, a help tooltip, etc.) regresses. */
body .nmd-lakeland-plan a.elementor-button,
body .nmd-lakeland-plan a.elementor-button:visited,
body .nmd-lakeland-plan a.elementor-button:hover {
  color: #ffffff !important;
}


/* ============================================================
   2026-09-23 FOOTER HEADING CASCADE LOCK-DOWN
   Force the chrome footer h4 (column header) and h5 (sub-section)
   styles to win against ANY competing rule from the Elementor kit,
   global typography, theme style.css, or inline page CSS. The
   previous chrome rules had specificity (0,2,1) with NO !important,
   which the kit's `.elementor-kit-4112 h4 { font-size: 24px; }`
   could match on specificity tie. With !important we guarantee the
   chrome hierarchy (h4 > h5) renders correctly on every page.
   ============================================================ */

body .nmd-footer__col h4,
body .nmd-footer__col h4:visited {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--nmd-fg) !important;
  margin: 0 0 14px !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid var(--nmd-border) !important;
}

body .nmd-footer__col h5,
body .nmd-footer__col h5:visited {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--nmd-fg-dim) !important;
  margin: 18px 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Apply first-of-type margin reset to first h5 in each col */
body .nmd-footer__col h5:first-of-type {
  margin-top: 0 !important;
}


/* === MATERIAL ICONS BINDING (forced !important) ===========================
   Inline material-icons-woff2-inline.css sets font-family and
   font-feature-settings: 'liga' on .material-icons, but on the live page
   those get overridden by something in the cascade (suspect parent
   .nmd-mega__heading's font-family: var(--nmd-font-body) !important and
   inheritance of font-feature-settings from body). Force every property
   needed for ligature substitution with !important so the icon span wins
   regardless of any ancestor rule. Tested in isolation: with this block,
   ligatures render. Without it on the live page, 'memory' shows as text.
   Properties forced:
     font-family:           bind to Material Icons regardless of cascade
     font-weight/style:     normal for ligature glyph rendering
     font-feature-settings: enable liga (standard ligatures)
     -webkit-font-feature-settings: same, WebKit prefix for Safari/old Chrome
     -webkit-font-smoothing:  antialias glyph edges
     text-rendering:        optimizeLegibility to hint ligature activation
     font-display:          block so the font swap doesn't show literal text
                            before the font loads */
.material-icons,
span.material-icons,
.nmd-mega__heading .material-icons,
.nmd-mega__heading--icon .material-icons,
.nmd-mega__heading--icon > .material-icons {
  font-family: 'Material Icons' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  font-display: block;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
}


/* === Featured Story play button: 50% larger, forced white ===
   The .nmd-mega__play .material-icons rule above sets font-size: 38px and
   color: #ffffff. This override bumps the glyph to 57px (50% larger) and
   locks the white color so any kit-4112 or theme-level rule can't paint
   over it. With the .material-icons span now containing an inline SVG via
   our 0z-nmd-inline-icons.php swap, the SVG fills at currentColor and
   sizes to width:1em / height:1em of the parent's font-size \u2014 so the
   57px cascades straight to the rendered glyph. */
.nmd-mega__play .material-icons {
  font-size: 57px !important;
  color: #ffffff !important;
  line-height: 1 !important;
}


/* === Elementor button text: forced white site-wide ===
   Elementor v3 buttons inherit text color from the global "secondary"
   system color (#000000) via __globals__.button_text_color even when the
   widget has a local color override set to #FFFFFF. The global renders
   in practice because the button widget emits a globals-resolved CSS
   variable on the inline style that wins over the local override in the
   generated stylesheet. Forcing color + -webkit-text-fill-color with
   !important across link / visited / hover / focus / active selectors
   beats the variable cascade so the button label reads white on every
   Elementor button site-wide (covers the hero CTA on the municipalities
   page and every other Elementor button across the rest of the site).
   Scoped to .elementor-button and its common wrapper selectors so it does
   not bleed into other widget text. */
.elementor-button,
.elementor-button:link,
.elementor-button:visited,
.elementor-button:hover,
.elementor-button:focus,
.elementor-button:active,
.elementor-widget-button a.elementor-button,
.elementor-widget-button .elementor-button-wrapper a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* =====================================================================
   "Our Difference" mega submenu — Variation A (Bento Hero Photo)
   ---------------------------------------------------------------------
   Drop-in bento layout: a left hero photo tile (WMGB case study) +
   a right column of four color-coded chapter tiles. Wrapped in
   .nmd-od-variation-a so the existing attribute-selector flex override
   (`.nmd-mega__inner--elementor > div[style*="display: flex"]`) cannot
   match and so all child selectors stay scoped.

   The container is a CSS grid; chapter tiles use flex-column. Each
   chapter tile is an <a>, so the entire card is clickable. Hover lift
   on chapter tiles, subtle scale on the hero photo. Breaks to a single
   column under 1180px.
   ===================================================================== */

/* --- Grid container --------------------------------------------------- */
.nmd-mega__inner--elementor .nmd-od-variation-a {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 20px !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* --- Hero photo tile (LEFT) ------------------------------------------ */
.nmd-od-variation-a .od-photo {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-height: 360px !important;
  padding: 28px 28px 26px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: #ffffff !important;
  background-color: #0a1f3d !important;
  background-image:
    linear-gradient(180deg, rgba(10,31,61,0.10) 0%, rgba(10,31,61,0.65) 55%, rgba(10,31,61,0.92) 100%),
    url("https://nationmediadesign-dev.10web.site/wp-content/uploads/2025/09/WMGB-Home-Improvement-Nation-Media-case-Studies.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px rgba(10,31,61,0.18) !important;
  transition: transform 220ms ease, box-shadow 220ms ease !important;
  isolation: isolate !important;
}
.nmd-od-variation-a .od-photo:hover,
.nmd-od-variation-a .od-photo:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 14px 32px rgba(10,31,61,0.28) !important;
  outline: none !important;
}
.nmd-od-variation-a .od-photo__eyebrow {
  display: inline-block !important;
  align-self: flex-start !important;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: rgba(255, 92, 0, 0.95) !important; /* NMD orange */
  padding: 5px 10px !important;
  border-radius: 4px !important;
  margin-bottom: 14px !important;
  line-height: 1 !important;
}
.nmd-od-variation-a .od-photo__title {
  display: block !important;
  font-family: var(--nmd-font-body) !important;
  font-size: 24px !important;
  line-height: 1.22 !important;
  font-weight: 100 !important;
  color: #ffffff !important;
  margin: 0 0 16px !important;
  max-width: 32ch !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}
.nmd-od-variation-a .od-photo__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--nmd-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}
.nmd-od-variation-a .od-photo__arrow {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  transition: transform 220ms ease !important;
  color: #ffffff !important;
}
.nmd-od-variation-a .od-photo:hover .od-photo__arrow,
.nmd-od-variation-a .od-photo:focus-visible .od-photo__arrow {
  transform: translateX(4px) !important;
}

/* --- Chapter tile column (RIGHT) ------------------------------------- */
.nmd-od-variation-a .od-chapters {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Individual chapter tile ----------------------------------------- */
.nmd-od-variation-a .od-chap {
  position: relative !important;
  display: grid !important;
  grid-template-columns: auto auto 1fr !important;
  grid-template-areas:
    "num  label  body"
    "num  title  body" !important;
  align-items: center !important;
  column-gap: 14px !important;
  row-gap: 2px !important;
  padding: 14px 16px 14px 18px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  text-decoration: none !important;
  color: inherit !important;
  overflow: hidden !important;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
  box-shadow: 0 1px 0 rgba(10,31,61,0.05), 0 2px 6px rgba(10,31,61,0.04) !important;
}
.nmd-od-variation-a .od-chap::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 4px !important;
  background: var(--od-accent, #2563eb) !important;
  transition: width 180ms ease !important;
}
.nmd-od-variation-a .od-chap:hover,
.nmd-od-variation-a .od-chap:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(10,31,61,0.10) !important;
  background: #fafbfd !important;
  outline: none !important;
}
.nmd-od-variation-a .od-chap:hover::before,
.nmd-od-variation-a .od-chap:focus-visible::before {
  width: 6px !important;
}

/* chapter number (mono) */
.nmd-od-variation-a .od-chap__num {
  grid-area: num !important;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--od-accent, #2563eb) !important;
  margin-right: 4px !important;
}
/* chapter label (uppercase mono pill) */
.nmd-od-variation-a .od-chap__label {
  grid-area: label !important;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: #4b5b73 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
/* chapter title */
.nmd-od-variation-a .od-chap__title {
  grid-area: title !important;
  font-family: var(--nmd-font-body) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #0a1f3d !important;
  margin: 0 !important;
}
/* chapter body */
.nmd-od-variation-a .od-chap__body {
  grid-area: body !important;
  font-family: var(--nmd-font-body) !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: #5a6b85 !important;
  margin: 0 !important;
  padding-left: 12px !important;
  border-left: 1px solid #e6ebf2 !important;
}

/* per-tile accent color (orange / green / blue / navy) */
.nmd-od-variation-a .od-chap.c1 { --od-accent: #ff5c00 !important; }
.nmd-od-variation-a .od-chap.c2 { --od-accent: #16a34a !important; }
.nmd-od-variation-a .od-chap.c3 { --od-accent: #2563eb !important; }
.nmd-od-variation-a .od-chap.c4 { --od-accent: #0a1f3d !important; }

/* force h5 color override — defeats the unscoped
   `.nmd-mega__inner--elementor h5 { color: #1a1a1a !important }` */
.nmd-od-variation-a h5,
.nmd-od-variation-a .od-chap__title,
.nmd-od-variation-a .od-photo__title {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

/* --- Responsive: single column under 1180px ------------------------- */
@media (max-width: 1180px) {
  .nmd-mega__inner--elementor .nmd-od-variation-a {
    grid-template-columns: 1fr !important;
  }
  .nmd-od-variation-a .od-photo {
    min-height: 260px !important;
  }
}

/* --- Panel-open override (mirrors existing pattern at L1558+) -------
   Same-scoped specificity boost so the drawer-open state also wins. */
html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor .nmd-od-variation-a {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 20px !important;
}
html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor .od-photo,
html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor .od-chap {
  display: grid !important;
}
html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor .od-chap {
  grid-template-columns: auto auto 1fr !important;
  grid-template-areas:
    "num  label  body"
    "num  title  body" !important;
}
@media (max-width: 1180px) {
  html.nmd-drawer-open .nmd-header__inner .nmd-mega__inner--elementor .nmd-od-variation-a {
    grid-template-columns: 1fr !important;
  }
}

/* ======================================================================
   MOBILE HEADER — TIGHTER + NO OVERFLOW 2026-09-29
   The logo column was `1fr` (min = the logo's natural 377px), so on phones
   the logo got cut off and the menu toggle sat off-screen (page 459px wide
   on a 390px phone). minmax(0,1fr) lets it shrink; logo capped at 40px tall.
   ====================================================================== */
@media (max-width: 768px) {
  .nmd-main {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px 8px !important;
    padding: 10px 0 !important;
  }
  .nmd-logo { min-width: 0 !important; max-width: 100% !important; }
  .nmd-logo img {
    height: 40px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain;
    object-position: left center;
  }
  .nmd-header .nmd-cta { min-height: 34px !important; max-width: 100% !important; box-sizing: border-box !important; }
  .nmd-header__menu-toggle { width: 42px !important; height: 42px !important; }
}

/* ======================================================================
   MEGA MENU CLOSES ON SCROLL 2026-09-28
   nmd-header.js adds .nmd-mega-scroll-closed to .nmd-header when the page
   scrolls down; it clears when the pointer leaves the nav item. Desktop
   only - the mobile drawer is untouched.
   ====================================================================== */
@media (min-width: 1281px) {
  .nmd-header.nmd-mega-scroll-closed .nmd-mega {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .15s, visibility 0s linear .15s !important;
  }
}
/* ======================================================================
   OUR DIFFERENCE PANEL 2026-09-29 (desktop mega menu)
   - The 4 chapters (01-04) stretch to exactly the photo tile's height.
   - The case-study headline on the photo reads as a bold headline.
   ====================================================================== */
@media (min-width: 1281px) {
  .nmd-od-variation-a { align-items: stretch !important; }
  .nmd-od-variation-a .od-chapters { display: flex !important; flex-direction: column !important; height: 100%; }
  .nmd-od-variation-a .od-chapters > .od-chap { flex: 1 1 0 !important; min-height: 0 !important; }
  .nmd-od-variation-a .od-photo__title {
    font-size: 30px !important; font-weight: 700 !important; line-height: 1.15 !important;
    letter-spacing: -.015em !important; max-width: 20ch;
    text-shadow: 0 2px 12px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4) !important;
  }
  .nmd-od-variation-a .od-photo__cta { line-height: 1.4 !important; margin-top: 10px; }
}

/* HEADER STACKING 2026-09-29: page sections (e.g. the homepage hero wrapper, z-index 100) were painting over the header and its open mobile drawer. Keep the header above page content; modals stay higher. */
.nmd-header{position:relative;z-index:1000 !important;}