/* the Kognoz framework panels read as dark blue with light copy */
.kfrm-card{background:linear-gradient(140deg,#06243D 0%,#0B3B63 52%,#1E6FA8 100%);
  border:1px solid rgba(255,255,255,.18)}
.kfrm-card>div:first-child{color:rgba(190,225,245,.8)!important}
.kfrm-card>div:nth-child(2){color:#fff!important}
.kfrm-card p{color:rgba(232,244,252,.86)!important}
/* inner-page "What we do" cards carry an image at the top */
.kwd-card{padding:0 0 30px}
.kwd-card>*{padding-left:30px;padding-right:30px}
.kwd-card::before{content:"IMAGE";display:flex;align-items:center;justify-content:center;
  height:158px;margin-bottom:26px;font-family:'Poppins',sans-serif;font-size:10px;
  font-weight:700;letter-spacing:.2em;color:#8FA9BC;
  background:linear-gradient(140deg,#EEF5F9 0%,#E2EEF5 52%,#D6E7F1 100%);
  border-bottom:1px solid #DCE6ED}
.kwd-card.has-shot::before{content:"";height:206px;background:var(--shot) center/cover no-repeat;
  transition:transform .55s cubic-bezier(.2,.7,.2,1)}
@media (max-width:700px){.kwd-card.has-shot::before{height:172px}}
.kwd-card.has-shot:hover::before{transform:scale(1.04)}
@media (max-width:700px){.kwd-card::before{height:132px}}
@media (prefers-reduced-motion:reduce){.kwd-card.has-shot::before{transition:none}}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:'Poppins',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  overflow-x:clip}
#root{min-height:100vh;overflow-x:clip}
/* nothing overflows its column, whatever the viewport */
img,svg,video,canvas{max-width:100%}
img,video{height:auto}
/* no orphaned last words: the browser reflows the last two lines instead */
p,li,blockquote,figcaption{text-wrap:pretty}
h1,h2,h3,h4,h5,h6{text-wrap:balance;overflow-wrap:break-word}
/* long unbroken strings (URLs, IDs) can never push a layout wide */
p,li,h1,h2,h3,h4,a,span{overflow-wrap:anywhere}
/* --- MacBook widths ------------------------------------------------- */
/* 13"/14" at default scaling: 1280-1512 css px */
@media (max-width:1512px){
  .ksrv{gap:44px}
  .kwwd-split{gap:32px;padding:56px 44px 84px}
}
@media (max-width:1366px){
  .ksig-split{gap:44px}
  .ksrv{gap:36px}
  .kfw-split{gap:18px}
  .kwwd-split{padding:48px 34px 78px;min-height:0}
}
@media (max-width:1280px){
  .ksig-split{grid-template-columns:.62fr 1.38fr;gap:36px}
  .ktal-copy{padding:32px 30px 30px}
  .ktwo-copy{padding:32px 30px}
}
/* --- short viewports: a 13" MacBook is ~810px of usable height ------- */
@media (max-height:900px){
  .ksig-sticky{top:96px}
  .kwwd-sticky{top:88px}
  .kmk-sticky{top:84px}
  .krz-head{top:110px}
}
@media (max-height:800px){
  .ksig-sticky{top:84px}
  .kwwd-sticky{top:78px}
  .kmk-sticky{top:76px}
  .krz-head{top:96px}
  .ksig-stage{height:calc(4 * 58vh)}
  .kwwd-stage{height:calc(4 * 96vh)}
}
/* the page scrolls inside [data-scroll-root]; full-bleed bands are 100vw, which
   counts the scrollbar and would push that box sideways. Clip each page-level
   child to the box (clip, not hidden, so sticky sections keep working). */
[data-scroll-root]>*{overflow-x:clip}
/* a full-bleed band sitting directly in the scroll box already spans it */
[data-scroll-root]>.knews-band{width:100%;margin-left:0}
/* "In our words" room: a film still to come shows a Coming soon panel, in the
   room's own dark-blue and neon, instead of a stand-in clip */
.kvr-th-soon,.kvr-soon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 28% 18%,rgba(0,157,191,.30),rgba(4,11,24,0) 60%),
    linear-gradient(160deg,#0C2644 0%,#071429 58%,#040B18 100%)}
.kvr-th-soon::before,.kvr-soon::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(111,224,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(111,224,255,.07) 1px,transparent 1px);background-size:26px 26px}
.kvr-th-soon{align-items:flex-start;padding-top:18%}
.kvr-th-soon b,.kvr-soon b{position:relative;font-family:'Poppins',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;color:#CFF4FF;border:1px solid rgba(111,224,255,.5);
  background:rgba(111,224,255,.08);border-radius:30px;box-shadow:0 0 22px rgba(0,157,191,.25)}
.kvr-th-soon b{font-size:10.5px;padding:6px 13px}
.kvr-soon{z-index:3}
.kvr-soon b{font-size:clamp(13px,1.3vw,17px);padding:10px 22px}
.kvr-th.soon{cursor:default}
.kvr-th.soon .kvr-th-play,.kvr-th.soon .kvr-th-cta,
.kvr-screen.soon .kvr-big,.kvr-screen.soon .kvr-bar,.kvr-screen.soon .kvr-live{display:none}
/* the whole room still to come: one Coming soon at its centre, screens left
   dark and quiet, nothing to pick or step through */
.kvr-soon-all{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;pointer-events:none}
.kvr-soon-all b{font-family:'Poppins',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.24em;
  font-size:clamp(15px,1.8vw,24px);color:#E6FAFF;padding:clamp(12px,1.2vw,18px) clamp(26px,2.6vw,40px);
  border:1px solid rgba(111,224,255,.6);border-radius:40px;background:rgba(4,18,36,.72);
  box-shadow:0 0 34px rgba(0,157,191,.35),inset 0 0 22px rgba(111,224,255,.12);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.kvr-allsoon .kvr-th-meta,.kvr-allsoon .kvr-th-now,.kvr-allsoon .kvr-now,
.kvr-allsoon .kvr-tr,.kvr-allsoon .kvr-tip,.kvr-allsoon .kvr-hint{display:none}
.kvr-allsoon .kvr-th,.kvr-allsoon .kvr-video{cursor:default}
/* --- small screens: the header folds into a menu ------------------------ */
/* the ≡ button stands in for the links; the menu opens as a white card over
   the page with the same links, Consulting unfolding in place */
.knav-burger{display:none;align-items:flex-end;justify-content:center;flex-direction:column;gap:5px;
  width:42px;height:42px;padding:0 9px;margin-right:-9px;border:0;background:none;cursor:pointer}
.knav-burger i{display:block;height:2px;border-radius:2px;background:currentColor;transition:width .25s}
.knav-burger i:nth-child(1){width:22px}
.knav-burger i:nth-child(2){width:14px}
.knav-burger i:nth-child(3){width:18px}
.knav-burger:hover i{width:22px}
@media (max-width:1100px){
  .knav-links{display:none!important}
  .knav-burger{display:flex}
}
.knav-mob-wrap{position:fixed;inset:0;z-index:300;background:rgba(4,16,30,.38);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:knavFade .2s ease}
.knav-mob{position:absolute;top:10px;left:10px;right:10px;max-width:520px;margin-left:auto;
  max-height:calc(100vh - 20px);overflow-y:auto;background:#fff;border-radius:18px;
  padding:16px 20px 20px;box-shadow:0 24px 60px rgba(0,32,58,.28);
  font-family:'Poppins',system-ui,sans-serif;animation:knavDrop .28s cubic-bezier(.2,.7,.2,1)}
.knav-mob-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.knav-mob-head img{height:36px;width:auto;display:block;cursor:pointer}
.knav-mob-x{width:40px;height:40px;margin-right:-8px;border:0;background:none;cursor:pointer;
  font-size:30px;line-height:1;color:#005184;display:flex;align-items:center;justify-content:center}
.knav-mob-list{display:flex;flex-direction:column}
.knav-mob-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:12px 2px;border:0;border-bottom:1px solid #EEF3F6;background:none;cursor:pointer;
  font-family:inherit;font-size:15.5px;font-weight:500;color:#212121;text-align:left}
.knav-mob-item.on{color:#005184;font-weight:700}
.knav-mob-ext{font-size:12px;opacity:.55;margin-left:auto}
.knav-mob-chev{width:18px;height:18px;flex:0 0 auto;transition:transform .25s}
.knav-mob-chev.open{transform:rotate(180deg)}
.knav-mob-sub{display:flex;flex-direction:column;padding:4px 0 8px 14px;border-bottom:1px solid #EEF3F6}
.knav-mob-sub button{padding:9px 2px;border:0;background:none;cursor:pointer;text-align:left;
  font-family:inherit;font-size:14.5px;font-weight:500;color:#4A5560}
.knav-mob-sub button.on{color:#005184;font-weight:700}
.knav-mob-sub .knav-mob-all{font-size:13.5px;font-weight:700;color:#009DBF}
.knav-mob-cta{width:100%;margin-top:18px;padding:13px 20px;border:0;border-radius:10px;cursor:pointer;
  background:#009DBF;color:#fff;font-family:inherit;font-size:15px;font-weight:600;
  box-shadow:0 6px 18px rgba(0,157,191,.28)}
.knav-mob-cta:hover{background:#0286A3}
@keyframes knavFade{from{opacity:0}to{opacity:1}}
@keyframes knavDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.knav-mob-wrap,.knav-mob{animation:none}}
/* --- small screens: section heads read left-aligned, like body copy -------
   On desktop these heads are centred; on phones and tablets the eyebrow,
   heading, lead paragraph and marks start at the left edge instead. Only the
   heads change: the cards, steps and lists below them keep their layout. */
@media (max-width:1000px){
  .ksig-head,.kvr-head,.kcons-head,.kfw-head,.kpp-head,.kph-card,.kpage-hero-card,.kcta-in,.kmax-in{
    text-align:left !important;margin-left:0 !important;margin-right:0 !important}
  .ksig-head h2,.kvr-head h2,.kcons-head h2,.kfw-head h2,.kpp-head h2,.kph-card h1,.kpage-hero-card h1,
  .kcta-in h2,.kmax-in h2{text-align:left !important;margin-left:0 !important;margin-right:0 !important}
  /* eyebrows and marks sit in flex rows that were centred */
  .ksig-head>div,.kvr-head>div,.kcons-head>div:first-child,.kfw-head>div:first-child,.kpp-head>div,
  .kph-card>div:first-child,.kpage-hero-card>div:first-child,.kmax-in>div:first-child,
  .kstp-wrap>div:first-child>div{justify-content:flex-start !important}
  /* lead paragraphs were centred with auto side margins */
  /* (body prefix: outranks the components' own later <style> rules) */
  body .ksig-head p,body .kvr-head p,body .kcons-head p,body .kfw-head p,body .kph-card p,
  body .kpage-hero-card p,body .kcta-in p,body .kmax-in p{
    margin-left:0 !important;margin-right:0 !important}
  .kpp-rule{margin-left:0 !important;margin-right:0 !important}
}
@media (max-width:1000px){
  /* the sequence's own heading (Human+AI Work Design) is centred inline */
  .kstp-wrap>div:first-child>div,.kstp-wrap>div:first-child h2{text-align:left !important}
}
@media (max-width:1000px){
  /* "The results speak for themselves": the four figures as a two-by-two, the
     numbers sized to the screen so none run off the right edge */
  .kproof-stats{grid-template-columns:1fr 1fr !important;gap:30px 18px !important}
  .kproof-stats>div>div:first-child{font-size:clamp(26px,7.4vw,48px) !important}
}
/* Home ▸ Insights: "View all" sits beside the heading on desktop; on small
   screens it moves below the cards, after the reader has seen them */
.kins-bottom-btn{display:none}
@media (max-width:1000px){
  .kins-top-btn{display:none}
  .kins-bottom-btn{display:block;margin-top:30px}
}
/* Footer on small screens: brand block on top, then each link column one
   below another, then the copyright and locations, all left-aligned */
@media (max-width:1000px){
  .kfoot-grid{grid-template-columns:1fr !important;gap:34px !important;margin-bottom:28px !important;padding-bottom:34px !important}
  .kfoot-grid>div:first-child p{max-width:320px !important}
  .kfoot-social a{white-space:nowrap;min-width:34px;text-align:center}
  .kfoot-bottom{flex-direction:column !important;align-items:flex-start !important;gap:8px !important}
}
/* Card rails with only a few cards (.is-short) are a plain 3-up grid on
   desktop; on small screens they stack instead of squeezing into slivers */
@media (max-width:900px){
  .krail-tr.is-short{grid-template-columns:repeat(2,minmax(0,1fr)) !important;transform:none !important}
}
@media (max-width:600px){
  .krail-tr.is-short{grid-template-columns:minmax(0,1fr) !important}
}
/* Small screens: a two-column grid with an odd number of cards centres the
   last one at the same width as the others (JS marks it .kgrid-lone) */
@media (max-width:1000px){
  .kgrid>.kgrid-lone{grid-column:1/-1;justify-self:center;width:var(--kgrid-w)}
}
@media (min-width:601px) and (max-width:900px){
  .krail-tr.is-short>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 7px)}
}
/* Contact: the email address shrinks a little and breaks only at the @ */
@media (max-width:1000px){
  .kct-email{font-size:clamp(14px,4.2vw,17px) !important;overflow-wrap:normal !important}
}
/* Phones: the Newsroom tab switch fills the row, one line per label; the
   Insights category filter stays one row and scrolls sideways */
@media (max-width:600px){
  .knews-tabs{display:flex !important}
  .knews-tabs button{flex:1 1 0;white-space:nowrap;padding:10px 12px !important}
  .kblog-bar{flex-wrap:nowrap !important;overflow-x:auto;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .kblog-bar::-webkit-scrollbar{display:none}
  .kblog-bar button{flex:0 0 auto;white-space:nowrap}
}