/* Contact, reviews and social: one daylight section, same palette as "How renting works". */
.reach {
  padding: var(--section-y) 0;
  background: var(--c-fog);
  color: var(--c-ink);
  --reach-line: rgba(16, 22, 27, 0.16);
}
.reach .section-head h2 { color: var(--c-ink); }
.reach .section-head p { max-width: 440px; color: var(--c-ink-soft); }
.reach a { color: var(--c-ink); }

/* Phone, email, address, hours */
.reach-contact {
  list-style: none;
  margin: 64px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); /* email is the longest value */
  gap: 24px 32px;
  border-top: 1px solid var(--reach-line);
}
.reach-contact li { padding-top: 22px; min-width: 0; }
.reach-contact h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.reach-contact a,
.reach-value {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: 2px;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-ink);
  overflow-wrap: break-word;
}
.reach-contact a { text-decoration: underline; text-decoration-color: var(--c-brand); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.reach-contact a:hover { color: var(--c-brand); }
.reach-contact p { margin: 0; font-size: 14px; color: var(--c-ink-soft); }

/* Sub-heads inside the section */
.reach-sub { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 700; color: var(--c-ink); }
.reach-sub span { margin-left: 12px; font-size: 14px; font-weight: 400; color: var(--c-ink-soft); }

/* Reviews as paper cards, like the example receipt */
.reach-reviews { margin-top: 80px; }
.reach-reviews ul {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.reach-reviews figure {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 24px;
  background: var(--c-paper);
  box-shadow: 0 24px 44px -32px rgba(16, 22, 27, 0.5);
}
.reach-stars { margin: 0; color: var(--c-brand); font-size: 16px; letter-spacing: 2px; }
.reach-reviews blockquote { flex: 1; margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--c-ink-soft); }
.reach-reviews figcaption {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--c-paper-rule);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink);
}

/* Social links in one row */
.reach-social {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--reach-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}
/* Round icon links (Instagram, Facebook, TikTok) */
.reach-social ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.reach-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  border: 1px solid var(--reach-line);
  color: var(--c-ink);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.reach-social a:hover { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-brand); }
.reach-handle { font-size: 14px; color: var(--c-ink-soft); }

@media (max-width: 1100px) {
  .reach-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .reach .section-head p { max-width: none; }
  .reach-contact { margin-top: 40px; }
  .reach-reviews { margin-top: 56px; }
  .reach-reviews ul { grid-template-columns: minmax(0, 1fr); }
  .reach-sub span { display: block; margin: 4px 0 0; }
  .reach-social { margin-top: 48px; }
}

/* Phones: compact. Contact in a 2-column grid (email gets the full row, it's long),
   reviews scroll sideways one card at a time, social stays one row of icons. */
@media (max-width: 600px) {
  .reach { padding: 64px 0 56px; }
  .reach .section-head p { margin-top: 10px; font-size: 15px; }

  .reach-contact {
    margin-top: 28px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "phone address" "email email" "hours hours";
    gap: 0 16px;
  }
  .reach-contact li { padding-top: 12px; }
  .reach-contact li:nth-child(1) { grid-area: phone; }
  .reach-contact li:nth-child(2) { grid-area: email; }
  .reach-contact li:nth-child(3) { grid-area: address; }
  .reach-contact li:nth-child(4) { grid-area: hours; }
  .reach-contact h3 { font-size: 11px; }
  .reach-contact a,
  .reach-value { font-size: 17px; }
  .reach-contact p { font-size: 13px; }

  .reach-reviews { margin-top: 36px; }
  .reach-sub { font-size: 20px; }
  .reach-reviews ul {
    display: flex;
    gap: 12px;
    margin: 14px calc(-1 * var(--gutter)) 0;
    padding: 0 var(--gutter) 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    overscroll-behavior-x: contain;
  }
  .reach-reviews li { flex: 0 0 84%; scroll-snap-align: start; }
  .reach-reviews figure { padding: 20px 18px 18px; }
  .reach-reviews blockquote { margin-top: 10px; font-size: 14px; line-height: 1.55; }
  .reach-reviews figcaption { margin-top: 14px; padding-top: 10px; font-size: 13px; }

  .reach-social { margin-top: 28px; padding-top: 20px; gap: 12px 16px; }
}