/* ==========================================================================
   MetalMitra design system + effects (Phase 1, 2026-11 upgrade)
   Loaded after main.css / redesign.css / site.css. Restyles the existing HTML
   through its existing classes; effects are driven by /assets/js/mm-effects.js.
   ========================================================================== */

/* Montserrat (headings) — self-hosted, @fontsource-variable/montserrat 5.2.6, OFL */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/montserrat-latin-var.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- Tokens */
:root {
  --mm-navy: #0b1f3a;
  --mm-navy-900: #08172c;
  --mm-blue: #1e4e8c;
  --mm-amber: #f2a900;
  --mm-amber-hover: #db9900;

  --brand-navy: var(--mm-navy);
  --violet: var(--mm-navy);
  --primary: var(--mm-blue);
  --primary-hover: #173d6e;
  --primary-soft: #e6edf6;
  --mm-orange: var(--mm-amber);
  --brand-orange: var(--mm-amber);
  --mm-accent: var(--mm-amber);
  --mm-accent-hover: var(--mm-amber-hover);
  --mm-accent-ink: var(--mm-blue); /* accent used as text on light backgrounds */
  --mm-focus: var(--mm-blue);

  --text: #1a1a1a;
  --text-secondary: #5b6573;
  --border: #e3e7ed;
  --border-strong: #cfd6df;
  --bg: #ffffff;
  --surface: #f5f7fa;
  --mm-steel-100: #f5f7fa;
  --mm-steel-200: #e3e7ed;

  --gradient: linear-gradient(90deg, #1e4e8c 0%, #0b1f3a 55%, #f2a900 100%);
  --gradient-diag: linear-gradient(135deg, #1e4e8c 0%, #0b1f3a 55%, #f2a900 100%);

  --font-heading: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --container: 1240px;
  --container-wide: 1240px;
  --section-pad: 64px;

  --mm-radius-btn: 6px;
  --mm-radius-card: 10px;
  --mm-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mm-card-shadow: 0 1px 2px rgba(11, 31, 58, 0.05);
  --mm-card-shadow-hover: 0 4px 10px rgba(11, 31, 58, 0.06), 0 18px 40px -18px rgba(11, 31, 58, 0.28);
}
@media (min-width: 1024px) {
  :root {
    --section-pad: 110px;
  }
}

/* ------------------------------------------------------------ Typography */
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
}
h1 {
  font-weight: 800;
}
h2 {
  font-weight: 700;
}
h3,
h4 {
  font-weight: 600;
}
/* Hero headline and section kickers are uppercase */
.hp-hero h1 {
  text-transform: uppercase;
  font-size: clamp(2.125rem, 1.2rem + 3.4vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.mm-eyebrow,
.hp-kicker,
.eyebrow,
.hp-clients-title {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
@media (max-width: 599px) {
  .hp-kicker {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }
}

/* --------------------------------------------------------------- Buttons */
.btn {
  border-radius: var(--mm-radius-btn);
  font-weight: 600;
}
.btn-primary::before {
  display: none;
}
.btn-primary,
.btn-accent,
.header-cta.btn-primary,
.mm-feature .btn-primary {
  background: var(--mm-amber);
  color: var(--mm-navy);
  border-color: var(--mm-amber);
  box-shadow: 0 1px 2px rgba(11, 31, 58, 0.12), 0 10px 22px -14px rgba(242, 169, 0, 0.9);
}
.btn-primary:hover,
.btn-accent:hover,
.header-cta.btn-primary:hover,
.mm-feature .btn-primary:hover {
  background: var(--mm-amber-hover);
  border-color: var(--mm-amber-hover);
  color: var(--mm-navy);
}
.btn-primary:focus-visible {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--mm-blue);
}
.btn-secondary {
  background: transparent;
  color: var(--mm-navy);
  border: 1.5px solid var(--mm-navy);
  box-shadow: none;
}
.btn-secondary:hover {
  background: var(--mm-navy);
  border-color: var(--mm-navy);
  color: #fff;
}
/* White outline on dark backgrounds */
.is-dark .btn-secondary,
.btn-on-dark,
.hp-btn-ghost,
.is-dark .btn-glass {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.is-dark .btn-secondary:hover,
.btn-on-dark:hover,
.hp-btn-ghost:hover,
.is-dark .btn-glass:hover {
  background: #fff;
  border-color: #fff;
  color: var(--mm-navy);
}
/* Arrow slides right on hover */
.btn .icon-arrow,
.mm-card-more .icon,
.hp-path-link .icon,
.link-arrow .icon,
.cl-link .icon {
  transition: transform 0.3s var(--mm-ease-out);
}
.btn:hover .icon-arrow,
.mm-card:hover .mm-card-more .icon,
.hp-path:hover .hp-path-link .icon,
.link-arrow:hover .icon,
.cl-link:hover .icon,
.post-card:hover .post-card-foot .icon {
  transform: translateX(5px);
}
/* Text on amber surfaces */
.mm-plan-flag,
.hp-board-steps li > span,
.sp-type input:checked + .sp-type-box .sp-type-icon {
  color: var(--mm-navy);
}

/* ----------------------------------------------------------------- Cards */
.mm-card,
.post-card,
.hp-path,
.hp-soft-card,
.mm-cat,
.hp-cat,
.ind-card,
.hub-tile,
.cl-grid > li,
.hp-quote {
  border-radius: var(--mm-radius-card);
}
.mm-card,
.post-card,
.hp-path,
.hp-soft-card,
.ind-card,
.cl-grid > li {
  border: 1px solid var(--border);
  background-color: #fff;
  box-shadow: var(--mm-card-shadow);
  transition: transform 0.35s var(--mm-ease-out), box-shadow 0.35s var(--mm-ease-out), border-color 0.35s var(--mm-ease-out);
}
.mm-bento .mm-card.is-large {
  background-color: var(--mm-navy);
  border-color: var(--mm-navy);
}
@media (hover: hover) {
  .mm-card:hover,
  .post-card:hover,
  .hp-path:hover,
  .hp-soft-card:hover,
  .ind-card:hover,
  .cl-grid > li:hover {
    transform: translateY(-6px);
    box-shadow: var(--mm-card-shadow-hover);
    border-color: var(--border-strong);
  }
}
/* Inner image zoom */
.post-card-cover,
.mm-product-img,
.hp-soft-shot,
.cl-shot,
.hp-client-shot {
  overflow: hidden;
}
.post-card-cover img,
.post-card-cover .post-cover-art,
.mm-product-img img,
.hp-soft-shot img,
.cl-shot img,
.hp-client-shot img {
  transition: transform 0.6s var(--mm-ease-out);
}
@media (hover: hover) {
  .post-card:hover .post-card-cover img,
  .post-card:hover .post-card-cover .post-cover-art,
  .mm-product:hover .mm-product-img img,
  .hp-soft-card:hover .hp-soft-shot img,
  .cl-grid > li:hover .cl-shot img,
  .hp-client:hover .hp-client-shot img {
    transform: scale(1.06);
  }
}

/* ------------------------------------------------- Category / sector tiles */
.hp-cat,
.mm-cat,
.hub-tile {
  transition: transform 0.35s var(--mm-ease-out), box-shadow 0.35s var(--mm-ease-out), border-color 0.35s var(--mm-ease-out),
    background-color 0.35s var(--mm-ease-out);
}
.hp-cat-icon,
.mm-cat .mm-card-icon,
.ind-card .icon,
.hub-tile .icon,
.hp-cat-text strong,
.mm-cat h3 {
  transition: transform 0.6s var(--mm-ease-out), color 0.3s ease, background-color 0.3s ease;
}
@media (hover: hover) {
  .hp-cat:hover,
  .mm-cat:hover,
  .hub-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--mm-card-shadow-hover);
  }
  .hp-cat:hover .hp-cat-icon,
  .mm-cat:hover .mm-card-icon,
  .ind-card:hover .icon,
  .hub-tile:hover .icon {
    transform: scale(1.08);
  }
  .hp-cat:hover .hp-cat-text strong,
  .mm-cat:hover h3 {
    transform: translateY(-3px);
  }
}
/* Tiles with a photo (category images, Phase 3): zoom + dark overlay + title up */
.mm-tile-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}
.mm-tile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--mm-ease-out);
}
.mm-tile-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 31, 58, 0.1) 20%, rgba(11, 31, 58, 0.82) 100%);
  transition: opacity 0.6s var(--mm-ease-out);
}
:hover > .mm-tile-img img {
  transform: scale(1.08);
}

/* ---------------------------------------------------------------- Header */
.mm-header .header-inner {
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
  transition: height 0.3s var(--mm-ease-out);
}
.site-header.mm-header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, -webkit-backdrop-filter 0.3s ease,
    backdrop-filter 0.3s ease;
}
.site-header.mm-header.mm-solid {
  background: #fff;
  border-bottom-color: var(--border);
  box-shadow: 0 6px 24px -12px rgba(11, 31, 58, 0.25);
}
@media (min-width: 1024px) {
  .mm-header.mm-solid .header-inner {
    height: 64px;
  }
}
/* Transparent over a dark hero (home, sourcing board, growth pages). Before mm-effects
   runs this follows main.js' .is-scrolled; afterwards it follows .mm-solid (80px). */
html.js body:has(main > .is-dark:first-child) .mm-header:not(.is-scrolled):not(:has(.is-open)),
html.mm-fx body:has(main > .is-dark:first-child) .mm-header:not(.mm-solid):not(:has(.is-open)) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:is(html.js body:has(main > .is-dark:first-child) .mm-header:not(.is-scrolled):not(:has(.is-open)),
  html.mm-fx body:has(main > .is-dark:first-child) .mm-header:not(.mm-solid):not(:has(.is-open)))
  :is(.mm-nav-btn, .header-login, .menu-toggle) {
  color: #fff;
}
:is(html.js body:has(main > .is-dark:first-child) .mm-header:not(.is-scrolled):not(:has(.is-open)),
  html.mm-fx body:has(main > .is-dark:first-child) .mm-header:not(.mm-solid):not(:has(.is-open)))
  .menu-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
}
:is(html.js body:has(main > .is-dark:first-child) .mm-header:not(.is-scrolled):not(:has(.is-open)),
  html.mm-fx body:has(main > .is-dark:first-child) .mm-header:not(.mm-solid):not(:has(.is-open)))
  .brand {
  background: url('/assets/brand/logo-horizontal-light-362.webp') no-repeat left center;
  background-origin: content-box;
  background-clip: content-box;
  background-size: contain;
}
:is(html.js body:has(main > .is-dark:first-child) .mm-header:not(.is-scrolled):not(:has(.is-open)),
  html.mm-fx body:has(main > .is-dark:first-child) .mm-header:not(.mm-solid):not(:has(.is-open)))
  .brand img {
  opacity: 0;
}
.mm-header .brand img {
  object-fit: contain;
  object-position: left center;
  transition: opacity 0.3s ease;
}

/* Logo: one-time reveal on the first page of a visit (server sets html.nav-intro) */
@keyframes mm-logo-in {
  from {
    clip-path: inset(0 100% 0 0);
    transform: translateX(-6px);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}
html.nav-intro .mm-header .brand {
  animation: mm-logo-in 1s var(--mm-ease-out) 0.1s both;
}

/* Mega menu: fade + slide down (200ms), thumbnails lift */
.mm-panel {
  transform: translateY(-12px);
  transition: opacity 0.2s var(--mm-ease-out), transform 0.2s var(--mm-ease-out);
}
.mm-link {
  transition: background-color 0.2s ease, transform 0.25s var(--mm-ease-out);
}
.mm-link .product-mark,
.mm-link-icon {
  transition: transform 0.25s var(--mm-ease-out), box-shadow 0.25s var(--mm-ease-out);
}
@media (hover: hover) {
  .mm-link:hover {
    transform: translateX(2px);
  }
  .mm-link:hover .product-mark,
  .mm-link:hover .mm-link-icon {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px -8px rgba(11, 31, 58, 0.35);
  }
}

/* ------------------------------------------------- Mobile menu (full screen) */
.mm-drawer-overlay {
  background: var(--mm-navy);
}
.mm-drawer-sheet {
  width: 100%;
  background: var(--mm-navy);
  color: #fff;
  box-shadow: none;
  transform: none;
  opacity: 0;
  transition: opacity 0.3s var(--mm-ease-out);
}
.mobile-menu.mm-drawer.is-open .mm-drawer-sheet {
  opacity: 1;
}
.mm-drawer .brand {
  background: url('/assets/brand/logo-horizontal-light-362.webp') no-repeat left center;
  background-origin: content-box;
  background-clip: content-box;
  background-size: contain;
}
.mm-drawer .brand img {
  opacity: 0;
}
.mm-drawer .menu-toggle.mm-drawer-close {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.mm-drawer .mm-drawer-close .icon {
  width: 28px;
  height: 28px;
}
.mm-drawer .mm-acc {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.mm-drawer .mm-acc-btn {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  padding-block: 18px;
}
.mm-drawer .mm-acc-link,
.mm-drawer .mm-view-all,
.mm-drawer .mail {
  color: rgba(255, 255, 255, 0.86);
}
.mm-drawer .mm-col-title {
  color: rgba(255, 255, 255, 0.55);
}
/* redesign.css styles these links for the old white sheet with a stronger selector (dark text) */
.mobile-menu.mm-drawer nav a.mm-acc-link,
.mm-drawer .mobile-menu-foot a.mail {
  color: rgba(255, 255, 255, 0.9);
}
.mobile-menu.mm-drawer nav a.mm-view-all,
.mobile-menu.mm-drawer nav a[aria-current='page'] {
  color: var(--mm-amber);
}
.mobile-menu.mm-drawer nav a.mm-acc-link:hover,
.mm-drawer .mobile-menu-foot a.mail:hover {
  color: #fff;
}
.mm-drawer .mm-acc-btn .mm-caret,
.mobile-menu.mm-drawer nav a .icon {
  color: rgba(255, 255, 255, 0.8);
}
.mm-drawer :focus-visible {
  outline-color: var(--mm-amber);
}
.mm-drawer .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}
.mm-drawer .btn-secondary:hover {
  background: #fff;
  color: var(--mm-navy);
}
/* Staggered slide-in */
.mm-drawer .mm-acc,
.mm-drawer .mobile-menu-foot > * {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.45s var(--mm-ease-out), transform 0.45s var(--mm-ease-out);
}
.mm-drawer.is-open .mm-acc,
.mm-drawer.is-open .mobile-menu-foot > * {
  opacity: 1;
  transform: none;
}
.mm-drawer.is-open .mm-acc:nth-child(1) { transition-delay: 0.08s; }
.mm-drawer.is-open .mm-acc:nth-child(2) { transition-delay: 0.14s; }
.mm-drawer.is-open .mm-acc:nth-child(3) { transition-delay: 0.2s; }
.mm-drawer.is-open .mm-acc:nth-child(4) { transition-delay: 0.26s; }
.mm-drawer.is-open .mm-acc:nth-child(5) { transition-delay: 0.32s; }
.mm-drawer.is-open .mobile-menu-foot > :nth-child(1) { transition-delay: 0.36s; }
.mm-drawer.is-open .mobile-menu-foot > :nth-child(2) { transition-delay: 0.42s; }
.mm-drawer.is-open .mobile-menu-foot > :nth-child(3) { transition-delay: 0.48s; }

/* ------------------------------------------------------------------ Hero */
.hp-hero {
  position: relative;
  isolation: isolate;
  background-color: var(--mm-navy);
}
/* Dark gradient overlay over hero images (only when images exist) */
.hp-hero:has(.mm-hero-media)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(8, 23, 44, 0.94) 0%, rgba(11, 31, 58, 0.82) 45%, rgba(11, 31, 58, 0.55) 100%);
  pointer-events: none;
}
@media (min-width: 1024px) {
  .hp-hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
/* Image crossfade (6s) + Ken Burns. Renders only when hero images are set. */
.mm-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.mm-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.mm-hero-media img.is-active {
  opacity: 1;
  animation: mm-kenburns 9s linear both;
}
@keyframes mm-kenburns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.12);
  }
}
/* Headline word reveal + content fade-up. Hidden only while JS is about to run;
   the fallback animation shows everything after 1.5s if the script never arrives. */
@keyframes mm-unhide {
  to {
    visibility: visible;
    opacity: 1;
  }
}
/* The lead paragraph is never hidden (it is the page's largest text, so it paints at once — LCP);
   it only slides up. */
html.js:not(.mm-fx-done) .hp-hero [data-split]:not(.is-split),
html.js:not(.mm-fx-done) .hp-hero :is(.hp-kicker, .hp-ctas, .hp-assure, .hp-board) {
  visibility: hidden;
  animation: mm-unhide 0s 1.5s forwards;
}
/* Hero reveal (Phase 5: CSS instead of GSAP): kicker, words one by one, lead, CTAs, board. */
@keyframes mm-fade-up {
  from {
    opacity: 0;
    transform: translateY(var(--mm-up, 24px));
  }
}
@keyframes mm-slide-up {
  from {
    transform: translateY(24px);
  }
}
.mm-hero-go :is(.hp-kicker, .mm-w, .hp-ctas, .hp-assure, .hp-board) {
  animation: mm-fade-up 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.mm-hero-go .mm-w {
  --mm-up: 0.45em;
  animation-duration: 0.7s;
  animation-delay: calc(0.25s + var(--i, 0) * 0.06s);
}
.mm-hero-go .hp-lead {
  animation: mm-slide-up 0.6s 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.mm-hero-go :is(.hp-ctas, .hp-assure) {
  animation-delay: calc(0.75s + var(--i, 0) * 0.1s);
}
.mm-hero-go .hp-board {
  animation-duration: 0.8s;
  animation-delay: 0.85s;
}
.mm-w {
  display: inline-block;
}
/* Scroll-down indicator */
.mm-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 1;
  display: none;
  place-items: center;
  width: 30px;
  height: 48px;
  margin-left: -15px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
}
.mm-scroll-cue:hover {
  border-color: #fff;
}
.mm-scroll-cue::before {
  content: '';
  width: 4px;
  height: 9px;
  border-radius: 2px;
  background: var(--mm-amber);
  animation: mm-cue 1.8s var(--mm-ease-out) infinite;
}
@keyframes mm-cue {
  0% {
    transform: translateY(-8px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}
@media (min-width: 1024px) and (min-height: 760px) {
  .mm-scroll-cue {
    display: grid;
  }
}

/* -------------------------------------------- Inner page banners (dark) */
.mm-page-hero.is-dark {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media (min-width: 1024px) {
  .mm-page-hero.is-dark {
    min-height: 50vh;
  }
}

/* ------------------------------------------------------ Clients / logos */
.client-logo img {
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter 0.4s ease, opacity 0.4s ease;
}
.hp-client:hover .client-logo img,
.cl-grid > li:hover .client-logo img,
.mm-marquee li:hover .client-logo img {
  filter: none;
  opacity: 1;
}
/* Infinite marquee (switched on by JS only when there are 6+ clients) */
.mm-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mm-marquee > ul {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: var(--space-3);
  animation: mm-marquee var(--mm-marquee-dur, 40s) linear infinite;
}
.mm-marquee > ul > li {
  flex: 0 0 auto;
  width: 280px;
}
.mm-marquee:hover > ul {
  animation-play-state: paused;
}
@keyframes mm-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------- Parallax */
.hp-final-card,
.mm-banner,
.cta-panel {
  background-size: 100% 140%;
  background-position: center var(--mm-py, 50%);
}

/* ---------------------------------------------- "Associated services" slider */
.mm-svc-slider {
  position: relative;
}
.mm-svc-swiper {
  display: none;
}
.mm-svc-slider.is-ready .mm-svc-swiper {
  display: block;
}
.mm-svc-slider.is-ready > :not(.mm-svc-swiper) {
  display: none;
}
/* Swiper core layout (its own CSS is not loaded: it embeds a data: font our CSP blocks) */
.mm-svc-swiper .swiper {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}
.mm-svc-swiper .swiper-wrapper {
  position: relative;
  display: flex;
  box-sizing: content-box;
  transition-property: transform;
  transition-timing-function: ease;
}
.mm-svc-swiper .swiper-slide {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: auto;
}
.mm-svc-swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  z-index: -1000;
}
.mm-svc-slide {
  display: grid;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--mm-radius-card);
  background: #fff;
}
@media (min-width: 900px) {
  .mm-svc-slide {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    min-height: 440px;
  }
}
.mm-svc-visual {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 220px;
  overflow: hidden;
  background: radial-gradient(70% 90% at 30% 20%, #1e4e8c 0%, transparent 70%), var(--mm-navy);
  color: var(--mm-amber);
}
.mm-svc-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mm-svc-visual .icon {
  width: clamp(72px, 9vw, 128px);
  height: clamp(72px, 9vw, 128px);
  stroke-width: 1.25;
  transform: scale(0.9);
  transition: transform 6s linear;
}
.swiper-slide-active .mm-svc-visual .icon {
  transform: scale(1.06);
}
.mm-svc-visual .mm-blueprint {
  z-index: -1;
}
.mm-svc-num {
  position: absolute;
  left: 24px;
  bottom: 16px;
  font-family: var(--font-heading);
  font-size: clamp(3rem, 2rem + 4vw, 6rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.08);
}
.mm-svc-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: clamp(24px, 4vw, 56px);
}
.mm-svc-body h3 {
  margin: 0;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
}
.mm-svc-body h3 a {
  color: inherit;
}
.mm-svc-body p {
  margin: 0;
  color: var(--text-secondary);
}
.mm-svc-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: var(--space-3);
}
@media (max-width: 599px) {
  /* keep the arrows clear of the floating WhatsApp button */
  .mm-svc-bar {
    padding-right: 76px;
  }
}
.mm-svc-count {
  font-family: var(--font-heading);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mm-navy);
  min-width: 5.5ch;
}
.mm-svc-count span {
  color: var(--text-secondary);
  font-weight: 500;
}
.mm-svc-progress {
  flex: 1;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--border);
}
.mm-svc-progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--mm-amber);
  transform: scaleX(0);
  transform-origin: left;
}
.mm-svc-arrows {
  display: flex;
  gap: 8px;
}
.mm-svc-arrows button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--mm-navy);
  border-radius: var(--mm-radius-btn);
  background: transparent;
  color: var(--mm-navy);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mm-svc-arrows button:hover {
  background: var(--mm-navy);
  color: #fff;
}
.mm-svc-arrows .icon {
  width: 20px;
  height: 20px;
}
.mm-svc-arrows .is-prev .icon {
  transform: rotate(180deg);
}

/* --------------------------------------------------------- Blog tables */
.article-body table {
  border: 1px solid var(--border);
  border-radius: var(--mm-radius-card);
}
.article-body th {
  background: var(--mm-navy);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  text-align: left;
}
.article-body tbody tr:nth-child(even) td {
  background: var(--surface);
}
.article-body td,
.article-body th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

/* ----------------------------------------------------------- Scroll reveal */
/* Legacy .reveal items in the first section (hero) show at once: they are often the page's
   largest text, and hiding them until main.js runs delays LCP. */
.js main > section:first-child .reveal {
  opacity: 1;
  transform: none;
}
html.mm-fx .mm-rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
html.mm-fx .mm-rv.mm-rv-in {
  opacity: 1;
  transform: none;
}
/* Parallax layers are taller than their section so moving them never shows an edge */
.hp-hero > .mm-blueprint,
.hp-grow > .mm-blueprint,
.mm-page-hero.is-dark > .mm-blueprint {
  inset: -12% 0;
}

/* ------------------------------------------------------------ Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html.nav-intro .mm-header .brand,
  .mm-hero-media img.is-active,
  .mm-scroll-cue::before,
  .mm-marquee > ul {
    animation: none;
  }
  html.js:not(.mm-fx-done) .hp-hero [data-split]:not(.is-split),
  html.js:not(.mm-fx-done) .hp-hero :is(.hp-kicker, .hp-ctas, .hp-assure, .hp-board) {
    visibility: visible;
    animation: none;
  }
  html.mm-fx .mm-rv {
    opacity: 1;
    transform: none;
  }
  .mm-drawer .mm-acc,
  .mm-drawer .mobile-menu-foot > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mm-card,
  .post-card,
  .hp-path,
  .hp-soft-card,
  .hp-cat,
  .mm-cat,
  .ind-card,
  .cl-grid > li,
  .post-card-cover img,
  .hp-soft-shot img,
  .cl-shot img,
  .hp-client-shot img {
    transition: none;
  }
}

/* Two- and four-column variants of the existing .mm-grid */
@media (min-width: 768px) {
  .mm-grid-2,
  .mm-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .mm-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ------------------------------------------------ Phase 3: catalogue pages */
.mm-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.mm-thumbs button { width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #f1f4f8; cursor: pointer; }
.mm-thumbs button.is-active, .mm-thumbs button:focus-visible { border-color: var(--mm-accent); }
.mm-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.is-zoomable { cursor: zoom-in; }
.mm-lightbox { max-width: min(1200px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: 10px; background: #0b1f3a; }
.mm-lightbox::backdrop { background: rgba(5, 14, 28, 0.82); }
.mm-lightbox img { display: block; max-width: 100%; max-height: 92vh; object-fit: contain; }
.mm-lightbox-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; color: #fff; background: rgba(11, 31, 58, 0.7); cursor: pointer; display: grid; place-items: center; }
.mm-grade-tables { margin: 0 0 24px; }
.mm-grade-tables caption { caption-side: top; text-align: left; font-weight: 700; color: var(--mm-navy, #0b1f3a); padding: 0 0 8px; }
.mm-chem-table th, .mm-chem-table td { text-align: center; white-space: nowrap; }
.mm-chem-table thead th { background: var(--mm-navy, #0b1f3a); color: #fff; }
.mm-grade-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 0 0 32px; padding: 0; list-style: none; }
.mm-grade-link { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 14px 16px; border: 1px solid #e3e8ef; border-radius: 10px; background: #fff; color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.mm-grade-link:hover { border-color: var(--mm-accent); transform: translateY(-2px); }
.mm-grade-link small { color: #5b6b80; }
.mp-specs + .mp-specs { margin-top: 32px; }
.mm-sticky-quote { display: none; }
@media (max-width: 760px) {
  .mm-sticky-quote { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); padding-right: 88px; background: #fff; box-shadow: 0 -8px 24px -12px rgba(11, 31, 58, 0.35); transform: translateY(110%); transition: transform .25s ease; }
  .mm-sticky-quote.is-on { transform: none; }
  .mm-sticky-quote span { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mm-sticky-quote .btn { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .mm-sticky-quote { transition: none; } }

/* Phase 4: sourcing board filters (category, origin, delivery, Incoterm, search) */
@media (max-width: 639px) {
  .sb-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-search > .input, .sb-search > .combo, .sb-search > .btn { grid-column: 1 / -1; }
}
@media (min-width: 640px) {
  .sb-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-search > .btn, .sb-search > .combo { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .sb-filters { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  .sb-search { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr) auto; }
  .sb-search > .btn, .sb-search > .combo { grid-column: auto; }
}

/* ==========================================================================
   Phase 1b (2026-10-30): lighter, photo-led look — glwt.com.au as reference only.
   Own photos in /assets/photos (generated for MetalMitra). Dark navy blocks become
   photo banners or light sections; image zoom is slow (1.5s) like the reference.
   ========================================================================== */
:root {
  --mm-zoom-ease: cubic-bezier(0.4, 0, 0, 1);
  --mm-zoom-dur: 1.5s;
  --surface: #f6f7f9;
  --mm-steel-100: #f6f7f9;
  --mm-photo: url('/assets/photos/hero-pipes-1920.webp');
}
@media (max-width: 960px) {
  :root { --mm-photo: url('/assets/photos/hero-pipes-960.webp'); }
}
.section-alt { background-color: var(--surface); }

/* Photos for banners (data-photo on the section) */
[data-photo='port'] { --mm-photo: url('/assets/photos/hero-port-1920.webp'); }
[data-photo='office'] { --mm-photo: url('/assets/photos/office-1920.webp'); }
[data-photo='pipes'] { --mm-photo: url('/assets/photos/hero-pipes-1920.webp'); }
[data-photo='flanges-fittings'] { --mm-photo: url('/assets/photos/hero-flanges-1920.webp'); }
@media (max-width: 960px) {
  [data-photo='port'] { --mm-photo: url('/assets/photos/hero-port-960.webp'); }
  [data-photo='office'] { --mm-photo: url('/assets/photos/office-960.webp'); }
  [data-photo='pipes'] { --mm-photo: url('/assets/photos/hero-pipes-960.webp'); }
  [data-photo='flanges-fittings'] { --mm-photo: url('/assets/photos/hero-flanges-960.webp'); }
}
[data-photo='steel-alloys'] { --mm-photo: url('/assets/photos/cat-steel-alloys-900.webp'); }
[data-photo='pipes-tubes'] { --mm-photo: url('/assets/photos/hero-pipes-1920.webp'); }
@media (max-width: 960px) {
  [data-photo='pipes-tubes'] { --mm-photo: url('/assets/photos/hero-pipes-960.webp'); }
}
[data-photo='sheets-plates'] { --mm-photo: url('/assets/photos/cat-sheets-plates-900.webp'); }
[data-photo='bars-sections'] { --mm-photo: url('/assets/photos/cat-bars-sections-900.webp'); }
[data-photo='valves-pumps'] { --mm-photo: url('/assets/photos/cat-valves-pumps-900.webp'); }
[data-photo='fasteners-wire'] { --mm-photo: url('/assets/photos/cat-fasteners-wire-900.webp'); }
[data-photo='non-ferrous-metals'] { --mm-photo: url('/assets/photos/cat-non-ferrous-metals-900.webp'); }
[data-photo='industrial-manufacturing'] { --mm-photo: url('/assets/photos/cat-industrial-manufacturing-900.webp'); }
[data-photo='other-materials'] { --mm-photo: url('/assets/photos/cat-other-materials-900.webp'); }

/* Inner page banners + photo bands: photo, soft left-to-right tint, slow settle-in zoom */
.mm-page-hero.is-dark,
.hp-grow[data-photo] {
  background: #1b2633;
  overflow: hidden;
}
.mm-page-hero.is-dark::before,
.hp-grow[data-photo]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--mm-photo) center / cover no-repeat;
  animation: mm-photo-in 2.4s var(--mm-zoom-ease) both;
}
.mm-page-hero.is-dark::after,
.hp-grow[data-photo]::after {
  background: linear-gradient(100deg, rgba(10, 22, 40, 0.86) 0%, rgba(10, 22, 40, 0.62) 45%, rgba(10, 22, 40, 0.18) 100%);
  opacity: 1;
  mix-blend-mode: normal;
}
@keyframes mm-photo-in {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}
.mm-page-hero.is-dark > .mm-blueprint,
.hp-grow[data-photo] > .mm-blueprint,
.hp-hero:has(.mm-hero-media) > .mm-blueprint {
  display: none;
}

/* Home hero: photo slider shows through a lighter tint */
.hp-hero:has(.mm-hero-media) {
  background: #1b2633;
}
.hp-hero:has(.mm-hero-media)::after {
  background: linear-gradient(100deg, rgba(10, 22, 40, 0.84) 0%, rgba(10, 22, 40, 0.58) 48%, rgba(10, 22, 40, 0.15) 100%);
  opacity: 1;
  mix-blend-mode: normal;
}
.hp-hero .hp-board {
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  border-color: transparent;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
}
.hp-hero .hp-board :is(strong, a, span) { color: inherit; }
.hp-hero .hp-board small { color: var(--text-secondary); }
.hp-hero .hp-board-head a { color: var(--mm-blue); }
.hp-hero .hp-board-list li + li { border-color: var(--border); }
.hp-hero .hp-board .sb-type.is-buy { color: var(--mm-blue); }
.hp-hero .hp-board .sb-type.is-sell { color: #a15c00; }

/* Light instead of navy: About "four truths" band and the quick-RFQ panel */
.ab-insights {
  color: var(--text-secondary);
  background: var(--surface);
}
.ab-insights h2,
.ab-insight h3 { color: var(--text); }
.ab-insights .lead,
.ab-insight p { color: var(--text-secondary); }
.ab-kicker-light { color: var(--mm-blue); }
.ab-insight {
  background: #fff;
  border-color: var(--border);
  box-shadow: var(--mm-card-shadow);
}
.ab-insight:hover {
  background: #fff;
  border-color: var(--border-strong);
}
.ab-insights::before,
.ab-insights::after { display: none; }

.mm-rfq {
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.mm-rfq h2 { color: var(--text); }
.mm-rfq .mm-eyebrow { color: var(--mm-blue); }
.mm-rfq-points .icon { color: var(--mm-blue); }
.mm-rfq-form { box-shadow: 0 18px 40px -24px rgba(11, 31, 58, 0.35); }
.mm-rfq > .mm-blueprint,
.mm-rfq::before,
.mm-rfq::after { display: none; }

/* Footer: one calm navy, no glows */
.site-footer {
  background: #0d1b2e;
}

/* ------------------------------------------------- Photo category tiles */
.hp-cat[data-cat],
.mm-cat[data-cat] {
  --tile-photo: none;
}
.hp-cat[data-cat='steel-alloys'], .mm-cat[data-cat='steel-alloys'] { --tile-photo: url('/assets/photos/cat-steel-alloys-480.webp'); }
.hp-cat[data-cat='pipes-tubes'], .mm-cat[data-cat='pipes-tubes'] { --tile-photo: url('/assets/photos/cat-pipes-tubes-480.webp'); }
.hp-cat[data-cat='sheets-plates'], .mm-cat[data-cat='sheets-plates'] { --tile-photo: url('/assets/photos/cat-sheets-plates-480.webp'); }
.hp-cat[data-cat='bars-sections'], .mm-cat[data-cat='bars-sections'] { --tile-photo: url('/assets/photos/cat-bars-sections-480.webp'); }
.hp-cat[data-cat='flanges-fittings'], .mm-cat[data-cat='flanges-fittings'] { --tile-photo: url('/assets/photos/hero-flanges-960.webp'); }
.hp-cat[data-cat='valves-pumps'], .mm-cat[data-cat='valves-pumps'] { --tile-photo: url('/assets/photos/cat-valves-pumps-480.webp'); }
.hp-cat[data-cat='fasteners-wire'], .mm-cat[data-cat='fasteners-wire'] { --tile-photo: url('/assets/photos/cat-fasteners-wire-480.webp'); }
.hp-cat[data-cat='non-ferrous-metals'], .mm-cat[data-cat='non-ferrous-metals'] { --tile-photo: url('/assets/photos/cat-non-ferrous-metals-480.webp'); }
.hp-cat[data-cat='industrial-manufacturing'], .mm-cat[data-cat='industrial-manufacturing'] { --tile-photo: url('/assets/photos/cat-industrial-manufacturing-480.webp'); }
.hp-cat[data-cat='other-materials'], .mm-cat[data-cat='other-materials'] { --tile-photo: url('/assets/photos/cat-other-materials-480.webp'); }

.hp-cat:is([data-cat='steel-alloys'], [data-cat='pipes-tubes'], [data-cat='sheets-plates'], [data-cat='bars-sections'], [data-cat='flanges-fittings'], [data-cat='valves-pumps'], [data-cat='fasteners-wire'], [data-cat='non-ferrous-metals'], [data-cat='industrial-manufacturing'], [data-cat='other-materials']),
.mm-cat:is([data-cat='steel-alloys'], [data-cat='pipes-tubes'], [data-cat='sheets-plates'], [data-cat='bars-sections'], [data-cat='flanges-fittings'], [data-cat='valves-pumps'], [data-cat='fasteners-wire'], [data-cat='non-ferrous-metals'], [data-cat='industrial-manufacturing'], [data-cat='other-materials']) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 6px;
  min-height: 240px;
  padding: 20px;
  border: 0;
  border-radius: 8px;
  background: #2a3442;
  color: #fff;
  box-shadow: none;
  transform: none;
}
:is(.hp-cat, .mm-cat)[data-cat]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--tile-photo) center / cover no-repeat;
  opacity: 1; /* redesign.css hides .mm-cat::before (its hover glow) */
  transition: transform var(--mm-zoom-dur) var(--mm-zoom-ease);
}
/* Tile photos load when the tile comes near the screen (mm-effects adds .mm-bg-in). */
.js :is(.hp-cat, .mm-cat)[data-cat]:not(.mm-bg-in)::before {
  background-image: none;
}
:is(.hp-cat, .mm-cat)[data-cat]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 22, 40, 0) 35%, rgba(10, 22, 40, 0.78) 100%);
  transition: opacity 0.6s ease;
}
:is(.hp-cat, .mm-cat)[data-cat] :is(.hp-cat-icon, .mm-card-icon) { display: none; }
:is(.hp-cat, .mm-cat)[data-cat] :is(.hp-cat-text strong, strong) {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 6px;
  background: rgba(10, 22, 40, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1rem;
}
:is(.hp-cat, .mm-cat)[data-cat] :is(small) {
  color: rgba(255, 255, 255, 0.88);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.6s var(--mm-ease-out), opacity 0.4s ease, margin 0.6s var(--mm-ease-out);
}
.hp-cat[data-cat] .hp-cat-text { display: grid; gap: 6px; }
.hp-cat[data-cat] .hp-cat-go {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  padding: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--mm-navy);
  transition: transform 0.6s var(--mm-zoom-ease), background-color 0.3s ease;
}
@media (hover: hover) {
  :is(.hp-cat, .mm-cat)[data-cat]:hover {
    transform: none;
    box-shadow: 0 22px 44px -22px rgba(10, 22, 40, 0.55);
  }
  :is(.hp-cat, .mm-cat)[data-cat]:hover::before { transform: scale(1.1); }
  :is(.hp-cat, .mm-cat)[data-cat]:hover small { max-height: 4.5em; opacity: 1; }
  :is(.hp-cat, .mm-cat)[data-cat]:hover :is(.hp-cat-text strong, strong) { transform: none; }
  .hp-cat[data-cat]:hover .hp-cat-go { transform: rotate(45deg); background: var(--mm-amber); }
}
@media (hover: none) {
  :is(.hp-cat, .mm-cat)[data-cat] small { max-height: 4.5em; opacity: 1; }
}
.hp-cats:has([data-cat]),
.mm-cat-grid:has([data-cat]) {
  gap: 16px;
}

/* ------------------------------------------- Slow glwt-style image zoom */
.post-card-cover img,
.post-card-cover .post-cover-art,
.mm-product-img img,
.hp-soft-shot img,
.cl-shot img,
.hp-client-shot img,
.mm-tile-img img,
.mm-svc-visual img {
  transition: transform var(--mm-zoom-dur) var(--mm-zoom-ease);
}
@media (hover: hover) {
  .post-card:hover .post-card-cover img,
  .post-card:hover .post-card-cover .post-cover-art,
  .mm-product:hover .mm-product-img img,
  .hp-soft-card:hover .hp-soft-shot img,
  .cl-grid > li:hover .cl-shot img,
  .hp-client:hover .hp-client-shot img,
  :hover > .mm-tile-img img {
    transform: scale(1.08);
  }
  /* Cards lift a little less, the photo does the work */
  .mm-card:hover,
  .post-card:hover,
  .hp-path:hover,
  .hp-soft-card:hover,
  .ind-card:hover,
  .cl-grid > li:hover {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-page-hero.is-dark::before,
  .hp-grow[data-photo]::before { animation: none; }
  :is(.hp-cat, .mm-cat)[data-cat]::before { transition: none; }
}
.hp-hero .hp-board .hp-board-head > span { color: var(--text); font-weight: 600; }
.hp-cat[data-cat] .hp-cat-text { justify-items: start; }
:is(.hp-cat, .mm-cat)[data-cat],
:is(.hp-cat, .mm-cat)[data-cat]:hover,
:is(.hp-cat, .mm-cat)[data-cat]:hover * { text-decoration: none; }
@media (min-width: 1100px) {
  .hp-cats:has([data-cat]),
  .mm-cat-grid:has([data-cat]) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .hp-cats:has([data-cat]),
  .mm-cat-grid:has([data-cat]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  :is(.hp-cat, .mm-cat)[data-cat] { min-height: 168px; padding: 12px; }
  :is(.hp-cat, .mm-cat)[data-cat] small { display: none; }
  :is(.hp-cat, .mm-cat)[data-cat] :is(.hp-cat-text strong, strong) { padding: 6px 10px; font-size: 0.875rem; }
  .hp-cat[data-cat] .hp-cat-go { top: 10px; right: 10px; width: 30px; height: 30px; padding: 7px; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .hp-cats:has([data-cat]),
  .mm-cat-grid:has([data-cat]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mm-page-hero.is-dark .sb-hero-stats li {
  background: rgba(10, 22, 40, 0.55);
  border-color: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.mm-page-hero.is-dark .sb-hero-stats span { color: #e6ecf3; }

/* ------------------------------------- Phase 4: sign-in link, suppliers, RFQ helpers */
.acc-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: #5b6b80; font-size: 0.875rem; }
.acc-or::before, .acc-or::after { content: ''; flex: 1; height: 1px; background: #e3e8ef; }
.acc-link-form .btn .icon { margin-right: 6px; }

/* Country lists with flags (shared searchable select) */
.combo.has-flag .combo-input { padding-left: 42px; }
.combo-flag { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1.15rem; line-height: 1; pointer-events: none; }
.combo-opt-flag { display: inline-block; width: 1.6em; font-size: 1.05rem; }
.combo-dial .combo-input { padding-right: 30px; }
.combo-dial .combo-chevron { right: 8px; }
.combo-dial .combo-list { right: auto; width: min(300px, 86vw); }
/* Catalogue suggestions under the product and grade fields */
.suggest .combo-list li small { display: block; margin-top: 2px; color: #5b6b80; font-size: 0.8125rem; font-weight: 400; }

.sp-draft-note, .sp-supplier-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; padding: 10px 14px; border-radius: var(--mm-radius-card); background: #fef6e0; border: 1px solid #f6dd9a; font-size: 0.9375rem; }
.sp-draft-note .btn { margin-left: auto; }
.sp-supplier-note { background: #eef3fa; border-color: #cddcf0; }
.sp-supplier-note .icon, .sp-draft-note .icon { flex: none; color: var(--mm-blue); }
.sp-saved { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.sp-saved .icon { color: #1e7a46; }

/* Supplier profile form (/account/supplier) */
.sup-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 20px; padding: 12px 16px; border: 1px solid #e3e8ef; border-radius: var(--mm-radius-card); background: #fff; }
.sup-status .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #eef1f5; color: var(--mm-navy); font-size: 0.8125rem; font-weight: 600; }
.sup-status-approved .badge:first-child { background: #e3f4ea; color: #1e6a3f; }
.sup-status-pending .badge:first-child { background: #fef6e0; color: #7a5600; }
.sup-status-changes .badge:first-child, .sup-status-rejected .badge:first-child { background: #fdeceb; color: #9b2c22; }
.sup-status .badge-verified { background: #e3f4ea; color: #1e6a3f; }
.sup-form { display: grid; gap: 8px; }
.sup-block { margin: 0; padding: 0 0 22px; border: 0; border-bottom: 1px solid #e3e8ef; }
.sup-block + .sup-block { padding-top: 18px; }
.sup-block > legend { padding: 0; margin: 0 0 12px; font-weight: 700; font-size: 1.0625rem; color: var(--mm-navy); }
.sup-country-filter { max-width: 320px; margin: 4px 0 10px; }
.sup-country-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 260px; overflow-y: auto; padding: 4px; border: 1px solid #e3e8ef; border-radius: var(--mm-radius-card); overscroll-behavior: contain; }
.sup-country-list .choice[hidden] { display: none; }
.sup-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding-top: 8px; }
@media (max-width: 560px) { .sup-actions .btn { flex: 1 1 100%; } }

/* Public supplier pages */
.sup-verified { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #e3f4ea; color: #1e6a3f; font-size: 0.8125rem; font-weight: 600; }
.sup-where { margin: 6px 0 0; color: #3d4b5c; font-size: 1rem; }
.sup-products { display: grid; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.sup-products li { display: flex; gap: 8px; align-items: flex-start; }
.sup-products .icon { flex: none; margin-top: 3px; color: #1e7a46; }
.sup-country { white-space: nowrap; }
.sup-enquiry h2 { margin-top: 0; }
.sup-enquiry-points { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 0.9375rem; color: #3d4b5c; }
.sup-enquiry-points li { display: flex; gap: 8px; align-items: center; }
.sup-enquiry-points .icon { flex: none; color: var(--mm-blue); }
.sup-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.sup-filters .select { width: auto; min-width: 200px; flex: 1 1 200px; max-width: 320px; }
.sup-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid #e3e8ef; border-radius: var(--mm-radius-card); background: #fff; box-shadow: var(--mm-card-shadow); transition: box-shadow .2s, transform .2s; }
.sup-card:hover { box-shadow: var(--mm-card-shadow-hover); transform: translateY(-2px); }
.sup-card-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sup-card h3 { margin: 4px 0 0; font-size: 1.125rem; }
.sup-card h3 a { color: inherit; text-decoration: none; }
.sup-card h3 a:hover { color: var(--mm-blue); }
.sup-card p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .sup-card { transition: none; } .sup-card:hover { transform: none; } }
.sup-hero-cta { margin-top: 16px; }
@media (min-width: 1024px) { .sup-hero-cta { display: none; } }
.sp-supplier-note > span:not(.icon), .sp-draft-note > span { flex: 1 1 200px; min-width: 0; }

/* Category page: sub-category tiles (E3) */
.mc-sub-title { font-size: 1.25rem; margin: 0 0 16px; }
.mc-sub-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.mc-sub-img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; border-radius: 8px; margin-bottom: 10px; }
.mc-sub-count { color: var(--mm-blue, #1e4e8c); font-weight: 600; }