/* Public services page (templates/intake/index.html). Page compositions, not components:
   every value is a token from tokens.css, layout switches use container queries. */

.home {
  container-type: inline-size;
}

.home > * + * {
  margin-block-start: var(--space-8);
}

/* ---- Hero: two axes, owns the first screen ------------------------------------------- */

.home-hero {
  display: grid;
  gap: var(--space-6);
  align-content: center;
  min-block-size: calc(100svh - 8rem);
}

.home-hero__copy {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.home-hero h1 {
  font-size: clamp(var(--fs-4), 1.1rem + 2.2cqi, var(--fs-5));
  max-inline-size: 22ch;
}

@container (min-width: 48rem) {
  .home-hero {
    grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr);
    align-items: center;
    gap: var(--space-7);
  }
}

/* Tonal inset panel: a surface step instead of a border or a shadow. */
.island {
  background: var(--color-bg-2);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}

@container (min-width: 48rem) {
  .island {
    padding: var(--space-7);
  }
}

/* The questionnaire spine: the real lettered sections, stepped like a thumb index. */
.home-spine {
  display: grid;
  gap: var(--space-3);
}

.home-spine ol {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.home-spine li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  padding-inline-start: calc(var(--i, 0) * 1rem);
}

.home-spine li:nth-child(2) { --i: 1; }
.home-spine li:nth-child(3) { --i: 2; }
.home-spine li:nth-child(4) { --i: 3; }
.home-spine li:nth-child(5) { --i: 4; }
.home-spine li:nth-child(6) { --i: 5; }
.home-spine li:nth-child(7) { --i: 6; }
.home-spine li:nth-child(8) { --i: 7; }

.home-spine__title {
  font-weight: 600;
}

.home-spine__note {
  font-size: var(--fs-0);
  color: var(--color-muted);
}

/* ---- Ledger rows: the heading moves into a left column from 64rem --------------------- */

.home-row {
  display: grid;
  gap: var(--space-4) var(--space-7);
  align-items: start;
}

@container (min-width: 64rem) {
  .home-row {
    grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr);
  }
}

.home-services__groups > * + * {
  margin-block-start: var(--space-6);
}

.home-services h3 {
  margin-block-end: var(--space-3);
}

.svc-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-3);
}

.svc {
  display: grid;
  align-content: space-between;
  gap: var(--space-2);
  block-size: 100%;
  min-block-size: 6rem;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-card);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

.svc:hover {
  border-color: var(--color-line-strong);
  color: var(--color-text);
}

.svc__title {
  font-weight: 600;
  text-wrap: balance;
}

.svc__meta {
  font-size: var(--fs-0);
  color: var(--color-muted);
}

.home-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-5);
  color: var(--color-text-2);
}

.home-steps strong {
  color: var(--color-text);
}

.home-contact {
  font-style: normal;
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}