/* ABOUT PAGE (separate file: only /about loads it).
   The story section reuses the home page .about styles, the banner / .cta-band / .btn-light live in site.css. */

/* Numbers under the story */
.about-stats { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 0 0 1.25rem; }
.about-stats li { display: grid; gap: .1rem; }
.about-stats strong { font: 400 2.25rem/1 var(--font-head); color: var(--gold-light); }
.about-stats span { font-size: .8125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }

/* Why stay with us */
.why { padding: 2.25rem 0; background: var(--cream); }
.why-inner { max-width: 1320px; margin: 0 auto; padding: 0 1.25rem; }
.why-head { margin-bottom: 1.25rem; text-align: center; }
.why h2 { margin: 0; font: 400 clamp(1.75rem, 6vw, 3.25rem)/1.15 var(--font-head); }
.why-grid { display: grid; gap: 1rem; }
.why-card { padding: 1.1rem; background: #fff; border: 1px solid #e7e1d4; }
.why-card .service-icon { margin-bottom: .5rem; }
.why-card h3 { margin: 0 0 .3rem; font: 400 1.375rem/1.25 var(--font-head); }
.why-card p { margin: 0; font-size: .9375rem; line-height: 1.6; color: #4b5148; }

@media (min-width: 560px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) {
  .why { padding: 3rem 0; }
  .why-inner { padding: 0 2rem; }
  .why-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}