.elementor-52346 .elementor-element.elementor-element-89ef44a{--display:grid;--e-con-grid-template-columns:repeat(0, 1fr);--e-con-grid-template-rows:repeat(0, 1fr);--grid-auto-flow:row;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-52346 .elementor-element.elementor-element-e99d39f{--display:flex;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-52346 .elementor-element.elementor-element-89ef44a{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-52346 .elementor-element.elementor-element-89ef44a{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for html, class: .elementor-element-bad6140 *//* =========================================================
   LEGACY HERO MIGRATION FIX
   ========================================================= */


/* ---------------------------------------------------------
   1. NEUTRALISE ALL E-CON ANCESTORS THAT CONTAIN THIS HERO
   --------------------------------------------------------- */

/*
 * Important:
 * Do NOT use > here.
 *
 * This catches every Elementor flex container ABOVE 613649d,
 * even when Elementor has inserted wrappers between them.
 */
body .e-con:has(.elementor-element-613649d) {
    --display: block !important;
    display: block !important;

    --flex-direction: initial !important;
    --flex-wrap: initial !important;
    --justify-content: initial !important;
    --align-items: initial !important;
    --align-content: initial !important;

    --gap: 0px !important;
    gap: 0 !important;

    width: 100% !important;
    max-width: none !important;
}


/* Also stop the imported legacy section behaving as a flex item */
body .elementor-element.elementor-element-613649d {
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    align-self: auto !important;

    position: relative !important;

    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}


/* ---------------------------------------------------------
   2. HERO'S OWN LEGACY CONTAINER
   --------------------------------------------------------- */

body .elementor-element.elementor-element-613649d
> .elementor-container {
    width: 100% !important;
    max-width: none !important;

    min-height: 407px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    display: flex !important;
    align-items: center !important;
}


/* =========================================================
   RESEARCH NEWS IMAGE
   Widget: 1e6164e
   Original rendered behaviour
   ========================================================= */

.elementor-element.elementor-element-1e6164e {
    width: 100% !important;
    max-width: 100% !important;

    text-align: start !important;

    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

.elementor-element.elementor-element-1e6164e
> .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;

    text-align: start !important;
}

.elementor-element.elementor-element-1e6164e img,
.elementor-element.elementor-element-1e6164e img.wp-image-50903,
.elementor-element.elementor-element-1e6164e img.attachment-full {
    display: inline-block !important;

    width: 44% !important;
    max-width: 100% !important;
    height: auto !important;

    vertical-align: middle !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* ---------------------------------------------------------
   4. ENSURE INNER LEGACY SECTION ISN'T CONVERTED INTO
      ANOTHER FLEX-SIZED OBJECT
   --------------------------------------------------------- */

body .elementor-element.elementor-element-900f275 {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    align-self: auto !important;
}


/* ---------------------------------------------------------
   5. TYPOGRAPHY
   --------------------------------------------------------- */

body .elementor-element.elementor-element-3468fbe
.elementor-heading-title {
    font-family: "Roboto", Sans-serif !important;
    font-size: 35px !important;
    font-weight: 600 !important;
    color: #F5F5F5 !important;
}

body .elementor-element.elementor-element-3343113
.elementor-heading-title {
    font-family: "Roboto", Sans-serif !important;
    font-size: 23px !important;
    font-weight: 400 !important;
    color: #6EC1E4 !important;
}


/* ---------------------------------------------------------
   6. HORIZONTAL OVERFLOW
   --------------------------------------------------------- */

html,
body {
    overflow-x: clip;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f8ad206 */div.ids-person-card h3 {margin: 0 0 5px !important;
  color: #10243e;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 650;
}

div.ids-focus-card h3 {margin: 0 0 5px !important;
  color: #10243e;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 650;
}

/* =========================================================
   HKU IDS · Nikola Visiting Research Feature
   ========================================================= */

.ids-story {
  --navy:#10243e;
  --blue:#0877d1;
  --cyan:#49aeca;
  --gold:#d5a044;
  --ink:#263443;
  --muted:#667482;
  --line:#dce4eb;
  --soft:#f5f8fa;
  --white:#fff;

  width:100%;
  max-width:1160px;
  margin:0 auto;
  padding:58px 24px 76px;
  font-family:inherit;
  color:var(--ink);
  font-size:15.5px;
  line-height:1.72;
}

.ids-story *,
.ids-story *::before,
.ids-story *::after {
  box-sizing:border-box;
}

.ids-story h2,
.ids-story h3,
.ids-story p,
.ids-story figure,
.ids-story blockquote {
  margin:0;
}

.ids-story p + p {
  margin-top:17px;
}

.ids-story-section {
  margin-top:68px;
}

.ids-story-section:first-child {
  margin-top:0;
}

/* ---------- General typography ---------- */

.ids-story h2 {
  color:var(--blue);
  font-size:clamp(22px,2.2vw,29px);
  line-height:1.2;
  font-weight:650;
  margin-bottom:22px;
}

.ids-eyebrow {
  display:block;
  margin-bottom:8px;
  color:var(--blue);
  font-size:10px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.12em;
}

.ids-lead {
  color:#42505e;
  font-size:16px;
  line-height:1.75;
}

/* =========================================================
   INTRO + PEOPLE
   ========================================================= */

.ids-intro-grid {
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr);
  gap:52px;
  align-items:start;
}

.ids-intro-copy {
  padding-top:4px;
}

.ids-people-stack {
  display:grid;
  gap:13px;
  align-self:start;
}

/* ---------- Person card ---------- */

.ids-person-card {
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:20px;
  align-items:center;
  padding:20px 22px;
  border:1px solid var(--line);
  background:var(--white);
  transition:border-color .2s ease, box-shadow .2s ease;
}

.ids-person-card:hover {
  border-color:#c9d7e3;
  box-shadow:0 5px 18px rgba(16,36,62,.045);
}

.ids-person-photo {
  display:block;
  width:92px;
  height:92px;
  border-radius:50%;
  object-fit:cover;
  object-position:center;
}

.ids-person-role {
  margin-bottom:5px;
  background-color:var(--blue);
  color:var(--white);
  font-size:9px;
  line-height:1.35;
  font-weight:650;
  letter-spacing:.11em;
}

.ids-person-name {
  margin:0 0 5px !important;
  color:var(--navy);
  font-size:18px;
  line-height:1.25;
  font-weight:650;
}

.ids-person-name a {
  color:inherit !important;
  text-decoration:none !important;
}

.ids-person-details {
  color:var(--muted);
  font-size:12.5px;
  line-height:1.48;
}

/* =========================================================
   RESEARCH SECTION
   ========================================================= */

.ids-research-heading {
  max-width:680px;
  margin-bottom:30px;
}

.ids-research-layout {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:48px;
  align-items:start;
}

/* ---------- Non-linear research map ---------- */

.ids-focus-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  border:1px solid var(--line);
  background:var(--line);
}

.ids-focus-card {
  min-height:160px;
  padding:24px 26px;
  background:var(--white);
}

.ids-focus-card.is-anchor {
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--navy);
}

.ids-focus-icon {
  width:30px;
  height:30px;
  margin-bottom:17px;
}

.ids-focus-icon svg {
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:var(--blue);
  stroke-width:1.75;
}

.ids-focus-card:nth-child(3) .ids-focus-icon svg {
  stroke:var(--cyan);
}

.ids-focus-card:nth-child(4) .ids-focus-icon svg {
  stroke:var(--gold);
}

.ids-focus-name {
  margin:0 0 7px !important;
  color:var(--navy);
  font-size:16px;
  line-height:1.25;
  font-weight:650;
}

.ids-focus-copy {
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}

.ids-focus-card.is-anchor .ids-focus-name {
  color:var(--white);
  font-size:19px;
}

.ids-focus-card.is-anchor .ids-focus-copy {
  color:rgba(255,255,255,.72);
}

.ids-research-copy {
  padding-top:2px;
}

/* =========================================================
   OUTCOME JOURNEY
   ========================================================= */

.ids-outcome-wrap {
  margin-top:29px;
  padding-top:22px;
  border-top:1px solid var(--line);
}

.ids-outcome-heading {
  margin-bottom:18px;
}

.ids-outcome-track {
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.ids-outcome-track::before {
  content:"";
  position:absolute;
  top:16px;
  left:0%;
  right:30%;
  height:1px;
  background:#bfcfdb;
  z-index:0;
}

.ids-outcome-step {
  position:relative;
  z-index:1;
}

.ids-outcome-node {
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  margin-bottom:11px;
  border:1px solid #a9c9df;
  border-radius:50%;
  background:var(--white);
  color:var(--blue);
  font-size:10px;
  line-height:1;
  font-weight:750;
}

.ids-outcome-step.is-result .ids-outcome-node {
  border-color:var(--navy);
  background:var(--navy);
  color:var(--white);
}

.ids-outcome-title {
  color:var(--navy);
  font-size:12px;
  line-height:1.35;
  font-weight:650;
}

.ids-outcome-step.is-result .ids-outcome-title {
  color:var(--blue);
}

/* =========================================================
   LEARNING / QUOTE
   ========================================================= */

.ids-learning-grid {
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:48px;
  align-items:center;
}

.ids-quote-card {
  position:relative;
  padding:40px 42px 31px;
  background:var(--navy);
  overflow:hidden;
}

.ids-quote-card::after {
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:5px;
  height:100%;
  background:var(--cyan);
}

.ids-quote-mark {
  position:absolute;
  top:19px;
  left:28px;
  color:var(--cyan);
  font-family:Georgia,"Times New Roman",serif;
  font-size:48px;
  line-height:1;
  opacity:.72;
}

.ids-quote-text {
  position:relative;
  z-index:1;
  color:var(--white);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(19px,2vw,25px);
  line-height:1.47;
}

.ids-quote-text em {
  color:#aadce8;
  font-style:normal;
}

.ids-quote-credit {
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.66);
  font-size:11px;
  line-height:1.45;
}

.ids-quote-credit strong {
  color:var(--white);
  font-weight:650;
}

/* =========================================================
   CLOSING
   ========================================================= */

.ids-close {
  display:grid;
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);
  background:var(--soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.ids-close-media {
  min-height:360px;
  margin:0;
  overflow:hidden;
  background:#e9eef2;
}

.ids-close-media img {
  display:block;
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
  object-position:center 38%;
}

.ids-close-content {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:42px 48px;
}

.ids-close-content p {
  max-width:570px;
}

.ids-close-caption {
  margin-top:60px !important;
  color:#7b8791;
  font-size:10.5px;
  line-height:1.45;
}

/* ---------- CTA ---------- */

.ids-cta {
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  margin-top:25px;
  padding:11px 0 8px;
  border-bottom:1px solid var(--blue);
  color:var(--blue) !important;
  font-size:12px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none !important;
  transition:gap .18s ease;
}

.ids-cta:hover {
  gap:15px;
}

.ids-cta-arrow {
  font-size:16px;
  font-weight:400;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px) {

  .ids-story {
    max-width:900px;
    padding:46px 30px 65px;
    font-size:15px;
  }

  .ids-story-section {
    margin-top:56px;
  }

  .ids-intro-grid {
    grid-template-columns:minmax(0,1fr) 330px;
    gap:34px;
  }

  .ids-person-card {
    grid-template-columns:74px minmax(0,1fr);
    gap:16px;
    padding:17px;
  }

  .ids-person-photo {
    width:74px;
    height:74px;
  }

  .ids-person-details {
    font-size:11.5px;
  }

  .ids-research-layout {
    gap:34px;
  }

  .ids-focus-card {
    min-height:150px;
    padding:21px;
  }

  .ids-learning-grid {
    gap:34px;
  }

  .ids-quote-card {
    padding:36px 34px 27px;
  }

  .ids-close {
    grid-template-columns:310px minmax(0,1fr);
  }

  .ids-close-content {
    padding:35px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:767px) {

  .ids-story {
    padding:34px 20px 52px;
    font-size:15px;
    line-height:1.72;
  }

  .ids-story-section {
    margin-top:45px;
  }

  .ids-story h2 {
    margin-bottom:16px;
  }

  .ids-intro-grid,
  .ids-research-layout,
  .ids-learning-grid {
    grid-template-columns:1fr;
    gap:26px;
  }

  .ids-people-stack {
    gap:10px;
  }

  .ids-person-card {
    grid-template-columns:70px minmax(0,1fr);
    gap:15px;
    padding:16px;
  }

  .ids-person-photo {
    width:70px;
    height:70px;
  }

  .ids-person-role {
    font-size:8px;
  }

  .ids-person-name {
    font-size:16px;
  }

  .ids-focus-grid {
    grid-template-columns:1fr;
  }

  .ids-focus-card {
    min-height:0;
    padding:21px;
  }

  .ids-focus-card.is-anchor {
    min-height:145px;
  }

  .ids-outcome-track {
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    padding-left:3px;
  }

  .ids-outcome-track::before {
    top:16px;
    bottom:16px;
    left:18px;
    right:auto;
    width:1px;
    height:auto;
  }

  .ids-outcome-step {
    display:grid;
    grid-template-columns:36px minmax(0,1fr);
    gap:12px;
    align-items:center;
    min-height:58px;
  }

  .ids-outcome-node {
    margin:0;
  }

  .ids-quote-card {
    padding:37px 27px 27px;
  }

  .ids-quote-mark {
    left:20px;
  }

  .ids-close {
    grid-template-columns:1fr;
  }

  .ids-close-media {
    min-height:0;
    aspect-ratio:4 / 3;
  }

  .ids-close-media img {
    min-height:0;
    height:100%;
    object-position:center 32%;
  }

  .ids-close-content {
    padding:28px 24px 32px;
  }
}/* End custom CSS */