/* About us — minimal.
 * The About page is composed from the site's own main.css + stays.css components
 * (split, card, eyebrow, lead, stat, check-list, why-grid, testi-grid, faq, btn-*)
 * so it matches the rest of the site exactly. This file only adds the
 * about-specific dark hero and a couple of small link accents — it never overrides
 * the site's global heading sizes, eyebrow, stat or button styles. */
.about-hero{position:relative;overflow:hidden;background:var(--forest);color:var(--cream);text-align:center;padding:clamp(72px,9vw,112px) 0 clamp(64px,8vw,92px)}
.about-hero .wrap{position:relative;z-index:2}
.about-hero .eyebrow{background:rgba(255,255,255,.16);color:#fff;border:none}
.about-hero h1{color:#fff;margin:18px auto 0;max-width:840px;font-weight:600}
.about-hero .lead{color:rgba(255,255,255,.86);margin:22px auto 0;max-width:620px;font-size:clamp(16px,1.8vw,18px)}
.about-hero .hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:32px auto 0}

/* "View all stays" + testimonials "more" links — brand accent underline. */
.about-basecamps__more a,.about-testi__more a{color:var(--accent-dark);font-weight:600;text-decoration:underline;text-underline-offset:3px}

@media(max-width:560px){
  .about-hero h1{font-size:clamp(30px,10vw,40px)}
  .about-hero .hero-cta .btn{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  .about-hero *{animation:none}
}