/* About page — imported from the Claude Design project "About Us and Contact
   Pages" (About Us.dc.html). Section layout/copy is inline-styled to match
   the approved design exactly; this file only covers what the design's own
   support scripts (image-slot.js) handled — image placeholders — plus link
   colors, scoped to this page so they don't affect the rest of the site. */

body { background-color: #fff !important; }

.mm-about-page a { color: #0d0d0d; }
.mm-about-page a:hover { color: #55620f; }

/* ===== Hero factory video — play/pause + hover-only volume, same pattern
   as the homepage's trust-video and process-video controls. Not autoplaying
   (preload="metadata" only) so it costs nothing until the visitor presses play. */
.mm-about-video-frame { position: relative; border-radius: 4px; overflow: hidden; }

.mm-about-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: linear-gradient(150deg, #1c1d16 0%, #14150F 55%, #23260f 100%);
}

.mm-about-video-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}

.mm-about-video-play,
.mm-about-video-mute {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 999px;
  border: none;
  background: rgba(13, 13, 13, .8);
  color: #F5F4EE;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease;
}
.mm-about-video-play:hover,
.mm-about-video-mute:hover { background: rgba(13, 13, 13, .95); }
.mm-about-video-play svg,
.mm-about-video-mute svg { width: 16px !important; height: 16px !important; overflow: visible !important; }

.mm-about-video-play .mm-icon-pause,
.mm-about-video-frame.is-playing .mm-about-video-play .mm-icon-play { display: none !important; }
.mm-about-video-frame.is-playing .mm-about-video-play .mm-icon-pause { display: block !important; }

.mm-about-video-mute .mm-icon-vol-off,
.mm-about-video-mute[aria-pressed="true"] .mm-icon-vol-on { display: none !important; }
.mm-about-video-mute[aria-pressed="true"] .mm-icon-vol-off { display: block !important; }

.mm-about-video-volume {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.mm-about-video-frame:hover .mm-about-video-volume,
.mm-about-video-frame:focus-within .mm-about-video-volume,
.mm-about-video-frame.is-playing .mm-about-video-volume { opacity: 1; pointer-events: auto; }

.mm-about-video-volume-slider {
  width: 70px;
  height: 3px;
  accent-color: #F5F4EE;
  cursor: pointer;
}

/* The design's own inline styles already handle most sizing responsively
   via clamp()/flex-wrap/auto-fit grids — these are the few spots that were
   still tuned for desktop proportions (a fixed 90px number column, an
   always-on border-right meant for a multi-column row, a hero heading
   explicitly kept left-aligned rather than following any centering that
   gets introduced elsewhere) and need an override at phone width. All
   target classes added alongside the existing inline styles in
   about-markup.php; !important is required to beat inline style specificity. */
@media screen and (max-width: 640px) {
  .mm-about-hero-row { align-items: flex-start !important; }
  .mm-about-hero-heading { text-align: left !important; }

  .mm-about-timeline-row { flex-direction: column !important; gap: 10px !important; }
  .mm-about-timeline-num { flex: 0 0 auto !important; padding-top: 0 !important; }

  /* Grid collapses to one column under 240px+gutter — border-right on
     every cell then just doubles up against the container's own
     border-left instead of separating columns that no longer exist. */
  .mm-about-values-cell { border-right: none !important; }

  .mm-about-cta-link { width: 100%; text-align: center; }
}