/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE — blokken die alleen hier voorkomen
   ═══════════════════════════════════════════════════════════════════ */

/* ── Beloftebalk direct onder de hero ────────────────────────────── */

.promise {
  background: var(--c-ink);
  border-top: 1px solid var(--c-ink-line);
  color: var(--c-text-inv-soft);
}

/* Eén regel die het hele aanbod samenvat. Stond er niet, en dat is
   precies het verhaal: eten, drank én bediening uit één hand. */
.promise__claim {
  padding-block: clamp(28px, 3.5vw, 44px) 0;
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 300;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--c-text-inv);
  max-width: 26ch;
  text-wrap: balance;
}
.promise__claim em { font-style: italic; color: var(--c-brass-bright); }

.promise__claim + .promise__inner {
  margin-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--c-ink-line);
  padding-top: clamp(22px, 2.5vw, 30px);
}

@media (min-width: 900px) {
  .promise__claim { font-size: var(--t-3xl); max-width: 22ch; }
}
.promise__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4) var(--s-6);
  padding-block: var(--s-6);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.promise__item {
  display: block;
  padding-top: var(--s-3);
  /* Messing streepje boven elke belofte in plaats van een bullet */
  border-top: 1px solid var(--c-brass-bright);
}
.promise__item strong {
  display: block;
  color: var(--c-text-inv);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.promise__item > span {
  display: block;
  margin-top: 1px;
  font-size: var(--t-xs);
  color: var(--c-text-inv-mute);
}

@media (min-width: 700px)  { .promise__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .promise__inner { grid-template-columns: repeat(4, 1fr); } }

/* ── Specialiteitssectie ─────────────────────────────────────────── */

.speciality__facts {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-ink-line);
  display: grid;
  gap: var(--s-4);
}
@media (min-width: 620px) {
  .speciality__facts { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
}
.speciality__facts li {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--c-text-inv-mute);
}
.speciality__facts strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--c-brass-bright);
  margin-bottom: 2px;
}

.split__actions {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
}

.concept-footnote {
  margin-top: clamp(40px, 5vw, 64px);
  text-align: center;
  font-size: var(--t-base);
  color: var(--c-text-soft);
}
.concept-footnote .link-underline { color: var(--c-text); }

/* ── Zo werkt het: tijdlijn ─────────────────────────────────────────────
   Telefoon: verticaal, lijn links langs de nummers.
   Breed (≥900): horizontaal, lijn door de nummers van stap 1 tot 4. */
.stappen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-6);
  position: relative;
}
.stappen__stap {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: var(--s-5);
  align-items: start;
}
/* Lijnstuk naar de volgende stap */
.stappen__stap:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 23.5px;
  top: 48px;
  bottom: calc(-1 * var(--s-6));
  width: 1px;
  background: var(--c-brass);
  opacity: 0.6;
}
.stappen__nr {
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--c-brass);
  background: var(--c-cream-soft);
  color: var(--c-brass-ink);
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.stappen__stap:hover .stappen__nr { background: var(--c-brass); color: var(--c-ink); }
.stappen__titel {
  grid-column: 2;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  font-weight: 400;
}
.stappen__tekst {
  grid-column: 2;
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-text-soft);
  max-width: 34ch;
}

@media (min-width: 900px) {
  .stappen {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-6);
  }
  .stappen__stap { grid-template-columns: 1fr; }
  .stappen__nr { grid-row: auto; width: 56px; height: 56px; font-size: 1.5rem; }
  .stappen__titel { grid-column: 1; margin-top: var(--s-5); }
  .stappen__tekst { grid-column: 1; }
  .stappen__stap:not(:last-child)::before {
    left: 56px;
    right: calc(-1 * var(--s-6));
    top: 28px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
}

/* ── Waarom Grands Rêves: teamfoto met lijst ───────────────────────── */
.waarom-home {
  margin-top: clamp(56px, 7vw, 96px);
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (min-width: 860px) {
  .waarom-home { grid-template-columns: 5fr 7fr; }
}
.waarom-home__beeld { margin: 0; overflow: hidden; background: var(--c-ink); }
.waarom-home__beeld img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
}
@media (max-width: 859px) {
  .waarom-home__beeld img { aspect-ratio: 4 / 3; }
}
.waarom-home__lijst {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
}
@media (min-width: 560px) {
  .waarom-home__lijst { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-6); }
}
.waarom-home__lijst li {
  display: grid;
  gap: 4px;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-cream-line);
}
.waarom-home__lijst strong {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 400;
  line-height: var(--lh-snug);
}
.waarom-home__lijst span { font-size: var(--t-sm); color: var(--c-text-soft); }