/* BIEPE - about page */

.about-story-section { --sec-bg: var(--color-bg); --sec-fg: var(--color-text); --sec-muted: var(--color-text-muted); --kicker: var(--color-primary); --sec-py: 5rem; --sec-py-lg: 7rem;
  background: var(--sec-bg); color: var(--sec-fg); padding-block: var(--sec-py); @media (width >= 1024px) { padding-block: var(--sec-py-lg); } }
.about__p { margin: 1.5rem 0 0; line-height: 1.75rem; color: var(--color-text-muted); & strong { font-weight: var(--weight-semibold); color: var(--color-text); } }
.bullets { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.bullets__item { display: flex; align-items: flex-start; gap: 0.75rem; padding-inline-start: 1rem; border-inline-start: 2px solid var(--color-primary); font-size: 0.875rem; line-height: 1.5rem; color: var(--color-text-muted); }
.photo { display: block; inline-size: 100%; block-size: auto; border-radius: var(--radius-photo, 12px); }
.about-principles-section { --sec-bg: var(--color-dark); --sec-fg: var(--white); --sec-muted: rgb(255 255 255 / 0.6); --kicker: var(--color-primary); --sec-py: 5rem; --sec-py-lg: 7rem;
  background: var(--sec-bg); color: var(--sec-fg); padding-block: var(--sec-py); @media (width >= 1024px) { padding-block: var(--sec-py-lg); } }
.principles { display: grid; border-inline-start: var(--border-width) solid rgb(255 255 255 / 0.2); border-block-start: var(--border-width) solid rgb(255 255 255 / 0.2); @media (width >= 1024px) { grid-template-columns: repeat(3, 1fr); } & > :nth-child(3n+2) { animation-range: entry 8% entry 48%; } & > :nth-child(3n+3) { animation-range: entry 16% entry 56%; } }
.principle { padding: 2rem; border-block-end: var(--border-width) solid rgb(255 255 255 / 0.2); border-inline-end: var(--border-width) solid rgb(255 255 255 / 0.2); @media (width >= 640px) { padding: 2.5rem; } @supports (animation-timeline: view()) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; } @media (prefers-reduced-motion: reduce) { animation: none; } }
.principle__top { display: flex; align-items: center; justify-content: space-between; & .ico { --ico-size: 1.5rem; color: var(--color-primary); } }
.principle__num { font-size: 0.75rem; line-height: 1rem; color: rgb(255 255 255 / 0.4); }
.principle__title { margin: 2rem 0 0; font-size: 1.5rem; line-height: 2rem; font-weight: var(--weight-semibold); letter-spacing: 0; }
.principle__text { margin: 1rem 0 0; line-height: 1.75rem; color: rgb(255 255 255 / 0.65); }
.principle__list { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.principle__item { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; line-height: 1.5rem; color: rgb(255 255 255 / 0.65); & .ico { --ico-size: 1rem; margin-block-start: 0.125rem; flex: none; color: var(--color-primary); } }