/* Attorney bio hero photo: name/role/description card overlaid on the parallax photo, bottom-left
   corner. Reuses .mxd-hero-05-videoblock__descr as-is for the glass look (same card the
   homepage's Eric Subin hero photo already uses - background, border, blur, light/dark text
   color are all inherited from it) - this only adds the absolute positioning, since that class
   normally relies on a flex layout for placement and .mxd-divider (its parent here) isn't one. */
.mxd-attorney-hero__descr {
  position: absolute;
  left: 2rem;
  right: 2rem;
  bottom: 2rem;
  max-width: 46rem;
}
@media only screen and (min-width: 768px) {
  .mxd-attorney-hero__descr {
    left: 3rem;
    right: auto;
    bottom: 3rem;
  }
}

/* Attorney hero on mobile: the overlay card's own 3rem padding plus the h2 name at
   main.css's default mobile size (4.4rem) added up to nearly half the height of the
   460px-tall photo, leaving too little of the photo visible and the text feeling
   cramped against it. Below 768px only (tablet/desktop keep main.css's original
   sizing untouched): shrink the card's own padding and type scale, and give the
   photo itself a bit more room via the .attorney-hero-divider marker added on this
   page's <div class="mxd-divider"> - scoped there rather than the shared
   .mxd-divider/.mxd-divider__image height every other page's hero photo also
   uses, so nothing else on the site is affected. */
@media only screen and (max-width: 767px) {
  /* .mxd-section-inner-headline's 13rem padding-top exists to clear the header,
     which is position: absolute (out of flow) rather than fixed - main.css sizes
     that gap for every inner page using this headline, but the header itself
     (padding-top 3rem + the 4.8rem logo) only needs about 7.8rem to clear on
     mobile. Tightened here via the .attorney-hero-headline marker (this page's
     <div class="mxd-section mxd-section-inner-headline">) rather than the shared
     class, so every other inner page's headline spacing is untouched. */
  .attorney-hero-headline {
    padding-top: 9rem;
  }
  .attorney-hero-divider,
  .attorney-hero-divider .mxd-divider__image {
    height: 560px;
  }
  .mxd-attorney-hero__descr {
    padding: 1.8rem 2rem;
  }
  .mxd-attorney-hero__descr h2 {
    font-size: 2.6rem;
  }
  .mxd-attorney-hero__descr #attorneyHeroRole {
    font-size: 1.4rem;
  }
  .mxd-attorney-hero__descr #attorneyHeroTagline {
    font-size: 1.3rem;
    line-height: 1.4;
  }
}

/* Bebas Neue (--_font-secondary, the site's tag font per .tag-default in main.css) has no
   true lowercase forms - any text set in it reads as all-caps no matter its actual HTML
   casing, which is why every tag/badge sitewide ("Concept", "As Seen On", practice-area
   tags, etc.) was showing as all-caps instead of the Title Case authored in the markup.
   Switch tags to the body font instead, site-wide, so they render with normal casing. */
.tag-default {
  font-family: var(--_font-default);
}

/* Attorney bio section titles (Background/Education/Admissions/Pro Bono/Approach):
   main.css centers .mxd-pinned-universal__static-inner below the 1200px breakpoint
   (it only switches to left-aligned once the sticky behavior kicks in on desktop) -
   left-align these on every screen size instead, per request. Scoped to
   .mxd-project__subtitle rather than the shared -static-inner wrapper itself so the
   other pages reusing that pinned-title component (about-me.html) keep their own
   centered-on-mobile look untouched. */
.mxd-project__subtitle {
  text-align: left;
}

/* Attorney name: same weight-mismatch fix as .hero-05-title - h2's --fw-medium
   is 600 in light mode vs 500 in dark, which made the name noticeably bigger/
   bolder in light mode than in dark. Pinned to the dark-mode value so it's the
   same size in both themes. */
#attorneyHeroName {
  font-weight: var(--fw-medium--dark);
}

/* Custom background: solid dark base with large, more visible blurred gradient blotches (dark mode only) */
:root[color-scheme="dark"] body {
  background-color: #070707;
  background-image:
    radial-gradient(ellipse 110rem 90rem at 6% 8%, rgba(16, 52, 100, 0.90), transparent 72%),
    radial-gradient(ellipse 96rem 80rem at 90% 55%, rgba(16, 52, 100, 0.82), transparent 72%),
    radial-gradient(ellipse 106rem 88rem at 18% 74%, rgba(16, 52, 100, 0.78), transparent 72%),
    radial-gradient(ellipse 100rem 82rem at 88% 90%, rgba(16, 52, 100, 0.85), transparent 72%);
  background-repeat: no-repeat;
}

/* Light mode: white base with the same blue blotches, softened for a light background */
:root[color-scheme="light"] body {
  background-color: #FFFFFF;
  background-image:
    radial-gradient(ellipse 110rem 90rem at 6% 8%, rgba(16, 52, 100, 0.16), transparent 72%),
    radial-gradient(ellipse 96rem 80rem at 90% 55%, rgba(16, 52, 100, 0.14), transparent 72%),
    radial-gradient(ellipse 106rem 88rem at 18% 74%, rgba(16, 52, 100, 0.13), transparent 72%),
    radial-gradient(ellipse 100rem 82rem at 88% 90%, rgba(16, 52, 100, 0.15), transparent 72%);
  background-repeat: no-repeat;
}

/* Two of the page-wide body blotches used to bleed into the Legal Team banner (one - "12% 40%"
   - into the bottom of the row/top of the About text right below it, the other - "94% 16%" -
   into the top-right corner of the row itself, behind the last attorney). Both have been pulled
   out of the page-wide list above and re-centered here instead, scoped to just the Services
   Pinned Image section further down the page - same sizes/colors, just relocated so they only
   ever show up behind the services block, never behind the attorneys row or the text above it. */
:root[color-scheme="dark"] .services-pinned-section {
  position: relative;
  background-image:
    radial-gradient(ellipse 104rem 86rem at 15% 45%, rgba(16, 52, 100, 0.72), transparent 72%),
    radial-gradient(ellipse 100rem 82rem at 85% 20%, rgba(16, 52, 100, 0.78), transparent 72%);
  background-repeat: no-repeat;
}
:root[color-scheme="light"] .services-pinned-section {
  position: relative;
  background-image:
    radial-gradient(ellipse 104rem 86rem at 15% 45%, rgba(16, 52, 100, 0.12), transparent 72%),
    radial-gradient(ellipse 100rem 82rem at 85% 20%, rgba(16, 52, 100, 0.13), transparent 72%);
  background-repeat: no-repeat;
}

/* Liquid glass material (blur+saturation, refraction, specular edge, adaptive
   tint, squircle corners, spring hover) now lives in css/liquid-glass.css,
   loaded right after this file - it targets all the same card/section panels
   listed there (trophy block, footer card, article/pricing/demo cards, etc.)
   plus the floating nav buttons, so nothing else needs to change here. */

/* Hero videoblock now holds a static image instead of the autoplay demo video */
.mxd-hero-05-videoblock__video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Landmark result description: wider than the default 250px caption so the sentence isn't cramped/cut */
.hero-05-landmark-descr {
  max-width: 40rem;
}

/* Landmark counter ($102,000,000.00): flex items default to a min-width equal to their
   content's width, and this unbroken currency string has no spaces to wrap at - so without
   this, the CountUp animation forces the whole worksblock wider on small screens, pushing
   the rest of the hero layout. Letting the chain shrink and allowing the number itself to
   wrap if it ever runs out of room keeps the count-up contained instead. */
.hero-05-worksblock__descr,
.hero-05-worksblock__descr .mxd-counter {
  min-width: 0;
}
#stats-counter-landmark {
  max-width: 100%;
  overflow-wrap: anywhere;
}
@media only screen and (max-width: 479px) {
  #stats-counter-landmark {
    font-size: 3.6rem;
  }
}

/* Hero headline rating: 4.7 score, 5 stars, small muted disclaimer */
.hero-05-rating {
  gap: 0.6rem;
}
.hero-05-rating > p:first-child {
  font-weight: 700;
  color: var(--t-bright);
}
.mxd-avatars__item.no-bg {
  background-color: transparent;
}
/* Google icon: 50% smaller than the default .small avatar size (4.6rem / 5.6rem) */
.hero-05-headline__avatars .mxd-avatars__item.small {
  width: 2.3rem;
  height: 2.3rem;
}
@media only screen and (min-width: 768px) {
  .hero-05-headline__avatars .mxd-avatars__item.small {
    width: 2.8rem;
    height: 2.8rem;
  }
}
.hero-05-rating__stars {
  display: flex;
  gap: 0.3rem;
  font-size: 1.6rem;
  color: #FF8C00;
}
@media only screen and (min-width: 1200px) {
  .hero-05-rating__stars {
    justify-content: flex-end;
  }
}
.mxd-avatars-group__text .hero-05-rating__descr {
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--t-muted);
  max-width: 22rem;
}

/* Client Care hero title is longer than the demo copy it replaced - let it wrap
   instead of overflowing past the hidden edge of .mxd-hero-04__wrap */
.hero-04-title__item {
  white-space: normal;
}

/* Point subtitle marker: solid dot standing in for the sparkle icon */
.mxd-point-subtitle__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: currentColor;
  flex: none;
}

/* Decorative typeface demo: applied to "and results" in the hero title */
.hero-05-title__item-decorative {
  font-family: var(--_font-decorative);
  font-style: italic;
}

/* Hero title: pin the weight to the dark-mode value instead of the theme's --fw-medium
   (600 light / 500 dark). At this size (up to 12rem) that 100-unit jump makes the light-mode
   glyphs noticeably wider, which was pushing the headline into an extra line and breaking the
   layout next to the trophy block. Keeping the same numeric weight in both themes keeps the
   title the same visual size in light mode as it already is in dark mode. */
.hero-05-title {
  font-weight: var(--fw-medium--dark);
}

/* Header logo: new wordmark image (280x104, white artwork on transparent) replaces the old square icon + text.
   Sized 50% bigger than the original 3.2rem/4rem (4.8rem/6rem) per request. */
.mxd-logo__image {
  width: auto;
  height: 4.8rem;
}
@media only screen and (min-width: 768px) {
  .mxd-logo__image {
    height: 6rem;
  }
}
/* The logo artwork is white-only, so invert it to black in light mode where the header background is light */
:root[color-scheme="light"] .mxd-logo__image {
  filter: brightness(0);
}

/* Landmark result counter: keep it in the principal typeface instead of the secondary Bebas Neue Pro.
   Weight is pinned to the dark-mode value (var(--fw-bold) is 800 in light mode vs 700 in dark) -
   the extra weight was rendering this long currency string visibly wider/bigger in light mode,
   the same wrapping issue the min-width:0 rule above already fights. */
#stats-counter-landmark {
  font-family: var(--_font-accent);
  font-weight: var(--fw-bold--dark);
}

/* "For over three generations..." card over the photo: liquid glass recipe and the
   over-a-dark-photo tint boost both come from css/liquid-glass.css now. This just
   keeps the layout: the photo is an absolutely-positioned background, so this card
   is the only element in the flex column - push it to the bottom-right corner. */
.mxd-hero-05-videoblock__descr {
  margin-top: auto;
  margin-left: auto;
}
/* main.css hardcodes this paragraph to a permanent dark color regardless of theme - make it theme-aware
   so it still reads once the glass itself switches between light and dark tints */
.mxd-hero-05-videoblock__descr p {
  color: var(--t-bright);
}

/* Press logos marquee caption: small muted uppercase label, matches the site's caption style */
.press-logo-caption {
  display: flex;
  justify-content: center;
  margin-bottom: 2.4rem;
}

/* Press logos marquee ("as seen on"): plain logos, no card/background behind them */
.marquee__item.press-logo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 4rem;
}
@media only screen and (min-width: 768px) {
  .marquee__item.press-logo {
    margin-right: 7rem;
  }
}
.marquee__item.press-logo img {
  width: auto;
  height: 4.4rem;
  object-fit: contain;
}
@media only screen and (min-width: 768px) {
  .marquee__item.press-logo img {
    height: 5.6rem;
  }
}
/* The artwork is white-only, so invert it to black in light mode so it stays visible on the page background */
:root[color-scheme="light"] .marquee__item.press-logo img {
  filter: brightness(0);
}

/* Pinned services images: fill the whole item instead of a fixed-height auto-width strip */
.mxd-pinned__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Award badges row on the hero photo card. The card caps out at 460-535px (see
   .mxd-hero-05-videoblock__descr in main.css), and the three logos have wildly different aspect
   ratios (one is a near-square medallion, one is a wide wordmark) - sizing each chip off its own
   image's height let the wordmark blow past the card width and wrap the row into a stack. Fixed
   equal-size chips with object-fit: contain keep all three on one line regardless of their native
   proportions. One of the three logos ships with a solid white square background instead of
   transparent, so it'll show that edge here since the chips have no background of their own. */
.mxd-hero-videoblock__awards {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
  gap: 1.2rem;
}
.mxd-hero-videoblock__awards .award-badge {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 10.5rem;
  height: 7.2rem;
}
/* The card is only 460px wide at this breakpoint (see main.css) - a lot more room so three
   bigger, more widely-spaced badges fit side by side without wrapping. */
@media only screen and (min-width: 1200px) {
  .mxd-hero-05-videoblock__descr {
    max-width: 700px;
  }
}
/* .mxd-hero-05__videoblock img (main.css) targets every <img> anywhere inside the hero photo
   block - absolute, centered, stretched to 100% of its positioned ancestor. That's meant for the
   single background photo, but these badge images live inside that same block, so without this
   reset each one stretches to fill the whole card and they end up stacked on top of each other. */
/* Construction Accidents practice-area tags: both the Swiper carousel and the native
   drag-to-scroll track ended up rendering the tag text soft/blurry, so this drops any
   transform/scroll trickery entirely - it's the same plain flex-wrap tag list the other
   three services already use, just with all but the first 3 tags hidden until "Ver más"
   is clicked (see the .mxd-pinned__tags-toggle handler in app.js). */
.mxd-pinned__tag-extra {
  display: none;
}
.mxd-pinned__tags-expandable.is-expanded .mxd-pinned__tag-extra {
  display: inline-flex;
}
.mxd-pinned__tags-toggle {
  cursor: pointer;
}

/* Marquee "Meet our elite team" / "Trial Attorney" caption cards: main.css pairs the fixed
   --accent background (navy blue in both themes here) with --t-opp-bright, which is white in
   light mode but flips to near-black (#161616) in dark mode - that flip assumes --accent itself
   turns light in dark mode, which it doesn't on this site, so the caption text and the "Meet our
   elite team" button became black-on-blue and unreadable in dark mode. --pt-t-light-bright is
   the theme's fixed white swatch (never flips), which is what a permanently-blue card needs; the
   button's class changed from "opposite" to "permanent" in the HTML for the same reason. */
.marquee__item.has-caption p {
  color: var(--pt-t-light-bright);
}

/* Footer logo above the "Practice Areas / Client Care / ..." nav column. Reuses the header's
   .mxd-logo / .mxd-logo__image (same light-mode-invert-to-black rule above already applies here
   too) since .footer-blocks__card gets the same light/dark glass background as the page itself,
   not an inverted footer theme - just needed spacing before the nav list below it. */
.footer-blocks__logo {
  margin-bottom: 2.4rem;
}
/* Footer logo at 2x the header's size (3.2rem/4rem) - a footer-only override so the header
   logo stays untouched. */
.footer-blocks__logo .mxd-logo__image {
  height: 6.4rem;
}
@media only screen and (min-width: 768px) {
  .footer-blocks__logo .mxd-logo__image {
    height: 8rem;
  }
}

/* Footer social icons (Facebook/LinkedIn/Instagram) below the Contact address list. Reuses the
   same round outline button already used for the slider nav arrows (team.html testimonials)
   instead of introducing new icon-button styling - just needed the row layout. */
.footer-blocks__social-icons {
  display: flex;
  gap: 1.2rem;
  margin-top: 2rem;
}

/* The landmark result counter ("$102,000,000.00") is a much longer string than the short
   stats numbers (e.g. "40+") .mxd-stats-number's fixed per-breakpoint font-size was designed
   for - at those sizes it overflows its box on plenty of viewport widths between breakpoints.
   Sizing it off the box's own inline size (container query units) instead of the viewport
   means it always scales to fit exactly, at any screen size, not just at the four breakpoints
   main.css happens to define. */
.hero-05-worksblock__descr {
  container-type: inline-size;
}
#stats-counter-landmark {
  font-size: clamp(2rem, 11cqi, 9rem);
  white-space: nowrap;
}

/* Extra breathing room between the press-logos marquee and the lawyers banner below it */
.legal-team-section {
  margin-top: 6rem;
}
@media only screen and (min-width: 768px) {
  .legal-team-section {
    margin-top: 8rem;
  }
}

/* "Meet Our Trial Team" banner (below the press-logos marquee): a full-bleed row of 5
   attorney cards. No background color of its own - it sits directly on the page's own
   background (the site's existing dark/navy blotch pattern from custom.css above) instead of
   a boxed color panel, so there's nothing behind the cutouts but the page itself. */
.mxd-lawyers-banner {
  position: relative;
}
.mxd-lawyers-banner__row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  /* every card is forced to the same height (min-height below), regardless of each photo's own
     aspect ratio, so all five attorneys read as the same size and stand at the same level. */
  align-items: stretch;
  width: 100%;
}

.mxd-lawyer-card {
  position: relative;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-height: 30rem;
  overflow: hidden;
  cursor: pointer;
  outline: none;
}
@media only screen and (min-width: 768px) {
  .mxd-lawyer-card {
    min-height: 42rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mxd-lawyer-card {
    min-height: 52rem;
  }
  /* center card (3rd of 5) is the protagonist - wider than the four side cards, same height.
     Kept close to 1 (not much wider) because each photo is already sized to nearly hug its own
     card at this aspect ratio - the four side cards already sit almost shoulder-to-shoulder, so
     any extra width here just becomes empty space framing Eric on both sides. */
  .mxd-lawyer-card.is-featured {
    -webkit-box-flex: 1.08;
    -moz-box-flex: 1.08;
        -ms-flex: 1.08 1 0px;
            flex: 1.08 1 0;
  }
}
@media only screen and (min-width: 1600px) {
  .mxd-lawyer-card {
    min-height: 60rem;
  }
}

/* Static B&W photo <-> hover video crossfade. grayscale() is applied here (not left to the
   source asset) so a color replacement photo still renders black & white automatically.
   object-fit: contain so the full attorney photo is always shown in full - no pixel of any
   photo is ever cropped. All cards share the same box size (min-height above), so contain
   scales each photo up to the largest size that fits inside that shared box without cropping;
   bottom-aligned so everyone stands on the same ground line, with any leftover space showing
   above their head instead of at their feet. */
.mxd-lawyer-card__photo,
.mxd-lawyer-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}
.mxd-lawyer-card__photo {
  z-index: 1;
  filter: grayscale(100%);
  transition: opacity 0.3s ease;
}
.mxd-lawyer-card__video {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* unlike the photo, the hover video always fully covers the card - no letterboxing - since
     it's B-roll footage rather than a portrait that must stay uncropped. */
  object-fit: cover;
  object-position: 50% 50%;
}
/* Real per-attorney clips (flagged videoUncropped, e.g. Simon's) show the full frame instead
   of the generic cover crop above - only on hover, so it doesn't affect the at-rest sizing. */
.mxd-lawyer-card__video--uncropped {
  object-fit: contain;
  object-position: 50% 100%;
}
.no-touch .mxd-lawyer-card:hover .mxd-lawyer-card__photo,
.mxd-lawyer-card.is-active .mxd-lawyer-card__photo,
.mxd-lawyer-card:focus .mxd-lawyer-card__photo {
  opacity: 0;
}
.no-touch .mxd-lawyer-card:hover .mxd-lawyer-card__video,
.mxd-lawyer-card.is-active .mxd-lawyer-card__video,
.mxd-lawyer-card:focus .mxd-lawyer-card__video {
  opacity: 1;
}

/* Name/role overlay: the background-color-matching shadow wash is up permanently (grounds the
   still photo against the page background even at rest, before the video ever plays), while the
   name/role text underneath it still only fades/slides up on hover - same as before, just moved
   from the overlay container onto the text itself. Text colors are the theme's permanent-white/
   permanent-dim tokens (not --t-bright/--t-muted, which flip to dark text in light mode) since
   this banner is always dark regardless of the site's light/dark toggle. */
.mxd-lawyer-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 2.4rem 1.6rem 2rem;
  text-align: center;
  pointer-events: none;
}
/* The dark scrim behind the name/role only makes sense against the site's dark theme - in
   light mode it read as a stray dark smudge sitting on an otherwise white page, so it now
   matches the light mode's own background color there instead (effectively invisible), the
   same way the dark-mode version matches the dark background. */
:root[color-scheme="dark"] .mxd-lawyer-card__overlay {
  background: linear-gradient(to top, rgba(7, 7, 7, 0.85), transparent);
}
:root[color-scheme="light"] .mxd-lawyer-card__overlay {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.85), transparent);
}
.mxd-lawyer-card__name,
.mxd-lawyer-card__role {
  opacity: 0;
  -webkit-transform: translateY(1.2rem);
     -moz-transform: translateY(1.2rem);
      -ms-transform: translateY(1.2rem);
          transform: translateY(1.2rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.no-touch .mxd-lawyer-card:hover .mxd-lawyer-card__name,
.mxd-lawyer-card.is-active .mxd-lawyer-card__name,
.mxd-lawyer-card:focus .mxd-lawyer-card__name,
.no-touch .mxd-lawyer-card:hover .mxd-lawyer-card__role,
.mxd-lawyer-card.is-active .mxd-lawyer-card__role,
.mxd-lawyer-card:focus .mxd-lawyer-card__role {
  opacity: 1;
  -webkit-transform: translateY(0);
     -moz-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
.mxd-lawyer-card__name {
  color: var(--pt-t-light-bright);
  margin-bottom: 0.4rem;
}
.mxd-lawyer-card__role {
  color: rgba(255, 255, 255, 0.65);
}
/* Name/role text needs to flip to dark in light mode too, now that its scrim (above) is
   light instead of black there - white text on a near-white scrim would be unreadable. */
:root[color-scheme="light"] .mxd-lawyer-card__name {
  color: var(--pt-t-dark-bright);
}
:root[color-scheme="light"] .mxd-lawyer-card__role {
  color: rgba(22, 22, 22, 0.65);
}

/* Below desktop: 5-up edge-to-edge is too cramped, so the row becomes a horizontal,
   snap-scrolling filmstrip instead (tap a card to trigger its video/overlay, per the
   .is-active rules above). */
@media only screen and (max-width: 1199.98px) {
  .mxd-lawyers-banner__row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .mxd-lawyer-card {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
        -ms-flex: 0 0 70%;
            flex: 0 0 70%;
    scroll-snap-align: center;
  }
  .mxd-lawyer-card.is-featured {
    flex: 0 0 80%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 1199.98px) {
  .mxd-lawyer-card {
    flex: 0 0 42%;
  }
  .mxd-lawyer-card.is-featured {
    flex: 0 0 52%;
  }
}

.mxd-hero-videoblock__awards .award-badge img {
  position: static;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  -webkit-transform: none;
     -moz-transform: none;
      -ms-transform: none;
          transform: none;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* 3D trophy (three.js canvas): same footprint the old static PNG had. Position: relative so
   the poster <img> (shown while the .glb streams in) and the injected <canvas> can stack on
   top of each other and cross-fade; cursor hints that it's draggable. */
.mxd-trophy-3d {
  position: relative;
  display: block;
  width: 100%;
  height: 30rem;
  cursor: grab;
  touch-action: pan-y;
}
.mxd-trophy-3d:active {
  cursor: grabbing;
}
/* Attorney bio Education / Admissions / Professional Associations sections: each its own
   project block (same layout as Background/Approach), cards reusing the exact "Our tech stack"
   card markup from index-software-development-company.html (.mxd-tech-stack-cards__item/-inner/
   -logo/-title, built by the JS in attorneys.html) - same glass-tint card, colored logo
   square, and caption. That page's captions are one short name ("Angular", "PHP"); an
   institution name is much longer, so this fixes the caption to wrap inside the card instead of
   overflowing it (a flexbox item needs min-width: 0 to let its text wrap rather than stay on one
   line). */
.mxd-credentials-cards .mxd-tech-stack-cards__title {
  min-width: 0;
}
.mxd-credentials-cards .mxd-tech-stack-cards__title p {
  overflow-wrap: break-word;
}

/* The two-per-row grid (col-12 col-md-6) and the logo square itself both came
   from the tech-stack markup as-is, sized for one-word captions ("Angular",
   "PHP") next to a small icon. A full sentence ("Admitted to the United
   States District Court for the Southern District of New York") barely fits
   even in a full-width card - squeezed into half a row, the flexbox row had
   to shrink something to make space, and the logo square (never given
   flex-shrink: 0) took the hit: it collapsed from its intended 8rem x 8rem
   square down to a thin, cropped sliver instead of wrapping the text. One
   full-width card per row plus a fixed-size logo fixes both. */
.mxd-credentials-cards .mxd-tech-stack-cards__item {
  flex: 0 0 100%;
  max-width: 100%;
}
.mxd-credentials-cards .mxd-tech-stack-cards__logo {
  flex-shrink: 0;
}

/* Credential cards' hover (the glass fill scaling up slightly on
   .mxd-tech-stack-cards__inner:hover::before, main.css) was jumping instantly
   with no animation at all, not just running fast: css/liquid-glass.css sets
   its own `transition` shorthand on this same ::before (for the box-shadow/
   background-color/backdrop-filter it adds), and a `transition` shorthand
   replaces the WHOLE transition-property list rather than adding to it - so
   `transform` silently dropped out of the transitioned properties, and the
   hover's scale() applied with zero transition. This restores transform to
   the list (at a slower, explicit duration - the actual ask) alongside
   liquid-glass.css's own transitions, instead of overriding just the
   duration of properties that no longer included the one that mattered. */
.mxd-credentials-cards .mxd-tech-stack-cards__inner::before {
  transition:
    transform 1.4s var(--_animbezier),
    box-shadow 0.5s var(--lg-spring),
    background-color 0.5s var(--lg-spring),
    backdrop-filter 0.4s ease;
}

.mxd-trophy-3d canvas {
  position: absolute;
  inset: 0;
  display: block;
}
.mxd-trophy-3d__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .mxd-trophy-3d {
    height: 38rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mxd-trophy-3d {
    height: 44rem;
  }
}

/* Footer breathing room: main.css gives .mxd-footer its own padding-bottom
   (space after its content) but nothing before it, so it sits flush against
   whatever section ends the page - on every real page here that's the
   "Let's talk about your case/project!" CTA promo, with zero gap between the
   two. .mxd-footer is the one fixed, shared element (same markup, same
   position right after </main>) on every page, so adding the gap here once
   is what keeps it identical everywhere, rather than hand-tuning the CTA
   section on each page. Mirrors the footer's own padding-bottom scale
   (3rem / 6rem) so the space above and below the footer content matches. */
.mxd-footer {
  margin-top: 3rem;
}
@media only screen and (min-width: 768px) {
  .mxd-footer {
    margin-top: 6rem;
  }
}

/* Scroll-to-top button: main.css made it work against ANY backdrop via a
   near-invisible 3%-opacity background plus mix-blend-mode: difference on a
   hardcoded white icon color - a trick that only works when the button has
   basically no background of its own. Now that liquid-glass.css gives it a
   real, theme-aware frosted glass panel (tint + border + shadow), that
   difference blend fights the panel's own fill instead of just inverting
   against the page behind it, which was making the button unreadable/
   effectively invisible. Same theme-aware icon color and normal blend mode
   every other glass button (.btn-mobile-icon, etc.) already uses. */
.btn-to-top {
  color: var(--t-bright);
  mix-blend-mode: normal;
}