/* =========================
   ABOUT PAGE ONLY
   (base.css handles variables + header/footer)
========================= */

.about-split{
  background: var(--muted-bg);
  padding: 52px 0 64px;
}

/* Layout: left image card + right text */
.about-grid{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: center;
}

/* Image card like screenshot */
.about-imagewrap{
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}

/* Make the image fill the card nicely */
.about-image{
  width: 100%;
  height: 560px;          /* adjust if your image needs less */
  object-fit: cover;
  display: block;
}

/* Right side text styling */
.about-content{
  max-width: 660px;
}

.about-title{
  margin: 0 0 16px 0;
  font-size: clamp(34px, 3.4vw, 54px);
  letter-spacing: -0.9px;
  line-height: 1.08;
  color: #0a1a3a;
}

.about-lead{
  margin: 0 0 22px 0;
  color: #5b667d;
  line-height: 1.8;
  font-size: 16px;
  max-width: 72ch;
}

.about-subtitle{
  margin: 18px 0 12px 0;
  font-size: 18px;
  font-weight: 800;
  color: #0a1a3a;
  letter-spacing: -0.2px;
}

/* Bullet list look */
.about-bullets{
  margin: 0 0 26px 0;
  padding-left: 18px;
  color: #5b667d;
  line-height: 1.9;
}

.about-bullets li{
  margin: 8px 0;
}

/* CTA spacing */
.about-cta{
  margin-top: 6px;
}

/* Responsive */
@media (max-width: 980px){
  .about-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .about-image{
    height: 420px;
  }
}