/* =========================================================================
   How We Move — "Full Service Premium Moving"
   Mobile-first. Desktop overrides live in the (min-width:768px) block.
   Scoped entirely under #fr-how-we-move so it can't leak into v14.
   ========================================================================= */

#fr-how-we-move {
  --fr-red: #F20500;
  --fr-ink: #1F1F1F;
  --fr-ink-soft: #595959;
  --fr-paper: #FFFFFF;
  --fr-tint: #F7F8FA;
  --fr-font: "Calibri", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  background: var(--fr-tint);
  padding: 48px 18px 56px;
  font-family: var(--fr-font);
  -webkit-font-smoothing: antialiased;
}

#fr-how-we-move .fr-hwm-inner {
  max-width: 920px;
  margin: 0 auto;
}

/* ---- Header ---- */
#fr-how-we-move .fr-hwm-eyebrow {
  margin: 0 0 6px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 700;
  color: var(--fr-red);
}
#fr-how-we-move .fr-hwm-title {
  margin: 0 0 10px;
  text-align: center;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fr-ink);
}
#fr-how-we-move .fr-hwm-sub {
  margin: 0 auto 26px;
  max-width: 560px;
  text-align: center;
  font-size: 15px;
  line-height: 1.45;
  color: var(--fr-ink-soft);
}

/* ---- Shared card chrome ---- */
#fr-how-we-move .fr-hwm-featured,
#fr-how-we-move .fr-hwm-card {
  background: var(--fr-paper);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Video boxes: aspect-ratio reserves height => zero layout shift */
#fr-how-we-move .fr-hwm-featured-vid,
#fr-how-we-move .fr-hwm-card-vid {
  position: relative;
  background: #1F1F1F;
  overflow: hidden;
}
#fr-how-we-move .fr-hwm-featured-vid { aspect-ratio: 50 / 27; }   /* mobile: 20% taller than 20/9 */
#fr-how-we-move .fr-hwm-card-vid     { aspect-ratio: 16 / 10; }

#fr-how-we-move .fr-hwm-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Featured card ---- */
#fr-how-we-move .fr-hwm-featured { margin: 0 auto 16px; }
#fr-how-we-move .fr-hwm-featured-body { padding: 16px 20px 18px; }
#fr-how-we-move .fr-hwm-featured-title {
  margin: 0 0 5px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--fr-ink);
}
#fr-how-we-move .fr-hwm-featured-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--fr-ink-soft);
}

/* ---- Grid (2-up on mobile) ---- */
#fr-how-we-move .fr-hwm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 0 26px;
}
#fr-how-we-move .fr-hwm-card-body { padding: 12px 14px 14px; }
#fr-how-we-move .fr-hwm-card-title {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--fr-ink);
}
#fr-how-we-move .fr-hwm-card-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--fr-ink-soft);
}

/* ---- CTA ---- */
#fr-how-we-move .fr-hwm-cta { text-align: center; }
#fr-how-we-move .fr-hwm-cta-btn {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 999px;
  background: var(--fr-red);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
#fr-how-we-move .fr-hwm-cta-btn:hover { filter: brightness(0.94); }
#fr-how-we-move .fr-hwm-cta-foot {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #7A7A7A;
}

/* =========================================================================
   Desktop
   ========================================================================= */
@media (min-width: 768px) {
  #fr-how-we-move { padding: 80px 24px 96px; }
  #fr-how-we-move .fr-hwm-title { font-size: 40px; }

  #fr-how-we-move .fr-hwm-featured-vid { aspect-ratio: 20 / 9; }   /* desktop back to widescreen */

  #fr-how-we-move .fr-hwm-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  #fr-how-we-move .fr-hwm-card-title { font-size: 16px; }
  #fr-how-we-move .fr-hwm-card-desc  { font-size: 13px; }
}

/* Respect reduced-motion: JS also checks this and won't auto-play. */
@media (prefers-reduced-motion: reduce) {
  #fr-how-we-move .fr-hwm-video { /* poster stays; JS skips autoplay */ }
}