/* About pages; shared branding, navigation and footer come from style.css. */
.about-page { padding-top: 145px; }
.about-page h1, .about-page h2, .about-page h3 { font-family: 'Outfit', sans-serif; line-height: 1.15; }
.about-page h2 { font-size: clamp(28px, 3.3vw, 38px); letter-spacing: -.7px; }
.about-page h3 { font-size: 23px; margin-bottom: 14px; }
.about-page p { color: #475569; }
.about-hero { padding-bottom: 80px; }
.about-eyebrow { color: var(--rrugo-blue) !important; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 22px; }
.about-hero h1 { max-width: 850px; font-size: clamp(42px, 6.5vw, 76px); letter-spacing: -2px; margin-bottom: 28px; }
.about-lead { max-width: 720px; font-size: 20px; line-height: 1.7; margin-bottom: 25px; }
.about-link { display: inline-flex; gap: 12px; align-items: center; color: var(--rrugo-blue); font-weight: 700; text-decoration: none; }
.about-link:hover { text-decoration: underline; }
.about-page a:focus-visible { outline: 3px solid var(--rrugo-blue); outline-offset: 5px; border-radius: 3px; }
.about-mission { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; padding-top: 44px; padding-bottom: 44px; border-top: 1px solid var(--border-gray); border-bottom: 1px solid var(--border-gray); }
.about-mission p { font-size: 19px; line-height: 1.8; }
.about-services, .about-values { padding-top: 72px; }
.about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.about-card { display: flex; flex-direction: column; align-items: flex-start; padding: 30px; background: #f5f8fd; border: 1px solid #e3ebf7; border-radius: 20px; }
.about-number { display: block; color: var(--rrugo-blue); font-family: 'Outfit', sans-serif; font-size: 16px; margin-bottom: 32px; }
.about-card p { margin-bottom: 26px; }
.about-card .about-link { margin-top: auto; }
.about-values .about-grid > div { border-left: 3px solid #bcd4fa; padding-left: 22px; }
.about-cta { padding-top: 76px; }
.about-cta-inner { padding: 52px 32px; border-radius: 24px; background: #174fa8; text-align: center; color: white; }
.about-cta-inner h2 { color: white; }
.about-cta-inner p { color: #e0ebff; margin: 18px 0 26px; font-size: 18px; }
.about-cta .store-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.about-cta .store-btn { display: inline-block; padding: 14px 22px; border-radius: 999px; background: white; color: #174fa8; font-weight: 700; text-decoration: none; }
.about-cta .store-btn:hover { background: #e0ebff; }
.about-contact { text-align: center; padding-top: 64px; padding-bottom: 80px; }
.about-contact h2 { font-size: 28px; margin-bottom: 16px; }
.about-contact a { color: var(--rrugo-blue); overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .about-page { padding-top: 112px; }
  .about-hero { padding-bottom: 44px; }
  .about-hero h1 { letter-spacing: -1px; }
  .about-lead, .about-mission p { font-size: 17px; }
  .about-mission { grid-template-columns: 1fr; gap: 22px; padding-top: 32px; padding-bottom: 32px; }
  .about-grid { grid-template-columns: 1fr; gap: 18px; }
  .about-services, .about-values { padding-top: 44px; }
  .about-card { padding: 26px; }
  .about-number { margin-bottom: 20px; }
  .about-cta { padding-top: 44px; }
  .about-cta-inner { padding: 36px 22px; }
  .about-contact { padding-top: 44px; padding-bottom: 56px; }
}