/* =========================================================================
   About. Values transcribed from final_html/About.dc.html.
   HANDOFF §5: the story photo sits BELOW the text at every width when the
   grid stacks — the photo is the second grid child, so source order does it.
   ========================================================================= */

.about-story {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center;
}
.about-story h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 32px; font-weight: 700; color: #2C2218; margin: 0; line-height: 1.15;
}
.about-story p {
  font-size: 16px; line-height: 1.75; color: #3A4A40; margin: 16px 0 0 !important;
  text-wrap: pretty;
}
.about-story strong { color: #2C2218; }
.about-story__cta { margin-top: 22px; }
.about-story__photo { min-height: 320px; border-radius: 12px; overflow: hidden; }
.about-story__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.about-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 52px;
}
.about-card {
  background: #2D5441; border: 1px solid #234135; border-radius: 12px;
  padding: 32px 34px;
}
.about-card h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 23px; font-weight: 700; color: #FFFBE6; margin: 0;
}
.about-card p {
  font-size: 15px; line-height: 1.75; color: #C8E6D8; margin: 12px 0 0 !important;
}

.about-nap {
  background: #EAF3EC; border: 1px solid #C8E6D8; border-radius: 12px;
  padding: 36px 40px; margin-top: 52px;
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 36px; align-items: center;
}
.about-nap h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 26px; font-weight: 700; color: #2C2218; margin: 0;
}
.about-nap p {
  font-size: 15px; line-height: 1.75; color: #3A4A40; margin: 12px 0 0 !important;
}
.about-nap strong { color: #2C2218; }
.about-nap__ctas { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.about-nap__photo { min-height: 200px; border-radius: 10px; overflow: hidden; }
.about-nap__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1024px) {
  .about-story { grid-template-columns: 1fr; gap: 30px; }
  .about-nap { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .about-story h2 { font-size: 26px; }
  .about-cards { grid-template-columns: 1fr; margin-top: 40px; }
  .about-card { padding: 24px 22px; }
  .about-nap { padding: 26px 20px; margin-top: 40px; }
  .about-nap__ctas a { width: 100%; text-align: center; }
}