/*
Theme Name: Merit Labs — Light (Wolmart Child)
Theme URI: https://merit-labs.com
Description: Merit Labs light-mode child theme, converted from the supplied MERITMANUS WordPress templates (design authority: inputs/manus/merit-labs-complete-package/wordpress-templates + design-system.md). Header/footer are template overrides (header.php / footer.php) using ml-* namespaced classes so the parent theme's chrome CSS never fights them. Brand tokens live in :root below.
Author: Client Site Factory
Template: wolmart
Version: 2.1.18
*/

/* ============================================================
   MERIT LABS BRAND TOKENS (from the supplied templates)
   ============================================================ */
:root,
html {
  --ml-field:        #FFFFFF;  /* page background            */
  --ml-field-warm:   #F8FAFC;  /* alternating band           */
  --ml-field-cool:   #F0F4F8;  /* hero gradients, pills      */
  --ml-chrome-bar:   #13202E;  /* compliance top bar         */
  --ml-chrome-foot:  #0A1420;  /* footer chrome              */
  --ml-ink:          #101C3A;  /* primary text               */
  --ml-ink-2:        #4A5B6E;  /* secondary text             */
  --ml-ink-muted:    #94A3B8;  /* metadata                   */
  --ml-ink-light:    #E8EEF4;  /* text on dark               */
  --ml-navy:         #22364B;  /* prices, dark accents       */
  --ml-navy-link:    #152C6B;  /* nav hover                  */
  --ml-cyan:         #00B4E4;  /* primary action + accents   */
  --ml-cyan-hover:   #009CC8;
  --ml-line:         #E2E8F0;  /* borders on light           */
  --ml-studio:       #a3b8cb;  /* product photo studio bg    */

  /* Map onto the parent theme's variable system */
  --wolmart-site-bg-color:       var(--ml-field);
  --wolmart-content-bg-color:    var(--ml-field);
  --wolmart-primary-color:       var(--ml-cyan);
  --wolmart-primary-color-hover: var(--ml-cyan-hover);
  --wolmart-dark-color:          var(--ml-ink);
  --wolmart-light-color:         var(--ml-ink-2);
  --wolmart-body-color:          var(--ml-ink-2);
  --wolmart-title-color:         var(--ml-ink);
  --wolmart-border-color:        var(--ml-line);
}

/* ============================================================
   LIGHT SURFACE — base
   ============================================================ */
body,
.page-wrapper,
#main,
.main-content,
.site-content {
  background-color: var(--ml-field);
  color: var(--ml-ink-2);
  font-family: 'DM Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--ml-ink);
  font-family: 'Sora', sans-serif;
}
a { color: var(--ml-ink-2); }
a:hover { color: var(--ml-cyan); }

/* ============================================================
   COMPLIANCE TOP BAR (rendered by header.php override)
   ============================================================ */
.ml-compliance-bar { background: var(--ml-chrome-bar); text-align: center; padding: 8px 20px; }
.ml-compliance-bar p { font-size: 10px; letter-spacing: .05em; color: var(--ml-ink-muted); margin: 0; }
@media (min-width: 768px) { .ml-compliance-bar p { font-size: 11px; } }

/* ============================================================
   HEADER — exact match to the locked React homepage
   (markup lives in header.php; ml-* namespace on purpose)
   ============================================================ */
.ml-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(195, 212, 226, 0.3);
}
.ml-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 96px;
  position: relative;
}
.ml-nav-left, .ml-nav-right { display: flex; align-items: center; gap: 28px; }
.ml-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ml-ink-2);
  transition: color .2s;
}
.ml-nav-link:hover { color: var(--ml-navy-link); }
.ml-nav-link.active { color: var(--ml-cyan); }
.ml-nav-link img { width: 20px; height: 20px; }
.ml-header-logo { position: absolute; left: 50%; transform: translateX(-50%); }
.ml-header-logo img { height: 80px; }
.ml-mobile-nav { display: none; align-items: center; gap: 16px; margin-left: auto; }
.ml-mobile-nav a { opacity: .8; transition: opacity .2s; }
.ml-mobile-nav a:hover { opacity: 1; }
.ml-mobile-nav img { width: 24px; height: 24px; }
@media (max-width: 767px) {
  .ml-nav-left, .ml-nav-right { display: none; }
  .ml-mobile-nav { display: flex; }
}

/* ============================================================
   TITLE BAR → the supplied page-header treatment
   ============================================================ */
.title-bar,
.page-title-bar {
  background: linear-gradient(to bottom, var(--ml-field-cool), #ffffff);
  padding: 48px 20px 64px;
  text-align: center;
  border: 0;
}
.title-bar .page-title,
.page-title-bar .page-title,
.title-bar h1 {
  font-family: 'Sora', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--ml-ink);
}
.title-bar .breadcrumb,
.breadcrumb {
  justify-content: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ml-ink-2);
}
.breadcrumb a { color: var(--ml-ink-2); }
@media (min-width: 768px) {
  .title-bar, .page-title-bar { padding: 64px 20px 80px; }
  .title-bar .page-title, .title-bar h1 { font-size: 40px; }
}

/* ============================================================
   WOO SHOP GRID → supplied product-card design
   ============================================================ */
.shop-content,
.products.grid-type,
ul.products { background: transparent; }

.product-wrap .product,
.products .product,
.product.product-classic {
  background: #fff;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.product-wrap .product:hover,
.products .product:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .1);
}
.product .product-media,
.product figure {
  background: var(--ml-studio);
  border-radius: 0;
}
.product .product-media img { transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.product:hover .product-media img { transform: scale(1.03); }

.product-name a,
.product-title a,
.woocommerce-loop-product__title {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ml-ink);
}
.product-name a:hover { color: var(--ml-cyan); }
.product-cat, .product-cat a {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ml-ink-muted);
}
.product-price, .price, .price ins, ins .amount, .woocommerce-Price-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--ml-navy);
}
del .amount, .product-price del { color: var(--ml-ink-muted); opacity: .65; }

/* Category tiles: light cards, image + label */
.product-category {
  background: #fff;
  border: 1px solid var(--ml-line);
  border-radius: 20px;
  overflow: hidden;
}
.product-category figure { background: var(--ml-field-cool); }
.product-category .category-name, .product-category h3 { color: var(--ml-ink); }

/* ============================================================
   BUTTONS — cyan primary from the supplied templates
   ============================================================ */
.btn-primary,
.button,
.button.alt,
button[type="submit"],
input[type="submit"],
.single_add_to_cart_button,
.checkout-button,
.woocommerce-button {
  background-color: var(--ml-cyan);
  border-color: var(--ml-cyan);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: 8px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.btn-primary:hover,
.button:hover,
.button.alt:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
  background-color: var(--ml-cyan-hover);
  border-color: var(--ml-cyan-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 180, 228, .25);
}

/* ============================================================
   SINGLE PRODUCT
   ============================================================ */
.product-single .product-title { font-family: 'Sora', sans-serif; color: var(--ml-ink); }
.product-single .woocommerce-product-gallery,
.product-single .product-gallery { background: var(--ml-studio); border-radius: 16px; overflow: hidden; }
.product-single .price { font-size: 22px; color: var(--ml-navy); }
.single-product div.product .woocommerce-tabs ul.tabs li a { color: var(--ml-ink-2); }
.single-product div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ml-cyan); }

/* Supplied product.html has no reviews, stars, or share row — hide Woo's */
.single-product .woocommerce-product-rating,
.single-product .product-single > .ratings-container,
.single-product .star-rating,
.single-product .social-icons,
.single-product .product-share,
.single-product .social-links,
.single-product .woocommerce-tabs #tab-title-reviews,
.single-product .woocommerce-tabs .reviews_tab,
.single-product .btn-compare,
body.single-product .product-single .product-links-wrapper > a.compare.btn-product-icon { display: none !important; }

/* "size" attribute select — 'Choose an option' stays default */
table.variations select,
.variations select {
  background: var(--ml-field-warm);
  border: 1px solid var(--ml-line);
  border-radius: 8px;
  color: var(--ml-ink);
  font-family: 'DM Sans', sans-serif;
}

/* Quantity control */
.quantity .qty {
  background: var(--ml-field-warm);
  border: 1px solid var(--ml-line);
  border-radius: 8px;
  color: var(--ml-ink);
  font-weight: 600;
}

/* ============================================================
   FORMS (cart / checkout / account) — light surfaces
   PLC rule: style only; never rename, hide, wrap, or duplicate
   checkout controls.
   ============================================================ */
input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="password"], input[type="number"],
select, textarea {
  background-color: #fff;
  border: 1px solid var(--ml-line);
  border-radius: 8px;
  color: var(--ml-ink);
  font-family: 'DM Sans', sans-serif;
}
::placeholder { color: var(--ml-ink-muted); opacity: .9; }

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation {
  background: var(--ml-field-warm);
  border: 1px solid var(--ml-line);
  border-radius: 12px;
}
.woocommerce-MyAccount-navigation ul li a { color: var(--ml-ink-2); }
.woocommerce-MyAccount-navigation ul li.is-active a { color: var(--ml-cyan); }

hr, .divider { border-color: var(--ml-line); }
.widget-title { color: var(--ml-ink); border-color: var(--ml-line); }

/* ============================================================
   FOOTER — exact match to the locked React homepage
   (markup lives in footer.php; ml-* namespace)
   ============================================================ */
.ml-footer { background: var(--ml-chrome-foot); color: var(--ml-ink-light); }
.ml-footer-main { max-width: 1152px; margin: 0 auto; padding: 56px 20px 40px; }
.ml-footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 768px) { .ml-footer-grid { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 32px; } }
.ml-footer-brand img { height: 56px; filter: brightness(0) invert(1); margin-bottom: 16px; }
.ml-footer-brand p { font-size: 14px; line-height: 1.7; opacity: .6; margin-bottom: 20px; color: inherit; }
.ml-footer-socials { display: flex; gap: 12px; }
.ml-footer-social {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s; color: var(--ml-ink-light);
}
.ml-footer-social:hover { background: rgba(0, 180, 228, .3); color: var(--ml-ink-light); }
.ml-footer-social svg { width: 14px; height: 14px; fill: currentColor; }
.ml-footer-social svg[fill="none"] { fill: none; } /* stroke-drawn icons (Instagram) must not get filled */
.ml-footer-col-header {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px; color: var(--ml-ink-light);
}
.ml-footer-col-header img { width: 16px; height: 16px; opacity: .7; }
.ml-footer-links { list-style: none; margin: 0; padding: 0; }
.ml-footer-links li { margin-bottom: 10px; }
.ml-footer-links a { font-size: 14px; opacity: .6; transition: all .2s; color: var(--ml-ink-light); }
.ml-footer-links a:hover { opacity: 1; color: var(--ml-cyan); }
.ml-footer-note { font-size: 14px; opacity: .6; }
.ml-footer-legal { border-top: 1px solid rgba(255, 255, 255, .08); padding: 24px 20px; }
.ml-footer-legal p { max-width: 896px; margin: 0 auto; font-size: 11px; line-height: 1.7; opacity: .4; text-align: center; color: inherit; }
.ml-footer-copyright { border-top: 1px solid rgba(255, 255, 255, .05); padding: 16px 20px; text-align: center; }
.ml-footer-copyright p { font-size: 11px; opacity: .35; margin: 0; color: inherit; }

/* ============================================================
   SHOP — match the supplied shop.html exactly
   ============================================================ */
/* Banned overlays (standing rule: nothing stamped on product photos)
   + fake-credibility noise (empty star rows) */
.product-label, .product-labels,
.products .woocommerce-product-rating,
.product-details .woocommerce-product-rating,
.products .star-rating,
.products .woocommerce-review-link { display: none !important; }

/* Supplied layout is full-width, no sidebar */
.woocommerce-shop .sidebar,
.post-type-archive-product .sidebar,
.tax-product_cat .sidebar,
.woocommerce-shop .shop-sidebar,
.post-type-archive-product .shop-sidebar,
.woocommerce-shop .left-sidebar,
.post-type-archive-product .sidebar-fixed { display: none !important; }
.woocommerce-shop .main-content,
.post-type-archive-product .main-content,
.tax-product_cat .main-content {
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Toolbar: keep sorting (supplied has it), drop count/view toggles + sidebar toggle */
.toolbox .toolbox-item.toolbox-show,
.toolbox .toolbox-item.toolbox-layout,
.toolbox .left-sidebar-toggle,
.toolbox .toolbox-item.select-menu-count,
.toolbox .toolbox-item.toolbox-grid,
.toolbox .toolbox-right { display: none !important; }
.toolbox { border-bottom: 1px solid var(--ml-line); }

/* ============================================================
   GROUND CONTROL FRONTEND TOUCHPOINTS — style only, mount
   divs provided by page content. GC code itself is LOCKED.
   ============================================================ */
#gc-affiliate-form, #gc-affiliate-portal, #gc-coa-library, #gc-email-capture {
  min-height: 40px;
}

/* ============================================================
   VIDEO HERO — About + Affiliates
   Same composition as the locked React homepage hero: full-bleed
   autoplay video, dark scrim, flared white arch cut from the bottom.
   ============================================================ */
.ml-vhero {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #0A1420;
  isolation: isolate;
}
.ml-vhero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Scrim: the source footage is bright, and white word art needs a floor
   under it. Graded from the top so the arch stays clean at the bottom. */
.ml-vhero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,20,32,.62) 0%, rgba(10,20,32,.42) 45%, rgba(10,20,32,.30) 100%);
}
.ml-vhero__inner {
  position: relative;
  z-index: 2;
  padding: 72px 20px 108px;
  max-width: 900px;
  margin: 0 auto;
}
/* The word art. One word, wide tracking, optical-size display weight. */
.ml-vhero__word {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 8vw, 92px);
  line-height: 1.02;
  letter-spacing: .04em;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 40px rgba(10, 20, 32, .55);
}
.ml-vhero__line {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .92);
  margin: 14px auto 0;
  max-width: 34ch;
  text-shadow: 0 1px 18px rgba(10, 20, 32, .6);
}
.ml-vhero__arch {
  position: absolute;
  bottom: -1px;              /* kill the hairline seam on fractional DPR */
  left: 0;
  width: 100%;
  height: 120px;
  display: block;
  z-index: 3;
  pointer-events: none;
}
@media (max-width: 767px) {
  .ml-vhero { min-height: 380px; }
  .ml-vhero__inner { padding: 56px 20px 88px; }
  .ml-vhero__arch { height: 64px; }
}
/* The video is decorative — a reader who asked for less motion gets the poster. */
@media (prefers-reduced-motion: reduce) {
  .ml-vhero__video { display: none; }
  .ml-vhero {
    background-image: var(--ml-vhero-poster);
    background-size: cover;
    background-position: center;
  }
}

/* ============================================================
   PAGE BLOCKS — the visual language that replaces walls of text
   ============================================================ */
.ml-has-vhero .page-content > .container,
.ml-has-vhero .entry-content { max-width: 100%; padding: 0; }

.ml-band { padding: 72px 20px; }
.ml-band--warm { background: var(--ml-field-warm); }
.ml-band--cool { background: var(--ml-field-cool); }
.ml-band__inner { max-width: 1100px; margin: 0 auto; }
.ml-band__inner--narrow { max-width: 760px; }

.ml-lead {
  font-family: 'Sora', sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ml-ink);
  text-align: center;
  margin: 0 auto;
  max-width: 22ch;
}
.ml-sub {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ml-ink-2);
  text-align: center;
  margin: 18px auto 0;
  max-width: 60ch;
}

/* Three-up value grid: icon plate, short title, one line. No paragraphs. */
.ml-tri {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 44px;
}
@media (min-width: 768px) { .ml-tri { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.ml-tri__card {
  background: #fff;
  border: 1px solid var(--ml-line);
  border-radius: 14px;
  padding: 30px 26px;
  text-align: center;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1);
}
.ml-tri__card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16,28,58,.08); }
.ml-tri__icon { width: 40px; height: 40px; margin: 0 auto 16px; display: block; opacity: .9; }
.ml-tri__t {
  font-family: 'Sora', sans-serif;
  font-size: 17px; font-weight: 600; color: var(--ml-ink); margin: 0 0 8px;
}
.ml-tri__d { font-size: 14.5px; line-height: 1.65; color: var(--ml-ink-2); margin: 0; }

/* Numbered steps — used ONLY where a real sequence exists (how it works). */
.ml-steps { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 40px; counter-reset: mlstep; }
@media (min-width: 768px) { .ml-steps { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
.ml-step { position: relative; padding: 28px 22px; background: #fff; border: 1px solid var(--ml-line); border-radius: 14px; }
.ml-step::before {
  counter-increment: mlstep;
  content: counter(mlstep);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: 14px;
  border-radius: 50%;
  background: var(--ml-cyan); color: #fff;
  font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700;
}
.ml-step__t { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 600; color: var(--ml-ink); margin: 0 0 6px; }
.ml-step__d { font-size: 14px; line-height: 1.6; color: var(--ml-ink-2); margin: 0; }

/* Big stat figures — carries the affiliate numbers without a paragraph. */


/* Closing CTA band */
.ml-cta { background: var(--ml-navy); color: #fff; padding: 68px 20px; text-align: center; }
.ml-cta h2 { font-family: 'Sora', sans-serif; font-size: clamp(24px, 3.4vw, 36px); color: #fff; margin: 0 0 14px; }
.ml-cta p { color: rgba(255,255,255,.82); font-size: 16px; margin: 0 auto 28px; max-width: 52ch; }
.ml-cta .ml-btn {
  display: inline-block; background: var(--ml-cyan); color: #fff;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .03em;
  padding: 15px 34px; border-radius: 8px; transition: all .3s cubic-bezier(.4,0,.2,1);
}
.ml-cta .ml-btn:hover { background: var(--ml-cyan-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,180,228,.3); }

/* About page 1799 ends on the full-bleed CTA. Remove only the parent theme's
   generic main-bottom spacer so the footer meets that final band. */
body.page-id-1799.ml-has-vhero main#main.main { padding-bottom: 0; }

/* Per-page hero tuning.
   Affiliates: Austin wants the WHOLE bottles visible, so the frame is used at
   full height (1440x816) and the hero is tall enough to hold it. The word art
   sits in the clear upper band above the caps; the arch takes the bottom. */
.ml-vhero--affiliates { min-height: 660px; }
.ml-vhero--affiliates .ml-vhero__inner { padding: 44px 20px 360px; }
.ml-vhero--affiliates .ml-vhero__video { object-position: center 42%; }
.ml-vhero--affiliates .ml-vhero__scrim {
  background: linear-gradient(180deg, rgba(10,20,32,.68) 0%, rgba(10,20,32,.34) 32%, rgba(10,20,32,.10) 100%);
}
@media (max-width: 767px) {
  .ml-vhero--affiliates { min-height: 470px; }
  .ml-vhero--affiliates .ml-vhero__inner { padding: 32px 20px 230px; }
}

/* Affiliates only: the white flare was cut for a white page. The next
   plate here is navy, and the theme still pads main by 30px — that is
   the leftover white strip. Recolor the flare to the plate and drop
   the spacer so blue meets the curve. Cards do not move. About stays
   white-on-white. */
.ml-vhero--affiliates .ml-vhero__arch path {
  fill: #101C3A;
}
body.page-id-1807.ml-has-vhero main#main.main,
body.page-affiliates.ml-has-vhero main#main.main {
  padding-top: 0;
}

/* ═══ AFFILIATE STAT BAND — premium plate, not bare numerals ════════════════
   Austin on the first version: "it looks fucking basic as hell". The fix is
   depth, not decoration: a real Envato texture plate (licensed to this site),
   the brand hex ghosted and CONTAINED per the motion law, glass cards, and
   numerals with an actual gradient. No stock icons — a beaker next to
   "15% commission" would be decoration for its own sake. */
.ml-statband {
  position: relative; overflow: hidden; overflow-x: clip; isolation: isolate;
  background: #101C3A; padding: 96px 20px;
}

.ml-statband__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('assets/img/statband-bg.webp') center/cover no-repeat;
  opacity: .85;
}
.ml-statband__bg::after {          /* keep the type floor dark wherever the plate is bright */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,28,58,.55), rgba(16,28,58,.78));
}
.ml-statband__hex {
  /* kept fully INSIDE the box: a motif that pokes past the section adds
     document scroll width even behind overflow:hidden in some layouts */
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 420px; height: 420px; z-index: 0; opacity: .06; pointer-events: none;
  background: url('assets/img/hex-mark.png') center/contain no-repeat;
  filter: brightness(0) invert(1);
}
.ml-statband__inner {
  position: relative; z-index: 1; max-width: 1060px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 18px;
}
@media (min-width: 768px) { .ml-statband__inner { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.ml-statcard {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px; padding: 40px 28px 34px; text-align: center;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 44px rgba(4,10,20,.38);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
}
.ml-statcard:hover { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(4,10,20,.46); }
.ml-statcard--lead { border-color: rgba(0,180,228,.5); box-shadow: 0 20px 50px rgba(0,180,228,.14); }
.ml-statcard__n {
  display: block; font-family: 'Sora', sans-serif; font-weight: 700; line-height: 1;
  font-size: clamp(42px, 5.4vw, 62px); letter-spacing: -.01em;
  background: linear-gradient(180deg, #FFFFFF 34%, #6FD2EE 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #fff;
}
.ml-statcard__r {                  /* the cyan rule that ties the card to the brand */
  display: block; width: 34px; height: 2px; margin: 18px auto 16px;
  background: linear-gradient(90deg, transparent, #00B4E4, transparent);
}
.ml-statcard__l {
  display: block; font-size: 13px; line-height: 1.6; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(232,238,244,.78);
}