/* ==========================================================================
   HOMEPAGE MOBILE FIXES — the Growth and Work-Example sections were built
   with inline styles (fixed aspect-ratio / percentage widths / absolute
   image) that only work at desktop widths. This file relaxes them below
   760px so text stays readable and nothing overflows or gets crushed.
   ========================================================================== */

@media (max-width: 760px) {
  #growth {
    aspect-ratio: auto !important;
    padding: 64px 0 !important;
    min-height: 0;
  }
  #growth .section__inner > div {
    max-width: 100% !important;
    padding-left: 0 !important;
  }

  #work-example .card > img {
    display: none !important;
  }
  #work-example .card {
    padding: 28px !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    background-color: var(--dh-card-bg-mid);
    background-image:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.12'/%3E%3C/svg%3E"),
      linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 24%),
      radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.02) 0%, transparent 40%),
      linear-gradient(145deg, var(--dh-card-bg-start) 0%, var(--dh-card-bg-mid) 47%, var(--dh-card-bg-end) 100%);
  }
  #work-example .card > div {
    max-width: none !important;
    margin-top: 0 !important;
  }
}