.mm-section {
    position: relative;
    overflow: hidden;
    background: #0c0a08;
    padding: clamp(52px, 6.5vw, 96px) clamp(20px, 4vw, 64px);
  }
  /* Single stacked block, not a two-column split — the previous "big title
     left / small explainer paragraph right" layout had no real reason for
     the split (the right column was just text, not a distinct visual), so
     it just registered as an odd disconnect between headline and support
     line. One column reads as one clear message. */
  .mm-header { max-width: 640px; margin-bottom: clamp(32px, 4.5vw, 52px); }
  .mm-title {
    font-size: clamp(36px, 4.4vw, 64px);
    font-weight: 600;
    line-height: 1.04;
    color: #f0e8d8;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin-bottom: 14px;
  }
  .mm-title span { color: #d4885a; }
  .mm-subtitle {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(240, 232, 216, 0.6);
    max-width: 54ch;
    text-wrap: pretty;
  }
  .mm-subtitle strong { font-weight: 600; color: #f0e8d8; }
  .mm-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
  }
  .mm-card--a { grid-column: span 5; }
  .mm-card--b { grid-column: span 4; }
  .mm-card--c { grid-column: span 3; }
  .mm-card { height: 330px; }
  @media (min-width: 981px) {
    .mm-grid > :nth-child(4) { order: 3; }
    .mm-grid > :nth-child(5) { order: 2; }
    .mm-grid > :nth-child(6) { order: 1; }
    .mm-grid > :nth-child(n+7) { order: 9; }
  }
  /* Cards past the first 6 (index 7+) sit two-up instead of stacking as
     full-width banners — span 6 of 12 columns on desktop, span 1 of the
     2-col grid on tablet/mobile (same halving either grid uses). */
  .mm-card--w { grid-column: span 6; height: 280px; }
  @media (max-width: 980px) {
    .mm-card--w { grid-column: span 1; }
  }
  .mm-card--w .mm-card-name { font-size: clamp(23px, 2.4vw, 34px); }
  /* Electronic City / Mysore Road / Budigere-Hoskote — same banner style as
     "w" (no project-preview list, just name + CTA) but a third of the row
     instead of half, since these three sit together three-up. */
  .mm-card--t { grid-column: span 4; height: 280px; }
  @media (max-width: 980px) {
    .mm-card--t { grid-column: span 1; }
  }
  .mm-card--t .mm-card-name { font-size: clamp(21px, 2.2vw, 30px); }
  @media (max-width: 980px) {
    .mm-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .mm-card--a { grid-column: span 2; }
    .mm-card--b, .mm-card--c { grid-column: span 1; }
    .mm-card { height: clamp(240px, 40vw, 320px); }
    .mm-card--a { height: clamp(260px, 44vw, 340px); }
    /* Declared after the general .mm-card height rule above (same 0,1,0
       specificity as .mm-card--w) so it actually wins the cascade — an
       earlier standalone media block setting this before the general
       .mm-card height rule was silently overridden by it. */
    .mm-card--w, .mm-card--t { height: clamp(180px, 32vw, 240px); }
  }
  @media (max-width: 520px) {
    .mm-grid { gap: 8px; }
    .mm-card { height: clamp(210px, 52vw, 260px); }
    .mm-card--a { height: clamp(230px, 56vw, 280px); }
    .mm-card--w, .mm-card--t { height: clamp(160px, 46vw, 200px); }
  }
  .mm-card {
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
    background: #18140f;
    border-radius: 6px;
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.5),
      0 20px 48px -18px rgba(0, 0, 0, 0.65);
    transition:
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mm-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: 6px;
    border: 1px solid rgba(240, 232, 216, 0.09);
    pointer-events: none;
    transition: border-color 0.4s ease;
  }
  .mm-card:hover { transform: translateY(-4px); }
  .mm-card:hover::before { border-color: rgba(240, 232, 216, 0.28); }
  .mm-card:focus-visible { outline: 2px solid #c8702a; outline-offset: 3px; }
  .mm-anim .mm-card:not(.is-visible) {
    opacity: 0;
    transform: translateY(16px);
  }
  .mm-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      rgba(10, 8, 6, 0.05) 0%,
      transparent 28%,
      rgba(10, 8, 6, 0.12) 50%,
      rgba(10, 8, 6, 0.48) 74%,
      rgba(10, 8, 6, 0.55) 100%
    );
  }
  /* Toned down 2026-08-24 (was 0.10/0.22/0.88/0.97) — the original scrim was
     darkening the photos more than the card text needed for legibility. */
  /* Dropped on mobile — .mm-card-body::before already provides a dedicated
     scrim sized to the text block itself, so this whole-card gradient was
     just adding extra unneeded darkening over the photo on small cards. */
  @media (max-width: 980px) {
    .mm-card::after { background: none; }
  }
  .mm-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s ease;
    filter: saturate(0.75) brightness(0.88);
  }
  .mm-card:hover .mm-card-img {
    transform: scale(1.045);
    filter: saturate(0.85) brightness(0.95);
  }
  .mm-card-img--fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, #1c1810 0%, #2c2018 100%);
  }
  .mm-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: clamp(14px, 1.8vw, 22px) clamp(14px, 1.8vw, 20px);
  }
  /* Dedicated scrim sized to the text block itself (not a % of the whole
     card), so mm-card-conn stays legible on short mobile cards where the
     card-wide ::after gradient is still mostly transparent at that height. */
  .mm-card-body::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -56px 0 0 0;
    background: linear-gradient(
      to top,
      rgba(6, 5, 3, 0.95) 0%,
      rgba(6, 5, 3, 0.82) 45%,
      rgba(6, 5, 3, 0) 100%
    );
    pointer-events: none;
  }
  .mm-card-conn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e6a06a;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
    margin-bottom: 8px;
  }
  .mm-card-conn svg { flex-shrink: 0; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9)); }
  @media (max-width: 520px) {
    .mm-card-conn { font-size: 9px; letter-spacing: 0.08em; line-height: .68rem; }
  }
  .mm-card-name {
    position: relative;
    font-weight: 600;
    line-height: 1.02;
    color: #f0e8d8;
    letter-spacing: -0.02em;
    text-wrap: balance;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  }
  .mm-card--a .mm-card-name { font-size: clamp(25px, 2.7vw, 40px); }
  .mm-card--b .mm-card-name { font-size: clamp(21px, 2.2vw, 30px); }
  .mm-card--c .mm-card-name { font-size: clamp(19px, 1.8vw, 25px); }
  @media (max-width: 980px) {
    .mm-card--b .mm-card-name,
    .mm-card--c .mm-card-name,
    .mm-card--w .mm-card-name,
    .mm-card--t .mm-card-name { font-size: 16px; }
  }
  .mm-card-count {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #c8702a;
    color: #f0e8d8;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }
  @media (max-width: 520px) {
    .mm-card-count { width: 36px; height: 36px; font-size: 12.5px; top: 10px; right: 10px; }
  }
  .mm-card-projects {
    position: relative;
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(240, 232, 216, 0.82);
    max-width: 62ch;
    text-wrap: pretty;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  }
  .mm-card-projects .mm-sep { color: rgba(240, 232, 216, 0.35); padding: 0 5px; }
  .mm-card-projects .mm-more { color: #d4885a; white-space: nowrap; }
  .mm-more-sm, .mm-more-md { display: none; }
  @media (max-width: 980px) {
    .mm-proj-3, .mm-sep-3 { display: none; }
    .mm-more-md { display: inline; }
    .mm-more-lg { display: none; }
    .mm-card-projects { margin-bottom: 1px !important; }
    /* b/c cards are half-width in the mobile 2-col grid — too cramped to
       also carry the recent-projects list on top of name + CTA. a-cards
       span the full row and keep it. */
    .mm-card--b .mm-card-projects,
    .mm-card--c .mm-card-projects { display: none; }
  }
  @media (max-width: 520px) {
    .mm-proj-2, .mm-proj-3, .mm-sep-2, .mm-sep-3 { display: none; }
    .mm-more-sm { display: inline; }
    .mm-more-md, .mm-more-lg { display: none; }
  }
  .mm-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c8702a;
  }
  .mm-card-cta svg { flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
  .mm-card:hover .mm-card-cta svg { transform: translateX(5px); }
  .mm-bottom {
    margin-top: clamp(26px, 3.5vw, 44px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: clamp(20px, 3vw, 30px);
    border-top: 1px solid rgba(240, 232, 216, 0.1);
  }
  .mm-bottom-text {
    font-size: 13px;
    color: rgba(240, 232, 216, 0.48);
    line-height: 1.6;
  }
  .mm-bottom-text strong { font-weight: 600; color: #f0e8d8; }
  .mm-all-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f0e8d8;
    text-decoration: none;
    border: 1px solid rgba(240, 232, 216, 0.22);
    border-radius: 100px;
    transition: border-color 0.3s ease, background-color 0.3s ease;
  }
  .mm-all-link:hover {
    border-color: #c8702a;
    background: rgba(200, 112, 42, 0.12);
  }
  .mm-all-link svg { flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
  .mm-all-link:hover svg { transform: translateX(4px); }
  .mm-all-link:focus-visible { outline: 2px solid #c8702a; outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    .mm-card, .mm-card-img, .mm-card-cta svg, .mm-all-link, .mm-all-link svg {
      transition: none !important;
    }
    .mm-card { opacity: 1 !important; transform: none !important; }
    .mm-card:hover .mm-card-img { transform: none; }
  }
  /* ── Compact mode (mode="compact") — a plain 2-col card row meant to be
     embedded inline elsewhere (e.g. a [hns_listings] break), not the
     homepage section. Reuses .mm-card/.mm-card-img/etc. as-is; only adds
     its own grid wrapper + a couple of size/content tweaks. ── */
  .mm-compact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .mm-card--compact { height: 220px; }
  .mm-card--compact .mm-card-name { font-size: clamp(19px, 2.2vw, 25px); }
  @media (max-width: 560px) {
    .mm-compact-grid { grid-template-columns: 1fr; gap: 10px; }
    .mm-card--compact { height: 200px; }
  }