/* The two indexes are selection surfaces: all choices stay inside one viewport. */
:is(.page-products-index, .page-services-index) {
  height: 100svh;
  overflow: hidden;
}

:is(.page-products-index, .page-services-index) .site-header {
  height: var(--header-height);
  min-height: var(--header-height);
}

:is(.page-products-index, .page-services-index) .site-footer {
  display: none;
}

:is(.products-main, .services-main) {
  width: min(calc(100% - (2 * var(--page-gutter))), var(--content-max));
  height: calc(100svh - var(--header-height));
  margin: 0 auto;
}

:is(.products-main, .services-main) .index-header {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:is(.products-grid, .services-grid) {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.products-grid {
  grid-template-rows: minmax(0, 59fr) minmax(0, 41fr);
}

.services-grid {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

:is(.products-grid, .services-grid) .index-card,
:is(.products-grid, .services-grid) .index-card:first-child {
  min-height: 0;
  padding: clamp(1.25rem, 2.6vw, 3rem);
}

.products-grid .index-card:first-child {
  grid-column: 1 / -1;
}

.services-grid .index-card,
.services-grid .index-card:first-child {
  grid-column: 1;
}

:is(.products-grid, .services-grid) .index-card__copy {
  min-height: 0;
}

:is(.products-grid, .services-grid) .index-card h1,
:is(.products-grid, .services-grid) .index-card h2 {
  max-width: 18ch;
  font-size: clamp(1.7rem, 3.65vw, 4.6rem);
}

.products-grid .index-card:first-child h1 {
  font-size: clamp(2.6rem, 5.5vw, 6.2rem);
}

:is(.products-grid, .services-grid) .index-card__proposition {
  margin-top: clamp(0.45rem, 1vw, 0.9rem);
  font-size: clamp(0.88rem, 1.2vw, 1.15rem);
}

:is(.products-grid, .services-grid) .index-card__summary {
  margin-top: clamp(0.45rem, 1vw, 0.9rem);
  font-size: clamp(0.76rem, 1vw, 1rem);
  line-height: 1.35;
}

:is(.products-grid, .services-grid) .index-card__link {
  font-size: clamp(0.9rem, 1.3vw, 1.2rem);
}

@media (max-width: 42rem) {
  :is(.page-products-index, .page-services-index) .site-header {
    align-items: center;
    flex-direction: row;
    gap: 0.75rem;
    padding: 0;
  }

  :is(.page-products-index, .page-services-index) .site-brand {
    flex: 0 0 auto;
    font-size: 1.18rem;
  }

  :is(.page-products-index, .page-services-index) .site-nav {
    min-width: 0;
    overflow-x: auto;
  }

  :is(.page-products-index, .page-services-index) .site-nav ul {
    min-width: max-content;
    justify-content: flex-start;
    gap: 1rem;
  }

  :is(.products-main, .services-main) {
    width: 100%;
  }

  :is(.products-grid, .services-grid) {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(84%, 1fr);
    grid-template-columns: none;
    grid-template-rows: 1fr;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  :is(.products-grid, .services-grid) .index-card,
  :is(.products-grid, .services-grid) .index-card:first-child {
    grid-column: auto;
    grid-row: 1;
    min-height: 0;
    scroll-snap-align: start;
  }

  :is(.products-grid, .services-grid) .index-card h1,
  :is(.products-grid, .services-grid) .index-card h2,
  .products-grid .index-card:first-child h1 {
    font-size: clamp(2rem, 10vw, 3.35rem);
  }

  :is(.products-grid, .services-grid) .index-card__summary {
    font-size: clamp(0.86rem, 3.6vw, 1rem);
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 43rem) {
  .site-settle {
    animation: index-settle 173s steps(1, end) infinite;
    transform-origin: center;
  }

  .site-settle:nth-child(2) {
    animation-delay: -58s;
  }

  .site-settle:nth-child(3) {
    animation-delay: -116s;
  }

  @keyframes index-settle {
    0%, 46% { transform: translate(0, 0); }
    47%, 94% { transform: translate(2px, -1px); }
    95%, 100% { transform: translate(-1px, 1px); }
  }
}