/* FIXD — intro and services index.
   A two-column editorial split on desktop: statement left, copy right, with
   the six services listed as a hard-ruled index underneath. */

.intro { background: var(--white); color: var(--black); }

.intro__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.intro__label { margin-bottom: 1.1rem; }

.intro__title {
  font-size: var(--t-huge);
  font-variation-settings: 'wdth' 78;
  letter-spacing: var(--track-huge);
}
.intro__body { display: grid; gap: 1.4rem; align-content: start; }
.intro__body p { font-size: var(--t-lede); }
.intro__body p:first-child { color: var(--black); font-weight: 600; }
.intro__body p + p { color: var(--muted); }

/* --- the index --------------------------------------------------------- */
.index {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--rule);
}
.index__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem .25rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: padding-inline var(--dur-sm) var(--ease-snap), color var(--dur-xs) linear;
}
.index__row:hover { padding-inline: .75rem .25rem; }
.index__num {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--muted);
}
.index__row:hover .index__num { color: var(--yellow); }
.index__name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.4vw, 2.1rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 82;
  letter-spacing: var(--track-huge);
  text-transform: uppercase;
  line-height: 1;
}
.index__go {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  color: var(--muted);
  transition: transform var(--dur-sm) var(--ease-snap), color var(--dur-xs) linear;
}
.index__row:hover .index__go { transform: translateX(5px); color: var(--black); }

@media (min-width: 900px) {
  .intro__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); }
  .index__row { grid-template-columns: 5rem 1fr auto; padding-block: 1.35rem; }
}