/* ─── Mahdavi & Mahdavi — Site-wide enhancements ─────── */

html, body {
  overflow-x: hidden !important;
}

/* === Design Tokens & Utilities === */
:root {
  --color-gold:        #bf9742;
  --color-gold-dark:   #99763d;
  --color-nav-bg:      rgba(20, 20, 20, 0.96);
  --color-overlay:     rgba(0, 0, 0, 0.35);
  --font-heading:      'Oswald', sans-serif;
  --radius-card:       12px;
  --blur-nav:          16px;
  --max-width-site:    1440px;
  --consult-form-max:  600px;
}

/* Responsive baseline */
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe { max-width: 100%; height: auto; }

/* OpenType features applied globally (replaces 165+ inline style attributes) */
body {
  font-feature-settings: 'dlig' 1, 'lnum' 1, 'pnum' 1;
}

/* Full-bleed background layer — breaks out of the 1440px page wrapper
   so the hero image+overlay span the entire viewport width while the
   section's content (padding, text, buttons) stays centered at 1440. */
.hero-bg-bleed {
  left: 50%;
  right: auto;
  width: 100vw;
  transform: translateX(-50%);
}

/* Generic full-bleed — makes a flow element span the entire viewport
   width while sitting inside the 1440px page wrapper. Used by the top
   phone banner and any content section that should go edge-to-edge. */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Generic section bleed — keeps the section's flex layout capped at 1440
   for content while extending ONLY its background colour edge-to-edge via
   a pseudo-element. Use on solid-colour sections (Shireen, Stats, Why Us).
   Requires the target to have a background-color set in classes/styles. */
.section-bleed {
  position: relative;
  isolation: isolate;
}
.section-bleed::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background-color: inherit;
  z-index: -1;
  pointer-events: none;
}
/* Large display headings get additional stylistic sets */
[class*="text-[48px]"],
[class*="text-[64px]"] {
  font-feature-settings: 'ss02' 1, 'ss03' 1, 'kern' 0, 'dlig' 1, 'lnum' 1, 'pnum' 1;
}

/* === Sticky Nav === */
/* Default: nav stays absolute inside the hero (Figma design).
   .nav-scrolled is added by JS once the hero scrolls away —
   then the nav snaps fixed at the top with a solid dark bg.   */
#site-nav {
  z-index: 1000;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
#site-nav.nav-scrolled {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: var(--max-width-site) !important;
  background: transparent !important;
}
/* Full-bleed backdrop for the scrolled nav — spans the viewport width
   while the nav's content box stays capped at 1440 for layout. */
#site-nav.nav-scrolled::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--color-nav-bg);
  backdrop-filter: blur(var(--blur-nav));
  -webkit-backdrop-filter: blur(var(--blur-nav));
  box-shadow: 0 2px 20px var(--color-overlay);
  z-index: -1;
  pointer-events: none;
}

/* ─── Nav dropdown ──────────────────────────────────── */
.nav-dropdown-parent {
  position: relative;
}
.nav-dropdown {
  position: absolute;
  top: 100%;           /* no gap — continuous hover area */
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--color-nav-bg);
  backdrop-filter: blur(var(--blur-nav));
  -webkit-backdrop-filter: blur(var(--blur-nav));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-card);
  padding: 8px;
  padding-top: 14px;   /* internal breathing room */
  min-width: 210px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  /* Delayed hide: mouse can travel from link → dropdown */
  transition-delay: 0s;
  z-index: 9999;
}
/* Invisible bridge: fills the gap between trigger and dropdown */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.nav-dropdown-parent:hover .nav-dropdown,
.nav-dropdown-parent:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
/* Delay the closing so mouse can travel across the gap */
.nav-dropdown-parent:not(:hover):not(:focus-within) .nav-dropdown {
  transition-delay: 0.08s;
}
.nav-dropdown a {
  display: block;
  padding: 7px 12px;
  color: rgba(255,255,255,0.72);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
  line-height: 1.4;
}
.nav-dropdown a:hover {
  background: rgba(153,118,61,0.25);
  color: var(--color-gold);
}
.nav-dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 6px 8px;
}
.nav-dropdown--grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  gap: 2px 12px;
  min-width: 620px;
  padding: 14px 12px 12px;
}
.nav-dropdown--grid a {
  white-space: normal;
}

/* ─── Practice area card: gold overlay on hover ─────── */
/* Each photo card gets a .card-gold-overlay injected via JS.
   On hover it fades over the dark photo overlay → matches
   the always-gold Divorce card design.                        */
.card-gold-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-gold-dark);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.card-link:hover .card-gold-overlay {
  opacity: 1;
}
/* Text content inside PA cards sits above the overlay */
.card-link > div:last-child,
.card-link > div:not([aria-hidden]) {
  position: relative;
  z-index: 2;
}

/* ─── Card hover transitions ────────────────────────── */
.card-link {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  overflow: hidden;
}
.card-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}
.card-hover-btn {
  position: absolute;
  bottom: 16px;
  left: 16px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
  z-index: 3;
}
.card-link:hover .card-hover-btn {
  opacity: 1;
  transform: translateY(0);
}
.card-hover-btn span {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  background: var(--color-overlay);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 13px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ─── Accordion ─────────────────────────────────────── */
.accordion-item {
  cursor: pointer;
  user-select: none;
}
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.accordion-item.open .accordion-body {
  max-height: 800px;
}
.accordion-arrow img {
  transition: transform 0.3s ease;
}
.accordion-item.open .accordion-arrow img {
  transform: rotate(180deg);
}

/* ─── Button micro-interactions ─────────────────────── */
a[href] {
  cursor: pointer;
}
.btn-dark {
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.btn-dark:hover {
  opacity: 0.88;
}

/* ─── Scroll fade-in ────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Consultation box: expand on hover ─────────────── */
.consult-box .consult-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s ease;
}
.consult-box:hover .consult-body {
  max-height: 1400px;
}
.mm-form-open .consult-body {
  max-height: 1400px !important;
  overflow: visible !important;
}

/* ─── Scrolled nav: force white text on dark bg ──────── */
#site-nav.nav-scrolled a span,
#site-nav.nav-scrolled a span * {
  color: rgba(255,255,255,0.85) !important;
}

/* ─── Blog cards ────────────────────────────────────── */
/* Info panel sits in normal flow below the image, always visible. */
.blog-card {
  position: relative;
  overflow: hidden;
}

/* Active filter tab */
.blog-tab-active {
  background: black !important;
  border-color: var(--color-gold-dark) !important;
  border-width: 2px !important;
}
.blog-tab-active span {
  color: white !important;
  opacity: 1 !important;
}

/* ─── PA about section: spacing fix ─────────────────── */
/* Remove the fixed h-[600px] so the section can breathe,
   and add more top/bottom padding so the title isn't flush
   against the top edge and the button isn't flush at the bottom. */
[class*="bg-[#e9e5e2]"][class*="h-[600px]"] {
  height: auto !important;
  min-height: 640px;
}
[class*="bg-[#e9e5e2]"][class*="h-[600px]"] > div > [class*="py-[60px]"] {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
  height: auto !important;
}

/* ─── PA stat card icons: force size ────────────────── */
/* Backup for size-[] CDN shorthand + any broken renders  */
.pa-stat-row > * > div > img,
.pa-stat-row img {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain;
  flex-shrink: 0;
}

/* ─── PA page: stat cards equal height ──────────────── */
/* JS adds .pa-stat-row to the 4-up flex container.
   align-items:stretch makes all cards the same height. */
.pa-stat-row {
  align-items: stretch !important;
}
.pa-stat-row > * {
  display: flex !important;
  flex-direction: column !important;
}

/* ─── PA page: testimonial cards equal height ─────── */
/* JS adds .pa-testimonial-row to the overflow-x-auto row.
   stretch + justify-between pushes reviewer info to the bottom. */
.pa-testimonial-row {
  align-items: stretch !important;
}
.pa-testimonial-row > * {
  justify-content: space-between !important;
}

/* ─── Consultation form: centre fields inside the box ─ */
/* The black form box is full-width, but its inner children
   (fields, button row, phone link) get a max-width so they
   sit centred with breathing room on wider viewports.       */
.consult-form-inner > *:not(:first-child) {
  max-width: var(--consult-form-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* The title stays full-width / left-aligned */
.consult-form-inner > *:first-child {
  width: 100%;
}

/* ─── Infinite logo scroll animation ──────────────── */
@keyframes mm-logo-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── Mobile/Desktop visibility toggles ──────────── */
.mobile-only { display: none !important; }
.desktop-only { display: block !important; }
.mobile-sticky-cta {
  display: none !important;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: var(--color-gold-dark);
  padding: 14px 20px;
  gap: 12px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.pa-card-mobile-info {
  display: none;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* ─── Responsive: allow smaller viewports to scroll ── */
body {
  overflow-x: auto;
}

/* Hide mobile menu on desktop — JS sets display:flex, media queries handle visibility */
#mobile-menu {
  display: none !important;
}

/* Contain PA carousel overflow at all viewport sizes */
.mm-pa-carousel {
  overflow: hidden !important;
  max-width: 100vw !important;
}

/* ═══════════════════════════════════════════════════════
   TABLET — 768px–1024px
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 768px) {

  /* ── Foundation ── */
  body { overflow-x: hidden !important; }
  .max-w-\[1440px\] { max-width: 100% !important; }
  .mobile-only { display: block !important; }
  .desktop-only { display: none !important; }
  .mobile-sticky-cta { display: flex !important; }
  .pa-card-mobile-info { display: flex !important; position: relative; z-index: 2; }

  /* ── Hamburger menu scroll fix ── */

  /* ── Padding reduction ── */
  [class*="px-\[112px\]"],
  [class*="px-\[250px\]"],
  [class*="px-\[480px\]"],
  [class*="px-\[200px\]"] {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* ── Typography ── */
  [class*="text-\[64px\]"] { font-size: 52px !important; }
  [class*="text-\[48px\]"] { font-size: 42px !important; }

  /* ── Fixed widths → fluid ── */
  [class*="w-\[526px\]"],
  [class*="w-\[540px\]"],
  [class*="w-\[557px\]"],
  [class*="w-\[615px\]"],
  [class*="w-\[660px\]"],
  [class*="w-\[820px\]"],
  [class*="w-\[1440px\]"] {
    width: 100% !important;
  }

  /* ── flex-[1_0_0] → fluid ── */
  [class*="flex-\[1_0_0\]"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* ── Line breaks: hide ── */
  br { display: none !important; }

  /* ── Hero ── */
  [class*="aspect-\[3\/2\]"],
  [class*="aspect-\[2\/1\]"] {
    aspect-ratio: auto !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    padding-top: 125px !important;
    padding-bottom: 60px !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }
  [class*="min-h-\[600px\]"],
  [class*="min-h-\[700px\]"] { min-height: auto !important; }

  /* ── 50/50 about splits → stack ── */
  .full-bleed.flex:not(.flex-col) {
    flex-direction: column !important;
  }
  .full-bleed > .w-1\/2,
  .full-bleed > .flex.flex-row,
  .full-bleed > .flex.flex-1.flex-row {
    width: 100% !important;
    flex: none !important;
  }
  .aspect-square {
    aspect-ratio: auto !important;
    height: 400px !important;
    min-height: 400px !important;
  }
  .full-bleed .self-stretch[class*="relative"]:has(img),
  .full-bleed [class*="h-full"][class*="relative"]:has(img) {
    height: 400px !important;
    min-height: 400px !important;
    flex: none !important;
  }
  /* Shireen section: image above text on tablet */
  .full-bleed.bg-\[\#e9e5e2\] > .aspect-square { order: -1 !important; }
  .full-bleed.bg-\[\#e9e5e2\] > [class*="h-full"] { height: auto !important; }

  /* ── PA cards: 2-column ── */
  [class*="w-\[286px\]"]:not(.team-card) {
    width: calc(50% - 16px) !important;
    height: 360px !important;
    flex-shrink: 0 !important;
  }

  /* ── Stats: 2x2 grid ── */
  .section-bleed.bg-black .flex.gap-\[24px\]:has(> [class*="flex-\[1_0_0\]"]) {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .section-bleed.bg-black .flex.gap-\[24px\]:has(> [class*="flex-\[1_0_0\]"]) > * {
    flex: 0 0 calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
  }

  /* ── Why Choose Us: 2-column ── */
  .pa-stat-row,
  .flex.gap-\[24px\]:has(> .bg-\[\#393939\]) {
    flex-wrap: wrap !important;
    height: auto !important;
    gap: 16px !important;
  }
  .flex.gap-\[24px\]:has(> .bg-\[\#393939\]) > * {
    flex: 0 0 calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
  }
  [class*="h-\[347px\]"] { height: auto !important; }

  /* ── Testimonials: scroll ── */
  .overflow-hidden:has([class*="w-\[384px\]"]) {
    overflow: visible !important;
  }
  .flex.gap-\[32px\]:has(> [class*="w-\[384px\]"]),
  .pa-testimonial-row {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px !important;
  }
  [class*="w-\[384px\]"] {
    min-width: 340px !important;
    width: 340px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start;
  }

  /* ── Blog cards: scroll ── */
  .flex.gap-\[32px\]:has(> [class*="overflow-clip"]) {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px !important;
  }
  .flex.gap-\[32px\]:has(> [class*="overflow-clip"]) > * {
    min-width: 320px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start;
  }

  /* ── Contact form: email+phone stack ── */
  .flex.gap-\[16px\]:has(> .flex-1) {
    flex-direction: column !important;
  }

  /* ── CTA section ── */
  [class*="h-\[372px\]"] {
    height: 260px !important;
    width: 100% !important;
  }

  /* ── PA detail: numbered list rows → stack ── */
  .flex.gap-\[80px\] {
    flex-direction: column !important;
    gap: 24px !important;
  }
  [class*="h-\[262px\]"][class*="rounded-"] {
    height: 240px !important;
    width: 100% !important;
    flex: none !important;
  }

  /* ── Buttons ── */
  [class*="w-\[258px\]"] { width: 100% !important; }
  .flex.gap-\[24px\]:has(> [class*="w-\[258px\]"]) {
    flex-direction: column !important;
    width: 100% !important;
  }

  /* ── Team cards ── */
  .team-card {
    width: calc(50% - 12px) !important;
    height: 300px !important;
  }

  /* ── Team profile sidebar → stack ── */
  .flex.gap-\[52px\]:not(.mm-logos-row) {
    flex-direction: column !important;
    gap: 28px !important;
  }

  /* ── Footer ── */
  footer .flex.gap-\[40px\],
  footer > div:first-child {
    flex-wrap: wrap !important;
    gap: 24px !important;
  }
  footer { padding-bottom: 70px !important; }

  /* ── Consult box: always expanded ── */

  /* ── Card hover: disable on touch ── */
  .card-link:hover { transform: none !important; box-shadow: none !important; }
  .card-hover-btn { display: none !important; }

  /* ── Nav: show hamburger on tablet too ── */
  #site-nav {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #site-nav > div:not(#nav-hamburger) { display: none !important; }
  #site-nav > a[href="/contact.html"] { display: none !important; }
  #site-nav > a:first-child { display: flex !important; }
  #nav-hamburger { display: flex !important; }
  #site-nav.nav-scrolled { max-width: 100% !important; }

  /* ── Mobile menu overlay (shared with phone) ── */
  #mobile-menu {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 100vh;
    height: 100dvh;
    background: rgba(20, 20, 20, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 10000;
    flex-direction: column;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
  }
  #mobile-menu.open { opacity: 1; visibility: visible; }
  #mobile-menu a {
    display: block;
    padding: 14px 0;
    color: rgba(255,255,255,0.85);
    font-family: var(--font-heading);
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .mobile-submenu { display: none; }
  .mobile-submenu.open { display: block; }
  .mobile-submenu a {
    padding: 10px 0 10px 20px !important;
    font-size: 15px !important;
    opacity: 0.7;
    border-bottom: none !important;
  }
  #mobile-menu-close {
    align-self: flex-end;
    padding: 8px;
    margin-bottom: 16px;
    cursor: pointer;
  }
  body.menu-open { overflow: hidden !important; }

  /* ── Blog tabs → scroll ── */
  .flex.gap-\[8px\]:has(> [class*="rounded-\[100px\]"]) {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }
}

/* ═══════════════════════════════════════════════════════
   MOBILE — max-width: 767px (Figma 412px spec)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ══ Foundation ══ */
  body { overflow-x: hidden !important; }
  .max-w-\[1440px\],
  .mm-page-wrap { max-width: 100% !important; overflow-x: hidden !important; }
  .mobile-only { display: block !important; }
  .desktop-only { display: none !important; }
  .mobile-sticky-cta { display: flex !important; }

  /* ══ Global padding → 20px ══ */
  .mm-hero, .mm-testimonials, .mm-practice-areas,
  .mm-stats, .mm-why-us, .mm-blog, .mm-contact {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ══ Typography ══ */
  .mm-hero :is(p,h1,h2,h3,h4,h5,h6)[class*="text-[64px]"],
  .mm-hero :is(p,h1,h2,h3,h4,h5,h6)[class*="text-\[64px\]"] { font-size: 42px !important; line-height: 1.1 !important; }
  .mm-testimonials :is(p,h1,h2,h3,h4,h5,h6)[class*="text-[48px]"],
  .mm-practice-areas :is(p,h1,h2,h3,h4,h5,h6)[class*="text-[48px]"],
  .mm-about-stephanie :is(p,h1,h2,h3,h4,h5,h6)[class*="text-[48px]"],
  .mm-about-shireen :is(p,h1,h2,h3,h4,h5,h6)[class*="text-[48px]"],
  .mm-why-us :is(p,h1,h2,h3,h4,h5,h6)[class*="text-[48px]"],
  .mm-blog :is(p,h1,h2,h3,h4,h5,h6)[class*="text-[48px]"],
  .mm-contact :is(p,h1,h2,h3,h4,h5,h6)[class*="text-[48px]"] { font-size: 38px !important; line-height: 1.15 !important; }

  /* ══ Fixed widths → 100% ══ */
  .mm-hero :is(p,h1,h2,h3,h4,h5,h6)[class*="w-[526px]"] { width: 100% !important; }
  .mm-stats :is(p,h1,h2,h3,h4,h5,h6)[class*="w-[660px]"],
  .mm-why-us :is(p,h1,h2,h3,h4,h5,h6)[class*="w-[660px]"] { width: 100% !important; }

  /* ══ Section-level gaps: 40px → 24px ══ */
  .mm-testimonials, .mm-practice-areas,
  .mm-stats, .mm-why-us, .mm-blog { gap: 24px !important; }

  /* ══ Line breaks: hide ══ */
  br { display: none !important; }

  /* ─── §0 BREADCRUMBS ─── */
  .mm-breadcrumbs {
    flex-wrap: wrap !important;
  }
  .mm-breadcrumbs > a,
  .mm-breadcrumbs > span {
    white-space: normal !important;
    flex-shrink: 1 !important;
  }

  /* ─── §1 NAV ─── */
  #site-nav {
    padding: 16px 20px !important;
  }
  #site-nav > div:not(#nav-hamburger) { display: none !important; }
  #site-nav > a[href="/contact.html"] { display: none !important; }
  #site-nav > a:first-child { display: flex !important; }
  #nav-hamburger {
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #site-nav.nav-scrolled { max-width: 100% !important; }

  /* ─── §2 HERO ─── */
  .mm-hero {
    aspect-ratio: auto !important;
    min-height: auto !important;
    height: auto !important;
    padding-top: 125px !important;
    padding-bottom: 40px !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    gap: 40px !important;
  }
  .mm-hero-title {
    overflow: hidden !important;
  }

  /* ─── §2a LOGOS BAR ─── */
  .mm-logos-bar {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 40px 20px !important;
    background: transparent !important;
    gap: 24px !important;
    overflow: hidden !important;
  }
  .mm-logos-row {
    gap: 0 40px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    animation: mm-logo-scroll 15s linear infinite !important;
    width: max-content !important;
    justify-content: flex-start !important;
  }
  .mm-logos-row > div {
    flex-shrink: 0 !important;
    height: 24px !important;
  }

  /* ─── §3+§4 ABOUT SPLITS ─── */
  .mm-about-stephanie,
  .mm-about-shireen {
    flex-direction: column !important;
  }
  .mm-about-stephanie > *,
  .mm-about-shireen > * {
    width: 100% !important;
    flex: none !important;
  }
  .mm-about-img {
    aspect-ratio: auto !important;
    height: 412px !important;
    min-height: 412px !important;
  }
  .mm-about-text {
    padding-left: 20px !important;
    padding-right: 20px !important;
    height: auto !important;
  }
  /* Shireen: image above text */
  .mm-about-shireen > .mm-about-img {
    order: -1 !important;
  }

  /* ─── §5 TESTIMONIALS ─── */
  .mm-testimonials .overflow-hidden { overflow: visible !important; }
  .mm-testimonials .flex.gap-\[32px\] {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;
    padding-bottom: 16px !important;
  }
  .mm-testimonials .w-\[384px\],
  .mm-testimonials [class*="w-[384px]"] {
    min-width: calc(100vw - 40px) !important;
    width: calc(100vw - 40px) !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start;
  }
  .mm-testimonials [class*="h-[288px]"] {
    height: auto !important;
    min-height: auto !important;
  }
  .mm-testimonials [class*="text-center"] {
    text-align: left !important;
  }
  /* Testimonial cards on all page variants */
  .mm-testimonials .overflow-hidden {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .mm-testimonials .overflow-hidden > div[class*="w-[384px]"] {
    min-width: calc(100vw - 40px) !important;
    width: calc(100vw - 40px) !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start;
  }

  /* ─── §6 PRACTICE AREA CARDS ─── */
  .mm-practice-areas a[class*="w-[286px]"] {
    width: 100% !important;
    height: 360px !important;
    padding: 16px 16px 20px !important;
  }
  .mm-practice-areas .content-start {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 32px !important;
  }
  .pa-card-mobile-info {
    display: flex !important;
    position: relative;
    z-index: 2;
  }
  .mm-practice-areas [class*="text-center"] {
    text-align: left !important;
  }
  .mm-practice-areas .justify-center {
    justify-content: flex-start !important;
  }

  /* ─── §6b CITY PAGE SERVICE CARDS ─── */
  .mm-testimonials.section-bleed.bg-white .content-start {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  .mm-testimonials.section-bleed.bg-white [class*="w-[286px]"] {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
  }

  /* ─── §7 STATS ─── */
  .mm-stats > .flex {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .mm-stats [class*="flex-[1_0_0]"],
  .mm-stats [class*="flex-\[1_0_0\]"] {
    flex: none !important;
    width: 100% !important;
  }
  .mm-stats :is(p,h1,h2,h3,h4,h5,h6)[class*="text-[48px]"] {
    font-size: 24px !important;
    line-height: 1.1 !important;
  }
  .mm-stats [class*="text-center"] {
    text-align: left !important;
  }

  /* ─── §8 WHY CHOOSE US ─── */
  .mm-why-us > div {
    flex-direction: column !important;
    height: auto !important;
    gap: 16px !important;
  }
  .mm-why-us > div > div {
    flex: none !important;
    width: 100% !important;
  }
  .mm-why-us [class*="text-center"] {
    text-align: left !important;
  }

  /* ─── §9 BLOG ─── */
  .mm-blog > .flex {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px !important;
    padding-bottom: 16px !important;
  }
  .mm-blog > .flex > * {
    min-width: calc(100vw - 40px) !important;
    width: calc(100vw - 40px) !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start;
  }
  .mm-blog [class*="text-center"] {
    text-align: left !important;
  }
  .mm-blog .justify-center {
    justify-content: flex-start !important;
  }

  /* ─── §9a BLOG PAGE ─── */
  .mm-hero--blog {
    padding-top: 148px !important;
    padding-bottom: 80px !important;
  }
  .mm-hero--blog .items-center {
    align-items: flex-start !important;
  }
  .mm-hero--blog [class*="text-center"]:not(span) {
    text-align: left !important;
  }
  .mm-hero--blog :is(p,h1,h2,h3,h4,h5,h6)[class*="text-[64px]"] {
    font-size: 42px !important;
  }
  .mm-hero--blog :is(p,h1,h2,h3,h4,h5,h6)[class*="w-[526px]"] {
    width: 100% !important;
  }
  .mm-blog-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .mm-blog-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    padding-bottom: 4px !important;
  }
  .mm-blog-grid {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 32px !important;
  }
  .mm-blog-grid .blog-card {
    width: 100% !important;
  }
  .mm-blog-grid .blog-card-info {
    transform: none !important;
    position: relative !important;
  }
  .mm-hero-cta {
    flex-direction: column !important;
    width: 100% !important;
    gap: 20px !important;
  }
  .mm-hero-cta > a {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ─── §9b TEAM PROFILE PAGES ─── */
  .mm-profile {
    padding-left: 20px !important;
    padding-right: 20px !important;
    flex-direction: column !important;
    gap: 32px !important;
  }
  .mm-profile > * {
    width: 100% !important;
    flex: none !important;
  }

  /* ─── §9b2 ABOUT / OUR TEAM PAGE ─── */
  .mm-approach {
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 24px !important;
  }
  .mm-approach-cols {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .mm-approach-cols > * {
    flex: none !important;
    width: 100% !important;
  }
  .mm-approach > div[class*="h-[500px]"] {
    height: 280px !important;
  }
  .mm-team-grid {
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 24px !important;
  }
  .mm-team-grid .content-start {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
  }
  .mm-team-grid .team-card {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 286/320 !important;
  }
  .mm-team-grid .content-start > div[class*="w-[286px]"] {
    width: 100% !important;
    height: auto !important;
  }

  /* ─── §9c PA DETAIL SUBPAGES ─── */
  .mm-pa-stats {
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 24px !important;
  }
  .mm-pa-stats > .flex:not(.flex-col) {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .mm-pa-stats > .flex:not(.flex-col) > * {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .mm-pa-stats :is(p,h1,h2,h3,h4,h5,h6)[class*="w-[660px]"] { width: 100% !important; }
  .mm-pa-stats [class*="text-center"] { text-align: left !important; }

  .mm-pa-about {
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
  }
  .mm-pa-about > * {
    width: 100% !important;
    flex: none !important;
  }
  .mm-pa-about .flex-row {
    flex-direction: column !important;
  }
  .mm-pa-about .flex-row > * {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: auto !important;
  }
  .mm-pa-about .flex-row > div:has(> img),
  .mm-pa-about .flex-row > .overflow-hidden {
    height: 350px !important;
    min-height: 350px !important;
  }
  .mm-pa-about .flex-col[class*="px-"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .mm-pa-about .mm-about-img {
    height: 350px !important;
    min-height: 0 !important;
    max-height: 350px !important;
    overflow: hidden !important;
  }
  .mm-pa-about .mm-about-img > img {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top !important;
    inset: auto !important;
  }

  .mm-pa-related {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .mm-pa-related > .flex:not(.flex-col) {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .mm-pa-related > .flex:not(.flex-col) > a {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 320px !important;
  }
  .mm-pa-related > div[class*="w-[557px]"] { width: 100% !important; }
  .mm-pa-related :is(h1,h2,h3,p)[class*="whitespace-nowrap"] { white-space: normal !important; }

  .mm-pa-rows {
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 24px !important;
  }
  .mm-pa-rows .flex.gap-\[80px\]:not(.mm-logos-row) {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .mm-pa-rows .flex.gap-\[80px\] > * {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .mm-pa-rows .flex.gap-\[80px\] > div[class*="h-[262px]"] {
    height: 220px !important;
  }

  .mm-pa-cta {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .mm-pa-cta > div[class*="h-[372px]"] {
    height: 220px !important;
    width: 100% !important;
  }
  .mm-pa-cta div[class*="w-[820px]"],
  .mm-pa-cta div[class*="w-[540px]"],
  .mm-pa-cta :is(p,h1,h2,h3,h4,h5,h6)[class*="w-[526px]"] {
    width: 100% !important;
  }
  .mm-pa-cta .flex:not(.flex-col) {
    flex-direction: column !important;
    width: 100% !important;
  }
  .mm-pa-cta .flex:not(.flex-col) > a { width: 100% !important; }

  /* ─── §9d PRACTICE AREAS LIST PAGE ─── */
  .mm-quote-bar {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .mm-pa-grid {
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 24px !important;
  }
  .mm-pa-grid > div:first-child {
    width: 100% !important;
  }
  .mm-pa-grid .content-start {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
  }
  .mm-pa-grid a[class*="w-[286px]"] {
    width: 100% !important;
    height: 360px !important;
  }
  .mm-pa-grid > .flex:not(.flex-col) {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .mm-pa-grid > .flex:not(.flex-col) > a {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .mm-cta-split {
    flex-direction: column !important;
  }
  .mm-cta-split > * {
    width: 100% !important;
    flex: none !important;
  }
  .mm-cta-split > [class*="aspect-"] {
    aspect-ratio: auto !important;
    height: 350px !important;
  }
  .mm-cta-split > .flex-col {
    padding-left: 20px !important;
    padding-right: 20px !important;
    height: auto !important;
  }
  .mm-cta-split.bg-\[\#e9e5e2\] > [class*="aspect-"] {
    order: -1 !important;
  }

  /* ─── §9d CONTACT PAGE ─── */
  .mm-contact-cols {
    flex-direction: column !important;
    padding: 125px 20px 60px !important;
    gap: 40px !important;
  }
  .mm-contact-left,
  .mm-contact-right {
    display: contents !important;
  }
  .mm-contact-left > * { order: 1 !important; }
  .mm-contact-right > * { order: 2 !important; }
  .mm-contact-info {
    order: 3 !important;
    width: 100% !important;
  }
  .mm-contact-cols form > div {
    flex-direction: column !important;
  }
  .mm-contact-cols form > div > div {
    flex: none !important;
    width: 100% !important;
  }
  .mm-pa-carousel {
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow-x: hidden !important;
  }
  .mm-pa-carousel #pa-carousel-track {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .mm-pa-carousel #pa-carousel-track > a {
    scroll-snap-align: start;
    min-width: calc(100vw - 40px) !important;
    width: calc(100vw - 40px) !important;
    height: 320px !important;
  }

  .mm-contact--compact {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  /* ─── §10 CONTACT FORM ─── */
  .mm-contact {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .mm-contact form > div {
    flex-direction: column !important;
  }
  .mm-contact form > div > div {
    flex: none !important;
    width: 100% !important;
  }

  /* ─────────────────────────────────────────────────────
     §11  FOOTER (single column, full-width, px-20)
     ───────────────────────────────────────────────────── */
  footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 70px !important;
  }
  /* 4-column row → single column */
  footer > div:first-child {
    flex-direction: column !important;
    gap: 24px !important;
    padding-bottom: 40px !important;
  }
  /* Each column → full width */
  footer > div:first-child > div {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Copyright bar → stack and wrap */
  footer > div:last-child {
    flex-direction: column !important;
    gap: 8px !important;
    white-space: normal !important;
  }
  /* Map image → full-width */
  footer img[alt*="map"] {
    width: 100% !important;
    border-radius: 12px !important;
  }

  /* ─────────────────────────────────────────────────────
     PA DETAIL PAGES — numbered list rows → stack
     ───────────────────────────────────────────────────── */
  .flex.gap-\[80px\] {
    flex-direction: column !important;
    gap: 20px !important;
  }
  [class*="h-\[262px\]"][class*="rounded-"] {
    height: 200px !important;
    width: 100% !important;
    flex: none !important;
  }

  /* ─────────────────────────────────────────────────────
     CTA SECTION (image smaller on mobile)
     ───────────────────────────────────────────────────── */
  [class*="h-\[372px\]"] {
    height: 200px !important;
    width: 100% !important;
  }

  /* ─────────────────────────────────────────────────────
     BUTTONS (full-width on mobile)
     ───────────────────────────────────────────────────── */
  [class*="w-\[258px\]"] { width: 100% !important; }
  .flex.gap-\[24px\]:has(> [class*="w-\[258px\]"]) {
    flex-direction: column !important;
    width: 100% !important;
  }

  /* ─────────────────────────────────────────────────────
     TEAM CARDS (full-width)
     ───────────────────────────────────────────────────── */
  .team-card {
    width: 100% !important;
    height: 280px !important;
  }

  /* ── Team profile sidebar → stack ── */
  .flex.gap-\[52px\]:not(.mm-logos-row) {
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* ─────────────────────────────────────────────────────
     CONSULT BOX: always expanded on mobile
     ───────────────────────────────────────────────────── */

  /* ─────────────────────────────────────────────────────
     BLOG TABS → horizontal scroll
     ───────────────────────────────────────────────────── */
  .flex.gap-\[8px\]:has(> [class*="rounded-\[100px\]"]) {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  /* ─────────────────────────────────────────────────────
     CARD HOVER: disable on touch devices
     ───────────────────────────────────────────────────── */
  .card-link:hover { transform: none !important; box-shadow: none !important; }
  .card-hover-btn { display: none !important; }

  /* ─────────────────────────────────────────────────────
     MOBILE MENU OVERLAY
     ───────────────────────────────────────────────────── */
  #mobile-menu {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 100vh;
    height: 100dvh;
    background: rgba(20, 20, 20, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 10000;
    flex-direction: column;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
  }
  #mobile-menu.open { opacity: 1; visibility: visible; }
  #mobile-menu a {
    display: block;
    padding: 14px 0;
    color: rgba(255,255,255,0.85);
    font-family: var(--font-heading);
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .mobile-submenu { display: none; }
  .mobile-submenu.open { display: block; }
  .mobile-submenu a {
    padding: 10px 0 10px 20px !important;
    font-size: 15px !important;
    opacity: 0.7;
    border-bottom: none !important;
  }
  #mobile-menu-close {
    align-self: flex-end;
    padding: 8px;
    margin-bottom: 16px;
    cursor: pointer;
  }
  body.menu-open { overflow: hidden !important; }
}

/* ─── Team grid: photo cards ────────────────────────── */
/* All geometry lives here (not in Tailwind) so the card is
   fully laid out the instant site.css loads — no FOUC flash. */
.team-card {
  position: relative;
  overflow: hidden;
  height: 320px;
  width: 286px;
  border-radius: var(--radius-card);
  flex-shrink: 0;
}
.team-card-overlay {
  position: absolute !important;
  inset: 0;
  border-radius: var(--radius-card);
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.1) 50%, transparent);
  pointer-events: none;
  z-index: 1 !important;
}
.team-photo-wrap {
  position: absolute !important;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  pointer-events: none;
  z-index: 0 !important;
}

/* ─── Nav width fix for sub-1440 viewports ──────────── */
/* handled in nav.html directly */