/* /kontakt/: telefon jako pierwsza rzecz pod nagłówkiem, obok dane firmy (bez zdjęcia, D8), oś trzech kroków, formularz. Tylko tokeny z main.css. */

/* Nagłówek i blok telefonu to jedno pole dnia. */
.page-kontakt .page-head { padding-bottom: 0; }
.reach { padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.reach__grid { display: grid; gap: var(--sp-4); align-items: start; }
.reach__call { display: grid; justify-items: start; gap: var(--sp-3); }
@media (min-width: 64rem) {
  .reach__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); }
}

/* Numer: największy tekst strony po H1, cały jest celem dotyku. */
.reach__phone {
  display: inline-block;
  font-size: clamp(2.3rem, 1.4rem + 4vw, 4rem);
  font-weight: 700; line-height: 1.05; letter-spacing: -.01em;
  white-space: nowrap; text-decoration: none;
  padding-block: .35rem;
  border-bottom: 3px solid var(--slot);
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
  .reach__phone { transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
  .reach__phone:hover { color: var(--ink-2); border-color: var(--ink-2); }
}

.reach__list { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.reach__list > div { display: grid; gap: .1rem 1.5rem; padding-block: .85rem; border-bottom: 1px solid var(--line); }
.reach__list dt { font-size: var(--fs-small); font-weight: 550; color: var(--ink-2); }
.reach__list dd { margin: 0; font-weight: 550; }
.reach__list address { font-style: normal; line-height: 1.5; }
.reach__list a { overflow-wrap: anywhere; }
@media (min-width: 40rem) {
  .reach__list > div { grid-template-columns: 10rem 1fr; align-items: baseline; }
}

/* Kroki: układ osi czasu z main.css (m.steps, --n z liczby kroków). */
.next__lead { margin-bottom: var(--sp-4); }