/* About page add-ons (LIGHT THEME) */

.ds-about .page-hero{
  padding: 56px 0 36px;
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(0,168,107,0.12), rgba(0,0,0,0)),
    radial-gradient(900px 420px at 80% 20%, rgba(209,141,0,0.10), rgba(0,0,0,0)),
    linear-gradient(180deg, #FFFFFF, #F7FAFD);
  border-bottom: 1px solid rgba(11,31,51,0.08);
}

.ds-about .page-hero-inner{
  max-width: 1120px;
}

.ds-about .breadcrumbs{
  font-size: 13px;
  opacity: 0.95;
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: rgba(11,31,51,0.72);
}

.ds-about .breadcrumbs a{
  color: rgba(11,31,51,0.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(11,31,51,0.22);
}
.ds-about .breadcrumbs a:hover{
  border-bottom-color: rgba(11,31,51,0.55);
}

.ds-about .page-hero h1{
  margin: 0 0 10px;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.02em;
}

.ds-about .page-hero .lead{
  max-width: 920px;
  line-height: 1.55;
  font-size: 16.5px;
  color: rgba(11,31,51,0.78);
  margin: 0 0 18px;
}

.ds-about .page-hero-ctas{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}

.ds-about .page-hero-highlights{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.ds-about .highlight{
  padding: 14px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(11,31,51,0.08);
  box-shadow: 0 10px 22px rgba(11,31,51,0.06);
}

.ds-about .highlight .kicker{
  font-weight: 900;
  color: rgba(11,31,51,0.92);
  margin-bottom: 4px;
}
.ds-about .highlight .text{
  color: rgba(11,31,51,0.66);
  font-size: 14px;
}

@media (max-width: 860px){
  .ds-about .page-hero-highlights{
    grid-template-columns: 1fr;
  }
}

/* Content styling helpers */
.ds-about .bullets{
  display: grid;
  gap: 8px;
  margin: 12px 0 14px;
}

.ds-about .bullet{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: rgba(11,31,51,0.78);
  line-height: 1.45;
}

.ds-about .bullet i{
  color: rgba(0, 168, 107, 0.95);
  margin-top: 2px;
}

.ds-about .mini-panel{
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(11,31,51,0.03);
  border: 1px solid rgba(11,31,51,0.08);
}

.ds-about .mini-title{
  font-weight: 900;
  margin-bottom: 10px;
  color: rgba(11,31,51,0.92);
}

.ds-about .pill-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ds-about .pill2{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(11,31,51,0.03);
  border: 1px solid rgba(11,31,51,0.08);
  color: rgba(11,31,51,0.74);
  font-size: 13px;
}

.ds-about .about-panel a{
  color: rgba(11,31,51,0.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(11,31,51,0.22);
}
.ds-about .about-panel a:hover{
  border-bottom-color: rgba(11,31,51,0.55);
}

.ds-about .inline-links{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ds-about .faq{
  display: grid;
  gap: 10px;
}

.ds-about details{
  border-radius: 14px;
  background: rgba(11,31,51,0.03);
  border: 1px solid rgba(11,31,51,0.08);
  padding: 12px 14px;
}

.ds-about summary{
  cursor: pointer;
  font-weight: 800;
  color: rgba(11,31,51,0.92);
}

.ds-about details p{
  margin: 10px 0 0;
  color: rgba(11,31,51,0.74);
  line-height: 1.65;
}