/* About page design layer. Standalone (new class names, prefix ab-), load AFTER affix.css.
   Palette: black, white, light grey and Bootstrap danger red. */
.ab-head{position:relative;overflow:hidden;padding:4.5rem 0 4rem;background:#000;color:#fff}
.ab-head::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40rem 18rem at 90% -10%,rgba(var(--bs-danger-rgb,220,53,69),.26),transparent 65%)}
.ab-head>.container{position:relative}
.ab-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:1.4rem;font-size:.85rem;color:#9aa0a6}
.ab-crumbs a{color:#cfd3d7;text-decoration:none}.ab-crumbs a:hover{color:#fff}
.ab-crumbs [aria-current]{color:#fff}
.ab-head h1{margin:0 0 1rem;color:#fff;font:700 clamp(2rem,4.4vw,3.1rem)/1.15 "Poppins",system-ui,sans-serif;letter-spacing:-.02em}
.ab-red{color:var(--bs-danger,#dc3545)}
.ab-lead{max-width:38rem;margin:0;color:#b4bac0;font-size:1.1rem;line-height:1.75}
.ab-facts{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;margin:2rem 0 0;padding:1.4rem 0 0;list-style:none;border-top:1px solid #1f1f1f}
.ab-facts li{color:#d3d7db;font-size:.92rem}
.ab-facts i{margin-right:.5rem;color:var(--bs-danger,#dc3545)}

.ab-visual{position:relative;padding:1.5rem;border-radius:22px;border:1px solid #e9ecef;
  background:linear-gradient(160deg,#fff,#f4f5f7);box-shadow:0 1.2rem 2.6rem rgba(0,0,0,.08)}
.ab-visual::before{content:"";position:absolute;left:-1px;top:2rem;bottom:2rem;width:4px;border-radius:2px;background:var(--bs-danger,#dc3545)}
.ab-mission{margin:1.6rem 0 0;padding:1.1rem 1.4rem;border-left:4px solid var(--bs-danger,#dc3545);border-radius:0 14px 14px 0;
  background:#f8f9fa;color:#212529;font:600 1.05rem/1.6 "Poppins",system-ui,sans-serif}

.ab-black{background:#000;color:#fff}
.ab-black .sec-title{color:#fff}
.ab-black .fcard.dark{background:#111;border-color:#262626;border-left-color:var(--bs-danger,#dc3545)}

@media(max-width:575.98px){
  .ab-head{padding:3.2rem 0 2.8rem}
  .ab-facts{gap:.5rem 1.2rem}
  .ab-visual{padding:1rem}
}

.ab-visual img.mascot {
  width: 100%;
  max-width: 400px; /* optional limit */
  height: auto;
  margin: 0 auto;
}