/* =========================================================
   ABOUT PAGE — page-specific layout only.
   Everything else (header, footer, buttons, cards, whychoose,
   featured, panel-card, closing-band) is inherited from style.css.
   ========================================================= */

/* story section: slider + copy */
.about-story{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;}
.about-slider-wrap{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 24px 48px rgba(0,0,0,.14);}
.about-slider-viewport{position:relative;height:420px;width:100%;}
.about-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease;}
.about-slide.is-active{opacity:1;}
.about-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.65) 100%);}
.about-slide-caption{position:absolute;left:0;right:0;bottom:0;padding:22px;color:#fff;z-index:1;}
.about-slide-caption span{display:inline-block;font-size:10.5px;font-weight:800;background:var(--orange);color:#fff;padding:4px 10px;border-radius:4px;margin-bottom:8px;letter-spacing:.4px;}
.about-slide-caption p{margin:0;font-size:18px;font-weight:800;}
.about-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px;z-index:2;}
.about-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);transition:.25s;}
.about-dots span.on{background:#fff;width:18px;border-radius:4px;}

.about-copy p{font-size:14px;color:var(--gray);line-height:1.75;margin:0 0 14px;}
.we-dont-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.we-dont-list li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;font-weight:600;color:var(--black);}
.we-dont-list i{color:#1AA05D;margin-top:3px;flex-shrink:0;}

/* denser grid for the two Why-Choose sections on this page (6 cards vs homepage's 5) */
.about-values-grid{grid-template-columns:repeat(5,1fr);}

@media(max-width:1100px){
  .about-story{grid-template-columns:1fr;}
  .about-slider-viewport{height:340px;}
  .about-values-grid{grid-template-columns:repeat(3,1fr) !important;}
}
@media(max-width:700px){
  .about-slider-viewport{height:260px;}
  .about-values-grid{grid-template-columns:repeat(2,1fr) !important;}
}