/* ===== About page hero — agency style ===== */
.ab-hero{position:relative;overflow:hidden;padding:72px 0 0;color:#fff;
  background:linear-gradient(180deg,transparent calc(100% - 230px),#fff calc(100% - 230px)),
             radial-gradient(circle at 85% 0%,#1F5FE055 0,transparent 45%),
             linear-gradient(160deg,#081C4A 0%,#0B2A6F 60%,#0B2A6F 100%)}
.ab-hero:before{content:"";position:absolute;inset:0 0 230px;background-image:radial-gradient(#ffffff18 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:linear-gradient(100deg,transparent 40%,#000);mask-image:linear-gradient(100deg,transparent 40%,#000);pointer-events:none}
.ab-hero .container{position:relative;z-index:1}

.ab-top{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;margin-bottom:56px}
.ab-title h1{font:700 clamp(2.6rem,6.2vw,5.4rem)/1.04 'Plus Jakarta Sans',sans-serif;letter-spacing:-.04em;color:#fff;margin:0}
.ab-line1 span{color:var(--yellow)}
.ab-line2{display:flex;align-items:center;gap:clamp(18px,3vw,40px);margin-top:18px}
.ab-tag{flex:0 0 auto;padding-left:6px}
.ab-tag small{display:block;font-size:.82rem;color:#A9BDE0;font-weight:500}
.ab-tag b{display:block;font:700 1.9rem 'Plus Jakarta Sans',sans-serif;color:#fff;letter-spacing:-.02em;margin-top:2px}

.ab-side{max-width:330px;padding-left:40px;border-left:1px solid #ffffff2e;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.ab-side p{color:#C9D8F2;font-size:.95rem;line-height:1.65;margin:0 0 26px}
.ab-stats{display:flex;gap:30px}
.ab-stats strong{display:block;font:700 1.55rem 'Plus Jakarta Sans',sans-serif;color:#fff;letter-spacing:-.02em}
.ab-stats em{font-style:normal;color:var(--yellow);margin-left:3px}
.ab-stats span{display:block;font-size:.76rem;color:#A9BDE0;line-height:1.35;margin-top:4px}

.ab-media{position:relative;border-radius:24px;overflow:hidden;height:clamp(300px,42vw,500px);background:#1a3d8f}
.ab-media img{width:100%;height:100%;object-fit:cover;display:block;animation:pop 1s .2s cubic-bezier(.2,.7,.2,1) both}
.ab-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#071D4B99);pointer-events:none}
.ab-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;z-index:2;box-shadow:0 0 0 10px #ffffff40;transition:transform .25s}
.ab-play svg{width:28px;height:28px;fill:var(--navy);margin-left:4px}
.ab-play:hover{transform:scale(1.08)}
.ab-media-cta{position:absolute;left:28px;bottom:26px;z-index:2;display:flex;gap:12px;flex-wrap:wrap}

/* entrance motion */
.ab-title>*,.ab-side{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.ab-line2{animation-delay:.1s!important}.ab-side{animation-delay:.2s}

/* offerings strip (like the logo row) */
.ab-strip{background:#fff;padding:40px 0 18px}
.ab-strip-row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.ab-strip span{display:flex;align-items:center;gap:10px;font:700 1.15rem 'Plus Jakarta Sans',sans-serif;color:#8C97A9;letter-spacing:-.01em}
.ab-strip svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:1000px){
  .ab-top{grid-template-columns:1fr;gap:30px}
  .ab-side{max-width:none;border-left:0;padding-left:0;border-top:1px solid #ffffff2e;padding-top:26px}
}
@media(max-width:800px){
  .ab-hero{padding-top:48px;background:linear-gradient(180deg,transparent calc(100% - 150px),#fff calc(100% - 150px)),linear-gradient(160deg,#081C4A,#0B2A6F)}
  .ab-hero:before{bottom:150px}
  .ab-strip-row{justify-content:center;gap:14px 26px}
  .ab-strip span{font-size:.95rem}
}
@media(max-width:560px){
  .ab-line2{flex-direction:column-reverse;align-items:flex-start;gap:14px;margin-top:6px}
  .ab-tag{padding-left:0}
  .ab-stats{gap:20px}
  .ab-stats strong{font-size:1.3rem}
  .ab-media{border-radius:18px;height:340px}
  .ab-play{width:60px;height:60px;margin:-30px 0 0 -30px}
  .ab-media-cta{left:16px;right:16px;bottom:16px}
  .ab-media-cta .btn{flex:1;min-height:44px;padding:10px 12px}
}
@media(prefers-reduced-motion:reduce){.ab-title>*,.ab-side,.ab-media img{animation:none}}