/* The About page (/about; services/aboutPage.js): the banner, the Olympia story as one readable column, how it works in
   three steps, and a sign-off with the way in. The banner is the home page's (public/home-page.css). */
.about-banner { position: relative; display: grid; place-items: center; overflow: hidden; background: #1d1840; }
.about-banner picture, .about-banner img { position: relative; z-index: 1; display: block; width: min(100%, 1600px); height: auto; }
@media (min-width: 1601px) {
  .about-banner::before { content: ""; position: absolute; inset: -40px; background: url("/brand/banner-1000.webp") center / cover; filter: blur(32px) brightness(0.65); }
}

.about { display: grid; gap: clamp(44px, 7vw, 72px); padding-block: clamp(28px, 5vw, 48px) 72px; }
.about-story { display: grid; gap: 18px; justify-items: start; max-width: 680px; }
.about-eyebrow { display: inline-flex; padding: 4px 12px; border-radius: 999px; background: var(--fill); color: var(--ink-2); font-size: 14px; font-weight: 600; }
.about-story h1 { font-size: clamp(36px, 6.5vw, 60px); line-height: 1.04; font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; }
.about-story p { color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.about-story .about-lede { color: var(--ink); font-size: clamp(18px, 2.3vw, 21px); line-height: 1.55; }
.about-story .about-go { color: var(--ink); font-weight: 600; }
.about-story .about-show-up { margin-top: 8px; padding-left: 18px; border-left: 4px solid; border-image: var(--buzz) 1; color: var(--ink); font-size: clamp(22px, 3.2vw, 30px); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.about-story .about-built { margin-top: 4px; color: var(--ink); font-size: clamp(22px, 3.2vw, 28px); font-weight: 700; letter-spacing: -0.02em; }

.about-section { display: grid; gap: 18px; }
.about-section h2 { font-size: clamp(26px, 4vw, 36px); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; }
.about-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.about-steps li { display: grid; gap: 4px; padding: 18px 20px 18px 64px; position: relative; border-radius: 18px; background: var(--fill); counter-increment: step; }
.about-steps li::before { content: counter(step); position: absolute; left: 18px; top: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--buzz); color: #ffffff; font-weight: 700; }
.about-steps span { color: var(--ink-2); font-size: 15px; }

.about-end { display: grid; gap: 12px; justify-items: center; padding: clamp(28px, 6vw, 52px) 20px; border-radius: var(--radius-card); background: var(--ink); color: var(--on-ink); text-align: center; }
.about-end h2 { max-width: 620px; font-size: clamp(24px, 3.6vw, 34px); line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.about-motto { font-size: clamp(17px, 2.2vw, 20px); font-style: italic; opacity: 0.85; }
.about-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.about-end .button.primary { background: var(--on-ink); color: var(--ink) !important; }
.about-end .button, .about-cta { min-height: 44px; margin-left: 0; padding: 0 20px; font-size: 16px; }
@media (min-width: 720px) {
  .about-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}