/* Infrastructure case study — reference-matched editorial layout. */
.case-infrastructure{
  --case-blue:#3c5eb4;
  --case-blue-deep:#2c4a94;
  --case-ink:#0f1d40;
  --case-copy:#44547a;
  --case-muted:#69799d;
  --case-line:#dfe6f4;
  --case-soft:#f4f7fd;
  --case-green:#15966f;
  color:var(--case-copy);
}

.case-infrastructure .cs-wrap{width:min(1220px,calc(100% - 80px));}
.case-infrastructure img[src^="case images/"]{filter:saturate(.68) contrast(.95);}

/* Hero */
.case-infrastructure main{position:relative;isolation:isolate;overflow:hidden;font-size:15px;line-height:1.58;}
.case-infrastructure main::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:62px;
  left:50%;
  width:860px;
  height:420px;
  pointer-events:none;
  opacity:.58;
  background:
    radial-gradient(ellipse at 66% 54%,rgba(91,133,226,.17),transparent 52%),
    repeating-linear-gradient(155deg,transparent 0 44px,rgba(53,98,196,.055) 45px,transparent 46px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 23%,#000 83%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 23%,#000 83%,transparent);
}
.case-infrastructure .cs-hero{
  min-height:392px;
  padding:42px 0 30px;
  grid-template-columns:minmax(0,1.03fr) minmax(430px,.97fr);
  gap:56px;
}
.case-infrastructure .cs-hero > div:first-child{transform:translateY(-34px);}
.case-infrastructure .cs-back{
  gap:6px;
  margin-bottom:27px;
  font-size:12px;
  color:#5a6c96;
}
.case-infrastructure .cs-back::after{content:"·";margin-left:14px;color:#a1afd0;}
.case-infrastructure .cs-back svg{width:11px;height:11px;}
.case-infrastructure .kick{font-size:12px;letter-spacing:.12em;color:var(--case-blue);}
.case-infrastructure .kick--rule{padding-bottom:0;}
.case-infrastructure .kick--rule::after{display:none;}
.case-infrastructure .cs-hero h1{
  margin:14px 0 14px;
  max-width:620px;
  font-size:50px;
  line-height:1.08;
  letter-spacing:-.043em;
  color:var(--case-ink);
}
.case-infrastructure .cs-hero .lead{
  max-width:600px;
  font-size:17px;
  line-height:1.62;
  color:#142a5f;
}
.case-infrastructure .cs-hero-art{height:316px;overflow:visible;}
.case-infrastructure .cs-hero-art img{
  width:570px;
  max-width:none;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-48%,-49%);
  filter:saturate(.68) contrast(.95);
}

/* Incident console */
.case-infrastructure .sim{
  position:relative;
  z-index:2;
  padding:0;
  border-radius:17px;
  box-shadow:0 14px 36px rgba(28,54,120,.14),inset 0 0 0 1px #dce4f2;
}
.case-infrastructure .sim-bar{
  min-height:54px;
  padding:13px 17px;
  background:linear-gradient(90deg,#243e7d 0%,#31519a 58%,#3c5eb4 100%);
}
.case-infrastructure .sim-bar .id{font-size:12px;color:#fff;letter-spacing:.09em;}
.case-infrastructure .sim-bar .state{font-size:10px;padding:6px 11px;border-radius:999px;}
.case-infrastructure .sim-bar .state.ok{background:#49b869;color:#fff;}
.case-infrastructure .sim-body{grid-template-columns:minmax(0,1.48fr) minmax(360px,.82fr);}
.case-infrastructure .sim-log{
  min-height:500px;
  max-height:500px;
  padding:17px 18px 14px;
  background:#fff;
}
.case-infrastructure .sim-log::before{left:29px;top:25px;bottom:20px;background:#b7c9f4;}
.case-infrastructure .sim-line{
  grid-template-columns:60px 88px 1fr;
  gap:10px;
  min-height:34px;
  padding:4px 0 4px 12px;
  font-size:12.5px;
}
.case-infrastructure .sim-line .t{font-size:10px;color:#8190b2;}
.case-infrastructure .sim-line .tag{font-size:9px;padding:3px 6px;}
.case-infrastructure .sim-line .tag::before{left:-86px;width:6px;height:6px;box-shadow:0 0 0 3px #fff;}
.case-infrastructure .sim-line .msg{color:#132956;line-height:1.4;}
.case-infrastructure .sim-side{padding:19px 26px;gap:13px;box-shadow:inset 1px 0 0 #dce4f2;}
.case-infrastructure .sim-side h4,
.case-infrastructure .sim-side-h{font-size:10px;color:#596b95;}
.case-infrastructure .sim-ents{gap:7px;}
.case-infrastructure .ebadge{
  padding:7px 12px;
  border-radius:999px;
  font-size:10px;
  color:#27437b;
  background:#f7f9fe;
  box-shadow:inset 0 0 0 1px #dfe6f4;
}
.case-infrastructure .ebadge i{background:#7d97d6;}
.case-infrastructure .insight{padding:17px 16px;border-radius:10px;background:#f9fbff;}
.case-infrastructure .insight b{font-size:12px;}
.case-infrastructure .insight p{font-size:12px;line-height:1.55;}
.case-infrastructure .insight .meta{font-size:9px;}
.case-infrastructure .kb{padding:15px 17px;border-radius:10px;background:#e3f7ec;}
.case-infrastructure .kb b{font-size:11px;}
.case-infrastructure .sim-resolved{
  margin:3px 16px 15px;
  padding:12px 15px;
  border-radius:10px;
  font-size:11.5px;
}
.case-infrastructure .sim-foot{min-height:72px;padding:12px 18px;background:#fff;}
.case-infrastructure .sim-foot .note{margin-left:auto;font-size:10.5px;}

/* Editorial sections */
.case-infrastructure .blk{
  margin:0;
  padding:34px 42px;
  border-radius:0;
  background:transparent;
  box-shadow:inset 0 1px 0 var(--case-line);
}
.case-infrastructure .sim + .blk{margin-top:26px;box-shadow:none;}
.case-infrastructure .blk-split{gap:50px;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);}
.case-infrastructure .blk h2{
  font-size:22px;
  line-height:1.16;
  letter-spacing:-.032em;
  color:var(--case-ink);
}
.case-infrastructure .blk p{font-size:13px;line-height:1.58;color:#33436a;}
.case-infrastructure .blk-lead{gap:12px;}
.case-infrastructure .blk-ico{
  width:76px;
  height:76px;
  border-radius:18px;
  background:linear-gradient(145deg,#f9fbff,#f0f4fc);
  box-shadow:0 10px 24px rgba(36,77,169,.08),inset 0 0 0 1px rgba(63,100,186,.06);
}
.case-infrastructure .blk-ico svg{width:36px;height:36px;stroke:var(--case-blue);stroke-width:1.7;}
.case-infrastructure .blk-note{
  margin-top:15px;
  padding:13px 16px;
  border-radius:8px;
  background:#eef3ff;
  box-shadow:inset 0 0 0 1px #9cb5eb;
}
.case-infrastructure .blk-note p{font-size:11.5px;}

.case-infrastructure .blk--why{padding-top:52px;padding-bottom:52px;}
.case-infrastructure .blk--why .blk-split{grid-template-columns:110px minmax(0,820px);gap:34px;align-items:start;}
.case-infrastructure .blk--why .blk-ico{grid-column:1;grid-row:1;}
.case-infrastructure .why-copy{grid-column:2;grid-row:1;}
.case-infrastructure .why-copy h2{margin-bottom:13px;}
.case-infrastructure .why-copy p{display:block;}
.case-infrastructure .why-copy p + p{margin:9px 0 0!important;}

.case-infrastructure .blk--challenge{padding-top:28px;padding-bottom:30px;}
.case-infrastructure .blk--challenge .blk-split{grid-template-columns:250px 1fr;gap:38px;}
.case-infrastructure .blk--challenge .blk-lead{padding-right:22px;border-right:1px solid #e4e9f4;}
.case-infrastructure .blk--challenge .blk-lead p{font-size:11.5px;}
.case-infrastructure .fam{gap:9px 12px;grid-template-columns:1fr 1fr;}
.case-infrastructure .fam button{
  min-height:43px;
  padding:9px 12px;
  border-radius:8px;
  font-size:11.5px;
  line-height:1.35;
  box-shadow:inset 0 0 0 1px #dae2f1,0 4px 10px rgba(32,63,132,.04);
}
.case-infrastructure .fam button .bx{width:15px;height:15px;border-radius:4px;}
.case-infrastructure .fam-verdict{font-size:11.5px;min-height:0;margin-top:7px;}

.case-infrastructure .blk--approach,
.case-infrastructure .blk--knowledge{padding-top:28px;padding-bottom:30px;}
.case-infrastructure .blk--approach{padding-top:59px;padding-bottom:59px;}
.case-infrastructure .blk--approach .blk-lead,
.case-infrastructure .blk--knowledge .blk-lead{position:relative;padding-left:140px;}
.case-infrastructure .blk--approach .blk-ico,
.case-infrastructure .blk--knowledge .blk-ico{position:absolute;left:0;top:0;}
.case-infrastructure .nlist{gap:12px;position:relative;padding-left:7px;}
.case-infrastructure .nlist::before{
  content:"";position:absolute;left:18px;top:15px;bottom:15px;width:1px;background:#8aa8eb;
}
.case-infrastructure .nlist li{grid-template-columns:24px 1fr;gap:14px;font-size:11.5px;}
.case-infrastructure .nlist .n{position:relative;width:24px;height:24px;font-size:10px;background:var(--case-blue);}

.case-infrastructure .knowledge-side{display:grid;grid-template-columns:minmax(210px,.86fr) minmax(210px,1.14fr);align-items:center;gap:12px;}
.case-infrastructure .clist{gap:11px;}
.case-infrastructure .clist li{grid-template-columns:16px 1fr;gap:9px;font-size:11.5px;}
.case-infrastructure .clist .c{width:16px;height:16px;background:var(--case-blue);}
.case-infrastructure .clist .c svg{width:9px;height:9px;stroke:#fff;}
.case-infrastructure .knowledge-art{width:100%;max-height:230px;object-fit:contain;}

.case-infrastructure .blk--dial{padding-top:68px;padding-bottom:72px;}
.case-infrastructure .blk--dial .blk-split{grid-template-columns:390px 1fr;align-items:start;}
.case-infrastructure .blk--dial .blk-lead{position:relative;min-height:178px;padding-right:126px;}
.case-infrastructure .dial-art{
  position:absolute;
  right:-14px;
  bottom:-22px;
  width:205px;
  height:154px;
  object-fit:contain;
  filter:saturate(.68) contrast(.95);
}
.case-infrastructure #dial{
  padding:14px 16px 16px;
  border-radius:13px;
  background:#fff;
  box-shadow:0 11px 30px rgba(26,55,124,.12),inset 0 0 0 1px #e3e8f3;
}
.case-infrastructure .dial-tabs{gap:0;margin:-14px -16px 15px;}
.case-infrastructure .dial-tabs button{padding:13px 4px 12px;border-radius:0;background:#fff;font-size:10px;box-shadow:inset -1px 0 0 #e7ebf4;}
.case-infrastructure .dial-tabs button:first-child{border-radius:13px 0 0 0;}
.case-infrastructure .dial-tabs button:last-child{border-radius:0 13px 0 0;box-shadow:none;}
.case-infrastructure .dial-tabs button svg{width:18px;height:18px;}
.case-infrastructure .dial-tabs button[aria-pressed="true"]{background:var(--case-blue);box-shadow:0 8px 18px rgba(44,74,148,.22);}
.case-infrastructure .dial-desc{min-height:0;margin-bottom:12px;font-size:11px;}
.case-infrastructure .dial-bar{margin-bottom:8px;grid-template-columns:112px 1fr;align-items:center;}
.case-infrastructure .dial-bar span.l{font-size:9px;}
.case-infrastructure .dial-bar .track{height:7px;}
.case-infrastructure .dial-note{font-size:9.5px;}

.case-infrastructure .blk--vendor{padding-top:74px;padding-bottom:78px;}
.case-infrastructure .blk--vendor .blk-split{gap:68px;}
.case-infrastructure .blk--vendor .blk-split > div{position:relative;padding-left:214px;}
.case-infrastructure .blk--vendor .blk-ico{position:absolute;left:0;top:0;width:62px;height:62px;}
.case-infrastructure .blk--vendor .blk-ico svg{width:28px;height:28px;}
.case-infrastructure .blk--vendor .blk-ico{display:none;}
.case-infrastructure .vendor-art,
.case-infrastructure .business-art{
  position:absolute;
  left:-16px;
  top:4px;
  width:205px;
  height:176px;
  object-fit:contain;
  filter:saturate(.68) contrast(.95);
}
.case-infrastructure .blk--vendor h2{font-size:20px;}
.case-infrastructure .blk--vendor .clist{gap:7px;}
.case-infrastructure .blk--vendor .clist li{align-items:start;}
.case-infrastructure .blk--vendor .clist--green .c{background:var(--case-blue);}
.case-infrastructure .blk--vendor .clist--green .c svg{stroke:#fff;}

.case-infrastructure .blk--measure{padding-top:30px;padding-bottom:32px;}
.case-infrastructure .blk--measure > p{font-size:11.5px;}
.case-infrastructure .mtiles{grid-template-columns:repeat(5,1fr);gap:10px;margin-top:17px;}
.case-infrastructure .mtile{min-height:112px;padding:13px 14px 10px;border-radius:9px;box-shadow:inset 0 0 0 1px #dbe3f1,0 5px 13px rgba(30,64,139,.035);}
.case-infrastructure .mtile .top svg{width:17px;height:17px;}
.case-infrastructure .mtile b{font-size:10.5px;line-height:1.35;}
.case-infrastructure .mtile .spark{height:25px;align-self:end;}

.case-infrastructure .blk--outcome{padding-top:58px;padding-bottom:64px;}
.case-infrastructure .blk--outcome > p{max-width:820px;font-size:11.5px;}
.case-infrastructure .oc{grid-template-columns:.92fr 1.08fr;gap:16px;margin-top:18px;}
.case-infrastructure .oc > div{min-height:100px;padding:18px 20px;border-radius:10px;align-items:center;}
.case-infrastructure .oc .from{background:#f5f6fa;}
.case-infrastructure .oc .to{background:linear-gradient(100deg,var(--case-blue-deep),var(--case-blue));}
.case-infrastructure .blk .oc .to p{color:rgba(255,255,255,.94);}
.case-infrastructure .oc .ico{width:42px;height:42px;border-radius:10px;}
.case-infrastructure .oc b{font-size:9px;}
.case-infrastructure .oc p{font-size:10.5px;}

/* Closing banner + minimal footer */
.case-infrastructure .cs-cta{
  min-height:154px;
  margin:0 0 27px;
  padding:32px 58px;
  border-radius:20px;
  background:linear-gradient(105deg,#edf4ff 0%,#f8fbff 48%,#e5efff 100%);
  box-shadow:inset 0 0 0 1px rgba(65,103,191,.08);
}
.case-infrastructure .cs-cta::before{
  content:"";position:absolute;left:42%;right:22%;bottom:-16px;height:110px;opacity:.28;
  background-image:radial-gradient(var(--case-blue) 1.5px,transparent 1.7px);background-size:12px 12px;
  transform:skewX(-24deg) rotate(-5deg);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000,transparent);
          mask-image:linear-gradient(90deg,transparent,#000,transparent);
}
.case-infrastructure .cs-cta div,.case-infrastructure .cs-cta .btn{position:relative;}
.case-infrastructure .cs-cta b{font-size:20px;}
.case-infrastructure .cs-cta span{font-size:11.5px;}
.case-infrastructure .cs-cta .btn{padding:16px 31px;border-radius:10px;font-size:12px;}

@media (max-width:939px){
  .case-infrastructure .cs-wrap{width:min(100% - 36px,720px);}
  .case-infrastructure .cs-hero{min-height:0;padding:28px 0;grid-template-columns:1fr;}
  .case-infrastructure .cs-hero > div:first-child{transform:none;}
  .case-infrastructure .cs-hero h1{font-size:clamp(38px,8vw,50px);}
  .case-infrastructure .cs-hero-art{height:260px;max-width:none;}
  .case-infrastructure .sim-body{grid-template-columns:1fr;}
  .case-infrastructure .sim-side{box-shadow:inset 0 1px 0 #dce4f2;}
  .case-infrastructure .blk{padding-inline:10px;}
  .case-infrastructure .blk-split,
  .case-infrastructure .blk--challenge .blk-split,
  .case-infrastructure .blk--dial .blk-split{grid-template-columns:1fr;gap:24px;}
  .case-infrastructure .blk--dial .blk-lead{padding-right:190px;}
  .case-infrastructure .blk--why .blk-split{grid-template-columns:76px 1fr;gap:24px;}
  .case-infrastructure .blk--approach .blk-lead,
  .case-infrastructure .blk--knowledge .blk-lead{padding-left:100px;}
  .case-infrastructure .knowledge-side{grid-template-columns:1fr 1fr;}
  .case-infrastructure .mtiles{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:560px){
  .case-infrastructure .cs-hero-art{height:210px;}
  .case-infrastructure .cs-hero-art img{width:430px;}
  .case-infrastructure .sim-log{min-height:420px;max-height:420px;}
  .case-infrastructure .sim-line{grid-template-columns:48px 68px 1fr;padding-left:10px;}
  .case-infrastructure .sim-line .tag::before{left:-71px;}
  .case-infrastructure .blk--approach .blk-lead,
  .case-infrastructure .blk--knowledge .blk-lead{padding-left:0;padding-top:90px;}
  .case-infrastructure .knowledge-side{grid-template-columns:1fr;}
  .case-infrastructure .blk--vendor .blk-split > div{padding-left:0;padding-top:185px;}
  .case-infrastructure .vendor-art,
  .case-infrastructure .business-art{left:0;top:0;width:210px;height:170px;}
  .case-infrastructure .mtiles{grid-template-columns:1fr 1fr;}
  .case-infrastructure .oc{grid-template-columns:1fr;}
  .case-infrastructure .cs-cta{padding:28px 24px;}
}

/* ==========================================================
   ENHANCEMENT PASS
   1 · readable type scale (nothing below 12px)
   2 · entry reveals, matched to the home page
   3 · hover states on every interactive surface
   4 · a challenge checklist that answers back
   ========================================================== */

/* ---------- 1 · type ---------- */
.case-infrastructure .cs-back{font-size:14px}
.case-infrastructure .kick{font-size:13px;letter-spacing:.15em}
.case-infrastructure .cs-hero .lead{font-size:clamp(16px,.9rem + .4vw,18px);line-height:1.62}
.case-infrastructure .sim-bar .id{font-size:13px}
.case-infrastructure .sim-bar .state{font-size:12px}
.case-infrastructure .sim-line{font-size:14px}
.case-infrastructure .sim-line .t{font-size:12px}
.case-infrastructure .sim-line .tag{font-size:11px;letter-spacing:.06em;padding:3px 8px}
.case-infrastructure .sim-side h4,
.case-infrastructure .sim-side-h{font-size:12px}
.case-infrastructure .ebadge{font-size:12.5px}
.case-infrastructure .insight b{font-size:13.5px}
.case-infrastructure .insight p{font-size:13.5px;line-height:1.6}
.case-infrastructure .insight .meta{font-size:11.5px;letter-spacing:.05em}
.case-infrastructure .kb b{font-size:13px}
.case-infrastructure .sim-resolved{font-size:14px}
.case-infrastructure .sim-foot .note{font-size:12.5px}
.case-infrastructure .blk h2{font-size:clamp(20px,1rem + .9vw,26px);line-height:1.22}
.case-infrastructure .blk p,
.case-infrastructure .blk-lead p{font-size:15px;line-height:1.68}
.case-infrastructure .blk-note p{font-size:14px;line-height:1.6}
.case-infrastructure .blk--challenge .blk-lead p{font-size:14.5px}
.case-infrastructure .fam-verdict{font-size:15px}
.case-infrastructure .nlist li{font-size:14.5px}
.case-infrastructure .nlist .n{font-size:12px}
.case-infrastructure .clist li{font-size:14.5px;line-height:1.55}
.case-infrastructure .dial-tabs button{font-size:12.5px}
.case-infrastructure .dial-desc{font-size:15px;line-height:1.6}
.case-infrastructure .dial-bar span.l{font-size:11.5px;letter-spacing:.09em}
.case-infrastructure .dial-note{font-size:13px;line-height:1.55}
.case-infrastructure .blk--measure > p,
.case-infrastructure .blk--outcome > p{font-size:15px;line-height:1.68}
.case-infrastructure .mtile b{font-size:13px;line-height:1.4}
.case-infrastructure .oc b{font-size:11.5px;letter-spacing:.11em}
.case-infrastructure .oc p{font-size:14px;line-height:1.6}
.case-infrastructure .cs-cta span{font-size:14.5px}
.case-infrastructure .cs-cta .btn{font-size:14.5px}

/* ---------- 2 · entry reveals ---------- */
.js .case-infrastructure .reveal{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .js .case-infrastructure .reveal.in{opacity:1;animation:cs-rise .72s cubic-bezier(.16,1,.3,1) backwards;
    animation-delay:calc(var(--i,0) * 85ms)}
  .js .case-infrastructure .cs-hero-art.reveal.in{animation-name:cs-float-in;animation-duration:.9s}
  .js .case-infrastructure .sim.reveal.in{animation-name:cs-scale-in;animation-duration:.8s}
  .js .case-infrastructure .reveal.in .blk-ico{animation:cs-pop .6s cubic-bezier(.16,1,.3,1) .18s backwards}
  .js .case-infrastructure .reveal.in .mtile{animation:cs-rise-sm .55s cubic-bezier(.16,1,.3,1) backwards;
    animation-delay:calc(var(--j,0) * 55ms + .15s)}
  .js .case-infrastructure .reveal.in .nlist li,
  .js .case-infrastructure .reveal.in .clist li{animation:cs-slide .5s cubic-bezier(.16,1,.3,1) backwards;
    animation-delay:calc(var(--j,0) * 70ms + .12s)}
}
.js .case-infrastructure .reveal.in{opacity:1}
@keyframes cs-rise{from{opacity:0;transform:translateY(26px)}}
@keyframes cs-rise-sm{from{opacity:0;transform:translateY(14px)}}
@keyframes cs-slide{from{opacity:0;transform:translateX(-14px)}}
@keyframes cs-scale-in{from{opacity:0;transform:scale(.975) translateY(18px)}}
@keyframes cs-float-in{from{opacity:0;transform:translateY(28px) scale(.97)}}
@keyframes cs-pop{from{opacity:0;transform:scale(.7)}60%{transform:scale(1.06)}to{transform:scale(1)}}

/* ---------- 3 · hover states ---------- */
.case-infrastructure .blk{transition:box-shadow .38s cubic-bezier(.16,1,.3,1),transform .38s cubic-bezier(.16,1,.3,1)}
.case-infrastructure .blk:hover{transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(24,56,132,.1),inset 0 0 0 1px rgba(60,94,180,.16)}
.case-infrastructure .blk-ico{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1)}
.case-infrastructure .blk:hover .blk-ico{transform:scale(1.07) rotate(-3deg);
  box-shadow:0 10px 22px rgba(60,94,180,.22),inset 0 0 0 1px rgba(60,94,180,.2)}
.case-infrastructure .ebadge{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.case-infrastructure .ebadge:hover{transform:translateY(-2px)}
.case-infrastructure .nlist li,.case-infrastructure .clist li{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.case-infrastructure .nlist li:hover,.case-infrastructure .clist li:hover{transform:translateX(4px)}
.case-infrastructure .nlist li:hover .n{box-shadow:0 6px 14px rgba(60,94,180,.32)}
.case-infrastructure .dial-tabs button{transition:background .28s ease,color .28s ease,transform .28s ease,box-shadow .28s ease}
.case-infrastructure .dial-tabs button:hover:not([aria-pressed="true"]){transform:translateY(-2px);
  box-shadow:0 8px 16px rgba(24,56,132,.09)}
.case-infrastructure .oc > div{transition:transform .38s cubic-bezier(.16,1,.3,1),box-shadow .38s cubic-bezier(.16,1,.3,1)}
.case-infrastructure .oc > div:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(24,56,132,.14)}
.case-infrastructure .cs-cta .btn{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1)}
.case-infrastructure .cs-cta .btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(60,94,180,.32)}
.case-infrastructure .cs-back{transition:color .25s ease,transform .25s ease}
.case-infrastructure .cs-back:hover{transform:translateX(-3px)}

/* ---------- 4 · challenge checklist ---------- */
.case-infrastructure .fam{gap:11px}
.case-infrastructure .fam button{
  display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  font-size:14.5px;line-height:1.45;padding:14px 16px;border-radius:12px;text-align:left;
  transition:box-shadow .28s ease,background .28s ease,transform .28s ease}
.case-infrastructure .fam button:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px #9db2d8,0 8px 18px rgba(24,56,132,.08)}
.case-infrastructure .fam button .bx{
  width:22px;height:22px;border-radius:7px;display:grid;place-items:center;margin-top:0;
  font-size:12px;font-weight:800;color:transparent;
  box-shadow:inset 0 0 0 1.5px #b3c2dc;transition:all .28s cubic-bezier(.16,1,.3,1)}
.case-infrastructure .fam button[aria-pressed="true"]{
  background:linear-gradient(150deg,#f4f8ff,#e9f0fd);
  box-shadow:inset 0 0 0 1.6px #3c5eb4,0 8px 20px rgba(60,94,180,.16)}
.case-infrastructure .fam button[aria-pressed="true"] .bx{
  background:#3c5eb4;color:#fff;box-shadow:0 4px 10px rgba(60,94,180,.4);transform:scale(1.06)}
.case-infrastructure .fam button b{display:block;font-weight:700;color:#0f1d40}
.case-infrastructure .fam button .why{
  display:grid;grid-template-rows:0fr;opacity:0;
  font-size:13px;line-height:1.5;color:#4a6cc2;font-weight:600;
  transition:grid-template-rows .38s cubic-bezier(.16,1,.3,1),opacity .3s ease}
.case-infrastructure .fam button .why > span{overflow:hidden;min-height:0}
.case-infrastructure .fam button[aria-pressed="true"] .why{grid-template-rows:1fr;opacity:1;padding-top:7px}
.case-infrastructure .fam-verdict{
  display:flex;align-items:center;gap:10px;margin-top:14px;padding:0;min-height:0;
  font-weight:700;color:#0f1d40;transition:opacity .3s ease}
.case-infrastructure .fam-verdict:empty{opacity:0}
.case-infrastructure .fam-count{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:#3c5eb4;color:#fff;font-size:14px;font-weight:800}

@media (prefers-reduced-motion:reduce){
  .js .case-infrastructure .reveal{opacity:1}
  .case-infrastructure .blk:hover,.case-infrastructure .oc > div:hover,
  .case-infrastructure .fam button:hover,.case-infrastructure .cs-cta .btn:hover,
  .case-infrastructure .nlist li:hover,.case-infrastructure .clist li:hover{transform:none}
}

/* blue emphasis inside headings — same treatment as the home page */
.case-infrastructure .blk h2 .hl{color:#4a6cc2}
.case-infrastructure .cs-hero h1{position:relative}

/* ---------- approach block: stepped timeline + bottom-anchored note ---------- */
.case-infrastructure .blk--approach .blk-split > div:last-child{
  display:flex;flex-direction:column;height:100%}
.case-infrastructure .blk--approach .nlist{gap:0;position:relative}
.case-infrastructure .blk--approach .nlist li{
  position:relative;display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:center;
  padding:12px 16px 12px 0;border-radius:12px;font-size:15px;font-weight:600;color:#1f2f52;
  transition:background .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}
.case-infrastructure .blk--approach .nlist li::before{
  content:"";position:absolute;left:17.5px;top:50%;height:100%;width:2px;z-index:0;
  background:linear-gradient(180deg,rgba(60,94,180,.28),rgba(60,94,180,.12))}
.case-infrastructure .blk--approach .nlist li:last-child::before{display:none}
.case-infrastructure .blk--approach .nlist li:hover{background:#f4f8ff;transform:translateX(4px)}
.case-infrastructure .blk--approach .nlist .n{
  position:relative;z-index:1;width:36px;height:36px;border-radius:50%;font-size:13px;font-weight:800;
  background:linear-gradient(150deg,#5b82d8,#2c4a94);color:#fff;
  box-shadow:0 6px 14px rgba(44,74,148,.28),0 0 0 4px #fff;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1)}
.case-infrastructure .blk--approach .nlist li:hover .n{
  transform:scale(1.08);box-shadow:0 8px 18px rgba(44,74,148,.4),0 0 0 4px #fff,0 0 0 9px rgba(60,94,180,.1)}
.case-infrastructure .blk--approach > .blk-note{margin-top:20px}
/* checked lists sit level with the prose on the left */
.case-infrastructure .clist{gap:13px}
.case-infrastructure .clist li{font-size:15.5px;line-height:1.55;font-weight:600;color:#1f2f52;
  grid-template-columns:24px 1fr;gap:13px}
.case-infrastructure .clist .c{width:24px;height:24px}
.case-infrastructure .clist .c svg{width:13px;height:13px;stroke-width:2.8}

/* ---------- mobile: hero art centred on tablet, dropped on phones ----------
   On a phone the illustration only pushes the simulation below the fold,
   so it goes; the tablet keeps it, centred. */
@media (max-width:939px) and (min-width:641px){
  .case-infrastructure .cs-hero-art{
    order:2;width:min(340px,60vw);margin:6px auto 0;display:block}
  .case-infrastructure .cs-hero-art img{width:100%;height:auto;margin:0 auto}
}
@media (max-width:640px){
  .case-infrastructure .cs-hero-art{display:none}
  .case-infrastructure .cs-hero{gap:0}
}