/* Malaya Operations Platform hub diagram. Every rule is scoped to .hubd */
.hubd {
  /* Palette, named from the subject */
  --hubd-navy: #1F2A44;          /* platform core */
  --hubd-teal: #4A9B8E;          /* connections, ring, focus */
  --hubd-mint: #EAF5F2;          /* the woman / patient card */
  --hubd-paper: #FFFFFF;         /* page and cards */
  --hubd-desc: #555555;          /* card descriptions */
  --hubd-bullet: #44495A;        /* detail panel text */
  --hubd-hairline: #E2E6EB;      /* card borders */
  --hubd-sub: #5B6478;           /* subtitle under the logo */
  --hubd-shadow: 0 6px 18px rgba(31, 42, 68, .07);
  --hubd-shadow-lift: 0 20px 44px rgba(31, 42, 68, .16);
  --hubd-ease: cubic-bezier(.22, .61, .36, 1);
  --hubd-t: 360ms;
  --hubd-core: 220px;
  --hubd-gap: 16px;
  --hubd-card-w: 280px;
  --hubd-logo: 144px;
  --hubd-caption-w: 240px;

  position: relative; width: 100%; max-width: 1200px; margin: 0 auto; overflow: clip;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--hubd-navy); text-align: left;
}
.hubd *, .hubd *::before, .hubd *::after { box-sizing: border-box; }

/* Desktop: a fixed 1200 x 940 stage, scaled to fit the column */
.hubd-stage { position: absolute; top: 0; left: 0; width: 1200px; height: 940px; transform-origin: 0 0; }

.hubd-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.hubd-link { transition: opacity var(--hubd-t) var(--hubd-ease); }
.hubd-link-base {
  fill: none; stroke: var(--hubd-teal); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 6 8; opacity: .85;
  animation: hubd-flow 1.6s linear infinite;
}
.hubd-link-hot {
  fill: none; stroke: var(--hubd-teal); stroke-width: 3; stroke-linecap: round;
  opacity: 0; transition: opacity var(--hubd-t) var(--hubd-ease), stroke-width var(--hubd-t) var(--hubd-ease);
}
.hubd-dot { fill: var(--hubd-teal); transition: r 300ms var(--hubd-ease); }
.hubd-dot.is-glow { filter: drop-shadow(0 0 4px rgba(74, 155, 142, .95)); }
@keyframes hubd-flow { to { stroke-dashoffset: 28; } }

/* Centre: the Malaya logo on paper inside one thin teal ring; texts sit below it */
.hubd-core {
  position: absolute; z-index: 2;
  width: var(--hubd-core); height: var(--hubd-core); border-radius: 50%;
  background: var(--hubd-paper); color: var(--hubd-navy);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0;
  box-shadow: 0 14px 36px rgba(31, 42, 68, .10);
  opacity: 0; transform: scale(.8);
  transition: opacity 600ms var(--hubd-ease), transform 700ms var(--hubd-ease);
  outline: none;
}
.hubd-core::before {
  content: ""; position: absolute; inset: 0;
  border: 1.5px solid var(--hubd-teal); border-radius: 50%;
  animation: hubd-pulse 3s ease-in-out infinite alternate;
  pointer-events: none;
}
.hubd-core:focus-visible::after {
  content: ""; position: absolute; inset: -10px;
  border: 2px dashed var(--hubd-navy); border-radius: 50%;
}
@keyframes hubd-pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(1.04); opacity: .6; } }
.hubd.is-in-1 .hubd-core { opacity: 1; transform: scale(1); }

.hubd-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.hubd .hubd-logo .hubd-logo-img { display: block; width: var(--hubd-logo); max-width: none; height: auto; }
.hubd-caption {
  position: absolute; left: 50%; top: calc(100% + var(--hubd-gap));
  width: var(--hubd-caption-w); margin-left: calc(var(--hubd-caption-w) / -2);
  padding: 6px 10px 8px; border-radius: 10px; background: var(--hubd-paper);
}
.hubd-title {
  font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; color: var(--hubd-navy);
  min-height: 2.6em; display: flex; align-items: center; justify-content: center;
  margin: 0;
  transition: opacity 220ms var(--hubd-ease), transform 300ms var(--hubd-ease);
}
.hubd-title.is-swapping { opacity: 0; transform: translateY(6px); }
.hubd-sub { font-size: 12px; line-height: 1.4; color: var(--hubd-sub); margin: 4px 0 0; letter-spacing: .02em; }

.hubd-ripple {
  position: absolute; z-index: 1; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--hubd-teal); opacity: 0;
}
.hubd-ripple.is-going { animation: hubd-ripple 1100ms var(--hubd-ease) forwards; }
@keyframes hubd-ripple {
  from { transform: scale(1); opacity: .75; }
  to { transform: scale(var(--hubd-ripple-scale, 3)); opacity: 0; }
}

/* Cards */
.hubd-node { position: absolute; z-index: 3; width: var(--hubd-card-w); }
.hubd-node.is-on { z-index: 6; }
.hubd-enter {
  opacity: 0; transform: translate(var(--hubd-from-x, 0), var(--hubd-from-y, 14px));
  transition: opacity 520ms var(--hubd-ease), transform 620ms var(--hubd-ease);
  transition-delay: calc(var(--hubd-i, 0) * 120ms);
}
.hubd.is-in-3 .hubd-enter { opacity: 1; transform: none; }
.hubd-float {
  position: relative; background: var(--hubd-paper); border-radius: 12px;
  animation: hubd-float var(--hubd-float-dur, 6s) ease-in-out var(--hubd-float-delay, 0s) infinite;
}
@keyframes hubd-float { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }

.hubd-card {
  position: relative; display: block; background: var(--hubd-paper);
  border: 1px solid var(--hubd-hairline); border-radius: 12px;
  padding: 20px 22px 22px; box-shadow: var(--hubd-shadow);
  cursor: pointer; outline: none;
  transition: transform var(--hubd-t) var(--hubd-ease), box-shadow var(--hubd-t) var(--hubd-ease), border-color var(--hubd-t) var(--hubd-ease), opacity var(--hubd-t) var(--hubd-ease);
  -webkit-tap-highlight-color: transparent;
}
.hubd-card.is-highlight { background: var(--hubd-mint); border-color: var(--hubd-teal); }
.hubd-card:focus-visible { box-shadow: var(--hubd-shadow-lift), 0 0 0 3px var(--hubd-paper), 0 0 0 5px var(--hubd-teal); }
.hubd-card-title { font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--hubd-navy); margin: 0; }
.hubd-card-desc { font-size: 15px; line-height: 1.5; color: var(--hubd-desc); margin: 8px 0 0; }
.hubd-node.is-on .hubd-card { transform: translateY(-8px) scale(1.04); box-shadow: var(--hubd-shadow-lift); border-color: var(--hubd-teal); }
.hubd-node.is-on .hubd-card:focus-visible { box-shadow: var(--hubd-shadow-lift), 0 0 0 3px var(--hubd-paper), 0 0 0 5px var(--hubd-teal); }
.hubd-card.is-pinged { animation: hubd-ping 700ms var(--hubd-ease); }
@keyframes hubd-ping { 40% { border-color: var(--hubd-teal); box-shadow: 0 0 0 4px rgba(74, 155, 142, .22), var(--hubd-shadow); } }

/* Detail panel: slides out under the card */
.hubd-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  display: grid; grid-template-rows: 0fr;
  opacity: 0; transform: translateY(-8px); visibility: hidden;
  transition: grid-template-rows var(--hubd-t) var(--hubd-ease), opacity var(--hubd-t) var(--hubd-ease), transform var(--hubd-t) var(--hubd-ease), visibility 0s linear var(--hubd-t);
  pointer-events: none;
}
.hubd-panel-inner { overflow: hidden; min-height: 0; }
.hubd-list {
  list-style: none; margin: 0; padding: 14px 18px;
  background: var(--hubd-paper); border-radius: 10px;
  border-left: 2px solid var(--hubd-teal);
  box-shadow: 0 12px 30px rgba(31, 42, 68, .12);
}
.hubd-list li {
  position: relative; padding-left: 16px; margin: 0;
  font-size: 14px; line-height: 1.45; color: var(--hubd-bullet);
}
.hubd-list li + li { margin-top: 7px; }
.hubd-list li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px;
  border-radius: 1px; background: var(--hubd-teal);
}
.hubd-node.is-on .hubd-panel { grid-template-rows: 1fr; opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }

/* Dimming: everything not in focus fades to 35% */
.hubd.has-on .hubd-node:not(.is-on) .hubd-card { opacity: .35; }
.hubd.has-on .hubd-link:not(.is-on) { opacity: .35; }
.hubd-link.is-on .hubd-link-hot, .hubd.hub-on .hubd-link-hot { opacity: 1; }
.hubd.hub-on .hubd-link-hot { stroke-width: 2.5; }
.hubd .hubd-link.is-on .hubd-link-hot { stroke-width: 3; }
.hubd.hub-on .hubd-node:not(.is-on) .hubd-card, .hubd.hub-on .hubd-link:not(.is-on) { opacity: 1; }

/* Phone and narrow tablet: vertical stack, centre on top */
@media (max-width: 767.98px) {
  .hubd { --hubd-core: 196px; --hubd-gap: 12px; --hubd-logo: 126px; --hubd-caption-w: 230px; max-width: 480px; }
  .hubd-stage {
    position: relative; width: auto; height: auto; transform: none !important; left: auto !important;
    display: flex; flex-direction: column; align-items: stretch; gap: 26px;
    padding: 36px 0 12px;
  }
  .hubd-core { position: relative; align-self: center; margin-bottom: 100px; left: auto !important; top: auto !important; }
  .hubd-node { position: relative; width: auto; left: auto !important; top: auto !important; }
  .hubd-panel { position: relative; top: auto; }
  .hubd-node.is-on .hubd-panel { margin-top: 10px; }
  .hubd-node.is-on .hubd-card { transform: translateY(-4px) scale(1.02); }
}

/* Reduced motion: no floating, flowing, dots, pulse, ripple or entrance; highlights stay */
.hubd.is-rm .hubd-float, .hubd.is-rm .hubd-link-base, .hubd.is-rm .hubd-core::before { animation: none; }
.hubd.is-rm .hubd-dot, .hubd.is-rm .hubd-ripple { display: none; }
.hubd.is-rm .hubd-core, .hubd.is-rm .hubd-enter { transition: none; }
.hubd.is-rm .hubd-card.is-pinged { animation: none; }

/* Site placement on ecosystem.html: keep the diagram inside the column on phones */
.eco-figure--hub{margin-left:0;margin-right:0;}
.eco-figure--hub figcaption{padding:0;}