/* About: the company name, a lead line, two paragraphs and three values; the red fill moves along the values (js/sections/about-intro.js).
   On the home page it is the short version: one line instead of the lead and paragraphs, and a link to the about page under the values. */
.ab-intro{padding:88px var(--gutter) 72px;max-width:1100px}
.ab-name{font-weight:var(--fw-bold);font-size:var(--fs-about-name);line-height:1.05;color:var(--head)}
.ab-lead{margin-top:40px;font-size:var(--fs-about-lead);line-height:1.75;font-weight:var(--fw-bold);color:var(--head);max-width:44ch}
.ab-txt{display:grid;gap:18px;margin-top:22px;max-width:66ch}
.ab-txt p{font-size:var(--fs-18);line-height:1.95;color:var(--grey)}
.ab-pills{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.ab-pills li{font-size:var(--fs-17);font-weight:var(--fw-bold);padding:12px 28px;border-radius:var(--r-pill);border:1.5px solid var(--border-strong);color:var(--head);
  transition:background-color .5s var(--ease-out),border-color .5s var(--ease-out),color .5s var(--ease-out)}
.ab-pills li.is-on{background:var(--red);border-color:var(--red);color:var(--white)}

.ab-more{margin-top:36px}
@media (max-width:760px){.ab-intro{padding:56px var(--gutter-m) 48px}.ab-lead{margin-top:28px}.ab-txt p{font-size:var(--fs-16)}.ab-pills li{padding:10px 20px;font-size:var(--fs-15)}}