/* case study premium */
.cs{position:relative;overflow:hidden;background:radial-gradient(ellipse 60% 40% at 100% 0,rgba(10,92,168,.13),transparent 70%),radial-gradient(ellipse 50% 40% at 0 100%,rgba(201,138,53,.14),transparent 70%),var(--bg)}
.cs::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#062B55,#0A5CA8,#E8B54A)}
.cs .wf{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;margin-bottom:clamp(48px,6vw,80px)}
.cs .wf .intro{position:static}
.cs .intro .eyebrow::after{content:"";display:inline-block;margin-inline-start:12px;vertical-align:middle;width:46px;height:2px;background:linear-gradient(90deg,#E8B54A,transparent)}
.xform{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;padding:26px;border-radius:12px;background:linear-gradient(160deg,#062B55,#030A16);box-shadow:0 26px 60px rgba(6,43,85,.3);border:1px solid rgba(232,181,74,.4);position:relative;overflow:hidden}
.xform::before{content:"";position:absolute;inset:0;background:url(../images/hero.jpg) center/cover;opacity:.12;mix-blend-mode:screen}
.xform>*{position:relative}
.xin{display:grid;gap:10px}
.xin span{display:block;padding:11px 14px;border-radius:6px;background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.35);color:#C9D6EA;font:600 .88rem/1.2 var(--f-body);text-align:center;filter:saturate(.6)}
.xar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#06142A;background:radial-gradient(circle at 30% 25%,#FFE9A8,#E8B54A 55%,#B77A28);box-shadow:0 0 0 5px rgba(232,181,74,.18),0 0 26px rgba(232,181,74,.5)}
.xar svg{width:18px;height:18px}
.xout{display:grid;gap:10px;justify-items:center;text-align:center;padding:26px 14px;border-radius:10px;background:linear-gradient(140deg,#C98A35,#F2C766);color:#06142A;box-shadow:0 16px 36px rgba(0,0,0,.4)}
.xout b{width:40px;height:40px;border-radius:50%;background:#062B55;color:#F2C766;display:grid;place-items:center;font-size:1.2rem}
.xout span{font:700 1rem/1.25 var(--f-display)}
.pipe{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;padding-top:28px;counter-reset:p}
.pipe::before{content:"";position:absolute;left:5%;right:5%;top:28px;height:0;border-top:2px dashed #C98A35;opacity:.7}
.hole,.hs{all:revert}
.pipe .hs{position:relative;display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:46px 20px 26px;box-shadow:0 18px 40px rgba(6,43,85,.1);transition:transform .35s,box-shadow .35s}
.pipe .hs:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(6,43,85,.2)}
.pipe .hs i{position:absolute;left:auto;right:auto;inset-inline-start:20px;top:-28px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#062B55,#0B4180);color:#F2C766;font:700 1.15rem/1 var(--f-display);font-style:normal;border:2px solid #E8B54A;box-shadow:0 0 0 6px var(--bg),0 10px 22px rgba(6,43,85,.35)}
.pipe .hs .hi{position:absolute;inset-inline-end:16px;top:14px;color:#C98A35;opacity:.28;font-style:normal}
.pipe .hs .hi svg{width:34px;height:34px}
.pipe .hs h3{font:700 1.02rem/1.3 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-text);margin:0 0 8px}
.pipe .hs p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.55}
.pipe .hs:last-child{background:linear-gradient(160deg,#062B55,#0A3A72);border-color:rgba(232,181,74,.6)}
.pipe .hs:last-child h3{color:#F2C766}.pipe .hs:last-child p{color:#D5E0F0}
.pipe .hs:last-child .hi{color:#F2C766;opacity:.35}
.cs .deliv{margin-top:clamp(44px,5vw,64px);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(24px,3.4vw,42px);border-radius:12px;border-inline-start:6px solid #E8B54A;background:linear-gradient(120deg,#062B55,#030A16);box-shadow:0 26px 60px rgba(6,43,85,.28)}
.cs .deliv h3{color:#fff;margin:0;font-size:clamp(1.5rem,2.3vw,2rem)}
.cs .deliv .chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cs .deliv .chips span{position:relative;display:flex;align-items:center;min-height:58px;padding:10px 14px;padding-inline-start:32px;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid rgba(232,181,74,.35);color:#fff;font-size:.88rem;line-height:1.3;transition:background .25s,transform .25s,border-color .25s}
.cs .deliv .chips span::before{content:"";position:absolute;inset-inline-start:13px;top:50%;width:8px;height:8px;margin-top:-4px;background:#E8B54A;transform:rotate(45deg)}
.cs .deliv .chips span:hover{background:rgba(232,181,74,.16);transform:translateY(-2px);border-color:#E8B54A}
@media (max-width:1100px){.pipe{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:44px}.pipe::before{display:none}.cs .deliv{grid-template-columns:1fr}.cs .deliv .chips{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.cs .wf{grid-template-columns:1fr}}
@media (max-width:640px){.pipe{grid-template-columns:1fr}.cs .deliv .chips{grid-template-columns:1fr 1fr}.xform{grid-template-columns:1fr}.xar{transform:rotate(90deg);justify-self:center}}
@media (prefers-reduced-motion:reduce){.pipe .hs{transition:none}}