/* ==========================================================================
   Home: "Our Key Areas" — intro on the left, looping card slider on the right.
   Navy / sky / gold theme, animated colour outlines on every card.
   ========================================================================== */

.ka{position:relative;overflow:hidden;background:#fff;padding:56px 0 76px}
.ka-wrap{
  position:relative;display:grid;grid-template-columns:minmax(0,30%) minmax(0,1fr);column-gap:6%;align-items:start;
  max-width:1360px;
}

/* connecting line: heading underline -> diagonal -> line above the cards */
.ka-line{position:absolute;left:clamp(16px,3vw,28px);right:clamp(16px,3vw,28px);top:0;width:calc(100% - 2*clamp(16px,3vw,28px));height:230px;overflow:visible;pointer-events:none}
.ka-line path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.ka-line .ka-base{stroke:#C9D9EC;stroke-width:2;stroke-dasharray:2400;stroke-dashoffset:2400;transition:stroke-dashoffset 2.2s cubic-bezier(.22,1,.36,1) .2s}
.ka.is-in .ka-line .ka-base,.ka:not(.ka-js) .ka-line .ka-base{stroke-dashoffset:0}
/* long, thin golden light that keeps sweeping along the line */
.ka-line .ka-shine{stroke:url(#kaGrad);opacity:0;transition:opacity 1s ease 1.2s}
.ka-line .ka-shine--glow{stroke-width:6;filter:blur(3px)}
.ka-line .ka-shine--core{stroke-width:2.2}
.ka.is-in .ka-line .ka-shine,.ka:not(.ka-js) .ka-line .ka-shine{opacity:1}
.ka.is-in .ka-line .ka-shine--glow,.ka:not(.ka-js) .ka-line .ka-shine--glow{opacity:.6}
.ka-dot{position:absolute;width:10px;height:10px;background:var(--soft-gold,#F2C66D);transform:rotate(45deg);pointer-events:none}
.ka-dot--l{left:calc(clamp(16px,3vw,28px) - 5px);top:171px}
.ka-dot--r{left:calc(clamp(16px,3vw,28px) + (100% - 2*clamp(16px,3vw,28px)) * .907 - 5px);top:65px}

/* intro column */
.ka-intro{padding-top:30px}
.ka-kicker{display:flex;align-items:center;gap:10px;margin:0;font:700 .9rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--sky,#3988D4)}
.ka-kicker .ic{width:1.15em;height:1.15em}
.ka-intro h2{
  margin:12px 0 0;font-family:var(--fx-serif);font-optical-sizing:auto;font-weight:700;font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.08;
  letter-spacing:-.025em;color:var(--navy,#163B65);
}
.ka-text{max-width:30em;margin:80px 0 26px;font-size:1.02rem;line-height:1.65;color:#4B6180}
.ka-explore{
  position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:16px;padding:7px 7px 7px 28px;border-radius:999px;
  background:linear-gradient(100deg,#163B65 0%,#2A6FB8 62%,#3988D4 100%);background-size:160% 100%;color:#fff;
  box-shadow:0 12px 26px rgba(22,59,101,.28);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,background-position .5s ease;
}
.ka-explore::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-130%);
  animation:ka-btn-shine 4s ease-in-out 2.8s infinite;
}
@keyframes ka-btn-shine{0%{transform:translateX(-130%)}30%,100%{transform:translateX(130%)}}
.ka-ex-t{font:700 1rem/1 var(--display);letter-spacing:.02em}
.ka-ex-t em{font:italic 600 1.18rem/1 var(--fx-serif);letter-spacing:-.005em;color:#F2C66D;margin-left:2px}
.ka-ex-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#F2C66D;color:#163B65;flex:none;transition:transform .4s cubic-bezier(.22,1,.36,1),background-color .3s}
.ka-ex-ic .ic{width:20px;height:20px;stroke-width:2.2}
.ka-explore:hover{color:#fff;transform:translateY(-3px);background-position:100% 0;box-shadow:0 18px 34px rgba(22,59,101,.36)}
.ka-explore:hover .ka-ex-ic{transform:rotate(-45deg) scale(1.08);background:#fff}
.ka-explore:focus-visible{outline:3px solid #F2C66D;outline-offset:3px}

/* slider column */
.ka-slider{position:relative;min-width:0}
.ka-arrows{display:flex;justify-content:flex-end;gap:10px;height:112px;padding-top:46px}
.ka-arrow{
  width:48px;height:48px;border-radius:12px;border:1.5px solid #D5E2F1;background:#fff;color:var(--navy,#163B65);
  display:grid;place-items:center;cursor:pointer;transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.ka-arrow .ic{width:20px;height:20px;stroke-width:2}
.ka-prev .ic{transform:rotate(180deg)}
.ka-arrow:hover{background:var(--sky,#3988D4);border-color:var(--sky,#3988D4);color:#fff;transform:translateY(-2px)}
.ka-arrow:focus-visible{outline:3px solid var(--soft-gold,#F2C66D);outline-offset:2px}

.ka-view{overflow:hidden;padding:14px 10px 26px;margin:-14px -10px -26px}
.ka-track{--g:20px;--n:4;display:flex;gap:var(--g);will-change:transform}

/* cards */
.ka-card{
  --qc:#3988D4;--q2:#F2C66D;--qs:#E8F1FB;--qi:#3988D4;--qh:#fff;
  flex:0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n));min-width:0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:26px 18px 20px;border:2.5px solid transparent;border-radius:20px;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(100deg,var(--qc),var(--q2),var(--qc)) border-box;
  background-size:100% 100%,300% 100%;
  box-shadow:0 10px 26px color-mix(in srgb,var(--qc) 14%,transparent);
  animation:ka-flow 5s linear infinite;
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;
}
.ka-card.ka-b{--qc:#163B65;--q2:#3988D4;--qs:#E6ECF4;--qi:#163B65}
.ka-card.ka-c{--qc:#F2C66D;--q2:#3988D4;--qs:#FDF3DC;--qi:#9A6A12;--qh:#163B65}
.ka-card.ka-d{--qc:#2A6FB8;--q2:#F2C66D;--qs:#E3EEF9;--qi:#2A6FB8}
@keyframes ka-flow{to{background-position:0 0,-300% 0}}
.ka-card:hover{transform:translateY(-10px);box-shadow:0 22px 40px color-mix(in srgb,var(--qc) 30%,transparent)}
.ka-ico{
  width:78px;height:78px;border-radius:22px;display:grid;place-items:center;background:var(--qs);color:var(--qi);
  animation:ka-float 4.5s ease-in-out infinite;transition:background-color .3s,color .3s,rotate .5s cubic-bezier(.22,1,.36,1);
}
.ka-ico .ic{width:36px;height:36px;stroke-width:1.7}
.ka-card:hover .ico,.ka-card:hover .ka-ico{rotate:-8deg}
@keyframes ka-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
.ka-card h3{margin:18px 0 8px;min-height:2.6em;display:flex;align-items:center;font:700 1.2rem/1.3 var(--display);color:var(--navy,#163B65);letter-spacing:-.01em}
.ka-card p{flex:1;margin:0 0 18px;font-size:.95rem;line-height:1.6;color:#4B6180}
.ka-btn{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 14px;border-radius:12px;
  background:var(--qc);color:var(--qh);font:700 .8rem/1 var(--display);letter-spacing:.07em;text-transform:uppercase;
  transition:transform .3s ease,box-shadow .3s ease,filter .3s ease;
}
.ka-card.ka-c .ka-btn{color:#163B65}
.ka-btn .ic{width:1.2em;height:1.2em;transition:transform .3s ease}
.ka-btn:hover{color:var(--qh);filter:brightness(1.08);box-shadow:0 10px 20px color-mix(in srgb,var(--qc) 38%,transparent);transform:translateY(-2px)}
.ka-card.ka-c .ka-btn:hover{color:#163B65}
.ka-btn:hover .ic{transform:translateX(4px)}
.ka-btn:focus-visible{outline:3px solid var(--soft-gold,#F2C66D);outline-offset:2px}

/* reveal when scrolled into view (only when JS is running) */
.ka-js .ka-intro>*,.ka-js .ka-arrows{opacity:0;transform:translateY(28px)}
.ka-js.is-in .ka-intro>*,.ka-js.is-in .ka-arrows{animation:ka-rise .8s cubic-bezier(.22,1,.36,1) forwards}
.ka-js.is-in .ka-intro>:nth-child(2){animation-delay:.1s}
.ka-js.is-in .ka-intro>:nth-child(3){animation-delay:.2s}
.ka-js.is-in .ka-intro>:nth-child(4){animation-delay:.3s}
.ka-js.is-in .ka-arrows{animation-delay:.35s}
@keyframes ka-rise{to{opacity:1;transform:none}}
.ka-js:not(.is-in) .ka-card{opacity:0}
.ka-js.is-in:not(.ka-ready) .ka-card{animation:ka-flow 5s linear infinite,ka-pop .9s cubic-bezier(.22,1,.36,1) backwards}
.ka-js.is-in:not(.ka-ready) .ka-card:nth-child(2){animation-delay:0s,.12s}
.ka-js.is-in:not(.ka-ready) .ka-card:nth-child(3){animation-delay:0s,.24s}
.ka-js.is-in:not(.ka-ready) .ka-card:nth-child(4){animation-delay:0s,.36s}
@keyframes ka-pop{0%{opacity:0;transform:translateY(40px) scale(.92)}}

/* responsive */
@media (max-width:1199px){.ka-track{--n:3}}
@media (max-width:991px){
  .ka{padding:44px 0 56px}
  .ka-wrap{grid-template-columns:1fr;row-gap:8px}
  .ka-line,.ka-dot{display:none}
  .ka-intro{padding-top:0;text-align:center}
  .ka-kicker{justify-content:center}
  .ka-text{margin:14px auto 22px}
  .ka-arrows{height:auto;padding-top:0;margin:18px 0 12px;justify-content:center}
  .ka-track{--n:2}
}
@media (max-width:600px){.ka-track{--n:1}.ka-card h3{min-height:0}}
@media (prefers-reduced-motion:reduce){
  .ka-card,.ka-ico{animation:none}
  .ka-js .ka-intro>*,.ka-js .ka-arrows,.ka-js .ka-card{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .ka-line .ka-base{stroke-dashoffset:0;transition:none}
  .ka-line .ka-shine{animation:none!important;opacity:0}
  .ka-explore::after{animation:none}
}