/* ============================================================
   about.css — Page-specific styles for about.html
   ============================================================ */


/* ── About Hero ── */
.about-hero {
  padding:    100px 0 60px;
  text-align: center;
}

.about-hero h1 {
  max-width:  680px;
  margin:     0 auto 18px;
  font-style: italic;
}

.about-hero p {
  font-size:   1.05rem;
  color:       var(--mid-brown);
  max-width:   560px;
  margin:      0 auto;
  line-height: 1.85;
}

.about-hero__photo {
  max-width:     780px;
  margin:        48px auto 0;
  border-radius: var(--radius);
  overflow:      hidden;
}
.about-hero__photo .img-ph { aspect-ratio: 21 / 9; }


/* ── Values Grid ── */
.values-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   28px;
  margin-top:            52px;
}

.value-card {
  text-align: center;
  padding:    32px 20px;
}

.value-card__icon {
  font-size:     2rem;
  margin-bottom: 14px;
}

.value-card h3 {
  font-size:     1.08rem;
  color:         var(--cream);
  margin-bottom: 12px;
}

.value-card p {
  font-size:   0.94rem;
  line-height: 1.75;
}


/* ── Zia Section — two-column: photo + text ── */
.zia-section {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   52px;
  align-items:           center;
}

.zia-photo .img-ph {
  aspect-ratio:  4 / 5;
  border-radius: var(--radius);
  overflow:      hidden;
  background:    #d8d1b2;
}

.zia-photo .img-ph img {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center 22%;
}

.zia-text h2     { margin-bottom: 18px; }
.zia-text p {
  font-size:   1.02rem;
  color:       var(--mid-brown);
  line-height: 1.85;
}
.zia-text p + p  { margin-top: 16px; }


/* ── Services List ── */
.services-list {
  max-width: 640px;
  margin:    42px auto 0;
}

.services-list li {
  padding:       18px 0;
  border-bottom: 1px solid var(--border);
  font-size:     1.02rem;
  color:         var(--mid-brown);
  display:       flex;
  align-items:   center;
  gap:           14px;
}
.services-list li:last-child { border-bottom: none; }

.services-list .icon {
  font-size:  1.3rem;
  flex-shrink: 0;
}


/* ── CTA Strip ── */
.cta-strip {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             16px;
  text-align:      center;
  padding-top:     44px;
}


/* ── Blockquote dark variant ── */
.blockquote--dark {
  color:        var(--text-on-dark);
  border-color: var(--sage-light);
}


/* ── Responsive — About ── */
@media (max-width: 768px) {
  .about-hero  { padding: 72px 0 48px; }
  .zia-section {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .zia-photo {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
  }
  .zia-photo .img-ph {
    aspect-ratio: 3 / 4;
  }
  .zia-photo .img-ph img {
    object-position: center 20%;
  }
  .zia-text h2 {
    text-align: center;
  }
  .values-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .zia-section {
    gap: 22px;
  }
  .zia-photo .img-ph {
    aspect-ratio: 4 / 5;
  }
  .zia-photo .img-ph img {
    object-position: center 16%;
  }
}