/* ===========================================================================
   WHO WE HELP — page styles                                added 2026-09-24
   Copy source: "Media tamer web copy .docx", WHO WE HELP.
   Only what is unique to this page. The hero and its photo frame, the
   entrance animation and the closing CTA all come from assets/mt-shared.css,
   which loads first.
   =========================================================================== */

/* --- 01 hero --------------------------------------------------------------
   One button, so the row is spaced with padding rather than the margin
   utility the build ships. Tailwind's pt-8 does not survive this build's
   purge - only pt-7 does, at 28px - so the 32px is set here to match the
   spacing every other hero uses. */
.mt-wwh-hero-cta {
  padding-top: 32px
}

/* --- 02 industry directory -----------------------------------------------
   Four category columns. It is built as a grid of groups rather than a fixed
   layout so the wireframe's 20+ industries can land in the same markup: the
   columns keep their width and the lists simply grow. */








/* Rev 5 §10 — the seven categories carry §06's descriptions, and the
   specific industries under them are plain text, not links. They had
   nowhere of their own to point; the home page's tiles are unlinked for
   the same reason. */








/* the directory is short of the wireframe's target and says so */
.mt-wwh-ph {
  margin: 26px 0 0;
  max-width: 60rem;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mt-text-muted)
}

.mt-wwh-ph strong {
  font-weight: 800;
  color: var(--mt-navy)
}

/* --- 03 featured spotlights ----------------------------------------------
   Three across, photo above copy. The reveal sits on .mt-wwh-spot-cell and
   the hover on the card inside it, so the two never fight over transform. */
.mt-wwh-spots {
  margin-top: 52px;
  display: grid;
  gap: 22px
}

@media (min-width:720px) {
  .mt-wwh-spots {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

.mt-wwh-spot-cell {
  height: 100%
}

/* No overflow:hidden on the card. An outer box-shadow paints outside the
   border box, so a clip here would erase the hover shadow completely - the
   image is clipped by its own figure instead. */
.mt-wwh-spot {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 20px;
  border: 1px solid var(--mt-border);
  background: #fff;
  will-change: transform;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease
}

/* the lift's shadow, faded rather than transitioned: a moving 48px blur
   repaints the whole card every frame, opacity composites. ::after is already
   taken by the image wash, so this hangs off the card's ::before. */
.mt-wwh-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 22px 48px -24px rgba(26, 31, 46, .42);
  transition: opacity .3s ease
}

@media (hover:hover) {

  /* -8px over 300ms on cubic-bezier(.22,1,.36,1) - the home page's own card
     hover, and the same as the shared tiles */
  .mt-wwh-spot:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 107, 53, .45)
  }

  .mt-wwh-spot:hover::before {
    opacity: 1
  }

  /* the photograph eases in behind the card's own overflow clip, as home's
     service cards do at the same 700ms */
  .mt-wwh-spot__shot img {
    transition: transform .7s cubic-bezier(.22, 1, .36, 1)
  }

  .mt-wwh-spot:hover .mt-wwh-spot__shot img {
    transform: scale(1.05)
  }
}

@media (prefers-reduced-motion:reduce) {

  .mt-wwh-spot,
  .mt-wwh-spot::before,
  .mt-wwh-spot__shot img {
    transition: none
  }

  .mt-wwh-spot:hover {
    transform: none
  }

  .mt-wwh-spot:hover .mt-wwh-spot__shot img {
    transform: none
  }

  .mt-wwh-spot:hover::before {
    opacity: 0
  }
}

.mt-wwh-spot__shot {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 19px 19px 0 0
}

.mt-wwh-spot__shot img {
  display: block;
  width: 100%;
  height: clamp(170px, 18vw, 210px);
  object-fit: cover
}

/* the same orange wash the home page lays over its service card images */
.mt-wwh-spot__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 107, 53, .26) 0%,
      rgba(26, 31, 46, .10) 52%, rgba(26, 31, 46, .34) 100%)
}

.mt-wwh-spot__body {
  flex: 1 1 auto;
  padding: 24px 24px 28px
}

.mt-wwh-spot__body h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--mt-navy)
}

.mt-wwh-spot__body p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--mt-text-muted)
}

/* --- industries, Rev 5 §10 ------------------------------------------------
   The seven categories §06 uses on the home page and in the footer. They were
   a seven-card grid, but only two of them carry specific industries, so five
   cards sat visibly emptier than the other two. A numbered row reads as a
   directory rather than a set of equal tiles: the description does the work on
   every row, and the chips are a bonus where they exist instead of a hole
   where they do not.

   The number is decorative and aria-hidden - the <ol> already conveys order to
   a screen reader, so reading "01" aloud would just duplicate it. */
.mt-wwh-ind {
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
  border-top: 1px solid var(--mt-border)
}

.mt-wwh-ind__row {
  display: grid;
  gap: 6px 22px;
  align-items: baseline;
  grid-template-columns: auto 1fr;
  padding: 26px 4px;
  border-bottom: 1px solid var(--mt-border);
  transition: background-color .25s ease
}

@media (hover:hover) {
  .mt-wwh-ind__row:hover {
    background: var(--mt-bg-soft, #f7f7f5)
  }
}

@media (prefers-reduced-motion:reduce) {
  .mt-wwh-ind__row {
    transition: none
  }
}

.mt-wwh-ind__num {
  font-family: var(--font-heading), sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--mt-orange);
  font-variant-numeric: tabular-nums
}

.mt-wwh-ind__body {
  min-width: 0
}

.mt-wwh-ind__name {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  font-weight: 800;
  color: var(--mt-navy);
  letter-spacing: -.01em
}

.mt-wwh-ind__desc {
  margin: 8px 0 0;
  max-width: 46rem;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--mt-text-muted)
}

/* the chips sit under the copy on narrow screens and move into their own
   column once there is room for them beside it */
.mt-wwh-ind__tags {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.mt-wwh-ind__tags li {
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--mt-border);
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--mt-navy);
  white-space: nowrap
}

@media (min-width:1000px) {
  .mt-wwh-ind__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px
  }

  .mt-wwh-ind__tags {
    grid-column: auto;
    margin: 0;
    justify-content: flex-end;
    max-width: 22rem
  }
}