/* ============================================================
   HOME PAGE - page-specific only. The design system, listing
   cards, filters and location tiles all live in site.css
   ============================================================ */

.hero {
  min-height: clamp(560px, 84vh, 800px);
  /* Top padding clears the fixed nav with room to spare */
  padding-block: clamp(7rem, 13vw, 10rem) clamp(2.5rem, 5vw, 4rem);
}

/* Sized so the headline settles on two lines from tablet up */
.hero h1 { font-size: clamp(2.375rem, 5.4vw, 4rem); max-width: 24ch; margin-top: 1.5rem; }

.hero-credit {
  position: absolute;
  right: var(--pad);
  bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: right;
  color: rgba(255,255,255,.62);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.9;
  margin: 0;
}

.hero-credit b { display: block; color: rgba(255,255,255,.92); font-weight: 600; }

@media (max-width: 780px) { .hero-credit { display: none; } }

/* ---- Stat band ---- */
.statband { background: var(--surface); border-bottom: 1px solid var(--line); }
.stats { display: flex; flex-wrap: wrap; }

.stat {
  flex: 1 1 160px;
  padding: 1.75rem 1.5rem 1.75rem 0;
  border-right: 1px solid var(--line);
}

.stat:last-child { border-right: 0; }
.stat:not(:first-child) { padding-left: 1.5rem; }

.stat-num {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  color: var(--brand);
  display: block;
  line-height: 1.1;
}

.stat-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.625rem;
  display: block;
}

/* ---- Testimonials ----
   Six reviews of very uneven length, so the wall is laid out in CSS
   columns: each card keeps its natural height and the columns fill
   evenly, which a grid of equal rows cannot do. The brand band also
   gives the page a colour beat between the light sections either
   side of it. */
.testimonial { background: var(--brand); }
.testimonial-inner { padding-block: clamp(3.5rem, 8vw, 5.5rem); }
.testimonial .label { color: rgba(255,255,255,.62); }

.testimonial h2 {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  color: #FFFFFF;
  max-width: 24ch;
  margin-top: 1rem;
}

.quotes {
  margin-top: 3rem;
  columns: 3;
  column-gap: 1.5rem;
}

@media (max-width: 1000px) { .quotes { columns: 2; } }
@media (max-width: 640px)  { .quotes { columns: 1; } }

.quote {
  break-inside: avoid;
  margin: 0 0 1.5rem;
  padding: 1.5rem 1.625rem 1.375rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
}

.quote p {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255,255,255,.94);
}

.quote cite {
  display: block;
  margin-top: 1.125rem;
  padding-top: 0.875rem;
  border-top: 1px solid rgba(255,255,255,.16);
  font-style: normal;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

/* ---- Renting with us ---- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.5rem 2rem; }

.step-n {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--brand);
  display: block;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 1.125rem;
}

.step h3 { font-size: 1.1875rem; margin-bottom: 0.625rem; }
.step p { font-size: 0.9375rem; color: var(--muted); }