/* banner hero: black with the menu's green glows, header sits transparent on top (like /solutions/) */
html body.system-page main .q-page-hero--banner.os-banner { position: relative; isolation: isolate; overflow: hidden; min-height: 560px; display: flex; align-items: center; justify-content: center; text-align: center; background: #000; padding: calc(var(--header-h) + 40px) 24px 72px !important; }
.os-banner::before, .os-banner::after { content: ""; position: absolute; z-index: -1; width: 460px; height: 460px; border-radius: 50%; background: #06b22d; filter: blur(200px); pointer-events: none; }
.os-banner::before { left: calc(50% - 720px + 40px); bottom: -180px; }
.os-banner::after { right: calc(50% - 720px - 40px); top: -220px; opacity: .7; }
.os-banner-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 860px; }
.os-kicker { margin: 0; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .35); font-size: 14px; line-height: 17px; font-weight: 600; text-transform: uppercase; color: #fff; }
html body.system-page main .q-page-hero--banner.os-banner h1 { margin: 0; color: #fff !important; font-size: 80px !important; line-height: 88px !important; letter-spacing: -2px !important; font-weight: 400 !important; }
html body.system-page main .q-page-hero--banner.os-banner .os-lead { margin: 0; max-width: 660px; text-align: center; font-size: 20px !important; line-height: 28px !important; font-weight: 500; color: #c8c8c8 !important; }
@media (max-width: 700px) { html body.system-page main .q-page-hero--banner.os-banner { min-height: 440px; } html body.system-page main .q-page-hero--banner.os-banner h1 { font-size: 48px !important; line-height: 54px !important; letter-spacing: -1px !important; } .os-banner::before, .os-banner::after { left: -160px; right: auto; width: 320px; height: 320px; filter: blur(140px); } .os-banner::after { left: auto; right: -160px; } }
/* /our-story/ — hero, story split with photo, stats band, links to the other About pages. Site tokens, square corners. */
.os-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.os-split-copy { display: flex; flex-direction: column; gap: 20px; }
html body.system-page main .os-split-copy h2 { margin: 0; }
html body.system-page main .os-split-copy p { margin: 0; font-size: 18px; line-height: 26px; font-weight: 500; color: #404040; }
.os-img { margin: 0; aspect-ratio: 595 / 650; overflow: hidden; background: #f8f9fa; }
.os-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
html body.system-page main .os-stats { position: relative; isolation: isolate; overflow: hidden; background: #000; padding: 96px 0; }
.os-stats::before, .os-stats::after { content: ""; position: absolute; z-index: -1; width: 380px; height: 380px; border-radius: 50%; background: #06b22d; filter: blur(170px); pointer-events: none; }
.os-stats::before { left: -100px; bottom: -200px; }
.os-stats::after { right: -120px; top: -220px; opacity: .6; }
.os-stats dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: 0; }
.os-stats dt { margin: 0; font-size: 64px; line-height: 70px; font-weight: 400; letter-spacing: -1px; color: #fff; }
.os-stats dt b { margin-left: 4px; font-weight: 400; color: #06b22d; }
.os-stats dd { margin: 8px 0 0; font-size: 18px; line-height: 26px; font-weight: 500; color: #c8c8c8; }
/* team (from the Teams page) */
html body.system-page main .os-team { overflow-x: clip; }
.os-team h2 { margin: 0 0 16px; text-align: center; }
html body.system-page main .os-team-desc { max-width: 760px; margin: 0 auto 48px; text-align: center; font-size: 18px; line-height: 26px; font-weight: 500; color: #404040; }
.os-crowd { margin: 0 calc(50% - 50vw); width: 100vw; overflow: hidden; }
.os-crowd img { display: block; width: 100%; height: auto; }
/* awards (from the Awards page) */
html body.system-page main .os-awards { background: #f8f9fa; }
.os-awards-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
html body.system-page main .os-awards-head h2 { margin: 0 0 16px; }
html body.system-page main .os-awards-head p { margin: 0; font-size: 18px; line-height: 26px; font-weight: 500; color: #404040; }
.os-award-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.os-award-grid li { padding: 20px; background: #fff; border: 1px solid transparent; transition: border-color var(--dur-fast, 200ms) var(--ease, ease); }
.os-award-grid figure { margin: 0 0 20px; aspect-ratio: 3 / 2; overflow: hidden; background: #e5e5e5; }
.os-award-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
html body.system-page main .os-awards h3 { margin: 0 0 8px; font-size: 20px !important; line-height: 26px !important; font-weight: 500 !important; }
html body.system-page main .os-award-grid p { margin: 0; font-size: 14px; line-height: 17px; font-weight: 600; text-transform: uppercase; color: #797979; }
@media (max-width: 900px) {
  .os-split-grid { grid-template-columns: 1fr; gap: 24px; }
  .os-award-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .os-img { aspect-ratio: 4 / 3; }
  .os-stats dl { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  html body.system-page main .os-stats { padding: 64px 0; }
  .os-stats dt { font-size: 48px; line-height: 54px; }
}
@media (max-width: 560px) { .os-award-grid { grid-template-columns: 1fr; } }