/* ===== expanding horizontal panels ("Core Security Solutions") =====
   Shared component — used on the home page and the services page.
   Mobile refinements live in redesign.css (section 9b). */
.xpanel { display: flex; gap: 14px; max-width: var(--maxw); margin: 0 auto; height: clamp(400px, 54vh, 540px); }
.xp-item { position: relative; flex: 1; min-width: 0; border-radius: 24px; overflow: hidden; cursor: pointer; isolation: isolate;
  box-shadow: 0 26px 56px -30px rgba(12,21,38,0.45); transition: flex .6s cubic-bezier(.7,0,.2,1); }
.xp-item.on { flex: 3; cursor: default; }
.xp-item > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .9s ease; }
.xp-item.on > img { transform: scale(1.05); }
.xp-item::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,12,26,0.12) 0%, rgba(6,12,26,0.5) 52%, rgba(4,9,20,0.92) 100%); }
.xp-tag { position: absolute; top: 22px; left: 26px; z-index: 3; font-family: 'Sora',sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 1px; color: rgba(255,255,255,0.72); }
.xp-arrow { position: absolute; top: 18px; right: 18px; z-index: 4; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #0046FF; background: #fff; text-decoration: none; opacity: 0; transform: scale(.7) rotate(-20deg); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); box-shadow: 0 12px 26px -8px rgba(0,0,0,0.4); }
.xp-item.on .xp-arrow { opacity: 1; transform: scale(1) rotate(0); }
.xp-arrow svg { width: 20px; height: 20px; }
.xp-body { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; color: #fff; }
.xp-title { font-family: 'Sora',sans-serif; font-size: clamp(18px,1.5vw,24px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.xp-desc { margin-top: 12px; max-width: 480px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.86); opacity: 0; transform: translateY(10px); transition: opacity .5s ease .12s, transform .5s ease .12s; }
.xp-mini { margin-top: 18px; display: flex; gap: 12px; opacity: 0; transform: translateY(14px); transition: opacity .55s ease .2s, transform .55s ease .2s; }
.xp-mini .m { flex: 1 1 0; max-width: 220px; background: rgba(255,255,255,0.94); border-radius: 15px; padding: 14px 16px; }
.xp-mini .m b { display: block; font-family: 'Sora',sans-serif; font-size: 13.5px; font-weight: 700; color: #0A1220; letter-spacing: -.01em; }
.xp-mini .m span { display: block; margin-top: 4px; font-size: 12.3px; line-height: 1.4; color: #4C566B; }
.xp-item.on .xp-desc, .xp-item.on .xp-mini { opacity: 1; transform: none; }
.xp-item:not(.on) .xp-title { position: absolute; left: 26px; bottom: 26px; right: 20px; }
@media (max-width: 820px) {
  .xpanel { flex-direction: column; height: auto; }
  .xp-item { height: 92px; }
  .xp-item.on { flex: none; height: 460px; }
  .xp-mini { flex-wrap: wrap; }
  .xp-item:not(.on) .xp-title { bottom: 50%; transform: translateY(50%); }
}