/* ==========================================================================
   Smyle Dental — about page
   Story column with an at-a-glance card and two office-map embeds. The split
   hero comes from service.css; everything else reuses the shared components.
   ========================================================================== */

/* ------------------------------------------------------------- story -- */
/* The card runs taller than the copy, so the copy centers against it the way
   the doctor quote centers its portrait. The pill row under the last paragraph
   finishes the column so the section reads balanced, not short. */
.story {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 44px;
  align-items: center;
  margin-top: 10px;
}
.story .prose p {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--mid);
  margin: 0 0 18px;
  max-width: 66ch;
}
.story .prose p:last-child { margin-bottom: 0; }
.story .prose .spacts { margin-top: 28px; }

/* Two "Find us" office maps close the column. The map card itself
   (.mapcard/.mapbar) is shared with the Contact page and lives in
   components.css; this file only lays the pair out inside the story. */
.story .findus { margin-top: 34px; }
.story .findus .eyebrow { margin-bottom: 14px; }
.story .maps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* ------------------------------------------------- at-a-glance card -- */
/* Same shell as the treatment preview card, so the two read as one family. */
.factcard {
  background: #fff;
  border: 1px solid rgba(30, 27, 22, .12);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(30, 27, 22, .08);
}
.factcard > img { width: 100%; height: 200px; object-fit: cover; display: block; }
.factcard .bd { padding: 24px 26px 26px; }
.factcard h4 {
  font-family: Fraunces, Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink3);
  margin: 0 0 10px;
}
.factcard ul { list-style: none; margin: 0 0 20px; padding: 0; }
.factcard li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--mid);
  border-bottom: 1px solid rgba(30, 27, 22, .08);
}
.factcard li:last-child { border-bottom: 0; }
.factcard li i {
  flex: 0 0 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink3);
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.factcard .btn { width: 100%; justify-content: center; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1000px) {
  .story { grid-template-columns: 1fr; gap: 30px; }
  .factcard { max-width: 520px; }
}

@media (max-width: 700px) {
  .story .maps { grid-template-columns: 1fr; }
}