/* =====================================================
   About Us — page-specific styles
   Built on top of style.css design tokens (no Bootstrap)
   ===================================================== */

/* ── Breadcrumb (same pattern as other inner pages) ── */
.ab-crumb{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--ink-400);margin:10px 0}
.ab-crumb a{color:var(--ink-400);transition:color .2s}
.ab-crumb a:hover{color:var(--brand-700)}
.ab-crumb svg{width:13px;height:13px;flex-shrink:0;position:relative;top:2px}
.ab-crumb span{color:var(--brand-700)}

/* ── Banner — identical pattern to the AI-Powered Loyalty page's banner ── */
.banner-blk{position:relative;overflow:hidden;background:var(--ink-900)}
.banner-blk img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.banner-blk .banner-content{position:absolute;inset:0;display:flex;align-items:center;background:linear-gradient(0deg,rgba(16,16,21,.88) 0%,rgba(16,16,21,.45) 45%,rgba(16,16,21,.05) 75%)}
.banner-blk .container{width:100%;max-width:1280px;margin-inline:auto;padding:0 1.5rem 3rem}
.banner-blk .eyebrow{background:rgba(255,255,255,.12);color:#fff}
.banner-blk h1{font-size:clamp(2rem,4vw,3.5rem);line-height:1.14;letter-spacing:-.025em;color:#fff;margin-top:.85rem;max-width:38ch}
.img-block{border-radius: 30px;overflow: hidden;}
@media(max-width:767px){.banner-blk img{height:100%}.banner-blk .container{padding-bottom:2rem}}
@media(max-width:575px){.banner-blk img{height:250px}}

/* ── Hero — intro copy under the banner ── */
.ab-hero{position:relative;padding-top:3rem;padding-bottom:3rem;background:var(--grad-hero)}
.ab-hero-text{font-size:1rem;color:var(--ink-400);line-height:1.7}
.ab-hero-text p{margin:0}
.ab-hero-text p+p{margin-top:.85rem}
.ab-callout{margin-top:1.25rem;padding:1.25rem 1.5rem;border-radius:1rem;background:var(--grad-brand-soft);border:1px solid var(--brand-100);font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;color:var(--brand-700);line-height:1.6}

/* ── Section head + intro split (reused for later text+visual sections) ── */
.ab-intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center}
@media(max-width:900px){.ab-intro-grid{grid-template-columns:1fr;gap:2.5rem}}
.ab-intro-text p{margin:0;color:var(--ink-500);line-height:1.8;font-size:.98rem}
.ab-intro-text p+p{margin-top:1rem}

/* ── Ecosystem marquee — two rows, opposite direction, like the client-logo strip ── */
.ab-eco-rows{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}
.ab-eco-row{position:relative;overflow:hidden}
.ab-eco-row::before,.ab-eco-row::after{content:'';position:absolute;top:0;bottom:0;width:5rem;z-index:2;pointer-events:none}
.ab-eco-row::before{left:0;background:linear-gradient(to right,var(--white),transparent)}
.ab-eco-row::after{right:0;background:linear-gradient(to left,var(--white),transparent)}
.ab-eco-track{display:flex;width:max-content;gap:.75rem;animation:ab-eco-scroll 32s linear infinite}
.ab-eco-track.reverse{animation:ab-eco-scroll-rev 32s linear infinite}
.ab-eco-row:hover .ab-eco-track{animation-play-state:paused}
@keyframes ab-eco-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ab-eco-scroll-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.ab-eco-pill{flex-shrink:0;display:inline-flex;align-items:center;padding:.7rem 1.4rem;border-radius:9999px;background:var(--white);border:1px solid var(--brand-100);font-size:.85rem;font-weight:600;color:var(--ink-600);box-shadow:var(--shadow-sm);white-space:nowrap;transition:all .25s}
.ab-eco-pill:hover{border-color:var(--brand-400);color:var(--brand-700);box-shadow:var(--shadow-md)}

/* ── Industry checklist — 3-column list, inline support for the ecosystem paragraph ── */
.ab-industry-list{list-style:none;margin:20px 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem 1.5rem}
.ab-industry-list.about-list{max-width: 800px;margin-left: auto; margin-right: auto;}
.description-why {margin-bottom: 20px;}
#ab-ecosystem img{height:100%}
#ab-why .ail-callout{margin-top:20px}
@media(max-width:575px){.ab-industry-list{grid-template-columns:1fr}}
.ab-industry-list li{display:flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:600;color:var(--ink-700)}

/* ── Technology capability slider — icon + heading cards ── */
.ab-tech-slider-wrap{position:relative;overflow:hidden;padding:.5rem 0}
.ab-tech-slider-wrap::before,.ab-tech-slider-wrap::after{content:'';position:absolute;top:0;bottom:0;width:5rem;z-index:2;pointer-events:none}
.ab-tech-slider-wrap::before{left:0;background:linear-gradient(to right,var(--white),transparent)}
.ab-tech-slider-wrap::after{right:0;background:linear-gradient(to left,var(--white),transparent)}
.ab-tech-slider{display:flex;gap:1.25rem;width:max-content;animation:ab-tech-scroll 50s linear infinite}
.ab-tech-slider-wrap:hover .ab-tech-slider{animation-play-state:paused}
@keyframes ab-tech-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ab-tech-slide{flex-shrink:0;width:280px;border-radius:1.25rem;border:1px solid var(--brand-100);background:var(--white);padding:1.75rem;transition:all .3s}
.ab-tech-slide:hover{border-color:var(--brand-400);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.ab-tech-slide-icon{width:52px;height:52px;border-radius:.9rem;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:1.25rem}
.ab-tech-slide-icon.tone-brand{background:var(--grad-brand)}
.ab-tech-slide-icon.tone-plum{background:linear-gradient(135deg,var(--plum-400),var(--plum-500))}
.ab-tech-slide h4{margin:0;font-size:1.05rem;font-weight:800;color:var(--ink-800);line-height:1.35}
@media(max-width:575px){.ab-tech-slide{width:230px}.ab-tech-slider-wrap::before,.ab-tech-slider-wrap::after{width:2.5rem}}

/* ── Philosophy — pill tags supporting the split layout ── */
.ab-pill-cloud{display:flex;flex-wrap:wrap;gap:.6rem}
.ab-pill{display:inline-flex;align-items:center;padding:.6rem 1.15rem;border-radius:9999px;background:var(--white);border:1px solid var(--brand-100);font-size:.85rem;font-weight:600;color:var(--brand-700);box-shadow:var(--shadow-sm);transition:all .25s}
.ab-pill:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand-400)}
.ab-pill:nth-child(3n+1){transform:rotate(-1.5deg)}
.ab-pill:nth-child(3n+2){transform:rotate(1deg)}
.ab-pill:nth-child(3n+1):hover,.ab-pill:nth-child(3n+2):hover{transform:translateY(-3px) rotate(0)}

/* ── Checkmark icon — used by the industry checklist ── */
.ab-why-ic{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--grad-brand-soft);color:var(--brand-600);display:flex;align-items:center;justify-content:center;margin-top:.05rem}

/* ── Looking Ahead — full photo background with a glass content panel ── */
.ab-ahead-photo{position:relative;overflow:hidden;padding:8rem 0;background:var(--ink-900) url('../images/about-bg.jpg') center/cover no-repeat;background-attachment:fixed}
.ab-ahead-photo::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,21,.72) 0%,rgba(16,16,21,.5) 50%,rgba(16,16,21,.78) 100%);z-index:1}
.ab-ahead-photo .wrap{position:relative;z-index:2}
.ail-hero-sub p{margin-bottom: 15px!important;display:block}
@media(max-width:900px){.ab-ahead-photo{background-attachment:scroll;padding:6rem 0}}
.ab-ahead-glass{max-width:70rem;margin:0 auto;background:rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.18);border-radius:1.75rem;padding:3rem 2.75rem;box-shadow:0 20px 60px rgba(0,0,0,.35)}
@media(max-width:575px){.ab-ahead-glass{padding:2.25rem 1.5rem}}
.ab-ahead{text-align:center}
.ab-ahead-quote{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(1.4rem,2.6vw,1.9rem); color:#fff;line-height:1.5;margin:1rem 0 1.75rem}
.ab-ahead p{color:var(--ink-200);line-height:1.8;font-size:1rem;margin:0;text-align:center}
.ab-ahead p+p{margin-top:1rem}
.ab-ahead .ail-pill-row{justify-content:center;margin-top:1.75rem}