/* About-section portrait slide box – navy #002b49 / orange #ff5000, Inter (matches home-redesign.css) */
.ps { position: relative; isolation: isolate; outline: none; --ps-dur: 900ms; --ps-ease: cubic-bezier(.77,0,.18,1); }
.ps:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--orange, #ff5000); }
.ps__viewport { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; perspective: 1400px; touch-action: pan-y; background: var(--navy-deep, #001e33); }
.ps__slide { position: absolute; inset: 0; margin: 0; visibility: hidden; backface-visibility: hidden; will-change: transform, opacity; }
.ps__slide.is-active, .ps__slide.is-entering, .ps__slide.is-leaving { visibility: visible; }
.ps__slide.is-active { z-index: 2; }
.ps__slide > img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
/* subtle bottom shade so dots/caption stay readable */
.ps__slide::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(to top, rgba(0,30,51,.72), rgba(0,30,51,0)); pointer-events: none; }
.ps__cap { position: absolute; left: 20px; right: 120px; bottom: 18px; z-index: 2; color: #fff; font-size: 13px; line-height: 1.35; opacity: 0; transform: translateY(8px); transition: opacity .5s ease .35s, transform .5s ease .35s; }
.ps__cap strong { display: block; font-size: 15px; font-weight: 700; letter-spacing: .1px; }
.ps__cap span { display: block; color: rgba(255,255,255,.8); }
.ps__slide.is-active .ps__cap { opacity: 1; transform: none; }

/* arrows */
.ps__nav { position: absolute; top: 50%; z-index: 5; width: 42px; height: 42px; margin-top: -21px; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--navy, #002b49);
  background: rgba(255,255,255,.92); box-shadow: 0 6px 18px rgba(0,30,51,.25); opacity: 0; transition: opacity .25s, transform .25s, background .2s, color .2s; }
.ps__nav--prev { left: 14px; transform: translateX(-6px); }
.ps__nav--next { right: 14px; transform: translateX(6px); }
.ps:hover .ps__nav, .ps:focus-within .ps__nav { opacity: 1; transform: none; }
.ps__nav:hover { background: var(--orange, #ff5000); color: #fff; }
.ps__nav:focus-visible, .ps__dot:focus-visible, .ps__play:focus-visible { outline: 3px solid var(--orange, #ff5000); outline-offset: 2px; }
@media (hover: none) { .ps__nav { opacity: .9; transform: none; width: 38px; height: 38px; margin-top: -19px; } }

/* dots + play/pause */
.ps__bar { position: absolute; right: 16px; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 10px; }
.ps__dots { display: flex; gap: 6px; padding: 6px 8px; border-radius: 999px; background: rgba(0,30,51,.45); backdrop-filter: blur(4px); }
.ps__dot { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; overflow: hidden;
  background: rgba(255,255,255,.55); transition: width .35s var(--ps-ease), background .2s; }
.ps__dot::before { content: ""; position: absolute; inset: -8px; } /* bigger touch target */
.ps__dot.is-active { width: 26px; background: rgba(255,255,255,.35); }
.ps__dot i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--orange, #ff5000); border-radius: inherit; }
.ps__dot.is-active i { width: 100%; }
.ps.is-playing .ps__dot.is-active i { width: 0; animation: ps-progress var(--ps-interval, 4500ms) linear forwards; }
.ps.is-paused .ps__dot.is-active i, .ps.is-hover .ps__dot.is-active i { animation-play-state: paused; }
@keyframes ps-progress { to { width: 100%; } }
.ps__play { width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(0,30,51,.45); backdrop-filter: blur(4px); transition: background .2s; }
.ps__play:hover { background: var(--orange, #ff5000); }
.ps__ico-play { display: none; }
.ps.is-paused .ps__ico-play { display: block; }
.ps.is-paused .ps__ico-pause { display: none; }
.ps__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }

/* ---------- transitions (JS adds .fx-<name>, .dir-next|.dir-prev; prev = reversed "next" keyframes) ---------- */
.ps__slide.is-entering, .ps__slide.is-leaving { animation-duration: var(--ps-dur); animation-timing-function: var(--ps-ease); animation-fill-mode: both; }
.ps.dir-next .ps__slide.is-entering { z-index: 3; }
.ps.dir-prev .ps__slide.is-leaving  { z-index: 3; }
.ps.dir-prev .ps__slide.is-entering, .ps.dir-prev .ps__slide.is-leaving { animation-direction: reverse; }

/* 1. slide */
.ps.fx-slide.dir-next .is-entering, .ps.fx-slide.dir-prev .is-leaving  { animation-name: ps-slide-in; }
.ps.fx-slide.dir-next .is-leaving,  .ps.fx-slide.dir-prev .is-entering { animation-name: ps-slide-out; }
@keyframes ps-slide-in  { from { transform: translateX(100%); } to { transform: none; } }
@keyframes ps-slide-out { from { transform: none; } to { transform: translateX(-30%); filter: brightness(.6); } }

/* 2. fade (cross-dissolve with a soft blur) */
.ps.fx-fade .is-entering { animation-name: ps-fade-in !important; animation-direction: normal !important; z-index: 3; }
.ps.fx-fade .is-leaving  { animation-name: ps-fade-out !important; animation-direction: normal !important; z-index: 2; }
@keyframes ps-fade-in  { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
@keyframes ps-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* 3. zoom (Ken Burns: zoom-in reveal, then slow drift while shown) */
.ps.fx-zoom .is-entering { animation-name: ps-zoom-in !important; animation-direction: normal !important; z-index: 3; }
.ps.fx-zoom .is-leaving  { animation-name: ps-fade-out !important; animation-direction: normal !important; z-index: 2; }
@keyframes ps-zoom-in { from { opacity: 0; transform: scale(1.18); } to { opacity: 1; transform: none; } }
.ps__slide.kb > img { animation: ps-kb 7s ease-out forwards; transform-origin: 60% 35%; }
@keyframes ps-kb { from { transform: scale(1); } to { transform: scale(1.08); } }

/* 4. cube (3D rotate) */
.ps.fx-cube.dir-next .is-entering, .ps.fx-cube.dir-prev .is-leaving  { animation-name: ps-cube-in; transform-origin: 0% 50%; }
.ps.fx-cube.dir-next .is-leaving,  .ps.fx-cube.dir-prev .is-entering { animation-name: ps-cube-out; transform-origin: 100% 50%; }
@keyframes ps-cube-in  { from { transform: translateX(100%) rotateY(90deg); filter: brightness(.55); } to { transform: none; filter: none; } }
@keyframes ps-cube-out { from { transform: none; filter: none; } to { transform: translateX(-100%) rotateY(-90deg); filter: brightness(.55); } }

/* 5. stack (stacked cards: new card rises over the old one, old one recedes) */
.ps.fx-stack.dir-next .is-entering, .ps.fx-stack.dir-prev .is-leaving  { animation-name: ps-stack-in; }
.ps.fx-stack.dir-next .is-leaving,  .ps.fx-stack.dir-prev .is-entering { animation-name: ps-stack-out; }
@keyframes ps-stack-in  { from { transform: translateY(104%) rotate(4deg); box-shadow: 0 -20px 40px rgba(0,0,0,.35); } to { transform: none; box-shadow: 0 -20px 40px rgba(0,0,0,0); } }
@keyframes ps-stack-out { from { transform: none; filter: none; } to { transform: scale(.88); filter: brightness(.55); border-radius: 24px; } }

/* reduced motion: quick fade only, no Ken Burns, no autoplay progress */
@media (prefers-reduced-motion: reduce) {
  .ps { --ps-dur: 1ms; }
  .ps__slide.kb > img { animation: none; }
  .ps__dot.is-active i { animation: none !important; width: 100%; }
  .ps__nav, .ps__cap { transition: none; }
}