/* =========================================================
   MoveDone Update 039
   Homepage service expansion + brand period + footer polish
   ========================================================= */

/* Make the period in MoveDone. feel deliberate and slightly more playful */
.md-brand-period {
  display: inline-block;
  margin-left: 1px;
  font-size: 1.16em;
  line-height: 0;
  transform: translateY(-0.01em);
}

/* Ten service cards: balanced 5 x 2 on larger screens */
.service-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

@media (max-width: 1250px) {
  .service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .service-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Keep the newly-added icons visually consistent with the existing icon family */
.md039-service-svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   Local businesses section
   Make it feel like a proper destination before we add a dedicated photo.
   ========================================================= */

#businesses,
.business-section,
.for-businesses-section {
  position: relative;
  overflow: hidden;
}

#businesses::before,
.business-section::before,
.for-businesses-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 26%, rgba(255, 90, 79, 0.09), transparent 22%),
    radial-gradient(circle at 74% 70%, rgba(44, 171, 111, 0.06), transparent 24%);
}

#businesses > *,
.business-section > *,
.for-businesses-section > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   Footer
   ========================================================= */

footer {
  background: #fffdfa;
}

.md039-footer-top {
  display: grid;
  grid-template-columns:
    minmax(280px, 1.35fr)
    minmax(150px, 0.7fr)
    minmax(180px, 0.8fr)
    minmax(260px, 1fr);
  gap: 46px;
  align-items: start;
  padding: 52px 0 38px;
}

.md039-footer-brand h3 {
  margin: 0 0 10px;
  font-size: 1.55rem;
  letter-spacing: -0.04em;
}

.md039-footer-brand p {
  max-width: 320px;
  margin: 0;
  color: var(--md-muted, #71777c);
  line-height: 1.55;
}

.md039-footer-column h4,
.md039-company h4 {
  margin: 0 0 16px;
  color: var(--md-ink, #202326);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.md039-footer-column a {
  display: block;
  margin: 0 0 11px;
  color: var(--md-muted, #71777c);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.md039-footer-column a:hover {
  color: var(--md-coral, #ff5a4f);
}

.md039-company {
  padding: 18px;
  border: 1px solid var(--md-line, #e7ddd4);
  border-radius: 16px;
  background: #fff;
}

.md039-company strong {
  display: block;
  margin-bottom: 5px;
  color: var(--md-ink, #202326);
  font-size: 0.91rem;
  line-height: 1.35;
}

.md039-company span {
  display: block;
  color: var(--md-muted, #71777c);
  font-size: 0.8rem;
  line-height: 1.45;
}

.md039-acknowledgement {
  padding: 28px 0;
  border-top: 1px solid var(--md-line, #e7ddd4);
  border-bottom: 1px solid var(--md-line, #e7ddd4);
}

.md039-acknowledgement strong {
  display: block;
  margin-bottom: 9px;
  color: var(--md-ink, #202326);
  font-size: 0.88rem;
}

.md039-acknowledgement p {
  max-width: 1480px;
  margin: 0;
  color: var(--md-muted, #71777c);
  font-size: 0.82rem;
  line-height: 1.65;
}

.md039-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 22px 0 28px;
  color: var(--md-muted, #71777c);
  font-size: 0.74rem;
}

.md039-footer-bottom > div {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.md039-footer-dot {
  opacity: 0.45;
}

@media (max-width: 980px) {
  .md039-footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .md039-footer-top {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 38px;
  }

  .md039-company {
    padding: 16px;
  }

  .md039-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}