/* =====================================================================
   MAVERICK DATA - HOMEPAGE POLISH PASS (v1)

   Paste into: WP Admin > Appearance > Customize > Additional CSS
   The Customizer previews this live before you click Publish, so there
   is zero risk. Remove any numbered block to revert just that change.

   Written against the real BeTheme markup on maverickdata.io.
   A few rules use !important on purpose, only where BeTheme sets a value
   with high specificity or inline (backgrounds, bar heights, logo sizing).
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. GLOBAL FEEL
   The theme sets very tight negative letter spacing on headings
   (h1 at -3px), which reads cramped at large sizes on Archivo.
   Easing it up makes the type feel more considered. Also adds smooth
   transitions so hovers feel intentional rather than instant.
   --------------------------------------------------------------------- */
h1, .text-logo #logo { letter-spacing: -1px; }
h2 { letter-spacing: -0.5px; }
h3, .woocommerce ul.products li.product h3 { letter-spacing: -0.5px; }

.button,
.mfn-queryloop-item-wrapper,
.payment-methods-list li,
.payment-methods-list li img {
  transition: transform 0.25s ease, box-shadow 0.25s ease,
              filter 0.35s ease, background-color 0.25s ease;
}


/* ---------------------------------------------------------------------
   2. HERO  (the one bold move)
   Uses your custom aviation/data background image, with a teal gradient
   underneath as a fallback while the image loads. The image already
   carries its own gradient and artwork, so it fills the whole hero.
   To go back to the pure-CSS texture, swap this rule for the earlier
   layered-gradient version.
   --------------------------------------------------------------------- */
section.mcb-section-xenbugdzu {
  background-color: #0E2A33 !important;
  background-image:
    url("https://maverickdata.io/wp-content/uploads/2026/08/maverick-hero-bg-2.png"),
    linear-gradient(135deg, #0c2b34 0%, #104152 55%, #183835 100%) !important;
  background-size: cover, auto !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
section.mcb-section-xenbugdzu h1.title { line-height: 1.05; }

/* fit the headline on one line on desktop/laptop, allow wrap on mobile */
@media (min-width: 960px) {
  .mcb-item-1nblbokqi .title {
    font-size: clamp(44px, 4.6vw, 84px) !important;
    line-height: 1.06 !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 767px) {
  .mcb-item-1nblbokqi .title {
    font-size: 44px !important;
    line-height: 1.1 !important;
  }
}


/* ---------------------------------------------------------------------
   2b. HEADER BAR
   The header is a separate section with its own grey background, so
   recolouring the hero alone left a grey bar clashing on top. This
   brings the header into the same teal so the two read as one unit.
   White nav text, the "Home" highlight, and the white pill all still
   read cleanly on teal.
   --------------------------------------------------------------------- */
section.mcb-section-ehtq83fl {
  background-color: #104152 !important;
  background-image: linear-gradient(135deg, #0d2f3c 0%, #104152 100%) !important;
}


/* ---------------------------------------------------------------------
   2c. HERO HEADLINE ACCENT
   The word "Experts" is yellow (#f0ff45) via an inline style. This sets
   it to white for a cleaner, more confident headline. To try a
   different accent, swap the colour below to one of the options:
       #84f18f  = mint green (fresh, still an accent)
       #f0ff45  = the original yellow (put it back)
   --------------------------------------------------------------------- */
section.mcb-section-xenbugdzu h1.title span { color: #ffffff !important; }


/* ---------------------------------------------------------------------
   2d. NAV HIGHLIGHT  (optional, currently OFF)
   The active/hover menu item ("Home") is the same yellow. Un-comment
   to make it white to match the headline, or change the colour to taste.
   --------------------------------------------------------------------- */
/*
.mcb-item-7p371ug0j .mfn-header-menu > li.mfn-menu-li.current-menu-item > a.mfn-menu-link,
.mcb-item-7p371ug0j .mfn-header-menu > li.mfn-menu-li:hover > a.mfn-menu-link {
  color: #ffffff;
}
*/


/* ---------------------------------------------------------------------
   3. SERVICE CARDS
   The four light panels under "AI is changing BI..." (Analytics,
   Managed, Migrations, Data Strategy). A soft resting shadow plus a
   gentle lift on hover makes them read as cards you can act on.
   --------------------------------------------------------------------- */
.mcb-wrap-inner-h7od20ru,
.mcb-wrap-inner-qak73ulh7,
.mcb-wrap-inner-bz1dkh3rc,
.mcb-wrap-inner-z3wv8qbw {
  box-shadow: 0 1px 2px rgba(16, 65, 82, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mcb-wrap-h7od20ru:hover > .mcb-wrap-inner-h7od20ru,
.mcb-wrap-qak73ulh7:hover > .mcb-wrap-inner-qak73ulh7,
.mcb-wrap-bz1dkh3rc:hover > .mcb-wrap-inner-bz1dkh3rc,
.mcb-wrap-z3wv8qbw:hover > .mcb-wrap-inner-z3wv8qbw {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(16, 65, 82, 0.12);
}


/* ---------------------------------------------------------------------
   4. PLATFORM LOGO GRID
   Puts all eight logos in a single small row across the full width,
   each in an equal cell, height-matched, with a subtle greyscale that
   returns to colour on hover. On phones they wrap to two rows so they
   don't get too tiny. To change how many per row, this is a nowrap
   flex row on desktop; drop nowrap or change the mobile flex-basis.
   --------------------------------------------------------------------- */

/* let the logo column span the full width instead of half */
.mcb-item-b6dcb146b { width: 100% !important; }

.mcb-item-b6dcb146b .payment-methods-list {
  flex-wrap: nowrap !important;
  justify-content: center !important;
}
.mcb-item-b6dcb146b .payment-methods-list li {
  flex: 1 1 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px !important;
  margin: 6px !important;
  padding: 14px !important;
  border: 1px solid rgba(16, 65, 82, 0.06);
}
.mcb-item-b6dcb146b .payment-methods-list li:hover {
  box-shadow: 0 10px 24px rgba(16, 65, 82, 0.10);
  transform: translateY(-4px);
}
.mcb-item-b6dcb146b .payment-methods-list li img {
  width: auto !important;
  max-width: 100% !important;
  max-height: 30px !important;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.85;
}
.mcb-item-b6dcb146b .payment-methods-list li:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* phones: wrap to two rows of four so logos stay legible */
@media (max-width: 767px) {
  .mcb-item-b6dcb146b .payment-methods-list { flex-wrap: wrap !important; }
  .mcb-item-b6dcb146b .payment-methods-list li {
    flex: 0 0 20% !important;
    min-height: 70px !important;
    margin: 4px !important;
  }
  .mcb-item-b6dcb146b .payment-methods-list li img { max-height: 26px !important; }
}


/* ---------------------------------------------------------------------
   5. TESTIMONIAL CARDS
   The four "Happy Client" cards. A hairline border and soft shadow give
   them definition on the light section, a hover lift makes them feel
   alive, and avatars are forced to clean circles regardless of the
   source image shape.
   --------------------------------------------------------------------- */
.mcb-section-inqvi4rz6 .mfn-queryloop-item-wrapper {
  border: 1px solid rgba(16, 65, 82, 0.07);
  box-shadow: 0 1px 2px rgba(16, 65, 82, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mcb-section-inqvi4rz6 .mfn-queryloop-item-wrapper:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(16, 65, 82, 0.12);
}
.mcb-item-ixgbfjr3 .icon-wrapper img {
  width: 55px !important;
  height: 55px !important;
  object-fit: cover;
  border-radius: 50%;
}


/* ---------------------------------------------------------------------
   6. STATS BLOCK
   The "91% / 57%" section has a stray empty third bullet and hair-thin
   2px bars. This hides the empty item and thickens the bars into a
   readable pill so the numbers actually land.
   --------------------------------------------------------------------- */
.mcb-item-4fuqi9dj .bars_list li.pb-desc:empty { display: none; }
.mcb-item-4fuqi9dj .bars_list li .bar {
  height: 8px !important;
  border-radius: 999px;
  background-color: rgba(16, 65, 82, 0.10);
  overflow: hidden;
}
.mcb-item-4fuqi9dj .bars_list li .bar .progress {
  border-radius: 999px;
  background-color: #183835 !important;
}


/* ---------------------------------------------------------------------
   7. BUTTONS
   Keeps your existing pill shape and colours, adds a little depth and a
   smooth press so they feel tactile.
   --------------------------------------------------------------------- */
.button { box-shadow: 0 2px 6px rgba(10, 10, 10, 0.06); }
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(10, 10, 10, 0.12);
}


/* ---------------------------------------------------------------------
   8. NO GREEN ON TEXT
   Keeps your palette (teal hero, cream sections, buttons) but removes
   green from every text and icon colour. Greens become a neutral ink
   (#1C2126). To use a different neutral, change every #1C2126 below.

   The default headings are recoloured WITHOUT !important on purpose, so
   white headings that sit on dark sections are not affected. The two
   dark sections are then re-whitened just below as a safeguard.
   --------------------------------------------------------------------- */

/* default (teal-green) headings on light sections -> ink */
h2, h2 a, h2 a:hover,
h3, h3 a, h3 a:hover,
h4, h4 a, h4 a:hover,
h5, h5 a, h5 a:hover,
h6, h6 a, h6 a:hover { color: #1C2126; }

/* safeguard: keep headings white on the dark hero and video sections */
section.mcb-section-xenbugdzu h1,
section.mcb-section-xenbugdzu h2,
section.mcb-section-xenbugdzu h3,
section.mcb-section-diqzt9if h1,
section.mcb-section-diqzt9if h2,
section.mcb-section-diqzt9if h3 { color: #ffffff !important; }

/* footer headings and links (were teal-green / bright green) -> ink */
.mfn-footer h1, .mfn-footer h2, .mfn-footer h3,
.mfn-footer h4, .mfn-footer h5, .mfn-footer h6,
.mfn-footer a:not(.button):not(.mfn-btn),
.mfn-footer a:not(.button):not(.mfn-btn):hover,
.mfn-footer .footer_copy .social li a,
.mfn-footer .footer_copy .social li a:hover { color: #1C2126 !important; }

/* mint-green accent icons and accent text -> ink */
.mfn-icon-box .icon-wrapper i,
.mfn-icon-box .icon-wrapper i.primary,
.icon_box .icon_wrapper,
.counter .icon_wrapper i,
.counter .desc_wrapper .number-wrapper,
.quick_fact .number-wrapper .number,
a.content_link, a:hover.content_link,
.trailer_box.plain .desc .subtitle,
.pricing-box .plan-header .price > span,
.pricing-box .plan-header .price sup.currency { color: #1C2126 !important; }

/* the small green "new" menu badge -> neutral */
.finance5-menu-textnew {
  color: #1C2126 !important;
  background: #EEEFF2 !important;
  border-color: #D8DAE0 !important;
}


/* ---------------------------------------------------------------------
   9. TIGHTER CORNERS
   The theme rounds sections and cards at 32px, which reads soft and a
   bit amateur. This tightens large surfaces to 16px and cards to 12px
   for a crisper, more professional edge. Avatars stay fully round.
   Change the two values (16px / 12px) to taste; 0px gives square corners.
   --------------------------------------------------------------------- */

/* large surfaces: header, hero, and the main content sections */
section.mcb-section-ehtq83fl,
section.mcb-section-xenbugdzu,
section.mcb-section-zgr6ee3ku,
section.mcb-section-mwfw60fl,
section.mcb-section-f4d89b46c,
section.mcb-section-1705ve1yj,
section.mcb-section-diqzt9if,
.finance5-section-overlayradius .mcb-background-overlay { border-radius: 16px !important; }

/* cards: service panels, testimonials, logo tiles */
.mcb-wrap-inner-h7od20ru,
.mcb-wrap-inner-qak73ulh7,
.mcb-wrap-inner-bz1dkh3rc,
.mcb-wrap-inner-z3wv8qbw,
.mcb-section-inqvi4rz6 .mfn-queryloop-item-wrapper,
.mcb-item-b6dcb146b .payment-methods-list li { border-radius: 12px !important; }


/* ---------------------------------------------------------------------
   10. FLOATING HEADER (phData style)
   Makes the header transparent and floats it over the hero, so the
   textured hero shows behind the nav. Once you scroll, the header turns
   solid teal again so the white nav stays readable over the lighter
   sections below.

   Two numbers control the overlap: the hero's negative margin-top (how
   far it slides up under the nav) and its padding-top (how far the
   headline sits below the nav). Nudge them in the live preview if the
   spacing is off on your screen.
   --------------------------------------------------------------------- */

/* header transparent and floating above the hero */
section.mcb-section-ehtq83fl {
  background-color: transparent !important;
  background-image: none !important;
  position: relative;
  z-index: 30;
  margin-bottom: 0 !important;
}

/* pull the hero up so it sits behind the floating nav */
section.mcb-section-xenbugdzu {
  margin-top: -140px !important;
  padding-top: 220px !important;
  padding-bottom: 48px !important;
}
@media (max-width: 767px) {
  section.mcb-section-xenbugdzu {
    margin-top: -96px !important;
    padding-top: 165px !important;
    padding-bottom: 32px !important;
  }
}

/* once the page is scrolled, give the header a solid teal background */
body.mfn-header-scrolled section.mcb-section-ehtq83fl {
  background-color: #0E2A33 !important;
}


/* ---------------------------------------------------------------------
   11. HERO TEXT LEFT (phData style)
   Pins the headline, subtitle, and buttons to the left over the clean
   side of the background, and caps their width so long lines don't run
   into the artwork on the right. The headline may wrap to two lines on
   smaller screens, exactly like phData; on wide screens it stays on one.
   Change the 60% below to widen or narrow the text column.
   --------------------------------------------------------------------- */

/* align the hero content block to the left */
.mcb-wrap-6lsnjd0un > .mcb-wrap-inner-6lsnjd0un {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* left-align the text and the small decor mark above it */
.mcb-item-3z169ntvm .mcb-column-inner-3z169ntvm,
.mcb-item-1nblbokqi .title,
.mcb-item-phl2inszh .desc { text-align: left !important; }

/* cap the width of the headline and subtitle so they clear the artwork */
.mcb-item-1nblbokqi .mcb-column-inner-1nblbokqi,
.mcb-item-phl2inszh .mcb-column-inner-phl2inszh {
  max-width: 60%;
  margin-left: 0;
  margin-right: auto;
}

/* let the headline wrap within that width instead of forcing one line */
.mcb-item-1nblbokqi .title { white-space: normal !important; }

/* keep the single Get in Touch button, hide Our Services, align left */
.mcb-item-2i6azh93r { display: none !important; }
.mcb-item-wwyd2h1ip { text-align: left !important; }
.mcb-item-wwyd2h1ip .mcb-column-inner-wwyd2h1ip { margin-left: 0 !important; margin-right: 0 !important; }

/* on phones, let the text use the full width again */
@media (max-width: 767px) {
  .mcb-item-1nblbokqi .mcb-column-inner-1nblbokqi,
  .mcb-item-phl2inszh .mcb-column-inner-phl2inszh { max-width: 100%; }
}


/* ---------------------------------------------------------------------
   12. SERVICES ICON ROW  (Idea 1, built with BeTheme Icon Boxes)
   Add the CSS class  mav-caps  to the Wrap that holds your four Icon
   Boxes (select the Wrap in BeBuilder, open its settings, put mav-caps
   in the Class field). This styles them by that class, so it keeps
   working no matter what IDs BeBuilder assigns. Covers both BeTheme
   icon-box variants (underscore and hyphen class names).
   --------------------------------------------------------------------- */

/* each column becomes a soft grey card */
.mav-caps .mcb-column-inner {
  background-color: #EDEFF0 !important;
  border-radius: 14px !important;
  padding: 28px 26px !important;
  min-height: 160px;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.mav-caps .mcb-column:hover .mcb-column-inner {
  background-color: #E6E9EA !important;
  transform: translateY(-3px);
}

/* left-align the whole box */
.mav-caps .icon_box,
.mav-caps .mfn-icon-box { text-align: left !important; }

/* icon: sized and inked (no green), sitting above the title */
.mav-caps .icon_wrapper i,
.mav-caps .icon-wrapper i {
  font-size: 30px !important;
  color: #1C2126 !important;
  margin-bottom: 14px !important;
}

/* title: compact and dark */
.mav-caps .title {
  font-size: 20px !important;
  line-height: 1.25 !important;
  color: #1C2126 !important;
  margin-bottom: 8px !important;
}

/* description: one quiet line, neutral slate (no green) */
.mav-caps .desc,
.mav-caps .desc_wrapper .desc {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #5f6f78 !important;
}

/* on smaller screens, relax the equal-height and add spacing when stacked */
@media (max-width: 959px) {
  .mav-caps .mcb-column-inner { min-height: 0; margin-bottom: 12px; }
}


/* ---------------------------------------------------------------------
   13. TESTIMONIALS SLIDER  — REMOVED (v4)
   The custom slider styling narrowed the card, boxed each slide in a
   white panel (the ghosted double-box), and put the author name +
   company on one line. Removed to restore BeTheme's native testimonial
   styling: full-width card, stacked name/company, default quote type.
   Global no-green text is still handled by block 8.
   --------------------------------------------------------------------- */


/* ---------------------------------------------------------------------
   13b. TESTIMONIALS WIDTH
   Widens the testimonials slider by letting its column/wrap fill the
   section. It does NOT touch individual slide widths — the slider script
   sets those, and overriding them breaks the sliding.

   Uses :has() to find the slider's container automatically, so it does
   not depend on a section ID. After pasting, HARD-REFRESH the page
   (Ctrl+F5) — a JS slider reads its width on load.

   IF IT STILL WON'T WIDEN: the width is fixed by the slider element's own
   setting, not its container. The sure fix is in BeBuilder — select the
   column holding the Testimonials element and set it to full width (1/1);
   the slider recomputes wider on reload.
   --------------------------------------------------------------------- */
/* Widen every ancestor wrap/column that CONTAINS the slider, via :has().
   This self-targets the testimonials container no matter which section or
   column it lives in — no section ID needed. */
.mcb-wrap:has(.testimonials_slider),
.mcb-wrap-inner:has(.testimonials_slider),
.mcb-column:has(.testimonials_slider),
.mcb-column-inner:has(.testimonials_slider),
.column_testimonials {
  max-width: 100% !important;
  width: 100% !important;
  flex-basis: 100% !important;
}
/* Force the slider element's OWN width to fill the container. The slider
   script computes a fixed pixel width here; overriding it is what lets the
   card percentages below actually reach the gray border. */
.testimonials_slider {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ---------------------------------------------------------------------
   13c. WIDEN THE SLIDE CARD + ITS TEXT   (tunable)
   Block 13b widened the outer container. This widens the "track" wrappers
   inside the slider, then sets the white quote card to a tunable width and
   centers it, and makes the quote text fill the card (left-aligned). The
   author (name/company) row is left alone.

   >>> TO TUNE THE CARD WIDTH: change the one value on --mav-quote-width
       below. 82% is a starting point ("about halfway"); 90% is wider,
       100% is edge-to-edge of the gray box. <<<

   After pasting, HARD-REFRESH (Ctrl+F5) and click the arrows once to
   confirm the slides still cycle. If the slider misbehaves, delete this
   13c block (13b alone is safe), or widen the Testimonials element in
   BeBuilder instead.
   --------------------------------------------------------------------- */

/* --- the one knob to turn --- */
.testimonials_slider { --mav-quote-width: 82%; }

/* Widen the slider AND every track-level wrapper between the card and the
   full-width container, so nothing upstream caps the card. This forces
   width:100% even over inline pixel widths the slider script writes. */
.testimonials_slider,
.testimonials_slider > div,
.testimonials_slider > div > div,
.testimonials_slider > div > div > div,
.testimonials_slider ul,
.testimonials_slider ul.slider,
.testimonials_slider .testimonials_slider_ul,
.testimonials_slider [class*="slider"]:not(li):not(.slider_pagination):not([class*="prev"]):not([class*="next"]) {
  width: 100% !important;
  max-width: 100% !important;
}

/* The white quote card (the slide): tunable width, centered. */
.testimonials_slider .testimonials_slider_ul > li,
.testimonials_slider ul > li {
  width: var(--mav-quote-width) !important;
  max-width: var(--mav-quote-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: 0 !important;
  float: none !important;
  box-sizing: border-box;
}

/* Every wrapper inside the card fills it (removes inner width caps). */
.testimonials_slider .testimonials_slider_ul > li * {
  max-width: 100% !important;
}
.testimonials_slider .testimonials_slider_ul > li blockquote,
.testimonials_slider .testimonials_slider_ul > li blockquote *,
.testimonials_slider .testimonials_slider_ul > li > div,
.testimonials_slider .testimonials_slider_ul > li > blockquote {
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
}

/* Reset any flex-centering that pushes the text sideways (harmless if not flex). */
.testimonials_slider .testimonials_slider_ul > li,
.testimonials_slider .testimonials_slider_ul > li blockquote {
  display: block !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* Left-align + un-pad ONLY the quote text (author row untouched). */
.testimonials_slider .testimonials_slider_ul > li blockquote,
.testimonials_slider .testimonials_slider_ul > li blockquote p,
.testimonials_slider .testimonials_slider_ul > li > p {
  width: auto !important;
  text-align: left !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}


/* ---------------------------------------------------------------------
   14. SERVICES PAGE HERO  (matches the home hero)
   In BeBuilder, add the class  mav-hero  to the "Transform Your Data
   Stack" hero section on the Services page. Reuses the same aviation
   background, left-aligned white text, and floating-header spacing.
   The two spacing numbers mirror the home hero; nudge if needed.
   --------------------------------------------------------------------- */
section.mav-hero {
  background-color: #0E2A33 !important;
  background-image:
    url("https://maverickdata.io/wp-content/uploads/2026/08/maverick-hero-bg-2.png"),
    linear-gradient(135deg, #0c2b34 0%, #104152 55%, #183835 100%) !important;
  background-size: cover, auto !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  border-radius: 16px !important;
  margin-top: -140px !important;     /* slide up under the floating nav */
  padding-top: 220px !important;
  padding-bottom: 60px !important;
}
@media (max-width: 767px) {
  section.mav-hero {
    margin-top: -96px !important;
    padding-top: 165px !important;
  }
}

/* left-align the hero content block */
.mav-hero .mcb-wrap-inner {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* white hero text on the dark background, left-aligned */
.mav-hero .title,
.mav-hero .title a { color: #ffffff !important; text-align: left !important; }
.mav-hero .desc { color: rgba(255, 255, 255, 0.85) !important; text-align: left !important; }

/* cap the text width so it clears the artwork on the right */
.mav-hero .column_heading .mcb-column-inner,
.mav-hero .column_plain_text .mcb-column-inner {
  max-width: 60%;
  margin-left: 0;
  margin-right: auto;
}
@media (max-width: 767px) {
  .mav-hero .column_heading .mcb-column-inner,
  .mav-hero .column_plain_text .mcb-column-inner { max-width: 100%; }
}

/* =====================================================================
   BLOCK 15 — SERVICES PAGE: SERVICE ROWS
   Offerings left, proof right on every row. Proof panels lead with the
   client + use case; big numbers where they're real, outcome sentences
   where they're not. No pricing except the Enablement tag.
   Palette: ink #1C2126, teal #1D9E75 / #0F6E56 / #E1F5EE.
   ===================================================================== */

.mav-service-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
  padding: 3rem 0;
  border-bottom: 1px solid #E4E7E2;
}
.mav-service-row:last-of-type { border-bottom: 0; }

/* ---- Left: index number ---- */
.mav-service-num { font-size: 34px; font-weight: 500; line-height: 1; color: #C3CBCF; }

/* ---- Middle: title, copy, bullets, CTA ---- */
.mav-service-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mav-service-icon {
  display: inline-flex; width: 36px; height: 36px; border-radius: 8px;
  background: #E1F5EE; color: #0F6E56;
  align-items: center; justify-content: center; font-size: 20px; flex: 0 0 auto;
}
.mav-service-row h3 { margin: 0; font-size: 24px; line-height: 1.15; color: #1C2126; }
.mav-service-desc { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: #4A5459; }
.mav-service-list {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.mav-service-list li {
  position: relative; padding-left: 26px;
  font-size: 14.5px; line-height: 1.45; color: #2C343A;
}
.mav-service-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: #1D9E75; font-weight: 600;
}

/* ---- CTA + optional price tag ---- */
.mav-service-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: #1C2126; color: #fff; text-decoration: none;
  font-size: 14px; padding: 10px 18px; border-radius: 8px;
  transition: background .18s ease;
}
.mav-service-cta:hover { background: #333B41; color: #fff; }
.mav-service-cta .mav-arrow { transition: transform .18s ease; }
.mav-service-cta:hover .mav-arrow { transform: translateX(3px); }
.mav-service-price { font-size: 13px; color: #6A747A; margin-left: 12px; white-space: nowrap; }
.mav-service-price strong { color: #1C2126; font-weight: 500; }

/* ---- Right: ink proof panel ---- */
.mav-proof {
  background: #1C2126; border-radius: 12px; padding: 1.6rem;
  color: #fff; align-self: stretch;
}
.mav-proof-label {
  font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: #8B97A0; margin: 0 0 14px;
}
.mav-proof-item { margin: 0; }

/* client + use case is now the anchor */
.mav-proof-client {
  font-size: 16px; line-height: 1.3; font-weight: 600;
  color: #ffffff; margin: 0 0 12px;
}
.mav-proof-client .use {
  display: block; font-size: 13px; font-weight: 400;
  color: #8B97A0; margin-top: 2px;
}

/* big-number stat (AI Apps, Enablement) */
.mav-proof-stat { display: flex; align-items: baseline; gap: 8px; }
.mav-proof-stat .num { font-size: 42px; font-weight: 500; line-height: 1; color: #5DCAA5; }
.mav-proof-stat .cap { font-size: 13px; color: #C3CBCF; }
.mav-proof--double .mav-proof-stat .num { font-size: 30px; }

/* outcome sentence (Migrations, Strategy) */
.mav-proof-outcome { font-size: 14.5px; line-height: 1.55; color: #C3CBCF; margin: 0; }

.mav-proof-divider { height: 1px; background: #333B41; margin: 18px 0; border: 0; }

.mav-proof-secondary { display: flex; justify-content: space-between; font-size: 13px; }
.mav-proof-secondary .k { color: #8B97A0; }
.mav-proof-secondary .v { color: #fff; }

/* =====================================================================
   RESPONSIVE — stack cleanly on tablet / mobile
   ===================================================================== */
@media (max-width: 900px) {
  .mav-service-row {
    grid-template-columns: 48px 1fr;
    gap: 1rem 1.25rem; padding: 2.25rem 0;
  }
  .mav-service-num { font-size: 28px; }
  .mav-proof { grid-column: 1 / -1; margin-top: .5rem; }
}
@media (max-width: 520px) {
  .mav-service-row { grid-template-columns: 1fr; }
  .mav-service-num { display: none; }
  .mav-service-row h3 { font-size: 21px; }
}

/* ===== Maverick client logo marquee ===== */
.mav-logos{
  --logo-height:46px; --logo-max-width:160px; --gap:3rem; --speed:45s;
  width:100%; overflow:hidden; padding:2.5rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.mav-logos__track{
  display:flex; align-items:center; gap:var(--gap); width:max-content;
  animation:mav-scroll var(--speed) linear infinite;
}
.mav-logos:hover .mav-logos__track{ animation-play-state:paused; }
.mav-logos__item{
  height:var(--logo-height); width:auto; max-width:var(--logo-max-width);
  object-fit:contain; flex:0 0 auto;
  filter:grayscale(100%); opacity:.55;
  transition:filter .3s ease, opacity .3s ease;
}
.mav-logos__item:hover{ filter:grayscale(0); opacity:1; }
@keyframes mav-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (max-width:600px){ .mav-logos{ --logo-height:36px; --gap:2rem; } }
@media (prefers-reduced-motion:reduce){ .mav-logos__track{ animation:none; } }


/* ==========================================================================
   MAVERICK DATA — BLOG + USE CASES PAGE POLISH  (v3)
   --------------------------------------------------------------------------
   /blog/ (page-id-127) and /use-cases/ (page-id-142) are static Pages with
   identical BeTheme markup (#Subheader title bar + Blog-element post loop).
   Both are styled by ONE shared set of rules via
   body:is(.page-id-127, .page-id-142) …  — change once, both pages update.

   Add another same-layout page later by dropping its id in the parentheses,
   e.g. body:is(.page-id-127, .page-id-142, .page-id-999).
   To style Use Cases DIFFERENTLY from Blog later, split a rule back out into
   its own  body.page-id-142 …  selector below the shared one.

   Tokens:  ink #1C2126 · lime #F0FF45 · Archivo (loaded globally)
   Hero bg: /wp-content/uploads/2026/08/maverick-hero-bg-2.png
   Note: theme already centers #Subheader (subheader-both-center); love control
         is hidden globally (hide-love). Both rules kept as harmless safeguards.
   ========================================================================== */


/* 01 — LIMITED HERO HEADER (the "Blog" title bar / #Subheader) -------------
   Compact aviation hero band. The top/bottom padding is the ONE thing to
   eyeball in the live Customizer preview — nudge it to taste. */

body:is(.page-id-127, .page-id-142) #Subheader {
  position: relative;
  padding: 90px 0 70px !important;
  min-height: 0 !important;
  background: #0e2a2f
    url('https://maverickdata.io/wp-content/uploads/2026/08/maverick-hero-bg-2.png')
    center / cover no-repeat !important;
  background-attachment: scroll !important;
  overflow: hidden;
}

/* Dark overlay so white text stays readable over the image */
body:is(.page-id-127, .page-id-142) #Subheader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,23,26,.55), rgba(9,23,26,.82));
  z-index: 1;
}

body:is(.page-id-127, .page-id-142) #Subheader .container,
body:is(.page-id-127, .page-id-142) #Subheader .column {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* Page title */
body:is(.page-id-127, .page-id-142) #Subheader .title {
  color: #fff !important;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

/* Breadcrumbs — muted light */
body:is(.page-id-127, .page-id-142) #Subheader .breadcrumbs {
  float: none !important;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-size: .85rem;
}
body:is(.page-id-127, .page-id-142) #Subheader .breadcrumbs li,
body:is(.page-id-127, .page-id-142) #Subheader .breadcrumbs a,
body:is(.page-id-127, .page-id-142) #Subheader .breadcrumbs span {
  color: rgba(255,255,255,.72) !important;
}
body:is(.page-id-127, .page-id-142) #Subheader .breadcrumbs a:hover {
  color: #F0FF45 !important;
}


/* 02 — CONTENT CANVAS ------------------------------------------------------
   A whisper of grey behind the cards so white cards read as cards. */

body:is(.page-id-127, .page-id-142) #Content {
  background: #f7f8f9;
}


/* 03 — POST CARD -----------------------------------------------------------
   White card + hover lift. Primary target is BeTheme's Blog element
   (.post-item); .mfn-queryloop-item-wrapper is hedged in case the loop is
   a Query Loop element instead. */

body:is(.page-id-127, .page-id-142) .post-item,
body:is(.page-id-127, .page-id-142) .mfn-queryloop-item-wrapper {
  background: #fff;
  border: 1px solid rgba(28,33,38,.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(28,33,38,.04);
  transition: transform .25s ease, box-shadow .25s ease;
}
body:is(.page-id-127, .page-id-142) .post-item:hover,
body:is(.page-id-127, .page-id-142) .mfn-queryloop-item-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(28,33,38,.12);
}

/* Kill BeTheme's default frame/border/shadow on the inner article */
body:is(.page-id-127, .page-id-142) .post-item article,
body:is(.page-id-127, .page-id-142) .post-item .post {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}


/* 04 — FEATURED IMAGE ------------------------------------------------------
   Uniform aspect ratio + gentle zoom on hover. */

body:is(.page-id-127, .page-id-142) .post-item .image_frame,
body:is(.page-id-127, .page-id-142) .post-item .image_wrapper {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body:is(.page-id-127, .page-id-142) .post-item .image_wrapper img,
body:is(.page-id-127, .page-id-142) .post-item .image_frame img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  transition: transform .5s ease;
}
body:is(.page-id-127, .page-id-142) .post-item:hover .image_wrapper img,
body:is(.page-id-127, .page-id-142) .post-item:hover .image_frame img {
  transform: scale(1.05);
}
/* Hide the hover mask/overlay BeTheme lays over the image */
body:is(.page-id-127, .page-id-142) .post-item .image_wrapper .mask {
  display: none !important;
}


/* 05 — TEXT BLOCK PADDING --------------------------------------------------
   BeTheme puts the meta/title/excerpt in .desc_wrapper (or .post-desc). */

body:is(.page-id-127, .page-id-142) .post-item .desc_wrapper,
body:is(.page-id-127, .page-id-142) .post-item .post-desc {
  padding: 22px 24px 24px !important;
}


/* 06 — DATE / META ---------------------------------------------------------
   Small uppercase eyebrow in muted ink. */

body:is(.page-id-127, .page-id-142) .post-item .post-meta,
body:is(.page-id-127, .page-id-142) .post-item .date,
body:is(.page-id-127, .page-id-142) .post-item .date-box,
body:is(.page-id-127, .page-id-142) .post-item .post-date {
  color: #7a828c !important;
  font-family: 'Archivo', sans-serif;
  font-size: .72rem !important;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 10px !important;
  background: none !important;
  padding: 0 !important;
}
body:is(.page-id-127, .page-id-142) .post-item .post-meta a,
body:is(.page-id-127, .page-id-142) .post-item .post-meta span {
  color: #7a828c !important;
}


/* 07 — TITLE ---------------------------------------------------------------
   Ink title, Archivo, with a lime underline accent on hover. */

body:is(.page-id-127, .page-id-142) .post-item h3,
body:is(.page-id-127, .page-id-142) .post-item .post-title {
  font-family: 'Archivo', sans-serif;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 12px !important;
}
body:is(.page-id-127, .page-id-142) .post-item h3 a,
body:is(.page-id-127, .page-id-142) .post-item .post-title a {
  color: #1C2126 !important;
  text-decoration: none;
  transition: color .2s ease;
}
body:is(.page-id-127, .page-id-142) .post-item h3 a:hover,
body:is(.page-id-127, .page-id-142) .post-item .post-title a:hover {
  color: #1C2126 !important;
  text-decoration: underline;
  text-decoration-color: #F0FF45;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}


/* 08 — EXCERPT -------------------------------------------------------------
   Muted, readable, clamped to 3 lines so every card is the same height. */

body:is(.page-id-127, .page-id-142) .post-item .desc_wrapper p,
body:is(.page-id-127, .page-id-142) .post-item .post-desc p,
body:is(.page-id-127, .page-id-142) .post-item .desc {
  color: #5b6470 !important;
  font-size: .95rem;
  line-height: 1.6;
  margin: 0 0 16px !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* 09 — FOOTER: LIKES + READ MORE ------------------------------------------ */

body:is(.page-id-127, .page-id-142) .post-item .post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid rgba(28,33,38,.08);
}

/* Likes — quiet it down (usually already hidden via body.hide-love) */
body:is(.page-id-127, .page-id-142) .post-item .button-love,
body:is(.page-id-127, .page-id-142) .post-item .post-love,
body:is(.page-id-127, .page-id-142) .post-item .pf-love {
  font-size: .78rem !important;
  color: #9aa2ab !important;
}

/* Read more */
body:is(.page-id-127, .page-id-142) .post-item .read-more,
body:is(.page-id-127, .page-id-142) .post-item .post-footer a.button,
body:is(.page-id-127, .page-id-142) .post-item a.read-more {
  font-family: 'Archivo', sans-serif;
  font-size: .85rem !important;
  font-weight: 700 !important;
  color: #1C2126 !important;
  text-transform: none;
  letter-spacing: 0;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
body:is(.page-id-127, .page-id-142) .post-item .read-more::after,
body:is(.page-id-127, .page-id-142) .post-item a.read-more::after {
  content: " →";
  transition: margin-left .2s ease;
}
body:is(.page-id-127, .page-id-142) .post-item .read-more:hover::after,
body:is(.page-id-127, .page-id-142) .post-item a.read-more:hover::after {
  margin-left: 4px;
}

/* OPTIONAL — hide the likes control entirely:
body:is(.page-id-127, .page-id-142) .post-item .button-love,
body:is(.page-id-127, .page-id-142) .post-item .post-love,
body:is(.page-id-127, .page-id-142) .post-item .pf-love { display: none !important; }
*/


/* 10 — RESPONSIVE ---------------------------------------------------------- */

@media (max-width: 767px) {
  body:is(.page-id-127, .page-id-142) #Subheader {
    padding: 64px 0 44px !important;
  }
  body:is(.page-id-127, .page-id-142) .post-item .image_wrapper img,
  body:is(.page-id-127, .page-id-142) .post-item .image_frame img {
    height: 190px;
  }
}