/* =========================
       TEMPLATE BASE (from your file)
       ========================= */
    :root{
      /* UM Official Color Palette */
      --um-blue: #004b8d;
      --um-blue-dark: #003366;
      --um-blue-light: #eef4f9;

      --bg: #fcfdfe;
      --text: #1a202c;
      --muted: #64748b;
      --accent: var(--um-blue);
      --line: #e2e8f0;
      --panel: #ffffff;
      --shadow: 0 4px 12px -2px rgba(0, 75, 141, 0.1);
      --r: 10px;
      --nav-height: 70px;

      /* Timeline vars (NURS-DIAL) */
      --grid:#E5E7EB;
      --axis:#CBD5E1;
      --current: rgba(99,102,241,.12);
      --currentLine: rgba(99,102,241,.55);
    }

    body{
      margin:0;
      font-family: "Inter", -apple-system, sans-serif;
      color: var(--text);
      background-color: var(--bg);
      line-height: 1.6;
      padding-top: var(--nav-height);
    }

    .container{ max-width: 1120px; margin: 0 auto; padding: 0 20px; }

    /* NAVIGATION */
    .nav{
      background: var(--panel);
      border-bottom: 3px solid var(--um-blue);
      position: fixed;
      top: 0; left: 0; right: 0;
      height: var(--nav-height);
      z-index: 1000;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
      display: flex;
      align-items: center;
    }

    .nav-in{
      display:flex;
      justify-content: space-between;
      align-items:center;
      gap:10px;
      width:100%;
      flex-wrap:wrap;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      text-decoration:none;
      color:inherit;
    }

    .brand strong{
      letter-spacing: -.01em;
      color: var(--um-blue-dark);
    }

    .navbtn{
      text-decoration:none;
      font-weight: 600;
      font-size: 0.85rem;
      color: var(--muted);
      padding: 8px 14px;
      border-radius: 6px;
      transition: 0.2s;
      border:1px solid transparent;
    }
    .navbtn:hover{
      color: var(--um-blue);
      background: var(--um-blue-light);
      border-color: var(--line);
    }

    section{
      padding: 18px 0;
      scroll-margin-top: calc(var(--nav-height) + 18px);
    }

    h2{
      font-size: 1.7rem;
      margin: 0 0 18px;
      border-left: 5px solid var(--um-blue);
      padding-left: 18px;
      color: var(--um-blue-dark);
    }

    .card{
      background: rgba(255,255,255,.92);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 18px;
      box-shadow: var(--shadow);
    }

    /* Mobile */
    @media (max-width: 768px){
      :root{ --nav-height: 60px; }
      .nav-in{ justify-content:center; }
      .brand{ display:none; }
      .navbtn{ font-size:.72rem; padding: 6px 8px; }
      h2{ font-size: 1.4rem; }
    }

    /* =========================
       NURS-DIAL STYLES (ported in, adjusted to fit template)
       ========================= */
    html{ scroll-behavior:smooth; }
    a{ color: inherit; }

    .hero{
      padding: 34px 0 10px;
      background: linear-gradient(180deg, #ffffff 0%, var(--um-blue-light) 100%);
      border-bottom: 1px solid var(--line);
    }

    .hero-card{
      border:1px solid var(--line);
      background: rgba(255,255,255,.86);
      border-radius: 22px;
      padding: 22px;
      box-shadow: 0 18px 40px rgba(16,24,40,.10);
    }

    h1{
      margin:0 0 10px;
      font-size: clamp(2.1rem, 1.3rem + 2.3vw, 3.2rem);
      line-height:1.06;
      text-wrap: balance;
      color: var(--um-blue-dark);
    }

    .lead{
      margin:0;
      color:#475569;
      max-width: 70ch;
      font-size: 1.06rem;
      text-wrap: pretty;
    }

    .chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
    .chip{
      border:1px solid var(--line);
      background: rgba(255,255,255,.75);
      padding: 8px 10px;
      border-radius: 999px;
      color: var(--muted);
      font-size: .92rem;
    }

    .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
    @media (max-width: 860px){ .grid2{ grid-template-columns: 1fr; } }

    .tabs{
      border:1px solid var(--line);
      background: rgba(255,255,255,.86);
      border-radius: 14px;
      box-shadow: 0 18px 40px rgba(16,24,40,.10);
      overflow:hidden;
    }
    .tabbar{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
      padding: 10px;
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,.6);
    }
    .tabbtn2{
      border:1px solid var(--line);
      background: rgba(255,255,255,.8);
      padding: 9px 12px;
      border-radius: 12px;
      cursor:pointer;
      color: var(--muted);
      transition: .15s ease;
      font-weight: 700;
    }
    .tabbtn2.active{
      color: var(--text);
      border-color: rgba(79,70,229,.25);
      box-shadow: 0 10px 18px rgba(79,70,229,.10);
      background: rgba(79,70,229,.08);
    }
    .tabpanes{ padding: 14px; }
    .pane{ display:none; }
    .pane.show{ display:block; }

    /* People */
    .people{ display:grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
    @media (max-width: 1100px){ .people{ grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 720px){ .people{ grid-template-columns: 1fr; } }

    .person{
      border:1px solid var(--line);
      background: rgba(255,255,255,.92);
      border-radius: 14px;
      overflow:hidden;
      box-shadow: 0 18px 40px rgba(16,24,40,.10);
      display:grid;
      grid-template-rows:auto 1fr;
    }
    .avatar{ aspect-ratio: 1/1; background: rgba(11,18,32,.06); overflow:hidden; }
    .avatar img{ width:100%; height:100%; object-fit: cover; object-position: 50% 1%; display:block; }
    .pbody{ padding: 12px 12px 14px; display:flex; flex-direction:column; }
    .pbody h3{ margin:0; font-size:.98rem; text-align:center; }
    .pbody .aff{ margin-top:2px; color:var(--muted); font-size:.8rem; margin-bottom:10px; text-align:center; }
    .pbody .bottomBlock{ margin-top:auto; display:flex; flex-direction:column; gap:4px; }
    .pbody .contactIcons{ display:flex; justify-content:center; gap:8px; }
    .pbody .iconbtn{
      display:inline-flex; align-items:center; justify-content:center;
      width: 26px; height: 26px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.8);
      color: var(--muted);
      text-decoration:none;
      transition: .15s ease;
    }
    .pbody .iconbtn:hover{
      color: var(--text);
      border-color: rgba(79,70,229,.25);
      background: rgba(79,70,229,.08);
    }
    .pbody .iconbtn svg{ width:16px; height:16px; }
    .person .pbody .logo{ width:100%; padding-top:4px; display:flex; justify-content:center; align-items:center; }
    .person .pbody .logo img{ height: 40px; width:auto; display:block; }

    /* Institutions */
    .logos{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 12px;
    }
    .uni{
      border:1px solid var(--line);
      background: rgba(255,255,255,.92);
      border-radius: 16px;
      padding: 10px;
      text-align:center;
      box-shadow: 0 18px 40px rgba(16,24,40,.10);
    }
    .uni .box{
      width: 150px; height: 150px;
      margin: 0 auto;
      border-radius: 12px;
      overflow:hidden;
      justify-content:center;  /* horizontal */
      align-items:center;      /* vertical */
      background: rgba(11,18,32,.05);
      border:1px solid rgba(11,18,32,.08);
    }
    .uni .box img{
      width:80%; height:80%;
      object-fit:contain;
      display:block;
      padding:10px;
    }
    .uni .name{ margin-top:8px; font-size:.9rem; color:var(--muted); }

    /* Timeline */
    #timeline .timelineCard{ padding: 14px 14px 10px; }
    #timeline .timelineHead{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom:10px;
    }
    #timeline .timelineTitle{ font-weight:900; letter-spacing:.2px; }
    #timeline .timelineMeta{ color:var(--muted); font-size:.95rem; }
    #timeline .timelinePill{
      display:inline-block;
      padding:6px 10px;
      border-radius:999px;
      background: rgba(99,102,241,.10);
      color: #3730A3;
      border:1px solid rgba(99,102,241,.18);
      font-weight:700;
    }
    #timelineChart{
      width: min(100%, 1100px);
      aspect-ratio: 1100 / 460;
      height: auto;
      display:block;
      margin: 0 auto;
    }

    /* Map */
    #worldMap{
      height: 520px;
      width: 100%;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--line);
      box-shadow: 0 18px 40px rgba(16,24,40,.10);
      background: rgba(255,255,255,.6);
      position: relative;
      z-index: 1;
    }
    .uni-popup{ display:flex; gap:10px; align-items:center; }
    .uni-popup img{ width:42px; height:42px; object-fit:cover; border-radius:8px; }

    footer{
      margin-top: 40px;
      padding: 24px 0 40px;
      text-align:center;
      color: var(--muted);
      border-top: 1px solid var(--line);
      background: #fff;
    }