/* ============================================================
   MAQUILLAJE · IDENTIDAD VISUAL UNIFICADA CON SPA CAPILAR
   2026-11-06

   Spa Capilar está aprobada y es la referencia visual del resto
   de la web. Esta capa reproduce en Maquillaje los MISMOS valores
   que la capa aprobada del Spa (spa-rediseno-20261106.css):

   · contenedor ............ max 1520px · borde clamp(22px, 4.55vw, 84px)
   · tipografía editorial .. Cormorant Garamond 300 (display) + Geist
   · escala de titulares ... h2 clamp(2.15rem, 3.3vw, 3rem) / 1.02 / -.035em
   · antetítulo ............ .7rem / .2em / mayúsculas / rosa profundo
   · entradilla ............ clamp(.98rem, 1.08vw, 1.08rem) / 1.7
   · paleta ................ crema #faf6f1, rosa #c94983, vino #260a19
   · filetes ................ rgba(140,42,91,.14) y 1px, radios 0
   · cierre ................ degradado vino con halos de rosa y cobre
   · pie ................... cuatro columnas + fila legal sobre crema

   Capa EXCLUSIVA de esta página. No se toca Spa, Peluquería,
   Masajes, Home ni la web pública: todos los selectores nuevos
   llevan prefijo .mq- y los compartidos (.site-header,
   .site-footer) van acotados a body.mq-page.

   Orden: tokens → contenedor y tipografía → portada → intro y
   modalidades → portfolio → novias → cierre → pie → responsive.
   ============================================================ */

/* ---------- 0 · Tokens de la página (idénticos al Spa) ---------- */
body.mq-page {
  --mq-cream: #faf6f1;
  --mq-cream-2: #f4eae2;
  --mq-card: #fffdfb;
  --mq-ink: #241016;
  --mq-ink-soft: #5d4a52;
  --mq-ink-faint: #7a6270;
  --mq-line: rgba(140, 42, 91, 0.14);
  --mq-line-strong: rgba(140, 42, 91, 0.3);
  --mq-rose: #c94983;
  --mq-rose-deep: #8c2a5b;
  --mq-rose-wash: #f8ebf1;
  --mq-wine: #260a19;
  --mq-wine-2: #3a0f26;
  --mq-on-dark: #fbf4f0;
  --mq-copper: #e0a282;
  --mq-edge: clamp(22px, 4.55vw, 84px);
  --mq-max: 1520px;
  --mq-serif: "Cormorant Garamond", "Spectral", Georgia, serif;
  --mq-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--mq-cream);
  color: var(--mq-ink);
}

/* base.css recorta el desbordamiento con `hidden`, que convierte el
   body en contenedor de scroll y rompe la cabecera sticky. `clip`
   recorta igual sin crear contenedor: mismo anti-overflow, cabecera
   fija como en el Spa. */
html,
body.mq-page {
  overflow-x: clip;
}

/* La cabecera es la unificada de la web local (spa-cabecera.css);
   solo se ajusta el fondo al crema cálido de la página. */
body.mq-page .site-header {
  background: rgba(250, 246, 241, 0.97);
  border-bottom-color: rgba(140, 42, 91, 0.12);
}
body.mq-page .site-header.is-scrolled {
  background: rgba(250, 246, 241, 0.97);
}

/* ---------- 1 · Contenedor y tipografía editorial ---------- */
.mq-inner {
  width: 100%;
  max-width: var(--mq-max);
  margin-inline: auto;
  padding-inline: var(--mq-edge);
}

.mq-kicker {
  margin: 0 0 0.85rem;
  font-family: var(--mq-sans);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mq-rose-deep);
}

.mq-h2 {
  margin: 0;
  font-family: var(--mq-serif);
  font-weight: 300;
  font-size: clamp(2.15rem, 3.3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--mq-ink);
  text-wrap: balance;
}
.mq-h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--mq-rose);
}

.mq-lead {
  margin: 0;
  max-width: 46ch;
  font-family: var(--mq-sans);
  font-size: clamp(0.98rem, 1.08vw, 1.08rem);
  line-height: 1.7;
  color: var(--mq-ink-soft);
}

/* Enlace de texto: el mismo gesto que el del Spa (flecha que avanza) */
.mq-textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mq-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  padding-bottom: 3px;
  transition: color 0.25s var(--ease);
}
.mq-textlink span {
  transition: transform 0.25s var(--ease);
}
.mq-textlink:hover {
  color: #f6c6dc;
}
.mq-textlink:hover span {
  transform: translateX(4px);
}

/* ---------- 2 · Portada ---------- */
.mq-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: calc(100svh - 88px);
  background: #1a0c13;
  color: #fff;
}
.mq-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #21131a;
}
.mq-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 38%;
}
/* Velo de lectura de la portada aprobada del Spa, con el mismo
   degradado y el mismo vino, algo más denso para proteger el texto. */
.mq-hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(92deg, rgba(42, 20, 28, 0.92) 0%, rgba(42, 20, 28, 0.8) 22%, rgba(42, 20, 28, 0.46) 44%, rgba(42, 20, 28, 0.12) 64%, rgba(42, 20, 28, 0) 80%),
    linear-gradient(0deg, rgba(26, 12, 19, 0.52) 0%, rgba(26, 12, 19, 0) 38%);
}
.mq-hero > .mq-inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(72px, 8vw, 110px);
}
.mq-hero-copy {
  width: min(42rem, 100%);
}

/* Migas de pan: el encabezado de página interior del Spa */
.mq-cover-breadcrumb {
  margin-bottom: 1.25rem;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: rgba(249, 231, 240, 0.66);
}
.mq-cover-breadcrumb a {
  color: rgba(249, 231, 240, 0.82);
}
.mq-cover-breadcrumb a:hover {
  color: #f6c6dc;
}
.mq-cover-breadcrumb .sep {
  /* El separador del Spa va a .42; aquí sube a .62 para cumplir AA en un
     carácter de 10.9 px sobre el velo de la fotografía. */
  color: rgba(249, 231, 240, 0.62);
}

.mq-hero h1 {
  margin: 0;
  font-family: var(--mq-serif);
  font-weight: 300;
  font-size: clamp(3.1rem, 5.75vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.038em;
  color: #fff;
  text-shadow: 0 2px 32px rgba(10, 4, 8, 0.42);
  text-wrap: balance;
}
.mq-hero h1 em {
  font-family: var(--mq-serif);
  font-style: italic;
  font-weight: 300;
  color: #fff;
}
.mq-hero-lead {
  margin: 1.45rem 0 0;
  max-width: 36rem;
  font-family: var(--mq-sans);
  font-size: clamp(0.95rem, 1.12vw, 1.08rem);
  line-height: 1.68;
  color: rgba(253, 246, 249, 0.88);
  text-shadow: 0 1px 22px rgba(7, 3, 5, 0.55);
}
.mq-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 2rem;
}
.mq-actions .btn {
  padding: 1rem 1.9rem;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}
.mq-hero-note {
  position: absolute;
  z-index: 2;
  right: var(--mq-edge);
  bottom: 22px;
  margin: 0;
  max-width: 20rem;
  text-align: right;
  font-family: var(--mq-sans);
  font-weight: 600;
  font-size: 0.62rem;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 244, 240, 0.66);
}
@media (min-width: 900px) {
  /* El texto de la portada entra 43 px más que los titulares de
     sección, igual que en la portada aprobada del Spa. */
  .mq-hero-copy {
    margin-left: 43px;
  }
}

/* ---------- 3 · Intro + las tres modalidades ---------- */
.mq-intro {
  background: var(--mq-cream);
  padding-block: clamp(60px, 6.2vw, 102px);
}
.mq-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(20px, 4vw, 60px);
  align-items: end;
}
.mq-intro-grid .mq-lead {
  max-width: 46ch;
  padding-bottom: 0.2rem;
}
.mq-offerings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(34px, 3.6vw, 54px);
  padding-top: clamp(26px, 2.8vw, 40px);
  border-top: 1px solid var(--mq-line);
}
.mq-offering {
  min-width: 0;
  padding: 0 clamp(12px, 1.4vw, 24px);
  border-left: 1px solid var(--mq-line);
}
.mq-offering:first-child {
  padding-left: 0;
  border-left: 0;
}
.mq-offering-index {
  display: block;
  font-family: var(--mq-serif);
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  /* Rosa profundo en lugar del rosa medio: el número es texto pequeño y
     necesita AA (4.5) sobre el crema; el rosa medio se queda en 4.1. */
  color: var(--mq-rose-deep);
}
.mq-offering h3 {
  margin: 0.55rem 0 0;
  font-family: var(--mq-serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.32vw, 1.26rem);
  line-height: 1.16;
  color: var(--mq-ink);
}
.mq-offering p {
  margin: 0.6rem 0 0;
  font-size: 0.84rem;
  line-height: 1.62;
  color: var(--mq-ink-soft);
}

/* ---------- 4 · Portfolio ---------- */
.mq-gallery {
  background: var(--mq-rose-wash);
  padding-block: clamp(58px, 6vw, 98px);
}
.mq-gallery-head {
  margin-bottom: clamp(26px, 3vw, 42px);
}
.mq-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 22px);
}
.mq-work {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  background: var(--mq-card);
}
/* La primera pieza ocupa el hueco destacado de la rejilla. */
.mq-work:first-child {
  grid-column: span 2;
}
.mq-work-media {
  height: clamp(300px, 32vw, 470px);
  overflow: hidden;
  background: #ead9e4;
}
.mq-work img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  transition: transform 0.9s var(--ease);
}
.mq-work:hover img {
  transform: scale(1.04);
}
/* Encuadre por pieza para destacar el maquillaje */
.mq-work:nth-child(1) img { object-position: 50% 82%; }
.mq-work:nth-child(2) img { object-position: 52% 38%; }
.mq-work:nth-child(3) img { object-position: 50% 42%; }
.mq-work:nth-child(4) img { object-position: 52% 40%; }
.mq-work:nth-child(5) img { object-position: 52% 42%; }
.mq-work figcaption {
  padding: clamp(12px, 1.2vw, 16px);
  font-family: var(--mq-sans);
  font-weight: 600;
  font-size: 0.66rem;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mq-ink-faint);
}

/* ---------- 5 · Novias ---------- */
.mq-bride {
  position: relative;
  overflow: hidden;
  background: var(--mq-cream);
  padding-block: clamp(60px, 6.2vw, 100px);
}
.mq-bride-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(28px, 4.6vw, 76px);
  align-items: center;
}
.mq-bride-photo {
  margin: 0;
}
.mq-bride-photo img {
  width: 100%;
  height: clamp(400px, 40vw, 560px);
  object-fit: cover;
  object-position: 62% 38%;
  background: #ead9e4;
}
.mq-bride-note {
  margin: 1rem 0 0;
  font-family: var(--mq-sans);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mq-ink-faint);
}
.mq-bride-copy .mq-h2 {
  max-width: 17ch;
}
.mq-bride-copy .mq-lead {
  margin-top: 1.1rem;
  max-width: 44ch;
}
.mq-bride-copy .mq-lead + .mq-lead {
  margin-top: 0.9rem;
}
.mq-bride-copy .mq-textlink {
  margin-top: 1.6rem;
  color: var(--mq-rose-deep);
  border-bottom: 1px solid var(--mq-line-strong);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.mq-bride-copy .mq-textlink:hover {
  color: var(--mq-rose);
  border-color: var(--mq-rose);
}
/* Trazo botánico de marca, el mismo recurso lineal que el Spa usa
   como cierre decorativo de su apartado ilustrativo. */
.mq-bride-leaf {
  position: absolute;
  right: calc(var(--mq-edge) - 30px);
  bottom: -54px;
  width: clamp(120px, 13vw, 190px);
  height: auto;
  color: var(--mq-rose);
  opacity: 0.22;
  pointer-events: none;
}

/* ---------- 6 · Cierre comercial ---------- */
.mq-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #3a0f26 0%, #260a19 55%, #3c1029 100%);
  color: #fff;
  text-align: center;
  padding-block: clamp(56px, 5.8vw, 92px);
}
.mq-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 90% at 50% 0%, rgba(201, 73, 131, 0.26), transparent 70%),
    radial-gradient(40% 70% at 85% 100%, rgba(224, 162, 130, 0.1), transparent 72%);
}
.mq-cta > .mq-inner {
  position: relative;
  z-index: 1;
}
.mq-cta .mq-kicker {
  color: var(--mq-copper);
}
.mq-cta-title {
  margin: 0 auto;
  max-width: 40ch;
  font-family: var(--mq-serif);
  font-weight: 300;
  font-size: clamp(2rem, 3.35vw, 3.05rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #fff;
}
.mq-cta-title em {
  font-style: italic;
  font-weight: 300;
  color: #eeb1cd;
}
.mq-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}
.mq-cta-actions .btn {
  padding: 1rem 1.8rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
body.mq-page .btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
}
body.mq-page .btn-ghost:hover,
body.mq-page .btn-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}
.mq-cta-place {
  margin: 1.5rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: rgba(251, 244, 240, 0.6);
}

/* ---------- 7 · Pie de página ---------- */
body.mq-page .site-footer {
  background: var(--mq-cream);
  color: var(--mq-ink);
  padding-top: clamp(46px, 5vw, 78px);
  padding-bottom: clamp(22px, 2.4vw, 34px);
  border-top: 1px solid var(--mq-line);
}
body.mq-page .site-footer a {
  color: inherit;
}
.mq-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(0, 0.75fr);
}
.mq-footer-brand {
  padding-right: clamp(20px, 3vw, 46px);
}
.mq-footer-brand img {
  display: block;
  height: 62px;
  width: auto;
  max-width: 270px;
  object-fit: contain;
  object-position: left center;
}
.mq-footer-brand p {
  margin: 1.1rem 0 0;
  max-width: 34ch;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--mq-ink-soft);
}
.mq-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  margin: 0;
  padding-inline: clamp(18px, 2.4vw, 38px);
  border-left: 1px solid var(--mq-line);
  font-style: normal;
}
.mq-footer-contact p {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--mq-ink-soft);
}
.mq-footer-contact svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 0.18rem;
  color: var(--mq-rose);
}
.mq-footer-contact a {
  color: var(--mq-ink);
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.mq-footer-contact a:hover {
  color: var(--mq-rose-deep);
  border-bottom-color: var(--mq-line-strong);
}
.mq-footer-hours {
  padding-inline: clamp(18px, 2.4vw, 38px);
  border-left: 1px solid var(--mq-line);
}
.mq-footer-label {
  margin: 0 0 0.85rem;
  font-family: var(--mq-serif);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--mq-ink);
}
.mq-footer-hours ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--mq-ink-soft);
}
.mq-footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.16rem 0;
}
.mq-footer-hours li span:first-child {
  color: var(--mq-ink);
}
.mq-footer-social {
  padding-left: clamp(18px, 2.4vw, 38px);
  border-left: 1px solid var(--mq-line);
}
.mq-social {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.25rem;
}
.mq-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--mq-line-strong);
  color: var(--mq-rose-deep);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.mq-social a:hover {
  background: var(--mq-rose-deep);
  border-color: var(--mq-rose-deep);
  color: #fff;
}
.mq-social svg {
  width: 17px;
  height: 17px;
}
.mq-footer-place {
  margin: 1rem 0 0;
  max-width: 24ch;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--mq-ink-faint);
}
.mq-footer-legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(30px, 3.4vw, 50px);
  padding-top: 1.05rem;
  border-top: 1px solid var(--mq-line);
  font-size: 0.74rem;
  color: var(--mq-ink-faint);
}
.mq-footer-legal p {
  margin: 0;
}
.mq-footer-legal nav {
  display: flex;
  gap: 1.4rem;
}
.mq-footer-legal a {
  color: var(--mq-ink-soft);
  transition: color 0.2s var(--ease);
}
.mq-footer-legal a:hover {
  color: var(--mq-rose-deep);
}

/* ---------- 8 · Responsive ---------- */
@media (max-width: 900px) {
  .mq-intro-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }
  .mq-bride-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .mq-bride-photo img {
    height: clamp(360px, 62vw, 520px);
  }
  .mq-bride-copy .mq-h2 {
    max-width: none;
  }
  .mq-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2.2rem;
  }
  .mq-footer-brand {
    grid-column: 1 / -1;
    padding-right: 0;
  }
  .mq-footer-contact {
    border-left: 0;
    padding-left: 0;
    padding-right: 2rem;
  }
  .mq-footer-hours {
    border-left: 1px solid var(--mq-line);
  }
  .mq-footer-social {
    grid-column: 1 / -1;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--mq-line);
    padding-top: 1.4rem;
  }
}

@media (max-width: 760px) {
  .mq-hero {
    min-height: calc(100svh - 68px);
    align-items: flex-end;
  }
  .mq-hero-media img {
    object-position: 68% 30%;
  }
  .mq-hero-veil {
    background:
      linear-gradient(180deg, rgba(42, 20, 28, 0.3) 0%, rgba(42, 20, 28, 0.14) 26%, rgba(42, 20, 28, 0.62) 56%, rgba(42, 20, 28, 0.93) 100%);
  }
  .mq-hero > .mq-inner {
    padding-block: 0 54px;
  }
  .mq-cover-breadcrumb {
    margin-bottom: 0.9rem;
  }
  .mq-hero h1 {
    font-size: clamp(2.5rem, 11vw, 3.3rem);
    line-height: 1;
  }
  .mq-hero-lead {
    margin-top: 1.1rem;
    font-size: 0.95rem;
    line-height: 1.6;
  }
  .mq-actions {
    gap: 0.9rem;
    margin-top: 1.5rem;
  }
  .mq-actions .btn {
    padding: 0.9rem 1.5rem;
    font-size: 0.74rem;
  }
  .mq-hero-note {
    top: 16px;
    bottom: auto;
    right: 18px;
    max-width: 15rem;
    font-size: 0.56rem;
    line-height: 1.5;
    text-align: right;
  }

  .mq-intro {
    padding-block: 62px;
  }
  .mq-offerings {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 32px;
    padding-top: 26px;
    row-gap: 1.8rem;
  }
  .mq-offering {
    padding: 0;
    border-left: 0;
    padding-top: 1.6rem;
    border-top: 1px solid var(--mq-line);
  }
  .mq-offering:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .mq-gallery {
    padding-block: 58px 64px;
  }
  .mq-gallery-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .mq-work:first-child {
    grid-column: auto;
  }
  .mq-work-media {
    height: min(112vw, 430px);
  }
  .mq-work:first-child .mq-work-media {
    height: min(86vw, 360px);
  }

  .mq-bride {
    padding-block: 60px;
  }
  .mq-bride-leaf {
    display: none;
  }

  .mq-cta-title {
    font-size: clamp(1.85rem, 8vw, 2.4rem);
  }
  .mq-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .mq-cta-actions .btn {
    width: 100%;
  }

  .mq-footer-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.9rem;
  }
  .mq-footer-contact {
    padding-right: 0;
    border-top: 1px solid var(--mq-line);
    padding-top: 1.4rem;
  }
  .mq-footer-hours {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--mq-line);
    padding-top: 1.4rem;
  }
  .mq-footer-social {
    padding-top: 1.4rem;
  }
  .mq-footer-legal {
    flex-direction: column;
    gap: 0.7rem;
  }
  .mq-footer-legal nav {
    flex-wrap: wrap;
    gap: 1.1rem;
  }
}

@media (max-width: 420px) {
  .mq-offerings {
    row-gap: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mq-work img,
  .mq-textlink,
  .mq-textlink span,
  .mq-social a {
    transition: none;
  }
  .mq-work:hover img {
    transform: none;
  }
}