/* mnav-polish-svc635.css
   Mobile menu polish. Three measured defects from the 390px render:
   1. "More services" heading renders unstyled on index.html (markup was h3, every
      rule targeted h4). Rules below target BOTH so the page cannot silently lose it again.
   2. Row heights in the More services grid ran 95 / 116 / 135 / 156 (61px spread).
   3. All 24 service tiles shared one byte identical background and a transparent
      border, so nothing read as a distinct card.
   Loads LAST. No palette additions: every colour here already exists in the system. */

/* ---------- 1. The section divider ---------- */
.nav__mobile.rdn-mnav .cc .cc__more {
  margin: 22px 0 0;
  padding: 0 4px 2px;
  border-top: 1px solid rgba(199, 208, 221, 0.13);
}

.nav__mobile.rdn-mnav .cc .cc__more > h3,
.nav__mobile.rdn-mnav .cc .cc__more > h4 {
  font-family: Satoshi, system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #8a94a6 !important;      /* 5.66:1 on #0d1b2e, AA pass */
  margin: 18px 4px 14px !important;
}

/* ---------- 2. Even rows, no truncation ---------- */
/* A common baseline lifts the short cards without inflating every card to the
   height of the tallest one. Items inside a row already stretch to match, so
   this only closes the dead space at the bottom of the shortest tiles. */
.nav__mobile.rdn-mnav .cc .cc__grid--sm > .tile--sm {
  min-height: 118px;
}

/* Balance the wrap so short subtitles stop orphaning a single word
   ("agri", "& inlet"). Nothing is clipped or hidden. */
.nav__mobile.rdn-mnav .cc .cc__grid--sm .tile__t,
.nav__mobile.rdn-mnav .cc .cc__grid--sm .tile__p {
  text-wrap: balance;
}

/* ---------- 3. Real card separation ---------- */
/* Each tile gets a hairline in its OWN accent, so the 24 cards read as distinct
   objects and each service keeps its identity. Fallback border first for any
   engine without color-mix. */
.nav__mobile.rdn-mnav .cc .cc__grid--sm > .tile--sm {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
    linear-gradient(180deg, rgba(13, 27, 46, 0.55), rgba(10, 21, 38, 0.55));
  border: 1px solid rgba(199, 208, 221, 0.14);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(8, 17, 39, 0.4);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

@supports (border-color: color-mix(in srgb, #fff 20%, transparent)) {
  .nav__mobile.rdn-mnav .cc .cc__grid--sm > .tile--sm {
    border-color: color-mix(in srgb, var(--tile-fg, #f5a524) 26%, transparent);
  }
}

/* The icon chip picks up the same accent, so the card edge and the icon agree. */
.nav__mobile.rdn-mnav .cc .cc__grid--sm > .tile--sm .tile__ic {
  border-color: rgba(199, 208, 221, 0.22);
}

@supports (border-color: color-mix(in srgb, #fff 20%, transparent)) {
  .nav__mobile.rdn-mnav .cc .cc__grid--sm > .tile--sm .tile__ic {
    background: color-mix(in srgb, var(--tile-fg, #f5a524) 12%, transparent);
    border-color: color-mix(in srgb, var(--tile-fg, #f5a524) 34%, transparent);
  }
}

@media (hover: hover) {
  .nav__mobile.rdn-mnav .cc .cc__grid--sm > .tile--sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(8, 17, 39, 0.55);
  }
  @supports (border-color: color-mix(in srgb, #fff 20%, transparent)) {
    .nav__mobile.rdn-mnav .cc .cc__grid--sm > .tile--sm:hover {
      border-color: color-mix(in srgb, var(--tile-fg, #f5a524) 55%, transparent);
    }
  }
}

.nav__mobile.rdn-mnav .cc .cc__grid--sm > .tile--sm:active {
  transform: translateY(0);
}

/* tile--smart never declared an accent and silently inherited the fallback.
   Declared explicitly with a value already in the palette. */
.nav__mobile.rdn-mnav .cc .tile--smart {
  --tile-fg: #f7b23a;
}

@media (prefers-reduced-motion: reduce) {
  .nav__mobile.rdn-mnav .cc .cc__grid--sm > .tile--sm {
    transition: none;
  }
  .nav__mobile.rdn-mnav .cc .cc__grid--sm > .tile--sm:hover {
    transform: none;
  }
}