/* KING333 Malaysia landing: ivory ground, indigo ink, gold. The only light site in the cluster.
   Namespaced .kn-. The --navy-* tokens now carry the light grounds; the names are kept so every
   rule that references them keeps working.

   Conventions in here:
     - The gaps and insets, the corner radii, the font weights, the shadows and the line
       heights used more than once are named once in :root as --w-* and called by name
       everywhere else;
     - box properties keep their physical names, one edge per declaration;
     - every border is split into width, style and colour;
     - gap is row-gap plus column-gap;
     - overflow is overflow-x plus overflow-y;
     - a transition is spelled out as property, duration, timing and delay;
     - the font shorthand is opened out into its longhands. */

:root {
  --navy: #faf7f0;
  --navy-2: #ffffff;
  --navy-3: #f2ecdd;
  --navy-4: #e4dac2;
  --amb: #c9a227;
  --amb-2: #93731a;
  --amb-3: #eadfb4;
  --warm: #9c2b1b;
  --warm-2: #6f1d12;
  --txt: #1b1b3a;
  --mut: #5c5a76;
  --line: rgba(201,162,39,.38);
  --line-2: rgba(27,27,58,.14);
  --ok: #1d7a4e;
  --tab: 60px;
  --font: Arial,"Helvetica Neue",Helvetica,"Noto Sans SC",sans-serif;
  --disp: Georgia,"Times New Roman",serif;

  /* named values used more than once */
  --w-sp1: 1px;
  --w-sp2: 2px;
  --w-sp3: 3px;
  --w-sp4: 4px;
  --w-sp5: 5px;
  --w-sp6: 6px;
  --w-sp7: 7px;
  --w-sp8: 8px;
  --w-sp9: 9px;
  --w-sp10: 10px;
  --w-sp11: 11px;
  --w-sp12: 12px;
  --w-sp13: 13px;
  --w-sp14: 14px;
  --w-sp15: 15px;
  --w-sp16: 16px;
  --w-sp17: 17px;
  --w-sp18: 18px;
  --w-sp19: 20px;
  --w-sp20: 22px;
  --w-sp21: 24px;
  --w-sp22: 26px;
  --w-sp23: 28px;
  --w-sp24: 30px;
  --w-sp25: 34px;
  --w-rad1: 7px;
  --w-rad2: 11px;
  --w-rad3: 14px;
  --w-rad4: 15px;
  --w-rad5: 999px;
  --w-wt1: 700;
  --w-wt2: 800;
  --w-wt3: 900;
  --w-lh1: 1;
  --w-lh2: 1.35;
  --w-lh3: 1.4;
  --w-lh4: 1.6;
  --w-lh5: 1.65;
}
*{box-sizing: border-box;}
html{-webkit-text-size-adjust: 100%; overflow-x: clip; max-width: 100%; scroll-behavior: smooth;}
body{margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; color: var(--txt); font-family: var(--font); line-height: var(--w-lh5); background: var(--navy);}
a{color: var(--amb); text-decoration: none;}
img{max-width: 100%; height: auto; display: block;}
h1,h2,h3,h4{margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; line-height: 1.24;}
table{border-collapse: collapse; width: 100%;}
.w{max-width: 71.25rem; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; padding-top: 0; padding-right: var(--w-sp19); padding-bottom: 0; padding-left: var(--w-sp19);}

/* ---------- buttons ---------- */
.kn-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--w-sp8);
  column-gap: var(--w-sp8);
  min-height: 2.75rem;
  padding-top: 0;
  padding-right: var(--w-sp18);
  padding-bottom: 0;
  padding-left: var(--w-sp18);
  border-radius: var(--w-rad1);
  font-weight: var(--w-wt2);
  font-size: 0.875rem;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: transparent;
  text-align: center;
  line-height: 1.2;
}
.kn-btn.a{background: linear-gradient(180deg,var(--amb-3),var(--amb)); color: #2d1a00;}
.kn-btn.o{background: transparent; color: var(--txt); border-color: var(--line-2);}
.kn-btn.r{background: linear-gradient(180deg,var(--warm),var(--warm-2)); color: #fff;}
.kn-btn.lg{min-height: 3.125rem; font-size: 0.96875rem; padding-top: 0; padding-right: var(--w-sp21); padding-bottom: 0; padding-left: var(--w-sp21);}

/* ---------- header ---------- */
.kn-head{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250,247,240,.96);
  border-bottom-width: 0.0625rem;
  border-bottom-style: solid;
  border-bottom-color: var(--line-2);
  backdrop-filter: saturate(1.3) blur(0.375rem);
}
.kn-head .w{display: flex; align-items: center; row-gap: var(--w-sp16); column-gap: var(--w-sp16); padding-top: var(--w-sp11); padding-bottom: var(--w-sp11);}
.kn-logo{display: flex; align-items: center; row-gap: var(--w-sp9); column-gap: var(--w-sp9); flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.kn-logo svg{width: 2.125rem; height: 2.375rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.kn-logo .wm{display: flex; flex-direction: column; line-height: var(--w-lh1);}
.kn-logo .wm b{font-family: var(--disp); font-size: 1.4375rem; letter-spacing: .02em; white-space: nowrap; color: var(--amb);}
.kn-logo .wm small{
  font-size: 0.5rem;
  letter-spacing: .3em;
  color: var(--mut);
  font-weight: var(--w-wt1);
  margin-top: var(--w-sp4);
  white-space: nowrap;
}
.kn-pills{display: flex; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; flex-wrap: wrap; row-gap: var(--w-sp5); column-gap: var(--w-sp5); min-width: 0;}
.kn-pills a{
  display: inline-flex;
  align-items: center;
  min-height: 2.375rem;
  padding-top: 0;
  padding-right: var(--w-sp12);
  padding-bottom: 0;
  padding-left: var(--w-sp12);
  border-radius: var(--w-rad5);
  font-size: 0.78125rem;
  font-weight: var(--w-wt1);
  color: var(--mut);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: transparent;
  white-space: nowrap;
}
.kn-pills a:hover{color: var(--txt); border-color: var(--line-2);}
.kn-lang{display: flex; row-gap: var(--w-sp3); column-gap: var(--w-sp3); flex-grow: 0; flex-shrink: 0; flex-basis: auto;}
.kn-lang a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.375rem;
  min-height: 2.5rem;
  border-radius: 0.375rem;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line-2);
  color: var(--mut);
  font-size: 0.71875rem;
  font-weight: var(--w-wt1);
  padding-top: 0;
  padding-right: var(--w-sp6);
  padding-bottom: 0;
  padding-left: var(--w-sp6);
  white-space: nowrap;
}
.kn-lang a.on{background: var(--amb); color: #2d1a00; border-color: transparent;}
.kn-burger{
  display: none;
  background: var(--navy-3);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line-2);
  color: var(--amb);
  font-size: 1.0625rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: var(--w-rad1);
  cursor: pointer;
}
.kn-drawer{display: none; flex-wrap: wrap; row-gap: var(--w-sp6); column-gap: var(--w-sp6); padding-top: 0; padding-right: var(--w-sp19); padding-bottom: var(--w-sp13); padding-left: var(--w-sp19);}
.kn-open .kn-drawer{display: flex;}
.kn-drawer a{
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding-top: 0;
  padding-right: var(--w-sp13);
  padding-bottom: 0;
  padding-left: var(--w-sp13);
  border-radius: var(--w-rad1);
  background: var(--navy-3);
  color: var(--txt);
  font-size: 0.8125rem;
  font-weight: var(--w-wt1);
}

/* ---------- hero ---------- */
.kn-hero{padding-top: var(--w-sp22); padding-right: 0; padding-bottom: var(--w-sp8); padding-left: 0;}
.kn-hero.big{padding-top: var(--w-sp25); padding-right: 0; padding-bottom: var(--w-sp10); padding-left: 0;}
.kn-hero .w{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  row-gap: var(--w-sp23);
  column-gap: var(--w-sp23);
  align-items: center;
}
.kn-hero .bd{display: grid; row-gap: var(--w-sp13); column-gap: var(--w-sp13); align-content: start; min-width: 0;}
.kn-hero .eb{
  font-size: 0.65625rem;
  font-weight: var(--w-wt3);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amb-2);
}
.kn-hero h1{font-family: var(--disp); font-size: 2.375rem; line-height: 1.16; color: var(--txt);}
.kn-hero.big h1{font-size: 2.75rem;}
.kn-hero .lead{margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; font-size: 1.03125rem; color: var(--mut); max-width: 56ch;}
.kn-hero .act{display: flex; flex-wrap: wrap; row-gap: var(--w-sp11); column-gap: var(--w-sp11);}
.kn-hero .chips{display: flex; flex-wrap: wrap; row-gap: var(--w-sp8); column-gap: var(--w-sp8); margin-top: var(--w-sp3);}
.kn-hero .chips span{
  display: inline-flex;
  align-items: center;
  row-gap: var(--w-sp7);
  column-gap: var(--w-sp7);
  padding-top: var(--w-sp7);
  padding-right: var(--w-sp12);
  padding-bottom: var(--w-sp7);
  padding-left: var(--w-sp12);
  border-radius: var(--w-rad1);
  background: var(--navy-2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line-2);
  font-size: 0.71875rem;
  color: var(--mut);
  font-weight: var(--w-wt1);
  min-height: 2.25rem;
}
.kn-hero .chips i{font-style: normal; color: var(--amb); font-size: 0.8125rem;}
.kn-hero>.w>img{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--w-rad3);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
}

/* ---------- sections ---------- */
.kn-sec{padding-top: var(--w-sp20); padding-right: 0; padding-bottom: var(--w-sp20); padding-left: 0;}
.kn-sec.pad{padding-top: var(--w-sp25);}
.kn-sec .sh{margin-bottom: var(--w-sp16);}
.kn-sec .sh h2{font-family: var(--disp); font-size: 1.625rem; color: var(--txt);}
.kn-sec .sh p{margin-top: var(--w-sp7); margin-right: 0; margin-bottom: 0; margin-left: 0; color: var(--mut); font-size: 0.90625rem;}
.note{display: block; margin-top: var(--w-sp11); font-size: 0.75rem; color: var(--mut);}

/* offer strip: the four standing offers, landing page only */
.kn-offers{
  border-radius: var(--w-rad4);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  overflow-x: hidden;
  overflow-y: hidden;
  background: linear-gradient(180deg,var(--navy-2),var(--navy-3));
}
.kn-offers .hd{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--w-sp14);
  column-gap: var(--w-sp14);
  padding-top: var(--w-sp16);
  padding-right: var(--w-sp19);
  padding-bottom: var(--w-sp16);
  padding-left: var(--w-sp19);
  background: linear-gradient(110deg,var(--amb-2),var(--warm));
  border-bottom-width: 0.0625rem;
  border-bottom-style: solid;
  border-bottom-color: var(--line);
}
.kn-offers .hd h2{font-family: var(--disp); font-size: 1.3125rem; color: var(--txt);}
.kn-offers .gr{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  row-gap: var(--w-sp1);
  column-gap: var(--w-sp1);
  background: var(--line);
}
.kn-offers .of{
  display: grid;
  row-gap: var(--w-sp4);
  column-gap: var(--w-sp4);
  align-content: start;
  padding-top: var(--w-sp17);
  padding-right: var(--w-sp18);
  padding-bottom: 1.1875rem;
  padding-left: var(--w-sp18);
  background: var(--navy-2);
}
.kn-offers .of b{font-family: var(--disp); font-size: 1.9375rem; color: var(--amb); line-height: var(--w-lh1);}
.kn-offers .of em{
  font-style: normal;
  font-size: 0.84375rem;
  font-weight: var(--w-wt2);
  color: var(--txt);
  line-height: var(--w-lh3);
}
.kn-offers .of small{font-size: 0.75rem; color: var(--mut); line-height: 1.5;}

/* entry card: the offer, once per visitor, landing page only */
.kn-pop[hidden]{display: none;}
.kn-pop{
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--w-sp19);
  padding-right: var(--w-sp19);
  padding-bottom: var(--w-sp19);
  padding-left: var(--w-sp19);
  background: rgba(27,27,58,.55);
}
.kn-pop .bx{
  position: relative;
  width: min(26.25rem,100%);
  max-height: 92vh;
  overflow-x: auto;
  overflow-y: auto;
  border-radius: 1.0625rem;
  background: var(--navy-2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
  box-shadow: 0 1.375rem 3rem rgba(27,27,58,.18);
}
.kn-pop .bx>img{width: 100%; aspect-ratio: 16/9; object-fit: cover;}
.kn-pop .x{
  position: absolute;
  top: 0.5625rem;
  right: 0.5625rem;
  width: 2.0625rem;
  height: 2.0625rem;
  border-width: 0;
  border-style: none;
  border-color: currentcolor;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.3125rem;
  line-height: var(--w-lh1);
  color: #0c1830;
  background: rgba(255,255,255,.88);
}
.kn-pop .bd{display: grid; row-gap: var(--w-sp11); column-gap: var(--w-sp11); padding-top: var(--w-sp18); padding-right: var(--w-sp19); padding-bottom: var(--w-sp19); padding-left: var(--w-sp19);}
.kn-pop .bd b{font-family: var(--disp); font-size: 1.4375rem; color: var(--txt); line-height: 1.25;}
.kn-pop .bd p{margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; font-size: 0.84375rem; color: var(--mut); line-height: var(--w-lh4);}
.kn-pop ul{margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; list-style: none; display: grid; row-gap: var(--w-sp7); column-gap: var(--w-sp7);}
.kn-pop li{display: flex; align-items: baseline; row-gap: var(--w-sp10); column-gap: var(--w-sp10); font-size: 0.8125rem; color: var(--txt);}
.kn-pop li b{flex-grow: 0; flex-shrink: 0; flex-basis: auto; min-width: 3.25rem; font-family: var(--disp); font-size: 1.0625rem; color: var(--amb);}
.kn-pop .later{
  border-width: 0;
  border-style: none;
  border-color: currentcolor;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.78125rem;
  color: var(--mut);
  text-decoration: underline;
  padding-top: var(--w-sp2);
  padding-right: var(--w-sp2);
  padding-bottom: var(--w-sp2);
  padding-left: var(--w-sp2);
}

/* stat row */
.kn-stats{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  row-gap: var(--w-sp12);
  column-gap: var(--w-sp12);
  padding-top: var(--w-sp18);
  padding-right: var(--w-sp18);
  padding-bottom: var(--w-sp18);
  padding-left: var(--w-sp18);
  border-radius: var(--w-rad3);
  background: linear-gradient(180deg,var(--navy-2),var(--navy));
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
}
.kn-stats>div{min-width:0;display: grid; row-gap: var(--w-sp3); column-gap: var(--w-sp3); text-align: center;}
.kn-stats b{font-family: var(--disp); font-size: 2.125rem; color: var(--amb); line-height: var(--w-lh1);}
.kn-stats span{font-size: 0.71875rem; color: var(--mut); line-height: var(--w-lh2);}

/* numbered index: the section list this page actually renders */
.kn-index{padding-top: var(--w-sp17); padding-right: var(--w-sp18); padding-bottom: var(--w-sp17); padding-left: var(--w-sp18); border-radius: var(--w-rad3); background: var(--navy-2); border-width: 0.0625rem; border-style: solid; border-color: var(--line-2);}
.kn-index>b{
  display: block;
  font-size: 0.65625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amb-2);
  margin-bottom: var(--w-sp11);
}
.kn-index>div{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); row-gap: var(--w-sp7); column-gap: var(--w-sp18);}
.kn-index a{
  display: flex;
  align-items: baseline;
  row-gap: var(--w-sp9);
  column-gap: var(--w-sp9);
  font-size: 0.8125rem;
  color: var(--txt);
  padding-top: var(--w-sp5);
  padding-right: 0;
  padding-bottom: var(--w-sp5);
  padding-left: 0;
  line-height: 1.45;
}
.kn-index em{
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  font-style: normal;
  font-weight: var(--w-wt3);
  font-size: 0.6875rem;
  color: var(--amb-2);
  min-width: 1.0625rem;
}

/* category cards */
.kn-cats{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap: var(--w-sp15); column-gap: var(--w-sp15);}
.kn-cats .cc{
  display: grid;
  border-radius: var(--w-rad3);
  overflow-x: hidden;
  overflow-y: hidden;
  background: var(--navy-2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line-2);
  align-content: start;
}
.kn-cats .cc img{width: 100%; aspect-ratio: 16/10; object-fit: cover;}
.kn-cats .bd{display: grid; row-gap: var(--w-sp6); column-gap: var(--w-sp6); padding-top: var(--w-sp14); padding-right: var(--w-sp15); padding-bottom: var(--w-sp17); padding-left: var(--w-sp15);}
.kn-cats .bd b{font-size: 0.96875rem; color: var(--amb);}
.kn-cats .bd p{margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; font-size: 0.8125rem; color: var(--mut); line-height: 1.55;}

/* studio chips */
.kn-studios{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap: var(--w-sp11); column-gap: var(--w-sp11);}
.kn-studios .st{
  display: flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--w-sp9);
  column-gap: var(--w-sp9);
  min-height: 3.75rem;
  min-width: 0;
  padding-top: var(--w-sp10);
  padding-right: var(--w-sp12);
  padding-bottom: var(--w-sp10);
  padding-left: var(--w-sp12);
  border-radius: var(--w-rad2);
  background: #ffffff;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line-2);
  overflow-x: hidden;
  overflow-y: hidden;
}
.kn-studios .st img{
  max-height: 1.625rem;
  width: auto;
  max-width: 100%;
  min-width: 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  object-fit: contain;
}
.kn-studios .st em{font-style: normal; font-size: 0.75rem; font-weight: var(--w-wt2); color: #5c5a76;}

/* alternating splits */
.sp{
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  row-gap: var(--w-sp22);
  column-gap: var(--w-sp22);
  align-items: center;
  margin-bottom: var(--w-sp20);
}
.sp:last-child{margin-bottom: 0;}
.sp.alt img{order: 2;}
.sp img{width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--w-rad3); border-width: 0.0625rem; border-style: solid; border-color: var(--line-2);}
.sp .bd h3{font-family: var(--disp); font-size: 1.375rem; color: var(--txt); margin-bottom: var(--w-sp9);}
.sp .bd p{margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; color: var(--mut); font-size: 0.90625rem;}

/* deposit rail */
.kn-rail{display: grid; row-gap: 0; column-gap: 0; padding-left: var(--w-sp6);}
.kn-rail .rw{
  display: grid;
  grid-template-columns: 1.875rem minmax(0,1fr);
  row-gap: var(--w-sp14);
  column-gap: var(--w-sp14);
  padding-top: 0;
  padding-right: 0;
  padding-bottom: var(--w-sp19);
  padding-left: 0;
  position: relative;
}
.kn-rail .rw:last-child{padding-bottom: 0;}
.kn-rail .rw::before{
  content: "";
  position: absolute;
  left: 0.875rem;
  top: 1.25rem;
  bottom: 0;
  width: 0.125rem;
  background: var(--line-2);
}
.kn-rail .rw:last-child::before{display: none;}
.kn-rail .dot{
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: var(--navy-2);
  border-width: 0.125rem;
  border-style: solid;
  border-color: var(--amb);
  position: relative;
  z-index: 2;
}
.kn-rail .dot::after{content: ""; position: absolute; inset: 0.4375rem; border-radius: 50%; background: var(--amb);}
.kn-rail .bd{display: grid; row-gap: var(--w-sp4); column-gap: var(--w-sp4);}
.kn-rail .bd b{font-size: 0.9375rem; color: var(--txt);}
.kn-rail .bd em{
  font-style: normal;
  justify-self: start;
  font-size: 0.6875rem;
  font-weight: var(--w-wt2);
  padding-top: var(--w-sp3);
  padding-right: var(--w-sp9);
  padding-bottom: var(--w-sp3);
  padding-left: var(--w-sp9);
  border-radius: var(--w-rad5);
  background: rgba(29,122,78,.12);
  color: var(--ok);
}
.kn-rail .bd p{margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; font-size: 0.84375rem; color: var(--mut);}

/* member cards */
.kn-members{display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); row-gap: var(--w-sp15); column-gap: var(--w-sp15);}
.kn-members .mb{
  display: grid;
  row-gap: var(--w-sp11);
  column-gap: var(--w-sp11);
  align-content: start;
  padding-top: var(--w-sp17);
  padding-right: var(--w-sp17);
  padding-bottom: var(--w-sp17);
  padding-left: var(--w-sp17);
  border-radius: var(--w-rad3);
  background: var(--navy-2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line-2);
}
.kn-members .hd{display: grid; grid-template-columns: 2.5rem minmax(0,1fr) auto; align-items: center; row-gap: var(--w-sp11); column-gap: var(--w-sp11);}
.kn-members .av{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-size: 1.25rem;
  background: var(--navy-3);
}
.kn-members .hd b{display: block; font-size: 0.84375rem;}
.kn-members .hd small{display: block; font-size: 0.71875rem; color: var(--mut);}
.kn-members .rt{color: var(--amb); font-size: 0.75rem; letter-spacing: .06em;}
.kn-members .mb p{margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; font-size: 0.84375rem; color: var(--mut); line-height: var(--w-lh4);}

/* ---------- prose ---------- */
.kn-prose h1{font-family: var(--disp); font-size: 2.125rem; color: var(--txt); margin-bottom: var(--w-sp11);}
.kn-prose h2{font-family: var(--disp); font-size: 1.4375rem; color: var(--txt); margin-top: var(--w-sp24); margin-right: 0; margin-bottom: var(--w-sp10); margin-left: 0; scroll-margin-top: 5.375rem;}
.kn-prose p{margin-top: 0; margin-right: 0; margin-bottom: var(--w-sp14); margin-left: 0; color: #4a4866;}
.kn-prose .lead{font-size: 1.03125rem; color: var(--mut); margin-bottom: var(--w-sp18);}
.kn-prose ul{margin-top: 0; margin-right: 0; margin-bottom: var(--w-sp16); margin-left: 0; padding-left: var(--w-sp20); display: grid; row-gap: var(--w-sp7); column-gap: var(--w-sp7); color: #4a4866;}
.kn-prose .act{display: flex; flex-wrap: wrap; row-gap: var(--w-sp11); column-gap: var(--w-sp11); margin-top: 0; margin-right: 0; margin-bottom: var(--w-sp20); margin-left: 0;}
.kn-prose .kn-index{margin-bottom: var(--w-sp8);}
.kn-kpis{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  row-gap: var(--w-sp12);
  column-gap: var(--w-sp12);
  padding-top: var(--w-sp18);
  padding-right: var(--w-sp18);
  padding-bottom: var(--w-sp18);
  padding-left: var(--w-sp18);
  margin-top: 0;
  margin-right: 0;
  margin-bottom: var(--w-sp20);
  margin-left: 0;
  border-radius: var(--w-rad3);
  background: linear-gradient(180deg,var(--navy-2),var(--navy));
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line);
}
.kn-kpis>div{min-width:0;display: grid; row-gap: var(--w-sp3); column-gap: var(--w-sp3); text-align: center;}
.kn-kpis b{font-family: var(--disp); font-size: 1.875rem; color: var(--amb); line-height: var(--w-lh1);}
.kn-kpis span{font-size: 0.71875rem; color: var(--mut); line-height: var(--w-lh2);}
.kn-steps{counter-reset: s; list-style: none; margin-top: 0; margin-right: 0; margin-bottom: var(--w-sp20); margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; display: grid; row-gap: var(--w-sp10); column-gap: var(--w-sp10);}
.kn-steps li{
  counter-increment: s;
  position: relative;
  padding-top: var(--w-sp14);
  padding-right: var(--w-sp16);
  padding-bottom: var(--w-sp14);
  padding-left: 3.25rem;
  border-radius: var(--w-rad2);
  background: var(--navy-2);
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line-2);
  color: #4a4866;
}
.kn-steps li::before{
  content: counter(s);
  position: absolute;
  left: 0.9375rem;
  top: 0.8125rem;
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: var(--w-wt3);
  font-size: 0.8125rem;
  background: linear-gradient(180deg,var(--amb-3),var(--amb));
  color: #2d1a00;
}
.kn-tw{overflow-x: auto; border-radius: 0.75rem; border-width: 0.0625rem; border-style: solid; border-color: var(--line-2); margin-top: 0; margin-right: 0; margin-bottom: var(--w-sp20); margin-left: 0;}
.kn-tbl{font-size: 0.84375rem; min-width: 27.5rem; background: var(--navy-2);}
.kn-tbl th{
  background: var(--navy-3);
  color: var(--amb);
  text-align: left;
  padding-top: var(--w-sp11);
  padding-right: var(--w-sp14);
  padding-bottom: var(--w-sp11);
  padding-left: var(--w-sp14);
  font-size: 0.71875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kn-tbl td{padding-top: var(--w-sp11); padding-right: var(--w-sp14); padding-bottom: var(--w-sp11); padding-left: var(--w-sp14); border-top-width: 0.0625rem; border-top-style: solid; border-top-color: var(--line-2); color: #4a4866;}
.kn-faq{display: grid; row-gap: var(--w-sp9); column-gap: var(--w-sp9); margin-top: 0; margin-right: 0; margin-bottom: var(--w-sp20); margin-left: 0;}
.kn-faq details{border-radius: var(--w-rad2); border-width: 0.0625rem; border-style: solid; border-color: var(--line-2); background: var(--navy-2);}
.kn-faq summary{cursor: pointer; padding-top: var(--w-sp14); padding-right: var(--w-sp16); padding-bottom: var(--w-sp14); padding-left: var(--w-sp16); font-weight: var(--w-wt2); font-size: 0.90625rem; color: var(--amb);}
.kn-faq p{margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: var(--w-sp16); padding-bottom: var(--w-sp15); padding-left: var(--w-sp16); color: #4a4866;}
.kn-band{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--w-sp16);
  column-gap: var(--w-sp16);
  max-width: 68.75rem;
  margin-top: var(--w-sp14);
  margin-right: auto;
  margin-bottom: var(--w-sp25);
  margin-left: auto;
  padding-top: var(--w-sp20);
  padding-right: var(--w-sp21);
  padding-bottom: var(--w-sp20);
  padding-left: var(--w-sp21);
  border-radius: var(--w-rad4);
  background: linear-gradient(110deg,var(--warm-2),var(--warm));
  width: calc(100% - 2.5rem);
}
.kn-band b{font-size: 1.0625rem; line-height: var(--w-lh3); max-width: 60ch; color: var(--txt);}

/* ---------- footer ---------- */
.kn-foot{background: #f2ecdd; border-top-width: 0.0625rem; border-top-style: solid; border-top-color: var(--line-2); margin-top: var(--w-sp8);}
.kn-foot .w{padding-top: var(--w-sp24); padding-bottom: var(--w-sp22); display: grid; row-gap: var(--w-sp20); column-gap: var(--w-sp20);}
.kn-foot .top{display: grid; grid-template-columns: 1.7fr repeat(4,1fr); row-gap: var(--w-sp21); column-gap: var(--w-sp21);}
.kn-foot .ab{display: grid; row-gap: var(--w-sp11); column-gap: var(--w-sp11); align-content: start;}
.kn-foot .ab p{margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; font-size: 0.78125rem; color: var(--mut); line-height: var(--w-lh5);}
.kn-foot .top>div{display: grid; row-gap: var(--w-sp8); column-gap: var(--w-sp8); align-content: start; min-width: 0;}
.kn-foot h4{font-size: 0.6875rem; letter-spacing: .15em; text-transform: uppercase; color: var(--amb);}
.kn-foot a{color: var(--mut); font-size: 0.8125rem;}
.kn-foot .pay,.kn-foot .trust{
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--w-sp9);
  column-gap: var(--w-sp9);
  padding-top: var(--w-sp18);
  border-top-width: 0.0625rem;
  border-top-style: solid;
  border-top-color: var(--line-2);
}
.kn-foot .pay span,.kn-foot .trust span{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.125rem;
  padding-top: 0;
  padding-right: var(--w-sp11);
  padding-bottom: 0;
  padding-left: var(--w-sp11);
  border-radius: var(--w-rad1);
  background: #ffffff;
}
.kn-foot .pay img{max-height: 1.1875rem; width: auto; object-fit: contain;}
.kn-foot .trust img{max-height: 1.3125rem; width: auto; object-fit: contain;}
.kn-foot .legal{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--w-sp13);
  column-gap: var(--w-sp13);
  padding-top: var(--w-sp17);
  border-top-width: 0.0625rem;
  border-top-style: solid;
  border-top-color: var(--line-2);
}
.kn-foot .legal p{margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; min-width: 15rem; font-size: 0.78125rem; color: var(--mut);}
.kn-foot .legal small{font-size: 0.75rem; color: var(--mut);}
.kn-foot .age{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border-width: 0.125rem;
  border-style: solid;
  border-color: var(--amb-2);
  color: var(--amb);
  font-weight: var(--w-wt3);
  font-size: 0.6875rem;
}

/* ---------- sticky join bar (desktop) + tab bar (phone) ---------- */
.kn-sticky{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  row-gap: var(--w-sp14);
  column-gap: var(--w-sp14);
  padding-top: var(--w-sp11);
  padding-right: var(--w-sp18);
  padding-bottom: var(--w-sp11);
  padding-left: var(--w-sp18);
  background: rgba(250,247,240,.97);
  border-top-width: 0.0625rem;
  border-top-style: solid;
  border-top-color: var(--line);
}
.kn-sticky.off{display: none;}
.kn-sticky span{font-size: 0.84375rem; color: var(--txt); font-weight: var(--w-wt1);}
.kn-sticky .kn-btn{min-height: 2.5rem; padding-top: 0; padding-right: var(--w-sp16); padding-bottom: 0; padding-left: var(--w-sp16); font-size: 0.8125rem;}
.kn-sticky .x{
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--line-2);
  background: transparent;
  color: var(--mut);
  font-size: 1.0625rem;
  line-height: var(--w-lh1);
  cursor: pointer;
}
.kn-tabs{display: none;}

@media(max-width:1000px){
  .kn-hero .w{grid-template-columns: 1fr;}
  /* The headline and both buttons come first on a phone. Floating the image above them (order:-1)
     looked better but pushed the CTA off the first screen, which is the one rule this shell is not
     allowed to break. The picture follows the buttons instead. */
  .kn-hero>.w>img{order: 2; aspect-ratio: 16/9;}
  .kn-hero .bd{order: 1;}
  .kn-hero h1,.kn-hero.big h1{font-size: 1.9375rem;}
  .kn-cats{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
  .kn-members{grid-template-columns: 1fr;}
  .kn-foot .top{grid-template-columns: 1fr 1fr;}
  .sp,.sp.alt{grid-template-columns: 1fr;}
  .sp img,.sp.alt img{order: -1; aspect-ratio: 16/9;}
  .kn-pills{display: none;}
  .kn-burger{display: inline-flex; align-items: center; justify-content: center;}
  .kn-head .w{justify-content: space-between;}
}
@media(max-width:760px){
  body{padding-bottom: calc(var(--tab) + 0.5rem);}
  .kn-stats,.kn-kpis{grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding-top: var(--w-sp15); padding-right: var(--w-sp15); padding-bottom: var(--w-sp15); padding-left: var(--w-sp15);}
  .kn-offers .gr{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
  .kn-offers .hd h2{font-size: 1.125rem;}
  .kn-offers .of b{font-size: 1.625rem;}
  .kn-stats b{font-size: 1.6875rem;}
  .kn-index>div{grid-template-columns: 1fr;}
  .kn-studios{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
  .kn-prose h1{font-size: 1.6875rem;}
  .kn-prose h2{font-size: 1.25rem; scroll-margin-top: 4.625rem;}
  .kn-sec .sh h2{font-size: 1.375rem;}
  .kn-band{margin-bottom: var(--w-sp21); padding-top: var(--w-sp18); padding-right: var(--w-sp18); padding-bottom: var(--w-sp18); padding-left: var(--w-sp18);}
  .kn-band b{font-size: 0.96875rem;}
  /* The sticky bar becomes the tab bar's job on a phone, so only one strip is ever pinned. */
  .kn-sticky{display: none;}
  .kn-tabs{
    display: grid;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    height: var(--tab);
    padding-top: var(--w-sp7);
    background: linear-gradient(180deg,#ffffff,#f2ecdd);
    border-top-width: 0.0625rem;
    border-top-style: solid;
    border-top-color: var(--line);
  }
  .kn-tabs a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: var(--w-sp2);
    column-gap: var(--w-sp2);
    color: var(--mut);
    font-size: 0.59375rem;
    font-weight: var(--w-wt2);
    text-transform: uppercase;
    letter-spacing: .02em;
    position: relative;
  }
  .kn-tabs a .i{font-size: 1.0625rem; line-height: var(--w-lh1);}
  .kn-tabs a.mid{color: var(--amb); justify-content: flex-end; padding-bottom: var(--w-sp7);}
  .kn-tabs a.mid .i{
    position: absolute;
    top: -1.1875rem;
    width: 2.9375rem;
    height: 2.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    color: #2d1a00;
    background: linear-gradient(180deg,var(--amb-3),var(--amb));
    border-width: 0.1875rem;
    border-style: solid;
    border-color: #f2ecdd;
    box-shadow: 0 0.25rem 0.6875rem rgba(201,162,39,.42);
  }
}
@media(max-width:520px){
  .w{padding-top: 0; padding-right: var(--w-sp15); padding-bottom: 0; padding-left: var(--w-sp15);}
  .kn-cats{grid-template-columns: 1fr;}
  .kn-offers .gr{grid-template-columns: 1fr;}
  .kn-offers .of{padding-top: var(--w-sp14); padding-right: var(--w-sp16); padding-bottom: var(--w-sp15); padding-left: var(--w-sp16);}
  .kn-hero h1,.kn-hero.big h1{font-size: 1.6875rem;}
  .kn-logo .wm b{font-size: 1.3125rem;}
  .kn-band{width: calc(100% - 1.875rem);}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior: auto;}
}
.kn-index a.on{color: var(--amb); font-weight: var(--w-wt1);}

/* Small phones. Lockup, three language pills and the burger are all nowrap with their own
   minimums, so at 320 the head row measured 357px and dragged the document sideways. Trim the
   wordmark and the pills; the burger keeps its 44px. */
@media(max-width:400px){
  .kn-head .w{row-gap: var(--w-sp8); column-gap: var(--w-sp8);}
  .kn-logo{row-gap: var(--w-sp6); column-gap: var(--w-sp6);}
  .kn-logo .wm b{font-size: 1.0625rem;}
  .kn-lang a{min-width: 1.875rem; padding-top: 0; padding-right: var(--w-sp4); padding-bottom: 0; padding-left: var(--w-sp4);}
  /* A KPI figure is one unbreakable token - RM75,000 at 30px wants 162px in a 123px cell - so the
     text ran past the cell and took the page sideways with it. Shrink the figure and the padding. */
  .kn-kpis,.kn-stats{row-gap: var(--w-sp8); column-gap: var(--w-sp8); padding-top: var(--w-sp12); padding-right: var(--w-sp12); padding-bottom: var(--w-sp12); padding-left: var(--w-sp12);}
  .kn-kpis b{font-size: 1.25rem;}
}

/* === image focal points === */
/* The part of the picture that must survive the crop is pinned to the same
   point of the box. */
img[src$="/assets/img/cat-live.jpg"]{object-position: 51.3% 37.7%;}
img[src$="/assets/img/hero-918kiss.jpg"]{object-position: 53.3% 29.3%;}
img[src$="/assets/img/hero-casino.jpg"]{object-position: 41.5% 30.7%;}
img[src$="/assets/img/hero-free-credit.jpg"]{object-position: 48.2% 33.0%;}
img[src$="/assets/img/hero-register.jpg"]{object-position: 53.4% 34.3%;}
/* === end image focal points === */