/* A single type system for the municipal profile and its directories. */
body.about-page { font-family: "DM Sans", "Segoe UI", sans-serif; }
html:root body.about-page main#about-content {
  font-family: "DM Sans", "Segoe UI", sans-serif;
  font-synthesis: none;
}
html:root body.about-page main#about-content .about-tabs a {
  font: 600 13px/1.5 "Manrope", sans-serif !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
}
html:root body.about-page main#about-content :is(#profile, #heritage, #mayors-corner, #officials, #organization, #barangays) h2 {
  font: 700 clamp(23px, 2.4vw, 30px)/1.3 "Manrope", sans-serif !important;
  letter-spacing: -.035em !important;
  margin-block: 10px 18px !important;
}
html:root body.about-page main#about-content :is(#profile, #heritage, #mayors-corner, #officials, #organization, #barangays) h3 {
  font: 600 17px/1.5 "Manrope", sans-serif !important;
  letter-spacing: -.015em !important;
}
html:root body.about-page main#about-content :is(#profile, #heritage, #mayors-corner, #officials, #organization, #barangays) p {
  font: 400 15px/1.8 "DM Sans", sans-serif !important;
  letter-spacing: 0 !important;
}
html:root body.about-page main#about-content :is(#profile, #heritage, #mayors-corner, #officials, #organization, #barangays) .section-label,
html:root body.about-page main#about-content #barangays .barangay-summary b {
  font: 600 11px/1.6 "DM Sans", sans-serif !important;
  letter-spacing: .13em !important;
}
html:root body.about-page main#about-content #profile .profile-stats b {
  font: 700 clamp(21px, 2vw, 27px)/1.3 "Manrope", sans-serif !important;
  letter-spacing: -.035em !important;
  font-variant-numeric: tabular-nums;
}
html:root body.about-page main#about-content #profile .profile-stats span {
  font: 600 13px/1.5 "DM Sans", sans-serif !important;
  margin-top: 8px !important;
}
html:root body.about-page main#about-content #profile .profile-stats small,
html:root body.about-page main#about-content #barangays .barangay-directory > small,
html:root body.about-page main#about-content #mayors-corner cite {
  font: 400 12px/1.6 "DM Sans", sans-serif !important;
}
html:root body.about-page main#about-content #profile .quick-information dt {
  font: 500 10px/1.6 "DM Sans", sans-serif !important;
  letter-spacing: .08em !important;
}
html:root body.about-page main#about-content #profile .quick-information dd {
  font: 600 14px/1.65 "DM Sans", sans-serif !important;
  margin-top: 5px !important;
  overflow-wrap: anywhere;
}
html:root body.about-page main#about-content #profile .municipal-photo-card figcaption {
  font: 500 16px/1.65 "Manrope", sans-serif !important;
  letter-spacing: -.015em !important;
}
html:root body.about-page main#about-content #heritage strong,
html:root body.about-page main#about-content #barangays .barangay-list strong,
html:root body.about-page main#about-content .municipal-values-strip strong {
  font: 600 14px/1.55 "Manrope", sans-serif !important;
}
html:root body.about-page main#about-content #mayors-corner .priority-list li {
  font: 500 14px/1.65 "DM Sans", sans-serif !important;
}
html:root body.about-page main#about-content #organization .office-directory h3 {
  font-size: 15px !important;
  margin-block: 0 5px !important;
}
html:root body.about-page main#about-content #organization .office-directory p,
html:root body.about-page main#about-content .municipal-values-strip small {
  font: 400 13px/1.7 "DM Sans", sans-serif !important;
}
html:root body.about-page main#about-content #organization .office-directory article > span {
  font: 600 14px/1 "Manrope", sans-serif !important;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  html:root body.about-page main#about-content .about-tabs a {
    font-size: 12px !important;
    padding-inline: 15px !important;
  }
  html:root body.about-page main#about-content :is(#profile, #heritage, #mayors-corner, #officials, #organization, #barangays) h2 {
    font-size: 23px !important;
  }
  html:root body.about-page main#about-content :is(#profile, #heritage, #mayors-corner, #officials, #organization, #barangays) p {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }
  html:root body.about-page main#about-content #organization .office-directory p { font-size: 13px !important; }
}
/* Neutral indicators for selected, hovered, and focused About tabs. */
html:root body.about-page main#about-content > .about-tabs a::after {
  height: 1px !important;
  background: #002e5d !important;
}
html:root body.about-page main#about-content > .about-tabs a:is(:hover, :focus, :focus-visible, :active) {
  background: transparent !important;
  box-shadow: none !important;
}
@media (min-width: 1051px) {
  html:root body.about-page main#about-content #mayors-corner .priority-list {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-self: stretch !important;
  }
  html:root body.about-page main#about-content #mayors-corner .priority-list ul {
    flex: 0 0 auto !important;
    height: auto !important;
  }
}

html:root body.about-page main#about-content #barangays .barangay-summary h3,
html:root body.about-page main#about-content #barangays .barangay-summary article > b {
  width: 100%;
  text-align: left !important;
  margin-inline: 0 !important;
}

/* Compact municipal-values row in every About-page portal context. */
html:root body.about-page main#about-content .municipal-values-strip > .shell {
  align-items: stretch !important;
  gap: 12px !important;
  padding-block: 12px !important;
}
html:root body.about-page main#about-content .municipal-values-strip article {
  min-height: 0 !important;
  height: auto !important;
  padding: 12px !important;
  gap: 10px !important;
  align-items: flex-start !important;
}
html:root body.about-page main#about-content .municipal-values-strip article > span {
  flex-basis: 38px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 9px !important;
}
html:root body.about-page main#about-content .municipal-values-strip strong {
  font: 600 13px/1.4 "Manrope", sans-serif !important;
}
html:root body.about-page main#about-content .municipal-values-strip small {
  margin-top: 2px !important;
  font: 400 12px/1.5 "DM Sans", sans-serif !important;
}

/* Restrained About-page hierarchy shared by public, citizen, and employee views. */
html:root body.about-page main#about-content .about-section {
  padding-block: 40px !important;
}
html:root body.about-page main#about-content .section-heading {
  margin-bottom: 20px !important;
}
html:root body.about-page main#about-content :is(#profile, #heritage, #mayors-corner, #officials, #organization, #barangays) h2 {
  margin-block: 7px 12px !important;
  font: 600 clamp(21px, 2vw, 27px)/1.35 "Manrope", sans-serif !important;
  letter-spacing: -.02em !important;
}
html:root body.about-page main#about-content :is(#profile, #heritage, #mayors-corner, #officials, #organization, #barangays) h3 {
  font: 600 15px/1.45 "Manrope", sans-serif !important;
  letter-spacing: -.01em !important;
}
html:root body.about-page main#about-content :is(#profile, #heritage, #mayors-corner, #officials, #organization, #barangays) p {
  font: 400 14px/1.65 "DM Sans", sans-serif !important;
}
html:root body.about-page main#about-content :is(#profile, #heritage, #mayors-corner, #officials, #organization, #barangays) .section-label {
  font: 600 10px/1.5 "DM Sans", sans-serif !important;
  letter-spacing: .1em !important;
}
html:root body.about-page main#about-content :is(.municipal-profile, .quick-information, .narrative-grid > article, .mayor-corner > article, .mayor-corner > blockquote, .barangay-directory, .barangay-summary > article, .data-placeholder, .official-card, .office-directory > article) {
  border-radius: 8px !important;
  box-shadow: 0 5px 18px rgba(0, 30, 65, .04) !important;
  transform: none !important;
}
html:root body.about-page main#about-content :is(.municipal-profile, .quick-information, .narrative-grid > article, .barangay-directory) {
  padding: 22px !important;
}
html:root body.about-page main#about-content #profile .profile-stats {
  gap: 10px !important;
  margin-top: 20px !important;
}
html:root body.about-page main#about-content #profile .profile-stats > div {
  min-height: 86px !important;
  padding: 13px !important;
  border-radius: 7px !important;
  box-shadow: 0 3px 12px rgba(0, 30, 65, .035) !important;
}
html:root body.about-page main#about-content #profile .profile-stats b {
  font: 600 20px/1.3 "Manrope", sans-serif !important;
}
html:root body.about-page main#about-content #profile .profile-stats span {
  margin-top: 5px !important;
  font: 500 12px/1.45 "DM Sans", sans-serif !important;
}
html:root body.about-page main#about-content #profile .profile-stats small {
  font: 400 11px/1.45 "DM Sans", sans-serif !important;
}
html:root body.about-page main#about-content #profile .quick-information dl {
  margin-top: 16px !important;
}
html:root body.about-page main#about-content #profile .quick-information dl > div {
  padding-block: 11px !important;
}
html:root body.about-page main#about-content #profile .quick-information dt {
  font: 500 10px/1.5 "DM Sans", sans-serif !important;
}
html:root body.about-page main#about-content #profile .quick-information dd {
  margin-top: 3px !important;
  font: 500 13px/1.55 "DM Sans", sans-serif !important;
}
html:root body.about-page main#about-content #profile .municipal-photo-card figcaption {
  padding: 14px 16px !important;
  font: 500 14px/1.55 "Manrope", sans-serif !important;
}
html:root body.about-page main#about-content #heritage {
  padding-block: 36px !important;
}
html:root body.about-page main#about-content #heritage .narrative-grid {
  gap: 16px !important;
}
html:root body.about-page main#about-content #heritage .narrative-grid li {
  padding: 12px 14px 12px 40px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 10px rgba(0, 30, 65, .035) !important;
}
html:root body.about-page main#about-content #heritage .narrative-grid li :is(strong, span) {
  font-size: 13px !important;
  line-height: 1.55 !important;
}
html:root body.about-page main#about-content #mayors-corner .mayor-corner {
  min-height: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 5px 18px rgba(0, 30, 65, .04) !important;
}
html:root body.about-page main#about-content #mayors-corner .mayor-corner > :is(article, blockquote) {
  min-height: 0 !important;
  padding: 22px !important;
}
html:root body.about-page main#about-content #mayors-corner .mayor-corner__photo :is(img, .mayor-photo-placeholder) {
  height: 210px !important;
  margin-bottom: 12px !important;
}
html:root body.about-page main#about-content #mayors-corner blockquote p {
  font-size: 14px !important;
  line-height: 1.7 !important;
}
html:root body.about-page main#about-content #mayors-corner .priority-list ul {
  gap: 8px !important;
}
html:root body.about-page main#about-content #mayors-corner .priority-list li {
  min-height: 48px !important;
  padding: 12px 14px 12px 40px !important;
  border-radius: 6px !important;
  font: 500 13px/1.55 "DM Sans", sans-serif !important;
  box-shadow: 0 2px 9px rgba(0, 30, 65, .035) !important;
}
html:root body.about-page main#about-content #officials .data-placeholder {
  padding: 20px !important;
}
html:root body.about-page main#about-content #organization .office-directory {
  gap: 16px !important;
}
html:root body.about-page main#about-content #organization .office-directory > article:nth-child(n) {
  min-height: 104px !important;
  padding: 18px !important;
  gap: 12px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0, 30, 65, .04) !important;
}
html:root body.about-page main#about-content #organization .office-directory > article:nth-child(n) > span {
  width: 42px !important;
  height: 42px !important;
  font-size: 12px !important;
}
html:root body.about-page main#about-content #organization .office-directory > article:nth-child(n) h3 a {
  font: 600 14px/1.45 "Manrope", sans-serif !important;
}
html:root body.about-page main#about-content #organization .office-directory > article:nth-child(n) p {
  font: 400 12px/1.55 "DM Sans", sans-serif !important;
}
html:root body.about-page main#about-content #barangays .barangay-layout {
  gap: 18px !important;
}
html:root body.about-page main#about-content #barangays .barangay-summary {
  gap: 10px !important;
}
html:root body.about-page main#about-content #barangays .barangay-summary > article {
  min-height: 0 !important;
  padding: 18px !important;
}
html:root body.about-page main#about-content #barangays .barangay-list {
  gap: 8px !important;
  margin-top: 16px !important;
}
html:root body.about-page main#about-content #barangays .barangay-list > span {
  padding: 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 9px rgba(0, 30, 65, .03) !important;
}
html:root body.about-page main#about-content #barangays .barangay-list strong {
  font: 500 13px/1.5 "DM Sans", sans-serif !important;
}
@media (max-width: 720px) {
  html:root body.about-page main#about-content .about-section,
  html:root body.about-page main#about-content #heritage {
    padding-block: 32px !important;
  }
  html:root body.about-page main#about-content :is(.municipal-profile, .quick-information, .narrative-grid > article, .barangay-directory) {
    padding: 18px !important;
  }
  html:root body.about-page main#about-content #barangays .barangay-summary > article,
  html:root body.about-page main#about-content #barangays .barangay-summary > article > :is(b, h3, p) {
    text-align: center !important;
  }
  html:root body.about-page main#about-content #barangays .barangay-summary > article > :is(b, h3) {
    margin-inline: auto !important;
  }
  html:root body.about-page main#about-content #barangays .barangay-summary > article > p {
    margin-inline: auto !important;
  }
}

/* Stable spacing between Core Values icons and their text. */
html:root body.about-page main#about-content #heritage .narrative-grid > article:last-child > ul > li {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  row-gap: 3px !important;
  align-items: start !important;
  min-height: 0 !important;
  padding: 14px !important;
  text-align: left !important;
}
html:root body.about-page main#about-content #heritage .narrative-grid > article:last-child > ul > li::before {
  content: "\2713" !important;
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  margin: 1px 0 0 !important;
  transform: none !important;
}
html:root body.about-page main#about-content #heritage .narrative-grid > article:last-child > ul > li > strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  text-align: left !important;
}
html:root body.about-page main#about-content #heritage .narrative-grid > article:last-child > ul > li > span {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  text-align: left !important;
}