/* home.css — plantilla "home". PROPIEDAD: agente de esta plantilla.
   Tokens y header/footer están en base.css (no los redefinas). Contrato: DESIGN.md.

   Calcado, valor a valor, de post-22.css (la home de Elementor,
   https://www.clinicadentalnm.com/ca/ y /es/). Entre paréntesis, el data-id
   del elemento de Elementor del que sale cada bloque. El original es
   desktop-first con cortes en 1024px y 767px: aquí igual. */

.home {
  font-family: var(--nm-font-ui);
  color: var(--nm-taupe);
}

/* Las secciones "boxed" de Elementor no llevan padding lateral en escritorio;
   el aire lo ponen los márgenes de columna. Aparece en tablet/móvil. */
.home .container {
  padding-inline: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Antetítulo / título / entradilla ----------------------------- */
/* 484b86b + c3d9f31 (y sus gemelos 2a8e669/150ce89, 4305a06/97b83ec). */
.home-eyebrow {
  margin: 0;
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-h1); /* 46px */
  font-weight: 600;
  line-height: var(--nm-lh-tight);
  color: var(--nm-taupe);
  text-align: center;
}
.home-title {
  margin: -10px 0 0; /* margin:-10px del widget */
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-h2); /* 38px */
  font-weight: 200; /* declarado 100; Manrope empieza en 200 */
  line-height: var(--nm-lh-tight);
  color: var(--nm-taupe);
  text-align: center;
}
/* 43cd810 / 6455d6e / fc27565: 18px/28px, justificado, color taupe. */
.home-lead {
  margin-top: var(--nm-space-2);
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-xl); /* 18px */
  font-weight: 400;
  line-height: 28px;
  color: var(--nm-taupe);
  text-align: justify;
}
.home-lead p {
  margin: 0 0 var(--nm-space-3);
}
.home-lead > *:last-child {
  margin-bottom: 0;
}

/* ---------- Cabecera (0e4c9d6 / 47c9657) --------------------------------- */
.home-hero {
  height: 84vh;
  background-color: var(--nm-white);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ---------- Bandas de introducción (cf2e464 / d1f8556) ------------------- */
.home-band {
  padding: 100px 0 75px;
}
.home-band + .home-band {
  padding: 75px 0 100px;
}

.home-band-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
/* La columna de texto va centrada verticalmente (1bab007 / 7b86f34). */
.home-band-text {
  align-self: center;
}
.home-band--left .home-band-text {
  order: 2;
}
.home-band--left .home-band-photo {
  order: 1;
}

/* 507685e: el H1 de la home. */
.home-band-title {
  margin: 0;
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-h1); /* 46px */
  font-weight: 600;
  line-height: var(--nm-lh-tight);
  color: var(--nm-taupe);
  text-align: center;
}
.home-band-title + .home-lead {
  margin-top: var(--nm-space-5);
}

/* Columnas 0e40eaa / 0468c90: foto de fondo + spacer que le da el alto. */
.home-band-photo {
  min-height: var(--band-h, 650px);
  background-color: #b5b2b2;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.home-band--right .home-band-photo {
  margin-inline-start: 110px;
}
.home-band--left .home-band-photo {
  margin-inline-end: 120px;
}

/* ---------- "Per què nosaltres?" (118bf82) ------------------------------- */
.home-why {
  padding: 75px 0;
  background: var(--nm-white);
}
.home-why-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.home-why-text {
  text-align: center;
}

/* 5439789: lista de iconos, Manrope 16px/400, texto justificado, check beige. */
.home-list {
  margin-top: 15px;
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-md); /* 16px */
  font-weight: 400;
  color: var(--nm-taupe);
  text-align: justify;
}
.home-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-list li {
  position: relative;
  padding-block-end: 4px; /* calc(8px/2) */
  padding-inline-start: calc(14px + var(--nm-space-2));
}
.home-list li + li {
  margin-block-start: 4px;
}
.home-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.45em;
  width: 14px; /* --e-icon-list-icon-size:14px */
  height: 14px;
  background: var(--nm-beige);
  clip-path: polygon(43% 74%, 88% 20%, 100% 32%, 44% 100%, 0 56%, 12% 43%);
}
.home-list p {
  margin: 0 0 var(--nm-space-2);
}

/* 8170b2b: botón blanco con borde taupe; hover negro. */
.btn--outline {
  margin-top: var(--nm-space-3);
  background: var(--nm-white);
  color: var(--nm-taupe);
  border: 1px solid var(--nm-taupe);
  border-radius: var(--nm-radius);
  font-size: var(--nm-fs-base); /* 15px */
  font-weight: 400;
  letter-spacing: var(--nm-ls-caps); /* 1.3px */
  padding: var(--nm-space-4); /* 25px */
}
.btn--outline:hover,
.btn--outline:focus {
  background: #000;
  color: var(--nm-white);
  border-color: #000;
}

/* fc6621c: columna blanca con la foto del equipo (421ccde). */
.home-why-media {
  background: var(--nm-white);
}
.home-why-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- "NM Adults" (3f6f30c) ---------------------------------------- */
.home-adults {
  padding: 75px 0;
  background: var(--nm-beige-15);
}
.home-adults-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
/* 183033f: foto de fondo de columna, spacer de 50px en escritorio. */
.home-adults-photo {
  min-height: 50px;
  margin-inline-start: 130px;
  background-color: #b5b2b2;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  align-self: stretch;
}

/* ---------- Rejilla de tratamientos (67310a7) ---------------------------- */
.home-cards {
  padding: var(--nm-space-6) 0; /* 50px */
  background: var(--nm-beige);
}
.home-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Producción deja 20px de calle entre tiles (10px de padding por columna
     de Elementor); sin él los tiles quedan a hueso y las fotos se tocan. */
  gap: 20px;
}
/* ce3c742: foto al 100 %, opacidad 0.75, radio 12px, sobre fondo beige.
   El título (036799f) sube -120px y queda encima de la foto. */
.home-card {
  display: block;
  text-decoration: none;
  background: var(--nm-beige);
}
.home-card-img {
  display: block;
  width: 100%;
  height: auto;
  /* Las fotos (300-400KB, lazy) no declaran width/height en el HTML: sin
     reservar el hueco, la rejilla salta al cargar (CLS). 8 de los 9 tiles son
     1200x675; el restante (1754x960) se recorta un pelo con object-fit y de
     paso iguala la altura de todas las filas. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.75;
  border-radius: var(--nm-radius);
  transition: opacity var(--nm-transition);
}
.home-card:hover .home-card-img,
.home-card:focus-visible .home-card-img {
  opacity: 1;
}
.home-card-title {
  position: relative;
  margin: -120px 0 0;
  padding: 0 var(--nm-space-2) 90px;
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-lg); /* 17px */
  font-weight: 600;
  color: var(--nm-white);
  text-align: center;
}

/* ---------- "NM Nens" (c78a2f3) ------------------------------------------ */
.home-kids {
  padding: 75px 0;
  background: var(--nm-white);
}
.home-kids-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
/* df15536: foto de fondo + spacers de 50px y 539px. */
.home-kids-photo {
  min-height: 589px; /* 50px + 539px */
  margin-inline-end: 125px;
  background-color: #b5b2b2;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* 44c2653 + d77199e: ilustración centrada, 500px de caja, 65 % de ancho. */
.home-kids-figure {
  max-width: 500px;
  margin: -25px auto 0;
  text-align: center;
}
.home-kids-figure img {
  max-width: 65%;
  height: auto;
}

/* ---------- Franjas de foto con velo (10ea739 / d4b40f9) ----------------- */
.home-cta {
  position: relative;
  isolation: isolate;
  padding: var(--nm-space-6) var(--nm-space-3);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.home-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nm-taupe);
  opacity: 0.5;
  z-index: -1;
}
.home-cta-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  text-align: center;
}
.home-cta--reception .home-cta-inner {
  max-width: 767px;
}

/* 0738529 / 875e00f */
.home-cta-eyebrow {
  margin: 0 0 var(--nm-space-5);
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-display); /* 50px */
  font-weight: 600;
  line-height: var(--nm-lh-tight);
  color: var(--nm-white);
}
.home-cta--cases .home-cta-eyebrow {
  margin-bottom: 0;
}
/* d83eb50 (38/300, ls 0.3px) — en "Casos d'èxit" (e1bb7e1) es 38/100. */
.home-cta-title,
.home-cta-sub {
  margin: -10px 0 0;
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-h2); /* 38px */
  font-weight: 300;
  letter-spacing: 0.3px;
  line-height: var(--nm-lh-tight);
  color: var(--nm-white);
}
.home-cta--cases .home-cta-title {
  font-weight: 200;
  letter-spacing: 0;
}

/* b3241ad / 500ee55: botón transparente con borde blanco. */
.home-cta-btn {
  background: transparent;
  color: var(--nm-white);
  border: 1px solid currentColor;
  border-radius: var(--nm-radius);
  font-size: var(--nm-fs-base); /* 15px */
  font-weight: 300;
}
.home-cta-btn:hover,
.home-cta-btn:focus {
  background: var(--nm-beige);
  color: var(--nm-white);
  border-color: var(--nm-beige);
}
.home-cta-btn--reception {
  margin-top: var(--nm-space-3);
  padding: var(--nm-space-3) var(--nm-space-6);
  letter-spacing: 0.7px;
}
/* 500ee55 no lleva text-transform: el rótulo va tal cual. */
.home-cta-btn--cases {
  margin-top: var(--nm-space-5);
  padding: var(--nm-space-4);
  letter-spacing: 1.4px;
  text-transform: none;
}

/* ---------- Instagram (7dd2536 / 143dd57) -------------------------------- */
/* Equivalente estático del widget instagram-feed: rejilla de fotos locales.
   Nunca se carga su JS (ver DESIGN.md §9). */
.home-ig {
  padding-top: var(--nm-space-6);
}
.home-ig-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nm-space-2);
  text-align: center;
}
/* 1d0e12a: icono circular relleno taupe, 30px, padding 8px. */
.home-ig-icon {
  display: inline-flex;
  padding: var(--nm-space-1);
  border-radius: 50%;
  background: var(--nm-taupe);
  transition: background var(--nm-transition);
}
.home-ig-icon svg {
  width: 30px;
  height: 30px;
  fill: var(--nm-white);
}
/* c2af711: Manrope 32px/600 taupe. */
.home-ig-title {
  margin: 0;
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-h3); /* 32px */
  font-weight: 600;
  line-height: var(--nm-lh-tight);
  color: var(--nm-taupe);
}
.home-ig-body {
  margin-top: var(--nm-space-5);
}

.home-ig-profile {
  display: flex;
  align-items: center;
  gap: var(--nm-space-2);
  text-decoration: none;
  color: var(--nm-taupe);
}
.home-ig-avatar {
  border-radius: 50%;
}
.home-ig-profile-text {
  display: block;
}
.home-ig-name {
  display: block;
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-lg); /* 17px */
  font-weight: 600;
}
.home-ig-bio {
  display: block;
  white-space: pre-line;
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-sm);
  font-weight: 400;
}

/* data-cols=4 / tablet 2 / móvil 1, gap 10px, relación 3:4. */
.home-ig-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--nm-space-2);
  margin: var(--nm-space-2) 0 0;
  padding: 0;
  list-style: none;
}
.home-ig-item a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--nm-radius);
}
.home-ig-item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
/* Iconos superpuestos del widget original: `far fa-clone` en los carruseles y
   `fa fa-play` en los vídeos. Medidas tomadas del render REAL de producción a
   1280px (la regla `.sbi_medium` de sbi-styles no llega a aplicarse: esa clase
   va en la cabecera del feed, no en #sb_instagram), no de la hoja: clone 24x24
   a 12px del borde y play en una caja de 48x48. Las sombras son las mismas
   text-shadow del original, aquí como drop-shadow por ser SVG. */
.home-ig-badge,
.home-ig-play {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
/* font-size:24px; right:12px; top:12px; color #FFF a 90 %. */
.home-ig-badge {
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  fill: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
}
/* font-size:48px; left:50%; top:50%; margin-left:-19px; margin-top:-24px.
   El viewBox de fa-play (448x512) se ajusta al alto de la caja de 48px, así que
   el glifo queda de 42x48 centrado — igual que en producción. */
.home-ig-play {
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  margin-left: -19px;
  fill: #fff;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
}

.home-ig-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--nm-space-2);
  background: rgba(155, 147, 132, 0.85);
  color: var(--nm-white);
  font-family: var(--nm-font-ui);
  font-size: var(--nm-fs-xs);
  line-height: var(--nm-lh-body);
  opacity: 0;
  transition: opacity var(--nm-transition);
}
.home-ig-item a:hover .home-ig-caption,
.home-ig-item a:focus-visible .home-ig-caption {
  opacity: 1;
}

/* ---------- Reseñas (becb8b5) -------------------------------------------- */
/*
 * Equivalente estático del widget Trustindex (`layout-id=5`, categoría
 * "slider", preset `light-minimal`), sin una línea de su JavaScript.
 * Medidas tomadas del render real de ese layout con su propia hoja de estilo
 * (`widget-presetted-css/5-light-minimal.css`) a 1400px:
 *
 *   .ti-footer                columna izquierda de 245px, texto centrado
 *   .ti-rating                24px/700, la nota global ("EXCELENTE")
 *   .ti-footer .ti-star       estrellas de 30px, oro #F6BB06
 *   .ti-large-logo img        logo de Google de 110×35
 *   .ti-review-item           tarjeta de ~369px, padding lateral de 8px
 *   .ti-inner                 padding 20px, radio 4px, SIN borde ni fondo
 *   .ti-profile-img           40×40 redonda
 *   .ti-name / .ti-date       14px/700 y 11.2px
 *   .ti-platform-icon img     "G" de Google de 20×20, arriba a la derecha
 *   .ti-stars .ti-star        estrellas de 15px + sello azul de verificación
 *   .ti-review-text-container 15px
 *
 * El "Leer más" del original pliega el texto con JS; aquí las reseñas se
 * pintan enteras.
 */
.home-reviews {
  padding: var(--nm-space-6) 0;
}
.home-reviews-inner {
  display: flex;
  align-items: center;
  gap: var(--nm-space-4);
}
.home-reviews-head {
  flex: 0 0 245px;
  text-align: center;
  font-family: var(--nm-font-ui);
  font-size: 15px;
  color: var(--nm-ink);
}
.home-reviews-label {
  display: block;
  margin-bottom: 6px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: var(--nm-ls-caps);
}
.home-reviews-count {
  display: block;
  margin-top: 5px;
}
.home-reviews-logo {
  display: block;
  width: 110px;
  height: 35px;
  margin: var(--nm-space-2) auto 0;
}
.home-reviews-head .home-stars {
  gap: 0;
}
.home-reviews-head .home-star {
  width: 30px;
  height: 30px;
}
.home-stars {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}
.home-star {
  width: 15px;
  height: 15px;
  /* Oro de la estrella de Google del widget (star/f.svg: rgb(246,187,6)). */
  fill: #f6bb06;
}
/*
 * El original es un carrusel movido por JS (flechas `.ti-next`/`.ti-prev` y
 * puntos `.ti-controls-line`). Aquí, una tira con scroll horizontal y
 * `scroll-snap`: el mismo gesto, con CSS puro y sin bloquear el contenido.
 */
.home-reviews-track {
  display: flex;
  flex: 1 1 auto;
  /* Sin esto un flex-item no baja de su min-content y desborda la página. */
  min-width: 0;
  gap: 0;
  margin: 0;
  padding: 5px 0 1px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  list-style: none;
  scrollbar-width: thin;
}
.home-reviews-track:focus-visible {
  outline: 2px solid var(--nm-teal);
  outline-offset: 2px;
}
.home-review {
  /*
   * El widget no reparte columnas fijas: su JS mete tantas como quepan a
   * `data-review-target-width="275"`. Un flex-basis de 275px sin encoger hace
   * lo mismo sin JS (tres tarjetas y pico en el ancho del contenedor a 1280px,
   * una y el borde de la siguiente en móvil, que además insinúa que hay más).
   * Los 8px de padding lateral son los de `.ti-review-item`.
   */
  flex: 0 0 275px;
  /* Los ítems flex parten de min-width:auto: una reseña con una palabra o una
     URL sin espacios estiraba el min-content y sacaba la página de la pantalla
     (49px de scroll horizontal a 375px). */
  min-width: 0;
  padding: 0 8px;
  scroll-snap-align: start;
}
.home-review-inner {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
}
.home-review-head {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 40px;
}
.home-review-avatar {
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: var(--nm-font-ui);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--nm-white);
}
.home-review-who {
  min-width: 0;
  flex: 1 1 auto;
  font-family: var(--nm-font-ui);
}
.home-review-name {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--nm-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-review-date {
  display: block;
  font-size: 11.2px;
  line-height: 1.4;
  color: var(--nm-taupe);
}
.home-review-platform {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  align-self: flex-start;
}
.home-review-rating {
  display: flex;
  align-items: center;
  margin: 10px 0 5px;
}
.home-review-verified {
  width: 15px;
  height: 15px;
  margin-inline-start: 7px;
}
.home-review-text {
  margin: 0;
  font-family: var(--nm-font-body);
  font-size: 15px;
  line-height: var(--nm-lh-body);
  color: var(--nm-ink);
  /* Las reseñas son texto de terceros: parte cualquier palabra que no quepa. */
  overflow-wrap: anywhere;
}
.home-review-text p {
  /*
   * `.ti-read-more` pliega el texto largo con JS para que todas las tarjetas
   * midan lo mismo. Sin JS no hay "Leer más", pero sí el pliegue: sin él, una
   * reseña de 550 caracteres estiraba la fila entera a más de 1000px de alto.
   * El texto completo sigue en el HTML (buscadores y lectores de pantalla).
   */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  overflow: hidden;
  margin: 0;
}

/* ---------- Botón flotante de WhatsApp (d828e1d) ------------------------- */
.home-whatsapp {
  position: fixed;
  right: 15px;
  bottom: var(--nm-space-6);
  z-index: 3000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0.5em;
  box-sizing: content-box;
  border-radius: 50%;
  background: #61ce70; /* --e-global-color-accent */
  transition: transform var(--nm-transition);
}
.home-whatsapp svg {
  width: 30px;
  height: 30px;
  fill: var(--nm-white);
}
.home-whatsapp:hover {
  transform: scale(1.1);
}

/* =========================================================================
   Cortes del original: 1024px y 767px
   ========================================================================= */
@media (max-width: 1024px) {
  .home-hero {
    height: 70vh;
  }

  .home-band,
  .home-band + .home-band {
    padding: 0;
  }
  .home-band-inner {
    padding-inline: 0;
  }
  .home-band-text {
    padding: var(--nm-space-3);
  }
  .home-band--right .home-band-photo,
  .home-band--left .home-band-photo {
    margin-inline: 0;
  }
  .home-band-photo {
    min-height: var(--band-h-t, 450px);
  }

  .home-why,
  .home-adults,
  .home-kids {
    padding: 0;
  }
  .home-why-text {
    padding: var(--nm-space-5);
  }
  .home-adults-text {
    padding: var(--nm-space-3);
  }
  .home-kids-text {
    padding: var(--nm-space-5);
  }
  .home-adults-photo {
    margin-inline-start: 0;
  }
  .home-kids-photo {
    margin-inline-end: 0;
  }
  .btn--outline {
    margin-top: 0;
  }

  .home-ig-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Sin sitio para la columna de la nota al lado: cabecera arriba, tira debajo. */
  .home-reviews-inner {
    display: block;
  }
  .home-reviews-head {
    margin-bottom: var(--nm-space-4);
  }
}

@media (max-width: 767px) {
  .home-hero {
    height: 50vh;
  }

  .home .container {
    padding-inline: var(--nm-space-3);
  }

  .home-band {
    padding: var(--nm-space-6) 0;
  }
  .home-band + .home-band {
    padding: 0 0 var(--nm-space-6);
  }
  .home-band-inner,
  .home-why-inner,
  .home-adults-inner,
  .home-kids-inner {
    grid-template-columns: 1fr;
  }
  /* elementor-reverse-mobile: en móvil la foto de la 2.ª banda va debajo. */
  .home-band--left .home-band-text,
  .home-kids-text {
    order: 1;
  }
  .home-band--left .home-band-photo,
  .home-kids-photo {
    order: 2;
  }
  .home-band-text {
    margin-bottom: var(--nm-space-5);
    padding: 0;
  }
  .home-band-photo {
    min-height: var(--band-h-m, 400px);
  }
  .home-band--left .home-band-photo {
    margin-inline: var(--nm-space-3);
  }
  .home-lead {
    text-align: start;
  }

  .home-why,
  .home-adults,
  .home-kids {
    padding: var(--nm-space-6) var(--nm-space-3);
  }
  .home-why-text,
  .home-adults-text,
  .home-kids-text {
    padding: 0;
  }
  .home-why-media {
    margin-top: var(--nm-space-3);
  }
  .home-list {
    margin-bottom: var(--nm-space-5);
  }
  .home-adults-photo {
    min-height: 400px;
  }
  .home-kids-photo {
    min-height: 350px;
    margin-top: var(--nm-space-5);
    background-position: bottom center;
  }

  .home-cards-grid {
    grid-template-columns: 1fr;
  }
  .home-card-title {
    padding-bottom: 60px;
  }

  .home-cta-eyebrow {
    font-size: 40px;
  }
  .home-cta-sub {
    font-size: 25px;
  }

  .home-ig-grid {
    grid-template-columns: 1fr;
  }
  .home-ig-caption {
    opacity: 1;
  }
}