.c4j { --c4j-accent:var(--kf-primary,#15558c); display:flex; flex-direction:column; position:relative; width:100%; max-width:100%; min-width:0; color:#14283d; font:inherit; }
.c4j, .c4j * { box-sizing:border-box; }
.c4j .c4j-stage { min-width:0; touch-action:pan-y pinch-zoom; }
.c4j .c4j-frame { display:grid; position:relative; isolation:isolate; grid-template-columns:minmax(0,1fr); overflow:hidden; border-radius:1rem; background:#142437; margin:0 0 1rem; min-width:0; }
.c4j .c4j-visual { grid-area:1/1; aspect-ratio:var(--c4j-aspect,16/9); min-width:0; }
.c4j .c4j-visual img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; margin:0; border:0; }
.c4j .c4j-caption { grid-area:1/1; align-self:end; z-index:1; min-width:0; padding:clamp(1rem,4vw,3rem); padding-top:clamp(2rem,6vw,5rem); color:#fff; background:linear-gradient(transparent,rgba(0,0,0,var(--c4j-backdrop,.75)) 35%); overflow-wrap:anywhere; }
.c4j .c4j-caption h2 { color:inherit; font:inherit; font-size:clamp(1.3rem,3.5vw,3rem); font-weight:750; line-height:1.18; margin:0; text-wrap:balance; }
.c4j .c4j-caption p { color:inherit; font:inherit; line-height:1.55; margin:.8rem 0 0; max-width:65ch; }
.c4j .c4j-caption a { display:inline-flex; align-items:center; min-height:44px; max-width:100%; padding:.65rem 1rem; margin-top:1rem; border:1px solid #fff; border-radius:.5rem; font:inherit; font-weight:700; line-height:1.4; background:#fff; color:#14283d; text-decoration:none; overflow-wrap:anywhere; }
.c4j.is-ready .c4j-stage { display:grid; grid-template-columns:minmax(0,1fr); overflow:hidden; border-radius:1rem; }
.c4j.is-ready .c4j-frame { grid-area:1/1; visibility:hidden; pointer-events:none; margin:0; }
.c4j.is-ready .c4j-frame.is-active { visibility:visible; pointer-events:auto; z-index:1; }
.c4j.is-ready .c4j-frame.is-leaving { visibility:visible; pointer-events:none; }
.c4j .c4j-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem 1rem; padding:.75rem .25rem; }
.c4j .c4j-controls[hidden] { display:none; }
.c4j .c4j-arrows, .c4j .c4j-dots { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.25rem; }
.c4j .c4j-arrows span { min-width:3.5rem; text-align:center; font-variant-numeric:tabular-nums; }
.c4j .c4j-dots { flex:1; }
.c4j .c4j-controls button { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; margin:0; padding:.5rem .75rem; border:1px solid #bdcbd9; border-radius:.5rem; background:#fff; color:#14283d; font:inherit; line-height:1.25; font-weight:650; text-transform:none; cursor:pointer; box-shadow:none; }
.c4j .c4j-dots button { padding:0; border-color:transparent; background:transparent; }
.c4j .c4j-dots button span { width:9px; height:9px; border:1px solid #667b90; border-radius:50%; }
.c4j .c4j-dots [aria-current="true"] span { width:20px; border-radius:8px; background:var(--c4j-accent); border-color:var(--c4j-accent); }
.c4j .c4j-controls button:hover, .c4j .c4j-caption a:hover { background:#edf3f8; color:#14283d; }
.c4j :is(button,a):focus-visible { outline:3px solid #e7a817; outline-offset:3px; }
.c4j[data-navigation="above"] .c4j-controls { order:-1; }
.c4j[data-navigation="overlay"].is-ready .c4j-controls { position:absolute; z-index:3; bottom:0; left:0; right:0; padding:.75rem; border-radius:0 0 1rem 1rem; background:rgba(20,36,55,.94); color:#fff; }
.c4j[data-navigation="overlay"].is-ready:has(.c4j-controls) .c4j-caption { padding-bottom:calc(var(--c4j-controls-height,100px) + 1.25rem); }
.c4j[data-navigation="overlay"].is-ready:has(.c4j-controls) .c4j-visual { min-height:calc(var(--c4j-controls-height,100px) + 80px); }
.c4j[data-navigation="overlay"] .c4j-dots button span { border-color:#fff; }
.c4j[data-navigation="overlay"] .c4j-dots [aria-current="true"] span { background:#fff; }
.c4j .c4j-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(max-width:640px) {
  .c4j .c4j-controls { justify-content:center; }
  .c4j .c4j-dots { flex-basis:100%; order:3; }
  .c4j .c4j-caption h2 { font-size:clamp(1.3rem,6vw,1.8rem); }
}

/* Side arrows and bottom stop/start are one selectable navigation layout. */
.c4j[data-navigation="sides"].is-ready .c4j-controls { position:absolute; inset:0; z-index:3; display:block; padding:0; pointer-events:none; }
.c4j[data-navigation="sides"] .c4j-arrows { display:contents; }
.c4j[data-navigation="sides"] .c4j-controls button { position:absolute; pointer-events:auto; width:48px; height:56px; padding:0; border:1px solid rgba(255,255,255,.55); background:rgba(20,36,55,.48); color:#fff; backdrop-filter:blur(3px); }
.c4j[data-navigation="sides"] [data-c4j-step] { top:50%; transform:translateY(-50%); font-size:1.65rem; }
.c4j[data-navigation="sides"] [data-c4j-step="-1"] { left:clamp(8px,1.5vw,20px); }
.c4j[data-navigation="sides"] [data-c4j-step="1"] { right:clamp(8px,1.5vw,20px); }
.c4j[data-navigation="sides"] .c4j-controls [data-c4j-playback] { bottom:12px; left:50%; transform:translateX(-50%); width:48px; height:44px; }
.c4j[data-navigation="sides"] .c4j-controls button:hover { background:rgba(20,36,55,.8); color:#fff; }
.c4j[data-navigation="sides"].is-ready .c4j-caption { padding-inline:clamp(68px,6vw,88px); }
.c4j[data-navigation="sides"].is-ready:has([data-c4j-playback]) .c4j-caption { padding-bottom:76px; }
.c4j[data-navigation="sides"].is-ready .c4j-visual { min-height:176px; }
.c4j .c4j-playback-icon { display:block; width:14px; height:14px; background:currentColor; }
.c4j [data-stopped="true"] .c4j-playback-icon { width:16px; height:18px; clip-path:polygon(12% 0,100% 50%,12% 100%); }