/* ==========================================================================
   Why Choose Us page
   ========================================================================== */
.why-main { max-width: var(--max-w); margin: 0 auto; padding: var(--space-6) var(--space-4); }

.why-hero { max-width: 760px; margin: 0 auto var(--space-6); text-align: center; }
.why-hero__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted);
}
.why-hero h1 { margin: 0 0 var(--space-3); font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: 0.02em; }
.why-hero p { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }

/* Section heading */
.why-section { margin-top: var(--space-6); }
.why-section__head { text-align: center; margin-bottom: var(--space-5); }
.why-section__head h2 {
  margin: 0 0 var(--space-2); font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.why-section__head p { margin: 0; color: var(--muted); }

/* Feature ticks */
.why-features {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
}
.why-feature {
  padding: var(--space-4); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); text-align: center;
}
.why-feature__tick {
  width: 44px; height: 44px; margin: 0 auto var(--space-3);
  display: grid; place-items: center; border-radius: 50%;
  background: #0d0d0d; color: #fff; font-size: 1.1rem; font-weight: 700;
}
.why-feature h3 { margin: 0 0 0.35rem; font-size: 1.02rem; letter-spacing: 0.01em; }
.why-feature p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.55; }

/* Colour matching banner */
.why-colours { text-align: center; }
.why-colours__banner {
  width: 100%; max-width: 920px; margin: 0 auto; display: block;
  border-radius: var(--radius);
}

/* Construction diagrams gallery */
.why-build__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);
}
.why-build__grid figure {
  margin: 0; padding: var(--space-3); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.why-build__grid img { width: 100%; height: auto; display: block; border-radius: 4px; }

/* CTA band */
.why-cta {
  margin-top: var(--space-6); padding: clamp(2rem, 5vw, 3.5rem) var(--space-4);
  background: #0d0d0d; color: #fff; text-align: center; border-radius: var(--radius);
}
.why-cta h2 { margin: 0 0 var(--space-2); font-size: clamp(1.4rem, 3.5vw, 2rem); letter-spacing: 0.04em; }
.why-cta p { margin: 0 auto var(--space-4); max-width: 56ch; opacity: 0.85; }
.why-cta .btn--solid { background: #fff; color: #0d0d0d; border-color: #fff; }
.why-cta .btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.why-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }

/* Responsive */
@media (max-width: 900px) { .why-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
  .why-build__grid { grid-template-columns: 1fr; }
}
@media (max-width: 460px) { .why-features { grid-template-columns: 1fr; } }