/* ============================================================
   about.html — page-specific rules only.
   Reuses shared classes from home.css (.container, .section-title,
   .section-sub, .eyebrow, .feature-card, .feature-icon, .btn-orange,
   .dealer-banner, .fade-up) and the dark hero-banner pattern already
   used on products.html (copied here, not re-imported, to avoid
   pulling in unrelated PLP-specific CSS).
   ============================================================ */

/* Hero banner — same visual pattern as products.html's .hero */

/* Intro */
.about-intro{padding:56px 0 16px;}
.about-intro .container{max-width:820px;}
.about-intro p{font-size:16px;line-height:1.8;color:var(--gray-700);margin-bottom:18px;}

/* Mission & Vision */
.about-mv{padding:40px 0 64px;}
.about-mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.about-mv-card{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:32px;}
.about-mv-card .feature-icon{margin-bottom:16px;}
.about-mv-card h2{font-size:20px;font-weight:700;color:var(--gray-900);margin-bottom:10px;}
.about-mv-card p{font-size:14.5px;line-height:1.7;color:var(--gray-500);}

/* Why Choose section sits on white (not black) to alternate rhythm after "What We Offer" */
.about-why{background:#fff;padding-top:0;}
.about-why .feature-card{background:var(--gray-50);border-color:var(--gray-200);}
.about-why .feature-title{color:var(--gray-900);}
.about-why .feature-desc{color:var(--gray-500);}
.about-why .features-header .section-title,
.about-why .features-header .section-sub{color:var(--gray-900);}
.about-why .features-header .section-sub{color:var(--gray-500);}

/* Our Commitment */
.about-commitment{padding:72px 0;background:var(--gray-50);text-align:center;}
.about-commitment-inner{max-width:720px;margin:0 auto;}

@media(max-width:900px){
  .about-mv-grid{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .about-intro{padding:36px 0 8px;}
  .about-mv-card{padding:24px;}
  .about-commitment{padding:48px 0;}
}