/* ==========================================================================
   About - an eighth distinct mood: warm, editorial, story-driven - the
   most human page. A parent-brand card links explicitly to
   skytradeaviation.com, not just a footer mention.
   ========================================================================== */
.about-page .op-section-header { max-width: 620px; }
/* ---- Hero ---- */
.about-hero {
  position: relative;
  padding: var(--st-space-4xl) 0 var(--st-space-3xl);
  background: var(--st-navy);
  border-bottom: 1px solid var(--st-navy-mid);
}
.about-hero h1 { position: relative; z-index: 2; max-width: 680px; margin-bottom: var(--st-space-lg); }
.about-hero h1 em { font-style: normal; color: var(--st-gold); }
.about-hero .hero-sub { position: relative; z-index: 2; max-width: 560px; font-size: 17px; color: var(--st-white-60); }
.about-hero .container { position: relative; z-index: 2; }
/* ---- Sections ---- */
.about-section { padding: var(--st-space-4xl) 0; }
.about-section--alt { background: var(--st-navy-light); border-top: 1px solid var(--st-navy-mid); border-bottom: 1px solid var(--st-navy-mid); }
/* ---- The story ---- */
.about-story { display: grid; gap: var(--st-space-2xl); align-items: center; }
@media (min-width: 900px) { .about-story { grid-template-columns: 1.1fr 1fr; } }
.about-story-text p { font-size: 16px; }
.about-story-image {
  border-radius: var(--st-radius-card);
  overflow: hidden;
  border: 1px solid var(--st-navy-mid);
  min-height: 260px;
  background: var(--st-navy-light);
}
.about-story-image img { width: 100%; height: 100%; object-fit: cover; }
/* ---- Parent brand card ---- */
.about-parent-card {
  background: linear-gradient(135deg, var(--st-navy-light), var(--st-navy));
  border: 1px solid var(--st-gold);
  border-radius: var(--st-radius-card);
  padding: var(--st-space-2xl);
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.about-parent-copy h2 { font-size: 32px; margin-bottom: var(--st-space-sm); }
.about-parent-copy p { font-size: 16px; margin-bottom: var(--st-space-lg); }
/* ---- Why it's different ---- */
.about-reasons { margin-top: var(--st-space-lg); }
.about-reason { padding: var(--st-space-lg); background: var(--st-navy-light); border: 1px solid var(--st-navy-mid); border-radius: var(--st-radius-card); }
.about-reason h4 { font-family: var(--st-font-display); font-size: 19px; font-weight: 600; color: var(--st-white); margin-bottom: var(--st-space-sm); }
.about-reason p { font-size: 14px; margin: 0; }
/* ---- CTA ---- */
.about-cta {
  padding: var(--st-space-4xl) 0;
  background: linear-gradient(180deg, var(--st-navy), var(--st-navy-light));
  text-align: center;
}
.about-cta-inner { max-width: 560px; margin: 0 auto; }
.about-cta-inner .btn-row { justify-content: center; margin-top: var(--st-space-lg); }